` — use `state.value` to access the underlying object. This differs from the React renderer where `state` is a plain object.\n\n## Visibility Conditions\n\n```typescript\n// Truthiness check\n{ \"$state\": \"/user/isAdmin\" }\n\n// Auth state (use state path)\n{ \"$state\": \"/auth/isSignedIn\" }\n\n// Comparisons (flat style)\n{ \"$state\": \"/status\", \"eq\": \"active\" }\n{ \"$state\": \"/count\", \"gt\": 10 }\n\n// Negation\n{ \"$state\": \"/maintenance\", \"not\": true }\n\n// Multiple conditions (implicit AND)\n[\n { \"$state\": \"/feature/enabled\" },\n { \"$state\": \"/maintenance\", \"not\": true }\n]\n\n// Always / never\ntrue // always visible\nfalse // never visible\n```\n\nTypeScript helpers from `@json-render/core`:\n\n```typescript\nimport { visibility } from \"@json-render/core\";\n\nvisibility.when(\"/path\") // { $state: \"/path\" }\nvisibility.unless(\"/path\") // { $state: \"/path\", not: true }\nvisibility.eq(\"/path\", val) // { $state: \"/path\", eq: val }\nvisibility.neq(\"/path\", val) // { $state: \"/path\", neq: val }\nvisibility.and(cond1, cond2) // { $and: [cond1, cond2] }\nvisibility.always // true\nvisibility.never // false\n```\n\n## Dynamic Prop Expressions\n\nAny prop value can use data-driven expressions that resolve at render time. The renderer resolves these transparently before passing props to components.\n\n```json\n{\n \"type\": \"Badge\",\n \"props\": {\n \"label\": { \"$state\": \"/user/role\" },\n \"color\": {\n \"$cond\": { \"$state\": \"/user/role\", \"eq\": \"admin\" },\n \"$then\": \"red\",\n \"$else\": \"gray\"\n }\n }\n}\n```\n\nFor two-way binding, use `{ \"$bindState\": \"/path\" }` on the natural value prop. Inside repeat scopes, use `{ \"$bindItem\": \"field\" }` instead. Components receive resolved `bindings` with the state path for each bound prop.\n\nSee [@json-render/core](../core/README.md) for full expression syntax.\n\n## Built-in Actions\n\nThe `setState`, `pushState`, `removeState`, and `validateForm` actions are built into the Vue schema and handled automatically by `ActionProvider`. They are injected into AI prompts without needing to be declared in your catalog's `actions`. They update the state model, which triggers re-evaluation of visibility conditions and dynamic prop expressions:\n\n```json\n{\n \"type\": \"Button\",\n \"props\": { \"label\": \"Switch Tab\" },\n \"on\": {\n \"press\": {\n \"action\": \"setState\",\n \"params\": { \"statePath\": \"/activeTab\", \"value\": \"settings\" }\n }\n },\n \"children\": []\n}\n```\n\n## Component Props\n\nWhen using `defineRegistry`, components receive these props via their render function:\n\n```typescript\nimport type { Slots, VNode } from \"vue\";\n\ninterface ComponentContext {\n props: P; // Typed props from the catalog (expressions resolved)\n children?: VNode | VNode[]; // Rendered children (for container components)\n slots: Slots; // Vue-native slot functions\n emit: (event: string) => void; // Emit a named event (always defined)\n on: (event: string) => EventHandle; // Get event handle with metadata\n loading?: boolean; // Whether the parent is loading\n bindings?: Record; // State paths for $bindState/$bindItem expressions\n}\n\ninterface EventHandle {\n emit: () => void; // Fire the event\n shouldPreventDefault: boolean; // Whether any binding requested preventDefault\n bound: boolean; // Whether any handler is bound\n}\n```\n\nUse `emit(\"press\")` for simple event firing. Use `on(\"click\")` when you need to check metadata like `shouldPreventDefault` or `bound`:\n\n```typescript\nLink: ({ props, on }) => {\n const click = on(\"click\");\n return h(\"a\", {\n href: props.href,\n onClick: (e: MouseEvent) => {\n if (click.shouldPreventDefault) e.preventDefault();\n click.emit();\n },\n }, props.label);\n},\n```\n\n### `BaseComponentProps`\n\nFor building reusable component libraries that are not tied to a specific catalog, use the catalog-agnostic `BaseComponentProps` type:\n\n```typescript\nimport type { BaseComponentProps } from \"@json-render/vue\";\n\nconst Card = ({ props, children }: BaseComponentProps<{ title?: string }>) =>\n h(\"div\", null, [props.title, children]);\n```\n\n## Generate AI Prompts\n\n```typescript\nconst systemPrompt = catalog.prompt();\n// Returns detailed prompt with component/action descriptions\n```\n\n## Full Example\n\n```typescript\nimport { h } from \"vue\";\nimport { defineCatalog } from \"@json-render/core\";\nimport { schema } from \"@json-render/vue/schema\";\nimport { defineRegistry, Renderer, StateProvider } from \"@json-render/vue\";\nimport { z } from \"zod\";\n\nconst catalog = defineCatalog(schema, {\n components: {\n Greeting: {\n props: z.object({ name: z.string() }),\n description: \"Displays a greeting\",\n },\n },\n actions: {},\n});\n\nconst { registry } = defineRegistry(catalog, {\n components: {\n Greeting: ({ props }) => h(\"h1\", null, `Hello, ${props.name}!`),\n },\n});\n\nconst spec = {\n root: \"greeting-1\",\n elements: {\n \"greeting-1\": {\n type: \"Greeting\",\n props: { name: \"World\" },\n children: [],\n },\n },\n};\n\n// In your App.vue:\n// \n// \n// \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 (includes built-in actions: `setState`, `pushState`, `removeState`) |\n| `useStateStore` | Access state context (`state` is `ShallowRef`) |\n| `useStateValue` | Get single value from state |\n| `useActions` | Access actions context |\n| `useAction` | Get a single action dispatch function |\n| `createStateStore` | Create a framework-agnostic in-memory `StateStore` |\n\n### Types\n\n| Export | Purpose |\n|--------|---------|\n| `ComponentContext` | Typed component render function context (catalog-aware) |\n| `BaseComponentProps` | Catalog-agnostic base type for reusable component libraries |\n| `EventHandle` | Event handle with `emit()`, `shouldPreventDefault`, `bound` |\n| `ActionProviderProps` | Props for `ActionProvider` |\n| `ValidationProviderProps` | Props for `ValidationProvider` |\n| `ComponentFn` | Component render function type |\n| `SetState` | State setter type |\n| `StateModel` | State model type |\n| `StateStore` | Interface for plugging in external state management |\n\n## Differences from `@json-render/react`\n\nNested lists can set `repeat.statePath` to `{ \"$item\": \"field\" }` to iterate an array on the enclosing repeat item.\n\n| API | React | Vue | Note |\n|-----|-------|-----|------|\n| `useStateStore().state` | `StateModel` | `ShallowRef` | Vue reactivity; use `state.value` |\n| `children` type | `React.ReactNode` | `VNode \\| VNode[]` | Platform-specific |\n| `useBoundProp` | exported | exported | Same API; returns `[value, setValue]` |\n| Streaming hooks | `useUIStream`, `useChatUI` | `useUIStream`, `useChatUI` | Same API; returns Vue `Ref` values |\n","readmeFilename":"README.md"}