[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-vercel-labs-react":3,"mdc--l4c0q3-key":35,"related-org-vercel-labs-react":5413,"related-repo-vercel-labs-react":5581},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":24,"repoUrl":25,"updatedAt":26,"license":27,"forks":28,"topics":29,"repo":30,"sourceUrl":33,"mdContent":34},"react","render React components from JSON specifications","React renderer for json-render that turns JSON specs into React components. Use when working with @json-render\u002Freact, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"vercel-labs","Vercel Labs","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fvercel-labs.png",[12,15,18,21],{"name":13,"slug":4,"type":14},"React","tag",{"name":16,"slug":17,"type":14},"JSON","json",{"name":19,"slug":20,"type":14},"UI Components","ui-components",{"name":22,"slug":23,"type":14},"Frontend","frontend",15678,"https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fjson-render","2026-07-17T06:04:00.350807",null,845,[],{"repoUrl":25,"stars":24,"forks":28,"topics":31,"description":32},[],"The Generative UI framework","https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fjson-render\u002Ftree\u002FHEAD\u002Fskills\u002Freact","---\nname: react\ndescription: React renderer for json-render that turns JSON specs into React components. Use when working with @json-render\u002Freact, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.\n---\n\n# @json-render\u002Freact\n\nReact renderer that converts JSON specs into React component trees.\n\n## Quick Start\n\n```typescript\nimport { defineRegistry, Renderer } from \"@json-render\u002Freact\";\nimport { catalog } from \".\u002Fcatalog\";\n\nconst { registry } = defineRegistry(catalog, {\n components: {\n Card: ({ props, children }) => \u003Cdiv>{props.title}{children}\u003C\u002Fdiv>,\n },\n});\n\nfunction App({ spec }) {\n return \u003CRenderer spec={spec} registry={registry} \u002F>;\n}\n```\n\n## Creating a Catalog\n\n```typescript\nimport { defineCatalog } from \"@json-render\u002Fcore\";\nimport { schema } from \"@json-render\u002Freact\u002Fschema\";\nimport { defineRegistry } from \"@json-render\u002Freact\";\nimport { z } from \"zod\";\n\n\u002F\u002F Create catalog with props schemas\nexport const catalog = defineCatalog(schema, {\n components: {\n Button: {\n props: z.object({\n label: z.string(),\n variant: z.enum([\"primary\", \"secondary\"]).nullable(),\n }),\n description: \"Clickable button\",\n },\n Card: {\n props: z.object({ title: z.string() }),\n description: \"Card container with title\",\n },\n },\n});\n\n\u002F\u002F Define component implementations with type-safe props\nconst { registry } = defineRegistry(catalog, {\n components: {\n Button: ({ props }) => (\n \u003Cbutton className={props.variant}>{props.label}\u003C\u002Fbutton>\n ),\n Card: ({ props, children }) => (\n \u003Cdiv className=\"card\">\n \u003Ch2>{props.title}\u003C\u002Fh2>\n {children}\n \u003C\u002Fdiv>\n ),\n },\n});\n```\n\n## Spec Structure (Element Tree)\n\nThe React schema uses an element tree format:\n\n```json\n{\n \"root\": {\n \"type\": \"Card\",\n \"props\": { \"title\": \"Hello\" },\n \"children\": [\n { \"type\": \"Button\", \"props\": { \"label\": \"Click me\" } }\n ]\n }\n}\n```\n\n## Visibility Conditions\n\nUse `visible` on elements to show\u002Fhide based on state. New syntax: `{ \"$state\": \"\u002Fpath\" }`, `{ \"$state\": \"\u002Fpath\", \"eq\": value }`, `{ \"$state\": \"\u002Fpath\", \"not\": true }`, `{ \"$and\": [cond1, cond2] }` for AND, `{ \"$or\": [cond1, cond2] }` for OR. Helpers: `visibility.when(\"\u002Fpath\")`, `visibility.unless(\"\u002Fpath\")`, `visibility.eq(\"\u002Fpath\", val)`, `visibility.and(cond1, cond2)`, `visibility.or(cond1, cond2)`.\n\n## Providers\n\n| Provider | Purpose |\n|----------|---------|\n| `StateProvider` | Share state across components (JSON Pointer paths). Accepts optional `store` prop for controlled mode. |\n| `ActionProvider` | Handle actions dispatched via the event system |\n| `VisibilityProvider` | Enable conditional rendering based on state |\n| `ValidationProvider` | Form field validation |\n\n### External Store (Controlled Mode)\n\nPass a `StateStore` to `StateProvider` (or `JSONUIProvider` \u002F `createRenderer`) to use external state management (Redux, Zustand, XState, etc.):\n\n```tsx\nimport { createStateStore, type StateStore } from \"@json-render\u002Freact\";\n\nconst store = createStateStore({ count: 0 });\n\n\u003CStateProvider store={store}>{children}\u003C\u002FStateProvider>\n\n\u002F\u002F Mutate from anywhere — React re-renders automatically:\nstore.set(\"\u002Fcount\", 1);\n```\n\nWhen `store` is provided, `initialState` and `onStateChange` are ignored.\n\n## Dynamic Prop Expressions\n\nAny prop value can be a data-driven expression resolved by the renderer before components receive props:\n\n- **`{ \"$state\": \"\u002Fstate\u002Fkey\" }`** - reads from state model (one-way read)\n- **`{ \"$bindState\": \"\u002Fpath\" }`** - two-way binding: reads from state and enables write-back. Use on the natural value prop (value, checked, pressed, etc.) of form components.\n- **`{ \"$bindItem\": \"field\" }`** - two-way binding to a repeat item field. Use inside repeat scopes.\n- **Filtered lists**: `repeat` plus an `$item` visible condition on the same container renders only matching items: `{ \"repeat\": { \"statePath\": \"\u002Ftasks\", \"key\": \"id\" }, \"visible\": { \"$item\": \"status\", \"eq\": \"todo\" }, \"children\": [\"task-card\"] }`. AND-composed `$state` conjuncts gate the container shell; `$item`\u002F`$index` conjuncts filter items.\n- **`{ \"$cond\": \u003Ccondition>, \"$then\": \u003Cvalue>, \"$else\": \u003Cvalue> }`** - conditional value\n- **`{ \"$template\": \"Hello, ${\u002Fname}!\" }`** - interpolates state values into strings\n- **`{ \"$computed\": \"fn\", \"args\": { ... } }`** - calls registered functions with resolved args\n\n```json\n{\n \"type\": \"Input\",\n \"props\": {\n \"value\": { \"$bindState\": \"\u002Fform\u002Femail\" },\n \"placeholder\": \"Email\"\n }\n}\n```\n\nComponents do not use a `statePath` prop for two-way binding. Use `{ \"$bindState\": \"\u002Fpath\" }` on the natural value prop instead.\n\nComponents receive already-resolved props. For two-way bound props, use the `useBoundProp` hook with the `bindings` map the renderer provides.\n\nRegister `$computed` functions via the `functions` prop on `JSONUIProvider` or `createRenderer`:\n\n```tsx\n\u003CJSONUIProvider\n functions={{ fullName: (args) => `${args.first} ${args.last}` }}\n>\n```\n\n## Event System\n\nComponents use `emit` to fire named events, or `on()` to get an event handle with metadata. The element's `on` field maps events to action bindings:\n\n```tsx\n\u002F\u002F Simple event firing\nButton: ({ props, emit }) => (\n \u003Cbutton onClick={() => emit(\"press\")}>{props.label}\u003C\u002Fbutton>\n),\n\n\u002F\u002F Event handle with metadata (e.g. preventDefault)\nLink: ({ props, on }) => {\n const click = on(\"click\");\n return (\n \u003Ca href={props.href} onClick={(e) => {\n if (click.shouldPreventDefault) e.preventDefault();\n click.emit();\n }}>{props.label}\u003C\u002Fa>\n );\n},\n```\n\n```json\n{\n \"type\": \"Button\",\n \"props\": { \"label\": \"Submit\" },\n \"on\": { \"press\": { \"action\": \"submit\" } }\n}\n```\n\nThe `EventHandle` returned by `on()` has: `emit()`, `shouldPreventDefault` (boolean), and `bound` (boolean).\n\n## State Watchers\n\nElements can declare a `watch` field (top-level, sibling of type\u002Fprops\u002Fchildren) to trigger actions when state values change:\n\n```json\n{\n \"type\": \"Select\",\n \"props\": { \"value\": { \"$bindState\": \"\u002Fform\u002Fcountry\" }, \"options\": [\"US\", \"Canada\"] },\n \"watch\": { \"\u002Fform\u002Fcountry\": { \"action\": \"loadCities\" } },\n \"children\": []\n}\n```\n\n## Built-in Actions\n\nThe `setState`, `pushState`, `removeState`, and `validateForm` actions are built into the React schema and handled automatically by `ActionProvider`. They are injected into AI prompts without needing to be declared in catalog `actions`:\n\n```json\n{ \"action\": \"setState\", \"params\": { \"statePath\": \"\u002FactiveTab\", \"value\": \"home\" } }\n{ \"action\": \"pushState\", \"params\": { \"statePath\": \"\u002Fitems\", \"value\": { \"text\": \"New\" } } }\n{ \"action\": \"removeState\", \"params\": { \"statePath\": \"\u002Fitems\", \"index\": 0 } }\n{ \"action\": \"validateForm\", \"params\": { \"statePath\": \"\u002FformResult\" } }\n```\n\n`validateForm` validates all registered fields and writes `{ valid, errors }` to state.\n\nNote: `statePath` in action params (e.g. `setState.statePath`) targets the mutation path. Two-way binding in component props uses `{ \"$bindState\": \"\u002Fpath\" }` on the value prop, not `statePath`.\n\n## useBoundProp\n\nFor form components that need two-way binding, use `useBoundProp` with the `bindings` map the renderer provides when a prop uses `{ \"$bindState\": \"\u002Fpath\" }` or `{ \"$bindItem\": \"field\" }`:\n\n```tsx\nimport { useBoundProp } from \"@json-render\u002Freact\";\n\nInput: ({ element, bindings }) => {\n const [value, setValue] = useBoundProp\u003Cstring>(\n element.props.value,\n bindings?.value\n );\n return (\n \u003Cinput\n value={value ?? \"\"}\n onChange={(e) => setValue(e.target.value)}\n \u002F>\n );\n},\n```\n\n`useBoundProp(propValue, bindingPath)` returns `[value, setValue]`. The `value` is the resolved prop; `setValue` writes back to the bound state path (no-op if not bound).\n\n## BaseComponentProps\n\nFor building reusable component libraries not tied to a specific catalog (e.g. `@json-render\u002Fshadcn`):\n\n```typescript\nimport type { BaseComponentProps } from \"@json-render\u002Freact\";\n\nconst Card = ({ props, children }: BaseComponentProps\u003C{ title?: string }>) => (\n \u003Cdiv>{props.title}{children}\u003C\u002Fdiv>\n);\n```\n\n## defineRegistry\n\n`defineRegistry` conditionally requires the `actions` field only when the catalog declares actions. Catalogs with `actions: {}` can omit it.\n\n## Key Exports\n\n| Export | Purpose |\n|--------|---------|\n| `defineRegistry` | Create a type-safe component registry from a catalog |\n| `Renderer` | Render a spec using a registry |\n| `schema` | Element tree schema (includes built-in state actions: setState, pushState, removeState, validateForm) |\n| `useStateStore` | Access state context |\n| `useStateValue` | Get single value from state |\n| `useBoundProp` | Two-way binding for `$bindState`\u002F`$bindItem` expressions |\n| `useActions` | Access actions context |\n| `useAction` | Get a single action dispatch function |\n| `useOptionalValidation` | Non-throwing variant of useValidation (returns null if no provider) |\n| `useUIStream` | Stream specs from an API endpoint |\n| `createStateStore` | Create a framework-agnostic in-memory `StateStore` |\n| `StateStore` | Interface for plugging in external state management |\n| `BaseComponentProps` | Catalog-agnostic base type for reusable component libraries |\n| `EventHandle` | Event handle type (`emit`, `shouldPreventDefault`, `bound`) |\n| `ComponentContext` | Typed component context (catalog-aware) |\n",{"data":36,"body":37},{"name":4,"description":6},{"type":38,"children":39},"root",[40,49,55,62,496,502,1461,1467,1472,1756,1762,1848,1854,1958,1965,2001,2242,2270,2276,2281,2428,2607,2627,2648,2682,2798,2804,2833,3285,3478,3520,3526,3539,3838,3844,3892,4398,4416,4449,4454,4485,4825,4859,4865,4878,5063,5069,5094,5100,5407],{"type":41,"tag":42,"props":43,"children":45},"element","h1",{"id":44},"json-renderreact",[46],{"type":47,"value":48},"text","@json-render\u002Freact",{"type":41,"tag":50,"props":51,"children":52},"p",{},[53],{"type":47,"value":54},"React renderer that converts JSON specs into React component trees.",{"type":41,"tag":56,"props":57,"children":59},"h2",{"id":58},"quick-start",[60],{"type":47,"value":61},"Quick Start",{"type":41,"tag":63,"props":64,"children":69},"pre",{"className":65,"code":66,"language":67,"meta":68,"style":68},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineRegistry, Renderer } from \"@json-render\u002Freact\";\nimport { catalog } from \".\u002Fcatalog\";\n\nconst { registry } = defineRegistry(catalog, {\n components: {\n Card: ({ props, children }) => \u003Cdiv>{props.title}{children}\u003C\u002Fdiv>,\n },\n});\n\nfunction App({ spec }) {\n return \u003CRenderer spec={spec} registry={registry} \u002F>;\n}\n","typescript","",[70],{"type":41,"tag":71,"props":72,"children":73},"code",{"__ignoreMap":68},[74,138,180,190,238,257,350,359,376,384,416,487],{"type":41,"tag":75,"props":76,"children":79},"span",{"class":77,"line":78},"line",1,[80,86,92,98,103,108,113,118,123,128,133],{"type":41,"tag":75,"props":81,"children":83},{"style":82},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[84],{"type":47,"value":85},"import",{"type":41,"tag":75,"props":87,"children":89},{"style":88},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[90],{"type":47,"value":91}," {",{"type":41,"tag":75,"props":93,"children":95},{"style":94},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[96],{"type":47,"value":97}," defineRegistry",{"type":41,"tag":75,"props":99,"children":100},{"style":88},[101],{"type":47,"value":102},",",{"type":41,"tag":75,"props":104,"children":105},{"style":94},[106],{"type":47,"value":107}," Renderer",{"type":41,"tag":75,"props":109,"children":110},{"style":88},[111],{"type":47,"value":112}," }",{"type":41,"tag":75,"props":114,"children":115},{"style":82},[116],{"type":47,"value":117}," from",{"type":41,"tag":75,"props":119,"children":120},{"style":88},[121],{"type":47,"value":122}," \"",{"type":41,"tag":75,"props":124,"children":126},{"style":125},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[127],{"type":47,"value":48},{"type":41,"tag":75,"props":129,"children":130},{"style":88},[131],{"type":47,"value":132},"\"",{"type":41,"tag":75,"props":134,"children":135},{"style":88},[136],{"type":47,"value":137},";\n",{"type":41,"tag":75,"props":139,"children":141},{"class":77,"line":140},2,[142,146,150,155,159,163,167,172,176],{"type":41,"tag":75,"props":143,"children":144},{"style":82},[145],{"type":47,"value":85},{"type":41,"tag":75,"props":147,"children":148},{"style":88},[149],{"type":47,"value":91},{"type":41,"tag":75,"props":151,"children":152},{"style":94},[153],{"type":47,"value":154}," catalog",{"type":41,"tag":75,"props":156,"children":157},{"style":88},[158],{"type":47,"value":112},{"type":41,"tag":75,"props":160,"children":161},{"style":82},[162],{"type":47,"value":117},{"type":41,"tag":75,"props":164,"children":165},{"style":88},[166],{"type":47,"value":122},{"type":41,"tag":75,"props":168,"children":169},{"style":125},[170],{"type":47,"value":171},".\u002Fcatalog",{"type":41,"tag":75,"props":173,"children":174},{"style":88},[175],{"type":47,"value":132},{"type":41,"tag":75,"props":177,"children":178},{"style":88},[179],{"type":47,"value":137},{"type":41,"tag":75,"props":181,"children":183},{"class":77,"line":182},3,[184],{"type":41,"tag":75,"props":185,"children":187},{"emptyLinePlaceholder":186},true,[188],{"type":47,"value":189},"\n",{"type":41,"tag":75,"props":191,"children":193},{"class":77,"line":192},4,[194,200,204,209,214,219,224,229,233],{"type":41,"tag":75,"props":195,"children":197},{"style":196},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[198],{"type":47,"value":199},"const",{"type":41,"tag":75,"props":201,"children":202},{"style":88},[203],{"type":47,"value":91},{"type":41,"tag":75,"props":205,"children":206},{"style":94},[207],{"type":47,"value":208}," registry ",{"type":41,"tag":75,"props":210,"children":211},{"style":88},[212],{"type":47,"value":213},"}",{"type":41,"tag":75,"props":215,"children":216},{"style":88},[217],{"type":47,"value":218}," =",{"type":41,"tag":75,"props":220,"children":222},{"style":221},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[223],{"type":47,"value":97},{"type":41,"tag":75,"props":225,"children":226},{"style":94},[227],{"type":47,"value":228},"(catalog",{"type":41,"tag":75,"props":230,"children":231},{"style":88},[232],{"type":47,"value":102},{"type":41,"tag":75,"props":234,"children":235},{"style":88},[236],{"type":47,"value":237}," {\n",{"type":41,"tag":75,"props":239,"children":241},{"class":77,"line":240},5,[242,248,253],{"type":41,"tag":75,"props":243,"children":245},{"style":244},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[246],{"type":47,"value":247}," components",{"type":41,"tag":75,"props":249,"children":250},{"style":88},[251],{"type":47,"value":252},":",{"type":41,"tag":75,"props":254,"children":255},{"style":88},[256],{"type":47,"value":237},{"type":41,"tag":75,"props":258,"children":260},{"class":77,"line":259},6,[261,266,270,275,281,285,290,295,300,305,311,316,321,326,331,336,341,345],{"type":41,"tag":75,"props":262,"children":263},{"style":221},[264],{"type":47,"value":265}," Card",{"type":41,"tag":75,"props":267,"children":268},{"style":88},[269],{"type":47,"value":252},{"type":41,"tag":75,"props":271,"children":272},{"style":88},[273],{"type":47,"value":274}," ({",{"type":41,"tag":75,"props":276,"children":278},{"style":277},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[279],{"type":47,"value":280}," props",{"type":41,"tag":75,"props":282,"children":283},{"style":88},[284],{"type":47,"value":102},{"type":41,"tag":75,"props":286,"children":287},{"style":277},[288],{"type":47,"value":289}," children",{"type":41,"tag":75,"props":291,"children":292},{"style":88},[293],{"type":47,"value":294}," })",{"type":41,"tag":75,"props":296,"children":297},{"style":196},[298],{"type":47,"value":299}," =>",{"type":41,"tag":75,"props":301,"children":302},{"style":94},[303],{"type":47,"value":304}," \u003C",{"type":41,"tag":75,"props":306,"children":308},{"style":307},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[309],{"type":47,"value":310},"div",{"type":41,"tag":75,"props":312,"children":313},{"style":94},[314],{"type":47,"value":315},">",{"type":41,"tag":75,"props":317,"children":318},{"style":88},[319],{"type":47,"value":320},"{",{"type":41,"tag":75,"props":322,"children":323},{"style":94},[324],{"type":47,"value":325},"props.title",{"type":41,"tag":75,"props":327,"children":328},{"style":88},[329],{"type":47,"value":330},"}{",{"type":41,"tag":75,"props":332,"children":333},{"style":94},[334],{"type":47,"value":335},"children",{"type":41,"tag":75,"props":337,"children":338},{"style":88},[339],{"type":47,"value":340},"}\u003C\u002F",{"type":41,"tag":75,"props":342,"children":343},{"style":94},[344],{"type":47,"value":310},{"type":41,"tag":75,"props":346,"children":347},{"style":88},[348],{"type":47,"value":349},">,\n",{"type":41,"tag":75,"props":351,"children":353},{"class":77,"line":352},7,[354],{"type":41,"tag":75,"props":355,"children":356},{"style":88},[357],{"type":47,"value":358}," },\n",{"type":41,"tag":75,"props":360,"children":362},{"class":77,"line":361},8,[363,367,372],{"type":41,"tag":75,"props":364,"children":365},{"style":88},[366],{"type":47,"value":213},{"type":41,"tag":75,"props":368,"children":369},{"style":94},[370],{"type":47,"value":371},")",{"type":41,"tag":75,"props":373,"children":374},{"style":88},[375],{"type":47,"value":137},{"type":41,"tag":75,"props":377,"children":379},{"class":77,"line":378},9,[380],{"type":41,"tag":75,"props":381,"children":382},{"emptyLinePlaceholder":186},[383],{"type":47,"value":189},{"type":41,"tag":75,"props":385,"children":387},{"class":77,"line":386},10,[388,393,398,403,408,412],{"type":41,"tag":75,"props":389,"children":390},{"style":196},[391],{"type":47,"value":392},"function",{"type":41,"tag":75,"props":394,"children":395},{"style":221},[396],{"type":47,"value":397}," App",{"type":41,"tag":75,"props":399,"children":400},{"style":88},[401],{"type":47,"value":402},"({",{"type":41,"tag":75,"props":404,"children":405},{"style":277},[406],{"type":47,"value":407}," spec",{"type":41,"tag":75,"props":409,"children":410},{"style":88},[411],{"type":47,"value":294},{"type":41,"tag":75,"props":413,"children":414},{"style":88},[415],{"type":47,"value":237},{"type":41,"tag":75,"props":417,"children":419},{"class":77,"line":418},11,[420,425,429,434,438,443,447,452,456,461,465,469,474,478,483],{"type":41,"tag":75,"props":421,"children":422},{"style":82},[423],{"type":47,"value":424}," return",{"type":41,"tag":75,"props":426,"children":427},{"style":244},[428],{"type":47,"value":304},{"type":41,"tag":75,"props":430,"children":431},{"style":307},[432],{"type":47,"value":433},"Renderer",{"type":41,"tag":75,"props":435,"children":436},{"style":307},[437],{"type":47,"value":407},{"type":41,"tag":75,"props":439,"children":440},{"style":244},[441],{"type":47,"value":442},"=",{"type":41,"tag":75,"props":444,"children":445},{"style":88},[446],{"type":47,"value":320},{"type":41,"tag":75,"props":448,"children":449},{"style":244},[450],{"type":47,"value":451},"spec",{"type":41,"tag":75,"props":453,"children":454},{"style":88},[455],{"type":47,"value":213},{"type":41,"tag":75,"props":457,"children":458},{"style":307},[459],{"type":47,"value":460}," registry",{"type":41,"tag":75,"props":462,"children":463},{"style":244},[464],{"type":47,"value":442},{"type":41,"tag":75,"props":466,"children":467},{"style":88},[468],{"type":47,"value":320},{"type":41,"tag":75,"props":470,"children":471},{"style":244},[472],{"type":47,"value":473},"registry",{"type":41,"tag":75,"props":475,"children":476},{"style":88},[477],{"type":47,"value":213},{"type":41,"tag":75,"props":479,"children":480},{"style":244},[481],{"type":47,"value":482}," \u002F>",{"type":41,"tag":75,"props":484,"children":485},{"style":88},[486],{"type":47,"value":137},{"type":41,"tag":75,"props":488,"children":490},{"class":77,"line":489},12,[491],{"type":41,"tag":75,"props":492,"children":493},{"style":88},[494],{"type":47,"value":495},"}\n",{"type":41,"tag":56,"props":497,"children":499},{"id":498},"creating-a-catalog",[500],{"type":47,"value":501},"Creating a Catalog",{"type":41,"tag":63,"props":503,"children":505},{"className":65,"code":504,"language":67,"meta":68,"style":68},"import { defineCatalog } from \"@json-render\u002Fcore\";\nimport { schema } from \"@json-render\u002Freact\u002Fschema\";\nimport { defineRegistry } from \"@json-render\u002Freact\";\nimport { z } from \"zod\";\n\n\u002F\u002F Create catalog with props schemas\nexport const catalog = defineCatalog(schema, {\n components: {\n Button: {\n props: z.object({\n label: z.string(),\n variant: z.enum([\"primary\", \"secondary\"]).nullable(),\n }),\n description: \"Clickable button\",\n },\n Card: {\n props: z.object({ title: z.string() }),\n description: \"Card container with title\",\n },\n },\n});\n\n\u002F\u002F Define component implementations with type-safe props\nconst { registry } = defineRegistry(catalog, {\n components: {\n Button: ({ props }) => (\n \u003Cbutton className={props.variant}>{props.label}\u003C\u002Fbutton>\n ),\n Card: ({ props, children }) => (\n \u003Cdiv className=\"card\">\n \u003Ch2>{props.title}\u003C\u002Fh2>\n {children}\n \u003C\u002Fdiv>\n ),\n },\n});\n",[506],{"type":41,"tag":71,"props":507,"children":508},{"__ignoreMap":68},[509,550,591,630,671,678,687,726,741,757,793,828,910,927,957,966,982,1052,1081,1089,1097,1113,1121,1130,1170,1186,1219,1267,1280,1320,1354,1391,1408,1425,1437,1445],{"type":41,"tag":75,"props":510,"children":511},{"class":77,"line":78},[512,516,520,525,529,533,537,542,546],{"type":41,"tag":75,"props":513,"children":514},{"style":82},[515],{"type":47,"value":85},{"type":41,"tag":75,"props":517,"children":518},{"style":88},[519],{"type":47,"value":91},{"type":41,"tag":75,"props":521,"children":522},{"style":94},[523],{"type":47,"value":524}," defineCatalog",{"type":41,"tag":75,"props":526,"children":527},{"style":88},[528],{"type":47,"value":112},{"type":41,"tag":75,"props":530,"children":531},{"style":82},[532],{"type":47,"value":117},{"type":41,"tag":75,"props":534,"children":535},{"style":88},[536],{"type":47,"value":122},{"type":41,"tag":75,"props":538,"children":539},{"style":125},[540],{"type":47,"value":541},"@json-render\u002Fcore",{"type":41,"tag":75,"props":543,"children":544},{"style":88},[545],{"type":47,"value":132},{"type":41,"tag":75,"props":547,"children":548},{"style":88},[549],{"type":47,"value":137},{"type":41,"tag":75,"props":551,"children":552},{"class":77,"line":140},[553,557,561,566,570,574,578,583,587],{"type":41,"tag":75,"props":554,"children":555},{"style":82},[556],{"type":47,"value":85},{"type":41,"tag":75,"props":558,"children":559},{"style":88},[560],{"type":47,"value":91},{"type":41,"tag":75,"props":562,"children":563},{"style":94},[564],{"type":47,"value":565}," schema",{"type":41,"tag":75,"props":567,"children":568},{"style":88},[569],{"type":47,"value":112},{"type":41,"tag":75,"props":571,"children":572},{"style":82},[573],{"type":47,"value":117},{"type":41,"tag":75,"props":575,"children":576},{"style":88},[577],{"type":47,"value":122},{"type":41,"tag":75,"props":579,"children":580},{"style":125},[581],{"type":47,"value":582},"@json-render\u002Freact\u002Fschema",{"type":41,"tag":75,"props":584,"children":585},{"style":88},[586],{"type":47,"value":132},{"type":41,"tag":75,"props":588,"children":589},{"style":88},[590],{"type":47,"value":137},{"type":41,"tag":75,"props":592,"children":593},{"class":77,"line":182},[594,598,602,606,610,614,618,622,626],{"type":41,"tag":75,"props":595,"children":596},{"style":82},[597],{"type":47,"value":85},{"type":41,"tag":75,"props":599,"children":600},{"style":88},[601],{"type":47,"value":91},{"type":41,"tag":75,"props":603,"children":604},{"style":94},[605],{"type":47,"value":97},{"type":41,"tag":75,"props":607,"children":608},{"style":88},[609],{"type":47,"value":112},{"type":41,"tag":75,"props":611,"children":612},{"style":82},[613],{"type":47,"value":117},{"type":41,"tag":75,"props":615,"children":616},{"style":88},[617],{"type":47,"value":122},{"type":41,"tag":75,"props":619,"children":620},{"style":125},[621],{"type":47,"value":48},{"type":41,"tag":75,"props":623,"children":624},{"style":88},[625],{"type":47,"value":132},{"type":41,"tag":75,"props":627,"children":628},{"style":88},[629],{"type":47,"value":137},{"type":41,"tag":75,"props":631,"children":632},{"class":77,"line":192},[633,637,641,646,650,654,658,663,667],{"type":41,"tag":75,"props":634,"children":635},{"style":82},[636],{"type":47,"value":85},{"type":41,"tag":75,"props":638,"children":639},{"style":88},[640],{"type":47,"value":91},{"type":41,"tag":75,"props":642,"children":643},{"style":94},[644],{"type":47,"value":645}," z",{"type":41,"tag":75,"props":647,"children":648},{"style":88},[649],{"type":47,"value":112},{"type":41,"tag":75,"props":651,"children":652},{"style":82},[653],{"type":47,"value":117},{"type":41,"tag":75,"props":655,"children":656},{"style":88},[657],{"type":47,"value":122},{"type":41,"tag":75,"props":659,"children":660},{"style":125},[661],{"type":47,"value":662},"zod",{"type":41,"tag":75,"props":664,"children":665},{"style":88},[666],{"type":47,"value":132},{"type":41,"tag":75,"props":668,"children":669},{"style":88},[670],{"type":47,"value":137},{"type":41,"tag":75,"props":672,"children":673},{"class":77,"line":240},[674],{"type":41,"tag":75,"props":675,"children":676},{"emptyLinePlaceholder":186},[677],{"type":47,"value":189},{"type":41,"tag":75,"props":679,"children":680},{"class":77,"line":259},[681],{"type":41,"tag":75,"props":682,"children":684},{"style":683},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[685],{"type":47,"value":686},"\u002F\u002F Create catalog with props schemas\n",{"type":41,"tag":75,"props":688,"children":689},{"class":77,"line":352},[690,695,700,705,709,713,718,722],{"type":41,"tag":75,"props":691,"children":692},{"style":82},[693],{"type":47,"value":694},"export",{"type":41,"tag":75,"props":696,"children":697},{"style":196},[698],{"type":47,"value":699}," const",{"type":41,"tag":75,"props":701,"children":702},{"style":94},[703],{"type":47,"value":704}," catalog ",{"type":41,"tag":75,"props":706,"children":707},{"style":88},[708],{"type":47,"value":442},{"type":41,"tag":75,"props":710,"children":711},{"style":221},[712],{"type":47,"value":524},{"type":41,"tag":75,"props":714,"children":715},{"style":94},[716],{"type":47,"value":717},"(schema",{"type":41,"tag":75,"props":719,"children":720},{"style":88},[721],{"type":47,"value":102},{"type":41,"tag":75,"props":723,"children":724},{"style":88},[725],{"type":47,"value":237},{"type":41,"tag":75,"props":727,"children":728},{"class":77,"line":361},[729,733,737],{"type":41,"tag":75,"props":730,"children":731},{"style":244},[732],{"type":47,"value":247},{"type":41,"tag":75,"props":734,"children":735},{"style":88},[736],{"type":47,"value":252},{"type":41,"tag":75,"props":738,"children":739},{"style":88},[740],{"type":47,"value":237},{"type":41,"tag":75,"props":742,"children":743},{"class":77,"line":378},[744,749,753],{"type":41,"tag":75,"props":745,"children":746},{"style":244},[747],{"type":47,"value":748}," Button",{"type":41,"tag":75,"props":750,"children":751},{"style":88},[752],{"type":47,"value":252},{"type":41,"tag":75,"props":754,"children":755},{"style":88},[756],{"type":47,"value":237},{"type":41,"tag":75,"props":758,"children":759},{"class":77,"line":386},[760,765,769,773,778,783,788],{"type":41,"tag":75,"props":761,"children":762},{"style":244},[763],{"type":47,"value":764}," props",{"type":41,"tag":75,"props":766,"children":767},{"style":88},[768],{"type":47,"value":252},{"type":41,"tag":75,"props":770,"children":771},{"style":94},[772],{"type":47,"value":645},{"type":41,"tag":75,"props":774,"children":775},{"style":88},[776],{"type":47,"value":777},".",{"type":41,"tag":75,"props":779,"children":780},{"style":221},[781],{"type":47,"value":782},"object",{"type":41,"tag":75,"props":784,"children":785},{"style":94},[786],{"type":47,"value":787},"(",{"type":41,"tag":75,"props":789,"children":790},{"style":88},[791],{"type":47,"value":792},"{\n",{"type":41,"tag":75,"props":794,"children":795},{"class":77,"line":418},[796,801,805,809,813,818,823],{"type":41,"tag":75,"props":797,"children":798},{"style":244},[799],{"type":47,"value":800}," label",{"type":41,"tag":75,"props":802,"children":803},{"style":88},[804],{"type":47,"value":252},{"type":41,"tag":75,"props":806,"children":807},{"style":94},[808],{"type":47,"value":645},{"type":41,"tag":75,"props":810,"children":811},{"style":88},[812],{"type":47,"value":777},{"type":41,"tag":75,"props":814,"children":815},{"style":221},[816],{"type":47,"value":817},"string",{"type":41,"tag":75,"props":819,"children":820},{"style":94},[821],{"type":47,"value":822},"()",{"type":41,"tag":75,"props":824,"children":825},{"style":88},[826],{"type":47,"value":827},",\n",{"type":41,"tag":75,"props":829,"children":830},{"class":77,"line":489},[831,836,840,844,848,853,858,862,867,871,875,879,884,888,893,897,902,906],{"type":41,"tag":75,"props":832,"children":833},{"style":244},[834],{"type":47,"value":835}," variant",{"type":41,"tag":75,"props":837,"children":838},{"style":88},[839],{"type":47,"value":252},{"type":41,"tag":75,"props":841,"children":842},{"style":94},[843],{"type":47,"value":645},{"type":41,"tag":75,"props":845,"children":846},{"style":88},[847],{"type":47,"value":777},{"type":41,"tag":75,"props":849,"children":850},{"style":221},[851],{"type":47,"value":852},"enum",{"type":41,"tag":75,"props":854,"children":855},{"style":94},[856],{"type":47,"value":857},"([",{"type":41,"tag":75,"props":859,"children":860},{"style":88},[861],{"type":47,"value":132},{"type":41,"tag":75,"props":863,"children":864},{"style":125},[865],{"type":47,"value":866},"primary",{"type":41,"tag":75,"props":868,"children":869},{"style":88},[870],{"type":47,"value":132},{"type":41,"tag":75,"props":872,"children":873},{"style":88},[874],{"type":47,"value":102},{"type":41,"tag":75,"props":876,"children":877},{"style":88},[878],{"type":47,"value":122},{"type":41,"tag":75,"props":880,"children":881},{"style":125},[882],{"type":47,"value":883},"secondary",{"type":41,"tag":75,"props":885,"children":886},{"style":88},[887],{"type":47,"value":132},{"type":41,"tag":75,"props":889,"children":890},{"style":94},[891],{"type":47,"value":892},"])",{"type":41,"tag":75,"props":894,"children":895},{"style":88},[896],{"type":47,"value":777},{"type":41,"tag":75,"props":898,"children":899},{"style":221},[900],{"type":47,"value":901},"nullable",{"type":41,"tag":75,"props":903,"children":904},{"style":94},[905],{"type":47,"value":822},{"type":41,"tag":75,"props":907,"children":908},{"style":88},[909],{"type":47,"value":827},{"type":41,"tag":75,"props":911,"children":913},{"class":77,"line":912},13,[914,919,923],{"type":41,"tag":75,"props":915,"children":916},{"style":88},[917],{"type":47,"value":918}," }",{"type":41,"tag":75,"props":920,"children":921},{"style":94},[922],{"type":47,"value":371},{"type":41,"tag":75,"props":924,"children":925},{"style":88},[926],{"type":47,"value":827},{"type":41,"tag":75,"props":928,"children":930},{"class":77,"line":929},14,[931,936,940,944,949,953],{"type":41,"tag":75,"props":932,"children":933},{"style":244},[934],{"type":47,"value":935}," description",{"type":41,"tag":75,"props":937,"children":938},{"style":88},[939],{"type":47,"value":252},{"type":41,"tag":75,"props":941,"children":942},{"style":88},[943],{"type":47,"value":122},{"type":41,"tag":75,"props":945,"children":946},{"style":125},[947],{"type":47,"value":948},"Clickable button",{"type":41,"tag":75,"props":950,"children":951},{"style":88},[952],{"type":47,"value":132},{"type":41,"tag":75,"props":954,"children":955},{"style":88},[956],{"type":47,"value":827},{"type":41,"tag":75,"props":958,"children":960},{"class":77,"line":959},15,[961],{"type":41,"tag":75,"props":962,"children":963},{"style":88},[964],{"type":47,"value":965}," },\n",{"type":41,"tag":75,"props":967,"children":969},{"class":77,"line":968},16,[970,974,978],{"type":41,"tag":75,"props":971,"children":972},{"style":244},[973],{"type":47,"value":265},{"type":41,"tag":75,"props":975,"children":976},{"style":88},[977],{"type":47,"value":252},{"type":41,"tag":75,"props":979,"children":980},{"style":88},[981],{"type":47,"value":237},{"type":41,"tag":75,"props":983,"children":985},{"class":77,"line":984},17,[986,990,994,998,1002,1006,1010,1014,1019,1023,1027,1031,1035,1040,1044,1048],{"type":41,"tag":75,"props":987,"children":988},{"style":244},[989],{"type":47,"value":764},{"type":41,"tag":75,"props":991,"children":992},{"style":88},[993],{"type":47,"value":252},{"type":41,"tag":75,"props":995,"children":996},{"style":94},[997],{"type":47,"value":645},{"type":41,"tag":75,"props":999,"children":1000},{"style":88},[1001],{"type":47,"value":777},{"type":41,"tag":75,"props":1003,"children":1004},{"style":221},[1005],{"type":47,"value":782},{"type":41,"tag":75,"props":1007,"children":1008},{"style":94},[1009],{"type":47,"value":787},{"type":41,"tag":75,"props":1011,"children":1012},{"style":88},[1013],{"type":47,"value":320},{"type":41,"tag":75,"props":1015,"children":1016},{"style":244},[1017],{"type":47,"value":1018}," title",{"type":41,"tag":75,"props":1020,"children":1021},{"style":88},[1022],{"type":47,"value":252},{"type":41,"tag":75,"props":1024,"children":1025},{"style":94},[1026],{"type":47,"value":645},{"type":41,"tag":75,"props":1028,"children":1029},{"style":88},[1030],{"type":47,"value":777},{"type":41,"tag":75,"props":1032,"children":1033},{"style":221},[1034],{"type":47,"value":817},{"type":41,"tag":75,"props":1036,"children":1037},{"style":94},[1038],{"type":47,"value":1039},"() ",{"type":41,"tag":75,"props":1041,"children":1042},{"style":88},[1043],{"type":47,"value":213},{"type":41,"tag":75,"props":1045,"children":1046},{"style":94},[1047],{"type":47,"value":371},{"type":41,"tag":75,"props":1049,"children":1050},{"style":88},[1051],{"type":47,"value":827},{"type":41,"tag":75,"props":1053,"children":1055},{"class":77,"line":1054},18,[1056,1060,1064,1068,1073,1077],{"type":41,"tag":75,"props":1057,"children":1058},{"style":244},[1059],{"type":47,"value":935},{"type":41,"tag":75,"props":1061,"children":1062},{"style":88},[1063],{"type":47,"value":252},{"type":41,"tag":75,"props":1065,"children":1066},{"style":88},[1067],{"type":47,"value":122},{"type":41,"tag":75,"props":1069,"children":1070},{"style":125},[1071],{"type":47,"value":1072},"Card container with title",{"type":41,"tag":75,"props":1074,"children":1075},{"style":88},[1076],{"type":47,"value":132},{"type":41,"tag":75,"props":1078,"children":1079},{"style":88},[1080],{"type":47,"value":827},{"type":41,"tag":75,"props":1082,"children":1084},{"class":77,"line":1083},19,[1085],{"type":41,"tag":75,"props":1086,"children":1087},{"style":88},[1088],{"type":47,"value":965},{"type":41,"tag":75,"props":1090,"children":1092},{"class":77,"line":1091},20,[1093],{"type":41,"tag":75,"props":1094,"children":1095},{"style":88},[1096],{"type":47,"value":358},{"type":41,"tag":75,"props":1098,"children":1100},{"class":77,"line":1099},21,[1101,1105,1109],{"type":41,"tag":75,"props":1102,"children":1103},{"style":88},[1104],{"type":47,"value":213},{"type":41,"tag":75,"props":1106,"children":1107},{"style":94},[1108],{"type":47,"value":371},{"type":41,"tag":75,"props":1110,"children":1111},{"style":88},[1112],{"type":47,"value":137},{"type":41,"tag":75,"props":1114,"children":1116},{"class":77,"line":1115},22,[1117],{"type":41,"tag":75,"props":1118,"children":1119},{"emptyLinePlaceholder":186},[1120],{"type":47,"value":189},{"type":41,"tag":75,"props":1122,"children":1124},{"class":77,"line":1123},23,[1125],{"type":41,"tag":75,"props":1126,"children":1127},{"style":683},[1128],{"type":47,"value":1129},"\u002F\u002F Define component implementations with type-safe props\n",{"type":41,"tag":75,"props":1131,"children":1133},{"class":77,"line":1132},24,[1134,1138,1142,1146,1150,1154,1158,1162,1166],{"type":41,"tag":75,"props":1135,"children":1136},{"style":196},[1137],{"type":47,"value":199},{"type":41,"tag":75,"props":1139,"children":1140},{"style":88},[1141],{"type":47,"value":91},{"type":41,"tag":75,"props":1143,"children":1144},{"style":94},[1145],{"type":47,"value":208},{"type":41,"tag":75,"props":1147,"children":1148},{"style":88},[1149],{"type":47,"value":213},{"type":41,"tag":75,"props":1151,"children":1152},{"style":88},[1153],{"type":47,"value":218},{"type":41,"tag":75,"props":1155,"children":1156},{"style":221},[1157],{"type":47,"value":97},{"type":41,"tag":75,"props":1159,"children":1160},{"style":94},[1161],{"type":47,"value":228},{"type":41,"tag":75,"props":1163,"children":1164},{"style":88},[1165],{"type":47,"value":102},{"type":41,"tag":75,"props":1167,"children":1168},{"style":88},[1169],{"type":47,"value":237},{"type":41,"tag":75,"props":1171,"children":1173},{"class":77,"line":1172},25,[1174,1178,1182],{"type":41,"tag":75,"props":1175,"children":1176},{"style":244},[1177],{"type":47,"value":247},{"type":41,"tag":75,"props":1179,"children":1180},{"style":88},[1181],{"type":47,"value":252},{"type":41,"tag":75,"props":1183,"children":1184},{"style":88},[1185],{"type":47,"value":237},{"type":41,"tag":75,"props":1187,"children":1189},{"class":77,"line":1188},26,[1190,1194,1198,1202,1206,1210,1214],{"type":41,"tag":75,"props":1191,"children":1192},{"style":221},[1193],{"type":47,"value":748},{"type":41,"tag":75,"props":1195,"children":1196},{"style":88},[1197],{"type":47,"value":252},{"type":41,"tag":75,"props":1199,"children":1200},{"style":88},[1201],{"type":47,"value":274},{"type":41,"tag":75,"props":1203,"children":1204},{"style":277},[1205],{"type":47,"value":280},{"type":41,"tag":75,"props":1207,"children":1208},{"style":88},[1209],{"type":47,"value":294},{"type":41,"tag":75,"props":1211,"children":1212},{"style":196},[1213],{"type":47,"value":299},{"type":41,"tag":75,"props":1215,"children":1216},{"style":94},[1217],{"type":47,"value":1218}," (\n",{"type":41,"tag":75,"props":1220,"children":1222},{"class":77,"line":1221},27,[1223,1228,1233,1238,1243,1248,1253,1257,1262],{"type":41,"tag":75,"props":1224,"children":1225},{"style":88},[1226],{"type":47,"value":1227}," \u003C",{"type":41,"tag":75,"props":1229,"children":1230},{"style":94},[1231],{"type":47,"value":1232},"button className",{"type":41,"tag":75,"props":1234,"children":1235},{"style":88},[1236],{"type":47,"value":1237},"={",{"type":41,"tag":75,"props":1239,"children":1240},{"style":94},[1241],{"type":47,"value":1242},"props.variant",{"type":41,"tag":75,"props":1244,"children":1245},{"style":88},[1246],{"type":47,"value":1247},"}>{",{"type":41,"tag":75,"props":1249,"children":1250},{"style":94},[1251],{"type":47,"value":1252},"props.label",{"type":41,"tag":75,"props":1254,"children":1255},{"style":88},[1256],{"type":47,"value":340},{"type":41,"tag":75,"props":1258,"children":1259},{"style":94},[1260],{"type":47,"value":1261},"button",{"type":41,"tag":75,"props":1263,"children":1264},{"style":88},[1265],{"type":47,"value":1266},">\n",{"type":41,"tag":75,"props":1268,"children":1270},{"class":77,"line":1269},28,[1271,1276],{"type":41,"tag":75,"props":1272,"children":1273},{"style":94},[1274],{"type":47,"value":1275}," )",{"type":41,"tag":75,"props":1277,"children":1278},{"style":88},[1279],{"type":47,"value":827},{"type":41,"tag":75,"props":1281,"children":1283},{"class":77,"line":1282},29,[1284,1288,1292,1296,1300,1304,1308,1312,1316],{"type":41,"tag":75,"props":1285,"children":1286},{"style":221},[1287],{"type":47,"value":265},{"type":41,"tag":75,"props":1289,"children":1290},{"style":88},[1291],{"type":47,"value":252},{"type":41,"tag":75,"props":1293,"children":1294},{"style":88},[1295],{"type":47,"value":274},{"type":41,"tag":75,"props":1297,"children":1298},{"style":277},[1299],{"type":47,"value":280},{"type":41,"tag":75,"props":1301,"children":1302},{"style":88},[1303],{"type":47,"value":102},{"type":41,"tag":75,"props":1305,"children":1306},{"style":277},[1307],{"type":47,"value":289},{"type":41,"tag":75,"props":1309,"children":1310},{"style":88},[1311],{"type":47,"value":294},{"type":41,"tag":75,"props":1313,"children":1314},{"style":196},[1315],{"type":47,"value":299},{"type":41,"tag":75,"props":1317,"children":1318},{"style":94},[1319],{"type":47,"value":1218},{"type":41,"tag":75,"props":1321,"children":1323},{"class":77,"line":1322},30,[1324,1328,1333,1337,1341,1346,1350],{"type":41,"tag":75,"props":1325,"children":1326},{"style":88},[1327],{"type":47,"value":1227},{"type":41,"tag":75,"props":1329,"children":1330},{"style":94},[1331],{"type":47,"value":1332},"div className",{"type":41,"tag":75,"props":1334,"children":1335},{"style":88},[1336],{"type":47,"value":442},{"type":41,"tag":75,"props":1338,"children":1339},{"style":88},[1340],{"type":47,"value":132},{"type":41,"tag":75,"props":1342,"children":1343},{"style":125},[1344],{"type":47,"value":1345},"card",{"type":41,"tag":75,"props":1347,"children":1348},{"style":88},[1349],{"type":47,"value":132},{"type":41,"tag":75,"props":1351,"children":1352},{"style":88},[1353],{"type":47,"value":1266},{"type":41,"tag":75,"props":1355,"children":1357},{"class":77,"line":1356},31,[1358,1363,1367,1371,1375,1379,1383,1387],{"type":41,"tag":75,"props":1359,"children":1360},{"style":94},[1361],{"type":47,"value":1362}," \u003C",{"type":41,"tag":75,"props":1364,"children":1365},{"style":307},[1366],{"type":47,"value":56},{"type":41,"tag":75,"props":1368,"children":1369},{"style":94},[1370],{"type":47,"value":315},{"type":41,"tag":75,"props":1372,"children":1373},{"style":88},[1374],{"type":47,"value":320},{"type":41,"tag":75,"props":1376,"children":1377},{"style":94},[1378],{"type":47,"value":325},{"type":41,"tag":75,"props":1380,"children":1381},{"style":88},[1382],{"type":47,"value":340},{"type":41,"tag":75,"props":1384,"children":1385},{"style":94},[1386],{"type":47,"value":56},{"type":41,"tag":75,"props":1388,"children":1389},{"style":88},[1390],{"type":47,"value":1266},{"type":41,"tag":75,"props":1392,"children":1394},{"class":77,"line":1393},32,[1395,1400,1404],{"type":41,"tag":75,"props":1396,"children":1397},{"style":88},[1398],{"type":47,"value":1399}," {",{"type":41,"tag":75,"props":1401,"children":1402},{"style":277},[1403],{"type":47,"value":335},{"type":41,"tag":75,"props":1405,"children":1406},{"style":88},[1407],{"type":47,"value":495},{"type":41,"tag":75,"props":1409,"children":1411},{"class":77,"line":1410},33,[1412,1417,1421],{"type":41,"tag":75,"props":1413,"children":1414},{"style":88},[1415],{"type":47,"value":1416}," \u003C\u002F",{"type":41,"tag":75,"props":1418,"children":1419},{"style":94},[1420],{"type":47,"value":310},{"type":41,"tag":75,"props":1422,"children":1423},{"style":88},[1424],{"type":47,"value":1266},{"type":41,"tag":75,"props":1426,"children":1428},{"class":77,"line":1427},34,[1429,1433],{"type":41,"tag":75,"props":1430,"children":1431},{"style":94},[1432],{"type":47,"value":1275},{"type":41,"tag":75,"props":1434,"children":1435},{"style":88},[1436],{"type":47,"value":827},{"type":41,"tag":75,"props":1438,"children":1440},{"class":77,"line":1439},35,[1441],{"type":41,"tag":75,"props":1442,"children":1443},{"style":88},[1444],{"type":47,"value":358},{"type":41,"tag":75,"props":1446,"children":1448},{"class":77,"line":1447},36,[1449,1453,1457],{"type":41,"tag":75,"props":1450,"children":1451},{"style":88},[1452],{"type":47,"value":213},{"type":41,"tag":75,"props":1454,"children":1455},{"style":94},[1456],{"type":47,"value":371},{"type":41,"tag":75,"props":1458,"children":1459},{"style":88},[1460],{"type":47,"value":137},{"type":41,"tag":56,"props":1462,"children":1464},{"id":1463},"spec-structure-element-tree",[1465],{"type":47,"value":1466},"Spec Structure (Element Tree)",{"type":41,"tag":50,"props":1468,"children":1469},{},[1470],{"type":47,"value":1471},"The React schema uses an element tree format:",{"type":41,"tag":63,"props":1473,"children":1476},{"className":1474,"code":1475,"language":17,"meta":68,"style":68},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n \"root\": {\n \"type\": \"Card\",\n \"props\": { \"title\": \"Hello\" },\n \"children\": [\n { \"type\": \"Button\", \"props\": { \"label\": \"Click me\" } }\n ]\n }\n}\n",[1477],{"type":41,"tag":71,"props":1478,"children":1479},{"__ignoreMap":68},[1480,1487,1511,1549,1609,1633,1733,1741,1749],{"type":41,"tag":75,"props":1481,"children":1482},{"class":77,"line":78},[1483],{"type":41,"tag":75,"props":1484,"children":1485},{"style":88},[1486],{"type":47,"value":792},{"type":41,"tag":75,"props":1488,"children":1489},{"class":77,"line":140},[1490,1495,1499,1503,1507],{"type":41,"tag":75,"props":1491,"children":1492},{"style":88},[1493],{"type":47,"value":1494}," \"",{"type":41,"tag":75,"props":1496,"children":1497},{"style":196},[1498],{"type":47,"value":38},{"type":41,"tag":75,"props":1500,"children":1501},{"style":88},[1502],{"type":47,"value":132},{"type":41,"tag":75,"props":1504,"children":1505},{"style":88},[1506],{"type":47,"value":252},{"type":41,"tag":75,"props":1508,"children":1509},{"style":88},[1510],{"type":47,"value":237},{"type":41,"tag":75,"props":1512,"children":1513},{"class":77,"line":182},[1514,1519,1524,1528,1532,1536,1541,1545],{"type":41,"tag":75,"props":1515,"children":1516},{"style":88},[1517],{"type":47,"value":1518}," \"",{"type":41,"tag":75,"props":1520,"children":1521},{"style":307},[1522],{"type":47,"value":1523},"type",{"type":41,"tag":75,"props":1525,"children":1526},{"style":88},[1527],{"type":47,"value":132},{"type":41,"tag":75,"props":1529,"children":1530},{"style":88},[1531],{"type":47,"value":252},{"type":41,"tag":75,"props":1533,"children":1534},{"style":88},[1535],{"type":47,"value":122},{"type":41,"tag":75,"props":1537,"children":1538},{"style":125},[1539],{"type":47,"value":1540},"Card",{"type":41,"tag":75,"props":1542,"children":1543},{"style":88},[1544],{"type":47,"value":132},{"type":41,"tag":75,"props":1546,"children":1547},{"style":88},[1548],{"type":47,"value":827},{"type":41,"tag":75,"props":1550,"children":1551},{"class":77,"line":192},[1552,1556,1561,1565,1569,1573,1577,1583,1587,1591,1595,1600,1604],{"type":41,"tag":75,"props":1553,"children":1554},{"style":88},[1555],{"type":47,"value":1518},{"type":41,"tag":75,"props":1557,"children":1558},{"style":307},[1559],{"type":47,"value":1560},"props",{"type":41,"tag":75,"props":1562,"children":1563},{"style":88},[1564],{"type":47,"value":132},{"type":41,"tag":75,"props":1566,"children":1567},{"style":88},[1568],{"type":47,"value":252},{"type":41,"tag":75,"props":1570,"children":1571},{"style":88},[1572],{"type":47,"value":91},{"type":41,"tag":75,"props":1574,"children":1575},{"style":88},[1576],{"type":47,"value":122},{"type":41,"tag":75,"props":1578,"children":1580},{"style":1579},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1581],{"type":47,"value":1582},"title",{"type":41,"tag":75,"props":1584,"children":1585},{"style":88},[1586],{"type":47,"value":132},{"type":41,"tag":75,"props":1588,"children":1589},{"style":88},[1590],{"type":47,"value":252},{"type":41,"tag":75,"props":1592,"children":1593},{"style":88},[1594],{"type":47,"value":122},{"type":41,"tag":75,"props":1596,"children":1597},{"style":125},[1598],{"type":47,"value":1599},"Hello",{"type":41,"tag":75,"props":1601,"children":1602},{"style":88},[1603],{"type":47,"value":132},{"type":41,"tag":75,"props":1605,"children":1606},{"style":88},[1607],{"type":47,"value":1608}," },\n",{"type":41,"tag":75,"props":1610,"children":1611},{"class":77,"line":240},[1612,1616,1620,1624,1628],{"type":41,"tag":75,"props":1613,"children":1614},{"style":88},[1615],{"type":47,"value":1518},{"type":41,"tag":75,"props":1617,"children":1618},{"style":307},[1619],{"type":47,"value":335},{"type":41,"tag":75,"props":1621,"children":1622},{"style":88},[1623],{"type":47,"value":132},{"type":41,"tag":75,"props":1625,"children":1626},{"style":88},[1627],{"type":47,"value":252},{"type":41,"tag":75,"props":1629,"children":1630},{"style":88},[1631],{"type":47,"value":1632}," [\n",{"type":41,"tag":75,"props":1634,"children":1635},{"class":77,"line":259},[1636,1641,1645,1649,1653,1657,1661,1666,1670,1674,1678,1682,1686,1690,1694,1698,1703,1707,1711,1715,1720,1724,1728],{"type":41,"tag":75,"props":1637,"children":1638},{"style":88},[1639],{"type":47,"value":1640}," {",{"type":41,"tag":75,"props":1642,"children":1643},{"style":88},[1644],{"type":47,"value":122},{"type":41,"tag":75,"props":1646,"children":1647},{"style":1579},[1648],{"type":47,"value":1523},{"type":41,"tag":75,"props":1650,"children":1651},{"style":88},[1652],{"type":47,"value":132},{"type":41,"tag":75,"props":1654,"children":1655},{"style":88},[1656],{"type":47,"value":252},{"type":41,"tag":75,"props":1658,"children":1659},{"style":88},[1660],{"type":47,"value":122},{"type":41,"tag":75,"props":1662,"children":1663},{"style":125},[1664],{"type":47,"value":1665},"Button",{"type":41,"tag":75,"props":1667,"children":1668},{"style":88},[1669],{"type":47,"value":132},{"type":41,"tag":75,"props":1671,"children":1672},{"style":88},[1673],{"type":47,"value":102},{"type":41,"tag":75,"props":1675,"children":1676},{"style":88},[1677],{"type":47,"value":122},{"type":41,"tag":75,"props":1679,"children":1680},{"style":1579},[1681],{"type":47,"value":1560},{"type":41,"tag":75,"props":1683,"children":1684},{"style":88},[1685],{"type":47,"value":132},{"type":41,"tag":75,"props":1687,"children":1688},{"style":88},[1689],{"type":47,"value":252},{"type":41,"tag":75,"props":1691,"children":1692},{"style":88},[1693],{"type":47,"value":91},{"type":41,"tag":75,"props":1695,"children":1696},{"style":88},[1697],{"type":47,"value":122},{"type":41,"tag":75,"props":1699,"children":1700},{"style":244},[1701],{"type":47,"value":1702},"label",{"type":41,"tag":75,"props":1704,"children":1705},{"style":88},[1706],{"type":47,"value":132},{"type":41,"tag":75,"props":1708,"children":1709},{"style":88},[1710],{"type":47,"value":252},{"type":41,"tag":75,"props":1712,"children":1713},{"style":88},[1714],{"type":47,"value":122},{"type":41,"tag":75,"props":1716,"children":1717},{"style":125},[1718],{"type":47,"value":1719},"Click me",{"type":41,"tag":75,"props":1721,"children":1722},{"style":88},[1723],{"type":47,"value":132},{"type":41,"tag":75,"props":1725,"children":1726},{"style":88},[1727],{"type":47,"value":112},{"type":41,"tag":75,"props":1729,"children":1730},{"style":88},[1731],{"type":47,"value":1732}," }\n",{"type":41,"tag":75,"props":1734,"children":1735},{"class":77,"line":352},[1736],{"type":41,"tag":75,"props":1737,"children":1738},{"style":88},[1739],{"type":47,"value":1740}," ]\n",{"type":41,"tag":75,"props":1742,"children":1743},{"class":77,"line":361},[1744],{"type":41,"tag":75,"props":1745,"children":1746},{"style":88},[1747],{"type":47,"value":1748}," }\n",{"type":41,"tag":75,"props":1750,"children":1751},{"class":77,"line":378},[1752],{"type":41,"tag":75,"props":1753,"children":1754},{"style":88},[1755],{"type":47,"value":495},{"type":41,"tag":56,"props":1757,"children":1759},{"id":1758},"visibility-conditions",[1760],{"type":47,"value":1761},"Visibility Conditions",{"type":41,"tag":50,"props":1763,"children":1764},{},[1765,1767,1773,1775,1781,1783,1789,1790,1796,1797,1803,1805,1811,1813,1819,1820,1826,1827,1833,1834,1840,1841,1847],{"type":47,"value":1766},"Use ",{"type":41,"tag":71,"props":1768,"children":1770},{"className":1769},[],[1771],{"type":47,"value":1772},"visible",{"type":47,"value":1774}," on elements to show\u002Fhide based on state. New syntax: ",{"type":41,"tag":71,"props":1776,"children":1778},{"className":1777},[],[1779],{"type":47,"value":1780},"{ \"$state\": \"\u002Fpath\" }",{"type":47,"value":1782},", ",{"type":41,"tag":71,"props":1784,"children":1786},{"className":1785},[],[1787],{"type":47,"value":1788},"{ \"$state\": \"\u002Fpath\", \"eq\": value }",{"type":47,"value":1782},{"type":41,"tag":71,"props":1791,"children":1793},{"className":1792},[],[1794],{"type":47,"value":1795},"{ \"$state\": \"\u002Fpath\", \"not\": true }",{"type":47,"value":1782},{"type":41,"tag":71,"props":1798,"children":1800},{"className":1799},[],[1801],{"type":47,"value":1802},"{ \"$and\": [cond1, cond2] }",{"type":47,"value":1804}," for AND, ",{"type":41,"tag":71,"props":1806,"children":1808},{"className":1807},[],[1809],{"type":47,"value":1810},"{ \"$or\": [cond1, cond2] }",{"type":47,"value":1812}," for OR. Helpers: ",{"type":41,"tag":71,"props":1814,"children":1816},{"className":1815},[],[1817],{"type":47,"value":1818},"visibility.when(\"\u002Fpath\")",{"type":47,"value":1782},{"type":41,"tag":71,"props":1821,"children":1823},{"className":1822},[],[1824],{"type":47,"value":1825},"visibility.unless(\"\u002Fpath\")",{"type":47,"value":1782},{"type":41,"tag":71,"props":1828,"children":1830},{"className":1829},[],[1831],{"type":47,"value":1832},"visibility.eq(\"\u002Fpath\", val)",{"type":47,"value":1782},{"type":41,"tag":71,"props":1835,"children":1837},{"className":1836},[],[1838],{"type":47,"value":1839},"visibility.and(cond1, cond2)",{"type":47,"value":1782},{"type":41,"tag":71,"props":1842,"children":1844},{"className":1843},[],[1845],{"type":47,"value":1846},"visibility.or(cond1, cond2)",{"type":47,"value":777},{"type":41,"tag":56,"props":1849,"children":1851},{"id":1850},"providers",[1852],{"type":47,"value":1853},"Providers",{"type":41,"tag":1855,"props":1856,"children":1857},"table",{},[1858,1877],{"type":41,"tag":1859,"props":1860,"children":1861},"thead",{},[1862],{"type":41,"tag":1863,"props":1864,"children":1865},"tr",{},[1866,1872],{"type":41,"tag":1867,"props":1868,"children":1869},"th",{},[1870],{"type":47,"value":1871},"Provider",{"type":41,"tag":1867,"props":1873,"children":1874},{},[1875],{"type":47,"value":1876},"Purpose",{"type":41,"tag":1878,"props":1879,"children":1880},"tbody",{},[1881,1907,1924,1941],{"type":41,"tag":1863,"props":1882,"children":1883},{},[1884,1894],{"type":41,"tag":1885,"props":1886,"children":1887},"td",{},[1888],{"type":41,"tag":71,"props":1889,"children":1891},{"className":1890},[],[1892],{"type":47,"value":1893},"StateProvider",{"type":41,"tag":1885,"props":1895,"children":1896},{},[1897,1899,1905],{"type":47,"value":1898},"Share state across components (JSON Pointer paths). Accepts optional ",{"type":41,"tag":71,"props":1900,"children":1902},{"className":1901},[],[1903],{"type":47,"value":1904},"store",{"type":47,"value":1906}," prop for controlled mode.",{"type":41,"tag":1863,"props":1908,"children":1909},{},[1910,1919],{"type":41,"tag":1885,"props":1911,"children":1912},{},[1913],{"type":41,"tag":71,"props":1914,"children":1916},{"className":1915},[],[1917],{"type":47,"value":1918},"ActionProvider",{"type":41,"tag":1885,"props":1920,"children":1921},{},[1922],{"type":47,"value":1923},"Handle actions dispatched via the event system",{"type":41,"tag":1863,"props":1925,"children":1926},{},[1927,1936],{"type":41,"tag":1885,"props":1928,"children":1929},{},[1930],{"type":41,"tag":71,"props":1931,"children":1933},{"className":1932},[],[1934],{"type":47,"value":1935},"VisibilityProvider",{"type":41,"tag":1885,"props":1937,"children":1938},{},[1939],{"type":47,"value":1940},"Enable conditional rendering based on state",{"type":41,"tag":1863,"props":1942,"children":1943},{},[1944,1953],{"type":41,"tag":1885,"props":1945,"children":1946},{},[1947],{"type":41,"tag":71,"props":1948,"children":1950},{"className":1949},[],[1951],{"type":47,"value":1952},"ValidationProvider",{"type":41,"tag":1885,"props":1954,"children":1955},{},[1956],{"type":47,"value":1957},"Form field validation",{"type":41,"tag":1959,"props":1960,"children":1962},"h3",{"id":1961},"external-store-controlled-mode",[1963],{"type":47,"value":1964},"External Store (Controlled Mode)",{"type":41,"tag":50,"props":1966,"children":1967},{},[1968,1970,1976,1978,1983,1985,1991,1993,1999],{"type":47,"value":1969},"Pass a ",{"type":41,"tag":71,"props":1971,"children":1973},{"className":1972},[],[1974],{"type":47,"value":1975},"StateStore",{"type":47,"value":1977}," to ",{"type":41,"tag":71,"props":1979,"children":1981},{"className":1980},[],[1982],{"type":47,"value":1893},{"type":47,"value":1984}," (or ",{"type":41,"tag":71,"props":1986,"children":1988},{"className":1987},[],[1989],{"type":47,"value":1990},"JSONUIProvider",{"type":47,"value":1992}," \u002F ",{"type":41,"tag":71,"props":1994,"children":1996},{"className":1995},[],[1997],{"type":47,"value":1998},"createRenderer",{"type":47,"value":2000},") to use external state management (Redux, Zustand, XState, etc.):",{"type":41,"tag":63,"props":2002,"children":2006},{"className":2003,"code":2004,"language":2005,"meta":68,"style":68},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createStateStore, type StateStore } from \"@json-render\u002Freact\";\n\nconst store = createStateStore({ count: 0 });\n\n\u003CStateProvider store={store}>{children}\u003C\u002FStateProvider>\n\n\u002F\u002F Mutate from anywhere — React re-renders automatically:\nstore.set(\"\u002Fcount\", 1);\n","tsx",[2007],{"type":41,"tag":71,"props":2008,"children":2009},{"__ignoreMap":68},[2010,2064,2071,2125,2132,2177,2184,2192],{"type":41,"tag":75,"props":2011,"children":2012},{"class":77,"line":78},[2013,2017,2021,2026,2030,2035,2040,2044,2048,2052,2056,2060],{"type":41,"tag":75,"props":2014,"children":2015},{"style":82},[2016],{"type":47,"value":85},{"type":41,"tag":75,"props":2018,"children":2019},{"style":88},[2020],{"type":47,"value":91},{"type":41,"tag":75,"props":2022,"children":2023},{"style":94},[2024],{"type":47,"value":2025}," createStateStore",{"type":41,"tag":75,"props":2027,"children":2028},{"style":88},[2029],{"type":47,"value":102},{"type":41,"tag":75,"props":2031,"children":2032},{"style":82},[2033],{"type":47,"value":2034}," type",{"type":41,"tag":75,"props":2036,"children":2037},{"style":94},[2038],{"type":47,"value":2039}," StateStore",{"type":41,"tag":75,"props":2041,"children":2042},{"style":88},[2043],{"type":47,"value":112},{"type":41,"tag":75,"props":2045,"children":2046},{"style":82},[2047],{"type":47,"value":117},{"type":41,"tag":75,"props":2049,"children":2050},{"style":88},[2051],{"type":47,"value":122},{"type":41,"tag":75,"props":2053,"children":2054},{"style":125},[2055],{"type":47,"value":48},{"type":41,"tag":75,"props":2057,"children":2058},{"style":88},[2059],{"type":47,"value":132},{"type":41,"tag":75,"props":2061,"children":2062},{"style":88},[2063],{"type":47,"value":137},{"type":41,"tag":75,"props":2065,"children":2066},{"class":77,"line":140},[2067],{"type":41,"tag":75,"props":2068,"children":2069},{"emptyLinePlaceholder":186},[2070],{"type":47,"value":189},{"type":41,"tag":75,"props":2072,"children":2073},{"class":77,"line":182},[2074,2078,2083,2087,2091,2095,2099,2104,2108,2113,2117,2121],{"type":41,"tag":75,"props":2075,"children":2076},{"style":196},[2077],{"type":47,"value":199},{"type":41,"tag":75,"props":2079,"children":2080},{"style":94},[2081],{"type":47,"value":2082}," store ",{"type":41,"tag":75,"props":2084,"children":2085},{"style":88},[2086],{"type":47,"value":442},{"type":41,"tag":75,"props":2088,"children":2089},{"style":221},[2090],{"type":47,"value":2025},{"type":41,"tag":75,"props":2092,"children":2093},{"style":94},[2094],{"type":47,"value":787},{"type":41,"tag":75,"props":2096,"children":2097},{"style":88},[2098],{"type":47,"value":320},{"type":41,"tag":75,"props":2100,"children":2101},{"style":244},[2102],{"type":47,"value":2103}," count",{"type":41,"tag":75,"props":2105,"children":2106},{"style":88},[2107],{"type":47,"value":252},{"type":41,"tag":75,"props":2109,"children":2110},{"style":1579},[2111],{"type":47,"value":2112}," 0",{"type":41,"tag":75,"props":2114,"children":2115},{"style":88},[2116],{"type":47,"value":112},{"type":41,"tag":75,"props":2118,"children":2119},{"style":94},[2120],{"type":47,"value":371},{"type":41,"tag":75,"props":2122,"children":2123},{"style":88},[2124],{"type":47,"value":137},{"type":41,"tag":75,"props":2126,"children":2127},{"class":77,"line":192},[2128],{"type":41,"tag":75,"props":2129,"children":2130},{"emptyLinePlaceholder":186},[2131],{"type":47,"value":189},{"type":41,"tag":75,"props":2133,"children":2134},{"class":77,"line":240},[2135,2140,2144,2149,2153,2157,2161,2165,2169,2173],{"type":41,"tag":75,"props":2136,"children":2137},{"style":88},[2138],{"type":47,"value":2139},"\u003C",{"type":41,"tag":75,"props":2141,"children":2142},{"style":307},[2143],{"type":47,"value":1893},{"type":41,"tag":75,"props":2145,"children":2146},{"style":196},[2147],{"type":47,"value":2148}," store",{"type":41,"tag":75,"props":2150,"children":2151},{"style":88},[2152],{"type":47,"value":1237},{"type":41,"tag":75,"props":2154,"children":2155},{"style":94},[2156],{"type":47,"value":1904},{"type":41,"tag":75,"props":2158,"children":2159},{"style":88},[2160],{"type":47,"value":1247},{"type":41,"tag":75,"props":2162,"children":2163},{"style":94},[2164],{"type":47,"value":335},{"type":41,"tag":75,"props":2166,"children":2167},{"style":88},[2168],{"type":47,"value":340},{"type":41,"tag":75,"props":2170,"children":2171},{"style":307},[2172],{"type":47,"value":1893},{"type":41,"tag":75,"props":2174,"children":2175},{"style":88},[2176],{"type":47,"value":1266},{"type":41,"tag":75,"props":2178,"children":2179},{"class":77,"line":259},[2180],{"type":41,"tag":75,"props":2181,"children":2182},{"emptyLinePlaceholder":186},[2183],{"type":47,"value":189},{"type":41,"tag":75,"props":2185,"children":2186},{"class":77,"line":352},[2187],{"type":41,"tag":75,"props":2188,"children":2189},{"style":683},[2190],{"type":47,"value":2191},"\u002F\u002F Mutate from anywhere — React re-renders automatically:\n",{"type":41,"tag":75,"props":2193,"children":2194},{"class":77,"line":361},[2195,2199,2203,2208,2212,2216,2221,2225,2229,2234,2238],{"type":41,"tag":75,"props":2196,"children":2197},{"style":94},[2198],{"type":47,"value":1904},{"type":41,"tag":75,"props":2200,"children":2201},{"style":88},[2202],{"type":47,"value":777},{"type":41,"tag":75,"props":2204,"children":2205},{"style":221},[2206],{"type":47,"value":2207},"set",{"type":41,"tag":75,"props":2209,"children":2210},{"style":94},[2211],{"type":47,"value":787},{"type":41,"tag":75,"props":2213,"children":2214},{"style":88},[2215],{"type":47,"value":132},{"type":41,"tag":75,"props":2217,"children":2218},{"style":125},[2219],{"type":47,"value":2220},"\u002Fcount",{"type":41,"tag":75,"props":2222,"children":2223},{"style":88},[2224],{"type":47,"value":132},{"type":41,"tag":75,"props":2226,"children":2227},{"style":88},[2228],{"type":47,"value":102},{"type":41,"tag":75,"props":2230,"children":2231},{"style":1579},[2232],{"type":47,"value":2233}," 1",{"type":41,"tag":75,"props":2235,"children":2236},{"style":94},[2237],{"type":47,"value":371},{"type":41,"tag":75,"props":2239,"children":2240},{"style":88},[2241],{"type":47,"value":137},{"type":41,"tag":50,"props":2243,"children":2244},{},[2245,2247,2252,2254,2260,2262,2268],{"type":47,"value":2246},"When ",{"type":41,"tag":71,"props":2248,"children":2250},{"className":2249},[],[2251],{"type":47,"value":1904},{"type":47,"value":2253}," is provided, ",{"type":41,"tag":71,"props":2255,"children":2257},{"className":2256},[],[2258],{"type":47,"value":2259},"initialState",{"type":47,"value":2261}," and ",{"type":41,"tag":71,"props":2263,"children":2265},{"className":2264},[],[2266],{"type":47,"value":2267},"onStateChange",{"type":47,"value":2269}," are ignored.",{"type":41,"tag":56,"props":2271,"children":2273},{"id":2272},"dynamic-prop-expressions",[2274],{"type":47,"value":2275},"Dynamic Prop Expressions",{"type":41,"tag":50,"props":2277,"children":2278},{},[2279],{"type":47,"value":2280},"Any prop value can be a data-driven expression resolved by the renderer before components receive props:",{"type":41,"tag":2282,"props":2283,"children":2284},"ul",{},[2285,2301,2315,2329,2386,2400,2414],{"type":41,"tag":2286,"props":2287,"children":2288},"li",{},[2289,2299],{"type":41,"tag":2290,"props":2291,"children":2292},"strong",{},[2293],{"type":41,"tag":71,"props":2294,"children":2296},{"className":2295},[],[2297],{"type":47,"value":2298},"{ \"$state\": \"\u002Fstate\u002Fkey\" }",{"type":47,"value":2300}," - reads from state model (one-way read)",{"type":41,"tag":2286,"props":2302,"children":2303},{},[2304,2313],{"type":41,"tag":2290,"props":2305,"children":2306},{},[2307],{"type":41,"tag":71,"props":2308,"children":2310},{"className":2309},[],[2311],{"type":47,"value":2312},"{ \"$bindState\": \"\u002Fpath\" }",{"type":47,"value":2314}," - two-way binding: reads from state and enables write-back. Use on the natural value prop (value, checked, pressed, etc.) of form components.",{"type":41,"tag":2286,"props":2316,"children":2317},{},[2318,2327],{"type":41,"tag":2290,"props":2319,"children":2320},{},[2321],{"type":41,"tag":71,"props":2322,"children":2324},{"className":2323},[],[2325],{"type":47,"value":2326},"{ \"$bindItem\": \"field\" }",{"type":47,"value":2328}," - two-way binding to a repeat item field. Use inside repeat scopes.",{"type":41,"tag":2286,"props":2330,"children":2331},{},[2332,2337,2339,2345,2347,2353,2355,2361,2363,2369,2371,2376,2378,2384],{"type":41,"tag":2290,"props":2333,"children":2334},{},[2335],{"type":47,"value":2336},"Filtered lists",{"type":47,"value":2338},": ",{"type":41,"tag":71,"props":2340,"children":2342},{"className":2341},[],[2343],{"type":47,"value":2344},"repeat",{"type":47,"value":2346}," plus an ",{"type":41,"tag":71,"props":2348,"children":2350},{"className":2349},[],[2351],{"type":47,"value":2352},"$item",{"type":47,"value":2354}," visible condition on the same container renders only matching items: ",{"type":41,"tag":71,"props":2356,"children":2358},{"className":2357},[],[2359],{"type":47,"value":2360},"{ \"repeat\": { \"statePath\": \"\u002Ftasks\", \"key\": \"id\" }, \"visible\": { \"$item\": \"status\", \"eq\": \"todo\" }, \"children\": [\"task-card\"] }",{"type":47,"value":2362},". AND-composed ",{"type":41,"tag":71,"props":2364,"children":2366},{"className":2365},[],[2367],{"type":47,"value":2368},"$state",{"type":47,"value":2370}," conjuncts gate the container shell; ",{"type":41,"tag":71,"props":2372,"children":2374},{"className":2373},[],[2375],{"type":47,"value":2352},{"type":47,"value":2377},"\u002F",{"type":41,"tag":71,"props":2379,"children":2381},{"className":2380},[],[2382],{"type":47,"value":2383},"$index",{"type":47,"value":2385}," conjuncts filter items.",{"type":41,"tag":2286,"props":2387,"children":2388},{},[2389,2398],{"type":41,"tag":2290,"props":2390,"children":2391},{},[2392],{"type":41,"tag":71,"props":2393,"children":2395},{"className":2394},[],[2396],{"type":47,"value":2397},"{ \"$cond\": \u003Ccondition>, \"$then\": \u003Cvalue>, \"$else\": \u003Cvalue> }",{"type":47,"value":2399}," - conditional value",{"type":41,"tag":2286,"props":2401,"children":2402},{},[2403,2412],{"type":41,"tag":2290,"props":2404,"children":2405},{},[2406],{"type":41,"tag":71,"props":2407,"children":2409},{"className":2408},[],[2410],{"type":47,"value":2411},"{ \"$template\": \"Hello, ${\u002Fname}!\" }",{"type":47,"value":2413}," - interpolates state values into strings",{"type":41,"tag":2286,"props":2415,"children":2416},{},[2417,2426],{"type":41,"tag":2290,"props":2418,"children":2419},{},[2420],{"type":41,"tag":71,"props":2421,"children":2423},{"className":2422},[],[2424],{"type":47,"value":2425},"{ \"$computed\": \"fn\", \"args\": { ... } }",{"type":47,"value":2427}," - calls registered functions with resolved args",{"type":41,"tag":63,"props":2429,"children":2431},{"className":1474,"code":2430,"language":17,"meta":68,"style":68},"{\n \"type\": \"Input\",\n \"props\": {\n \"value\": { \"$bindState\": \"\u002Fform\u002Femail\" },\n \"placeholder\": \"Email\"\n }\n}\n",[2432],{"type":41,"tag":71,"props":2433,"children":2434},{"__ignoreMap":68},[2435,2442,2478,2501,2559,2593,2600],{"type":41,"tag":75,"props":2436,"children":2437},{"class":77,"line":78},[2438],{"type":41,"tag":75,"props":2439,"children":2440},{"style":88},[2441],{"type":47,"value":792},{"type":41,"tag":75,"props":2443,"children":2444},{"class":77,"line":140},[2445,2449,2453,2457,2461,2465,2470,2474],{"type":41,"tag":75,"props":2446,"children":2447},{"style":88},[2448],{"type":47,"value":1494},{"type":41,"tag":75,"props":2450,"children":2451},{"style":196},[2452],{"type":47,"value":1523},{"type":41,"tag":75,"props":2454,"children":2455},{"style":88},[2456],{"type":47,"value":132},{"type":41,"tag":75,"props":2458,"children":2459},{"style":88},[2460],{"type":47,"value":252},{"type":41,"tag":75,"props":2462,"children":2463},{"style":88},[2464],{"type":47,"value":122},{"type":41,"tag":75,"props":2466,"children":2467},{"style":125},[2468],{"type":47,"value":2469},"Input",{"type":41,"tag":75,"props":2471,"children":2472},{"style":88},[2473],{"type":47,"value":132},{"type":41,"tag":75,"props":2475,"children":2476},{"style":88},[2477],{"type":47,"value":827},{"type":41,"tag":75,"props":2479,"children":2480},{"class":77,"line":182},[2481,2485,2489,2493,2497],{"type":41,"tag":75,"props":2482,"children":2483},{"style":88},[2484],{"type":47,"value":1494},{"type":41,"tag":75,"props":2486,"children":2487},{"style":196},[2488],{"type":47,"value":1560},{"type":41,"tag":75,"props":2490,"children":2491},{"style":88},[2492],{"type":47,"value":132},{"type":41,"tag":75,"props":2494,"children":2495},{"style":88},[2496],{"type":47,"value":252},{"type":41,"tag":75,"props":2498,"children":2499},{"style":88},[2500],{"type":47,"value":237},{"type":41,"tag":75,"props":2502,"children":2503},{"class":77,"line":192},[2504,2508,2513,2517,2521,2525,2529,2534,2538,2542,2546,2551,2555],{"type":41,"tag":75,"props":2505,"children":2506},{"style":88},[2507],{"type":47,"value":1518},{"type":41,"tag":75,"props":2509,"children":2510},{"style":307},[2511],{"type":47,"value":2512},"value",{"type":41,"tag":75,"props":2514,"children":2515},{"style":88},[2516],{"type":47,"value":132},{"type":41,"tag":75,"props":2518,"children":2519},{"style":88},[2520],{"type":47,"value":252},{"type":41,"tag":75,"props":2522,"children":2523},{"style":88},[2524],{"type":47,"value":91},{"type":41,"tag":75,"props":2526,"children":2527},{"style":88},[2528],{"type":47,"value":122},{"type":41,"tag":75,"props":2530,"children":2531},{"style":1579},[2532],{"type":47,"value":2533},"$bindState",{"type":41,"tag":75,"props":2535,"children":2536},{"style":88},[2537],{"type":47,"value":132},{"type":41,"tag":75,"props":2539,"children":2540},{"style":88},[2541],{"type":47,"value":252},{"type":41,"tag":75,"props":2543,"children":2544},{"style":88},[2545],{"type":47,"value":122},{"type":41,"tag":75,"props":2547,"children":2548},{"style":125},[2549],{"type":47,"value":2550},"\u002Fform\u002Femail",{"type":41,"tag":75,"props":2552,"children":2553},{"style":88},[2554],{"type":47,"value":132},{"type":41,"tag":75,"props":2556,"children":2557},{"style":88},[2558],{"type":47,"value":1608},{"type":41,"tag":75,"props":2560,"children":2561},{"class":77,"line":240},[2562,2566,2571,2575,2579,2583,2588],{"type":41,"tag":75,"props":2563,"children":2564},{"style":88},[2565],{"type":47,"value":1518},{"type":41,"tag":75,"props":2567,"children":2568},{"style":307},[2569],{"type":47,"value":2570},"placeholder",{"type":41,"tag":75,"props":2572,"children":2573},{"style":88},[2574],{"type":47,"value":132},{"type":41,"tag":75,"props":2576,"children":2577},{"style":88},[2578],{"type":47,"value":252},{"type":41,"tag":75,"props":2580,"children":2581},{"style":88},[2582],{"type":47,"value":122},{"type":41,"tag":75,"props":2584,"children":2585},{"style":125},[2586],{"type":47,"value":2587},"Email",{"type":41,"tag":75,"props":2589,"children":2590},{"style":88},[2591],{"type":47,"value":2592},"\"\n",{"type":41,"tag":75,"props":2594,"children":2595},{"class":77,"line":259},[2596],{"type":41,"tag":75,"props":2597,"children":2598},{"style":88},[2599],{"type":47,"value":1748},{"type":41,"tag":75,"props":2601,"children":2602},{"class":77,"line":352},[2603],{"type":41,"tag":75,"props":2604,"children":2605},{"style":88},[2606],{"type":47,"value":495},{"type":41,"tag":50,"props":2608,"children":2609},{},[2610,2612,2618,2620,2625],{"type":47,"value":2611},"Components do not use a ",{"type":41,"tag":71,"props":2613,"children":2615},{"className":2614},[],[2616],{"type":47,"value":2617},"statePath",{"type":47,"value":2619}," prop for two-way binding. Use ",{"type":41,"tag":71,"props":2621,"children":2623},{"className":2622},[],[2624],{"type":47,"value":2312},{"type":47,"value":2626}," on the natural value prop instead.",{"type":41,"tag":50,"props":2628,"children":2629},{},[2630,2632,2638,2640,2646],{"type":47,"value":2631},"Components receive already-resolved props. For two-way bound props, use the ",{"type":41,"tag":71,"props":2633,"children":2635},{"className":2634},[],[2636],{"type":47,"value":2637},"useBoundProp",{"type":47,"value":2639}," hook with the ",{"type":41,"tag":71,"props":2641,"children":2643},{"className":2642},[],[2644],{"type":47,"value":2645},"bindings",{"type":47,"value":2647}," map the renderer provides.",{"type":41,"tag":50,"props":2649,"children":2650},{},[2651,2653,2659,2661,2667,2669,2674,2676,2681],{"type":47,"value":2652},"Register ",{"type":41,"tag":71,"props":2654,"children":2656},{"className":2655},[],[2657],{"type":47,"value":2658},"$computed",{"type":47,"value":2660}," functions via the ",{"type":41,"tag":71,"props":2662,"children":2664},{"className":2663},[],[2665],{"type":47,"value":2666},"functions",{"type":47,"value":2668}," prop on ",{"type":41,"tag":71,"props":2670,"children":2672},{"className":2671},[],[2673],{"type":47,"value":1990},{"type":47,"value":2675}," or ",{"type":41,"tag":71,"props":2677,"children":2679},{"className":2678},[],[2680],{"type":47,"value":1998},{"type":47,"value":252},{"type":41,"tag":63,"props":2683,"children":2685},{"className":2003,"code":2684,"language":2005,"meta":68,"style":68},"\u003CJSONUIProvider\n functions={{ fullName: (args) => `${args.first} ${args.last}` }}\n>\n",[2686],{"type":41,"tag":71,"props":2687,"children":2688},{"__ignoreMap":68},[2689,2701,2791],{"type":41,"tag":75,"props":2690,"children":2691},{"class":77,"line":78},[2692,2696],{"type":41,"tag":75,"props":2693,"children":2694},{"style":88},[2695],{"type":47,"value":2139},{"type":41,"tag":75,"props":2697,"children":2698},{"style":307},[2699],{"type":47,"value":2700},"JSONUIProvider\n",{"type":41,"tag":75,"props":2702,"children":2703},{"class":77,"line":140},[2704,2709,2714,2719,2723,2728,2733,2737,2741,2746,2750,2754,2759,2763,2768,2772,2776,2781,2786],{"type":41,"tag":75,"props":2705,"children":2706},{"style":196},[2707],{"type":47,"value":2708}," functions",{"type":41,"tag":75,"props":2710,"children":2711},{"style":88},[2712],{"type":47,"value":2713},"={{",{"type":41,"tag":75,"props":2715,"children":2716},{"style":221},[2717],{"type":47,"value":2718}," fullName",{"type":41,"tag":75,"props":2720,"children":2721},{"style":88},[2722],{"type":47,"value":252},{"type":41,"tag":75,"props":2724,"children":2725},{"style":88},[2726],{"type":47,"value":2727}," (",{"type":41,"tag":75,"props":2729,"children":2730},{"style":277},[2731],{"type":47,"value":2732},"args",{"type":41,"tag":75,"props":2734,"children":2735},{"style":88},[2736],{"type":47,"value":371},{"type":41,"tag":75,"props":2738,"children":2739},{"style":196},[2740],{"type":47,"value":299},{"type":41,"tag":75,"props":2742,"children":2743},{"style":88},[2744],{"type":47,"value":2745}," `${",{"type":41,"tag":75,"props":2747,"children":2748},{"style":94},[2749],{"type":47,"value":2732},{"type":41,"tag":75,"props":2751,"children":2752},{"style":88},[2753],{"type":47,"value":777},{"type":41,"tag":75,"props":2755,"children":2756},{"style":94},[2757],{"type":47,"value":2758},"first",{"type":41,"tag":75,"props":2760,"children":2761},{"style":88},[2762],{"type":47,"value":213},{"type":41,"tag":75,"props":2764,"children":2765},{"style":88},[2766],{"type":47,"value":2767}," ${",{"type":41,"tag":75,"props":2769,"children":2770},{"style":94},[2771],{"type":47,"value":2732},{"type":41,"tag":75,"props":2773,"children":2774},{"style":88},[2775],{"type":47,"value":777},{"type":41,"tag":75,"props":2777,"children":2778},{"style":94},[2779],{"type":47,"value":2780},"last",{"type":41,"tag":75,"props":2782,"children":2783},{"style":88},[2784],{"type":47,"value":2785},"}`",{"type":41,"tag":75,"props":2787,"children":2788},{"style":88},[2789],{"type":47,"value":2790}," }}\n",{"type":41,"tag":75,"props":2792,"children":2793},{"class":77,"line":182},[2794],{"type":41,"tag":75,"props":2795,"children":2796},{"style":88},[2797],{"type":47,"value":1266},{"type":41,"tag":56,"props":2799,"children":2801},{"id":2800},"event-system",[2802],{"type":47,"value":2803},"Event System",{"type":41,"tag":50,"props":2805,"children":2806},{},[2807,2809,2815,2817,2823,2825,2831],{"type":47,"value":2808},"Components use ",{"type":41,"tag":71,"props":2810,"children":2812},{"className":2811},[],[2813],{"type":47,"value":2814},"emit",{"type":47,"value":2816}," to fire named events, or ",{"type":41,"tag":71,"props":2818,"children":2820},{"className":2819},[],[2821],{"type":47,"value":2822},"on()",{"type":47,"value":2824}," to get an event handle with metadata. The element's ",{"type":41,"tag":71,"props":2826,"children":2828},{"className":2827},[],[2829],{"type":47,"value":2830},"on",{"type":47,"value":2832}," field maps events to action bindings:",{"type":41,"tag":63,"props":2834,"children":2836},{"className":2003,"code":2835,"language":2005,"meta":68,"style":68},"\u002F\u002F Simple event firing\nButton: ({ props, emit }) => (\n \u003Cbutton onClick={() => emit(\"press\")}>{props.label}\u003C\u002Fbutton>\n),\n\n\u002F\u002F Event handle with metadata (e.g. preventDefault)\nLink: ({ props, on }) => {\n const click = on(\"click\");\n return (\n \u003Ca href={props.href} onClick={(e) => {\n if (click.shouldPreventDefault) e.preventDefault();\n click.emit();\n }}>{props.label}\u003C\u002Fa>\n );\n},\n",[2837],{"type":41,"tag":71,"props":2838,"children":2839},{"__ignoreMap":68},[2840,2848,2888,2967,2978,2985,2993,3034,3080,3091,3158,3209,3233,3265,3277],{"type":41,"tag":75,"props":2841,"children":2842},{"class":77,"line":78},[2843],{"type":41,"tag":75,"props":2844,"children":2845},{"style":683},[2846],{"type":47,"value":2847},"\u002F\u002F Simple event firing\n",{"type":41,"tag":75,"props":2849,"children":2850},{"class":77,"line":140},[2851,2855,2859,2863,2867,2871,2876,2880,2884],{"type":41,"tag":75,"props":2852,"children":2853},{"style":307},[2854],{"type":47,"value":1665},{"type":41,"tag":75,"props":2856,"children":2857},{"style":88},[2858],{"type":47,"value":252},{"type":41,"tag":75,"props":2860,"children":2861},{"style":88},[2862],{"type":47,"value":274},{"type":41,"tag":75,"props":2864,"children":2865},{"style":277},[2866],{"type":47,"value":280},{"type":41,"tag":75,"props":2868,"children":2869},{"style":88},[2870],{"type":47,"value":102},{"type":41,"tag":75,"props":2872,"children":2873},{"style":277},[2874],{"type":47,"value":2875}," emit",{"type":41,"tag":75,"props":2877,"children":2878},{"style":88},[2879],{"type":47,"value":294},{"type":41,"tag":75,"props":2881,"children":2882},{"style":196},[2883],{"type":47,"value":299},{"type":41,"tag":75,"props":2885,"children":2886},{"style":94},[2887],{"type":47,"value":1218},{"type":41,"tag":75,"props":2889,"children":2890},{"class":77,"line":182},[2891,2896,2900,2905,2910,2914,2918,2922,2926,2931,2935,2939,2943,2947,2951,2955,2959,2963],{"type":41,"tag":75,"props":2892,"children":2893},{"style":88},[2894],{"type":47,"value":2895}," \u003C",{"type":41,"tag":75,"props":2897,"children":2898},{"style":244},[2899],{"type":47,"value":1261},{"type":41,"tag":75,"props":2901,"children":2902},{"style":196},[2903],{"type":47,"value":2904}," onClick",{"type":41,"tag":75,"props":2906,"children":2907},{"style":88},[2908],{"type":47,"value":2909},"={()",{"type":41,"tag":75,"props":2911,"children":2912},{"style":196},[2913],{"type":47,"value":299},{"type":41,"tag":75,"props":2915,"children":2916},{"style":221},[2917],{"type":47,"value":2875},{"type":41,"tag":75,"props":2919,"children":2920},{"style":94},[2921],{"type":47,"value":787},{"type":41,"tag":75,"props":2923,"children":2924},{"style":88},[2925],{"type":47,"value":132},{"type":41,"tag":75,"props":2927,"children":2928},{"style":125},[2929],{"type":47,"value":2930},"press",{"type":41,"tag":75,"props":2932,"children":2933},{"style":88},[2934],{"type":47,"value":132},{"type":41,"tag":75,"props":2936,"children":2937},{"style":94},[2938],{"type":47,"value":371},{"type":41,"tag":75,"props":2940,"children":2941},{"style":88},[2942],{"type":47,"value":1247},{"type":41,"tag":75,"props":2944,"children":2945},{"style":94},[2946],{"type":47,"value":1560},{"type":41,"tag":75,"props":2948,"children":2949},{"style":88},[2950],{"type":47,"value":777},{"type":41,"tag":75,"props":2952,"children":2953},{"style":94},[2954],{"type":47,"value":1702},{"type":41,"tag":75,"props":2956,"children":2957},{"style":88},[2958],{"type":47,"value":340},{"type":41,"tag":75,"props":2960,"children":2961},{"style":244},[2962],{"type":47,"value":1261},{"type":41,"tag":75,"props":2964,"children":2965},{"style":88},[2966],{"type":47,"value":1266},{"type":41,"tag":75,"props":2968,"children":2969},{"class":77,"line":192},[2970,2974],{"type":41,"tag":75,"props":2971,"children":2972},{"style":94},[2973],{"type":47,"value":371},{"type":41,"tag":75,"props":2975,"children":2976},{"style":88},[2977],{"type":47,"value":827},{"type":41,"tag":75,"props":2979,"children":2980},{"class":77,"line":240},[2981],{"type":41,"tag":75,"props":2982,"children":2983},{"emptyLinePlaceholder":186},[2984],{"type":47,"value":189},{"type":41,"tag":75,"props":2986,"children":2987},{"class":77,"line":259},[2988],{"type":41,"tag":75,"props":2989,"children":2990},{"style":683},[2991],{"type":47,"value":2992},"\u002F\u002F Event handle with metadata (e.g. preventDefault)\n",{"type":41,"tag":75,"props":2994,"children":2995},{"class":77,"line":352},[2996,3001,3005,3009,3013,3017,3022,3026,3030],{"type":41,"tag":75,"props":2997,"children":2998},{"style":307},[2999],{"type":47,"value":3000},"Link",{"type":41,"tag":75,"props":3002,"children":3003},{"style":88},[3004],{"type":47,"value":252},{"type":41,"tag":75,"props":3006,"children":3007},{"style":88},[3008],{"type":47,"value":274},{"type":41,"tag":75,"props":3010,"children":3011},{"style":277},[3012],{"type":47,"value":280},{"type":41,"tag":75,"props":3014,"children":3015},{"style":88},[3016],{"type":47,"value":102},{"type":41,"tag":75,"props":3018,"children":3019},{"style":277},[3020],{"type":47,"value":3021}," on",{"type":41,"tag":75,"props":3023,"children":3024},{"style":88},[3025],{"type":47,"value":294},{"type":41,"tag":75,"props":3027,"children":3028},{"style":196},[3029],{"type":47,"value":299},{"type":41,"tag":75,"props":3031,"children":3032},{"style":88},[3033],{"type":47,"value":237},{"type":41,"tag":75,"props":3035,"children":3036},{"class":77,"line":361},[3037,3042,3047,3051,3055,3059,3063,3068,3072,3076],{"type":41,"tag":75,"props":3038,"children":3039},{"style":196},[3040],{"type":47,"value":3041}," const",{"type":41,"tag":75,"props":3043,"children":3044},{"style":94},[3045],{"type":47,"value":3046}," click",{"type":41,"tag":75,"props":3048,"children":3049},{"style":88},[3050],{"type":47,"value":218},{"type":41,"tag":75,"props":3052,"children":3053},{"style":221},[3054],{"type":47,"value":3021},{"type":41,"tag":75,"props":3056,"children":3057},{"style":244},[3058],{"type":47,"value":787},{"type":41,"tag":75,"props":3060,"children":3061},{"style":88},[3062],{"type":47,"value":132},{"type":41,"tag":75,"props":3064,"children":3065},{"style":125},[3066],{"type":47,"value":3067},"click",{"type":41,"tag":75,"props":3069,"children":3070},{"style":88},[3071],{"type":47,"value":132},{"type":41,"tag":75,"props":3073,"children":3074},{"style":244},[3075],{"type":47,"value":371},{"type":41,"tag":75,"props":3077,"children":3078},{"style":88},[3079],{"type":47,"value":137},{"type":41,"tag":75,"props":3081,"children":3082},{"class":77,"line":378},[3083,3087],{"type":41,"tag":75,"props":3084,"children":3085},{"style":82},[3086],{"type":47,"value":424},{"type":41,"tag":75,"props":3088,"children":3089},{"style":244},[3090],{"type":47,"value":1218},{"type":41,"tag":75,"props":3092,"children":3093},{"class":77,"line":386},[3094,3099,3104,3109,3113,3117,3121,3126,3131,3136,3141,3146,3150,3154],{"type":41,"tag":75,"props":3095,"children":3096},{"style":88},[3097],{"type":47,"value":3098}," \u003C",{"type":41,"tag":75,"props":3100,"children":3101},{"style":244},[3102],{"type":47,"value":3103},"a",{"type":41,"tag":75,"props":3105,"children":3106},{"style":196},[3107],{"type":47,"value":3108}," href",{"type":41,"tag":75,"props":3110,"children":3111},{"style":88},[3112],{"type":47,"value":1237},{"type":41,"tag":75,"props":3114,"children":3115},{"style":94},[3116],{"type":47,"value":1560},{"type":41,"tag":75,"props":3118,"children":3119},{"style":88},[3120],{"type":47,"value":777},{"type":41,"tag":75,"props":3122,"children":3123},{"style":94},[3124],{"type":47,"value":3125},"href",{"type":41,"tag":75,"props":3127,"children":3128},{"style":88},[3129],{"type":47,"value":3130},"} ",{"type":41,"tag":75,"props":3132,"children":3133},{"style":196},[3134],{"type":47,"value":3135},"onClick",{"type":41,"tag":75,"props":3137,"children":3138},{"style":88},[3139],{"type":47,"value":3140},"={(",{"type":41,"tag":75,"props":3142,"children":3143},{"style":277},[3144],{"type":47,"value":3145},"e",{"type":41,"tag":75,"props":3147,"children":3148},{"style":88},[3149],{"type":47,"value":371},{"type":41,"tag":75,"props":3151,"children":3152},{"style":196},[3153],{"type":47,"value":299},{"type":41,"tag":75,"props":3155,"children":3156},{"style":88},[3157],{"type":47,"value":237},{"type":41,"tag":75,"props":3159,"children":3160},{"class":77,"line":418},[3161,3166,3170,3174,3178,3183,3188,3192,3196,3201,3205],{"type":41,"tag":75,"props":3162,"children":3163},{"style":82},[3164],{"type":47,"value":3165}," if",{"type":41,"tag":75,"props":3167,"children":3168},{"style":244},[3169],{"type":47,"value":2727},{"type":41,"tag":75,"props":3171,"children":3172},{"style":94},[3173],{"type":47,"value":3067},{"type":41,"tag":75,"props":3175,"children":3176},{"style":88},[3177],{"type":47,"value":777},{"type":41,"tag":75,"props":3179,"children":3180},{"style":94},[3181],{"type":47,"value":3182},"shouldPreventDefault",{"type":41,"tag":75,"props":3184,"children":3185},{"style":244},[3186],{"type":47,"value":3187},") ",{"type":41,"tag":75,"props":3189,"children":3190},{"style":94},[3191],{"type":47,"value":3145},{"type":41,"tag":75,"props":3193,"children":3194},{"style":88},[3195],{"type":47,"value":777},{"type":41,"tag":75,"props":3197,"children":3198},{"style":221},[3199],{"type":47,"value":3200},"preventDefault",{"type":41,"tag":75,"props":3202,"children":3203},{"style":244},[3204],{"type":47,"value":822},{"type":41,"tag":75,"props":3206,"children":3207},{"style":88},[3208],{"type":47,"value":137},{"type":41,"tag":75,"props":3210,"children":3211},{"class":77,"line":489},[3212,3217,3221,3225,3229],{"type":41,"tag":75,"props":3213,"children":3214},{"style":94},[3215],{"type":47,"value":3216}," click",{"type":41,"tag":75,"props":3218,"children":3219},{"style":88},[3220],{"type":47,"value":777},{"type":41,"tag":75,"props":3222,"children":3223},{"style":221},[3224],{"type":47,"value":2814},{"type":41,"tag":75,"props":3226,"children":3227},{"style":244},[3228],{"type":47,"value":822},{"type":41,"tag":75,"props":3230,"children":3231},{"style":88},[3232],{"type":47,"value":137},{"type":41,"tag":75,"props":3234,"children":3235},{"class":77,"line":912},[3236,3241,3245,3249,3253,3257,3261],{"type":41,"tag":75,"props":3237,"children":3238},{"style":88},[3239],{"type":47,"value":3240}," }}>{",{"type":41,"tag":75,"props":3242,"children":3243},{"style":94},[3244],{"type":47,"value":1560},{"type":41,"tag":75,"props":3246,"children":3247},{"style":88},[3248],{"type":47,"value":777},{"type":41,"tag":75,"props":3250,"children":3251},{"style":94},[3252],{"type":47,"value":1702},{"type":41,"tag":75,"props":3254,"children":3255},{"style":88},[3256],{"type":47,"value":340},{"type":41,"tag":75,"props":3258,"children":3259},{"style":244},[3260],{"type":47,"value":3103},{"type":41,"tag":75,"props":3262,"children":3263},{"style":88},[3264],{"type":47,"value":1266},{"type":41,"tag":75,"props":3266,"children":3267},{"class":77,"line":929},[3268,3273],{"type":41,"tag":75,"props":3269,"children":3270},{"style":244},[3271],{"type":47,"value":3272}," )",{"type":41,"tag":75,"props":3274,"children":3275},{"style":88},[3276],{"type":47,"value":137},{"type":41,"tag":75,"props":3278,"children":3279},{"class":77,"line":959},[3280],{"type":41,"tag":75,"props":3281,"children":3282},{"style":88},[3283],{"type":47,"value":3284},"},\n",{"type":41,"tag":63,"props":3286,"children":3288},{"className":1474,"code":3287,"language":17,"meta":68,"style":68},"{\n \"type\": \"Button\",\n \"props\": { \"label\": \"Submit\" },\n \"on\": { \"press\": { \"action\": \"submit\" } }\n}\n",[3289],{"type":41,"tag":71,"props":3290,"children":3291},{"__ignoreMap":68},[3292,3299,3334,3390,3471],{"type":41,"tag":75,"props":3293,"children":3294},{"class":77,"line":78},[3295],{"type":41,"tag":75,"props":3296,"children":3297},{"style":88},[3298],{"type":47,"value":792},{"type":41,"tag":75,"props":3300,"children":3301},{"class":77,"line":140},[3302,3306,3310,3314,3318,3322,3326,3330],{"type":41,"tag":75,"props":3303,"children":3304},{"style":88},[3305],{"type":47,"value":1494},{"type":41,"tag":75,"props":3307,"children":3308},{"style":196},[3309],{"type":47,"value":1523},{"type":41,"tag":75,"props":3311,"children":3312},{"style":88},[3313],{"type":47,"value":132},{"type":41,"tag":75,"props":3315,"children":3316},{"style":88},[3317],{"type":47,"value":252},{"type":41,"tag":75,"props":3319,"children":3320},{"style":88},[3321],{"type":47,"value":122},{"type":41,"tag":75,"props":3323,"children":3324},{"style":125},[3325],{"type":47,"value":1665},{"type":41,"tag":75,"props":3327,"children":3328},{"style":88},[3329],{"type":47,"value":132},{"type":41,"tag":75,"props":3331,"children":3332},{"style":88},[3333],{"type":47,"value":827},{"type":41,"tag":75,"props":3335,"children":3336},{"class":77,"line":182},[3337,3341,3345,3349,3353,3357,3361,3365,3369,3373,3377,3382,3386],{"type":41,"tag":75,"props":3338,"children":3339},{"style":88},[3340],{"type":47,"value":1494},{"type":41,"tag":75,"props":3342,"children":3343},{"style":196},[3344],{"type":47,"value":1560},{"type":41,"tag":75,"props":3346,"children":3347},{"style":88},[3348],{"type":47,"value":132},{"type":41,"tag":75,"props":3350,"children":3351},{"style":88},[3352],{"type":47,"value":252},{"type":41,"tag":75,"props":3354,"children":3355},{"style":88},[3356],{"type":47,"value":91},{"type":41,"tag":75,"props":3358,"children":3359},{"style":88},[3360],{"type":47,"value":122},{"type":41,"tag":75,"props":3362,"children":3363},{"style":307},[3364],{"type":47,"value":1702},{"type":41,"tag":75,"props":3366,"children":3367},{"style":88},[3368],{"type":47,"value":132},{"type":41,"tag":75,"props":3370,"children":3371},{"style":88},[3372],{"type":47,"value":252},{"type":41,"tag":75,"props":3374,"children":3375},{"style":88},[3376],{"type":47,"value":122},{"type":41,"tag":75,"props":3378,"children":3379},{"style":125},[3380],{"type":47,"value":3381},"Submit",{"type":41,"tag":75,"props":3383,"children":3384},{"style":88},[3385],{"type":47,"value":132},{"type":41,"tag":75,"props":3387,"children":3388},{"style":88},[3389],{"type":47,"value":1608},{"type":41,"tag":75,"props":3391,"children":3392},{"class":77,"line":192},[3393,3397,3401,3405,3409,3413,3417,3421,3425,3429,3433,3437,3442,3446,3450,3454,3459,3463,3467],{"type":41,"tag":75,"props":3394,"children":3395},{"style":88},[3396],{"type":47,"value":1494},{"type":41,"tag":75,"props":3398,"children":3399},{"style":196},[3400],{"type":47,"value":2830},{"type":41,"tag":75,"props":3402,"children":3403},{"style":88},[3404],{"type":47,"value":132},{"type":41,"tag":75,"props":3406,"children":3407},{"style":88},[3408],{"type":47,"value":252},{"type":41,"tag":75,"props":3410,"children":3411},{"style":88},[3412],{"type":47,"value":91},{"type":41,"tag":75,"props":3414,"children":3415},{"style":88},[3416],{"type":47,"value":122},{"type":41,"tag":75,"props":3418,"children":3419},{"style":307},[3420],{"type":47,"value":2930},{"type":41,"tag":75,"props":3422,"children":3423},{"style":88},[3424],{"type":47,"value":132},{"type":41,"tag":75,"props":3426,"children":3427},{"style":88},[3428],{"type":47,"value":252},{"type":41,"tag":75,"props":3430,"children":3431},{"style":88},[3432],{"type":47,"value":91},{"type":41,"tag":75,"props":3434,"children":3435},{"style":88},[3436],{"type":47,"value":122},{"type":41,"tag":75,"props":3438,"children":3439},{"style":1579},[3440],{"type":47,"value":3441},"action",{"type":41,"tag":75,"props":3443,"children":3444},{"style":88},[3445],{"type":47,"value":132},{"type":41,"tag":75,"props":3447,"children":3448},{"style":88},[3449],{"type":47,"value":252},{"type":41,"tag":75,"props":3451,"children":3452},{"style":88},[3453],{"type":47,"value":122},{"type":41,"tag":75,"props":3455,"children":3456},{"style":125},[3457],{"type":47,"value":3458},"submit",{"type":41,"tag":75,"props":3460,"children":3461},{"style":88},[3462],{"type":47,"value":132},{"type":41,"tag":75,"props":3464,"children":3465},{"style":88},[3466],{"type":47,"value":112},{"type":41,"tag":75,"props":3468,"children":3469},{"style":88},[3470],{"type":47,"value":1732},{"type":41,"tag":75,"props":3472,"children":3473},{"class":77,"line":240},[3474],{"type":41,"tag":75,"props":3475,"children":3476},{"style":88},[3477],{"type":47,"value":495},{"type":41,"tag":50,"props":3479,"children":3480},{},[3481,3483,3489,3491,3496,3498,3504,3505,3510,3512,3518],{"type":47,"value":3482},"The ",{"type":41,"tag":71,"props":3484,"children":3486},{"className":3485},[],[3487],{"type":47,"value":3488},"EventHandle",{"type":47,"value":3490}," returned by ",{"type":41,"tag":71,"props":3492,"children":3494},{"className":3493},[],[3495],{"type":47,"value":2822},{"type":47,"value":3497}," has: ",{"type":41,"tag":71,"props":3499,"children":3501},{"className":3500},[],[3502],{"type":47,"value":3503},"emit()",{"type":47,"value":1782},{"type":41,"tag":71,"props":3506,"children":3508},{"className":3507},[],[3509],{"type":47,"value":3182},{"type":47,"value":3511}," (boolean), and ",{"type":41,"tag":71,"props":3513,"children":3515},{"className":3514},[],[3516],{"type":47,"value":3517},"bound",{"type":47,"value":3519}," (boolean).",{"type":41,"tag":56,"props":3521,"children":3523},{"id":3522},"state-watchers",[3524],{"type":47,"value":3525},"State Watchers",{"type":41,"tag":50,"props":3527,"children":3528},{},[3529,3531,3537],{"type":47,"value":3530},"Elements can declare a ",{"type":41,"tag":71,"props":3532,"children":3534},{"className":3533},[],[3535],{"type":47,"value":3536},"watch",{"type":47,"value":3538}," field (top-level, sibling of type\u002Fprops\u002Fchildren) to trigger actions when state values change:",{"type":41,"tag":63,"props":3540,"children":3542},{"className":1474,"code":3541,"language":17,"meta":68,"style":68},"{\n \"type\": \"Select\",\n \"props\": { \"value\": { \"$bindState\": \"\u002Fform\u002Fcountry\" }, \"options\": [\"US\", \"Canada\"] },\n \"watch\": { \"\u002Fform\u002Fcountry\": { \"action\": \"loadCities\" } },\n \"children\": []\n}\n",[3543],{"type":41,"tag":71,"props":3544,"children":3545},{"__ignoreMap":68},[3546,3553,3589,3727,3807,3831],{"type":41,"tag":75,"props":3547,"children":3548},{"class":77,"line":78},[3549],{"type":41,"tag":75,"props":3550,"children":3551},{"style":88},[3552],{"type":47,"value":792},{"type":41,"tag":75,"props":3554,"children":3555},{"class":77,"line":140},[3556,3560,3564,3568,3572,3576,3581,3585],{"type":41,"tag":75,"props":3557,"children":3558},{"style":88},[3559],{"type":47,"value":1494},{"type":41,"tag":75,"props":3561,"children":3562},{"style":196},[3563],{"type":47,"value":1523},{"type":41,"tag":75,"props":3565,"children":3566},{"style":88},[3567],{"type":47,"value":132},{"type":41,"tag":75,"props":3569,"children":3570},{"style":88},[3571],{"type":47,"value":252},{"type":41,"tag":75,"props":3573,"children":3574},{"style":88},[3575],{"type":47,"value":122},{"type":41,"tag":75,"props":3577,"children":3578},{"style":125},[3579],{"type":47,"value":3580},"Select",{"type":41,"tag":75,"props":3582,"children":3583},{"style":88},[3584],{"type":47,"value":132},{"type":41,"tag":75,"props":3586,"children":3587},{"style":88},[3588],{"type":47,"value":827},{"type":41,"tag":75,"props":3590,"children":3591},{"class":77,"line":182},[3592,3596,3600,3604,3608,3612,3616,3620,3624,3628,3632,3636,3640,3644,3648,3652,3657,3661,3666,3670,3675,3679,3683,3688,3692,3697,3701,3705,3709,3714,3718,3723],{"type":41,"tag":75,"props":3593,"children":3594},{"style":88},[3595],{"type":47,"value":1494},{"type":41,"tag":75,"props":3597,"children":3598},{"style":196},[3599],{"type":47,"value":1560},{"type":41,"tag":75,"props":3601,"children":3602},{"style":88},[3603],{"type":47,"value":132},{"type":41,"tag":75,"props":3605,"children":3606},{"style":88},[3607],{"type":47,"value":252},{"type":41,"tag":75,"props":3609,"children":3610},{"style":88},[3611],{"type":47,"value":91},{"type":41,"tag":75,"props":3613,"children":3614},{"style":88},[3615],{"type":47,"value":122},{"type":41,"tag":75,"props":3617,"children":3618},{"style":307},[3619],{"type":47,"value":2512},{"type":41,"tag":75,"props":3621,"children":3622},{"style":88},[3623],{"type":47,"value":132},{"type":41,"tag":75,"props":3625,"children":3626},{"style":88},[3627],{"type":47,"value":252},{"type":41,"tag":75,"props":3629,"children":3630},{"style":88},[3631],{"type":47,"value":91},{"type":41,"tag":75,"props":3633,"children":3634},{"style":88},[3635],{"type":47,"value":122},{"type":41,"tag":75,"props":3637,"children":3638},{"style":1579},[3639],{"type":47,"value":2533},{"type":41,"tag":75,"props":3641,"children":3642},{"style":88},[3643],{"type":47,"value":132},{"type":41,"tag":75,"props":3645,"children":3646},{"style":88},[3647],{"type":47,"value":252},{"type":41,"tag":75,"props":3649,"children":3650},{"style":88},[3651],{"type":47,"value":122},{"type":41,"tag":75,"props":3653,"children":3654},{"style":125},[3655],{"type":47,"value":3656},"\u002Fform\u002Fcountry",{"type":41,"tag":75,"props":3658,"children":3659},{"style":88},[3660],{"type":47,"value":132},{"type":41,"tag":75,"props":3662,"children":3663},{"style":88},[3664],{"type":47,"value":3665}," },",{"type":41,"tag":75,"props":3667,"children":3668},{"style":88},[3669],{"type":47,"value":122},{"type":41,"tag":75,"props":3671,"children":3672},{"style":307},[3673],{"type":47,"value":3674},"options",{"type":41,"tag":75,"props":3676,"children":3677},{"style":88},[3678],{"type":47,"value":132},{"type":41,"tag":75,"props":3680,"children":3681},{"style":88},[3682],{"type":47,"value":252},{"type":41,"tag":75,"props":3684,"children":3685},{"style":88},[3686],{"type":47,"value":3687}," [",{"type":41,"tag":75,"props":3689,"children":3690},{"style":88},[3691],{"type":47,"value":132},{"type":41,"tag":75,"props":3693,"children":3694},{"style":125},[3695],{"type":47,"value":3696},"US",{"type":41,"tag":75,"props":3698,"children":3699},{"style":88},[3700],{"type":47,"value":132},{"type":41,"tag":75,"props":3702,"children":3703},{"style":88},[3704],{"type":47,"value":102},{"type":41,"tag":75,"props":3706,"children":3707},{"style":88},[3708],{"type":47,"value":122},{"type":41,"tag":75,"props":3710,"children":3711},{"style":125},[3712],{"type":47,"value":3713},"Canada",{"type":41,"tag":75,"props":3715,"children":3716},{"style":88},[3717],{"type":47,"value":132},{"type":41,"tag":75,"props":3719,"children":3720},{"style":88},[3721],{"type":47,"value":3722},"]",{"type":41,"tag":75,"props":3724,"children":3725},{"style":88},[3726],{"type":47,"value":1608},{"type":41,"tag":75,"props":3728,"children":3729},{"class":77,"line":192},[3730,3734,3738,3742,3746,3750,3754,3758,3762,3766,3770,3774,3778,3782,3786,3790,3795,3799,3803],{"type":41,"tag":75,"props":3731,"children":3732},{"style":88},[3733],{"type":47,"value":1494},{"type":41,"tag":75,"props":3735,"children":3736},{"style":196},[3737],{"type":47,"value":3536},{"type":41,"tag":75,"props":3739,"children":3740},{"style":88},[3741],{"type":47,"value":132},{"type":41,"tag":75,"props":3743,"children":3744},{"style":88},[3745],{"type":47,"value":252},{"type":41,"tag":75,"props":3747,"children":3748},{"style":88},[3749],{"type":47,"value":91},{"type":41,"tag":75,"props":3751,"children":3752},{"style":88},[3753],{"type":47,"value":122},{"type":41,"tag":75,"props":3755,"children":3756},{"style":307},[3757],{"type":47,"value":3656},{"type":41,"tag":75,"props":3759,"children":3760},{"style":88},[3761],{"type":47,"value":132},{"type":41,"tag":75,"props":3763,"children":3764},{"style":88},[3765],{"type":47,"value":252},{"type":41,"tag":75,"props":3767,"children":3768},{"style":88},[3769],{"type":47,"value":91},{"type":41,"tag":75,"props":3771,"children":3772},{"style":88},[3773],{"type":47,"value":122},{"type":41,"tag":75,"props":3775,"children":3776},{"style":1579},[3777],{"type":47,"value":3441},{"type":41,"tag":75,"props":3779,"children":3780},{"style":88},[3781],{"type":47,"value":132},{"type":41,"tag":75,"props":3783,"children":3784},{"style":88},[3785],{"type":47,"value":252},{"type":41,"tag":75,"props":3787,"children":3788},{"style":88},[3789],{"type":47,"value":122},{"type":41,"tag":75,"props":3791,"children":3792},{"style":125},[3793],{"type":47,"value":3794},"loadCities",{"type":41,"tag":75,"props":3796,"children":3797},{"style":88},[3798],{"type":47,"value":132},{"type":41,"tag":75,"props":3800,"children":3801},{"style":88},[3802],{"type":47,"value":112},{"type":41,"tag":75,"props":3804,"children":3805},{"style":88},[3806],{"type":47,"value":1608},{"type":41,"tag":75,"props":3808,"children":3809},{"class":77,"line":240},[3810,3814,3818,3822,3826],{"type":41,"tag":75,"props":3811,"children":3812},{"style":88},[3813],{"type":47,"value":1494},{"type":41,"tag":75,"props":3815,"children":3816},{"style":196},[3817],{"type":47,"value":335},{"type":41,"tag":75,"props":3819,"children":3820},{"style":88},[3821],{"type":47,"value":132},{"type":41,"tag":75,"props":3823,"children":3824},{"style":88},[3825],{"type":47,"value":252},{"type":41,"tag":75,"props":3827,"children":3828},{"style":88},[3829],{"type":47,"value":3830}," []\n",{"type":41,"tag":75,"props":3832,"children":3833},{"class":77,"line":259},[3834],{"type":41,"tag":75,"props":3835,"children":3836},{"style":88},[3837],{"type":47,"value":495},{"type":41,"tag":56,"props":3839,"children":3841},{"id":3840},"built-in-actions",[3842],{"type":47,"value":3843},"Built-in Actions",{"type":41,"tag":50,"props":3845,"children":3846},{},[3847,3848,3854,3855,3861,3862,3868,3870,3876,3878,3883,3885,3891],{"type":47,"value":3482},{"type":41,"tag":71,"props":3849,"children":3851},{"className":3850},[],[3852],{"type":47,"value":3853},"setState",{"type":47,"value":1782},{"type":41,"tag":71,"props":3856,"children":3858},{"className":3857},[],[3859],{"type":47,"value":3860},"pushState",{"type":47,"value":1782},{"type":41,"tag":71,"props":3863,"children":3865},{"className":3864},[],[3866],{"type":47,"value":3867},"removeState",{"type":47,"value":3869},", and ",{"type":41,"tag":71,"props":3871,"children":3873},{"className":3872},[],[3874],{"type":47,"value":3875},"validateForm",{"type":47,"value":3877}," actions are built into the React schema and handled automatically by ",{"type":41,"tag":71,"props":3879,"children":3881},{"className":3880},[],[3882],{"type":47,"value":1918},{"type":47,"value":3884},". They are injected into AI prompts without needing to be declared in catalog ",{"type":41,"tag":71,"props":3886,"children":3888},{"className":3887},[],[3889],{"type":47,"value":3890},"actions",{"type":47,"value":252},{"type":41,"tag":63,"props":3893,"children":3895},{"className":1474,"code":3894,"language":17,"meta":68,"style":68},"{ \"action\": \"setState\", \"params\": { \"statePath\": \"\u002FactiveTab\", \"value\": \"home\" } }\n{ \"action\": \"pushState\", \"params\": { \"statePath\": \"\u002Fitems\", \"value\": { \"text\": \"New\" } } }\n{ \"action\": \"removeState\", \"params\": { \"statePath\": \"\u002Fitems\", \"index\": 0 } }\n{ \"action\": \"validateForm\", \"params\": { \"statePath\": \"\u002FformResult\" } }\n",[3896],{"type":41,"tag":71,"props":3897,"children":3898},{"__ignoreMap":68},[3899,4029,4182,4302],{"type":41,"tag":75,"props":3900,"children":3901},{"class":77,"line":78},[3902,3906,3910,3914,3918,3922,3926,3930,3934,3938,3942,3947,3951,3955,3959,3963,3967,3971,3975,3979,3984,3988,3992,3996,4000,4004,4008,4012,4017,4021,4025],{"type":41,"tag":75,"props":3903,"children":3904},{"style":88},[3905],{"type":47,"value":320},{"type":41,"tag":75,"props":3907,"children":3908},{"style":88},[3909],{"type":47,"value":122},{"type":41,"tag":75,"props":3911,"children":3912},{"style":196},[3913],{"type":47,"value":3441},{"type":41,"tag":75,"props":3915,"children":3916},{"style":88},[3917],{"type":47,"value":132},{"type":41,"tag":75,"props":3919,"children":3920},{"style":88},[3921],{"type":47,"value":252},{"type":41,"tag":75,"props":3923,"children":3924},{"style":88},[3925],{"type":47,"value":122},{"type":41,"tag":75,"props":3927,"children":3928},{"style":125},[3929],{"type":47,"value":3853},{"type":41,"tag":75,"props":3931,"children":3932},{"style":88},[3933],{"type":47,"value":132},{"type":41,"tag":75,"props":3935,"children":3936},{"style":88},[3937],{"type":47,"value":102},{"type":41,"tag":75,"props":3939,"children":3940},{"style":88},[3941],{"type":47,"value":122},{"type":41,"tag":75,"props":3943,"children":3944},{"style":196},[3945],{"type":47,"value":3946},"params",{"type":41,"tag":75,"props":3948,"children":3949},{"style":88},[3950],{"type":47,"value":132},{"type":41,"tag":75,"props":3952,"children":3953},{"style":88},[3954],{"type":47,"value":252},{"type":41,"tag":75,"props":3956,"children":3957},{"style":88},[3958],{"type":47,"value":91},{"type":41,"tag":75,"props":3960,"children":3961},{"style":88},[3962],{"type":47,"value":122},{"type":41,"tag":75,"props":3964,"children":3965},{"style":307},[3966],{"type":47,"value":2617},{"type":41,"tag":75,"props":3968,"children":3969},{"style":88},[3970],{"type":47,"value":132},{"type":41,"tag":75,"props":3972,"children":3973},{"style":88},[3974],{"type":47,"value":252},{"type":41,"tag":75,"props":3976,"children":3977},{"style":88},[3978],{"type":47,"value":122},{"type":41,"tag":75,"props":3980,"children":3981},{"style":125},[3982],{"type":47,"value":3983},"\u002FactiveTab",{"type":41,"tag":75,"props":3985,"children":3986},{"style":88},[3987],{"type":47,"value":132},{"type":41,"tag":75,"props":3989,"children":3990},{"style":88},[3991],{"type":47,"value":102},{"type":41,"tag":75,"props":3993,"children":3994},{"style":88},[3995],{"type":47,"value":122},{"type":41,"tag":75,"props":3997,"children":3998},{"style":307},[3999],{"type":47,"value":2512},{"type":41,"tag":75,"props":4001,"children":4002},{"style":88},[4003],{"type":47,"value":132},{"type":41,"tag":75,"props":4005,"children":4006},{"style":88},[4007],{"type":47,"value":252},{"type":41,"tag":75,"props":4009,"children":4010},{"style":88},[4011],{"type":47,"value":122},{"type":41,"tag":75,"props":4013,"children":4014},{"style":125},[4015],{"type":47,"value":4016},"home",{"type":41,"tag":75,"props":4018,"children":4019},{"style":88},[4020],{"type":47,"value":132},{"type":41,"tag":75,"props":4022,"children":4023},{"style":88},[4024],{"type":47,"value":112},{"type":41,"tag":75,"props":4026,"children":4027},{"style":88},[4028],{"type":47,"value":1732},{"type":41,"tag":75,"props":4030,"children":4031},{"class":77,"line":140},[4032,4036,4040,4044,4048,4052,4056,4060,4064,4068,4072,4076,4080,4084,4088,4092,4096,4100,4104,4108,4113,4117,4121,4125,4129,4133,4137,4141,4145,4149,4153,4157,4161,4166,4170,4174,4178],{"type":41,"tag":75,"props":4033,"children":4034},{"style":88},[4035],{"type":47,"value":320},{"type":41,"tag":75,"props":4037,"children":4038},{"style":88},[4039],{"type":47,"value":122},{"type":41,"tag":75,"props":4041,"children":4042},{"style":196},[4043],{"type":47,"value":3441},{"type":41,"tag":75,"props":4045,"children":4046},{"style":88},[4047],{"type":47,"value":132},{"type":41,"tag":75,"props":4049,"children":4050},{"style":88},[4051],{"type":47,"value":252},{"type":41,"tag":75,"props":4053,"children":4054},{"style":88},[4055],{"type":47,"value":122},{"type":41,"tag":75,"props":4057,"children":4058},{"style":125},[4059],{"type":47,"value":3860},{"type":41,"tag":75,"props":4061,"children":4062},{"style":88},[4063],{"type":47,"value":132},{"type":41,"tag":75,"props":4065,"children":4066},{"style":88},[4067],{"type":47,"value":102},{"type":41,"tag":75,"props":4069,"children":4070},{"style":88},[4071],{"type":47,"value":122},{"type":41,"tag":75,"props":4073,"children":4074},{"style":196},[4075],{"type":47,"value":3946},{"type":41,"tag":75,"props":4077,"children":4078},{"style":88},[4079],{"type":47,"value":132},{"type":41,"tag":75,"props":4081,"children":4082},{"style":88},[4083],{"type":47,"value":252},{"type":41,"tag":75,"props":4085,"children":4086},{"style":88},[4087],{"type":47,"value":91},{"type":41,"tag":75,"props":4089,"children":4090},{"style":88},[4091],{"type":47,"value":122},{"type":41,"tag":75,"props":4093,"children":4094},{"style":307},[4095],{"type":47,"value":2617},{"type":41,"tag":75,"props":4097,"children":4098},{"style":88},[4099],{"type":47,"value":132},{"type":41,"tag":75,"props":4101,"children":4102},{"style":88},[4103],{"type":47,"value":252},{"type":41,"tag":75,"props":4105,"children":4106},{"style":88},[4107],{"type":47,"value":122},{"type":41,"tag":75,"props":4109,"children":4110},{"style":125},[4111],{"type":47,"value":4112},"\u002Fitems",{"type":41,"tag":75,"props":4114,"children":4115},{"style":88},[4116],{"type":47,"value":132},{"type":41,"tag":75,"props":4118,"children":4119},{"style":88},[4120],{"type":47,"value":102},{"type":41,"tag":75,"props":4122,"children":4123},{"style":88},[4124],{"type":47,"value":122},{"type":41,"tag":75,"props":4126,"children":4127},{"style":307},[4128],{"type":47,"value":2512},{"type":41,"tag":75,"props":4130,"children":4131},{"style":88},[4132],{"type":47,"value":132},{"type":41,"tag":75,"props":4134,"children":4135},{"style":88},[4136],{"type":47,"value":252},{"type":41,"tag":75,"props":4138,"children":4139},{"style":88},[4140],{"type":47,"value":91},{"type":41,"tag":75,"props":4142,"children":4143},{"style":88},[4144],{"type":47,"value":122},{"type":41,"tag":75,"props":4146,"children":4147},{"style":1579},[4148],{"type":47,"value":47},{"type":41,"tag":75,"props":4150,"children":4151},{"style":88},[4152],{"type":47,"value":132},{"type":41,"tag":75,"props":4154,"children":4155},{"style":88},[4156],{"type":47,"value":252},{"type":41,"tag":75,"props":4158,"children":4159},{"style":88},[4160],{"type":47,"value":122},{"type":41,"tag":75,"props":4162,"children":4163},{"style":125},[4164],{"type":47,"value":4165},"New",{"type":41,"tag":75,"props":4167,"children":4168},{"style":88},[4169],{"type":47,"value":132},{"type":41,"tag":75,"props":4171,"children":4172},{"style":88},[4173],{"type":47,"value":112},{"type":41,"tag":75,"props":4175,"children":4176},{"style":88},[4177],{"type":47,"value":112},{"type":41,"tag":75,"props":4179,"children":4180},{"style":88},[4181],{"type":47,"value":1732},{"type":41,"tag":75,"props":4183,"children":4184},{"class":77,"line":182},[4185,4189,4193,4197,4201,4205,4209,4213,4217,4221,4225,4229,4233,4237,4241,4245,4249,4253,4257,4261,4265,4269,4273,4277,4282,4286,4290,4294,4298],{"type":41,"tag":75,"props":4186,"children":4187},{"style":88},[4188],{"type":47,"value":320},{"type":41,"tag":75,"props":4190,"children":4191},{"style":88},[4192],{"type":47,"value":122},{"type":41,"tag":75,"props":4194,"children":4195},{"style":196},[4196],{"type":47,"value":3441},{"type":41,"tag":75,"props":4198,"children":4199},{"style":88},[4200],{"type":47,"value":132},{"type":41,"tag":75,"props":4202,"children":4203},{"style":88},[4204],{"type":47,"value":252},{"type":41,"tag":75,"props":4206,"children":4207},{"style":88},[4208],{"type":47,"value":122},{"type":41,"tag":75,"props":4210,"children":4211},{"style":125},[4212],{"type":47,"value":3867},{"type":41,"tag":75,"props":4214,"children":4215},{"style":88},[4216],{"type":47,"value":132},{"type":41,"tag":75,"props":4218,"children":4219},{"style":88},[4220],{"type":47,"value":102},{"type":41,"tag":75,"props":4222,"children":4223},{"style":88},[4224],{"type":47,"value":122},{"type":41,"tag":75,"props":4226,"children":4227},{"style":196},[4228],{"type":47,"value":3946},{"type":41,"tag":75,"props":4230,"children":4231},{"style":88},[4232],{"type":47,"value":132},{"type":41,"tag":75,"props":4234,"children":4235},{"style":88},[4236],{"type":47,"value":252},{"type":41,"tag":75,"props":4238,"children":4239},{"style":88},[4240],{"type":47,"value":91},{"type":41,"tag":75,"props":4242,"children":4243},{"style":88},[4244],{"type":47,"value":122},{"type":41,"tag":75,"props":4246,"children":4247},{"style":307},[4248],{"type":47,"value":2617},{"type":41,"tag":75,"props":4250,"children":4251},{"style":88},[4252],{"type":47,"value":132},{"type":41,"tag":75,"props":4254,"children":4255},{"style":88},[4256],{"type":47,"value":252},{"type":41,"tag":75,"props":4258,"children":4259},{"style":88},[4260],{"type":47,"value":122},{"type":41,"tag":75,"props":4262,"children":4263},{"style":125},[4264],{"type":47,"value":4112},{"type":41,"tag":75,"props":4266,"children":4267},{"style":88},[4268],{"type":47,"value":132},{"type":41,"tag":75,"props":4270,"children":4271},{"style":88},[4272],{"type":47,"value":102},{"type":41,"tag":75,"props":4274,"children":4275},{"style":88},[4276],{"type":47,"value":122},{"type":41,"tag":75,"props":4278,"children":4279},{"style":307},[4280],{"type":47,"value":4281},"index",{"type":41,"tag":75,"props":4283,"children":4284},{"style":88},[4285],{"type":47,"value":132},{"type":41,"tag":75,"props":4287,"children":4288},{"style":88},[4289],{"type":47,"value":252},{"type":41,"tag":75,"props":4291,"children":4292},{"style":1579},[4293],{"type":47,"value":2112},{"type":41,"tag":75,"props":4295,"children":4296},{"style":88},[4297],{"type":47,"value":112},{"type":41,"tag":75,"props":4299,"children":4300},{"style":88},[4301],{"type":47,"value":1732},{"type":41,"tag":75,"props":4303,"children":4304},{"class":77,"line":192},[4305,4309,4313,4317,4321,4325,4329,4333,4337,4341,4345,4349,4353,4357,4361,4365,4369,4373,4377,4381,4386,4390,4394],{"type":41,"tag":75,"props":4306,"children":4307},{"style":88},[4308],{"type":47,"value":320},{"type":41,"tag":75,"props":4310,"children":4311},{"style":88},[4312],{"type":47,"value":122},{"type":41,"tag":75,"props":4314,"children":4315},{"style":196},[4316],{"type":47,"value":3441},{"type":41,"tag":75,"props":4318,"children":4319},{"style":88},[4320],{"type":47,"value":132},{"type":41,"tag":75,"props":4322,"children":4323},{"style":88},[4324],{"type":47,"value":252},{"type":41,"tag":75,"props":4326,"children":4327},{"style":88},[4328],{"type":47,"value":122},{"type":41,"tag":75,"props":4330,"children":4331},{"style":125},[4332],{"type":47,"value":3875},{"type":41,"tag":75,"props":4334,"children":4335},{"style":88},[4336],{"type":47,"value":132},{"type":41,"tag":75,"props":4338,"children":4339},{"style":88},[4340],{"type":47,"value":102},{"type":41,"tag":75,"props":4342,"children":4343},{"style":88},[4344],{"type":47,"value":122},{"type":41,"tag":75,"props":4346,"children":4347},{"style":196},[4348],{"type":47,"value":3946},{"type":41,"tag":75,"props":4350,"children":4351},{"style":88},[4352],{"type":47,"value":132},{"type":41,"tag":75,"props":4354,"children":4355},{"style":88},[4356],{"type":47,"value":252},{"type":41,"tag":75,"props":4358,"children":4359},{"style":88},[4360],{"type":47,"value":91},{"type":41,"tag":75,"props":4362,"children":4363},{"style":88},[4364],{"type":47,"value":122},{"type":41,"tag":75,"props":4366,"children":4367},{"style":307},[4368],{"type":47,"value":2617},{"type":41,"tag":75,"props":4370,"children":4371},{"style":88},[4372],{"type":47,"value":132},{"type":41,"tag":75,"props":4374,"children":4375},{"style":88},[4376],{"type":47,"value":252},{"type":41,"tag":75,"props":4378,"children":4379},{"style":88},[4380],{"type":47,"value":122},{"type":41,"tag":75,"props":4382,"children":4383},{"style":125},[4384],{"type":47,"value":4385},"\u002FformResult",{"type":41,"tag":75,"props":4387,"children":4388},{"style":88},[4389],{"type":47,"value":132},{"type":41,"tag":75,"props":4391,"children":4392},{"style":88},[4393],{"type":47,"value":112},{"type":41,"tag":75,"props":4395,"children":4396},{"style":88},[4397],{"type":47,"value":1732},{"type":41,"tag":50,"props":4399,"children":4400},{},[4401,4406,4408,4414],{"type":41,"tag":71,"props":4402,"children":4404},{"className":4403},[],[4405],{"type":47,"value":3875},{"type":47,"value":4407}," validates all registered fields and writes ",{"type":41,"tag":71,"props":4409,"children":4411},{"className":4410},[],[4412],{"type":47,"value":4413},"{ valid, errors }",{"type":47,"value":4415}," to state.",{"type":41,"tag":50,"props":4417,"children":4418},{},[4419,4421,4426,4428,4434,4436,4441,4443,4448],{"type":47,"value":4420},"Note: ",{"type":41,"tag":71,"props":4422,"children":4424},{"className":4423},[],[4425],{"type":47,"value":2617},{"type":47,"value":4427}," in action params (e.g. ",{"type":41,"tag":71,"props":4429,"children":4431},{"className":4430},[],[4432],{"type":47,"value":4433},"setState.statePath",{"type":47,"value":4435},") targets the mutation path. Two-way binding in component props uses ",{"type":41,"tag":71,"props":4437,"children":4439},{"className":4438},[],[4440],{"type":47,"value":2312},{"type":47,"value":4442}," on the value prop, not ",{"type":41,"tag":71,"props":4444,"children":4446},{"className":4445},[],[4447],{"type":47,"value":2617},{"type":47,"value":777},{"type":41,"tag":56,"props":4450,"children":4452},{"id":4451},"useboundprop",[4453],{"type":47,"value":2637},{"type":41,"tag":50,"props":4455,"children":4456},{},[4457,4459,4464,4466,4471,4473,4478,4479,4484],{"type":47,"value":4458},"For form components that need two-way binding, use ",{"type":41,"tag":71,"props":4460,"children":4462},{"className":4461},[],[4463],{"type":47,"value":2637},{"type":47,"value":4465}," with the ",{"type":41,"tag":71,"props":4467,"children":4469},{"className":4468},[],[4470],{"type":47,"value":2645},{"type":47,"value":4472}," map the renderer provides when a prop uses ",{"type":41,"tag":71,"props":4474,"children":4476},{"className":4475},[],[4477],{"type":47,"value":2312},{"type":47,"value":2675},{"type":41,"tag":71,"props":4480,"children":4482},{"className":4481},[],[4483],{"type":47,"value":2326},{"type":47,"value":252},{"type":41,"tag":63,"props":4486,"children":4488},{"className":2003,"code":4487,"language":2005,"meta":68,"style":68},"import { useBoundProp } from \"@json-render\u002Freact\";\n\nInput: ({ element, bindings }) => {\n const [value, setValue] = useBoundProp\u003Cstring>(\n element.props.value,\n bindings?.value\n );\n return (\n \u003Cinput\n value={value ?? \"\"}\n onChange={(e) => setValue(e.target.value)}\n \u002F>\n );\n},\n",[4489],{"type":41,"tag":71,"props":4490,"children":4491},{"__ignoreMap":68},[4492,4532,4539,4580,4633,4661,4679,4690,4701,4713,4744,4799,4807,4818],{"type":41,"tag":75,"props":4493,"children":4494},{"class":77,"line":78},[4495,4499,4503,4508,4512,4516,4520,4524,4528],{"type":41,"tag":75,"props":4496,"children":4497},{"style":82},[4498],{"type":47,"value":85},{"type":41,"tag":75,"props":4500,"children":4501},{"style":88},[4502],{"type":47,"value":91},{"type":41,"tag":75,"props":4504,"children":4505},{"style":94},[4506],{"type":47,"value":4507}," useBoundProp",{"type":41,"tag":75,"props":4509,"children":4510},{"style":88},[4511],{"type":47,"value":112},{"type":41,"tag":75,"props":4513,"children":4514},{"style":82},[4515],{"type":47,"value":117},{"type":41,"tag":75,"props":4517,"children":4518},{"style":88},[4519],{"type":47,"value":122},{"type":41,"tag":75,"props":4521,"children":4522},{"style":125},[4523],{"type":47,"value":48},{"type":41,"tag":75,"props":4525,"children":4526},{"style":88},[4527],{"type":47,"value":132},{"type":41,"tag":75,"props":4529,"children":4530},{"style":88},[4531],{"type":47,"value":137},{"type":41,"tag":75,"props":4533,"children":4534},{"class":77,"line":140},[4535],{"type":41,"tag":75,"props":4536,"children":4537},{"emptyLinePlaceholder":186},[4538],{"type":47,"value":189},{"type":41,"tag":75,"props":4540,"children":4541},{"class":77,"line":182},[4542,4546,4550,4554,4559,4563,4568,4572,4576],{"type":41,"tag":75,"props":4543,"children":4544},{"style":307},[4545],{"type":47,"value":2469},{"type":41,"tag":75,"props":4547,"children":4548},{"style":88},[4549],{"type":47,"value":252},{"type":41,"tag":75,"props":4551,"children":4552},{"style":88},[4553],{"type":47,"value":274},{"type":41,"tag":75,"props":4555,"children":4556},{"style":277},[4557],{"type":47,"value":4558}," element",{"type":41,"tag":75,"props":4560,"children":4561},{"style":88},[4562],{"type":47,"value":102},{"type":41,"tag":75,"props":4564,"children":4565},{"style":277},[4566],{"type":47,"value":4567}," bindings",{"type":41,"tag":75,"props":4569,"children":4570},{"style":88},[4571],{"type":47,"value":294},{"type":41,"tag":75,"props":4573,"children":4574},{"style":196},[4575],{"type":47,"value":299},{"type":41,"tag":75,"props":4577,"children":4578},{"style":88},[4579],{"type":47,"value":237},{"type":41,"tag":75,"props":4581,"children":4582},{"class":77,"line":192},[4583,4587,4591,4595,4599,4604,4608,4612,4616,4620,4624,4628],{"type":41,"tag":75,"props":4584,"children":4585},{"style":196},[4586],{"type":47,"value":3041},{"type":41,"tag":75,"props":4588,"children":4589},{"style":88},[4590],{"type":47,"value":3687},{"type":41,"tag":75,"props":4592,"children":4593},{"style":94},[4594],{"type":47,"value":2512},{"type":41,"tag":75,"props":4596,"children":4597},{"style":88},[4598],{"type":47,"value":102},{"type":41,"tag":75,"props":4600,"children":4601},{"style":94},[4602],{"type":47,"value":4603}," setValue",{"type":41,"tag":75,"props":4605,"children":4606},{"style":88},[4607],{"type":47,"value":3722},{"type":41,"tag":75,"props":4609,"children":4610},{"style":88},[4611],{"type":47,"value":218},{"type":41,"tag":75,"props":4613,"children":4614},{"style":221},[4615],{"type":47,"value":4507},{"type":41,"tag":75,"props":4617,"children":4618},{"style":88},[4619],{"type":47,"value":2139},{"type":41,"tag":75,"props":4621,"children":4622},{"style":307},[4623],{"type":47,"value":817},{"type":41,"tag":75,"props":4625,"children":4626},{"style":88},[4627],{"type":47,"value":315},{"type":41,"tag":75,"props":4629,"children":4630},{"style":244},[4631],{"type":47,"value":4632},"(\n",{"type":41,"tag":75,"props":4634,"children":4635},{"class":77,"line":240},[4636,4641,4645,4649,4653,4657],{"type":41,"tag":75,"props":4637,"children":4638},{"style":94},[4639],{"type":47,"value":4640}," element",{"type":41,"tag":75,"props":4642,"children":4643},{"style":88},[4644],{"type":47,"value":777},{"type":41,"tag":75,"props":4646,"children":4647},{"style":94},[4648],{"type":47,"value":1560},{"type":41,"tag":75,"props":4650,"children":4651},{"style":88},[4652],{"type":47,"value":777},{"type":41,"tag":75,"props":4654,"children":4655},{"style":94},[4656],{"type":47,"value":2512},{"type":41,"tag":75,"props":4658,"children":4659},{"style":88},[4660],{"type":47,"value":827},{"type":41,"tag":75,"props":4662,"children":4663},{"class":77,"line":259},[4664,4669,4674],{"type":41,"tag":75,"props":4665,"children":4666},{"style":94},[4667],{"type":47,"value":4668}," bindings",{"type":41,"tag":75,"props":4670,"children":4671},{"style":88},[4672],{"type":47,"value":4673},"?.",{"type":41,"tag":75,"props":4675,"children":4676},{"style":94},[4677],{"type":47,"value":4678},"value\n",{"type":41,"tag":75,"props":4680,"children":4681},{"class":77,"line":352},[4682,4686],{"type":41,"tag":75,"props":4683,"children":4684},{"style":244},[4685],{"type":47,"value":3272},{"type":41,"tag":75,"props":4687,"children":4688},{"style":88},[4689],{"type":47,"value":137},{"type":41,"tag":75,"props":4691,"children":4692},{"class":77,"line":361},[4693,4697],{"type":41,"tag":75,"props":4694,"children":4695},{"style":82},[4696],{"type":47,"value":424},{"type":41,"tag":75,"props":4698,"children":4699},{"style":244},[4700],{"type":47,"value":1218},{"type":41,"tag":75,"props":4702,"children":4703},{"class":77,"line":378},[4704,4708],{"type":41,"tag":75,"props":4705,"children":4706},{"style":88},[4707],{"type":47,"value":3098},{"type":41,"tag":75,"props":4709,"children":4710},{"style":244},[4711],{"type":47,"value":4712},"input\n",{"type":41,"tag":75,"props":4714,"children":4715},{"class":77,"line":386},[4716,4721,4725,4730,4735,4740],{"type":41,"tag":75,"props":4717,"children":4718},{"style":196},[4719],{"type":47,"value":4720}," value",{"type":41,"tag":75,"props":4722,"children":4723},{"style":88},[4724],{"type":47,"value":1237},{"type":41,"tag":75,"props":4726,"children":4727},{"style":94},[4728],{"type":47,"value":4729},"value ",{"type":41,"tag":75,"props":4731,"children":4732},{"style":88},[4733],{"type":47,"value":4734},"??",{"type":41,"tag":75,"props":4736,"children":4737},{"style":88},[4738],{"type":47,"value":4739}," \"\"",{"type":41,"tag":75,"props":4741,"children":4742},{"style":88},[4743],{"type":47,"value":495},{"type":41,"tag":75,"props":4745,"children":4746},{"class":77,"line":418},[4747,4752,4756,4760,4764,4768,4772,4777,4781,4786,4790,4795],{"type":41,"tag":75,"props":4748,"children":4749},{"style":196},[4750],{"type":47,"value":4751}," onChange",{"type":41,"tag":75,"props":4753,"children":4754},{"style":88},[4755],{"type":47,"value":3140},{"type":41,"tag":75,"props":4757,"children":4758},{"style":277},[4759],{"type":47,"value":3145},{"type":41,"tag":75,"props":4761,"children":4762},{"style":88},[4763],{"type":47,"value":371},{"type":41,"tag":75,"props":4765,"children":4766},{"style":196},[4767],{"type":47,"value":299},{"type":41,"tag":75,"props":4769,"children":4770},{"style":221},[4771],{"type":47,"value":4603},{"type":41,"tag":75,"props":4773,"children":4774},{"style":94},[4775],{"type":47,"value":4776},"(e",{"type":41,"tag":75,"props":4778,"children":4779},{"style":88},[4780],{"type":47,"value":777},{"type":41,"tag":75,"props":4782,"children":4783},{"style":94},[4784],{"type":47,"value":4785},"target",{"type":41,"tag":75,"props":4787,"children":4788},{"style":88},[4789],{"type":47,"value":777},{"type":41,"tag":75,"props":4791,"children":4792},{"style":94},[4793],{"type":47,"value":4794},"value)",{"type":41,"tag":75,"props":4796,"children":4797},{"style":88},[4798],{"type":47,"value":495},{"type":41,"tag":75,"props":4800,"children":4801},{"class":77,"line":489},[4802],{"type":41,"tag":75,"props":4803,"children":4804},{"style":88},[4805],{"type":47,"value":4806}," \u002F>\n",{"type":41,"tag":75,"props":4808,"children":4809},{"class":77,"line":912},[4810,4814],{"type":41,"tag":75,"props":4811,"children":4812},{"style":244},[4813],{"type":47,"value":3272},{"type":41,"tag":75,"props":4815,"children":4816},{"style":88},[4817],{"type":47,"value":137},{"type":41,"tag":75,"props":4819,"children":4820},{"class":77,"line":929},[4821],{"type":41,"tag":75,"props":4822,"children":4823},{"style":88},[4824],{"type":47,"value":3284},{"type":41,"tag":50,"props":4826,"children":4827},{},[4828,4834,4836,4842,4844,4849,4851,4857],{"type":41,"tag":71,"props":4829,"children":4831},{"className":4830},[],[4832],{"type":47,"value":4833},"useBoundProp(propValue, bindingPath)",{"type":47,"value":4835}," returns ",{"type":41,"tag":71,"props":4837,"children":4839},{"className":4838},[],[4840],{"type":47,"value":4841},"[value, setValue]",{"type":47,"value":4843},". The ",{"type":41,"tag":71,"props":4845,"children":4847},{"className":4846},[],[4848],{"type":47,"value":2512},{"type":47,"value":4850}," is the resolved prop; ",{"type":41,"tag":71,"props":4852,"children":4854},{"className":4853},[],[4855],{"type":47,"value":4856},"setValue",{"type":47,"value":4858}," writes back to the bound state path (no-op if not bound).",{"type":41,"tag":56,"props":4860,"children":4862},{"id":4861},"basecomponentprops",[4863],{"type":47,"value":4864},"BaseComponentProps",{"type":41,"tag":50,"props":4866,"children":4867},{},[4868,4870,4876],{"type":47,"value":4869},"For building reusable component libraries not tied to a specific catalog (e.g. ",{"type":41,"tag":71,"props":4871,"children":4873},{"className":4872},[],[4874],{"type":47,"value":4875},"@json-render\u002Fshadcn",{"type":47,"value":4877},"):",{"type":41,"tag":63,"props":4879,"children":4881},{"className":65,"code":4880,"language":67,"meta":68,"style":68},"import type { BaseComponentProps } from \"@json-render\u002Freact\";\n\nconst Card = ({ props, children }: BaseComponentProps\u003C{ title?: string }>) => (\n \u003Cdiv>{props.title}{children}\u003C\u002Fdiv>\n);\n",[4882],{"type":41,"tag":71,"props":4883,"children":4884},{"__ignoreMap":68},[4885,4929,4936,5009,5052],{"type":41,"tag":75,"props":4886,"children":4887},{"class":77,"line":78},[4888,4892,4896,4900,4905,4909,4913,4917,4921,4925],{"type":41,"tag":75,"props":4889,"children":4890},{"style":82},[4891],{"type":47,"value":85},{"type":41,"tag":75,"props":4893,"children":4894},{"style":82},[4895],{"type":47,"value":2034},{"type":41,"tag":75,"props":4897,"children":4898},{"style":88},[4899],{"type":47,"value":91},{"type":41,"tag":75,"props":4901,"children":4902},{"style":94},[4903],{"type":47,"value":4904}," BaseComponentProps",{"type":41,"tag":75,"props":4906,"children":4907},{"style":88},[4908],{"type":47,"value":112},{"type":41,"tag":75,"props":4910,"children":4911},{"style":82},[4912],{"type":47,"value":117},{"type":41,"tag":75,"props":4914,"children":4915},{"style":88},[4916],{"type":47,"value":122},{"type":41,"tag":75,"props":4918,"children":4919},{"style":125},[4920],{"type":47,"value":48},{"type":41,"tag":75,"props":4922,"children":4923},{"style":88},[4924],{"type":47,"value":132},{"type":41,"tag":75,"props":4926,"children":4927},{"style":88},[4928],{"type":47,"value":137},{"type":41,"tag":75,"props":4930,"children":4931},{"class":77,"line":140},[4932],{"type":41,"tag":75,"props":4933,"children":4934},{"emptyLinePlaceholder":186},[4935],{"type":47,"value":189},{"type":41,"tag":75,"props":4937,"children":4938},{"class":77,"line":182},[4939,4943,4948,4952,4956,4960,4964,4968,4973,4977,4982,4986,4991,4996,5001,5005],{"type":41,"tag":75,"props":4940,"children":4941},{"style":196},[4942],{"type":47,"value":199},{"type":41,"tag":75,"props":4944,"children":4945},{"style":94},[4946],{"type":47,"value":4947}," Card ",{"type":41,"tag":75,"props":4949,"children":4950},{"style":88},[4951],{"type":47,"value":442},{"type":41,"tag":75,"props":4953,"children":4954},{"style":88},[4955],{"type":47,"value":274},{"type":41,"tag":75,"props":4957,"children":4958},{"style":277},[4959],{"type":47,"value":280},{"type":41,"tag":75,"props":4961,"children":4962},{"style":88},[4963],{"type":47,"value":102},{"type":41,"tag":75,"props":4965,"children":4966},{"style":277},[4967],{"type":47,"value":289},{"type":41,"tag":75,"props":4969,"children":4970},{"style":88},[4971],{"type":47,"value":4972}," }:",{"type":41,"tag":75,"props":4974,"children":4975},{"style":307},[4976],{"type":47,"value":4904},{"type":41,"tag":75,"props":4978,"children":4979},{"style":88},[4980],{"type":47,"value":4981},"\u003C{",{"type":41,"tag":75,"props":4983,"children":4984},{"style":244},[4985],{"type":47,"value":1018},{"type":41,"tag":75,"props":4987,"children":4988},{"style":88},[4989],{"type":47,"value":4990},"?:",{"type":41,"tag":75,"props":4992,"children":4993},{"style":307},[4994],{"type":47,"value":4995}," string",{"type":41,"tag":75,"props":4997,"children":4998},{"style":88},[4999],{"type":47,"value":5000}," }>)",{"type":41,"tag":75,"props":5002,"children":5003},{"style":196},[5004],{"type":47,"value":299},{"type":41,"tag":75,"props":5006,"children":5007},{"style":94},[5008],{"type":47,"value":1218},{"type":41,"tag":75,"props":5010,"children":5011},{"class":77,"line":192},[5012,5016,5020,5024,5028,5032,5036,5040,5044,5048],{"type":41,"tag":75,"props":5013,"children":5014},{"style":94},[5015],{"type":47,"value":2895},{"type":41,"tag":75,"props":5017,"children":5018},{"style":307},[5019],{"type":47,"value":310},{"type":41,"tag":75,"props":5021,"children":5022},{"style":94},[5023],{"type":47,"value":315},{"type":41,"tag":75,"props":5025,"children":5026},{"style":88},[5027],{"type":47,"value":320},{"type":41,"tag":75,"props":5029,"children":5030},{"style":94},[5031],{"type":47,"value":325},{"type":41,"tag":75,"props":5033,"children":5034},{"style":88},[5035],{"type":47,"value":330},{"type":41,"tag":75,"props":5037,"children":5038},{"style":94},[5039],{"type":47,"value":335},{"type":41,"tag":75,"props":5041,"children":5042},{"style":88},[5043],{"type":47,"value":340},{"type":41,"tag":75,"props":5045,"children":5046},{"style":94},[5047],{"type":47,"value":310},{"type":41,"tag":75,"props":5049,"children":5050},{"style":88},[5051],{"type":47,"value":1266},{"type":41,"tag":75,"props":5053,"children":5054},{"class":77,"line":240},[5055,5059],{"type":41,"tag":75,"props":5056,"children":5057},{"style":94},[5058],{"type":47,"value":371},{"type":41,"tag":75,"props":5060,"children":5061},{"style":88},[5062],{"type":47,"value":137},{"type":41,"tag":56,"props":5064,"children":5066},{"id":5065},"defineregistry",[5067],{"type":47,"value":5068},"defineRegistry",{"type":41,"tag":50,"props":5070,"children":5071},{},[5072,5077,5079,5084,5086,5092],{"type":41,"tag":71,"props":5073,"children":5075},{"className":5074},[],[5076],{"type":47,"value":5068},{"type":47,"value":5078}," conditionally requires the ",{"type":41,"tag":71,"props":5080,"children":5082},{"className":5081},[],[5083],{"type":47,"value":3890},{"type":47,"value":5085}," field only when the catalog declares actions. Catalogs with ",{"type":41,"tag":71,"props":5087,"children":5089},{"className":5088},[],[5090],{"type":47,"value":5091},"actions: {}",{"type":47,"value":5093}," can omit it.",{"type":41,"tag":56,"props":5095,"children":5097},{"id":5096},"key-exports",[5098],{"type":47,"value":5099},"Key Exports",{"type":41,"tag":1855,"props":5101,"children":5102},{},[5103,5118],{"type":41,"tag":1859,"props":5104,"children":5105},{},[5106],{"type":41,"tag":1863,"props":5107,"children":5108},{},[5109,5114],{"type":41,"tag":1867,"props":5110,"children":5111},{},[5112],{"type":47,"value":5113},"Export",{"type":41,"tag":1867,"props":5115,"children":5116},{},[5117],{"type":47,"value":1876},{"type":41,"tag":1878,"props":5119,"children":5120},{},[5121,5137,5153,5170,5187,5204,5234,5251,5268,5285,5302,5324,5340,5356,5390],{"type":41,"tag":1863,"props":5122,"children":5123},{},[5124,5132],{"type":41,"tag":1885,"props":5125,"children":5126},{},[5127],{"type":41,"tag":71,"props":5128,"children":5130},{"className":5129},[],[5131],{"type":47,"value":5068},{"type":41,"tag":1885,"props":5133,"children":5134},{},[5135],{"type":47,"value":5136},"Create a type-safe component registry from a catalog",{"type":41,"tag":1863,"props":5138,"children":5139},{},[5140,5148],{"type":41,"tag":1885,"props":5141,"children":5142},{},[5143],{"type":41,"tag":71,"props":5144,"children":5146},{"className":5145},[],[5147],{"type":47,"value":433},{"type":41,"tag":1885,"props":5149,"children":5150},{},[5151],{"type":47,"value":5152},"Render a spec using a registry",{"type":41,"tag":1863,"props":5154,"children":5155},{},[5156,5165],{"type":41,"tag":1885,"props":5157,"children":5158},{},[5159],{"type":41,"tag":71,"props":5160,"children":5162},{"className":5161},[],[5163],{"type":47,"value":5164},"schema",{"type":41,"tag":1885,"props":5166,"children":5167},{},[5168],{"type":47,"value":5169},"Element tree schema (includes built-in state actions: setState, pushState, removeState, validateForm)",{"type":41,"tag":1863,"props":5171,"children":5172},{},[5173,5182],{"type":41,"tag":1885,"props":5174,"children":5175},{},[5176],{"type":41,"tag":71,"props":5177,"children":5179},{"className":5178},[],[5180],{"type":47,"value":5181},"useStateStore",{"type":41,"tag":1885,"props":5183,"children":5184},{},[5185],{"type":47,"value":5186},"Access state context",{"type":41,"tag":1863,"props":5188,"children":5189},{},[5190,5199],{"type":41,"tag":1885,"props":5191,"children":5192},{},[5193],{"type":41,"tag":71,"props":5194,"children":5196},{"className":5195},[],[5197],{"type":47,"value":5198},"useStateValue",{"type":41,"tag":1885,"props":5200,"children":5201},{},[5202],{"type":47,"value":5203},"Get single value from state",{"type":41,"tag":1863,"props":5205,"children":5206},{},[5207,5215],{"type":41,"tag":1885,"props":5208,"children":5209},{},[5210],{"type":41,"tag":71,"props":5211,"children":5213},{"className":5212},[],[5214],{"type":47,"value":2637},{"type":41,"tag":1885,"props":5216,"children":5217},{},[5218,5220,5225,5226,5232],{"type":47,"value":5219},"Two-way binding for ",{"type":41,"tag":71,"props":5221,"children":5223},{"className":5222},[],[5224],{"type":47,"value":2533},{"type":47,"value":2377},{"type":41,"tag":71,"props":5227,"children":5229},{"className":5228},[],[5230],{"type":47,"value":5231},"$bindItem",{"type":47,"value":5233}," expressions",{"type":41,"tag":1863,"props":5235,"children":5236},{},[5237,5246],{"type":41,"tag":1885,"props":5238,"children":5239},{},[5240],{"type":41,"tag":71,"props":5241,"children":5243},{"className":5242},[],[5244],{"type":47,"value":5245},"useActions",{"type":41,"tag":1885,"props":5247,"children":5248},{},[5249],{"type":47,"value":5250},"Access actions context",{"type":41,"tag":1863,"props":5252,"children":5253},{},[5254,5263],{"type":41,"tag":1885,"props":5255,"children":5256},{},[5257],{"type":41,"tag":71,"props":5258,"children":5260},{"className":5259},[],[5261],{"type":47,"value":5262},"useAction",{"type":41,"tag":1885,"props":5264,"children":5265},{},[5266],{"type":47,"value":5267},"Get a single action dispatch function",{"type":41,"tag":1863,"props":5269,"children":5270},{},[5271,5280],{"type":41,"tag":1885,"props":5272,"children":5273},{},[5274],{"type":41,"tag":71,"props":5275,"children":5277},{"className":5276},[],[5278],{"type":47,"value":5279},"useOptionalValidation",{"type":41,"tag":1885,"props":5281,"children":5282},{},[5283],{"type":47,"value":5284},"Non-throwing variant of useValidation (returns null if no provider)",{"type":41,"tag":1863,"props":5286,"children":5287},{},[5288,5297],{"type":41,"tag":1885,"props":5289,"children":5290},{},[5291],{"type":41,"tag":71,"props":5292,"children":5294},{"className":5293},[],[5295],{"type":47,"value":5296},"useUIStream",{"type":41,"tag":1885,"props":5298,"children":5299},{},[5300],{"type":47,"value":5301},"Stream specs from an API endpoint",{"type":41,"tag":1863,"props":5303,"children":5304},{},[5305,5314],{"type":41,"tag":1885,"props":5306,"children":5307},{},[5308],{"type":41,"tag":71,"props":5309,"children":5311},{"className":5310},[],[5312],{"type":47,"value":5313},"createStateStore",{"type":41,"tag":1885,"props":5315,"children":5316},{},[5317,5319],{"type":47,"value":5318},"Create a framework-agnostic in-memory ",{"type":41,"tag":71,"props":5320,"children":5322},{"className":5321},[],[5323],{"type":47,"value":1975},{"type":41,"tag":1863,"props":5325,"children":5326},{},[5327,5335],{"type":41,"tag":1885,"props":5328,"children":5329},{},[5330],{"type":41,"tag":71,"props":5331,"children":5333},{"className":5332},[],[5334],{"type":47,"value":1975},{"type":41,"tag":1885,"props":5336,"children":5337},{},[5338],{"type":47,"value":5339},"Interface for plugging in external state management",{"type":41,"tag":1863,"props":5341,"children":5342},{},[5343,5351],{"type":41,"tag":1885,"props":5344,"children":5345},{},[5346],{"type":41,"tag":71,"props":5347,"children":5349},{"className":5348},[],[5350],{"type":47,"value":4864},{"type":41,"tag":1885,"props":5352,"children":5353},{},[5354],{"type":47,"value":5355},"Catalog-agnostic base type for reusable component libraries",{"type":41,"tag":1863,"props":5357,"children":5358},{},[5359,5367],{"type":41,"tag":1885,"props":5360,"children":5361},{},[5362],{"type":41,"tag":71,"props":5363,"children":5365},{"className":5364},[],[5366],{"type":47,"value":3488},{"type":41,"tag":1885,"props":5368,"children":5369},{},[5370,5372,5377,5378,5383,5384,5389],{"type":47,"value":5371},"Event handle type (",{"type":41,"tag":71,"props":5373,"children":5375},{"className":5374},[],[5376],{"type":47,"value":2814},{"type":47,"value":1782},{"type":41,"tag":71,"props":5379,"children":5381},{"className":5380},[],[5382],{"type":47,"value":3182},{"type":47,"value":1782},{"type":41,"tag":71,"props":5385,"children":5387},{"className":5386},[],[5388],{"type":47,"value":3517},{"type":47,"value":371},{"type":41,"tag":1863,"props":5391,"children":5392},{},[5393,5402],{"type":41,"tag":1885,"props":5394,"children":5395},{},[5396],{"type":41,"tag":71,"props":5397,"children":5399},{"className":5398},[],[5400],{"type":47,"value":5401},"ComponentContext",{"type":41,"tag":1885,"props":5403,"children":5404},{},[5405],{"type":47,"value":5406},"Typed component context (catalog-aware)",{"type":41,"tag":5408,"props":5409,"children":5410},"style",{},[5411],{"type":47,"value":5412},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":5414,"total":5580},[5415,5433,5445,5457,5472,5489,5501,5514,5527,5540,5552,5565],{"slug":5416,"name":5416,"fn":5417,"description":5418,"org":5419,"tags":5420,"stars":5430,"repoUrl":5431,"updatedAt":5432},"agent-browser","automate browser interactions for AI agents","Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to \"open a website\", \"fill out a form\", \"click a button\", \"take a screenshot\", \"scrape data from a page\", \"test this web app\", \"login to a site\", \"automate browser actions\", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5421,5424,5427],{"name":5422,"slug":5423,"type":14},"Agents","agents",{"name":5425,"slug":5426,"type":14},"Automation","automation",{"name":5428,"slug":5429,"type":14},"Browser Automation","browser-automation",38346,"https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-browser","2026-07-20T05:55:17.314329",{"slug":5434,"name":5434,"fn":5435,"description":5436,"org":5437,"tags":5438,"stars":5430,"repoUrl":5431,"updatedAt":5444},"agentcore","run browser automation on AWS Bedrock","Run agent-browser on AWS Bedrock AgentCore cloud browsers. Use when the user wants to use AgentCore, run browser automation on AWS, use a cloud browser with AWS credentials, or needs a managed browser session backed by AWS infrastructure. Triggers include \"use agentcore\", \"run on AWS\", \"cloud browser with AWS\", \"bedrock browser\", \"agentcore session\", or any task requiring AWS-hosted browser automation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5439,5440,5443],{"name":5425,"slug":5426,"type":14},{"name":5441,"slug":5442,"type":14},"AWS","aws",{"name":5428,"slug":5429,"type":14},"2026-07-17T06:08:33.665276",{"slug":5446,"name":5446,"fn":5447,"description":5448,"org":5449,"tags":5450,"stars":5430,"repoUrl":5431,"updatedAt":5456},"core","navigate and interact with web pages","Core agent-browser usage guide. Read this before running any agent-browser commands. Covers the snapshot-and-ref workflow, navigating pages, interacting with elements (click, fill, type, select), extracting text and data, taking screenshots, managing tabs, handling forms and auth, waiting for content, running multiple browser sessions in parallel, and troubleshooting common failures. Use when the user asks to interact with a website, fill a form, click something, extract data, take a screenshot, log into a site, test a web app, or automate any browser task.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5451,5452,5453],{"name":5422,"slug":5423,"type":14},{"name":5428,"slug":5429,"type":14},{"name":5454,"slug":5455,"type":14},"Navigation","navigation","2026-07-26T05:47:42.378419",{"slug":5458,"name":5458,"fn":5459,"description":5460,"org":5461,"tags":5462,"stars":5430,"repoUrl":5431,"updatedAt":5471},"derive-client","reverse engineer internal APIs from browser traffic","Reverse-engineer a website's internal API by recording browser traffic into a HAR file, then generate a standalone client or CLI that calls the endpoints directly, with no browser needed after the first recording. Use when asked to \"derive a client\", \"build a CLI for \u003Csite>\", \"reverse engineer this site's API\", \"record network requests\", \"turn this site into an API\", or when the same site will be automated repeatedly and direct HTTP calls would beat driving the browser every time.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5463,5466,5467,5468],{"name":5464,"slug":5465,"type":14},"API Development","api-development",{"name":5425,"slug":5426,"type":14},{"name":5428,"slug":5429,"type":14},{"name":5469,"slug":5470,"type":14},"Web Scraping","web-scraping","2026-07-20T06:24:11.928835",{"slug":5473,"name":5473,"fn":5474,"description":5475,"org":5476,"tags":5477,"stars":5430,"repoUrl":5431,"updatedAt":5488},"dogfood","perform exploratory testing on web applications","Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to \"dogfood\", \"QA\", \"exploratory test\", \"find issues\", \"bug hunt\", \"test this app\u002Fsite\u002Fplatform\", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5478,5479,5482,5485],{"name":5428,"slug":5429,"type":14},{"name":5480,"slug":5481,"type":14},"Debugging","debugging",{"name":5483,"slug":5484,"type":14},"QA","qa",{"name":5486,"slug":5487,"type":14},"Testing","testing","2026-07-17T06:07:41.421482",{"slug":5490,"name":5490,"fn":5491,"description":5492,"org":5493,"tags":5494,"stars":5430,"repoUrl":5431,"updatedAt":5500},"electron","automate Electron desktop applications","Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include \"automate Slack app\", \"control VS Code\", \"interact with Discord app\", \"test this Electron app\", \"connect to desktop app\", or any task requiring automation of a native Electron application.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5495,5496,5497],{"name":5422,"slug":5423,"type":14},{"name":5428,"slug":5429,"type":14},{"name":5498,"slug":5499,"type":14},"Desktop","desktop","2026-07-17T06:08:28.007783",{"slug":5502,"name":5502,"fn":5503,"description":5504,"org":5505,"tags":5506,"stars":5430,"repoUrl":5431,"updatedAt":5513},"slack","interact with Slack workspaces","Interact with Slack workspaces using browser automation. Use when the user needs to check unread channels, navigate Slack, send messages, extract data, find information, search conversations, or automate any Slack task. Triggers include \"check my Slack\", \"what channels have unreads\", \"send a message to\", \"search Slack for\", \"extract from Slack\", \"find who said\", or any task requiring programmatic Slack interaction.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5507,5508,5511],{"name":5428,"slug":5429,"type":14},{"name":5509,"slug":5510,"type":14},"Messaging","messaging",{"name":5512,"slug":5502,"type":14},"Slack","2026-07-17T06:08:27.679015",{"slug":5515,"name":5515,"fn":5516,"description":5517,"org":5518,"tags":5519,"stars":5430,"repoUrl":5431,"updatedAt":5526},"vercel-sandbox","run browser automation in Vercel Sandbox","Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include \"Vercel Sandbox browser\", \"microVM Chrome\", \"agent-browser in sandbox\", \"browser automation on Vercel\", or any task requiring Chrome in a Vercel Sandbox.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5520,5521,5522,5523],{"name":5425,"slug":5426,"type":14},{"name":5428,"slug":5429,"type":14},{"name":5486,"slug":5487,"type":14},{"name":5524,"slug":5525,"type":14},"Vercel","vercel","2026-07-17T06:08:28.349899",{"slug":5528,"name":5528,"fn":5529,"description":5530,"org":5531,"tags":5532,"stars":5537,"repoUrl":5538,"updatedAt":5539},"deploy-to-vercel","deploy applications to Vercel","Deploy applications and websites to Vercel. Use when the user requests deployment actions like \"deploy my app\", \"deploy and give me the link\", \"push this live\", or \"create a preview deployment\".",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5533,5536],{"name":5534,"slug":5535,"type":14},"Deployment","deployment",{"name":5524,"slug":5525,"type":14},28993,"https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills","2026-07-17T06:08:41.18374",{"slug":5541,"name":5541,"fn":5542,"description":5543,"org":5544,"tags":5545,"stars":5537,"repoUrl":5538,"updatedAt":5551},"vercel-cli-with-tokens","manage Vercel projects via CLI","Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. \"deploy to vercel\", \"set up vercel\", \"add environment variables to vercel\".",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5546,5549,5550],{"name":5547,"slug":5548,"type":14},"CLI","cli",{"name":5534,"slug":5535,"type":14},{"name":5524,"slug":5525,"type":14},"2026-07-17T06:08:41.84179",{"slug":5553,"name":5553,"fn":5554,"description":5555,"org":5556,"tags":5557,"stars":5537,"repoUrl":5538,"updatedAt":5564},"vercel-composition-patterns","implement scalable React composition patterns","React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5558,5561,5562,5563],{"name":5559,"slug":5560,"type":14},"Best Practices","best-practices",{"name":22,"slug":23,"type":14},{"name":13,"slug":4,"type":14},{"name":19,"slug":20,"type":14},"2026-07-17T06:05:40.576913",{"slug":5566,"name":5566,"fn":5567,"description":5568,"org":5569,"tags":5570,"stars":5537,"repoUrl":5538,"updatedAt":5579},"vercel-optimize","optimize Vercel project performance and costs","Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked recommendations grounded in verified files and version-aware Vercel\u002Fframework docs. Trigger for Vercel bill reduction, slow or expensive routes, caching opportunities, Function Invocations, Build Minutes, Fast Data Transfer, Core Web Vitals, Bot Management, Fluid compute, or cost breakdown requests.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5571,5574,5575,5578],{"name":5572,"slug":5573,"type":14},"Cost Optimization","cost-optimization",{"name":5534,"slug":5535,"type":14},{"name":5576,"slug":5577,"type":14},"Performance","performance",{"name":5524,"slug":5525,"type":14},"2026-07-17T06:04:08.327515",100,{"items":5582,"total":1172},[5583,5597,5607,5619,5636,5646,5658],{"slug":5584,"name":5584,"fn":5585,"description":5586,"org":5587,"tags":5588,"stars":24,"repoUrl":25,"updatedAt":5596},"codegen","generate code from UI specifications","Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for @json-render\u002Fcodegen.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5589,5592,5595],{"name":5590,"slug":5591,"type":14},"Code Generation","code-generation",{"name":5593,"slug":5594,"type":14},"Engineering","engineering",{"name":16,"slug":17,"type":14},"2026-07-17T06:08:34.68038",{"slug":5598,"name":5598,"fn":5599,"description":5600,"org":5601,"tags":5602,"stars":24,"repoUrl":25,"updatedAt":5606},"devtools","inspect and debug generative UI components","Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys. Triggers include \"add devtools\", \"debug json-render\", \"inspect the spec\", \"why is this element not rendering\", \"see the state at runtime\", or requests to tap streams \u002F capture action logs for `@json-render\u002Fdevtools`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5603,5604,5605],{"name":5480,"slug":5481,"type":14},{"name":22,"slug":23,"type":14},{"name":19,"slug":20,"type":14},"2026-07-17T06:08:35.001228",{"slug":5608,"name":5608,"fn":5609,"description":5610,"org":5611,"tags":5612,"stars":24,"repoUrl":25,"updatedAt":5618},"directives","apply custom directives to JSON specs","Pre-built custom directives for json-render — formatting, math, string manipulation, and i18n. Use when working with @json-render\u002Fdirectives, defining custom directives with defineDirective, or adding $format, $math, $concat, $count, $truncate, $pluralize, $join, or $t to specs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5613,5614,5615,5617],{"name":5425,"slug":5426,"type":14},{"name":22,"slug":23,"type":14},{"name":5616,"slug":5616,"type":14},"i18n",{"name":16,"slug":17,"type":14},"2026-07-17T06:04:05.866831",{"slug":5620,"name":5620,"fn":5621,"description":5622,"org":5623,"tags":5624,"stars":24,"repoUrl":25,"updatedAt":5635},"image","generate images from JSON specifications","Image renderer for json-render that turns JSON specs into SVG and PNG images via Satori. Use when working with @json-render\u002Fimage, generating OG images from JSON, creating social cards, or rendering AI-generated image specs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5625,5628,5629,5632],{"name":5626,"slug":5627,"type":14},"Images","images",{"name":16,"slug":17,"type":14},{"name":5630,"slug":5631,"type":14},"Satori","satori",{"name":5633,"slug":5634,"type":14},"SVG","svg","2026-07-17T06:07:42.441875",{"slug":5637,"name":5637,"fn":5638,"description":5639,"org":5640,"tags":5641,"stars":24,"repoUrl":25,"updatedAt":5645},"ink","render JSON specs as terminal UIs","Ink terminal renderer for json-render that turns JSON specs into interactive terminal UIs. Use when working with @json-render\u002Fink, building terminal UIs from JSON, creating terminal component catalogs, or rendering AI-generated specs in the terminal.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5642,5643,5644],{"name":5547,"slug":5548,"type":14},{"name":16,"slug":17,"type":14},{"name":19,"slug":20,"type":14},"2026-07-17T06:08:28.678043",{"slug":5647,"name":5647,"fn":5648,"description":5649,"org":5650,"tags":5651,"stars":24,"repoUrl":25,"updatedAt":5657},"jotai","manage state with Jotai","Jotai adapter for json-render's StateStore interface. Use when integrating json-render with Jotai for state management via @json-render\u002Fjotai.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5652,5653,5654],{"name":22,"slug":23,"type":14},{"name":13,"slug":4,"type":14},{"name":5655,"slug":5656,"type":14},"State Management","state-management","2026-07-17T06:05:48.244622",{"slug":5659,"name":5659,"fn":5660,"description":5661,"org":5662,"tags":5663,"stars":24,"repoUrl":25,"updatedAt":5669},"mcp","render interactive UIs with MCP","MCP Apps integration for json-render. Use when building MCP servers that render interactive UIs in Claude, ChatGPT, Cursor, or VS Code, or when integrating json-render with the Model Context Protocol.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5664,5665,5666,5668],{"name":22,"slug":23,"type":14},{"name":16,"slug":17,"type":14},{"name":5667,"slug":5659,"type":14},"MCP",{"name":19,"slug":20,"type":14},"2026-07-17T06:05:41.274723"]