fixes

- fix tsconfig: remove rootDir, expand include for test imports
- fix render tests: add non-null assertions for noUncheckedIndexedAccess
- fix dev script: add portless to match other examples
- fix .env.example: correct comment from video to email generation
- fix docs: add blank line before heading in installation page

.changeset/config.json

@@ -17,12 +17,7 @@
       "@json-render/jotai",
       "@json-render/vue",
       "@json-render/xstate",
-      "@json-render/image",
-      "@json-render/mcp",
-      "@json-render/svelte",
-      "@json-render/solid",
-      "@json-render/react-three-fiber",
-      "@json-render/yaml"
+      "@json-render/image"
     ]
   ],
   "linked": [],

.cursor/mcp.json

@@ -1,8 +0,0 @@
-{
-  "mcpServers": {
-    "json-render": {
-      "command": "npx",
-      "args": ["tsx", "examples/mcp/server.ts", "--stdio"]
-    }
-  }
-}

.github/workflows/ci.yml

@@ -13,43 +13,34 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  lint:
-    name: Lint
+  ci:
+    name: Lint, Type Check & Build
     runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: pnpm
-      - run: pnpm install --frozen-lockfile
-      - run: pnpm lint
 
-  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: 20
-          cache: pnpm
-      - run: pnpm install --frozen-lockfile
-      - name: Build packages
-        run: pnpm turbo run build --filter='./packages/*'
-      - run: pnpm test
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-  typecheck:
-    name: Type Check
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: pnpm
-      - run: pnpm install --frozen-lockfile
-      - run: pnpm type-check
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Type check
+        run: pnpm type-check
+
+      - name: Test
+        run: pnpm test
+
+      - name: Build
+        run: pnpm build

.gitignore

@@ -4,7 +4,6 @@
 node_modules
 .pnp
 .pnp.js
-.pnpm-store/
 
 # Local env files
 .env*
@@ -28,7 +27,6 @@ out/
 build
 dist
 *.tsbuildinfo
-.svelte-kit/
 
 
 # Debug

.vscode/mcp.json

@@ -1,9 +0,0 @@
-{
-  "servers": {
-    "json-render": {
-      "type": "stdio",
-      "command": "npx",
-      "args": ["tsx", "examples/mcp/server.ts", "--stdio"]
-    }
-  }
-}

AGENTS.md

@@ -98,7 +98,7 @@ When asked to prepare a release (e.g. "prepare v0.12.0"):
    - An API reference page at `apps/web/app/(main)/docs/api/<name>/page.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 skill at `skills/json-render-<name>/SKILL.md`
    - A `packages/<name>/README.md`
 6. **Run `pnpm type-check`** after all changes to verify nothing is broken
 

README.md

@@ -19,12 +19,6 @@ npm install @json-render/core @json-render/react-pdf
 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 3D scenes
-npm install @json-render/core @json-render/react-three-fiber @react-three/fiber @react-three/drei three
 ```
 
 ## Why json-render?
@@ -34,7 +28,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, Vue (web), React Native (mobile) from the same catalog
 - **Batteries Included** - 36 pre-built shadcn/ui components ready to use
 
 ## Quick Start
@@ -95,7 +89,9 @@ const { registry } = defineRegistry(catalog, {
       </div>
     ),
     Button: ({ props, emit }) => (
-      <button onClick={() => emit("press")}>{props.label}</button>
+      <button onClick={() => emit("press")}>
+        {props.label}
+      </button>
     ),
   },
 });
@@ -115,27 +111,21 @@ 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/react-three-fiber` | React Three Fiber renderer for 3D scenes (19 built-in components)  |
-| `@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             |
-| `@json-render/react-email`  | React Email renderer for HTML/plain-text emails from specs             |
-| `@json-render/image`        | Image renderer for SVG/PNG output (OG images, social cards) via Satori |
-| `@json-render/codegen`      | Utilities for generating code from json-render UI trees                |
-| `@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/vue` | Vue 3 renderer, composables, providers |
+| `@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 |
+| `@json-render/react-email` | React Email renderer for HTML/plain-text emails from specs |
+| `@json-render/image` | Image renderer for SVG/PNG output (OG images, social cards) via Satori |
+| `@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` |
 
 ## Renderers
 
@@ -164,7 +154,7 @@ const spec = {
 
 // defineRegistry creates a type-safe component registry
 const { registry } = defineRegistry(catalog, { components });
-<Renderer spec={spec} registry={registry} />;
+<Renderer spec={spec} registry={registry} />
 ```
 
 ### Vue (UI)
@@ -187,43 +177,6 @@ const { registry } = defineRegistry(catalog, {
 // <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} />;
-```
-
 ### shadcn/ui (Web)
 
 ```tsx
@@ -254,7 +207,7 @@ const { registry } = defineRegistry(catalog, {
   },
 });
 
-<Renderer spec={spec} registry={registry} />;
+<Renderer spec={spec} registry={registry} />
 ```
 
 ### React Native (Mobile)
@@ -275,40 +228,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
@@ -318,7 +254,7 @@ const spec = {
   fps={spec.composition.fps}
   compositionWidth={spec.composition.width}
   compositionHeight={spec.composition.height}
-/>;
+/>
 ```
 
 ### React PDF (Documents)
@@ -329,11 +265,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" },
@@ -347,14 +279,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: [],
     },
@@ -379,11 +305,7 @@ const catalog = defineCatalog(schema, {
 const spec = {
   root: "html-1",
   elements: {
-    "html-1": {
-      type: "Html",
-      props: { lang: "en", dir: "ltr" },
-      children: ["head-1", "body-1"],
-    },
+    "html-1": { type: "Html", props: { lang: "en", dir: "ltr" }, children: ["head-1", "body-1"] },
     "head-1": { type: "Head", props: {}, children: [] },
     "body-1": {
       type: "Body",
@@ -392,17 +314,11 @@ const spec = {
     },
     "container-1": {
       type: "Container",
-      props: {
-        style: { maxWidth: "600px", margin: "0 auto", padding: "20px" },
-      },
+      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: [],
-    },
+    "text-1": { type: "Text", props: { text: "Thanks for signing up." }, children: [] },
   },
 };
 
@@ -438,47 +354,6 @@ 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,
-    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
-  spec={spec}
-  registry={registry}
-  shadows
-  camera={{ position: [5, 5, 5], fov: 50 }}
-  style={{ width: "100%", height: "100vh" }}
-/>;
-```
-
 ## Features
 
 ### Streaming (SpecStream)
@@ -528,16 +403,8 @@ 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" }
   }
 }
 ```
@@ -556,10 +423,7 @@ 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"]
 }
 ```
@@ -573,15 +437,9 @@ React to state changes by triggering actions:
 ```json
 {
   "type": "Select",
-  "props": {
-    "value": { "$bindState": "/form/country" },
-    "options": ["US", "Canada", "UK"]
-  },
+  "props": { "value": { "$bindState": "/form/country" }, "options": ["US", "Canada", "UK"] },
   "watch": {
-    "/form/country": {
-      "action": "loadCities",
-      "params": { "country": { "$state": "/form/country" } }
-    }
+    "/form/country": { "action": "loadCities", "params": { "country": { "$state": "/form/country" } } }
   }
 }
 ```
@@ -604,9 +462,8 @@ pnpm dev
 - 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`
-- 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`
+- Vite Renderers (React + Vue): run `pnpm dev` in `examples/vite-renderers`
 - React Native example: run `npx expo start` in `examples/react-native`
 
 ## How It Works
@@ -616,7 +473,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])

apps/web/CHANGELOG.md

@@ -1,42 +1,5 @@
 # web
 
-## 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

apps/web/app/(main)/docs/ai-sdk/page.mdx

@@ -3,7 +3,7 @@ export const metadata = pageMetadata("docs/ai-sdk")
 
 # AI SDK Integration
 
-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.
+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
 
@@ -11,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
 
@@ -73,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
 
@@ -96,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,
   });
 
@@ -182,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?
 
@@ -197,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>
@@ -215,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>

apps/web/app/(main)/docs/api/core/page.mdx

@@ -75,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> {
@@ -371,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';
@@ -390,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';
@@ -404,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
 
@@ -481,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"])
 }
 ```
 
@@ -494,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"],
 });
 ```
 
@@ -517,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.

apps/web/app/(main)/docs/api/jotai/page.mdx

@@ -1,104 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("docs/api/jotai")
-
-# @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>

apps/web/app/(main)/docs/api/mcp/page.mdx

@@ -1,247 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("docs/api/mcp")
-
-# @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.

apps/web/app/(main)/docs/api/react-three-fiber/page.mdx

@@ -1,416 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("docs/api/react-three-fiber")
-
-# @json-render/react-three-fiber
-
-React Three Fiber renderer for json-render. 19 built-in 3D components for meshes, lights, models, 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>
-</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">;
-```

apps/web/app/(main)/docs/api/redux/page.mdx

@@ -1,104 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("docs/api/redux")
-
-# @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>

apps/web/app/(main)/docs/api/solid/page.mdx

@@ -1,201 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata";
-export const metadata = pageMetadata("docs/api/solid");
-
-# @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.

apps/web/app/(main)/docs/api/svelte/page.mdx

@@ -1,126 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("docs/api/svelte")
-
-# @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.

apps/web/app/(main)/docs/api/xstate/page.mdx

@@ -1,77 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("docs/api/xstate")
-
-# @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>

apps/web/app/(main)/docs/api/yaml/page.mdx

@@ -1,232 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("docs/api/yaml")
-
-# @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>
-```

apps/web/app/(main)/docs/api/zustand/page.mdx

@@ -1,108 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("docs/api/zustand")
-
-# @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>

apps/web/app/(main)/docs/changelog/page.mdx

@@ -341,8 +341,6 @@ February 2026
 
 ### New: Chat Mode (Inline GenUI)
 
-> **Note:** These modes were renamed in v0.12.1 — "Generate" is now "Standalone" and "Chat" is now "Inline". The old names are accepted as deprecated aliases.
-
 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

apps/web/app/(main)/docs/generation-modes/page.mdx

@@ -3,15 +3,15 @@ export const metadata = pageMetadata("docs/generation-modes")
 
 # 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.
+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:
 
@@ -25,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.",
@@ -74,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:
 
@@ -92,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,
@@ -180,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>
@@ -198,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>

apps/web/app/(main)/docs/installation/page.mdx

@@ -21,14 +21,6 @@ Peer dependencies: `vue ^3.5.0` and `zod ^4.0.0`.
 
 <PackageInstall packages="vue zod" />
 
-## For Svelte
-
-<PackageInstall packages="@json-render/core @json-render/svelte" />
-
-Peer dependencies: `svelte ^5.0.0` and `zod ^4.0.0`.
-
-<PackageInstall packages="svelte zod" />
-
 ## For React UI with shadcn/ui
 
 Pre-built components for fast prototyping and production use:

apps/web/app/(main)/docs/layout.tsx

@@ -1,7 +1,6 @@
 import { DocsMobileNav } from "@/components/docs-mobile-nav";
 import { DocsSidebar } from "@/components/docs-sidebar";
 import { CopyPageButton } from "@/components/copy-page-button";
-import { TableOfContents } from "@/components/table-of-contents";
 
 export default function DocsLayout({
   children,
@@ -11,7 +10,7 @@ export default function DocsLayout({
   return (
     <>
       <DocsMobileNav />
-      <div className="max-w-7xl mx-auto px-6 py-8 lg:py-12 flex gap-12">
+      <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 />
@@ -24,11 +23,6 @@ export default function DocsLayout({
           </div>
           <article>{children}</article>
         </div>
-
-        {/* On this page */}
-        <aside className="w-44 shrink-0 hidden xl:block sticky top-28 h-[calc(100vh-7rem)] overflow-y-auto">
-          <TableOfContents />
-        </aside>
       </div>
     </>
   );

apps/web/app/(main)/docs/migration/page.mdx

@@ -309,35 +309,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.

apps/web/app/(main)/docs/page.mdx

@@ -91,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
 

apps/web/app/(main)/docs/renderers/page.mdx

@@ -1,5 +1,5 @@
-import { pageMetadata } from "@/lib/page-metadata";
-export const metadata = pageMetadata("docs/renderers");
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/renderers")
 
 # Renderers
 
@@ -22,65 +22,37 @@ All renderers share the same workflow:
   <tbody>
     <tr>
       <td>React</td>
-      <td>
-        <code>@json-render/react</code>
-      </td>
+      <td><code>@json-render/react</code></td>
       <td>React component tree</td>
     </tr>
     <tr>
       <td>Vue</td>
-      <td>
-        <code>@json-render/vue</code>
-      </td>
+      <td><code>@json-render/vue</code></td>
       <td>Vue 3 component tree</td>
     </tr>
-    <tr>
-      <td>Svelte</td>
-      <td>
-        <code>@json-render/svelte</code>
-      </td>
-      <td>Svelte 5 component tree</td>
-    </tr>
-    <tr>
-      <td>Solid</td>
-      <td>
-        <code>@json-render/solid</code>
-      </td>
-      <td>SolidJS component tree</td>
-    </tr>
     <tr>
       <td>shadcn/ui</td>
-      <td>
-        <code>@json-render/shadcn</code>
-      </td>
+      <td><code>@json-render/shadcn</code></td>
       <td>Pre-built Radix UI + Tailwind components (uses React renderer)</td>
     </tr>
     <tr>
       <td>React Native</td>
-      <td>
-        <code>@json-render/react-native</code>
-      </td>
+      <td><code>@json-render/react-native</code></td>
       <td>Native mobile views</td>
     </tr>
     <tr>
       <td>Image</td>
-      <td>
-        <code>@json-render/image</code>
-      </td>
+      <td><code>@json-render/image</code></td>
       <td>SVG / PNG (via Satori)</td>
     </tr>
     <tr>
       <td>React PDF</td>
-      <td>
-        <code>@json-render/react-pdf</code>
-      </td>
+      <td><code>@json-render/react-pdf</code></td>
       <td>PDF documents</td>
     </tr>
     <tr>
       <td>Remotion</td>
-      <td>
-        <code>@json-render/remotion</code>
-      </td>
+      <td><code>@json-render/remotion</code></td>
       <td>Video compositions</td>
     </tr>
   </tbody>
@@ -95,7 +67,7 @@ import { defineRegistry, Renderer } from "@json-render/react";
 import { schema } from "@json-render/react/schema";
 
 const { registry } = defineRegistry(catalog, { components });
-<Renderer spec={spec} registry={registry} />;
+<Renderer spec={spec} registry={registry} />
 ```
 
 Use `StateProvider`, `VisibilityProvider`, and `ActionProvider` for full interactivity. See the [@json-render/react API reference](/docs/api/react) for details.
@@ -118,42 +90,6 @@ const { registry } = defineRegistry(catalog, {
 
 Uses composables (`useStateStore`, `useStateBinding`, `useActions`, etc.) instead of React hooks. See the [@json-render/vue API reference](/docs/api/vue) for details.
 
-## Svelte
-
-Svelte 5 renderer with runes-compatible context helpers, visibility conditions, actions, and streaming support.
-
-```typescript
-import { defineRegistry, Renderer } from "@json-render/svelte";
-import { schema } from "@json-render/svelte/schema";
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: ({ props, children }) => /* Svelte snippet */,
-  },
-});
-```
-
-See the [@json-render/svelte API reference](/docs/api/svelte) for details.
-
-## Solid
-
-SolidJS renderer with fine-grained reactivity, state bindings, validation, visibility, and event-driven actions.
-
-```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>,
-  },
-});
-
-<Renderer spec={spec} registry={registry} />;
-```
-
-See the [@json-render/solid API reference](/docs/api/solid) for details.
-
 ## shadcn/ui
 
 36 pre-built components using Radix UI and Tailwind CSS. Built on top of `@json-render/react` -- no custom renderer needed.
@@ -189,10 +125,7 @@ Render specs as native mobile views. Includes 25+ standard components and standa
 ```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 { standardComponentDefinitions, standardActionDefinitions } from "@json-render/react-native/catalog";
 import { defineRegistry, Renderer } from "@json-render/react-native";
 
 const catalog = defineCatalog(schema, {
@@ -201,7 +134,7 @@ const catalog = defineCatalog(schema, {
 });
 
 const { registry } = defineRegistry(catalog, { components: {} });
-<Renderer spec={spec} registry={registry} />;
+<Renderer spec={spec} registry={registry} />
 ```
 
 See the [@json-render/react-native API reference](/docs/api/react-native) for details.
@@ -226,11 +159,7 @@ See the [@json-render/image API reference](/docs/api/image) for details.
 Generate PDF documents from JSON specs using `@react-pdf/renderer`. Render to buffer, stream, or file.
 
 ```typescript
-import {
-  renderToBuffer,
-  renderToStream,
-  renderToFile,
-} from "@json-render/react-pdf";
+import { renderToBuffer, renderToStream, renderToFile } from "@json-render/react-pdf";
 
 const buffer = await renderToBuffer(spec);
 const stream = await renderToStream(spec);
@@ -256,7 +185,7 @@ import { Renderer } from "@json-render/remotion";
   fps={spec.composition.fps}
   compositionWidth={spec.composition.width}
   compositionHeight={spec.composition.height}
-/>;
+/>
 ```
 
 Uses a timeline spec format with compositions, tracks, and clips. Includes standard components (TitleCard, TypingText, ImageSlide, etc.), transitions (fade, slide, zoom, wipe), and effects.

apps/web/app/(main)/docs/skills/page.mdx

@@ -1,123 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata";
-
-export const metadata = pageMetadata("docs/skills");
-
-# Skills
-
-json-render ships with skills that teach AI coding agents how to use each package. Install a skill and your agent in Cursor, Claude Code, or Codex can generate json-render UIs without manual guidance.
-
-## Available Skills
-
-- **core** — Core schemas, catalogs, and AI prompt generation.
-- **react** — React renderer that turns JSON specs into React component trees.
-- **react-pdf** — PDF renderer using `@react-pdf/renderer`.
-- **react-email** — Email renderer that produces HTML or plain-text emails.
-- **react-native** — React Native renderer for native mobile UIs.
-- **shadcn** — Pre-built shadcn/ui components (Radix UI + Tailwind).
-- **image** — Image renderer that turns JSON specs into SVG and PNG via Satori.
-- **remotion** — Remotion renderer for video generation from JSON timeline specs.
-- **vue** — Vue 3 renderer for Vue component trees.
-- **svelte** — Svelte 5 renderer for Svelte component trees.
-- **solid** — SolidJS renderer for fine-grained reactive component trees.
-- **codegen** — Code generation utilities for building custom exporters.
-- **mcp** — MCP Apps integration for Claude, ChatGPT, Cursor, and VS Code.
-- **redux** — Redux adapter for json-render's `StateStore` interface.
-- **zustand** — Zustand adapter for json-render's `StateStore` interface.
-- **jotai** — Jotai adapter for json-render's `StateStore` interface.
-- **xstate** — XState Store adapter for json-render's `StateStore` interface.
-
-## Installation
-
-```bash
-npx skills add vercel-labs/json-render --skill core
-npx skills add vercel-labs/json-render --skill react
-npx skills add vercel-labs/json-render --skill react-pdf
-npx skills add vercel-labs/json-render --skill react-email
-npx skills add vercel-labs/json-render --skill react-native
-npx skills add vercel-labs/json-render --skill shadcn
-npx skills add vercel-labs/json-render --skill image
-npx skills add vercel-labs/json-render --skill remotion
-npx skills add vercel-labs/json-render --skill vue
-npx skills add vercel-labs/json-render --skill svelte
-npx skills add vercel-labs/json-render --skill solid
-npx skills add vercel-labs/json-render --skill codegen
-npx skills add vercel-labs/json-render --skill mcp
-npx skills add vercel-labs/json-render --skill redux
-npx skills add vercel-labs/json-render --skill zustand
-npx skills add vercel-labs/json-render --skill jotai
-npx skills add vercel-labs/json-render --skill xstate
-```
-
-After installing, your AI agent will automatically activate the right skill when it encounters a matching request.
-
-## core
-
-The foundational skill. Teaches agents how to define catalogs, create schemas, build specs, and generate AI prompts. This is the starting point for any json-render project and covers `defineCatalog`, `defineSchema`, `specSchema`, `toPrompt`, and the full spec format.
-
-## react
-
-Teaches agents how to render JSON specs as React component trees using `JsonRender`, `JsonRenderClient`, and `useJsonRender`. Covers custom component registries, client-side interactivity, state management, and streaming integration.
-
-## react-pdf
-
-Teaches agents how to generate PDFs from JSON specs using `@react-pdf/renderer`. Covers the PDF-specific component registry, page layout, and styling.
-
-## react-email
-
-Teaches agents how to render JSON specs as HTML or plain-text emails using React Email components. Covers the email-specific registry and rendering pipeline.
-
-## react-native
-
-Teaches agents how to render JSON specs as native mobile UIs with React Native. Covers the native component registry and platform-specific considerations.
-
-## shadcn
-
-Teaches agents how to use the pre-built shadcn/ui component registry with json-render. Includes Radix UI primitives, Tailwind styling, and the full set of available shadcn components.
-
-## image
-
-Teaches agents how to turn JSON specs into SVG and PNG images using Satori. Covers the image-specific registry, dimensions, fonts, and rendering options.
-
-## remotion
-
-Teaches agents how to generate videos from JSON timeline specs using Remotion. Covers compositions, sequences, timeline structure, and video rendering.
-
-## vue
-
-Teaches agents how to render JSON specs as Vue 3 component trees. Covers the Vue renderer API, custom component registries, and reactivity integration.
-
-## svelte
-
-Teaches agents how to render JSON specs as Svelte 5 component trees. Covers the Svelte renderer API and component registration.
-
-## solid
-
-Teaches agents how to render JSON specs as SolidJS component trees. Covers Solid-specific reactive patterns, provider wiring, bindings, actions, and streaming.
-
-## codegen
-
-Teaches agents how to use code generation utilities to export UI specs as framework-specific source code. Covers the codegen pipeline and custom exporter creation.
-
-## mcp
-
-Teaches agents how to build MCP Apps that serve json-render UIs inside AI tools like Claude, ChatGPT, Cursor, and VS Code. Covers MCP server setup, tool definitions, and UI streaming.
-
-## redux
-
-Teaches agents how to connect a Redux store to json-render's `StateStore` interface for state-driven UIs.
-
-## zustand
-
-Teaches agents how to connect a Zustand store to json-render's `StateStore` interface for lightweight state management.
-
-## jotai
-
-Teaches agents how to connect Jotai atoms to json-render's `StateStore` interface for atomic state management.
-
-## xstate
-
-Teaches agents how to connect an XState Store to json-render's `StateStore` interface for state-machine-driven UIs.
-
-## Source
-
-All skill files are in the [`skills/`](https://github.com/vercel-labs/json-render/tree/main/skills) directory of the repository.

apps/web/app/(main)/examples/page.tsx

@@ -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>
-  );
-}

apps/web/app/api/docs-chat/route.ts

@@ -16,8 +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/vue, @json-render/svelte, @json-render/solid, @json-render/shadcn, @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/codegen, @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, react-pdf, react-email, react-native, shadcn, react-three-fiber, image, remotion, vue, svelte, solid, codegen, mcp, redux, zustand, jotai, xstate, yaml. See /docs/skills for details.
+npm packages: @json-render/core, @json-render/react, @json-render/react-email, @json-render/react-pdf, @json-render/image, @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.
 

apps/web/app/api/generate/route.ts

@@ -1,73 +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";
 
 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.",
-  "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 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),
@@ -89,34 +48,22 @@ export async function POST(req: Request) {
     );
   }
 
-  const { prompt, context, format, editModes } = await req.json();
-  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,
-    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;
 
@@ -125,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({
@@ -132,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();
     },

apps/web/app/api/search/route.ts

@@ -1,74 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { getSearchIndex } from "@/lib/search-index";
-
-export async function GET(req: NextRequest) {
-  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" } },
-  );
-}

apps/web/components/code-block.tsx

@@ -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;
 }

apps/web/components/docs-chat.tsx

@@ -261,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) {
@@ -497,12 +497,12 @@ export function DocsChat({
       {!open && (
         <button
           onClick={() => setOpen(true)}
-          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 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"
         >
           Ask AI
           <kbd className="hidden sm:inline-flex items-center gap-0.5 text-xs opacity-60 font-mono">
-            <span>&#8984;</span>I
+            <span>&#8984;</span>K
           </kbd>
         </button>
       )}

apps/web/components/generation-modes-diagram.tsx

@@ -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>

apps/web/components/header.tsx

@@ -1,59 +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 }: { className?: 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>
-      <span>12k</span>
-    </a>
-  );
-}
-
 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");
     }
@@ -104,81 +62,48 @@ export function Header() {
             </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 />
+              <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 />
-          <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>
   );

apps/web/components/playground.tsx

@@ -2,16 +2,10 @@
 
 import { useEffect, useState, useCallback, useRef, useMemo } from "react";
 import { flushSync } from "react-dom";
+import { useUIStream, type TokenUsage } from "@json-render/react";
 import type { Spec } from "@json-render/core";
 import { collectUsedComponents, serializeProps } from "@json-render/codegen";
 import { toast } from "sonner";
-import { stringify as yamlStringify } from "yaml";
-import type { EditMode } from "@json-render/core";
-import {
-  usePlaygroundStream,
-  type StreamFormat,
-  type TokenUsage,
-} from "@/lib/use-playground-stream";
 import {
   ResizablePanelGroup,
   ResizablePanel,
@@ -28,10 +22,10 @@ import { PlaygroundRenderer } from "@/lib/render/renderer";
 import { playgroundCatalog } from "@/lib/render/catalog";
 import { buildCatalogDisplayData } from "@/lib/render/catalog-display";
 
-type Tab = "spec" | "nested" | "stream" | "catalog" | "visual";
+type Tab = "json" | "nested" | "stream" | "catalog" | "visual";
 type RenderView = "preview" | "code";
 type MobileView =
-  | "spec"
+  | "json"
   | "nested"
   | "stream"
   | "catalog"
@@ -46,79 +40,6 @@ interface Version {
   status: "generating" | "complete" | "error";
   usage: TokenUsage | null;
   rawLines: string[];
-  format: StreamFormat;
-}
-
-function formatTokens(n: number): string {
-  if (n >= 1000) return `${(n / 1000).toFixed(1).replace(/\.0$/, "")}k`;
-  return String(n);
-}
-
-function PlaygroundControls({
-  format,
-  setFormat,
-  editModes,
-  setEditModes,
-  showClear,
-  onClear,
-}: {
-  format: StreamFormat;
-  setFormat: (f: StreamFormat) => void;
-  editModes: EditMode[];
-  setEditModes: React.Dispatch<React.SetStateAction<EditMode[]>>;
-  showClear: boolean;
-  onClear: () => void;
-}) {
-  return (
-    <div className="flex items-center gap-2">
-      <div className="flex items-center rounded border border-border text-[10px] font-mono overflow-hidden">
-        {(["jsonl", "yaml"] as const).map((f) => (
-          <button
-            key={f}
-            onClick={() => setFormat(f)}
-            className={`px-1.5 py-0.5 transition-colors ${
-              format === f
-                ? "bg-muted text-foreground"
-                : "text-muted-foreground hover:text-foreground"
-            }`}
-          >
-            {f}
-          </button>
-        ))}
-      </div>
-      <div className="flex items-center rounded border border-border text-[10px] font-mono overflow-hidden">
-        {(["patch", "merge", "diff"] as const).map((m) => (
-          <button
-            key={m}
-            onClick={() => {
-              setEditModes((prev) =>
-                prev.includes(m)
-                  ? prev.length > 1
-                    ? prev.filter((x) => x !== m)
-                    : prev
-                  : [...prev, m],
-              );
-            }}
-            className={`px-1.5 py-0.5 transition-colors ${
-              editModes.includes(m)
-                ? "bg-muted text-foreground"
-                : "text-muted-foreground hover:text-foreground"
-            }`}
-          >
-            {m}
-          </button>
-        ))}
-      </div>
-      {showClear && (
-        <button
-          onClick={onClear}
-          className="text-xs text-muted-foreground hover:text-foreground transition-colors"
-        >
-          Clear
-        </button>
-      )}
-    </div>
-  );
 }
 
 /**
@@ -179,15 +100,13 @@ export function Playground() {
     null,
   );
   const [inputValue, setInputValue] = useState("");
-  const [activeTab, setActiveTab] = useState<Tab>("spec");
+  const [activeTab, setActiveTab] = useState<Tab>("json");
   const [catalogSection, setCatalogSection] = useState<
     "components" | "actions"
   >("components");
   const [renderView, setRenderView] = useState<RenderView>("preview");
   const [mobileView, setMobileView] = useState<MobileView>("preview");
   const [versionsSheetOpen, setVersionsSheetOpen] = useState(false);
-  const [format, setFormat] = useState<StreamFormat>("jsonl");
-  const [editModes, setEditModes] = useState<EditMode[]>(["patch"]);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const mobileInputRef = useRef<HTMLTextAreaElement>(null);
   const versionsEndRef = useRef<HTMLDivElement>(null);
@@ -205,13 +124,12 @@ export function Playground() {
     rawLines: streamRawLines,
     send,
     clear,
-  } = usePlaygroundStream({
+  } = useUIStream({
     api: "/api/generate",
-    format,
-    editModes,
     onError: (err: Error) => {
       console.error("Generation error:", err);
       toast.error(err.message || "Generation failed. Please try again.");
+      // Mark the version as errored
       if (generatingVersionIdRef.current) {
         const erroredVersionId = generatingVersionIdRef.current;
         setVersions((prev) =>
@@ -222,7 +140,7 @@ export function Playground() {
         generatingVersionIdRef.current = null;
       }
     },
-  });
+  } as Parameters<typeof useUIStream>[0]);
 
   // Get the selected version
   const selectedVersion = versions.find((v) => v.id === selectedVersionId);
@@ -297,7 +215,6 @@ export function Playground() {
       status: "generating",
       usage: null,
       rawLines: [],
-      format,
     };
 
     generatingVersionIdRef.current = newVersionId;
@@ -307,7 +224,7 @@ export function Playground() {
 
     // Pass the current tree as context so the API can iterate on it
     await send(inputValue.trim(), { previousSpec: currentTreeRef.current });
-  }, [inputValue, isStreaming, send, format]);
+  }, [inputValue, isStreaming, send]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -333,16 +250,9 @@ export function Playground() {
     [selectedVersionId, isStreaming],
   );
 
-  const specCode = useMemo(() => {
-    if (!currentTree)
-      return format === "yaml" ? "# waiting..." : "// waiting...";
-    if (format === "yaml") {
-      return yamlStringify(currentTree, { indent: 2 }).trimEnd();
-    }
-    return JSON.stringify(currentTree, null, 2);
-  }, [currentTree, format]);
-
-  const specLang = format === "yaml" ? "yaml" : "json";
+  const jsonCode = currentTree
+    ? JSON.stringify(currentTree, null, 2)
+    : "// waiting...";
 
   const nestedCode = useMemo(() => {
     if (!currentTree || !currentTree.root) return "// waiting...";
@@ -365,7 +275,7 @@ export function Playground() {
       const componentName = element.type;
 
       const propsObj: Record<string, unknown> = {};
-      for (const [k, v] of Object.entries(element.props ?? {})) {
+      for (const [k, v] of Object.entries(element.props)) {
         if (v !== null && v !== undefined) {
           propsObj[k] = v;
         }
@@ -411,15 +321,6 @@ ${jsx}
 }`;
   }, [currentTree]);
 
-  // Determine syntax lang for raw stream based on selected version's format
-  const streamLang = isSelectedVersionGenerating
-    ? format === "yaml"
-      ? "yaml"
-      : "json"
-    : selectedVersion?.format === "yaml"
-      ? "yaml"
-      : "json";
-
   // Chat pane content
   const chatPane = (
     <div className="h-full flex flex-col border-t border-border">
@@ -491,15 +392,9 @@ ${jsx}
                 )}
               </div>
               {version.usage && (
-                <div className="mt-1 ml-6">
+                <div className="flex items-center gap-2 mt-1 ml-6">
                   <span className="text-[10px] font-mono text-muted-foreground/60">
-                    {formatTokens(
-                      version.usage.promptTokens - version.usage.cachedTokens,
-                    )}{" "}
-                    in · {formatTokens(version.usage.completionTokens)} out
-                    {version.usage.cachedTokens > 0
-                      ? ` · ${formatTokens(version.usage.cachedTokens)} cached`
-                      : ""}
+                    {version.usage.totalTokens.toLocaleString()} tokens
                   </span>
                 </div>
               )}
@@ -530,18 +425,20 @@ ${jsx}
           autoFocus
         />
         <div className="flex justify-between items-center mt-2">
-          <PlaygroundControls
-            format={format}
-            setFormat={setFormat}
-            editModes={editModes}
-            setEditModes={setEditModes}
-            showClear={versions.length > 0}
-            onClear={() => {
-              setVersions([]);
-              setSelectedVersionId(null);
-              clear();
-            }}
-          />
+          {versions.length > 0 ? (
+            <button
+              onClick={() => {
+                setVersions([]);
+                setSelectedVersionId(null);
+                clear();
+              }}
+              className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+            >
+              Clear
+            </button>
+          ) : (
+            <div />
+          )}
           {isStreaming ? (
             <button
               onClick={() => clear()}
@@ -595,18 +492,18 @@ ${jsx}
   const copyText =
     activeTab === "stream"
       ? currentRawLines.join("\n")
-      : activeTab === "spec"
-        ? specCode
+      : activeTab === "json"
+        ? jsonCode
         : activeTab === "nested"
           ? nestedCode
           : activeTab === "visual"
-            ? specCode
+            ? jsonCode
             : "";
 
   const codePane = (
     <div className="h-full flex flex-col border-t border-border">
       <div className="border-b border-border px-3 h-9 flex items-center gap-3">
-        {(["spec", "visual", "nested", "stream", "catalog"] as const).map(
+        {(["json", "visual", "nested", "stream", "catalog"] as const).map(
           (tab) => (
             <button
               key={tab}
@@ -617,7 +514,7 @@ ${jsx}
                   : "text-muted-foreground hover:text-foreground"
               }`}
             >
-              {tab === "spec" ? (format === "yaml" ? "yaml" : "json") : tab}
+              {tab}
             </button>
           ),
         )}
@@ -782,7 +679,7 @@ ${jsx}
           currentRawLines.length > 0 ? (
             <CodeBlock
               code={currentRawLines.join("\n")}
-              lang={streamLang}
+              lang="json"
               fillHeight
               hideCopyButton
             />
@@ -794,12 +691,7 @@ ${jsx}
         ) : activeTab === "nested" ? (
           <CodeBlock code={nestedCode} lang="json" fillHeight hideCopyButton />
         ) : (
-          <CodeBlock
-            code={specCode}
-            lang={specLang}
-            fillHeight
-            hideCopyButton
-          />
+          <CodeBlock code={jsonCode} lang="json" fillHeight hideCopyButton />
         )}
       </div>
     </div>
@@ -898,7 +790,7 @@ ${jsx}
               : 0}
           </button>
           {/* Code tabs */}
-          {(["spec", "visual", "nested", "stream", "catalog"] as const).map(
+          {(["json", "visual", "nested", "stream", "catalog"] as const).map(
             (tab) => (
               <button
                 key={tab}
@@ -909,7 +801,7 @@ ${jsx}
                     : "text-muted-foreground hover:text-foreground"
                 }`}
               >
-                {tab === "spec" ? (format === "yaml" ? "yaml" : "json") : tab}
+                {tab}
               </button>
             ),
           )}
@@ -1090,7 +982,7 @@ ${jsx}
             currentRawLines.length > 0 ? (
               <CodeBlock
                 code={currentRawLines.join("\n")}
-                lang={streamLang}
+                lang="json"
                 fillHeight
                 hideCopyButton
               />
@@ -1106,13 +998,8 @@ ${jsx}
               fillHeight
               hideCopyButton
             />
-          ) : mobileView === "spec" ? (
-            <CodeBlock
-              code={specCode}
-              lang={specLang}
-              fillHeight
-              hideCopyButton
-            />
+          ) : mobileView === "json" ? (
+            <CodeBlock code={jsonCode} lang="json" fillHeight hideCopyButton />
           ) : mobileView === "preview" ? (
             currentTree && currentTree.root ? (
               <div className="w-full min-h-full flex items-center justify-center p-6">
@@ -1188,18 +1075,20 @@ ${jsx}
             rows={2}
           />
           <div className="flex justify-between items-center mt-2">
-            <PlaygroundControls
-              format={format}
-              setFormat={setFormat}
-              editModes={editModes}
-              setEditModes={setEditModes}
-              showClear={versions.length > 0}
-              onClear={() => {
-                setVersions([]);
-                setSelectedVersionId(null);
-                clear();
-              }}
-            />
+            {versions.length > 0 ? (
+              <button
+                onClick={() => {
+                  setVersions([]);
+                  setSelectedVersionId(null);
+                  clear();
+                }}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Clear
+              </button>
+            ) : (
+              <div />
+            )}
             {isStreaming ? (
               <button
                 onClick={() => clear()}
@@ -1276,16 +1165,9 @@ ${jsx}
                     )}
                   </div>
                   {version.usage && (
-                    <div className="mt-1 ml-6">
+                    <div className="flex items-center gap-2 mt-1 ml-6">
                       <span className="text-[10px] font-mono text-muted-foreground/60">
-                        {formatTokens(
-                          version.usage.promptTokens -
-                            version.usage.cachedTokens,
-                        )}{" "}
-                        in · {formatTokens(version.usage.completionTokens)} out
-                        {version.usage.cachedTokens > 0
-                          ? ` · ${formatTokens(version.usage.cachedTokens)} cached`
-                          : ""}
+                        {version.usage.totalTokens.toLocaleString()} tokens
                       </span>
                     </div>
                   )}

apps/web/components/search.tsx

@@ -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>
-    </>
-  );
-}

apps/web/components/table-of-contents.tsx

@@ -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>
-  );
-}

apps/web/lib/docs-navigation.ts

@@ -16,7 +16,6 @@ export const docsNavigation: NavSection[] = [
       { title: "Introduction", href: "/docs" },
       { title: "Installation", href: "/docs/installation" },
       { title: "Quick Start", href: "/docs/quick-start" },
-      { title: "Skills", href: "/docs/skills" },
       { title: "Migration Guide", href: "/docs/migration" },
       { title: "Changelog", href: "/docs/changelog" },
     ],
@@ -45,7 +44,53 @@ export const docsNavigation: NavSection[] = [
   },
   {
     title: "Examples",
-    items: [{ title: "Browse All Examples", href: "/examples" }],
+    items: [
+      {
+        title: "Chat",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/chat",
+        external: true,
+      },
+      {
+        title: "Dashboard",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/dashboard",
+        external: true,
+      },
+      {
+        title: "React Native",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/react-native",
+        external: true,
+      },
+      {
+        title: "React PDF",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/react-pdf",
+        external: true,
+      },
+      {
+        title: "React Email",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/react-email",
+        external: true,
+      },
+      {
+        title: "Remotion",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/remotion",
+        external: true,
+      },
+      {
+        title: "Image",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/image",
+        external: true,
+      },
+      {
+        title: "Vue",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/vue",
+        external: true,
+      },
+      {
+        title: "Renders with Vite (Vue / React)",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/vite-renderers",
+        external: true,
+      },
+    ],
   },
   {
     title: "Guides",
@@ -76,19 +121,7 @@ export const docsNavigation: NavSection[] = [
       { title: "@json-render/image", href: "/docs/api/image" },
       { title: "@json-render/remotion", href: "/docs/api/remotion" },
       { title: "@json-render/vue", href: "/docs/api/vue" },
-      { title: "@json-render/svelte", href: "/docs/api/svelte" },
-      { title: "@json-render/solid", href: "/docs/api/solid" },
-      {
-        title: "@json-render/react-three-fiber",
-        href: "/docs/api/react-three-fiber",
-      },
       { title: "@json-render/codegen", href: "/docs/api/codegen" },
-      { title: "@json-render/mcp", href: "/docs/api/mcp" },
-      { title: "@json-render/redux", href: "/docs/api/redux" },
-      { title: "@json-render/zustand", href: "/docs/api/zustand" },
-      { title: "@json-render/jotai", href: "/docs/api/jotai" },
-      { title: "@json-render/xstate", href: "/docs/api/xstate" },
-      { title: "@json-render/yaml", href: "/docs/api/yaml" },
     ],
   },
 ];

apps/web/lib/examples.ts

@@ -1,152 +0,0 @@
-export type Example = {
-  slug: string;
-  title: string;
-  description: string;
-  tags: string[];
-  githubPath: string;
-  demoUrl?: string;
-};
-
-const GITHUB_BASE =
-  "https://github.com/vercel-labs/json-render/tree/main/examples";
-
-export const examples: Example[] = [
-  {
-    slug: "chat",
-    title: "Chat",
-    description:
-      "AI chat app with tool calling, streaming UI, and rich components powered by the AI SDK.",
-    tags: ["React", "Next.js", "AI"],
-    githubPath: "examples/chat",
-    demoUrl: "https://chat-demo.json-render.dev",
-  },
-  {
-    slug: "dashboard",
-    title: "Dashboard",
-    description:
-      "AI-generated dashboard with drag-and-drop, charts, and real-time data binding.",
-    tags: ["React", "Next.js", "AI"],
-    githubPath: "examples/dashboard",
-    demoUrl: "https://dashboard-demo.json-render.dev",
-  },
-  {
-    slug: "no-ai",
-    title: "No AI",
-    description:
-      "Static specs rendered without any AI — forms, cards, tables, and more from hardcoded JSON.",
-    tags: ["React", "Next.js"],
-    githubPath: "examples/no-ai",
-    demoUrl: "https://no-ai-demo.json-render.dev",
-  },
-  {
-    slug: "svelte",
-    title: "Svelte",
-    description:
-      "Svelte renderer demo with counter, todo list, and two-way data binding.",
-    tags: ["Svelte", "Vite"],
-    githubPath: "examples/svelte",
-    demoUrl: "https://svelte-demo.json-render.dev",
-  },
-  {
-    slug: "svelte-chat",
-    title: "Svelte Chat",
-    description: "AI chat app built with SvelteKit and the Svelte renderer.",
-    tags: ["Svelte", "SvelteKit", "AI"],
-    githubPath: "examples/svelte-chat",
-    demoUrl: "https://json-render-svelte-chat-demo.labs.vercel.dev",
-  },
-  {
-    slug: "vue",
-    title: "Vue",
-    description:
-      "Vue renderer demo with counter, todo list, and two-way data binding.",
-    tags: ["Vue", "Vite"],
-    githubPath: "examples/vue",
-    demoUrl: "https://vue-demo.json-render.dev",
-  },
-  {
-    slug: "solid",
-    title: "Solid",
-    description:
-      "Solid renderer demo with counter, todo list, and two-way data binding.",
-    tags: ["Solid", "Vite"],
-    githubPath: "examples/solid",
-    demoUrl: "https://solid-demo.json-render.dev",
-  },
-  {
-    slug: "vite-renderers",
-    title: "Multi-Framework Renderers",
-    description:
-      "Same spec rendered with React, Vue, Svelte, and Solid side by side — hot-swappable at runtime.",
-    tags: ["React", "Vue", "Svelte", "Solid", "Vite"],
-    githubPath: "examples/vite-renderers",
-  },
-  {
-    slug: "react-email",
-    title: "React Email",
-    description:
-      "Generate HTML and plain-text emails from json-render specs using React Email.",
-    tags: ["React", "Email"],
-    githubPath: "examples/react-email",
-    demoUrl: "https://react-email-demo.json-render.dev",
-  },
-  {
-    slug: "react-pdf",
-    title: "React PDF",
-    description:
-      "Generate PDF documents from json-render specs with @react-pdf/renderer.",
-    tags: ["React", "PDF"],
-    githubPath: "examples/react-pdf",
-    demoUrl: "https://react-pdf-demo.json-render.dev",
-  },
-  {
-    slug: "react-three-fiber",
-    title: "React Three Fiber",
-    description:
-      "3D scenes generated from json-render specs using Three.js and React Three Fiber.",
-    tags: ["React", "3D"],
-    githubPath: "examples/react-three-fiber",
-    demoUrl: "https://react-three-fiber-demo.json-render.dev",
-  },
-  {
-    slug: "react-native",
-    title: "React Native",
-    description:
-      "Mobile app rendering json-render specs with Expo and React Native.",
-    tags: ["React Native", "Expo"],
-    githubPath: "examples/react-native",
-  },
-  {
-    slug: "remotion",
-    title: "Remotion",
-    description: "Generate videos from json-render specs using Remotion.",
-    tags: ["React", "Video"],
-    githubPath: "examples/remotion",
-    demoUrl: "https://remotion-demo.json-render.dev",
-  },
-  {
-    slug: "image",
-    title: "Image",
-    description:
-      "Generate OG images and social cards from json-render specs using Satori.",
-    tags: ["React", "Image"],
-    githubPath: "examples/image",
-    demoUrl: "https://image-demo.json-render.dev",
-  },
-  {
-    slug: "mcp",
-    title: "MCP App",
-    description:
-      "MCP server that serves shadcn UIs to Claude, ChatGPT, Cursor, and VS Code.",
-    tags: ["React", "MCP", "Vite"],
-    githubPath: "examples/mcp",
-  },
-];
-
-export const allTags = Array.from(
-  new Set(examples.flatMap((e) => e.tags)),
-).sort();
-
-export function getGitHubUrl(example: Example): string {
-  return `${GITHUB_BASE}/${example.slug}`;
-}

apps/web/lib/page-titles.ts

@@ -11,7 +11,6 @@ export const PAGE_TITLES: Record<string, string> = {
 
   // Top-level
   playground: "Playground",
-  examples: "Examples",
 
   // Docs
   docs: "Introduction",
@@ -38,28 +37,18 @@ export const PAGE_TITLES: Record<string, string> = {
   "docs/ag-ui": "AG-UI Integration",
   "docs/migration": "Migration Guide",
   "docs/changelog": "Changelog",
-  "docs/skills": "Skills",
 
   // API references
   "docs/api/core": "@json-render/core API",
   "docs/api/react": "@json-render/react API",
   "docs/api/vue": "@json-render/vue API",
-  "docs/api/solid": "@json-render/solid API",
   "docs/api/react-pdf": "@json-render/react-pdf API",
   "docs/api/react-email": "@json-render/react-email API",
   "docs/api/react-native": "@json-render/react-native API",
-  "docs/api/svelte": "@json-render/svelte API",
   "docs/api/codegen": "@json-render/codegen API",
   "docs/api/image": "@json-render/image API",
   "docs/api/remotion": "@json-render/remotion API",
   "docs/api/shadcn": "@json-render/shadcn API",
-  "docs/api/mcp": "@json-render/mcp API",
-  "docs/api/redux": "@json-render/redux API",
-  "docs/api/zustand": "@json-render/zustand API",
-  "docs/api/jotai": "@json-render/jotai API",
-  "docs/api/react-three-fiber": "@json-render/react-three-fiber API",
-  "docs/api/xstate": "@json-render/xstate API",
-  "docs/api/yaml": "@json-render/yaml API",
 };
 
 /**

apps/web/lib/search-index.ts

@@ -1,76 +0,0 @@
-import { readFile } from "fs/promises";
-import { join } from "path";
-import { docsNavigation } from "./docs-navigation";
-import { mdxToCleanMarkdown } from "./mdx-to-markdown";
-
-export type IndexEntry = {
-  title: string;
-  href: string;
-  section: string;
-  content: string;
-};
-
-let cached: IndexEntry[] | null = null;
-
-function stripMarkdown(md: string): string {
-  return (
-    md
-      // Remove fenced code blocks entirely
-      .replace(/```[\s\S]*?```/g, "")
-      // Remove inline code
-      .replace(/`[^`]+`/g, "")
-      // Remove markdown links, keep text
-      .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
-      // Remove heading markers
-      .replace(/^#{1,6}\s+/gm, "")
-      // Remove bold/italic markers
-      .replace(/\*{1,3}([^*]+)\*{1,3}/g, "$1")
-      // Remove HTML tags
-      .replace(/<[^>]+>/g, "")
-      // Collapse whitespace
-      .replace(/\n{3,}/g, "\n\n")
-      .trim()
-  );
-}
-
-function mdxFileForSlug(slug: string): string {
-  const docsRoot = join(process.cwd(), "app", "(main)", "docs");
-  if (slug === "/docs") {
-    return join(docsRoot, "page.mdx");
-  }
-  const rest = slug.replace(/^\/docs\/?/, "");
-  return join(docsRoot, ...rest.split("/"), "page.mdx");
-}
-
-export async function getSearchIndex(): Promise<IndexEntry[]> {
-  if (cached) return cached;
-
-  const entries: IndexEntry[] = [];
-
-  for (const section of docsNavigation) {
-    for (const item of section.items) {
-      if (item.external) continue;
-      try {
-        const raw = await readFile(mdxFileForSlug(item.href), "utf-8");
-        const md = mdxToCleanMarkdown(raw);
-        const content = stripMarkdown(md);
-        entries.push({
-          title: item.title,
-          href: item.href,
-          section: section.title,
-          content,
-        });
-      } catch {
-        entries.push({
-          title: item.title,
-          href: item.href,
-          section: section.title,
-          content: "",
-        });
-      }
-    }
-  }
-
-  cached = entries;
-  return entries;
-}

apps/web/lib/spec-patch.ts

@@ -1,155 +0,0 @@
-import type { Spec, JsonPatch } from "@json-render/core";
-import { setByPath, getByPath, removeByPath } from "@json-render/core";
-
-export function setSpecValue(
-  newSpec: Spec,
-  path: string,
-  value: unknown,
-): void {
-  if (path === "/root") {
-    newSpec.root = value as string;
-    return;
-  }
-  if (path === "/state") {
-    newSpec.state = value as Record<string, unknown>;
-    return;
-  }
-  if (path.startsWith("/state/")) {
-    if (!newSpec.state) newSpec.state = {};
-    setByPath(
-      newSpec.state as Record<string, unknown>,
-      path.slice("/state".length),
-      value,
-    );
-    return;
-  }
-  if (path.startsWith("/elements/")) {
-    const pathParts = path.slice("/elements/".length).split("/");
-    const elementKey = pathParts[0];
-    if (!elementKey) return;
-    if (pathParts.length === 1) {
-      if (value == null || typeof value !== "object") return;
-      const el = value as Record<string, unknown>;
-      newSpec.elements[elementKey] = {
-        ...el,
-        type: typeof el.type === "string" ? el.type : "",
-        props: el.props != null && typeof el.props === "object" ? el.props : {},
-        children: Array.isArray(el.children) ? el.children : [],
-      } as Spec["elements"][string];
-    } else {
-      const element = newSpec.elements[elementKey];
-      if (element) {
-        const newElement = { ...element };
-        setByPath(
-          newElement as unknown as Record<string, unknown>,
-          "/" + pathParts.slice(1).join("/"),
-          value,
-        );
-        newSpec.elements[elementKey] = newElement;
-      }
-    }
-  }
-}
-
-export function removeSpecValue(newSpec: Spec, path: string): void {
-  if (path === "/state") {
-    delete newSpec.state;
-    return;
-  }
-  if (path.startsWith("/state/") && newSpec.state) {
-    removeByPath(
-      newSpec.state as Record<string, unknown>,
-      path.slice("/state".length),
-    );
-    return;
-  }
-  if (path.startsWith("/elements/")) {
-    const pathParts = path.slice("/elements/".length).split("/");
-    const elementKey = pathParts[0];
-    if (!elementKey) return;
-    if (pathParts.length === 1) {
-      delete newSpec.elements[elementKey];
-    } else {
-      const element = newSpec.elements[elementKey];
-      if (element) {
-        const newElement = { ...element };
-        removeByPath(
-          newElement as unknown as Record<string, unknown>,
-          "/" + pathParts.slice(1).join("/"),
-        );
-        newSpec.elements[elementKey] = newElement;
-      }
-    }
-  }
-}
-
-export function getSpecValue(spec: Spec, path: string): unknown {
-  if (path === "/root") return spec.root;
-  if (path === "/state") return spec.state;
-  if (path.startsWith("/state/") && spec.state) {
-    return getByPath(
-      spec.state as Record<string, unknown>,
-      path.slice("/state".length),
-    );
-  }
-  return getByPath(spec as unknown as Record<string, unknown>, path);
-}
-
-export function normalizeSpec(spec: Spec): void {
-  if (
-    spec.state === null ||
-    (spec.state !== undefined && typeof spec.state !== "object")
-  ) {
-    spec.state = undefined;
-  }
-
-  for (const key of Object.keys(spec.elements)) {
-    const el = spec.elements[key];
-    if (!el || typeof el !== "object") {
-      delete spec.elements[key];
-      continue;
-    }
-    if (el.props == null || typeof el.props !== "object") {
-      spec.elements[key] = { ...el, props: {} } as Spec["elements"][string];
-    }
-    if (!Array.isArray(spec.elements[key]!.children)) {
-      spec.elements[key] = {
-        ...spec.elements[key]!,
-        children: [],
-      } as Spec["elements"][string];
-    }
-  }
-}
-
-export function applySpecPatch(spec: Spec, patch: JsonPatch): Spec {
-  const newSpec = {
-    ...spec,
-    elements: { ...spec.elements },
-    ...(spec.state ? { state: { ...spec.state } } : {}),
-  };
-  switch (patch.op) {
-    case "add":
-    case "replace":
-      setSpecValue(newSpec, patch.path, patch.value);
-      break;
-    case "remove":
-      removeSpecValue(newSpec, patch.path);
-      break;
-    case "move":
-      if (patch.from) {
-        const moveValue = getSpecValue(newSpec, patch.from);
-        removeSpecValue(newSpec, patch.from);
-        setSpecValue(newSpec, patch.path, moveValue);
-      }
-      break;
-    case "copy":
-      if (patch.from) {
-        setSpecValue(newSpec, patch.path, getSpecValue(newSpec, patch.from));
-      }
-      break;
-    case "test":
-      break;
-  }
-  normalizeSpec(newSpec);
-  return newSpec;
-}

apps/web/lib/use-playground-stream.ts

@@ -1,482 +0,0 @@
-"use client";
-
-import { useState, useCallback, useRef, useEffect } from "react";
-import type { Spec, JsonPatch, EditMode } from "@json-render/core";
-import { deepMergeSpec, diffToPatches } from "@json-render/core";
-import { parse as yamlParse, stringify as yamlStringify } from "yaml";
-import { applyPatch as applyUnifiedDiff } from "diff";
-import {
-  createYamlStreamCompiler,
-  YAML_SPEC_FENCE,
-  YAML_EDIT_FENCE,
-  YAML_PATCH_FENCE,
-  DIFF_FENCE,
-  FENCE_CLOSE,
-} from "@json-render/yaml";
-import { applySpecPatch } from "./spec-patch";
-
-export type StreamFormat = "jsonl" | "yaml";
-
-export interface TokenUsage {
-  promptTokens: number;
-  completionTokens: number;
-  totalTokens: number;
-  cachedTokens: number;
-  cacheWriteTokens: number;
-}
-
-export interface UsePlaygroundStreamOptions {
-  api: string;
-  format: StreamFormat;
-  editModes?: EditMode[];
-  onError?: (error: Error) => void;
-  onComplete?: (spec: Spec) => void;
-}
-
-export interface UsePlaygroundStreamReturn {
-  spec: Spec | null;
-  isStreaming: boolean;
-  error: Error | null;
-  usage: TokenUsage | null;
-  rawLines: string[];
-  send: (prompt: string, context?: Record<string, unknown>) => Promise<void>;
-  clear: () => void;
-}
-
-// ── JSONL helpers ──
-
-type ParsedLine =
-  | { type: "patch"; patch: JsonPatch }
-  | { type: "usage"; usage: TokenUsage }
-  | { type: "json-edit"; mergeObj: Record<string, unknown> }
-  | null;
-
-function parseLine(line: string): ParsedLine {
-  try {
-    const trimmed = line.trim();
-    if (!trimmed || trimmed.startsWith("//")) return null;
-    const parsed = JSON.parse(trimmed);
-    if (parsed.__meta === "usage") {
-      return {
-        type: "usage",
-        usage: {
-          promptTokens: parsed.promptTokens ?? 0,
-          completionTokens: parsed.completionTokens ?? 0,
-          totalTokens: parsed.totalTokens ?? 0,
-          cachedTokens: parsed.cachedTokens ?? 0,
-          cacheWriteTokens: parsed.cacheWriteTokens ?? 0,
-        },
-      };
-    }
-    if (parsed.__json_edit === true) {
-      const mergeObj = { ...parsed };
-      delete mergeObj.__json_edit;
-      return { type: "json-edit", mergeObj };
-    }
-    return { type: "patch", patch: parsed as JsonPatch };
-  } catch {
-    return null;
-  }
-}
-
-type FenceState = "outside" | "yaml-spec" | "yaml-edit" | "yaml-patch" | "diff";
-
-// ── Hook ──
-
-export function usePlaygroundStream({
-  api,
-  format,
-  editModes,
-  onError,
-  onComplete,
-}: UsePlaygroundStreamOptions): UsePlaygroundStreamReturn {
-  const [spec, setSpec] = useState<Spec | null>(null);
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const [usage, setUsage] = useState<TokenUsage | null>(null);
-  const [rawLines, setRawLines] = useState<string[]>([]);
-  const rawLinesRef = useRef<string[]>([]);
-  const abortControllerRef = useRef<AbortController | null>(null);
-
-  const onCompleteRef = useRef(onComplete);
-  onCompleteRef.current = onComplete;
-  const onErrorRef = useRef(onError);
-  onErrorRef.current = onError;
-  const formatRef = useRef(format);
-  formatRef.current = format;
-  const editModesRef = useRef(editModes);
-  editModesRef.current = editModes;
-
-  const clear = useCallback(() => {
-    setSpec(null);
-    setError(null);
-  }, []);
-
-  const send = useCallback(
-    async (prompt: string, context?: Record<string, unknown>) => {
-      abortControllerRef.current = new AbortController();
-
-      setIsStreaming(true);
-      setError(null);
-      setUsage(null);
-      rawLinesRef.current = [];
-      setRawLines([]);
-
-      const previousSpec = context?.previousSpec as Spec | undefined;
-      let currentSpec: Spec =
-        previousSpec && previousSpec.root
-          ? { ...previousSpec, elements: { ...previousSpec.elements } }
-          : { root: "", elements: {} };
-      setSpec(currentSpec);
-
-      try {
-        const response = await fetch(api, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            prompt,
-            context,
-            format: formatRef.current,
-            editModes: editModesRef.current,
-          }),
-          signal: abortControllerRef.current.signal,
-        });
-
-        if (!response.ok) {
-          let errorMessage = `HTTP error: ${response.status}`;
-          try {
-            const errorData = await response.json();
-            if (errorData.message) errorMessage = errorData.message;
-            else if (errorData.error) errorMessage = errorData.error;
-          } catch {
-            // use default
-          }
-          throw new Error(errorMessage);
-        }
-
-        const reader = response.body?.getReader();
-        if (!reader) throw new Error("No response body");
-
-        const decoder = new TextDecoder();
-        let buffer = "";
-
-        if (formatRef.current === "yaml") {
-          // ── YAML streaming ──
-          let fenceState: FenceState = "outside";
-          const compiler = createYamlStreamCompiler<Record<string, unknown>>();
-          let yamlEditAccumulated = "";
-          let yamlPatchAccumulated = "";
-          let diffAccumulated = "";
-
-          while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-
-            buffer += decoder.decode(value, { stream: true });
-            const lines = buffer.split("\n");
-            buffer = lines.pop() ?? "";
-
-            for (const line of lines) {
-              const trimmed = line.trim();
-
-              // Check for usage metadata (appended after stream)
-              if (trimmed.startsWith("{") && trimmed.includes('"__meta"')) {
-                try {
-                  const parsed = JSON.parse(trimmed);
-                  if (parsed.__meta === "usage") {
-                    setUsage({
-                      promptTokens: parsed.promptTokens ?? 0,
-                      completionTokens: parsed.completionTokens ?? 0,
-                      totalTokens: parsed.totalTokens ?? 0,
-                      cachedTokens: parsed.cachedTokens ?? 0,
-                      cacheWriteTokens: parsed.cacheWriteTokens ?? 0,
-                    });
-                    continue;
-                  }
-                } catch {
-                  // not JSON
-                }
-              }
-
-              rawLinesRef.current.push(line);
-
-              if (fenceState === "outside") {
-                if (
-                  trimmed === YAML_SPEC_FENCE ||
-                  trimmed.startsWith(YAML_SPEC_FENCE + " ")
-                ) {
-                  fenceState = "yaml-spec";
-                  compiler.reset();
-                } else if (
-                  trimmed === YAML_EDIT_FENCE ||
-                  trimmed.startsWith(YAML_EDIT_FENCE + " ")
-                ) {
-                  fenceState = "yaml-edit";
-                  yamlEditAccumulated = "";
-                } else if (
-                  trimmed === YAML_PATCH_FENCE ||
-                  trimmed.startsWith(YAML_PATCH_FENCE + " ")
-                ) {
-                  fenceState = "yaml-patch";
-                  yamlPatchAccumulated = "";
-                } else if (
-                  trimmed === DIFF_FENCE ||
-                  trimmed.startsWith(DIFF_FENCE + " ")
-                ) {
-                  fenceState = "diff";
-                  diffAccumulated = "";
-                }
-              } else if (trimmed === FENCE_CLOSE || trimmed === "````") {
-                if (fenceState === "yaml-spec") {
-                  const { result, newPatches } = compiler.flush();
-                  if (result && typeof result === "object" && result.root) {
-                    for (const patch of newPatches) {
-                      currentSpec = applySpecPatch(currentSpec, patch);
-                    }
-                    setSpec({ ...currentSpec });
-                  }
-                } else if (fenceState === "yaml-edit") {
-                  try {
-                    const editObj = yamlParse(yamlEditAccumulated);
-                    if (editObj && typeof editObj === "object") {
-                      const merged = deepMergeSpec(
-                        currentSpec as unknown as Record<string, unknown>,
-                        editObj as Record<string, unknown>,
-                      );
-                      const patches = diffToPatches(
-                        currentSpec as unknown as Record<string, unknown>,
-                        merged,
-                      );
-                      for (const patch of patches) {
-                        currentSpec = applySpecPatch(currentSpec, patch);
-                      }
-                      setSpec({ ...currentSpec });
-                    }
-                  } catch {
-                    // Invalid YAML edit
-                  }
-                } else if (fenceState === "yaml-patch") {
-                  for (const patchLine of yamlPatchAccumulated.split("\n")) {
-                    const t = patchLine.trim();
-                    if (!t) continue;
-                    try {
-                      const patch = JSON.parse(t) as JsonPatch;
-                      if (patch.op) {
-                        currentSpec = applySpecPatch(currentSpec, patch);
-                      }
-                    } catch {
-                      // Skip invalid JSON lines
-                    }
-                  }
-                  setSpec({ ...currentSpec });
-                } else if (fenceState === "diff") {
-                  try {
-                    const specYaml = yamlStringify(currentSpec, { indent: 2 });
-                    const patched = applyUnifiedDiff(specYaml, diffAccumulated);
-                    if (typeof patched === "string") {
-                      const parsed = yamlParse(patched);
-                      if (parsed && typeof parsed === "object") {
-                        const patches = diffToPatches(
-                          currentSpec as unknown as Record<string, unknown>,
-                          parsed as Record<string, unknown>,
-                        );
-                        for (const patch of patches) {
-                          currentSpec = applySpecPatch(currentSpec, patch);
-                        }
-                        setSpec({ ...currentSpec });
-                      }
-                    }
-                  } catch {
-                    // Diff apply or reparse failed
-                  }
-                }
-                fenceState = "outside";
-              } else if (fenceState === "yaml-spec") {
-                const { newPatches } = compiler.push(line + "\n");
-                if (newPatches.length > 0) {
-                  for (const patch of newPatches) {
-                    currentSpec = applySpecPatch(currentSpec, patch);
-                  }
-                  setSpec({ ...currentSpec });
-                }
-              } else if (fenceState === "yaml-edit") {
-                yamlEditAccumulated += line + "\n";
-              } else if (fenceState === "yaml-patch") {
-                yamlPatchAccumulated += line + "\n";
-              } else if (fenceState === "diff") {
-                diffAccumulated += line + "\n";
-              }
-            }
-            setRawLines([...rawLinesRef.current]);
-          }
-
-          // Process remaining buffer
-          if (buffer.trim()) {
-            const trimmed = buffer.trim();
-            if (trimmed.startsWith("{") && trimmed.includes('"__meta"')) {
-              try {
-                const parsed = JSON.parse(trimmed);
-                if (parsed.__meta === "usage") {
-                  setUsage({
-                    promptTokens: parsed.promptTokens ?? 0,
-                    completionTokens: parsed.completionTokens ?? 0,
-                    totalTokens: parsed.totalTokens ?? 0,
-                    cachedTokens: parsed.cachedTokens ?? 0,
-                    cacheWriteTokens: parsed.cacheWriteTokens ?? 0,
-                  });
-                }
-              } catch {
-                // not JSON
-              }
-            } else if (fenceState === "yaml-spec") {
-              compiler.push(buffer);
-              const { result, newPatches } = compiler.flush();
-              if (result && typeof result === "object" && result.root) {
-                for (const patch of newPatches) {
-                  currentSpec = applySpecPatch(currentSpec, patch);
-                }
-                setSpec({ ...currentSpec });
-              }
-            }
-          }
-        } else {
-          // ── JSONL streaming ──
-          let jsonlDiffState: "outside" | "diff" = "outside";
-          let jsonlDiffAccumulated = "";
-
-          while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-
-            buffer += decoder.decode(value, { stream: true });
-            const lines = buffer.split("\n");
-            buffer = lines.pop() ?? "";
-
-            for (const line of lines) {
-              const trimmed = line.trim();
-              if (!trimmed) continue;
-
-              // Diff fence detection within JSONL mode
-              if (jsonlDiffState === "outside") {
-                if (
-                  trimmed === DIFF_FENCE ||
-                  trimmed.startsWith(DIFF_FENCE + " ")
-                ) {
-                  jsonlDiffState = "diff";
-                  jsonlDiffAccumulated = "";
-                  continue;
-                }
-              } else if (
-                jsonlDiffState === "diff" &&
-                (trimmed === FENCE_CLOSE || trimmed === "````")
-              ) {
-                try {
-                  const specJson = JSON.stringify(currentSpec, null, 2);
-                  const patched = applyUnifiedDiff(
-                    specJson,
-                    jsonlDiffAccumulated,
-                  );
-                  if (typeof patched === "string") {
-                    const parsed = JSON.parse(patched);
-                    if (parsed && typeof parsed === "object") {
-                      const patches = diffToPatches(
-                        currentSpec as unknown as Record<string, unknown>,
-                        parsed as Record<string, unknown>,
-                      );
-                      for (const patch of patches) {
-                        currentSpec = applySpecPatch(currentSpec, patch);
-                      }
-                      setSpec({ ...currentSpec });
-                    }
-                  }
-                } catch {
-                  // Diff apply failed
-                }
-                jsonlDiffState = "outside";
-                continue;
-              }
-
-              if (jsonlDiffState === "diff") {
-                jsonlDiffAccumulated += line + "\n";
-                rawLinesRef.current.push(line);
-                continue;
-              }
-
-              // Standard JSONL line parsing
-              const result = parseLine(trimmed);
-              if (!result) continue;
-              if (result.type === "usage") {
-                setUsage(result.usage);
-              } else if (result.type === "json-edit") {
-                const merged = deepMergeSpec(
-                  currentSpec as unknown as Record<string, unknown>,
-                  result.mergeObj,
-                );
-                const patches = diffToPatches(
-                  currentSpec as unknown as Record<string, unknown>,
-                  merged,
-                );
-                for (const patch of patches) {
-                  currentSpec = applySpecPatch(currentSpec, patch);
-                }
-                rawLinesRef.current.push(trimmed);
-                setSpec({ ...currentSpec });
-              } else {
-                rawLinesRef.current.push(trimmed);
-                currentSpec = applySpecPatch(currentSpec, result.patch);
-                setSpec({ ...currentSpec });
-              }
-            }
-            setRawLines([...rawLinesRef.current]);
-          }
-
-          if (buffer.trim()) {
-            const trimmed = buffer.trim();
-            const result = parseLine(trimmed);
-            if (result) {
-              if (result.type === "usage") {
-                setUsage(result.usage);
-              } else if (result.type === "json-edit") {
-                const merged = deepMergeSpec(
-                  currentSpec as unknown as Record<string, unknown>,
-                  result.mergeObj,
-                );
-                const patches = diffToPatches(
-                  currentSpec as unknown as Record<string, unknown>,
-                  merged,
-                );
-                for (const patch of patches) {
-                  currentSpec = applySpecPatch(currentSpec, patch);
-                }
-                rawLinesRef.current.push(trimmed);
-                setSpec({ ...currentSpec });
-              } else {
-                rawLinesRef.current.push(trimmed);
-                currentSpec = applySpecPatch(currentSpec, result.patch);
-                setSpec({ ...currentSpec });
-              }
-            }
-          }
-        }
-
-        onCompleteRef.current?.(currentSpec);
-      } catch (err) {
-        if ((err as Error).name === "AbortError") return;
-        const error = err instanceof Error ? err : new Error(String(err));
-        setError(error);
-        onErrorRef.current?.(error);
-      } finally {
-        setIsStreaming(false);
-      }
-    },
-    [api],
-  );
-
-  useEffect(() => {
-    return () => {
-      abortControllerRef.current?.abort();
-    };
-  }, []);
-
-  return { spec, isStreaming, error, usage, rawLines, send, clear };
-}

apps/web/mdx-components.tsx

@@ -35,26 +35,16 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     h2: ({ children }: { children?: React.ReactNode }) => {
       const id = slugify(extractText(children));
       return (
-        <h2 id={id} className="group text-xl font-semibold mt-12 mb-4">
-          <a href={`#${id}`} className="no-underline hover:no-underline">
-            {children}
-            <span className="ml-2 text-muted-foreground/0 group-hover:text-muted-foreground transition-colors select-none">
-              #
-            </span>
-          </a>
+        <h2 id={id} className="text-xl font-semibold mt-12 mb-4">
+          {children}
         </h2>
       );
     },
     h3: ({ children }: { children?: React.ReactNode }) => {
       const id = slugify(extractText(children));
       return (
-        <h3 id={id} className="group text-lg font-medium mt-8 mb-3">
-          <a href={`#${id}`} className="no-underline hover:no-underline">
-            {children}
-            <span className="ml-2 text-muted-foreground/0 group-hover:text-muted-foreground transition-colors select-none">
-              #
-            </span>
-          </a>
+        <h3 id={id} className="text-lg font-medium mt-8 mb-3">
+          {children}
         </h3>
       );
     },

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.1.8",
+  "version": "0.1.4",
   "type": "module",
   "private": true,
   "license": "Apache-2.0",
@@ -18,7 +18,6 @@
     "@json-render/codegen": "workspace:*",
     "@json-render/core": "workspace:*",
     "@json-render/react": "workspace:*",
-    "@json-render/yaml": "workspace:*",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/mdx": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
@@ -35,9 +34,9 @@
     "bash-tool": "1.3.14",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "diff": "^8.0.3",
     "embla-carousel-react": "^8.6.0",
     "geist": "1.7.0",
+    "just-bash": "2.9.6",
     "lucide-react": "^0.562.0",
     "next": "16.1.1",
     "next-themes": "^0.4.6",
@@ -52,7 +51,6 @@
     "tailwind-merge": "^3.4.0",
     "unist-util-visit": "5.1.0",
     "vaul": "^1.1.2",
-    "yaml": "^2.8.2",
     "zod": "^4.3.6"
   },
   "devDependencies": {

examples/chat/.env.example

@@ -1,15 +0,0 @@
-# Vercel AI Gateway
-# Automatically authenticated when deployed on Vercel
-# For local development, get your key from https://vercel.com/ai-gateway
-AI_GATEWAY_API_KEY=
-
-# AI Model Configuration
-# Default: anthropic/claude-haiku-4.5
-AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5
-
-# Rate Limiting (Upstash Redis)
-# Optional - rate limiting is disabled when these are not set
-KV_REST_API_URL=
-KV_REST_API_TOKEN=
-RATE_LIMIT_PER_MINUTE=10
-RATE_LIMIT_PER_DAY=100

examples/chat/CHANGELOG.md

@@ -1,41 +1,5 @@
 # example-chat
 
-## 0.1.8
-
-### Patch Changes
-
-- Updated dependencies [a8afd8b]
-  - @json-render/core@0.14.0
-  - @json-render/react@0.14.0
-  - @json-render/shadcn@0.14.0
-
-## 0.1.7
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/react@0.13.0
-  - @json-render/shadcn@0.13.0
-
-## 0.1.6
-
-### Patch Changes
-
-- Updated dependencies [54a1ecf]
-  - @json-render/core@0.12.1
-  - @json-render/react@0.12.1
-  - @json-render/shadcn@0.12.1
-
-## 0.1.5
-
-### Patch Changes
-
-- Updated dependencies [63c339b]
-  - @json-render/core@0.12.0
-  - @json-render/react@0.12.0
-  - @json-render/shadcn@0.12.0
-
 ## 0.1.4
 
 ### Patch Changes

examples/chat/app/api/generate/route.ts

@@ -1,5 +1,4 @@
 import { agent } from "@/lib/agent";
-import { minuteRateLimit, dailyRateLimit } from "@/lib/rate-limit";
 import {
   convertToModelMessages,
   createUIMessageStream,
@@ -7,35 +6,10 @@ import {
   type UIMessage,
 } from "ai";
 import { pipeJsonRender } from "@json-render/core";
-import { headers } from "next/headers";
 
 export const maxDuration = 60;
 
 export async function POST(req: Request) {
-  const headersList = await headers();
-  const ip = headersList.get("x-forwarded-for")?.split(",")[0] ?? "anonymous";
-
-  const [minuteResult, dailyResult] = await Promise.all([
-    minuteRateLimit.limit(ip),
-    dailyRateLimit.limit(ip),
-  ]);
-
-  if (!minuteResult.success || !dailyResult.success) {
-    const isMinuteLimit = !minuteResult.success;
-    return new Response(
-      JSON.stringify({
-        error: "Rate limit exceeded",
-        message: isMinuteLimit
-          ? "Too many requests. Please wait a moment before trying again."
-          : "Daily limit reached. Please try again tomorrow.",
-      }),
-      {
-        status: 429,
-        headers: { "Content-Type": "application/json" },
-      },
-    );
-  }
-
   const body = await req.json();
   const uiMessages: UIMessage[] = body.messages;
 

examples/chat/lib/agent.ts

@@ -130,7 +130,7 @@ When the user asks for a quiz, test, or Q&A, build an interactive experience:
 4. You can also add a final score section that becomes visible when all questions are submitted.
 
 ${explorerCatalog.prompt({
-  mode: "inline",
+  mode: "chat",
   customRules: [
     "NEVER use viewport height classes (min-h-screen, h-screen) — the UI renders inside a fixed-size container.",
     "Prefer Grid with columns='2' or columns='3' for side-by-side layouts.",

examples/chat/lib/rate-limit.ts

@@ -1,57 +0,0 @@
-import { Ratelimit } from "@upstash/ratelimit";
-import { Redis } from "@upstash/redis";
-
-// Lazy initialization to avoid errors when Redis env vars are not configured
-let _minuteRateLimit: Ratelimit | null = null;
-let _dailyRateLimit: Ratelimit | null = null;
-
-function getRedis(): Redis | null {
-  const url = process.env.KV_REST_API_URL;
-  const token = process.env.KV_REST_API_TOKEN;
-
-  if (!url || !token) {
-    return null;
-  }
-
-  return new Redis({ url, token });
-}
-
-// No-op rate limiter for when Redis is not configured
-const noopRateLimiter = {
-  limit: async () => ({ success: true, limit: 0, remaining: 0, reset: 0 }),
-};
-
-const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
-const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
-
-// Requests per minute (sliding window)
-export const minuteRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_minuteRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _minuteRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.slidingWindow(MINUTE_LIMIT, "1 m"),
-        prefix: "ratelimit:chat:minute",
-      });
-    }
-    return _minuteRateLimit.limit(identifier);
-  },
-};
-
-// Requests per day (fixed window)
-export const dailyRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_dailyRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _dailyRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.fixedWindow(DAILY_LIMIT, "1 d"),
-        prefix: "ratelimit:chat:daily",
-      });
-    }
-    return _dailyRateLimit.limit(identifier);
-  },
-};

examples/chat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-chat",
-  "version": "0.1.8",
+  "version": "0.1.4",
   "type": "module",
   "private": true,
   "scripts": {
@@ -34,8 +34,6 @@
     "streamdown": "^2.2.0",
     "tailwind-merge": "^3.4.0",
     "three": "^0.182.0",
-    "@upstash/ratelimit": "^2.0.8",
-    "@upstash/redis": "^1.37.0",
     "zod": "4.3.6"
   },
   "devDependencies": {

examples/dashboard/.env.example

@@ -4,10 +4,3 @@ DATABASE_URL=postgresql://postgres:postgres@localhost:5432/json_render_dashboard
 # AI (optional - for UI generation)
 AI_GATEWAY_API_KEY=
 AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5
-
-# Rate Limiting (Upstash Redis)
-# Optional - rate limiting is disabled when these are not set
-KV_REST_API_URL=
-KV_REST_API_TOKEN=
-RATE_LIMIT_PER_MINUTE=10
-RATE_LIMIT_PER_DAY=100

examples/dashboard/CHANGELOG.md

@@ -1,41 +1,5 @@
 # example-dashboard
 
-## 0.1.8
-
-### Patch Changes
-
-- Updated dependencies [a8afd8b]
-  - @json-render/core@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

examples/dashboard/app/api/generate/route.ts

@@ -1,8 +1,6 @@
 import { streamText } from "ai";
 import { buildUserPrompt } from "@json-render/core";
 import { dashboardCatalog } from "@/lib/render/catalog";
-import { minuteRateLimit, dailyRateLimit } from "@/lib/rate-limit";
-import { headers } from "next/headers";
 
 export const maxDuration = 30;
 
@@ -11,30 +9,6 @@ const SYSTEM_PROMPT = dashboardCatalog.prompt();
 const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
 
 export async function POST(req: Request) {
-  const headersList = await headers();
-  const ip = headersList.get("x-forwarded-for")?.split(",")[0] ?? "anonymous";
-
-  const [minuteResult, dailyResult] = await Promise.all([
-    minuteRateLimit.limit(ip),
-    dailyRateLimit.limit(ip),
-  ]);
-
-  if (!minuteResult.success || !dailyResult.success) {
-    const isMinuteLimit = !minuteResult.success;
-    return new Response(
-      JSON.stringify({
-        error: "Rate limit exceeded",
-        message: isMinuteLimit
-          ? "Too many requests. Please wait a moment before trying again."
-          : "Daily limit reached. Please try again tomorrow.",
-      }),
-      {
-        status: 429,
-        headers: { "Content-Type": "application/json" },
-      },
-    );
-  }
-
   const { prompt, context } = await req.json();
 
   const userPrompt = buildUserPrompt({

examples/dashboard/lib/rate-limit.ts

@@ -1,57 +0,0 @@
-import { Ratelimit } from "@upstash/ratelimit";
-import { Redis } from "@upstash/redis";
-
-// Lazy initialization to avoid errors when Redis env vars are not configured
-let _minuteRateLimit: Ratelimit | null = null;
-let _dailyRateLimit: Ratelimit | null = null;
-
-function getRedis(): Redis | null {
-  const url = process.env.KV_REST_API_URL;
-  const token = process.env.KV_REST_API_TOKEN;
-
-  if (!url || !token) {
-    return null;
-  }
-
-  return new Redis({ url, token });
-}
-
-// No-op rate limiter for when Redis is not configured
-const noopRateLimiter = {
-  limit: async () => ({ success: true, limit: 0, remaining: 0, reset: 0 }),
-};
-
-const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
-const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
-
-// Requests per minute (sliding window)
-export const minuteRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_minuteRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _minuteRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.slidingWindow(MINUTE_LIMIT, "1 m"),
-        prefix: "ratelimit:dashboard:minute",
-      });
-    }
-    return _minuteRateLimit.limit(identifier);
-  },
-};
-
-// Requests per day (fixed window)
-export const dailyRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_dailyRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _dailyRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.fixedWindow(DAILY_LIMIT, "1 d"),
-        prefix: "ratelimit:dashboard:daily",
-      });
-    }
-    return _dailyRateLimit.limit(identifier);
-  },
-};

examples/dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-dashboard",
-  "version": "0.1.8",
+  "version": "0.1.4",
   "type": "module",
   "private": true,
   "scripts": {
@@ -40,8 +40,6 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "vaul": "^1.1.2",
-    "@upstash/ratelimit": "^2.0.8",
-    "@upstash/redis": "^1.37.0",
     "zod": "^4.3.6"
   },
   "devDependencies": {

examples/image/.env.example

@@ -1,15 +0,0 @@
-# Vercel AI Gateway
-# Automatically authenticated when deployed on Vercel
-# For local development, get your key from https://vercel.com/ai-gateway
-AI_GATEWAY_API_KEY=
-
-# AI Model Configuration
-# Default: anthropic/claude-haiku-4.5
-AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5
-
-# Rate Limiting (Upstash Redis)
-# Optional - rate limiting is disabled when these are not set
-KV_REST_API_URL=
-KV_REST_API_TOKEN=
-RATE_LIMIT_PER_MINUTE=10
-RATE_LIMIT_PER_DAY=100

examples/image/CHANGELOG.md

@@ -1,37 +1,5 @@
 # example-image
 
-## 0.1.5
-
-### Patch Changes
-
-- Updated dependencies [a8afd8b]
-  - @json-render/core@0.14.0
-  - @json-render/image@0.14.0
-
-## 0.1.4
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/image@0.13.0
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [54a1ecf]
-  - @json-render/core@0.12.1
-  - @json-render/image@0.12.1
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies [63c339b]
-  - @json-render/core@0.12.0
-  - @json-render/image@0.12.0
-
 ## 0.1.1
 
 ### Patch Changes

examples/image/app/api/generate/route.ts

@@ -1,8 +1,6 @@
 import { streamText } from "ai";
 import { buildUserPrompt, type Spec } from "@json-render/core";
 import { imageCatalog } from "@/lib/catalog";
-import { minuteRateLimit, dailyRateLimit } from "@/lib/rate-limit";
-import { headers } from "next/headers";
 
 export const maxDuration = 60;
 
@@ -11,30 +9,6 @@ const SYSTEM_PROMPT = imageCatalog.prompt();
 const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
 
 export async function POST(req: Request) {
-  const headersList = await headers();
-  const ip = headersList.get("x-forwarded-for")?.split(",")[0] ?? "anonymous";
-
-  const [minuteResult, dailyResult] = await Promise.all([
-    minuteRateLimit.limit(ip),
-    dailyRateLimit.limit(ip),
-  ]);
-
-  if (!minuteResult.success || !dailyResult.success) {
-    const isMinuteLimit = !minuteResult.success;
-    return new Response(
-      JSON.stringify({
-        error: "Rate limit exceeded",
-        message: isMinuteLimit
-          ? "Too many requests. Please wait a moment before trying again."
-          : "Daily limit reached. Please try again tomorrow.",
-      }),
-      {
-        status: 429,
-        headers: { "Content-Type": "application/json" },
-      },
-    );
-  }
-
   const { prompt, startingSpec } = (await req.json()) as {
     prompt: string;
     startingSpec?: Spec | null;

examples/image/lib/rate-limit.ts

@@ -1,57 +0,0 @@
-import { Ratelimit } from "@upstash/ratelimit";
-import { Redis } from "@upstash/redis";
-
-// Lazy initialization to avoid errors when Redis env vars are not configured
-let _minuteRateLimit: Ratelimit | null = null;
-let _dailyRateLimit: Ratelimit | null = null;
-
-function getRedis(): Redis | null {
-  const url = process.env.KV_REST_API_URL;
-  const token = process.env.KV_REST_API_TOKEN;
-
-  if (!url || !token) {
-    return null;
-  }
-
-  return new Redis({ url, token });
-}
-
-// No-op rate limiter for when Redis is not configured
-const noopRateLimiter = {
-  limit: async () => ({ success: true, limit: 0, remaining: 0, reset: 0 }),
-};
-
-const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
-const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
-
-// Requests per minute (sliding window)
-export const minuteRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_minuteRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _minuteRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.slidingWindow(MINUTE_LIMIT, "1 m"),
-        prefix: "ratelimit:image:minute",
-      });
-    }
-    return _minuteRateLimit.limit(identifier);
-  },
-};
-
-// Requests per day (fixed window)
-export const dailyRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_dailyRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _dailyRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.fixedWindow(DAILY_LIMIT, "1 d"),
-        prefix: "ratelimit:image:daily",
-      });
-    }
-    return _dailyRateLimit.limit(identifier);
-  },
-};

examples/image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-image",
-  "version": "0.1.5",
+  "version": "0.1.1",
   "type": "module",
   "private": true,
   "scripts": {
@@ -28,8 +28,6 @@
     "react-resizable-panels": "^4.4.1",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.1.18",
-    "@upstash/ratelimit": "^2.0.8",
-    "@upstash/redis": "^1.37.0",
     "zod": "4.3.6"
   },
   "devDependencies": {

examples/mcp/CHANGELOG.md

@@ -1,41 +0,0 @@
-# example-mcp
-
-## 0.1.4
-
-### Patch Changes
-
-- Updated dependencies [a8afd8b]
-  - @json-render/core@0.14.0
-  - @json-render/mcp@0.14.0
-  - @json-render/react@0.14.0
-  - @json-render/shadcn@0.14.0
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/mcp@0.13.0
-  - @json-render/react@0.13.0
-  - @json-render/shadcn@0.13.0
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies [54a1ecf]
-  - @json-render/core@0.12.1
-  - @json-render/mcp@0.12.1
-  - @json-render/react@0.12.1
-  - @json-render/shadcn@0.12.1
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [63c339b]
-  - @json-render/core@0.12.0
-  - @json-render/mcp@0.12.0
-  - @json-render/react@0.12.0
-  - @json-render/shadcn@0.12.0

examples/mcp/README.md

@@ -1,63 +0,0 @@
-# MCP App Example
-
-A json-render MCP App that serves interactive shadcn/ui-based UIs directly inside Claude, ChatGPT, Cursor, VS Code, and other MCP-capable clients.
-
-## Setup
-
-```bash
-pnpm install
-pnpm build
-```
-
-## Usage
-
-### With Cursor
-
-Add to `.cursor/mcp.json`:
-
-```json
-{
-  "mcpServers": {
-    "json-render": {
-      "command": "npx",
-      "args": ["tsx", "examples/mcp/server.ts", "--stdio"]
-    }
-  }
-}
-```
-
-### With Claude Desktop
-
-Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:
-
-```json
-{
-  "mcpServers": {
-    "json-render": {
-      "command": "npx",
-      "args": ["tsx", "/absolute/path/to/examples/mcp/server.ts", "--stdio"]
-    }
-  }
-}
-```
-
-### HTTP Transport
-
-```bash
-pnpm start
-# Server listens on http://localhost:3001/mcp
-```
-
-### Stdio Transport
-
-```bash
-pnpm start:stdio
-```
-
-## How It Works
-
-1. The Vite build bundles the React app (with shadcn components and `useJsonRenderApp` hook) into a single self-contained HTML file
-2. The MCP server registers a `render-ui` tool with the catalog prompt as its description
-3. When the LLM calls the tool, it generates a json-render spec constrained to the catalog
-4. The host renders the bundled HTML in a sandboxed iframe
-5. The iframe receives the spec via the MCP Apps protocol and renders it with json-render

examples/mcp/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob:; img-src * data: blob:; font-src * data:; connect-src *; media-src *;" />
-  <title>json-render MCP App</title>
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-</html>

examples/mcp/package.json

@@ -1,34 +0,0 @@
-{
-  "name": "example-mcp",
-  "version": "0.1.4",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "build": "vite build",
-    "start": "tsx server.ts",
-    "start:stdio": "tsx server.ts --stdio",
-    "dev": "tsx watch server.ts"
-  },
-  "dependencies": {
-    "@json-render/core": "workspace:*",
-    "@json-render/mcp": "workspace:*",
-    "@json-render/react": "workspace:*",
-    "@json-render/shadcn": "workspace:*",
-    "@modelcontextprotocol/ext-apps": "^1.2.0",
-    "@modelcontextprotocol/sdk": "^1.27.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "zod": "^4.3.6"
-  },
-  "devDependencies": {
-    "@types/react": "19.2.3",
-    "@types/react-dom": "19.2.3",
-    "@tailwindcss/vite": "^4.2.1",
-    "@vitejs/plugin-react": "^5.1.4",
-    "tailwindcss": "^4.2.1",
-    "tsx": "^4.21.0",
-    "typescript": "^5.7.2",
-    "vite": "^6.3.5",
-    "vite-plugin-singlefile": "^2.3.0"
-  }
-}

examples/mcp/server.ts

@@ -1,86 +0,0 @@
-import { createMcpApp } from "@json-render/mcp";
-import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
-import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
-import { createMcpExpressApp } from "@modelcontextprotocol/sdk/server/express.js";
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { catalog } from "./src/catalog.js";
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-function loadHtml(): string {
-  const htmlPath = path.join(__dirname, "dist", "index.html");
-  if (!fs.existsSync(htmlPath)) {
-    throw new Error(
-      `Built HTML not found at ${htmlPath}. Run 'pnpm build' first.`,
-    );
-  }
-  return fs.readFileSync(htmlPath, "utf-8");
-}
-
-async function startStdio() {
-  const html = loadHtml();
-  const server = await createMcpApp({
-    name: "json-render Example",
-    version: "1.0.0",
-    catalog,
-    html,
-  });
-  await server.connect(new StdioServerTransport());
-}
-
-async function startHttp() {
-  const html = loadHtml();
-  const port = parseInt(process.env.PORT ?? "3001", 10);
-
-  const expressApp = createMcpExpressApp({ host: "0.0.0.0" });
-
-  expressApp.all("/mcp", async (req, res) => {
-    const server = await createMcpApp({
-      name: "json-render Example",
-      version: "1.0.0",
-      catalog,
-      html,
-    });
-
-    const transport = new StreamableHTTPServerTransport({
-      sessionIdGenerator: undefined,
-    });
-
-    res.on("close", () => {
-      transport.close().catch(() => {});
-      server.close().catch(() => {});
-    });
-
-    try {
-      await server.connect(transport);
-      await transport.handleRequest(req, res, req.body);
-    } catch (error) {
-      console.error("MCP error:", error);
-      if (!res.headersSent) {
-        res.status(500).json({
-          jsonrpc: "2.0",
-          error: { code: -32603, message: "Internal server error" },
-          id: null,
-        });
-      }
-    }
-  });
-
-  expressApp.listen(port, () => {
-    console.log(`MCP server listening on http://localhost:${port}/mcp`);
-  });
-}
-
-if (process.argv.includes("--stdio")) {
-  startStdio().catch((e) => {
-    console.error(e);
-    process.exit(1);
-  });
-} else {
-  startHttp().catch((e) => {
-    console.error(e);
-    process.exit(1);
-  });
-}

examples/mcp/src/catalog.ts

@@ -1,10 +0,0 @@
-import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/react/schema";
-import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
-
-export const catalog = defineCatalog(schema, {
-  components: {
-    ...shadcnComponentDefinitions,
-  },
-  actions: {},
-});

examples/mcp/src/globals.css

@@ -1,106 +0,0 @@
-@import "tailwindcss";
-@source "../../../packages/shadcn/src";
-@source "../../../packages/react/src";
-
-@custom-variant dark (&:is([data-theme="dark"] *));
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-}
-
-[data-theme="dark"] {
-  --background: var(--color-background-secondary, var(--vscode-editor-background, oklch(0.145 0 0)));
-  --foreground: var(--color-text-primary, var(--vscode-foreground, oklch(0.985 0 0)));
-  --card: var(--color-background-primary, var(--vscode-sideBar-background, oklch(0.205 0 0)));
-  --card-foreground: var(--color-text-primary, var(--vscode-foreground, oklch(0.985 0 0)));
-  --popover: var(--color-background-primary, var(--vscode-sideBar-background, oklch(0.205 0 0)));
-  --popover-foreground: var(--color-text-primary, var(--vscode-foreground, oklch(0.985 0 0)));
-  --primary: var(--color-text-primary, var(--vscode-foreground, oklch(0.922 0 0)));
-  --primary-foreground: var(--color-background-primary, var(--vscode-sideBar-background, oklch(0.205 0 0)));
-  --secondary: var(--color-background-tertiary, var(--vscode-activityBar-background, oklch(0.269 0 0)));
-  --secondary-foreground: var(--color-text-primary, var(--vscode-foreground, oklch(0.985 0 0)));
-  --muted: var(--color-background-tertiary, var(--vscode-activityBar-background, oklch(0.269 0 0)));
-  --muted-foreground: var(--color-text-secondary, var(--vscode-descriptionForeground, oklch(0.708 0 0)));
-  --accent: var(--color-background-tertiary, var(--vscode-activityBar-background, oklch(0.269 0 0)));
-  --accent-foreground: var(--color-text-primary, var(--vscode-foreground, oklch(0.985 0 0)));
-  --destructive: var(--color-text-danger, var(--vscode-errorForeground, oklch(0.704 0.191 22.216)));
-  --border: var(--color-border-primary, var(--vscode-widget-border, oklch(1 0 0 / 10%)));
-  --input: var(--color-border-secondary, var(--vscode-editorWidget-border, oklch(1 0 0 / 15%)));
-  --ring: var(--color-ring-primary, var(--vscode-focusBorder, oklch(0.556 0 0)));
-}
-
-* {
-  box-sizing: border-box;
-  border-color: var(--color-border);
-}
-
-html, body, #root {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  background-color: var(--color-background);
-  color: var(--color-foreground);
-  font-family: var(--vscode-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply text-foreground;
-    background-color: var(--color-background) !important;
-  }
-}
-
-button {
-  cursor: pointer;
-}

examples/mcp/src/main.tsx

@@ -1,269 +0,0 @@
-import "./globals.css";
-import {
-  Component,
-  useState,
-  useEffect,
-  useCallback,
-  type ReactNode,
-} from "react";
-import { createRoot } from "react-dom/client";
-import { App as McpApp } from "@modelcontextprotocol/ext-apps";
-import { JSONUIProvider, Renderer, defineRegistry } from "@json-render/react";
-import { shadcnComponents } from "@json-render/shadcn";
-import type { Spec } from "@json-render/core";
-import { catalog } from "./catalog";
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    ...shadcnComponents,
-    Avatar: ({ props }: { props: Record<string, unknown> }) => {
-      const name = (props.name as string) || (props.alt as string) || "?";
-      const src = props.src as string | undefined;
-      const initials = name
-        .split(" ")
-        .map((n) => n[0])
-        .join("")
-        .slice(0, 2)
-        .toUpperCase();
-      const size = props.size === "lg" ? 48 : props.size === "sm" ? 32 : 40;
-      const [imgFailed, setImgFailed] = useState(false);
-      const onError = useCallback(() => setImgFailed(true), []);
-      const showImg = src && !imgFailed;
-
-      return (
-        <div
-          style={{
-            width: size,
-            height: size,
-            borderRadius: "50%",
-            overflow: "hidden",
-            backgroundColor: "var(--color-background-tertiary, #27272a)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            flexShrink: 0,
-          }}
-        >
-          {showImg ? (
-            <img
-              src={src}
-              alt={name}
-              referrerPolicy="no-referrer"
-              crossOrigin="anonymous"
-              width={size}
-              height={size}
-              onError={onError}
-              style={{ objectFit: "cover", width: size, height: size }}
-            />
-          ) : (
-            <span
-              style={{
-                fontSize: size * 0.4,
-                color: "var(--color-text-secondary, #a1a1aa)",
-              }}
-            >
-              {initials}
-            </span>
-          )}
-        </div>
-      );
-    },
-  },
-});
-
-class ErrorBoundary extends Component<
-  { children: ReactNode },
-  { error: Error | null }
-> {
-  state = { error: null as Error | null };
-  static getDerivedStateFromError(error: Error) {
-    return { error };
-  }
-  render() {
-    if (this.state.error) {
-      return (
-        <div
-          style={{
-            padding: 16,
-            color: "#dc2626",
-            fontFamily: "monospace",
-            fontSize: 13,
-          }}
-        >
-          Error: {this.state.error.message}
-        </div>
-      );
-    }
-    return this.props.children;
-  }
-}
-
-function forceFullWidth(spec: Spec): Spec {
-  if (!spec.elements) return spec;
-  const elements = { ...spec.elements };
-  for (const [key, el] of Object.entries(elements)) {
-    if (el.type === "Card" && el.props) {
-      elements[key] = {
-        ...el,
-        props: { ...el.props, maxWidth: "full", centered: false },
-      };
-    }
-  }
-  return { ...spec, elements };
-}
-
-function parseSpec(
-  result: { content?: Array<{ type: string; text?: string }> } | undefined,
-): Spec | null {
-  const text = result?.content?.find((c) => c.type === "text")?.text;
-  if (!text) return null;
-  try {
-    return forceFullWidth(JSON.parse(text) as Spec);
-  } catch {
-    return null;
-  }
-}
-
-function applyHostContext(ctx: {
-  theme?: string;
-  styles?: { variables?: Record<string, string> };
-}) {
-  if (ctx.theme) {
-    document.documentElement.setAttribute("data-theme", ctx.theme);
-    document.documentElement.style.colorScheme = ctx.theme;
-  }
-  if (ctx.styles?.variables) {
-    const root = document.documentElement;
-    for (const [key, value] of Object.entries(ctx.styles.variables)) {
-      root.style.setProperty(key, value);
-    }
-  }
-}
-
-function McpAppView() {
-  const [spec, setSpec] = useState<Spec | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let specReceived = false;
-
-    function handleSpec(s: Spec) {
-      if (specReceived) return;
-      specReceived = true;
-      setSpec(s);
-    }
-
-    function onMessage(event: MessageEvent) {
-      if (specReceived) return;
-      const data = event.data as Record<string, unknown> | undefined;
-      if (!data || typeof data !== "object") return;
-      const method = data.method as string | undefined;
-      const params = data.params as Record<string, unknown> | undefined;
-
-      // Cursor sends the spec via tool-input
-      if (method === "ui/notifications/tool-input" && params?.arguments) {
-        const args = params.arguments as Record<string, unknown>;
-        const rawSpec = args.spec;
-        if (
-          rawSpec &&
-          typeof rawSpec === "object" &&
-          "root" in rawSpec &&
-          "elements" in rawSpec
-        ) {
-          handleSpec(forceFullWidth(rawSpec as Spec));
-        }
-      }
-    }
-    window.addEventListener("message", onMessage);
-
-    const app = new McpApp({ name: "json-render", version: "1.0.0" });
-
-    app.ontoolresult = (result) => {
-      const parsed = parseSpec(
-        result as { content?: Array<{ type: string; text?: string }> },
-      );
-      if (parsed) handleSpec(parsed);
-    };
-
-    app.onhostcontextchanged = (ctx) =>
-      applyHostContext(ctx as Parameters<typeof applyHostContext>[0]);
-
-    app.onerror = (err: unknown) => {
-      setError(err instanceof Error ? err.message : String(err));
-    };
-
-    app
-      .connect()
-      .then(() => {
-        const ctx = app.getHostContext?.();
-        if (ctx)
-          applyHostContext(ctx as Parameters<typeof applyHostContext>[0]);
-
-        // Fallback: if host didn't provide theme, detect via media query
-        if (!ctx || !(ctx as Record<string, unknown>).theme) {
-          const prefersDark = window.matchMedia(
-            "(prefers-color-scheme: dark)",
-          ).matches;
-          document.documentElement.setAttribute(
-            "data-theme",
-            prefersDark ? "dark" : "light",
-          );
-          document.documentElement.style.colorScheme = prefersDark
-            ? "dark"
-            : "light";
-        }
-      })
-      .catch((err: unknown) =>
-        setError(err instanceof Error ? err.message : String(err)),
-      );
-
-    return () => {
-      window.removeEventListener("message", onMessage);
-      app.close().catch(() => {});
-    };
-  }, []);
-
-  if (error) {
-    return (
-      <div
-        style={{
-          padding: 16,
-          color: "#dc2626",
-          fontFamily: "monospace",
-          fontSize: 13,
-        }}
-      >
-        {error}
-      </div>
-    );
-  }
-
-  if (!spec) {
-    return (
-      <div
-        style={{
-          padding: 16,
-          color: "#6b7280",
-          fontFamily: "sans-serif",
-          fontSize: 14,
-        }}
-      >
-        Loading...
-      </div>
-    );
-  }
-
-  return (
-    <JSONUIProvider registry={registry} initialState={spec.state ?? {}}>
-      <div className="w-full">
-        <Renderer spec={spec} registry={registry} />
-      </div>
-    </JSONUIProvider>
-  );
-}
-
-createRoot(document.getElementById("root")!).render(
-  <ErrorBoundary>
-    <McpAppView />
-  </ErrorBoundary>,
-);

examples/mcp/src/mcp-app-view.tsx

@@ -1,89 +0,0 @@
-import { JSONUIProvider, Renderer } from "@json-render/react";
-import { shadcnComponents } from "@json-render/shadcn";
-import { defineRegistry } from "@json-render/react";
-import { useJsonRenderApp } from "@json-render/mcp/app";
-import { catalog } from "./catalog";
-import { useState, useEffect } from "react";
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    ...shadcnComponents,
-  },
-});
-
-const debugStyle = {
-  padding: 12,
-  fontFamily: "monospace",
-  fontSize: 12,
-  color: "#000",
-  background: "#fffbe6",
-  border: "1px solid #faad14",
-  borderRadius: 4,
-  margin: 8,
-  whiteSpace: "pre-wrap" as const,
-  wordBreak: "break-all" as const,
-};
-
-export function McpAppView() {
-  const [logs, setLogs] = useState<string[]>(["App mounted"]);
-
-  const addLog = (msg: string) => {
-    setLogs((prev) => [
-      ...prev,
-      `${new Date().toISOString().slice(11, 23)} ${msg}`,
-    ]);
-  };
-
-  const { spec, loading, connected, connecting, error } = useJsonRenderApp({
-    name: "json-render-mcp-example",
-    version: "1.0.0",
-  });
-
-  useEffect(() => {
-    addLog(
-      `State: connecting=${connecting} connected=${connected} error=${error?.message ?? "none"} loading=${loading} spec=${spec ? "yes" : "null"}`,
-    );
-  }, [connecting, connected, error, loading, spec]);
-
-  useEffect(() => {
-    if (spec) {
-      addLog(
-        `Spec received: root=${spec.root}, elements=${Object.keys(spec.elements ?? {}).join(",")}`,
-      );
-    }
-  }, [spec]);
-
-  if (error) {
-    return (
-      <div style={debugStyle}>
-        <div style={{ color: "#ef4444", fontWeight: "bold" }}>
-          Connection error: {error.message}
-        </div>
-        <div style={{ marginTop: 8 }}>{logs.join("\n")}</div>
-      </div>
-    );
-  }
-
-  if (!spec) {
-    return (
-      <div style={debugStyle}>
-        <div>
-          {connecting
-            ? "Connecting to host..."
-            : loading
-              ? "Waiting for UI spec..."
-              : "No spec received."}
-        </div>
-        <div style={{ marginTop: 8 }}>{logs.join("\n")}</div>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <JSONUIProvider registry={registry} initialState={spec.state ?? {}}>
-        <Renderer spec={spec} registry={registry} loading={loading} />
-      </JSONUIProvider>
-    </div>
-  );
-}

examples/mcp/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "verbatimModuleSyntax": true,
-    "noEmit": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "jsx": "react-jsx"
-  },
-  "include": ["src", "server.ts"]
-}

examples/mcp/vite.config.ts

@@ -1,18 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import { viteSingleFile } from "vite-plugin-singlefile";
-import tailwindcss from "@tailwindcss/vite";
-
-export default defineConfig({
-  plugins: [react(), tailwindcss(), viteSingleFile()],
-  resolve: {
-    dedupe: ["react", "react-dom"],
-  },
-  build: {
-    outDir: "dist",
-    emptyOutDir: false,
-    rollupOptions: {
-      input: "index.html",
-    },
-  },
-});

examples/no-ai/CHANGELOG.md

@@ -1,41 +1,5 @@
 # example-no-ai
 
-## 0.1.8
-
-### Patch Changes
-
-- Updated dependencies [a8afd8b]
-  - @json-render/core@0.14.0
-  - @json-render/react@0.14.0
-  - @json-render/shadcn@0.14.0
-
-## 0.1.7
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/react@0.13.0
-  - @json-render/shadcn@0.13.0
-
-## 0.1.6
-
-### Patch Changes
-
-- Updated dependencies [54a1ecf]
-  - @json-render/core@0.12.1
-  - @json-render/react@0.12.1
-  - @json-render/shadcn@0.12.1
-
-## 0.1.5
-
-### Patch Changes
-
-- Updated dependencies [63c339b]
-  - @json-render/core@0.12.0
-  - @json-render/react@0.12.0
-  - @json-render/shadcn@0.12.0
-
 ## 0.1.4
 
 ### Patch Changes

examples/no-ai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-no-ai",
-  "version": "0.1.8",
+  "version": "0.1.4",
   "type": "module",
   "private": true,
   "scripts": {

examples/react-email/.env.example

@@ -7,10 +7,3 @@ AI_GATEWAY_API_KEY=
 # Override the default model used for email generation
 # Default: anthropic/claude-haiku-4.5
 AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5
-
-# Rate Limiting (Upstash Redis)
-# Optional - rate limiting is disabled when these are not set
-KV_REST_API_URL=
-KV_REST_API_TOKEN=
-RATE_LIMIT_PER_MINUTE=10
-RATE_LIMIT_PER_DAY=100

examples/react-email/CHANGELOG.md

@@ -1,33 +0,0 @@
-# example-react-email
-
-## 0.1.4
-
-### Patch Changes
-
-- Updated dependencies [a8afd8b]
-  - @json-render/core@0.14.0
-  - @json-render/react-email@0.14.0
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/react-email@0.13.0
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies [54a1ecf]
-  - @json-render/core@0.12.1
-  - @json-render/react-email@0.12.1
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [63c339b]
-  - @json-render/core@0.12.0
-  - @json-render/react-email@0.12.0

examples/react-email/app/api/generate/route.ts

@@ -1,8 +1,6 @@
 import { streamText } from "ai";
 import { buildUserPrompt, type Spec } from "@json-render/core";
 import { emailCatalog } from "@/lib/catalog";
-import { minuteRateLimit, dailyRateLimit } from "@/lib/rate-limit";
-import { headers } from "next/headers";
 
 export const maxDuration = 60;
 
@@ -11,30 +9,6 @@ const SYSTEM_PROMPT = emailCatalog.prompt();
 const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
 
 export async function POST(req: Request) {
-  const headersList = await headers();
-  const ip = headersList.get("x-forwarded-for")?.split(",")[0] ?? "anonymous";
-
-  const [minuteResult, dailyResult] = await Promise.all([
-    minuteRateLimit.limit(ip),
-    dailyRateLimit.limit(ip),
-  ]);
-
-  if (!minuteResult.success || !dailyResult.success) {
-    const isMinuteLimit = !minuteResult.success;
-    return new Response(
-      JSON.stringify({
-        error: "Rate limit exceeded",
-        message: isMinuteLimit
-          ? "Too many requests. Please wait a moment before trying again."
-          : "Daily limit reached. Please try again tomorrow.",
-      }),
-      {
-        status: 429,
-        headers: { "Content-Type": "application/json" },
-      },
-    );
-  }
-
   const { prompt, startingSpec } = (await req.json()) as {
     prompt: string;
     startingSpec?: Spec | null;

examples/react-email/lib/rate-limit.ts

@@ -1,57 +0,0 @@
-import { Ratelimit } from "@upstash/ratelimit";
-import { Redis } from "@upstash/redis";
-
-// Lazy initialization to avoid errors when Redis env vars are not configured
-let _minuteRateLimit: Ratelimit | null = null;
-let _dailyRateLimit: Ratelimit | null = null;
-
-function getRedis(): Redis | null {
-  const url = process.env.KV_REST_API_URL;
-  const token = process.env.KV_REST_API_TOKEN;
-
-  if (!url || !token) {
-    return null;
-  }
-
-  return new Redis({ url, token });
-}
-
-// No-op rate limiter for when Redis is not configured
-const noopRateLimiter = {
-  limit: async () => ({ success: true, limit: 0, remaining: 0, reset: 0 }),
-};
-
-const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
-const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
-
-// Requests per minute (sliding window)
-export const minuteRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_minuteRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _minuteRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.slidingWindow(MINUTE_LIMIT, "1 m"),
-        prefix: "ratelimit:react-email:minute",
-      });
-    }
-    return _minuteRateLimit.limit(identifier);
-  },
-};
-
-// Requests per day (fixed window)
-export const dailyRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_dailyRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _dailyRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.fixedWindow(DAILY_LIMIT, "1 d"),
-        prefix: "ratelimit:react-email:daily",
-      });
-    }
-    return _dailyRateLimit.limit(identifier);
-  },
-};

examples/react-email/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-react-email",
-  "version": "0.1.4",
+  "version": "0.1.0",
   "type": "module",
   "private": true,
   "scripts": {
@@ -25,9 +25,7 @@
     "react-resizable-panels": "^4.4.1",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.1.18",
-    "@upstash/ratelimit": "^2.0.8",
-    "@upstash/redis": "^1.37.0",
-    "zod": "4.3.6"
+    "zod": "4.3.5"
   },
   "devDependencies": {
     "@internal/typescript-config": "workspace:*",

examples/react-native/CHANGELOG.md

@@ -1,37 +1,5 @@
 # example-react-native
 
-## 0.1.8
-
-### Patch Changes
-
-- Updated dependencies [a8afd8b]
-  - @json-render/core@0.14.0
-  - @json-render/react-native@0.14.0
-
-## 0.1.7
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/react-native@0.13.0
-
-## 0.1.6
-
-### Patch Changes
-
-- Updated dependencies [54a1ecf]
-  - @json-render/core@0.12.1
-  - @json-render/react-native@0.12.1
-
-## 0.1.5
-
-### Patch Changes
-
-- Updated dependencies [63c339b]
-  - @json-render/core@0.12.0
-  - @json-render/react-native@0.12.0
-
 ## 0.1.4
 
 ### Patch Changes

examples/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-react-native",
-  "version": "0.1.8",
+  "version": "0.1.4",
   "private": true,
   "main": "expo-router/entry",
   "scripts": {

examples/react-pdf/.env.example

@@ -3,10 +3,3 @@ AI_GATEWAY_API_KEY=
 
 # Optional: override the default model (default: anthropic/claude-haiku-4.5)
 # AI_GATEWAY_MODEL=openai/gpt-4o-mini
-
-# Rate Limiting (Upstash Redis)
-# Optional - rate limiting is disabled when these are not set
-KV_REST_API_URL=
-KV_REST_API_TOKEN=
-RATE_LIMIT_PER_MINUTE=10
-RATE_LIMIT_PER_DAY=100

examples/react-pdf/CHANGELOG.md

@@ -1,37 +1,5 @@
 # example-react-pdf
 
-## 0.1.8
-
-### Patch Changes
-
-- Updated dependencies [a8afd8b]
-  - @json-render/core@0.14.0
-  - @json-render/react-pdf@0.14.0
-
-## 0.1.7
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/react-pdf@0.13.0
-
-## 0.1.6
-
-### Patch Changes
-
-- Updated dependencies [54a1ecf]
-  - @json-render/core@0.12.1
-  - @json-render/react-pdf@0.12.1
-
-## 0.1.5
-
-### Patch Changes
-
-- Updated dependencies [63c339b]
-  - @json-render/core@0.12.0
-  - @json-render/react-pdf@0.12.0
-
 ## 0.1.4
 
 ### Patch Changes

examples/react-pdf/app/api/generate/route.ts

@@ -2,8 +2,6 @@ import { streamText } from "ai";
 import { gateway } from "@ai-sdk/gateway";
 import { buildUserPrompt, type Spec } from "@json-render/core";
 import { pdfCatalog } from "@/lib/catalog";
-import { minuteRateLimit, dailyRateLimit } from "@/lib/rate-limit";
-import { headers } from "next/headers";
 
 export const maxDuration = 60;
 
@@ -12,30 +10,6 @@ const SYSTEM_PROMPT = pdfCatalog.prompt();
 const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
 
 export async function POST(req: Request) {
-  const headersList = await headers();
-  const ip = headersList.get("x-forwarded-for")?.split(",")[0] ?? "anonymous";
-
-  const [minuteResult, dailyResult] = await Promise.all([
-    minuteRateLimit.limit(ip),
-    dailyRateLimit.limit(ip),
-  ]);
-
-  if (!minuteResult.success || !dailyResult.success) {
-    const isMinuteLimit = !minuteResult.success;
-    return new Response(
-      JSON.stringify({
-        error: "Rate limit exceeded",
-        message: isMinuteLimit
-          ? "Too many requests. Please wait a moment before trying again."
-          : "Daily limit reached. Please try again tomorrow.",
-      }),
-      {
-        status: 429,
-        headers: { "Content-Type": "application/json" },
-      },
-    );
-  }
-
   const { prompt, startingSpec } = (await req.json()) as {
     prompt: string;
     startingSpec?: Spec | null;

examples/react-pdf/lib/rate-limit.ts

@@ -1,57 +0,0 @@
-import { Ratelimit } from "@upstash/ratelimit";
-import { Redis } from "@upstash/redis";
-
-// Lazy initialization to avoid errors when Redis env vars are not configured
-let _minuteRateLimit: Ratelimit | null = null;
-let _dailyRateLimit: Ratelimit | null = null;
-
-function getRedis(): Redis | null {
-  const url = process.env.KV_REST_API_URL;
-  const token = process.env.KV_REST_API_TOKEN;
-
-  if (!url || !token) {
-    return null;
-  }
-
-  return new Redis({ url, token });
-}
-
-// No-op rate limiter for when Redis is not configured
-const noopRateLimiter = {
-  limit: async () => ({ success: true, limit: 0, remaining: 0, reset: 0 }),
-};
-
-const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
-const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
-
-// Requests per minute (sliding window)
-export const minuteRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_minuteRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _minuteRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.slidingWindow(MINUTE_LIMIT, "1 m"),
-        prefix: "ratelimit:react-pdf:minute",
-      });
-    }
-    return _minuteRateLimit.limit(identifier);
-  },
-};
-
-// Requests per day (fixed window)
-export const dailyRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_dailyRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _dailyRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.fixedWindow(DAILY_LIMIT, "1 d"),
-        prefix: "ratelimit:react-pdf:daily",
-      });
-    }
-    return _dailyRateLimit.limit(identifier);
-  },
-};

examples/react-pdf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-react-pdf",
-  "version": "0.1.8",
+  "version": "0.1.4",
   "type": "module",
   "private": true,
   "scripts": {
@@ -26,8 +26,6 @@
     "react-resizable-panels": "^4.4.1",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.1.18",
-    "@upstash/ratelimit": "^2.0.8",
-    "@upstash/redis": "^1.37.0",
     "zod": "4.3.6"
   },
   "devDependencies": {

examples/react-three-fiber/CHANGELOG.md

@@ -1,19 +0,0 @@
-# example-react-three-fiber
-
-## 0.1.8
-
-### Patch Changes
-
-- Updated dependencies [a8afd8b]
-  - @json-render/core@0.14.0
-  - @json-render/react@0.14.0
-  - @json-render/react-three-fiber@0.14.0
-
-## 0.1.7
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/react-three-fiber@0.13.0
-  - @json-render/react@0.13.0

examples/react-three-fiber/app/layout.tsx

@@ -1,20 +0,0 @@
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "json-render React Three Fiber Example",
-  description: "3D scenes from JSON specs with @json-render/react-three-fiber",
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body style={{ margin: 0, fontFamily: "system-ui, sans-serif" }}>
-        {children}
-      </body>
-    </html>
-  );
-}

examples/react-three-fiber/app/page.tsx

@@ -1,490 +0,0 @@
-"use client";
-
-import { useState, useSyncExternalStore, useCallback } from "react";
-import { defineCatalog } from "@json-render/core";
-import type { ComputedFunction } from "@json-render/core";
-import { schema, defineRegistry } from "@json-render/react";
-import {
-  threeComponentDefinitions,
-  threeComponents,
-  ThreeCanvas,
-} from "@json-render/react-three-fiber";
-import { scenes } from "./scenes";
-
-const catalog = defineCatalog(schema, {
-  components: {
-    ...threeComponentDefinitions,
-  },
-  actions: {},
-});
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    ...threeComponents,
-  },
-});
-
-function num(v: unknown, fallback: number): number {
-  return typeof v === "number" ? v : fallback;
-}
-
-const computedFunctions: Record<string, ComputedFunction> = {
-  halfHeight: (a) => num(a.h, 1) / 2,
-
-  helixX: (a) => {
-    const angle =
-      (num(a.i, 0) / num(a.count, 40)) * num(a.turns, 3) * 2 * Math.PI +
-      num(a.strand, 0) * Math.PI;
-    return num(a.radius, 1.8) * Math.cos(angle);
-  },
-  helixY: (a) => num(a.i, 0) * num(a.spacing, 0.3) + num(a.offset, -6),
-  helixZ: (a) => {
-    const angle =
-      (num(a.i, 0) / num(a.count, 40)) * num(a.turns, 3) * 2 * Math.PI +
-      num(a.strand, 0) * Math.PI;
-    return num(a.radius, 1.8) * Math.sin(angle);
-  },
-  helixHue: (a) => {
-    const t = num(a.i, 0) / num(a.count, 40);
-    return `hsl(${Math.round(t * 270 + 180)}, 85%, 60%)`;
-  },
-
-  spiralX: (a) => {
-    const t = num(a.i, 0) / num(a.count, 60);
-    const r = 0.5 + t * num(a.maxRadius, 7);
-    const angle = t * num(a.turns, 4) * 2 * Math.PI;
-    return r * Math.cos(angle);
-  },
-  spiralZ: (a) => {
-    const t = num(a.i, 0) / num(a.count, 60);
-    const r = 0.5 + t * num(a.maxRadius, 7);
-    const angle = t * num(a.turns, 4) * 2 * Math.PI;
-    return r * Math.sin(angle);
-  },
-  spiralY: (a) => {
-    const i = num(a.i, 0);
-    return Math.sin(i * 1.7) * 0.4;
-  },
-  spiralScale: (a) => {
-    const t = num(a.i, 0) / num(a.count, 60);
-    return 0.08 + (1 - t) * 0.25;
-  },
-  spiralEmissive: (a) => {
-    const t = num(a.i, 0) / num(a.count, 60);
-    return Math.max(0, 1 - t * 1.5);
-  },
-
-  circleX: (a) => {
-    const angle = (num(a.i, 0) / num(a.count, 8)) * 2 * Math.PI;
-    return num(a.radius, 3) * Math.cos(angle);
-  },
-  circleZ: (a) => {
-    const angle = (num(a.i, 0) / num(a.count, 8)) * 2 * Math.PI;
-    return num(a.radius, 3) * Math.sin(angle);
-  },
-  circleY: (a) => {
-    const angle = (num(a.i, 0) / num(a.count, 8)) * 2 * Math.PI;
-    return Math.sin(angle * num(a.freq, 3)) * num(a.amp, 0.3);
-  },
-  circleAngle: (a) => {
-    return (num(a.i, 0) / num(a.count, 8)) * 2 * Math.PI;
-  },
-  circleHue: (a) => {
-    const t = num(a.i, 0) / num(a.count, 8);
-    return `hsl(${Math.round(t * 360)}, ${num(a.sat, 70)}%, ${num(a.lit, 80)}%)`;
-  },
-};
-
-function highlightJson(json: string): string {
-  return json.replace(
-    /("(?:\\.|[^"\\])*")\s*(:)|("(?:\\.|[^"\\])*")|([-+]?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b)|([{}[\]:,])/g,
-    (_, key, colon, str, num, lit, punct) => {
-      if (key) return `<span style="color:#FF4D8D">${key}</span>${colon}`;
-      if (str) return `<span style="color:#00CA50">${str}</span>`;
-      if (num) return `<span style="color:#47A8FF">${num}</span>`;
-      if (lit) return `<span style="color:#47A8FF">${lit}</span>`;
-      if (punct) return `<span style="color:#666">${punct}</span>`;
-      return _;
-    },
-  );
-}
-
-const MOBILE_BREAKPOINT = 768;
-
-function subscribeToResize(cb: () => void) {
-  window.addEventListener("resize", cb);
-  return () => window.removeEventListener("resize", cb);
-}
-
-function getIsMobile() {
-  return typeof window !== "undefined"
-    ? window.innerWidth < MOBILE_BREAKPOINT
-    : false;
-}
-
-function useIsMobile() {
-  return useSyncExternalStore(subscribeToResize, getIsMobile, () => false);
-}
-
-const LIST_WIDTH = 220;
-const JSON_WIDTH = 380;
-const HEADER_HEIGHT = 40;
-const MOBILE_HEADER_HEIGHT = 48;
-
-const headerStyle: React.CSSProperties = {
-  height: HEADER_HEIGHT,
-  display: "flex",
-  alignItems: "center",
-  padding: "0 16px",
-  fontSize: 11,
-  fontWeight: 600,
-  color: "#555",
-  letterSpacing: "0.08em",
-  textTransform: "uppercase",
-  fontFamily: "ui-monospace, monospace",
-  borderBottom: "1px solid #1e1e1e",
-  flexShrink: 0,
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  boxSizing: "border-box",
-};
-
-function MobileLayout() {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [showJson, setShowJson] = useState(false);
-  const [showScenes, setShowScenes] = useState(false);
-  const selected = scenes[selectedIndex]!;
-
-  const closePanels = useCallback(() => {
-    setShowJson(false);
-    setShowScenes(false);
-  }, []);
-
-  return (
-    <div
-      style={{
-        height: "100dvh",
-        display: "flex",
-        flexDirection: "column",
-        background: "#0a0a0a",
-        overflow: "hidden",
-      }}
-    >
-      <div
-        style={{
-          height: MOBILE_HEADER_HEIGHT,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          padding: "0 12px",
-          borderBottom: "1px solid #1e1e1e",
-          background: "#0f0f0f",
-          flexShrink: 0,
-          gap: 8,
-        }}
-      >
-        <button
-          onClick={() => {
-            setShowScenes((v) => !v);
-            setShowJson(false);
-          }}
-          style={{
-            background: showScenes ? "rgba(255,255,255,0.1)" : "transparent",
-            border: "1px solid #333",
-            borderRadius: 6,
-            color: "#ccc",
-            fontSize: 12,
-            fontWeight: 500,
-            padding: "6px 10px",
-            cursor: "pointer",
-            fontFamily: "inherit",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            maxWidth: "50%",
-          }}
-        >
-          {selected.name}
-        </button>
-
-        <span
-          style={{
-            flex: 1,
-            fontSize: 10,
-            color: "#555",
-            textAlign: "center",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            fontFamily: "ui-monospace, monospace",
-            textTransform: "uppercase",
-            letterSpacing: "0.06em",
-          }}
-        >
-          {selected.description}
-        </span>
-
-        <button
-          onClick={() => {
-            setShowJson((v) => !v);
-            setShowScenes(false);
-          }}
-          style={{
-            background: showJson ? "rgba(255,255,255,0.1)" : "transparent",
-            border: "1px solid #333",
-            borderRadius: 6,
-            color: "#ccc",
-            fontSize: 11,
-            fontWeight: 500,
-            padding: "6px 10px",
-            cursor: "pointer",
-            fontFamily: "ui-monospace, monospace",
-            whiteSpace: "nowrap",
-            letterSpacing: "0.04em",
-          }}
-        >
-          JSON
-        </button>
-      </div>
-
-      <div style={{ flex: 1, position: "relative", minHeight: 0 }}>
-        <ThreeCanvas
-          key={selectedIndex}
-          spec={selected.spec}
-          registry={registry}
-          functions={computedFunctions}
-          shadows
-          camera={{ position: [0, 0, 5], fov: 50 }}
-          style={{ width: "100%", height: "100%" }}
-        />
-
-        {showScenes && (
-          <>
-            <div
-              onClick={closePanels}
-              style={{
-                position: "absolute",
-                inset: 0,
-                background: "rgba(0,0,0,0.5)",
-                zIndex: 10,
-              }}
-            />
-            <div
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                bottom: 0,
-                width: "75%",
-                maxWidth: 280,
-                background: "#0f0f0f",
-                borderRight: "1px solid #1e1e1e",
-                zIndex: 11,
-                display: "flex",
-                flexDirection: "column",
-                overflowY: "auto",
-                WebkitOverflowScrolling: "touch",
-              }}
-            >
-              <div style={{ ...headerStyle, height: 36 }}>Scenes</div>
-              <div style={{ padding: "6px 0" }}>
-                {scenes.map((scene, i) => (
-                  <button
-                    key={scene.name}
-                    onClick={() => {
-                      setSelectedIndex(i);
-                      setShowScenes(false);
-                    }}
-                    style={{
-                      display: "block",
-                      width: "100%",
-                      padding: "10px 16px",
-                      fontSize: 14,
-                      border: "none",
-                      textAlign: "left",
-                      background:
-                        i === selectedIndex
-                          ? "rgba(255,255,255,0.08)"
-                          : "transparent",
-                      color: i === selectedIndex ? "#fff" : "#888",
-                      fontWeight: i === selectedIndex ? 500 : 400,
-                      cursor: "pointer",
-                      borderLeft:
-                        i === selectedIndex
-                          ? "2px solid #fff"
-                          : "2px solid transparent",
-                      fontFamily: "inherit",
-                    }}
-                  >
-                    {scene.name}
-                  </button>
-                ))}
-              </div>
-            </div>
-          </>
-        )}
-
-        {showJson && (
-          <>
-            <div
-              onClick={closePanels}
-              style={{
-                position: "absolute",
-                inset: 0,
-                background: "rgba(0,0,0,0.5)",
-                zIndex: 10,
-              }}
-            />
-            <div
-              style={{
-                position: "absolute",
-                top: 0,
-                right: 0,
-                bottom: 0,
-                width: "85%",
-                maxWidth: 400,
-                background: "#0d0d0d",
-                borderLeft: "1px solid #1e1e1e",
-                zIndex: 11,
-                display: "flex",
-                flexDirection: "column",
-              }}
-            >
-              <div style={{ ...headerStyle, height: 36 }}>Spec JSON</div>
-              <pre
-                style={{
-                  flex: 1,
-                  margin: 0,
-                  padding: 14,
-                  overflowY: "auto",
-                  overflowX: "auto",
-                  WebkitOverflowScrolling: "touch",
-                  fontSize: 11,
-                  lineHeight: 1.6,
-                  fontFamily:
-                    "ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace",
-                  color: "#EDEDED",
-                  tabSize: 2,
-                }}
-                dangerouslySetInnerHTML={{
-                  __html: highlightJson(JSON.stringify(selected.spec, null, 2)),
-                }}
-              />
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function DesktopLayout() {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const selected = scenes[selectedIndex]!;
-
-  return (
-    <div style={{ height: "100vh", display: "flex", background: "#0a0a0a" }}>
-      <div
-        style={{
-          width: LIST_WIDTH,
-          flexShrink: 0,
-          display: "flex",
-          flexDirection: "column",
-          borderRight: "1px solid #1e1e1e",
-          background: "#0f0f0f",
-        }}
-      >
-        <div style={headerStyle}>Scenes</div>
-        <div style={{ flex: 1, overflowY: "auto", padding: "6px 0" }}>
-          {scenes.map((scene, i) => (
-            <button
-              key={scene.name}
-              onClick={() => setSelectedIndex(i)}
-              style={{
-                display: "block",
-                width: "100%",
-                padding: "8px 16px",
-                fontSize: 13,
-                border: "none",
-                textAlign: "left",
-                background:
-                  i === selectedIndex
-                    ? "rgba(255,255,255,0.08)"
-                    : "transparent",
-                color: i === selectedIndex ? "#fff" : "#888",
-                fontWeight: i === selectedIndex ? 500 : 400,
-                cursor: "pointer",
-                borderLeft:
-                  i === selectedIndex
-                    ? "2px solid #fff"
-                    : "2px solid transparent",
-                fontFamily: "inherit",
-              }}
-            >
-              {scene.name}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div
-        style={{
-          flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          minWidth: 0,
-        }}
-      >
-        <div style={headerStyle}>{selected.description}</div>
-        <div style={{ flex: 1, background: "#000", position: "relative" }}>
-          <ThreeCanvas
-            key={selectedIndex}
-            spec={selected.spec}
-            registry={registry}
-            functions={computedFunctions}
-            shadows
-            camera={{ position: [0, 0, 5], fov: 50 }}
-            style={{ width: "100%", height: "100%" }}
-          />
-        </div>
-      </div>
-
-      <div
-        style={{
-          width: JSON_WIDTH,
-          flexShrink: 0,
-          display: "flex",
-          flexDirection: "column",
-          borderLeft: "1px solid #1e1e1e",
-          background: "#0d0d0d",
-        }}
-      >
-        <div style={headerStyle}>Spec JSON</div>
-        <pre
-          style={{
-            flex: 1,
-            margin: 0,
-            padding: 14,
-            overflowY: "auto",
-            overflowX: "auto",
-            fontSize: 11,
-            lineHeight: 1.6,
-            fontFamily:
-              "ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace",
-            color: "#EDEDED",
-            tabSize: 2,
-          }}
-          dangerouslySetInnerHTML={{
-            __html: highlightJson(JSON.stringify(selected.spec, null, 2)),
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default function Page() {
-  const isMobile = useIsMobile();
-  return isMobile ? <MobileLayout /> : <DesktopLayout />;
-}

examples/react-three-fiber/app/scenes/_helpers.ts

@@ -1,9 +0,0 @@
-import type { Spec } from "@json-render/core";
-
-export type Scene = { name: string; description: string; spec: Spec };
-
-export const PI = Math.PI;
-
-export function range(n: number) {
-  return Array.from({ length: n }, (_, i) => ({ i }));
-}

examples/react-three-fiber/app/scenes/clockwork-orrery.ts

@@ -1,474 +0,0 @@
-import type { Scene } from "./_helpers";
-
-export const clockworkOrrery: Scene = {
-  name: "Clockwork Orrery",
-  description:
-    "Interlocking brass/gold rings spinning at different tilts and speeds with orbiting metallic planets. Like the inside of a celestial clockwork mechanism.",
-  spec: {
-    root: "scene",
-    elements: {
-      scene: {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "cam",
-          "env",
-          "ambient",
-          "key",
-          "warm",
-          "accent",
-          "center",
-          "ring-spin-0",
-          "ring-spin-1",
-          "ring-spin-2",
-          "ring-spin-3",
-          "planet-orbit-0",
-          "planet-orbit-1",
-          "planet-orbit-2",
-          "sparkles",
-          "post",
-          "controls",
-        ],
-      },
-      cam: {
-        type: "PerspectiveCamera",
-        props: {
-          position: [0, 3, 8],
-          fov: 50,
-          makeDefault: true,
-        },
-        children: [],
-      },
-      env: {
-        type: "Environment",
-        props: {
-          preset: "dawn",
-          background: true,
-          blur: 1,
-          intensity: 0.5,
-        },
-        children: [],
-      },
-      ambient: {
-        type: "AmbientLight",
-        props: { color: "#332200", intensity: 0.4 },
-        children: [],
-      },
-      key: {
-        type: "DirectionalLight",
-        props: {
-          position: [5, 10, 5],
-          rotation: null,
-          scale: null,
-          color: "#ffddaa",
-          intensity: 2,
-          castShadow: true,
-        },
-        children: [],
-      },
-      warm: {
-        type: "PointLight",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          color: "#ffaa44",
-          intensity: 30,
-          distance: 15,
-          decay: 2,
-          castShadow: false,
-        },
-        children: [],
-      },
-      accent: {
-        type: "PointLight",
-        props: {
-          position: [-4, 3, -4],
-          rotation: null,
-          scale: null,
-          color: "#ffcc88",
-          intensity: 15,
-          distance: 15,
-          decay: 2,
-          castShadow: false,
-        },
-        children: [],
-      },
-      center: {
-        type: "Float",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 0.5,
-          rotationIntensity: 0.1,
-          floatIntensity: 0.2,
-          enabled: true,
-        },
-        children: ["center-sphere"],
-      },
-      "center-sphere": {
-        type: "GlassSphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          radius: 0.5,
-          widthSegments: 32,
-          heightSegments: 16,
-          color: "#ffddaa",
-          transmission: 1,
-          thickness: 0.8,
-          roughness: 0,
-          chromaticAberration: 0.1,
-          ior: 1.8,
-          distortion: 0.05,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 10,
-          resolution: 256,
-        },
-        children: [],
-      },
-      "ring-spin-0": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: [0.3, 0, 0.8],
-          scale: null,
-          speed: 1.2,
-          axis: "y",
-        },
-        children: ["ring-torus-0"],
-      },
-      "ring-torus-0": {
-        type: "Torus",
-        props: {
-          position: null,
-          rotation: [1.5708, 0, 0],
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          material: {
-            color: "#ffcc44",
-            metalness: 0.95,
-            roughness: 0.1,
-            emissive: "#cc9900",
-            emissiveIntensity: 0.4,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 2,
-          tube: 0.04,
-          radialSegments: null,
-          tubularSegments: 128,
-        },
-        children: [],
-      },
-      "ring-spin-1": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: [0.9, 0, -0.2],
-          scale: null,
-          speed: -0.7,
-          axis: "y",
-        },
-        children: ["ring-torus-1"],
-      },
-      "ring-torus-1": {
-        type: "Torus",
-        props: {
-          position: null,
-          rotation: [1.5708, 0, 0],
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          material: {
-            color: "#cc8833",
-            metalness: 0.95,
-            roughness: 0.1,
-            emissive: "#aa6622",
-            emissiveIntensity: 0.3,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 3.2,
-          tube: 0.035,
-          radialSegments: null,
-          tubularSegments: 128,
-        },
-        children: [],
-      },
-      "ring-spin-2": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: [-0.4, 0, 0.5],
-          scale: null,
-          speed: 0.4,
-          axis: "y",
-        },
-        children: ["ring-torus-2"],
-      },
-      "ring-torus-2": {
-        type: "Torus",
-        props: {
-          position: null,
-          rotation: [1.5708, 0, 0],
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          material: {
-            color: "#bb9944",
-            metalness: 0.95,
-            roughness: 0.1,
-            emissive: "#886622",
-            emissiveIntensity: 0.25,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 4.5,
-          tube: 0.03,
-          radialSegments: null,
-          tubularSegments: 128,
-        },
-        children: [],
-      },
-      "ring-spin-3": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: [0.1, 0, -0.1],
-          scale: null,
-          speed: -0.2,
-          axis: "y",
-        },
-        children: ["ring-torus-3"],
-      },
-      "ring-torus-3": {
-        type: "Torus",
-        props: {
-          position: null,
-          rotation: [1.5708, 0, 0],
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          material: {
-            color: "#997744",
-            metalness: 0.95,
-            roughness: 0.1,
-            emissive: "#664422",
-            emissiveIntensity: 0.15,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 6,
-          tube: 0.025,
-          radialSegments: null,
-          tubularSegments: 128,
-        },
-        children: [],
-      },
-      "planet-orbit-0": {
-        type: "Orbit",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          speed: 0.6,
-          radius: 2.5,
-          tilt: 0.3,
-        },
-        children: ["planet-spin-0"],
-      },
-      "planet-spin-0": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 3,
-          axis: "y",
-        },
-        children: ["planet-sphere-0"],
-      },
-      "planet-sphere-0": {
-        type: "Sphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          material: {
-            color: "#ffffff",
-            metalness: 1,
-            roughness: 0.02,
-            emissive: "#ffffff",
-            emissiveIntensity: 0.2,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 0.2,
-          widthSegments: 32,
-          heightSegments: 16,
-        },
-        children: [],
-      },
-      "planet-orbit-1": {
-        type: "Orbit",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          speed: -0.9,
-          radius: 3.8,
-          tilt: 0.8,
-        },
-        children: ["planet-spin-1"],
-      },
-      "planet-spin-1": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: -2,
-          axis: "x",
-        },
-        children: ["planet-sphere-1"],
-      },
-      "planet-sphere-1": {
-        type: "Sphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          material: {
-            color: "#ffcc88",
-            metalness: 0.8,
-            roughness: 0.15,
-            emissive: "#ffcc88",
-            emissiveIntensity: 0.2,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 0.15,
-          widthSegments: 32,
-          heightSegments: 16,
-        },
-        children: [],
-      },
-      "planet-orbit-2": {
-        type: "Orbit",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          speed: 0.35,
-          radius: 5.2,
-          tilt: -0.5,
-        },
-        children: ["planet-spin-2"],
-      },
-      "planet-spin-2": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 1.5,
-          axis: "z",
-        },
-        children: ["planet-sphere-2"],
-      },
-      "planet-sphere-2": {
-        type: "Sphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          material: {
-            color: "#ccaa66",
-            metalness: 0.9,
-            roughness: 0.05,
-            emissive: "#ccaa66",
-            emissiveIntensity: 0.2,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 0.18,
-          widthSegments: 32,
-          heightSegments: 16,
-        },
-        children: [],
-      },
-      sparkles: {
-        type: "Sparkles",
-        props: {
-          position: null,
-          rotation: null,
-          scale: [14, 10, 14],
-          count: 150,
-          speed: 0.15,
-          opacity: 0.3,
-          color: "#ffcc66",
-          size: 1,
-          noise: 2,
-        },
-        children: [],
-      },
-      post: {
-        type: "EffectComposer",
-        props: { enabled: true, multisampling: 8 },
-        children: ["bloom", "vignette"],
-      },
-      bloom: {
-        type: "Bloom",
-        props: {
-          intensity: 1.2,
-          luminanceThreshold: 0.2,
-          luminanceSmoothing: null,
-          mipmapBlur: true,
-        },
-        children: [],
-      },
-      vignette: {
-        type: "Vignette",
-        props: { offset: 0.5, darkness: 0.5 },
-        children: [],
-      },
-      controls: {
-        type: "OrbitControls",
-        props: {
-          enableDamping: true,
-          dampingFactor: null,
-          enableZoom: true,
-          enablePan: null,
-          enableRotate: true,
-          minDistance: 4,
-          maxDistance: 18,
-          minPolarAngle: 0.3,
-          maxPolarAngle: 1.5,
-          autoRotate: true,
-          autoRotateSpeed: 0.3,
-        },
-        children: [],
-      },
-    },
-  },
-};

examples/react-three-fiber/app/scenes/deep-sea-abyss.ts

@@ -1,692 +0,0 @@
-import type { Scene } from "./_helpers";
-
-export const deepSeaAbyss: Scene = {
-  name: "Deep Sea Abyss",
-  description:
-    "Bioluminescent deep ocean. Pitch black with glowing jellyfish-like creatures.",
-  spec: {
-    root: "scene",
-    elements: {
-      scene: {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "cam",
-          "env",
-          "fog",
-          "ambient",
-          "jelly-1-pulse",
-          "jelly-2-pulse",
-          "jelly-3-pulse",
-          "light-1",
-          "light-2",
-          "light-3",
-          "tentacles-1",
-          "tentacles-2",
-          "tentacles-3",
-          "sparkles-1",
-          "sparkles-2",
-          "controls",
-        ],
-      },
-      cam: {
-        type: "PerspectiveCamera",
-        props: {
-          position: [0, 1, 6],
-          fov: 55,
-          makeDefault: true,
-        },
-        children: [],
-      },
-      env: {
-        type: "Environment",
-        props: {
-          preset: "night",
-          background: false,
-          blur: 1,
-          intensity: 0.05,
-        },
-        children: [],
-      },
-      fog: {
-        type: "Fog",
-        props: { color: "#000510", near: 2, far: 18 },
-        children: [],
-      },
-      ambient: {
-        type: "AmbientLight",
-        props: { color: "#001133", intensity: 0.15 },
-        children: [],
-      },
-      "jelly-1-pulse": {
-        type: "Pulse",
-        props: {
-          position: [0, 1, 0],
-          rotation: null,
-          scale: null,
-          speed: 0.6,
-          min: 0.85,
-          max: 1.15,
-        },
-        children: ["jelly-1-spin"],
-      },
-      "jelly-1-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 0.2,
-          axis: "y",
-        },
-        children: ["jelly-1-body"],
-      },
-      "jelly-1-body": {
-        type: "DistortSphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 1,
-          widthSegments: 64,
-          heightSegments: 32,
-          color: "#00ccff",
-          speed: 2,
-          distort: 0.5,
-          metalness: 0,
-          roughness: 0.2,
-        },
-        children: [],
-      },
-      "jelly-2-pulse": {
-        type: "Pulse",
-        props: {
-          position: [-4, -1, -3],
-          rotation: null,
-          scale: null,
-          speed: 0.8,
-          min: 0.8,
-          max: 1.2,
-        },
-        children: ["jelly-2-spin"],
-      },
-      "jelly-2-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: -0.3,
-          axis: "y",
-        },
-        children: ["jelly-2-body"],
-      },
-      "jelly-2-body": {
-        type: "DistortSphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.7,
-          widthSegments: 64,
-          heightSegments: 32,
-          color: "#cc44ff",
-          speed: 2.5,
-          distort: 0.6,
-          metalness: 0,
-          roughness: 0.2,
-        },
-        children: [],
-      },
-      "jelly-3-pulse": {
-        type: "Pulse",
-        props: {
-          position: [3, 0.5, -5],
-          rotation: null,
-          scale: null,
-          speed: 0.5,
-          min: 0.9,
-          max: 1.1,
-        },
-        children: ["jelly-3-spin"],
-      },
-      "jelly-3-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 0.15,
-          axis: "y",
-        },
-        children: ["jelly-3-body"],
-      },
-      "jelly-3-body": {
-        type: "DistortSphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.5,
-          widthSegments: 64,
-          heightSegments: 32,
-          color: "#ff44aa",
-          speed: 1.5,
-          distort: 0.4,
-          metalness: 0,
-          roughness: 0.3,
-        },
-        children: [],
-      },
-      "light-1": {
-        type: "PointLight",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          color: "#00ccff",
-          intensity: 20,
-          distance: 12,
-          decay: 2,
-          castShadow: null,
-        },
-        children: [],
-      },
-      "light-2": {
-        type: "PointLight",
-        props: {
-          position: [-4, -1, -3],
-          rotation: null,
-          scale: null,
-          color: "#cc44ff",
-          intensity: 15,
-          distance: 10,
-          decay: 2,
-          castShadow: null,
-        },
-        children: [],
-      },
-      "light-3": {
-        type: "PointLight",
-        props: {
-          position: [3, 0.5, -5],
-          rotation: null,
-          scale: null,
-          color: "#ff44aa",
-          intensity: 10,
-          distance: 8,
-          decay: 2,
-          castShadow: null,
-        },
-        children: [],
-      },
-      "tentacles-1": {
-        type: "Float",
-        props: {
-          position: [0, -1, 0],
-          rotation: null,
-          scale: null,
-          speed: 0.3,
-          rotationIntensity: 0.5,
-          floatIntensity: 0.8,
-          enabled: true,
-        },
-        children: ["t1-s1", "t1-s2", "t1-s3", "t1-s4", "t1-s5", "t1-s6"],
-      },
-      "t1-s1": {
-        type: "GlassSphere",
-        props: {
-          position: [0.3, -0.5, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.12,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#00ccff",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "t1-s2": {
-        type: "GlassSphere",
-        props: {
-          position: [-0.2, -1.2, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.1,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#00ccff",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "t1-s3": {
-        type: "GlassSphere",
-        props: {
-          position: [0.4, -1.9, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.08,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#00ccff",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "t1-s4": {
-        type: "GlassSphere",
-        props: {
-          position: [-0.3, -2.5, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.07,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#00ccff",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "t1-s5": {
-        type: "GlassSphere",
-        props: {
-          position: [0.1, -3.0, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.06,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#00ccff",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "t1-s6": {
-        type: "GlassSphere",
-        props: {
-          position: [-0.1, -3.4, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.05,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#00ccff",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "tentacles-2": {
-        type: "Float",
-        props: {
-          position: [-4, -2.5, -3],
-          rotation: null,
-          scale: null,
-          speed: 0.4,
-          rotationIntensity: 0.5,
-          floatIntensity: 0.8,
-          enabled: true,
-        },
-        children: ["t2-s1", "t2-s2", "t2-s3", "t2-s4", "t2-s5"],
-      },
-      "t2-s1": {
-        type: "GlassSphere",
-        props: {
-          position: [0.3, -0.5, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.1,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#cc44ff",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "t2-s2": {
-        type: "GlassSphere",
-        props: {
-          position: [-0.2, -1.1, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.08,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#cc44ff",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "t2-s3": {
-        type: "GlassSphere",
-        props: {
-          position: [0.4, -1.7, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.06,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#cc44ff",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "t2-s4": {
-        type: "GlassSphere",
-        props: {
-          position: [-0.3, -2.2, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.05,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#cc44ff",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "t2-s5": {
-        type: "GlassSphere",
-        props: {
-          position: [0.1, -2.6, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.05,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#cc44ff",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "tentacles-3": {
-        type: "Float",
-        props: {
-          position: [3, -1, -5],
-          rotation: null,
-          scale: null,
-          speed: 0.35,
-          rotationIntensity: 0.5,
-          floatIntensity: 0.8,
-          enabled: true,
-        },
-        children: ["t3-s1", "t3-s2", "t3-s3", "t3-s4"],
-      },
-      "t3-s1": {
-        type: "GlassSphere",
-        props: {
-          position: [0.3, -0.5, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.09,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#ff44aa",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "t3-s2": {
-        type: "GlassSphere",
-        props: {
-          position: [-0.2, -1.0, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.07,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#ff44aa",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "t3-s3": {
-        type: "GlassSphere",
-        props: {
-          position: [0.4, -1.5, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.06,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#ff44aa",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "t3-s4": {
-        type: "GlassSphere",
-        props: {
-          position: [-0.1, -1.9, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.05,
-          widthSegments: 16,
-          heightSegments: 8,
-          color: "#ff44aa",
-          transmission: 0.9,
-          thickness: 0.3,
-          roughness: 0.1,
-          chromaticAberration: 0.1,
-          ior: 1.5,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      "sparkles-1": {
-        type: "Sparkles",
-        props: {
-          position: [0, 0, -3],
-          rotation: null,
-          scale: [15, 10, 15],
-          count: 300,
-          speed: 0.1,
-          opacity: 0.4,
-          color: "#00aaff",
-          size: 1,
-          noise: 3,
-        },
-        children: [],
-      },
-      "sparkles-2": {
-        type: "Sparkles",
-        props: {
-          position: [0, -2, 0],
-          rotation: null,
-          scale: [12, 6, 12],
-          count: 150,
-          speed: 0.05,
-          opacity: 0.2,
-          color: "#8844ff",
-          size: 0.8,
-          noise: 2,
-        },
-        children: [],
-      },
-      controls: {
-        type: "OrbitControls",
-        props: {
-          enableDamping: true,
-          dampingFactor: null,
-          enableZoom: true,
-          enablePan: null,
-          enableRotate: true,
-          minDistance: 3,
-          maxDistance: 18,
-          minPolarAngle: null,
-          maxPolarAngle: null,
-          autoRotate: true,
-          autoRotateSpeed: 0.15,
-        },
-        children: [],
-      },
-    },
-  },
-};