update header font

2026-10-02 12:00:58 +08:00 · 2026-02-22 15:42:42 -06:00
1324 changed files with 5552 additions and 141432 deletions
@@ -0,0 +1,13 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in the repository](https://github.com/changesets/changesets).
+
+## Adding a changeset
+
+To add a changeset, run `pnpm changeset` in the root of the repository. This will prompt you to select
+which packages have changed and what type of version bump (major, minor, or patch) should be applied.
+
+All `@json-render/*` packages are versioned together -- a changeset for any one of them will bump all
+packages to the same version.
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [
+    [
+      "@json-render/core",
+      "@json-render/react",
+      "@json-render/react-pdf",
+      "@json-render/shadcn",
+      "@json-render/react-native",
+      "@json-render/remotion",
+      "@json-render/codegen"
+    ]
+  ],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "privatePackages": {
+    "version": false,
+    "tag": false
+  }
+}
@@ -1,8 +0,0 @@
-{
-  "mcpServers": {
-    "json-render": {
-      "command": "npx",
-      "args": ["tsx", "examples/mcp/server.ts", "--stdio"]
-    }
-  }
-}
@@ -13,76 +13,34 @@ concurrency:
  cancel-in-progress: true

 jobs:
-  version-sync:
-    name: Version Sync Check
+  ci:
+    name: Lint, Type Check & Build
    runs-on: ubuntu-latest
+
    steps:
-      - uses: actions/checkout@v4
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
-          node-version-file: .node-version
-      - name: Check version sync
-        run: node scripts/check-version-sync.js
+          node-version: 20
+          cache: "pnpm"

-  lint:
-    name: Lint
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: .node-version
-          cache: pnpm
-      - run: pnpm install --frozen-lockfile
-      - run: pnpm lint
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile

-  test:
-    name: Test
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: .node-version
-          cache: pnpm
-      - run: pnpm install --frozen-lockfile
-      - name: Build packages
-        run: pnpm turbo run build --filter='./packages/*'
-      - run: pnpm test
+      - name: Lint
+        run: pnpm lint

-  docs:
-    name: Docs (${{ matrix.environment }})
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        environment: [production, preview]
-    env:
-      VERCEL_ENV: ${{ matrix.environment }}
-      DOCS_EXPECT_NOINDEX: ${{ matrix.environment == 'preview' && '1' || '0' }}
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: .node-version
-          cache: pnpm
-      - run: pnpm install --frozen-lockfile
-      - run: pnpm turbo run build --filter='web^...'
-      - run: pnpm --filter web build
-      - run: pnpm --filter web test:routes
+      - name: Type check
+        run: pnpm type-check

-  typecheck:
-    name: Type Check
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: .node-version
-          cache: pnpm
-      - run: pnpm install --frozen-lockfile
-      - run: pnpm type-check
+      - name: Test
+        run: pnpm test
+
+      - name: Build
+        run: pnpm build
@@ -6,74 +6,21 @@ on:
      - main
  workflow_dispatch:

-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: false
+concurrency: ${{ github.workflow }}-${{ github.ref }}

 permissions:
-  contents: read
+  contents: write
+  pull-requests: write

 jobs:
-  check-release:
-    name: Check for new version
+  release:
+    name: Release
    runs-on: ubuntu-latest
-    timeout-minutes: 5
-    outputs:
-      should_release: ${{ steps.check.outputs.should_release }}
-      needs_github_release: ${{ steps.check.outputs.needs_github_release }}
-      version: ${{ steps.check.outputs.version }}
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
        with:
-          node-version-file: .node-version
-
-      - name: Compare package.json version to npm and check GitHub release
-        id: check
-        run: |
-          LOCAL_VERSION=$(node -p "require('./packages/core/package.json').version")
-          echo "Local version: $LOCAL_VERSION"
-
-          NPM_VERSION=$(npm view @json-render/core version 2>/dev/null || echo "0.0.0")
-          echo "npm version: $NPM_VERSION"
-
-          if [ "$LOCAL_VERSION" != "$NPM_VERSION" ]; then
-            echo "Version changed: $NPM_VERSION -> $LOCAL_VERSION"
-            echo "should_release=true" >> "$GITHUB_OUTPUT"
-            echo "needs_github_release=true" >> "$GITHUB_OUTPUT"
-          else
-            echo "Version unchanged on npm, skipping build and publish"
-            echo "should_release=false" >> "$GITHUB_OUTPUT"
-
-            TAG="v$LOCAL_VERSION"
-            if gh release view "$TAG" &>/dev/null; then
-              echo "GitHub release $TAG exists"
-              echo "needs_github_release=false" >> "$GITHUB_OUTPUT"
-            else
-              echo "GitHub release $TAG is missing, will create it"
-              echo "needs_github_release=true" >> "$GITHUB_OUTPUT"
-            fi
-          fi
-          echo "version=$LOCAL_VERSION" >> "$GITHUB_OUTPUT"
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  publish:
-    name: Publish to npm
-    needs: check-release
-    if: needs.check-release.outputs.should_release == 'true'
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-    environment: Release
-    permissions:
-      contents: read
-      id-token: write
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
+          fetch-depth: 0

      - name: Install pnpm
        uses: pnpm/action-setup@v4
@@ -81,86 +28,20 @@ jobs:
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
-          node-version-file: .node-version
+          node-version: 20
          cache: pnpm
          registry-url: "https://registry.npmjs.org"

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

-      - name: Build packages
-        run: pnpm run build
-
-      - name: Publish all public packages
-        run: |
-          LOCAL_VERSION="${{ needs.check-release.outputs.version }}"
-          FAILED=""
-
-          publish_pkg() {
-            local dir="$1" name="$2"
-            REGISTRY_VERSION=$(npm view "$name" version 2>/dev/null || echo "0.0.0")
-            if [ "$LOCAL_VERSION" = "$REGISTRY_VERSION" ]; then
-              echo "$name@$LOCAL_VERSION already published, skipping"
-              return 0
-            fi
-            echo "Publishing $name@$LOCAL_VERSION..."
-            TARBALL=$(cd "$dir" && pnpm pack --pack-destination /tmp | tail -1)
-            if ! npm publish "$TARBALL" --provenance --access public; then
-              FAILED="$FAILED $name"
-            fi
-          }
-
-          for dir in packages/*/; do
-            PKG_NAME=$(node -p "try { const p = require('./$dir/package.json'); p.private ? '' : p.name } catch { '' }")
-            [ -z "$PKG_NAME" ] && continue
-            publish_pkg "$dir" "$PKG_NAME"
-          done
-
-          if [ -n "$FAILED" ]; then
-            echo "Failed to publish:$FAILED"
-            exit 1
-          fi
-
-  github-release:
-    name: Create GitHub Release
-    needs: [check-release, publish]
-    if: >-
-      always()
-      && needs.check-release.outputs.needs_github_release == 'true'
-      && (needs.publish.result == 'success' || needs.publish.result == 'skipped')
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    permissions:
-      contents: write
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Extract changelog entry
-        run: |
-          VERSION="${{ needs.check-release.outputs.version }}"
-          awk '/<!-- release:start -->/{found=1; next} /<!-- release:end -->/{found=0} found{print}' CHANGELOG.md > /tmp/release-notes.md
-
-          LINES=$(wc -l < /tmp/release-notes.md | tr -d ' ')
-          if [ "$LINES" -lt 2 ]; then
-            echo "Error: No release notes found between <!-- release:start --> and <!-- release:end --> markers in CHANGELOG.md"
-            exit 1
-          fi
-          echo "Extracted release notes for $VERSION ($LINES lines)"
-
-      - name: Create GitHub Release
-        run: |
-          VERSION="${{ needs.check-release.outputs.version }}"
-          TAG="v$VERSION"
-
-          if gh release view "$TAG" &>/dev/null; then
-            echo "Release $TAG already exists"
-          else
-            echo "Creating release $TAG..."
-            gh release create "$TAG" \
-              --title "$TAG" \
-              --target ${{ github.sha }} \
-              --notes-file /tmp/release-notes.md
-          fi
+      - name: Create Release Pull Request or Publish
+        uses: changesets/action@v1
+        with:
+          version: pnpm ci:version
+          publish: pnpm ci:publish
+          title: "chore: version packages"
+          commit: "chore: version packages"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_VERCEL_TOKEN_ELEVATED }}
@@ -4,7 +4,6 @@
 node_modules
 .pnp
 .pnp.js
-.pnpm-store/

 # Local env files
 .env*
@@ -28,9 +27,6 @@ out/
 build
 dist
 *.tsbuildinfo
-.svelte-kit/
-tsup.config.bundled_*.mjs
-next-env.d.ts


 # Debug
@@ -1 +0,0 @@
-24
@@ -1,9 +0,0 @@
-{
-  "servers": {
-    "json-render": {
-      "type": "stdio",
-      "command": "npx",
-      "args": ["tsx", "examples/mcp/server.ts", "--stdio"]
-    }
-  }
-}
@@ -26,22 +26,6 @@ This ensures we don't install outdated versions that may have incompatible types

 - Do not use emojis in code or UI
 - Use shadcn CLI to add shadcn/ui components: `pnpm dlx shadcn@latest add <component>`
- **Web app docs (`apps/web/`):** Never use Markdown table syntax (`| col | col |`). Always use HTML `<table>` with `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`. Markdown tables do not render correctly in the web app. Inside HTML table cells, curly braces must be escaped as JSX expressions (e.g. `<code>{'{ "$state": "/path" }'}</code>`) because MDX parses `{` as a JSX expression boundary.
-
-## AI SDK / AI Gateway
-
-When using the Vercel AI SDK (`ai` package) with AI Gateway, pass the model as a plain string identifier -- do not import a provider constructor:
-
-```ts
-import { streamText } from "ai";
-
-const result = streamText({
-  model: "anthropic/claude-haiku-4.5",
-  prompt: "...",
-});
-```
-
-This requires `AI_GATEWAY_API_KEY` to be set in the environment. See `tests/e2e/` for examples.

 ## Dev Servers

@@ -66,48 +50,12 @@ Do **not** add `--port` flags -- portless handles port assignment automatically.
 ## Workflow

 - Run `pnpm type-check` after each turn to ensure type safety
- Documentation lives in `apps/web/content/docs/` and uses Geistdocs frontmatter. Keep public `/docs` URLs, heading IDs, `lib/page-titles.ts`, `lib/docs-navigation.ts`, and the content `meta.json` files in sync.
- For docs routing or infrastructure changes, run `pnpm turbo run build --filter='web^...'`, `pnpm --filter web build`, and `pnpm --filter web test:routes`. Existing-page source and Markdown parity are covered by `apps/web/tests/fixtures/docs-baseline.json`; update fixtures only when intentionally changing the documented content.
 - When making user-facing changes (new packages, API changes, new features, renamed exports, changed behavior), update the relevant documentation:
  - Package `README.md` files in `packages/*/README.md`
  - Root `README.md` (if packages table, install commands, or examples are affected)
-  - Web app docs in `apps/web/` (if guides, API references, or examples need updating)
  - Skills in `skills/*/SKILL.md` (if the package has a corresponding skill)
  - `AGENTS.md` (if workflow or conventions change)

-## Releasing
-
-Releases are manual, single-PR affairs. The maintainer controls the changelog voice and format.
-
-All public `@json-render/*` packages share the same version. The canonical version lives in `packages/core/package.json`.
-
-### Preparing a release
-
-When asked to prepare a release (e.g. "prepare v0.17.0"):
-
-1. Create a branch (e.g. `prepare-v0.17.0`)
-2. Bump the version in `packages/core/package.json`
-3. Run `pnpm run version:sync` to update all other `@json-render/*` packages
-4. Write the changelog entry in `CHANGELOG.md`, wrapped in `<!-- release:start -->` and `<!-- release:end -->` markers (move the markers from the previous entry to the new one)
-5. **Fill documentation gaps** — every public package should have:
-   - A row in the root `README.md` packages table
-   - A renderer section in the root `README.md` (if it's a renderer)
-   - An API reference page at `apps/web/content/docs/api/<name>.mdx`
-   - An entry in `apps/web/lib/page-titles.ts` and `apps/web/lib/docs-navigation.ts`
-   - An entry in the docs-chat system prompt (`apps/web/app/api/docs-chat/route.ts`)
-   - A skill at `skills/<name>/SKILL.md`
-   - A `packages/<name>/README.md`
-6. **Run `pnpm type-check`** after all changes to verify nothing is broken
-7. Open a PR and merge to `main`
-
-CI compares the `@json-render/core` version to what's on npm. If it differs, it builds, publishes all public packages, and creates the GitHub release automatically. The release body is extracted from the content between the markers.
-
-### Scripts
-
- `pnpm run version:sync` — sync all `@json-render/*` package versions to match `@json-render/core`
- `pnpm run version:check` — verify all versions are in sync (runs in CI)
- `pnpm run ci:publish` — build all packages and publish to npm (CI only)
-
 <!-- opensrc:start -->

 ## Source Code Reference
@@ -1,110 +0,0 @@
-# Changelog
-
-## 0.21.0
-
-<!-- release:start -->
-
-### New Features
-
- **TanStack Start renderer:** Added `@json-render/tanstack-start` for JSON-defined applications with file-based routes, reusable layouts, SSR loaders, head metadata, prerender paths, client navigation, and route fallbacks (#334)
- **Experimental Jev composition:** Added `experimental_composeSpec` and `experimental_createEvaluator` to compose validated specs from app-owned candidates, plus a Jev model option and iterative composition editing in the playground
-
-### Improvements
-
- **Vue named slots:** Vue registries now support catalog-declared named slots alongside the default `children` slot (#323)
- **React streaming stability:** Stabilized streamed React renders and added coverage for incomplete streamed props and nested prop identities (#325)
- **Documentation and project status:** Expanded renderer, Jev, and package documentation and added Labs status badges to the project README
-
-### Contributors
-
- @ctate
- @Railly
-<!-- release:end -->
-
-## 0.20.0
-
-### New Features
-
- **Named slots for React:** Components can declare named slots such as `header` and `footer`, while `children` remains the default slot. Slots are preserved through validation, streaming, nested conversion, code export, playground views, and Devtools navigation (#320). Built from the original contribution by @wotnak in #105
- **Nested repeats:** `repeat.statePath` now accepts item-relative paths such as `{ "$item": "employees" }`, enabling nested data rendering across React, React Native, React Email, React PDF, Image, Ink, Solid, Svelte, and Vue (#319). Built from the original contribution by @tmchow in #256
- **Harness chat example:** Added a complete Next.js example using the AI SDK 7 harness adapter, agent delegation, sandbox transport, and json-render components (#302)
-
-### Bug Fixes
-
- **Chained action params:** Named `onSuccess` and `onError` actions now receive their configured `params` across core and all renderer bridges (#307)
- **Consistent optional visibility:** Element `visible` fields now remain optional across Zod 4 versions, while prompts explicitly require `children` arrays for every element (#299)
- **Spec validation and autofix:** Dangling child references are pruned, malformed visibility conditions are reported, and repeated items can be filtered safely (#300)
-
-### Improvements
-
- **Release toolchain hardening:** The workspace now requires Node.js 24 and pnpm 11, enforces package engine checks, and applies a minimum package release age (#293)
-
-### Breaking Changes
-
- Custom renderer bridges that implement the core `executeAction` callback must now accept an `ActionBinding` instead of a bare action name. This exposes chained action params to custom integrations at compile time (#307)
-
-### Contributors
-
- @ctate
- @Railly
- @tmchow
- @wotnak
-
-## 0.19.0
-
-### New Features
-
- **Custom directives API** — `@json-render/core` now supports custom directives via `defineDirective`, letting you declare new JSON shapes (like `$format`, `$math`) that resolve to computed values at render time. Directives compose naturally — nest `$format` over `$math` over `$state` and they resolve inside-out. All four renderers (React, Vue, Svelte, Solid) have built-in directive resolution (#279)
- **`@json-render/directives`** — New package shipping seven ready-made directives: `$format` (date, currency, number, percent via `Intl`), `$math` (add, subtract, multiply, divide, mod, min, max, round, floor, ceil, abs), `$concat`, `$count`, `$truncate`, `$pluralize`, and `$join`. Also exports `createI18nDirective` for `$t` translation keys with `{{param}}` interpolation, and `standardDirectives` for one-line registration (#279)
-
-### Improvements
-
- **Example READMEs** — Added documentation to the chat, dashboard, game-engine, and no-ai examples (#277)
-
-### Contributors
-
- @ctate
-
-## 0.18.0
-
-### New Features
-
- **Devtools** — Five new packages for inspecting json-render apps in the browser: `@json-render/devtools` (framework-agnostic core), plus `@json-render/devtools-react`, `@json-render/devtools-vue`, `@json-render/devtools-svelte`, and `@json-render/devtools-solid` adapters. Drop `<JsonRenderDevtools />` into your app to get a shadow-DOM-isolated panel with six tabs (Spec, State, Actions, Stream, Catalog, Pick), a DOM picker that maps clicked elements back to spec keys via `data-jr-key`, a capped event store, and server-side stream tap utilities. Floating toggle or `Cmd`/`Ctrl` + `Shift` + `J`, tree-shakes to `null` in production (#273)
- **Devtools example** — New `examples/devtools` Next.js demo showing the full devtools panel wired up to an AI chat endpoint and a component catalog (#273)
- **Action observer and devtools flag in core** — `@json-render/core` now exposes an action observer and a devtools enablement flag that adapters use to mirror actions and stream events into the panel (#273)
-
-### Bug Fixes
-
- **Zod 4 schema formatting** — `formatZodType` now correctly handles `z.record()`, `z.default()`, and `z.literal()` types from Zod 4, which previously produced incorrect or empty output in generated prompts and schemas (#239)
-
-### Improvements
-
- **Zod 4 test coverage** — Added unit tests for `formatZodType` covering record, default, and literal types to guard against regressions (#272)
-
-### Contributors
-
- @ctate
- @mvanhorn
-
-## 0.17.0
-
-### New Features
-
- **Gaussian Splatting** — Added `GaussianSplat` component to `@json-render/react-three-fiber`, bringing the component count to 20. Composable with all existing R3F components (lights, controls, post-processing) via drei's Splat loader (#259)
- **Standalone gsplat example** — Experimental demo app showcasing Gaussian Splatting with gsplat.js (no Three.js dependency), featuring scene selector, live JSON spec viewer, and progress indicator (#259)
- **R3F gsplat example** — Demo app with five scenes: splat showroom, splat with primitives, multi-splat, post-processing effects, and animated floating splat (#259)
-
-### Improved
-
- **AI output quality** — Improved prompt output and schema generation for more reliable AI-generated specs (#268)
-
-### Contributors
-
- @ctate
- @willmanzoli
-
-## 0.16.0
-
-### Improved
-
- **Release process** — Switched from Changesets to a manual single-PR release workflow with changelog markers and automatic npm publish on version bump
@@ -4,38 +4,16 @@

 Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output.

-<p>
-  <a href="https://vercel.com/labs#labs-products"><img alt="Vercel Labs Product" src="https://img.shields.io/badge/LABS-PRODUCT-0a0a0a.svg?style=for-the-badge&amp;logo=Vercel&amp;labelColor=000000" height="28"></a>
-  <a href="https://www.npmjs.com/package/@json-render/core"><img alt="npm version: @json-render/core" src="https://img.shields.io/npm/v/%40json-render%2Fcore.svg?style=for-the-badge&amp;labelColor=000000" height="28"></a>
-  <a href="https://github.com/vercel-labs/json-render/blob/main/LICENSE"><img alt="License: Apache-2.0" src="https://img.shields.io/github/license/vercel-labs/json-render.svg?style=for-the-badge&amp;labelColor=000000" height="28"></a>
-  <a href="https://www.npmjs.com/package/@json-render/core"><img alt="npm downloads per month: @json-render/core" src="https://img.shields.io/npm/dm/%40json-render%2Fcore.svg?style=for-the-badge&amp;labelColor=000000&amp;label=npm%20downloads" height="28"></a>
-</p>
-
 ```bash
-# for React
 npm install @json-render/core @json-render/react
-# for React with pre-built shadcn/ui components
+# pre-built shadcn/ui components
 npm install @json-render/shadcn
-# or for React Native
+# or for mobile
 npm install @json-render/core @json-render/react-native
 # or for video
 npm install @json-render/core @json-render/remotion
 # or for PDF documents
 npm install @json-render/core @json-render/react-pdf
-# or for HTML email
-npm install @json-render/core @json-render/react-email @react-email/components @react-email/render
-# or for Vue
-npm install @json-render/core @json-render/vue
-# or for Svelte
-npm install @json-render/core @json-render/svelte
-# or for SolidJS
-npm install @json-render/core @json-render/solid
-# or for terminal UIs
-npm install @json-render/core @json-render/ink ink react
-# or for full Next.js apps (routes, layouts, SSR, metadata)
-npm install @json-render/core @json-render/react @json-render/next
-# or for 3D scenes (and gaussian splatting via the GaussianSplat component)
-npm install @json-render/core @json-render/react-three-fiber @react-three/fiber @react-three/drei three
 ```

 ## Why json-render?
@@ -45,7 +23,7 @@ json-render is a **Generative UI** framework: AI generates interfaces from natur
 - **Guardrailed** - AI can only use components in your catalog
 - **Predictable** - JSON output matches your schema, every time
 - **Fast** - Stream and render progressively as the model responds
- **Cross-Platform** - React, Vue, Svelte, Solid (web), React Native (mobile) from the same catalog
+- **Cross-Platform** - React (web) and React Native (mobile) from the same catalog
 - **Batteries Included** - 36 pre-built shadcn/ui components ready to use

 ## Quick Start
@@ -54,7 +32,7 @@ json-render is a **Generative UI** framework: AI generates interfaces from natur

 ```typescript
 import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/react/schema";
+import { schema } from "@json-render/react";
 import { z } from "zod";

 const catalog = defineCatalog(schema, {
@@ -106,7 +84,9 @@ const { registry } = defineRegistry(catalog, {
      </div>
    ),
    Button: ({ props, emit }) => (
-      <button onClick={() => emit("press")}>{props.label}</button>
+      <button onClick={() => emit("press")}>
+        {props.label}
+      </button>
    ),
  },
 });
@@ -126,37 +106,14 @@ function Dashboard({ spec }) {

 ## Packages

-| Package                     | Description                                                            |
-| --------------------------- | ---------------------------------------------------------------------- |
-| `@json-render/core`         | Schemas, catalogs, AI prompts, dynamic props, SpecStream utilities     |
-| `@json-render/react`        | React renderer, contexts, hooks                                        |
-| `@json-render/vue`          | Vue 3 renderer, composables, providers                                 |
-| `@json-render/svelte`       | Svelte 5 renderer with runes-based reactivity                          |
-| `@json-render/solid`        | SolidJS renderer with fine-grained reactive contexts                   |
-| `@json-render/shadcn`       | 36 pre-built shadcn/ui components (Radix UI + Tailwind CSS)            |
-| `@json-render/shadcn-svelte`| 36 pre-built shadcn-svelte components (Svelte 5 + Tailwind CSS)        |
-| `@json-render/react-three-fiber` | React Three Fiber renderer for 3D scenes (20 built-in components, including GaussianSplat)  |
-| `@json-render/react-native` | React Native renderer with standard mobile components                  |
-| `@json-render/next`         | Next.js renderer — JSON becomes full apps with routes, layouts, SSR    |
-| `@json-render/tanstack-start` | TanStack Start renderer — full apps with routes, layouts, SSR, and head metadata |
-| `@json-render/remotion`     | Remotion video renderer, timeline schema                               |
-| `@json-render/react-pdf`    | React PDF renderer for generating PDF documents from specs             |
-| `@json-render/react-email`  | React Email renderer for HTML/plain-text emails from specs             |
-| `@json-render/ink`          | Ink terminal renderer with built-in components for interactive TUIs.   |
-| `@json-render/image`        | Image renderer for SVG/PNG output (OG images, social cards) via Satori |
-| `@json-render/directives`   | Pre-built custom directives — $format, $math, $concat, $count, $truncate, $pluralize, $join, $t (i18n) |
-| `@json-render/codegen`      | Utilities for generating code from json-render UI trees                |
-| `@json-render/devtools`     | Framework-agnostic devtools core — panel UI, event store, picker, stream taps |
-| `@json-render/devtools-react`   | React adapter for `@json-render/devtools` (drop-in `<JsonRenderDevtools />`)     |
-| `@json-render/devtools-vue`     | Vue adapter for `@json-render/devtools`                                           |
-| `@json-render/devtools-svelte`  | Svelte adapter for `@json-render/devtools`                                        |
-| `@json-render/devtools-solid`   | SolidJS adapter for `@json-render/devtools`                                       |
-| `@json-render/redux`        | Redux / Redux Toolkit adapter for `StateStore`                         |
-| `@json-render/zustand`      | Zustand adapter for `StateStore`                                       |
-| `@json-render/jotai`        | Jotai adapter for `StateStore`                                         |
-| `@json-render/xstate`       | XState Store (atom) adapter for `StateStore`                           |
-| `@json-render/mcp`          | MCP Apps integration for Claude, ChatGPT, Cursor, VS Code              |
-| `@json-render/yaml`         | YAML wire format with streaming parser, edit modes, AI SDK transform   |
+| Package | Description |
+|---------|-------------|
+| `@json-render/core` | Schemas, catalogs, AI prompts, dynamic props, SpecStream utilities |
+| `@json-render/react` | React renderer, contexts, hooks |
+| `@json-render/shadcn` | 36 pre-built shadcn/ui components (Radix UI + Tailwind CSS) |
+| `@json-render/react-native` | React Native renderer with standard mobile components |
+| `@json-render/remotion` | Remotion video renderer, timeline schema |
+| `@json-render/react-pdf` | React PDF renderer for generating PDF documents from specs |

 ## Renderers

@@ -164,7 +121,7 @@ function Dashboard({ spec }) {

 ```tsx
 import { defineRegistry, Renderer } from "@json-render/react";
-import { schema } from "@json-render/react/schema";
+import { schema } from "@json-render/react";

 // Flat spec format (root key + elements map)
 const spec = {
@@ -185,72 +142,14 @@ const spec = {

 // defineRegistry creates a type-safe component registry
 const { registry } = defineRegistry(catalog, { components });
-<Renderer spec={spec} registry={registry} />;
-```
-
-### Vue (UI)
-
-```typescript
-import { h } from "vue";
-import { defineRegistry, Renderer } from "@json-render/vue";
-import { schema } from "@json-render/vue/schema";
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: ({ props, children }) =>
-      h("div", { class: "card" }, [h("h3", null, props.title), children]),
-    Button: ({ props, emit }) =>
-      h("button", { onClick: () => emit("press") }, props.label),
-  },
-});
-
-// In your Vue component template:
-// <Renderer :spec="spec" :registry="registry" />
-```
-
-### Svelte (UI)
-
-```typescript
-import { defineRegistry, Renderer } from "@json-render/svelte";
-import { schema } from "@json-render/svelte/schema";
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: ({ props, children }) => /* Svelte 5 snippet */,
-    Button: ({ props, emit }) => /* Svelte 5 snippet */,
-  },
-});
-
-// In your Svelte component:
-// <Renderer spec={spec} registry={registry} />
-```
-
-### Solid (UI)
-
-```tsx
-import { defineRegistry, Renderer } from "@json-render/solid";
-import { schema } from "@json-render/solid/schema";
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: (renderProps) => <div>{renderProps.children}</div>,
-    Button: (renderProps) => (
-      <button onClick={() => renderProps.emit("press")}>
-        {renderProps.element.props.label as string}
-      </button>
-    ),
-  },
-});
-
-<Renderer spec={spec} registry={registry} />;
+<Renderer spec={spec} registry={registry} />
 ```

 ### shadcn/ui (Web)

 ```tsx
 import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/react/schema";
-import { defineRegistry, Renderer } from "@json-render/react";
+import { schema, defineRegistry, Renderer } from "@json-render/react";
 import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
 import { shadcnComponents } from "@json-render/shadcn";

@@ -275,7 +174,7 @@ const { registry } = defineRegistry(catalog, {
  },
 });

-<Renderer spec={spec} registry={registry} />;
+<Renderer spec={spec} registry={registry} />
 ```

 ### React Native (Mobile)
@@ -296,40 +195,23 @@ const catalog = defineCatalog(schema, {
 });

 const { registry } = defineRegistry(catalog, { components: {} });
-<Renderer spec={spec} registry={registry} />;
+<Renderer spec={spec} registry={registry} />
 ```

 ### Remotion (Video)

 ```tsx
 import { Player } from "@remotion/player";
-import {
-  Renderer,
-  schema,
-  standardComponentDefinitions,
-} from "@json-render/remotion";
+import { Renderer, schema, standardComponentDefinitions } from "@json-render/remotion";

 // Timeline spec format
 const spec = {
-  composition: {
-    id: "video",
-    fps: 30,
-    width: 1920,
-    height: 1080,
-    durationInFrames: 300,
-  },
+  composition: { id: "video", fps: 30, width: 1920, height: 1080, durationInFrames: 300 },
  tracks: [{ id: "main", name: "Main", type: "video", enabled: true }],
  clips: [
-    {
-      id: "clip-1",
-      trackId: "main",
-      component: "TitleCard",
-      props: { title: "Hello" },
-      from: 0,
-      durationInFrames: 90,
-    },
+    { id: "clip-1", trackId: "main", component: "TitleCard", props: { title: "Hello" }, from: 0, durationInFrames: 90 }
  ],
-  audio: { tracks: [] },
+  audio: { tracks: [] }
 };

 <Player
@@ -339,7 +221,7 @@ const spec = {
  fps={spec.composition.fps}
  compositionWidth={spec.composition.width}
  compositionHeight={spec.composition.height}
-/>;
+/>
 ```

 ### React PDF (Documents)
@@ -350,11 +232,7 @@ import { renderToBuffer } from "@json-render/react-pdf";
 const spec = {
  root: "doc",
  elements: {
-    doc: {
-      type: "Document",
-      props: { title: "Invoice" },
-      children: ["page-1"],
-    },
+    doc: { type: "Document", props: { title: "Invoice" }, children: ["page-1"] },
    "page-1": {
      type: "Page",
      props: { size: "A4" },
@@ -368,14 +246,8 @@ const spec = {
    "table-1": {
      type: "Table",
      props: {
-        columns: [
-          { header: "Item", width: "60%" },
-          { header: "Price", width: "40%", align: "right" },
-        ],
-        rows: [
-          ["Widget A", "$10.00"],
-          ["Widget B", "$25.00"],
-        ],
+        columns: [{ header: "Item", width: "60%" }, { header: "Price", width: "40%", align: "right" }],
+        rows: [["Widget A", "$10.00"], ["Widget B", "$25.00"]],
      },
      children: [],
    },
@@ -386,303 +258,6 @@ const spec = {
 const buffer = await renderToBuffer(spec);
 ```

-### React Email (Email)
-
-```typescript
-import { renderToHtml } from "@json-render/react-email";
-import { schema, standardComponentDefinitions } from "@json-render/react-email";
-import { defineCatalog } from "@json-render/core";
-
-const catalog = defineCatalog(schema, {
-  components: standardComponentDefinitions,
-});
-
-const spec = {
-  root: "html-1",
-  elements: {
-    "html-1": {
-      type: "Html",
-      props: { lang: "en", dir: "ltr" },
-      children: ["head-1", "body-1"],
-    },
-    "head-1": { type: "Head", props: {}, children: [] },
-    "body-1": {
-      type: "Body",
-      props: { style: { backgroundColor: "#f6f9fc" } },
-      children: ["container-1"],
-    },
-    "container-1": {
-      type: "Container",
-      props: {
-        style: { maxWidth: "600px", margin: "0 auto", padding: "20px" },
-      },
-      children: ["heading-1", "text-1"],
-    },
-    "heading-1": { type: "Heading", props: { text: "Welcome" }, children: [] },
-    "text-1": {
-      type: "Text",
-      props: { text: "Thanks for signing up." },
-      children: [],
-    },
-  },
-};
-
-const html = await renderToHtml(spec);
-```
-
-### Image (SVG/PNG)
-
-```typescript
-import { renderToPng } from "@json-render/image/render";
-
-const spec = {
-  root: "frame",
-  elements: {
-    frame: {
-      type: "Frame",
-      props: { width: 1200, height: 630, backgroundColor: "#1a1a2e" },
-      children: ["heading"],
-    },
-    heading: {
-      type: "Heading",
-      props: { text: "Hello World", level: "h1", color: "#ffffff" },
-      children: [],
-    },
-  },
-};
-
-// Render to PNG (requires @resvg/resvg-js)
-const png = await renderToPng(spec, { fonts });
-
-// Or render to SVG string
-import { renderToSvg } from "@json-render/image/render";
-const svg = await renderToSvg(spec, { fonts });
-```
-
-### Three.js (3D)
-
-```tsx
-import { defineCatalog } from "@json-render/core";
-import { schema, defineRegistry } from "@json-render/react";
-import {
-  threeComponentDefinitions,
-  threeComponents,
-  ThreeCanvas,
-} from "@json-render/react-three-fiber";
-
-const catalog = defineCatalog(schema, {
-  components: {
-    Box: threeComponentDefinitions.Box,
-    Sphere: threeComponentDefinitions.Sphere,
-    AmbientLight: threeComponentDefinitions.AmbientLight,
-    DirectionalLight: threeComponentDefinitions.DirectionalLight,
-    GaussianSplat: threeComponentDefinitions.GaussianSplat,
-    OrbitControls: threeComponentDefinitions.OrbitControls,
-  },
-  actions: {},
-});
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Box: threeComponents.Box,
-    Sphere: threeComponents.Sphere,
-    AmbientLight: threeComponents.AmbientLight,
-    DirectionalLight: threeComponents.DirectionalLight,
-    GaussianSplat: threeComponents.GaussianSplat,
-    OrbitControls: threeComponents.OrbitControls,
-  },
-});
-
-<ThreeCanvas
-  spec={spec}
-  registry={registry}
-  shadows
-  camera={{ position: [5, 5, 5], fov: 50 }}
-  style={{ width: "100%", height: "100vh" }}
-/>;
-```
-
-### Next.js (Full Apps)
-
-```typescript
-import type { NextAppSpec } from "@json-render/next";
-import { createNextApp } from "@json-render/next/server";
-import { NextAppProvider } from "@json-render/next";
-
-const spec: NextAppSpec = {
-  metadata: { title: { default: "My App", template: "%s | My App" } },
-  layouts: {
-    main: {
-      root: "shell",
-      elements: {
-        shell: { type: "Container", props: {}, children: ["nav", "slot"] },
-        nav: { type: "NavBar", props: {}, children: [] },
-        slot: { type: "Slot", props: {}, children: [] },
-      },
-    },
-  },
-  routes: {
-    "/": {
-      layout: "main",
-      metadata: { title: "Home" },
-      page: {
-        root: "hero",
-        elements: {
-          hero: { type: "Card", props: { title: "Welcome" }, children: [] },
-        },
-      },
-    },
-  },
-};
-
-// Server: creates Page, generateMetadata, generateStaticParams
-const app = createNextApp({ spec });
-
-// Client: wrap your layout with NextAppProvider
-// <NextAppProvider registry={registry} handlers={handlers}>
-//   {children}
-// </NextAppProvider>
-```
-
-### TanStack Start (Full Apps)
-
-```tsx
-import { createFileRoute, notFound } from "@tanstack/react-router";
-import {
-  PageRenderer,
-  StartErrorBoundary,
-  StartLoading,
-  StartNotFound,
-  type StartAppSpec,
-} from "@json-render/tanstack-start";
-import { createStartApp } from "@json-render/tanstack-start/server";
-
-const spec: StartAppSpec = {
-  metadata: { title: { default: "My App", template: "%s | My App" } },
-  routes: {
-    "/": {
-      metadata: { title: "Home" },
-      page: {
-        root: "hero",
-        elements: {
-          hero: { type: "Card", props: { title: "Welcome" }, children: [] },
-        },
-      },
-    },
-  },
-};
-
-const { getPageData, getHead } = createStartApp({ spec });
-
-export const Route = createFileRoute("/$")({
-  loader: async ({ location }) => {
-    const data = await getPageData({ pathname: location.pathname });
-    if (!data) throw notFound();
-    return data;
-  },
-  head: ({ match }) => getHead({ pathname: match.pathname }),
-  component: () => <PageRenderer {...Route.useLoaderData()} />,
-  pendingComponent: StartLoading,
-  errorComponent: StartErrorBoundary,
-  notFoundComponent: StartNotFound,
-});
-```
-
-Wrap the root route's outlet with `<StartAppProvider spec={spec}>` so route
-fallback components can resolve the current route. Pass named `$computed`
-implementations through its `functions` prop.
-
-### shadcn-svelte (Svelte)
-
-```typescript
-import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/svelte/schema";
-import { defineRegistry, Renderer } from "@json-render/svelte";
-import { shadcnComponentDefinitions } from "@json-render/shadcn-svelte/catalog";
-import { shadcnComponents } from "@json-render/shadcn-svelte";
-
-const catalog = defineCatalog(schema, {
-  components: {
-    Card: shadcnComponentDefinitions.Card,
-    Stack: shadcnComponentDefinitions.Stack,
-    Heading: shadcnComponentDefinitions.Heading,
-    Button: shadcnComponentDefinitions.Button,
-  },
-  actions: {},
-});
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: shadcnComponents.Card,
-    Stack: shadcnComponents.Stack,
-    Heading: shadcnComponents.Heading,
-    Button: shadcnComponents.Button,
-  },
-});
-
-// In your Svelte component:
-// <Renderer spec={spec} registry={registry} />
-```
-
-### Devtools
-
-Drop-in inspector panel for any json-render app. Spec tree, state editor, action log, stream log, catalog browser, DOM picker.
-
-```tsx
-// React
-import { JsonRenderDevtools } from "@json-render/devtools-react";
-
-<JSONUIProvider registry={registry} handlers={handlers}>
-  <Renderer spec={spec} registry={registry} />
-  <JsonRenderDevtools spec={spec} catalog={catalog} messages={messages} />
-</JSONUIProvider>;
-```
-
-Floating toggle appears bottom-right. Hotkey: `Ctrl`/`Cmd` + `Shift` + `J`. Tree-shakes to `null` in production.
-
-Available for React, Vue, Svelte, and Solid — swap `@json-render/devtools-react` for the adapter that matches your renderer.
-
-### Ink (Terminal)
-
-```tsx
-import { defineCatalog } from "@json-render/core";
-import {
-  schema,
-  standardComponentDefinitions,
-  standardActionDefinitions,
-  defineRegistry,
-  Renderer,
-  JSONUIProvider,
-} from "@json-render/ink";
-
-const catalog = defineCatalog(schema, {
-  components: { ...standardComponentDefinitions },
-  actions: standardActionDefinitions,
-});
-
-const { registry } = defineRegistry(catalog, { components: {} });
-
-const spec = {
-  root: "card-1",
-  elements: {
-    "card-1": {
-      type: "Card",
-      props: { title: "Status" },
-      children: ["status-1"],
-    },
-    "status-1": {
-      type: "StatusLine",
-      props: { label: "Build", status: "success" },
-      children: [],
-    },
-  },
-};
-
-<JSONUIProvider initialState={{}}>
-  <Renderer spec={spec} registry={registry} />
-</JSONUIProvider>;
-```
-
 ## Features

 ### Streaming (SpecStream)
@@ -732,26 +307,16 @@ Any prop value can be data-driven using expressions:
 {
  "type": "Icon",
  "props": {
-    "name": {
-      "$cond": { "$state": "/activeTab", "eq": "home" },
-      "$then": "home",
-      "$else": "home-outline"
-    },
-    "color": {
-      "$cond": { "$state": "/activeTab", "eq": "home" },
-      "$then": "#007AFF",
-      "$else": "#8E8E93"
-    }
+    "name": { "$cond": { "$state": "/activeTab", "eq": "home" }, "$then": "home", "$else": "home-outline" },
+    "color": { "$cond": { "$state": "/activeTab", "eq": "home" }, "$then": "#007AFF", "$else": "#8E8E93" }
  }
 }
 ```

-Expression forms:
+Two expression forms:

 - **`{ "$state": "/state/key" }`** - reads a value from the state model
- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** - evaluates a condition and picks a branch
- **`{ "$template": "Hello, ${/user/name}!" }`** - interpolates state values into strings
- **`{ "$computed": "fn", "args": { ... } }`** - calls a registered function with resolved args
+- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** - evaluates a condition (same syntax as visibility conditions) and picks a branch

 ### Actions

@@ -760,38 +325,13 @@ Components can trigger actions, including the built-in `setState` action:
 ```json
 {
  "type": "Pressable",
-  "props": {
-    "action": "setState",
-    "actionParams": { "statePath": "/activeTab", "value": "home" }
-  },
+  "props": { "action": "setState", "actionParams": { "statePath": "/activeTab", "value": "home" } },
  "children": ["home-icon"]
 }
 ```

 The `setState` action updates the state model directly, which re-evaluates visibility conditions and dynamic prop expressions.

-### State Watchers
-
-React to state changes by triggering actions:
-
-```json
-{
-  "type": "Select",
-  "props": {
-    "value": { "$bindState": "/form/country" },
-    "options": ["US", "Canada", "UK"]
-  },
-  "watch": {
-    "/form/country": {
-      "action": "loadCities",
-      "params": { "country": { "$state": "/form/country" } }
-    }
-  }
-}
-```
-
-`watch` is a top-level field on elements (sibling of `type`/`props`/`children`). Watchers fire when the watched value changes, not on initial render.
-
 ---

 ## Demo
@@ -805,16 +345,9 @@ pnpm dev

 - http://json-render.localhost:1355 - Docs & Playground
 - http://dashboard-demo.json-render.localhost:1355 - Example Dashboard
- http://react-email-demo.json-render.localhost:1355 - React Email Example
 - http://remotion-demo.json-render.localhost:1355 - Remotion Video Example
 - Chat Example: run `pnpm dev` in `examples/chat`
- [Experimental Jev composition](https://json-render.dev/docs/jev): use `experimental_composeSpec` and `experimental_createEvaluator` from core with your own catalog, or select **Jev (Experimental)** in `/playground`. Unreleased; source-build instructions are in the guide.
- Svelte Example: run `pnpm dev` in `examples/svelte` or `examples/svelte-chat`
- Vue Example: run `pnpm dev` in `examples/vue`
- Vite Renderers (React + Vue + Svelte + Solid): run `pnpm dev` in `examples/vite-renderers`
 - React Native example: run `npx expo start` in `examples/react-native`
- Gaussian Splatting (R3F): run `pnpm dev` in `examples/react-three-fiber-gsplat`
- Gaussian Splatting (experimental standalone gsplat.js demo): run `pnpm dev` in `examples/gsplat`

 ## How It Works

@@ -823,7 +356,7 @@ flowchart LR
    A[User Prompt] --> B[AI + Catalog]
    B --> C[JSON Spec]
    C --> D[Renderer]
-
+    
    B -.- E([guardrailed])
    C -.- F([predictable])
    D -.- G([streamed])
@@ -3,10 +3,6 @@
 # For local development, get your key from https://vercel.com/ai-gateway
 AI_GATEWAY_API_KEY=

-# Dedicated AI Gateway key for the experimental Jev playground option
-# Required locally and on Vercel; no fallback to AI_GATEWAY_API_KEY
-JEV_AI_GATEWAY_API_KEY=
-
 # AI Model Configuration
 # Override the default model used for UI generation
 # Default: anthropic/claude-haiku-4.5
@@ -11,7 +11,6 @@

 # next.js
 /.next/
-/.source/
 /out/

 # production
@@ -1,104 +0,0 @@
-# web
-
-## 0.1.11
-
-### Patch Changes
-
- Updated dependencies [519a538]
-  - @json-render/core@0.16.0
-  - @json-render/codegen@0.16.0
-  - @json-render/react@0.16.0
-  - @json-render/yaml@0.16.0
-
-## 0.1.10
-
-### Patch Changes
-
- Updated dependencies [bf3a7ec]
-  - @json-render/core@0.15.0
-  - @json-render/codegen@0.15.0
-  - @json-render/react@0.15.0
-  - @json-render/yaml@0.15.0
-
-## 0.1.9
-
-### Patch Changes
-
- Updated dependencies [43b7515]
-  - @json-render/core@0.14.1
-  - @json-render/codegen@0.14.1
-  - @json-render/react@0.14.1
-  - @json-render/yaml@0.14.1
-
-## 0.1.8
-
-### Patch Changes
-
- Updated dependencies [a8afd8b]
-  - @json-render/core@0.14.0
-  - @json-render/yaml@0.14.0
-  - @json-render/codegen@0.14.0
-  - @json-render/react@0.14.0
-
-## 0.1.7
-
-### Patch Changes
-
- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/codegen@0.13.0
-  - @json-render/react@0.13.0
-
-## 0.1.6
-
-### Patch Changes
-
- Updated dependencies [54a1ecf]
-  - @json-render/core@0.12.1
-  - @json-render/codegen@0.12.1
-  - @json-render/react@0.12.1
-
-## 0.1.5
-
-### Patch Changes
-
- Updated dependencies [63c339b]
-  - @json-render/core@0.12.0
-  - @json-render/codegen@0.12.0
-  - @json-render/react@0.12.0
-
-## 0.1.4
-
-### Patch Changes
-
- Updated dependencies [3f1e71e]
-  - @json-render/core@0.11.0
-  - @json-render/codegen@0.11.0
-  - @json-render/react@0.11.0
-
-## 0.1.3
-
-### Patch Changes
-
- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-  - @json-render/react@0.10.0
-  - @json-render/codegen@0.10.0
-
-## 0.1.2
-
-### Patch Changes
-
- Updated dependencies [b103676]
-  - @json-render/react@0.9.1
-  - @json-render/core@0.9.1
-  - @json-render/codegen@0.9.1
-
-## 0.1.1
-
-### Patch Changes
-
- Updated dependencies [1d755c1]
-  - @json-render/core@0.9.0
-  - @json-render/react@0.9.0
-  - @json-render/codegen@0.9.0
@@ -16,10 +16,6 @@ bun dev

 Open [http://json-render.localhost:1355](http://json-render.localhost:1355) with your browser to see the result.

-## Jev composition experiment
-
-The **default / jev** toggle in `/playground` includes an experimental Jev option; hover or focus its info icon segment for details. It is a reference consumer of core's reusable `experimental_composeSpec` and `experimental_createEvaluator` APIs. It lets Jev compose and edit UI trees from the playground's component catalog and allowed action bindings through Vercel AI Gateway. Set `JEV_AI_GATEWAY_API_KEY` on the server for Jev; the default model uses `AI_GATEWAY_API_KEY`. Follow-ups use the selected version as `initialSpec` and can add, replace, remove, or move elements; earlier versions remain unchanged. It uses the same prompt input, version history, spec/stream inspectors, and functional preview as the default model. The shared `/api/generate` endpoint streams spec patches and decision metadata. See [setup, architecture, and limits](lib/jev/README.md).
-
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

 This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load Inter, a custom Google Font.
@@ -1,6 +1,7 @@
---
-title: "A2UI Integration"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/a2ui")
+
+# A2UI Integration

 Use `@json-render/core` to support [A2UI](https://a2ui.org) natively.

@@ -66,7 +67,7 @@ A2UI uses an adjacency list model - a flat list of components with ID references

 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';
 import { z } from 'zod';

 // A2UI BoundValue schema
@@ -1,6 +1,7 @@
---
-title: "Adaptive Cards Integration"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/adaptive-cards")
+
+# Adaptive Cards Integration

 Use json-render to render [Microsoft Adaptive Cards](https://adaptivecards.io) natively.

@@ -89,7 +90,7 @@ Define a catalog matching the Adaptive Cards element types:

 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';
 import { z } from 'zod';

 // Common Adaptive Cards properties
@@ -1,6 +1,7 @@
---
-title: "AG-UI Integration"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/ag-ui")
+
+# AG-UI Integration

 Use json-render to support [AG-UI](https://docs.copilotkit.ai/ag-ui) (Agent User Interaction Protocol) from CopilotKit.

@@ -150,7 +151,7 @@ Create a catalog for UI components that agents can render:

 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';
 import { z } from 'zod';

 export const aguiCatalog = defineCatalog(schema, {
@@ -1,8 +1,9 @@
---
-title: "AI SDK Integration"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/ai-sdk")

-Use json-render with the [Vercel AI SDK](https://sdk.vercel.ai) for seamless streaming. json-render supports two modes: **Standalone** (standalone UI) and **Inline** (UI embedded in conversation). See [Generation Modes](/docs/generation-modes) for a detailed comparison.
+# AI SDK Integration
+
+Use json-render with the [Vercel AI SDK](https://sdk.vercel.ai) for seamless streaming. json-render supports two modes: **Generate** (standalone UI) and **Chat** (UI embedded in conversation). See [Generation Modes](/docs/generation-modes) for a detailed comparison.

 ## Installation

@@ -10,9 +11,9 @@ Use json-render with the [Vercel AI SDK](https://sdk.vercel.ai) for seamless str
 npm install ai @ai-sdk/react
 ```

-## Standalone Mode
+## Generate Mode

-In standalone mode, the AI outputs only JSONL patches. The entire response is a UI spec with no prose. This is the default mode and is ideal for playgrounds, builders, and dashboard generators.
+In generate mode, the AI outputs only JSONL patches. The entire response is a UI spec with no prose. This is the default mode and is ideal for playgrounds, builders, and dashboard generators.

 ### API Route

@@ -72,9 +73,9 @@ function GenerativeUI() {
 }
 ```

-## Inline Mode
+## Chat Mode

-In inline mode, the AI responds conversationally and includes JSONL patches inline. Text-only replies are allowed when no UI is needed. This is ideal for chatbots, copilots, and educational assistants.
+In chat mode, the AI responds conversationally and includes JSONL patches inline. Text-only replies are allowed when no UI is needed. This is ideal for chatbots, copilots, and educational assistants.

 ### API Route

@@ -95,7 +96,7 @@ export async function POST(req: Request) {

  const result = streamText({
    model: yourModel,
-    system: catalog.prompt({ mode: "inline" }),
+    system: catalog.prompt({ mode: "chat" }),
    messages,
  });

@@ -181,13 +182,13 @@ const systemPrompt = catalog.prompt({
 });
 ```

-### Inline Mode Prompt
+### Chat Mode Prompt

 ```typescript
-const inlinePrompt = catalog.prompt({ mode: "inline" });
+const chatPrompt = catalog.prompt({ mode: "chat" });
 ```

-In inline mode, the prompt instructs the AI to respond conversationally first, then include JSONL patches on their own lines when UI is needed. Text-only replies are allowed.
+In chat mode, the prompt instructs the AI to respond conversationally first, then include JSONL patches on their own lines when UI is needed. Text-only replies are allowed.

 ## Which Mode?

@@ -196,8 +197,8 @@ In inline mode, the prompt instructs the AI to respond conversationally first, t
    <thead>
      <tr>
        <th></th>
-        <th>Standalone</th>
-        <th>Inline</th>
+        <th>Generate</th>
+        <th>Chat</th>
      </tr>
    </thead>
    <tbody>
@@ -214,7 +215,7 @@ In inline mode, the prompt instructs the AI to respond conversationally first, t
      <tr>
        <td>System prompt</td>
        <td><code>catalog.prompt()</code></td>
-        <td><code>{"catalog.prompt({ mode: \"inline\" })"}</code></td>
+        <td><code>{"catalog.prompt({ mode: \"chat\" })"}</code></td>
      </tr>
      <tr>
        <td>Stream utility</td>
@@ -1,6 +1,7 @@
---
-title: "@json-render/codegen"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/codegen")
+
+# @json-render/codegen

 Utilities for generating code from UI trees.

@@ -1,104 +1,17 @@
---
-title: "@json-render/core"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/core")
+
+# @json-render/core

 Core types, schemas, and utilities.

-## experimental_composeSpec
-
-**Experimental, unreleased:** may change in any release. Pin exact versions when published; see [source-build setup and the full Jev guide](/docs/jev).
-
-```typescript
-import {
-  experimental_composeSpec,
-  type Experimental_CompositionCandidate,
-  type Experimental_CompositionEvaluator,
-  type Experimental_CompositionEvent,
-} from "@json-render/core";
-
-const events = experimental_composeSpec({
-  catalog,             // Standard flat Spec catalog
-  candidates,          // App-owned atomic elements
-  prompt,              // User request
-  evaluate,            // Experimental_CompositionEvaluator
-  initialState: {},    // Included in spec; not sent to evaluator
-  initialSpec,         // Optional selected version to edit; never mutated
-  elementDescriptions: {}, // Optional descriptions of existing element IDs
-  context: {},         // Explicitly shared evaluator context
-  strategy: "batch",  // Default for new trees; edits are sequential
-  maxElements: 32,     // Batched creation only, includes the root
-  maxSteps: 32,        // Evaluation calls, including terminal decisions
-  maxDepth: 8,         // Root depth is one
-  signal,              // AbortSignal, optional
-  instructions: { root: "", next: "", parent: "" }, // Appended guidance
-});
-```
-
-A candidate has `id`, `description`, `element`, optional `root` (default true), `maxUses` (default one), and `resource` (mutually exclusive variants). IDs start with a letter and contain only letters, digits, underscores, and hyphens. IDs must be unique; `finish` and `unavailable` are reserved. Elements accept `type`, `props`, optional `on`, and `visible`. The composer supplies children and named slots.
-
-Events are full detached snapshots. A `step` contains `spec` and `step`; `complete` contains nullable `spec`, `steps`, `elapsedMs`, nullable `inputTokens`, and `stopReason` (`finish`, `limit`, or `unavailable`). Each trace step contains `index`, `choice`, `description`, nullable `parent`/`slot`, nullable `confidence`/`parentConfidence`, `elapsedMs`, and nullable `inputTokens`. Batched steps also contain `answers`, keyed by question name, with each selected `choice` and optional confidence. Each trace represents one evaluation: batched timing and usage are counted once, not once per answer. Indexes start at zero. Completion is not a guarantee of semantic correctness.
-
-### Batched creation
-
-With no `initialSpec`, `strategy: "batch"` is the default. The first evaluation selects the root and required components together. Shared `resource` variants use one exclusive choice; reusable recipes use bounded counts that include the root when applicable. Root selection takes precedence over speculative membership for the same recipe/resource. The first snapshot includes all selected elements in catalog order under the root's default slot, or its first declared slot when there is no default.
-
-A second evaluation selects parents and sibling positions from the actual selected set. Equal positions retain catalog order. The combined tree must pass catalog, slot, depth, and tree validation before publication; a cycle or invalid layout throws and preserves the first snapshot as partial output. A single root or one child in a single slot needs no layout call. No separate finish call is made.
-
-`maxElements` limits batched creation, including the root. A truncated selection, insufficient depth for selected content, or a call budget that prevents required layout returns `limit`. Use `strategy: "sequential"` for one-operation-at-a-time creation. Edits always use the sequential protocol.
-
-Invalid configuration, out-of-set decisions, provider failures, and aborts throw. Previous snapshots remain usable as partial UI. Stopping iteration prevents further evaluation calls. A supplied signal also stops waiting for an evaluator that ignores cancellation; that evaluator must honor the signal to stop its underlying work.
-
-### Custom evaluators
-
-The composer is provider independent. An evaluator receives `state`, `questions`, and `signal`, then returns a selected criteria key for each question:
-
-```typescript
-const evaluate: Experimental_CompositionEvaluator = async ({ state, questions, signal }) => {
-  // Your adapter calls a decision model with this request.
-  const result = await yourEvaluator({ state, questions, signal });
-  return {
-    answers: result.answers, // { [questionName]: { choice: "offered_key", confidence: 0.9 } }
-    usage: { inputTokens: result.inputTokens }, // Optional
-  };
-};
-```
-
-Questions are records of `type: "choice"`, `instructions`, and `criteria` (choice key to description). Return an answer for every question and treat question/choice keys as opaque. Batched creation sends `root` and `select_*` questions, then `parent_*` and `order_*` questions. Sequential creation and edits use `next` to select an operation, `finish`, or `unavailable`, with `parent` when several attachment points exist. Existing adapters that only implement `next`/`parent` must opt into `strategy: "sequential"`. Confidence must be in [0, 1] when provided; input tokens must be a nonnegative integer.
-
-State contains `user_request` and explicit app `context`, plus capabilities/guidance during batched selection, `selected_elements` during layout, or `already_built` during sequential composition. Candidate descriptions and instructions are shared; raw state/props/binding values are not automatically included. See [validation and v1 limits](/docs/jev#validation-and-v1-limits).
-
-### Follow-up edits
-
-Pass `initialSpec` to edit an existing version. The composer validates and clones it, preserving unchanged elements, IDs, action bindings, and state. `initialState` explicitly overrides `initialSpec.state` when provided. Optional `elementDescriptions` maps existing IDs to descriptions shared with the evaluator; matching candidates supply the default description, otherwise only the component type is shared.
-
-Editing adds bounded operations: replace an element with an offered recipe, remove a non-root subtree, and move/reorder a subtree to an allowed slot/position. Replacements preserve children and are offered only when the new component can contain them. Moves cannot create cycles or exceed the depth limit. Seed specs with cycles, shared children, missing references, unreachable nodes, or unsupported expressions are rejected before evaluation.
-
-The `next` question offers opaque operation keys as well as candidate IDs. For replacement or movement, the following evaluation selects a recipe or destination, also through `next`. Both calls count toward `maxSteps`; the first emits an unchanged snapshot with its decision trace. `changes_made` supplies the edit trace alongside `already_built`. A budget limit, unavailable result, or cancellation may leave a selected edit unapplied. Existing elements exactly matching a recipe count toward `maxUses` and `resource`; removing/replacing them releases those limits.
-
-## experimental_createEvaluator
-
-**Experimental:** creates a server-side evaluator using Vercel AI Gateway's experimental v4 evaluation transport. No AI SDK dependency or provider constructor is required.
-
-```typescript
-import { experimental_createEvaluator } from "@json-render/core";
-
-const evaluate = experimental_createEvaluator({
-  apiKey: process.env.AI_GATEWAY_API_KEY!, // Required; keep server-side
-  model: "typesafe-ai/jev",               // Required, plain Gateway evaluation model ID
-  timeoutMs: 10_000,                      // Default, per evaluation
-  fetch: globalThis.fetch,               // Optional transport override
-});
-```
-
-The factory uses model-neutral naming and requires an explicit model. Jev is the current tested example; other models must support the Gateway choice-evaluation protocol. When using Jev, the Gateway team must permit TypeSafe AI. The adapter reports HTTP status on failure and rejects malformed/unoffered decisions. For Jev, it normalizes TypeSafe's native confidence rather than treating option probability as confidence. Confidence from other provider metadata is not yet normalized. Missing confidence and usage remain unknown. It does not retry automatically or estimate cost.
-
 ## defineCatalog

 Creates a type-safe catalog definition with schema validation.

 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';

 function defineCatalog<T extends ZodType>(
  s: T,
@@ -162,8 +75,7 @@ interface Catalog {
 interface PromptOptions {
  system?: string;           // Custom system message intro
  customRules?: string[];    // Additional rules to append
-  mode?: "standalone" | "inline" | "generate" | "chat"; // Output mode (default: "standalone")
-  editModes?: EditMode[];    // Edit modes to document in prompt (default: ["patch"])
+  mode?: "generate" | "chat"; // Output mode (default: "generate")
 }

 interface SpecValidationResult<T> {
@@ -207,7 +119,7 @@ The schema for flat UI element trees. This is exported from @json-render/react.

 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';

 // schema defines:
 // - Spec shape: { root: string, elements: Record<string, UIElement> }
@@ -426,18 +338,17 @@ setSpec({ ...applySpecPatch(spec, patch) });

 ### nestedToFlat

-Convert a nested element tree (with inline children and named slots) into the flat `Spec` format:
+Convert a nested element tree (with inline children) into the flat `Spec` format:

 ```typescript
 import { nestedToFlat } from '@json-render/core';

 const flat = nestedToFlat({
-  type: "Layout",
-  props: {},
-  children: [{ type: "Text", props: { content: "Main" }, children: [] }],
-  slots: {
-    header: [{ type: "Heading", props: { text: "Header" }, children: [] }],
-  },
+  type: "Card",
+  props: { title: "Hello" },
+  children: [
+    { type: "Text", props: { content: "World" }, children: [] }
+  ],
 });
 // { root: "el-0", elements: { "el-0": ..., "el-1": ... } }
 ```
@@ -459,7 +370,7 @@ Most users should use `pipeJsonRender()` instead, which wraps this transform for

 ### createMixedStreamParser

-Parse a mixed stream of text and JSONL patches (used for Inline mode):
+Parse a mixed stream of text and JSONL patches (used for Chat + GenUI mode):

 ```typescript
 import { createMixedStreamParser } from '@json-render/core';
@@ -478,7 +389,7 @@ parser.flush();

 ### pipeJsonRender

-Pipe an AI SDK `UIMessageStream` through the json-render transform. Lines that parse as JSONL patches are emitted as `data-spec` parts; everything else passes through as text. Used in Inline mode API routes.
+Pipe an AI SDK `UIMessageStream` through the json-render transform. Lines that parse as JSONL patches are emitted as `data-spec` parts; everything else passes through as text. Used in Chat mode API routes.

 ```typescript
 import { pipeJsonRender } from '@json-render/core';
@@ -492,7 +403,7 @@ const stream = createUIMessageStream({
 return createUIMessageStreamResponse({ stream });
 ```

-See [Generation Modes](/docs/generation-modes) for full Inline mode setup.
+See [Generation Modes](/docs/generation-modes) for full Chat mode setup.

 ### SpecStream Types

@@ -550,19 +461,14 @@ const name2 = resolveDynamicValue({ $state: "/user/name" }, state);  // "Alice"

 ### findFormValue

-Read a value from resolved action parameters or state. A parameter value is literal, including strings with dots such as emails, URLs, and versions. Lookup order: a defined direct parameter, a parameter key ending in `.<fieldName>`, a matching flat state key, then a slash-delimited path in nested state.
-
 ```typescript
 import { findFormValue } from '@json-render/core';

-findFormValue("email", { email: "john.doe@example.com" }, {});
-findFormValue("email", { "form.email": "john.doe@example.com" }, {});
-findFormValue("email", {}, { "form.email": "john.doe@example.com" });
-findFormValue("/form/email", {}, { form: { email: "john.doe@example.com" } });
+// Find form values regardless of path format
+// Checks: params.name, params["form.name"], state["form.name"], state.form.name
+const value = findFormValue("name", params, state);
 ```

-For action bindings, use `{ $state: "/form/email" }` to read nested state: the action resolver passes the resulting value to the handler. A raw string like `"form.email"` in parameters is not a state reference. A bare `"email"` field name does not search `state.form.email`.
-
 ## buildUserPrompt

 Build structured user prompts for AI generation, with support for refinement and state context.
@@ -574,10 +480,9 @@ function buildUserPrompt(options: UserPromptOptions): string

 interface UserPromptOptions {
  prompt: string;                        // The user's text prompt
-  currentSpec?: Spec | null;             // Existing spec to refine (triggers edit mode)
+  currentSpec?: Spec | null;             // Existing spec to refine (triggers patch-only mode)
  state?: Record<string, unknown> | null; // Runtime state context to include
  maxPromptLength?: number;              // Max length for user text (truncates before wrapping)
-  editModes?: EditMode[];                // Edit modes for refinement (default: ["patch"])
 }
 ```

@@ -587,15 +492,14 @@ interface UserPromptOptions {
 const userPrompt = buildUserPrompt({ prompt: "create a todo app" });
 ```

-### Refinement (edit modes)
+### Refinement (patch-only mode)

-When `currentSpec` is provided, the prompt instructs the AI to use the specified edit modes instead of recreating the entire spec. Available modes: `"patch"` (RFC 6902), `"merge"` (RFC 7396), and `"diff"` (unified diff).
+When `currentSpec` is provided, the prompt instructs the AI to output only the patches needed for the change, not recreate the entire spec:

 ```typescript
 const userPrompt = buildUserPrompt({
  prompt: "add a dark mode toggle",
  currentSpec: existingSpec,
-  editModes: ["patch", "merge"],
 });
 ```

@@ -610,93 +514,6 @@ const userPrompt = buildUserPrompt({
 });
 ```

-## Edit Modes
-
-Universal edit mode utilities for modifying existing specs. Used by `buildUserPrompt` internally and available for direct use.
-
-```typescript
-import {
-  buildEditInstructions,
-  buildEditUserPrompt,
-  isNonEmptySpec,
-  type EditMode,
-  type EditConfig,
-} from '@json-render/core';
-
-type EditMode = "patch" | "merge" | "diff";
-```
-
-### buildEditInstructions
-
-Generate the prompt section describing available edit modes. Supports both JSON and YAML formats.
-
-```typescript
-function buildEditInstructions(config: EditConfig, format: "json" | "yaml"): string
-
-const instructions = buildEditInstructions({ modes: ["patch", "merge"] }, "json");
-```
-
-### buildEditUserPrompt
-
-Build a user prompt for editing an existing spec. Includes the current spec (with line numbers when diff mode is enabled) and mode-specific instructions.
-
-```typescript
-function buildEditUserPrompt(options: BuildEditUserPromptOptions): string
-
-interface BuildEditUserPromptOptions {
-  prompt: string;
-  currentSpec?: Spec | null;
-  config?: EditConfig;
-  format: "json" | "yaml";
-  maxPromptLength?: number;
-  serializer?: (spec: Spec) => string;
-}
-```
-
-### isNonEmptySpec
-
-Check whether a value is a non-empty spec (has a root string and at least one element).
-
-```typescript
-function isNonEmptySpec(spec: unknown): spec is Spec
-```
-
-## Deep Merge and Diff
-
-Format-agnostic utilities for merging and diffing spec objects.
-
-### deepMergeSpec
-
-Deep-merge with RFC 7396 semantics: `null` deletes, arrays replace, objects recurse. Neither input is mutated.
-
-```typescript
-import { deepMergeSpec } from '@json-render/core';
-
-function deepMergeSpec(
-  base: Record<string, unknown>,
-  patch: Record<string, unknown>
-): Record<string, unknown>
-
-const merged = deepMergeSpec(currentSpec, { elements: { main: { props: { title: "New" } } } });
-```
-
-### diffToPatches
-
-Generate RFC 6902 JSON Patch operations that transform one object into another. Arrays are compared shallowly and replaced atomically; plain objects recurse.
-
-```typescript
-import { diffToPatches } from '@json-render/core';
-
-function diffToPatches(
-  oldObj: Record<string, unknown>,
-  newObj: Record<string, unknown>,
-  basePath?: string
-): JsonPatch[]
-
-const patches = diffToPatches(oldSpec, newSpec);
-// [{ op: "replace", path: "/elements/main/props/title", value: "New Title" }]
-```
-
 ## evaluateVisibility

 Evaluates a visibility condition against the state model.
@@ -741,10 +558,9 @@ interface UIElement {
  type: string;
  props: Record<string, unknown>;
  children?: string[];          // Keys of child elements
-  slots?: Record<string, string[]>; // Named slots mapped to child keys
  visible?: VisibilityCondition;
  on?: Record<string, ActionBinding | ActionBinding[]>;  // Event bindings
-  repeat?: { statePath: string | { $item: string }; key?: string }; // Repeat for arrays
+  repeat?: { statePath: string; key?: string };           // Repeat for arrays
 }
 ```

@@ -760,7 +576,7 @@ interface Spec {
 }
 ```

-Elements are stored as a flat map with string keys. The tree structure is built by following `children` and named `slots` references.
+Elements are stored as a flat map with string keys. The tree structure is built by following the `children` arrays.

 ### ActionBinding

@@ -0,0 +1,172 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/react-native")
+
+# @json-render/react-native
+
+React Native renderer with standard components, providers, and hooks.
+
+## Standard Components
+
+### Layout
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `Container` | `padding`, `background`, `borderRadius`, `borderColor`, `flex` | Basic wrapper with styling |
+| `Row` | `gap`, `align`, `justify`, `flex`, `wrap` | Horizontal flex layout |
+| `Column` | `gap`, `align`, `justify`, `flex` | Vertical flex layout |
+| `ScrollContainer` | `direction` | Scrollable area (vertical or horizontal) |
+| `SafeArea` | `edges` | Safe area insets for notch/home indicator |
+| `Pressable` | `action`, `actionParams` | Touchable wrapper that triggers actions |
+| `Spacer` | `size`, `flex` | Fixed or flexible spacing |
+| `Divider` | `color`, `thickness` | Thin line separator |
+
+### Content
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `Heading` | `text`, `level`, `align`, `color` | Heading text (levels 1-6) |
+| `Paragraph` | `text`, `align`, `color` | Body text |
+| `Label` | `text`, `color`, `bold` | Small label text |
+| `Image` | `uri`, `width`, `height`, `resizeMode`, `borderRadius` | Image display |
+| `Avatar` | `uri`, `size`, `fallback` | Circular avatar |
+| `Badge` | `label`, `color`, `textColor` | Status badge |
+| `Chip` | `label`, `selected`, `color` | Tag/chip |
+
+### Input
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `Button` | `label`, `variant`, `size`, `disabled`, `action`, `actionParams` | Pressable button |
+| `TextInput` | `placeholder`, `value` (use `$bindState`), `secure`, `keyboardType`, `multiline` | Text input field |
+| `Switch` | `checked` (use `$bindState`), `label` | Toggle switch |
+| `Checkbox` | `checked` (use `$bindState`), `label` | Checkbox with label |
+| `Slider` | `value` (use `$bindState`), `min`, `max`, `step` | Range slider |
+| `SearchBar` | `placeholder`, `value` (use `$bindState`) | Search input |
+
+### Feedback
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `Spinner` | `size`, `color` | Loading indicator |
+| `ProgressBar` | `progress`, `color`, `trackColor` | Progress indicator |
+
+### Composite
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `Card` | `title`, `subtitle`, `padding` | Card container |
+| `ListItem` | `title`, `subtitle`, `leading`, `trailing`, `action`, `actionParams` | List row |
+| `Modal` | `visible`, `title` | Bottom sheet modal |
+
+## Providers
+
+### StateProvider
+
+```tsx
+<StateProvider initialState={object}>
+  {children}
+</StateProvider>
+```
+
+### ActionProvider
+
+```tsx
+<ActionProvider handlers={Record<string, ActionHandler>}>
+  {children}
+</ActionProvider>
+```
+
+### VisibilityProvider
+
+```tsx
+<VisibilityProvider>
+  {children}
+</VisibilityProvider>
+```
+
+Conditions in specs use the `VisibilityCondition` format with `$state` paths (e.g. `{ "$state": "/path" }`, `{ "$state": "/path", "eq": value }`). See [visibility](/docs/visibility) for the full syntax.
+
+### ValidationProvider
+
+```tsx
+<ValidationProvider>
+  {children}
+</ValidationProvider>
+```
+
+## defineRegistry
+
+Create a type-safe component registry. Standard components are built-in; only register custom components.
+
+```tsx
+import { defineRegistry, type Components } from '@json-render/react-native';
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Icon: ({ props }) => <Ionicons name={props.name} size={props.size ?? 24} />,
+  } as Components<typeof catalog>,
+});
+```
+
+## Hooks
+
+### useUIStream
+
+```typescript
+const {
+  spec,         // Spec | null - current UI state
+  isStreaming,  // boolean - true while streaming
+  error,        // Error | null
+  send,         // (prompt: string) => Promise<void>
+  clear,        // () => void - reset spec and error
+} = useUIStream({
+  api: string,
+  onComplete?: (spec: Spec) => void,
+  onError?: (error: Error) => void,
+});
+```
+
+### useStateStore
+
+```typescript
+const { state, get, set, update } = useStateStore();
+```
+
+### useStateValue
+
+```typescript
+const value = useStateValue(path: string);
+```
+
+### useStateBinding (deprecated)
+
+> **Deprecated.** Use `useBoundProp` with `$bindState` expressions instead.
+
+```typescript
+const [value, setValue] = useStateBinding(path: string);
+```
+
+### useActions
+
+```typescript
+const { execute } = useActions();
+```
+
+### useIsVisible
+
+```typescript
+const isVisible = useIsVisible(condition?: VisibilityCondition);
+```
+
+## Catalog Exports
+
+```typescript
+import { standardComponentDefinitions, standardActionDefinitions } from "@json-render/react-native/catalog";
+import { schema } from "@json-render/react-native/schema";
+```
+
+| Export | Purpose |
+|--------|---------|
+| `standardComponentDefinitions` | Catalog definitions for all 25+ standard components |
+| `standardActionDefinitions` | Catalog definitions for standard actions (setState, navigate) |
+| `schema` | React Native element tree schema |
@@ -1,6 +1,7 @@
---
-title: "@json-render/react-pdf"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/react-pdf")
+
+# @json-render/react-pdf

 PDF document renderer. Turn JSON specs into PDFs using `@react-pdf/renderer`.

@@ -107,17 +108,14 @@ const PDFRenderer = createRenderer(catalog, components);
 ```typescript
 interface CreateRendererProps {
  spec: Spec | null;
-  store?: StateStore;
  state?: Record<string, unknown>;
  onAction?: (actionName: string, params?: Record<string, unknown>) => void;
-  onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void;
+  onStateChange?: (path: string, value: unknown) => void;
  loading?: boolean;
  fallback?: ComponentRenderer;
 }
 ```

-When `store` is provided, `state` and `onStateChange` are ignored (controlled mode).
-
 ## Renderer

 The main component that renders a spec to `@react-pdf/renderer` elements.
@@ -346,19 +344,6 @@ Renders current page number and total pages. Format uses `{pageNumber}` and `{to
 }
 ```

-## External Store (Controlled Mode)
-
-Pass a `StateStore` to `StateProvider`, `JSONUIProvider`, or `createRenderer` for full control over state:
-
-```tsx
-import { createStateStore, type StateStore } from "@json-render/react-pdf";
-
-const store = createStateStore({ invoice: { total: 100 } });
-store.set("/invoice/total", 200);
-```
-
-When `store` is provided, `initialState` / `state` and `onStateChange` are ignored.
-
 ## Server-Safe Import

 Import schema and catalog definitions without pulling in React or `@react-pdf/renderer`:
@@ -1,6 +1,7 @@
---
-title: "@json-render/react"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/react")
+
+# @json-render/react

 React components, providers, and hooks.

@@ -9,57 +10,11 @@ React components, providers, and hooks.
 ### StateProvider

 ```tsx
-<StateProvider initialState={object} onStateChange={fn}>
+<StateProvider initialState={object}>
  {children}
 </StateProvider>
 ```

-<table>
-  <thead>
-    <tr>
-      <th>Prop</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>store</code></td>
-      <td><code>StateStore</code></td>
-      <td>External store (controlled mode). When provided, <code>initialState</code> and <code>onStateChange</code> are ignored.</td>
-    </tr>
-    <tr>
-      <td><code>initialState</code></td>
-      <td><code>Record&lt;string, unknown&gt;</code></td>
-      <td>Initial state model (uncontrolled mode).</td>
-    </tr>
-    <tr>
-      <td><code>onStateChange</code></td>
-      <td><code>{'(changes: Array<{ path: string; value: unknown }>) => void'}</code></td>
-      <td>Callback when state changes (uncontrolled mode). Called once per <code>set</code> or <code>update</code> with all changed entries.</td>
-    </tr>
-  </tbody>
-</table>
-
-#### External Store (Controlled Mode)
-
-Pass a `StateStore` to bypass the internal state and wire json-render to any state management library:
-
-```tsx
-import { createStateStore, type StateStore } from "@json-render/react";
-
-const store = createStateStore({ count: 0 });
-
-<StateProvider store={store}>
-  {children}
-</StateProvider>
-
-// Mutate from anywhere — React re-renders automatically:
-store.set("/count", 1);
-```
-
-The `store` prop is also available on `JSONUIProvider` and `createRenderer`.
-
 ### ActionProvider

 ```tsx
@@ -129,40 +84,6 @@ const { registry } = defineRegistry(catalog, {
 type Registry = Record<string, React.ComponentType<ComponentRenderProps>>;
 ```

-### JSONUIProvider
-
-Convenience wrapper that combines `StateProvider`, `VisibilityProvider`, `ValidationProvider`, and `ActionProvider`. Accepts all their props plus:
-
-<table>
-  <thead>
-    <tr>
-      <th>Prop</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>functions</code></td>
-      <td><code>Record&lt;string, ComputedFunction&gt;</code></td>
-      <td>Named functions for <code>$computed</code> expressions in props</td>
-    </tr>
-  </tbody>
-</table>
-
-```tsx
-<JSONUIProvider
-  spec={spec}
-  catalog={catalog}
-  handlers={{ submit: async () => { /* ... */ } }}
-  functions={{ fullName: (args) => `${args.first} ${args.last}` }}
->
-  <Renderer spec={spec} registry={registry} />
-</JSONUIProvider>
-```
-
-The `functions` prop is also available on `createRenderer`.
-
 ### Component Props (via defineRegistry)

 ```tsx
@@ -291,15 +212,6 @@ const {

 `ValidationConfig` is `{ checks?: ValidationCheck[], validateOn?: 'change' | 'blur' | 'submit' }`.

-### useOptionalValidation
-
-Non-throwing variant of `useValidation()`. Returns `null` when no `ValidationProvider` is present, instead of throwing. Useful in components that may or may not be rendered inside a validation context.
-
-```typescript
-const validation = useOptionalValidation();
-// ValidationContextValue | null
-```
-
 ### useBoundProp

 Two-way binding helper for `$bindState` / `$bindItem` expressions. Returns `[value, setValue]` where `setValue` writes back to the bound state path.
@@ -1,6 +1,7 @@
---
-title: "@json-render/remotion"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/remotion")
+
+# @json-render/remotion

 Remotion video renderer. Turn JSON timeline specs into video compositions.

@@ -0,0 +1,176 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/shadcn")
+
+# @json-render/shadcn
+
+Pre-built [shadcn/ui](https://ui.shadcn.com/) components for json-render. 36 components built on Radix UI + Tailwind CSS, ready to use with `defineCatalog` and `defineRegistry`.
+
+## Installation
+
+```bash
+npm install @json-render/shadcn @json-render/core @json-render/react zod
+```
+
+Your app must have Tailwind CSS configured.
+
+## Entry Points
+
+| Entry Point | Exports | Use For |
+|-------------|---------|---------|
+| `@json-render/shadcn` | `shadcnComponents` | React implementations |
+| `@json-render/shadcn/catalog` | `shadcnComponentDefinitions` | Catalog schemas (no React dependency, safe for server) |
+
+## Usage
+
+Pick the components you need from the standard definitions:
+
+```typescript
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/react/schema";
+import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
+import { defineRegistry } from "@json-render/react";
+import { shadcnComponents } from "@json-render/shadcn";
+
+// Catalog: pick definitions
+const catalog = defineCatalog(schema, {
+  components: {
+    Card: shadcnComponentDefinitions.Card,
+    Stack: shadcnComponentDefinitions.Stack,
+    Heading: shadcnComponentDefinitions.Heading,
+    Button: shadcnComponentDefinitions.Button,
+    Input: shadcnComponentDefinitions.Input,
+  },
+  actions: {},
+});
+
+// Registry: pick matching implementations
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: shadcnComponents.Card,
+    Stack: shadcnComponents.Stack,
+    Heading: shadcnComponents.Heading,
+    Button: shadcnComponents.Button,
+    Input: shadcnComponents.Input,
+  },
+});
+```
+
+State actions (`setState`, `pushState`, `removeState`) are built into the React schema and handled by `ActionProvider` automatically. You don't need to declare them in your catalog.
+
+## Extending with Custom Components
+
+Add custom components alongside standard ones:
+
+```typescript
+import { z } from "zod";
+
+const catalog = defineCatalog(schema, {
+  components: {
+    // Standard
+    Card: shadcnComponentDefinitions.Card,
+    Stack: shadcnComponentDefinitions.Stack,
+    Button: shadcnComponentDefinitions.Button,
+
+    // Custom
+    Metric: {
+      props: z.object({
+        label: z.string(),
+        value: z.string(),
+        trend: z.enum(["up", "down", "neutral"]).nullable(),
+      }),
+      description: "KPI metric display",
+    },
+  },
+  actions: {},
+});
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: shadcnComponents.Card,
+    Stack: shadcnComponents.Stack,
+    Button: shadcnComponents.Button,
+    Metric: ({ props }) => (
+      <div>
+        <span>{props.label}</span>
+        <span>{props.value}</span>
+      </div>
+    ),
+  },
+});
+```
+
+## Available Components
+
+### Layout
+
+| Component | Description |
+|-----------|-------------|
+| `Card` | Container card with optional title, description, maxWidth, centered |
+| `Stack` | Flex container with direction, gap, align, justify |
+| `Grid` | Grid layout with columns (1-6) and gap |
+| `Separator` | Visual separator line with orientation |
+
+### Navigation
+
+| Component | Description |
+|-----------|-------------|
+| `Tabs` | Tabbed navigation with tabs array, defaultValue, value |
+| `Accordion` | Collapsible sections with items array and type (single/multiple) |
+| `Collapsible` | Single collapsible section with title and defaultOpen |
+| `Pagination` | Page navigation with totalPages and page |
+
+### Overlay
+
+| Component | Description |
+|-----------|-------------|
+| `Dialog` | Modal dialog with title, description, openPath |
+| `Drawer` | Bottom drawer with title, description, openPath |
+| `Tooltip` | Hover tooltip with content and text |
+| `Popover` | Click-triggered popover with trigger and content |
+| `DropdownMenu` | Dropdown menu with label and items array |
+
+### Content
+
+| Component | Description |
+|-----------|-------------|
+| `Heading` | Heading text with level (h1-h4) |
+| `Text` | Paragraph with variant (body, caption, muted, lead, code) |
+| `Image` | Image with alt, width, height |
+| `Avatar` | User avatar with src, name, size |
+| `Badge` | Status badge with text and variant |
+| `Alert` | Alert banner with title, message, type |
+| `Carousel` | Horizontally scrollable carousel with items |
+| `Table` | Data table with columns and rows |
+
+### Feedback
+
+| Component | Description |
+|-----------|-------------|
+| `Progress` | Progress bar with value, max, label |
+| `Skeleton` | Loading placeholder with width, height, rounded |
+| `Spinner` | Loading spinner with size and label |
+
+### Input
+
+| Component | Description |
+|-----------|-------------|
+| `Button` | Clickable button with label, variant, disabled |
+| `Link` | Anchor link with label and href |
+| `Input` | Text input with label, name, type, placeholder, value, checks |
+| `Textarea` | Multi-line text input with label, name, placeholder, rows, value, checks |
+| `Select` | Dropdown select with label, name, options, value, checks |
+| `Checkbox` | Checkbox with label, name, checked |
+| `Radio` | Radio button group with label, name, options, value |
+| `Switch` | Toggle switch with label, name, checked |
+| `Slider` | Range slider with label, min, max, step, value |
+| `Toggle` | Toggle button with label, pressed, variant |
+| `ToggleGroup` | Group of toggle buttons with items, type, value |
+| `ButtonGroup` | Group of buttons with buttons array and selected |
+
+## Notes
+
+- The `/catalog` entry point has no React dependency -- use it for server-side prompt generation
+- Components use Tailwind CSS classes -- your app must have Tailwind configured
+- Component implementations use bundled shadcn/ui primitives (not your app's `components/ui/`)
+- Form inputs support `checks` for validation (type + message pairs)
+- Events: inputs emit `change`/`submit`/`focus`/`blur`; buttons emit `press`; selects emit `change`/`select`
@@ -1,6 +1,7 @@
---
-title: "Catalog"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/catalog")
+
+# Catalog

 The catalog defines what AI can generate. It's your guardrail.

@@ -17,9 +18,9 @@ A catalog is the vocabulary for your UI. While the [schema](/docs/schemas) defin
 `defineCatalog` is from `@json-render/core`. The `schema` import comes from your platform package (`@json-render/react` or `@json-render/react-native`) and defines the element structure the catalog targets. The catalog definition itself is framework-agnostic.

 ```typescript
-import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/react/schema"; // or '@json-render/react-native/schema'
-import { z } from "zod";
+import { defineCatalog } from '@json-render/core';
+import { schema } from '@json-render/react'; // or '@json-render/react-native'
+import { z } from 'zod';

 const catalog = defineCatalog(schema, {
  components: {
@@ -28,35 +29,35 @@ const catalog = defineCatalog(schema, {
      props: z.object({
        title: z.string(),
        description: z.string().nullable(),
-        padding: z.enum(["sm", "md", "lg"]).nullable(),
+        padding: z.enum(['sm', 'md', 'lg']).nullable(),
      }),
      slots: ["default"], // Can contain other components
      description: "Container card for grouping content",
    },
-
+    
    Metric: {
      props: z.object({
        label: z.string(),
        value: z.union([z.string(), z.number()]),
-        format: z.enum(["currency", "percent", "number"]),
+        format: z.enum(['currency', 'percent', 'number']),
      }),
      description: "Display a single metric value",
    },
  },
-
+  
  actions: {
    submit_form: {
      params: z.object({
        formId: z.string(),
      }),
-      description: "Submit a form",
+      description: 'Submit a form',
    },
-
+    
    export_data: {
      params: z.object({
-        format: z.enum(["csv", "pdf", "json"]),
+        format: z.enum(['csv', 'pdf', 'json']),
      }),
-      description: "Export data in various formats",
+      description: 'Export data in various formats',
    },
  },
 });
@@ -69,22 +70,12 @@ Each component in the catalog has:
 ```typescript
 {
  props: z.object({...}),  // Zod schema for props (use .nullable() for optional)
-  slots?: string[],        // Available slots (e.g., ["default", "header", "footer"])
+  slots?: string[],        // Named slots for children (e.g., ["default"])
  description?: string,    // Help AI understand when to use it
 }
 ```

-Use `"default"` for regular children. Add named slots when a component places content in multiple regions:
-
-```typescript
-Layout: {
-  props: z.object({}),
-  slots: ["default", "header", "footer"],
-  description: "Page layout with header, content, and footer regions",
-}
-```
-
-React specs use `children` for the default slot and a `slots` object for the other names.
+Use `slots: ["default"]` for components that can contain children. The slot name corresponds to where child elements are rendered.

 ## Generating AI Prompts

@@ -0,0 +1,579 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/changelog")
+
+# Changelog
+
+Notable changes and updates to json-render.
+
+## v0.8.0
+
+February 2026
+
+### New: `@json-render/react-pdf`
+
+PDF renderer for json-render, powered by [`@react-pdf/renderer`](https://react-pdf.org/). Define catalogs and registries the same way as `@json-render/react`, but output PDF documents instead of web UI.
+
+```bash
+npm install @json-render/core @json-render/react-pdf
+```
+
+```typescript
+import { renderToBuffer } from "@json-render/react-pdf";
+import type { Spec } from "@json-render/core";
+
+const spec: Spec = {
+  root: "doc",
+  elements: {
+    doc: { type: "Document", props: { title: "Invoice" }, children: ["page"] },
+    page: {
+      type: "Page",
+      props: { size: "A4" },
+      children: ["heading", "table"],
+    },
+    heading: {
+      type: "Heading",
+      props: { text: "Invoice #1234", level: "h1" },
+      children: [],
+    },
+    table: {
+      type: "Table",
+      props: {
+        columns: [
+          { header: "Item", width: "60%" },
+          { header: "Price", width: "40%", align: "right" },
+        ],
+        rows: [
+          ["Widget A", "$10.00"],
+          ["Widget B", "$25.00"],
+        ],
+      },
+      children: [],
+    },
+  },
+};
+
+const buffer = await renderToBuffer(spec);
+```
+
+Server-side rendering APIs:
+
+- `renderToBuffer(spec)` -- render to an in-memory PDF buffer
+- `renderToStream(spec)` -- render to a readable stream (pipe to HTTP response)
+- `renderToFile(spec, path)` -- render directly to a file
+
+15 standard components covering document structure (Document, Page), layout (View, Row, Column), content (Heading, Text, Image, Link), data (Table, List), decorative (Divider, Spacer), and page-level (PageNumber).
+
+Supports custom catalogs with `defineRegistry`, server-safe imports via `@json-render/react-pdf/server`, and full context support (state, visibility, actions, validation, repeat scopes).
+
+---
+
+## v0.7.0
+
+February 2026
+
+### New: `@json-render/shadcn`
+
+Pre-built [shadcn/ui](https://ui.shadcn.com/) component library for json-render. 36 components built on Radix UI + Tailwind CSS, ready to use with `defineCatalog` and `defineRegistry`.
+
+```bash
+npm install @json-render/shadcn
+```
+
+```typescript
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/react/schema";
+import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
+import { defineRegistry } from "@json-render/react";
+import { shadcnComponents } from "@json-render/shadcn";
+
+const catalog = defineCatalog(schema, {
+  components: {
+    Card: shadcnComponentDefinitions.Card,
+    Button: shadcnComponentDefinitions.Button,
+    Input: shadcnComponentDefinitions.Input,
+  },
+  actions: {},
+});
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: shadcnComponents.Card,
+    Button: shadcnComponents.Button,
+    Input: shadcnComponents.Input,
+  },
+});
+```
+
+Components include: layout (Card, Stack, Grid, Separator), navigation (Tabs, Accordion, Collapsible, Pagination), overlay (Dialog, Drawer, Tooltip, Popover, DropdownMenu), content (Heading, Text, Image, Avatar, Badge, Alert, Carousel, Table), feedback (Progress, Skeleton, Spinner), and input (Button, Link, Input, Textarea, Select, Checkbox, Radio, Switch, Slider, Toggle, ToggleGroup, ButtonGroup).
+
+See the [API reference](/docs/api/shadcn) for full details.
+
+### New: Event Handles (`on()`)
+
+Components now receive an `on(event)` function in addition to `emit(event)`. The `on()` function returns an `EventHandle` with metadata:
+
+- `emit()` -- fire the event
+- `shouldPreventDefault` -- whether any action binding requested `preventDefault`
+- `bound` -- whether any handler is bound to this event
+
+```tsx
+Link: ({ props, on }) => {
+  const click = on("click");
+  return (
+    <a href={props.href} onClick={(e) => {
+      if (click.shouldPreventDefault) e.preventDefault();
+      click.emit();
+    }}>{props.label}</a>
+  );
+},
+```
+
+### New: `BaseComponentProps`
+
+Catalog-agnostic base type for component render functions. Use when building reusable component libraries (like `@json-render/shadcn`) that are not tied to a specific catalog.
+
+```typescript
+import type { BaseComponentProps } from "@json-render/react";
+
+const Card = ({ props, children }: BaseComponentProps<{ title?: string }>) => (
+  <div>{props.title}{children}</div>
+);
+```
+
+### New: Built-in Actions in Schema
+
+Schemas can now declare `builtInActions` -- actions that are always available at runtime and automatically injected into prompts. The React schema declares `setState`, `pushState`, and `removeState` as built-in, so they appear in prompts without needing to be listed in catalog `actions`.
+
+### New: `preventDefault` on `ActionBinding`
+
+Action bindings now support a `preventDefault` boolean field, allowing the LLM to request that default browser behavior (e.g. navigation on links) be prevented.
+
+### Improved: Stream Transform Text Block Splitting
+
+`createJsonRenderTransform()` now properly splits text blocks around spec data by emitting `text-end`/`text-start` pairs. This ensures the AI SDK creates separate text parts, preserving correct interleaving of prose and UI in `message.parts`.
+
+### Improved: `defineRegistry` Actions Requirement
+
+`defineRegistry` now conditionally requires the `actions` field only when the catalog declares actions. Catalogs with no actions (e.g. `actions: {}`) no longer need to pass an empty actions object.
+
+---
+
+## v0.6.0
+
+February 2026
+
+### New: Chat Mode (Inline GenUI)
+
+json-render now supports two generation modes: **Generate** (JSONL-only, the default) and **Chat** (text + JSONL inline). Chat mode lets the AI respond conversationally with embedded UI specs, ideal for chatbots and copilot experiences.
+
+```typescript
+// Generate mode (default) — AI outputs only JSONL
+const prompt = catalog.prompt();
+
+// Chat mode — AI outputs text + JSONL inline
+const chatPrompt = catalog.prompt({ mode: "chat" });
+```
+
+On the server, `pipeJsonRender()` separates text from JSONL patches in a mixed stream:
+
+```typescript
+import { pipeJsonRender } from "@json-render/core";
+import { createUIMessageStream, createUIMessageStreamResponse } from "ai";
+
+const stream = createUIMessageStream({
+  execute: async ({ writer }) => {
+    writer.merge(pipeJsonRender(result.toUIMessageStream()));
+  },
+});
+return createUIMessageStreamResponse({ stream });
+```
+
+On the client, `useJsonRenderMessage` extracts the spec and text from message parts:
+
+```tsx
+import { useJsonRenderMessage } from "@json-render/react";
+
+function ChatMessage({ message }) {
+  const { spec, text, hasSpec } = useJsonRenderMessage(message.parts);
+  return (
+    <div>
+      {text && <Markdown>{text}</Markdown>}
+      {hasSpec && <Renderer spec={spec} registry={registry} />}
+    </div>
+  );
+}
+```
+
+### New: AI SDK Integration
+
+First-class Vercel AI SDK support with typed data parts and stream utilities.
+
+- `SpecDataPart` type for `data-spec` stream parts (patch, flat, nested payloads)
+- `SPEC_DATA_PART` / `SPEC_DATA_PART_TYPE` constants for type-safe part filtering
+- `createJsonRenderTransform()` low-level TransformStream for custom pipelines
+- `createMixedStreamParser()` for parsing mixed text + JSONL streams
+
+### New: Two-Way Binding
+
+Props can now use `$bindState` and `$bindItem` expressions for two-way data binding. The renderer resolves bindings and passes a `bindings` map to components, enabling write-back to state without custom `valuePath` props.
+
+```json
+{
+  "type": "Input",
+  "props": { "label": "Email", "value": { "$bindState": "/form/email" } }
+}
+```
+
+```tsx
+import { useBoundProp } from "@json-render/react";
+
+Input: ({ props, bindings }) => {
+  const [value, setValue] = useBoundProp<string>(props.value, bindings?.value);
+  return <input value={value ?? ""} onChange={(e) => setValue(e.target.value)} />;
+}
+```
+
+### New: Expression-Based Props and Visibility
+
+All dynamic expressions now use structured `$state`, `$item`, and `$index` objects instead of string token rewriting. This is simpler, more explicit, and works for both props and visibility conditions.
+
+**Props:**
+
+```json
+{ "title": { "$state": "/user/name" } }
+{ "label": { "$item": "title" } }
+{ "position": { "$index": true } }
+```
+
+**Visibility:**
+
+```json
+{ "$state": "/isAdmin" }
+{ "$state": "/role", "eq": "admin" }
+[{ "$state": "/isAdmin" }, { "$state": "/feature" }]
+{ "$or": [{ "$state": "/roleA" }, { "$state": "/roleB" }] }
+{ "$item": "isActive" }
+{ "$index": true, "gt": 0 }
+```
+
+Comparison operators: `eq`, `neq`, `gt`, `gte`, `lt`, `lte`, `not`.
+
+### New: React Chat Hooks
+
+- `useChatUI()` — full chat hook with message history, streaming, and spec extraction
+- `useJsonRenderMessage()` — extract spec + text from a message's parts array
+- `buildSpecFromParts()` / `getTextFromParts()` — utilities for working with AI SDK message parts
+- `useBoundProp()` — two-way binding hook for `$bindState` / `$bindItem`
+
+### New: Chat Example
+
+Full-featured chat example (`examples/chat`) with AI agent, tool calls (crypto, GitHub, Hacker News, weather, search), theme toggle, and streaming inline UI generation.
+
+### Improved: Renderer Performance
+
+- `ElementRenderer` is now `React.memo`'d for better performance with repeat lists
+- `emit` is always defined (never `undefined`)
+- Repeat scope passes the actual item object, eliminating string token rewriting
+
+### Improved: Utilities
+
+- `applySpecPatch()` — typed wrapper for applying a single patch to a Spec
+- `nestedToFlat()` — convert nested tree specs to flat format
+- `resolveBindings()` / `resolveActionParam()` — resolve binding paths and action params
+
+### Breaking Changes
+
+- `{ $path }` and `{ path }` replaced by `{ $state }`, `{ $item }`, `{ $index }` in props
+- Visibility: `{ path }` -> `{ $state }`, `{ and/or/not }` -> `{ $and/$or }` with `not` as operator flag
+- `DynamicValue`: `{ path: string }` -> `{ $state: string }`
+- `repeat.path` -> `repeat.statePath`
+- Action params: `path` -> `statePath` in setState action
+- `actionHandlers` -> `handlers` on `JSONUIProvider` / `ActionProvider`
+- `AuthState` and `{ auth }` visibility conditions removed (model auth as regular state)
+- Legacy catalog API removed: `createCatalog`, `generateCatalogPrompt`, `generateSystemPrompt`
+- React exports removed: `createRendererFromCatalog`, `rewriteRepeatTokens`
+- Codegen: `traverseTree` -> `traverseSpec`
+
+See the [Migration Guide](/docs/migration) for detailed upgrade instructions.
+
+---
+
+## v0.5.0
+
+February 2026
+
+### New: @json-render/react-native
+
+Full React Native renderer with 25+ standard components, data binding, visibility, actions, and dynamic props. Build AI-generated native mobile UIs with the same catalog-driven approach as web.
+
+```tsx
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/react-native/schema";
+import {
+  standardComponentDefinitions,
+  standardActionDefinitions,
+} from "@json-render/react-native/catalog";
+import { defineRegistry, Renderer } from "@json-render/react-native";
+
+const catalog = defineCatalog(schema, {
+  components: { ...standardComponentDefinitions },
+  actions: standardActionDefinitions,
+});
+
+const { registry } = defineRegistry(catalog, { components: {} });
+
+<Renderer spec={spec} registry={registry} />
+```
+
+Includes standard components for layout (Container, Row, Column, ScrollContainer, SafeArea, Pressable, Spacer, Divider), content (Heading, Paragraph, Label, Image, Avatar, Badge, Chip), input (Button, TextInput, Switch, Checkbox, Slider, SearchBar), feedback (Spinner, ProgressBar), and composite (Card, ListItem, Modal).
+
+### New: Event System
+
+Components now use `emit` to fire named events instead of directly dispatching actions. The element's `on` field maps events to action bindings, decoupling component logic from action handling.
+
+```tsx
+// Component emits a named event
+Button: ({ props, emit }) => (
+  <button onClick={() => emit("press")}>{props.label}</button>
+),
+
+// Element spec maps events to actions
+{
+  "type": "Button",
+  "props": { "label": "Submit" },
+  "on": { "press": { "action": "submit", "params": { "formId": "main" } } }
+}
+```
+
+### New: Repeat/List Rendering
+
+Elements can now iterate over state arrays using the `repeat` field. Child elements use `{ "$item": "field" }` to read from the current item and `{ "$index": true }` for the current array index.
+
+```json
+{
+  "type": "Column",
+  "repeat": { "statePath": "/posts", "key": "id" },
+  "children": ["post-card"]
+}
+```
+
+```json
+{
+  "type": "Card",
+  "props": { "title": { "$item": "title" } }
+}
+```
+
+### New: User Prompt Builder
+
+Build structured user prompts with optional spec refinement and state context:
+
+```typescript
+import { buildUserPrompt } from "@json-render/core";
+
+// Fresh generation
+buildUserPrompt({ prompt: "create a todo app" });
+
+// Refinement (patch-only mode)
+buildUserPrompt({ prompt: "add a toggle", currentSpec: spec });
+
+// With runtime state
+buildUserPrompt({ prompt: "show data", state: { todos: [] } });
+```
+
+### New: Spec Validation
+
+Validate spec structure and auto-fix common issues:
+
+```typescript
+import { validateSpec, autoFixSpec } from "@json-render/core";
+
+const { valid, issues } = validateSpec(spec);
+const fixed = autoFixSpec(spec);
+```
+
+### Improved: State Management
+
+`DataProvider` has been renamed to `StateProvider` with a clearer API. State is now a first-class part of specs. Elements can bind to state via `$state` expressions, and the built-in `setState` action updates state directly.
+
+### Improved: AI Prompts
+
+Schema prompts now include streaming best practices, repeat/list examples, and state patching guidance. Schemas can also define `defaultRules` that are always included in generated prompts.
+
+### Improved: Documentation
+
+- All documentation pages migrated to MDX
+- AI-powered documentation chat
+- Dynamic Open Graph images for all docs pages
+- Improved playground
+
+### Breaking Changes
+
+- `DataProvider` renamed to `StateProvider`
+- `useData` renamed to `useStateStore`, `useDataValue` to `useStateValue`, `useDataBinding` to `useStateBinding`
+- `onAction` renamed to `emit` in component context
+- `DataModel` type renamed to `StateModel`
+- `Action` type renamed to `ActionBinding` (old name still available but deprecated)
+
+---
+
+## v0.4.0
+
+February 2026
+
+### New: Custom Schema System
+
+Create custom output formats with `defineSchema`. Each renderer now defines its own schema, enabling completely different spec formats for different use cases.
+
+```typescript
+import { defineSchema } from "@json-render/core";
+
+const mySchema = defineSchema((s) => ({
+  spec: s.object({
+    pages: s.array(s.object({
+      title: s.string(),
+      blocks: s.array(s.ref("catalog.blocks")),
+    })),
+  }),
+  catalog: s.object({
+    blocks: s.map({ props: s.zod(), description: s.string() }),
+  }),
+}), {
+  promptTemplate: myPromptTemplate,
+});
+```
+
+### New: Component Slots
+
+Components can now define which slots they accept. Use `["default"]` for regular children, or named slots like `["header", "footer"]` for more complex layouts.
+
+```typescript
+const catalog = defineCatalog(schema, {
+  components: {
+    Card: {
+      props: z.object({ title: z.string() }),
+      slots: ["default"],  // accepts children
+      description: "A card container",
+    },
+    Layout: {
+      props: z.object({}),
+      slots: ["header", "content", "footer"],  // named slots
+      description: "Page layout with header, content, footer",
+    },
+  },
+});
+```
+
+### New: AI Prompt Generation
+
+Catalogs now generate AI system prompts automatically with `catalog.prompt()`. The prompt includes all component definitions, props schemas, and action descriptions - ensuring the AI only generates valid specs.
+
+```typescript
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/react/schema";
+
+const catalog = defineCatalog(schema, {
+  components: { /* ... */ },
+  actions: { /* ... */ },
+});
+
+// Generate system prompt for AI
+const systemPrompt = catalog.prompt();
+
+// Use with any AI SDK
+const result = await streamText({
+  model: "claude-haiku-4.5",
+  system: systemPrompt,
+  prompt: userMessage,
+});
+```
+
+### New: @json-render/remotion
+
+Generate AI-powered videos with Remotion. Define video catalogs, stream timeline specs, and render with the Remotion Player.
+
+```tsx
+import { Player } from "@remotion/player";
+import { Renderer, schema, standardComponentDefinitions } from "@json-render/remotion";
+
+const catalog = defineCatalog(schema, {
+  components: standardComponentDefinitions,
+  transitions: standardTransitionDefinitions,
+});
+
+<Player
+  component={Renderer}
+  inputProps={{ spec }}
+  durationInFrames={spec.composition.durationInFrames}
+  fps={spec.composition.fps}
+  compositionWidth={spec.composition.width}
+  compositionHeight={spec.composition.height}
+/>
+```
+
+Includes 10 standard video components (TitleCard, TypingText, SplitScreen, etc.), 7 transition types, and the ClipWrapper utility for custom components.
+
+### New: SpecStream
+
+SpecStream is json-render's streaming format for progressively building specs from JSONL patches. The new compiler API makes it easy to process streaming AI responses.
+
+```typescript
+import { createSpecStreamCompiler } from "@json-render/core";
+
+const compiler = createSpecStreamCompiler<MySpec>();
+
+// Process streaming chunks
+const { result, newPatches } = compiler.push(chunk);
+setSpec(result); // Update UI with partial result
+```
+
+### Improved: Dashboard Example
+
+The dashboard example is now a full-featured accounting dashboard with:
+
+- Persistent SQLite database with Drizzle ORM
+- RESTful API for customers, invoices, expenses, accounts
+- Draggable widget reordering
+- AI-powered widget generation with streaming
+- Real data binding to database records
+
+### Improved: Documentation
+
+- Interactive playground for testing specs
+- New guides: Custom Schema, Streaming, Code Export
+- Full API reference for all packages
+- Integration guides: A2UI, AG-UI, Adaptive Cards, OpenAPI
+
+### Breaking Changes
+
+- `UITree` type renamed to `Spec`
+- Schema is now imported from renderer packages (`@json-render/react`) not core
+- `defineCatalog` now requires a schema as first argument
+
+---
+
+## v0.3.0
+
+January 2026
+
+Internal release with codegen foundations.
+
+- Added `@json-render/codegen` package (spec traversal and JSX serialization)
+- Configurable AI model via environment variables
+- Documentation improvements and bug fixes
+
+*Note: Only @json-render/core was published to npm for this release.*
+
+---
+
+## v0.2.0
+
+January 2026
+
+Initial public release.
+
+- Core catalog and spec types
+- React renderer with contexts for data, actions, visibility
+- AI prompt generation from catalogs
+- Basic streaming support
+- Dashboard example application
@@ -1,6 +1,7 @@
---
-title: "Code Export"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/code-export")
+
+# Code Export

 Export generated UI as standalone code for your framework.

@@ -1,6 +1,7 @@
---
-title: "Custom Schema & Renderer"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/custom-schema")
+
+# Custom Schema & Renderer

 Build your own schema and renderer with `@json-render/core`.

@@ -1,6 +1,7 @@
---
-title: "Data Binding"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/data-binding")
+
+# Data Binding

 Connect UI elements to dynamic data using expressions in your JSON specs.

@@ -125,7 +126,7 @@ The `repeat` field on an element renders its children once per item in a state a
 }
 ```

- `repeat.statePath`: root JSON Pointer to the state array, or `{ "$item": "field" }` for an array on the enclosing repeat item
+- `repeat.statePath` — JSON Pointer to the state array
 - `repeat.key` — field name on each item to use as a stable key for rendering

 Inside `todo-item`, `{ "$item": "title" }` reads the `title` field from whichever array item is currently being rendered. `{ "$index": true }` would return `0` for the first item, `1` for the second, and so on.
@@ -212,22 +213,6 @@ Use `$cond` / `$then` / `$else` to pick a prop value based on a condition:

 The condition uses the same [visibility](/docs/visibility) expression format.

-## Template Strings
-
-Use `{ "$template": "..." }` to interpolate state values into a string using `${/path}` syntax:
-
-```json
-{
-  "type": "Text",
-  "props": {
-    "text": { "$template": "Welcome back, ${/user/name}!" }
-  },
-  "children": []
-}
-```
-
-See [Computed Values](/docs/computed-values) for details on `$template` and `$computed` expressions.
-
 ## Quick Reference

 <div className="my-6 overflow-x-auto">
@@ -270,39 +255,10 @@ See [Computed Values](/docs/computed-values) for details on `$template` and `$co
        <td><code>{'{ "$bindItem": "field" }'}</code></td>
        <td>Form components inside repeat</td>
      </tr>
-      <tr>
-        <td><code>{"$template"}</code></td>
-        <td><code>{'{ "$template": "Hello, ${/name}!" }'}</code></td>
-        <td>Anywhere (string props)</td>
-      </tr>
-      <tr>
-        <td><code>{"$computed"}</code></td>
-        <td><code>{'{ "$computed": "fn", "args": { ... } }'}</code></td>
-        <td>Anywhere (requires registered function)</td>
-      </tr>
    </tbody>
  </table>
 </div>

-## External Store (Controlled Mode)
-
-For advanced use cases, you can pass a `StateStore` to `StateProvider` to use your own state management (Redux, Zustand, XState, etc.) instead of the built-in internal store:
-
-```tsx
-import { createStateStore, type StateStore } from "@json-render/react";
-
-const store = createStateStore({ user: { name: "Alice" } });
-
-<StateProvider store={store}>
-  {children}
-</StateProvider>
-
-// Mutate from anywhere — React re-renders automatically:
-store.set("/user/name", "Bob");
-```
-
-When `store` is provided, `initialState` and `onStateChange` are ignored. The store is the single source of truth. See the [React API reference](/docs/api/react#external-store-controlled-mode) for the full `StateStore` interface.
-
 ## Next

 - [Visibility](/docs/visibility) — conditionally show or hide elements
@@ -1,16 +1,17 @@
---
-title: "Generation Modes"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/generation-modes")

-json-render supports two modes for AI-generated UI: **Standalone mode** for standalone UI and **Inline mode** for inline UI within a conversation.
+# Generation Modes
+
+json-render supports two modes for AI-generated UI: **Generate mode** for standalone UI and **Chat mode** for inline UI within a conversation.

 The mode controls how the AI formats its output and how your app processes the stream. The underlying JSONL patch format is the same in both modes.

 <GenerationModesDiagram />

-## Standalone Mode
+## Generate Mode (Standalone)

-In standalone mode, the AI outputs **only JSONL patches** — no prose, no markdown. The entire response is a UI spec.
+In generate mode, the AI outputs **only JSONL patches** — no prose, no markdown. The entire response is a UI spec.

 This is the default mode and is ideal for:

@@ -24,7 +25,7 @@ This is the default mode and is ideal for:
 ```typescript
 import { streamText } from "ai";

-// Standalone mode is the default (no mode option needed)
+// Generate mode is the default (no mode option needed)
 const systemPrompt = catalog.prompt({
  customRules: [
    "Use Card as root for forms and small UIs.",
@@ -73,9 +74,9 @@ The AI outputs only JSONL — one patch per line, no surrounding text:
 {"op":"add","path":"/elements/submit","value":{"type":"Button","props":{"label":"Sign In"}}}
 ```

-## Inline Mode
+## Chat Mode (Inline)

-In inline mode, the AI responds **conversationally first**, then outputs JSONL patches on their own lines. Text-only replies are allowed when no UI is needed (e.g. greetings, clarifying questions).
+In chat mode, the AI responds **conversationally first**, then outputs JSONL patches on their own lines. Text-only replies are allowed when no UI is needed (e.g. greetings, clarifying questions).

 This is ideal for:

@@ -91,8 +92,8 @@ import { streamText } from "ai";
 import { pipeJsonRender } from "@json-render/core";
 import { createUIMessageStream, createUIMessageStreamResponse } from "ai";

-// Enable inline mode
-const systemPrompt = catalog.prompt({ mode: "inline" });
+// Enable chat mode
+const systemPrompt = catalog.prompt({ mode: "chat" });

 const result = streamText({
  model: yourModel,
@@ -179,8 +180,8 @@ If the user asks a simple question ("what does BTC stand for?"), the AI replies
    <thead>
      <tr>
        <th />
-        <th>Standalone</th>
-        <th>Inline</th>
+        <th>Generate</th>
+        <th>Chat</th>
      </tr>
    </thead>
    <tbody>
@@ -197,7 +198,7 @@ If the user asks a simple question ("what does BTC stand for?"), the AI replies
      <tr>
        <td>System prompt</td>
        <td><code>{"catalog.prompt()"}</code></td>
-        <td><code>{'catalog.prompt({ mode: "inline" })'}</code></td>
+        <td><code>{'catalog.prompt({ mode: "chat" })'}</code></td>
      </tr>
      <tr>
        <td>Stream utility</td>
@@ -0,0 +1,41 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/installation")
+
+# Installation
+
+Install the core package plus your renderer of choice.
+
+## For React UI
+
+<PackageInstall packages="@json-render/core @json-render/react" />
+
+## For React UI with shadcn/ui
+
+Pre-built components for fast prototyping and production use:
+
+<PackageInstall packages="@json-render/core @json-render/react @json-render/shadcn" />
+
+Requires Tailwind CSS in your project. See the [@json-render/shadcn API reference](/docs/api/shadcn) for usage.
+
+## For React Native
+
+<PackageInstall packages="@json-render/core @json-render/react-native" />
+
+## For Remotion Video
+
+<PackageInstall packages="@json-render/core @json-render/remotion remotion @remotion/player" />
+
+## Peer Dependencies
+
+json-render requires the following peer dependencies:
+
+- `react` ^19.0.0
+- `zod` ^4.0.0
+
+<PackageInstall packages="react zod" />
+
+## For AI Integration
+
+To use json-render with AI models, you'll also need the Vercel AI SDK:
+
+<PackageInstall packages="ai" />
@@ -0,0 +1,29 @@
+import { DocsMobileNav } from "@/components/docs-mobile-nav";
+import { DocsSidebar } from "@/components/docs-sidebar";
+import { CopyPageButton } from "@/components/copy-page-button";
+
+export default function DocsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <DocsMobileNav />
+      <div className="max-w-5xl mx-auto px-6 py-8 lg:py-12 flex gap-16">
+        {/* Sidebar */}
+        <aside className="w-48 shrink-0 hidden lg:block sticky top-28 h-[calc(100vh-7rem)] overflow-y-auto">
+          <DocsSidebar />
+        </aside>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0 max-w-2xl pb-20">
+          <div className="flex justify-end mb-4">
+            <CopyPageButton />
+          </div>
+          <article>{children}</article>
+        </div>
+      </div>
+    </>
+  );
+}
@@ -1,6 +1,7 @@
---
-title: "Migration Guide"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/migration")
+
+# Migration Guide

 This guide covers breaking changes introduced in v0.6.0 and how to update your code.

@@ -30,23 +31,15 @@ import { StateProvider } from "@json-render/react";

 `StateProvider` now manages state internally. Use `useStateStore()` to access `get`, `set`, and `update`.

-<table>
-<thead>
-<tr>
-<th>Before</th>
-<th>After</th>
-</tr>
-</thead>
-<tbody>
-<tr><td><code>DataProvider</code></td><td><code>StateProvider</code></td></tr>
-<tr><td><code>data</code> prop</td><td><code>initialState</code> prop</td></tr>
-<tr><td><code>getValue</code> / <code>setValue</code> props</td><td>Removed (use <code>useStateStore()</code> hook for <code>get</code> / <code>set</code>)</td></tr>
-<tr><td><code>useData</code></td><td><code>useStateStore</code></td></tr>
-<tr><td><code>useDataValue</code></td><td><code>useStateValue</code></td></tr>
-<tr><td><code>useDataBinding</code></td><td><code>useStateBinding</code> (deprecated, use <code>useBoundProp</code> instead)</td></tr>
-<tr><td><code>DataModel</code> type</td><td><code>StateModel</code> type</td></tr>
-</tbody>
-</table>
+| Before | After |
+|--------|-------|
+| `DataProvider` | `StateProvider` |
+| `data` prop | `initialState` prop |
+| `getValue` / `setValue` props | Removed (use `useStateStore()` hook for `get` / `set`) |
+| `useData` | `useStateStore` |
+| `useDataValue` | `useStateValue` |
+| `useDataBinding` | `useStateBinding` (deprecated, use `useBoundProp` instead) |
+| `DataModel` type | `StateModel` type |

 ## Dynamic Expressions

@@ -88,18 +81,10 @@ Inside repeat scopes, use `$item` and `$index`:
 }
 ```

-<table>
-<thead>
-<tr>
-<th>Before</th>
-<th>After</th>
-</tr>
-</thead>
-<tbody>
-<tr><td><code>{'{ "$path": "/..." }'}</code></td><td><code>{'{ "$state": "/..." }'}</code></td></tr>
-<tr><td><code>{'{ "$data": "/..." }'}</code></td><td><code>{'{ "$state": "/..." }'}</code></td></tr>
-</tbody>
-</table>
+| Before | After |
+|--------|-------|
+| `{ "$path": "/..." }` | `{ "$state": "/..." }` |
+| `{ "$data": "/..." }` | `{ "$state": "/..." }` |

 ## Two-Way Binding

@@ -308,35 +293,10 @@ const catalog = defineCatalog(schema, {

 const prompt = catalog.prompt();

-// Inline mode prompt (formerly "chat")
-const inlinePrompt = catalog.prompt({ mode: "inline" });
-```
-
-## Generation Modes
-
-The generation mode values passed to `catalog.prompt()` have been renamed for clarity:
-
- `"generate"` is now `"standalone"`
- `"chat"` is now `"inline"`
-
-The old names are accepted as deprecated aliases, so existing code will continue to work. Update when convenient.
-
-**Before:**
-
-```typescript
-const prompt = catalog.prompt({ mode: "generate" });
+// Chat mode prompt
 const chatPrompt = catalog.prompt({ mode: "chat" });
 ```

-**After:**
-
-```typescript
-const prompt = catalog.prompt({ mode: "standalone" });
-const inlinePrompt = catalog.prompt({ mode: "inline" });
-```
-
-The default mode (when no `mode` option is provided) is `"standalone"`, which behaves identically to the previous `"generate"` default.
-
 ## Validation

 `ValidationCheck` now uses `type` instead of `fn`, `ValidationProvider` uses `customFunctions` instead of `functions`, and `useFieldValidation` takes a config object instead of a checks array.
@@ -355,19 +315,11 @@ The default mode (when no `mode` option is provided) is `"standalone"`, which be
 { "type": "minLength", "args": { "min": 8 }, "message": "Too short" }
 ```

-<table>
-<thead>
-<tr>
-<th>Before</th>
-<th>After</th>
-</tr>
-</thead>
-<tbody>
-<tr><td><code>{'{ fn: "required" }'}</code></td><td><code>{'{ type: "required" }'}</code></td></tr>
-<tr><td><code>{'ValidationProvider functions={...}'}</code></td><td><code>{'ValidationProvider customFunctions={...}'}</code></td></tr>
-<tr><td><code>useFieldValidation(path, checks)</code></td><td><code>useFieldValidation(path, config)</code> where config is <code>{'{ checks, validateOn? }'}</code></td></tr>
-</tbody>
-</table>
+| Before | After |
+|--------|-------|
+| `{ fn: "required" }` | `{ type: "required" }` |
+| `ValidationProvider functions={...}` | `ValidationProvider customFunctions={...}` |
+| `useFieldValidation(path, checks)` | `useFieldValidation(path, config)` where config is `{ checks, validateOn? }` |

 ## Visibility Provider

@@ -446,57 +398,16 @@ Action params in specs now use `statePath` instead of `path`.

 The following exports have been removed from `@json-render/core`:

-<table>
-  <thead>
-    <tr>
-      <th>Removed</th>
-      <th>Replacement</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>createCatalog</code></td>
-      <td><code>defineCatalog(schema, config)</code></td>
-    </tr>
-    <tr>
-      <td><code>generateCatalogPrompt</code></td>
-      <td><code>catalog.prompt()</code></td>
-    </tr>
-    <tr>
-      <td><code>generateSystemPrompt</code></td>
-      <td><code>catalog.prompt()</code></td>
-    </tr>
-    <tr>
-      <td><code>ComponentDefinition</code></td>
-      <td>Use catalog component config directly</td>
-    </tr>
-    <tr>
-      <td><code>CatalogConfig</code></td>
-      <td>Use <code>defineCatalog</code> parameters</td>
-    </tr>
-    <tr>
-      <td><code>SystemPromptOptions</code></td>
-      <td>Use <code>PromptOptions</code></td>
-    </tr>
-    <tr>
-      <td><code>LogicExpression</code></td>
-      <td>Use <code>VisibilityCondition</code></td>
-    </tr>
-    <tr>
-      <td><code>AuthState</code></td>
-      <td>Model auth as regular state (e.g. <code>/auth/isSignedIn</code>)</td>
-    </tr>
-    <tr>
-      <td><code>evaluateLogicExpression</code></td>
-      <td>Use <code>evaluateVisibility</code></td>
-    </tr>
-    <tr>
-      <td><code>createRendererFromCatalog</code></td>
-      <td>Use <code>defineRegistry</code></td>
-    </tr>
-    <tr>
-      <td><code>traverseTree</code> (codegen)</td>
-      <td>Use <code>traverseSpec</code></td>
-    </tr>
-  </tbody>
-</table>
+| Removed | Replacement |
+|---------|-------------|
+| `createCatalog` | `defineCatalog(schema, config)` |
+| `generateCatalogPrompt` | `catalog.prompt()` |
+| `generateSystemPrompt` | `catalog.prompt()` |
+| `ComponentDefinition` | Use catalog component config directly |
+| `CatalogConfig` | Use `defineCatalog` parameters |
+| `SystemPromptOptions` | Use `PromptOptions` |
+| `LogicExpression` | Use `VisibilityCondition` |
+| `AuthState` | Model auth as regular state (e.g. `/auth/isSignedIn`) |
+| `evaluateLogicExpression` | Use `evaluateVisibility` |
+| `createRendererFromCatalog` | Use `defineRegistry` |
+| `traverseTree` (codegen) | Use `traverseSpec` |
@@ -1,6 +1,7 @@
---
-title: "OpenAPI Integration"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/openapi")
+
+# OpenAPI Integration

 Use json-render to generate dynamic forms and UIs from [OpenAPI/Swagger](https://swagger.io/specification/) schemas.

@@ -99,7 +100,7 @@ Create components that map to OpenAPI data types:

 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';
 import { z } from 'zod';

 export const openapiCatalog = defineCatalog(schema, {
@@ -1,6 +1,7 @@
---
-title: "Introduction"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs")
+
+# Introduction

 json-render is a framework for **Generative UI** — AI-generated interfaces that are safe, predictable, and render natively on any platform.

@@ -22,7 +23,7 @@ A catalog declares what AI can use: components with typed props, actions with ty

 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';
 import { z } from 'zod';

 export const catalog = defineCatalog(schema, {
@@ -90,7 +91,7 @@ The result is a native UI built from your own components — not an iframe, not
 - **[Streaming](/docs/streaming)** — Render progressively as the AI responds. Each JSONL patch adds to the spec and the UI updates in real time.
 - **[Data Binding](/docs/data-binding)** — Bind props to runtime data with `$state` paths, repeat elements over arrays, and wire two-way input bindings.
 - **[Visibility](/docs/visibility)** — Show or hide elements based on state conditions. The AI can generate conditional UIs without writing logic.
- **[Generation Modes](/docs/generation-modes)** — Standalone mode for full-page generated UI or inline mode for UI embedded in a conversation.
+- **[Generation Modes](/docs/generation-modes)** — Generate standalone UI (playground/builder) or inline UI within a chat conversation.

 ## Next

@@ -1,6 +1,7 @@
---
-title: "Quick Start"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/quick-start")
+
+# Quick Start

 Get up and running with json-render in 5 minutes.

@@ -11,7 +12,7 @@ Create a catalog that defines what components AI can use:
 ```typescript
 // lib/catalog.ts
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';
 import { z } from 'zod';

 export const catalog = defineCatalog(schema, {
@@ -1,14 +1,14 @@
---
-title: "Registry"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/registry")

-A registry maps your [catalog](/docs/catalog) definitions to platform-specific implementations. The catalog defines _what_ AI can generate; the registry provides the _how_.
+# Registry
+
+A registry maps your [catalog](/docs/catalog) definitions to platform-specific implementations. The catalog defines *what* AI can generate — the registry provides the *how*.

 What a registry contains depends on the schema you use. Each package defines its own schema, which determines the shape of both the catalog and the registry.

 - **`@json-render/react`** — Components (React elements) and action handlers
 - **`@json-render/react-native`** — Components (React Native elements) and action handlers
- **`@json-render/react-email`** — Email components (React Email / HTML)
 - **`@json-render/remotion`** — Clip components, transitions, and effects

 ## @json-render/react
@@ -18,8 +18,8 @@ What a registry contains depends on the schema you use. Each package defines its
 Use `defineRegistry` to create a type-safe registry from your catalog. Pass your components, actions, or both:

 ```tsx
-import { defineRegistry } from "@json-render/react";
-import { myCatalog } from "./catalog";
+import { defineRegistry } from '@json-render/react';
+import { myCatalog } from './catalog';

 export const { registry, handlers, executeAction } = defineRegistry(myCatalog, {
  components: {
@@ -32,14 +32,16 @@ export const { registry, handlers, executeAction } = defineRegistry(myCatalog, {
    ),

    Button: ({ props, emit }) => (
-      <button onClick={() => emit("press")}>{props.label}</button>
+      <button onClick={() => emit("press")}>
+        {props.label}
+      </button>
    ),
  },

  actions: {
    submit_form: async (params, setState) => {
-      const res = await fetch("/api/submit", {
-        method: "POST",
+      const res = await fetch('/api/submit', {
+        method: 'POST',
        body: JSON.stringify(params),
      });
      const result = await res.json();
@@ -66,36 +68,23 @@ Each component receives a `ComponentContext` object:

 ```typescript
 interface ComponentContext {
-  props: T; // Type-safe props from your catalog
-  children?: React.ReactNode; // Rendered children (for slot components)
-  slots?: Record<string, React.ReactNode>; // Rendered named slots
-  emit: (event: string) => void; // Emit a named event (always defined)
-  on: (event: string) => EventHandle; // Get event handle with metadata
-  loading?: boolean; // Whether the renderer is in a loading state
-  bindings?: Record<string, string>; // State paths from $bindState/$bindItem expressions
+  props: T;                                // Type-safe props from your catalog
+  children?: React.ReactNode;              // Rendered children (for slot components)
+  emit: (event: string) => void;           // Emit a named event (always defined)
+  on: (event: string) => EventHandle;      // Get event handle with metadata
+  loading?: boolean;                       // Whether the renderer is in a loading state
+  bindings?: Record<string, string>;       // State paths from $bindState/$bindItem expressions
 }

 interface EventHandle {
-  emit: () => void; // Fire the event
+  emit: () => void;              // Fire the event
  shouldPreventDefault: boolean; // Whether any binding requested preventDefault
-  bound: boolean; // Whether any handler is bound
+  bound: boolean;                // Whether any handler is bound
 }
 ```

 Props are automatically inferred from your catalog, so `props.title` is typed as `string` if your catalog defines it that way.

-For components with named slots, read the default content from `children` and other regions from `slots`:
-
-```tsx
-Layout: ({ children, slots }) => (
-  <div>
-    <header>{slots?.header}</header>
-    <main>{children}</main>
-    <footer>{slots?.footer}</footer>
-  </div>
-),
-```
-
 Use `emit("press")` for simple event firing. Use `on("click")` when you need to inspect event metadata:

 ```tsx
@@ -138,29 +127,27 @@ TextInput: ({ props, bindings }) => {

 ### Action Handlers

-Instead of AI generating arbitrary code, it declares _intent_ by name. Your application provides the implementation. This is a core guardrail.
+Instead of AI generating arbitrary code, it declares *intent* by name. Your application provides the implementation. This is a core guardrail.

 Actions are declared in your [catalog](/docs/catalog). The `@json-render/react` schema supports an `actions` key where you define what operations AI can trigger:

 ```typescript
-import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/react/schema";
-import { z } from "zod";
+import { defineCatalog } from '@json-render/core';
+import { schema } from '@json-render/react';
+import { z } from 'zod';

 const catalog = defineCatalog(schema, {
-  components: {
-    /* ... */
-  },
+  components: { /* ... */ },
  actions: {
    submit_form: {
      params: z.object({
        formId: z.string(),
      }),
-      description: "Submit a form",
+      description: 'Submit a form',
    },
    export_data: {
      params: z.object({
-        format: z.enum(["csv", "pdf", "json"]),
+        format: z.enum(['csv', 'pdf', 'json']),
      }),
    },
    navigate: {
@@ -178,8 +165,8 @@ Action handlers receive `(params, setState, state)` and are defined inside `defi
 export const { handlers, executeAction } = defineRegistry(catalog, {
  actions: {
    submit_form: async (params, setState) => {
-      const response = await fetch("/api/submit", {
-        method: "POST",
+      const response = await fetch('/api/submit', {
+        method: 'POST',
        body: JSON.stringify({ formId: params.formId }),
      });
      const result = await response.json();
@@ -231,14 +218,14 @@ For read-only state access (e.g. displaying a value from state), use `$state` ex
 Wire everything together with providers and the `<Renderer />` component:

 ```tsx
-import { useMemo, useRef } from "react";
+import { useMemo, useRef } from 'react';
 import {
  Renderer,
  StateProvider,
  VisibilityProvider,
  ActionProvider,
-} from "@json-render/react";
-import { registry, handlers } from "./registry";
+} from '@json-render/react';
+import { registry, handlers } from './registry';

 function App({ spec, state, setState }) {
  const stateRef = useRef(state);
@@ -247,11 +234,7 @@ function App({ spec, state, setState }) {
  setStateRef.current = setState;

  const actionHandlers = useMemo(
-    () =>
-      handlers(
-        () => setStateRef.current,
-        () => stateRef.current,
-      ),
+    () => handlers(() => setStateRef.current, () => stateRef.current),
    [],
  );

@@ -272,8 +255,8 @@ function App({ spec, state, setState }) {
 `@json-render/react-native` uses the same `defineRegistry` API. The only difference is that components return React Native elements instead of HTML:

 ```tsx
-import { defineRegistry } from "@json-render/react-native";
-import { View, Text, Pressable } from "react-native";
+import { defineRegistry } from '@json-render/react-native';
+import { View, Text, Pressable } from 'react-native';

 export const { registry } = defineRegistry(catalog, {
  components: {
@@ -295,40 +278,15 @@ export const { registry } = defineRegistry(catalog, {

 See the [@json-render/react-native API reference](/docs/api/react-native) for the full API.

-## @json-render/react-email
-
-`@json-render/react-email` uses `defineRegistry` like React and React Native. Components render to React Email primitives (`@react-email/components`). Use `renderToHtml` or `renderToPlainText` for server-side email output:
-
-```tsx
-import { defineRegistry } from "@json-render/react-email";
-import { renderToHtml } from "@json-render/react-email";
-import { Body, Container, Heading, Text } from "@react-email/components";
-
-export const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: ({ props, children }) => (
-      <Container style={{ padding: 16, backgroundColor: "#fff" }}>
-        <Heading>{props.title}</Heading>
-        {children}
-      </Container>
-    ),
-  },
-});
-
-const html = await renderToHtml(spec, { registry });
-```
-
-See the [@json-render/react-email API reference](/docs/api/react-email) for the full API.
-
 ## @json-render/remotion

 `@json-render/remotion` takes a different approach. Instead of `defineRegistry`, it uses a plain component registry with built-in standard components for video production:

 ```tsx
-import { Renderer, standardComponents } from "@json-render/remotion";
+import { Renderer, standardComponents } from '@json-render/remotion';

 // Use the standard components directly
-<Renderer spec={timelineSpec} components={standardComponents} />;
+<Renderer spec={timelineSpec} components={standardComponents} />

 // Or extend with your own
 const components = {
@@ -1,6 +1,7 @@
---
-title: "Schemas"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/schemas")
+
+# Schemas

 Schemas define the structure and validation rules for your UI specs.

@@ -1,6 +1,7 @@
---
-title: "Specs"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/specs")
+
+# Specs

 A spec is a JSON document that describes your UI.

@@ -59,10 +60,7 @@ A more complex spec with multiple nested elements:
    },
    "avatar-1": {
      "type": "Avatar",
-      "props": {
-        "src": { "$state": "/user/avatar" },
-        "alt": { "$state": "/user/name" }
-      },
+      "props": { "src": { "$state": "/user/avatar" }, "alt": { "$state": "/user/name" } },
      "children": []
    },
    "stack-1": {
@@ -104,10 +102,7 @@ A high-level spec using semantic blocks for page layouts:
    },
    "header": {
      "type": "Header",
-      "props": {
-        "logo": "/logo.svg",
-        "navItems": ["Products", "Pricing", "Docs"]
-      },
+      "props": { "logo": "/logo.svg", "navItems": ["Products", "Pricing", "Docs"] },
      "children": []
    },
    "hero": {
@@ -127,37 +122,22 @@ A high-level spec using semantic blocks for page layouts:
    },
    "feature-1": {
      "type": "Feature",
-      "props": {
-        "icon": "zap",
-        "title": "Fast",
-        "description": "Render UIs in milliseconds"
-      },
+      "props": { "icon": "zap", "title": "Fast", "description": "Render UIs in milliseconds" },
      "children": []
    },
    "feature-2": {
      "type": "Feature",
-      "props": {
-        "icon": "shield",
-        "title": "Secure",
-        "description": "Validate all specs against your catalog"
-      },
+      "props": { "icon": "shield", "title": "Secure", "description": "Validate all specs against your catalog" },
      "children": []
    },
    "feature-3": {
      "type": "Feature",
-      "props": {
-        "icon": "sparkles",
-        "title": "AI-Ready",
-        "description": "Generate prompts from your catalog"
-      },
+      "props": { "icon": "sparkles", "title": "AI-Ready", "description": "Generate prompts from your catalog" },
      "children": []
    },
    "footer": {
      "type": "Footer",
-      "props": {
-        "copyright": "2025 Acme Inc",
-        "links": ["Privacy", "Terms", "Contact"]
-      },
+      "props": { "copyright": "2025 Acme Inc", "links": ["Privacy", "Terms", "Contact"] },
      "children": []
    }
  }
@@ -194,18 +174,13 @@ Each element in the map has a consistent shape:
 {
  "type": "ComponentName",
  "props": { "label": "Hello" },
-  "children": ["child-1", "child-2"],
-  "slots": {
-    "header": ["heading-1"],
-    "footer": ["actions-1"]
-  }
+  "children": ["child-1", "child-2"]
 }
 ```

 - `type` — Component type from your catalog
 - `props` — Component properties
 - `children` — Array of child element keys
- `slots`: Optional map of named slots to child element keys. Use `children` for the default slot. Named slot rendering is supported by `@json-render/react` and `@json-render/vue`.

 ### Dynamic Data

@@ -250,12 +225,12 @@ Control when elements appear using the `visible` property:
 Use `validateSpec` from `@json-render/core` to check a spec for structural issues:

 ```typescript
-import { validateSpec } from "@json-render/core";
+import { validateSpec } from '@json-render/core';

 const result = validateSpec(spec);

 if (!result.valid) {
-  console.error("Invalid spec:", result.issues);
+  console.error('Invalid spec:', result.issues);
 }
 ```

@@ -264,12 +239,8 @@ if (!result.valid) {
 With `@json-render/react`, wrap the `Renderer` in providers to supply state and visibility:

 ```tsx
-import {
-  Renderer,
-  StateProvider,
-  VisibilityProvider,
-} from "@json-render/react";
-import { registry } from "./registry";
+import { Renderer, StateProvider, VisibilityProvider } from '@json-render/react';
+import { registry } from './registry';

 function MyApp({ spec, initialState }) {
  return (
@@ -289,14 +260,20 @@ See the [@json-render/react API reference](/docs/api/react) for full provider an
 With `@json-render/react`, use the `useUIStream` hook to stream specs incrementally:

 ```tsx
-import { useUIStream } from "@json-render/react";
+import { useUIStream } from '@json-render/react';

 function GenerativeUI() {
  const { spec, isStreaming } = useUIStream({
-    api: "/api/generate",
+    api: '/api/generate',
  });

-  return <Renderer spec={spec} registry={registry} loading={isStreaming} />;
+  return (
+    <Renderer
+      spec={spec}
+      registry={registry}
+      loading={isStreaming}
+    />
+  );
 }
 ```

@@ -1,6 +1,7 @@
---
-title: "Streaming"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/streaming")
+
+# Streaming

 Progressively render UI as AI generates it.

@@ -0,0 +1,156 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/validation")
+
+# Validation
+
+Validate form inputs with built-in and custom functions.
+
+## Built-in Validators
+
+json-render includes common validation functions:
+
+- `required` — Value must be non-empty
+- `email` — Valid email format
+- `minLength` — Minimum string length
+- `maxLength` — Maximum string length
+- `pattern` — Match a regex pattern
+- `min` — Minimum numeric value
+- `max` — Maximum numeric value
+
+## Using Validation in JSON
+
+Use `{ "$bindState": "/path" }` on the value prop for two-way binding. Validation checks run against the value at the bound path (available as `bindings?.value` in components):
+
+```json
+{
+  "type": "TextField",
+  "props": {
+    "label": "Email",
+    "value": { "$bindState": "/form/email" },
+    "checks": [
+      { "type": "required", "message": "Email is required" },
+      { "type": "email", "message": "Invalid email format" }
+    ],
+    "validateOn": "blur"
+  }
+}
+```
+
+## Validation with Parameters
+
+```json
+{
+  "type": "TextField",
+  "props": {
+    "label": "Password",
+    "value": { "$bindState": "/form/password" },
+    "checks": [
+      { "type": "required", "message": "Password is required" },
+      { 
+        "type": "minLength", 
+        "args": { "min": 8 },
+        "message": "Password must be at least 8 characters"
+      },
+      {
+        "type": "pattern",
+        "args": { "pattern": "[A-Z]" },
+        "message": "Must contain at least one uppercase letter"
+      }
+    ]
+  }
+}
+```
+
+## Custom Validation Functions
+
+Define custom validators in your catalog's `functions` field. The catalog itself is framework-agnostic — only the `schema` import varies by platform:
+
+```typescript
+import { defineCatalog } from '@json-render/core';
+import { schema } from '@json-render/react'; // or '@json-render/react-native'
+import { z } from 'zod';
+
+const catalog = defineCatalog(schema, {
+  components: { /* ... */ },
+  functions: {
+    isValidPhone: {
+      description: 'Validates phone number format',
+    },
+    isUniqueEmail: {
+      description: 'Checks if email is not already registered',
+    },
+  },
+});
+```
+
+## Usage with React
+
+In `@json-render/react`, use `ValidationProvider` to supply implementations for your custom validators:
+
+```tsx
+import { ValidationProvider } from '@json-render/react';
+
+function App() {
+  const customValidators = {
+    isValidPhone: (value) => {
+      const phoneRegex = /^\+?[1-9]\d{1,14}$/;
+      return phoneRegex.test(value);
+    },
+    isUniqueEmail: async (value) => {
+      const response = await fetch(`/api/check-email?email=${value}`);
+      const { available } = await response.json();
+      return available;
+    },
+  };
+
+  return (
+    <ValidationProvider customFunctions={customValidators}>
+      {/* Your UI */}
+    </ValidationProvider>
+  );
+}
+```
+
+### Using in Components
+
+The `useFieldValidation` and `useBoundProp` hooks wire validation into your registry components. Validation uses the path from `bindings?.value` (the bound state path):
+
+```tsx
+import { useFieldValidation, useBoundProp } from '@json-render/react';
+
+function TextField({ props, bindings }) {
+  const [value, setValue] = useBoundProp(props.value, bindings?.value);
+  const { errors, isValid, validate, touch, clear } = useFieldValidation(
+    bindings?.value ?? null,
+    { checks: props.checks, validateOn: props.validateOn }
+  );
+
+  return (
+    <div>
+      <label>{props.label}</label>
+      <input
+        value={value || ''}
+        onChange={(e) => setValue(e.target.value)}
+        onBlur={() => validate()}
+      />
+      {errors.map((error, i) => (
+        <p key={i} className="text-red-500 text-sm">{error}</p>
+      ))}
+    </div>
+  );
+}
+```
+
+See the [@json-render/react API reference](/docs/api/react) for full `ValidationProvider` and `useFieldValidation` documentation.
+
+## Validation Timing
+
+Control when validation runs with `validateOn`:
+
+- `change` — Validate on every input change
+- `blur` — Validate when field loses focus
+- `submit` — Validate only on form submission
+
+## Next
+
+Learn about [generation modes](/docs/generation-modes).
@@ -1,6 +1,7 @@
---
-title: "Visibility"
---
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/visibility")
+
+# Visibility

 Conditionally show or hide components based on state values and logic.

@@ -198,24 +199,6 @@ With comparison:

 This shows the divider for every item except the first (index 0).

-### Filtered lists — `$item` on the repeat container
-
-Putting an `$item` condition directly on the element that declares `repeat` filters which items render. This is the natural way to build kanban columns, tabbed lists, or status sections from one state array:
-
-```json
-{
-  "type": "Stack",
-  "repeat": { "statePath": "/tasks", "key": "id" },
-  "visible": { "$item": "status", "eq": "todo" },
-  "children": ["task-card"]
-}
-```
-
-One child renders per matching item; non-matching items are skipped. When the condition is an `$and` (or array) that mixes scopes, the `$state` parts gate the container itself (a false gate hides the whole shell) while the `$item`/`$index` parts filter items. A mixed `$or` cannot be split and is applied entirely per item.
-
-Filtered lists are currently implemented by the React renderer; other renderers evaluate the container condition outside the repeat scope.
-
-
 `$item` and `$index` conditions support the same comparison operators as `$state` (`eq`, `neq`, `gt`, `gte`, `lt`, `lte`, `not`).

 ## Complex Example
@@ -1,8 +0,0 @@
-import type { ReactNode } from "react";
-import { pageMetadata } from "@/lib/page-metadata";
-
-export const metadata = pageMetadata("examples");
-
-export default function ExamplesLayout({ children }: { children: ReactNode }) {
-  return children;
-}
@@ -1,133 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Badge } from "@/components/ui/badge";
-import { examples, allTags, getGitHubUrl, type Example } from "@/lib/examples";
-import { cn } from "@/lib/utils";
-
-function ExampleCard({ example }: { example: Example }) {
-  return (
-    <div className="group flex flex-col rounded-xl border border-border bg-card text-card-foreground overflow-hidden transition-colors hover:border-foreground/25">
-      <div className="flex flex-1 flex-col gap-3 p-5">
-        <h3 className="font-semibold leading-none">{example.title}</h3>
-
-        <p className="text-sm text-muted-foreground leading-relaxed">
-          {example.description}
-        </p>
-
-        <div className="flex flex-wrap gap-1.5">
-          {example.tags.map((tag) => (
-            <Badge key={tag} variant="secondary" className="text-[11px]">
-              {tag}
-            </Badge>
-          ))}
-        </div>
-
-        <div className="mt-auto flex items-center gap-3 pt-2">
-          {example.demoUrl && (
-            <a
-              href={example.demoUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1.5 text-sm text-foreground hover:text-primary transition-colors"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="14"
-                height="14"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path d="M15 3h6v6" />
-                <path d="M10 14 21 3" />
-                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-              </svg>
-              Live Demo
-            </a>
-          )}
-          <a
-            href={getGitHubUrl(example)}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
-          >
-            <svg
-              viewBox="0 0 16 16"
-              className="h-3.5 w-3.5"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-            </svg>
-            Source
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default function ExamplesPage() {
-  const [activeTag, setActiveTag] = useState<string | null>(null);
-
-  const filtered = activeTag
-    ? examples.filter((e) => e.tags.includes(activeTag))
-    : examples;
-
-  return (
-    <section className="mx-auto max-w-6xl px-6 py-16">
-      <div className="mb-10">
-        <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
-          Examples
-        </h1>
-        <p className="mt-3 text-lg text-muted-foreground">
-          Explore json-render across frameworks, renderers, and use cases.
-        </p>
-      </div>
-
-      <div className="mb-8 flex flex-wrap gap-2">
-        <button
-          onClick={() => setActiveTag(null)}
-          className={cn(
-            "rounded-full border px-3 py-1 text-xs font-medium transition-colors",
-            activeTag === null
-              ? "border-foreground bg-foreground text-background"
-              : "border-border text-muted-foreground hover:text-foreground hover:border-foreground/50",
-          )}
-        >
-          All
-        </button>
-        {allTags.map((tag) => (
-          <button
-            key={tag}
-            onClick={() => setActiveTag(activeTag === tag ? null : tag)}
-            className={cn(
-              "rounded-full border px-3 py-1 text-xs font-medium transition-colors",
-              activeTag === tag
-                ? "border-foreground bg-foreground text-background"
-                : "border-border text-muted-foreground hover:text-foreground hover:border-foreground/50",
-            )}
-          >
-            {tag}
-          </button>
-        ))}
-      </div>
-
-      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {filtered.map((example) => (
-          <ExampleCard key={example.slug} example={example} />
-        ))}
-      </div>
-
-      {filtered.length === 0 && (
-        <p className="py-12 text-center text-muted-foreground">
-          No examples match the selected filter.
-        </p>
-      )}
-    </section>
-  );
-}
@@ -1,7 +1,14 @@
+import { Header } from "@/components/header";
+
 export default function MainLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
-  return <main className="min-h-[calc(100dvh-4rem)]">{children}</main>;
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="flex-1">{children}</main>
+    </div>
+  );
 }
@@ -1,43 +0,0 @@
-import { MobileDocsBar } from "@vercel/geistdocs/mobile-docs-bar";
-import { createDocsPage } from "@vercel/geistdocs/pages/docs";
-import { notFound } from "next/navigation";
-import { GenerationModesDiagram } from "@/components/generation-modes-diagram";
-import { PackageInstall } from "@/components/package-install";
-import { isSafePathSegments } from "@/lib/docs-source";
-import { config } from "@/lib/geistdocs/config";
-import { geistdocsSource } from "@/lib/geistdocs/source";
-import { pageMetadata } from "@/lib/page-metadata";
-
-type PageProps = { params: Promise<{ lang: string; slug?: string[] }> };
-
-async function validate(params: PageProps["params"]) {
-  const resolved = await params;
-  if (resolved.lang !== "en" || !isSafePathSegments(resolved.slug ?? []))
-    notFound();
-  try {
-    if (!geistdocsSource.source.getPage(resolved.slug, resolved.lang))
-      notFound();
-  } catch (error) {
-    if (error instanceof URIError) notFound();
-    throw error;
-  }
-  return resolved;
-}
-
-const docsPage = createDocsPage({
-  config,
-  source: geistdocsSource,
-  mdx: { GenerationModesDiagram, PackageInstall },
-  renderTop: ({ data }) => <MobileDocsBar toc={data.toc} />,
-});
-
-export default async function Page({ params }: PageProps) {
-  return <docsPage.Page params={Promise.resolve(await validate(params))} />;
-}
-
-export async function generateMetadata({ params }: PageProps) {
-  const { slug = [] } = await validate(params);
-  return pageMetadata(["docs", ...slug].join("/"));
-}
-
-export const generateStaticParams = docsPage.generateStaticParams;
@@ -1,25 +0,0 @@
-import type { ReactNode } from "react";
-import { notFound } from "next/navigation";
-import { GeistdocsDocsLayout } from "@vercel/geistdocs/layout";
-import { config } from "@/lib/geistdocs/config";
-import { geistdocsSource } from "@/lib/geistdocs/source";
-
-export default async function DocsLayout({
-  children,
-  params,
-}: {
-  children: ReactNode;
-  params: Promise<{ lang: string }>;
-}) {
-  const { lang } = await params;
-  if (lang !== "en") notFound();
-  return (
-    <GeistdocsDocsLayout
-      config={config}
-      tree={geistdocsSource.source.getPageTree(lang)}
-      containerProps={{ className: "mx-auto max-w-[1448px]" }}
-    >
-      {children}
-    </GeistdocsDocsLayout>
-  );
-}
@@ -1,8 +1,11 @@
+import { readFile } from "fs/promises";
+import { join } from "path";
 import { convertToModelMessages, stepCountIs, streamText } from "ai";
 import type { ModelMessage, UIMessage } from "ai";
 import { createBashTool } from "bash-tool";
 import { headers } from "next/headers";
-import { loadAllDocsSources } from "@/lib/docs-source";
+import { allDocsPages } from "@/lib/docs-navigation";
+import { mdxToCleanMarkdown } from "@/lib/mdx-to-markdown";
 import { minuteRateLimit, dailyRateLimit } from "@/lib/rate-limit";

 export const maxDuration = 60;
@@ -13,10 +16,7 @@ const SYSTEM_PROMPT = `You are a helpful documentation assistant for json-render

 GitHub repository: https://github.com/vercel-labs/json-render
 Documentation: https://json-render.dev/docs
-npm packages: @json-render/core, @json-render/react, @json-render/next, @json-render/tanstack-start, @json-render/ink, @json-render/vue, @json-render/svelte, @json-render/solid, @json-render/shadcn, @json-render/shadcn-svelte, @json-render/react-three-fiber, @json-render/react-native, @json-render/react-email, @json-render/react-pdf, @json-render/image, @json-render/remotion, @json-render/directives, @json-render/codegen, @json-render/devtools, @json-render/devtools-react, @json-render/devtools-vue, @json-render/devtools-svelte, @json-render/devtools-solid, @json-render/mcp, @json-render/redux, @json-render/zustand, @json-render/jotai, @json-render/xstate, @json-render/yaml
-Skills: json-render ships AI agent skills that teach coding agents how to use each package. Install with "npx skills add vercel-labs/json-render --skill <name>". Available skills: core, react, next, tanstack-start, ink, react-pdf, react-email, react-native, shadcn, shadcn-svelte, react-three-fiber, image, remotion, vue, svelte, solid, directives, codegen, devtools, devtools-react, devtools-vue, devtools-svelte, devtools-solid, mcp, redux, zustand, jotai, xstate, yaml. See /docs/skills for details.
-
-Experimental Jev composition: core exports experimental_composeSpec and experimental_createEvaluator for app-owned catalogs/candidates through Vercel AI Gateway. See /docs/jev for availability, source-build setup, and limits; do not assume the currently published npm version includes it.
+npm packages: @json-render/core, @json-render/react, @json-render/remotion, @json-render/codegen

 You have access to the full json-render documentation via the bash and readFile tools. The docs are available as markdown files in the /workspace/docs/ directory.

@@ -31,13 +31,37 @@ When answering questions:
 - Do NOT use emojis in your responses`;

 async function loadDocsFiles(): Promise<Record<string, string>> {
-  const pages = await loadAllDocsSources();
-  return Object.fromEntries(
-    pages.map((page) => [
-      page.href === "/docs" ? "/docs/index.md" : `${page.href}.md`,
-      page.markdown,
-    ]),
+  const files: Record<string, string> = {};
+
+  const results = await Promise.allSettled(
+    allDocsPages.map(async (page) => {
+      const slug =
+        page.href === "/docs" ? "" : page.href.replace(/^\/docs\/?/, "");
+      const filePath = slug
+        ? join(
+            process.cwd(),
+            "app",
+            "(main)",
+            "docs",
+            ...slug.split("/"),
+            "page.mdx",
+          )
+        : join(process.cwd(), "app", "(main)", "docs", "page.mdx");
+
+      const raw = await readFile(filePath, "utf-8");
+      const md = mdxToCleanMarkdown(raw);
+      const fileName = slug ? `/docs/${slug}.md` : "/docs/index.md";
+      return { fileName, md };
+    }),
  );
+
+  for (const result of results) {
+    if (result.status === "fulfilled") {
+      files[result.value.fileName] = result.value.md;
+    }
+  }
+
+  return files;
 }

 function addCacheControl(messages: ModelMessage[]): ModelMessage[] {
@@ -1,25 +1,55 @@
+import { readFile } from "fs/promises";
+import { join } from "path";
 import { NextRequest, NextResponse } from "next/server";
-import { loadDocsSource } from "@/lib/docs-source";
+import { mdxToCleanMarkdown } from "@/lib/mdx-to-markdown";

 export async function GET(req: NextRequest) {
-  const docPath = req.nextUrl.searchParams.get("path");
-  if (!docPath)
+  const { searchParams } = new URL(req.url);
+  const docPath = searchParams.get("path");
+
+  if (!docPath) {
    return NextResponse.json(
      { error: "Missing ?path= parameter" },
      { status: 400 },
    );
-  const path = docPath.startsWith("/") ? docPath : `/${docPath}`;
-  if (!/^\/docs(?:\/[a-zA-Z0-9_-]+)*\/?$/.test(path)) {
+  }
+
+  // Sanitize path: only allow docs paths, no traversal
+  const normalized = docPath
+    .replace(/^\//, "")
+    .replace(/\.\./g, "")
+    .replace(/[^a-zA-Z0-9/-]/g, "");
+
+  if (!normalized.startsWith("docs")) {
    return NextResponse.json({ error: "Invalid path" }, { status: 400 });
  }
-  const page = await loadDocsSource(path);
-  if (!page)
+
+  // Map URL path to file path
+  // /docs -> /app/(main)/docs/page.mdx
+  // /docs/installation -> /app/(main)/docs/installation/page.mdx
+  const slug = normalized === "docs" ? "" : normalized.replace(/^docs\/?/, "");
+  const filePath = slug
+    ? join(
+        process.cwd(),
+        "app",
+        "(main)",
+        "docs",
+        ...slug.split("/"),
+        "page.mdx",
+      )
+    : join(process.cwd(), "app", "(main)", "docs", "page.mdx");
+
+  try {
+    const raw = await readFile(filePath, "utf-8");
+    const markdown = mdxToCleanMarkdown(raw);
+
+    return new NextResponse(markdown, {
+      headers: {
+        "Content-Type": "text/markdown; charset=utf-8",
+        "Cache-Control": "public, max-age=3600",
+      },
+    });
+  } catch {
    return NextResponse.json({ error: "Page not found" }, { status: 404 });
-  return new NextResponse(page.markdown, {
-    headers: {
-      "Content-Type": "text/markdown; charset=utf-8",
-      "Cache-Control": "public, max-age=3600",
-      Link: `<${page.canonicalUrl}>; rel="canonical"`,
-    },
-  });
+  }
 }
@@ -1,21 +0,0 @@
-import { loadDocsSource, isSafePathSegments } from "@/lib/docs-source";
-import { applyDocsResponseHeaders } from "@/lib/docs-response-headers";
-
-export async function GET(
-  _request: Request,
-  { params }: { params: Promise<{ slug?: string[] }> },
-) {
-  const { slug = [] } = await params;
-  const path = `/docs${slug.length ? `/${slug.join("/")}` : ""}`;
-  const page = isSafePathSegments(slug) ? await loadDocsSource(path) : null;
-  const headers = new Headers({
-    "Content-Type": "text/markdown; charset=utf-8",
-  });
-  applyDocsResponseHeaders(headers);
-  if (page) headers.set("Link", `<${page.canonicalUrl}>; rel="canonical"`);
-  return new Response(
-    page?.markdown ??
-      "# Page Not Found\n\nSee [the documentation index](/llms.txt).\n",
-    { status: page ? 200 : 404, headers },
-  );
-}
@@ -1,77 +1,32 @@
 import { streamText } from "ai";
 import { headers } from "next/headers";
-import type { Spec, EditMode } from "@json-render/core";
-import {
-  buildUserPrompt,
-  buildEditUserPrompt,
-  isNonEmptySpec,
-} from "@json-render/core";
-import { yamlPrompt } from "@json-render/yaml";
-import { stringify as yamlStringify } from "yaml";
+import { buildUserPrompt } from "@json-render/core";
 import { minuteRateLimit, dailyRateLimit } from "@/lib/rate-limit";
 import { playgroundCatalog } from "@/lib/render/catalog";
-import { createCompositionResponse } from "@/lib/jev/response";

-export const maxDuration = 60;
+export const maxDuration = 30;

-const PLAYGROUND_RULES = [
-  "NEVER use viewport height classes (min-h-screen, h-screen) - the UI renders inside a fixed-size container.",
-  "NEVER use page background colors (bg-gray-50) - the container has its own background.",
-  "For forms or small UIs: use Card as root with maxWidth:'sm' or 'md' and centered:true.",
-  "For content-heavy UIs (blogs, dashboards, product listings): use Stack or Grid as root. Use Grid with 2-3 columns for card layouts. Keep the total UI compact — avoid sprawling multi-section pages. Prefer a single focused Card over a full page layout.",
-  "Wrap each repeated item in a Card for visual separation and structure.",
-  "Use realistic, professional sample data. Include 3-5 items with varied content. Never leave state arrays empty.",
-  'For form inputs (Input, Textarea, Select), always include checks for validation (e.g. required, email, minLength). Always pair checks with a $bindState expression on the value prop (e.g. { "$bindState": "/path" }).',
-  "NEVER use emoji characters. Use the Icon component with Lucide icon names instead. For example, use Icon with name:'MapPin' instead of a pin emoji, Icon with name:'Mail' instead of an envelope emoji, etc.",
-  "For icon+label patterns, use a horizontal Stack with gap:'sm' and align:'center' containing an Icon and a Text.",
-  "For any tabular or list data with consistent columns (items, orders, stats), ALWAYS use the Table component. Never simulate tables with Stacks — the columns won't align.",
-];
+const SYSTEM_PROMPT = playgroundCatalog.prompt({
+  customRules: [
+    "NEVER use viewport height classes (min-h-screen, h-screen) - the UI renders inside a fixed-size container.",
+    "NEVER use page background colors (bg-gray-50) - the container has its own background.",
+    "For forms or small UIs: use Card as root with maxWidth:'sm' or 'md' and centered:true.",
+    "For content-heavy UIs (blogs, dashboards, product listings): use Stack or Grid as root. Use Grid with 2-3 columns for card layouts.",
+    "Wrap each repeated item in a Card for visual separation and structure.",
+    "Use realistic, professional sample data. Include 3-5 items with varied content. Never leave state arrays empty.",
+    'For form inputs (Input, Textarea, Select), always include checks for validation (e.g. required, email, minLength). Always pair checks with a $bindState expression on the value prop (e.g. { "$bindState": "/path" }).',
+  ],
+});

 const MAX_PROMPT_LENGTH = 500;
 const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";

-function getSystemPrompt(isYaml: boolean, editModes?: EditMode[]): string {
-  if (isYaml) {
-    return yamlPrompt(playgroundCatalog, {
-      mode: "standalone",
-      customRules: PLAYGROUND_RULES,
-      editModes: editModes ?? ["merge"],
-    });
-  }
-  return playgroundCatalog.prompt({
-    customRules: PLAYGROUND_RULES,
-    editModes,
-  });
-}
-
-function buildYamlUserPrompt(
-  prompt: string,
-  previousSpec?: Spec | null,
-  editModes?: EditMode[],
-): string {
-  if (isNonEmptySpec(previousSpec)) {
-    return buildEditUserPrompt({
-      prompt,
-      currentSpec: previousSpec,
-      config: { modes: editModes ?? ["merge"] },
-      format: "yaml",
-      maxPromptLength: MAX_PROMPT_LENGTH,
-      serializer: (s) => yamlStringify(s, { indent: 2 }).trimEnd(),
-    });
-  }
-
-  const userText = prompt.slice(0, MAX_PROMPT_LENGTH);
-  return [
-    userText,
-    "",
-    "Output the full spec in a ```yaml-spec fence. Stream progressively — output elements one at a time.",
-  ].join("\n");
-}
-
 export async function POST(req: Request) {
+  // Get client IP for rate limiting
  const headersList = await headers();
  const ip = headersList.get("x-forwarded-for")?.split(",")[0] ?? "anonymous";

+  // Check rate limits (minute and daily)
  const [minuteResult, dailyResult] = await Promise.all([
    minuteRateLimit.limit(ip),
    dailyRateLimit.limit(ip),
@@ -93,37 +48,22 @@ export async function POST(req: Request) {
    );
  }

-  const { prompt, context, format, editModes, model } = await req.json();
-  if (model === "typesafe-ai/jev")
-    return createCompositionResponse(req, prompt, context?.previousSpec);
-  const isYaml = format === "yaml";
+  const { prompt, context } = await req.json();

-  const systemPrompt = getSystemPrompt(isYaml, editModes);
-  const userPrompt = isYaml
-    ? buildYamlUserPrompt(prompt, context?.previousSpec, editModes)
-    : buildUserPrompt({
-        prompt,
-        currentSpec: context?.previousSpec,
-        maxPromptLength: MAX_PROMPT_LENGTH,
-        editModes,
-      });
+  const userPrompt = buildUserPrompt({
+    prompt,
+    currentSpec: context?.previousSpec,
+    maxPromptLength: MAX_PROMPT_LENGTH,
+  });

  const result = streamText({
    model: process.env.AI_GATEWAY_MODEL || DEFAULT_MODEL,
-    abortSignal: req.signal,
-    system: [
-      {
-        role: "system",
-        content: systemPrompt,
-        providerOptions: {
-          anthropic: { cacheControl: { type: "ephemeral" } },
-        },
-      },
-    ],
+    system: SYSTEM_PROMPT,
    prompt: userPrompt,
    temperature: 0.7,
  });

+  // Stream the text, then append token usage metadata at the end
  const encoder = new TextEncoder();
  const textStream = result.textStream;

@@ -132,6 +72,7 @@ export async function POST(req: Request) {
      for await (const chunk of textStream) {
        controller.enqueue(encoder.encode(chunk));
      }
+      // Append usage metadata after stream completes
      try {
        const usage = await result.usage;
        const meta = JSON.stringify({
@@ -139,12 +80,10 @@ export async function POST(req: Request) {
          promptTokens: usage.inputTokens,
          completionTokens: usage.outputTokens,
          totalTokens: usage.totalTokens,
-          cachedTokens: usage.inputTokenDetails?.cacheReadTokens ?? 0,
-          cacheWriteTokens: usage.inputTokenDetails?.cacheWriteTokens ?? 0,
        });
        controller.enqueue(encoder.encode(`\n${meta}\n`));
      } catch {
-        // Usage not available
+        // Usage not available — skip silently
      }
      controller.close();
    },
@@ -1,7 +0,0 @@
-import { createMcpRoute } from "@vercel/geistdocs/routes/mcp";
-import { config } from "@/lib/geistdocs/config";
-import { GET as search } from "../search/route";
-
-const handler = createMcpRoute({ config, search });
-
-export { handler as GET, handler as POST };
@@ -1,80 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { getSearchIndex } from "@/lib/search-index";
-import { createSearchRoute } from "@vercel/geistdocs/routes/search";
-import { geistdocsSource } from "@/lib/geistdocs/source";
-import { config } from "@/lib/geistdocs/config";
-
-const docsSearch = createSearchRoute({ config, source: geistdocsSource });
-
-export async function GET(req: NextRequest) {
-  if (req.nextUrl.searchParams.has("query")) return docsSearch(req);
-  const q = req.nextUrl.searchParams.get("q")?.trim().toLowerCase();
-
-  if (!q) {
-    return NextResponse.json({ results: [] });
-  }
-
-  const index = await getSearchIndex();
-  const terms = q.split(/\s+/).filter(Boolean);
-
-  const results = index
-    .map((entry) => {
-      const titleLower = entry.title.toLowerCase();
-      const contentLower = entry.content.toLowerCase();
-
-      const titleMatch = terms.every((t) => titleLower.includes(t));
-      const contentMatch = terms.every((t) => contentLower.includes(t));
-
-      if (!titleMatch && !contentMatch) return null;
-
-      let snippet = "";
-      if (contentMatch) {
-        const firstTermIdx = Math.min(
-          ...terms.map((t) => {
-            const idx = contentLower.indexOf(t);
-            return idx === -1 ? Infinity : idx;
-          }),
-        );
-        if (firstTermIdx !== Infinity) {
-          const start = Math.max(0, firstTermIdx - 40);
-          const end = Math.min(entry.content.length, firstTermIdx + 120);
-          snippet =
-            (start > 0 ? "..." : "") +
-            entry.content.slice(start, end).replace(/\n/g, " ") +
-            (end < entry.content.length ? "..." : "");
-        }
-      }
-
-      return {
-        title: entry.title,
-        href: entry.href,
-        section: entry.section,
-        snippet,
-        score: titleMatch ? 2 : 1,
-      };
-    })
-    .filter(
-      (
-        r,
-      ): r is {
-        title: string;
-        href: string;
-        section: string;
-        snippet: string;
-        score: number;
-      } => r !== null,
-    )
-    .sort((a, b) => b.score - a.score)
-    .slice(0, 20)
-    .map(({ title, href, section, snippet }) => ({
-      title,
-      href,
-      section,
-      snippet,
-    }));
-
-  return NextResponse.json(
-    { results },
-    { headers: { "Cache-Control": "public, max-age=60" } },
-  );
-}
@@ -1,16 +1,9 @@
-@import "@vercel/geistdocs/styles.css";
-
-@theme {
-  --breakpoint-sm: 40rem;
-  --breakpoint-md: 48rem;
-  --breakpoint-lg: 64rem;
-  --breakpoint-xl: 80rem;
-  --breakpoint-2xl: 96rem;
-}
+@import "tailwindcss";
+@import "tw-animate-css";

@source "../node_modules/streamdown/dist/index.js";

-@custom-variant dark (&:is(.dark-theme *));
+@custom-variant dark (&:is(.dark *));

 :root {
  --radius: 0.5rem;
@@ -38,7 +31,7 @@
  --chat-bg: oklch(0.95 0 0);
 }

-.dark-theme {
+.dark {
  --ds-gray-500: oklch(0.39 0 0);
  /* Monochrome dark theme */
  --background: oklch(0.0 0 0);
@@ -196,31 +189,9 @@ article table {
  background-color: var(--shiki-light-bg) !important;
 }

-.dark-theme .shiki,
-.dark-theme .shiki span {
+.dark .shiki,
+.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
 }

-@container (width < 1200px) {
-  #nd-page { @apply px-6 pt-6; }
-  #nd-page > [data-mobile-docs-bar],
-  #nd-page > div:has([data-mobile-toc-trigger]) { display: flex; }
-  #nd-page [data-mobile-toc-trigger] { width: 44px; height: 44px; }
-  #nd-page > div:has(> h1) { padding-inline-end: 3.5rem; }
-  #nd-page > div:has(> h1) + div,
-  #nd-page > div:has(> h1) + p + div { margin-top: 0; }
-}
-
-@container (961px <= width < 1200px) {
-  #nd-page > [data-mobile-docs-bar] { display: none; }
-}
-
-header .pointer-events-none.opacity-0 {
-  visibility: hidden;
-}
-
-#nd-page div:has(> [aria-live="polite"]) > div > .max-sm\:hidden {
-  display: flex;
-}
-
@@ -3,16 +3,11 @@ import localFont from "next/font/local";
 import { GeistPixelSquare } from "geist/font/pixel";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
-import { DocsProvider } from "@/components/geistdocs-provider";
-import { Navbar } from "@vercel/geistdocs/navbar";
-import { Footer } from "@vercel/geistdocs/footer";
-import { config } from "@/lib/geistdocs/config";
 import { DocsChat } from "@/components/docs-chat";
 import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { PAGE_TITLES } from "@/lib/page-titles";
 import { cookies } from "next/headers";
-import { isPreview, siteUrl, siteDescription } from "@/lib/site";

 const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
@@ -24,8 +19,7 @@ const geistMono = localFont({
 });

 export const metadata: Metadata = {
-  metadataBase: new URL(siteUrl),
-  alternates: { canonical: "/" },
+  metadataBase: new URL("https://json-render.dev"),
  title: {
    default: `json-render | ${PAGE_TITLES[""]}`,
    template: "%s | json-render",
@@ -70,8 +64,8 @@ export const metadata: Metadata = {
    images: ["/og"],
  },
  robots: {
-    index: !isPreview,
-    follow: !isPreview,
+    index: true,
+    follow: true,
  },
  icons: {
    icon: "/favicon.ico",
@@ -85,30 +79,15 @@ export default async function RootLayout({
 }>) {
  const cookieStore = await cookies();
  const chatOpen = cookieStore.get("docs-chat-open")?.value === "true";
-  const chatWidth = Math.min(
-    700,
-    Math.max(300, Number(cookieStore.get("docs-chat-width")?.value) || 400),
-  );
+  const chatWidth = Number(cookieStore.get("docs-chat-width")?.value) || 400;

  return (
    <html lang="en" suppressHydrationWarning>
      <head>
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify({
-              "@context": "https://schema.org",
-              "@type": "WebSite",
-              name: "json-render",
-              url: siteUrl,
-              description: siteDescription,
-            }),
-          }}
-        />
        {chatOpen && (
          <style
            dangerouslySetInnerHTML={{
-              __html: `@media(min-width:640px){body{padding-right:min(${chatWidth}px, calc(100vw - 320px))}}`,
+              __html: `@media(min-width:640px){body{padding-right:${chatWidth}px}}`,
            }}
          />
        )}
@@ -117,11 +96,7 @@ export default async function RootLayout({
        className={`${geistSans.variable} ${geistMono.variable} ${GeistPixelSquare.variable}`}
      >
        <ThemeProvider>
-          <DocsProvider>
-            <Navbar config={config} />
-            {children}
-            <Footer />
-          </DocsProvider>
+          {children}
          <DocsChat defaultOpen={chatOpen} defaultWidth={chatWidth} />
        </ThemeProvider>
        <Analytics />
@@ -1,10 +0,0 @@
-import { loadAllDocsSources } from "@/lib/docs-source";
-import { siteDescription, siteUrl } from "@/lib/site";
-
-export async function GET() {
-  const pages = await loadAllDocsSources();
-  const body = `# json-render\n\n${siteDescription}\n\n## Documentation\n\n${pages.map((page) => `- [${page.title}](${siteUrl}${page.markdownUrl})`).join("\n")}\n`;
-  return new Response(body, {
-    headers: { "Content-Type": "text/plain; charset=utf-8" },
-  });
-}
@@ -5,20 +5,19 @@ import { join } from "node:path";
 export { getPageTitle } from "@/lib/page-titles";

 // Cache font data in memory after first load
-let fontCache: { geistRegular: Buffer; geistPixelSquare: Buffer } | null = null;
+let fontCache: { geistRegular: Buffer } | null = null;

 async function loadFonts() {
  if (fontCache) return fontCache;
-  const [geistRegular, geistPixelSquare] = await Promise.all([
-    readFile(join(process.cwd(), "public/Geist-Regular.ttf")),
-    readFile(join(process.cwd(), "public/GeistPixel-Square.ttf")),
-  ]);
-  fontCache = { geistRegular, geistPixelSquare };
+  const geistRegular = await readFile(
+    join(process.cwd(), "public/Geist-Regular.ttf"),
+  );
+  fontCache = { geistRegular };
  return fontCache;
 }

 export async function renderOgImage(title: string) {
-  const { geistRegular, geistPixelSquare } = await loadFonts();
+  const { geistRegular } = await loadFonts();

  return new ImageResponse(
    <div
@@ -54,8 +53,8 @@ export async function renderOgImage(title: string) {
        <span
          style={{
            fontSize: 36,
-            fontFamily: "Geist Pixel Square",
-            fontWeight: 500,
+            fontFamily: "Geist",
+            fontWeight: 400,
            color: "white",
          }}
        >
@@ -100,12 +99,6 @@ export async function renderOgImage(title: string) {
          style: "normal",
          weight: 400,
        },
-        {
-          name: "Geist Pixel Square",
-          data: geistPixelSquare.buffer as ArrayBuffer,
-          style: "normal",
-          weight: 500,
-        },
      ],
    },
  );
@@ -3,9 +3,5 @@ export default function PlaygroundLayout({
 }: {
  children: React.ReactNode;
 }) {
-  return (
-    <main className="h-[calc(100dvh-4rem)] flex flex-col overflow-hidden">
-      {children}
-    </main>
-  );
+  return <div className="h-dvh flex flex-col overflow-hidden">{children}</div>;
 }
@@ -1,7 +1,10 @@
 import { Playground } from "@/components/playground";
-import { pageMetadata } from "@/lib/page-metadata";

-export const metadata = pageMetadata("playground");
+import { PAGE_TITLES } from "@/lib/page-titles";
+
+export const metadata = {
+  title: PAGE_TITLES["playground"],
+};

 export default function PlaygroundPage() {
  return <Playground />;
@@ -1,11 +0,0 @@
-import type { MetadataRoute } from "next";
-import { isPreview, siteUrl } from "@/lib/site";
-
-export default function robots(): MetadataRoute.Robots {
-  return {
-    rules: isPreview
-      ? { userAgent: "*", disallow: "/" }
-      : { userAgent: "*", allow: "/" },
-    sitemap: `${siteUrl}/sitemap.xml`,
-  };
-}
@@ -1,10 +0,0 @@
-import { docsPages } from "@/lib/docs-source";
-
-export function GET() {
-  return new Response(
-    `# json-render documentation\n\n${docsPages.map((page) => `- [${page.title}](${page.href})`).join("\n")}\n`,
-    {
-      headers: { "Content-Type": "text/markdown; charset=utf-8" },
-    },
-  );
-}
@@ -1,9 +0,0 @@
-import type { MetadataRoute } from "next";
-import { PAGE_TITLES } from "@/lib/page-titles";
-import { siteUrl } from "@/lib/site";
-
-export default function sitemap(): MetadataRoute.Sitemap {
-  return Object.keys(PAGE_TITLES).map((slug) => ({
-    url: `${siteUrl}/${slug}`,
-  }));
-}
@@ -145,7 +145,7 @@ function getHighlighter() {
  if (!highlighterPromise) {
    highlighterPromise = createHighlighter({
      themes: [vercelLightTheme, vercelDarkTheme],
-      langs: ["json", "tsx", "typescript", "yaml"],
+      langs: ["json", "tsx", "typescript"],
    });
  }
  return highlighterPromise;
@@ -158,7 +158,7 @@ if (typeof window !== "undefined") {

 interface CodeBlockProps {
  code: string;
-  lang: "json" | "tsx" | "typescript" | "yaml";
+  lang: "json" | "tsx" | "typescript";
  fillHeight?: boolean;
  hideCopyButton?: boolean;
 }
@@ -18,62 +18,65 @@ import { PlaygroundRenderer } from "@/lib/render/renderer";
 import { playgroundCatalog } from "@/lib/render/catalog";
 import { buildCatalogDisplayData } from "@/lib/render/catalog-display";

-const SIMULATION_PROMPT = "Show a team performance dashboard";
+const SIMULATION_PROMPT = "Create a contact form with name, email, and message";

 interface SimulationStage {
  tree: Spec;
  stream: string;
 }

-const DASH_STATE = {
-  chartData: [
-    { label: "Mon", value: 12 },
-    { label: "Tue", value: 28 },
-    { label: "Wed", value: 19 },
-    { label: "Thu", value: 34 },
-    { label: "Fri", value: 45 },
-    { label: "Sat", value: 38 },
-    { label: "Sun", value: 52 },
-  ],
-};
+// Shared state & element definitions for the progressive simulation stages.
+const FORM_STATE = { form: { name: "", email: "", message: "" } };

-const METRIC_REVENUE = {
-  type: "Metric",
+const NAME_INPUT = {
+  type: "Input",
  props: {
-    label: "Weekly Revenue",
-    value: "12,400",
-    prefix: "$",
-    change: "+18%",
-    changeType: "positive",
+    label: "Name",
+    name: "name",
+    statePath: "/form/name",
+    checks: [{ type: "required", message: "Name is required" }],
  },
 } as const;

-const CHART = {
-  type: "LineGraph",
-  props: { data: { $state: "/chartData" } },
+const EMAIL_INPUT = {
+  type: "Input",
+  props: {
+    label: "Email",
+    name: "email",
+    type: "email",
+    statePath: "/form/email",
+    checks: [
+      { type: "required", message: "Email is required" },
+      { type: "email", message: "Please enter a valid email" },
+    ],
+  },
 } as const;

-const SEP = { type: "Separator", props: {} } as const;
-
-const PROGRESS_DEALS = {
-  type: "Progress",
-  props: { value: 72, label: "Deals Closed -- 72%" },
+const MESSAGE_INPUT = {
+  type: "Textarea",
+  props: {
+    label: "Message",
+    name: "message",
+    statePath: "/form/message",
+    checks: [{ type: "required", message: "Message is required" }],
+  },
 } as const;

-const PROGRESS_RETENTION = {
-  type: "Progress",
-  props: { value: 91, label: "Retention -- 91%" },
+const SUBMIT_BUTTON = {
+  type: "Button",
+  props: { label: "Send Message", variant: "primary" },
+  on: { press: { action: "formSubmit" } },
 } as const;

 const SIMULATION_STAGES: SimulationStage[] = [
  {
    tree: {
      root: "card",
-      state: DASH_STATE,
+      state: FORM_STATE,
      elements: {
        card: {
          type: "Card",
-          props: { title: "Team Performance", maxWidth: "sm", centered: true },
+          props: { title: "Contact Us", maxWidth: "md" },
          children: [],
        },
      },
@@ -83,74 +86,72 @@ const SIMULATION_STAGES: SimulationStage[] = [
  {
    tree: {
      root: "card",
-      state: DASH_STATE,
+      state: FORM_STATE,
      elements: {
        card: {
          type: "Card",
-          props: { title: "Team Performance", maxWidth: "sm", centered: true },
-          children: ["m1"],
+          props: { title: "Contact Us", maxWidth: "md" },
+          children: ["name"],
        },
-        m1: METRIC_REVENUE,
+        name: NAME_INPUT,
      },
    },
    stream:
-      '{"op":"add","path":"/elements/m1","value":{"type":"Metric","props":{"label":"Weekly Revenue","value":"12,400","prefix":"$","change":"+18%","changeType":"positive"}}}',
+      '{"op":"add","path":"/elements/name","value":{"type":"Input","props":{"label":"Name","name":"name","statePath":"/form/name","checks":[{"type":"required","message":"Name is required"}]}}}',
  },
  {
    tree: {
      root: "card",
-      state: DASH_STATE,
+      state: FORM_STATE,
      elements: {
        card: {
          type: "Card",
-          props: { title: "Team Performance", maxWidth: "sm", centered: true },
-          children: ["m1", "chart"],
+          props: { title: "Contact Us", maxWidth: "md" },
+          children: ["name", "email"],
        },
-        m1: METRIC_REVENUE,
-        chart: CHART,
+        name: NAME_INPUT,
+        email: EMAIL_INPUT,
      },
    },
    stream:
-      '{"op":"add","path":"/elements/chart","value":{"type":"LineGraph","props":{"data":{"$state":"/chartData"}}}}',
+      '{"op":"add","path":"/elements/email","value":{"type":"Input","props":{"label":"Email","name":"email","type":"email","statePath":"/form/email","checks":[{"type":"required","message":"Email is required"},{"type":"email","message":"Please enter a valid email"}]}}}',
  },
  {
    tree: {
      root: "card",
-      state: DASH_STATE,
+      state: FORM_STATE,
      elements: {
        card: {
          type: "Card",
-          props: { title: "Team Performance", maxWidth: "sm", centered: true },
-          children: ["m1", "chart", "sep", "p1"],
+          props: { title: "Contact Us", maxWidth: "md" },
+          children: ["name", "email", "message"],
        },
-        m1: METRIC_REVENUE,
-        chart: CHART,
-        sep: SEP,
-        p1: PROGRESS_DEALS,
+        name: NAME_INPUT,
+        email: EMAIL_INPUT,
+        message: MESSAGE_INPUT,
      },
    },
    stream:
-      '{"op":"add","path":"/elements/p1","value":{"type":"Progress","props":{"value":72,"label":"Deals Closed -- 72%"}}}',
+      '{"op":"add","path":"/elements/message","value":{"type":"Textarea","props":{"label":"Message","name":"message","statePath":"/form/message","checks":[{"type":"required","message":"Message is required"}]}}}',
  },
  {
    tree: {
      root: "card",
-      state: DASH_STATE,
+      state: FORM_STATE,
      elements: {
        card: {
          type: "Card",
-          props: { title: "Team Performance", maxWidth: "sm", centered: true },
-          children: ["m1", "chart", "sep", "p1", "p2"],
+          props: { title: "Contact Us", maxWidth: "md" },
+          children: ["name", "email", "message", "submit"],
        },
-        m1: METRIC_REVENUE,
-        chart: CHART,
-        sep: SEP,
-        p1: PROGRESS_DEALS,
-        p2: PROGRESS_RETENTION,
+        name: NAME_INPUT,
+        email: EMAIL_INPUT,
+        message: MESSAGE_INPUT,
+        submit: SUBMIT_BUTTON,
      },
    },
    stream:
-      '{"op":"add","path":"/elements/p2","value":{"type":"Progress","props":{"value":91,"label":"Retention -- 91%"}}}',
+      '{"op":"add","path":"/elements/submit","value":{"type":"Button","props":{"label":"Send Message","variant":"primary"},"on":{"press":{"action":"formSubmit"}}}}',
  },
 ];

@@ -195,15 +196,6 @@ function specToNested(spec: Spec): Record<string, unknown> {
      node.children = el.children.map(resolve);
    }

-    if (el.slots && Object.keys(el.slots).length > 0) {
-      node.slots = Object.fromEntries(
-        Object.entries(el.slots).map(([slotName, childKeys]) => [
-          slotName,
-          childKeys.map(resolve),
-        ]),
-      );
-    }
-
    return node;
  }

@@ -219,10 +211,10 @@ function specToNested(spec: Spec): Record<string, unknown> {
 }

 const EXAMPLE_PROMPTS = [
-  "Recipe card with rating and ingredients",
-  "Order receipt with item list and total",
-  "Team member profile card",
-  "Notification inbox with alerts",
+  "Create a login form with email and password",
+  "Build a feedback form with rating stars",
+  "Design a contact card with avatar",
+  "Make a settings panel with toggles",
 ];

 export function Demo({
@@ -402,45 +394,21 @@ export function Demo({

      const propsStr = serializeProps(propsObj);
      const hasChildren = element.children && element.children.length > 0;
-      const hasSlots = element.slots && Object.keys(element.slots).length > 0;

-      if (!hasChildren && !hasSlots) {
+      if (!hasChildren) {
        return propsStr
          ? `${spaces}<${componentName} ${propsStr} />`
          : `${spaces}<${componentName} />`;
      }

      const lines: string[] = [];
-      if (hasSlots) {
-        lines.push(`${spaces}<${componentName}`);
-        if (propsStr) {
-          lines.push(`${spaces}  ${propsStr}`);
-        }
-        for (const [slotName, childKeys] of Object.entries(element.slots!)) {
-          const slotChildren = childKeys
-            .map((childKey) => generateJSX(childKey, indent + 2))
-            .filter(Boolean);
-          if (slotChildren.length === 0) continue;
-          lines.push(`${spaces}  ${slotName}={`);
-          if (slotChildren.length > 1) {
-            lines.push(`${spaces}    <>`);
-          }
-          lines.push(...slotChildren);
-          if (slotChildren.length > 1) {
-            lines.push(`${spaces}    </>`);
-          }
-          lines.push(`${spaces}  }`);
-        }
-        lines.push(`${spaces}>`);
-      } else {
-        lines.push(
-          propsStr
-            ? `${spaces}<${componentName} ${propsStr}>`
-            : `${spaces}<${componentName}>`,
-        );
-      }
+      lines.push(
+        propsStr
+          ? `${spaces}<${componentName} ${propsStr}>`
+          : `${spaces}<${componentName}>`,
+      );

-      for (const childKey of element.children ?? []) {
+      for (const childKey of element.children!) {
        lines.push(generateJSX(childKey, indent + 1));
      }

@@ -1149,7 +1117,7 @@ Open [http://localhost:3000](http://localhost:3000) to view.
            ))}
          </div>
          <div
-            className={`border border-border rounded bg-background font-mono text-xs text-left grid relative group ${fullscreen ? "flex-1 min-h-0" : "h-[36rem]"}`}
+            className={`border border-border rounded bg-background font-mono text-xs text-left grid relative group ${fullscreen ? "flex-1 min-h-0" : "h-[28rem]"}`}
          >
            {activeTab !== "catalog" && (
              <div className="absolute top-2 right-2 z-10">
@@ -1389,7 +1357,7 @@ Open [http://localhost:3000](http://localhost:3000) to view.
            </div>
          </div>
          <div
-            className={`border border-border rounded bg-background grid relative group ${fullscreen ? "flex-1 min-h-0" : "h-[36rem]"}`}
+            className={`border border-border rounded bg-background grid relative group ${fullscreen ? "flex-1 min-h-0" : "h-[28rem]"}`}
          >
            {renderView === "static" && (
              <div className="absolute top-2 right-2 z-10">
@@ -141,7 +141,6 @@ export function DocsChat({
  );
  const messagesScrollRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const launcherRef = useRef<HTMLButtonElement>(null);
  const restoredRef = useRef(false);
  const isDraggingRef = useRef(false);

@@ -174,51 +173,13 @@ export function DocsChat({
    }
  }, [open, hasMounted]);

-  useEffect(() => {
-    const launcher = launcherRef.current;
-    if (!hasMounted || open || !launcher) return;
-    const footer = document.querySelector("footer");
-    let frame = 0;
-    const update = () => {
-      frame = 0;
-      const rect = document
-        .querySelector("footer fieldset")
-        ?.getBoundingClientRect();
-      const overlap =
-        rect && rect.width > 0 && rect.bottom > 0
-          ? Math.max(0, innerHeight - rect.top)
-          : 0;
-      launcher.style.setProperty("--chat-launcher-bottom", `${24 + overlap}px`);
-    };
-    const schedule = () => {
-      if (!frame) frame = requestAnimationFrame(update);
-    };
-    const resize = new ResizeObserver(schedule);
-    resize.observe(document.body);
-    const mutation = new MutationObserver(schedule);
-    if (footer) {
-      resize.observe(footer);
-      mutation.observe(footer, { childList: true, subtree: true });
-    }
-    window.addEventListener("scroll", schedule, { passive: true });
-    window.addEventListener("resize", schedule);
-    update();
-    return () => {
-      cancelAnimationFrame(frame);
-      resize.disconnect();
-      mutation.disconnect();
-      window.removeEventListener("scroll", schedule);
-      window.removeEventListener("resize", schedule);
-    };
-  }, [hasMounted, open]);
-
  // Push page content on desktop when pane is open.
  // Use padding on body so the page scrollbar stays at the viewport edge (behind the sidebar)
  // instead of appearing right next to the sidebar's scrollbar.
  useEffect(() => {
    const body = document.body;
    if (isDesktop && open) {
-      body.style.paddingRight = `min(${desktopWidth}px, calc(100vw - 320px))`;
+      body.style.paddingRight = `${desktopWidth}px`;
      if (!isDraggingRef.current) {
        body.style.transition = "padding-right 150ms ease";
      }
@@ -300,10 +261,10 @@ export function DocsChat({
    }
  }, [messages, isLoading]);

-  // Cmd+I to open sidebar and focus prompt, Escape to close
+  // Cmd+K to open sidebar and focus prompt, Escape to close
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "i" && (e.metaKey || e.ctrlKey)) {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((prev) => {
          if (!prev) {
@@ -312,13 +273,7 @@ export function DocsChat({
          return !prev;
        });
      }
-      if (
-        e.key === "Escape" &&
-        open &&
-        (isDesktop ||
-          (e.target instanceof Element &&
-            e.target.closest("#json-render-chat-mobile")))
-      ) {
+      if (e.key === "Escape" && open && isDesktop) {
        setOpen(false);
      }
    };
@@ -504,7 +459,6 @@ export function DocsChat({
          rows={1}
          enterKeyHint="send"
          placeholder="Ask a question..."
-          aria-label="Ask a question"
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey) {
              e.preventDefault();
@@ -542,31 +496,22 @@ export function DocsChat({
      {/* Ask AI trigger button */}
      {!open && (
        <button
-          ref={launcherRef}
-          data-docs-chat-launcher
          onClick={() => setOpen(true)}
-          className="fixed z-30 bottom-[calc(1rem+env(safe-area-inset-bottom))] left-1/2 -translate-x-1/2 min-[640px]:left-auto min-[640px]:translate-x-0 min-[640px]:right-6 min-[640px]:bottom-[var(--chat-launcher-bottom,24px)] flex h-10 items-center gap-2 px-4 py-2 rounded-lg border border-primary bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-colors text-sm font-medium"
+          className="fixed z-50 bottom-4 left-1/2 -translate-x-1/2 sm:left-auto sm:translate-x-0 sm:right-4 flex items-center gap-2 px-4 py-2 rounded-lg border bg-background text-primary shadow-lg hover:bg-primary hover:text-primary-foreground transition-colors text-sm font-medium"
          aria-label="Ask AI"
-          aria-expanded={open}
-          aria-controls={
-            isDesktop ? "json-render-chat-desktop" : "json-render-chat-mobile"
-          }
-          aria-keyshortcuts="Meta+I Control+I"
        >
          Ask AI
-          <kbd className="hidden min-[640px]:inline-flex items-center gap-0.5 text-xs opacity-60 font-mono">
-            <span>&#8984;</span>I
+          <kbd className="hidden sm:inline-flex items-center gap-0.5 text-xs opacity-60 font-mono">
+            <span>&#8984;</span>K
          </kbd>
        </button>
      )}

      {/* Desktop: resizable side pane — always rendered, hidden on mobile via CSS */}
      <aside
-        id="json-render-chat-desktop"
-        inert={!open || !isDesktop}
        className={`hidden sm:flex fixed top-0 right-0 bottom-0 z-40 border-l bg-background transition-transform duration-150 ease-in-out ${open ? "translate-x-0" : "translate-x-full"}`}
-        style={{ width: `min(${desktopWidth}px, calc(100vw - 320px))` }}
-        aria-hidden={!open || !isDesktop}
+        style={{ width: desktopWidth }}
+        aria-hidden={!open}
      >
        {/* Resize handle */}
        <div
@@ -580,8 +525,6 @@ export function DocsChat({
      {hasMounted && !isDesktop && (
        <Sheet open={open} onOpenChange={setOpen}>
          <SheetContent
-            id="json-render-chat-mobile"
-            aria-describedby={undefined}
            side="right"
            overlayClassName="!bg-background"
            className="!inset-0 !w-full !h-full !max-w-none p-0 flex flex-col"
@@ -1,13 +0,0 @@
-"use client";
-
-import { GeistdocsProvider } from "@vercel/geistdocs/layout";
-import type { ReactNode } from "react";
-import { config } from "@/lib/geistdocs/config";
-
-export function DocsProvider({ children }: { children: ReactNode }) {
-  return (
-    <GeistdocsProvider config={config} lang="en">
-      {children}
-    </GeistdocsProvider>
-  );
-}
@@ -1,257 +1,100 @@
 "use client";

-function ScheduleItem({
-  time,
-  label,
-  color,
-}: {
-  time: string;
-  label: string;
-  color: string;
-}) {
+function Skeleton({ className = "" }: { className?: string }) {
+  return <div className={`rounded bg-muted-foreground/10 ${className}`} />;
+}
+
+/** Simple form wireframe reused in both diagrams */
+function FormUI() {
  return (
-    <div className="flex items-center gap-2 py-1.5 border-t border-border/50 first:border-t-0">
-      <span className="text-[10px] text-muted-foreground/60 w-12 shrink-0 tabular-nums">
-        {time}
-      </span>
-      <span
-        className="w-1.5 h-1.5 rounded-full shrink-0"
-        style={{ background: color }}
-      />
-      <span className="text-[11px] text-muted-foreground">{label}</span>
+    <div className="border border-border rounded-lg p-2.5 space-y-1.5 bg-muted/30">
+      {/* Title */}
+      <Skeleton className="h-2.5 w-14 mb-1" />
+      {/* Input fields */}
+      <Skeleton className="h-4 w-full rounded-sm" />
+      <Skeleton className="h-4 w-full rounded-sm" />
+      {/* Submit button */}
+      <Skeleton className="h-4 w-16 rounded-sm bg-muted-foreground/20 mt-1" />
    </div>
  );
 }

-function InlineModeDiagram() {
+function ChatModeDiagram() {
  return (
    <div className="flex flex-col h-full">
-      <div className="text-sm font-medium text-foreground text-center mb-3">
-        Inline Mode
+      <div className="text-xs font-medium text-muted-foreground mb-3 text-center">
+        Chat Mode
      </div>
-      <div className="flex-1 border border-border rounded-2xl bg-background overflow-hidden flex flex-col">
-        <div className="flex-1 p-4 space-y-3 overflow-hidden">
-          {/* User message */}
-          <div className="flex justify-end">
-            <div className="bg-muted-foreground/20 rounded-2xl rounded-br px-3.5 py-2 max-w-[85%]">
-              <span className="text-[11px] text-foreground/80">
-                I have back-to-back meetings today
-              </span>
-            </div>
-          </div>
-
-          {/* AI response */}
-          <div className="space-y-2">
-            <p className="text-[11px] text-muted-foreground/70">
-              Packed day! Here&apos;s what you&apos;ve got:
-            </p>
-            <div className="bg-muted/40 border border-border rounded-xl p-3 w-[92%]">
-              <div className="text-[11px] font-semibold text-foreground/80 mb-2">
-                Today&apos;s Schedule
-              </div>
-              <ScheduleItem
-                time="10:00 AM"
-                label="Design Review"
-                color="#7aa2f7"
-              />
-              <ScheduleItem
-                time="1:00 PM"
-                label="Sprint Planning"
-                color="#bb9af7"
-              />
-              <ScheduleItem
-                time="3:30 PM"
-                label="Team Standup"
-                color="#9ece6a"
-              />
-              <ScheduleItem
-                time="4:30 PM"
-                label="Eng All-Hands"
-                color="#e0af68"
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Prompt input */}
-        <div className="p-2.5">
-          <div className="bg-muted/50 border border-border rounded-xl px-2.5 py-1.5 flex items-center gap-1.5">
-            <span className="text-[10px] text-muted-foreground/40 flex-1">
-              Message...
-            </span>
-            <div className="w-5 h-5 rounded-md bg-muted-foreground/20 flex items-center justify-center">
-              <svg
-                className="w-2.5 h-2.5 text-muted-foreground/50"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-              >
-                <path
-                  d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
-                  transform="rotate(-90 12 12)"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="mt-3 flex flex-col items-center gap-2">
-        <div className="text-xs font-medium text-muted-foreground">
-          AI decides when UI beats text
-        </div>
-        <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/50">
-          <span>AI chatbots</span>
-          <span className="text-muted-foreground/30">/</span>
-          <span>Copilots</span>
-          <span className="text-muted-foreground/30">/</span>
-          <span>Assistants</span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function LandingPage() {
-  return (
-    <div className="w-full h-full flex flex-col bg-muted/20">
-      {/* Nav */}
-      <div className="flex items-center justify-between px-3 py-2 border-b border-border/50">
-        <svg
-          width="12"
-          height="12"
-          viewBox="0 0 24 24"
-          fill="none"
-          className="shrink-0"
-        >
-          <rect
-            x="2"
-            y="14"
-            width="5"
-            height="8"
-            rx="1"
-            className="fill-muted-foreground/60"
-          />
-          <rect
-            x="9.5"
-            y="8"
-            width="5"
-            height="14"
-            rx="1"
-            className="fill-muted-foreground/60"
-          />
-          <rect
-            x="17"
-            y="2"
-            width="5"
-            height="20"
-            rx="1"
-            className="fill-muted-foreground/60"
-          />
-        </svg>
-        <div className="flex items-center gap-2">
-          <span className="text-[9px] text-muted-foreground/50">Pricing</span>
-          <span className="text-[9px] text-muted-foreground/50">Blog</span>
-          <span className="text-[8px] font-semibold bg-foreground text-background rounded-md px-1.5 py-0.5 whitespace-nowrap">
-            Get Started
-          </span>
-        </div>
-      </div>
-
-      {/* Hero */}
-      <div className="flex-1 flex flex-col items-center justify-center gap-2.5 text-center px-4">
-        <span className="text-[8px] font-medium text-green-400 bg-green-400/10 border border-green-400/15 rounded-full px-2 py-0.5">
-          Trusted by 2,000+ teams
-        </span>
-        <div className="text-sm font-bold text-foreground leading-tight">
-          Analytics that
-          <br />
-          move the needle
-        </div>
-        <div className="text-[10px] text-muted-foreground/50 leading-relaxed">
-          Ship what matters. No setup required.
-        </div>
-        <div className="flex gap-1.5 mt-1">
-          <button className="bg-foreground text-background text-[9px] font-semibold rounded-lg px-3 py-1.5 whitespace-nowrap">
-            Start Free
-          </button>
-          <button className="border border-border text-muted-foreground text-[9px] font-medium rounded-lg px-3 py-1.5 whitespace-nowrap">
-            Book Demo
-          </button>
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className="flex justify-center gap-3 py-2 border-t border-border/50">
-        <span className="text-[8px] text-muted-foreground/30">Privacy</span>
-        <span className="text-[8px] text-muted-foreground/30">Terms</span>
-        <span className="text-[8px] text-muted-foreground/30">Status</span>
-      </div>
-    </div>
-  );
-}
-
-function StandaloneModeDiagram() {
-  return (
-    <div className="flex flex-col h-full">
-      <div className="text-sm font-medium text-foreground text-center mb-3">
-        Standalone Mode
-      </div>
-      <div className="flex-1 border border-border rounded-2xl bg-background overflow-hidden flex flex-row">
-        {/* Left panel - conversation */}
-        <div className="w-[38%] border-r border-border/50 flex flex-col">
-          <div className="flex-1 p-3 space-y-2.5">
+      <div className="flex-1 border border-border rounded-lg bg-background overflow-hidden flex flex-col">
+        {/* Chat area */}
+        <div className="flex-1 p-3 overflow-hidden flex justify-center">
+          <div className="w-1/3 min-w-[120px] space-y-3">
            {/* User message */}
            <div className="flex justify-end">
-              <div className="bg-muted-foreground/20 rounded-2xl rounded-br px-2.5 py-1.5">
-                <span className="text-[10px] text-foreground/80 block leading-relaxed">
-                  A landing page for my analytics startup
-                </span>
+              <div className="bg-muted rounded-xl px-3 py-2">
+                <Skeleton className="h-2 w-14" />
              </div>
            </div>
-            {/* AI text */}
-            <p className="text-[10px] text-muted-foreground/60 leading-relaxed">
-              Here&apos;s a clean landing page with a hero, nav, and CTAs.
-            </p>
-          </div>

-          {/* Prompt input */}
-          <div className="p-2.5">
-            <div className="bg-muted/50 border border-border rounded-xl px-2.5 py-1.5 flex items-center gap-1.5">
-              <span className="text-[10px] text-muted-foreground/40 flex-1">
-                Message...
-              </span>
-              <div className="w-5 h-5 rounded-md bg-muted-foreground/20 flex items-center justify-center">
-                <svg
-                  className="w-2.5 h-2.5 text-muted-foreground/50"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                >
-                  <path
-                    d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
-                    transform="rotate(-90 12 12)"
-                  />
-                </svg>
+            {/* Assistant text */}
+            <div className="space-y-2">
+              <div className="space-y-1.5">
+                <Skeleton className="h-2 w-full" />
+                <Skeleton className="h-2 w-3/4" />
+              </div>
+
+              {/* Inline UI */}
+              <FormUI />
+
+              {/* More text after UI */}
+              <div className="space-y-1.5">
+                <Skeleton className="h-2 w-4/5" />
              </div>
            </div>
          </div>
        </div>

-        {/* Right panel - landing page */}
-        <div className="flex-1">
-          <LandingPage />
+        {/* Input bar */}
+        <div className="p-2 flex justify-center">
+          <div className="w-1/3 min-w-[120px] flex items-center gap-2">
+            <Skeleton className="h-7 flex-1 rounded-md" />
+            <Skeleton className="h-7 w-7 rounded-md" />
+          </div>
        </div>
      </div>
-      <div className="mt-3 flex flex-col items-center gap-2">
-        <div className="text-xs font-medium text-muted-foreground">
-          Prompt in, UI out
+      <div className="text-[10px] text-muted-foreground/60 mt-2 text-center">
+        Text + UI interleaved in messages
+      </div>
+    </div>
+  );
+}
+
+function GenerateModeDiagram() {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="text-xs font-medium text-muted-foreground mb-3 text-center">
+        Generate Mode
+      </div>
+      <div className="flex-1 border border-border rounded-lg bg-background overflow-hidden flex flex-row">
+        {/* Left panel - prompt */}
+        <div className="w-[38%] border-r border-border flex flex-col">
+          <div className="flex-1" />
+          <div className="p-3 space-y-2">
+            <Skeleton className="h-7 w-full rounded-md" />
+            <Skeleton className="h-5 w-16 rounded-md" />
+          </div>
        </div>
-        <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/50">
-          <span>Website builders</span>
-          <span className="text-muted-foreground/30">/</span>
-          <span>Text-to-widget</span>
-          <span className="text-muted-foreground/30">/</span>
-          <span>Dashboards</span>
+
+        {/* Right panel - UI preview */}
+        <div className="flex-1 p-3 flex items-center justify-center">
+          <div className="w-3/4">
+            <FormUI />
+          </div>
        </div>
      </div>
+      <div className="text-[10px] text-muted-foreground/60 mt-2 text-center">
+        Prompt separate from UI preview
+      </div>
    </div>
  );
 }
@@ -260,11 +103,11 @@ export function GenerationModesDiagram() {
  return (
    <div className="not-prose my-8">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-        <div className="h-[420px]">
-          <InlineModeDiagram />
+        <div className="h-[280px]">
+          <ChatModeDiagram />
        </div>
-        <div className="h-[420px]">
-          <StandaloneModeDiagram />
+        <div className="h-[280px]">
+          <GenerateModeDiagram />
        </div>
      </div>
    </div>
@@ -1,65 +1,17 @@
 "use client";

-import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ThemeToggle } from "./theme-toggle";
-import { Search } from "./search";
-import {
-  Sheet,
-  SheetTrigger,
-  SheetContent,
-  SheetTitle,
-} from "@/components/ui/sheet";
 import { cn } from "@/lib/utils";

-const navLinks = [
-  { href: "/playground", label: "Playground" },
-  { href: "/examples", label: "Examples" },
-  { href: "/docs", label: "Docs" },
-];
-
-function GitHubLink({
-  className,
-  stars,
-}: {
-  className?: string;
-  stars?: string;
-}) {
-  return (
-    <a
-      href="https://github.com/vercel-labs/json-render"
-      target="_blank"
-      rel="noopener noreferrer"
-      className={cn(
-        "flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors",
-        className,
-      )}
-    >
-      <svg
-        viewBox="0 0 16 16"
-        className="h-4 w-4"
-        fill="currentColor"
-        aria-hidden="true"
-      >
-        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-      </svg>
-      {stars && <span>{stars}</span>}
-    </a>
-  );
-}
-
-export function Header({ stars }: { stars?: string }) {
+export function Header() {
  const pathname = usePathname();
-  const [mobileOpen, setMobileOpen] = useState(false);

  const isActive = (href: string) => {
    if (href === "/playground") {
      return pathname === "/playground";
    }
-    if (href === "/examples") {
-      return pathname.startsWith("/examples");
-    }
    if (href === "/docs") {
      return pathname.startsWith("/docs");
    }
@@ -110,81 +62,48 @@ export function Header({ stars }: { stars?: string }) {
            </span>
          </Link>
        </div>
-
-        {/* Desktop nav */}
-        <nav className="hidden sm:flex items-center gap-4">
-          {navLinks.map((link) => (
-            <Link
-              key={link.href}
-              href={link.href}
-              className={cn(
-                "text-sm transition-colors",
-                isActive(link.href)
-                  ? "text-primary"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
+        <nav className="flex items-center gap-4">
+          <Link
+            href="/playground"
+            className={cn(
+              "text-sm transition-colors",
+              isActive("/playground")
+                ? "text-primary font-medium"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            <span className="sm:hidden">Play</span>
+            <span className="hidden sm:inline">Playground</span>
+          </Link>
+          <Link
+            href="/docs"
+            className={cn(
+              "text-sm transition-colors",
+              isActive("/docs")
+                ? "text-primary font-medium"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            Docs
+          </Link>
+          <a
+            href="https://github.com/vercel-labs/json-render"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <svg
+              viewBox="0 0 16 16"
+              className="h-4 w-4"
+              fill="currentColor"
+              aria-hidden="true"
            >
-              {link.label}
-            </Link>
-          ))}
-          <Search />
-          <GitHubLink stars={stars} />
+              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+            </svg>
+            <span>11k</span>
+          </a>
          <ThemeToggle />
        </nav>
-
-        {/* Mobile nav */}
-        <div className="flex sm:hidden items-center gap-3">
-          <Search />
-          <GitHubLink stars={stars} />
-          <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
-            <SheetTrigger
-              className="flex items-center justify-center"
-              aria-label="Open menu"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="text-muted-foreground"
-              >
-                <line x1="4" x2="20" y1="12" y2="12" />
-                <line x1="4" x2="20" y1="6" y2="6" />
-                <line x1="4" x2="20" y1="18" y2="18" />
-              </svg>
-            </SheetTrigger>
-            <SheetContent side="right" className="overflow-y-auto p-6">
-              <SheetTitle className="mb-6">Menu</SheetTitle>
-              <nav className="flex flex-col gap-1">
-                {navLinks.map((link) => (
-                  <Link
-                    key={link.href}
-                    href={link.href}
-                    onClick={() => setMobileOpen(false)}
-                    className={cn(
-                      "block py-2.5 text-sm transition-colors",
-                      isActive(link.href)
-                        ? "text-primary"
-                        : "text-muted-foreground hover:text-foreground",
-                    )}
-                  >
-                    {link.label}
-                  </Link>
-                ))}
-                <div className="my-3 border-t border-border" />
-                <div className="flex items-center justify-between py-2.5">
-                  <span className="text-sm text-muted-foreground">Theme</span>
-                  <ThemeToggle />
-                </div>
-              </nav>
-            </SheetContent>
-          </Sheet>
-        </div>
      </div>
    </header>
  );
@@ -1,266 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useRouter } from "next/navigation";
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
-
-type SearchResult = {
-  title: string;
-  href: string;
-  section: string;
-  snippet: string;
-};
-
-export function Search() {
-  const router = useRouter();
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState("");
-  const [results, setResults] = useState<SearchResult[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const listRef = useRef<HTMLDivElement>(null);
-  const abortRef = useRef<AbortController | null>(null);
-
-  const navigate = useCallback(
-    (href: string) => {
-      setOpen(false);
-      setQuery("");
-      setResults([]);
-      router.push(href);
-    },
-    [router],
-  );
-
-  useEffect(() => {
-    function onKeyDown(e: KeyboardEvent) {
-      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-        e.preventDefault();
-        setOpen((prev) => !prev);
-      }
-    }
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, []);
-
-  useEffect(() => {
-    if (open) {
-      setTimeout(() => inputRef.current?.focus(), 0);
-    } else {
-      setQuery("");
-      setResults([]);
-    }
-  }, [open]);
-
-  useEffect(() => {
-    const q = query.trim();
-    if (!q) {
-      setResults([]);
-      setLoading(false);
-      return;
-    }
-
-    setLoading(true);
-    abortRef.current?.abort();
-    const controller = new AbortController();
-    abortRef.current = controller;
-
-    const timeout = setTimeout(async () => {
-      try {
-        const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`, {
-          signal: controller.signal,
-        });
-        if (res.ok) {
-          const data = await res.json();
-          setResults(data.results);
-        }
-      } catch {
-        // aborted or network error
-      } finally {
-        if (!controller.signal.aborted) {
-          setLoading(false);
-        }
-      }
-    }, 150);
-
-    return () => {
-      clearTimeout(timeout);
-      controller.abort();
-    };
-  }, [query]);
-
-  useEffect(() => {
-    setActiveIndex(0);
-  }, [results]);
-
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setActiveIndex((i) => Math.min(i + 1, results.length - 1));
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setActiveIndex((i) => Math.max(i - 1, 0));
-    } else if (e.key === "Enter" && results[activeIndex]) {
-      e.preventDefault();
-      navigate(results[activeIndex].href);
-    }
-  }
-
-  useEffect(() => {
-    const active = listRef.current?.querySelector("[data-active='true']");
-    active?.scrollIntoView({ block: "nearest" });
-  }, [activeIndex]);
-
-  const hasQuery = query.trim().length > 0;
-
-  return (
-    <>
-      <button
-        onClick={() => setOpen(true)}
-        className="hidden sm:flex items-center gap-2 rounded-md border border-border bg-muted/50 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:border-foreground/25 transition-colors"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="14"
-          height="14"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <circle cx="11" cy="11" r="8" />
-          <path d="m21 21-4.3-4.3" />
-        </svg>
-        Search docs
-        <kbd className="pointer-events-none ml-1 inline-flex items-center gap-0.5 rounded border border-border bg-background px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
-          <span>&#8984;</span>K
-        </kbd>
-      </button>
-
-      <button
-        onClick={() => setOpen(true)}
-        className="sm:hidden flex items-center text-muted-foreground hover:text-foreground transition-colors"
-        aria-label="Search docs"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <circle cx="11" cy="11" r="8" />
-          <path d="m21 21-4.3-4.3" />
-        </svg>
-      </button>
-
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent
-          showCloseButton={false}
-          className="gap-0 p-0 sm:max-w-lg"
-        >
-          <DialogTitle className="sr-only">Search documentation</DialogTitle>
-          <div className="flex items-center gap-2 border-b px-3">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="shrink-0 text-muted-foreground"
-            >
-              <circle cx="11" cy="11" r="8" />
-              <path d="m21 21-4.3-4.3" />
-            </svg>
-            <input
-              ref={inputRef}
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder="Search docs..."
-              className="flex-1 bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground"
-            />
-            {query && (
-              <button
-                onClick={() => setQuery("")}
-                className="text-muted-foreground hover:text-foreground"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="14"
-                  height="14"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path d="M18 6 6 18" />
-                  <path d="m6 6 12 12" />
-                </svg>
-              </button>
-            )}
-          </div>
-
-          <div
-            ref={listRef}
-            className="max-h-[min(60vh,400px)] overflow-y-auto p-2"
-          >
-            {loading && hasQuery ? (
-              <div className="flex items-center justify-center py-6">
-                <div className="h-4 w-4 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
-              </div>
-            ) : hasQuery && results.length === 0 ? (
-              <p className="py-6 text-center text-sm text-muted-foreground">
-                No results found.
-              </p>
-            ) : !hasQuery ? (
-              <p className="py-6 text-center text-sm text-muted-foreground">
-                Type to search documentation...
-              </p>
-            ) : (
-              results.map((item, i) => (
-                <button
-                  key={item.href}
-                  data-active={i === activeIndex}
-                  onClick={() => navigate(item.href)}
-                  onMouseEnter={() => setActiveIndex(i)}
-                  className={cn(
-                    "flex w-full flex-col gap-1 rounded-md px-3 py-2 text-left transition-colors",
-                    i === activeIndex
-                      ? "bg-accent text-accent-foreground"
-                      : "text-foreground",
-                  )}
-                >
-                  <div className="flex items-center justify-between gap-2">
-                    <span className="text-sm font-medium">{item.title}</span>
-                    <span className="shrink-0 text-xs text-muted-foreground">
-                      {item.section}
-                    </span>
-                  </div>
-                  {item.snippet && (
-                    <span className="line-clamp-2 text-xs text-muted-foreground leading-relaxed">
-                      {item.snippet}
-                    </span>
-                  )}
-                </button>
-              ))
-            )}
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
@@ -1,83 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { usePathname } from "next/navigation";
-import { cn } from "@/lib/utils";
-
-type Heading = {
-  id: string;
-  text: string;
-  level: number;
-};
-
-function getHeadings(): Heading[] {
-  const article = document.querySelector("article");
-  if (!article) return [];
-  const elements = article.querySelectorAll("h2[id], h3[id]");
-  return Array.from(elements).map((el) => ({
-    id: el.id,
-    text: el.textContent?.replace(/#$/, "").trim() ?? "",
-    level: el.tagName === "H3" ? 3 : 2,
-  }));
-}
-
-export function TableOfContents() {
-  const pathname = usePathname();
-  const [headings, setHeadings] = useState<Heading[]>([]);
-  const [activeId, setActiveId] = useState<string>("");
-
-  useEffect(() => {
-    const timer = setTimeout(() => setHeadings(getHeadings()), 100);
-    return () => clearTimeout(timer);
-  }, [pathname]);
-
-  useEffect(() => {
-    if (headings.length === 0) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            setActiveId(entry.target.id);
-          }
-        }
-      },
-      { rootMargin: "0px 0px -75% 0px", threshold: 0.1 },
-    );
-
-    for (const h of headings) {
-      const el = document.getElementById(h.id);
-      if (el) observer.observe(el);
-    }
-
-    return () => observer.disconnect();
-  }, [headings]);
-
-  if (headings.length === 0) return null;
-
-  return (
-    <nav aria-label="On this page">
-      <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
-        On this page
-      </h4>
-      <ul className="space-y-1">
-        {headings.map((h) => (
-          <li key={h.id}>
-            <a
-              href={`#${h.id}`}
-              className={cn(
-                "block text-xs leading-relaxed py-0.5 transition-colors",
-                h.level === 3 && "pl-3",
-                activeId === h.id
-                  ? "text-foreground"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
-            >
-              {h.text}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </nav>
-  );
-}
@@ -6,7 +6,6 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
  return (
    <NextThemesProvider
      attribute="class"
-      value={{ dark: "dark-theme", light: "light-theme" }}
      defaultTheme="dark"
      enableSystem
      disableTransitionOnChange
@@ -1,58 +0,0 @@
---
-title: "@json-render/devtools-react"
---
-
-React adapter for the json-render devtools. Drop-in `<JsonRenderDevtools />` component.
-
-See the [Devtools guide](/docs/devtools) for the drop-in walkthrough.
-
-## JsonRenderDevtools
-
-```tsx
-import { JsonRenderDevtools } from "@json-render/devtools-react";
-
-<JSONUIProvider registry={registry} handlers={handlers}>
-  <Renderer spec={spec} registry={registry} />
-  <JsonRenderDevtools spec={spec} catalog={catalog} messages={messages} />
-</JSONUIProvider>
-```
-
-### Props
-
-```tsx
-interface JsonRenderDevtoolsProps {
-  /** Current spec being rendered. */
-  spec?: Spec | null;
-  /** Catalog definition (required for the Catalog panel). */
-  catalog?: Catalog | null;
-  /** AI SDK useChat messages array. */
-  messages?: readonly UIMessage[];
-  /** Start the panel open. Default: false. */
-  initialOpen?: boolean;
-  /** Floating toggle position. */
-  position?: "bottom-right" | "bottom-left" | "right";
-  /** Toggle keybinding, or false to disable. Default: "mod+shift+j". */
-  hotkey?: string | false;
-  /** Ring buffer size. Default: 500. */
-  bufferSize?: number;
-  /** Fires for every devtools event. */
-  onEvent?: (evt: DevtoolsEvent) => void;
-}
-```
-
-In production builds the component renders `null`.
-
-## useJsonRenderDevtools
-
-```tsx
-import { useJsonRenderDevtools } from "@json-render/devtools-react";
-
-const devtools = useJsonRenderDevtools();
-devtools?.open();
-devtools?.toggle();
-devtools?.close();
-devtools?.clear();
-devtools?.recordEvent({ kind: "stream-text", at: Date.now(), text: "hi" });
-```
-
-Access the running devtools instance from anywhere in the React tree. Returns `null` in production or before the component has mounted.
@@ -1,37 +0,0 @@
---
-title: "@json-render/devtools-solid"
---
-
-SolidJS adapter for the json-render devtools. Drop-in `<JsonRenderDevtools />` component.
-
-See the [Devtools guide](/docs/devtools) for the drop-in walkthrough.
-
-## JsonRenderDevtools
-
-```tsx
-import { JsonRenderDevtools } from "@json-render/devtools-solid";
-
-<JSONUIProvider registry={registry}>
-  <Renderer spec={spec()} registry={registry} />
-  <JsonRenderDevtools
-    spec={spec()}
-    catalog={catalog}
-    messages={messages()}
-  />
-</JSONUIProvider>
-```
-
-### Props
-
-Same shape as the React adapter:
-
- `spec`
- `catalog`
- `messages`
- `initialOpen`
- `position`
- `hotkey`
- `bufferSize`
- `onEvent`
-
-In production builds the component renders `null`.
@@ -1,35 +0,0 @@
---
-title: "@json-render/devtools-svelte"
---
-
-Svelte adapter for the json-render devtools. Drop-in `<JsonRenderDevtools />` component.
-
-See the [Devtools guide](/docs/devtools) for the drop-in walkthrough.
-
-## JsonRenderDevtools
-
-```svelte
-<script>
-  import { JsonRenderDevtools } from "@json-render/devtools-svelte";
-</script>
-
-<JSONUIProvider {registry}>
-  <Renderer {spec} {registry} />
-  <JsonRenderDevtools {spec} {catalog} {messages} />
-</JSONUIProvider>
-```
-
-### Props
-
-Same shape as the React adapter:
-
- `spec`
- `catalog`
- `messages`
- `initialOpen`
- `position`
- `hotkey`
- `bufferSize`
- `onEvent`
-
-In production builds the component renders nothing.
@@ -1,37 +0,0 @@
---
-title: "@json-render/devtools-vue"
---
-
-Vue adapter for the json-render devtools. Drop-in `<JsonRenderDevtools />` component.
-
-See the [Devtools guide](/docs/devtools) for the drop-in walkthrough.
-
-## JsonRenderDevtools
-
-```vue
-<script setup>
-import { JsonRenderDevtools } from "@json-render/devtools-vue";
-</script>
-
-<template>
-  <JSONUIProvider :registry="registry">
-    <Renderer :spec="spec" :registry="registry" />
-    <JsonRenderDevtools :spec="spec" :catalog="catalog" :messages="messages" />
-  </JSONUIProvider>
-</template>
-```
-
-### Props
-
-Same shape as the React adapter:
-
- `spec`
- `catalog`
- `messages`
- `initialOpen`
- `position`
- `hotkey`
- `bufferSize`
- `onEvent`
-
-In production builds the component renders nothing.
@@ -1,145 +0,0 @@
---
-title: "@json-render/devtools"
---
-
-Framework-agnostic core for the json-render devtools — vanilla TS panel UI, event store, DOM picker, and stream tap utilities. Every framework-specific adapter package depends on this.
-
-Most users never import from this package directly. Pick the adapter that matches your renderer (`@json-render/devtools-react`, `@json-render/devtools-vue`, etc.) and drop the `<JsonRenderDevtools />` component into your app.
-
-See the [Devtools guide](/docs/devtools) for the drop-in walkthrough.
-
-## Event Store
-
-### createEventStore
-
-```ts
-function createEventStore(options?: { bufferSize?: number }): EventStore
-
-interface EventStore {
-  push: (event: DevtoolsEvent) => void;
-  snapshot: () => DevtoolsEvent[];
-  subscribe: (listener: () => void) => () => void;
-  clear: () => void;
-  size: () => number;
-}
-```
-
-Ring-buffered pub/sub of `DevtoolsEvent`. Shared by every panel and every stream tap.
-
-## Panel
-
-### createPanel
-
-```ts
-function createPanel(options: PanelOptions): PanelHandle
-
-interface PanelHandle {
-  open: () => void;
-  close: () => void;
-  toggle: () => void;
-  isOpen: () => boolean;
-  refresh: () => void;
-  destroy: () => void;
-}
-```
-
-Mount the panel into a host document. Adapters call this internally.
-
-### Panel tabs
-
-Each tab is a factory function that returns a `TabDef`:
-
-```ts
-import {
-  specTab,
-  stateTab,
-  actionsTab,
-  streamTab,
-  catalogTab,
-  pickerTab,
-} from "@json-render/devtools";
-```
-
-## Stream Taps
-
-### tapJsonRenderStream
-
-```ts
-function tapJsonRenderStream(
-  stream: ReadableStream<StreamChunk>,
-  events: EventStore,
-): ReadableStream<StreamChunk>
-```
-
-Mirror the spec patches flowing through a `pipeJsonRender` transform into a devtools event store. Returns the original stream unchanged — the tap just forks a copy.
-
-### tapYamlStream
-
-```ts
-function tapYamlStream(
-  stream: ReadableStream<StreamChunk>,
-  events: EventStore,
-): ReadableStream<StreamChunk>
-```
-
-YAML equivalent of `tapJsonRenderStream`.
-
-### scanMessageParts
-
-```ts
-function scanMessageParts(
-  parts: readonly DataPart[] | undefined,
-  events: EventStore,
-  seen: WeakSet<object>,
-): void
-```
-
-Client-side helper: scan an AI SDK message's `parts` array for spec data parts and push matching events into the store. Idempotent via `seen` — call it on every render of a chat UI.
-
-## Picker
-
-### startPicker
-
-```ts
-function startPicker(options: PickerOptions): PickerSession | null
-
-interface PickerOptions {
-  onPick: (key: string) => void;
-  onCancel?: () => void;
-}
-```
-
-Start a DOM picker session. Hovering paints an outline on any element carrying `data-jr-key`; clicking fires `onPick` with the spec key. Returns `null` in environments without a DOM.
-
-### findElementByKey / highlightElement
-
-```ts
-function findElementByKey(key: string): Element | null
-function highlightElement(key: string, durationMs?: number): void
-```
-
-Look up the live DOM node for a spec element key, or briefly paint an outline around it.
-
-## Types
-
-### DevtoolsEvent
-
-```ts
-type DevtoolsEvent =
-  | { kind: "spec-changed"; at: number; spec: Spec }
-  | { kind: "state-set"; at: number; path: string; prev: unknown; next: unknown }
-  | { kind: "action-dispatched"; at: number; id: string; name: string; params?: unknown }
-  | { kind: "action-settled"; at: number; id: string; ok: boolean; result?: unknown; error?: string; durationMs: number }
-  | { kind: "stream-patch"; at: number; patch: JsonPatch; source: "json" | "yaml" }
-  | { kind: "stream-text"; at: number; text: string }
-  | { kind: "stream-usage"; at: number; usage: TokenUsage }
-  | { kind: "stream-lifecycle"; at: number; phase: "start" | "end"; ok?: boolean };
-```
-
-### isProduction
-
-```ts
-function isProduction(): boolean
-```
-
-`true` when `process.env.NODE_ENV === "production"`. Adapters use this to short-circuit to a null render.
@@ -1,406 +0,0 @@
---
-title: "@json-render/directives"
---
-
-Pre-built custom directives for `@json-render/core`. Drop them into your catalog and renderer to add formatting, math, string manipulation, and i18n.
-
-## Install
-
-```bash
-npm install @json-render/directives
-```
-
-## Quick Start
-
-```typescript
-import { standardDirectives } from '@json-render/directives';
-
-// Wire into prompt generation
-const prompt = catalog.prompt({ directives: standardDirectives });
-
-// Wire into the renderer
-<JSONUIProvider spec={spec} directives={standardDirectives}>
-  ...
-</JSONUIProvider>
-```
-
-To add factory directives like `createI18nDirective`, spread the array:
-
-```typescript
-import { standardDirectives, createI18nDirective } from '@json-render/directives';
-
-const directives = [...standardDirectives, createI18nDirective(config)];
-```
-
-## Directives
-
-### `$format` — Locale-aware value formatting
-
-Formats values using `Intl` formatters. Supports `date`, `currency`, `number`, and `percent`.
-
-```json
-{ "$format": "currency", "value": { "$state": "/cart/total" }, "currency": "USD" }
-```
-
-```json
-{ "$format": "date", "value": { "$state": "/user/createdAt" } }
-```
-
-```json
-{ "$format": "number", "value": 1234567, "notation": "compact" }
-```
-
-```json
-{ "$format": "percent", "value": 0.75 }
-```
-
-Relative dates are also supported:
-
-```json
-{ "$format": "date", "value": { "$state": "/post/createdAt" }, "style": "relative" }
-```
-
-This returns strings like `"3h ago"`, `"2d from now"`, or `"just now"`.
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$format</code></td>
-      <td><code>{'\"date\" | \"currency\" | \"number\" | \"percent\"'}</code></td>
-      <td>Format type.</td>
-    </tr>
-    <tr>
-      <td><code>value</code></td>
-      <td><code>unknown</code></td>
-      <td>Value to format. Accepts any dynamic expression.</td>
-    </tr>
-    <tr>
-      <td><code>locale</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Locale for formatting (e.g. <code>"en-US"</code>).</td>
-    </tr>
-    <tr>
-      <td><code>currency</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Currency code for <code>"currency"</code> format. Default: <code>"USD"</code>.</td>
-    </tr>
-    <tr>
-      <td><code>notation</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Notation for <code>"number"</code> format (e.g. <code>"compact"</code>).</td>
-    </tr>
-    <tr>
-      <td><code>style</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Set to <code>"relative"</code> for relative date formatting.</td>
-    </tr>
-    <tr>
-      <td><code>options</code></td>
-      <td><code>{'Record<string, unknown>'}</code></td>
-      <td>Optional. Extra <code>Intl</code> formatter options.</td>
-    </tr>
-  </tbody>
-</table>
-
-### `$math` — Arithmetic operations
-
-Performs arithmetic on one or two operands. Operands accept any dynamic expression.
-
-```json
-{ "$math": "add", "a": { "$state": "/subtotal" }, "b": { "$state": "/tax" } }
-```
-
-```json
-{ "$math": "round", "a": 3.7 }
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$math</code></td>
-      <td><code>{'\"add\" | \"subtract\" | \"multiply\" | \"divide\" | \"mod\" | \"min\" | \"max\" | \"round\" | \"floor\" | \"ceil\" | \"abs\"'}</code></td>
-      <td>Operation to perform.</td>
-    </tr>
-    <tr>
-      <td><code>a</code></td>
-      <td><code>unknown</code></td>
-      <td>First operand. Defaults to <code>0</code> if missing.</td>
-    </tr>
-    <tr>
-      <td><code>b</code></td>
-      <td><code>unknown</code></td>
-      <td>Second operand (binary ops only). Defaults to <code>0</code> if missing.</td>
-    </tr>
-  </tbody>
-</table>
-
-Unary operations (`round`, `floor`, `ceil`, `abs`) only use `a`. Division by zero returns `0`.
-
-### `$concat` — String concatenation
-
-Concatenates multiple values into a single string. Each element is resolved then joined.
-
-```json
-{ "$concat": [{ "$state": "/user/firstName" }, " ", { "$state": "/user/lastName" }] }
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$concat</code></td>
-      <td><code>{'unknown[]'}</code></td>
-      <td>Array of values to concatenate. Each is resolved, converted to string, and joined.</td>
-    </tr>
-  </tbody>
-</table>
-
-### `$count` — Array/string length
-
-Returns the length of an array or string. Returns `0` for other types.
-
-```json
-{ "$count": { "$state": "/cart/items" } }
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$count</code></td>
-      <td><code>unknown</code></td>
-      <td>Value to count. Accepts arrays and strings.</td>
-    </tr>
-  </tbody>
-</table>
-
-### `$truncate` — Text truncation
-
-Truncates text to a maximum length with a configurable suffix.
-
-```json
-{ "$truncate": { "$state": "/post/body" }, "length": 140, "suffix": "..." }
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$truncate</code></td>
-      <td><code>unknown</code></td>
-      <td>Value to truncate.</td>
-    </tr>
-    <tr>
-      <td><code>length</code></td>
-      <td><code>number</code></td>
-      <td>Optional. Max character length. Default: <code>100</code>.</td>
-    </tr>
-    <tr>
-      <td><code>suffix</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Suffix to append when truncated. Default: <code>"..."</code>.</td>
-    </tr>
-  </tbody>
-</table>
-
-### `$pluralize` — Singular/plural forms
-
-Selects a singular, plural, or zero form based on a count.
-
-```json
-{ "$pluralize": { "$state": "/cart/itemCount" }, "one": "item", "other": "items", "zero": "no items" }
-```
-
-Output: `"3 items"`, `"1 item"`, or `"no items"`.
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$pluralize</code></td>
-      <td><code>unknown</code></td>
-      <td>Count value. Accepts dynamic expressions.</td>
-    </tr>
-    <tr>
-      <td><code>one</code></td>
-      <td><code>string</code></td>
-      <td>Singular form label.</td>
-    </tr>
-    <tr>
-      <td><code>other</code></td>
-      <td><code>string</code></td>
-      <td>Plural form label.</td>
-    </tr>
-    <tr>
-      <td><code>zero</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Label for count of zero. If omitted, uses <code>"0 {'<other>'}"</code>.</td>
-    </tr>
-  </tbody>
-</table>
-
-### `$join` — Join array elements
-
-Joins array elements with a separator string.
-
-```json
-{ "$join": { "$state": "/tags" }, "separator": ", " }
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$join</code></td>
-      <td><code>unknown</code></td>
-      <td>Array to join. Non-array values are converted to string.</td>
-    </tr>
-    <tr>
-      <td><code>separator</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Separator between elements. Default: <code>", "</code>.</td>
-    </tr>
-  </tbody>
-</table>
-
-### `createI18nDirective` — Internationalization
-
-Factory function that creates a `$t` directive for translations with `{'{{param}}'}` interpolation.
-
-```typescript
-import { createI18nDirective } from '@json-render/directives';
-
-const tDirective = createI18nDirective({
-  locale: 'en',
-  messages: {
-    en: { "greeting": "Hello, {'{{name}}'}!", "checkout.submit": "Place Order" },
-    es: { "greeting": "Hola, {'{{name}}'}!", "checkout.submit": "Realizar Pedido" },
-  },
-  fallbackLocale: 'en',
-});
-```
-
-Usage in specs:
-
-```json
-{ "$t": "checkout.submit" }
-```
-
-```json
-{ "$t": "greeting", "params": { "name": { "$state": "/user/name" } } }
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$t</code></td>
-      <td><code>string</code></td>
-      <td>Translation key.</td>
-    </tr>
-    <tr>
-      <td><code>params</code></td>
-      <td><code>{'Record<string, unknown>'}</code></td>
-      <td>Optional. Interpolation parameters. Values accept dynamic expressions.</td>
-    </tr>
-  </tbody>
-</table>
-
-#### `I18nConfig`
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>locale</code></td>
-      <td><code>string</code></td>
-      <td>Current locale (e.g. <code>"en"</code>).</td>
-    </tr>
-    <tr>
-      <td><code>messages</code></td>
-      <td><code>{'Record<string, Record<string, string>>'}</code></td>
-      <td>Map of locale to key-value translation pairs.</td>
-    </tr>
-    <tr>
-      <td><code>fallbackLocale</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Fallback locale when a key is missing in the current locale.</td>
-    </tr>
-  </tbody>
-</table>
-
-## Composition
-
-Directives compose naturally. Each resolver calls `resolvePropValue` on its inputs, so you can nest directives:
-
-```json
-{
-  "$format": "currency",
-  "value": { "$math": "multiply", "a": { "$state": "/price" }, "b": { "$state": "/qty" } },
-  "currency": "USD"
-}
-```
-
-```json
-{
-  "$pluralize": { "$count": { "$state": "/items" } },
-  "one": "item",
-  "other": "items"
-}
-```
@@ -1,363 +0,0 @@
---
-title: "@json-render/image"
---
-
-Image renderer. Turn JSON specs into SVG and PNG images using [Satori](https://github.com/vercel/satori).
-
-## Install
-
-```bash
-npm install @json-render/core @json-render/image
-```
-
-For PNG output, also install the optional peer dependency:
-
-```bash
-npm install @resvg/resvg-js
-```
-
-See the [Image example](https://github.com/vercel-labs/json-render/tree/main/examples/image) for a full working example.
-
-## schema
-
-The image element schema for image specs. Use with `defineCatalog` from core.
-
-```typescript
-import { defineCatalog } from '@json-render/core';
-import { schema, standardComponentDefinitions } from '@json-render/image';
-
-const catalog = defineCatalog(schema, {
-  components: standardComponentDefinitions,
-});
-```
-
-## Render Functions
-
-Server-side functions for producing image output. Both accept a spec and optional `RenderOptions`.
-
-```typescript
-import { renderToSvg, renderToPng } from '@json-render/image/render';
-
-const svg = await renderToSvg(spec, { fonts });
-
-const png = await renderToPng(spec, { fonts });
-await writeFile('output.png', png);
-```
-
-### RenderOptions
-
-```typescript
-interface RenderOptions {
-  registry?: ComponentRegistry;
-  includeStandard?: boolean;  // default: true
-  state?: Record<string, unknown>;
-  fonts?: SatoriOptions['fonts'];
-  width?: number;
-  height?: number;
-}
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Option</th>
-      <th>Type</th>
-      <th>Default</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>fonts</code></td>
-      <td><code>{"SatoriOptions['fonts']"}</code></td>
-      <td><code>[]</code></td>
-      <td>Font data for text rendering (required for meaningful output)</td>
-    </tr>
-    <tr>
-      <td><code>width</code></td>
-      <td><code>number</code></td>
-      <td>Frame prop</td>
-      <td>Override the output image width</td>
-    </tr>
-    <tr>
-      <td><code>height</code></td>
-      <td><code>number</code></td>
-      <td>Frame prop</td>
-      <td>Override the output image height</td>
-    </tr>
-    <tr>
-      <td><code>registry</code></td>
-      <td><code>{"Record<string, ComponentRenderer>"}</code></td>
-      <td><code>{"{}"}</code></td>
-      <td>Custom component map (merged with standard components)</td>
-    </tr>
-    <tr>
-      <td><code>includeStandard</code></td>
-      <td><code>boolean</code></td>
-      <td><code>true</code></td>
-      <td>Include built-in standard components</td>
-    </tr>
-    <tr>
-      <td><code>state</code></td>
-      <td><code>{"Record<string, unknown>"}</code></td>
-      <td><code>{"{}"}</code></td>
-      <td>Initial state for <code>$state</code> / <code>$cond</code> dynamic prop resolution</td>
-    </tr>
-  </tbody>
-</table>
-
-## Standard Components
-
-### Root
-
-#### Frame
-
-Root image container. Defines the output image dimensions and background. Must be the root element.
-
-```typescript
-{
-  width: number;
-  height: number;
-  backgroundColor: string | null;
-  padding: number | null;
-  display: "flex" | "none" | null;
-  flexDirection: "row" | "column" | null;
-  alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
-  justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
-}
-```
-
-### Layout
-
-#### Box
-
-Generic container with padding, margin, background, border, and flex alignment. Supports absolute positioning.
-
-```typescript
-{
-  padding: number | null;
-  paddingTop: number | null;
-  paddingBottom: number | null;
-  paddingLeft: number | null;
-  paddingRight: number | null;
-  margin: number | null;
-  backgroundColor: string | null;
-  borderWidth: number | null;
-  borderColor: string | null;
-  borderRadius: number | null;
-  flex: number | null;
-  width: number | string | null;
-  height: number | string | null;
-  alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
-  justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
-  flexDirection: "row" | "column" | null;
-  position: "relative" | "absolute" | null;
-  top: number | null;
-  left: number | null;
-  right: number | null;
-  bottom: number | null;
-  overflow: "visible" | "hidden" | null;
-}
-```
-
-#### Row
-
-Horizontal flex layout with optional wrapping.
-
-```typescript
-{
-  gap: number | null;
-  alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
-  justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
-  padding: number | null;
-  flex: number | null;
-  wrap: boolean | null;
-}
-```
-
-#### Column
-
-Vertical flex layout.
-
-```typescript
-{
-  gap: number | null;
-  alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
-  justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
-  padding: number | null;
-  flex: number | null;
-}
-```
-
-### Content
-
-#### Heading
-
-Heading text at various levels. h1 is largest, h4 is smallest.
-
-```typescript
-{
-  text: string;
-  level: "h1" | "h2" | "h3" | "h4" | null;
-  color: string | null;
-  align: "left" | "center" | "right" | null;
-  letterSpacing: number | string | null;
-  lineHeight: number | null;
-}
-```
-
-#### Text
-
-Body text with configurable size, color, weight, and alignment.
-
-```typescript
-{
-  text: string;
-  fontSize: number | null;
-  color: string | null;
-  align: "left" | "center" | "right" | null;
-  fontWeight: "normal" | "bold" | null;
-  fontStyle: "normal" | "italic" | null;
-  lineHeight: number | null;
-  letterSpacing: number | string | null;
-  textDecoration: "none" | "underline" | "line-through" | null;
-}
-```
-
-#### Image
-
-Image from a URL with optional dimensions and fit.
-
-```typescript
-{
-  src: string;
-  width: number | null;
-  height: number | null;
-  borderRadius: number | null;
-  objectFit: "contain" | "cover" | "fill" | "none" | null;
-}
-```
-
-### Decorative
-
-#### Divider
-
-Horizontal line separator.
-
-```typescript
-{
-  color: string | null;
-  thickness: number | null;
-  marginTop: number | null;
-  marginBottom: number | null;
-}
-```
-
-#### Spacer
-
-Empty vertical space.
-
-```typescript
-{
-  height: number | null;
-}
-```
-
-## Catalog Definitions
-
-Pre-built definitions for creating image catalogs:
-
-```typescript
-import { standardComponentDefinitions } from '@json-render/image/catalog';
-import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/image';
-
-const catalog = defineCatalog(schema, {
-  components: {
-    ...standardComponentDefinitions,
-    // Add custom components
-  },
-});
-```
-
-## Server-Safe Import
-
-Import schema and catalog definitions without pulling in React or Satori:
-
-```typescript
-import { schema, standardComponentDefinitions } from '@json-render/image/server';
-```
-
-## Sub-path Exports
-
-<table>
-  <thead>
-    <tr>
-      <th>Export</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>@json-render/image</code></td>
-      <td>Full package: schema, renderer, components, render functions</td>
-    </tr>
-    <tr>
-      <td><code>@json-render/image/server</code></td>
-      <td>Schema and catalog definitions only (no React or Satori)</td>
-    </tr>
-    <tr>
-      <td><code>@json-render/image/catalog</code></td>
-      <td>Standard component definitions and types</td>
-    </tr>
-    <tr>
-      <td><code>@json-render/image/render</code></td>
-      <td>Server-side render functions only</td>
-    </tr>
-  </tbody>
-</table>
-
-## Types
-
-<table>
-  <thead>
-    <tr>
-      <th>Export</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>ImageSchema</code></td>
-      <td>Schema type for image specs</td>
-    </tr>
-    <tr>
-      <td><code>ImageSpec</code></td>
-      <td>Spec type for image output</td>
-    </tr>
-    <tr>
-      <td><code>RenderOptions</code></td>
-      <td>Options for render functions</td>
-    </tr>
-    <tr>
-      <td><code>ComponentRenderProps</code></td>
-      <td>Props passed to component render functions</td>
-    </tr>
-    <tr>
-      <td><code>ComponentRenderer</code></td>
-      <td>Component render function type</td>
-    </tr>
-    <tr>
-      <td><code>ComponentRegistry</code></td>
-      <td>Map of component names to render functions</td>
-    </tr>
-    <tr>
-      <td><code>StandardComponentDefinitions</code></td>
-      <td>Type of the standard component definitions object</td>
-    </tr>
-    <tr>
-      <td><code>StandardComponentProps{'<K>'}</code></td>
-      <td>Inferred props type for a standard component by name</td>
-    </tr>
-  </tbody>
-</table>
@@ -1,292 +0,0 @@
---
-title: "@json-render/ink"
---
-
-Terminal renderer for [Ink](https://github.com/vadimdemedes/ink) with multiple standard components, providers, hooks, and streaming support.
-
-## Installation
-
-<PackageInstall packages="@json-render/core @json-render/ink" />
-
-Peer dependencies: `react ^18.0.0 || ^19.0.0`, `ink ^6.0.0`, and `zod ^4.0.0`.
-
-<PackageInstall packages="react ink zod" />
-
-## Standard Components
-
-### Layout
-
-<table>
-<thead>
-<tr><th>Component</th><th>Props</th><th>Description</th></tr>
-</thead>
-<tbody>
-<tr><td><code>Box</code></td><td><code>flexDirection</code>, <code>alignItems</code>, <code>justifyContent</code>, <code>gap</code>, <code>padding</code>, <code>margin</code>, <code>borderStyle</code>, <code>borderColor</code>, <code>width</code>, <code>height</code>, <code>display</code>, <code>overflow</code></td><td>Flexbox layout container (like a terminal div)</td></tr>
-<tr><td><code>Spacer</code></td><td>(none)</td><td>Flexible empty space that expands to fill available room</td></tr>
-<tr><td><code>Newline</code></td><td><code>count</code></td><td>Insert blank lines</td></tr>
-</tbody>
-</table>
-
-### Content
-
-<table>
-<thead>
-<tr><th>Component</th><th>Props</th><th>Description</th></tr>
-</thead>
-<tbody>
-<tr><td><code>Text</code></td><td><code>text</code>, <code>color</code>, <code>bold</code>, <code>italic</code>, <code>underline</code>, <code>strikethrough</code>, <code>dimColor</code>, <code>inverse</code>, <code>wrap</code></td><td>Text output with styling</td></tr>
-<tr><td><code>Heading</code></td><td><code>text</code>, <code>level</code> (h1-h4), <code>color</code></td><td>Section heading</td></tr>
-<tr><td><code>Divider</code></td><td><code>character</code>, <code>color</code>, <code>dimColor</code>, <code>title</code>, <code>width</code></td><td>Horizontal separator line with optional title</td></tr>
-<tr><td><code>Badge</code></td><td><code>label</code>, <code>variant</code></td><td>Colored inline label (default, info, success, warning, error)</td></tr>
-<tr><td><code>Spinner</code></td><td><code>label</code>, <code>color</code></td><td>Animated loading spinner</td></tr>
-<tr><td><code>ProgressBar</code></td><td><code>progress</code> (0-1), <code>width</code>, <code>color</code>, <code>label</code></td><td>Horizontal progress bar</td></tr>
-<tr><td><code>StatusLine</code></td><td><code>text</code>, <code>status</code>, <code>icon</code></td><td>Status message with colored icon</td></tr>
-<tr><td><code>KeyValue</code></td><td><code>label</code>, <code>value</code>, <code>labelColor</code>, <code>separator</code></td><td>Key-value pair display</td></tr>
-<tr><td><code>Link</code></td><td><code>url</code>, <code>label</code>, <code>color</code></td><td>Renders a URL as underlined text. Shows "label (url)" when label is provided.</td></tr>
-<tr><td><code>Markdown</code></td><td><code>text</code></td><td>Renders markdown with terminal styling (headings, bold, italic, code, lists, blockquotes, horizontal rules)</td></tr>
-</tbody>
-</table>
-
-### Data
-
-<table>
-<thead>
-<tr><th>Component</th><th>Props</th><th>Description</th></tr>
-</thead>
-<tbody>
-<tr><td><code>Table</code></td><td><code>columns</code>, <code>rows</code>, <code>borderStyle</code>, <code>headerColor</code></td><td>Tabular data with headers</td></tr>
-<tr><td><code>List</code></td><td><code>items</code>, <code>ordered</code>, <code>bulletChar</code>, <code>spacing</code></td><td>Bulleted or numbered list</td></tr>
-<tr><td><code>ListItem</code></td><td><code>title</code>, <code>subtitle</code>, <code>leading</code>, <code>trailing</code></td><td>Structured list row</td></tr>
-<tr><td><code>Card</code></td><td><code>title</code>, <code>borderStyle</code>, <code>borderColor</code>, <code>padding</code></td><td>Bordered container with optional title</td></tr>
-<tr><td><code>Sparkline</code></td><td><code>data</code>, <code>width</code>, <code>color</code>, <code>label</code>, <code>min</code>, <code>max</code></td><td>Inline sparkline chart using Unicode blocks (▁▂▃▄▅▆▇█)</td></tr>
-<tr><td><code>BarChart</code></td><td><code>data</code> (label/value/color), <code>width</code>, <code>showValues</code>, <code>showPercentage</code></td><td>Horizontal bar chart for comparing values</td></tr>
-</tbody>
-</table>
-
-### Interactive
-
-<table>
-<thead>
-<tr><th>Component</th><th>Props</th><th>Description</th></tr>
-</thead>
-<tbody>
-<tr><td><code>TextInput</code></td><td><code>placeholder</code>, <code>value</code> (use <code>$bindState</code>), <code>label</code>, <code>mask</code></td><td>Text input field. Press Enter to submit.</td></tr>
-<tr><td><code>Select</code></td><td><code>options</code>, <code>value</code> (use <code>$bindState</code>), <code>label</code></td><td>Arrow-key selection menu</td></tr>
-<tr><td><code>MultiSelect</code></td><td><code>options</code>, <code>value</code> (use <code>$bindState</code>), <code>label</code>, <code>min</code>, <code>max</code></td><td>Multi-selection menu. Space to toggle, Enter to confirm.</td></tr>
-<tr><td><code>ConfirmInput</code></td><td><code>message</code>, <code>defaultValue</code>, <code>yesLabel</code>, <code>noLabel</code></td><td>Yes/No confirmation prompt. Press Y or N.</td></tr>
-<tr><td><code>Tabs</code></td><td><code>tabs</code>, <code>value</code> (use <code>$bindState</code>), <code>color</code></td><td>Tab bar navigation with left/right arrow keys. Place child content inside with visible conditions.</td></tr>
-</tbody>
-</table>
-
-## Providers
-
-### JSONUIProvider
-
-Convenience wrapper around all providers: `StateProvider` → `VisibilityProvider` → `ValidationProvider` → `ActionProvider` → `FocusProvider`.
-
-```tsx
-import { JSONUIProvider, Renderer } from "@json-render/ink";
-
-<JSONUIProvider initialState={{}} handlers={handlers}>
-  <Renderer spec={spec} registry={registry} />
-</JSONUIProvider>
-```
-
-### StateProvider
-
-```tsx
-<StateProvider initialState={object} onStateChange={fn}>
-  {children}
-</StateProvider>
-```
-
-<table>
-<thead>
-<tr><th>Prop</th><th>Type</th><th>Description</th></tr>
-</thead>
-<tbody>
-<tr><td><code>store</code></td><td><code>StateStore</code></td><td>External store (controlled mode). When provided, <code>initialState</code> and <code>onStateChange</code> are ignored.</td></tr>
-<tr><td><code>initialState</code></td><td><code>Record&lt;string, unknown&gt;</code></td><td>Initial state model (uncontrolled mode).</td></tr>
-<tr><td><code>onStateChange</code></td><td><code>{'(changes: Array<{ path: string; value: unknown }>) => void'}</code></td><td>Callback when state changes (uncontrolled mode).</td></tr>
-</tbody>
-</table>
-
-#### External Store (Controlled Mode)
-
-Pass a `StateStore` to bypass internal state and wire json-render to any state management:
-
-```tsx
-import { createStateStore } from "@json-render/ink";
-
-const store = createStateStore({ count: 0 });
-
-<StateProvider store={store}>
-  {children}
-</StateProvider>
-
-// Mutate from anywhere — components re-render automatically:
-store.set("/count", 1);
-```
-
-The `store` prop is also available on `JSONUIProvider` and `createRenderer`.
-
-### ActionProvider
-
-```tsx
-<ActionProvider handlers={Record<string, ActionHandler>} navigate={fn}>
-  {children}
-</ActionProvider>
-```
-
-Built-in actions: `setState`, `pushState`, `removeState`, `log`, `exit`. Custom handlers override built-ins. Includes a terminal confirmation dialog (press Y/N) for actions with `confirm`.
-
-### VisibilityProvider
-
-```tsx
-<VisibilityProvider>
-  {children}
-</VisibilityProvider>
-```
-
-### ValidationProvider
-
-```tsx
-<ValidationProvider>
-  {children}
-</ValidationProvider>
-```
-
-### FocusProvider
-
-```tsx
-<FocusProvider>
-  {children}
-</FocusProvider>
-```
-
-Manages Tab-cycling focus between interactive components (TextInput, Select). Supports `useFocusDisable` to suppress cycling during modal dialogs.
-
-## defineRegistry
-
-Create a type-safe component registry. Standard components are built-in; only register custom components.
-
-```tsx
-import { defineRegistry, type Components } from "@json-render/ink";
-
-const { registry, handlers, executeAction } = defineRegistry(catalog, {
-  components: {
-    MyWidget: ({ props }) => <Text>{props.label}</Text>,
-  } as Components<typeof catalog>,
-  actions: {
-    submit: async (params, setState, state) => {
-      // custom action logic
-    },
-  },
-});
-```
-
-`handlers` is designed for `JSONUIProvider`/`ActionProvider`. `executeAction` is an imperative helper.
-
-## createRenderer
-
-Higher-level helper that wraps `Renderer` + all providers into a single component.
-
-```tsx
-import { createRenderer } from "@json-render/ink";
-
-const UIRenderer = createRenderer(catalog, components);
-
-<UIRenderer spec={spec} state={initialState} />;
-```
-
-## Hooks
-
-### useUIStream
-
-```typescript
-const {
-  spec,         // Spec | null - current UI state
-  isStreaming,  // boolean - true while streaming
-  error,        // Error | null
-  send,         // (prompt: string, context?: Record<string, unknown>) => Promise<void>
-  stop,         // () => void - abort the current stream
-  clear,        // () => void - reset spec and error
-} = useUIStream({
-  api: string,
-  onComplete?: (spec: Spec) => void,
-  onError?: (error: Error) => void,
-  fetch?: (url: string, init?: RequestInit) => Promise<Response>,
-  validate?: boolean,
-  maxRetries?: number,
-});
-```
-
-### useStateStore
-
-```typescript
-const { state, get, set, update } = useStateStore();
-```
-
-### useStateValue
-
-```typescript
-const value = useStateValue(path: string);
-```
-
-### useBoundProp
-
-```typescript
-const [value, setValue] = useBoundProp(resolvedValue, bindingPath);
-```
-
-### useActions
-
-```typescript
-const { execute } = useActions();
-```
-
-### useIsVisible
-
-```typescript
-const isVisible = useIsVisible(condition?: VisibilityCondition);
-```
-
-### useFocus
-
-```typescript
-const { isActive, id } = useFocus();
-```
-
-### useFocusDisable
-
-```typescript
-useFocusDisable(disabled: boolean);
-```
-
-Suppresses Tab-cycling while `disabled` is true (e.g., during a modal dialog).
-
-## Catalog Exports
-
-```typescript
-import { standardComponentDefinitions, standardActionDefinitions } from "@json-render/ink/catalog";
-import { schema } from "@json-render/ink/schema";
-```
-
-<table>
-<thead>
-<tr><th>Export</th><th>Purpose</th></tr>
-</thead>
-<tbody>
-<tr><td><code>standardComponentDefinitions</code></td><td>Catalog definitions for all 19 standard components</td></tr>
-<tr><td><code>standardActionDefinitions</code></td><td>Catalog definitions for standard actions (setState, pushState, removeState, log, exit)</td></tr>
-<tr><td><code>schema</code></td><td>Ink element tree schema</td></tr>
-</tbody>
-</table>
-
-## Server Export
-
-```typescript
-import { schema, standardComponentDefinitions, standardActionDefinitions } from "@json-render/ink/server";
-```
-
-Re-exports the schema and catalog definitions for server-side usage (e.g., building system prompts).
@@ -1,103 +0,0 @@
---
-title: "@json-render/jotai"
---
-
-Jotai adapter for json-render's `StateStore` interface.
-
-## Installation
-
-```bash
-npm install @json-render/jotai @json-render/core @json-render/react jotai
-```
-
-## jotaiStateStore
-
-Create a `StateStore` backed by a Jotai atom.
-
-```typescript
-import { jotaiStateStore } from "@json-render/jotai";
-```
-
-### Options
-
-<table>
-  <thead>
-    <tr>
-      <th>Option</th>
-      <th>Type</th>
-      <th>Required</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>atom</code></td>
-      <td><code>{'WritableAtom<StateModel, [StateModel], void>'}</code></td>
-      <td>Yes</td>
-      <td>A writable atom holding the state model.</td>
-    </tr>
-    <tr>
-      <td><code>store</code></td>
-      <td>Jotai <code>Store</code></td>
-      <td>No</td>
-      <td>The Jotai store instance. Defaults to a new store created internally. Pass your own to share state with <code>{'<Provider>'}</code>.</td>
-    </tr>
-  </tbody>
-</table>
-
-### Example
-
-```typescript
-import { atom } from "jotai";
-import { jotaiStateStore } from "@json-render/jotai";
-import { StateProvider } from "@json-render/react";
-
-const uiAtom = atom<Record<string, unknown>>({ count: 0 });
-const store = jotaiStateStore({ atom: uiAtom });
-```
-
-```tsx
-<StateProvider store={store}>
-  {/* json-render reads/writes go through Jotai */}
-</StateProvider>
-```
-
-### Shared Jotai Store
-
-If your app already uses a Jotai `<Provider>` with a custom store, pass it so both json-render and your components share the same state:
-
-```typescript
-import { atom, createStore } from "jotai";
-import { Provider as JotaiProvider } from "jotai/react";
-import { jotaiStateStore } from "@json-render/jotai";
-import { StateProvider } from "@json-render/react";
-
-const jStore = createStore();
-const uiAtom = atom<Record<string, unknown>>({ count: 0 });
-const store = jotaiStateStore({ atom: uiAtom, store: jStore });
-```
-
-```tsx
-<JotaiProvider store={jStore}>
-  <StateProvider store={store}>
-    {/* Both json-render and useAtom() see the same state */}
-  </StateProvider>
-</JotaiProvider>
-```
-
-## Re-exports
-
-<table>
-  <thead>
-    <tr>
-      <th>Export</th>
-      <th>Source</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>StateStore</code></td>
-      <td><code>@json-render/core</code></td>
-    </tr>
-  </tbody>
-</table>
@@ -1,246 +0,0 @@
---
-title: "@json-render/mcp"
---
-
-MCP Apps integration for json-render. Serve json-render UIs as interactive [MCP Apps](https://modelcontextprotocol.io/docs/extensions/apps) inside Claude, ChatGPT, Cursor, VS Code, and other MCP-capable clients.
-
-## Install
-
-```bash
-npm install @json-render/mcp @json-render/core @modelcontextprotocol/sdk
-```
-
-For the iframe-side React UI, also install:
-
-```bash
-npm install @json-render/react react react-dom
-```
-
-See the [MCP example](https://github.com/vercel-labs/json-render/tree/main/examples/mcp) for a full working example.
-
-## Overview
-
-MCP Apps let MCP servers return interactive HTML UIs that render directly inside chat conversations. `@json-render/mcp` bridges json-render catalogs with the MCP Apps protocol:
-
-1. Your **catalog** defines which components and actions the AI can use
-2. The **MCP server** exposes the catalog as a tool with the spec schema
-3. The **bundled HTML** renders json-render specs inside the host's sandboxed iframe
-4. The AI generates a spec, the host renders it, and users interact with the live UI
-
-## Server API
-
-### createMcpApp
-
-Create a fully-configured MCP server. This is the main entry point.
-
-```typescript
-import { createMcpApp } from "@json-render/mcp";
-import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
-import fs from "node:fs";
-
-const server = createMcpApp({
-  name: "My Dashboard",
-  version: "1.0.0",
-  catalog: myCatalog,
-  html: fs.readFileSync("dist/index.html", "utf-8"),
-});
-
-await server.connect(new StdioServerTransport());
-```
-
-#### CreateMcpAppOptions
-
-<table>
-  <thead>
-    <tr>
-      <th>Option</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>name</code></td>
-      <td><code>string</code></td>
-      <td>Server name shown in client UIs</td>
-    </tr>
-    <tr>
-      <td><code>version</code></td>
-      <td><code>string</code></td>
-      <td>Server version</td>
-    </tr>
-    <tr>
-      <td><code>catalog</code></td>
-      <td><code>Catalog</code></td>
-      <td>json-render catalog defining available components</td>
-    </tr>
-    <tr>
-      <td><code>html</code></td>
-      <td><code>string</code></td>
-      <td>Self-contained HTML for the iframe UI</td>
-    </tr>
-    <tr>
-      <td><code>tool</code></td>
-      <td><code>McpToolOptions</code></td>
-      <td>Optional tool name/title/description overrides</td>
-    </tr>
-  </tbody>
-</table>
-
-### registerJsonRenderTool
-
-Register a json-render tool on an existing `McpServer`. Use this when you need to add json-render to a server that has other tools.
-
-```typescript
-import { registerJsonRenderTool } from "@json-render/mcp";
-
-registerJsonRenderTool(server, {
-  catalog,
-  name: "render-ui",
-  title: "Render UI",
-  description: "Render an interactive UI",
-  resourceUri: "ui://render-ui/view.html",
-});
-```
-
-### registerJsonRenderResource
-
-Register the UI resource that serves the bundled HTML.
-
-```typescript
-import { registerJsonRenderResource } from "@json-render/mcp";
-
-registerJsonRenderResource(server, {
-  resourceUri: "ui://render-ui/view.html",
-  html: bundledHtml,
-});
-```
-
-## Client API (`@json-render/mcp/app`)
-
-These exports run inside the sandboxed iframe rendered by the MCP host.
-
-### useJsonRenderApp
-
-React hook that connects to the MCP host, listens for tool results, and maintains the current json-render spec.
-
-```tsx
-import { useJsonRenderApp } from "@json-render/mcp/app";
-import { JSONUIProvider, Renderer } from "@json-render/react";
-
-function McpAppView({ registry }) {
-  const { spec, loading, connected, error } = useJsonRenderApp({
-    name: "my-app",
-    version: "1.0.0",
-  });
-
-  if (error) return <div>Error: {error.message}</div>;
-  if (!spec) return <div>Waiting...</div>;
-
-  return (
-    <JSONUIProvider registry={registry} initialState={spec.state ?? {}}>
-      <Renderer spec={spec} registry={registry} loading={loading} />
-    </JSONUIProvider>
-  );
-}
-```
-
-#### UseJsonRenderAppReturn
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>spec</code></td>
-      <td><code>{'Spec | null'}</code></td>
-      <td>Current json-render spec</td>
-    </tr>
-    <tr>
-      <td><code>loading</code></td>
-      <td><code>boolean</code></td>
-      <td>Whether the spec is still being received</td>
-    </tr>
-    <tr>
-      <td><code>connected</code></td>
-      <td><code>boolean</code></td>
-      <td>Whether connected to the host</td>
-    </tr>
-    <tr>
-      <td><code>connecting</code></td>
-      <td><code>boolean</code></td>
-      <td>Whether currently connecting</td>
-    </tr>
-    <tr>
-      <td><code>error</code></td>
-      <td><code>{'Error | null'}</code></td>
-      <td>Connection error, if any</td>
-    </tr>
-    <tr>
-      <td><code>app</code></td>
-      <td><code>{'App | null'}</code></td>
-      <td>The underlying MCP App instance</td>
-    </tr>
-    <tr>
-      <td><code>callServerTool</code></td>
-      <td><code>{'(name, args?) => Promise<void>'}</code></td>
-      <td>Call an MCP server tool and update spec from result</td>
-    </tr>
-  </tbody>
-</table>
-
-### buildAppHtml
-
-Generate a self-contained HTML page from bundled JavaScript and CSS.
-
-```typescript
-import { buildAppHtml } from "@json-render/mcp/app";
-import fs from "node:fs";
-
-const html = buildAppHtml({
-  title: "Dashboard",
-  js: fs.readFileSync("dist/app.js", "utf-8"),
-  css: fs.readFileSync("dist/app.css", "utf-8"),
-});
-```
-
-## Client Configuration
-
-### Cursor
-
-Add to `.cursor/mcp.json`:
-
-```json
-{
-  "mcpServers": {
-    "json-render": {
-      "command": "npx",
-      "args": ["tsx", "path/to/server.ts", "--stdio"]
-    }
-  }
-}
-```
-
-### Claude Desktop
-
-Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:
-
-```json
-{
-  "mcpServers": {
-    "json-render": {
-      "command": "npx",
-      "args": ["tsx", "/absolute/path/to/server.ts", "--stdio"]
-    }
-  }
-}
-```
-
-## Supported Clients
-
-MCP Apps are supported by Claude (web and desktop), ChatGPT, VS Code (GitHub Copilot), Cursor, Goose, and Postman.
@@ -1,34 +0,0 @@
-{
-  "title": "API Reference",
-  "pages": [
-    "core",
-    "react",
-    "next",
-    "tanstack-start",
-    "react-pdf",
-    "react-email",
-    "shadcn",
-    "shadcn-svelte",
-    "react-native",
-    "image",
-    "remotion",
-    "ink",
-    "vue",
-    "svelte",
-    "solid",
-    "react-three-fiber",
-    "directives",
-    "codegen",
-    "devtools",
-    "devtools-react",
-    "devtools-vue",
-    "devtools-svelte",
-    "devtools-solid",
-    "mcp",
-    "redux",
-    "zustand",
-    "jotai",
-    "xstate",
-    "yaml"
-  ]
-}
@@ -1,279 +0,0 @@
---
-title: "@json-render/next"
---
-
-Next.js renderer. JSON becomes full Next.js applications with routes, layouts, metadata, and SSR.
-
-## Installation
-
-```bash
-npm install @json-render/core @json-render/react @json-render/next
-```
-
-## schema
-
-The Next.js app schema for multi-page specs. Use with `defineCatalog` from core.
-
-```typescript
-import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/next/server';
-import { z } from 'zod';
-
-const catalog = defineCatalog(schema, {
-  components: {
-    Card: {
-      props: z.object({ title: z.string() }),
-      description: 'Card container',
-    },
-    NavBar: {
-      props: z.object({ links: z.array(z.object({ href: z.string(), label: z.string() })) }),
-      description: 'Navigation bar',
-    },
-  },
-  actions: {},
-});
-```
-
-## createNextApp
-
-Create all exports needed for a Next.js `[[...slug]]` catch-all route.
-
-```typescript
-import { createNextApp } from '@json-render/next/server';
-
-const { Page, generateMetadata, generateStaticParams } = createNextApp({
-  spec: myAppSpec,
-  loaders: {
-    loadPost: async ({ slug }) => {
-      const post = await db.post.findUnique({ where: { slug } });
-      return { post };
-    },
-  },
-});
-```
-
-### Options
-
-<table>
-  <thead>
-    <tr>
-      <th>Option</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>spec</code></td>
-      <td><code>{'NextAppSpec | (() => NextAppSpec | Promise<NextAppSpec>)'}</code></td>
-      <td>The application spec (static or dynamic)</td>
-    </tr>
-    <tr>
-      <td><code>loaders</code></td>
-      <td><code>{'Record<string, LoaderFn>'}</code></td>
-      <td>Server-side data loaders keyed by name</td>
-    </tr>
-  </tbody>
-</table>
-
-### Returns
-
-<table>
-  <thead>
-    <tr>
-      <th>Export</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>Page</code></td>
-      <td>Async Server Component for <code>page.tsx</code></td>
-    </tr>
-    <tr>
-      <td><code>generateMetadata</code></td>
-      <td>Metadata generator for Next.js SEO</td>
-    </tr>
-    <tr>
-      <td><code>generateStaticParams</code></td>
-      <td>Static params for pre-rendering at build time</td>
-    </tr>
-  </tbody>
-</table>
-
-## NextAppSpec
-
-The top-level spec defining an entire Next.js application.
-
-```typescript
-interface NextAppSpec {
-  metadata?: NextMetadata;
-  routes: Record<string, NextRouteSpec>;
-  layouts?: Record<string, Spec>;
-  state?: Record<string, unknown>;
-}
-```
-
-### Route Patterns
-
-Routes use Next.js URL conventions:
-
-<table>
-  <thead>
-    <tr>
-      <th>Pattern</th>
-      <th>Example Match</th>
-      <th>Params</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>/</code></td>
-      <td><code>/</code></td>
-      <td><code>{'{}'}</code></td>
-    </tr>
-    <tr>
-      <td><code>/about</code></td>
-      <td><code>/about</code></td>
-      <td><code>{'{}'}</code></td>
-    </tr>
-    <tr>
-      <td><code>/blog/[slug]</code></td>
-      <td><code>/blog/hello</code></td>
-      <td><code>{'{ slug: "hello" }'}</code></td>
-    </tr>
-    <tr>
-      <td><code>/docs/[...path]</code></td>
-      <td><code>/docs/a/b/c</code></td>
-      <td><code>{'{ path: ["a","b","c"] }'}</code></td>
-    </tr>
-    <tr>
-      <td><code>/app/[[...path]]</code></td>
-      <td><code>/app</code> or <code>/app/x/y</code></td>
-      <td><code>{'{ path: [] }'}</code> or <code>{'{ path: ["x","y"] }'}</code></td>
-    </tr>
-  </tbody>
-</table>
-
-## NextAppProvider
-
-Client component that provides the component registry and action handlers to all pages.
-
-```tsx
-import { NextAppProvider } from '@json-render/next';
-
-export default function Layout({ children }) {
-  return (
-    <NextAppProvider registry={registry} handlers={handlers}>
-      {children}
-    </NextAppProvider>
-  );
-}
-```
-
-## Built-in Components
-
-### Slot
-
-Placeholder in layouts where page content is rendered. Every layout MUST include a Slot.
-
-```json
-{ "type": "Slot", "props": {}, "children": [] }
-```
-
-### Link
-
-Client-side navigation wrapping `next/link`.
-
-```json
-{ "type": "Link", "props": { "href": "/about" }, "children": ["link-text"] }
-```
-
-## Built-in Actions
-
-<table>
-  <thead>
-    <tr>
-      <th>Action</th>
-      <th>Params</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>setState</code></td>
-      <td><code>{'{ statePath, value }'}</code></td>
-      <td>Update a value in state</td>
-    </tr>
-    <tr>
-      <td><code>pushState</code></td>
-      <td><code>{'{ statePath, value, clearStatePath? }'}</code></td>
-      <td>Append to array in state</td>
-    </tr>
-    <tr>
-      <td><code>removeState</code></td>
-      <td><code>{'{ statePath, index }'}</code></td>
-      <td>Remove from array by index</td>
-    </tr>
-    <tr>
-      <td><code>navigate</code></td>
-      <td><code>{'{ href }'}</code></td>
-      <td>Client-side navigation</td>
-    </tr>
-  </tbody>
-</table>
-
-## Server Utilities
-
-### matchRoute
-
-Match a pathname against a spec's routes.
-
-```typescript
-import { matchRoute } from '@json-render/next/server';
-
-const matched = matchRoute(spec, '/blog/hello-world');
-// { route: NextRouteSpec, pattern: '/blog/[slug]', params: { slug: 'hello-world' } }
-```
-
-### resolveMetadata
-
-Resolve merged metadata for a route.
-
-```typescript
-import { resolveMetadata } from '@json-render/next/server';
-
-const metadata = resolveMetadata(spec, matchedRoute?.route);
-```
-
-### slugToPath
-
-Convert catch-all slug array to pathname.
-
-```typescript
-import { slugToPath } from '@json-render/next/server';
-
-slugToPath(undefined);          // "/"
-slugToPath(['blog', 'hello']);  // "/blog/hello"
-```
-
-## Entry Points
-
-<table>
-  <thead>
-    <tr>
-      <th>Import</th>
-      <th>Contents</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>@json-render/next</code></td>
-      <td>Client components (NextAppProvider, PageRenderer, Link)</td>
-    </tr>
-    <tr>
-      <td><code>@json-render/next/server</code></td>
-      <td>Server utilities (createNextApp, matchRoute, schema)</td>
-    </tr>
-  </tbody>
-</table>
@@ -1,309 +0,0 @@
---
-title: "@json-render/react-email"
---
-
-React Email renderer. Turn JSON specs into HTML or plain-text emails using `@react-email/components` and `@react-email/render`.
-
-## Install
-
-```bash
-npm install @json-render/core @json-render/react-email @react-email/components @react-email/render
-```
-
-See the [React Email example](https://github.com/vercel-labs/json-render/tree/main/examples/react-email) for a full working example.
-
-## schema
-
-The email element schema for specs. Use with `defineCatalog` from core.
-
-```typescript
-import { defineCatalog } from '@json-render/core';
-import { schema, standardComponentDefinitions } from '@json-render/react-email';
-
-const catalog = defineCatalog(schema, {
-  components: standardComponentDefinitions,
-});
-```
-
-## Render Functions
-
-Server-side functions for producing email output. All accept a spec and optional `RenderOptions`.
-
-```typescript
-import { renderToHtml, renderToPlainText } from '@json-render/react-email';
-
-const html = await renderToHtml(spec);
-
-const plainText = await renderToPlainText(spec);
-```
-
-### RenderOptions
-
-```typescript
-interface RenderOptions {
-  registry?: ComponentRegistry;
-  includeStandard?: boolean;  // default: true
-  state?: Record<string, unknown>;
-}
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Option</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>registry</code></td>
-      <td>Custom component map (merged with standard components)</td>
-    </tr>
-    <tr>
-      <td><code>includeStandard</code></td>
-      <td>Include built-in standard components (default: <code>true</code>)</td>
-    </tr>
-    <tr>
-      <td><code>state</code></td>
-      <td>Initial state for <code>$state</code> / <code>$cond</code> dynamic prop resolution</td>
-    </tr>
-  </tbody>
-</table>
-
-## defineRegistry
-
-Create a type-safe component registry from a catalog. Components receive `{ props, children, emit, bindings, loading }`.
-
-```tsx
-import { defineRegistry } from '@json-render/react-email';
-import { Container, Heading, Text } from '@react-email/components';
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: ({ props, children }) => (
-      <Container style={{ padding: 16, backgroundColor: '#fff' }}>
-        <Heading>{props.title}</Heading>
-        {children}
-      </Container>
-    ),
-  },
-});
-
-const html = await renderToHtml(spec, { registry });
-```
-
-## createRenderer
-
-Create a standalone renderer component wired to state, actions, and validation (for interactive previews in the browser).
-
-```typescript
-import { createRenderer } from '@json-render/react-email';
-
-const EmailRenderer = createRenderer(catalog, components);
-```
-
-## Renderer
-
-The main component that renders a spec to React Email elements. Use inside `JSONUIProvider` when you need state, actions, or visibility.
-
-```typescript
-interface RendererProps {
-  spec: Spec | null;
-  registry?: ComponentRegistry;
-  includeStandard?: boolean;  // default: true
-  loading?: boolean;
-  fallback?: ComponentRenderer;
-}
-```
-
-## Standard Components
-
-### Document structure
-
-<table>
-  <thead>
-    <tr>
-      <th>Component</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>Html</code></td>
-      <td>Top-level email wrapper. Must be the root element.</td>
-    </tr>
-    <tr>
-      <td><code>Head</code></td>
-      <td>Email head section. Place inside Html.</td>
-    </tr>
-    <tr>
-      <td><code>Body</code></td>
-      <td>Email body wrapper. Place inside Html.</td>
-    </tr>
-  </tbody>
-</table>
-
-### Layout
-
-<table>
-  <thead>
-    <tr>
-      <th>Component</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>Container</code></td>
-      <td>Constrains content width (e.g. max-width 600px).</td>
-    </tr>
-    <tr>
-      <td><code>Section</code></td>
-      <td>Groups related content.</td>
-    </tr>
-    <tr>
-      <td><code>Row</code></td>
-      <td>Horizontal layout row.</td>
-    </tr>
-    <tr>
-      <td><code>Column</code></td>
-      <td>Column within a Row.</td>
-    </tr>
-  </tbody>
-</table>
-
-### Content
-
-<table>
-  <thead>
-    <tr>
-      <th>Component</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>Heading</code></td>
-      <td>Heading text (h1-h6).</td>
-    </tr>
-    <tr>
-      <td><code>Text</code></td>
-      <td>Body text paragraph.</td>
-    </tr>
-    <tr>
-      <td><code>Link</code></td>
-      <td>Hyperlink with text and href.</td>
-    </tr>
-    <tr>
-      <td><code>Button</code></td>
-      <td>Call-to-action button (link styled as button).</td>
-    </tr>
-    <tr>
-      <td><code>Image</code></td>
-      <td>Image from URL.</td>
-    </tr>
-    <tr>
-      <td><code>Hr</code></td>
-      <td>Horizontal rule separator.</td>
-    </tr>
-  </tbody>
-</table>
-
-### Utility
-
-<table>
-  <thead>
-    <tr>
-      <th>Component</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>Preview</code></td>
-      <td>Preview text for inbox (inside Html).</td>
-    </tr>
-    <tr>
-      <td><code>Markdown</code></td>
-      <td>Renders markdown content as email-safe HTML.</td>
-    </tr>
-  </tbody>
-</table>
-
-## Server-Safe Import
-
-Import schema and catalog definitions without pulling in React or `@react-email/components`:
-
-```typescript
-import { schema, standardComponentDefinitions } from '@json-render/react-email/server';
-```
-
-## Sub-path Exports
-
-<table>
-  <thead>
-    <tr>
-      <th>Export</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>@json-render/react-email</code></td>
-      <td>Full package: schema, renderer, components, render functions</td>
-    </tr>
-    <tr>
-      <td><code>@json-render/react-email/server</code></td>
-      <td>Schema and catalog definitions only (no React)</td>
-    </tr>
-    <tr>
-      <td><code>@json-render/react-email/catalog</code></td>
-      <td>Standard component definitions and types</td>
-    </tr>
-    <tr>
-      <td><code>@json-render/react-email/render</code></td>
-      <td>Server-side render functions only</td>
-    </tr>
-  </tbody>
-</table>
-
-## Types
-
-<table>
-  <thead>
-    <tr>
-      <th>Export</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>ReactEmailSchema</code></td>
-      <td>Schema type for email specs</td>
-    </tr>
-    <tr>
-      <td><code>ReactEmailSpec</code></td>
-      <td>Spec type for email documents</td>
-    </tr>
-    <tr>
-      <td><code>RenderOptions</code></td>
-      <td>Options for render functions</td>
-    </tr>
-    <tr>
-      <td><code>ComponentContext</code></td>
-      <td>Typed component render function context</td>
-    </tr>
-    <tr>
-      <td><code>ComponentFn</code></td>
-      <td>Component render function type</td>
-    </tr>
-    <tr>
-      <td><code>StandardComponentDefinitions</code></td>
-      <td>Type of the standard component definitions object</td>
-    </tr>
-    <tr>
-      <td><code>StandardComponentProps&lt;K&gt;</code></td>
-      <td>Inferred props type for a standard component by name</td>
-    </tr>
-  </tbody>
-</table>
@@ -1,231 +0,0 @@
---
-title: "@json-render/react-native"
---
-
-React Native renderer with standard components, providers, and hooks.
-
-## Standard Components
-
-### Layout
-
-<table>
-<thead>
-<tr><th>Component</th><th>Props</th><th>Description</th></tr>
-</thead>
-<tbody>
-<tr><td><code>Container</code></td><td><code>padding</code>, <code>background</code>, <code>borderRadius</code>, <code>borderColor</code>, <code>flex</code></td><td>Basic wrapper with styling</td></tr>
-<tr><td><code>Row</code></td><td><code>gap</code>, <code>align</code>, <code>justify</code>, <code>flex</code>, <code>wrap</code></td><td>Horizontal flex layout</td></tr>
-<tr><td><code>Column</code></td><td><code>gap</code>, <code>align</code>, <code>justify</code>, <code>flex</code></td><td>Vertical flex layout</td></tr>
-<tr><td><code>ScrollContainer</code></td><td><code>direction</code></td><td>Scrollable area (vertical or horizontal)</td></tr>
-<tr><td><code>SafeArea</code></td><td><code>edges</code></td><td>Safe area insets for notch/home indicator</td></tr>
-<tr><td><code>Pressable</code></td><td><code>action</code>, <code>actionParams</code></td><td>Touchable wrapper that triggers actions</td></tr>
-<tr><td><code>Spacer</code></td><td><code>size</code>, <code>flex</code></td><td>Fixed or flexible spacing</td></tr>
-<tr><td><code>Divider</code></td><td><code>color</code>, <code>thickness</code></td><td>Thin line separator</td></tr>
-</tbody>
-</table>
-
-### Content
-
-<table>
-<thead>
-<tr><th>Component</th><th>Props</th><th>Description</th></tr>
-</thead>
-<tbody>
-<tr><td><code>Heading</code></td><td><code>text</code>, <code>level</code>, <code>align</code>, <code>color</code></td><td>Heading text (levels 1-6)</td></tr>
-<tr><td><code>Paragraph</code></td><td><code>text</code>, <code>align</code>, <code>color</code></td><td>Body text</td></tr>
-<tr><td><code>Label</code></td><td><code>text</code>, <code>color</code>, <code>bold</code></td><td>Small label text</td></tr>
-<tr><td><code>Image</code></td><td><code>uri</code>, <code>width</code>, <code>height</code>, <code>resizeMode</code>, <code>borderRadius</code></td><td>Image display</td></tr>
-<tr><td><code>Avatar</code></td><td><code>uri</code>, <code>size</code>, <code>fallback</code></td><td>Circular avatar</td></tr>
-<tr><td><code>Badge</code></td><td><code>label</code>, <code>color</code>, <code>textColor</code></td><td>Status badge</td></tr>
-<tr><td><code>Chip</code></td><td><code>label</code>, <code>selected</code>, <code>color</code></td><td>Tag/chip</td></tr>
-</tbody>
-</table>
-
-### Input
-
-<table>
-<thead>
-<tr><th>Component</th><th>Props</th><th>Description</th></tr>
-</thead>
-<tbody>
-<tr><td><code>Button</code></td><td><code>label</code>, <code>variant</code>, <code>size</code>, <code>disabled</code>, <code>action</code>, <code>actionParams</code></td><td>Pressable button</td></tr>
-<tr><td><code>TextInput</code></td><td><code>placeholder</code>, <code>value</code> (use <code>$bindState</code>), <code>secure</code>, <code>keyboardType</code>, <code>multiline</code></td><td>Text input field</td></tr>
-<tr><td><code>Switch</code></td><td><code>checked</code> (use <code>$bindState</code>), <code>label</code></td><td>Toggle switch</td></tr>
-<tr><td><code>Checkbox</code></td><td><code>checked</code> (use <code>$bindState</code>), <code>label</code></td><td>Checkbox with label</td></tr>
-<tr><td><code>Slider</code></td><td><code>value</code> (use <code>$bindState</code>), <code>min</code>, <code>max</code>, <code>step</code></td><td>Range slider</td></tr>
-<tr><td><code>SearchBar</code></td><td><code>placeholder</code>, <code>value</code> (use <code>$bindState</code>)</td><td>Search input</td></tr>
-</tbody>
-</table>
-
-### Feedback
-
-<table>
-<thead>
-<tr><th>Component</th><th>Props</th><th>Description</th></tr>
-</thead>
-<tbody>
-<tr><td><code>Spinner</code></td><td><code>size</code>, <code>color</code></td><td>Loading indicator</td></tr>
-<tr><td><code>ProgressBar</code></td><td><code>progress</code>, <code>color</code>, <code>trackColor</code></td><td>Progress indicator</td></tr>
-</tbody>
-</table>
-
-### Composite
-
-<table>
-<thead>
-<tr><th>Component</th><th>Props</th><th>Description</th></tr>
-</thead>
-<tbody>
-<tr><td><code>Card</code></td><td><code>title</code>, <code>subtitle</code>, <code>padding</code></td><td>Card container</td></tr>
-<tr><td><code>ListItem</code></td><td><code>title</code>, <code>subtitle</code>, <code>leading</code>, <code>trailing</code>, <code>action</code>, <code>actionParams</code></td><td>List row</td></tr>
-<tr><td><code>Modal</code></td><td><code>visible</code>, <code>title</code></td><td>Bottom sheet modal</td></tr>
-</tbody>
-</table>
-
-## Providers
-
-### StateProvider
-
-```tsx
-<StateProvider initialState={object} onStateChange={fn}>
-  {children}
-</StateProvider>
-```
-
-<table>
-<thead>
-<tr><th>Prop</th><th>Type</th><th>Description</th></tr>
-</thead>
-<tbody>
-<tr><td><code>store</code></td><td><code>StateStore</code></td><td>External store (controlled mode). When provided, <code>initialState</code> and <code>onStateChange</code> are ignored.</td></tr>
-<tr><td><code>initialState</code></td><td><code>Record&lt;string, unknown&gt;</code></td><td>Initial state model (uncontrolled mode).</td></tr>
-<tr><td><code>onStateChange</code></td><td><code>{'(changes: Array<{ path: string; value: unknown }>) => void'}</code></td><td>Callback when state changes (uncontrolled mode). Called once per <code>set</code> or <code>update</code> with all changed entries.</td></tr>
-</tbody>
-</table>
-
-#### External Store (Controlled Mode)
-
-Pass a `StateStore` to bypass the internal state and wire json-render to any state management library:
-
-```tsx
-import { createStateStore, type StateStore } from "@json-render/react-native";
-
-const store = createStateStore({ count: 0 });
-
-<StateProvider store={store}>
-  {children}
-</StateProvider>
-
-// Mutate from anywhere — components re-render automatically:
-store.set("/count", 1);
-```
-
-The `store` prop is also available on `JSONUIProvider` and `createRenderer`.
-
-### ActionProvider
-
-```tsx
-<ActionProvider handlers={Record<string, ActionHandler>}>
-  {children}
-</ActionProvider>
-```
-
-### VisibilityProvider
-
-```tsx
-<VisibilityProvider>
-  {children}
-</VisibilityProvider>
-```
-
-Conditions in specs use the `VisibilityCondition` format with `$state` paths (e.g. `{ "$state": "/path" }`, `{ "$state": "/path", "eq": value }`). See [visibility](/docs/visibility) for the full syntax.
-
-### ValidationProvider
-
-```tsx
-<ValidationProvider>
-  {children}
-</ValidationProvider>
-```
-
-## defineRegistry
-
-Create a type-safe component registry. Standard components are built-in; only register custom components.
-
-```tsx
-import { defineRegistry, type Components } from '@json-render/react-native';
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Icon: ({ props }) => <Ionicons name={props.name} size={props.size ?? 24} />,
-  } as Components<typeof catalog>,
-});
-```
-
-## Hooks
-
-### useUIStream
-
-```typescript
-const {
-  spec,         // Spec | null - current UI state
-  isStreaming,  // boolean - true while streaming
-  error,        // Error | null
-  send,         // (prompt: string) => Promise<void>
-  clear,        // () => void - reset spec and error
-} = useUIStream({
-  api: string,
-  onComplete?: (spec: Spec) => void,
-  onError?: (error: Error) => void,
-});
-```
-
-### useStateStore
-
-```typescript
-const { state, get, set, update } = useStateStore();
-```
-
-### useStateValue
-
-```typescript
-const value = useStateValue(path: string);
-```
-
-### useStateBinding (deprecated)
-
-> **Deprecated.** Use `useBoundProp` with `$bindState` expressions instead.
-
-```typescript
-const [value, setValue] = useStateBinding(path: string);
-```
-
-### useActions
-
-```typescript
-const { execute } = useActions();
-```
-
-### useIsVisible
-
-```typescript
-const isVisible = useIsVisible(condition?: VisibilityCondition);
-```
-
-## Catalog Exports
-
-```typescript
-import { standardComponentDefinitions, standardActionDefinitions } from "@json-render/react-native/catalog";
-import { schema } from "@json-render/react-native/schema";
-```
-
-<table>
-<thead>
-<tr><th>Export</th><th>Purpose</th></tr>
-</thead>
-<tbody>
-<tr><td><code>standardComponentDefinitions</code></td><td>Catalog definitions for all 25+ standard components</td></tr>
-<tr><td><code>standardActionDefinitions</code></td><td>Catalog definitions for standard actions (setState, navigate)</td></tr>
-<tr><td><code>schema</code></td><td>React Native element tree schema</td></tr>
-</tbody>
-</table>
@@ -1,420 +0,0 @@
---
-title: "@json-render/react-three-fiber"
---
-
-React Three Fiber renderer for json-render. 20 built-in 3D components for meshes, lights, models, gaussian splats, environments, text, cameras, and controls.
-
-## Installation
-
-```bash
-npm install @json-render/react-three-fiber @json-render/core @json-render/react @react-three/fiber @react-three/drei three zod
-```
-
-## Entry Points
-
-<table>
-<thead>
-<tr>
-<th>Entry Point</th>
-<th>Exports</th>
-<th>Use For</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>@json-render/react-three-fiber</code></td>
-<td><code>threeComponents</code>, <code>ThreeRenderer</code>, <code>ThreeCanvas</code>, schemas</td>
-<td>React Three Fiber implementations and renderer</td>
-</tr>
-<tr>
-<td><code>@json-render/react-three-fiber/catalog</code></td>
-<td><code>threeComponentDefinitions</code></td>
-<td>Catalog schemas (no R3F dependency, safe for server)</td>
-</tr>
-</tbody>
-</table>
-
-## Usage
-
-```tsx
-import {'{ defineCatalog }'} from "@json-render/core";
-import {'{ schema, defineRegistry }'} from "@json-render/react";
-import {'{'}
-  threeComponentDefinitions,
-  threeComponents,
-  ThreeCanvas,
-{'}'} from "@json-render/react-three-fiber";
-
-const catalog = defineCatalog(schema, {'{'}
-  components: {'{'}
-    Box: threeComponentDefinitions.Box,
-    Sphere: threeComponentDefinitions.Sphere,
-    AmbientLight: threeComponentDefinitions.AmbientLight,
-    DirectionalLight: threeComponentDefinitions.DirectionalLight,
-    OrbitControls: threeComponentDefinitions.OrbitControls,
-  {'}'},
-  actions: {'{}'},
-{'}'});
-
-const {'{ registry }'} = defineRegistry(catalog, {'{'}
-  components: {'{'}
-    Box: threeComponents.Box,
-    Sphere: threeComponents.Sphere,
-    AmbientLight: threeComponents.AmbientLight,
-    DirectionalLight: threeComponents.DirectionalLight,
-    OrbitControls: threeComponents.OrbitControls,
-  {'}'},
-{'}'});
-```
-
-### ThreeCanvas (convenience)
-
-```tsx
-<ThreeCanvas
-  spec={'{spec}'}
-  registry={'{registry}'}
-  shadows
-  camera={'{'}{'{ position: [5, 5, 5], fov: 50 }'}{'}'} 
-  style={'{'}{'{ width: "100%", height: "100vh" }'}{'}'} 
-/>
-```
-
-### Manual Canvas Setup
-
-```tsx
-import {'{ Canvas }'} from "@react-three/fiber";
-import {'{ ThreeRenderer }'} from "@json-render/react-three-fiber";
-
-<Canvas shadows>
-  <ThreeRenderer spec={'{spec}'} registry={'{registry}'} />
-</Canvas>
-```
-
-## Components
-
-### Primitives
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-<th>Key Props</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>Box</code></td>
-<td>Box mesh (default 1x1x1)</td>
-<td><code>width</code>, <code>height</code>, <code>depth</code>, <code>material</code></td>
-</tr>
-<tr>
-<td><code>Sphere</code></td>
-<td>Sphere mesh</td>
-<td><code>radius</code>, <code>widthSegments</code>, <code>heightSegments</code>, <code>material</code></td>
-</tr>
-<tr>
-<td><code>Cylinder</code></td>
-<td>Cylinder mesh</td>
-<td><code>radiusTop</code>, <code>radiusBottom</code>, <code>height</code>, <code>material</code></td>
-</tr>
-<tr>
-<td><code>Cone</code></td>
-<td>Cone mesh</td>
-<td><code>radius</code>, <code>height</code>, <code>material</code></td>
-</tr>
-<tr>
-<td><code>Torus</code></td>
-<td>Torus (donut) mesh</td>
-<td><code>radius</code>, <code>tube</code>, <code>material</code></td>
-</tr>
-<tr>
-<td><code>Plane</code></td>
-<td>Flat plane mesh</td>
-<td><code>width</code>, <code>height</code>, <code>material</code></td>
-</tr>
-<tr>
-<td><code>Capsule</code></td>
-<td>Capsule mesh</td>
-<td><code>radius</code>, <code>length</code>, <code>material</code></td>
-</tr>
-</tbody>
-</table>
-
-All primitives share: <code>position</code>, <code>rotation</code>, <code>scale</code>, <code>castShadow</code>, <code>receiveShadow</code>, <code>material</code>.
-
-### Material Schema
-
-<table>
-<thead>
-<tr>
-<th>Property</th>
-<th>Type</th>
-<th>Default</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>color</code></td>
-<td><code>string</code></td>
-<td><code>"#ffffff"</code></td>
-</tr>
-<tr>
-<td><code>metalness</code></td>
-<td><code>number</code></td>
-<td><code>0</code></td>
-</tr>
-<tr>
-<td><code>roughness</code></td>
-<td><code>number</code></td>
-<td><code>1</code></td>
-</tr>
-<tr>
-<td><code>emissive</code></td>
-<td><code>string</code></td>
-<td><code>"#000000"</code></td>
-</tr>
-<tr>
-<td><code>emissiveIntensity</code></td>
-<td><code>number</code></td>
-<td><code>1</code></td>
-</tr>
-<tr>
-<td><code>opacity</code></td>
-<td><code>number</code></td>
-<td><code>1</code></td>
-</tr>
-<tr>
-<td><code>transparent</code></td>
-<td><code>boolean</code></td>
-<td><code>false</code></td>
-</tr>
-<tr>
-<td><code>wireframe</code></td>
-<td><code>boolean</code></td>
-<td><code>false</code></td>
-</tr>
-</tbody>
-</table>
-
-### Lights
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-<th>Key Props</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>AmbientLight</code></td>
-<td>Uniform illumination</td>
-<td><code>color</code>, <code>intensity</code></td>
-</tr>
-<tr>
-<td><code>DirectionalLight</code></td>
-<td>Sunlight-style</td>
-<td><code>position</code>, <code>color</code>, <code>intensity</code>, <code>castShadow</code></td>
-</tr>
-<tr>
-<td><code>PointLight</code></td>
-<td>Radiates from a point</td>
-<td><code>position</code>, <code>color</code>, <code>intensity</code>, <code>distance</code>, <code>decay</code></td>
-</tr>
-<tr>
-<td><code>SpotLight</code></td>
-<td>Cone of light</td>
-<td><code>position</code>, <code>color</code>, <code>intensity</code>, <code>angle</code>, <code>penumbra</code></td>
-</tr>
-</tbody>
-</table>
-
-### Other Components
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-<th>Key Props</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>Group</code></td>
-<td>Container for children</td>
-<td><code>position</code>, <code>rotation</code>, <code>scale</code></td>
-</tr>
-<tr>
-<td><code>Model</code></td>
-<td>GLTF/GLB model loader</td>
-<td><code>url</code>, <code>position</code>, <code>rotation</code>, <code>scale</code></td>
-</tr>
-<tr>
-<td><code>Environment</code></td>
-<td>HDRI environment map</td>
-<td><code>preset</code>, <code>background</code>, <code>blur</code>, <code>intensity</code></td>
-</tr>
-<tr>
-<td><code>Fog</code></td>
-<td>Linear fog effect</td>
-<td><code>color</code>, <code>near</code>, <code>far</code></td>
-</tr>
-<tr>
-<td><code>GridHelper</code></td>
-<td>Reference grid</td>
-<td><code>size</code>, <code>divisions</code>, <code>color</code></td>
-</tr>
-<tr>
-<td><code>Text3D</code></td>
-<td>3D text (SDF)</td>
-<td><code>text</code>, <code>fontSize</code>, <code>color</code>, <code>anchorX</code>, <code>anchorY</code></td>
-</tr>
-<tr>
-<td><code>PerspectiveCamera</code></td>
-<td>Camera</td>
-<td><code>position</code>, <code>fov</code>, <code>near</code>, <code>far</code>, <code>makeDefault</code></td>
-</tr>
-<tr>
-<td><code>OrbitControls</code></td>
-<td>Camera controls</td>
-<td><code>enableDamping</code>, <code>enableZoom</code>, <code>autoRotate</code></td>
-</tr>
-<tr>
-<td><code>GaussianSplat</code></td>
-<td>Gaussian splat (.splat/.ply) loader</td>
-<td><code>src</code>, <code>position</code>, <code>rotation</code>, <code>scale</code>, <code>alphaHash</code>, <code>toneMapped</code></td>
-</tr>
-</tbody>
-</table>
-
-## Shared Schemas
-
-Reusable Zod schemas for custom 3D components:
-
-```tsx
-import {'{ vector3Schema, materialSchema, transformProps, shadowProps }'} from "@json-render/react-three-fiber";
-```
-
-<table>
-<thead>
-<tr>
-<th>Export</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>vector3Schema</code></td>
-<td><code>z.tuple([z.number(), z.number(), z.number()])</code></td>
-</tr>
-<tr>
-<td><code>materialSchema</code></td>
-<td>Standard material props (color, metalness, roughness, etc.)</td>
-</tr>
-<tr>
-<td><code>transformProps</code></td>
-<td><code>{'{ position, rotation, scale }'}</code> schema fields</td>
-</tr>
-<tr>
-<td><code>shadowProps</code></td>
-<td><code>{'{ castShadow, receiveShadow }'}</code> schema fields</td>
-</tr>
-</tbody>
-</table>
-
-## ThreeRenderer
-
-<table>
-<thead>
-<tr>
-<th>Prop</th>
-<th>Type</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>spec</code></td>
-<td><code>Spec | null</code></td>
-<td>The spec to render as a 3D scene</td>
-</tr>
-<tr>
-<td><code>registry</code></td>
-<td><code>ComponentRegistry</code></td>
-<td>Component registry from <code>defineRegistry</code></td>
-</tr>
-<tr>
-<td><code>store</code></td>
-<td><code>StateStore</code></td>
-<td>External state store (controlled mode)</td>
-</tr>
-<tr>
-<td><code>initialState</code></td>
-<td><code>Record&lt;string, unknown&gt;</code></td>
-<td>Initial state (uncontrolled mode)</td>
-</tr>
-<tr>
-<td><code>handlers</code></td>
-<td><code>Record&lt;string, Function&gt;</code></td>
-<td>Action handlers</td>
-</tr>
-<tr>
-<td><code>loading</code></td>
-<td><code>boolean</code></td>
-<td>Whether the spec is streaming</td>
-</tr>
-<tr>
-<td><code>children</code></td>
-<td><code>ReactNode</code></td>
-<td>Additional R3F elements alongside the spec</td>
-</tr>
-</tbody>
-</table>
-
-## ThreeCanvas
-
-Extends <code>ThreeRendererProps</code> with Canvas options:
-
-<table>
-<thead>
-<tr>
-<th>Prop</th>
-<th>Type</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>shadows</code></td>
-<td><code>boolean</code></td>
-<td>Enable shadow maps</td>
-</tr>
-<tr>
-<td><code>camera</code></td>
-<td><code>object</code></td>
-<td>Default camera config (position, fov, etc.)</td>
-</tr>
-<tr>
-<td><code>className</code></td>
-<td><code>string</code></td>
-<td>CSS class for the canvas container</td>
-</tr>
-<tr>
-<td><code>style</code></td>
-<td><code>CSSProperties</code></td>
-<td>Inline styles for the canvas container</td>
-</tr>
-</tbody>
-</table>
-
-## Type Helpers
-
-```tsx
-import type {'{ ThreeProps }'} from "@json-render/react-three-fiber";
-
-type BoxProps = ThreeProps<"Box">;
-type SphereProps = ThreeProps<"Sphere">;
-```
@@ -1,103 +0,0 @@
---
-title: "@json-render/redux"
---
-
-Redux / Redux Toolkit adapter for json-render's `StateStore` interface.
-
-## Installation
-
-```bash
-npm install @json-render/redux @json-render/core @json-render/react redux
-# or with Redux Toolkit (recommended):
-npm install @json-render/redux @json-render/core @json-render/react @reduxjs/toolkit
-```
-
-## reduxStateStore
-
-Create a `StateStore` backed by a Redux store.
-
-```typescript
-import { reduxStateStore } from "@json-render/redux";
-```
-
-### Options
-
-<table>
-  <thead>
-    <tr>
-      <th>Option</th>
-      <th>Type</th>
-      <th>Required</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>store</code></td>
-      <td><code>Store</code></td>
-      <td>Yes</td>
-      <td>The Redux store instance.</td>
-    </tr>
-    <tr>
-      <td><code>selector</code></td>
-      <td><code>{'(state: S) => StateModel'}</code></td>
-      <td>No</td>
-      <td>Select the json-render slice from the Redux state tree. Defaults to <code>{'(state) => state'}</code>.</td>
-    </tr>
-    <tr>
-      <td><code>dispatch</code></td>
-      <td><code>{'(nextState: StateModel, store: Store) => void'}</code></td>
-      <td>Yes</td>
-      <td>Dispatch an action that replaces the selected slice with the next state.</td>
-    </tr>
-  </tbody>
-</table>
-
-### Example
-
-```typescript
-import { configureStore, createSlice } from "@reduxjs/toolkit";
-import { reduxStateStore } from "@json-render/redux";
-import { StateProvider } from "@json-render/react";
-
-const uiSlice = createSlice({
-  name: "ui",
-  initialState: { count: 0 } as Record<string, unknown>,
-  reducers: {
-    replaceUiState: (_state, action) => action.payload,
-  },
-});
-
-const reduxStore = configureStore({
-  reducer: { ui: uiSlice.reducer },
-});
-
-const store = reduxStateStore({
-  store: reduxStore,
-  selector: (state) => state.ui,
-  dispatch: (next, s) => s.dispatch(uiSlice.actions.replaceUiState(next)),
-});
-```
-
-```tsx
-<StateProvider store={store}>
-  {/* json-render reads/writes go through Redux */}
-</StateProvider>
-```
-
-## Re-exports
-
-<table>
-  <thead>
-    <tr>
-      <th>Export</th>
-      <th>Source</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>StateStore</code></td>
-      <td><code>@json-render/core</code></td>
-    </tr>
-  </tbody>
-</table>
@@ -1,319 +0,0 @@
---
-title: "@json-render/shadcn-svelte"
---
-
-Pre-built [shadcn-svelte](https://www.shadcn-svelte.com/) components for json-render. 36 components built on Svelte 5 + Tailwind CSS, ready to use with `defineCatalog` and `defineRegistry`.
-
-## Installation
-
-```bash
-npm install @json-render/shadcn-svelte @json-render/core @json-render/svelte zod
-```
-
-Your app must have Tailwind CSS configured.
-
-## Entry Points
-
-<table>
-<thead>
-<tr>
-<th>Entry Point</th>
-<th>Exports</th>
-<th>Use For</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>@json-render/shadcn-svelte</code></td>
-<td><code>shadcnComponents</code>, <code>shadcnComponentDefinitions</code></td>
-<td>Svelte implementations + catalog schemas</td>
-</tr>
-<tr>
-<td><code>@json-render/shadcn-svelte/catalog</code></td>
-<td><code>shadcnComponentDefinitions</code></td>
-<td>Catalog schemas only (no Svelte dependency, safe for server)</td>
-</tr>
-</tbody>
-</table>
-
-## Usage
-
-Pick the components you need from the standard definitions:
-
-```typescript
-import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/svelte/schema";
-import { shadcnComponentDefinitions } from "@json-render/shadcn-svelte/catalog";
-import { defineRegistry } from "@json-render/svelte";
-import { shadcnComponents } from "@json-render/shadcn-svelte";
-
-// Catalog: pick definitions
-const catalog = defineCatalog(schema, {
-  components: {
-    Card: shadcnComponentDefinitions.Card,
-    Stack: shadcnComponentDefinitions.Stack,
-    Heading: shadcnComponentDefinitions.Heading,
-    Button: shadcnComponentDefinitions.Button,
-    Input: shadcnComponentDefinitions.Input,
-  },
-  actions: {},
-});
-
-// Registry: pick matching implementations
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: shadcnComponents.Card,
-    Stack: shadcnComponents.Stack,
-    Heading: shadcnComponents.Heading,
-    Button: shadcnComponents.Button,
-    Input: shadcnComponents.Input,
-  },
-});
-```
-
-Then render in your Svelte component:
-
-```svelte
-<script lang="ts">
-  import { Renderer, JsonUIProvider } from "@json-render/svelte";
-
-  export let spec;
-  export let registry;
-</script>
-
-<JsonUIProvider initialState={spec?.state ?? {}}>
-  <Renderer {spec} {registry} />
-</JsonUIProvider>
-```
-
-## Available Components
-
-### Layout
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>Card</code></td>
-<td>Container card with optional title, description, maxWidth, centered</td>
-</tr>
-<tr>
-<td><code>Stack</code></td>
-<td>Flex container with direction, gap, align, justify</td>
-</tr>
-<tr>
-<td><code>Grid</code></td>
-<td>Grid layout with columns (1-6) and gap</td>
-</tr>
-<tr>
-<td><code>Separator</code></td>
-<td>Visual separator line with orientation</td>
-</tr>
-</tbody>
-</table>
-
-### Navigation
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>Tabs</code></td>
-<td>Tabbed navigation with tabs array, defaultValue, value</td>
-</tr>
-<tr>
-<td><code>Accordion</code></td>
-<td>Collapsible sections with items array and type (single/multiple)</td>
-</tr>
-<tr>
-<td><code>Collapsible</code></td>
-<td>Single collapsible section with title and defaultOpen</td>
-</tr>
-<tr>
-<td><code>Pagination</code></td>
-<td>Page navigation with totalPages and page</td>
-</tr>
-</tbody>
-</table>
-
-### Overlay
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>Dialog</code></td>
-<td>Modal dialog with title, description, openPath</td>
-</tr>
-<tr>
-<td><code>Drawer</code></td>
-<td>Bottom drawer with title, description, openPath</td>
-</tr>
-<tr>
-<td><code>Tooltip</code></td>
-<td>Hover tooltip with content and text</td>
-</tr>
-<tr>
-<td><code>Popover</code></td>
-<td>Click-triggered popover with trigger and content</td>
-</tr>
-<tr>
-<td><code>DropdownMenu</code></td>
-<td>Dropdown menu with label and items array</td>
-</tr>
-</tbody>
-</table>
-
-### Content
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>Heading</code></td>
-<td>Heading text with level (h1-h4)</td>
-</tr>
-<tr>
-<td><code>Text</code></td>
-<td>Paragraph with variant (body, caption, muted, lead, code)</td>
-</tr>
-<tr>
-<td><code>Image</code></td>
-<td>Image with alt, width, height</td>
-</tr>
-<tr>
-<td><code>Avatar</code></td>
-<td>User avatar with src, name, size</td>
-</tr>
-<tr>
-<td><code>Badge</code></td>
-<td>Status badge with text and variant</td>
-</tr>
-<tr>
-<td><code>Alert</code></td>
-<td>Alert banner with title, message, type</td>
-</tr>
-<tr>
-<td><code>Carousel</code></td>
-<td>Horizontally scrollable carousel with items</td>
-</tr>
-<tr>
-<td><code>Table</code></td>
-<td>Data table with columns and rows</td>
-</tr>
-</tbody>
-</table>
-
-### Feedback
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>Progress</code></td>
-<td>Progress bar with value, max, label</td>
-</tr>
-<tr>
-<td><code>Skeleton</code></td>
-<td>Loading placeholder with width, height, rounded</td>
-</tr>
-<tr>
-<td><code>Spinner</code></td>
-<td>Loading spinner with size and label</td>
-</tr>
-</tbody>
-</table>
-
-### Input
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>Button</code></td>
-<td>Clickable button with label, variant, disabled</td>
-</tr>
-<tr>
-<td><code>Link</code></td>
-<td>Anchor link with label and href</td>
-</tr>
-<tr>
-<td><code>Input</code></td>
-<td>Text input with label, name, type, placeholder, value, checks</td>
-</tr>
-<tr>
-<td><code>Textarea</code></td>
-<td>Multi-line text input with label, name, placeholder, rows, value, checks</td>
-</tr>
-<tr>
-<td><code>Select</code></td>
-<td>Dropdown select with label, name, options, value, checks</td>
-</tr>
-<tr>
-<td><code>Checkbox</code></td>
-<td>Checkbox with label, name, checked</td>
-</tr>
-<tr>
-<td><code>Radio</code></td>
-<td>Radio button group with label, name, options, value</td>
-</tr>
-<tr>
-<td><code>Switch</code></td>
-<td>Toggle switch with label, name, checked</td>
-</tr>
-<tr>
-<td><code>Slider</code></td>
-<td>Range slider with label, min, max, step, value</td>
-</tr>
-<tr>
-<td><code>Toggle</code></td>
-<td>Toggle button with label, pressed, variant</td>
-</tr>
-<tr>
-<td><code>ToggleGroup</code></td>
-<td>Group of toggle buttons with items, type, value</td>
-</tr>
-<tr>
-<td><code>ButtonGroup</code></td>
-<td>Group of buttons with buttons array and selected</td>
-</tr>
-</tbody>
-</table>
-
-## Notes
-
- The `/catalog` entry point has no Svelte dependency -- use it for server-side prompt generation
- Components use Tailwind CSS classes -- your app must have Tailwind configured
- Component implementations use bundled shadcn-svelte primitives (not your app's `$lib/components/ui/`)
- Form inputs support `checks` for validation (type + message pairs) and `validateOn` for timing
- Events: inputs emit `change`/`submit`/`focus`/`blur`; buttons emit `press`; selects emit `change`/`select`
@@ -1,348 +0,0 @@
---
-title: "@json-render/shadcn"
---
-
-Pre-built [shadcn/ui](https://ui.shadcn.com/) components for json-render. 36 components built on Radix UI + Tailwind CSS, ready to use with `defineCatalog` and `defineRegistry`.
-
-## Installation
-
-```bash
-npm install @json-render/shadcn @json-render/core @json-render/react zod
-```
-
-Your app must have Tailwind CSS configured.
-
-## Entry Points
-
-<table>
-<thead>
-<tr>
-<th>Entry Point</th>
-<th>Exports</th>
-<th>Use For</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>@json-render/shadcn</code></td>
-<td><code>shadcnComponents</code></td>
-<td>React implementations</td>
-</tr>
-<tr>
-<td><code>@json-render/shadcn/catalog</code></td>
-<td><code>shadcnComponentDefinitions</code></td>
-<td>Catalog schemas (no React dependency, safe for server)</td>
-</tr>
-</tbody>
-</table>
-
-## Usage
-
-Pick the components you need from the standard definitions:
-
-```typescript
-import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/react/schema";
-import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
-import { defineRegistry } from "@json-render/react";
-import { shadcnComponents } from "@json-render/shadcn";
-
-// Catalog: pick definitions
-const catalog = defineCatalog(schema, {
-  components: {
-    Card: shadcnComponentDefinitions.Card,
-    Stack: shadcnComponentDefinitions.Stack,
-    Heading: shadcnComponentDefinitions.Heading,
-    Button: shadcnComponentDefinitions.Button,
-    Input: shadcnComponentDefinitions.Input,
-  },
-  actions: {},
-});
-
-// Registry: pick matching implementations
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: shadcnComponents.Card,
-    Stack: shadcnComponents.Stack,
-    Heading: shadcnComponents.Heading,
-    Button: shadcnComponents.Button,
-    Input: shadcnComponents.Input,
-  },
-});
-```
-
-State actions (`setState`, `pushState`, `removeState`) are built into the React schema and handled by `ActionProvider` automatically. You don't need to declare them in your catalog.
-
-## Extending with Custom Components
-
-Add custom components alongside standard ones:
-
-```typescript
-import { z } from "zod";
-
-const catalog = defineCatalog(schema, {
-  components: {
-    // Standard
-    Card: shadcnComponentDefinitions.Card,
-    Stack: shadcnComponentDefinitions.Stack,
-    Button: shadcnComponentDefinitions.Button,
-
-    // Custom
-    Metric: {
-      props: z.object({
-        label: z.string(),
-        value: z.string(),
-        trend: z.enum(["up", "down", "neutral"]).nullable(),
-      }),
-      description: "KPI metric display",
-    },
-  },
-  actions: {},
-});
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: shadcnComponents.Card,
-    Stack: shadcnComponents.Stack,
-    Button: shadcnComponents.Button,
-    Metric: ({ props }) => (
-      <div>
-        <span>{props.label}</span>
-        <span>{props.value}</span>
-      </div>
-    ),
-  },
-});
-```
-
-## Available Components
-
-### Layout
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>Card</code></td>
-<td>Container card with optional title, description, maxWidth, centered</td>
-</tr>
-<tr>
-<td><code>Stack</code></td>
-<td>Flex container with direction, gap, align, justify</td>
-</tr>
-<tr>
-<td><code>Grid</code></td>
-<td>Grid layout with columns (1-6) and gap</td>
-</tr>
-<tr>
-<td><code>Separator</code></td>
-<td>Visual separator line with orientation</td>
-</tr>
-</tbody>
-</table>
-
-### Navigation
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>Tabs</code></td>
-<td>Tabbed navigation with tabs array, defaultValue, value</td>
-</tr>
-<tr>
-<td><code>Accordion</code></td>
-<td>Collapsible sections with items array and type (single/multiple)</td>
-</tr>
-<tr>
-<td><code>Collapsible</code></td>
-<td>Single collapsible section with title and defaultOpen</td>
-</tr>
-<tr>
-<td><code>Pagination</code></td>
-<td>Page navigation with totalPages and page</td>
-</tr>
-</tbody>
-</table>
-
-### Overlay
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>Dialog</code></td>
-<td>Modal dialog with title, description, openPath</td>
-</tr>
-<tr>
-<td><code>Drawer</code></td>
-<td>Bottom drawer with title, description, openPath</td>
-</tr>
-<tr>
-<td><code>Tooltip</code></td>
-<td>Hover tooltip with content and text</td>
-</tr>
-<tr>
-<td><code>Popover</code></td>
-<td>Click-triggered popover with trigger and content</td>
-</tr>
-<tr>
-<td><code>DropdownMenu</code></td>
-<td>Dropdown menu with label and items array</td>
-</tr>
-</tbody>
-</table>
-
-### Content
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>Heading</code></td>
-<td>Heading text with level (h1-h4)</td>
-</tr>
-<tr>
-<td><code>Text</code></td>
-<td>Paragraph with variant (body, caption, muted, lead, code)</td>
-</tr>
-<tr>
-<td><code>Image</code></td>
-<td>Image with alt, width, height</td>
-</tr>
-<tr>
-<td><code>Avatar</code></td>
-<td>User avatar with src, name, size</td>
-</tr>
-<tr>
-<td><code>Badge</code></td>
-<td>Status badge with text and variant</td>
-</tr>
-<tr>
-<td><code>Alert</code></td>
-<td>Alert banner with title, message, type</td>
-</tr>
-<tr>
-<td><code>Carousel</code></td>
-<td>Horizontally scrollable carousel with items</td>
-</tr>
-<tr>
-<td><code>Table</code></td>
-<td>Data table with columns and rows</td>
-</tr>
-</tbody>
-</table>
-
-### Feedback
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>Progress</code></td>
-<td>Progress bar with value, max, label</td>
-</tr>
-<tr>
-<td><code>Skeleton</code></td>
-<td>Loading placeholder with width, height, rounded</td>
-</tr>
-<tr>
-<td><code>Spinner</code></td>
-<td>Loading spinner with size and label</td>
-</tr>
-</tbody>
-</table>
-
-### Input
-
-<table>
-<thead>
-<tr>
-<th>Component</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>Button</code></td>
-<td>Clickable button with label, variant, disabled</td>
-</tr>
-<tr>
-<td><code>Link</code></td>
-<td>Anchor link with label and href</td>
-</tr>
-<tr>
-<td><code>Input</code></td>
-<td>Text input with label, name, type, placeholder, value, checks</td>
-</tr>
-<tr>
-<td><code>Textarea</code></td>
-<td>Multi-line text input with label, name, placeholder, rows, value, checks</td>
-</tr>
-<tr>
-<td><code>Select</code></td>
-<td>Dropdown select with label, name, options, value, checks</td>
-</tr>
-<tr>
-<td><code>Checkbox</code></td>
-<td>Checkbox with label, name, checked</td>
-</tr>
-<tr>
-<td><code>Radio</code></td>
-<td>Radio button group with label, name, options, value</td>
-</tr>
-<tr>
-<td><code>Switch</code></td>
-<td>Toggle switch with label, name, checked</td>
-</tr>
-<tr>
-<td><code>Slider</code></td>
-<td>Range slider with label, min, max, step, value</td>
-</tr>
-<tr>
-<td><code>Toggle</code></td>
-<td>Toggle button with label, pressed, variant</td>
-</tr>
-<tr>
-<td><code>ToggleGroup</code></td>
-<td>Group of toggle buttons with items, type, value</td>
-</tr>
-<tr>
-<td><code>ButtonGroup</code></td>
-<td>Group of buttons with buttons array and selected</td>
-</tr>
-</tbody>
-</table>
-
-## Notes
-
- The `/catalog` entry point has no React dependency -- use it for server-side prompt generation
- Components use Tailwind CSS classes -- your app must have Tailwind configured
- Component implementations use bundled shadcn/ui primitives (not your app's `components/ui/`)
- Form inputs support `checks` for validation (type + message pairs)
- Events: inputs emit `change`/`submit`/`focus`/`blur`; buttons emit `press`; selects emit `change`/`select`
@@ -1,200 +0,0 @@
---
-title: "@json-render/solid"
---
-
-SolidJS components, providers, and hooks for rendering json-render specs.
-
-## Installation
-
-<PackageInstall packages="@json-render/core @json-render/solid" />
-
-Peer dependencies: `solid-js ^1.9.0` and `zod ^4.0.0`.
-
-<PackageInstall packages="solid-js zod" />
-
-## Providers
-
-### StateProvider
-
-```tsx
-<StateProvider
-  initialState={{}}
-  onStateChange={(changes) => console.log(changes)}
->
-  {/* children */}
-</StateProvider>
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Prop</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>store</code>
-      </td>
-      <td>
-        <code>StateStore</code>
-      </td>
-      <td>
-        External store (controlled mode). When provided,{" "}
-        <code>initialState</code> and <code>onStateChange</code> are ignored.
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>initialState</code>
-      </td>
-      <td>
-        <code>Record&lt;string, unknown&gt;</code>
-      </td>
-      <td>Initial state model for uncontrolled mode.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>onStateChange</code>
-      </td>
-      <td>
-        <code>
-          {"(changes: Array<{ path: string; value: unknown }>) => void"}
-        </code>
-      </td>
-      <td>Called for uncontrolled state updates.</td>
-    </tr>
-  </tbody>
-</table>
-
-### ActionProvider
-
-```tsx
-<ActionProvider
-  handlers={{ submit: async (params) => {} }}
-  navigate={(path) => {}}
->
-  {/* children */}
-</ActionProvider>
-```
-
-### VisibilityProvider
-
-```tsx
-<VisibilityProvider>{/* children */}</VisibilityProvider>
-```
-
-### ValidationProvider
-
-```tsx
-<ValidationProvider customFunctions={{ custom: (value) => Boolean(value) }}>
-  {/* children */}
-</ValidationProvider>
-```
-
-### JSONUIProvider
-
-Combined provider wrapper for state, visibility, validation, and actions.
-
-```tsx
-<JSONUIProvider
-  registry={registry}
-  initialState={{}}
-  handlers={handlers}
-  validationFunctions={validationFunctions}
->
-  <Renderer spec={spec} registry={registry} />
-</JSONUIProvider>
-```
-
-## defineRegistry
-
-Create a typed component registry and action helpers from a catalog.
-
-```tsx
-const { registry, handlers, executeAction } = defineRegistry(catalog, {
-  components: {
-    Card: (renderProps) => <div>{renderProps.children}</div>,
-    Button: (renderProps) => (
-      <button onClick={() => renderProps.emit("press")}>
-        {renderProps.element.props.label as string}
-      </button>
-    ),
-  },
-  actions: {
-    submit: async (params, setState, state) => {
-      // custom action logic
-    },
-  },
-});
-```
-
-## Components
-
-### Renderer
-
-```tsx
-<Renderer spec={spec} registry={registry} loading={false} />
-```
-
-Renders a `Spec` tree using your registry.
-
-### createRenderer
-
-Build an app-level renderer from catalog + components:
-
-```tsx
-const AppRenderer = createRenderer(catalog, {
-  Card: (renderProps) => <div>{renderProps.children}</div>,
-});
-
-<AppRenderer spec={spec} state={{}} onAction={(name, params) => {}} />;
-```
-
-## Hooks
-
- `useStateStore()`
- `useStateValue(path)` - returns an accessor
- `useStateBinding(path)` - returns `[Accessor<T | undefined>, setValue]`
- `useVisibility()` / `useIsVisible(condition)`
- `useActions()` / `useAction(binding)`
- `useValidation()` / `useOptionalValidation()`
- `useFieldValidation(path, config)` - returns accessor-backed `state`, `errors`, and `isValid`
- `useBoundProp(value, bindingPath)`
- `useUIStream(options)`
- `useChatUI(options)`
-
-## Built-in Actions
-
-`ActionProvider` handles these built-in actions:
-
- `setState`
- `pushState`
- `removeState`
- `validateForm`
-
-## Component Props
-
-Registry components receive:
-
-```ts
-interface ComponentRenderProps<P = Record<string, unknown>> {
-  element: UIElement<string, P>;
-  children?: JSX.Element;
-  emit: (event: string) => void;
-  on: (event: string) => EventHandle;
-  bindings?: Record<string, string>;
-  loading?: boolean;
-}
-```
-
-Use `emit("event")` to dispatch event bindings. Use `on("event")` to access `EventHandle` metadata (`bound`, `shouldPreventDefault`, `emit`).
-
-## Reactivity Notes
-
- Keep changing reads in JSX expressions, `createMemo`, or `createEffect`.
- Avoid props destructuring in component signatures when you need live updates.
- `StateProvider` and other contexts expose getter-backed values so consumers read live signals.
- `useStateValue`, `useStateBinding`, and `useFieldValidation` expose reactive accessors; call them as functions.
@@ -1,125 +0,0 @@
---
-title: "@json-render/svelte"
---
-
-Svelte 5 components, providers, and helpers for rendering json-render specs.
-
-## Installation
-
-<PackageInstall packages="@json-render/core @json-render/svelte" />
-
-Peer dependencies: `svelte ^5.0.0` and `zod ^4.0.0`.
-
-<PackageInstall packages="svelte zod" />
-
-## Components
-
-### Renderer
-
-```svelte
-<Renderer
-  spec={spec}       // Spec | null
-  registry={registry}
-  loading={false}
-/>
-```
-
-Renders a spec with your component registry. If `spec` is `null`, it renders nothing.
-
-### JsonUIProvider
-
-Convenience wrapper around `StateProvider`, `VisibilityProvider`, `ValidationProvider`, and `ActionProvider`.
-
-```svelte
-<JsonUIProvider
-  initialState={{}}
-  handlers={handlers}
-  validationFunctions={validationFunctions}
->
-  <Renderer {spec} {registry} />
-</JsonUIProvider>
-```
-
-## defineRegistry
-
-Create a typed component registry and action handlers from a catalog.
-
-```typescript
-import { defineRegistry } from "@json-render/svelte";
-
-const { registry, handlers, executeAction } = defineRegistry(catalog, {
-  components: {
-    Card,
-    Button,
-  },
-  actions: {
-    submit: async (params, setState, state) => {
-      // custom action logic
-    },
-  },
-});
-```
-
-`handlers` is designed for `JsonUIProvider`/`ActionProvider`. `executeAction` is an imperative helper.
-
-## Component Props
-
-Registry components receive `BaseComponentProps<TProps>`:
-
-```typescript
-interface BaseComponentProps<TProps> {
-  props: TProps;
-  children?: Snippet;
-  emit: (event: string) => void;
-  bindings?: Record<string, string>;
-  loading?: boolean;
-}
-```
-
-Use `emit("eventName")` to trigger handlers declared in the spec `on` bindings.
-
-## Context Helpers
-
-Use these helpers inside Svelte components:
-
- `getStateValue(path)` - read/write state via `.current`
- `getBoundProp(() => value, () => bindingPath)` - write back resolved `$bindState` / `$bindItem` values
- `isVisible(condition)` - evaluate visibility via `.current`
- `getAction(name)` - read a registered action handler via `.current`
- `getFieldValidation(ctx, path, config)` - get field validation state + actions
-
-For advanced usage, access full contexts:
-
- `getStateContext()`
- `getActionContext()`
- `getVisibilityContext()`
- `getValidationContext()`
- `getOptionalValidationContext()`
-
-## Streaming
-
-### createUIStream
-
-```typescript
-const stream = createUIStream({
-  api: "/api/generate-ui",
-  onComplete: (spec) => console.log(spec),
-});
-
-await stream.send("Create a login form");
-
-console.log(stream.spec);
-console.log(stream.isStreaming);
-```
-
-### createChatUI
-
-```typescript
-const chat = createChatUI({ api: "/api/chat-ui" });
-await chat.send("Build a settings panel");
-console.log(chat.messages, chat.isStreaming);
-```
-
-## Schema Export
-
-Use `schema` from `@json-render/svelte` when defining catalogs for Svelte specs.
@@ -1,391 +0,0 @@
---
-title: "@json-render/tanstack-start"
---
-
-TanStack Start renderer for JSON-defined applications with routes, layouts,
-head metadata, SSR loaders, prerender paths, and client navigation.
-
-## Installation
-
-```bash
-npm install @json-render/core @json-render/react @json-render/tanstack-start
-```
-
-## schema
-
-Use the Start application schema to generate full multi-page specs.
-
-```typescript
-import { defineCatalog } from "@json-render/core";
-import {
-  schema,
-  startComponentDefinitions,
-} from "@json-render/tanstack-start/server";
-import { z } from "zod";
-
-const catalog = defineCatalog(schema, {
-  components: {
-    ...startComponentDefinitions,
-    Card: {
-      props: z.object({ title: z.string() }),
-      description: "Card container",
-    },
-    NavBar: {
-      props: z.object({}),
-      slots: ["default"],
-      description: "Application navigation",
-    },
-  },
-  actions: {},
-});
-```
-
-The generation prompt teaches TanStack Router's `$param` and `$` splat route
-syntax, reusable layouts, escaped JSON Patch route keys, and the built-in
-`Slot`, `Link`, and `navigate` capabilities.
-
-Include `startComponentDefinitions` in the catalog so generated `Slot` and
-`Link` elements pass validation. `PageRenderer` supplies their React
-implementations automatically.
-
-## createStartApp
-
-Create helpers for a TanStack Start splat route.
-
-```typescript
-import { createStartApp } from "@json-render/tanstack-start/server";
-
-export const { getPageData, getHead, getStaticPaths } = createStartApp({
-  spec,
-  loaders: {
-    post: async ({ slug }) => ({
-      post: await getPost(slug as string),
-    }),
-  },
-});
-```
-
-### Options
-
-<table>
-  <thead>
-    <tr>
-      <th>Option</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>spec</code>
-      </td>
-      <td>
-        <code>
-          {"StartAppSpec | (() => StartAppSpec | Promise<StartAppSpec>)"}
-        </code>
-      </td>
-      <td>A static application spec or an async spec factory</td>
-    </tr>
-    <tr>
-      <td>
-        <code>loaders</code>
-      </td>
-      <td>
-        <code>{"Record<string, LoaderFn>"}</code>
-      </td>
-      <td>Named data loaders referenced by route specs</td>
-    </tr>
-  </tbody>
-</table>
-
-### Returns
-
-<table>
-  <thead>
-    <tr>
-      <th>Helper</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>getPageData</code>
-      </td>
-      <td>
-        Matches a pathname, runs its loader, and returns serializable page and
-        layout data
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>getHead</code>
-      </td>
-      <td>
-        Returns TanStack Router <code>meta</code> and <code>links</code>{" "}
-        descriptors
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>getStaticPaths</code>
-      </td>
-      <td>Returns concrete paths for TanStack Start prerendering</td>
-    </tr>
-  </tbody>
-</table>
-
-State is merged in this order: application state, layout state, page state,
-then loader data. Later sources override earlier values.
-
-## StartAppSpec
-
-```typescript
-interface StartAppSpec {
-  metadata?: StartMetadata;
-  routes: Record<string, StartRouteSpec>;
-  layouts?: Record<string, Spec>;
-  state?: Record<string, unknown>;
-}
-```
-
-Each route requires a `page` spec and can select a layout, metadata, a named
-loader, loading/error/not-found specs, and static parameters.
-
-### Route Patterns
-
-<table>
-  <thead>
-    <tr>
-      <th>Pattern</th>
-      <th>Example</th>
-      <th>Params</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>/</code>
-      </td>
-      <td>
-        <code>/</code>
-      </td>
-      <td>
-        <code>{"{}"}</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>/about</code>
-      </td>
-      <td>
-        <code>/about</code>
-      </td>
-      <td>
-        <code>{"{}"}</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>{"/blog/$slug"}</code>
-      </td>
-      <td>
-        <code>/blog/hello</code>
-      </td>
-      <td>
-        <code>{'{ slug: "hello" }'}</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>{"/docs/$"}</code>
-      </td>
-      <td>
-        <code>/docs/guides/intro</code>
-      </td>
-      <td>
-        <code>{'{ _splat: "guides/intro" }'}</code>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-Loader parameters are URL-decoded before they reach named loaders. Splat
-content is a slash-delimited string under `_splat`. Parameter values supplied
-through `staticParams` are URL-encoded in the paths returned by
-`getStaticPaths()`.
-
-Route matching treats trailing slashes as optional and accepts both encoded and
-decoded pathname representations. This keeps loader data and route metadata in
-sync for static paths containing spaces or non-ASCII characters.
-
-For prerendered dynamic routes, provide `staticParams`:
-
-```typescript
-routes: {
-  '/blog/$slug': {
-    page,
-    staticParams: [{ slug: 'hello' }, { slug: 'world' }],
-  },
-  '/docs/$': {
-    page: docsPage,
-    staticParams: [{ _splat: 'guides/intro' }],
-  },
-}
-```
-
-Map `getStaticPaths()` into TanStack Start's top-level `pages` configuration:
-
-```typescript
-const pages = (await getStaticPaths()).map((path) => ({ path }));
-```
-
-## TanStack Route Setup
-
-Wire the helpers to a file-based `$` splat route:
-
-```tsx
-// src/routes/$.tsx
-import { createFileRoute, notFound } from "@tanstack/react-router";
-import {
-  PageRenderer,
-  StartErrorBoundary,
-  StartLoading,
-  StartNotFound,
-} from "@json-render/tanstack-start";
-import { getHead, getPageData } from "@/lib/json-app";
-
-export const Route = createFileRoute("/$")({
-  loader: async ({ location }) => {
-    const data = await getPageData({ pathname: location.pathname });
-    if (!data) throw notFound();
-    return data;
-  },
-  head: ({ match }) => getHead({ pathname: match.pathname }),
-  component: Page,
-  pendingComponent: StartLoading,
-  errorComponent: StartErrorBoundary,
-  notFoundComponent: StartNotFound,
-});
-
-function Page() {
-  return <PageRenderer {...Route.useLoaderData()} />;
-}
-```
-
-TanStack Router loaders are isomorphic. When a spec factory or named loader
-uses database clients, credentials, or server-only imports, invoke
-`getPageData` and `getHead` inside a TanStack Start `createServerFn` and call
-that server function from the route loader.
-
-## StartAppProvider
-
-Provide component implementations and action handlers around the root
-`Outlet`. Render `HeadContent` for route metadata.
-
-```tsx
-import {
-  createRootRoute,
-  HeadContent,
-  Outlet,
-  Scripts,
-} from "@tanstack/react-router";
-import { StartAppProvider } from "@json-render/tanstack-start";
-import { spec } from "@/lib/spec";
-
-export const Route = createRootRoute({
-  component: () => (
-    <html lang="en">
-      <head>
-        <HeadContent />
-      </head>
-      <body>
-        <StartAppProvider
-          registry={registry}
-          handlers={handlers}
-          spec={spec}
-        >
-          <Outlet />
-        </StartAppProvider>
-        <Scripts />
-      </body>
-    </html>
-  ),
-});
-```
-
-Passing `spec` lets `StartLoading`, `StartErrorBoundary`, and `StartNotFound`
-automatically select the matched route's fallback specs. Their explicit
-`loadingSpec`, `errorSpec`, and `notFoundSpec` props take precedence. For a
-server-only application spec, omit `spec` and pass client-safe fallback specs
-explicitly.
-
-Pass named functions through `functions` when props use `$computed`:
-
-```tsx
-<StartAppProvider
-  registry={registry}
-  spec={spec}
-  functions={{ uppercase: ({ value }) => String(value).toUpperCase() }}
->
-  <Outlet />
-</StartAppProvider>
-```
-
-## Built-ins
-
- `Slot` inserts page content into a JSON-defined layout.
- `Link` wraps TanStack Router's `Link`; generated specs use an `href` prop.
- `navigate` performs client-side navigation from action bindings.
- `StartLoading`, `StartErrorBoundary`, and `StartNotFound` resolve the matched
-  route's fallback specs when they are used as TanStack Router boundary
-  components and the provider receives `spec`.
-
-The default `StartErrorBoundary` fallback invalidates the router and reruns the
-failed loader when the user selects **Try again**.
-
-`Slot` and `Link` are automatically added to the page registry.
-
-## Server Utilities
-
-```typescript
-import {
-  collectStaticPaths,
-  matchRoute,
-  metadataToHead,
-  resolveMetadata,
-  splatToPath,
-} from "@json-render/tanstack-start/server";
-```
-
-## Entry Points
-
-<table>
-  <thead>
-    <tr>
-      <th>Import</th>
-      <th>Contents</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>@json-render/tanstack-start</code>
-      </td>
-      <td>Provider, page renderer, Link, and route fallback components</td>
-    </tr>
-    <tr>
-      <td>
-        <code>@json-render/tanstack-start/server</code>
-      </td>
-      <td>App factory, schema, matcher, metadata, and prerender helpers</td>
-    </tr>
-    <tr>
-      <td>
-        <code>@json-render/tanstack-start/catalog</code>
-      </td>
-      <td>Server-safe definitions for built-in Slot and Link components</td>
-    </tr>
-  </tbody>
-</table>
@@ -1,357 +0,0 @@
---
-title: "@json-render/vue"
---
-
-Vue 3 components, providers, and composables.
-
-## Providers
-
-### StateProvider
-
-```vue
-<StateProvider :initial-state="object" :on-state-change="fn">
-  <!-- children -->
-</StateProvider>
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Prop</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>store</code></td>
-      <td><code>StateStore</code></td>
-      <td>External store (controlled mode). When provided, <code>initialState</code> and <code>onStateChange</code> are ignored.</td>
-    </tr>
-    <tr>
-      <td><code>initialState</code></td>
-      <td><code>Record&lt;string, unknown&gt;</code></td>
-      <td>Initial state model (uncontrolled mode).</td>
-    </tr>
-    <tr>
-      <td><code>onStateChange</code></td>
-      <td><code>{'(changes: Array<{ path: string; value: unknown }>) => void'}</code></td>
-      <td>Callback when state changes (uncontrolled mode). Called once per <code>set</code> or <code>update</code> with all changed entries.</td>
-    </tr>
-  </tbody>
-</table>
-
-#### External Store (Controlled Mode)
-
-Pass a `StateStore` to bypass the internal state and wire json-render to any state management library:
-
-```typescript
-import { createStateStore, type StateStore } from "@json-render/vue";
-
-const store = createStateStore({ count: 0 });
-```
-
-```vue
-<StateProvider :store="store">
-  <!-- children -->
-</StateProvider>
-```
-
-```typescript
-// Mutate from anywhere — Vue re-renders automatically:
-store.set("/count", 1);
-```
-
-### ActionProvider
-
-```vue
-<ActionProvider :handlers="Record<string, ActionHandler>" :navigate="fn">
-  <!-- children -->
-</ActionProvider>
-
-// type ActionHandler = (params: Record<string, unknown>) => void | Promise<void>;
-```
-
-### VisibilityProvider
-
-```vue
-<VisibilityProvider>
-  <!-- children -->
-</VisibilityProvider>
-```
-
-`VisibilityProvider` reads state from the parent `StateProvider` automatically. Conditions in specs use the `VisibilityCondition` format with `$state` paths (e.g. `{ "$state": "/path" }`, `{ "$state": "/path", "eq": value }`). See [visibility](/docs/visibility) for the full syntax.
-
-### ValidationProvider
-
-```vue
-<ValidationProvider :custom-functions="Record<string, ValidationFunction>">
-  <!-- children -->
-</ValidationProvider>
-
-// type ValidationFunction = (value: unknown, args?: object) => boolean | Promise<boolean>;
-```
-
-## defineRegistry
-
-Create a type-safe component registry from a catalog. Components receive `props`, `children`, `slots`, `emit`, `on`, and `loading` with catalog-inferred types.
-
-When the catalog declares actions, the `actions` field is required. When the catalog has no actions (e.g. `actions: {}`), the field is optional. When passing stubs, any `async () => {}` is sufficient.
-
-```typescript
-import { h } from "vue";
-import { defineRegistry } from "@json-render/vue";
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Layout: ({ slots }) =>
-      h("div", { class: "layout" }, [
-        h("header", null, slots.header?.()),
-        h("main", null, slots.default?.()),
-        h("footer", null, slots.footer?.()),
-      ]),
-    Button: ({ props, emit }) =>
-      h("button", { onClick: () => emit("press") }, props.label),
-  },
-  // Required when catalog declares actions:
-  actions: {
-    submit: async (params) => { /* ... */ },
-  },
-});
-
-// Pass to <Renderer>
-// <Renderer :spec="spec" :registry="registry" />
-```
-
-## Components
-
-### Renderer
-
-```vue
-<Renderer
-  :spec="Spec"           // The UI spec to render
-  :registry="Registry"   // Component registry (from defineRegistry)
-  :loading="boolean"     // Optional loading state
-  :fallback="Component"  // Optional fallback for unknown types
-/>
-```
-
-### Component Props (via defineRegistry)
-
-```typescript
-import type { Slots, VNode } from "vue";
-
-interface ComponentContext<P> {
-  props: P;                          // Typed props from catalog
-  children?: VNode | VNode[];        // Rendered children (for container components)
-  slots: Slots;                      // Vue-native slot functions
-  emit: (event: string) => void;     // Emit a named event (always defined)
-  on: (event: string) => EventHandle; // Get event handle with metadata
-  loading?: boolean;
-  bindings?: Record<string, string>; // State paths from $bindState/$bindItem expressions
-}
-
-interface EventHandle {
-  emit: () => void;              // Fire the event
-  shouldPreventDefault: boolean; // Whether any binding requested preventDefault
-  bound: boolean;                // Whether any handler is bound
-}
-```
-
-Use `children` for the default slot. For other slots declared by the catalog, add a top-level `slots` map to the spec element:
-
-```json
-{
-  "type": "Layout",
-  "props": {},
-  "children": ["main-content"],
-  "slots": {
-    "header": ["page-heading"],
-    "footer": ["page-actions"]
-  }
-}
-```
-
-The component renders these regions with Vue's native slot functions: `slots.header?.()`, `slots.footer?.()`, and so on. `slots.default?.()` renders the spec's `children`; `children` is a convenience alias for that rendered result. In the JSON spec, keep default content in `children` rather than adding a `default` entry to `slots`.
-
-Use `emit("press")` for simple event firing. Use `on("click")` when you need metadata like `shouldPreventDefault`:
-
-```typescript
-Link: ({ props, on }) => {
-  const click = on("click");
-  return h("a", {
-    href: props.href,
-    onClick: (e: MouseEvent) => {
-      if (click.shouldPreventDefault) e.preventDefault();
-      click.emit();
-    },
-  }, props.label);
-},
-```
-
-### BaseComponentProps
-
-Catalog-agnostic base type for building reusable component libraries that are not tied to a specific catalog:
-
-```typescript
-import type { BaseComponentProps } from "@json-render/vue";
-
-const Card = ({ props, children }: BaseComponentProps<{ title?: string }>) =>
-  h("div", null, [props.title, children]);
-```
-
-## Composables
-
-### useStateStore
-
-```typescript
-const {
-  state,   // ShallowRef<StateModel> — access with state.value
-  get,     // (path: string) => unknown
-  set,     // (path: string, value: unknown) => void
-  update,  // (updates: Record<string, unknown>) => void
-} = useStateStore();
-```
-
-> **Note:** `state` is a `ShallowRef<StateModel>`, not a plain object. Use `state.value` to read the current state. This differs from the React renderer.
-
-### useStateValue
-
-```typescript
-const value = useStateValue(path: string); // ComputedRef<T | undefined>
-```
-
-Returns a `ComputedRef` that automatically updates when the state at `path` changes. Use `.value` to access the current value.
-
-### useStateBinding (deprecated)
-
-> **Deprecated.** Use `$bindState` expressions with `bindings` prop instead.
-
-```typescript
-const [value, setValue] = useStateBinding(path: string);
-// value: ComputedRef<T | undefined>
-// setValue: (value: T) => void
-```
-
-### useActions
-
-```typescript
-const { execute } = useActions();
-// execute(binding: ActionBinding) => Promise<void>
-```
-
-### useAction
-
-```typescript
-const { execute, isLoading } = useAction(binding: ActionBinding);
-// execute: () => Promise<void>
-// isLoading: ComputedRef<boolean>
-```
-
-### useIsVisible
-
-```typescript
-const isVisible = useIsVisible(condition?: VisibilityCondition);
-```
-
-### useFieldValidation
-
-```typescript
-const {
-  state,     // ComputedRef<FieldValidationState>
-  validate,  // () => ValidationResult
-  touch,     // () => void
-  clear,     // () => void
-  errors,    // ComputedRef<string[]>
-  isValid,   // ComputedRef<boolean>
-} = useFieldValidation(path: string, config?: ValidationConfig);
-```
-
-`ValidationConfig` is `{ checks?: ValidationCheck[], validateOn?: 'change' | 'blur' | 'submit' }`.
-
-## Differences from `@json-render/react`
-
-<table>
-  <thead>
-    <tr>
-      <th>API</th>
-      <th>React</th>
-      <th>Vue</th>
-      <th>Note</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>useStateStore().state</code></td>
-      <td><code>StateModel</code> (plain object)</td>
-      <td><code>ShallowRef&lt;StateModel&gt;</code></td>
-      <td>Vue reactivity; use <code>state.value</code></td>
-    </tr>
-    <tr>
-      <td><code>useStateValue()</code></td>
-      <td><code>T | undefined</code></td>
-      <td><code>ComputedRef&lt;T | undefined&gt;</code></td>
-      <td>Vue reactivity; use <code>.value</code></td>
-    </tr>
-    <tr>
-      <td><code>useStateBinding()</code></td>
-      <td><code>[T | undefined, setter]</code></td>
-      <td><code>[ComputedRef&lt;T | undefined&gt;, setter]</code></td>
-      <td>Vue reactivity; use <code>value.value</code></td>
-    </tr>
-    <tr>
-      <td><code>useAction().isLoading</code></td>
-      <td><code>boolean</code></td>
-      <td><code>ComputedRef&lt;boolean&gt;</code></td>
-      <td>Vue reactivity; use <code>.value</code></td>
-    </tr>
-    <tr>
-      <td><code>useFieldValidation().state</code></td>
-      <td><code>FieldValidationState</code></td>
-      <td><code>ComputedRef&lt;FieldValidationState&gt;</code></td>
-      <td>Vue reactivity; use <code>.value</code></td>
-    </tr>
-    <tr>
-      <td><code>useFieldValidation().errors</code></td>
-      <td><code>string[]</code></td>
-      <td><code>ComputedRef&lt;string[]&gt;</code></td>
-      <td>Vue reactivity; use <code>.value</code></td>
-    </tr>
-    <tr>
-      <td><code>useFieldValidation().isValid</code></td>
-      <td><code>boolean</code></td>
-      <td><code>ComputedRef&lt;boolean&gt;</code></td>
-      <td>Vue reactivity; use <code>.value</code></td>
-    </tr>
-    <tr>
-      <td><code>VisibilityContextValue.ctx</code></td>
-      <td><code>CoreVisibilityContext</code></td>
-      <td><code>ComputedRef&lt;CoreVisibilityContext&gt;</code></td>
-      <td>Vue reactivity; use <code>ctx.value</code></td>
-    </tr>
-    <tr>
-      <td><code>children</code> type</td>
-      <td><code>React.ReactNode</code></td>
-      <td><code>VNode | VNode[]</code></td>
-      <td>Platform-specific</td>
-    </tr>
-    <tr>
-      <td><code>useBoundProp</code></td>
-      <td>exported</td>
-      <td>exported</td>
-      <td>Same API; returns <code>[value, setValue]</code></td>
-    </tr>
-    <tr>
-      <td><code>VisibilityProviderProps</code></td>
-      <td>exported</td>
-      <td>not exported (no props)</td>
-      <td>Vue uses slot, no prop needed</td>
-    </tr>
-    <tr>
-      <td>Streaming hooks</td>
-      <td><code>useUIStream</code>, <code>useChatUI</code></td>
-      <td><code>useUIStream</code>, <code>useChatUI</code></td>
-      <td>Same API; returns Vue <code>Ref</code> values</td>
-    </tr>
-  </tbody>
-</table>
@@ -1,76 +0,0 @@
---
-title: "@json-render/xstate"
---
-
-[XState Store](https://stately.ai/docs/xstate-store) adapter for json-render's `StateStore` interface.
-
-Requires `@xstate/store` v3+.
-
-## Installation
-
-```bash
-npm install @json-render/xstate @json-render/core @json-render/react @xstate/store
-```
-
-## xstateStoreStateStore
-
-Create a `StateStore` backed by an `@xstate/store` atom.
-
-```typescript
-import { xstateStoreStateStore } from "@json-render/xstate";
-```
-
-### Options
-
-<table>
-  <thead>
-    <tr>
-      <th>Option</th>
-      <th>Type</th>
-      <th>Required</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>atom</code></td>
-      <td><code>{'Atom<StateModel>'}</code></td>
-      <td>Yes</td>
-      <td>An <code>@xstate/store</code> atom (from <code>createAtom</code>) holding the json-render state model.</td>
-    </tr>
-  </tbody>
-</table>
-
-### Example
-
-```typescript
-import { createAtom } from "@xstate/store";
-import { xstateStoreStateStore } from "@json-render/xstate";
-import { StateProvider } from "@json-render/react";
-
-const uiAtom = createAtom({ count: 0 });
-const store = xstateStoreStateStore({ atom: uiAtom });
-```
-
-```tsx
-<StateProvider store={store}>
-  {/* json-render reads/writes go through @xstate/store */}
-</StateProvider>
-```
-
-## Re-exports
-
-<table>
-  <thead>
-    <tr>
-      <th>Export</th>
-      <th>Source</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>StateStore</code></td>
-      <td><code>@json-render/core</code></td>
-    </tr>
-  </tbody>
-</table>
@@ -1,231 +0,0 @@
---
-title: "@json-render/yaml"
---
-
-YAML wire format for json-render. Progressive rendering and surgical edits via streaming YAML.
-
-## Prompt Generation
-
-### yamlPrompt
-
-Generate a YAML-format system prompt from any json-render catalog. Works with catalogs from any renderer.
-
-```typescript
-function yamlPrompt(
-  catalog: Catalog,
-  options?: YamlPromptOptions
-): string
-```
-
-```typescript
-import { yamlPrompt } from "@json-render/yaml";
-
-const systemPrompt = yamlPrompt(catalog, {
-  mode: "standalone",
-  customRules: ["Always use dark theme"],
-  editModes: ["merge"],
-});
-```
-
-### YamlPromptOptions
-
-<table>
-  <thead>
-    <tr>
-      <th>Option</th>
-      <th>Type</th>
-      <th>Default</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>system</code></td>
-      <td><code>string</code></td>
-      <td><code>{'\"You are a UI generator that outputs YAML.\"'}</code></td>
-      <td>Custom system message intro</td>
-    </tr>
-    <tr>
-      <td><code>mode</code></td>
-      <td><code>{'\"standalone\" | \"inline\"'}</code></td>
-      <td><code>{'\"standalone\"'}</code></td>
-      <td>Standalone outputs only YAML; inline allows conversational responses with embedded YAML fences</td>
-    </tr>
-    <tr>
-      <td><code>customRules</code></td>
-      <td><code>{'string[]'}</code></td>
-      <td><code>{'[]'}</code></td>
-      <td>Additional rules appended to the prompt</td>
-    </tr>
-    <tr>
-      <td><code>editModes</code></td>
-      <td><code>{'EditMode[]'}</code></td>
-      <td><code>{'[\"merge\"]'}</code></td>
-      <td>Edit modes to document in the prompt (patch, merge, diff)</td>
-    </tr>
-  </tbody>
-</table>
-
-## AI SDK Transform
-
-### createYamlTransform
-
-Creates a `TransformStream` that intercepts AI SDK stream chunks and converts YAML spec/edit blocks into json-render patch data parts.
-
-```typescript
-function createYamlTransform(
-  options?: YamlTransformOptions
-): TransformStream<StreamChunk, StreamChunk>
-```
-
-Recognized fence types:
-
- <code>{'```yaml-spec'}</code> -- Full YAML spec, parsed progressively
- <code>{'```yaml-edit'}</code> -- Partial YAML, deep-merged with current spec
- <code>{'```yaml-patch'}</code> -- RFC 6902 JSON Patch lines
- <code>{'```diff'}</code> -- Unified diff against serialized spec
-
-### pipeYamlRender
-
-Convenience wrapper that pipes an AI SDK stream through the YAML transform. Drop-in replacement for `pipeJsonRender` from `@json-render/core`.
-
-```typescript
-function pipeYamlRender<T>(
-  stream: ReadableStream<T>,
-  options?: YamlTransformOptions
-): ReadableStream<T>
-```
-
-```typescript
-import { pipeYamlRender } from "@json-render/yaml";
-import { createUIMessageStream, createUIMessageStreamResponse } from "ai";
-
-const stream = createUIMessageStream({
-  execute: async ({ writer }) => {
-    writer.merge(pipeYamlRender(result.toUIMessageStream()));
-  },
-});
-return createUIMessageStreamResponse({ stream });
-```
-
-## Streaming Parser
-
-### createYamlStreamCompiler
-
-Create a streaming YAML compiler that incrementally parses YAML text and emits JSON Patch operations by diffing each successful parse against the previous snapshot.
-
-```typescript
-function createYamlStreamCompiler<T>(
-  initial?: Partial<T>
-): YamlStreamCompiler<T>
-```
-
-```typescript
-import { createYamlStreamCompiler } from "@json-render/yaml";
-
-const compiler = createYamlStreamCompiler<Spec>();
-
-compiler.push("root: main\n");
-compiler.push("elements:\n  main:\n    type: Card\n");
-
-const { result, newPatches } = compiler.flush();
-```
-
-### YamlStreamCompiler
-
-<table>
-  <thead>
-    <tr>
-      <th>Method</th>
-      <th>Returns</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>push(chunk)</code></td>
-      <td><code>{'{ result: T; newPatches: JsonPatch[] }'}</code></td>
-      <td>Push a chunk of text, returns current result and new patches</td>
-    </tr>
-    <tr>
-      <td><code>flush()</code></td>
-      <td><code>{'{ result: T; newPatches: JsonPatch[] }'}</code></td>
-      <td>Flush remaining buffer, return final result</td>
-    </tr>
-    <tr>
-      <td><code>getResult()</code></td>
-      <td><code>T</code></td>
-      <td>Get the current compiled result</td>
-    </tr>
-    <tr>
-      <td><code>getPatches()</code></td>
-      <td><code>{'JsonPatch[]'}</code></td>
-      <td>Get all patches applied so far</td>
-    </tr>
-    <tr>
-      <td><code>reset(initial?)</code></td>
-      <td><code>void</code></td>
-      <td>Reset to initial state</td>
-    </tr>
-  </tbody>
-</table>
-
-## Fence Constants
-
-Exported string constants for fence detection in custom parsers:
-
-<table>
-  <thead>
-    <tr>
-      <th>Constant</th>
-      <th>Value</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>YAML_SPEC_FENCE</code></td>
-      <td><code>{'\"```yaml-spec\"'}</code></td>
-    </tr>
-    <tr>
-      <td><code>YAML_EDIT_FENCE</code></td>
-      <td><code>{'\"```yaml-edit\"'}</code></td>
-    </tr>
-    <tr>
-      <td><code>YAML_PATCH_FENCE</code></td>
-      <td><code>{'\"```yaml-patch\"'}</code></td>
-    </tr>
-    <tr>
-      <td><code>DIFF_FENCE</code></td>
-      <td><code>{'\"```diff\"'}</code></td>
-    </tr>
-    <tr>
-      <td><code>FENCE_CLOSE</code></td>
-      <td><code>{'\"```\"'}</code></td>
-    </tr>
-  </tbody>
-</table>
-
-## Re-exports from @json-render/core
-
-### diffToPatches
-
-Generate RFC 6902 JSON Patch operations that transform one object into another.
-
-```typescript
-function diffToPatches(
-  oldObj: Record<string, unknown>,
-  newObj: Record<string, unknown>,
-  basePath?: string
-): JsonPatch[]
-```
-
-### deepMergeSpec
-
-Deep-merge with RFC 7396 semantics: `null` deletes, arrays replace, objects recurse.
-
-```typescript
-function deepMergeSpec(
-  base: Record<string, unknown>,
-  patch: Record<string, unknown>
-): Record<string, unknown>
-```
@@ -1,107 +0,0 @@
---
-title: "@json-render/zustand"
---
-
-Zustand adapter for json-render's `StateStore` interface.
-
-Requires Zustand v5+. Zustand v4 is not supported due to breaking API changes in the vanilla store interface.
-
-## Installation
-
-```bash
-npm install @json-render/zustand @json-render/core @json-render/react zustand
-```
-
-## zustandStateStore
-
-Create a `StateStore` backed by a Zustand vanilla store.
-
-```typescript
-import { zustandStateStore } from "@json-render/zustand";
-```
-
-### Options
-
-<table>
-  <thead>
-    <tr>
-      <th>Option</th>
-      <th>Type</th>
-      <th>Required</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>store</code></td>
-      <td><code>{'StoreApi<S>'}</code></td>
-      <td>Yes</td>
-      <td>A Zustand vanilla store (from <code>createStore</code> in <code>zustand/vanilla</code>).</td>
-    </tr>
-    <tr>
-      <td><code>selector</code></td>
-      <td><code>{'(state: S) => StateModel'}</code></td>
-      <td>No</td>
-      <td>Select the json-render slice from the store state. Defaults to the entire state.</td>
-    </tr>
-    <tr>
-      <td><code>updater</code></td>
-      <td><code>{'(nextState: StateModel, store: StoreApi<S>) => void'}</code></td>
-      <td>No</td>
-      <td>Apply a state change back to the store. Defaults to a shallow merge.</td>
-    </tr>
-  </tbody>
-</table>
-
-### Example
-
-```typescript
-import { createStore } from "zustand/vanilla";
-import { zustandStateStore } from "@json-render/zustand";
-import { StateProvider } from "@json-render/react";
-
-const bearStore = createStore(() => ({
-  count: 0,
-  name: "Bear",
-}));
-
-const store = zustandStateStore({ store: bearStore });
-```
-
-```tsx
-<StateProvider store={store}>
-  {/* json-render reads/writes go through Zustand */}
-</StateProvider>
-```
-
-### Nested Slice
-
-```typescript
-const appStore = createStore(() => ({
-  ui: { count: 0 },
-  auth: { token: null },
-}));
-
-const store = zustandStateStore({
-  store: appStore,
-  selector: (s) => s.ui,
-  updater: (next, s) => s.setState({ ui: next }),
-});
-```
-
-## Re-exports
-
-<table>
-  <thead>
-    <tr>
-      <th>Export</th>
-      <th>Source</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>StateStore</code></td>
-      <td><code>@json-render/core</code></td>
-    </tr>
-  </tbody>
-</table>
--- a/Show More
+++ b/Show More