[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-vercel-labs-vue":3,"mdc-ix6rl7-key":35,"related-org-vercel-labs-vue":3364,"related-repo-vercel-labs-vue":3534},{"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},"vue","render Vue components from JSON","Vue 3 renderer for json-render. Use when building Vue UIs from JSON specs, working with @json-render\u002Fvue, defining Vue component registries, or rendering AI-generated specs in Vue.",{"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},"Vue","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:05:51.267703",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\u002Fvue","---\nname: vue\ndescription: Vue 3 renderer for json-render. Use when building Vue UIs from JSON specs, working with @json-render\u002Fvue, defining Vue component registries, or rendering AI-generated specs in Vue.\n---\n\n# @json-render\u002Fvue\n\nVue 3 renderer that converts JSON specs into Vue component trees with data binding, visibility, and actions.\n\n## Installation\n\n```bash\nnpm install @json-render\u002Fvue @json-render\u002Fcore zod\n```\n\nPeer dependencies: `vue ^3.5.0` and `zod ^4.0.0`.\n\n## Quick Start\n\n### Create a Catalog\n\n```typescript\nimport { defineCatalog } from \"@json-render\u002Fcore\";\nimport { schema } from \"@json-render\u002Fvue\u002Fschema\";\nimport { z } from \"zod\";\n\nexport const catalog = defineCatalog(schema, {\n  components: {\n    Card: {\n      props: z.object({ title: z.string(), description: z.string().nullable() }),\n      description: \"A card container\",\n    },\n    Button: {\n      props: z.object({ label: z.string(), action: z.string() }),\n      description: \"A clickable button\",\n    },\n  },\n  actions: {},\n});\n```\n\n### Define Registry with h() Render Functions\n\n```typescript\nimport { h } from \"vue\";\nimport { defineRegistry } from \"@json-render\u002Fvue\";\nimport { catalog } from \".\u002Fcatalog\";\n\nexport const { registry } = defineRegistry(catalog, {\n  components: {\n    Card: ({ props, children }) =>\n      h(\"div\", { class: \"card\" }, [\n        h(\"h3\", null, props.title),\n        props.description ? h(\"p\", null, props.description) : null,\n        children,\n      ]),\n    Button: ({ props, emit }) =>\n      h(\"button\", { onClick: () => emit(\"press\") }, props.label),\n  },\n});\n```\n\n### Render Specs\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { StateProvider, ActionProvider, Renderer } from \"@json-render\u002Fvue\";\nimport { registry } from \".\u002Fregistry\";\n\nconst spec = { root: \"card-1\", elements: { \u002F* ... *\u002F } };\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CStateProvider :initial-state=\"{ form: { name: '' } }\">\n    \u003CActionProvider :handlers=\"{ submit: handleSubmit }\">\n      \u003CRenderer :spec=\"spec\" :registry=\"registry\" \u002F>\n    \u003C\u002FActionProvider>\n  \u003C\u002FStateProvider>\n\u003C\u002Ftemplate>\n```\n\n## Providers\n\n| Provider | Purpose |\n|----------|---------|\n| `StateProvider` | Share state across components (JSON Pointer paths). Accepts `initialState` or `store` 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## Composables\n\n| Composable | Purpose |\n|------------|---------|\n| `useStateStore()` | Access state context (`state` as `ShallowRef`, `get`, `set`, `update`) |\n| `useStateValue(path)` | Get single value from state |\n| `useIsVisible(condition)` | Check if a visibility condition is met |\n| `useActions()` | Access action context |\n| `useAction(binding)` | Get a single action dispatch function |\n| `useFieldValidation(path, config)` | Field validation state |\n| `useBoundProp(propValue, bindingPath)` | Two-way binding for `$bindState`\u002F`$bindItem` |\n\nNote: `useStateStore().state` returns a `ShallowRef\u003CStateModel>` — use `state.value` to access.\n\n## External Store (StateStore)\n\nPass a `StateStore` to `StateProvider` to wire json-render to Pinia, VueUse, or any state management:\n\n```typescript\nimport { createStateStore, type StateStore } from \"@json-render\u002Fvue\";\n\nconst store = createStateStore({ count: 0 });\n```\n\n```vue\n\u003CStateProvider :store=\"store\">\n  \u003CRenderer :spec=\"spec\" :registry=\"registry\" \u002F>\n\u003C\u002FStateProvider>\n```\n\n## Dynamic Prop Expressions\n\nProps support `$state`, `$bindState`, `$cond`, `$template`, `$computed`. Use `{ \"$bindState\": \"\u002Fpath\" }` on the natural value prop for two-way binding.\n\n## Visibility Conditions\n\n```typescript\n{ \"$state\": \"\u002Fuser\u002FisAdmin\" }\n{ \"$state\": \"\u002Fstatus\", \"eq\": \"active\" }\n{ \"$state\": \"\u002Fmaintenance\", \"not\": true }\n[ cond1, cond2 ]  \u002F\u002F implicit AND\n```\n\n## Built-in Actions\n\n`setState`, `pushState`, `removeState`, and `validateForm` are built into the Vue schema and handled by `ActionProvider`:\n\n```json\n{\n  \"action\": \"setState\",\n  \"params\": { \"statePath\": \"\u002FactiveTab\", \"value\": \"settings\" }\n}\n```\n\n## Event System\n\nComponents use `emit(event)` to fire events, or `on(event)` for metadata (`shouldPreventDefault`, `bound`).\n\n## Streaming\n\n`useUIStream` and `useChatUI` return Vue Refs for streaming specs from an API.\n\n## BaseComponentProps\n\nFor catalog-agnostic reusable components:\n\n```typescript\nimport type { BaseComponentProps } from \"@json-render\u002Fvue\";\n\nconst Card = ({ props, children }: BaseComponentProps\u003C{ title?: string }>) =>\n  h(\"div\", null, [props.title, children]);\n```\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 (from `@json-render\u002Fvue\u002Fschema`) |\n| `StateProvider`, `ActionProvider`, `VisibilityProvider`, `ValidationProvider` | Context providers |\n| `useStateStore`, `useStateValue`, `useBoundProp` | State composables |\n| `useActions`, `useAction` | Action composables |\n| `useFieldValidation`, `useIsVisible` | Validation and visibility |\n| `useUIStream`, `useChatUI` | Streaming composables |\n| `createStateStore` | Create in-memory `StateStore` |\n| `BaseComponentProps` | Catalog-agnostic component props type |\n",{"data":36,"body":37},{"name":4,"description":6},{"type":38,"children":39},"root",[40,49,55,62,107,128,134,141,731,737,1342,1348,1808,1814,1924,1930,2121,2150,2156,2176,2299,2369,2375,2423,2429,2641,2647,2686,2839,2845,2881,2887,2905,2911,2916,3102,3108,3358],{"type":41,"tag":42,"props":43,"children":45},"element","h1",{"id":44},"json-rendervue",[46],{"type":47,"value":48},"text","@json-render\u002Fvue",{"type":41,"tag":50,"props":51,"children":52},"p",{},[53],{"type":47,"value":54},"Vue 3 renderer that converts JSON specs into Vue component trees with data binding, visibility, and actions.",{"type":41,"tag":56,"props":57,"children":59},"h2",{"id":58},"installation",[60],{"type":47,"value":61},"Installation",{"type":41,"tag":63,"props":64,"children":69},"pre",{"className":65,"code":66,"language":67,"meta":68,"style":68},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @json-render\u002Fvue @json-render\u002Fcore zod\n","bash","",[70],{"type":41,"tag":71,"props":72,"children":73},"code",{"__ignoreMap":68},[74],{"type":41,"tag":75,"props":76,"children":79},"span",{"class":77,"line":78},"line",1,[80,86,92,97,102],{"type":41,"tag":75,"props":81,"children":83},{"style":82},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[84],{"type":47,"value":85},"npm",{"type":41,"tag":75,"props":87,"children":89},{"style":88},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[90],{"type":47,"value":91}," install",{"type":41,"tag":75,"props":93,"children":94},{"style":88},[95],{"type":47,"value":96}," @json-render\u002Fvue",{"type":41,"tag":75,"props":98,"children":99},{"style":88},[100],{"type":47,"value":101}," @json-render\u002Fcore",{"type":41,"tag":75,"props":103,"children":104},{"style":88},[105],{"type":47,"value":106}," zod\n",{"type":41,"tag":50,"props":108,"children":109},{},[110,112,118,120,126],{"type":47,"value":111},"Peer dependencies: ",{"type":41,"tag":71,"props":113,"children":115},{"className":114},[],[116],{"type":47,"value":117},"vue ^3.5.0",{"type":47,"value":119}," and ",{"type":41,"tag":71,"props":121,"children":123},{"className":122},[],[124],{"type":47,"value":125},"zod ^4.0.0",{"type":47,"value":127},".",{"type":41,"tag":56,"props":129,"children":131},{"id":130},"quick-start",[132],{"type":47,"value":133},"Quick Start",{"type":41,"tag":135,"props":136,"children":138},"h3",{"id":137},"create-a-catalog",[139],{"type":47,"value":140},"Create a Catalog",{"type":41,"tag":63,"props":142,"children":146},{"className":143,"code":144,"language":145,"meta":68,"style":68},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineCatalog } from \"@json-render\u002Fcore\";\nimport { schema } from \"@json-render\u002Fvue\u002Fschema\";\nimport { z } from \"zod\";\n\nexport const catalog = defineCatalog(schema, {\n  components: {\n    Card: {\n      props: z.object({ title: z.string(), description: z.string().nullable() }),\n      description: \"A card container\",\n    },\n    Button: {\n      props: z.object({ label: z.string(), action: z.string() }),\n      description: \"A clickable button\",\n    },\n  },\n  actions: {},\n});\n","typescript",[147],{"type":41,"tag":71,"props":148,"children":149},{"__ignoreMap":68},[150,201,243,285,295,340,359,376,497,527,536,553,651,680,688,697,715],{"type":41,"tag":75,"props":151,"children":152},{"class":77,"line":78},[153,159,165,171,176,181,186,191,196],{"type":41,"tag":75,"props":154,"children":156},{"style":155},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[157],{"type":47,"value":158},"import",{"type":41,"tag":75,"props":160,"children":162},{"style":161},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[163],{"type":47,"value":164}," {",{"type":41,"tag":75,"props":166,"children":168},{"style":167},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[169],{"type":47,"value":170}," defineCatalog",{"type":41,"tag":75,"props":172,"children":173},{"style":161},[174],{"type":47,"value":175}," }",{"type":41,"tag":75,"props":177,"children":178},{"style":155},[179],{"type":47,"value":180}," from",{"type":41,"tag":75,"props":182,"children":183},{"style":161},[184],{"type":47,"value":185}," \"",{"type":41,"tag":75,"props":187,"children":188},{"style":88},[189],{"type":47,"value":190},"@json-render\u002Fcore",{"type":41,"tag":75,"props":192,"children":193},{"style":161},[194],{"type":47,"value":195},"\"",{"type":41,"tag":75,"props":197,"children":198},{"style":161},[199],{"type":47,"value":200},";\n",{"type":41,"tag":75,"props":202,"children":204},{"class":77,"line":203},2,[205,209,213,218,222,226,230,235,239],{"type":41,"tag":75,"props":206,"children":207},{"style":155},[208],{"type":47,"value":158},{"type":41,"tag":75,"props":210,"children":211},{"style":161},[212],{"type":47,"value":164},{"type":41,"tag":75,"props":214,"children":215},{"style":167},[216],{"type":47,"value":217}," schema",{"type":41,"tag":75,"props":219,"children":220},{"style":161},[221],{"type":47,"value":175},{"type":41,"tag":75,"props":223,"children":224},{"style":155},[225],{"type":47,"value":180},{"type":41,"tag":75,"props":227,"children":228},{"style":161},[229],{"type":47,"value":185},{"type":41,"tag":75,"props":231,"children":232},{"style":88},[233],{"type":47,"value":234},"@json-render\u002Fvue\u002Fschema",{"type":41,"tag":75,"props":236,"children":237},{"style":161},[238],{"type":47,"value":195},{"type":41,"tag":75,"props":240,"children":241},{"style":161},[242],{"type":47,"value":200},{"type":41,"tag":75,"props":244,"children":246},{"class":77,"line":245},3,[247,251,255,260,264,268,272,277,281],{"type":41,"tag":75,"props":248,"children":249},{"style":155},[250],{"type":47,"value":158},{"type":41,"tag":75,"props":252,"children":253},{"style":161},[254],{"type":47,"value":164},{"type":41,"tag":75,"props":256,"children":257},{"style":167},[258],{"type":47,"value":259}," z",{"type":41,"tag":75,"props":261,"children":262},{"style":161},[263],{"type":47,"value":175},{"type":41,"tag":75,"props":265,"children":266},{"style":155},[267],{"type":47,"value":180},{"type":41,"tag":75,"props":269,"children":270},{"style":161},[271],{"type":47,"value":185},{"type":41,"tag":75,"props":273,"children":274},{"style":88},[275],{"type":47,"value":276},"zod",{"type":41,"tag":75,"props":278,"children":279},{"style":161},[280],{"type":47,"value":195},{"type":41,"tag":75,"props":282,"children":283},{"style":161},[284],{"type":47,"value":200},{"type":41,"tag":75,"props":286,"children":288},{"class":77,"line":287},4,[289],{"type":41,"tag":75,"props":290,"children":292},{"emptyLinePlaceholder":291},true,[293],{"type":47,"value":294},"\n",{"type":41,"tag":75,"props":296,"children":298},{"class":77,"line":297},5,[299,304,310,315,320,325,330,335],{"type":41,"tag":75,"props":300,"children":301},{"style":155},[302],{"type":47,"value":303},"export",{"type":41,"tag":75,"props":305,"children":307},{"style":306},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[308],{"type":47,"value":309}," const",{"type":41,"tag":75,"props":311,"children":312},{"style":167},[313],{"type":47,"value":314}," catalog ",{"type":41,"tag":75,"props":316,"children":317},{"style":161},[318],{"type":47,"value":319},"=",{"type":41,"tag":75,"props":321,"children":323},{"style":322},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[324],{"type":47,"value":170},{"type":41,"tag":75,"props":326,"children":327},{"style":167},[328],{"type":47,"value":329},"(schema",{"type":41,"tag":75,"props":331,"children":332},{"style":161},[333],{"type":47,"value":334},",",{"type":41,"tag":75,"props":336,"children":337},{"style":161},[338],{"type":47,"value":339}," {\n",{"type":41,"tag":75,"props":341,"children":343},{"class":77,"line":342},6,[344,350,355],{"type":41,"tag":75,"props":345,"children":347},{"style":346},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[348],{"type":47,"value":349},"  components",{"type":41,"tag":75,"props":351,"children":352},{"style":161},[353],{"type":47,"value":354},":",{"type":41,"tag":75,"props":356,"children":357},{"style":161},[358],{"type":47,"value":339},{"type":41,"tag":75,"props":360,"children":362},{"class":77,"line":361},7,[363,368,372],{"type":41,"tag":75,"props":364,"children":365},{"style":346},[366],{"type":47,"value":367},"    Card",{"type":41,"tag":75,"props":369,"children":370},{"style":161},[371],{"type":47,"value":354},{"type":41,"tag":75,"props":373,"children":374},{"style":161},[375],{"type":47,"value":339},{"type":41,"tag":75,"props":377,"children":379},{"class":77,"line":378},8,[380,385,389,393,397,402,407,412,417,421,425,429,434,439,443,448,452,456,460,464,468,472,477,482,487,492],{"type":41,"tag":75,"props":381,"children":382},{"style":346},[383],{"type":47,"value":384},"      props",{"type":41,"tag":75,"props":386,"children":387},{"style":161},[388],{"type":47,"value":354},{"type":41,"tag":75,"props":390,"children":391},{"style":167},[392],{"type":47,"value":259},{"type":41,"tag":75,"props":394,"children":395},{"style":161},[396],{"type":47,"value":127},{"type":41,"tag":75,"props":398,"children":399},{"style":322},[400],{"type":47,"value":401},"object",{"type":41,"tag":75,"props":403,"children":404},{"style":167},[405],{"type":47,"value":406},"(",{"type":41,"tag":75,"props":408,"children":409},{"style":161},[410],{"type":47,"value":411},"{",{"type":41,"tag":75,"props":413,"children":414},{"style":346},[415],{"type":47,"value":416}," title",{"type":41,"tag":75,"props":418,"children":419},{"style":161},[420],{"type":47,"value":354},{"type":41,"tag":75,"props":422,"children":423},{"style":167},[424],{"type":47,"value":259},{"type":41,"tag":75,"props":426,"children":427},{"style":161},[428],{"type":47,"value":127},{"type":41,"tag":75,"props":430,"children":431},{"style":322},[432],{"type":47,"value":433},"string",{"type":41,"tag":75,"props":435,"children":436},{"style":167},[437],{"type":47,"value":438},"()",{"type":41,"tag":75,"props":440,"children":441},{"style":161},[442],{"type":47,"value":334},{"type":41,"tag":75,"props":444,"children":445},{"style":346},[446],{"type":47,"value":447}," description",{"type":41,"tag":75,"props":449,"children":450},{"style":161},[451],{"type":47,"value":354},{"type":41,"tag":75,"props":453,"children":454},{"style":167},[455],{"type":47,"value":259},{"type":41,"tag":75,"props":457,"children":458},{"style":161},[459],{"type":47,"value":127},{"type":41,"tag":75,"props":461,"children":462},{"style":322},[463],{"type":47,"value":433},{"type":41,"tag":75,"props":465,"children":466},{"style":167},[467],{"type":47,"value":438},{"type":41,"tag":75,"props":469,"children":470},{"style":161},[471],{"type":47,"value":127},{"type":41,"tag":75,"props":473,"children":474},{"style":322},[475],{"type":47,"value":476},"nullable",{"type":41,"tag":75,"props":478,"children":479},{"style":167},[480],{"type":47,"value":481},"() ",{"type":41,"tag":75,"props":483,"children":484},{"style":161},[485],{"type":47,"value":486},"}",{"type":41,"tag":75,"props":488,"children":489},{"style":167},[490],{"type":47,"value":491},")",{"type":41,"tag":75,"props":493,"children":494},{"style":161},[495],{"type":47,"value":496},",\n",{"type":41,"tag":75,"props":498,"children":500},{"class":77,"line":499},9,[501,506,510,514,519,523],{"type":41,"tag":75,"props":502,"children":503},{"style":346},[504],{"type":47,"value":505},"      description",{"type":41,"tag":75,"props":507,"children":508},{"style":161},[509],{"type":47,"value":354},{"type":41,"tag":75,"props":511,"children":512},{"style":161},[513],{"type":47,"value":185},{"type":41,"tag":75,"props":515,"children":516},{"style":88},[517],{"type":47,"value":518},"A card container",{"type":41,"tag":75,"props":520,"children":521},{"style":161},[522],{"type":47,"value":195},{"type":41,"tag":75,"props":524,"children":525},{"style":161},[526],{"type":47,"value":496},{"type":41,"tag":75,"props":528,"children":530},{"class":77,"line":529},10,[531],{"type":41,"tag":75,"props":532,"children":533},{"style":161},[534],{"type":47,"value":535},"    },\n",{"type":41,"tag":75,"props":537,"children":539},{"class":77,"line":538},11,[540,545,549],{"type":41,"tag":75,"props":541,"children":542},{"style":346},[543],{"type":47,"value":544},"    Button",{"type":41,"tag":75,"props":546,"children":547},{"style":161},[548],{"type":47,"value":354},{"type":41,"tag":75,"props":550,"children":551},{"style":161},[552],{"type":47,"value":339},{"type":41,"tag":75,"props":554,"children":556},{"class":77,"line":555},12,[557,561,565,569,573,577,581,585,590,594,598,602,606,610,614,619,623,627,631,635,639,643,647],{"type":41,"tag":75,"props":558,"children":559},{"style":346},[560],{"type":47,"value":384},{"type":41,"tag":75,"props":562,"children":563},{"style":161},[564],{"type":47,"value":354},{"type":41,"tag":75,"props":566,"children":567},{"style":167},[568],{"type":47,"value":259},{"type":41,"tag":75,"props":570,"children":571},{"style":161},[572],{"type":47,"value":127},{"type":41,"tag":75,"props":574,"children":575},{"style":322},[576],{"type":47,"value":401},{"type":41,"tag":75,"props":578,"children":579},{"style":167},[580],{"type":47,"value":406},{"type":41,"tag":75,"props":582,"children":583},{"style":161},[584],{"type":47,"value":411},{"type":41,"tag":75,"props":586,"children":587},{"style":346},[588],{"type":47,"value":589}," label",{"type":41,"tag":75,"props":591,"children":592},{"style":161},[593],{"type":47,"value":354},{"type":41,"tag":75,"props":595,"children":596},{"style":167},[597],{"type":47,"value":259},{"type":41,"tag":75,"props":599,"children":600},{"style":161},[601],{"type":47,"value":127},{"type":41,"tag":75,"props":603,"children":604},{"style":322},[605],{"type":47,"value":433},{"type":41,"tag":75,"props":607,"children":608},{"style":167},[609],{"type":47,"value":438},{"type":41,"tag":75,"props":611,"children":612},{"style":161},[613],{"type":47,"value":334},{"type":41,"tag":75,"props":615,"children":616},{"style":346},[617],{"type":47,"value":618}," action",{"type":41,"tag":75,"props":620,"children":621},{"style":161},[622],{"type":47,"value":354},{"type":41,"tag":75,"props":624,"children":625},{"style":167},[626],{"type":47,"value":259},{"type":41,"tag":75,"props":628,"children":629},{"style":161},[630],{"type":47,"value":127},{"type":41,"tag":75,"props":632,"children":633},{"style":322},[634],{"type":47,"value":433},{"type":41,"tag":75,"props":636,"children":637},{"style":167},[638],{"type":47,"value":481},{"type":41,"tag":75,"props":640,"children":641},{"style":161},[642],{"type":47,"value":486},{"type":41,"tag":75,"props":644,"children":645},{"style":167},[646],{"type":47,"value":491},{"type":41,"tag":75,"props":648,"children":649},{"style":161},[650],{"type":47,"value":496},{"type":41,"tag":75,"props":652,"children":654},{"class":77,"line":653},13,[655,659,663,667,672,676],{"type":41,"tag":75,"props":656,"children":657},{"style":346},[658],{"type":47,"value":505},{"type":41,"tag":75,"props":660,"children":661},{"style":161},[662],{"type":47,"value":354},{"type":41,"tag":75,"props":664,"children":665},{"style":161},[666],{"type":47,"value":185},{"type":41,"tag":75,"props":668,"children":669},{"style":88},[670],{"type":47,"value":671},"A clickable button",{"type":41,"tag":75,"props":673,"children":674},{"style":161},[675],{"type":47,"value":195},{"type":41,"tag":75,"props":677,"children":678},{"style":161},[679],{"type":47,"value":496},{"type":41,"tag":75,"props":681,"children":683},{"class":77,"line":682},14,[684],{"type":41,"tag":75,"props":685,"children":686},{"style":161},[687],{"type":47,"value":535},{"type":41,"tag":75,"props":689,"children":691},{"class":77,"line":690},15,[692],{"type":41,"tag":75,"props":693,"children":694},{"style":161},[695],{"type":47,"value":696},"  },\n",{"type":41,"tag":75,"props":698,"children":700},{"class":77,"line":699},16,[701,706,710],{"type":41,"tag":75,"props":702,"children":703},{"style":346},[704],{"type":47,"value":705},"  actions",{"type":41,"tag":75,"props":707,"children":708},{"style":161},[709],{"type":47,"value":354},{"type":41,"tag":75,"props":711,"children":712},{"style":161},[713],{"type":47,"value":714}," {},\n",{"type":41,"tag":75,"props":716,"children":718},{"class":77,"line":717},17,[719,723,727],{"type":41,"tag":75,"props":720,"children":721},{"style":161},[722],{"type":47,"value":486},{"type":41,"tag":75,"props":724,"children":725},{"style":167},[726],{"type":47,"value":491},{"type":41,"tag":75,"props":728,"children":729},{"style":161},[730],{"type":47,"value":200},{"type":41,"tag":135,"props":732,"children":734},{"id":733},"define-registry-with-h-render-functions",[735],{"type":47,"value":736},"Define Registry with h() Render Functions",{"type":41,"tag":63,"props":738,"children":740},{"className":143,"code":739,"language":145,"meta":68,"style":68},"import { h } from \"vue\";\nimport { defineRegistry } from \"@json-render\u002Fvue\";\nimport { catalog } from \".\u002Fcatalog\";\n\nexport const { registry } = defineRegistry(catalog, {\n  components: {\n    Card: ({ props, children }) =>\n      h(\"div\", { class: \"card\" }, [\n        h(\"h3\", null, props.title),\n        props.description ? h(\"p\", null, props.description) : null,\n        children,\n      ]),\n    Button: ({ props, emit }) =>\n      h(\"button\", { onClick: () => emit(\"press\") }, props.label),\n  },\n});\n",[741],{"type":41,"tag":71,"props":742,"children":743},{"__ignoreMap":68},[744,784,824,865,872,918,933,974,1039,1089,1161,1173,1185,1221,1320,1327],{"type":41,"tag":75,"props":745,"children":746},{"class":77,"line":78},[747,751,755,760,764,768,772,776,780],{"type":41,"tag":75,"props":748,"children":749},{"style":155},[750],{"type":47,"value":158},{"type":41,"tag":75,"props":752,"children":753},{"style":161},[754],{"type":47,"value":164},{"type":41,"tag":75,"props":756,"children":757},{"style":167},[758],{"type":47,"value":759}," h",{"type":41,"tag":75,"props":761,"children":762},{"style":161},[763],{"type":47,"value":175},{"type":41,"tag":75,"props":765,"children":766},{"style":155},[767],{"type":47,"value":180},{"type":41,"tag":75,"props":769,"children":770},{"style":161},[771],{"type":47,"value":185},{"type":41,"tag":75,"props":773,"children":774},{"style":88},[775],{"type":47,"value":4},{"type":41,"tag":75,"props":777,"children":778},{"style":161},[779],{"type":47,"value":195},{"type":41,"tag":75,"props":781,"children":782},{"style":161},[783],{"type":47,"value":200},{"type":41,"tag":75,"props":785,"children":786},{"class":77,"line":203},[787,791,795,800,804,808,812,816,820],{"type":41,"tag":75,"props":788,"children":789},{"style":155},[790],{"type":47,"value":158},{"type":41,"tag":75,"props":792,"children":793},{"style":161},[794],{"type":47,"value":164},{"type":41,"tag":75,"props":796,"children":797},{"style":167},[798],{"type":47,"value":799}," defineRegistry",{"type":41,"tag":75,"props":801,"children":802},{"style":161},[803],{"type":47,"value":175},{"type":41,"tag":75,"props":805,"children":806},{"style":155},[807],{"type":47,"value":180},{"type":41,"tag":75,"props":809,"children":810},{"style":161},[811],{"type":47,"value":185},{"type":41,"tag":75,"props":813,"children":814},{"style":88},[815],{"type":47,"value":48},{"type":41,"tag":75,"props":817,"children":818},{"style":161},[819],{"type":47,"value":195},{"type":41,"tag":75,"props":821,"children":822},{"style":161},[823],{"type":47,"value":200},{"type":41,"tag":75,"props":825,"children":826},{"class":77,"line":245},[827,831,835,840,844,848,852,857,861],{"type":41,"tag":75,"props":828,"children":829},{"style":155},[830],{"type":47,"value":158},{"type":41,"tag":75,"props":832,"children":833},{"style":161},[834],{"type":47,"value":164},{"type":41,"tag":75,"props":836,"children":837},{"style":167},[838],{"type":47,"value":839}," catalog",{"type":41,"tag":75,"props":841,"children":842},{"style":161},[843],{"type":47,"value":175},{"type":41,"tag":75,"props":845,"children":846},{"style":155},[847],{"type":47,"value":180},{"type":41,"tag":75,"props":849,"children":850},{"style":161},[851],{"type":47,"value":185},{"type":41,"tag":75,"props":853,"children":854},{"style":88},[855],{"type":47,"value":856},".\u002Fcatalog",{"type":41,"tag":75,"props":858,"children":859},{"style":161},[860],{"type":47,"value":195},{"type":41,"tag":75,"props":862,"children":863},{"style":161},[864],{"type":47,"value":200},{"type":41,"tag":75,"props":866,"children":867},{"class":77,"line":287},[868],{"type":41,"tag":75,"props":869,"children":870},{"emptyLinePlaceholder":291},[871],{"type":47,"value":294},{"type":41,"tag":75,"props":873,"children":874},{"class":77,"line":297},[875,879,883,887,892,896,901,905,910,914],{"type":41,"tag":75,"props":876,"children":877},{"style":155},[878],{"type":47,"value":303},{"type":41,"tag":75,"props":880,"children":881},{"style":306},[882],{"type":47,"value":309},{"type":41,"tag":75,"props":884,"children":885},{"style":161},[886],{"type":47,"value":164},{"type":41,"tag":75,"props":888,"children":889},{"style":167},[890],{"type":47,"value":891}," registry ",{"type":41,"tag":75,"props":893,"children":894},{"style":161},[895],{"type":47,"value":486},{"type":41,"tag":75,"props":897,"children":898},{"style":161},[899],{"type":47,"value":900}," =",{"type":41,"tag":75,"props":902,"children":903},{"style":322},[904],{"type":47,"value":799},{"type":41,"tag":75,"props":906,"children":907},{"style":167},[908],{"type":47,"value":909},"(catalog",{"type":41,"tag":75,"props":911,"children":912},{"style":161},[913],{"type":47,"value":334},{"type":41,"tag":75,"props":915,"children":916},{"style":161},[917],{"type":47,"value":339},{"type":41,"tag":75,"props":919,"children":920},{"class":77,"line":342},[921,925,929],{"type":41,"tag":75,"props":922,"children":923},{"style":346},[924],{"type":47,"value":349},{"type":41,"tag":75,"props":926,"children":927},{"style":161},[928],{"type":47,"value":354},{"type":41,"tag":75,"props":930,"children":931},{"style":161},[932],{"type":47,"value":339},{"type":41,"tag":75,"props":934,"children":935},{"class":77,"line":361},[936,940,944,949,955,959,964,969],{"type":41,"tag":75,"props":937,"children":938},{"style":322},[939],{"type":47,"value":367},{"type":41,"tag":75,"props":941,"children":942},{"style":161},[943],{"type":47,"value":354},{"type":41,"tag":75,"props":945,"children":946},{"style":161},[947],{"type":47,"value":948}," ({",{"type":41,"tag":75,"props":950,"children":952},{"style":951},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[953],{"type":47,"value":954}," props",{"type":41,"tag":75,"props":956,"children":957},{"style":161},[958],{"type":47,"value":334},{"type":41,"tag":75,"props":960,"children":961},{"style":951},[962],{"type":47,"value":963}," children",{"type":41,"tag":75,"props":965,"children":966},{"style":161},[967],{"type":47,"value":968}," })",{"type":41,"tag":75,"props":970,"children":971},{"style":306},[972],{"type":47,"value":973}," =>\n",{"type":41,"tag":75,"props":975,"children":976},{"class":77,"line":378},[977,982,986,990,995,999,1003,1007,1012,1016,1020,1025,1029,1034],{"type":41,"tag":75,"props":978,"children":979},{"style":322},[980],{"type":47,"value":981},"      h",{"type":41,"tag":75,"props":983,"children":984},{"style":167},[985],{"type":47,"value":406},{"type":41,"tag":75,"props":987,"children":988},{"style":161},[989],{"type":47,"value":195},{"type":41,"tag":75,"props":991,"children":992},{"style":88},[993],{"type":47,"value":994},"div",{"type":41,"tag":75,"props":996,"children":997},{"style":161},[998],{"type":47,"value":195},{"type":41,"tag":75,"props":1000,"children":1001},{"style":161},[1002],{"type":47,"value":334},{"type":41,"tag":75,"props":1004,"children":1005},{"style":161},[1006],{"type":47,"value":164},{"type":41,"tag":75,"props":1008,"children":1009},{"style":346},[1010],{"type":47,"value":1011}," class",{"type":41,"tag":75,"props":1013,"children":1014},{"style":161},[1015],{"type":47,"value":354},{"type":41,"tag":75,"props":1017,"children":1018},{"style":161},[1019],{"type":47,"value":185},{"type":41,"tag":75,"props":1021,"children":1022},{"style":88},[1023],{"type":47,"value":1024},"card",{"type":41,"tag":75,"props":1026,"children":1027},{"style":161},[1028],{"type":47,"value":195},{"type":41,"tag":75,"props":1030,"children":1031},{"style":161},[1032],{"type":47,"value":1033}," },",{"type":41,"tag":75,"props":1035,"children":1036},{"style":167},[1037],{"type":47,"value":1038}," [\n",{"type":41,"tag":75,"props":1040,"children":1041},{"class":77,"line":499},[1042,1047,1051,1055,1059,1063,1067,1072,1076,1080,1085],{"type":41,"tag":75,"props":1043,"children":1044},{"style":322},[1045],{"type":47,"value":1046},"        h",{"type":41,"tag":75,"props":1048,"children":1049},{"style":167},[1050],{"type":47,"value":406},{"type":41,"tag":75,"props":1052,"children":1053},{"style":161},[1054],{"type":47,"value":195},{"type":41,"tag":75,"props":1056,"children":1057},{"style":88},[1058],{"type":47,"value":135},{"type":41,"tag":75,"props":1060,"children":1061},{"style":161},[1062],{"type":47,"value":195},{"type":41,"tag":75,"props":1064,"children":1065},{"style":161},[1066],{"type":47,"value":334},{"type":41,"tag":75,"props":1068,"children":1069},{"style":161},[1070],{"type":47,"value":1071}," null,",{"type":41,"tag":75,"props":1073,"children":1074},{"style":167},[1075],{"type":47,"value":954},{"type":41,"tag":75,"props":1077,"children":1078},{"style":161},[1079],{"type":47,"value":127},{"type":41,"tag":75,"props":1081,"children":1082},{"style":167},[1083],{"type":47,"value":1084},"title)",{"type":41,"tag":75,"props":1086,"children":1087},{"style":161},[1088],{"type":47,"value":496},{"type":41,"tag":75,"props":1090,"children":1091},{"class":77,"line":529},[1092,1097,1101,1106,1111,1115,1119,1123,1127,1131,1135,1139,1143,1147,1152,1156],{"type":41,"tag":75,"props":1093,"children":1094},{"style":167},[1095],{"type":47,"value":1096},"        props",{"type":41,"tag":75,"props":1098,"children":1099},{"style":161},[1100],{"type":47,"value":127},{"type":41,"tag":75,"props":1102,"children":1103},{"style":167},[1104],{"type":47,"value":1105},"description ",{"type":41,"tag":75,"props":1107,"children":1108},{"style":161},[1109],{"type":47,"value":1110},"?",{"type":41,"tag":75,"props":1112,"children":1113},{"style":322},[1114],{"type":47,"value":759},{"type":41,"tag":75,"props":1116,"children":1117},{"style":167},[1118],{"type":47,"value":406},{"type":41,"tag":75,"props":1120,"children":1121},{"style":161},[1122],{"type":47,"value":195},{"type":41,"tag":75,"props":1124,"children":1125},{"style":88},[1126],{"type":47,"value":50},{"type":41,"tag":75,"props":1128,"children":1129},{"style":161},[1130],{"type":47,"value":195},{"type":41,"tag":75,"props":1132,"children":1133},{"style":161},[1134],{"type":47,"value":334},{"type":41,"tag":75,"props":1136,"children":1137},{"style":161},[1138],{"type":47,"value":1071},{"type":41,"tag":75,"props":1140,"children":1141},{"style":167},[1142],{"type":47,"value":954},{"type":41,"tag":75,"props":1144,"children":1145},{"style":161},[1146],{"type":47,"value":127},{"type":41,"tag":75,"props":1148,"children":1149},{"style":167},[1150],{"type":47,"value":1151},"description) ",{"type":41,"tag":75,"props":1153,"children":1154},{"style":161},[1155],{"type":47,"value":354},{"type":41,"tag":75,"props":1157,"children":1158},{"style":161},[1159],{"type":47,"value":1160}," null,\n",{"type":41,"tag":75,"props":1162,"children":1163},{"class":77,"line":538},[1164,1169],{"type":41,"tag":75,"props":1165,"children":1166},{"style":167},[1167],{"type":47,"value":1168},"        children",{"type":41,"tag":75,"props":1170,"children":1171},{"style":161},[1172],{"type":47,"value":496},{"type":41,"tag":75,"props":1174,"children":1175},{"class":77,"line":555},[1176,1181],{"type":41,"tag":75,"props":1177,"children":1178},{"style":167},[1179],{"type":47,"value":1180},"      ])",{"type":41,"tag":75,"props":1182,"children":1183},{"style":161},[1184],{"type":47,"value":496},{"type":41,"tag":75,"props":1186,"children":1187},{"class":77,"line":653},[1188,1192,1196,1200,1204,1208,1213,1217],{"type":41,"tag":75,"props":1189,"children":1190},{"style":322},[1191],{"type":47,"value":544},{"type":41,"tag":75,"props":1193,"children":1194},{"style":161},[1195],{"type":47,"value":354},{"type":41,"tag":75,"props":1197,"children":1198},{"style":161},[1199],{"type":47,"value":948},{"type":41,"tag":75,"props":1201,"children":1202},{"style":951},[1203],{"type":47,"value":954},{"type":41,"tag":75,"props":1205,"children":1206},{"style":161},[1207],{"type":47,"value":334},{"type":41,"tag":75,"props":1209,"children":1210},{"style":951},[1211],{"type":47,"value":1212}," emit",{"type":41,"tag":75,"props":1214,"children":1215},{"style":161},[1216],{"type":47,"value":968},{"type":41,"tag":75,"props":1218,"children":1219},{"style":306},[1220],{"type":47,"value":973},{"type":41,"tag":75,"props":1222,"children":1223},{"class":77,"line":682},[1224,1228,1232,1236,1241,1245,1249,1253,1258,1262,1267,1272,1276,1280,1284,1289,1293,1298,1303,1307,1311,1316],{"type":41,"tag":75,"props":1225,"children":1226},{"style":322},[1227],{"type":47,"value":981},{"type":41,"tag":75,"props":1229,"children":1230},{"style":167},[1231],{"type":47,"value":406},{"type":41,"tag":75,"props":1233,"children":1234},{"style":161},[1235],{"type":47,"value":195},{"type":41,"tag":75,"props":1237,"children":1238},{"style":88},[1239],{"type":47,"value":1240},"button",{"type":41,"tag":75,"props":1242,"children":1243},{"style":161},[1244],{"type":47,"value":195},{"type":41,"tag":75,"props":1246,"children":1247},{"style":161},[1248],{"type":47,"value":334},{"type":41,"tag":75,"props":1250,"children":1251},{"style":161},[1252],{"type":47,"value":164},{"type":41,"tag":75,"props":1254,"children":1255},{"style":322},[1256],{"type":47,"value":1257}," onClick",{"type":41,"tag":75,"props":1259,"children":1260},{"style":161},[1261],{"type":47,"value":354},{"type":41,"tag":75,"props":1263,"children":1264},{"style":161},[1265],{"type":47,"value":1266}," ()",{"type":41,"tag":75,"props":1268,"children":1269},{"style":306},[1270],{"type":47,"value":1271}," =>",{"type":41,"tag":75,"props":1273,"children":1274},{"style":322},[1275],{"type":47,"value":1212},{"type":41,"tag":75,"props":1277,"children":1278},{"style":167},[1279],{"type":47,"value":406},{"type":41,"tag":75,"props":1281,"children":1282},{"style":161},[1283],{"type":47,"value":195},{"type":41,"tag":75,"props":1285,"children":1286},{"style":88},[1287],{"type":47,"value":1288},"press",{"type":41,"tag":75,"props":1290,"children":1291},{"style":161},[1292],{"type":47,"value":195},{"type":41,"tag":75,"props":1294,"children":1295},{"style":167},[1296],{"type":47,"value":1297},") ",{"type":41,"tag":75,"props":1299,"children":1300},{"style":161},[1301],{"type":47,"value":1302},"},",{"type":41,"tag":75,"props":1304,"children":1305},{"style":167},[1306],{"type":47,"value":954},{"type":41,"tag":75,"props":1308,"children":1309},{"style":161},[1310],{"type":47,"value":127},{"type":41,"tag":75,"props":1312,"children":1313},{"style":167},[1314],{"type":47,"value":1315},"label)",{"type":41,"tag":75,"props":1317,"children":1318},{"style":161},[1319],{"type":47,"value":496},{"type":41,"tag":75,"props":1321,"children":1322},{"class":77,"line":690},[1323],{"type":41,"tag":75,"props":1324,"children":1325},{"style":161},[1326],{"type":47,"value":696},{"type":41,"tag":75,"props":1328,"children":1329},{"class":77,"line":699},[1330,1334,1338],{"type":41,"tag":75,"props":1331,"children":1332},{"style":161},[1333],{"type":47,"value":486},{"type":41,"tag":75,"props":1335,"children":1336},{"style":167},[1337],{"type":47,"value":491},{"type":41,"tag":75,"props":1339,"children":1340},{"style":161},[1341],{"type":47,"value":200},{"type":41,"tag":135,"props":1343,"children":1345},{"id":1344},"render-specs",[1346],{"type":47,"value":1347},"Render Specs",{"type":41,"tag":63,"props":1349,"children":1352},{"className":1350,"code":1351,"language":4,"meta":68,"style":68},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { StateProvider, ActionProvider, Renderer } from \"@json-render\u002Fvue\";\nimport { registry } from \".\u002Fregistry\";\n\nconst spec = { root: \"card-1\", elements: { \u002F* ... *\u002F } };\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CStateProvider :initial-state=\"{ form: { name: '' } }\">\n    \u003CActionProvider :handlers=\"{ submit: handleSubmit }\">\n      \u003CRenderer :spec=\"spec\" :registry=\"registry\" \u002F>\n    \u003C\u002FActionProvider>\n  \u003C\u002FStateProvider>\n\u003C\u002Ftemplate>\n",[1353],{"type":41,"tag":71,"props":1354,"children":1355},{"__ignoreMap":68},[1356,1401,1459,1500,1507,1582,1598,1605,1621,1660,1699,1761,1777,1793],{"type":41,"tag":75,"props":1357,"children":1358},{"class":77,"line":78},[1359,1364,1369,1374,1379,1383,1387,1392,1396],{"type":41,"tag":75,"props":1360,"children":1361},{"style":161},[1362],{"type":47,"value":1363},"\u003C",{"type":41,"tag":75,"props":1365,"children":1366},{"style":346},[1367],{"type":47,"value":1368},"script",{"type":41,"tag":75,"props":1370,"children":1371},{"style":306},[1372],{"type":47,"value":1373}," setup",{"type":41,"tag":75,"props":1375,"children":1376},{"style":306},[1377],{"type":47,"value":1378}," lang",{"type":41,"tag":75,"props":1380,"children":1381},{"style":161},[1382],{"type":47,"value":319},{"type":41,"tag":75,"props":1384,"children":1385},{"style":161},[1386],{"type":47,"value":195},{"type":41,"tag":75,"props":1388,"children":1389},{"style":88},[1390],{"type":47,"value":1391},"ts",{"type":41,"tag":75,"props":1393,"children":1394},{"style":161},[1395],{"type":47,"value":195},{"type":41,"tag":75,"props":1397,"children":1398},{"style":161},[1399],{"type":47,"value":1400},">\n",{"type":41,"tag":75,"props":1402,"children":1403},{"class":77,"line":203},[1404,1408,1412,1417,1421,1426,1430,1435,1439,1443,1447,1451,1455],{"type":41,"tag":75,"props":1405,"children":1406},{"style":155},[1407],{"type":47,"value":158},{"type":41,"tag":75,"props":1409,"children":1410},{"style":161},[1411],{"type":47,"value":164},{"type":41,"tag":75,"props":1413,"children":1414},{"style":167},[1415],{"type":47,"value":1416}," StateProvider",{"type":41,"tag":75,"props":1418,"children":1419},{"style":161},[1420],{"type":47,"value":334},{"type":41,"tag":75,"props":1422,"children":1423},{"style":167},[1424],{"type":47,"value":1425}," ActionProvider",{"type":41,"tag":75,"props":1427,"children":1428},{"style":161},[1429],{"type":47,"value":334},{"type":41,"tag":75,"props":1431,"children":1432},{"style":167},[1433],{"type":47,"value":1434}," Renderer",{"type":41,"tag":75,"props":1436,"children":1437},{"style":161},[1438],{"type":47,"value":175},{"type":41,"tag":75,"props":1440,"children":1441},{"style":155},[1442],{"type":47,"value":180},{"type":41,"tag":75,"props":1444,"children":1445},{"style":161},[1446],{"type":47,"value":185},{"type":41,"tag":75,"props":1448,"children":1449},{"style":88},[1450],{"type":47,"value":48},{"type":41,"tag":75,"props":1452,"children":1453},{"style":161},[1454],{"type":47,"value":195},{"type":41,"tag":75,"props":1456,"children":1457},{"style":161},[1458],{"type":47,"value":200},{"type":41,"tag":75,"props":1460,"children":1461},{"class":77,"line":245},[1462,1466,1470,1475,1479,1483,1487,1492,1496],{"type":41,"tag":75,"props":1463,"children":1464},{"style":155},[1465],{"type":47,"value":158},{"type":41,"tag":75,"props":1467,"children":1468},{"style":161},[1469],{"type":47,"value":164},{"type":41,"tag":75,"props":1471,"children":1472},{"style":167},[1473],{"type":47,"value":1474}," registry",{"type":41,"tag":75,"props":1476,"children":1477},{"style":161},[1478],{"type":47,"value":175},{"type":41,"tag":75,"props":1480,"children":1481},{"style":155},[1482],{"type":47,"value":180},{"type":41,"tag":75,"props":1484,"children":1485},{"style":161},[1486],{"type":47,"value":185},{"type":41,"tag":75,"props":1488,"children":1489},{"style":88},[1490],{"type":47,"value":1491},".\u002Fregistry",{"type":41,"tag":75,"props":1493,"children":1494},{"style":161},[1495],{"type":47,"value":195},{"type":41,"tag":75,"props":1497,"children":1498},{"style":161},[1499],{"type":47,"value":200},{"type":41,"tag":75,"props":1501,"children":1502},{"class":77,"line":287},[1503],{"type":41,"tag":75,"props":1504,"children":1505},{"emptyLinePlaceholder":291},[1506],{"type":47,"value":294},{"type":41,"tag":75,"props":1508,"children":1509},{"class":77,"line":297},[1510,1515,1520,1524,1528,1533,1537,1541,1546,1550,1554,1559,1563,1567,1573,1577],{"type":41,"tag":75,"props":1511,"children":1512},{"style":306},[1513],{"type":47,"value":1514},"const",{"type":41,"tag":75,"props":1516,"children":1517},{"style":167},[1518],{"type":47,"value":1519}," spec ",{"type":41,"tag":75,"props":1521,"children":1522},{"style":161},[1523],{"type":47,"value":319},{"type":41,"tag":75,"props":1525,"children":1526},{"style":161},[1527],{"type":47,"value":164},{"type":41,"tag":75,"props":1529,"children":1530},{"style":346},[1531],{"type":47,"value":1532}," root",{"type":41,"tag":75,"props":1534,"children":1535},{"style":161},[1536],{"type":47,"value":354},{"type":41,"tag":75,"props":1538,"children":1539},{"style":161},[1540],{"type":47,"value":185},{"type":41,"tag":75,"props":1542,"children":1543},{"style":88},[1544],{"type":47,"value":1545},"card-1",{"type":41,"tag":75,"props":1547,"children":1548},{"style":161},[1549],{"type":47,"value":195},{"type":41,"tag":75,"props":1551,"children":1552},{"style":161},[1553],{"type":47,"value":334},{"type":41,"tag":75,"props":1555,"children":1556},{"style":346},[1557],{"type":47,"value":1558}," elements",{"type":41,"tag":75,"props":1560,"children":1561},{"style":161},[1562],{"type":47,"value":354},{"type":41,"tag":75,"props":1564,"children":1565},{"style":161},[1566],{"type":47,"value":164},{"type":41,"tag":75,"props":1568,"children":1570},{"style":1569},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1571],{"type":47,"value":1572}," \u002F* ... *\u002F",{"type":41,"tag":75,"props":1574,"children":1575},{"style":161},[1576],{"type":47,"value":175},{"type":41,"tag":75,"props":1578,"children":1579},{"style":161},[1580],{"type":47,"value":1581}," };\n",{"type":41,"tag":75,"props":1583,"children":1584},{"class":77,"line":342},[1585,1590,1594],{"type":41,"tag":75,"props":1586,"children":1587},{"style":161},[1588],{"type":47,"value":1589},"\u003C\u002F",{"type":41,"tag":75,"props":1591,"children":1592},{"style":346},[1593],{"type":47,"value":1368},{"type":41,"tag":75,"props":1595,"children":1596},{"style":161},[1597],{"type":47,"value":1400},{"type":41,"tag":75,"props":1599,"children":1600},{"class":77,"line":361},[1601],{"type":41,"tag":75,"props":1602,"children":1603},{"emptyLinePlaceholder":291},[1604],{"type":47,"value":294},{"type":41,"tag":75,"props":1606,"children":1607},{"class":77,"line":378},[1608,1612,1617],{"type":41,"tag":75,"props":1609,"children":1610},{"style":161},[1611],{"type":47,"value":1363},{"type":41,"tag":75,"props":1613,"children":1614},{"style":346},[1615],{"type":47,"value":1616},"template",{"type":41,"tag":75,"props":1618,"children":1619},{"style":161},[1620],{"type":47,"value":1400},{"type":41,"tag":75,"props":1622,"children":1623},{"class":77,"line":499},[1624,1629,1634,1639,1643,1647,1652,1656],{"type":41,"tag":75,"props":1625,"children":1626},{"style":161},[1627],{"type":47,"value":1628},"  \u003C",{"type":41,"tag":75,"props":1630,"children":1631},{"style":346},[1632],{"type":47,"value":1633},"StateProvider",{"type":41,"tag":75,"props":1635,"children":1636},{"style":306},[1637],{"type":47,"value":1638}," :initial-state",{"type":41,"tag":75,"props":1640,"children":1641},{"style":161},[1642],{"type":47,"value":319},{"type":41,"tag":75,"props":1644,"children":1645},{"style":161},[1646],{"type":47,"value":195},{"type":41,"tag":75,"props":1648,"children":1649},{"style":88},[1650],{"type":47,"value":1651},"{ form: { name: '' } }",{"type":41,"tag":75,"props":1653,"children":1654},{"style":161},[1655],{"type":47,"value":195},{"type":41,"tag":75,"props":1657,"children":1658},{"style":161},[1659],{"type":47,"value":1400},{"type":41,"tag":75,"props":1661,"children":1662},{"class":77,"line":529},[1663,1668,1673,1678,1682,1686,1691,1695],{"type":41,"tag":75,"props":1664,"children":1665},{"style":161},[1666],{"type":47,"value":1667},"    \u003C",{"type":41,"tag":75,"props":1669,"children":1670},{"style":346},[1671],{"type":47,"value":1672},"ActionProvider",{"type":41,"tag":75,"props":1674,"children":1675},{"style":306},[1676],{"type":47,"value":1677}," :handlers",{"type":41,"tag":75,"props":1679,"children":1680},{"style":161},[1681],{"type":47,"value":319},{"type":41,"tag":75,"props":1683,"children":1684},{"style":161},[1685],{"type":47,"value":195},{"type":41,"tag":75,"props":1687,"children":1688},{"style":88},[1689],{"type":47,"value":1690},"{ submit: handleSubmit }",{"type":41,"tag":75,"props":1692,"children":1693},{"style":161},[1694],{"type":47,"value":195},{"type":41,"tag":75,"props":1696,"children":1697},{"style":161},[1698],{"type":47,"value":1400},{"type":41,"tag":75,"props":1700,"children":1701},{"class":77,"line":538},[1702,1707,1712,1717,1721,1725,1730,1734,1739,1743,1747,1752,1756],{"type":41,"tag":75,"props":1703,"children":1704},{"style":161},[1705],{"type":47,"value":1706},"      \u003C",{"type":41,"tag":75,"props":1708,"children":1709},{"style":346},[1710],{"type":47,"value":1711},"Renderer",{"type":41,"tag":75,"props":1713,"children":1714},{"style":306},[1715],{"type":47,"value":1716}," :spec",{"type":41,"tag":75,"props":1718,"children":1719},{"style":161},[1720],{"type":47,"value":319},{"type":41,"tag":75,"props":1722,"children":1723},{"style":161},[1724],{"type":47,"value":195},{"type":41,"tag":75,"props":1726,"children":1727},{"style":88},[1728],{"type":47,"value":1729},"spec",{"type":41,"tag":75,"props":1731,"children":1732},{"style":161},[1733],{"type":47,"value":195},{"type":41,"tag":75,"props":1735,"children":1736},{"style":306},[1737],{"type":47,"value":1738}," :registry",{"type":41,"tag":75,"props":1740,"children":1741},{"style":161},[1742],{"type":47,"value":319},{"type":41,"tag":75,"props":1744,"children":1745},{"style":161},[1746],{"type":47,"value":195},{"type":41,"tag":75,"props":1748,"children":1749},{"style":88},[1750],{"type":47,"value":1751},"registry",{"type":41,"tag":75,"props":1753,"children":1754},{"style":161},[1755],{"type":47,"value":195},{"type":41,"tag":75,"props":1757,"children":1758},{"style":161},[1759],{"type":47,"value":1760}," \u002F>\n",{"type":41,"tag":75,"props":1762,"children":1763},{"class":77,"line":555},[1764,1769,1773],{"type":41,"tag":75,"props":1765,"children":1766},{"style":161},[1767],{"type":47,"value":1768},"    \u003C\u002F",{"type":41,"tag":75,"props":1770,"children":1771},{"style":346},[1772],{"type":47,"value":1672},{"type":41,"tag":75,"props":1774,"children":1775},{"style":161},[1776],{"type":47,"value":1400},{"type":41,"tag":75,"props":1778,"children":1779},{"class":77,"line":653},[1780,1785,1789],{"type":41,"tag":75,"props":1781,"children":1782},{"style":161},[1783],{"type":47,"value":1784},"  \u003C\u002F",{"type":41,"tag":75,"props":1786,"children":1787},{"style":346},[1788],{"type":47,"value":1633},{"type":41,"tag":75,"props":1790,"children":1791},{"style":161},[1792],{"type":47,"value":1400},{"type":41,"tag":75,"props":1794,"children":1795},{"class":77,"line":682},[1796,1800,1804],{"type":41,"tag":75,"props":1797,"children":1798},{"style":161},[1799],{"type":47,"value":1589},{"type":41,"tag":75,"props":1801,"children":1802},{"style":346},[1803],{"type":47,"value":1616},{"type":41,"tag":75,"props":1805,"children":1806},{"style":161},[1807],{"type":47,"value":1400},{"type":41,"tag":56,"props":1809,"children":1811},{"id":1810},"providers",[1812],{"type":47,"value":1813},"Providers",{"type":41,"tag":1815,"props":1816,"children":1817},"table",{},[1818,1837],{"type":41,"tag":1819,"props":1820,"children":1821},"thead",{},[1822],{"type":41,"tag":1823,"props":1824,"children":1825},"tr",{},[1826,1832],{"type":41,"tag":1827,"props":1828,"children":1829},"th",{},[1830],{"type":47,"value":1831},"Provider",{"type":41,"tag":1827,"props":1833,"children":1834},{},[1835],{"type":47,"value":1836},"Purpose",{"type":41,"tag":1838,"props":1839,"children":1840},"tbody",{},[1841,1874,1890,1907],{"type":41,"tag":1823,"props":1842,"children":1843},{},[1844,1853],{"type":41,"tag":1845,"props":1846,"children":1847},"td",{},[1848],{"type":41,"tag":71,"props":1849,"children":1851},{"className":1850},[],[1852],{"type":47,"value":1633},{"type":41,"tag":1845,"props":1854,"children":1855},{},[1856,1858,1864,1866,1872],{"type":47,"value":1857},"Share state across components (JSON Pointer paths). Accepts ",{"type":41,"tag":71,"props":1859,"children":1861},{"className":1860},[],[1862],{"type":47,"value":1863},"initialState",{"type":47,"value":1865}," or ",{"type":41,"tag":71,"props":1867,"children":1869},{"className":1868},[],[1870],{"type":47,"value":1871},"store",{"type":47,"value":1873}," for controlled mode.",{"type":41,"tag":1823,"props":1875,"children":1876},{},[1877,1885],{"type":41,"tag":1845,"props":1878,"children":1879},{},[1880],{"type":41,"tag":71,"props":1881,"children":1883},{"className":1882},[],[1884],{"type":47,"value":1672},{"type":41,"tag":1845,"props":1886,"children":1887},{},[1888],{"type":47,"value":1889},"Handle actions dispatched via the event system",{"type":41,"tag":1823,"props":1891,"children":1892},{},[1893,1902],{"type":41,"tag":1845,"props":1894,"children":1895},{},[1896],{"type":41,"tag":71,"props":1897,"children":1899},{"className":1898},[],[1900],{"type":47,"value":1901},"VisibilityProvider",{"type":41,"tag":1845,"props":1903,"children":1904},{},[1905],{"type":47,"value":1906},"Enable conditional rendering based on state",{"type":41,"tag":1823,"props":1908,"children":1909},{},[1910,1919],{"type":41,"tag":1845,"props":1911,"children":1912},{},[1913],{"type":41,"tag":71,"props":1914,"children":1916},{"className":1915},[],[1917],{"type":47,"value":1918},"ValidationProvider",{"type":41,"tag":1845,"props":1920,"children":1921},{},[1922],{"type":47,"value":1923},"Form field validation",{"type":41,"tag":56,"props":1925,"children":1927},{"id":1926},"composables",[1928],{"type":47,"value":1929},"Composables",{"type":41,"tag":1815,"props":1931,"children":1932},{},[1933,1948],{"type":41,"tag":1819,"props":1934,"children":1935},{},[1936],{"type":41,"tag":1823,"props":1937,"children":1938},{},[1939,1944],{"type":41,"tag":1827,"props":1940,"children":1941},{},[1942],{"type":47,"value":1943},"Composable",{"type":41,"tag":1827,"props":1945,"children":1946},{},[1947],{"type":47,"value":1836},{"type":41,"tag":1838,"props":1949,"children":1950},{},[1951,2005,2022,2039,2056,2073,2090],{"type":41,"tag":1823,"props":1952,"children":1953},{},[1954,1963],{"type":41,"tag":1845,"props":1955,"children":1956},{},[1957],{"type":41,"tag":71,"props":1958,"children":1960},{"className":1959},[],[1961],{"type":47,"value":1962},"useStateStore()",{"type":41,"tag":1845,"props":1964,"children":1965},{},[1966,1968,1974,1976,1982,1984,1990,1991,1997,1998,2004],{"type":47,"value":1967},"Access state context (",{"type":41,"tag":71,"props":1969,"children":1971},{"className":1970},[],[1972],{"type":47,"value":1973},"state",{"type":47,"value":1975}," as ",{"type":41,"tag":71,"props":1977,"children":1979},{"className":1978},[],[1980],{"type":47,"value":1981},"ShallowRef",{"type":47,"value":1983},", ",{"type":41,"tag":71,"props":1985,"children":1987},{"className":1986},[],[1988],{"type":47,"value":1989},"get",{"type":47,"value":1983},{"type":41,"tag":71,"props":1992,"children":1994},{"className":1993},[],[1995],{"type":47,"value":1996},"set",{"type":47,"value":1983},{"type":41,"tag":71,"props":1999,"children":2001},{"className":2000},[],[2002],{"type":47,"value":2003},"update",{"type":47,"value":491},{"type":41,"tag":1823,"props":2006,"children":2007},{},[2008,2017],{"type":41,"tag":1845,"props":2009,"children":2010},{},[2011],{"type":41,"tag":71,"props":2012,"children":2014},{"className":2013},[],[2015],{"type":47,"value":2016},"useStateValue(path)",{"type":41,"tag":1845,"props":2018,"children":2019},{},[2020],{"type":47,"value":2021},"Get single value from state",{"type":41,"tag":1823,"props":2023,"children":2024},{},[2025,2034],{"type":41,"tag":1845,"props":2026,"children":2027},{},[2028],{"type":41,"tag":71,"props":2029,"children":2031},{"className":2030},[],[2032],{"type":47,"value":2033},"useIsVisible(condition)",{"type":41,"tag":1845,"props":2035,"children":2036},{},[2037],{"type":47,"value":2038},"Check if a visibility condition is met",{"type":41,"tag":1823,"props":2040,"children":2041},{},[2042,2051],{"type":41,"tag":1845,"props":2043,"children":2044},{},[2045],{"type":41,"tag":71,"props":2046,"children":2048},{"className":2047},[],[2049],{"type":47,"value":2050},"useActions()",{"type":41,"tag":1845,"props":2052,"children":2053},{},[2054],{"type":47,"value":2055},"Access action context",{"type":41,"tag":1823,"props":2057,"children":2058},{},[2059,2068],{"type":41,"tag":1845,"props":2060,"children":2061},{},[2062],{"type":41,"tag":71,"props":2063,"children":2065},{"className":2064},[],[2066],{"type":47,"value":2067},"useAction(binding)",{"type":41,"tag":1845,"props":2069,"children":2070},{},[2071],{"type":47,"value":2072},"Get a single action dispatch function",{"type":41,"tag":1823,"props":2074,"children":2075},{},[2076,2085],{"type":41,"tag":1845,"props":2077,"children":2078},{},[2079],{"type":41,"tag":71,"props":2080,"children":2082},{"className":2081},[],[2083],{"type":47,"value":2084},"useFieldValidation(path, config)",{"type":41,"tag":1845,"props":2086,"children":2087},{},[2088],{"type":47,"value":2089},"Field validation state",{"type":41,"tag":1823,"props":2091,"children":2092},{},[2093,2102],{"type":41,"tag":1845,"props":2094,"children":2095},{},[2096],{"type":41,"tag":71,"props":2097,"children":2099},{"className":2098},[],[2100],{"type":47,"value":2101},"useBoundProp(propValue, bindingPath)",{"type":41,"tag":1845,"props":2103,"children":2104},{},[2105,2107,2113,2115],{"type":47,"value":2106},"Two-way binding for ",{"type":41,"tag":71,"props":2108,"children":2110},{"className":2109},[],[2111],{"type":47,"value":2112},"$bindState",{"type":47,"value":2114},"\u002F",{"type":41,"tag":71,"props":2116,"children":2118},{"className":2117},[],[2119],{"type":47,"value":2120},"$bindItem",{"type":41,"tag":50,"props":2122,"children":2123},{},[2124,2126,2132,2134,2140,2142,2148],{"type":47,"value":2125},"Note: ",{"type":41,"tag":71,"props":2127,"children":2129},{"className":2128},[],[2130],{"type":47,"value":2131},"useStateStore().state",{"type":47,"value":2133}," returns a ",{"type":41,"tag":71,"props":2135,"children":2137},{"className":2136},[],[2138],{"type":47,"value":2139},"ShallowRef\u003CStateModel>",{"type":47,"value":2141}," — use ",{"type":41,"tag":71,"props":2143,"children":2145},{"className":2144},[],[2146],{"type":47,"value":2147},"state.value",{"type":47,"value":2149}," to access.",{"type":41,"tag":56,"props":2151,"children":2153},{"id":2152},"external-store-statestore",[2154],{"type":47,"value":2155},"External Store (StateStore)",{"type":41,"tag":50,"props":2157,"children":2158},{},[2159,2161,2167,2169,2174],{"type":47,"value":2160},"Pass a ",{"type":41,"tag":71,"props":2162,"children":2164},{"className":2163},[],[2165],{"type":47,"value":2166},"StateStore",{"type":47,"value":2168}," to ",{"type":41,"tag":71,"props":2170,"children":2172},{"className":2171},[],[2173],{"type":47,"value":1633},{"type":47,"value":2175}," to wire json-render to Pinia, VueUse, or any state management:",{"type":41,"tag":63,"props":2177,"children":2179},{"className":143,"code":2178,"language":145,"meta":68,"style":68},"import { createStateStore, type StateStore } from \"@json-render\u002Fvue\";\n\nconst store = createStateStore({ count: 0 });\n",[2180],{"type":41,"tag":71,"props":2181,"children":2182},{"__ignoreMap":68},[2183,2237,2244],{"type":41,"tag":75,"props":2184,"children":2185},{"class":77,"line":78},[2186,2190,2194,2199,2203,2208,2213,2217,2221,2225,2229,2233],{"type":41,"tag":75,"props":2187,"children":2188},{"style":155},[2189],{"type":47,"value":158},{"type":41,"tag":75,"props":2191,"children":2192},{"style":161},[2193],{"type":47,"value":164},{"type":41,"tag":75,"props":2195,"children":2196},{"style":167},[2197],{"type":47,"value":2198}," createStateStore",{"type":41,"tag":75,"props":2200,"children":2201},{"style":161},[2202],{"type":47,"value":334},{"type":41,"tag":75,"props":2204,"children":2205},{"style":155},[2206],{"type":47,"value":2207}," type",{"type":41,"tag":75,"props":2209,"children":2210},{"style":167},[2211],{"type":47,"value":2212}," StateStore",{"type":41,"tag":75,"props":2214,"children":2215},{"style":161},[2216],{"type":47,"value":175},{"type":41,"tag":75,"props":2218,"children":2219},{"style":155},[2220],{"type":47,"value":180},{"type":41,"tag":75,"props":2222,"children":2223},{"style":161},[2224],{"type":47,"value":185},{"type":41,"tag":75,"props":2226,"children":2227},{"style":88},[2228],{"type":47,"value":48},{"type":41,"tag":75,"props":2230,"children":2231},{"style":161},[2232],{"type":47,"value":195},{"type":41,"tag":75,"props":2234,"children":2235},{"style":161},[2236],{"type":47,"value":200},{"type":41,"tag":75,"props":2238,"children":2239},{"class":77,"line":203},[2240],{"type":41,"tag":75,"props":2241,"children":2242},{"emptyLinePlaceholder":291},[2243],{"type":47,"value":294},{"type":41,"tag":75,"props":2245,"children":2246},{"class":77,"line":245},[2247,2251,2256,2260,2264,2268,2272,2277,2281,2287,2291,2295],{"type":41,"tag":75,"props":2248,"children":2249},{"style":306},[2250],{"type":47,"value":1514},{"type":41,"tag":75,"props":2252,"children":2253},{"style":167},[2254],{"type":47,"value":2255}," store ",{"type":41,"tag":75,"props":2257,"children":2258},{"style":161},[2259],{"type":47,"value":319},{"type":41,"tag":75,"props":2261,"children":2262},{"style":322},[2263],{"type":47,"value":2198},{"type":41,"tag":75,"props":2265,"children":2266},{"style":167},[2267],{"type":47,"value":406},{"type":41,"tag":75,"props":2269,"children":2270},{"style":161},[2271],{"type":47,"value":411},{"type":41,"tag":75,"props":2273,"children":2274},{"style":346},[2275],{"type":47,"value":2276}," count",{"type":41,"tag":75,"props":2278,"children":2279},{"style":161},[2280],{"type":47,"value":354},{"type":41,"tag":75,"props":2282,"children":2284},{"style":2283},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[2285],{"type":47,"value":2286}," 0",{"type":41,"tag":75,"props":2288,"children":2289},{"style":161},[2290],{"type":47,"value":175},{"type":41,"tag":75,"props":2292,"children":2293},{"style":167},[2294],{"type":47,"value":491},{"type":41,"tag":75,"props":2296,"children":2297},{"style":161},[2298],{"type":47,"value":200},{"type":41,"tag":63,"props":2300,"children":2302},{"className":1350,"code":2301,"language":4,"meta":68,"style":68},"\u003CStateProvider :store=\"store\">\n  \u003CRenderer :spec=\"spec\" :registry=\"registry\" \u002F>\n\u003C\u002FStateProvider>\n",[2303],{"type":41,"tag":71,"props":2304,"children":2305},{"__ignoreMap":68},[2306,2346,2354],{"type":41,"tag":75,"props":2307,"children":2308},{"class":77,"line":78},[2309,2313,2317,2322,2326,2330,2334,2338,2342],{"type":41,"tag":75,"props":2310,"children":2311},{"style":161},[2312],{"type":47,"value":1363},{"type":41,"tag":75,"props":2314,"children":2315},{"style":346},[2316],{"type":47,"value":1633},{"type":41,"tag":75,"props":2318,"children":2319},{"style":161},[2320],{"type":47,"value":2321}," :",{"type":41,"tag":75,"props":2323,"children":2324},{"style":306},[2325],{"type":47,"value":1871},{"type":41,"tag":75,"props":2327,"children":2328},{"style":161},[2329],{"type":47,"value":319},{"type":41,"tag":75,"props":2331,"children":2332},{"style":161},[2333],{"type":47,"value":195},{"type":41,"tag":75,"props":2335,"children":2336},{"style":167},[2337],{"type":47,"value":1871},{"type":41,"tag":75,"props":2339,"children":2340},{"style":161},[2341],{"type":47,"value":195},{"type":41,"tag":75,"props":2343,"children":2344},{"style":161},[2345],{"type":47,"value":1400},{"type":41,"tag":75,"props":2347,"children":2348},{"class":77,"line":203},[2349],{"type":41,"tag":75,"props":2350,"children":2351},{"style":167},[2352],{"type":47,"value":2353},"  \u003CRenderer :spec=\"spec\" :registry=\"registry\" \u002F>\n",{"type":41,"tag":75,"props":2355,"children":2356},{"class":77,"line":245},[2357,2361,2365],{"type":41,"tag":75,"props":2358,"children":2359},{"style":161},[2360],{"type":47,"value":1589},{"type":41,"tag":75,"props":2362,"children":2363},{"style":346},[2364],{"type":47,"value":1633},{"type":41,"tag":75,"props":2366,"children":2367},{"style":161},[2368],{"type":47,"value":1400},{"type":41,"tag":56,"props":2370,"children":2372},{"id":2371},"dynamic-prop-expressions",[2373],{"type":47,"value":2374},"Dynamic Prop Expressions",{"type":41,"tag":50,"props":2376,"children":2377},{},[2378,2380,2386,2387,2392,2393,2399,2400,2406,2407,2413,2415,2421],{"type":47,"value":2379},"Props support ",{"type":41,"tag":71,"props":2381,"children":2383},{"className":2382},[],[2384],{"type":47,"value":2385},"$state",{"type":47,"value":1983},{"type":41,"tag":71,"props":2388,"children":2390},{"className":2389},[],[2391],{"type":47,"value":2112},{"type":47,"value":1983},{"type":41,"tag":71,"props":2394,"children":2396},{"className":2395},[],[2397],{"type":47,"value":2398},"$cond",{"type":47,"value":1983},{"type":41,"tag":71,"props":2401,"children":2403},{"className":2402},[],[2404],{"type":47,"value":2405},"$template",{"type":47,"value":1983},{"type":41,"tag":71,"props":2408,"children":2410},{"className":2409},[],[2411],{"type":47,"value":2412},"$computed",{"type":47,"value":2414},". Use ",{"type":41,"tag":71,"props":2416,"children":2418},{"className":2417},[],[2419],{"type":47,"value":2420},"{ \"$bindState\": \"\u002Fpath\" }",{"type":47,"value":2422}," on the natural value prop for two-way binding.",{"type":41,"tag":56,"props":2424,"children":2426},{"id":2425},"visibility-conditions",[2427],{"type":47,"value":2428},"Visibility Conditions",{"type":41,"tag":63,"props":2430,"children":2432},{"className":143,"code":2431,"language":145,"meta":68,"style":68},"{ \"$state\": \"\u002Fuser\u002FisAdmin\" }\n{ \"$state\": \"\u002Fstatus\", \"eq\": \"active\" }\n{ \"$state\": \"\u002Fmaintenance\", \"not\": true }\n[ cond1, cond2 ]  \u002F\u002F implicit AND\n",[2433],{"type":41,"tag":71,"props":2434,"children":2435},{"__ignoreMap":68},[2436,2478,2552,2619],{"type":41,"tag":75,"props":2437,"children":2438},{"class":77,"line":78},[2439,2443,2447,2451,2455,2460,2464,2469,2473],{"type":41,"tag":75,"props":2440,"children":2441},{"style":161},[2442],{"type":47,"value":411},{"type":41,"tag":75,"props":2444,"children":2445},{"style":161},[2446],{"type":47,"value":185},{"type":41,"tag":75,"props":2448,"children":2449},{"style":88},[2450],{"type":47,"value":2385},{"type":41,"tag":75,"props":2452,"children":2453},{"style":161},[2454],{"type":47,"value":195},{"type":41,"tag":75,"props":2456,"children":2457},{"style":346},[2458],{"type":47,"value":2459},": ",{"type":41,"tag":75,"props":2461,"children":2462},{"style":161},[2463],{"type":47,"value":195},{"type":41,"tag":75,"props":2465,"children":2466},{"style":88},[2467],{"type":47,"value":2468},"\u002Fuser\u002FisAdmin",{"type":41,"tag":75,"props":2470,"children":2471},{"style":161},[2472],{"type":47,"value":195},{"type":41,"tag":75,"props":2474,"children":2475},{"style":161},[2476],{"type":47,"value":2477}," }\n",{"type":41,"tag":75,"props":2479,"children":2480},{"class":77,"line":203},[2481,2485,2489,2493,2497,2501,2505,2510,2514,2518,2522,2527,2531,2535,2539,2544,2548],{"type":41,"tag":75,"props":2482,"children":2483},{"style":161},[2484],{"type":47,"value":411},{"type":41,"tag":75,"props":2486,"children":2487},{"style":161},[2488],{"type":47,"value":185},{"type":41,"tag":75,"props":2490,"children":2491},{"style":88},[2492],{"type":47,"value":2385},{"type":41,"tag":75,"props":2494,"children":2495},{"style":161},[2496],{"type":47,"value":195},{"type":41,"tag":75,"props":2498,"children":2499},{"style":346},[2500],{"type":47,"value":2459},{"type":41,"tag":75,"props":2502,"children":2503},{"style":161},[2504],{"type":47,"value":195},{"type":41,"tag":75,"props":2506,"children":2507},{"style":88},[2508],{"type":47,"value":2509},"\u002Fstatus",{"type":41,"tag":75,"props":2511,"children":2512},{"style":161},[2513],{"type":47,"value":195},{"type":41,"tag":75,"props":2515,"children":2516},{"style":161},[2517],{"type":47,"value":334},{"type":41,"tag":75,"props":2519,"children":2520},{"style":161},[2521],{"type":47,"value":185},{"type":41,"tag":75,"props":2523,"children":2524},{"style":88},[2525],{"type":47,"value":2526},"eq",{"type":41,"tag":75,"props":2528,"children":2529},{"style":161},[2530],{"type":47,"value":195},{"type":41,"tag":75,"props":2532,"children":2533},{"style":346},[2534],{"type":47,"value":2459},{"type":41,"tag":75,"props":2536,"children":2537},{"style":161},[2538],{"type":47,"value":195},{"type":41,"tag":75,"props":2540,"children":2541},{"style":88},[2542],{"type":47,"value":2543},"active",{"type":41,"tag":75,"props":2545,"children":2546},{"style":161},[2547],{"type":47,"value":195},{"type":41,"tag":75,"props":2549,"children":2550},{"style":161},[2551],{"type":47,"value":2477},{"type":41,"tag":75,"props":2553,"children":2554},{"class":77,"line":245},[2555,2559,2563,2567,2571,2575,2579,2584,2588,2592,2596,2601,2605,2609,2615],{"type":41,"tag":75,"props":2556,"children":2557},{"style":161},[2558],{"type":47,"value":411},{"type":41,"tag":75,"props":2560,"children":2561},{"style":161},[2562],{"type":47,"value":185},{"type":41,"tag":75,"props":2564,"children":2565},{"style":88},[2566],{"type":47,"value":2385},{"type":41,"tag":75,"props":2568,"children":2569},{"style":161},[2570],{"type":47,"value":195},{"type":41,"tag":75,"props":2572,"children":2573},{"style":346},[2574],{"type":47,"value":2459},{"type":41,"tag":75,"props":2576,"children":2577},{"style":161},[2578],{"type":47,"value":195},{"type":41,"tag":75,"props":2580,"children":2581},{"style":88},[2582],{"type":47,"value":2583},"\u002Fmaintenance",{"type":41,"tag":75,"props":2585,"children":2586},{"style":161},[2587],{"type":47,"value":195},{"type":41,"tag":75,"props":2589,"children":2590},{"style":161},[2591],{"type":47,"value":334},{"type":41,"tag":75,"props":2593,"children":2594},{"style":161},[2595],{"type":47,"value":185},{"type":41,"tag":75,"props":2597,"children":2598},{"style":88},[2599],{"type":47,"value":2600},"not",{"type":41,"tag":75,"props":2602,"children":2603},{"style":161},[2604],{"type":47,"value":195},{"type":41,"tag":75,"props":2606,"children":2607},{"style":346},[2608],{"type":47,"value":2459},{"type":41,"tag":75,"props":2610,"children":2612},{"style":2611},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[2613],{"type":47,"value":2614},"true",{"type":41,"tag":75,"props":2616,"children":2617},{"style":161},[2618],{"type":47,"value":2477},{"type":41,"tag":75,"props":2620,"children":2621},{"class":77,"line":287},[2622,2627,2631,2636],{"type":41,"tag":75,"props":2623,"children":2624},{"style":167},[2625],{"type":47,"value":2626},"[ cond1",{"type":41,"tag":75,"props":2628,"children":2629},{"style":161},[2630],{"type":47,"value":334},{"type":41,"tag":75,"props":2632,"children":2633},{"style":167},[2634],{"type":47,"value":2635}," cond2 ]  ",{"type":41,"tag":75,"props":2637,"children":2638},{"style":1569},[2639],{"type":47,"value":2640},"\u002F\u002F implicit AND\n",{"type":41,"tag":56,"props":2642,"children":2644},{"id":2643},"built-in-actions",[2645],{"type":47,"value":2646},"Built-in Actions",{"type":41,"tag":50,"props":2648,"children":2649},{},[2650,2656,2657,2663,2664,2670,2672,2678,2680,2685],{"type":41,"tag":71,"props":2651,"children":2653},{"className":2652},[],[2654],{"type":47,"value":2655},"setState",{"type":47,"value":1983},{"type":41,"tag":71,"props":2658,"children":2660},{"className":2659},[],[2661],{"type":47,"value":2662},"pushState",{"type":47,"value":1983},{"type":41,"tag":71,"props":2665,"children":2667},{"className":2666},[],[2668],{"type":47,"value":2669},"removeState",{"type":47,"value":2671},", and ",{"type":41,"tag":71,"props":2673,"children":2675},{"className":2674},[],[2676],{"type":47,"value":2677},"validateForm",{"type":47,"value":2679}," are built into the Vue schema and handled by ",{"type":41,"tag":71,"props":2681,"children":2683},{"className":2682},[],[2684],{"type":47,"value":1672},{"type":47,"value":354},{"type":41,"tag":63,"props":2687,"children":2690},{"className":2688,"code":2689,"language":17,"meta":68,"style":68},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"action\": \"setState\",\n  \"params\": { \"statePath\": \"\u002FactiveTab\", \"value\": \"settings\" }\n}\n",[2691],{"type":41,"tag":71,"props":2692,"children":2693},{"__ignoreMap":68},[2694,2702,2739,2831],{"type":41,"tag":75,"props":2695,"children":2696},{"class":77,"line":78},[2697],{"type":41,"tag":75,"props":2698,"children":2699},{"style":161},[2700],{"type":47,"value":2701},"{\n",{"type":41,"tag":75,"props":2703,"children":2704},{"class":77,"line":203},[2705,2710,2715,2719,2723,2727,2731,2735],{"type":41,"tag":75,"props":2706,"children":2707},{"style":161},[2708],{"type":47,"value":2709},"  \"",{"type":41,"tag":75,"props":2711,"children":2712},{"style":306},[2713],{"type":47,"value":2714},"action",{"type":41,"tag":75,"props":2716,"children":2717},{"style":161},[2718],{"type":47,"value":195},{"type":41,"tag":75,"props":2720,"children":2721},{"style":161},[2722],{"type":47,"value":354},{"type":41,"tag":75,"props":2724,"children":2725},{"style":161},[2726],{"type":47,"value":185},{"type":41,"tag":75,"props":2728,"children":2729},{"style":88},[2730],{"type":47,"value":2655},{"type":41,"tag":75,"props":2732,"children":2733},{"style":161},[2734],{"type":47,"value":195},{"type":41,"tag":75,"props":2736,"children":2737},{"style":161},[2738],{"type":47,"value":496},{"type":41,"tag":75,"props":2740,"children":2741},{"class":77,"line":245},[2742,2746,2751,2755,2759,2763,2767,2772,2776,2780,2784,2789,2793,2797,2801,2806,2810,2814,2818,2823,2827],{"type":41,"tag":75,"props":2743,"children":2744},{"style":161},[2745],{"type":47,"value":2709},{"type":41,"tag":75,"props":2747,"children":2748},{"style":306},[2749],{"type":47,"value":2750},"params",{"type":41,"tag":75,"props":2752,"children":2753},{"style":161},[2754],{"type":47,"value":195},{"type":41,"tag":75,"props":2756,"children":2757},{"style":161},[2758],{"type":47,"value":354},{"type":41,"tag":75,"props":2760,"children":2761},{"style":161},[2762],{"type":47,"value":164},{"type":41,"tag":75,"props":2764,"children":2765},{"style":161},[2766],{"type":47,"value":185},{"type":41,"tag":75,"props":2768,"children":2769},{"style":82},[2770],{"type":47,"value":2771},"statePath",{"type":41,"tag":75,"props":2773,"children":2774},{"style":161},[2775],{"type":47,"value":195},{"type":41,"tag":75,"props":2777,"children":2778},{"style":161},[2779],{"type":47,"value":354},{"type":41,"tag":75,"props":2781,"children":2782},{"style":161},[2783],{"type":47,"value":185},{"type":41,"tag":75,"props":2785,"children":2786},{"style":88},[2787],{"type":47,"value":2788},"\u002FactiveTab",{"type":41,"tag":75,"props":2790,"children":2791},{"style":161},[2792],{"type":47,"value":195},{"type":41,"tag":75,"props":2794,"children":2795},{"style":161},[2796],{"type":47,"value":334},{"type":41,"tag":75,"props":2798,"children":2799},{"style":161},[2800],{"type":47,"value":185},{"type":41,"tag":75,"props":2802,"children":2803},{"style":82},[2804],{"type":47,"value":2805},"value",{"type":41,"tag":75,"props":2807,"children":2808},{"style":161},[2809],{"type":47,"value":195},{"type":41,"tag":75,"props":2811,"children":2812},{"style":161},[2813],{"type":47,"value":354},{"type":41,"tag":75,"props":2815,"children":2816},{"style":161},[2817],{"type":47,"value":185},{"type":41,"tag":75,"props":2819,"children":2820},{"style":88},[2821],{"type":47,"value":2822},"settings",{"type":41,"tag":75,"props":2824,"children":2825},{"style":161},[2826],{"type":47,"value":195},{"type":41,"tag":75,"props":2828,"children":2829},{"style":161},[2830],{"type":47,"value":2477},{"type":41,"tag":75,"props":2832,"children":2833},{"class":77,"line":287},[2834],{"type":41,"tag":75,"props":2835,"children":2836},{"style":161},[2837],{"type":47,"value":2838},"}\n",{"type":41,"tag":56,"props":2840,"children":2842},{"id":2841},"event-system",[2843],{"type":47,"value":2844},"Event System",{"type":41,"tag":50,"props":2846,"children":2847},{},[2848,2850,2856,2858,2864,2866,2872,2873,2879],{"type":47,"value":2849},"Components use ",{"type":41,"tag":71,"props":2851,"children":2853},{"className":2852},[],[2854],{"type":47,"value":2855},"emit(event)",{"type":47,"value":2857}," to fire events, or ",{"type":41,"tag":71,"props":2859,"children":2861},{"className":2860},[],[2862],{"type":47,"value":2863},"on(event)",{"type":47,"value":2865}," for metadata (",{"type":41,"tag":71,"props":2867,"children":2869},{"className":2868},[],[2870],{"type":47,"value":2871},"shouldPreventDefault",{"type":47,"value":1983},{"type":41,"tag":71,"props":2874,"children":2876},{"className":2875},[],[2877],{"type":47,"value":2878},"bound",{"type":47,"value":2880},").",{"type":41,"tag":56,"props":2882,"children":2884},{"id":2883},"streaming",[2885],{"type":47,"value":2886},"Streaming",{"type":41,"tag":50,"props":2888,"children":2889},{},[2890,2896,2897,2903],{"type":41,"tag":71,"props":2891,"children":2893},{"className":2892},[],[2894],{"type":47,"value":2895},"useUIStream",{"type":47,"value":119},{"type":41,"tag":71,"props":2898,"children":2900},{"className":2899},[],[2901],{"type":47,"value":2902},"useChatUI",{"type":47,"value":2904}," return Vue Refs for streaming specs from an API.",{"type":41,"tag":56,"props":2906,"children":2908},{"id":2907},"basecomponentprops",[2909],{"type":47,"value":2910},"BaseComponentProps",{"type":41,"tag":50,"props":2912,"children":2913},{},[2914],{"type":47,"value":2915},"For catalog-agnostic reusable components:",{"type":41,"tag":63,"props":2917,"children":2919},{"className":143,"code":2918,"language":145,"meta":68,"style":68},"import type { BaseComponentProps } from \"@json-render\u002Fvue\";\n\nconst Card = ({ props, children }: BaseComponentProps\u003C{ title?: string }>) =>\n  h(\"div\", null, [props.title, children]);\n",[2920],{"type":41,"tag":71,"props":2921,"children":2922},{"__ignoreMap":68},[2923,2967,2974,3043],{"type":41,"tag":75,"props":2924,"children":2925},{"class":77,"line":78},[2926,2930,2934,2938,2943,2947,2951,2955,2959,2963],{"type":41,"tag":75,"props":2927,"children":2928},{"style":155},[2929],{"type":47,"value":158},{"type":41,"tag":75,"props":2931,"children":2932},{"style":155},[2933],{"type":47,"value":2207},{"type":41,"tag":75,"props":2935,"children":2936},{"style":161},[2937],{"type":47,"value":164},{"type":41,"tag":75,"props":2939,"children":2940},{"style":167},[2941],{"type":47,"value":2942}," BaseComponentProps",{"type":41,"tag":75,"props":2944,"children":2945},{"style":161},[2946],{"type":47,"value":175},{"type":41,"tag":75,"props":2948,"children":2949},{"style":155},[2950],{"type":47,"value":180},{"type":41,"tag":75,"props":2952,"children":2953},{"style":161},[2954],{"type":47,"value":185},{"type":41,"tag":75,"props":2956,"children":2957},{"style":88},[2958],{"type":47,"value":48},{"type":41,"tag":75,"props":2960,"children":2961},{"style":161},[2962],{"type":47,"value":195},{"type":41,"tag":75,"props":2964,"children":2965},{"style":161},[2966],{"type":47,"value":200},{"type":41,"tag":75,"props":2968,"children":2969},{"class":77,"line":203},[2970],{"type":41,"tag":75,"props":2971,"children":2972},{"emptyLinePlaceholder":291},[2973],{"type":47,"value":294},{"type":41,"tag":75,"props":2975,"children":2976},{"class":77,"line":245},[2977,2981,2986,2990,2994,2998,3002,3006,3011,3015,3020,3024,3029,3034,3039],{"type":41,"tag":75,"props":2978,"children":2979},{"style":306},[2980],{"type":47,"value":1514},{"type":41,"tag":75,"props":2982,"children":2983},{"style":167},[2984],{"type":47,"value":2985}," Card ",{"type":41,"tag":75,"props":2987,"children":2988},{"style":161},[2989],{"type":47,"value":319},{"type":41,"tag":75,"props":2991,"children":2992},{"style":161},[2993],{"type":47,"value":948},{"type":41,"tag":75,"props":2995,"children":2996},{"style":951},[2997],{"type":47,"value":954},{"type":41,"tag":75,"props":2999,"children":3000},{"style":161},[3001],{"type":47,"value":334},{"type":41,"tag":75,"props":3003,"children":3004},{"style":951},[3005],{"type":47,"value":963},{"type":41,"tag":75,"props":3007,"children":3008},{"style":161},[3009],{"type":47,"value":3010}," }:",{"type":41,"tag":75,"props":3012,"children":3013},{"style":82},[3014],{"type":47,"value":2942},{"type":41,"tag":75,"props":3016,"children":3017},{"style":161},[3018],{"type":47,"value":3019},"\u003C{",{"type":41,"tag":75,"props":3021,"children":3022},{"style":346},[3023],{"type":47,"value":416},{"type":41,"tag":75,"props":3025,"children":3026},{"style":161},[3027],{"type":47,"value":3028},"?:",{"type":41,"tag":75,"props":3030,"children":3031},{"style":82},[3032],{"type":47,"value":3033}," string",{"type":41,"tag":75,"props":3035,"children":3036},{"style":161},[3037],{"type":47,"value":3038}," }>)",{"type":41,"tag":75,"props":3040,"children":3041},{"style":306},[3042],{"type":47,"value":973},{"type":41,"tag":75,"props":3044,"children":3045},{"class":77,"line":287},[3046,3051,3055,3059,3063,3067,3071,3075,3080,3084,3089,3093,3098],{"type":41,"tag":75,"props":3047,"children":3048},{"style":322},[3049],{"type":47,"value":3050},"  h",{"type":41,"tag":75,"props":3052,"children":3053},{"style":167},[3054],{"type":47,"value":406},{"type":41,"tag":75,"props":3056,"children":3057},{"style":161},[3058],{"type":47,"value":195},{"type":41,"tag":75,"props":3060,"children":3061},{"style":88},[3062],{"type":47,"value":994},{"type":41,"tag":75,"props":3064,"children":3065},{"style":161},[3066],{"type":47,"value":195},{"type":41,"tag":75,"props":3068,"children":3069},{"style":161},[3070],{"type":47,"value":334},{"type":41,"tag":75,"props":3072,"children":3073},{"style":161},[3074],{"type":47,"value":1071},{"type":41,"tag":75,"props":3076,"children":3077},{"style":167},[3078],{"type":47,"value":3079}," [props",{"type":41,"tag":75,"props":3081,"children":3082},{"style":161},[3083],{"type":47,"value":127},{"type":41,"tag":75,"props":3085,"children":3086},{"style":167},[3087],{"type":47,"value":3088},"title",{"type":41,"tag":75,"props":3090,"children":3091},{"style":161},[3092],{"type":47,"value":334},{"type":41,"tag":75,"props":3094,"children":3095},{"style":167},[3096],{"type":47,"value":3097}," children])",{"type":41,"tag":75,"props":3099,"children":3100},{"style":161},[3101],{"type":47,"value":200},{"type":41,"tag":56,"props":3103,"children":3105},{"id":3104},"key-exports",[3106],{"type":47,"value":3107},"Key Exports",{"type":41,"tag":1815,"props":3109,"children":3110},{},[3111,3126],{"type":41,"tag":1819,"props":3112,"children":3113},{},[3114],{"type":41,"tag":1823,"props":3115,"children":3116},{},[3117,3122],{"type":41,"tag":1827,"props":3118,"children":3119},{},[3120],{"type":47,"value":3121},"Export",{"type":41,"tag":1827,"props":3123,"children":3124},{},[3125],{"type":47,"value":1836},{"type":41,"tag":1838,"props":3127,"children":3128},{},[3129,3146,3162,3185,3219,3250,3274,3298,3320,3342],{"type":41,"tag":1823,"props":3130,"children":3131},{},[3132,3141],{"type":41,"tag":1845,"props":3133,"children":3134},{},[3135],{"type":41,"tag":71,"props":3136,"children":3138},{"className":3137},[],[3139],{"type":47,"value":3140},"defineRegistry",{"type":41,"tag":1845,"props":3142,"children":3143},{},[3144],{"type":47,"value":3145},"Create a type-safe component registry from a catalog",{"type":41,"tag":1823,"props":3147,"children":3148},{},[3149,3157],{"type":41,"tag":1845,"props":3150,"children":3151},{},[3152],{"type":41,"tag":71,"props":3153,"children":3155},{"className":3154},[],[3156],{"type":47,"value":1711},{"type":41,"tag":1845,"props":3158,"children":3159},{},[3160],{"type":47,"value":3161},"Render a spec using a registry",{"type":41,"tag":1823,"props":3163,"children":3164},{},[3165,3174],{"type":41,"tag":1845,"props":3166,"children":3167},{},[3168],{"type":41,"tag":71,"props":3169,"children":3171},{"className":3170},[],[3172],{"type":47,"value":3173},"schema",{"type":41,"tag":1845,"props":3175,"children":3176},{},[3177,3179,3184],{"type":47,"value":3178},"Element tree schema (from ",{"type":41,"tag":71,"props":3180,"children":3182},{"className":3181},[],[3183],{"type":47,"value":234},{"type":47,"value":491},{"type":41,"tag":1823,"props":3186,"children":3187},{},[3188,3214],{"type":41,"tag":1845,"props":3189,"children":3190},{},[3191,3196,3197,3202,3203,3208,3209],{"type":41,"tag":71,"props":3192,"children":3194},{"className":3193},[],[3195],{"type":47,"value":1633},{"type":47,"value":1983},{"type":41,"tag":71,"props":3198,"children":3200},{"className":3199},[],[3201],{"type":47,"value":1672},{"type":47,"value":1983},{"type":41,"tag":71,"props":3204,"children":3206},{"className":3205},[],[3207],{"type":47,"value":1901},{"type":47,"value":1983},{"type":41,"tag":71,"props":3210,"children":3212},{"className":3211},[],[3213],{"type":47,"value":1918},{"type":41,"tag":1845,"props":3215,"children":3216},{},[3217],{"type":47,"value":3218},"Context providers",{"type":41,"tag":1823,"props":3220,"children":3221},{},[3222,3245],{"type":41,"tag":1845,"props":3223,"children":3224},{},[3225,3231,3232,3238,3239],{"type":41,"tag":71,"props":3226,"children":3228},{"className":3227},[],[3229],{"type":47,"value":3230},"useStateStore",{"type":47,"value":1983},{"type":41,"tag":71,"props":3233,"children":3235},{"className":3234},[],[3236],{"type":47,"value":3237},"useStateValue",{"type":47,"value":1983},{"type":41,"tag":71,"props":3240,"children":3242},{"className":3241},[],[3243],{"type":47,"value":3244},"useBoundProp",{"type":41,"tag":1845,"props":3246,"children":3247},{},[3248],{"type":47,"value":3249},"State composables",{"type":41,"tag":1823,"props":3251,"children":3252},{},[3253,3269],{"type":41,"tag":1845,"props":3254,"children":3255},{},[3256,3262,3263],{"type":41,"tag":71,"props":3257,"children":3259},{"className":3258},[],[3260],{"type":47,"value":3261},"useActions",{"type":47,"value":1983},{"type":41,"tag":71,"props":3264,"children":3266},{"className":3265},[],[3267],{"type":47,"value":3268},"useAction",{"type":41,"tag":1845,"props":3270,"children":3271},{},[3272],{"type":47,"value":3273},"Action composables",{"type":41,"tag":1823,"props":3275,"children":3276},{},[3277,3293],{"type":41,"tag":1845,"props":3278,"children":3279},{},[3280,3286,3287],{"type":41,"tag":71,"props":3281,"children":3283},{"className":3282},[],[3284],{"type":47,"value":3285},"useFieldValidation",{"type":47,"value":1983},{"type":41,"tag":71,"props":3288,"children":3290},{"className":3289},[],[3291],{"type":47,"value":3292},"useIsVisible",{"type":41,"tag":1845,"props":3294,"children":3295},{},[3296],{"type":47,"value":3297},"Validation and visibility",{"type":41,"tag":1823,"props":3299,"children":3300},{},[3301,3315],{"type":41,"tag":1845,"props":3302,"children":3303},{},[3304,3309,3310],{"type":41,"tag":71,"props":3305,"children":3307},{"className":3306},[],[3308],{"type":47,"value":2895},{"type":47,"value":1983},{"type":41,"tag":71,"props":3311,"children":3313},{"className":3312},[],[3314],{"type":47,"value":2902},{"type":41,"tag":1845,"props":3316,"children":3317},{},[3318],{"type":47,"value":3319},"Streaming composables",{"type":41,"tag":1823,"props":3321,"children":3322},{},[3323,3332],{"type":41,"tag":1845,"props":3324,"children":3325},{},[3326],{"type":41,"tag":71,"props":3327,"children":3329},{"className":3328},[],[3330],{"type":47,"value":3331},"createStateStore",{"type":41,"tag":1845,"props":3333,"children":3334},{},[3335,3337],{"type":47,"value":3336},"Create in-memory ",{"type":41,"tag":71,"props":3338,"children":3340},{"className":3339},[],[3341],{"type":47,"value":2166},{"type":41,"tag":1823,"props":3343,"children":3344},{},[3345,3353],{"type":41,"tag":1845,"props":3346,"children":3347},{},[3348],{"type":41,"tag":71,"props":3349,"children":3351},{"className":3350},[],[3352],{"type":47,"value":2910},{"type":41,"tag":1845,"props":3354,"children":3355},{},[3356],{"type":47,"value":3357},"Catalog-agnostic component props type",{"type":41,"tag":3359,"props":3360,"children":3361},"style",{},[3362],{"type":47,"value":3363},"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":3365,"total":3533},[3366,3384,3396,3408,3423,3440,3452,3465,3478,3491,3503,3518],{"slug":3367,"name":3367,"fn":3368,"description":3369,"org":3370,"tags":3371,"stars":3381,"repoUrl":3382,"updatedAt":3383},"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},[3372,3375,3378],{"name":3373,"slug":3374,"type":14},"Agents","agents",{"name":3376,"slug":3377,"type":14},"Automation","automation",{"name":3379,"slug":3380,"type":14},"Browser Automation","browser-automation",38346,"https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-browser","2026-07-20T05:55:17.314329",{"slug":3385,"name":3385,"fn":3386,"description":3387,"org":3388,"tags":3389,"stars":3381,"repoUrl":3382,"updatedAt":3395},"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},[3390,3391,3394],{"name":3376,"slug":3377,"type":14},{"name":3392,"slug":3393,"type":14},"AWS","aws",{"name":3379,"slug":3380,"type":14},"2026-07-17T06:08:33.665276",{"slug":3397,"name":3397,"fn":3398,"description":3399,"org":3400,"tags":3401,"stars":3381,"repoUrl":3382,"updatedAt":3407},"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},[3402,3403,3404],{"name":3373,"slug":3374,"type":14},{"name":3379,"slug":3380,"type":14},{"name":3405,"slug":3406,"type":14},"Navigation","navigation","2026-07-26T05:47:42.378419",{"slug":3409,"name":3409,"fn":3410,"description":3411,"org":3412,"tags":3413,"stars":3381,"repoUrl":3382,"updatedAt":3422},"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},[3414,3417,3418,3419],{"name":3415,"slug":3416,"type":14},"API Development","api-development",{"name":3376,"slug":3377,"type":14},{"name":3379,"slug":3380,"type":14},{"name":3420,"slug":3421,"type":14},"Web Scraping","web-scraping","2026-07-20T06:24:11.928835",{"slug":3424,"name":3424,"fn":3425,"description":3426,"org":3427,"tags":3428,"stars":3381,"repoUrl":3382,"updatedAt":3439},"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},[3429,3430,3433,3436],{"name":3379,"slug":3380,"type":14},{"name":3431,"slug":3432,"type":14},"Debugging","debugging",{"name":3434,"slug":3435,"type":14},"QA","qa",{"name":3437,"slug":3438,"type":14},"Testing","testing","2026-07-17T06:07:41.421482",{"slug":3441,"name":3441,"fn":3442,"description":3443,"org":3444,"tags":3445,"stars":3381,"repoUrl":3382,"updatedAt":3451},"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},[3446,3447,3448],{"name":3373,"slug":3374,"type":14},{"name":3379,"slug":3380,"type":14},{"name":3449,"slug":3450,"type":14},"Desktop","desktop","2026-07-17T06:08:28.007783",{"slug":3453,"name":3453,"fn":3454,"description":3455,"org":3456,"tags":3457,"stars":3381,"repoUrl":3382,"updatedAt":3464},"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},[3458,3459,3462],{"name":3379,"slug":3380,"type":14},{"name":3460,"slug":3461,"type":14},"Messaging","messaging",{"name":3463,"slug":3453,"type":14},"Slack","2026-07-17T06:08:27.679015",{"slug":3466,"name":3466,"fn":3467,"description":3468,"org":3469,"tags":3470,"stars":3381,"repoUrl":3382,"updatedAt":3477},"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},[3471,3472,3473,3474],{"name":3376,"slug":3377,"type":14},{"name":3379,"slug":3380,"type":14},{"name":3437,"slug":3438,"type":14},{"name":3475,"slug":3476,"type":14},"Vercel","vercel","2026-07-17T06:08:28.349899",{"slug":3479,"name":3479,"fn":3480,"description":3481,"org":3482,"tags":3483,"stars":3488,"repoUrl":3489,"updatedAt":3490},"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},[3484,3487],{"name":3485,"slug":3486,"type":14},"Deployment","deployment",{"name":3475,"slug":3476,"type":14},28993,"https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills","2026-07-17T06:08:41.18374",{"slug":3492,"name":3492,"fn":3493,"description":3494,"org":3495,"tags":3496,"stars":3488,"repoUrl":3489,"updatedAt":3502},"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},[3497,3500,3501],{"name":3498,"slug":3499,"type":14},"CLI","cli",{"name":3485,"slug":3486,"type":14},{"name":3475,"slug":3476,"type":14},"2026-07-17T06:08:41.84179",{"slug":3504,"name":3504,"fn":3505,"description":3506,"org":3507,"tags":3508,"stars":3488,"repoUrl":3489,"updatedAt":3517},"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},[3509,3512,3513,3516],{"name":3510,"slug":3511,"type":14},"Best Practices","best-practices",{"name":22,"slug":23,"type":14},{"name":3514,"slug":3515,"type":14},"React","react",{"name":19,"slug":20,"type":14},"2026-07-17T06:05:40.576913",{"slug":3519,"name":3519,"fn":3520,"description":3521,"org":3522,"tags":3523,"stars":3488,"repoUrl":3489,"updatedAt":3532},"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},[3524,3527,3528,3531],{"name":3525,"slug":3526,"type":14},"Cost Optimization","cost-optimization",{"name":3485,"slug":3486,"type":14},{"name":3529,"slug":3530,"type":14},"Performance","performance",{"name":3475,"slug":3476,"type":14},"2026-07-17T06:04:08.327515",100,{"items":3535,"total":3623},[3536,3550,3560,3572,3589,3599,3611],{"slug":3537,"name":3537,"fn":3538,"description":3539,"org":3540,"tags":3541,"stars":24,"repoUrl":25,"updatedAt":3549},"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},[3542,3545,3548],{"name":3543,"slug":3544,"type":14},"Code Generation","code-generation",{"name":3546,"slug":3547,"type":14},"Engineering","engineering",{"name":16,"slug":17,"type":14},"2026-07-17T06:08:34.68038",{"slug":3551,"name":3551,"fn":3552,"description":3553,"org":3554,"tags":3555,"stars":24,"repoUrl":25,"updatedAt":3559},"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},[3556,3557,3558],{"name":3431,"slug":3432,"type":14},{"name":22,"slug":23,"type":14},{"name":19,"slug":20,"type":14},"2026-07-17T06:08:35.001228",{"slug":3561,"name":3561,"fn":3562,"description":3563,"org":3564,"tags":3565,"stars":24,"repoUrl":25,"updatedAt":3571},"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},[3566,3567,3568,3570],{"name":3376,"slug":3377,"type":14},{"name":22,"slug":23,"type":14},{"name":3569,"slug":3569,"type":14},"i18n",{"name":16,"slug":17,"type":14},"2026-07-17T06:04:05.866831",{"slug":3573,"name":3573,"fn":3574,"description":3575,"org":3576,"tags":3577,"stars":24,"repoUrl":25,"updatedAt":3588},"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},[3578,3581,3582,3585],{"name":3579,"slug":3580,"type":14},"Images","images",{"name":16,"slug":17,"type":14},{"name":3583,"slug":3584,"type":14},"Satori","satori",{"name":3586,"slug":3587,"type":14},"SVG","svg","2026-07-17T06:07:42.441875",{"slug":3590,"name":3590,"fn":3591,"description":3592,"org":3593,"tags":3594,"stars":24,"repoUrl":25,"updatedAt":3598},"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},[3595,3596,3597],{"name":3498,"slug":3499,"type":14},{"name":16,"slug":17,"type":14},{"name":19,"slug":20,"type":14},"2026-07-17T06:08:28.678043",{"slug":3600,"name":3600,"fn":3601,"description":3602,"org":3603,"tags":3604,"stars":24,"repoUrl":25,"updatedAt":3610},"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},[3605,3606,3607],{"name":22,"slug":23,"type":14},{"name":3514,"slug":3515,"type":14},{"name":3608,"slug":3609,"type":14},"State Management","state-management","2026-07-17T06:05:48.244622",{"slug":3612,"name":3612,"fn":3613,"description":3614,"org":3615,"tags":3616,"stars":24,"repoUrl":25,"updatedAt":3622},"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},[3617,3618,3619,3621],{"name":22,"slug":23,"type":14},{"name":16,"slug":17,"type":14},{"name":3620,"slug":3612,"type":14},"MCP",{"name":19,"slug":20,"type":14},"2026-07-17T06:05:41.274723",25]