}` to the specified state path (defaults to `/formValidation`).\n\n## Component Props\n\nWhen using `defineRegistry`, components receive these props:\n\n```typescript\ninterface ComponentContext {\n props: P; // Typed props from the catalog (expressions resolved)\n children?: React.ReactNode; // Rendered children\n slots?: Record; // Rendered named slots\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 (e.g. bindings.value)\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 `children` for the catalog's `\"default\"` slot. Components with additional slots receive them by name:\n\n```tsx\nLayout: ({ children, slots }) => (\n \n \n {children}\n \n
\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```tsx\nLink: ({ props, on }) => {\n const click = on(\"click\");\n return (\n {\n if (click.shouldPreventDefault) e.preventDefault();\n click.emit();\n }}\n >\n {props.label}\n \n );\n},\n```\n\nUse `bindings?.value`, `bindings?.checked`, etc. with `useBoundProp()` for two-way bound form components.\n\n### `BaseComponentProps`\n\nFor building reusable component libraries that are not tied to a specific catalog (e.g. `@json-render/shadcn`), use the catalog-agnostic `BaseComponentProps` type:\n\n```typescript\nimport type { BaseComponentProps } from \"@json-render/react\";\n\nconst Card = ({ props, children }: BaseComponentProps<{ title?: string }>) => (\n {props.title}{children}
\n);\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```tsx\nimport { defineCatalog } from \"@json-render/core\";\nimport { schema } from \"@json-render/react/schema\";\nimport { defineRegistry, Renderer } from \"@json-render/react\";\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 }) => 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\nfunction App() {\n return ;\n}\n```\n\n## Key Exports\n\nNested lists can set `repeat.statePath` to `{ \"$item\": \"field\" }` to iterate an array on the enclosing repeat item.\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`, `validateForm`) |\n| `useStateStore` | Access state context |\n| `useStateValue` | Get single value from state |\n| `useBoundProp` | Two-way binding for `$bindState`/`$bindItem` expressions |\n| `useActions` | Access actions context |\n| `useAction` | Get a single action dispatch function |\n| `useUIStream` | Stream specs from an API endpoint |\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| `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","readmeFilename":"README.md"}