https://assets.bodyspec.com/master/4953-b502c4763a12be92e3e4.js

1"use strict";(self.webpackChunkweb_v3=self.webpackChunkweb_v3||[]).push([[4953],{94953:function(e,t,n){n.r(t),n.d(t,{default:function(){return N}});var r=n(67294),o=n(92826),a=n(30718),l=n(15341);const s=e=>{let{error:t}=e;return r.createElement("div",{className:"styles-module--error--a9560"},r.createElement("h3",null,"Error rendering component"),r.createElement("p",null,`${t}`))},c=(e,t)=>(0,r.useMemo)((()=>{if(!(0,l.Ym)())return()=>null;const n={React:r,...t},c=Object.keys(n),i=Object.values(n);try{const{code:t}=a.transform(`(${e})`,{presets:["react"]}),n=(0,o.Z)(Function,c.concat([`return ${t}`])).apply(void 0,i);if("function"==typeof n)return n;throw new Error("Output is not a function")}catch(d){return()=>r.createElement(s,{error:d})}}),[e,t]);var i=n(83576);const d=e=>"edit"===e?"() => <Instructions />":"list"===e?"() => <Spinner />":"() => null",u=(e,t)=>{const{0:n,1:o}=(0,r.useState)({code:d(e),layout:[]});return(0,r.useEffect)((()=>{t?(async()=>{try{const e=await(0,i.t)(i.A.loadWidgets,{table:"Widgets",name:t});if(e){const t=await e.json();t&&t.code&&o(t)}}catch(e){}})():o({code:d(e),layout:[]})}),[e,t]),(0,r.useMemo)((()=>({...n,setCode:e=>{o({...n,code:e})}})),[n.code,n.layout])};var m=n(92130),y=n.n(m),g=n(94578);const f=e=>{let{children:t,fallback:n}=e,o=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).state={hasError:!1,err:null},t}(0,g.Z)(t,e),t.getDerivedStateFromError=function(e){return{hasError:!0,err:e}};var r=t.prototype;return r.componentDidCatch=function(e,t){console.debug("Render crash:",e,t)},r.render=function(){return this.state.hasError?n(this.state.err):this.props.children},t}(r.Component);return r.createElement(o,{fallback:n},t)};var p=n(338),h="styles-module--radius--f5865";const w=e=>{let t,{children:n,showError:o,layout:a,widget:l}=e;"string"==typeof n&&(n=r.createElement(p.U,{markdown:n})),t=o?e=>r.createElement(s,{error:e}):()=>r.createElement(s,{error:"Oh no, we encountered an issue. Please reload the page."});const c=l;return r.createElement("div",{className:y()({"styles-module--wrapper--857be":!0,[h]:null==a?void 0:a.includes("rounded-edges"),"styles-module--shadow--ecbf0":null==a?void 0:a.includes("drop-shadow")})},n,r.createElement("div",{className:y()({"styles-module--layout--9fa00":!0,"styles-module--border--e5292":null==a?void 0:a.includes("gray-border"),[h]:null==a?void 0:a.includes("rounded-edges")})},r.createElement(f,{fallback:t},r.createElement(c,null))))};var E=n(25178),b=n(71382);const v=e=>{let{code:t,setCode:n}=e;const o=(0,r.useRef)(null);return(0,r.useEffect)((()=>{o.current&&new b.Z(o.current,{autoHide:!1,forceVisible:"y",classNames:{vertical:"styles-module--scrollbar--16964"}})}),[o.current]),r.createElement("div",{className:"styles-module--editor--23180",ref:o},r.createElement(E.Z,{className:"styles-module--code--73337",language:"js",value:t,onChange:e=>n(e.target.value)}))};const k=()=>r.createElement("div",{className:"styles-module--instructions--96752"},r.createElement(p.U,{markdown:'## How to use this\n\n1. Paste the below prompt into Claude\n2. Ask it for the widget you\'d like to code\n3. Test regularly (by pasting back into the form)\n4. Load into [Airtable](https://airtable.com/appFK9x2lK6Craayt/tblNimENh3kV9jo4t/viw4U1FKHKmtofMYn)\n5. Load into ContentPages via `<DynamicWidget name="widget-name" />`\n6. Load into blogs via `<x-widget name="widget-name" />`\n\n#### Here\'s the prompt to get started\n\n```\n# Widget Coding Guidelines\n\nPlease help me write a widget. Read the guidelines first and then follow the instructions.\n\n---\n\n## Code Guidelines\n\n1. Sample valid output:\n\n~~~\n() =>

1 {\n  const styles = { /* see style checklist below */ };\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <div style={styles.wrapper}>\n      <p style={styles.text}>Hello world! {count}</p>\n      <button\n        style={styles.button}\n        onClick={() => setCount(count + 1)}\n      >\n        Click Me\n      </button>\n    </div>\n  );\n}\n~~~\n\n2. Must-follow rules\n- Function is anonymous: exactly `() => {}` (no name, no export).\n- No imports! ONLY React exists in the default scope.\n- Do not load external scripts or inject <script /> tags.\n- Inline styles only: use `style={…}` objects.\n\n3. Style checklist\n- **Color Standards**\n  - newdark (standard text):\n    - #1C3133\n  - salad90 (foreground, buttons)\n    - #9DDEAD\n  - salad60 (background, green)\n    - #E5F6EB\n  - newdark15 (background, gray)\n    - #DFE2E2\n  - white0 (background, white)\n    - #FFFFFF\n  - greentext (foreground, accent text)\n    - #60C888\n  - blueAction (foreground, accent)\n    - #46C9F7\n  - softred (foreground, accent, use rarely)\n    - #F9DFDF\n- **Wrapper**\n  - border: 1px solid newdark15 (#DFE2E2)\n  - border-radius: 0.5rem\n  - font-family: Poppins, sans-serif\n  - text color: newdark (#1C3133)\n  - padding: 1rem\n- **Text**\n  - font-size: appropriate for readability\n  - margin-bottom: space between text and button\n  - color: newdark (#1C3133)\n- **Button**\n  - all buttons\n    - padding: 0.5rem 1rem\n    - border-radius: 0.5rem\n    - font-weight: 500\n    - white-space: nowrap\n    - display: flex\n    - justify-content: center\n  - "light" variant (default)\n    - background-color: salad90 (#9DDEAD)\n    - border: 1px solid salad90 (#9DDEAD)\n    - text color: newdark (#1C3133)\n\n---\n\n## Instructions:\n\n* Once you have read this, ask me about the details of the widget I\'d like to write.\n* Ask any questions you need to clarify the design and function.\n* Load your code into an Artifact using the "application/vnd.ant.react" type so we can see it work.\n* All iterations of the widget being worked on MUST be written following the guidelines.\n* Remember that the widget will be displayed in the conversation, so design accordingly.\n```\n'})),C=e=>{let{name:t}=e;const{code:n,layout:o,setCode:a}=u("edit",t),l=c(n,{Instructions:k});return r.createElement("div",{className:"styles-module--edit--851c3"},r.createElement("div",{className:"styles-module--form--4445f"},r.createElement(v,{code:n,setCode:a})),r.createElement("hr",null),r.createElement(w,{showError:!0,layout:o,widget:l}))};var F=n(66009);const x=()=>{const e=(()=>{const{0:e,1:t}=(0,r.useState)([]);return(0,r.useEffect)((()=>{(async()=>{try{const e=await(0,i.t)(i.A.loadWidgets,{table:"Widgets",action:"list-all"});if(e){const n=await e.json();if(null!=n&&n.widgets)return void t(null==n?void 0:n.widgets)}}catch(e){}})()}),[]),e})(),{0:t,1:n}=(0,r.useState)(),{code:o,layout:a}=u("list",t),l=c(o,{Spinner:F.Z});return(0,r.useEffect)((()=>{e.length>0&&!t&&n(e[0])}),[e.length]),r.createElement("div",{className:"styles-module--list--ae3b8"},r.createElement("div",{className:"styles-module--form--bbe5e"},r.createElement("select",{value:t,onChange:e=>n(e.target.value)},r.createElement("option",{value:""},"Select a widget"),e.map(((e,t)=>r.createElement("option",{key:e+"_"+t,value:e},e))))),r.createElement("hr",null),r.createElement(w,{showError:!0,layout:a,widget:l}))},D=e=>{let{name:t}=e;const{code:n,layout:o}=u("render",t),a=c(n);return r.createElement(w,{layout:o,widget:a})};var N=e=>{let{mode:t="render",name:n}=e;return"edit"===t?r.createElement(C,{name:n}):"list"===t?r.createElement(x,null):"render"===t?r.createElement(D,{name:n}):null}}}]);
2//# sourceMappingURL=4953-b502c4763a12be92e3e4.js.map