cleaner skills

.changeset/config.json

@@ -19,9 +19,7 @@
       "@json-render/xstate",
       "@json-render/image",
       "@json-render/mcp",
-      "@json-render/svelte",
-      "@json-render/solid",
-      "@json-render/react-three-fiber"
+      "@json-render/svelte"
     ]
   ],
   "linked": [],

.gitignore

@@ -4,7 +4,6 @@
 node_modules
 .pnp
 .pnp.js
-.pnpm-store/
 
 # Local env files
 .env*

README.md

@@ -21,10 +21,6 @@ npm install @json-render/core @json-render/react-email @react-email/components @
 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 +30,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, Svelte (web), React Native (mobile) from the same catalog
 - **Batteries Included** - 36 pre-built shadcn/ui components ready to use
 
 ## Quick Start
@@ -95,7 +91,9 @@ const { registry } = defineRegistry(catalog, {
       </div>
     ),
     Button: ({ props, emit }) => (
-      <button onClick={() => emit("press")}>{props.label}</button>
+      <button onClick={() => emit("press")}>
+        {props.label}
+      </button>
     ),
   },
 });
@@ -115,26 +113,24 @@ 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              |
+| 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/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/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 |
 
 ## Renderers
 
@@ -163,7 +159,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)
@@ -203,26 +199,6 @@ const { registry } = defineRegistry(catalog, {
 // <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
@@ -253,7 +229,7 @@ const { registry } = defineRegistry(catalog, {
   },
 });
 
-<Renderer spec={spec} registry={registry} />;
+<Renderer spec={spec} registry={registry} />
 ```
 
 ### React Native (Mobile)
@@ -274,40 +250,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
@@ -317,7 +276,7 @@ const spec = {
   fps={spec.composition.fps}
   compositionWidth={spec.composition.width}
   compositionHeight={spec.composition.height}
-/>;
+/>
 ```
 
 ### React PDF (Documents)
@@ -328,11 +287,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" },
@@ -346,14 +301,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: [],
     },
@@ -378,11 +327,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",
@@ -391,17 +336,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: [] },
   },
 };
 
@@ -437,47 +376,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)
@@ -527,16 +425,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" }
   }
 }
 ```
@@ -555,10 +445,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"]
 }
 ```
@@ -572,15 +459,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" } } }
   }
 }
 ```
@@ -605,7 +486,7 @@ pnpm dev
 - 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 + Svelte): run `pnpm dev` in `examples/vite-renderers`
 - React Native example: run `npx expo start` in `examples/react-native`
 
 ## How It Works
@@ -615,7 +496,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,23 +1,5 @@
 # web
 
-## 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

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,7 +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")
+  mode?: "generate" | "chat"; // Output mode (default: "generate")
 }
 
 interface SpecValidationResult<T> {
@@ -370,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';
@@ -389,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';
@@ -403,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
 

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/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/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/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/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
-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. See /docs/skills for details.
+npm packages: @json-render/core, @json-render/react, @json-render/vue, @json-render/svelte, @json-render/shadcn, @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
 
 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/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

@@ -100,7 +100,7 @@ export function Header() {
             >
               <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>
+            <span>11k</span>
           </a>
           <ThemeToggle />
         </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" },
     ],
@@ -92,7 +91,7 @@ export const docsNavigation: NavSection[] = [
         external: true,
       },
       {
-        title: "Renders with Vite (Vue / React / Svelte / Solid)",
+        title: "Renders with Vite (Vue / React / Svelte)",
         href: "https://github.com/vercel-labs/json-render/tree/main/examples/vite-renderers",
         external: true,
       },
@@ -133,11 +132,6 @@ export const docsNavigation: NavSection[] = [
       { 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" },

apps/web/lib/page-titles.ts

@@ -37,13 +37,11 @@ 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",
@@ -56,7 +54,6 @@ export const PAGE_TITLES: Record<string, string> = {
   "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",
 };
 

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.1.7",
+  "version": "0.1.5",
   "type": "module",
   "private": true,
   "license": "Apache-2.0",

examples/chat/CHANGELOG.md

@@ -1,23 +1,5 @@
 # example-chat
 
-## 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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-chat",
-  "version": "0.1.7",
+  "version": "0.1.5",
   "type": "module",
   "private": true,
   "scripts": {

examples/dashboard/CHANGELOG.md

@@ -1,23 +1,5 @@
 # example-dashboard
 
-## 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

examples/dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-dashboard",
-  "version": "0.1.7",
+  "version": "0.1.5",
   "type": "module",
   "private": true,
   "scripts": {

examples/image/CHANGELOG.md

@@ -1,21 +1,5 @@
 # example-image
 
-## 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

examples/image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-image",
-  "version": "0.1.4",
+  "version": "0.1.2",
   "type": "module",
   "private": true,
   "scripts": {

examples/mcp/CHANGELOG.md

@@ -1,25 +1,5 @@
 # example-mcp
 
-## 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

examples/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-mcp",
-  "version": "0.1.3",
+  "version": "0.1.1",
   "type": "module",
   "private": true,
   "scripts": {
@@ -16,8 +16,8 @@
     "@json-render/shadcn": "workspace:*",
     "@modelcontextprotocol/ext-apps": "^1.2.0",
     "@modelcontextprotocol/sdk": "^1.27.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "zod": "^4.3.6"
   },
   "devDependencies": {

examples/mcp/vite.config.ts

@@ -5,9 +5,6 @@ import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
   plugins: [react(), tailwindcss(), viteSingleFile()],
-  resolve: {
-    dedupe: ["react", "react-dom"],
-  },
   build: {
     outDir: "dist",
     emptyOutDir: false,

examples/no-ai/CHANGELOG.md

@@ -1,23 +1,5 @@
 # example-no-ai
 
-## 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

examples/no-ai/package.json

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

examples/react-email/CHANGELOG.md

@@ -1,21 +1,5 @@
 # example-react-email
 
-## 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

examples/react-email/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-react-email",
-  "version": "0.1.3",
+  "version": "0.1.1",
   "type": "module",
   "private": true,
   "scripts": {

examples/react-native/CHANGELOG.md

@@ -1,21 +1,5 @@
 # example-react-native
 
-## 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

examples/react-native/package.json

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

examples/react-pdf/CHANGELOG.md

@@ -1,21 +1,5 @@
 # example-react-pdf
 
-## 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

examples/react-pdf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-react-pdf",
-  "version": "0.1.7",
+  "version": "0.1.5",
   "type": "module",
   "private": true,
   "scripts": {

examples/react-three-fiber/CHANGELOG.md

@@ -1,10 +0,0 @@
-# example-react-three-fiber
-
-## 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,238 +0,0 @@
-"use client";
-
-import { useState } 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 LIST_WIDTH = 220;
-const JSON_WIDTH = 380;
-const HEADER_HEIGHT = 40;
-
-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",
-};
-
-export default function Page() {
-  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>
-  );
-}

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: [],
-      },
-    },
-  },
-};

examples/react-three-fiber/app/scenes/floating-islands.ts

@@ -1,940 +0,0 @@
-import { PI } from "./_helpers";
-import type { Scene } from "./_helpers";
-
-export const floatingIslands: Scene = {
-  name: "Floating Islands",
-  description:
-    "Sky, clouds, islands with trees and bridges floating in sunset light",
-  spec: {
-    root: "scene",
-    elements: {
-      scene: {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "cam",
-          "sky",
-          "ambient",
-          "sun",
-          "clouds",
-          "island-main-float",
-          "island-left-float",
-          "island-right-float",
-          "island-far-float",
-          "island-tiny1-float",
-          "island-tiny2-float",
-          "bridge-1",
-          "bridge-2",
-          "sparkles",
-          "controls",
-        ],
-      },
-      cam: {
-        type: "PerspectiveCamera",
-        props: {
-          position: [8, 6, 14],
-          rotation: null,
-          scale: null,
-          fov: 50,
-          near: 0.1,
-          far: 500,
-          makeDefault: true,
-        },
-        children: [],
-      },
-      sky: {
-        type: "Environment",
-        props: {
-          preset: "dawn",
-          background: true,
-          blur: 0.8,
-          intensity: 0.5,
-        },
-        children: [],
-      },
-      ambient: {
-        type: "AmbientLight",
-        props: { color: "#ffd4a0", intensity: 0.5 },
-        children: [],
-      },
-      sun: {
-        type: "DirectionalLight",
-        props: {
-          position: [8, 12, 6],
-          rotation: null,
-          scale: null,
-          color: "#ffcc88",
-          intensity: 2.5,
-          castShadow: true,
-        },
-        children: [],
-      },
-      clouds: {
-        type: "Cloud",
-        props: {
-          position: [0, 4, -8],
-          rotation: null,
-          scale: null,
-          seed: 7,
-          segments: 40,
-          bounds: [25, 3, 20],
-          volume: 10,
-          speed: 0.1,
-          fade: 25,
-          opacity: 0.6,
-          color: "#ffe8d0",
-          growth: 8,
-        },
-        children: [],
-      },
-
-      "island-main-float": {
-        type: "Float",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          speed: 0.4,
-          rotationIntensity: 0.02,
-          floatIntensity: 0.3,
-          enabled: true,
-        },
-        children: ["island-main"],
-      },
-      "island-main": {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "main-base",
-          "main-top",
-          "main-underhang",
-          "tree-1-trunk",
-          "tree-1-canopy",
-          "tree-2-trunk",
-          "tree-2-canopy",
-          "tree-3-trunk",
-          "tree-3-canopy",
-          "house-base",
-          "house-roof",
-        ],
-      },
-      "main-base": {
-        type: "Cylinder",
-        props: {
-          position: [0, -0.5, 0],
-          rotation: null,
-          scale: null,
-          castShadow: true,
-          receiveShadow: true,
-          material: {
-            color: "#8B6914",
-            metalness: 0.1,
-            roughness: 0.9,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radiusTop: 3,
-          radiusBottom: 1.5,
-          height: 2,
-          radialSegments: 16,
-        },
-        children: [],
-      },
-      "main-top": {
-        type: "Cylinder",
-        props: {
-          position: [0, 0.55, 0],
-          rotation: null,
-          scale: null,
-          castShadow: true,
-          receiveShadow: true,
-          material: {
-            color: "#4a8c3f",
-            metalness: 0,
-            roughness: 0.95,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radiusTop: 3.1,
-          radiusBottom: 3,
-          height: 0.3,
-          radialSegments: 16,
-        },
-        children: [],
-      },
-      "main-underhang": {
-        type: "Cone",
-        props: {
-          position: [0, -2.5, 0],
-          rotation: [PI, 0, 0],
-          scale: null,
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#6B4513",
-            metalness: 0.1,
-            roughness: 0.95,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 1.5,
-          height: 2.5,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "tree-1-trunk": {
-        type: "Cylinder",
-        props: {
-          position: [1, 1, 0.5],
-          rotation: null,
-          scale: null,
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#8B5A2B",
-            metalness: 0,
-            roughness: 1,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radiusTop: 0.06,
-          radiusBottom: 0.1,
-          height: 1.5,
-          radialSegments: 8,
-        },
-        children: [],
-      },
-      "tree-1-canopy": {
-        type: "Sphere",
-        props: {
-          position: [1, 2.2, 0.5],
-          rotation: null,
-          scale: [1, 1.2, 1],
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#2d7a2d",
-            metalness: 0,
-            roughness: 0.95,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 0.6,
-          widthSegments: 16,
-          heightSegments: 12,
-        },
-        children: [],
-      },
-      "tree-2-trunk": {
-        type: "Cylinder",
-        props: {
-          position: [-1.2, 0.8, -0.8],
-          rotation: null,
-          scale: null,
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#8B5A2B",
-            metalness: 0,
-            roughness: 1,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radiusTop: 0.05,
-          radiusBottom: 0.08,
-          height: 1.1,
-          radialSegments: 8,
-        },
-        children: [],
-      },
-      "tree-2-canopy": {
-        type: "Sphere",
-        props: {
-          position: [-1.2, 1.7, -0.8],
-          rotation: null,
-          scale: [1, 1.3, 1],
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#3a8c3a",
-            metalness: 0,
-            roughness: 0.95,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 0.45,
-          widthSegments: 16,
-          heightSegments: 12,
-        },
-        children: [],
-      },
-      "tree-3-trunk": {
-        type: "Cylinder",
-        props: {
-          position: [-0.3, 1.2, 1.5],
-          rotation: null,
-          scale: null,
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#8B5A2B",
-            metalness: 0,
-            roughness: 1,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radiusTop: 0.07,
-          radiusBottom: 0.12,
-          height: 2,
-          radialSegments: 8,
-        },
-        children: [],
-      },
-      "tree-3-canopy": {
-        type: "Sphere",
-        props: {
-          position: [-0.3, 2.7, 1.5],
-          rotation: null,
-          scale: [1.2, 1.4, 1.2],
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#1a6b1a",
-            metalness: 0,
-            roughness: 0.95,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 0.7,
-          widthSegments: 16,
-          heightSegments: 12,
-        },
-        children: [],
-      },
-      "house-base": {
-        type: "RoundedBox",
-        props: {
-          position: [0, 0.9, -0.5],
-          rotation: [0, 0.3, 0],
-          scale: null,
-          castShadow: true,
-          receiveShadow: true,
-          material: {
-            color: "#e8d8c0",
-            metalness: 0,
-            roughness: 0.8,
-            emissive: "#ffddaa",
-            emissiveIntensity: 0.05,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          width: 0.8,
-          height: 0.7,
-          depth: 0.7,
-          radius: 0.05,
-          smoothness: 4,
-        },
-        children: [],
-      },
-      "house-roof": {
-        type: "Cone",
-        props: {
-          position: [0, 1.55, -0.5],
-          rotation: [0, 1.085, 0],
-          scale: null,
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#a04030",
-            metalness: 0.1,
-            roughness: 0.8,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 0.6,
-          height: 0.5,
-          radialSegments: 4,
-        },
-        children: [],
-      },
-
-      "island-left-float": {
-        type: "Float",
-        props: {
-          position: [-6, 0.1, 2],
-          rotation: null,
-          scale: null,
-          speed: 0.6,
-          rotationIntensity: 0.03,
-          floatIntensity: 0.5,
-          enabled: true,
-        },
-        children: ["island-left"],
-      },
-      "island-left": {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "left-base",
-          "left-top",
-          "left-under",
-          "left-tree-t",
-          "left-tree-c",
-        ],
-      },
-      "left-base": {
-        type: "Cylinder",
-        props: {
-          position: [0, -0.3, 0],
-          rotation: null,
-          scale: null,
-          castShadow: true,
-          receiveShadow: true,
-          material: {
-            color: "#8B6914",
-            metalness: 0.1,
-            roughness: 0.9,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radiusTop: 1.8,
-          radiusBottom: 0.8,
-          height: 1.2,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "left-top": {
-        type: "Cylinder",
-        props: {
-          position: [0, 0.25, 0],
-          rotation: null,
-          scale: null,
-          castShadow: true,
-          receiveShadow: true,
-          material: {
-            color: "#4a8c3f",
-            metalness: 0,
-            roughness: 0.95,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radiusTop: 1.85,
-          radiusBottom: 1.8,
-          height: 0.2,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "left-under": {
-        type: "Cone",
-        props: {
-          position: [0, -1.5, 0],
-          rotation: [PI, 0, 0],
-          scale: null,
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#6B4513",
-            metalness: 0.1,
-            roughness: 0.95,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 0.8,
-          height: 1.5,
-          radialSegments: 10,
-        },
-        children: [],
-      },
-      "left-tree-t": {
-        type: "Cylinder",
-        props: {
-          position: [0.3, 0.8, 0],
-          rotation: null,
-          scale: null,
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#8B5A2B",
-            metalness: 0,
-            roughness: 1,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radiusTop: 0.04,
-          radiusBottom: 0.07,
-          height: 1,
-          radialSegments: 8,
-        },
-        children: [],
-      },
-      "left-tree-c": {
-        type: "Sphere",
-        props: {
-          position: [0.3, 1.6, 0],
-          rotation: null,
-          scale: [1, 1.2, 1],
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#2d7a2d",
-            metalness: 0,
-            roughness: 0.95,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 0.4,
-          widthSegments: 12,
-          heightSegments: 8,
-        },
-        children: [],
-      },
-
-      "island-right-float": {
-        type: "Float",
-        props: {
-          position: [5.5, 0, -3],
-          rotation: null,
-          scale: null,
-          speed: 0.5,
-          rotationIntensity: 0.02,
-          floatIntensity: 0.4,
-          enabled: true,
-        },
-        children: ["island-right"],
-      },
-      "island-right": {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "right-base",
-          "right-top",
-          "right-under",
-          "right-tree-t",
-          "right-tree-c",
-        ],
-      },
-      "right-base": {
-        type: "Cylinder",
-        props: {
-          position: [0, -0.3, 0],
-          rotation: null,
-          scale: null,
-          castShadow: true,
-          receiveShadow: true,
-          material: {
-            color: "#8B6914",
-            metalness: 0.1,
-            roughness: 0.9,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radiusTop: 2,
-          radiusBottom: 1,
-          height: 1.5,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "right-top": {
-        type: "Cylinder",
-        props: {
-          position: [0, 0.4, 0],
-          rotation: null,
-          scale: null,
-          castShadow: true,
-          receiveShadow: true,
-          material: {
-            color: "#4a8c3f",
-            metalness: 0,
-            roughness: 0.95,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radiusTop: 2.05,
-          radiusBottom: 2,
-          height: 0.2,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "right-under": {
-        type: "Cone",
-        props: {
-          position: [0, -2, 0],
-          rotation: [PI, 0, 0],
-          scale: null,
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#6B4513",
-            metalness: 0.1,
-            roughness: 0.95,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 1,
-          height: 2,
-          radialSegments: 10,
-        },
-        children: [],
-      },
-      "right-tree-t": {
-        type: "Cylinder",
-        props: {
-          position: [-0.5, 0.9, 0.3],
-          rotation: null,
-          scale: null,
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#8B5A2B",
-            metalness: 0,
-            roughness: 1,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radiusTop: 0.05,
-          radiusBottom: 0.09,
-          height: 1.3,
-          radialSegments: 8,
-        },
-        children: [],
-      },
-      "right-tree-c": {
-        type: "Sphere",
-        props: {
-          position: [-0.5, 2, 0.3],
-          rotation: null,
-          scale: [1, 1.3, 1],
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#3a8c3a",
-            metalness: 0,
-            roughness: 0.95,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 0.5,
-          widthSegments: 12,
-          heightSegments: 8,
-        },
-        children: [],
-      },
-
-      "island-far-float": {
-        type: "Float",
-        props: {
-          position: [2, 3, -10],
-          rotation: null,
-          scale: [0.7, 0.7, 0.7],
-          speed: 0.3,
-          rotationIntensity: 0.01,
-          floatIntensity: 0.3,
-          enabled: true,
-        },
-        children: ["far-base", "far-top", "far-under"],
-      },
-      "far-base": {
-        type: "Cylinder",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          castShadow: true,
-          receiveShadow: true,
-          material: {
-            color: "#8B6914",
-            metalness: 0.1,
-            roughness: 0.9,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radiusTop: 2.5,
-          radiusBottom: 1.2,
-          height: 1.5,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "far-top": {
-        type: "Cylinder",
-        props: {
-          position: [0, 0.65, 0],
-          rotation: null,
-          scale: null,
-          castShadow: true,
-          receiveShadow: true,
-          material: {
-            color: "#3a7a3a",
-            metalness: 0,
-            roughness: 0.95,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radiusTop: 2.55,
-          radiusBottom: 2.5,
-          height: 0.2,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "far-under": {
-        type: "Cone",
-        props: {
-          position: [0, -1.8, 0],
-          rotation: [PI, 0, 0],
-          scale: null,
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#6B4513",
-            metalness: 0.1,
-            roughness: 0.95,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 1.2,
-          height: 2,
-          radialSegments: 10,
-        },
-        children: [],
-      },
-
-      "island-tiny1-float": {
-        type: "Float",
-        props: {
-          position: [-3, 2.5, -5],
-          rotation: null,
-          scale: [0.4, 0.4, 0.4],
-          speed: 0.8,
-          rotationIntensity: 0.05,
-          floatIntensity: 0.8,
-          enabled: true,
-        },
-        children: ["tiny1-rock"],
-      },
-      "tiny1-rock": {
-        type: "Sphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: [1, 0.6, 1],
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#8B6914",
-            metalness: 0.1,
-            roughness: 0.9,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 1,
-          widthSegments: 12,
-          heightSegments: 8,
-        },
-        children: [],
-      },
-      "island-tiny2-float": {
-        type: "Float",
-        props: {
-          position: [8, -0.5, 1],
-          rotation: null,
-          scale: [0.3, 0.3, 0.3],
-          speed: 1,
-          rotationIntensity: 0.08,
-          floatIntensity: 1,
-          enabled: true,
-        },
-        children: ["tiny2-rock"],
-      },
-      "tiny2-rock": {
-        type: "Sphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: [1.2, 0.5, 0.8],
-          castShadow: true,
-          receiveShadow: false,
-          material: {
-            color: "#7a5a10",
-            metalness: 0.1,
-            roughness: 0.9,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 1,
-          widthSegments: 12,
-          heightSegments: 8,
-        },
-        children: [],
-      },
-
-      "bridge-1": {
-        type: "RoundedBox",
-        props: {
-          position: [-3.57, -0.1, 1.19],
-          rotation: [0, 0.32, 0],
-          scale: null,
-          castShadow: true,
-          receiveShadow: true,
-          material: {
-            color: "#8B6914",
-            metalness: 0.1,
-            roughness: 0.9,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          width: 3.5,
-          height: 0.5,
-          depth: 0.6,
-          radius: 0.05,
-          smoothness: 2,
-        },
-        children: [],
-      },
-      "bridge-2": {
-        type: "RoundedBox",
-        props: {
-          position: [3.19, -0.1, -1.74],
-          rotation: [0, 0.5, 0],
-          scale: null,
-          castShadow: true,
-          receiveShadow: true,
-          material: {
-            color: "#8B6914",
-            metalness: 0.1,
-            roughness: 0.9,
-            emissive: null,
-            emissiveIntensity: null,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          width: 3.0,
-          height: 0.5,
-          depth: 0.6,
-          radius: 0.05,
-          smoothness: 2,
-        },
-        children: [],
-      },
-
-      sparkles: {
-        type: "Sparkles",
-        props: {
-          position: [0, 2, 0],
-          rotation: null,
-          scale: [20, 8, 20],
-          count: 120,
-          speed: 0.1,
-          opacity: 0.5,
-          color: "#ffeeaa",
-          size: 1.5,
-          noise: 1,
-        },
-        children: [],
-      },
-      controls: {
-        type: "OrbitControls",
-        props: {
-          enableDamping: true,
-          dampingFactor: null,
-          enableZoom: true,
-          enablePan: null,
-          enableRotate: true,
-          minDistance: 8,
-          maxDistance: 30,
-          minPolarAngle: 0.2,
-          maxPolarAngle: 1.5,
-          autoRotate: true,
-          autoRotateSpeed: 0.3,
-          target: [0, 1, 0],
-        },
-        children: [],
-      },
-    },
-  },
-};

examples/react-three-fiber/app/scenes/hyperspace-tunnel.ts

@@ -1,164 +0,0 @@
-import type { Scene } from "./_helpers";
-
-export const hyperspaceTunnel: Scene = {
-  name: "Hyperspace Tunnel",
-  description:
-    "Neon warp tunnel at breakneck speed -- bloom, camera shake, particles streaming past",
-  spec: {
-    root: "scene",
-    elements: {
-      scene: {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "cam",
-          "controls",
-          "tunnel",
-          "stars",
-          "sparkles-core",
-          "sparkles-wide",
-          "ambient",
-          "center-light",
-          "shake",
-          "post",
-          "fog",
-        ],
-      },
-      cam: {
-        type: "PerspectiveCamera",
-        props: {
-          position: [0, 0, 2],
-          rotation: null,
-          scale: null,
-          fov: 80,
-          near: 0.1,
-          far: 200,
-          makeDefault: true,
-        },
-        children: [],
-      },
-      controls: {
-        type: "OrbitControls",
-        props: {
-          enableRotate: false,
-          enableZoom: false,
-          enablePan: false,
-        },
-        children: [],
-      },
-      tunnel: {
-        type: "WarpTunnel",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          ringCount: 100,
-          radius: 3,
-          length: 50,
-          speed: 12,
-          tubeRadius: 0.025,
-          color1: "#00ffff",
-          color2: "#ff00ff",
-        },
-        children: [],
-      },
-      stars: {
-        type: "Stars",
-        props: {
-          radius: 80,
-          depth: 60,
-          count: 6000,
-          factor: 5,
-          saturation: 0.4,
-          fade: true,
-          speed: 3,
-        },
-        children: [],
-      },
-      "sparkles-core": {
-        type: "Sparkles",
-        props: {
-          position: [0, 0, -10],
-          rotation: null,
-          scale: [4, 4, 30],
-          count: 300,
-          speed: 3,
-          opacity: 1,
-          color: "#00ffff",
-          size: 2,
-          noise: 0.5,
-        },
-        children: [],
-      },
-      "sparkles-wide": {
-        type: "Sparkles",
-        props: {
-          position: [0, 0, -15],
-          rotation: null,
-          scale: [6, 6, 40],
-          count: 200,
-          speed: 4,
-          opacity: 0.7,
-          color: "#ff44ff",
-          size: 1.5,
-          noise: 1,
-        },
-        children: [],
-      },
-      ambient: {
-        type: "AmbientLight",
-        props: { color: "#110033", intensity: 0.2 },
-        children: [],
-      },
-      "center-light": {
-        type: "PointLight",
-        props: {
-          position: [0, 0, -5],
-          rotation: null,
-          scale: null,
-          color: "#00ccff",
-          intensity: 30,
-          distance: 30,
-          decay: 2,
-          castShadow: false,
-        },
-        children: [],
-      },
-      shake: {
-        type: "CameraShake",
-        props: {
-          intensity: 0.3,
-          maxYaw: 0.03,
-          maxPitch: 0.03,
-          maxRoll: 0.02,
-        },
-        children: [],
-      },
-      post: {
-        type: "EffectComposer",
-        props: { enabled: true, multisampling: 8 },
-        children: ["bloom", "vignette"],
-      },
-      bloom: {
-        type: "Bloom",
-        props: {
-          intensity: 2.5,
-          luminanceThreshold: 0.1,
-          luminanceSmoothing: null,
-          mipmapBlur: true,
-        },
-        children: [],
-      },
-      vignette: {
-        type: "Vignette",
-        props: { offset: 0.3, darkness: 0.9 },
-        children: [],
-      },
-      fog: {
-        type: "Fog",
-        props: { color: "#030008", near: 5, far: 50 },
-        children: [],
-      },
-    },
-  },
-};

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

@@ -1,29 +0,0 @@
-import type { Scene } from "./_helpers";
-import { hyperspaceTunnel } from "./hyperspace-tunnel";
-import { orbitalChaos } from "./orbital-chaos";
-import { clockworkOrrery } from "./clockwork-orrery";
-import { deepSeaAbyss } from "./deep-sea-abyss";
-import { stormCell } from "./storm-cell";
-import { perpetualMotion } from "./perpetual-motion";
-import { floatingIslands } from "./floating-islands";
-import { productShowroom } from "./product-showroom";
-import { portalGallery } from "./portal-gallery";
-import { pipes } from "./pipes";
-import { mystify } from "./mystify";
-import { starfield } from "./starfield";
-export type { Scene };
-
-export const scenes: Scene[] = [
-  hyperspaceTunnel,
-  orbitalChaos,
-  clockworkOrrery,
-  deepSeaAbyss,
-  stormCell,
-  perpetualMotion,
-  floatingIslands,
-  productShowroom,
-  portalGallery,
-  pipes,
-  mystify,
-  starfield,
-];

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

@@ -1,400 +0,0 @@
-import type { Scene } from "./_helpers";
-
-export const mystify: Scene = {
-  name: "Mystify",
-  description:
-    "Neon wireframe torus knots orbiting in the void -- the Windows Mystify screensaver in 3D",
-  spec: {
-    root: "scene",
-    elements: {
-      scene: {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "cam",
-          "ambient",
-          "shape1",
-          "shape2",
-          "shape3",
-          "shape4",
-          "shape5",
-          "shape6",
-          "shape7",
-          "post",
-          "controls",
-        ],
-      },
-      cam: {
-        type: "PerspectiveCamera",
-        props: {
-          position: [0, 0, 10],
-          rotation: null,
-          scale: null,
-          fov: 55,
-          near: 0.1,
-          far: 1000,
-          makeDefault: true,
-        },
-        children: [],
-      },
-      ambient: {
-        type: "AmbientLight",
-        props: { color: "#111111", intensity: 0.1 },
-        children: [],
-      },
-      shape1: {
-        type: "Orbit",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 0.5,
-          radius: 3,
-          tilt: 0.3,
-        },
-        children: ["s1-spin"],
-      },
-      "s1-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 1.5,
-          axis: "x",
-        },
-        children: ["s1-body"],
-      },
-      "s1-body": {
-        type: "TorusKnot",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          radius: 0.4,
-          tube: 0.02,
-          p: 2,
-          q: 3,
-          tubularSegments: 128,
-          radialSegments: 4,
-          material: {
-            color: "#00ffff",
-            emissive: "#00ffff",
-            emissiveIntensity: 2,
-            wireframe: true,
-          },
-        },
-        children: [],
-      },
-      shape2: {
-        type: "Orbit",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: -0.4,
-          radius: 4,
-          tilt: -0.5,
-        },
-        children: ["s2-spin"],
-      },
-      "s2-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: -1,
-          axis: "z",
-        },
-        children: ["s2-body"],
-      },
-      "s2-body": {
-        type: "Torus",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          radius: 0.6,
-          tube: 0.015,
-          radialSegments: 4,
-          tubularSegments: 128,
-          material: {
-            color: "#ff00ff",
-            emissive: "#ff00ff",
-            emissiveIntensity: 2,
-            wireframe: true,
-          },
-        },
-        children: [],
-      },
-      shape3: {
-        type: "Orbit",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 0.7,
-          radius: 2.5,
-          tilt: 0.8,
-        },
-        children: ["s3-spin"],
-      },
-      "s3-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 2,
-          axis: "y",
-        },
-        children: ["s3-body"],
-      },
-      "s3-body": {
-        type: "TorusKnot",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          radius: 0.35,
-          tube: 0.015,
-          p: 3,
-          q: 2,
-          tubularSegments: 128,
-          radialSegments: 4,
-          material: {
-            color: "#ffff00",
-            emissive: "#ffff00",
-            emissiveIntensity: 2,
-            wireframe: true,
-          },
-        },
-        children: [],
-      },
-      shape4: {
-        type: "Orbit",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: -0.6,
-          radius: 3.5,
-          tilt: -0.2,
-        },
-        children: ["s4-spin"],
-      },
-      "s4-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 1.2,
-          axis: "x",
-        },
-        children: ["s4-body"],
-      },
-      "s4-body": {
-        type: "Torus",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          radius: 0.5,
-          tube: 0.012,
-          radialSegments: 4,
-          tubularSegments: 128,
-          material: {
-            color: "#00ff44",
-            emissive: "#00ff44",
-            emissiveIntensity: 2,
-            wireframe: true,
-          },
-        },
-        children: [],
-      },
-      shape5: {
-        type: "Orbit",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 0.3,
-          radius: 5,
-          tilt: 0.6,
-        },
-        children: ["s5-spin"],
-      },
-      "s5-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: -1.8,
-          axis: "z",
-        },
-        children: ["s5-body"],
-      },
-      "s5-body": {
-        type: "TorusKnot",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          radius: 0.5,
-          tube: 0.018,
-          p: 2,
-          q: 5,
-          tubularSegments: 128,
-          radialSegments: 4,
-          material: {
-            color: "#ff4400",
-            emissive: "#ff4400",
-            emissiveIntensity: 2,
-            wireframe: true,
-          },
-        },
-        children: [],
-      },
-      shape6: {
-        type: "Orbit",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: -0.8,
-          radius: 2,
-          tilt: -0.7,
-        },
-        children: ["s6-spin"],
-      },
-      "s6-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 2.5,
-          axis: "y",
-        },
-        children: ["s6-body"],
-      },
-      "s6-body": {
-        type: "Torus",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          radius: 0.3,
-          tube: 0.01,
-          radialSegments: 4,
-          tubularSegments: 128,
-          material: {
-            color: "#4488ff",
-            emissive: "#4488ff",
-            emissiveIntensity: 2,
-            wireframe: true,
-          },
-        },
-        children: [],
-      },
-      shape7: {
-        type: "Orbit",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 0.45,
-          radius: 4.5,
-          tilt: 1,
-        },
-        children: ["s7-spin"],
-      },
-      "s7-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: -0.8,
-          axis: "x",
-        },
-        children: ["s7-body"],
-      },
-      "s7-body": {
-        type: "TorusKnot",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          radius: 0.45,
-          tube: 0.015,
-          p: 3,
-          q: 4,
-          tubularSegments: 128,
-          radialSegments: 4,
-          material: {
-            color: "#ff88ff",
-            emissive: "#ff88ff",
-            emissiveIntensity: 2,
-            wireframe: true,
-          },
-        },
-        children: [],
-      },
-      post: {
-        type: "EffectComposer",
-        props: { enabled: true, multisampling: 8 },
-        children: ["bloom", "vignette"],
-      },
-      bloom: {
-        type: "Bloom",
-        props: {
-          intensity: 3,
-          luminanceThreshold: 0.05,
-          luminanceSmoothing: 0.3,
-          mipmapBlur: true,
-        },
-        children: [],
-      },
-      vignette: {
-        type: "Vignette",
-        props: { offset: 0.2, darkness: 0.8 },
-        children: [],
-      },
-      controls: {
-        type: "OrbitControls",
-        props: {
-          enableDamping: true,
-          dampingFactor: null,
-          enableZoom: true,
-          enablePan: true,
-          enableRotate: true,
-          minDistance: 4,
-          maxDistance: 18,
-          minPolarAngle: null,
-          maxPolarAngle: null,
-          autoRotate: true,
-          autoRotateSpeed: 0.3,
-        },
-        children: [],
-      },
-    },
-  },
-};

examples/react-three-fiber/app/scenes/orbital-chaos.ts

@@ -1,554 +0,0 @@
-import { PI } from "./_helpers";
-import type { Scene } from "./_helpers";
-
-export const orbitalChaos: Scene = {
-  name: "Orbital Chaos",
-  description:
-    "Everything in motion -- orbiting glass, spinning knots, morphing core, all with bloom",
-  spec: {
-    root: "scene",
-    elements: {
-      scene: {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "cam",
-          "env",
-          "stars",
-          "ambient",
-          "core-light",
-          "accent-1",
-          "accent-2",
-          "core-pulse",
-          "orbit-1",
-          "orbit-2",
-          "orbit-3",
-          "orbit-4",
-          "orbit-5",
-          "orbit-6",
-          "ring-spin-fast",
-          "ring-spin-slow",
-          "sparkles",
-          "post",
-          "fog",
-          "controls",
-        ],
-      },
-      cam: {
-        type: "PerspectiveCamera",
-        props: {
-          position: [0, 2, 8],
-          fov: 50,
-          makeDefault: true,
-        },
-        children: [],
-      },
-      env: {
-        type: "Environment",
-        props: { preset: "night", background: false, blur: 1, intensity: 0.15 },
-        children: [],
-      },
-      stars: {
-        type: "Stars",
-        props: {
-          radius: 120,
-          depth: 60,
-          count: 8000,
-          factor: 5,
-          saturation: 0.2,
-          fade: true,
-          speed: 0.5,
-        },
-        children: [],
-      },
-      ambient: {
-        type: "AmbientLight",
-        props: { color: "#110022", intensity: 0.3 },
-        children: [],
-      },
-      "core-light": {
-        type: "PointLight",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          color: "#ff44aa",
-          intensity: 80,
-          distance: 25,
-          decay: 2,
-          castShadow: false,
-        },
-        children: [],
-      },
-      "accent-1": {
-        type: "PointLight",
-        props: {
-          position: [5, 3, 5],
-          rotation: null,
-          scale: null,
-          color: "#00ffff",
-          intensity: 25,
-          distance: 20,
-          decay: 2,
-          castShadow: false,
-        },
-        children: [],
-      },
-      "accent-2": {
-        type: "PointLight",
-        props: {
-          position: [-5, -2, -5],
-          rotation: null,
-          scale: null,
-          color: "#ff00ff",
-          intensity: 25,
-          distance: 20,
-          decay: 2,
-          castShadow: false,
-        },
-        children: [],
-      },
-
-      "core-pulse": {
-        type: "Pulse",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 0.8,
-          min: 0.85,
-          max: 1.15,
-        },
-        children: ["core-spin"],
-      },
-      "core-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 0.3,
-          axis: "y",
-        },
-        children: ["core-blob"],
-      },
-      "core-blob": {
-        type: "DistortSphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          radius: 1.2,
-          widthSegments: 64,
-          heightSegments: 32,
-          color: "#ff2288",
-          speed: 4,
-          distort: 0.6,
-          metalness: 0.1,
-          roughness: 0.1,
-        },
-        children: [],
-      },
-
-      "orbit-1": {
-        type: "Orbit",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          speed: 0.8,
-          radius: 4,
-          tilt: 0.5,
-        },
-        children: ["orb-1-spin"],
-      },
-      "orb-1-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 2,
-          axis: "x",
-        },
-        children: ["orb-1"],
-      },
-      "orb-1": {
-        type: "GlassSphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          radius: 0.4,
-          widthSegments: 32,
-          heightSegments: 16,
-          color: "#00ffff",
-          transmission: 1,
-          thickness: 0.5,
-          roughness: 0,
-          chromaticAberration: 0.15,
-          ior: 1.8,
-          distortion: 0.1,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-
-      "orbit-2": {
-        type: "Orbit",
-        props: {
-          position: [0, 0.5, 0],
-          rotation: null,
-          scale: null,
-          speed: -0.6,
-          radius: 5.5,
-          tilt: 1,
-        },
-        children: ["orb-2-spin"],
-      },
-      "orb-2-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 3,
-          axis: "z",
-        },
-        children: ["orb-2"],
-      },
-      "orb-2": {
-        type: "TorusKnot",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          material: {
-            color: "#ff00ff",
-            metalness: 0.9,
-            roughness: 0.1,
-            emissive: "#ff00ff",
-            emissiveIntensity: 0.8,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 0.35,
-          tube: 0.12,
-          tubularSegments: 64,
-          radialSegments: 8,
-          p: 2,
-          q: 3,
-        },
-        children: [],
-      },
-
-      "orbit-3": {
-        type: "Orbit",
-        props: {
-          position: [0, -0.3, 0],
-          rotation: null,
-          scale: null,
-          speed: 1.2,
-          radius: 3.2,
-          tilt: 0.3,
-        },
-        children: ["orb-3"],
-      },
-      "orb-3": {
-        type: "GlassSphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          radius: 0.3,
-          widthSegments: 32,
-          heightSegments: 16,
-          color: "#ff8800",
-          transmission: 1,
-          thickness: 0.4,
-          roughness: 0,
-          chromaticAberration: 0.1,
-          ior: 1.6,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-
-      "orbit-4": {
-        type: "Orbit",
-        props: {
-          position: [0, 1, 0],
-          rotation: null,
-          scale: null,
-          speed: -1.5,
-          radius: 6.5,
-          tilt: -0.8,
-        },
-        children: ["orb-4-spin"],
-      },
-      "orb-4-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: -4,
-          axis: "y",
-        },
-        children: ["orb-4"],
-      },
-      "orb-4": {
-        type: "Sphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          material: {
-            color: "#00ff88",
-            metalness: null,
-            roughness: null,
-            emissive: "#00ff88",
-            emissiveIntensity: 0.8,
-            opacity: null,
-            transparent: null,
-            wireframe: true,
-          },
-          radius: 0.35,
-          widthSegments: 16,
-          heightSegments: 12,
-        },
-        children: [],
-      },
-
-      "orbit-5": {
-        type: "Orbit",
-        props: {
-          position: [0, -0.5, 0],
-          rotation: null,
-          scale: null,
-          speed: 0.4,
-          radius: 8,
-          tilt: 0.2,
-        },
-        children: ["orb-5-spin"],
-      },
-      "orb-5-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 1.5,
-          axis: "z",
-        },
-        children: ["orb-5"],
-      },
-      "orb-5": {
-        type: "GlassBox",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          width: 0.5,
-          height: 0.5,
-          depth: 0.5,
-          color: "#ff44ff",
-          transmission: 1,
-          thickness: 0.4,
-          roughness: 0,
-          chromaticAberration: 0.08,
-          ior: 1.7,
-          distortion: 0,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-
-      "orbit-6": {
-        type: "Orbit",
-        props: {
-          position: [0, 0.8, 0],
-          rotation: null,
-          scale: null,
-          speed: 2,
-          radius: 2.2,
-          tilt: 1.5,
-        },
-        children: ["orb-6"],
-      },
-      "orb-6": {
-        type: "DistortSphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          radius: 0.25,
-          widthSegments: 32,
-          heightSegments: 16,
-          color: "#ffcc00",
-          speed: 5,
-          distort: 0.7,
-          metalness: 0.5,
-          roughness: 0.1,
-        },
-        children: [],
-      },
-
-      "ring-spin-fast": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: [0.3, 0, 0],
-          scale: null,
-          speed: 0.5,
-          axis: "y",
-        },
-        children: ["ring-inner"],
-      },
-      "ring-inner": {
-        type: "Torus",
-        props: {
-          position: null,
-          rotation: [PI / 2, 0, 0],
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          material: {
-            color: "#00ffff",
-            metalness: 0.9,
-            roughness: 0.1,
-            emissive: "#00ccff",
-            emissiveIntensity: 0.5,
-            opacity: 0.3,
-            transparent: true,
-            wireframe: null,
-          },
-          radius: 9,
-          tube: 0.015,
-          radialSegments: null,
-          tubularSegments: 128,
-        },
-        children: [],
-      },
-      "ring-spin-slow": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: [-0.5, 0, 0.3],
-          scale: null,
-          speed: -0.3,
-          axis: "y",
-        },
-        children: ["ring-outer"],
-      },
-      "ring-outer": {
-        type: "Torus",
-        props: {
-          position: null,
-          rotation: [PI / 2, 0, 0],
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          material: {
-            color: "#ff00ff",
-            metalness: 0.9,
-            roughness: 0.1,
-            emissive: "#ff00aa",
-            emissiveIntensity: 0.3,
-            opacity: 0.2,
-            transparent: true,
-            wireframe: null,
-          },
-          radius: 11,
-          tube: 0.012,
-          radialSegments: null,
-          tubularSegments: 128,
-        },
-        children: [],
-      },
-
-      sparkles: {
-        type: "Sparkles",
-        props: {
-          position: null,
-          rotation: null,
-          scale: [18, 18, 18],
-          count: 400,
-          speed: 0.4,
-          opacity: 0.5,
-          color: "#ffddaa",
-          size: 1.2,
-          noise: 2,
-        },
-        children: [],
-      },
-      post: {
-        type: "EffectComposer",
-        props: { enabled: true, multisampling: 8 },
-        children: ["bloom", "vignette"],
-      },
-      bloom: {
-        type: "Bloom",
-        props: {
-          intensity: 2,
-          luminanceThreshold: 0.15,
-          luminanceSmoothing: null,
-          mipmapBlur: true,
-        },
-        children: [],
-      },
-      vignette: {
-        type: "Vignette",
-        props: { offset: 0.4, darkness: 0.7 },
-        children: [],
-      },
-      fog: {
-        type: "Fog",
-        props: { color: "#030008", near: 10, far: 40 },
-        children: [],
-      },
-      controls: {
-        type: "OrbitControls",
-        props: {
-          enableDamping: true,
-          dampingFactor: null,
-          enableZoom: true,
-          enablePan: null,
-          enableRotate: true,
-          minDistance: 5,
-          maxDistance: 25,
-          minPolarAngle: null,
-          maxPolarAngle: null,
-          autoRotate: true,
-          autoRotateSpeed: 0.4,
-        },
-        children: [],
-      },
-    },
-  },
-};

examples/react-three-fiber/app/scenes/perpetual-motion.ts

@@ -1,307 +0,0 @@
-import { PI } from "./_helpers";
-import type { Scene } from "./_helpers";
-
-export const perpetualMotion: Scene = {
-  name: "Perpetual Motion Machine",
-  description:
-    "A gyroscope/gimbal with 3 nested spinning rings on different axes, with a perfectly still glass sphere floating at the center. Clean, minimal, mesmerizing.",
-  spec: {
-    root: "scene",
-    elements: {
-      scene: {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "env",
-          "ambient",
-          "key",
-          "fill",
-          "outer-spin",
-          "sparkles",
-          "floor",
-          "shadows",
-          "post",
-          "controls",
-        ],
-      },
-      env: {
-        type: "Environment",
-        props: {
-          preset: "studio",
-          background: false,
-          blur: null,
-          intensity: 1,
-        },
-        children: [],
-      },
-      ambient: {
-        type: "AmbientLight",
-        props: { color: "#ffffff", intensity: 0.3 },
-        children: [],
-      },
-      key: {
-        type: "DirectionalLight",
-        props: {
-          position: [5, 8, 5],
-          rotation: null,
-          scale: null,
-          color: "#ffffff",
-          intensity: 2,
-          castShadow: true,
-        },
-        children: [],
-      },
-      fill: {
-        type: "PointLight",
-        props: {
-          position: [-3, 4, -3],
-          rotation: null,
-          scale: null,
-          color: "#aaccff",
-          intensity: 10,
-          distance: 15,
-          decay: 2,
-          castShadow: false,
-        },
-        children: [],
-      },
-      "outer-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 0.4,
-          axis: "y",
-        },
-        children: ["outer-ring", "mid-spin"],
-      },
-      "outer-ring": {
-        type: "Torus",
-        props: {
-          position: null,
-          rotation: [PI / 2, 0, 0],
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          material: {
-            color: "#cccccc",
-            metalness: 1,
-            roughness: 0.05,
-            emissive: "#ffffff",
-            emissiveIntensity: 0.05,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 4,
-          tube: 0.06,
-          radialSegments: null,
-          tubularSegments: 128,
-        },
-        children: [],
-      },
-      "mid-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: -0.8,
-          axis: "x",
-        },
-        children: ["mid-ring", "inner-spin"],
-      },
-      "mid-ring": {
-        type: "Torus",
-        props: {
-          position: null,
-          rotation: [PI / 2, 0, 0],
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          material: {
-            color: "#ffcc44",
-            metalness: 0.95,
-            roughness: 0.08,
-            emissive: "#cc9900",
-            emissiveIntensity: 0.1,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 3,
-          tube: 0.05,
-          radialSegments: null,
-          tubularSegments: 128,
-        },
-        children: [],
-      },
-      "inner-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 1.5,
-          axis: "z",
-        },
-        children: ["inner-ring", "center-float"],
-      },
-      "inner-ring": {
-        type: "Torus",
-        props: {
-          position: null,
-          rotation: [PI / 2, 0, 0],
-          scale: null,
-          castShadow: false,
-          receiveShadow: false,
-          material: {
-            color: "#cc8844",
-            metalness: 0.9,
-            roughness: 0.1,
-            emissive: "#996633",
-            emissiveIntensity: 0.1,
-            opacity: null,
-            transparent: null,
-            wireframe: null,
-          },
-          radius: 2,
-          tube: 0.04,
-          radialSegments: null,
-          tubularSegments: 128,
-        },
-        children: [],
-      },
-      "center-float": {
-        type: "Float",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          speed: 0.3,
-          rotationIntensity: 0,
-          floatIntensity: 0.1,
-          enabled: true,
-        },
-        children: ["center-orb"],
-      },
-      "center-orb": {
-        type: "GlassSphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: true,
-          receiveShadow: false,
-          radius: 0.8,
-          widthSegments: 64,
-          heightSegments: 32,
-          color: "#ffffff",
-          transmission: 1,
-          thickness: 1,
-          roughness: 0,
-          chromaticAberration: 0.12,
-          ior: 2,
-          distortion: 0.1,
-          distortionScale: 0.4,
-          temporalDistortion: 0.4,
-          samples: 10,
-          resolution: 256,
-        },
-        children: [],
-      },
-      sparkles: {
-        type: "Sparkles",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: [10, 10, 10],
-          count: 100,
-          speed: 0.1,
-          opacity: 0.2,
-          color: "#ccddff",
-          size: 0.8,
-          noise: 2,
-        },
-        children: [],
-      },
-      floor: {
-        type: "ReflectorPlane",
-        props: {
-          position: [0, -4.5, 0],
-          rotation: [-PI / 2, 0, 0],
-          scale: null,
-          width: 25,
-          height: 25,
-          color: "#1a1a2a",
-          resolution: 1024,
-          blur: 400,
-          mirror: 0.7,
-          mixBlur: 10,
-          mixStrength: 2,
-          depthScale: 0.2,
-          metalness: 0.5,
-          roughness: 1,
-        },
-        children: [],
-      },
-      shadows: {
-        type: "ContactShadows",
-        props: {
-          position: [0, -4.5, 0],
-          rotation: null,
-          scale: null,
-          opacity: 0.3,
-          width: 12,
-          height: 12,
-          blur: 2.5,
-          near: null,
-          far: 10,
-          smooth: true,
-          resolution: 512,
-          frames: null,
-          color: "#000000",
-        },
-        children: [],
-      },
-      post: {
-        type: "EffectComposer",
-        props: { enabled: true, multisampling: 8 },
-        children: ["bloom", "vignette"],
-      },
-      bloom: {
-        type: "Bloom",
-        props: {
-          intensity: 0.8,
-          luminanceThreshold: 0.25,
-          luminanceSmoothing: null,
-          mipmapBlur: true,
-        },
-        children: [],
-      },
-      vignette: {
-        type: "Vignette",
-        props: { offset: 0.5, darkness: 0.4 },
-        children: [],
-      },
-      controls: {
-        type: "OrbitControls",
-        props: {
-          enableDamping: true,
-          dampingFactor: null,
-          enableZoom: true,
-          enablePan: null,
-          enableRotate: true,
-          minDistance: 5,
-          maxDistance: 16,
-          minPolarAngle: 0.3,
-          maxPolarAngle: 1.5,
-          autoRotate: true,
-          autoRotateSpeed: 0.3,
-        },
-        children: [],
-      },
-    },
-  },
-};

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

@@ -1,764 +0,0 @@
-import type { Scene } from "./_helpers";
-
-const goldMaterial = {
-  color: "#cc8833",
-  metalness: 1,
-  roughness: 0.05,
-};
-
-const blueMaterial = {
-  color: "#3388cc",
-  metalness: 1,
-  roughness: 0.05,
-};
-
-const magentaMaterial = {
-  color: "#cc3388",
-  metalness: 1,
-  roughness: 0.05,
-};
-
-export const pipes: Scene = {
-  name: "Pipes",
-  description:
-    "Classic 3D Pipes screensaver -- chrome pipes snaking through space at right angles",
-  spec: {
-    root: "scene",
-    elements: {
-      scene: {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "camera",
-          "env",
-          "ambient",
-          "directional",
-          "pipe-system",
-          "post",
-          "fog",
-          "controls",
-        ],
-      },
-      camera: {
-        type: "PerspectiveCamera",
-        props: {
-          position: [0, 3, 12],
-          rotation: null,
-          scale: null,
-          fov: 50,
-          near: null,
-          far: null,
-          makeDefault: true,
-        },
-        children: [],
-      },
-      env: {
-        type: "Environment",
-        props: {
-          preset: "warehouse",
-          background: false,
-          blur: 0.5,
-          intensity: 1,
-        },
-        children: [],
-      },
-      ambient: {
-        type: "AmbientLight",
-        props: { color: "#ffffff", intensity: 0.3 },
-        children: [],
-      },
-      directional: {
-        type: "DirectionalLight",
-        props: {
-          position: [5, 10, 5],
-          rotation: null,
-          scale: null,
-          color: "#ffffff",
-          intensity: 1,
-          castShadow: null,
-        },
-        children: [],
-      },
-      "pipe-system": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 0.1,
-          axis: "y",
-        },
-        children: ["pipe1-group", "pipe2-group", "pipe3-group"],
-      },
-      "pipe1-group": {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "p1-j0",
-          "p1-s1",
-          "p1-j1",
-          "p1-s2",
-          "p1-j2",
-          "p1-s3",
-          "p1-j3",
-          "p1-s4",
-          "p1-j4",
-          "p1-s5",
-          "p1-j5",
-          "p1-s6",
-          "p1-j6",
-        ],
-      },
-      "p1-j0": {
-        type: "Sphere",
-        props: {
-          position: [-3, -3, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: goldMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p1-j1": {
-        type: "Sphere",
-        props: {
-          position: [-3, 0, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: goldMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p1-j2": {
-        type: "Sphere",
-        props: {
-          position: [1, 0, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: goldMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p1-j3": {
-        type: "Sphere",
-        props: {
-          position: [1, 2, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: goldMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p1-j4": {
-        type: "Sphere",
-        props: {
-          position: [1, 2, -3],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: goldMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p1-j5": {
-        type: "Sphere",
-        props: {
-          position: [1, 0, -3],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: goldMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p1-j6": {
-        type: "Sphere",
-        props: {
-          position: [-1, 0, -3],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: goldMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p1-s1": {
-        type: "Cylinder",
-        props: {
-          position: [-3, -1.5, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: goldMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 3,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "p1-s2": {
-        type: "Cylinder",
-        props: {
-          position: [-1, 0, 0],
-          rotation: [0, 0, 1.5708],
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: goldMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 4,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "p1-s3": {
-        type: "Cylinder",
-        props: {
-          position: [1, 1, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: goldMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 2,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "p1-s4": {
-        type: "Cylinder",
-        props: {
-          position: [1, 2, -1.5],
-          rotation: [1.5708, 0, 0],
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: goldMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 3,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "p1-s5": {
-        type: "Cylinder",
-        props: {
-          position: [1, 1, -3],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: goldMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 2,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "p1-s6": {
-        type: "Cylinder",
-        props: {
-          position: [0, 0, -3],
-          rotation: [0, 0, 1.5708],
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: goldMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 2,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "pipe2-group": {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "p2-j0",
-          "p2-s1",
-          "p2-j1",
-          "p2-s2",
-          "p2-j2",
-          "p2-s3",
-          "p2-j3",
-          "p2-s4",
-          "p2-j4",
-          "p2-s5",
-          "p2-j5",
-          "p2-s6",
-          "p2-j6",
-        ],
-      },
-      "p2-j0": {
-        type: "Sphere",
-        props: {
-          position: [2, -3, 2],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: blueMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p2-j1": {
-        type: "Sphere",
-        props: {
-          position: [2, 1, 2],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: blueMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p2-j2": {
-        type: "Sphere",
-        props: {
-          position: [2, 1, -2],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: blueMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p2-j3": {
-        type: "Sphere",
-        props: {
-          position: [-1, 1, -2],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: blueMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p2-j4": {
-        type: "Sphere",
-        props: {
-          position: [-1, 4, -2],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: blueMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p2-j5": {
-        type: "Sphere",
-        props: {
-          position: [-3, 4, -2],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: blueMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p2-j6": {
-        type: "Sphere",
-        props: {
-          position: [-3, 4, 1],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: blueMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p2-s1": {
-        type: "Cylinder",
-        props: {
-          position: [2, -1, 2],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: blueMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 4,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "p2-s2": {
-        type: "Cylinder",
-        props: {
-          position: [2, 1, 0],
-          rotation: [1.5708, 0, 0],
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: blueMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 4,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "p2-s3": {
-        type: "Cylinder",
-        props: {
-          position: [0.5, 1, -2],
-          rotation: [0, 0, 1.5708],
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: blueMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 3,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "p2-s4": {
-        type: "Cylinder",
-        props: {
-          position: [-1, 2.5, -2],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: blueMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 3,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "p2-s5": {
-        type: "Cylinder",
-        props: {
-          position: [-2, 4, -2],
-          rotation: [0, 0, 1.5708],
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: blueMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 2,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "p2-s6": {
-        type: "Cylinder",
-        props: {
-          position: [-3, 4, -0.5],
-          rotation: [1.5708, 0, 0],
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: blueMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 3,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "pipe3-group": {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "p3-j0",
-          "p3-s1",
-          "p3-j1",
-          "p3-s2",
-          "p3-j2",
-          "p3-s3",
-          "p3-j3",
-          "p3-s4",
-          "p3-j4",
-          "p3-s5",
-          "p3-j5",
-        ],
-      },
-      "p3-j0": {
-        type: "Sphere",
-        props: {
-          position: [-2, 3, 3],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: magentaMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p3-j1": {
-        type: "Sphere",
-        props: {
-          position: [-2, -2, 3],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: magentaMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p3-j2": {
-        type: "Sphere",
-        props: {
-          position: [1, -2, 3],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: magentaMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p3-j3": {
-        type: "Sphere",
-        props: {
-          position: [1, -2, -2],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: magentaMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p3-j4": {
-        type: "Sphere",
-        props: {
-          position: [1, 0, -2],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: magentaMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p3-j5": {
-        type: "Sphere",
-        props: {
-          position: [-3, 0, -2],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: magentaMaterial,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-        },
-        children: [],
-      },
-      "p3-s1": {
-        type: "Cylinder",
-        props: {
-          position: [-2, 0.5, 3],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: magentaMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 5,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "p3-s2": {
-        type: "Cylinder",
-        props: {
-          position: [-0.5, -2, 3],
-          rotation: [0, 0, 1.5708],
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: magentaMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 3,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "p3-s3": {
-        type: "Cylinder",
-        props: {
-          position: [1, -2, 0.5],
-          rotation: [1.5708, 0, 0],
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: magentaMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 5,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "p3-s4": {
-        type: "Cylinder",
-        props: {
-          position: [1, -1, -2],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: magentaMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 2,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      "p3-s5": {
-        type: "Cylinder",
-        props: {
-          position: [-1, 0, -2],
-          rotation: [0, 0, 1.5708],
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          material: magentaMaterial,
-          radiusTop: 0.08,
-          radiusBottom: 0.08,
-          height: 4,
-          radialSegments: 12,
-        },
-        children: [],
-      },
-      post: {
-        type: "EffectComposer",
-        props: { enabled: true, multisampling: 8 },
-        children: ["bloom", "vignette"],
-      },
-      bloom: {
-        type: "Bloom",
-        props: {
-          intensity: 0.4,
-          luminanceThreshold: 0.4,
-          luminanceSmoothing: null,
-          mipmapBlur: true,
-        },
-        children: [],
-      },
-      vignette: {
-        type: "Vignette",
-        props: { offset: 0.3, darkness: 0.4 },
-        children: [],
-      },
-      fog: {
-        type: "Fog",
-        props: { color: "#111111", near: 10, far: 30 },
-        children: [],
-      },
-      controls: {
-        type: "OrbitControls",
-        props: {
-          enableDamping: true,
-          dampingFactor: null,
-          enableZoom: null,
-          enablePan: null,
-          enableRotate: null,
-          minDistance: 5,
-          maxDistance: 20,
-          minPolarAngle: null,
-          maxPolarAngle: null,
-          autoRotate: true,
-          autoRotateSpeed: 0.6,
-        },
-        children: [],
-      },
-    },
-  },
-};

examples/react-three-fiber/app/scenes/portal-gallery.ts

@@ -1,809 +0,0 @@
-import type { Scene } from "./_helpers";
-
-export const portalGallery: Scene = {
-  name: "Portal Gallery",
-  description:
-    "Three framed portals into different worlds -- sunset clouds, starfield, and enchanted forest",
-  spec: {
-    root: "scene",
-    elements: {
-      scene: {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "cam",
-          "env",
-          "ambient",
-          "directional",
-          "floor",
-          "shadows",
-          "frame1",
-          "frame2",
-          "frame3",
-          "gallery-sparkles",
-          "post",
-          "controls",
-        ],
-      },
-      cam: {
-        type: "PerspectiveCamera",
-        props: {
-          position: [0, 2, 7],
-          rotation: null,
-          scale: null,
-          fov: 50,
-          near: 0.1,
-          far: 200,
-          makeDefault: true,
-        },
-        children: [],
-      },
-      env: {
-        type: "Environment",
-        props: {
-          preset: "lobby",
-          background: false,
-          blur: 0,
-          intensity: 0.4,
-        },
-        children: [],
-      },
-      ambient: {
-        type: "AmbientLight",
-        props: { color: "#e8e0d8", intensity: 0.5 },
-        children: [],
-      },
-      directional: {
-        type: "DirectionalLight",
-        props: {
-          position: [5, 8, 3],
-          rotation: null,
-          scale: null,
-          color: "#ffffff",
-          intensity: 1,
-          castShadow: true,
-        },
-        children: [],
-      },
-      floor: {
-        type: "ReflectorPlane",
-        props: {
-          position: [0, 0, 0],
-          rotation: [-1.5708, 0, 0],
-          scale: null,
-          width: 30,
-          height: 30,
-          color: "#2a2a2a",
-          resolution: 1024,
-          blur: 400,
-          mirror: 0.4,
-          mixBlur: 10,
-          mixStrength: 1.5,
-          metalness: 0.5,
-          roughness: 0.8,
-        },
-        children: [],
-      },
-      shadows: {
-        type: "ContactShadows",
-        props: {
-          position: [0, 0.01, 0],
-          rotation: null,
-          scale: null,
-          opacity: 0.4,
-          width: 20,
-          height: 20,
-          blur: 2.5,
-          far: 8,
-          color: "#000000",
-        },
-        children: [],
-      },
-
-      // --- PORTAL 1 (left, sunset world) ---
-      frame1: {
-        type: "Group",
-        props: {
-          position: [-3.5, 2, -2],
-          rotation: [0, 0.3, 0],
-          scale: null,
-        },
-        children: [
-          "frame1-top",
-          "frame1-bottom",
-          "frame1-left",
-          "frame1-right",
-          "portal1-mesh",
-        ],
-      },
-      "frame1-top": {
-        type: "Box",
-        props: {
-          position: [0, 1.55, 0],
-          rotation: null,
-          scale: null,
-          width: 2.3,
-          height: 0.15,
-          depth: 0.15,
-          material: { color: "#8B7355", metalness: 0.3, roughness: 0.6 },
-        },
-        children: [],
-      },
-      "frame1-bottom": {
-        type: "Box",
-        props: {
-          position: [0, -1.55, 0],
-          rotation: null,
-          scale: null,
-          width: 2.3,
-          height: 0.15,
-          depth: 0.15,
-          material: { color: "#8B7355", metalness: 0.3, roughness: 0.6 },
-        },
-        children: [],
-      },
-      "frame1-left": {
-        type: "Box",
-        props: {
-          position: [-1.075, 0, 0],
-          rotation: null,
-          scale: null,
-          width: 0.15,
-          height: 3.25,
-          depth: 0.15,
-          material: { color: "#8B7355", metalness: 0.3, roughness: 0.6 },
-        },
-        children: [],
-      },
-      "frame1-right": {
-        type: "Box",
-        props: {
-          position: [1.075, 0, 0],
-          rotation: null,
-          scale: null,
-          width: 0.15,
-          height: 3.25,
-          depth: 0.15,
-          material: { color: "#8B7355", metalness: 0.3, roughness: 0.6 },
-        },
-        children: [],
-      },
-      "portal1-mesh": {
-        type: "Plane",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          width: 2,
-          height: 3,
-        },
-        children: ["portal1-mat"],
-      },
-      "portal1-mat": {
-        type: "MeshPortalMaterial",
-        props: { blend: 0, blur: 0.5, resolution: 512 },
-        children: [
-          "p1-sky",
-          "p1-sun-light",
-          "p1-cloud1",
-          "p1-cloud2",
-          "p1-cloud3",
-          "p1-ground",
-        ],
-      },
-      "p1-sky": {
-        type: "Sky",
-        props: {
-          distance: null,
-          sunPosition: [100, 10, 50],
-          inclination: null,
-          azimuth: null,
-          rayleigh: 2,
-          turbidity: 10,
-          mieCoefficient: 0.005,
-          mieDirectionalG: null,
-        },
-        children: [],
-      },
-      "p1-sun-light": {
-        type: "DirectionalLight",
-        props: {
-          position: [5, 5, 3],
-          rotation: null,
-          scale: null,
-          color: "#ffaa55",
-          intensity: 2,
-          castShadow: false,
-        },
-        children: [],
-      },
-      "p1-cloud1": {
-        type: "Cloud",
-        props: {
-          position: [-3, 4, -5],
-          rotation: null,
-          scale: null,
-          seed: 1,
-          segments: 20,
-          bounds: [6, 2, 3],
-          opacity: 0.6,
-          color: "#ffddaa",
-          speed: 0.1,
-          volume: 5,
-          fade: null,
-          growth: null,
-        },
-        children: [],
-      },
-      "p1-cloud2": {
-        type: "Cloud",
-        props: {
-          position: [4, 5, -8],
-          rotation: null,
-          scale: null,
-          seed: 7,
-          segments: 25,
-          bounds: [8, 2, 4],
-          opacity: 0.5,
-          color: "#ffccaa",
-          speed: 0.08,
-          volume: 6,
-          fade: null,
-          growth: null,
-        },
-        children: [],
-      },
-      "p1-cloud3": {
-        type: "Cloud",
-        props: {
-          position: [0, 3.5, -4],
-          rotation: null,
-          scale: null,
-          seed: 14,
-          segments: 15,
-          bounds: [5, 1.5, 2.5],
-          opacity: 0.7,
-          color: "#ffeedd",
-          speed: 0.12,
-          volume: 4,
-          fade: null,
-          growth: null,
-        },
-        children: [],
-      },
-      "p1-ground": {
-        type: "Plane",
-        props: {
-          position: [0, -2, 0],
-          rotation: [-1.5708, 0, 0],
-          scale: null,
-          width: 30,
-          height: 30,
-          material: { color: "#886644", roughness: 1 },
-        },
-        children: [],
-      },
-
-      // --- PORTAL 2 (center, night/stars world) ---
-      frame2: {
-        type: "Group",
-        props: {
-          position: [0, 2, -3],
-          rotation: null,
-          scale: null,
-        },
-        children: [
-          "frame2-top",
-          "frame2-bottom",
-          "frame2-left",
-          "frame2-right",
-          "portal2-mesh",
-        ],
-      },
-      "frame2-top": {
-        type: "Box",
-        props: {
-          position: [0, 1.55, 0],
-          rotation: null,
-          scale: null,
-          width: 2.3,
-          height: 0.15,
-          depth: 0.15,
-          material: { color: "#555566", metalness: 0.8, roughness: 0.2 },
-        },
-        children: [],
-      },
-      "frame2-bottom": {
-        type: "Box",
-        props: {
-          position: [0, -1.55, 0],
-          rotation: null,
-          scale: null,
-          width: 2.3,
-          height: 0.15,
-          depth: 0.15,
-          material: { color: "#555566", metalness: 0.8, roughness: 0.2 },
-        },
-        children: [],
-      },
-      "frame2-left": {
-        type: "Box",
-        props: {
-          position: [-1.075, 0, 0],
-          rotation: null,
-          scale: null,
-          width: 0.15,
-          height: 3.25,
-          depth: 0.15,
-          material: { color: "#555566", metalness: 0.8, roughness: 0.2 },
-        },
-        children: [],
-      },
-      "frame2-right": {
-        type: "Box",
-        props: {
-          position: [1.075, 0, 0],
-          rotation: null,
-          scale: null,
-          width: 0.15,
-          height: 3.25,
-          depth: 0.15,
-          material: { color: "#555566", metalness: 0.8, roughness: 0.2 },
-        },
-        children: [],
-      },
-      "portal2-mesh": {
-        type: "Plane",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          width: 2,
-          height: 3,
-        },
-        children: ["portal2-mat"],
-      },
-      "portal2-mat": {
-        type: "MeshPortalMaterial",
-        props: { blend: 0, blur: 0.5, resolution: 512 },
-        children: [
-          "p2-stars",
-          "p2-ambient",
-          "p2-nebula1",
-          "p2-nebula2",
-          "p2-sparkles",
-        ],
-      },
-      "p2-stars": {
-        type: "Stars",
-        props: {
-          radius: 80,
-          depth: 40,
-          count: 6000,
-          factor: 5,
-          saturation: 0.5,
-          fade: true,
-          speed: 0.3,
-        },
-        children: [],
-      },
-      "p2-ambient": {
-        type: "AmbientLight",
-        props: { color: "#111133", intensity: 0.3 },
-        children: [],
-      },
-      "p2-nebula1": {
-        type: "Sphere",
-        props: {
-          position: [3, 2, -8],
-          rotation: null,
-          scale: null,
-          radius: 2,
-          widthSegments: null,
-          heightSegments: null,
-          material: {
-            color: "#4400aa",
-            emissive: "#4400aa",
-            emissiveIntensity: 0.5,
-            transparent: true,
-            opacity: 0.3,
-          },
-        },
-        children: [],
-      },
-      "p2-nebula2": {
-        type: "Sphere",
-        props: {
-          position: [-4, -1, -10],
-          rotation: null,
-          scale: null,
-          radius: 3,
-          widthSegments: null,
-          heightSegments: null,
-          material: {
-            color: "#aa0044",
-            emissive: "#aa0044",
-            emissiveIntensity: 0.4,
-            transparent: true,
-            opacity: 0.25,
-          },
-        },
-        children: [],
-      },
-      "p2-sparkles": {
-        type: "Sparkles",
-        props: {
-          position: [0, 0, -5],
-          rotation: null,
-          scale: [10, 10, 10],
-          count: 200,
-          speed: 0.2,
-          opacity: 0.8,
-          color: "#aabbff",
-          size: 2,
-          noise: 3,
-        },
-        children: [],
-      },
-
-      // --- PORTAL 3 (right, forest/nature world) ---
-      frame3: {
-        type: "Group",
-        props: {
-          position: [3.5, 2, -2],
-          rotation: [0, -0.3, 0],
-          scale: null,
-        },
-        children: [
-          "frame3-top",
-          "frame3-bottom",
-          "frame3-left",
-          "frame3-right",
-          "portal3-mesh",
-        ],
-      },
-      "frame3-top": {
-        type: "Box",
-        props: {
-          position: [0, 1.55, 0],
-          rotation: null,
-          scale: null,
-          width: 2.3,
-          height: 0.15,
-          depth: 0.15,
-          material: { color: "#6B4423", metalness: 0.1, roughness: 0.8 },
-        },
-        children: [],
-      },
-      "frame3-bottom": {
-        type: "Box",
-        props: {
-          position: [0, -1.55, 0],
-          rotation: null,
-          scale: null,
-          width: 2.3,
-          height: 0.15,
-          depth: 0.15,
-          material: { color: "#6B4423", metalness: 0.1, roughness: 0.8 },
-        },
-        children: [],
-      },
-      "frame3-left": {
-        type: "Box",
-        props: {
-          position: [-1.075, 0, 0],
-          rotation: null,
-          scale: null,
-          width: 0.15,
-          height: 3.25,
-          depth: 0.15,
-          material: { color: "#6B4423", metalness: 0.1, roughness: 0.8 },
-        },
-        children: [],
-      },
-      "frame3-right": {
-        type: "Box",
-        props: {
-          position: [1.075, 0, 0],
-          rotation: null,
-          scale: null,
-          width: 0.15,
-          height: 3.25,
-          depth: 0.15,
-          material: { color: "#6B4423", metalness: 0.1, roughness: 0.8 },
-        },
-        children: [],
-      },
-      "portal3-mesh": {
-        type: "Plane",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          width: 2,
-          height: 3,
-        },
-        children: ["portal3-mat"],
-      },
-      "portal3-mat": {
-        type: "MeshPortalMaterial",
-        props: { blend: 0, blur: 0.5, resolution: 512 },
-        children: [
-          "p3-env",
-          "p3-ambient",
-          "p3-sun",
-          "p3-tree1",
-          "p3-tree2",
-          "p3-tree3",
-          "p3-tree4",
-          "p3-tree5",
-          "p3-ground",
-          "p3-fireflies",
-        ],
-      },
-      "p3-env": {
-        type: "Environment",
-        props: { preset: "forest", background: false, blur: 0, intensity: 0.8 },
-        children: [],
-      },
-      "p3-ambient": {
-        type: "AmbientLight",
-        props: { color: "#334422", intensity: 0.4 },
-        children: [],
-      },
-      "p3-sun": {
-        type: "DirectionalLight",
-        props: {
-          position: [-3, 8, 2],
-          rotation: null,
-          scale: null,
-          color: "#aaffaa",
-          intensity: 1.5,
-          castShadow: true,
-        },
-        children: [],
-      },
-      "p3-tree1": {
-        type: "Group",
-        props: { position: [-2, -2, -4], rotation: null, scale: null },
-        children: ["p3-t1-trunk", "p3-t1-leaves"],
-      },
-      "p3-t1-trunk": {
-        type: "Cylinder",
-        props: {
-          position: [0, 0.6, 0],
-          rotation: null,
-          scale: null,
-          radiusTop: 0.08,
-          radiusBottom: 0.12,
-          height: 1.2,
-          radialSegments: 8,
-          material: { color: "#4a3520", roughness: 0.9 },
-        },
-        children: [],
-      },
-      "p3-t1-leaves": {
-        type: "Cone",
-        props: {
-          position: [0, 1.8, 0],
-          rotation: null,
-          scale: null,
-          radius: 0.6,
-          height: 1.5,
-          radialSegments: 8,
-          material: { color: "#2d5a1e", roughness: 0.8 },
-        },
-        children: [],
-      },
-      "p3-tree2": {
-        type: "Group",
-        props: { position: [1.5, -2, -6], rotation: null, scale: null },
-        children: ["p3-t2-trunk", "p3-t2-leaves"],
-      },
-      "p3-t2-trunk": {
-        type: "Cylinder",
-        props: {
-          position: [0, 0.8, 0],
-          rotation: null,
-          scale: null,
-          radiusTop: 0.1,
-          radiusBottom: 0.15,
-          height: 1.6,
-          radialSegments: 8,
-          material: { color: "#3d2b15", roughness: 0.9 },
-        },
-        children: [],
-      },
-      "p3-t2-leaves": {
-        type: "Cone",
-        props: {
-          position: [0, 2.3, 0],
-          rotation: null,
-          scale: null,
-          radius: 0.8,
-          height: 2,
-          radialSegments: 8,
-          material: { color: "#1e4a10", roughness: 0.8 },
-        },
-        children: [],
-      },
-      "p3-tree3": {
-        type: "Group",
-        props: { position: [-0.5, -2, -3], rotation: null, scale: null },
-        children: ["p3-t3-trunk", "p3-t3-leaves"],
-      },
-      "p3-t3-trunk": {
-        type: "Cylinder",
-        props: {
-          position: [0, 0.5, 0],
-          rotation: null,
-          scale: null,
-          radiusTop: 0.06,
-          radiusBottom: 0.1,
-          height: 1,
-          radialSegments: 8,
-          material: { color: "#4a3520", roughness: 0.9 },
-        },
-        children: [],
-      },
-      "p3-t3-leaves": {
-        type: "Cone",
-        props: {
-          position: [0, 1.5, 0],
-          rotation: null,
-          scale: null,
-          radius: 0.5,
-          height: 1.2,
-          radialSegments: 8,
-          material: { color: "#3a6b2a", roughness: 0.8 },
-        },
-        children: [],
-      },
-      "p3-tree4": {
-        type: "Group",
-        props: { position: [3, -2, -8], rotation: null, scale: null },
-        children: ["p3-t4-trunk", "p3-t4-leaves"],
-      },
-      "p3-t4-trunk": {
-        type: "Cylinder",
-        props: {
-          position: [0, 1, 0],
-          rotation: null,
-          scale: null,
-          radiusTop: 0.12,
-          radiusBottom: 0.18,
-          height: 2,
-          radialSegments: 8,
-          material: { color: "#3d2b15", roughness: 0.9 },
-        },
-        children: [],
-      },
-      "p3-t4-leaves": {
-        type: "Cone",
-        props: {
-          position: [0, 2.8, 0],
-          rotation: null,
-          scale: null,
-          radius: 1,
-          height: 2.5,
-          radialSegments: 8,
-          material: { color: "#2d5a1e", roughness: 0.8 },
-        },
-        children: [],
-      },
-      "p3-tree5": {
-        type: "Group",
-        props: { position: [-3.5, -2, -7], rotation: null, scale: null },
-        children: ["p3-t5-trunk", "p3-t5-leaves"],
-      },
-      "p3-t5-trunk": {
-        type: "Cylinder",
-        props: {
-          position: [0, 0.7, 0],
-          rotation: null,
-          scale: null,
-          radiusTop: 0.09,
-          radiusBottom: 0.13,
-          height: 1.4,
-          radialSegments: 8,
-          material: { color: "#4a3520", roughness: 0.9 },
-        },
-        children: [],
-      },
-      "p3-t5-leaves": {
-        type: "Cone",
-        props: {
-          position: [0, 2, 0],
-          rotation: null,
-          scale: null,
-          radius: 0.7,
-          height: 1.8,
-          radialSegments: 8,
-          material: { color: "#1e4a10", roughness: 0.8 },
-        },
-        children: [],
-      },
-      "p3-ground": {
-        type: "Plane",
-        props: {
-          position: [0, -2, 0],
-          rotation: [-1.5708, 0, 0],
-          scale: null,
-          width: 30,
-          height: 30,
-          material: { color: "#3a5a2a", roughness: 1 },
-        },
-        children: [],
-      },
-      "p3-fireflies": {
-        type: "Sparkles",
-        props: {
-          position: [0, 0, -5],
-          rotation: null,
-          scale: [6, 4, 6],
-          count: 80,
-          speed: 0.3,
-          opacity: 0.7,
-          color: "#aaff66",
-          size: 1.5,
-          noise: 2,
-        },
-        children: [],
-      },
-
-      "gallery-sparkles": {
-        type: "Sparkles",
-        props: {
-          position: [0, 3, 0],
-          rotation: null,
-          scale: [12, 5, 10],
-          count: 40,
-          speed: 0.05,
-          opacity: 0.2,
-          color: "#ffffff",
-          size: 0.3,
-          noise: null,
-        },
-        children: [],
-      },
-      post: {
-        type: "EffectComposer",
-        props: { enabled: true, multisampling: 8 },
-        children: ["bloom", "vignette"],
-      },
-      bloom: {
-        type: "Bloom",
-        props: {
-          intensity: 0.6,
-          luminanceThreshold: 0.3,
-          luminanceSmoothing: null,
-          mipmapBlur: true,
-        },
-        children: [],
-      },
-      vignette: {
-        type: "Vignette",
-        props: { offset: 0.4, darkness: 0.4 },
-        children: [],
-      },
-      controls: {
-        type: "OrbitControls",
-        props: {
-          enableDamping: true,
-          dampingFactor: null,
-          enableZoom: true,
-          enablePan: null,
-          enableRotate: true,
-          minDistance: 4,
-          maxDistance: 16,
-          minPolarAngle: null,
-          maxPolarAngle: null,
-          autoRotate: true,
-          autoRotateSpeed: 0.3,
-          target: [0, 1.8, -2],
-        },
-        children: [],
-      },
-    },
-  },
-};

examples/react-three-fiber/app/scenes/product-showroom.ts

@@ -1,455 +0,0 @@
-import type { Scene } from "./_helpers";
-
-export const productShowroom: Scene = {
-  name: "Product Showroom",
-  description:
-    "Sleek glass torus knot on a pedestal with studio lighting, reflections, and contact shadows",
-  spec: {
-    root: "scene",
-    elements: {
-      scene: {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "camera",
-          "env",
-          "backdrop",
-          "ambient",
-          "key-light",
-          "fill-light",
-          "rim-light",
-          "accent-light",
-          "pedestal",
-          "hero-float",
-          "accent1",
-          "accent2",
-          "accent3",
-          "floor",
-          "shadows",
-          "sparkles",
-          "fx",
-          "controls",
-        ],
-      },
-      camera: {
-        type: "PerspectiveCamera",
-        props: {
-          position: [0, 2, 6],
-          rotation: null,
-          scale: null,
-          fov: 40,
-          near: null,
-          far: null,
-          makeDefault: true,
-        },
-        children: [],
-      },
-      env: {
-        type: "Environment",
-        props: {
-          preset: "studio",
-          background: false,
-          blur: 0.5,
-          intensity: 0.8,
-        },
-        children: [],
-      },
-      backdrop: {
-        type: "Backdrop",
-        props: {
-          position: [0, -0.5, -3],
-          rotation: null,
-          scale: [25, 10, 8],
-          floor: 0.3,
-          segments: 30,
-          receiveShadow: true,
-        },
-        children: [],
-      },
-      ambient: {
-        type: "AmbientLight",
-        props: { color: "#e8e0f0", intensity: 0.25 },
-        children: [],
-      },
-      "key-light": {
-        type: "SpotLight",
-        props: {
-          position: [5, 8, 3],
-          rotation: null,
-          scale: null,
-          color: "#ffffff",
-          intensity: 80,
-          distance: 25,
-          decay: null,
-          angle: 0.5,
-          penumbra: 0.8,
-          castShadow: true,
-        },
-        children: [],
-      },
-      "fill-light": {
-        type: "SpotLight",
-        props: {
-          position: [-4, 5, 2],
-          rotation: null,
-          scale: null,
-          color: "#aaccff",
-          intensity: 30,
-          distance: 20,
-          decay: null,
-          angle: 0.6,
-          penumbra: 1,
-          castShadow: false,
-        },
-        children: [],
-      },
-      "rim-light": {
-        type: "SpotLight",
-        props: {
-          position: [0, 3, -5],
-          rotation: null,
-          scale: null,
-          color: "#ffddcc",
-          intensity: 40,
-          distance: 15,
-          decay: null,
-          angle: 0.4,
-          penumbra: 0.5,
-          castShadow: false,
-        },
-        children: [],
-      },
-      "accent-light": {
-        type: "PointLight",
-        props: {
-          position: [0, 0.5, 0],
-          rotation: null,
-          scale: null,
-          color: "#ffffff",
-          intensity: 5,
-          distance: 4,
-          decay: null,
-          castShadow: null,
-        },
-        children: [],
-      },
-      pedestal: {
-        type: "Group",
-        props: { position: [0, 0, 0], rotation: null, scale: null },
-        children: ["ped-base", "ped-column", "ped-top"],
-      },
-      "ped-base": {
-        type: "Cylinder",
-        props: {
-          position: [0, 0.05, 0],
-          rotation: null,
-          scale: null,
-          radiusTop: 1.2,
-          radiusBottom: 1.3,
-          height: 0.1,
-          radialSegments: 48,
-          castShadow: null,
-          receiveShadow: null,
-          material: {
-            color: "#1a1a1a",
-            metalness: 0.9,
-            roughness: 0.1,
-          },
-        },
-        children: [],
-      },
-      "ped-column": {
-        type: "Cylinder",
-        props: {
-          position: [0, 0.45, 0],
-          rotation: null,
-          scale: null,
-          radiusTop: 0.6,
-          radiusBottom: 0.8,
-          height: 0.7,
-          radialSegments: 48,
-          castShadow: null,
-          receiveShadow: null,
-          material: {
-            color: "#111111",
-            metalness: 0.95,
-            roughness: 0.05,
-          },
-        },
-        children: [],
-      },
-      "ped-top": {
-        type: "Cylinder",
-        props: {
-          position: [0, 0.85, 0],
-          rotation: null,
-          scale: null,
-          radiusTop: 0.9,
-          radiusBottom: 0.7,
-          height: 0.1,
-          radialSegments: 48,
-          castShadow: null,
-          receiveShadow: null,
-          material: {
-            color: "#1a1a1a",
-            metalness: 0.9,
-            roughness: 0.1,
-          },
-        },
-        children: [],
-      },
-      "hero-float": {
-        type: "Float",
-        props: {
-          position: [0, 2.2, 0],
-          rotation: null,
-          scale: null,
-          speed: 1.5,
-          rotationIntensity: 0.3,
-          floatIntensity: 0.4,
-          enabled: true,
-        },
-        children: ["hero-spin"],
-      },
-      "hero-spin": {
-        type: "Spin",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          speed: 0.3,
-          axis: "y",
-        },
-        children: ["hero-object"],
-      },
-      "hero-object": {
-        type: "TorusKnot",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.6,
-          tube: 0.22,
-          p: 2,
-          q: 3,
-          tubularSegments: 128,
-          radialSegments: 24,
-          material: {
-            color: "#ffffff",
-            metalness: 1,
-            roughness: 0,
-          },
-        },
-        children: [],
-      },
-      accent1: {
-        type: "Float",
-        props: {
-          position: [-1.5, 1.8, 0.5],
-          rotation: null,
-          scale: null,
-          speed: 2,
-          rotationIntensity: 0.5,
-          floatIntensity: 1.2,
-          enabled: true,
-        },
-        children: ["accent1-body"],
-      },
-      "accent1-body": {
-        type: "GlassSphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.15,
-          widthSegments: null,
-          heightSegments: null,
-          color: "#eeeeff",
-          transmission: 1,
-          thickness: 0.3,
-          roughness: 0,
-          chromaticAberration: 0.06,
-          ior: 1.5,
-          distortion: null,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      accent2: {
-        type: "Float",
-        props: {
-          position: [1.2, 2.5, -0.8],
-          rotation: null,
-          scale: null,
-          speed: 1.8,
-          rotationIntensity: 0.4,
-          floatIntensity: 1.5,
-          enabled: true,
-        },
-        children: ["accent2-body"],
-      },
-      "accent2-body": {
-        type: "GlassSphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.1,
-          widthSegments: null,
-          heightSegments: null,
-          color: "#ffeeff",
-          transmission: 1,
-          thickness: 0.2,
-          roughness: 0,
-          chromaticAberration: 0.08,
-          ior: 1.6,
-          distortion: null,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      accent3: {
-        type: "Float",
-        props: {
-          position: [0.8, 1.5, 1.2],
-          rotation: null,
-          scale: null,
-          speed: 2.2,
-          rotationIntensity: 0.6,
-          floatIntensity: 0.8,
-          enabled: true,
-        },
-        children: ["accent3-body"],
-      },
-      "accent3-body": {
-        type: "GlassSphere",
-        props: {
-          position: null,
-          rotation: null,
-          scale: null,
-          castShadow: null,
-          receiveShadow: null,
-          radius: 0.12,
-          widthSegments: null,
-          heightSegments: null,
-          color: "#eeffee",
-          transmission: 1,
-          thickness: 0.25,
-          roughness: 0,
-          chromaticAberration: 0.05,
-          ior: 1.4,
-          distortion: null,
-          distortionScale: null,
-          temporalDistortion: null,
-          samples: 6,
-          resolution: 128,
-        },
-        children: [],
-      },
-      floor: {
-        type: "ReflectorPlane",
-        props: {
-          position: [0, -0.5, 0],
-          rotation: [-1.5708, 0, 0],
-          scale: null,
-          width: 25,
-          height: 25,
-          color: "#0a0a0a",
-          resolution: 1024,
-          blur: 300,
-          mirror: 0.6,
-          mixBlur: 8,
-          mixStrength: 2,
-          depthScale: 0.2,
-          metalness: 0.8,
-          roughness: 0.3,
-        },
-        children: [],
-      },
-      shadows: {
-        type: "ContactShadows",
-        props: {
-          position: [0, -0.49, 0],
-          rotation: null,
-          scale: null,
-          opacity: 0.5,
-          width: 10,
-          height: 10,
-          blur: 2,
-          near: null,
-          far: 5,
-          smooth: true,
-          resolution: 512,
-          frames: null,
-          color: "#000000",
-        },
-        children: [],
-      },
-      sparkles: {
-        type: "Sparkles",
-        props: {
-          position: [0, 2, 0],
-          rotation: null,
-          scale: [6, 4, 6],
-          count: 30,
-          speed: 0.05,
-          opacity: 0.15,
-          color: "#ffffff",
-          size: 0.3,
-          noise: 0.5,
-        },
-        children: [],
-      },
-      fx: {
-        type: "EffectComposer",
-        props: { enabled: true, multisampling: 8 },
-        children: ["bloom", "vignette"],
-      },
-      bloom: {
-        type: "Bloom",
-        props: {
-          intensity: 0.5,
-          luminanceThreshold: 0.3,
-          luminanceSmoothing: 0.4,
-          mipmapBlur: true,
-        },
-        children: [],
-      },
-      vignette: {
-        type: "Vignette",
-        props: { offset: 0.3, darkness: 0.5 },
-        children: [],
-      },
-      controls: {
-        type: "OrbitControls",
-        props: {
-          enableDamping: true,
-          dampingFactor: null,
-          enableZoom: null,
-          enablePan: null,
-          enableRotate: null,
-          minDistance: 3,
-          maxDistance: 12,
-          minPolarAngle: 0.3,
-          maxPolarAngle: 1.4,
-          autoRotate: true,
-          autoRotateSpeed: 1,
-          target: [0, 1.5, 0],
-        },
-        children: [],
-      },
-    },
-  },
-};

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

@@ -1,149 +0,0 @@
-import type { Scene } from "./_helpers";
-
-export const starfield: Scene = {
-  name: "Starfield",
-  description:
-    "Classic Windows starfield screensaver -- flying through stars at warp speed",
-  spec: {
-    root: "scene",
-    elements: {
-      scene: {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "cam",
-          "ambient",
-          "tunnel",
-          "stars1",
-          "stars2",
-          "sparkle-dust",
-          "shake",
-          "post",
-          "controls",
-        ],
-      },
-      cam: {
-        type: "PerspectiveCamera",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          fov: 75,
-          near: 0.1,
-          far: 1000,
-          makeDefault: true,
-        },
-        children: [],
-      },
-      ambient: {
-        type: "AmbientLight",
-        props: { color: "#111122", intensity: 0.15 },
-        children: [],
-      },
-      tunnel: {
-        type: "WarpTunnel",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          ringCount: 120,
-          radius: 4,
-          length: 40,
-          speed: 12,
-          tubeRadius: 0.008,
-          color1: "#ffffff",
-          color2: "#aabbff",
-        },
-        children: [],
-      },
-      stars1: {
-        type: "Stars",
-        props: {
-          radius: 50,
-          depth: 80,
-          count: 10000,
-          factor: 6,
-          saturation: 0,
-          fade: true,
-          speed: 3,
-        },
-        children: [],
-      },
-      stars2: {
-        type: "Stars",
-        props: {
-          radius: 30,
-          depth: 50,
-          count: 5000,
-          factor: 3,
-          saturation: 0.1,
-          fade: true,
-          speed: 5,
-        },
-        children: [],
-      },
-      "sparkle-dust": {
-        type: "Sparkles",
-        props: {
-          position: [0, 0, -5],
-          rotation: null,
-          scale: [8, 8, 30],
-          count: 300,
-          speed: 2,
-          opacity: 0.6,
-          color: "#ffffff",
-          size: 1,
-          noise: 4,
-        },
-        children: [],
-      },
-      shake: {
-        type: "CameraShake",
-        props: {
-          intensity: 0.15,
-          maxYaw: 0.02,
-          maxPitch: 0.02,
-          maxRoll: 0.01,
-        },
-        children: [],
-      },
-      post: {
-        type: "EffectComposer",
-        props: { enabled: true, multisampling: 8 },
-        children: ["bloom", "vignette"],
-      },
-      bloom: {
-        type: "Bloom",
-        props: {
-          intensity: 1.5,
-          luminanceThreshold: 0.15,
-          luminanceSmoothing: null,
-          mipmapBlur: true,
-        },
-        children: [],
-      },
-      vignette: {
-        type: "Vignette",
-        props: { offset: 0.1, darkness: 0.9 },
-        children: [],
-      },
-      controls: {
-        type: "OrbitControls",
-        props: {
-          enableDamping: null,
-          dampingFactor: null,
-          enableZoom: false,
-          enablePan: false,
-          enableRotate: false,
-          minDistance: null,
-          maxDistance: null,
-          minPolarAngle: null,
-          maxPolarAngle: null,
-          autoRotate: false,
-          autoRotateSpeed: null,
-        },
-        children: [],
-      },
-    },
-  },
-};

examples/react-three-fiber/app/scenes/storm-cell.ts

@@ -1,295 +0,0 @@
-import type { Scene } from "./_helpers";
-
-export const stormCell: Scene = {
-  name: "Storm Cell",
-  description:
-    "Dark violent thunderstorm -- spinning cloud masses, pulsing lightning, rain particles, camera shake",
-  spec: {
-    root: "scene",
-    elements: {
-      scene: {
-        type: "Group",
-        props: { position: null, rotation: null, scale: null },
-        children: [
-          "sky",
-          "ambient",
-          "sun",
-          "cloud-spin-1",
-          "cloud-spin-2",
-          "cloud-spin-3",
-          "lightning-1-pulse",
-          "lightning-2-pulse",
-          "lightning-3-pulse",
-          "rain",
-          "shake",
-          "post",
-          "fog",
-          "controls",
-        ],
-      },
-      sky: {
-        type: "Sky",
-        props: {
-          distance: null,
-          sunPosition: [10, 2, 0],
-          inclination: null,
-          azimuth: null,
-          turbidity: 20,
-          rayleigh: 0.5,
-          mieCoefficient: 0.01,
-          mieDirectionalG: 0.9,
-        },
-        children: [],
-      },
-      ambient: {
-        type: "AmbientLight",
-        props: { color: "#111122", intensity: 0.15 },
-        children: [],
-      },
-      sun: {
-        type: "DirectionalLight",
-        props: {
-          position: [10, 3, 0],
-          rotation: null,
-          scale: null,
-          color: "#334466",
-          intensity: 0.5,
-          castShadow: true,
-        },
-        children: [],
-      },
-      "cloud-spin-1": {
-        type: "Spin",
-        props: {
-          position: [0, 4, 0],
-          rotation: null,
-          scale: null,
-          speed: 0.08,
-          axis: "y",
-        },
-        children: ["cloud-1"],
-      },
-      "cloud-1": {
-        type: "Cloud",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          seed: 1,
-          segments: 40,
-          bounds: [25, 3, 25],
-          volume: 15,
-          speed: 0.3,
-          fade: 20,
-          opacity: 0.9,
-          color: "#222233",
-          growth: 10,
-        },
-        children: [],
-      },
-      "cloud-spin-2": {
-        type: "Spin",
-        props: {
-          position: [0, 6, -3],
-          rotation: null,
-          scale: null,
-          speed: -0.05,
-          axis: "y",
-        },
-        children: ["cloud-2"],
-      },
-      "cloud-2": {
-        type: "Cloud",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          seed: 42,
-          segments: 30,
-          bounds: [20, 2, 20],
-          volume: 12,
-          speed: 0.2,
-          fade: 15,
-          opacity: 0.7,
-          color: "#1a1a2a",
-          growth: 8,
-        },
-        children: [],
-      },
-      "cloud-spin-3": {
-        type: "Spin",
-        props: {
-          position: [0, 8, 2],
-          rotation: null,
-          scale: null,
-          speed: 0.03,
-          axis: "y",
-        },
-        children: ["cloud-3"],
-      },
-      "cloud-3": {
-        type: "Cloud",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          seed: 99,
-          segments: 25,
-          bounds: [30, 2, 30],
-          volume: 10,
-          speed: 0.15,
-          fade: 25,
-          opacity: 0.5,
-          color: "#2a2a3a",
-          growth: 6,
-        },
-        children: [],
-      },
-      "lightning-1-pulse": {
-        type: "Pulse",
-        props: {
-          position: [2, 5, -1],
-          rotation: null,
-          scale: null,
-          speed: 3,
-          min: 0,
-          max: 1,
-        },
-        children: ["lightning-1"],
-      },
-      "lightning-1": {
-        type: "PointLight",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          color: "#aabbff",
-          intensity: 80,
-          distance: 30,
-          decay: 2,
-          castShadow: false,
-        },
-        children: [],
-      },
-      "lightning-2-pulse": {
-        type: "Pulse",
-        props: {
-          position: [-3, 6, 3],
-          rotation: null,
-          scale: null,
-          speed: 4.5,
-          min: 0,
-          max: 1,
-        },
-        children: ["lightning-2"],
-      },
-      "lightning-2": {
-        type: "PointLight",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          color: "#aaccff",
-          intensity: 60,
-          distance: 25,
-          decay: 2,
-          castShadow: false,
-        },
-        children: [],
-      },
-      "lightning-3-pulse": {
-        type: "Pulse",
-        props: {
-          position: [0, 4, -4],
-          rotation: null,
-          scale: null,
-          speed: 2.5,
-          min: 0,
-          max: 1,
-        },
-        children: ["lightning-3"],
-      },
-      "lightning-3": {
-        type: "PointLight",
-        props: {
-          position: [0, 0, 0],
-          rotation: null,
-          scale: null,
-          color: "#99bbff",
-          intensity: 40,
-          distance: 20,
-          decay: 2,
-          castShadow: false,
-        },
-        children: [],
-      },
-      rain: {
-        type: "Sparkles",
-        props: {
-          position: [0, 5, 0],
-          rotation: null,
-          scale: [20, 15, 20],
-          count: 500,
-          speed: 5,
-          opacity: 0.4,
-          color: "#6688aa",
-          size: 0.5,
-          noise: 0.5,
-        },
-        children: [],
-      },
-      shake: {
-        type: "CameraShake",
-        props: {
-          intensity: 0.2,
-          maxYaw: 0.02,
-          maxPitch: 0.03,
-          maxRoll: 0.01,
-        },
-        children: [],
-      },
-      post: {
-        type: "EffectComposer",
-        props: { enabled: true, multisampling: 8 },
-        children: ["bloom", "vignette"],
-      },
-      bloom: {
-        type: "Bloom",
-        props: {
-          intensity: 0.8,
-          luminanceThreshold: 0.3,
-          luminanceSmoothing: null,
-          mipmapBlur: true,
-        },
-        children: [],
-      },
-      vignette: {
-        type: "Vignette",
-        props: { offset: 0.3, darkness: 0.8 },
-        children: [],
-      },
-      fog: {
-        type: "Fog",
-        props: { color: "#0a0a15", near: 5, far: 30 },
-        children: [],
-      },
-      controls: {
-        type: "OrbitControls",
-        props: {
-          enableDamping: null,
-          dampingFactor: null,
-          enableZoom: true,
-          enablePan: null,
-          enableRotate: true,
-          minDistance: 3,
-          maxDistance: 20,
-          minPolarAngle: 0.2,
-          maxPolarAngle: 1.3,
-          autoRotate: true,
-          autoRotateSpeed: 0.1,
-        },
-        children: [],
-      },
-    },
-  },
-};

examples/react-three-fiber/eslint.config.js

@@ -1,12 +0,0 @@
-import { nextJsConfig } from "@internal/eslint-config/next-js";
-
-/** @type {import("eslint").Linter.Config[]} */
-export default [
-  ...nextJsConfig,
-  {
-    rules: {
-      "react/prop-types": "off",
-      "react/no-unknown-property": "off",
-    },
-  },
-];

examples/react-three-fiber/next-env.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/react-three-fiber/next.config.ts

@@ -1,12 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  transpilePackages: [
-    "@json-render/core",
-    "@json-render/react",
-    "@json-render/react-three-fiber",
-    "three",
-  ],
-};
-
-export default nextConfig;

examples/react-three-fiber/package.json

@@ -1,35 +0,0 @@
-{
-  "name": "example-react-three-fiber",
-  "version": "0.1.7",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "predev": "command -v portless >/dev/null 2>&1 || (echo '\\nportless is required but not installed. Run: npm i -g portless\\nSee: https://github.com/vercel-labs/portless\\n' && exit 1)",
-    "dev": "portless react-three-fiber-demo.json-render next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint --max-warnings 0",
-    "check-types": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@json-render/core": "workspace:*",
-    "@json-render/react": "workspace:*",
-    "@json-render/react-three-fiber": "workspace:*",
-    "@react-three/drei": "^10.7.7",
-    "@react-three/fiber": "^9.5.0",
-    "next": "16.1.6",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "three": "^0.183.2",
-    "zod": "4.3.6"
-  },
-  "devDependencies": {
-    "@internal/eslint-config": "workspace:*",
-    "@types/node": "^22.10.0",
-    "@types/react": "19.2.3",
-    "@types/react-dom": "19.2.3",
-    "@types/three": "^0.183.1",
-    "eslint": "^9.39.1",
-    "typescript": "^5.7.2"
-  }
-}

examples/react-three-fiber/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../../packages/typescript-config/nextjs.json",
-  "compilerOptions": {
-    "plugins": [{ "name": "next" }],
-    "declaration": false,
-    "declarationMap": false,
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}

examples/remotion/CHANGELOG.md

@@ -1,21 +1,5 @@
 # example-remotion
 
-## 0.1.7
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/remotion@0.13.0
-
-## 0.1.6
-
-### Patch Changes
-
-- Updated dependencies [54a1ecf]
-  - @json-render/core@0.12.1
-  - @json-render/remotion@0.12.1
-
 ## 0.1.5
 
 ### Patch Changes

examples/remotion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-remotion",
-  "version": "0.1.7",
+  "version": "0.1.5",
   "type": "module",
   "private": true,
   "scripts": {

examples/solid/CHANGELOG.md

@@ -1,9 +0,0 @@
-# example-solid
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/solid@0.13.0

examples/solid/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>json-render solid example</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/index.tsx"></script>
-  </body>
-</html>

examples/solid/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "example-solid",
-  "version": "0.1.1",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "portless solid-demo.json-render vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check-types": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@json-render/core": "workspace:*",
-    "@json-render/solid": "workspace:*",
-    "solid-js": "^1.9.11",
-    "zod": "^4.3.6"
-  },
-  "devDependencies": {
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-solid": "^2.11.10"
-  }
-}

examples/solid/src/App.tsx

@@ -1,13 +0,0 @@
-import { StateProvider } from "@json-render/solid";
-import { demoSpec } from "./lib/spec";
-import { DemoRenderer } from "./DemoRenderer";
-
-export function App() {
-  const initialState = demoSpec.state ?? {};
-
-  return (
-    <StateProvider initialState={initialState}>
-      <DemoRenderer />
-    </StateProvider>
-  );
-}

examples/solid/src/DemoRenderer.tsx

@@ -1,51 +0,0 @@
-import {
-  ActionProvider,
-  ValidationProvider,
-  VisibilityProvider,
-  Renderer,
-  useStateStore,
-} from "@json-render/solid";
-import { demoSpec } from "./lib/spec";
-import { registry } from "./lib/registry";
-
-export function DemoRenderer() {
-  const stateStore = useStateStore();
-
-  const handlers = {
-    increment: async () => {
-      stateStore.set("/count", Number(stateStore.get("/count") || 0) + 1);
-    },
-    decrement: async () => {
-      stateStore.set(
-        "/count",
-        Math.max(0, Number(stateStore.get("/count") || 0) - 1),
-      );
-    },
-    reset: async () => {
-      stateStore.set("/count", 0);
-    },
-    toggleItem: async (params: Record<string, unknown>) => {
-      const index = params.index as number;
-      const todos = (
-        stateStore.get("/todos") as Array<{
-          id: number;
-          title: string;
-          completed: boolean;
-        }>
-      ).map((item, i) =>
-        i === index ? { ...item, completed: !item.completed } : item,
-      );
-      stateStore.set("/todos", todos);
-    },
-  };
-
-  return (
-    <ActionProvider handlers={handlers}>
-      <VisibilityProvider>
-        <ValidationProvider>
-          <Renderer spec={demoSpec} registry={registry} />
-        </ValidationProvider>
-      </VisibilityProvider>
-    </ActionProvider>
-  );
-}

examples/solid/src/app.css

@@ -1,13 +0,0 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  background: #f9fafb;
-  color: #111827;
-  min-height: 100vh;
-}

examples/solid/src/index.tsx

@@ -1,5 +0,0 @@
-import { render } from "solid-js/web";
-import { App } from "./App";
-import "./app.css";
-
-render(() => <App />, document.getElementById("app")!);

examples/solid/src/lib/catalog.ts

@@ -1,90 +0,0 @@
-import { schema } from "@json-render/solid/schema";
-import { z } from "zod";
-
-export const catalog = schema.createCatalog({
-  components: {
-    Stack: {
-      props: z.object({
-        gap: z.number().optional(),
-        padding: z.number().optional(),
-        direction: z.enum(["vertical", "horizontal"]).optional(),
-        align: z.enum(["start", "center", "end"]).optional(),
-      }),
-      slots: ["default"],
-      description:
-        "Layout container that stacks children vertically or horizontally",
-    },
-    Card: {
-      props: z.object({
-        title: z.string().optional(),
-        subtitle: z.string().optional(),
-      }),
-      slots: ["default"],
-      description: "A card container with optional title and subtitle",
-    },
-    Text: {
-      props: z.object({
-        content: z.string(),
-        size: z.enum(["sm", "md", "lg", "xl"]).optional(),
-        weight: z.enum(["normal", "medium", "bold"]).optional(),
-        color: z.string().optional(),
-      }),
-      slots: [],
-      description: "Displays a text string",
-    },
-    Button: {
-      props: z.object({
-        label: z.string(),
-        variant: z.enum(["primary", "secondary", "danger"]).optional(),
-        disabled: z.boolean().optional(),
-      }),
-      slots: [],
-      description: "A clickable button that emits a 'press' event",
-    },
-    Badge: {
-      props: z.object({
-        label: z.string(),
-        color: z.string().optional(),
-      }),
-      slots: [],
-      description: "A small badge/tag label",
-    },
-    ListItem: {
-      props: z.object({
-        title: z.string(),
-        description: z.string().optional(),
-        completed: z.boolean().optional(),
-      }),
-      slots: [],
-      description: "A single item in a list",
-    },
-    Input: {
-      props: z.object({
-        value: z.string().optional(),
-        placeholder: z.string().optional(),
-      }),
-      slots: [],
-      description: "A text input field that supports two-way state binding",
-    },
-  },
-  actions: {
-    increment: {
-      params: z.object({}),
-      description: "Increment the counter by 1",
-    },
-    decrement: {
-      params: z.object({}),
-      description: "Decrement the counter by 1",
-    },
-    reset: {
-      params: z.object({}),
-      description: "Reset the counter to 0",
-    },
-    toggleItem: {
-      params: z.object({
-        index: z.number(),
-      }),
-      description: "Toggle the completed state of a todo item",
-    },
-  },
-});

examples/solid/src/lib/components/Badge.tsx

@@ -1,27 +0,0 @@
-import type { BaseComponentProps } from "@json-render/solid";
-
-interface BadgeProps {
-  label: string;
-  color?: string;
-}
-
-export function Badge(renderProps: BaseComponentProps<BadgeProps>) {
-  const color = () => renderProps.props.color ?? "#6b7280";
-
-  return (
-    <span
-      style={{
-        display: "inline-block",
-        padding: "4px 12px",
-        "border-radius": "9999px",
-        "font-size": "13px",
-        "font-weight": "500",
-        "background-color": `${color()}20`,
-        color: color(),
-        border: `1px solid ${color()}40`,
-      }}
-    >
-      {renderProps.props.label}
-    </span>
-  );
-}

examples/solid/src/lib/components/Button.tsx

@@ -1,47 +0,0 @@
-import type { BaseComponentProps } from "@json-render/solid";
-
-interface ButtonProps {
-  label: string;
-  variant?: "primary" | "secondary" | "danger";
-  disabled?: boolean;
-}
-
-const variantStyles: Record<string, Record<string, string>> = {
-  primary: {
-    background: "#2563eb",
-    color: "#ffffff",
-    border: "1px solid #2563eb",
-  },
-  secondary: {
-    background: "#f3f4f6",
-    color: "#374151",
-    border: "1px solid #d1d5db",
-  },
-  danger: {
-    background: "#fee2e2",
-    color: "#dc2626",
-    border: "1px solid #fca5a5",
-  },
-};
-
-export function Button(renderProps: BaseComponentProps<ButtonProps>) {
-  const variant = () => renderProps.props.variant ?? "primary";
-
-  return (
-    <button
-      disabled={renderProps.props.disabled}
-      onClick={() => renderProps.emit("press")}
-      style={{
-        padding: "8px 16px",
-        "border-radius": "8px",
-        "font-size": "14px",
-        "font-weight": "500",
-        cursor: renderProps.props.disabled ? "not-allowed" : "pointer",
-        opacity: renderProps.props.disabled ? "0.5" : "1",
-        ...variantStyles[variant()],
-      }}
-    >
-      {renderProps.props.label}
-    </button>
-  );
-}

examples/solid/src/lib/components/Card.tsx

@@ -1,44 +0,0 @@
-import type { BaseComponentProps } from "@json-render/solid";
-
-interface CardProps {
-  title?: string;
-  subtitle?: string;
-}
-
-export function Card(renderProps: BaseComponentProps<CardProps>) {
-  return (
-    <div
-      style={{
-        background: "#ffffff",
-        "border-radius": "12px",
-        border: "1px solid #e5e7eb",
-        padding: "20px",
-        "box-shadow": "0 1px 3px rgba(0,0,0,0.06)",
-      }}
-    >
-      {renderProps.props.title && (
-        <h2
-          style={{
-            "font-size": "18px",
-            "font-weight": "600",
-            "margin-bottom": renderProps.props.subtitle ? "4px" : "16px",
-          }}
-        >
-          {renderProps.props.title}
-        </h2>
-      )}
-      {renderProps.props.subtitle && (
-        <p
-          style={{
-            "font-size": "14px",
-            color: "#6b7280",
-            "margin-bottom": "16px",
-          }}
-        >
-          {renderProps.props.subtitle}
-        </p>
-      )}
-      {renderProps.children}
-    </div>
-  );
-}

examples/solid/src/lib/components/Input.tsx

@@ -1,30 +0,0 @@
-import type { BaseComponentProps } from "@json-render/solid";
-import { useBoundProp } from "@json-render/solid";
-
-interface InputProps {
-  value?: string;
-  placeholder?: string;
-}
-
-export function Input(renderProps: BaseComponentProps<InputProps>) {
-  const [value, setValue] = useBoundProp<string>(
-    renderProps.props.value,
-    renderProps.bindings?.value,
-  );
-
-  return (
-    <input
-      value={String(value ?? "")}
-      onInput={(e) => setValue(e.currentTarget.value)}
-      placeholder={renderProps.props.placeholder ?? ""}
-      style={{
-        padding: "8px 12px",
-        "border-radius": "8px",
-        border: "1px solid #d1d5db",
-        "font-size": "14px",
-        outline: "none",
-        width: "100%",
-      }}
-    />
-  );
-}

examples/solid/src/lib/components/ListItem.tsx

@@ -1,55 +0,0 @@
-import type { BaseComponentProps } from "@json-render/solid";
-
-interface ListItemProps {
-  title: string;
-  description?: string;
-  completed?: boolean;
-}
-
-export function ListItem(renderProps: BaseComponentProps<ListItemProps>) {
-  return (
-    <div
-      onClick={() => renderProps.emit("press")}
-      style={{
-        display: "flex",
-        "align-items": "center",
-        gap: "10px",
-        padding: "10px 12px",
-        "border-radius": "8px",
-        border: "1px solid #e5e7eb",
-        cursor: "pointer",
-        "user-select": "none",
-        background: renderProps.props.completed ? "#f0fdf4" : "#ffffff",
-      }}
-    >
-      <span
-        style={{
-          width: "22px",
-          height: "22px",
-          "border-radius": "6px",
-          border: renderProps.props.completed
-            ? "2px solid #22c55e"
-            : "2px solid #d1d5db",
-          display: "flex",
-          "align-items": "center",
-          "justify-content": "center",
-          "font-size": "13px",
-          color: "#22c55e",
-          "flex-shrink": "0",
-        }}
-      >
-        {renderProps.props.completed ? "\u2713" : ""}
-      </span>
-      <span
-        style={{
-          "text-decoration": renderProps.props.completed
-            ? "line-through"
-            : "none",
-          color: renderProps.props.completed ? "#9ca3af" : "#111827",
-        }}
-      >
-        {renderProps.props.title}
-      </span>
-    </div>
-  );
-}

examples/solid/src/lib/components/Stack.tsx

@@ -1,27 +0,0 @@
-import type { BaseComponentProps } from "@json-render/solid";
-
-interface StackProps {
-  gap?: number;
-  padding?: number;
-  direction?: "vertical" | "horizontal";
-  align?: "start" | "center" | "end";
-}
-
-export function Stack(renderProps: BaseComponentProps<StackProps>) {
-  return (
-    <div
-      style={{
-        display: "flex",
-        "flex-direction":
-          renderProps.props.direction === "horizontal" ? "row" : "column",
-        gap: renderProps.props.gap ? `${renderProps.props.gap}px` : undefined,
-        padding: renderProps.props.padding
-          ? `${renderProps.props.padding}px`
-          : undefined,
-        "align-items": renderProps.props.align,
-      }}
-    >
-      {renderProps.children}
-    </div>
-  );
-}

examples/solid/src/lib/components/Text.tsx

@@ -1,35 +0,0 @@
-import type { BaseComponentProps } from "@json-render/solid";
-
-interface TextProps {
-  content: string;
-  size?: "sm" | "md" | "lg" | "xl";
-  weight?: "normal" | "medium" | "bold";
-  color?: string;
-}
-
-const sizeMap: Record<string, string> = {
-  sm: "12px",
-  md: "14px",
-  lg: "18px",
-  xl: "24px",
-};
-
-const weightMap: Record<string, string> = {
-  normal: "400",
-  medium: "500",
-  bold: "700",
-};
-
-export function Text(renderProps: BaseComponentProps<TextProps>) {
-  return (
-    <span
-      style={{
-        "font-size": sizeMap[renderProps.props.size ?? "md"],
-        "font-weight": weightMap[renderProps.props.weight ?? "normal"],
-        color: renderProps.props.color,
-      }}
-    >
-      {String(renderProps.props.content ?? "")}
-    </span>
-  );
-}

examples/solid/src/lib/registry.tsx

@@ -1,29 +0,0 @@
-import { type Components, defineRegistry } from "@json-render/solid";
-import { catalog } from "./catalog";
-import { Stack } from "./components/Stack";
-import { Card } from "./components/Card";
-import { Text } from "./components/Text";
-import { Button } from "./components/Button";
-import { Badge } from "./components/Badge";
-import { ListItem } from "./components/ListItem";
-import { Input } from "./components/Input";
-
-const components: Components<typeof catalog> = {
-  Stack,
-  Card,
-  Text,
-  Button,
-  Badge,
-  ListItem,
-  Input,
-};
-
-export const { registry, handlers: makeHandlers } = defineRegistry(catalog, {
-  components,
-  actions: {
-    increment: async () => {},
-    decrement: async () => {},
-    reset: async () => {},
-    toggleItem: async () => {},
-  },
-});

examples/solid/src/lib/spec.ts

@@ -1,130 +0,0 @@
-import type { Spec } from "@json-render/core";
-
-export const demoSpec: Spec = {
-  root: "root",
-  state: {
-    count: 0,
-    name: "",
-    todos: [
-      { id: 1, title: "Learn SolidJS", completed: true },
-      { id: 2, title: "Try @json-render/solid", completed: false },
-      { id: 3, title: "Build something awesome", completed: false },
-    ],
-  },
-  elements: {
-    root: {
-      type: "Stack",
-      props: { gap: 24, padding: 24, direction: "vertical" },
-      children: [
-        "header",
-        "counter-card",
-        "milestone-badge",
-        "todos-card",
-        "input-card",
-      ],
-    },
-    header: {
-      type: "Text",
-      props: {
-        content: "@json-render/solid demo",
-        size: "xl",
-        weight: "bold",
-      },
-    },
-    "counter-card": {
-      type: "Card",
-      props: {
-        title: "Counter",
-        subtitle: "Click the buttons to change the count",
-      },
-      children: ["counter-body"],
-    },
-    "counter-body": {
-      type: "Stack",
-      props: { gap: 12, direction: "horizontal", align: "center" },
-      children: [
-        "decrement-btn",
-        "counter-value",
-        "increment-btn",
-        "reset-btn",
-      ],
-    },
-    "decrement-btn": {
-      type: "Button",
-      props: { label: "\u2212", variant: "secondary" },
-      on: { press: { action: "decrement" } },
-    },
-    "counter-value": {
-      type: "Text",
-      props: {
-        content: { $state: "/count" },
-        size: "xl",
-        weight: "bold",
-      },
-    },
-    "increment-btn": {
-      type: "Button",
-      props: { label: "+", variant: "primary" },
-      on: { press: { action: "increment" } },
-    },
-    "reset-btn": {
-      type: "Button",
-      props: { label: "Reset", variant: "danger" },
-      on: { press: { action: "reset" } },
-    },
-    "milestone-badge": {
-      type: "Badge",
-      props: { label: "Milestone reached: 10!", color: "#10b981" },
-      visible: { $state: "/count", gte: 10 },
-    },
-    "todos-card": {
-      type: "Card",
-      props: { title: "Todo List", subtitle: "Your tasks" },
-      children: ["todos-list"],
-    },
-    "todos-list": {
-      type: "Stack",
-      props: { gap: 8, direction: "vertical" },
-      repeat: { statePath: "/todos", key: "id" },
-      children: ["todo-item"],
-    },
-    "todo-item": {
-      type: "ListItem",
-      props: {
-        title: { $item: "title" },
-        completed: { $item: "completed" },
-      },
-      on: {
-        press: { action: "toggleItem", params: { index: { $index: true } } },
-      },
-    },
-    "input-card": {
-      type: "Card",
-      props: {
-        title: "Bound Input",
-        subtitle: "Type to update state and see reactive text",
-      },
-      children: ["input-body"],
-    },
-    "input-body": {
-      type: "Stack",
-      props: { gap: 12, direction: "vertical" },
-      children: ["name-input", "name-display"],
-    },
-    "name-input": {
-      type: "Input",
-      props: {
-        value: { $bindState: "/name" },
-        placeholder: "Enter your name...",
-      },
-    },
-    "name-display": {
-      type: "Text",
-      props: {
-        content: { $state: "/name" },
-        size: "md",
-        color: "#6b7280",
-      },
-    },
-  },
-};

examples/solid/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "jsx": "preserve",
-    "jsxImportSource": "solid-js"
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["node_modules"]
-}

examples/solid/vite.config.ts

@@ -1,6 +0,0 @@
-import { defineConfig } from "vite";
-import solid from "vite-plugin-solid";
-
-export default defineConfig({
-  plugins: [solid()],
-});

examples/stripe-app/api/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/stripe-app/drawer-app/CHANGELOG.md

@@ -1,21 +1,5 @@
 # com.example.json-render-demo
 
-## 0.0.8
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/react@0.13.0
-
-## 0.0.7
-
-### Patch Changes
-
-- Updated dependencies [54a1ecf]
-  - @json-render/core@0.12.1
-  - @json-render/react@0.12.1
-
 ## 0.0.6
 
 ### Patch Changes

examples/stripe-app/drawer-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "com.example.json-render-demo",
-  "version": "0.0.8",
+  "version": "0.0.6",
   "description": "Test",
   "private": true,
   "license": "~~proprietary~~",

examples/stripe-app/fullpage-app/CHANGELOG.md

@@ -1,21 +1,5 @@
 # com.example.json-render-fullpage-demo
 
-## 0.0.8
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/react@0.13.0
-
-## 0.0.7
-
-### Patch Changes
-
-- Updated dependencies [54a1ecf]
-  - @json-render/core@0.12.1
-  - @json-render/react@0.12.1
-
 ## 0.0.6
 
 ### Patch Changes

examples/stripe-app/fullpage-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "com.example.json-render-fullpage-demo",
-  "version": "0.0.8",
+  "version": "0.0.6",
   "description": "Full-page Stripe App example (alpha)",
   "private": true,
   "license": "~~proprietary~~",

examples/svelte-chat/CHANGELOG.md

@@ -1,21 +1,5 @@
 # svelte-chat
 
-## 0.0.4
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/svelte@0.13.0
-
-## 0.0.3
-
-### Patch Changes
-
-- Updated dependencies [54a1ecf]
-  - @json-render/core@0.12.1
-  - @json-render/svelte@0.12.1
-
 ## 0.0.2
 
 ### Patch Changes

examples/svelte-chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-chat",
   "private": true,
-  "version": "0.0.4",
+  "version": "0.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite dev",

examples/svelte-chat/src/lib/agent.ts

@@ -62,7 +62,7 @@ INPUT COMPONENTS:
 - Button: Clickable button. Use on.press to trigger actions.
 
 ${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/svelte/CHANGELOG.md

@@ -1,21 +1,5 @@
 # example-svelte
 
-## 0.1.4
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/svelte@0.13.0
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [54a1ecf]
-  - @json-render/core@0.12.1
-  - @json-render/svelte@0.12.1
-
 ## 0.1.2
 
 ### Patch Changes

examples/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-svelte",
-  "version": "0.1.4",
+  "version": "0.1.2",
   "private": true,
   "type": "module",
   "scripts": {

examples/vite-renderers/CHANGELOG.md

@@ -1,26 +1,5 @@
 # vite-renderers
 
-## 0.1.5
-
-### Patch Changes
-
-- Updated dependencies [5b32de8]
-  - @json-render/core@0.13.0
-  - @json-render/solid@0.13.0
-  - @json-render/react@0.13.0
-  - @json-render/svelte@0.13.0
-  - @json-render/vue@0.13.0
-
-## 0.1.4
-
-### Patch Changes
-
-- Updated dependencies [54a1ecf]
-  - @json-render/core@0.12.1
-  - @json-render/react@0.12.1
-  - @json-render/svelte@0.12.1
-  - @json-render/vue@0.12.1
-
 ## 0.1.3
 
 ### Patch Changes

examples/vite-renderers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-renderers",
-  "version": "0.1.5",
+  "version": "0.1.3",
   "private": true,
   "type": "module",
   "scripts": {
@@ -12,12 +12,10 @@
   "dependencies": {
     "@json-render/core": "workspace:*",
     "@json-render/react": "workspace:*",
-    "@json-render/solid": "workspace:*",
     "@json-render/svelte": "workspace:*",
     "@json-render/vue": "workspace:*",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "solid-js": "^1.9.11",
     "svelte": "^5.49.2",
     "vue": "^3.5.29",
     "zod": "4.3.6"
@@ -29,7 +27,6 @@
     "@vitejs/plugin-react": "^5.1.4",
     "@vitejs/plugin-vue": "^6.0.4",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-solid": "^2.11.10"
+    "vite": "^7.3.1"
   }
 }

examples/vite-renderers/src/main.ts

@@ -1,7 +1,7 @@
 import "./shared/styles.css";
 import { demoSpec } from "./spec";
 
-type Renderer = "vue" | "react" | "svelte" | "solid";
+type Renderer = "vue" | "react" | "svelte";
 
 const container = document.getElementById("renderer-root") as HTMLElement;
 
@@ -18,12 +18,8 @@ async function switchTo(renderer: Renderer) {
     const mod = await import("./react/mount.tsx");
     mod.mount(container, renderer, demoSpec);
     unmountCurrent = mod.unmount;
-  } else if (renderer === "svelte") {
-    const mod = await import("./svelte/mount.ts");
-    mod.mount(container, renderer, demoSpec);
-    unmountCurrent = mod.unmount;
   } else {
-    const mod = await import("./solid/mount.tsx");
+    const mod = await import("./svelte/mount.ts");
     mod.mount(container, renderer, demoSpec);
     unmountCurrent = mod.unmount;
   }

examples/vite-renderers/src/react/registry.tsx

@@ -123,9 +123,7 @@ export const components: Components<AppCatalog> = {
         ? "Rendered with Vue"
         : props.renderer === "react"
           ? "Rendered with React"
-          : props.renderer === "svelte"
-            ? "Rendered with Svelte"
-            : "Rendered with Solid"}
+          : "Rendered with Svelte"}
     </span>
   ),
 
@@ -166,17 +164,6 @@ export const components: Components<AppCatalog> = {
         >
           Svelte
         </button>
-        <button
-          onClick={() => emit("pressSolid")}
-          className={[
-            "json-render-renderer-tab",
-            props.renderer === "solid" && "json-render-renderer-tab--active",
-          ]
-            .filter(Boolean)
-            .join(" ")}
-        >
-          Solid
-        </button>
       </div>
     </div>
   ),

examples/vite-renderers/src/shared/catalog-def.ts

@@ -65,7 +65,7 @@ export const catalogDef = {
       props: z.object({ renderer: z.string() }),
       slots: [],
       description:
-        "Segmented tab control for switching between Vue, React, Svelte, and Solid renderers",
+        "Segmented tab control for switching between Vue, React, and Svelte renderers",
     },
     RendererBadge: {
       props: z.object({ renderer: z.string() }),
@@ -99,9 +99,5 @@ export const catalogDef = {
       params: z.object({}),
       description: "Switch to the Svelte renderer",
     },
-    switchToSolid: {
-      params: z.object({}),
-      description: "Switch to the Solid renderer",
-    },
   },
 };

examples/vite-renderers/src/shared/handlers.ts

@@ -10,7 +10,6 @@ export const actionStubs = {
   switchToVue: async () => {},
   switchToReact: async () => {},
   switchToSvelte: async () => {},
-  switchToSolid: async () => {},
 };
 
 /** Creates action handlers that close over the state store's get/set */
@@ -53,10 +52,5 @@ export function makeHandlers(get: Get, set: Set) {
         new CustomEvent("switch-renderer", { detail: "svelte" }),
       );
     },
-    switchToSolid: async () => {
-      document.dispatchEvent(
-        new CustomEvent("switch-renderer", { detail: "solid" }),
-      );
-    },
   };
 }

examples/vite-renderers/src/shared/styles.css

@@ -11,15 +11,9 @@
   align-items: center;
 }
 
-.json-render-stack--align-start {
-  align-items: flex-start;
-}
-.json-render-stack--align-center {
-  align-items: center;
-}
-.json-render-stack--align-end {
-  align-items: flex-end;
-}
+.json-render-stack--align-start  { align-items: flex-start; }
+.json-render-stack--align-center { align-items: center; }
+.json-render-stack--align-end    { align-items: flex-end; }
 
 /* ---- Card ----------------------------------------------------------------- */
 
@@ -56,22 +50,12 @@
   color: #111827;
 }
 
-.json-render-text--sm {
-  font-size: 12px;
-}
-.json-render-text--lg {
-  font-size: 16px;
-}
-.json-render-text--xl {
-  font-size: 24px;
-}
+.json-render-text--sm { font-size: 12px; }
+.json-render-text--lg { font-size: 16px; }
+.json-render-text--xl { font-size: 24px; }
 
-.json-render-text--medium {
-  font-weight: 500;
-}
-.json-render-text--bold {
-  font-weight: 700;
-}
+.json-render-text--medium { font-weight: 500; }
+.json-render-text--bold   { font-weight: 700; }
 
 /* ---- Button --------------------------------------------------------------- */
 
@@ -227,7 +211,7 @@
   transition: background 0.15s;
 }
 
-.json-render-renderer-tab:not(:last-child) {
+.json-render-renderer-tab:first-child {
   border-right: 1px solid #e5e7eb;
 }
 
@@ -277,18 +261,3 @@
   background-color: #ff3e00;
   color: white;
 }
-
-.renderer-solid .json-render-renderer-badge {
-  color: #2c4f7c;
-  background-color: #2c4f7c18;
-  border-color: #2c4f7c40;
-}
-
-.renderer-solid .json-render-renderer-dot {
-  background-color: #2c4f7c;
-}
-
-.renderer-solid .json-render-renderer-tab--active {
-  background-color: #2c4f7c;
-  color: white;
-}

examples/vite-renderers/src/solid/App.tsx

@@ -1,19 +0,0 @@
-import type { Spec } from "@json-render/core";
-import { StateProvider } from "@json-render/solid";
-import { DemoRenderer } from "./DemoRenderer";
-
-export function App(props: { initialRenderer?: string; spec: Spec }) {
-  const renderer = props.initialRenderer ?? "solid";
-  const initialState = {
-    ...props.spec.state,
-    renderer,
-  };
-
-  return (
-    <div class={`renderer-${renderer}`}>
-      <StateProvider initialState={initialState}>
-        <DemoRenderer spec={props.spec} />
-      </StateProvider>
-    </div>
-  );
-}

examples/vite-renderers/src/solid/DemoRenderer.tsx

@@ -1,32 +0,0 @@
-import type { Spec } from "@json-render/core";
-import {
-  ActionProvider,
-  ValidationProvider,
-  VisibilityProvider,
-  Renderer,
-  defineRegistry,
-  useStateStore,
-} from "@json-render/solid";
-import { catalog } from "./catalog";
-import { components } from "./registry";
-import { actionStubs, makeHandlers } from "../shared/handlers";
-
-const { registry } = defineRegistry(catalog, {
-  components,
-  actions: actionStubs,
-});
-
-export function DemoRenderer(props: { spec: Spec }) {
-  const stateStore = useStateStore();
-  const handlers = makeHandlers(stateStore.get, stateStore.set);
-
-  return (
-    <ActionProvider handlers={handlers}>
-      <VisibilityProvider>
-        <ValidationProvider>
-          <Renderer spec={props.spec} registry={registry} />
-        </ValidationProvider>
-      </VisibilityProvider>
-    </ActionProvider>
-  );
-}