fix tests

README.md

@@ -1,25 +1,22 @@
 # json-render
 
-**The Generative UI framework.**
+**Predictable. Guardrailed. Fast.**
 
-Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output.
+Let end users generate dashboards, widgets, apps, and videos from prompts — safely constrained to components you define.
 
 ```bash
 npm install @json-render/core @json-render/react
-# or for mobile
-npm install @json-render/core @json-render/react-native
 # or for video
 npm install @json-render/core @json-render/remotion
 ```
 
 ## Why json-render?
 
-json-render is a **Generative UI** framework: AI generates interfaces from natural language prompts, constrained to components you define. You set the guardrails, AI generates within them:
+When users prompt for UI, you need guarantees. json-render gives AI a **constrained vocabulary** so output is always predictable:
 
-- **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 (web) and React Native (mobile) from the same catalog
+- **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
 
 ## Quick Start
 
@@ -78,8 +75,8 @@ const { registry } = defineRegistry(catalog, {
         <span>{format(props.value, props.format)}</span>
       </div>
     ),
-    Button: ({ props, emit }) => (
-      <button onClick={() => emit?.("press")}>
+    Button: ({ props, onAction }) => (
+      <button onClick={() => onAction?.({ name: props.action })}>
         {props.label}
       </button>
     ),
@@ -132,27 +129,6 @@ const { registry } = defineRegistry(catalog, { components });
 <Renderer spec={spec} registry={registry} />
 ```
 
-### React Native (Mobile)
-
-```tsx
-import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/react-native/schema";
-import {
-  standardComponentDefinitions,
-  standardActionDefinitions,
-} from "@json-render/react-native/catalog";
-import { defineRegistry, Renderer } from "@json-render/react-native";
-
-// 25+ standard components included
-const catalog = defineCatalog(schema, {
-  components: { ...standardComponentDefinitions },
-  actions: standardActionDefinitions,
-});
-
-const { registry } = defineRegistry(catalog, { components: {} });
-<Renderer spec={spec} registry={registry} />
-```
-
 ### Remotion (Video)
 
 ```tsx
@@ -238,8 +214,8 @@ Any prop value can be data-driven using expressions:
 
 Two expression forms:
 
-- **`{ "$path": "/state/key" }`** - reads a value from the data model
-- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** - evaluates a condition (same syntax as visibility conditions) and picks a branch
+- **`{ "$path": "/state/key" }`** -- reads a value from the data model
+- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** -- evaluates a condition (same syntax as visibility conditions) and picks a branch
 
 ### Actions
 
@@ -253,7 +229,7 @@ Components can trigger actions, including the built-in `setState` action:
 }
 ```
 
-The `setState` action updates the state model directly, which re-evaluates visibility conditions and dynamic prop expressions.
+The `setState` action updates the data model directly, which re-evaluates visibility conditions and dynamic prop expressions.
 
 ---
 
@@ -266,10 +242,9 @@ pnpm install
 pnpm dev
 ```
 
-- http://localhost:3000 - Docs & Playground
-- http://localhost:3001 - Example Dashboard
-- http://localhost:3002 - Remotion Video Example
-- React Native example: run `npx expo start` in `examples/react-native`
+- http://localhost:3000 — Docs & Playground
+- http://localhost:3001 — Example Dashboard
+- http://localhost:3002 — Remotion Video Example
 
 ## How It Works
 
@@ -284,10 +259,10 @@ flowchart LR
     D -.- G([streamed])
 ```
 
-1. **Define the guardrails** - what components, actions, and data bindings AI can use
-2. **Prompt** - describe what you want in natural language
-3. **AI generates JSON** - output is always predictable, constrained to your catalog
-4. **Render fast** - stream and render progressively as the model responds
+1. **Define the guardrails** — what components, actions, and data bindings AI can use
+2. **Users prompt** — end users describe what they want in natural language
+3. **AI generates JSON** — output is always predictable, constrained to your catalog
+4. **Render fast** — stream and render progressively as the model responds
 
 ## License
 

apps/web/.env.example

@@ -12,7 +12,3 @@ AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5
 # Automatically populated when you add Vercel KV to your project
 KV_REST_API_URL=
 KV_REST_API_TOKEN=
-
-# Rate Limiting
-# RATE_LIMIT_PER_MINUTE=10
-# RATE_LIMIT_PER_DAY=100

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

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

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

@@ -49,7 +49,7 @@ type ValidatorFn = (value: unknown, args?: object) => boolean | Promise<boolean>
 
 ## defineRegistry
 
-Create a type-safe component registry from a catalog. Components receive `props`, `children`, `emit`, and `loading` with catalog-inferred types.
+Create a type-safe component registry from a catalog. Components receive `props`, `children`, `onAction`, and `loading` with catalog-inferred types.
 
 ```tsx
 import { defineRegistry } from '@json-render/react';
@@ -57,8 +57,8 @@ import { defineRegistry } from '@json-render/react';
 const { registry } = defineRegistry(catalog, {
   components: {
     Card: ({ props, children }) => <div>{props.title}{children}</div>,
-    Button: ({ props, emit }) => (
-      <button onClick={() => emit?.("press")}>
+    Button: ({ props, onAction }) => (
+      <button onClick={() => onAction?.({ name: props.action })}>
         {props.label}
       </button>
     ),
@@ -90,7 +90,7 @@ type Registry = Record<string, React.ComponentType<ComponentRenderProps>>;
 interface ComponentContext<P> {
   props: P;                    // Typed props from catalog
   children?: React.ReactNode;  // Rendered children (for slot components)
-  emit?: (event: string) => void;  // Emit a named event
+  onAction?: (action: { name: string; params?: object }) => void;
   loading?: boolean;
 }
 ```

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

@@ -4,125 +4,6 @@ export const metadata = { title: "Changelog" }
 
 Notable changes and updates to json-render.
 
-## v0.5.0
-
-February 2026
-
-### New: @json-render/react-native
-
-Full React Native renderer with 25+ standard components, data binding, visibility, actions, and dynamic props. Build AI-generated native mobile UIs with the same catalog-driven approach as web.
-
-```tsx
-import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/react-native/schema";
-import {
-  standardComponentDefinitions,
-  standardActionDefinitions,
-} from "@json-render/react-native/catalog";
-import { defineRegistry, Renderer } from "@json-render/react-native";
-
-const catalog = defineCatalog(schema, {
-  components: { ...standardComponentDefinitions },
-  actions: standardActionDefinitions,
-});
-
-const { registry } = defineRegistry(catalog, { components: {} });
-
-<Renderer spec={spec} registry={registry} />
-```
-
-Includes standard components for layout (Container, Row, Column, ScrollContainer, SafeArea, Pressable, Spacer, Divider), content (Heading, Paragraph, Label, Image, Avatar, Badge, Chip), input (Button, TextInput, Switch, Checkbox, Slider, SearchBar), feedback (Spinner, ProgressBar), and composite (Card, ListItem, Modal).
-
-### New: Event System
-
-Components now use `emit` to fire named events instead of directly dispatching actions. The element's `on` field maps events to action bindings, decoupling component logic from action handling.
-
-```tsx
-// Component emits a named event
-Button: ({ props, emit }) => (
-  <button onClick={() => emit?.("press")}>{props.label}</button>
-),
-
-// Element spec maps events to actions
-{
-  "type": "Button",
-  "props": { "label": "Submit" },
-  "on": { "press": { "action": "submit", "params": { "formId": "main" } } }
-}
-```
-
-### New: Repeat/List Rendering
-
-Elements can now iterate over state arrays using the `repeat` field. Child elements use `$item` and `$index` tokens in `$path` expressions to reference the current item.
-
-```json
-{
-  "type": "Column",
-  "repeat": { "path": "/posts", "key": "id" },
-  "children": ["post-card"]
-}
-```
-
-```json
-{
-  "type": "Card",
-  "props": { "title": { "$path": "$item/title" } }
-}
-```
-
-### New: User Prompt Builder
-
-Build structured user prompts with optional spec refinement and state context:
-
-```typescript
-import { buildUserPrompt } from "@json-render/core";
-
-// Fresh generation
-buildUserPrompt({ prompt: "create a todo app" });
-
-// Refinement (patch-only mode)
-buildUserPrompt({ prompt: "add a toggle", currentSpec: spec });
-
-// With runtime state
-buildUserPrompt({ prompt: "show data", state: { todos: [] } });
-```
-
-### New: Spec Validation
-
-Validate spec structure and auto-fix common issues:
-
-```typescript
-import { validateSpec, autoFixSpec } from "@json-render/core";
-
-const { valid, issues } = validateSpec(spec, catalog);
-const fixed = autoFixSpec(spec);
-```
-
-### Improved: State Management
-
-`DataProvider` has been renamed to `StateProvider` with a clearer API. State is now a first-class part of specs. Elements can bind to state via `$path` expressions, and the built-in `setState` action updates state directly.
-
-### Improved: AI Prompts
-
-Schema prompts now include streaming best practices, repeat/list examples, and state patching guidance. Schemas can also define `defaultRules` that are always included in generated prompts.
-
-### Improved: Documentation
-
-- All documentation pages migrated to MDX
-- AI-powered documentation chat
-- Dynamic Open Graph images for all docs pages
-- Improved playground
-
-### Breaking Changes
-
-- `DataProvider` renamed to `StateProvider`
-- `useData` renamed to `useStateStore`, `useDataValue` to `useStateValue`, `useDataBinding` to `useStateBinding`
-- `onAction` renamed to `emit` in component context
-- `DataModel` type renamed to `StateModel`
-- `Action` type renamed to `ActionBinding` (old name still available but deprecated)
-
----
-
 ## v0.4.0
 
 February 2026

apps/web/app/(main)/docs/data-binding/page.mdx

@@ -121,4 +121,4 @@ AI can reference data paths in component props:
 
 ## Next
 
-Learn about [action handlers](/docs/registry#action-handlers) for user interactions.
+Learn about [actions](/docs/actions) for user interactions.

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

@@ -8,10 +8,6 @@ Install the core package plus your renderer of choice.
 
 <PackageInstall packages="@json-render/core @json-render/react" />
 
-## For React Native
-
-<PackageInstall packages="@json-render/core @json-render/react-native" />
-
 ## For Remotion Video
 
 <PackageInstall packages="@json-render/core @json-render/remotion remotion @remotion/player" />

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

@@ -1,6 +1,7 @@
 import { DocsMobileNav } from "@/components/docs-mobile-nav";
 import { DocsSidebar } from "@/components/docs-sidebar";
 import { CopyPageButton } from "@/components/copy-page-button";
+import { DocsChat } from "@/components/docs-chat";
 
 export default function DocsLayout({
   children,
@@ -24,6 +25,7 @@ export default function DocsLayout({
           <article>{children}</article>
         </div>
       </div>
+      <DocsChat />
     </>
   );
 }

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

@@ -2,19 +2,17 @@ export const metadata = { title: "Introduction" }
 
 # Introduction
 
-The Generative UI framework. Generate dynamic, personalized UIs from prompts without sacrificing reliability.
+Predictable. Guardrailed. Fast. Let users generate dashboards, widgets, apps, and data visualizations from prompts.
 
 ## What is json-render?
 
-json-render is a **Generative UI** framework: AI generates interfaces from natural language prompts, constrained to components you define. You set the guardrails -- what components exist, what props they take, what actions are available. AI generates JSON that matches your schema, and your components render it natively on web or mobile.
-
-Every generated interface is safe and predictable.
+json-render lets end users generate UI from natural language prompts — safely constrained to components you define. You set the guardrails: what components exist, what props they take, what actions are available. AI generates JSON that matches your schema, and your components render it natively.
 
 ## Why json-render?
 
 ### Guardrailed
 
-AI can only use components in your catalog. No arbitrary code generation. Predefined components and actions for safe, predictable output.
+AI can only use components in your catalog. No arbitrary code generation.
 
 ### Predictable
 
@@ -24,13 +22,9 @@ JSON output matches your schema, every time. Actions are declared by name, you c
 
 Stream and render progressively as the model responds. No waiting for completion.
 
-### Cross-Platform
-
-Render on web with React and on mobile with React Native from the same catalog and spec format.
-
 ## How it works
 
-1. Define the guardrails - what components, actions, and data bindings AI can use
-2. Prompt - describe what you want in natural language
-3. AI generates JSON - output is always predictable, constrained to your catalog
-4. Render fast - stream and render progressively as the model responds
+1. Define the guardrails — what components, actions, and data bindings AI can use
+2. Users prompt — end users describe what they want in natural language
+3. AI generates JSON — output is always predictable, constrained to your catalog
+4. Render fast — stream and render progressively as the model responds

apps/web/app/(main)/docs/quick-start/page.mdx

@@ -53,7 +53,7 @@ export const catalog = defineCatalog(schema, {
 
 ## 2. Define your components
 
-Use `defineRegistry` to map catalog types to React components. Each component receives type-safe `props`, `children`, and `emit`:
+Use `defineRegistry` to map catalog types to React components. Each component receives type-safe `props`, `children`, and `onAction`:
 
 ```tsx
 // lib/registry.tsx
@@ -71,10 +71,10 @@ export const { registry } = defineRegistry(catalog, {
         {children}
       </div>
     ),
-    Button: ({ props, emit }) => (
+    Button: ({ props, onAction }) => (
       <button
         className="px-4 py-2 bg-blue-500 text-white rounded"
-        onClick={() => emit?.("press")}
+        onClick={() => onAction?.({ name: props.action })}
       >
         {props.label}
       </button>
@@ -165,5 +165,5 @@ export default function Page() {
 
 - Learn about [catalogs](/docs/catalog) in depth
 - Explore [data binding](/docs/data-binding) for dynamic values
-- Add [action handlers](/docs/registry#action-handlers) for interactivity
+- Add [actions](/docs/actions) for interactivity
 - Implement [conditional visibility](/docs/visibility)

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

@@ -2,19 +2,11 @@ export const metadata = { title: "Registry" }
 
 # Registry
 
-A registry maps your [catalog](/docs/catalog) definitions to platform-specific implementations. The catalog defines *what* AI can generate — the registry provides the *how*.
+Register React components and action handlers to bring your catalog to life.
 
-What a registry contains depends on the schema you use. Each package defines its own schema, which determines the shape of both the catalog and the registry.
+## defineRegistry
 
-- **`@json-render/react`** — Components (React elements) and action handlers
-- **`@json-render/react-native`** — Components (React Native elements) and action handlers
-- **`@json-render/remotion`** — Clip components, transitions, and effects
-
-## @json-render/react
-
-### defineRegistry
-
-Use `defineRegistry` to create a type-safe registry from your catalog. Pass your components, actions, or both:
+Use `defineRegistry` to create a type-safe registry from your catalog. Pass your components, actions, or both in a single call:
 
 ```tsx
 import { defineRegistry } from '@json-render/react';
@@ -57,13 +49,13 @@ export const { registry, handlers, executeAction } = defineRegistry(myCatalog, {
 
 The returned object contains:
 
-- `registry` — component registry for `<Renderer />`
-- `handlers` — factory for ActionProvider-compatible handlers
-- `executeAction` — imperative action dispatch (for use outside the React tree)
+- `registry` - component registry for `<Renderer />`
+- `handlers` - factory for ActionProvider-compatible handlers
+- `executeAction` - imperative action dispatch (for use outside the React tree)
 
-### Component Props
+## Component Props
 
-Each component receives a `ComponentContext` object:
+Each component in the registry receives a `ComponentContext` object:
 
 ```typescript
 interface ComponentContext {
@@ -76,11 +68,13 @@ interface ComponentContext {
 
 Props are automatically inferred from your catalog, so `props.title` is typed as `string` if your catalog defines it that way.
 
-### Action Handlers
+## Action Handlers
 
 Instead of AI generating arbitrary code, it declares *intent* by name. Your application provides the implementation. This is a core guardrail.
 
-Actions are declared in your [catalog](/docs/catalog). The `@json-render/react` schema supports an `actions` key where you define what operations AI can trigger:
+### Defining Actions
+
+Define available actions in your catalog:
 
 ```typescript
 import { defineCatalog } from '@json-render/core';
@@ -110,6 +104,8 @@ const catalog = defineCatalog(schema, {
 });
 ```
 
+### Implementing Action Handlers
+
 Action handlers receive `(params, setState, data)` and are defined inside `defineRegistry`:
 
 ```tsx
@@ -136,7 +132,7 @@ export const { handlers, executeAction } = defineRegistry(catalog, {
 });
 ```
 
-### Data Binding
+## Using Data Binding
 
 Use hooks inside your registry components to read and write data:
 
@@ -172,7 +168,7 @@ TextField: ({ props }) => {
 },
 ```
 
-### Using the Renderer
+## Using the Renderer
 
 Wire everything together with providers and the `<Renderer />` component:
 
@@ -209,55 +205,6 @@ function App({ spec, data, setState }) {
 }
 ```
 
-## @json-render/react-native
-
-`@json-render/react-native` uses the same `defineRegistry` API. The only difference is that components return React Native elements instead of HTML:
-
-```tsx
-import { defineRegistry } from '@json-render/react-native';
-import { View, Text, Pressable } from 'react-native';
-
-export const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: ({ props, children }) => (
-      <View style={styles.card}>
-        <Text style={styles.title}>{props.title}</Text>
-        {children}
-      </View>
-    ),
-
-    Button: ({ props, emit }) => (
-      <Pressable onPress={() => emit?.("press")}>
-        <Text>{props.label}</Text>
-      </Pressable>
-    ),
-  },
-});
-```
-
-See the [@json-render/react-native API reference](/docs/api/react-native) for the full API.
-
-## @json-render/remotion
-
-`@json-render/remotion` takes a different approach. Instead of `defineRegistry`, it uses a plain component registry with built-in standard components for video production:
-
-```tsx
-import { Renderer, standardComponents } from '@json-render/remotion';
-
-// Use the standard components directly
-<Renderer spec={timelineSpec} components={standardComponents} />
-
-// Or extend with your own
-const components = {
-  ...standardComponents,
-  CustomSlide: ({ clip }) => <AbsoluteFill>{/* ... */}</AbsoluteFill>,
-};
-```
-
-The Remotion schema also supports `transitions` and `effects` in the catalog rather than actions.
-
-See the [@json-render/remotion API reference](/docs/api/remotion) for the full API.
-
 ## Next
 
 Learn about [data binding](/docs/data-binding) for dynamic values.

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

@@ -9,16 +9,12 @@ export default function Home() {
     <>
       {/* Hero */}
       <section className="max-w-5xl mx-auto px-6 pt-24 pb-16 text-center">
-        <p className="text-xs sm:text-sm font-medium text-muted-foreground tracking-widest uppercase mb-4">
-          The Generative UI Framework
-        </p>
-        <h1 className="text-4xl sm:text-6xl md:text-7xl font-bold tracking-tighter mb-6">
+        <h1 className="text-5xl sm:text-6xl md:text-7xl font-bold tracking-tighter mb-6">
           AI → json-render → UI
         </h1>
         <p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-12 leading-relaxed">
-          Generate dynamic, personalized UIs from prompts without sacrificing
-          reliability. Predefined components and actions for safe, predictable
-          output.
+          Define a component catalog. Users prompt. AI outputs JSON constrained
+          to your catalog. Your components render it.
         </p>
 
         <Demo />
@@ -69,10 +65,10 @@ export default function Home() {
               <div className="text-xs text-muted-foreground font-mono mb-3">
                 02
               </div>
-              <h3 className="text-lg font-semibold mb-2">AI Generates</h3>
+              <h3 className="text-lg font-semibold mb-2">Users Prompt</h3>
               <p className="text-sm text-muted-foreground leading-relaxed">
-                Describe what you want. AI generates JSON constrained to your
-                catalog. Every interface is unique.
+                End users describe what they want. AI generates JSON constrained
+                to your catalog.
               </p>
             </div>
             <div>
@@ -248,10 +244,6 @@ export default function Page() {
           <h2 className="text-2xl font-semibold mb-12 text-center">Features</h2>
           <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
             {[
-              {
-                title: "Generative UI",
-                desc: "Generate dynamic, personalized interfaces from prompts with AI",
-              },
               {
                 title: "Guardrails",
                 desc: "AI can only use components you define in the catalog",
@@ -261,16 +253,20 @@ export default function Page() {
                 desc: "Progressive rendering as JSON streams from the model",
               },
               {
-                title: "React & React Native",
-                desc: "Render on web and mobile from the same catalog and spec format",
+                title: "Code Export",
+                desc: "Export as standalone React code with no runtime dependencies",
               },
               {
                 title: "Data Binding",
-                desc: "Two-way state binding with dynamic prop expressions",
+                desc: "Two-way binding with JSON Pointer paths",
               },
               {
-                title: "Code Export",
-                desc: "Export as standalone React code with no runtime dependencies",
+                title: "Actions",
+                desc: "Named actions handled by your application",
+              },
+              {
+                title: "Visibility",
+                desc: "Conditional show/hide based on data or auth",
               },
             ].map((feature) => (
               <div key={feature.title}>

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

@@ -18,16 +18,15 @@ 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/remotion, @json-render/codegen
 
-You have access to the full json-render documentation via the bash and readFile tools. The docs are available as markdown files in the /workspace/docs/ directory.
+You have access to the full json-render documentation via the bash and readFile tools. The docs are available as markdown files in the /docs/ directory.
 
 When answering questions:
-- Use the bash tool to list files (ls /workspace/docs/) or search for content (grep -r "keyword" /workspace/docs/)
-- Use the readFile tool to read specific documentation pages (e.g. readFile with path "/workspace/docs/index.md")
+- Use the bash tool to list files (ls /docs/) or search for content (grep -r "keyword" /docs/)
+- Use the readFile tool to read specific documentation pages
 - Always base your answers on the actual documentation content
 - Be concise and accurate
 - If the docs don't cover a topic, say so honestly
-- Do NOT include source references or file paths in your response
-- Do NOT use emojis in your responses`;
+- Do NOT include source references or file paths in your response`;
 
 async function loadDocsFiles(): Promise<Record<string, string>> {
   const files: Record<string, string> = {};

apps/web/app/globals.css

@@ -28,7 +28,6 @@
   --border: oklch(0.85 0 0);
   --input: oklch(0.85 0 0);
   --ring: oklch(0.6 0 0);
-  --chat-bg: oklch(0.95 0 0);
 }
 
 .dark {
@@ -53,7 +52,6 @@
   --border: oklch(0.25 0 0);
   --input: oklch(0.25 0 0);
   --ring: oklch(0.4 0 0);
-  --chat-bg: oklch(0.25 0 0);
 }
 
 @theme inline {
@@ -111,49 +109,29 @@
     @apply bg-transparent p-0;
   }
 
-  /* Hide page scrollbar */
-  html {
-    scrollbar-width: none;
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
   }
 
-  html::-webkit-scrollbar {
-    display: none;
+  ::-webkit-scrollbar-track {
+    @apply bg-background;
   }
 
+  ::-webkit-scrollbar-thumb {
+    @apply bg-border rounded;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-muted-foreground;
+  }
 }
 
 button {
   cursor: pointer;
 }
 
-/* Tool call shimmer animation */
-@keyframes tool-shimmer {
-  0% { opacity: 0.5; }
-  50% { opacity: 1; }
-  100% { opacity: 0.5; }
-}
-
-.animate-tool-shimmer {
-  animation: tool-shimmer 1.5s ease-in-out infinite;
-}
-
-/* Fix list rendering in chat content */
-.docs-chat-content ul,
-.docs-chat-content ol {
-  list-style-position: outside;
-  padding-left: 1.25em;
-}
-
-.docs-chat-content li > p {
-  display: inline;
-  margin: 0;
-}
-
-.docs-chat-content li {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
 /* Shiki dual theme support */
 .shiki,
 .shiki span {
@@ -166,4 +144,3 @@ button {
   color: var(--shiki-dark) !important;
   background-color: var(--shiki-dark-bg) !important;
 }
-

apps/web/app/layout.tsx

@@ -2,11 +2,9 @@ import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
-import { DocsChat } from "@/components/docs-chat";
 import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { PAGE_TITLES } from "@/lib/page-titles";
-import { cookies } from "next/headers";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -24,14 +22,11 @@ export const metadata: Metadata = {
     template: "%s | json-render",
   },
   description:
-    "The Generative UI framework. Generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
+    "Let users generate dashboards, widgets, apps, and data visualizations from prompts — safely constrained to components you define.",
   keywords: [
     "json-render",
-    "generative UI",
     "AI UI generation",
-    "user-generated interfaces",
     "React components",
-    "React Native",
     "guardrails",
     "structured output",
     "dashboard builder",
@@ -43,23 +38,23 @@ export const metadata: Metadata = {
     locale: "en_US",
     url: "https://json-render.dev",
     siteName: "json-render",
-    title: "json-render | The Generative UI Framework",
+    title: "json-render | AI-generated UI with guardrails",
     description:
-      "The Generative UI framework. Generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
+      "Let users generate dashboards, widgets, apps, and data visualizations from prompts — safely constrained to components you define.",
     images: [
       {
         url: "/og",
         width: 1200,
         height: 630,
-        alt: "json-render - The Generative UI Framework",
+        alt: "json-render - AI-generated UI with guardrails",
       },
     ],
   },
   twitter: {
     card: "summary_large_image",
-    title: "json-render | The Generative UI Framework",
+    title: "json-render | AI-generated UI with guardrails",
     description:
-      "The Generative UI framework. Generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
+      "Let users generate dashboards, widgets, apps, and data visualizations from prompts — safely constrained to components you define.",
     images: ["/og"],
     creator: "@verabornnot",
   },
@@ -72,31 +67,15 @@ export const metadata: Metadata = {
   },
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const cookieStore = await cookies();
-  const chatOpen = cookieStore.get("docs-chat-open")?.value === "true";
-  const chatWidth = Number(cookieStore.get("docs-chat-width")?.value) || 400;
-
   return (
     <html lang="en" suppressHydrationWarning>
-      <head>
-        {chatOpen && (
-          <style
-            dangerouslySetInnerHTML={{
-              __html: `@media(min-width:640px){body{padding-right:${chatWidth}px}}`,
-            }}
-          />
-        )}
-      </head>
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        <ThemeProvider>
-          {children}
-          <DocsChat defaultOpen={chatOpen} defaultWidth={chatWidth} />
-        </ThemeProvider>
+        <ThemeProvider>{children}</ThemeProvider>
         <Analytics />
         <SpeedInsights />
       </body>

apps/web/app/og/og-image.tsx

@@ -66,27 +66,23 @@ export async function renderOgImage(title: string) {
         style={{
           display: "flex",
           flex: 1,
-          flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
         }}
       >
-        {title.split("\n").map((line, i) => (
-          <span
-            key={i}
-            style={{
-              fontSize: 72,
-              fontFamily: "Geist",
-              fontWeight: 400,
-              color: "white",
-              letterSpacing: "-0.02em",
-              textAlign: "center",
-              lineHeight: 1.2,
-            }}
-          >
-            {line}
-          </span>
-        ))}
+        <span
+          style={{
+            fontSize: 72,
+            fontFamily: "Geist",
+            fontWeight: 400,
+            color: "white",
+            letterSpacing: "-0.02em",
+            textAlign: "center",
+            lineHeight: 1.2,
+          }}
+        >
+          {title}
+        </span>
       </div>
     </div>,
     {

apps/web/components/docs-chat.tsx

@@ -1,233 +1,24 @@
 "use client";
 
-import {
-  useRef,
-  useEffect,
-  useState,
-  useCallback,
-  type PointerEvent as ReactPointerEvent,
-} from "react";
+import { useRef, useEffect, useState } from "react";
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
 import { Streamdown } from "streamdown";
-import Link from "next/link";
-import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
 
 const STORAGE_KEY = "docs-chat-messages";
 const transport = new DefaultChatTransport({ api: "/api/docs-chat" });
 
-const DESKTOP_DEFAULT_WIDTH = 400;
-const DESKTOP_MIN_WIDTH = 300;
-const DESKTOP_MAX_WIDTH = 700;
-
-function setCookie(name: string, value: string) {
-  document.cookie = `${name}=${encodeURIComponent(value)};path=/;max-age=${60 * 60 * 24 * 365};samesite=lax`;
-}
-
-const TOOL_LABELS: Record<
-  string,
-  { label: string; pastLabel: string; argKey?: string }
-> = {
-  readFile: { label: "Reading", pastLabel: "Read", argKey: "path" },
-  bash: { label: "Running", pastLabel: "Ran", argKey: "command" },
-};
-
-function isToolPart(part: { type: string }): part is {
-  type: string;
-  toolCallId: string;
-  toolName?: string;
-  state: string;
-  input?: Record<string, unknown>;
-  output?: unknown;
-  errorText?: string;
-} {
-  return part.type.startsWith("tool-") || part.type === "dynamic-tool";
-}
-
-function getToolName(part: { type: string; toolName?: string }): string {
-  if (part.type === "dynamic-tool") return part.toolName ?? "tool";
-  return part.type.replace(/^tool-/, "");
-}
-
-function ToolCallDisplay({
-  part,
-}: {
-  part: {
-    type: string;
-    toolCallId: string;
-    toolName?: string;
-    state: string;
-    input?: Record<string, unknown>;
-    output?: unknown;
-    errorText?: string;
-  };
-}) {
-  const toolName = getToolName(part);
-  const config = TOOL_LABELS[toolName] ?? {
-    label: toolName,
-    pastLabel: toolName,
-  };
-  const isDone = part.state === "output-available";
-  const isError = part.state === "output-error";
-  const isRunning = !isDone && !isError;
-  const displayLabel = isRunning ? config.label : config.pastLabel;
-
-  const args = (part.input ?? {}) as Record<string, unknown>;
-  const argValue = config.argKey ? args[config.argKey] : undefined;
-  const argPreview =
-    argValue != null
-      ? String(argValue)
-          .replace(/\/workspace\//g, "/")
-          .replace(/\.md$/, "")
-          .replace(/\/index$/, "")
-      : "";
-
-  // Link to the docs page if it's a /docs/ path from readFile
-  const docsLink =
-    toolName === "readFile" &&
-    (argPreview === "/docs" || argPreview.startsWith("/docs/"))
-      ? argPreview
-      : null;
-
-  const argEl = argPreview ? (
-    docsLink ? (
-      <Link href={docsLink} className="truncate underline underline-offset-2">
-        {argPreview}
-      </Link>
-    ) : (
-      <span className="truncate">{argPreview}</span>
-    )
-  ) : null;
-
-  return (
-    <div className="text-xs py-0.5 min-w-0">
-      {isRunning ? (
-        <span className="inline-flex items-center gap-1 font-mono text-muted-foreground animate-tool-shimmer min-w-0 max-w-full">
-          <span className="shrink-0">{displayLabel}</span>
-          {argEl}
-        </span>
-      ) : (
-        <span className="inline-flex items-center gap-1 font-mono text-muted-foreground/60 min-w-0 max-w-full">
-          <span className="shrink-0">{displayLabel}</span>
-          {argEl}
-          {isError && <span className="text-destructive">failed</span>}
-        </span>
-      )}
-    </div>
-  );
-}
-
-const SUGGESTIONS = [
-  "What is json-render?",
-  "How do I install it?",
-  "How does streaming work?",
-  "What components are available?",
-  "How do I create a custom schema?",
-];
-
-export function DocsChat({
-  defaultOpen = false,
-  defaultWidth = DESKTOP_DEFAULT_WIDTH,
-}: {
-  defaultOpen?: boolean;
-  defaultWidth?: number;
-}) {
-  const [open, setOpen] = useState(defaultOpen);
+export function DocsChat() {
+  const [open, setOpen] = useState(false);
   const [input, setInput] = useState("");
-  const [isDesktop, setIsDesktop] = useState(false);
-  const [hasMounted, setHasMounted] = useState(false);
-  const [desktopWidth, setDesktopWidth] = useState(
-    Math.min(DESKTOP_MAX_WIDTH, Math.max(DESKTOP_MIN_WIDTH, defaultWidth)),
-  );
-  const messagesScrollRef = useRef<HTMLDivElement>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const restoredRef = useRef(false);
-  const isDraggingRef = useRef(false);
 
-  const { messages, sendMessage, status, setMessages, error } = useChat({
-    transport,
-  });
+  const { messages, sendMessage, status, setMessages } = useChat({ transport });
 
   const isLoading = status === "streaming" || status === "submitted";
-  const showMessages = messages.length > 0 || !!error || isLoading;
-
-  // Detect desktop vs mobile. Close sidebar on mobile if it was open from cookie.
-  useEffect(() => {
-    const mq = window.matchMedia("(min-width: 640px)");
-    setIsDesktop(mq.matches);
-    setHasMounted(true);
-    // If on mobile but sidebar was open from cookie, close it
-    if (!mq.matches && defaultOpen) {
-      setOpen(false);
-    }
-    const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Persist open state to cookie (only after mount to avoid overwriting on mobile)
-  useEffect(() => {
-    if (hasMounted) {
-      setCookie("docs-chat-open", String(open));
-    }
-  }, [open, hasMounted]);
-
-  // Push page content on desktop when pane is open.
-  // Use padding on body so the page scrollbar stays at the viewport edge (behind the sidebar)
-  // instead of appearing right next to the sidebar's scrollbar.
-  useEffect(() => {
-    const body = document.body;
-    if (isDesktop && open) {
-      body.style.paddingRight = `${desktopWidth}px`;
-      if (!isDraggingRef.current) {
-        body.style.transition = "padding-right 150ms ease";
-      }
-    } else if (isDesktop) {
-      body.style.paddingRight = "0px";
-      body.style.transition = "padding-right 150ms ease";
-    }
-    return () => {
-      body.style.paddingRight = "0px";
-      body.style.transition = "";
-    };
-  }, [isDesktop, open, desktopWidth]);
-
-  // Resize handle drag
-  const handleResizePointerDown = useCallback(
-    (e: ReactPointerEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      isDraggingRef.current = true;
-      document.documentElement.style.transition = "none";
-      const startX = e.clientX;
-      const startWidth = desktopWidth;
-
-      const onPointerMove = (ev: globalThis.PointerEvent) => {
-        const delta = startX - ev.clientX;
-        const newWidth = Math.min(
-          DESKTOP_MAX_WIDTH,
-          Math.max(DESKTOP_MIN_WIDTH, startWidth + delta),
-        );
-        setDesktopWidth(newWidth);
-      };
-
-      const onPointerUp = () => {
-        isDraggingRef.current = false;
-        document.documentElement.style.transition = "";
-        document.removeEventListener("pointermove", onPointerMove);
-        document.removeEventListener("pointerup", onPointerUp);
-      };
-
-      document.addEventListener("pointermove", onPointerMove);
-      document.addEventListener("pointerup", onPointerUp);
-    },
-    [desktopWidth],
-  );
-
-  // Persist width to cookie
-  useEffect(() => {
-    setCookie("docs-chat-width", String(desktopWidth));
-  }, [desktopWidth]);
 
   // Restore messages from sessionStorage on mount
   useEffect(() => {
@@ -261,282 +52,157 @@ export function DocsChat({
     }
   }, [messages, isLoading]);
 
-  // Cmd+K to open sidebar and focus prompt, Escape to close
+  // Auto-open when new messages arrive
+  const prevMessageCount = useRef(0);
   useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        setOpen((prev) => {
-          if (!prev) {
-            setTimeout(() => inputRef.current?.focus(), 200);
-          }
-          return !prev;
-        });
-      }
-      if (e.key === "Escape" && open && isDesktop) {
+    if (messages.length > prevMessageCount.current) {
+      setOpen(true);
+    }
+    prevMessageCount.current = messages.length;
+  }, [messages.length]);
+
+  // Scroll to bottom when messages change
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  // Close message area when clicking outside
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
         setOpen(false);
       }
     };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open, isDesktop]);
-
-  // Auto-focus input when opened
-  useEffect(() => {
-    if (open) {
-      const timer = setTimeout(() => inputRef.current?.focus(), 200);
-      return () => clearTimeout(timer);
-    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
 
-  // Auto-open when error occurs
-  useEffect(() => {
-    if (error) setOpen(true);
-  }, [error]);
-
-  // Scroll to bottom when messages change or error occurs
-  useEffect(() => {
-    const el = messagesScrollRef.current;
-    if (!el) return;
-    requestAnimationFrame(() => {
-      el.scrollTop = el.scrollHeight;
-    });
-  }, [messages, error]);
-
-  const handleSubmit = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault();
-      if (!input.trim() || isLoading) return;
-      sendMessage({ text: input });
-      setInput("");
-    },
-    [input, isLoading, sendMessage],
-  );
-
-  const handleClear = useCallback(() => {
-    setMessages([]);
-    sessionStorage.removeItem(STORAGE_KEY);
-  }, [setMessages]);
-
-  const hasVisibleContent = (
-    parts: (typeof messages)[number]["parts"],
-  ): boolean => {
-    return parts.some(
-      (p) => (p.type === "text" && p.text.length > 0) || isToolPart(p),
-    );
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || isLoading) return;
+    sendMessage({ text: input });
+    setInput("");
   };
 
-  // Shared chat panel content used by both desktop and mobile
-  const chatPanel = (
-    <>
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b shrink-0">
-        <span className="text-sm font-medium">json-render Docs</span>
-        <div className="flex items-center gap-3">
-          {showMessages && (
-            <button
-              onClick={handleClear}
-              className="text-xs text-muted-foreground hover:text-foreground transition-colors"
-              aria-label="Clear conversation"
-            >
-              Clear
-            </button>
-          )}
-          {isDesktop && (
-            <button
-              onClick={() => setOpen(false)}
-              className="text-muted-foreground hover:text-foreground transition-colors"
-              aria-label="Close panel"
-            >
-              <svg
-                width="14"
-                height="14"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <line x1="18" y1="6" x2="6" y2="18" />
-                <line x1="6" y1="6" x2="18" y2="18" />
-              </svg>
-            </button>
-          )}
-        </div>
-      </div>
+  const handleClear = () => {
+    setMessages([]);
+    sessionStorage.removeItem(STORAGE_KEY);
+    setOpen(false);
+    inputRef.current?.focus();
+  };
 
-      {/* Content: suggestions or messages */}
-      {showMessages ? (
-        <div
-          ref={messagesScrollRef}
-          className="flex-1 min-h-0 p-4 space-y-4 overflow-y-auto"
-        >
-          {messages.map((message) => {
-            if (!hasVisibleContent(message.parts)) return null;
-            return (
-              <div key={message.id}>
-                {message.role === "user" ? (
-                  <div className="text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed">
-                    {message.parts
-                      .filter(
-                        (p): p is Extract<typeof p, { type: "text" }> =>
-                          p.type === "text",
-                      )
-                      .map((p) => p.text)
-                      .join("")}
-                  </div>
-                ) : (
-                  <div className="space-y-2">
-                    {message.parts.map((part, i) => {
-                      if (part.type === "text" && part.text) {
-                        return (
-                          <div
-                            key={i}
-                            className="docs-chat-content text-sm text-foreground/90 leading-relaxed prose prose-sm dark:prose-invert max-w-none"
-                          >
-                            <Streamdown>{part.text}</Streamdown>
-                          </div>
-                        );
-                      }
-                      if (isToolPart(part)) {
-                        return (
-                          <ToolCallDisplay key={part.toolCallId} part={part} />
-                        );
-                      }
-                      return null;
-                    })}
-                  </div>
-                )}
-              </div>
-            );
-          })}
-          {error && (
-            <div className="text-sm text-destructive/80 bg-destructive/10 rounded-md px-3 py-2">
-              {(() => {
-                try {
-                  const parsed = JSON.parse(error.message);
-                  return parsed.message || parsed.error || error.message;
-                } catch {
-                  return (
-                    error.message || "Something went wrong. Please try again."
-                  );
-                }
-              })()}
-            </div>
-          )}
-        </div>
-      ) : (
-        <div className="flex-1 min-h-0 flex flex-col">
-          <div className="flex flex-wrap gap-2 p-4">
-            {SUGGESTIONS.map((s) => (
-              <button
-                key={s}
-                type="button"
-                onClick={() => {
-                  sendMessage({ text: s });
-                }}
-                className="text-xs px-3 py-1.5 rounded-full border bg-secondary font-medium text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {s}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Input bar */}
-      <form
-        onSubmit={handleSubmit}
-        className="flex items-end gap-2 px-4 py-3 border-t shrink-0"
-      >
-        <textarea
-          ref={inputRef}
-          value={input}
-          onChange={(e) => {
-            setInput(e.target.value);
-            e.target.style.height = "auto";
-            e.target.style.height = `${e.target.scrollHeight}px`;
-          }}
-          rows={1}
-          enterKeyHint="send"
-          placeholder="Ask a question..."
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault();
-              handleSubmit(e);
-            }
-          }}
-          className="flex-1 bg-transparent text-base sm:text-sm text-foreground outline-none disabled:opacity-50 resize-none max-h-32 leading-relaxed placeholder:text-muted-foreground"
-        />
-        <button
-          type="submit"
-          disabled={isLoading || !input.trim()}
-          className="bg-primary text-primary-foreground rounded-full p-1.5 hover:bg-primary/90 transition-colors disabled:opacity-30 shrink-0"
-          aria-label="Send message"
-        >
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <line x1="12" y1="19" x2="12" y2="5" />
-            <polyline points="5 12 12 5 19 12" />
-          </svg>
-        </button>
-      </form>
-    </>
-  );
+  const getTextFromParts = (
+    parts: (typeof messages)[number]["parts"],
+  ): string => {
+    return parts
+      .filter(
+        (p): p is Extract<typeof p, { type: "text" }> => p.type === "text",
+      )
+      .map((p) => p.text)
+      .join("");
+  };
 
   return (
-    <>
-      {/* Ask AI trigger button */}
-      {!open && (
-        <button
-          onClick={() => setOpen(true)}
-          className="fixed z-50 bottom-4 left-1/2 -translate-x-1/2 sm:left-auto sm:translate-x-0 sm:right-4 flex items-center gap-2 px-4 py-2 rounded-lg border bg-background text-primary shadow-lg hover:bg-primary hover:text-primary-foreground transition-colors text-sm font-medium"
-          aria-label="Ask AI"
-        >
-          Ask AI
-          <kbd className="hidden sm:inline-flex items-center gap-0.5 text-xs opacity-60 font-mono">
-            <span>&#8984;</span>K
-          </kbd>
-        </button>
-      )}
-
-      {/* Desktop: resizable side pane — always rendered, hidden on mobile via CSS */}
-      <aside
-        className={`hidden sm:flex fixed top-0 right-0 bottom-0 z-40 border-l bg-background transition-transform duration-150 ease-in-out ${open ? "translate-x-0" : "translate-x-full"}`}
-        style={{ width: desktopWidth }}
-        aria-hidden={!open}
+    <div className="fixed bottom-0 left-0 right-0 z-50 pointer-events-none">
+      <div
+        ref={containerRef}
+        className="max-w-xl mx-auto px-4 pb-4 [&>*]:pointer-events-auto"
       >
-        {/* Resize handle */}
-        <div
-          onPointerDown={handleResizePointerDown}
-          className="absolute top-0 bottom-0 left-0 w-1.5 cursor-col-resize hover:bg-ring/30 active:bg-ring/50 transition-colors z-10"
-        />
-        <div className="flex flex-col flex-1 min-w-0">{chatPanel}</div>
-      </aside>
+        {/* Messages panel */}
+        {open && messages.length > 0 && (
+          <div className="mb-2 bg-background border border-border rounded-lg shadow-lg max-h-[60vh] flex flex-col">
+            <div className="flex items-center justify-between px-4 py-2 border-b border-border shrink-0">
+              <span className="text-xs font-medium text-muted-foreground">
+                json-render Docs
+              </span>
+              <button
+                onClick={handleClear}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                aria-label="Clear conversation"
+              >
+                Clear
+              </button>
+            </div>
+            <div className="p-4 space-y-4 overflow-y-auto">
+              {messages.map((message) => {
+                const text = getTextFromParts(message.parts);
+                if (!text) return null;
+                return (
+                  <div key={message.id}>
+                    {message.role === "assistant" ? (
+                      <div className="text-sm text-foreground/90 leading-relaxed prose prose-sm dark:prose-invert max-w-none">
+                        <Streamdown>{text}</Streamdown>
+                      </div>
+                    ) : (
+                      <div className="text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed">
+                        {text}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+              <div ref={messagesEndRef} />
+            </div>
+          </div>
+        )}
 
-      {/* Mobile: Sheet overlay/drawer — only after mount to avoid flash on desktop */}
-      {hasMounted && !isDesktop && (
-        <Sheet open={open} onOpenChange={setOpen}>
-          <SheetContent
-            side="right"
-            overlayClassName="!bg-background"
-            className="!inset-0 !w-full !h-full !max-w-none p-0 flex flex-col"
-            style={{ backgroundColor: "var(--background)", opacity: 1 }}
+        {/* Input bar */}
+        <form
+          onSubmit={handleSubmit}
+          onClick={() => inputRef.current?.focus()}
+          className="flex items-end gap-2 bg-background border border-border rounded-lg shadow-lg px-4 py-3 cursor-text"
+        >
+          <textarea
+            ref={inputRef}
+            value={input}
+            onChange={(e) => {
+              setInput(e.target.value);
+              e.target.style.height = "auto";
+              e.target.style.height = `${e.target.scrollHeight}px`;
+            }}
+            placeholder="Ask about the docs..."
+            rows={1}
+            onFocus={() => {
+              if (messages.length > 0) setOpen(true);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Escape") {
+                setOpen(false);
+                inputRef.current?.blur();
+              }
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                handleSubmit(e);
+              }
+            }}
+            className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none disabled:opacity-50 resize-none max-h-32 leading-relaxed"
+          />
+          <button
+            type="submit"
+            disabled={isLoading || !input.trim()}
+            className="bg-primary text-primary-foreground rounded-md p-1 hover:bg-primary/90 transition-colors disabled:opacity-30"
+            aria-label="Send message"
           >
-            <SheetTitle className="sr-only">AI Chat</SheetTitle>
-            {chatPanel}
-          </SheetContent>
-        </Sheet>
-      )}
-    </>
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <line x1="12" y1="19" x2="12" y2="5" />
+              <polyline points="5 12 12 5 19 12" />
+            </svg>
+          </button>
+        </form>
+      </div>
+    </div>
   );
 }

apps/web/components/ui/sheet.tsx

@@ -18,7 +18,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/75 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:duration-150 data-[state=open]:duration-150",
+      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:duration-150 data-[state=open]:duration-150",
       className,
     )}
     {...props}
@@ -27,26 +27,17 @@ const SheetOverlay = React.forwardRef<
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
-const sheetSideVariants = {
-  left: "inset-y-0 left-0 h-full w-3/4 max-w-xs border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
-  right:
-    "inset-y-0 right-0 h-full w-3/4 max-w-xs data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
-};
-
 const SheetContent = React.forwardRef<
   React.ComponentRef<typeof SheetPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & {
-    side?: "left" | "right";
-    overlayClassName?: string;
-  }
->(({ className, children, side = "left", overlayClassName, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
   <SheetPortal>
-    <SheetOverlay className={overlayClassName} />
+    <SheetOverlay />
     <SheetPrimitive.Content
       ref={ref}
       className={cn(
         "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-150 data-[state=open]:duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out focus:outline-none",
-        sheetSideVariants[side],
+        "inset-y-0 left-0 h-full w-3/4 max-w-xs border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
         className,
       )}
       {...props}

apps/web/lib/docs-navigation.ts

@@ -39,11 +39,6 @@ export const docsNavigation: NavSection[] = [
         href: "https://github.com/vercel-labs/json-render/tree/main/examples/dashboard",
         external: true,
       },
-      {
-        title: "React Native",
-        href: "https://github.com/vercel-labs/json-render/tree/main/examples/react-native",
-        external: true,
-      },
       {
         title: "Remotion",
         href: "https://github.com/vercel-labs/json-render/tree/main/examples/remotion",
@@ -74,7 +69,6 @@ export const docsNavigation: NavSection[] = [
     items: [
       { title: "@json-render/core", href: "/docs/api/core" },
       { title: "@json-render/react", href: "/docs/api/react" },
-      { title: "@json-render/react-native", href: "/docs/api/react-native" },
       { title: "@json-render/remotion", href: "/docs/api/remotion" },
       { title: "@json-render/codegen", href: "/docs/api/codegen" },
     ],

apps/web/lib/page-titles.ts

@@ -7,7 +7,7 @@
  */
 export const PAGE_TITLES: Record<string, string> = {
   // Home (no slug)
-  "": "The Generative UI\nFramework",
+  "": "AI-generated UI with guardrails",
 
   // Top-level
   playground: "Playground",
@@ -36,7 +36,6 @@ export const PAGE_TITLES: Record<string, string> = {
   // API references
   "docs/api/core": "@json-render/core API",
   "docs/api/react": "@json-render/react API",
-  "docs/api/react-native": "@json-render/react-native API",
   "docs/api/codegen": "@json-render/codegen API",
   "docs/api/remotion": "@json-render/remotion API",
 };

apps/web/lib/rate-limit.ts

@@ -21,10 +21,7 @@ const noopRateLimiter = {
   limit: async () => ({ success: true, limit: 0, remaining: 0, reset: 0 }),
 };
 
-const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
-const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
-
-// Requests per minute (sliding window)
+// 10 requests per minute (sliding window)
 export const minuteRateLimit = {
   limit: async (identifier: string) => {
     if (!_minuteRateLimit) {
@@ -32,7 +29,7 @@ export const minuteRateLimit = {
       if (!redis) return noopRateLimiter.limit();
       _minuteRateLimit = new Ratelimit({
         redis,
-        limiter: Ratelimit.slidingWindow(MINUTE_LIMIT, "1 m"),
+        limiter: Ratelimit.slidingWindow(10, "1 m"),
         prefix: "ratelimit:minute",
       });
     }
@@ -40,7 +37,7 @@ export const minuteRateLimit = {
   },
 };
 
-// Requests per day (fixed window)
+// 100 requests per day (fixed window)
 export const dailyRateLimit = {
   limit: async (identifier: string) => {
     if (!_dailyRateLimit) {
@@ -48,7 +45,7 @@ export const dailyRateLimit = {
       if (!redis) return noopRateLimiter.limit();
       _dailyRateLimit = new Ratelimit({
         redis,
-        limiter: Ratelimit.fixedWindow(DAILY_LIMIT, "1 d"),
+        limiter: Ratelimit.fixedWindow(100, "1 d"),
         prefix: "ratelimit:daily",
       });
     }

apps/web/lib/render/catalog.ts

@@ -24,7 +24,6 @@ export const playgroundCatalog = defineCatalog(schema, {
       slots: ["default"],
       description:
         "Container card for content sections. Use for forms/content boxes, NOT for page headers.",
-      example: { title: "Overview", description: "Your account summary" },
     },
 
     Stack: {
@@ -38,7 +37,6 @@ export const playgroundCatalog = defineCatalog(schema, {
       }),
       slots: ["default"],
       description: "Flex container for layouts",
-      example: { direction: "vertical", gap: "md" },
     },
 
     Grid: {
@@ -48,7 +46,6 @@ export const playgroundCatalog = defineCatalog(schema, {
       }),
       slots: ["default"],
       description: "Grid layout (1-6 columns)",
-      example: { columns: 3, gap: "md" },
     },
 
     Separator: {
@@ -140,13 +137,6 @@ export const playgroundCatalog = defineCatalog(schema, {
       }),
       description:
         'Data table. columns: header labels. rows: 2D array of cell strings, e.g. [["Alice","admin"],["Bob","user"]].',
-      example: {
-        columns: ["Name", "Role"],
-        rows: [
-          ["Alice", "Admin"],
-          ["Bob", "User"],
-        ],
-      },
     },
 
     Heading: {
@@ -155,7 +145,6 @@ export const playgroundCatalog = defineCatalog(schema, {
         level: z.enum(["h1", "h2", "h3", "h4"]).nullable(),
       }),
       description: "Heading text (h1-h4)",
-      example: { text: "Welcome", level: "h1" },
     },
 
     Text: {
@@ -166,7 +155,6 @@ export const playgroundCatalog = defineCatalog(schema, {
           .nullable(),
       }),
       description: "Paragraph text",
-      example: { text: "Hello, world!" },
     },
 
     Image: {
@@ -185,7 +173,6 @@ export const playgroundCatalog = defineCatalog(schema, {
         size: z.enum(["sm", "md", "lg"]).nullable(),
       }),
       description: "User avatar with fallback initials",
-      example: { name: "Jane Doe", size: "md" },
     },
 
     Badge: {
@@ -194,7 +181,6 @@ export const playgroundCatalog = defineCatalog(schema, {
         variant: z.enum(["default", "success", "warning", "danger"]).nullable(),
       }),
       description: "Status badge",
-      example: { text: "Active", variant: "success" },
     },
 
     Alert: {
@@ -204,11 +190,6 @@ export const playgroundCatalog = defineCatalog(schema, {
         type: z.enum(["info", "success", "warning", "error"]).nullable(),
       }),
       description: "Alert banner",
-      example: {
-        title: "Note",
-        message: "Your changes have been saved.",
-        type: "success",
-      },
     },
 
     Progress: {
@@ -218,7 +199,6 @@ export const playgroundCatalog = defineCatalog(schema, {
         label: z.string().nullable(),
       }),
       description: "Progress bar (value 0-100)",
-      example: { value: 65, max: 100, label: "Upload progress" },
     },
 
     Skeleton: {
@@ -301,12 +281,6 @@ export const playgroundCatalog = defineCatalog(schema, {
       }),
       events: ["submit", "focus", "blur"],
       description: "Text input field. Use statePath for two-way binding.",
-      example: {
-        label: "Email",
-        name: "email",
-        type: "email",
-        placeholder: "you@example.com",
-      },
     },
 
     Textarea: {
@@ -386,7 +360,6 @@ export const playgroundCatalog = defineCatalog(schema, {
       }),
       events: ["press"],
       description: "Clickable button. Bind on.press for handler.",
-      example: { label: "Submit", variant: "primary" },
     },
 
     Link: {

apps/web/lib/render/registry.tsx

@@ -823,12 +823,7 @@ export const { registry, executeAction } = defineRegistry(playgroundCatalog, {
       const [localValue, setLocalValue] = useState<string>("");
       const value = props.statePath ? (boundValue ?? "") : localValue;
       const setValue = props.statePath ? setBoundValue! : setLocalValue;
-      const rawOptions = props.options ?? [];
-      // Coerce options to strings – AI may produce objects/numbers instead of
-      // plain strings which would cause duplicate `[object Object]` keys.
-      const options = rawOptions.map((opt) =>
-        typeof opt === "string" ? opt : String(opt ?? ""),
-      );
+      const options = props.options ?? [];
 
       return (
         <div className="space-y-2">
@@ -844,11 +839,8 @@ export const { registry, executeAction } = defineRegistry(playgroundCatalog, {
               <SelectValue placeholder={props.placeholder ?? "Select..."} />
             </SelectTrigger>
             <SelectContent>
-              {options.map((opt, idx) => (
-                <SelectItem
-                  key={`${idx}-${opt}`}
-                  value={opt || `option-${idx}`}
-                >
+              {options.map((opt) => (
+                <SelectItem key={opt} value={opt}>
                   {opt}
                 </SelectItem>
               ))}
@@ -884,10 +876,7 @@ export const { registry, executeAction } = defineRegistry(playgroundCatalog, {
     },
 
     Radio: ({ props, emit }) => {
-      const rawOptions = props.options ?? [];
-      const options = rawOptions.map((opt) =>
-        typeof opt === "string" ? opt : String(opt ?? ""),
-      );
+      const options = props.options ?? [];
       const [boundValue, setBoundValue] = props.statePath
         ? useStateBinding<string>(props.statePath) // eslint-disable-line react-hooks/rules-of-hooks
         : [undefined, undefined];
@@ -905,17 +894,11 @@ export const { registry, executeAction } = defineRegistry(playgroundCatalog, {
               emit?.("change");
             }}
           >
-            {options.map((opt, idx) => (
-              <div
-                key={`${idx}-${opt}`}
-                className="flex items-center space-x-2"
-              >
-                <RadioGroupItem
-                  value={opt || `option-${idx}`}
-                  id={`${props.name}-${idx}-${opt}`}
-                />
+            {options.map((opt) => (
+              <div key={opt} className="flex items-center space-x-2">
+                <RadioGroupItem value={opt} id={`${props.name}-${opt}`} />
                 <Label
-                  htmlFor={`${props.name}-${idx}-${opt}`}
+                  htmlFor={`${props.name}-${opt}`}
                   className="cursor-pointer"
                 >
                   {opt}

apps/web/next.config.js

@@ -11,11 +11,6 @@ const nextConfig = {
         destination: "/docs/registry",
         permanent: true,
       },
-      {
-        source: "/docs/actions",
-        destination: "/docs/registry#action-handlers",
-        permanent: true,
-      },
     ];
   },
 };

examples/dashboard/lib/render/catalog.ts

@@ -18,7 +18,6 @@ export const dashboardCatalog = defineCatalog(schema, {
       }),
       slots: ["default"],
       description: "Flex layout container",
-      example: { direction: "vertical", gap: "md" },
     },
 
     Accordion: {
@@ -51,7 +50,6 @@ export const dashboardCatalog = defineCatalog(schema, {
       }),
       description:
         "Clickable button. Use actionParams to pass parameters to the action (e.g., { limit: 5, sort: 'newest' })",
-      example: { label: "Save", variant: "default", action: "formSubmit" },
     },
 
     Input: {
@@ -62,12 +60,6 @@ export const dashboardCatalog = defineCatalog(schema, {
         type: z.enum(["text", "email", "password", "number", "tel"]).nullable(),
       }),
       description: "Text input field",
-      example: {
-        label: "Email",
-        valuePath: "/form/email",
-        placeholder: "you@example.com",
-        type: "email",
-      },
     },
 
     Form: {
@@ -89,7 +81,6 @@ export const dashboardCatalog = defineCatalog(schema, {
           .nullable(),
       }),
       description: "Status badge",
-      example: { text: "Active", variant: "default" },
     },
 
     Alert: {
@@ -313,13 +304,6 @@ export const dashboardCatalog = defineCatalog(schema, {
         emptyMessage: z.string().nullable(),
       }),
       description: "Data table with optional row actions (delete, edit, etc.)",
-      example: {
-        statePath: "/customers/data",
-        columns: [
-          { key: "name", label: "Name" },
-          { key: "email", label: "Email" },
-        ],
-      },
     },
 
     // Typography
@@ -329,7 +313,6 @@ export const dashboardCatalog = defineCatalog(schema, {
         level: z.enum(["h1", "h2", "h3", "h4"]).nullable(),
       }),
       description: "Section heading",
-      example: { text: "Dashboard", level: "h1" },
     },
 
     Text: {
@@ -338,7 +321,6 @@ export const dashboardCatalog = defineCatalog(schema, {
         muted: z.boolean().nullable(),
       }),
       description: "Text content",
-      example: { content: "Welcome back! Here is your overview." },
     },
 
     // Charts

examples/react-native/lib/render/catalog.ts

@@ -47,7 +47,6 @@ export const catalog = defineCatalog(schema, {
       slots: [],
       description:
         "Icon display using Ionicons. Use for action buttons, navigation items, and indicators. ALWAYS use this instead of emoji characters for UI icons. Use Ionicons naming convention (e.g. heart, heart-outline, chatbubble-outline, share-social-outline).",
-      example: { name: "heart-outline", size: 24, color: "#007AFF" },
     },
   },
   actions: standardActionDefinitions,

examples/stripe-app/src/lib/render/catalog.ts

@@ -26,7 +26,6 @@ export const stripeCatalog = defineCatalog(schema, {
       }),
       description:
         "Flex layout container for arranging children horizontally or vertically with configurable gap and alignment",
-      example: { direction: "vertical", gap: "medium" },
     },
 
     Inline: {
@@ -72,7 +71,6 @@ export const stripeCatalog = defineCatalog(schema, {
           .default("large"),
       }),
       description: "Display a heading/title text with configurable size",
-      example: { text: "Overview", size: "large" },
     },
 
     Text: {
@@ -96,7 +94,6 @@ export const stripeCatalog = defineCatalog(schema, {
       }),
       description:
         "Display body text with configurable color, size, and weight",
-      example: { content: "Payment received successfully.", color: "primary" },
     },
 
     // =========================================================================
@@ -114,13 +111,6 @@ export const stripeCatalog = defineCatalog(schema, {
       }),
       description:
         "Display a key metric with label, value, and optional trend indicator for KPIs",
-      example: {
-        label: "Revenue",
-        value: "$12,450",
-        change: "+8.2%",
-        changeType: "positive",
-        format: "currency",
-      },
     },
 
     Badge: {
@@ -138,7 +128,6 @@ export const stripeCatalog = defineCatalog(schema, {
           .default("neutral"),
       }),
       description: "Status badge indicator with configurable color type",
-      example: { label: "Active", type: "positive" },
     },
 
     Icon: {
@@ -295,12 +284,6 @@ export const stripeCatalog = defineCatalog(schema, {
         required: z.boolean().nullable(),
       }),
       description: "Text input field with label, validation, and data binding",
-      example: {
-        label: "Email",
-        placeholder: "customer@example.com",
-        valuePath: "/form/email",
-        type: "email",
-      },
     },
 
     TextArea: {
@@ -396,11 +379,6 @@ export const stripeCatalog = defineCatalog(schema, {
       }),
       description:
         "Action button with configurable style, size, and action handling",
-      example: {
-        label: "View Details",
-        action: "viewCustomer",
-        type: "primary",
-      },
     },
 
     ButtonGroup: {
@@ -473,14 +451,6 @@ export const stripeCatalog = defineCatalog(schema, {
       }),
       description:
         "Data table with configurable columns and optional row actions",
-      example: {
-        title: "Recent Payments",
-        statePath: "/payments/data",
-        columns: [
-          { key: "amount", label: "Amount" },
-          { key: "status", label: "Status" },
-        ],
-      },
     },
 
     // =========================================================================
@@ -495,11 +465,6 @@ export const stripeCatalog = defineCatalog(schema, {
       }),
       description:
         "Card displaying customer information with name, email, and status",
-      example: {
-        name: "Jane Smith",
-        email: "jane@example.com",
-        status: "active",
-      },
     },
 
     PaymentCard: {

packages/codegen/CHANGELOG.md

@@ -1,38 +1,5 @@
 # @json-render/codegen
 
-## 0.5.2
-
-### Patch Changes
-
-- 429e456: Fix LLM hallucinations by dynamically generating prompt examples from the user's catalog instead of hardcoding component names. Adds optional `example` field to `ComponentDefinition` with Zod schema introspection fallback. Mentions RFC 6902 in output format section.
-- Updated dependencies [429e456]
-  - @json-render/core@0.5.2
-
-## 0.5.1
-
-### Patch Changes
-
-- @json-render/core@0.5.1
-
-## 0.5.0
-
-### Minor Changes
-
-- 3d2d1ad: Add @json-render/react-native package, event system (emit replaces onAction), repeat/list rendering, user prompt builder, spec validation, and rename DataProvider to StateProvider.
-
-### Patch Changes
-
-- Updated dependencies [3d2d1ad]
-  - @json-render/core@0.5.0
-
-## 0.4.4
-
-### Patch Changes
-
-- dd17549: remove key/parentKey from flat specs, RFC 6902 compliance for SpecStream
-- Updated dependencies [dd17549]
-  - @json-render/core@0.4.4
-
 ## 0.4.3
 
 ### Patch Changes

packages/codegen/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/codegen",
-  "version": "0.5.2",
+  "version": "0.4.3",
   "license": "Apache-2.0",
   "description": "Utilities for generating code from json-render UI trees",
   "keywords": [

packages/core/CHANGELOG.md

@@ -1,25 +1,5 @@
 # @json-render/core
 
-## 0.5.2
-
-### Patch Changes
-
-- 429e456: Fix LLM hallucinations by dynamically generating prompt examples from the user's catalog instead of hardcoding component names. Adds optional `example` field to `ComponentDefinition` with Zod schema introspection fallback. Mentions RFC 6902 in output format section.
-
-## 0.5.1
-
-## 0.5.0
-
-### Minor Changes
-
-- 3d2d1ad: Add @json-render/react-native package, event system (emit replaces onAction), repeat/list rendering, user prompt builder, spec validation, and rename DataProvider to StateProvider.
-
-## 0.4.4
-
-### Patch Changes
-
-- dd17549: remove key/parentKey from flat specs, RFC 6902 compliance for SpecStream
-
 ## 0.4.3
 
 ### Patch Changes

packages/core/README.md

@@ -213,7 +213,7 @@ Any prop value can be a dynamic expression that resolves based on data state at
 
 ### Data Binding (`$path`)
 
-Read a value directly from the state model:
+Read a value directly from the data model:
 
 ```json
 {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/core",
-  "version": "0.5.2",
+  "version": "0.4.3",
   "license": "Apache-2.0",
   "description": "JSON becomes real things. Define your catalog, register your components, let AI generate.",
   "keywords": [

packages/core/src/catalog.test.ts

@@ -403,7 +403,6 @@ describe("defineCatalog (new schema API)", () => {
       components: s.map({
         props: s.zod(),
         description: s.string(),
-        example: s.any(),
       }),
       actions: s.map({
         description: s.string(),
@@ -561,157 +560,4 @@ describe("defineCatalog (new schema API)", () => {
 
     expect(result.success).toBe(true);
   });
-
-  it("does not include hardcoded component names in prompt (issue #88)", () => {
-    // When a catalog only has "Text", the generated prompt should NOT
-    // reference components like Stack, Grid, Heading, Card, Column,
-    // Button, or Pressable that are not in the catalog.
-    const catalog = defineCatalog(testSchema, {
-      components: {
-        Text: {
-          props: z.object({ content: z.string() }),
-          description: "Display text content",
-        },
-      },
-      actions: {},
-    });
-
-    const prompt = catalog.prompt();
-
-    // The prompt should contain the actual catalog component
-    expect(prompt).toContain("Text");
-    expect(prompt).toContain("Display text content");
-
-    // The prompt should NOT contain hardcoded component names not in the catalog
-    // Check that these don't appear as component types in JSON examples
-    const hardcodedComponents = [
-      "Stack",
-      "Grid",
-      "Heading",
-      "Card",
-      "Column",
-      "Pressable",
-    ];
-
-    for (const comp of hardcodedComponents) {
-      // Check for "type":"<ComponentName>" patterns in JSON examples
-      expect(prompt).not.toContain(`"type":"${comp}"`);
-      // Also check for "type": "<ComponentName>" with space
-      expect(prompt).not.toContain(`"type": "${comp}"`);
-    }
-  });
-
-  it("uses actual catalog component names in prompt examples", () => {
-    const catalog = defineCatalog(testSchema, {
-      components: {
-        MyBox: {
-          props: z.object({ padding: z.number() }),
-          description: "A box",
-        },
-        MyLabel: {
-          props: z.object({ text: z.string() }),
-          description: "A label",
-        },
-      },
-      actions: {},
-    });
-
-    const prompt = catalog.prompt();
-
-    // The example output should use MyBox and MyLabel, not hardcoded names
-    expect(prompt).toContain('"type":"MyBox"');
-    expect(prompt).toContain('"type":"MyLabel"');
-
-    // Should not contain any hardcoded component names in type fields
-    expect(prompt).not.toContain('"type":"Stack"');
-    expect(prompt).not.toContain('"type":"Grid"');
-    expect(prompt).not.toContain('"type":"Heading"');
-    expect(prompt).not.toContain('"type":"Column"');
-    expect(prompt).not.toContain('"type":"Button"');
-    expect(prompt).not.toContain('"type":"Pressable"');
-  });
-
-  it("generates example props from Zod schema when no example provided", () => {
-    const catalog = defineCatalog(testSchema, {
-      components: {
-        Text: {
-          props: z.object({
-            content: z.string(),
-            size: z.number(),
-            bold: z.boolean(),
-            variant: z.enum(["body", "heading"]),
-            color: z.string().optional(),
-          }),
-          description: "Display text",
-        },
-      },
-      actions: {},
-    });
-
-    const prompt = catalog.prompt();
-
-    // Required props should appear with generated values in examples
-    // (string -> "example", number -> 0, boolean -> true, enum -> first value)
-    expect(prompt).toContain('"content":"example"');
-    expect(prompt).toContain('"size":0');
-    expect(prompt).toContain('"bold":true');
-    expect(prompt).toContain('"variant":"body"');
-
-    // Optional props should NOT appear in examples (keeps them concise)
-    // The prop name "color" should still appear in the AVAILABLE COMPONENTS
-    // section but not in the JSON example objects
-    const exampleSection = prompt.split("AVAILABLE COMPONENTS")[0]!;
-    expect(exampleSection).not.toContain('"color"');
-
-    // Prompt examples should never have empty props:{}
-    expect(exampleSection).not.toContain('"props":{}');
-  });
-
-  it("uses explicit example field over Zod-generated values", () => {
-    const catalog = defineCatalog(testSchema, {
-      components: {
-        Heading: {
-          props: z.object({
-            text: z.string(),
-            level: z.enum(["h1", "h2", "h3"]),
-          }),
-          description: "A heading",
-          example: { text: "Welcome to My App", level: "h1" },
-        },
-        Paragraph: {
-          props: z.object({ content: z.string() }),
-          description: "A paragraph",
-          example: { content: "Lorem ipsum dolor sit amet" },
-        },
-      },
-      actions: {},
-    });
-
-    const prompt = catalog.prompt();
-
-    // Should use the explicit example values, not "example" or first enum value
-    expect(prompt).toContain('"text":"Welcome to My App"');
-    expect(prompt).toContain('"level":"h1"');
-    expect(prompt).toContain('"content":"Lorem ipsum dolor sit amet"');
-  });
-
-  it("uses $path binding on first string prop for repeat example", () => {
-    const catalog = defineCatalog(testSchema, {
-      components: {
-        Card: {
-          props: z.object({
-            title: z.string(),
-            subtitle: z.string(),
-          }),
-          description: "A card",
-        },
-      },
-      actions: {},
-    });
-
-    const prompt = catalog.prompt();
-
-    // In the repeat/item example, the first string prop should get a $path binding
-    expect(prompt).toContain('"title":{"$path":"$item/title"}');
-  });
 });

packages/core/src/catalog.ts

@@ -22,8 +22,6 @@ export interface ComponentDefinition<
   hasChildren?: boolean;
   /** Description for AI generation */
   description?: string;
-  /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */
-  example?: Record<string, unknown>;
 }
 
 /**

packages/core/src/schema.ts

@@ -540,84 +540,27 @@ function generatePrompt<TDef extends SchemaDefinition, TCatalog>(
   lines.push("");
 
   // Output format section - explain JSONL streaming patch format
-  lines.push("OUTPUT FORMAT (JSONL, RFC 6902 JSON Patch):");
+  lines.push("OUTPUT FORMAT:");
   lines.push(
-    "Output JSONL (one JSON object per line) using RFC 6902 JSON Patch operations to build a UI tree.",
+    "Output JSONL (one JSON object per line) with patches to build a UI tree.",
   );
   lines.push(
-    "Each line is a JSON patch operation (add, remove, replace). Start with /root, then stream /elements and /state patches interleaved so the UI fills in progressively as it streams.",
+    "Each line is a JSON patch operation. Start with /root, then stream /elements and /state patches interleaved so the UI fills in progressively as it streams.",
   );
   lines.push("");
   lines.push("Example output (each line is a separate JSON object):");
   lines.push("");
+  lines.push(`{"op":"add","path":"/root","value":"blog"}
+{"op":"add","path":"/elements/blog","value":{"type":"Stack","props":{"direction":"vertical","gap":"md"},"children":["heading","posts-grid"]}}
+{"op":"add","path":"/elements/heading","value":{"type":"Heading","props":{"text":"Blog","level":"h1"},"children":[]}}
+{"op":"add","path":"/elements/posts-grid","value":{"type":"Grid","props":{"columns":2,"gap":"md"},"repeat":{"path":"/posts","key":"id"},"children":["post-card"]}}
+{"op":"add","path":"/elements/post-card","value":{"type":"Card","props":{"title":{"$path":"$item/title"}},"children":["post-meta"]}}
+{"op":"add","path":"/elements/post-meta","value":{"type":"Text","props":{"text":{"$path":"$item/author"},"variant":"muted"},"children":[]}}
+{"op":"add","path":"/state/posts","value":[]}
+{"op":"add","path":"/state/posts/0","value":{"id":"1","title":"Getting Started","author":"Jane","date":"Jan 15"}}
+{"op":"add","path":"/state/posts/1","value":{"id":"2","title":"Advanced Tips","author":"Bob","date":"Feb 3"}}
 
-  // Build example using actual catalog component names and props to avoid hallucinations
-  const allComponents = (catalog.data as Record<string, unknown>).components as
-    | Record<string, CatalogComponentDef>
-    | undefined;
-  const cn = catalog.componentNames;
-  const comp1 = cn[0] || "Component";
-  const comp2 = cn.length > 1 ? cn[1]! : comp1;
-  const comp1Def = allComponents?.[comp1];
-  const comp2Def = allComponents?.[comp2];
-  const comp1Props = comp1Def ? getExampleProps(comp1Def) : {};
-  const comp2Props = comp2Def ? getExampleProps(comp2Def) : {};
-
-  // Find a string prop on comp2 to demonstrate $path dynamic bindings
-  const dynamicPropName = comp2Def?.props
-    ? findFirstStringProp(comp2Def.props)
-    : null;
-  const dynamicProps = dynamicPropName
-    ? { ...comp2Props, [dynamicPropName]: { $path: "$item/title" } }
-    : comp2Props;
-
-  const exampleOutput = [
-    JSON.stringify({ op: "add", path: "/root", value: "main" }),
-    JSON.stringify({
-      op: "add",
-      path: "/elements/main",
-      value: {
-        type: comp1,
-        props: comp1Props,
-        children: ["child-1", "list"],
-      },
-    }),
-    JSON.stringify({
-      op: "add",
-      path: "/elements/child-1",
-      value: { type: comp2, props: comp2Props, children: [] },
-    }),
-    JSON.stringify({
-      op: "add",
-      path: "/elements/list",
-      value: {
-        type: comp1,
-        props: comp1Props,
-        repeat: { path: "/items", key: "id" },
-        children: ["item"],
-      },
-    }),
-    JSON.stringify({
-      op: "add",
-      path: "/elements/item",
-      value: { type: comp2, props: dynamicProps, children: [] },
-    }),
-    JSON.stringify({ op: "add", path: "/state/items", value: [] }),
-    JSON.stringify({
-      op: "add",
-      path: "/state/items/0",
-      value: { id: "1", title: "First Item" },
-    }),
-    JSON.stringify({
-      op: "add",
-      path: "/state/items/1",
-      value: { id: "2", title: "Second Item" },
-    }),
-  ].join("\n");
-
-  lines.push(`${exampleOutput}
-
-Note: state patches appear right after the elements that use them, so the UI fills in as it streams. ONLY use component types from the AVAILABLE COMPONENTS list below.`);
+Note: state patches appear right after the elements that use them, so the UI fills in as it streams.`);
   lines.push("");
 
   // Initial state section
@@ -658,7 +601,7 @@ Note: state patches appear right after the elements that use them, so the UI fil
     'The element itself renders once (as the container), and its children are expanded once per array item. "path" is the state array path. "key" is an optional field name on each item for stable React keys.',
   );
   lines.push(
-    `Example: ${JSON.stringify({ type: comp1, props: comp1Props, repeat: { path: "/todos", key: "id" }, children: ["todo-item"] })}`,
+    'Example: { "type": "Column", "props": { "gap": 8 }, "repeat": { "path": "/todos", "key": "id" }, "children": ["todo-item"] }',
   );
   lines.push(
     'Inside children of a repeated element, use "$item/field" for per-item paths: statePath:"$item/completed", { "$path": "$item/title" }. Use "$index" for the current array index.',
@@ -695,8 +638,18 @@ Note: state patches appear right after the elements that use them, so the UI fil
   );
   lines.push("");
 
-  // Components section — reuse the typed reference from example generation
-  const components = allComponents;
+  // Components section
+  const components = (catalog.data as Record<string, unknown>).components as
+    | Record<
+        string,
+        {
+          props?: z.ZodType;
+          description?: string;
+          slots?: string[];
+          events?: string[];
+        }
+      >
+    | undefined;
 
   if (components) {
     lines.push(`AVAILABLE COMPONENTS (${catalog.componentNames.length}):`);
@@ -741,7 +694,7 @@ Note: state patches appear right after the elements that use them, so the UI fil
   lines.push("");
   lines.push("Example:");
   lines.push(
-    `  ${JSON.stringify({ type: comp1, props: comp1Props, on: { press: { action: "setState", params: { path: "/saved", value: true } } }, children: [] })}`,
+    '  {"type":"Button","props":{"label":"Save"},"on":{"press":{"action":"setState","params":{"path":"/saved","value":true}}},"children":[]}',
   );
   lines.push("");
   lines.push(
@@ -758,7 +711,7 @@ Note: state patches appear right after the elements that use them, so the UI fil
     "Elements can have an optional `visible` field to conditionally show/hide based on data state. IMPORTANT: `visible` is a top-level field on the element object (sibling of type/props/children), NOT inside props.",
   );
   lines.push(
-    `Correct: ${JSON.stringify({ type: comp1, props: comp1Props, visible: { eq: [{ path: "/tab" }, "home"] }, children: ["..."] })}`,
+    'Correct: {"type":"Column","props":{"gap":8},"visible":{"eq":[{"path":"/tab"},"home"]},"children":[...]}',
   );
   lines.push(
     '- `{ "eq": [{ "path": "/statePath" }, "value"] }` - visible when state at path equals value',
@@ -773,10 +726,10 @@ Note: state patches appear right after the elements that use them, so the UI fil
   lines.push("- `true` / `false` - always visible/hidden");
   lines.push("");
   lines.push(
-    "Use a component with on.press bound to setState to update state and drive visibility.",
+    "Use the Pressable component with on.press bound to setState to update state and drive visibility.",
   );
   lines.push(
-    `Example: A ${comp1} with on: { "press": { "action": "setState", "params": { "path": "/activeTab", "value": "home" } } } sets state, then a container with visible: { "eq": [{ "path": "/activeTab" }, "home"] } shows only when that tab is active.`,
+    'Example: A Pressable with on: { "press": { "action": "setState", "params": { "path": "/activeTab", "value": "home" } } } sets state, then a container with visible: { "eq": [{ "path": "/activeTab" }, "home"] } shows only when that tab is active.',
   );
   lines.push("");
 
@@ -828,169 +781,6 @@ Note: state patches appear right after the elements that use them, so the UI fil
   return lines.join("\n");
 }
 
-// =============================================================================
-// Example Value Generation from Zod Schemas
-// =============================================================================
-
-/**
- * Component definition shape as it appears in catalog data
- */
-interface CatalogComponentDef {
-  props?: z.ZodType;
-  description?: string;
-  slots?: string[];
-  events?: string[];
-  example?: Record<string, unknown>;
-}
-
-/**
- * Get example props for a catalog component.
- * Uses the explicit `example` field if provided, otherwise generates from Zod schema.
- */
-function getExampleProps(def: CatalogComponentDef): Record<string, unknown> {
-  if (def.example && Object.keys(def.example).length > 0) {
-    return def.example;
-  }
-  if (def.props) {
-    return generateExamplePropsFromZod(def.props);
-  }
-  return {};
-}
-
-/**
- * Generate example prop values from a Zod object schema.
- * Only includes required fields to keep examples concise.
- */
-function generateExamplePropsFromZod(
-  schema: z.ZodType,
-): Record<string, unknown> {
-  if (!schema || !schema._def) return {};
-  const def = schema._def as unknown as Record<string, unknown>;
-  const typeName = getZodTypeName(schema);
-
-  if (typeName !== "ZodObject" && typeName !== "object") return {};
-
-  const shape =
-    typeof def.shape === "function"
-      ? (def.shape as () => Record<string, z.ZodType>)()
-      : (def.shape as Record<string, z.ZodType>);
-  if (!shape) return {};
-
-  const result: Record<string, unknown> = {};
-  for (const [key, value] of Object.entries(shape)) {
-    const innerTypeName = getZodTypeName(value);
-    // Skip optional props to keep examples concise
-    if (
-      innerTypeName === "ZodOptional" ||
-      innerTypeName === "optional" ||
-      innerTypeName === "ZodNullable" ||
-      innerTypeName === "nullable"
-    ) {
-      continue;
-    }
-    result[key] = generateExampleValue(value);
-  }
-  return result;
-}
-
-/**
- * Generate a single example value from a Zod type.
- */
-function generateExampleValue(schema: z.ZodType): unknown {
-  if (!schema || !schema._def) return "...";
-  const def = schema._def as unknown as Record<string, unknown>;
-  const typeName = getZodTypeName(schema);
-
-  switch (typeName) {
-    case "ZodString":
-    case "string":
-      return "example";
-    case "ZodNumber":
-    case "number":
-      return 0;
-    case "ZodBoolean":
-    case "boolean":
-      return true;
-    case "ZodLiteral":
-    case "literal":
-      return def.value;
-    case "ZodEnum":
-    case "enum": {
-      if (Array.isArray(def.values) && def.values.length > 0)
-        return def.values[0];
-      if (def.entries && typeof def.entries === "object") {
-        const values = Object.values(def.entries as Record<string, string>);
-        return values.length > 0 ? values[0] : "example";
-      }
-      return "example";
-    }
-    case "ZodOptional":
-    case "optional":
-    case "ZodNullable":
-    case "nullable":
-    case "ZodDefault":
-    case "default": {
-      const inner = (def.innerType as z.ZodType) ?? (def.wrapped as z.ZodType);
-      return inner ? generateExampleValue(inner) : null;
-    }
-    case "ZodArray":
-    case "array":
-      return [];
-    case "ZodObject":
-    case "object":
-      return generateExamplePropsFromZod(schema);
-    case "ZodUnion":
-    case "union": {
-      const options = def.options as z.ZodType[] | undefined;
-      return options && options.length > 0
-        ? generateExampleValue(options[0]!)
-        : "...";
-    }
-    default:
-      return "...";
-  }
-}
-
-/**
- * Find the name of the first required string prop in a Zod object schema.
- * Used to demonstrate $path dynamic bindings in examples.
- */
-function findFirstStringProp(schema?: z.ZodType): string | null {
-  if (!schema || !schema._def) return null;
-  const def = schema._def as unknown as Record<string, unknown>;
-  const typeName = getZodTypeName(schema);
-
-  if (typeName !== "ZodObject" && typeName !== "object") return null;
-
-  const shape =
-    typeof def.shape === "function"
-      ? (def.shape as () => Record<string, z.ZodType>)()
-      : (def.shape as Record<string, z.ZodType>);
-  if (!shape) return null;
-
-  for (const [key, value] of Object.entries(shape)) {
-    const innerTypeName = getZodTypeName(value);
-    // Skip optional props
-    if (
-      innerTypeName === "ZodOptional" ||
-      innerTypeName === "optional" ||
-      innerTypeName === "ZodNullable" ||
-      innerTypeName === "nullable"
-    ) {
-      continue;
-    }
-    // Unwrap to check the actual type
-    if (innerTypeName === "ZodString" || innerTypeName === "string") {
-      return key;
-    }
-  }
-  return null;
-}
-
-// =============================================================================
-// Zod Introspection Helpers
-// =============================================================================
-
 /**
  * Get Zod type name from schema (handles different Zod versions)
  */

packages/react-native/CHANGELOG.md

@@ -1,27 +0,0 @@
-# @json-render/react-native
-
-## 0.5.2
-
-### Patch Changes
-
-- 429e456: Fix LLM hallucinations by dynamically generating prompt examples from the user's catalog instead of hardcoding component names. Adds optional `example` field to `ComponentDefinition` with Zod schema introspection fallback. Mentions RFC 6902 in output format section.
-- Updated dependencies [429e456]
-  - @json-render/core@0.5.2
-
-## 0.5.1
-
-### Patch Changes
-
-- d9a4efd: Prevent rendering errors from crashing the application. Added error boundaries to all renderers so a single bad component silently disappears instead of causing a white-screen-of-death. Fixed Select and Radio components to handle non-string option values from AI output.
-  - @json-render/core@0.5.1
-
-## 0.5.0
-
-### Minor Changes
-
-- 3d2d1ad: Add @json-render/react-native package, event system (emit replaces onAction), repeat/list rendering, user prompt builder, spec validation, and rename DataProvider to StateProvider.
-
-### Patch Changes
-
-- Updated dependencies [3d2d1ad]
-  - @json-render/core@0.5.0

packages/react-native/README.md

@@ -59,7 +59,7 @@ export const { registry } = defineRegistry(catalog, {
 });
 ```
 
-Standard components (Container, Row, Column, Button, TextInput, etc.) are included by default. You only need to register custom ones.
+Standard components (Container, Row, Column, Button, TextInput, etc.) are included by default -- you only need to register custom ones.
 
 ### 3. Render Specs
 
@@ -158,7 +158,7 @@ The `Pressable` component wraps children and triggers an action on press. It's e
 
 ## Built-in Actions
 
-The `setState` action is handled automatically by `ActionProvider`. It updates the state model, which triggers re-evaluation of visibility conditions and dynamic prop expressions:
+The `setState` action is handled automatically by `ActionProvider`. It updates the data model, which triggers re-evaluation of visibility conditions and dynamic prop expressions:
 
 ```json
 {

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/react-native",
-  "version": "0.5.2",
+  "version": "0.4.3",
   "license": "Apache-2.0",
   "description": "React Native renderer for @json-render/core. JSON becomes React Native components.",
   "keywords": [

packages/react-native/src/catalog.ts

@@ -28,7 +28,6 @@ export const standardComponentDefinitions = {
     slots: ["default"],
     description:
       "Generic container wrapper. Use for grouping elements with padding, margin, and background color.",
-    example: { padding: 16, backgroundColor: "#FFFFFF" },
   },
 
   Row: {
@@ -54,7 +53,6 @@ export const standardComponentDefinitions = {
     slots: ["default"],
     description:
       "Horizontal flex layout. Use for placing elements side by side.",
-    example: { gap: 12, alignItems: "center" },
   },
 
   Column: {
@@ -79,7 +77,6 @@ export const standardComponentDefinitions = {
     slots: ["default"],
     description:
       "Vertical flex layout. Use for stacking elements top to bottom.",
-    example: { gap: 12, padding: 16 },
   },
 
   ScrollContainer: {
@@ -146,7 +143,6 @@ export const standardComponentDefinitions = {
     slots: [],
     description:
       "Heading text at various levels. h1 is largest, h4 is smallest.",
-    example: { text: "Welcome", level: "h1" },
   },
 
   Paragraph: {
@@ -160,7 +156,6 @@ export const standardComponentDefinitions = {
     slots: [],
     description:
       "Body text paragraph. Use for descriptions and longer content.",
-    example: { text: "This is a paragraph of body text." },
   },
 
   Label: {
@@ -173,7 +168,6 @@ export const standardComponentDefinitions = {
     slots: [],
     description:
       "Small utility text. Use for captions, form labels, and secondary information.",
-    example: { text: "Status", size: "sm" },
   },
 
   Image: {
@@ -187,12 +181,6 @@ export const standardComponentDefinitions = {
     }),
     slots: [],
     description: "Image display. Provide a source URL and optional dimensions.",
-    example: {
-      src: "https://picsum.photos/300/200",
-      alt: "Photo",
-      width: 300,
-      height: 200,
-    },
   },
 
   Avatar: {
@@ -205,7 +193,6 @@ export const standardComponentDefinitions = {
     slots: [],
     description:
       "Circular avatar showing an image or initials. Use for user profiles and contacts.",
-    example: { initials: "JD", size: "md" },
   },
 
   Badge: {
@@ -218,7 +205,6 @@ export const standardComponentDefinitions = {
     slots: [],
     description:
       "Small colored indicator with a label. Use for status, counts, and categories.",
-    example: { label: "New", variant: "info" },
   },
 
   Chip: {
@@ -251,7 +237,6 @@ export const standardComponentDefinitions = {
     slots: [],
     description:
       "Pressable button with label. Set variant for styling. Bind on.press for the handler to call on press.",
-    example: { label: "Submit", variant: "primary" },
   },
 
   TextInput: {
@@ -272,11 +257,6 @@ export const standardComponentDefinitions = {
     slots: [],
     description:
       "Text input field. Use statePath to bind to the state model for two-way binding. The value typed by the user is stored at the statePath.",
-    example: {
-      placeholder: "Enter text...",
-      statePath: "/inputValue",
-      label: "Name",
-    },
   },
 
   Switch: {
@@ -371,7 +351,6 @@ export const standardComponentDefinitions = {
     slots: ["default"],
     description:
       "Elevated card container with optional title. Use for grouping related content.",
-    example: { title: "Details", padding: 16, elevated: true },
   },
 
   ListItem: {
@@ -386,11 +365,6 @@ export const standardComponentDefinitions = {
     slots: [],
     description:
       "List row with title, subtitle, and optional leading/trailing text. Bind on.press for the press handler.",
-    example: {
-      title: "Settings",
-      subtitle: "Manage your preferences",
-      showChevron: true,
-    },
   },
 
   Modal: {

packages/react-native/src/renderer.tsx

@@ -1,6 +1,5 @@
 import React, {
   type ComponentType,
-  type ErrorInfo,
   type ReactNode,
   useCallback,
   useMemo,
@@ -82,51 +81,6 @@ export interface RendererProps {
   fallback?: ComponentRenderer;
 }
 
-// ---------------------------------------------------------------------------
-// ElementErrorBoundary – catches rendering errors in individual elements so
-// a single bad component never crashes the whole page.
-// ---------------------------------------------------------------------------
-
-interface ElementErrorBoundaryProps {
-  elementType: string;
-  children: ReactNode;
-}
-
-interface ElementErrorBoundaryState {
-  hasError: boolean;
-}
-
-class ElementErrorBoundary extends React.Component<
-  ElementErrorBoundaryProps,
-  ElementErrorBoundaryState
-> {
-  constructor(props: ElementErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError(): ElementErrorBoundaryState {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error: Error, info: ErrorInfo) {
-    console.error(
-      `[json-render] Rendering error in <${this.props.elementType}>:`,
-      error,
-      info.componentStack,
-    );
-  }
-
-  render() {
-    if (this.state.hasError) {
-      // Render nothing – the element silently disappears rather than
-      // crashing the entire application.
-      return null;
-    }
-    return this.props.children;
-  }
-}
-
 /**
  * Element renderer component
  */
@@ -260,11 +214,9 @@ function ElementRenderer({
   );
 
   return (
-    <ElementErrorBoundary elementType={resolvedElement.type}>
-      <Component element={resolvedElement} emit={emit} loading={loading}>
-        {children}
-      </Component>
-    </ElementErrorBoundary>
+    <Component element={resolvedElement} emit={emit} loading={loading}>
+      {children}
+    </Component>
   );
 }
 

packages/react-native/src/schema.ts

@@ -38,8 +38,6 @@ export const schema = defineSchema(
         slots: s.array(s.string()),
         /** Description for AI generation hints */
         description: s.string(),
-        /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */
-        example: s.any(),
       }),
       /** Action definitions (optional) */
       actions: s.map({
@@ -53,37 +51,37 @@ export const schema = defineSchema(
   {
     defaultRules: [
       // Layout patterns
-      "FIXED BOTTOM BAR PATTERN: When building a screen with a fixed header and/or fixed bottom tab bar, the outermost vertical layout component must have flex:1 so it fills the screen. The scrollable content area must also have flex:1. Structure: screen wrapper > vertical layout(flex:1, gap:0) > [header, content wrapper(flex:1) > [scroll container(...)], bottom-tabs]. Both the outer layout AND the content wrapper need flex:1. ONLY use components from the AVAILABLE COMPONENTS list.",
-      "NEVER place a bottom tab bar or fixed footer inside a scroll container. It must be a sibling AFTER the flex:1 container that holds the scroll content.",
+      "FIXED BOTTOM BAR PATTERN: When building a screen with a fixed header and/or fixed bottom tab bar, the outermost Column must have flex:1 so it fills the SafeArea. The scrollable content area must also have flex:1. Structure: SafeArea > Column(flex:1, gap:0) > [header, Container(flex:1) > [ScrollContainer(...)], bottom-tabs]. Both the outer Column AND the content Container need flex:1.",
+      "NEVER place a bottom tab bar or fixed footer inside a ScrollContainer. It must be a sibling AFTER the flex:1 container that holds the ScrollContainer.",
 
       // Element integrity
       "CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.",
       "SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.",
-      'When building repeating content backed by a state array (e.g. todos, posts, cart items), use the "repeat" field on a container element from the AVAILABLE COMPONENTS list. Example: { "type": "<ContainerComponent>", "props": { "gap": 8 }, "repeat": { "path": "/todos", "key": "id" }, "children": ["todo-item"] }. Inside repeated children, use "$item/field" for per-item state paths and "$index" for the current array index. Do NOT hardcode individual elements for each array item.',
+      'When building repeating content backed by a state array (e.g. todos, posts, cart items), use the "repeat" field on the container element. Example: { "type": "Column", "props": { "gap": 8 }, "repeat": { "path": "/todos", "key": "id" }, "children": ["todo-item"] }. Inside repeated children, use "$item/field" for per-item state paths and "$index" for the current array index. Do NOT hardcode individual elements for each array item.',
 
       // Visible field placement
-      'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"<ComponentName>","props":{},"visible":{"eq":[{"path":"/activeTab"},"home"]},"children":[...]}. WRONG: {"type":"<ComponentName>","props":{},"visible":{...},"children":[...]} with visible inside props.',
+      'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"Column","props":{"gap":8},"visible":{"eq":[{"path":"/activeTab"},"home"]},"children":[...]}. WRONG: {"type":"Column","props":{"gap":8,"visible":{...}},"children":[...]}.',
 
       // Tab navigation pattern
-      "TAB NAVIGATION PATTERN: When building a UI with multiple tabs, use a pressable/tappable component + setState action + visible conditions to make tabs functional. ONLY use components from the AVAILABLE COMPONENTS list.",
-      'Each tab button should be a pressable component wrapping its icon/label children, with action "setState" and actionParams { "path": "/activeTab", "value": "tabName" }.',
+      "TAB NAVIGATION PATTERN: When building a UI with multiple tabs, use Pressable + setState action + visible conditions to make tabs functional.",
+      'Each tab button should be a Pressable wrapping its icon/label children, with action "setState" and actionParams { "path": "/activeTab", "value": "tabName" }.',
       'Each tab\'s content section should have a visible condition: { "eq": [{ "path": "/activeTab" }, "tabName"] }.',
       "The first tab's content should NOT have a visible condition (so it shows by default when no tab is selected yet). All other tabs MUST have a visible condition.",
 
       // Tab active state highlighting (using dynamic props)
-      "TAB ACTIVE STYLING: Use $cond dynamic props on icon elements inside each tab button so a single icon changes appearance based on the active tab.",
+      "TAB ACTIVE STYLING: Use $cond dynamic props on the Icon inside each tab Pressable so a single Icon changes appearance based on the active tab.",
       '  - For the icon name: { "$cond": { "eq": [{ "path": "/activeTab" }, "thisTabName"] }, "$then": "home", "$else": "home-outline" }',
       '  - For the icon color: { "$cond": { "eq": [{ "path": "/activeTab" }, "thisTabName"] }, "$then": "#007AFF", "$else": "#8E8E93" }',
       "  - For labels, use $cond on the color prop similarly.",
       '  - For the FIRST/DEFAULT tab, use { "$cond": { "or": [{ "eq": [{ "path": "/activeTab" }, "thisTabName"] }, { "not": { "path": "/activeTab" } }] }, "$then": "#007AFF", "$else": "#8E8E93" } so it appears active before any tab is tapped.',
 
       // Push/pop screen navigation (all screens in one spec)
-      'SCREEN NAVIGATION: Use a pressable component with action "push" and actionParams { "screen": "screenName" } to navigate to a new screen. Use action "pop" to go back. All screens must be defined in the SAME spec. ONLY use components from the AVAILABLE COMPONENTS list.',
+      'SCREEN NAVIGATION: Use Pressable with action "push" and actionParams { "screen": "screenName" } to navigate to a new screen. Use action "pop" to go back. All screens must be defined in the SAME spec.',
       'Each screen section uses a visible condition on /currentScreen: { "eq": [{ "path": "/currentScreen" }, "screenName"] }. The default/home screen should also be visible when /currentScreen is not set: { "or": [{ "eq": [{ "path": "/currentScreen" }, "home"] }, { "not": { "path": "/currentScreen" } }] }.',
       "push automatically maintains a /navStack in the state model so pop always returns to the previous screen.",
-      'Include a back button on pushed screens using action "pop". Example: pressable(action:"pop") > row layout > back icon + back label. ONLY use components from the AVAILABLE COMPONENTS list.',
+      'Include a back button on pushed screens using action "pop". Example: Pressable(action:"pop") > Row > Icon(name:"chevron-back") + Label(text:"Back").',
       "Use push/pop for drill-down flows: tapping a list item to see details, opening a profile, etc. Use setState + visible conditions for tab switching within a screen.",
-      'Example: A list screen with items that push to detail: a pressable component with action:"push" and actionParams:{screen:"detail"} wrapping each list item. The detail screen section has visible:{"eq":[{"path":"/currentScreen"},"detail"]} and contains a back button with action:"pop". ONLY use components from the AVAILABLE COMPONENTS list.',
+      'Example: A list screen with items that push to detail: Pressable(action:"push", actionParams:{screen:"repo-detail"}) wrapping each list item card. The detail screen section has visible:{"eq":[{"path":"/currentScreen"},"repo-detail"]} and contains a back button with action:"pop".',
     ],
   },
 );

packages/react/CHANGELOG.md

@@ -1,39 +1,5 @@
 # @json-render/react
 
-## 0.5.2
-
-### Patch Changes
-
-- 429e456: Fix LLM hallucinations by dynamically generating prompt examples from the user's catalog instead of hardcoding component names. Adds optional `example` field to `ComponentDefinition` with Zod schema introspection fallback. Mentions RFC 6902 in output format section.
-- Updated dependencies [429e456]
-  - @json-render/core@0.5.2
-
-## 0.5.1
-
-### Patch Changes
-
-- d9a4efd: Prevent rendering errors from crashing the application. Added error boundaries to all renderers so a single bad component silently disappears instead of causing a white-screen-of-death. Fixed Select and Radio components to handle non-string option values from AI output.
-  - @json-render/core@0.5.1
-
-## 0.5.0
-
-### Minor Changes
-
-- 3d2d1ad: Add @json-render/react-native package, event system (emit replaces onAction), repeat/list rendering, user prompt builder, spec validation, and rename DataProvider to StateProvider.
-
-### Patch Changes
-
-- Updated dependencies [3d2d1ad]
-  - @json-render/core@0.5.0
-
-## 0.4.4
-
-### Patch Changes
-
-- dd17549: remove key/parentKey from flat specs, RFC 6902 compliance for SpecStream
-- Updated dependencies [dd17549]
-  - @json-render/core@0.4.4
-
 ## 0.4.3
 
 ### Patch Changes

packages/react/README.md

@@ -63,8 +63,8 @@ export const { registry } = defineRegistry(catalog, {
         {children}
       </div>
     ),
-    Button: ({ props, emit }) => (
-      <button onClick={() => emit?.("press")}>
+    Button: ({ props, onAction }) => (
+      <button onClick={() => onAction?.({ name: props.action })}>
         {props.label}
       </button>
     ),
@@ -274,7 +274,7 @@ See [@json-render/core](../core/README.md) for full expression syntax.
 
 ## Built-in Actions
 
-The `setState` action is handled automatically by `ActionProvider`. It updates the state model, which triggers re-evaluation of visibility conditions and dynamic prop expressions:
+The `setState` action is handled automatically by `ActionProvider`. It updates the data model, which triggers re-evaluation of visibility conditions and dynamic prop expressions:
 
 ```json
 {
@@ -295,7 +295,7 @@ When using `defineRegistry`, components receive these props:
 interface ComponentContext<P> {
   props: P;                    // Typed props from the catalog
   children?: React.ReactNode;  // Rendered children
-  emit?: (event: string) => void;  // Emit a named event
+  onAction?: (action: { name: string; params?: Record<string, unknown> }) => void;
   loading?: boolean;           // Whether the parent is loading
 }
 ```

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/react",
-  "version": "0.5.2",
+  "version": "0.4.3",
   "license": "Apache-2.0",
   "description": "React renderer for @json-render/core. JSON becomes React components.",
   "keywords": [

packages/react/src/renderer.tsx

@@ -2,7 +2,6 @@
 
 import React, {
   type ComponentType,
-  type ErrorInfo,
   type ReactNode,
   useCallback,
   useMemo,
@@ -78,51 +77,6 @@ export interface RendererProps {
   fallback?: ComponentRenderer;
 }
 
-// ---------------------------------------------------------------------------
-// ElementErrorBoundary – catches rendering errors in individual elements so
-// a single bad component never crashes the whole page.
-// ---------------------------------------------------------------------------
-
-interface ElementErrorBoundaryProps {
-  elementType: string;
-  children: ReactNode;
-}
-
-interface ElementErrorBoundaryState {
-  hasError: boolean;
-}
-
-class ElementErrorBoundary extends React.Component<
-  ElementErrorBoundaryProps,
-  ElementErrorBoundaryState
-> {
-  constructor(props: ElementErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError(): ElementErrorBoundaryState {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error: Error, info: ErrorInfo) {
-    console.error(
-      `[json-render] Rendering error in <${this.props.elementType}>:`,
-      error,
-      info.componentStack,
-    );
-  }
-
-  render() {
-    if (this.state.hasError) {
-      // Render nothing – the element silently disappears rather than
-      // crashing the entire application.
-      return null;
-    }
-    return this.props.children;
-  }
-}
-
 /**
  * Element renderer component
  */
@@ -256,11 +210,9 @@ function ElementRenderer({
   );
 
   return (
-    <ElementErrorBoundary elementType={resolvedElement.type}>
-      <Component element={resolvedElement} emit={emit} loading={loading}>
-        {children}
-      </Component>
-    </ElementErrorBoundary>
+    <Component element={resolvedElement} emit={emit} loading={loading}>
+      {children}
+    </Component>
   );
 }
 

packages/react/src/schema.ts

@@ -38,8 +38,6 @@ export const schema = defineSchema(
         slots: s.array(s.string()),
         /** Description for AI generation hints */
         description: s.string(),
-        /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */
-        example: s.any(),
       }),
       /** Action definitions (optional) */
       actions: s.map({
@@ -57,16 +55,16 @@ export const schema = defineSchema(
       "SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.",
 
       // Field placement
-      'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"<ComponentName>","props":{},"visible":{"eq":[{"path":"/tab"},"home"]},"children":[...]}.',
+      'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"Stack","props":{"gap":"md"},"visible":{"eq":[{"path":"/tab"},"home"]},"children":[...]}.',
       'CRITICAL: The "on" field goes on the ELEMENT object, NOT inside "props". Use on.press, on.change, on.submit etc. NEVER put action/actionParams inside props.',
 
       // State and data
       "When the user asks for a UI that displays data (e.g. blog posts, products, users), ALWAYS include a state field with realistic sample data. The state field is a top-level field on the spec (sibling of root/elements).",
-      'When building repeating content backed by a state array (e.g. posts, products, items), use the "repeat" field on a container element. Example: { "type": "<ContainerComponent>", "props": {}, "repeat": { "path": "/posts", "key": "id" }, "children": ["post-card"] }. Replace <ContainerComponent> with an appropriate component from the AVAILABLE COMPONENTS list. Inside repeated children, use "$item/field" for per-item state paths and "$index" for the current array index. Do NOT hardcode individual elements for each array item.',
+      'When building repeating content backed by a state array (e.g. posts, products, items), use the "repeat" field on the container element. Example: { "type": "Grid", "props": { "columns": 3, "gap": "md" }, "repeat": { "path": "/posts", "key": "id" }, "children": ["post-card"] }. Inside repeated children, use "$item/field" for per-item state paths and "$index" for the current array index. Do NOT hardcode individual elements for each array item.',
 
       // Design quality
-      "Design with visual hierarchy: use container components to group content, heading components for section titles, proper spacing, and status indicators. ONLY use components from the AVAILABLE COMPONENTS list.",
-      "For data-rich UIs, use multi-column layout components if available. For forms and single-column content, use vertical layout components. ONLY use components from the AVAILABLE COMPONENTS list.",
+      "Design with visual hierarchy: use Cards to group content, Headings for section titles, proper spacing with Stack gaps, and Badges/colors for status indicators.",
+      "For data-rich UIs, use Grid for multi-column layouts (2-3 columns for cards/posts). For forms and single-column content, use Stack with direction:vertical.",
       "Always include realistic, professional-looking sample data. For blogs include 3-4 posts with varied titles, authors, dates, categories. For products include names, prices, images. Never leave data empty.",
     ],
   },

packages/remotion/CHANGELOG.md

@@ -1,39 +1,5 @@
 # @json-render/remotion
 
-## 0.5.2
-
-### Patch Changes
-
-- 429e456: Fix LLM hallucinations by dynamically generating prompt examples from the user's catalog instead of hardcoding component names. Adds optional `example` field to `ComponentDefinition` with Zod schema introspection fallback. Mentions RFC 6902 in output format section.
-- Updated dependencies [429e456]
-  - @json-render/core@0.5.2
-
-## 0.5.1
-
-### Patch Changes
-
-- d9a4efd: Prevent rendering errors from crashing the application. Added error boundaries to all renderers so a single bad component silently disappears instead of causing a white-screen-of-death. Fixed Select and Radio components to handle non-string option values from AI output.
-  - @json-render/core@0.5.1
-
-## 0.5.0
-
-### Minor Changes
-
-- 3d2d1ad: Add @json-render/react-native package, event system (emit replaces onAction), repeat/list rendering, user prompt builder, spec validation, and rename DataProvider to StateProvider.
-
-### Patch Changes
-
-- Updated dependencies [3d2d1ad]
-  - @json-render/core@0.5.0
-
-## 0.4.4
-
-### Patch Changes
-
-- dd17549: remove key/parentKey from flat specs, RFC 6902 compliance for SpecStream
-- Updated dependencies [dd17549]
-  - @json-render/core@0.4.4
-
 ## 0.4.3
 
 ### Patch Changes

packages/remotion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/remotion",
-  "version": "0.5.2",
+  "version": "0.4.3",
   "license": "Apache-2.0",
   "description": "Remotion renderer for @json-render/core. JSON becomes video compositions.",
   "keywords": [

packages/remotion/src/catalog.ts

@@ -21,7 +21,6 @@ export const standardComponentDefinitions = {
     defaultDuration: 90,
     description:
       "Full-screen title card with centered text. Use for intros, outros, and section breaks.",
-    example: { title: "Welcome", subtitle: "An introduction" },
   },
 
   ImageSlide: {
@@ -35,11 +34,6 @@ export const standardComponentDefinitions = {
     defaultDuration: 150,
     description:
       "Full-screen image display. Use for product shots, photos, and visual content.",
-    example: {
-      src: "https://picsum.photos/1920/1080?random=1",
-      alt: "Hero image",
-      fit: "cover",
-    },
   },
 
   SplitScreen: {
@@ -67,10 +61,6 @@ export const standardComponentDefinitions = {
     defaultDuration: 150,
     description:
       "Quote display with author. Props: quote, author, textColor, backgroundColor. Set transparent:true when using as overlay on images.",
-    example: {
-      quote: "The best way to predict the future is to invent it.",
-      author: "Alan Kay",
-    },
   },
 
   StatCard: {
@@ -84,7 +74,6 @@ export const standardComponentDefinitions = {
     type: "scene",
     defaultDuration: 90,
     description: "Large statistic display. Use for key metrics and numbers.",
-    example: { value: "10M+", label: "Users worldwide", prefix: "" },
   },
 
   TypingText: {

packages/remotion/src/components/Renderer.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import React, { type ErrorInfo, type ReactNode } from "react";
 import { AbsoluteFill, Sequence } from "remotion";
 import type { TimelineSpec, ComponentRegistry, Clip } from "./types";
 
@@ -34,50 +33,6 @@ export const standardComponents: ComponentRegistry = {
   VideoClip,
 };
 
-// ---------------------------------------------------------------------------
-// ClipErrorBoundary – catches rendering errors in individual clips so
-// a single bad clip never crashes the entire composition.
-// ---------------------------------------------------------------------------
-
-interface ClipErrorBoundaryProps {
-  clipId: string;
-  component: string;
-  children: ReactNode;
-}
-
-interface ClipErrorBoundaryState {
-  hasError: boolean;
-}
-
-class ClipErrorBoundary extends React.Component<
-  ClipErrorBoundaryProps,
-  ClipErrorBoundaryState
-> {
-  constructor(props: ClipErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError(): ClipErrorBoundaryState {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error: Error, info: React.ErrorInfo) {
-    console.error(
-      `[json-render/remotion] Rendering error in clip "${this.props.clipId}" (<${this.props.component}>):`,
-      error,
-      info.componentStack,
-    );
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return null;
-    }
-    return this.props.children;
-  }
-}
-
 interface RendererProps {
   /** The timeline spec to render */
   spec: TimelineSpec;
@@ -147,9 +102,7 @@ export function Renderer({
         from={clip.from}
         durationInFrames={clip.durationInFrames}
       >
-        <ClipErrorBoundary clipId={clip.id} component={clip.component}>
-          <Component clip={clip} />
-        </ClipErrorBoundary>
+        <Component clip={clip} />
       </Sequence>
     );
   };

skills/json-render-core/SKILL.md

@@ -81,8 +81,8 @@ const finalSpec = compiler.getResult();
 
 Any prop value can be a dynamic expression resolved at render time:
 
-- **`{ "$path": "/state/key" }`** - reads a value from the state model
-- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** - evaluates a visibility condition and picks a branch
+- **`{ "$path": "/state/key" }`** -- reads a value from the data model
+- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** -- evaluates a visibility condition and picks a branch
 
 `$cond` uses the same syntax as visibility conditions (`eq`, `neq`, `path`, `and`, `or`, `not`). `$then` and `$else` can themselves be expressions (recursive).
 

skills/json-render-react-native/SKILL.md

@@ -110,8 +110,8 @@ Use `Pressable` with the built-in `setState` action for interactive UIs like tab
 
 Any prop value can be a data-driven expression resolved at render time:
 
-- **`{ "$path": "/state/key" }`** - reads from data model
-- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** - conditional value
+- **`{ "$path": "/state/key" }`** -- reads from data model
+- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** -- conditional value
 
 ```json
 {
@@ -123,11 +123,11 @@ Any prop value can be a data-driven expression resolved at render time:
 }
 ```
 
-Components receive already-resolved props. No changes needed to component implementations.
+Components receive already-resolved props -- no changes needed to component implementations.
 
 ## Built-in Actions
 
-The `setState` action is handled automatically by `ActionProvider` and updates the state model directly, which re-evaluates visibility conditions and dynamic prop expressions:
+The `setState` action is handled automatically by `ActionProvider` and updates the data model directly, which re-evaluates visibility conditions and dynamic prop expressions:
 
 ```json
 { "action": "setState", "actionParams": { "path": "/activeTab", "value": "home" } }

skills/json-render-react/SKILL.md

@@ -85,7 +85,7 @@ The React schema uses an element tree format:
 | Provider | Purpose |
 |----------|---------|
 | `StateProvider` | Share state across components (JSON Pointer paths) |
-| `ActionProvider` | Handle actions dispatched via the event system |
+| `ActionProvider` | Handle actions dispatched from components |
 | `VisibilityProvider` | Enable conditional rendering based on state |
 | `ValidationProvider` | Form field validation |
 
@@ -93,8 +93,8 @@ The React schema uses an element tree format:
 
 Any prop value can be a data-driven expression resolved by the renderer before components receive props:
 
-- **`{ "$path": "/state/key" }`** - reads from data model
-- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** - conditional value
+- **`{ "$path": "/state/key" }`** -- reads from data model
+- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** -- conditional value
 
 ```json
 {
@@ -106,30 +106,11 @@ Any prop value can be a data-driven expression resolved by the renderer before c
 }
 ```
 
-Components receive already-resolved props. No changes needed to component implementations.
-
-## Event System
-
-Components use `emit` to fire named events. The element's `on` field maps events to action bindings:
-
-```tsx
-// Component emits a named event
-Button: ({ props, emit }) => (
-  <button onClick={() => emit?.("press")}>{props.label}</button>
-),
-```
-
-```json
-{
-  "type": "Button",
-  "props": { "label": "Submit" },
-  "on": { "press": { "action": "submit" } }
-}
-```
+Components receive already-resolved props -- no changes needed to component implementations.
 
 ## Built-in Actions
 
-The `setState` action is handled automatically by `ActionProvider` and updates the state model directly, which re-evaluates visibility conditions and dynamic prop expressions:
+The `setState` action is handled automatically by `ActionProvider` and updates the data model directly, which re-evaluates visibility conditions and dynamic prop expressions:
 
 ```json
 { "action": "setState", "actionParams": { "path": "/activeTab", "value": "home" } }
@@ -142,9 +123,9 @@ The `setState` action is handled automatically by `ActionProvider` and updates t
 | `defineRegistry` | Create a type-safe component registry from a catalog |
 | `Renderer` | Render a spec using a registry |
 | `schema` | Element tree schema |
-| `useStateStore` | Access state context |
-| `useStateValue` | Get single value from state |
-| `useStateBinding` | Two-way state binding |
+| `useStateStore` | Access data context |
+| `useStateValue` | Get single value from data |
+| `useStateBinding` | Two-way data binding |
 | `useActions` | Access actions context |
 | `useAction` | Get a single action dispatch function |
 | `useUIStream` | Stream specs from an API endpoint |

turbo.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://turborepo.dev/schema.json",
   "ui": "tui",
-  "globalEnv": ["AI_GATEWAY_MODEL", "KV_REST_API_URL", "KV_REST_API_TOKEN", "RATE_LIMIT_PER_MINUTE", "RATE_LIMIT_PER_DAY"],
+  "globalEnv": ["AI_GATEWAY_MODEL", "KV_REST_API_URL", "KV_REST_API_TOKEN"],
   "tasks": {
     "build": {
       "dependsOn": ["^build"],