devtools

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: .node-version
+          node-version: 22
       - name: Check version sync
         run: node scripts/check-version-sync.js
 
@@ -33,7 +33,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: .node-version
+          node-version: 20
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - run: pnpm lint
@@ -46,7 +46,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: .node-version
+          node-version: 20
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - name: Build packages
@@ -61,7 +61,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: .node-version
+          node-version: 20
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - run: pnpm type-check

.github/workflows/release.yml

@@ -6,18 +6,15 @@ on:
       - main
   workflow_dispatch:
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: false
-
-permissions:
-  contents: read
+concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 jobs:
   check-release:
     name: Check for new version
     runs-on: ubuntu-latest
     timeout-minutes: 5
+    permissions:
+      contents: read
     outputs:
       should_release: ${{ steps.check.outputs.should_release }}
       needs_github_release: ${{ steps.check.outputs.needs_github_release }}
@@ -26,11 +23,6 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: .node-version
-
       - name: Compare package.json version to npm and check GitHub release
         id: check
         run: |
@@ -61,16 +53,14 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-  publish:
-    name: Publish to npm
+  build:
+    name: Build
     needs: check-release
     if: needs.check-release.outputs.should_release == 'true'
     runs-on: ubuntu-latest
     timeout-minutes: 15
-    environment: Release
     permissions:
       contents: read
-      id-token: write
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -81,7 +71,34 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: .node-version
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build packages
+        run: pnpm run build
+
+  publish:
+    name: Publish to npm
+    needs: [check-release, build]
+    if: needs.check-release.outputs.should_release == 'true'
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
           cache: pnpm
           registry-url: "https://registry.npmjs.org"
 
@@ -92,34 +109,9 @@ jobs:
         run: pnpm run build
 
       - name: Publish all public packages
-        run: |
-          LOCAL_VERSION="${{ needs.check-release.outputs.version }}"
-          FAILED=""
-
-          publish_pkg() {
-            local dir="$1" name="$2"
-            REGISTRY_VERSION=$(npm view "$name" version 2>/dev/null || echo "0.0.0")
-            if [ "$LOCAL_VERSION" = "$REGISTRY_VERSION" ]; then
-              echo "$name@$LOCAL_VERSION already published, skipping"
-              return 0
-            fi
-            echo "Publishing $name@$LOCAL_VERSION..."
-            TARBALL=$(cd "$dir" && pnpm pack --pack-destination /tmp | tail -1)
-            if ! npm publish "$TARBALL" --provenance --access public; then
-              FAILED="$FAILED $name"
-            fi
-          }
-
-          for dir in packages/*/; do
-            PKG_NAME=$(node -p "try { const p = require('./$dir/package.json'); p.private ? '' : p.name } catch { '' }")
-            [ -z "$PKG_NAME" ] && continue
-            publish_pkg "$dir" "$PKG_NAME"
-          done
-
-          if [ -n "$FAILED" ]; then
-            echo "Failed to publish:$FAILED"
-            exit 1
-          fi
+        run: pnpm -r publish --no-git-checks --filter '@json-render/*'
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_VERCEL_TOKEN_ELEVATED }}
 
   github-release:
     name: Create GitHub Release
@@ -159,7 +151,6 @@ jobs:
             echo "Creating release $TAG..."
             gh release create "$TAG" \
               --title "$TAG" \
-              --target ${{ github.sha }} \
               --notes-file /tmp/release-notes.md
           fi
         env:

.node-version

@@ -1 +0,0 @@
-24

CHANGELOG.md

@@ -1,45 +1,8 @@
 # Changelog
 
-## 0.19.0
-
-<!-- release:start -->
-### New Features
-
-- **Custom directives API** — `@json-render/core` now supports custom directives via `defineDirective`, letting you declare new JSON shapes (like `$format`, `$math`) that resolve to computed values at render time. Directives compose naturally — nest `$format` over `$math` over `$state` and they resolve inside-out. All four renderers (React, Vue, Svelte, Solid) have built-in directive resolution (#279)
-- **`@json-render/directives`** — New package shipping seven ready-made directives: `$format` (date, currency, number, percent via `Intl`), `$math` (add, subtract, multiply, divide, mod, min, max, round, floor, ceil, abs), `$concat`, `$count`, `$truncate`, `$pluralize`, and `$join`. Also exports `createI18nDirective` for `$t` translation keys with `{{param}}` interpolation, and `standardDirectives` for one-line registration (#279)
-
-### Improvements
-
-- **Example READMEs** — Added documentation to the chat, dashboard, game-engine, and no-ai examples (#277)
-
-### Contributors
-
-- @ctate
-<!-- release:end -->
-
-## 0.18.0
-
-### New Features
-
-- **Devtools** — Five new packages for inspecting json-render apps in the browser: `@json-render/devtools` (framework-agnostic core), plus `@json-render/devtools-react`, `@json-render/devtools-vue`, `@json-render/devtools-svelte`, and `@json-render/devtools-solid` adapters. Drop `<JsonRenderDevtools />` into your app to get a shadow-DOM-isolated panel with six tabs (Spec, State, Actions, Stream, Catalog, Pick), a DOM picker that maps clicked elements back to spec keys via `data-jr-key`, a capped event store, and server-side stream tap utilities. Floating toggle or `Cmd`/`Ctrl` + `Shift` + `J`, tree-shakes to `null` in production (#273)
-- **Devtools example** — New `examples/devtools` Next.js demo showing the full devtools panel wired up to an AI chat endpoint and a component catalog (#273)
-- **Action observer and devtools flag in core** — `@json-render/core` now exposes an action observer and a devtools enablement flag that adapters use to mirror actions and stream events into the panel (#273)
-
-### Bug Fixes
-
-- **Zod 4 schema formatting** — `formatZodType` now correctly handles `z.record()`, `z.default()`, and `z.literal()` types from Zod 4, which previously produced incorrect or empty output in generated prompts and schemas (#239)
-
-### Improvements
-
-- **Zod 4 test coverage** — Added unit tests for `formatZodType` covering record, default, and literal types to guard against regressions (#272)
-
-### Contributors
-
-- @ctate
-- @mvanhorn
-
 ## 0.17.0
 
+<!-- release:start -->
 ### New Features
 
 - **Gaussian Splatting** — Added `GaussianSplat` component to `@json-render/react-three-fiber`, bringing the component count to 20. Composable with all existing R3F components (lights, controls, post-processing) via drei's Splat loader (#259)
@@ -54,6 +17,7 @@
 
 - @ctate
 - @willmanzoli
+<!-- release:end -->
 
 ## 0.16.0
 

README.md

@@ -136,7 +136,6 @@ function Dashboard({ spec }) {
 | `@json-render/react-email`  | React Email renderer for HTML/plain-text emails from specs             |
 | `@json-render/ink`          | Ink terminal renderer with built-in components for interactive TUIs.   |
 | `@json-render/image`        | Image renderer for SVG/PNG output (OG images, social cards) via Satori |
-| `@json-render/directives`   | Pre-built custom directives — $format, $math, $concat, $count, $truncate, $pluralize, $join, $t (i18n) |
 | `@json-render/codegen`      | Utilities for generating code from json-render UI trees                |
 | `@json-render/devtools`     | Framework-agnostic devtools core — panel UI, event store, picker, stream taps |
 | `@json-render/devtools-react`   | React adapter for `@json-render/devtools` (drop-in `<JsonRenderDevtools />`)     |

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

@@ -1,407 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("docs/api/directives")
-
-# @json-render/directives
-
-Pre-built custom directives for `@json-render/core`. Drop them into your catalog and renderer to add formatting, math, string manipulation, and i18n.
-
-## Install
-
-```bash
-npm install @json-render/directives
-```
-
-## Quick Start
-
-```typescript
-import { standardDirectives } from '@json-render/directives';
-
-// Wire into prompt generation
-const prompt = catalog.prompt({ directives: standardDirectives });
-
-// Wire into the renderer
-<JSONUIProvider spec={spec} directives={standardDirectives}>
-  ...
-</JSONUIProvider>
-```
-
-To add factory directives like `createI18nDirective`, spread the array:
-
-```typescript
-import { standardDirectives, createI18nDirective } from '@json-render/directives';
-
-const directives = [...standardDirectives, createI18nDirective(config)];
-```
-
-## Directives
-
-### `$format` — Locale-aware value formatting
-
-Formats values using `Intl` formatters. Supports `date`, `currency`, `number`, and `percent`.
-
-```json
-{ "$format": "currency", "value": { "$state": "/cart/total" }, "currency": "USD" }
-```
-
-```json
-{ "$format": "date", "value": { "$state": "/user/createdAt" } }
-```
-
-```json
-{ "$format": "number", "value": 1234567, "notation": "compact" }
-```
-
-```json
-{ "$format": "percent", "value": 0.75 }
-```
-
-Relative dates are also supported:
-
-```json
-{ "$format": "date", "value": { "$state": "/post/createdAt" }, "style": "relative" }
-```
-
-This returns strings like `"3h ago"`, `"2d from now"`, or `"just now"`.
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$format</code></td>
-      <td><code>{'\"date\" | \"currency\" | \"number\" | \"percent\"'}</code></td>
-      <td>Format type.</td>
-    </tr>
-    <tr>
-      <td><code>value</code></td>
-      <td><code>unknown</code></td>
-      <td>Value to format. Accepts any dynamic expression.</td>
-    </tr>
-    <tr>
-      <td><code>locale</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Locale for formatting (e.g. <code>"en-US"</code>).</td>
-    </tr>
-    <tr>
-      <td><code>currency</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Currency code for <code>"currency"</code> format. Default: <code>"USD"</code>.</td>
-    </tr>
-    <tr>
-      <td><code>notation</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Notation for <code>"number"</code> format (e.g. <code>"compact"</code>).</td>
-    </tr>
-    <tr>
-      <td><code>style</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Set to <code>"relative"</code> for relative date formatting.</td>
-    </tr>
-    <tr>
-      <td><code>options</code></td>
-      <td><code>{'Record<string, unknown>'}</code></td>
-      <td>Optional. Extra <code>Intl</code> formatter options.</td>
-    </tr>
-  </tbody>
-</table>
-
-### `$math` — Arithmetic operations
-
-Performs arithmetic on one or two operands. Operands accept any dynamic expression.
-
-```json
-{ "$math": "add", "a": { "$state": "/subtotal" }, "b": { "$state": "/tax" } }
-```
-
-```json
-{ "$math": "round", "a": 3.7 }
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$math</code></td>
-      <td><code>{'\"add\" | \"subtract\" | \"multiply\" | \"divide\" | \"mod\" | \"min\" | \"max\" | \"round\" | \"floor\" | \"ceil\" | \"abs\"'}</code></td>
-      <td>Operation to perform.</td>
-    </tr>
-    <tr>
-      <td><code>a</code></td>
-      <td><code>unknown</code></td>
-      <td>First operand. Defaults to <code>0</code> if missing.</td>
-    </tr>
-    <tr>
-      <td><code>b</code></td>
-      <td><code>unknown</code></td>
-      <td>Second operand (binary ops only). Defaults to <code>0</code> if missing.</td>
-    </tr>
-  </tbody>
-</table>
-
-Unary operations (`round`, `floor`, `ceil`, `abs`) only use `a`. Division by zero returns `0`.
-
-### `$concat` — String concatenation
-
-Concatenates multiple values into a single string. Each element is resolved then joined.
-
-```json
-{ "$concat": [{ "$state": "/user/firstName" }, " ", { "$state": "/user/lastName" }] }
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$concat</code></td>
-      <td><code>{'unknown[]'}</code></td>
-      <td>Array of values to concatenate. Each is resolved, converted to string, and joined.</td>
-    </tr>
-  </tbody>
-</table>
-
-### `$count` — Array/string length
-
-Returns the length of an array or string. Returns `0` for other types.
-
-```json
-{ "$count": { "$state": "/cart/items" } }
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$count</code></td>
-      <td><code>unknown</code></td>
-      <td>Value to count. Accepts arrays and strings.</td>
-    </tr>
-  </tbody>
-</table>
-
-### `$truncate` — Text truncation
-
-Truncates text to a maximum length with a configurable suffix.
-
-```json
-{ "$truncate": { "$state": "/post/body" }, "length": 140, "suffix": "..." }
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$truncate</code></td>
-      <td><code>unknown</code></td>
-      <td>Value to truncate.</td>
-    </tr>
-    <tr>
-      <td><code>length</code></td>
-      <td><code>number</code></td>
-      <td>Optional. Max character length. Default: <code>100</code>.</td>
-    </tr>
-    <tr>
-      <td><code>suffix</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Suffix to append when truncated. Default: <code>"..."</code>.</td>
-    </tr>
-  </tbody>
-</table>
-
-### `$pluralize` — Singular/plural forms
-
-Selects a singular, plural, or zero form based on a count.
-
-```json
-{ "$pluralize": { "$state": "/cart/itemCount" }, "one": "item", "other": "items", "zero": "no items" }
-```
-
-Output: `"3 items"`, `"1 item"`, or `"no items"`.
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$pluralize</code></td>
-      <td><code>unknown</code></td>
-      <td>Count value. Accepts dynamic expressions.</td>
-    </tr>
-    <tr>
-      <td><code>one</code></td>
-      <td><code>string</code></td>
-      <td>Singular form label.</td>
-    </tr>
-    <tr>
-      <td><code>other</code></td>
-      <td><code>string</code></td>
-      <td>Plural form label.</td>
-    </tr>
-    <tr>
-      <td><code>zero</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Label for count of zero. If omitted, uses <code>"0 {'<other>'}"</code>.</td>
-    </tr>
-  </tbody>
-</table>
-
-### `$join` — Join array elements
-
-Joins array elements with a separator string.
-
-```json
-{ "$join": { "$state": "/tags" }, "separator": ", " }
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$join</code></td>
-      <td><code>unknown</code></td>
-      <td>Array to join. Non-array values are converted to string.</td>
-    </tr>
-    <tr>
-      <td><code>separator</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Separator between elements. Default: <code>", "</code>.</td>
-    </tr>
-  </tbody>
-</table>
-
-### `createI18nDirective` — Internationalization
-
-Factory function that creates a `$t` directive for translations with `{'{{param}}'}` interpolation.
-
-```typescript
-import { createI18nDirective } from '@json-render/directives';
-
-const tDirective = createI18nDirective({
-  locale: 'en',
-  messages: {
-    en: { "greeting": "Hello, {'{{name}}'}!", "checkout.submit": "Place Order" },
-    es: { "greeting": "Hola, {'{{name}}'}!", "checkout.submit": "Realizar Pedido" },
-  },
-  fallbackLocale: 'en',
-});
-```
-
-Usage in specs:
-
-```json
-{ "$t": "checkout.submit" }
-```
-
-```json
-{ "$t": "greeting", "params": { "name": { "$state": "/user/name" } } }
-```
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>$t</code></td>
-      <td><code>string</code></td>
-      <td>Translation key.</td>
-    </tr>
-    <tr>
-      <td><code>params</code></td>
-      <td><code>{'Record<string, unknown>'}</code></td>
-      <td>Optional. Interpolation parameters. Values accept dynamic expressions.</td>
-    </tr>
-  </tbody>
-</table>
-
-#### `I18nConfig`
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>locale</code></td>
-      <td><code>string</code></td>
-      <td>Current locale (e.g. <code>"en"</code>).</td>
-    </tr>
-    <tr>
-      <td><code>messages</code></td>
-      <td><code>{'Record<string, Record<string, string>>'}</code></td>
-      <td>Map of locale to key-value translation pairs.</td>
-    </tr>
-    <tr>
-      <td><code>fallbackLocale</code></td>
-      <td><code>string</code></td>
-      <td>Optional. Fallback locale when a key is missing in the current locale.</td>
-    </tr>
-  </tbody>
-</table>
-
-## Composition
-
-Directives compose naturally. Each resolver calls `resolvePropValue` on its inputs, so you can nest directives:
-
-```json
-{
-  "$format": "currency",
-  "value": { "$math": "multiply", "a": { "$state": "/price" }, "b": { "$state": "/qty" } },
-  "currency": "USD"
-}
-```
-
-```json
-{
-  "$pluralize": { "$count": { "$state": "/items" } },
-  "one": "item",
-  "other": "items"
-}
-```

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

@@ -5,272 +5,9 @@ export const metadata = pageMetadata("docs/changelog")
 
 Notable changes and updates to json-render.
 
-## v0.19.0
-
-May 6, 2026
-
-### New: Custom Directives API
-
-`@json-render/core` now supports custom directives via `defineDirective`, letting you declare new JSON shapes (like `$format`, `$math`) that resolve to computed values at render time. Directives compose naturally -- nest `$format` over `$math` over `$state` and they resolve inside-out. All four renderers (React, Vue, Svelte, Solid) have built-in directive resolution.
-
-### New: `@json-render/directives`
-
-New package shipping seven ready-made directives: `$format` (date, currency, number, percent via `Intl`), `$math` (arithmetic and rounding), `$concat`, `$count`, `$truncate`, `$pluralize`, and `$join`. Also exports `createI18nDirective` for `$t` translation keys with interpolation, and `standardDirectives` for one-line registration.
-
-```bash
-npm install @json-render/directives
-```
-
-```tsx
-import { standardDirectives } from "@json-render/directives";
-
-const catalog = createCatalog({
-  directives: standardDirectives,
-  // ...
-});
-```
-
-See the [Directives guide](/docs/directives) and the [API reference](/docs/api/directives) for details.
-
----
-
-## v0.18.0
-
-April 17, 2026
-
-### New: Devtools
-
-Five new packages for inspecting json-render apps in the browser:
-
-- `@json-render/devtools` -- framework-agnostic core
-- `@json-render/devtools-react`
-- `@json-render/devtools-vue`
-- `@json-render/devtools-svelte`
-- `@json-render/devtools-solid`
-
-Drop `<JsonRenderDevtools />` into your app to get a shadow-DOM-isolated panel with six tabs (Spec, State, Actions, Stream, Catalog, Pick), a DOM picker that maps clicked elements back to spec keys via `data-jr-key`, and a capped event store. Toggle with the floating button or `Cmd`/`Ctrl` + `Shift` + `J`. Tree-shakes to `null` in production.
-
-```bash
-npm install @json-render/devtools-react
-```
-
-```tsx
-import { JsonRenderDevtools } from "@json-render/devtools-react";
-
-<JsonRenderDevtools />
-```
-
-See the [Devtools guide](/docs/devtools) and the [API reference](/docs/api/devtools) for details.
-
-### New: Devtools Example
-
-New `examples/devtools` Next.js demo showing the full devtools panel wired up to an AI chat endpoint and a component catalog.
-
-### New: Action Observer and Devtools Flag in Core
-
-`@json-render/core` now exposes an action observer and a devtools enablement flag that framework adapters use to mirror actions and stream events into the panel.
-
-### Fixed: Zod 4 Schema Formatting
-
-`formatZodType` now correctly handles `z.record()`, `z.default()`, and `z.literal()` types from Zod 4, which previously produced incorrect or empty output in generated prompts and schemas.
-
----
-
-## v0.17.0
-
-April 10, 2026
-
-### New: Gaussian Splatting
-
-Added `GaussianSplat` component to `@json-render/react-three-fiber`, bringing the component count to 20. Composable with all existing R3F components (lights, controls, post-processing) via drei's Splat loader.
-
-### New: R3F Gaussian Splatting Example
-
-Demo app with five scenes: splat showroom, splat with primitives, multi-splat, post-processing effects, and animated floating splat.
-
-### New: Standalone gsplat Example
-
-Experimental demo app showcasing Gaussian Splatting with gsplat.js (no Three.js dependency), featuring scene selector, live JSON spec viewer, and progress indicator.
-
-### Improved: AI Output Quality
-
-Improved prompt output and schema generation for more reliable AI-generated specs.
-
----
-
-## v0.16.0
-
-March 27, 2026
-
-### New: `@json-render/next`
-
-Next.js renderer that turns JSON specs into full Next.js applications with routes, layouts, SSR, metadata, data loaders, and static generation. Client and server entry points at `@json-render/next` and `@json-render/next/server`. Includes built-in `Link`, `Slot`, error boundary, loading, and not-found components.
-
-```bash
-npm install @json-render/next
-```
-
-### New: `@json-render/shadcn-svelte`
-
-Pre-built shadcn-svelte components for json-render Svelte apps. 36 components built on Svelte 5 + Tailwind CSS with state binding, validation, and action support. Server-safe catalog at `@json-render/shadcn-svelte/catalog`.
-
-```bash
-npm install @json-render/shadcn-svelte
-```
-
-### Improved: Release Process
-
-Switched from Changesets to a manual single-PR release workflow with changelog markers and automatic npm publish on version bump.
-
----
-
-## v0.15.0
-
-March 23, 2026
-
-### New: `@json-render/ink`
-
-Terminal renderer for json-render. JSON becomes terminal UIs powered by [Ink](https://github.com/vadimdemedes/ink). Stream AI-generated specs directly to the terminal with `useUIStream`.
-
-```bash
-npm install @json-render/ink
-```
-
-### Improved: YAML Format Support in `buildUserPrompt`
-
-`buildUserPrompt` now accepts `format` and `serializer` options, enabling YAML as a wire format alongside JSON.
-
----
-
-## v0.14.0
-
-March 13, 2026
-
-### New: `@json-render/yaml`
-
-YAML wire format for json-render. Includes streaming YAML parser, `yamlPrompt()` for system prompts, and AI SDK transform (`pipeYamlRender`) as a drop-in alternative to JSONL streaming. Supports four fence types: `yaml-spec`, `yaml-edit`, `yaml-patch`, and `diff`.
-
-```bash
-npm install @json-render/yaml
-```
-
-### New: Universal Edit Modes
-
-Three strategies for multi-turn spec refinement in `@json-render/core`:
-
-- **Patch** -- RFC 6902 JSON Patch
-- **Merge** -- RFC 7396 Merge Patch
-- **Diff** -- Unified diff
-
-New `editModes` option on `buildUserPrompt()` and `PromptOptions`. New helpers: `deepMergeSpec()`, `diffToPatches()`, `buildEditUserPrompt()`, `buildEditInstructions()`, `isNonEmptySpec()`.
-
-### Improved: Playground
-
-Format toggle (JSONL / YAML), edit mode picker (patch / merge / diff), and token usage display with prompt caching stats.
-
-### Improved: Prompt Caching
-
-Generate API uses Anthropic ephemeral cache control for system prompts.
-
----
-
-## v0.13.0
-
-March 12, 2026
-
-### New: `@json-render/solid`
-
-SolidJS renderer for json-render. JSON becomes Solid components with reactive rendering, schema export, and full catalog support.
-
-```bash
-npm install @json-render/core @json-render/solid
-```
-
-### New: `@json-render/react-three-fiber`
-
-React Three Fiber renderer for json-render. JSON becomes 3D scenes with 19 built-in components for meshes, lights, models, environments, text, cameras, and controls.
-
-```bash
-npm install @json-render/react-three-fiber
-```
-
-### Improved: Strict JSON Schema Mode
-
-`catalog.jsonSchema({ strict: true })` produces a JSON Schema subset compatible with LLM structured output APIs (OpenAI, Google Gemini, Anthropic). Ensures `additionalProperties: false` on every object and all properties listed in `required`.
-
----
-
-## v0.12.1
-
-March 11, 2026
-
-### Changed: Generation Mode Renames
-
-Renamed generation modes from `"generate"` / `"chat"` to `"standalone"` / `"inline"`. The old names still work but emit a deprecation warning.
-
-### Fixed: MCP React Duplicate Module Error
-
-Resolved React duplicate module error (`useRef` returning null) in `@json-render/mcp` by adding `resolve.dedupe` Vite configuration. Added `./build-app-html` export entry point.
-
----
-
-## v0.12.0
-
-March 6, 2026
-
-### New: `@json-render/svelte`
-
-Svelte 5 renderer with runes-based reactivity. Full support for data binding, visibility, actions, validation, watchers, streaming, and repeat scopes. Includes `defineRegistry`, `Renderer`, `schema`, composables, and context providers.
-
-```bash
-npm install @json-render/core @json-render/svelte
-```
-
-### New: `@json-render/react-email`
-
-React Email renderer for generating HTML and plain-text emails from JSON specs. 17 standard components (Html, Head, Body, Container, Section, Row, Column, Heading, Text, Link, Button, Image, Hr, Preview, Markdown). Server-side `renderToHtml` / `renderToPlainText` APIs.
-
-```bash
-npm install @json-render/react-email
-```
-
-### New: `@json-render/mcp`
-
-MCP Apps integration that serves json-render UIs as interactive apps inside Claude, ChatGPT, Cursor, VS Code, and other MCP-capable clients. `createMcpApp` server factory, `useJsonRenderApp` React hook for iframes, and `buildAppHtml` utility.
-
-```bash
-npm install @json-render/mcp
-```
-
----
-
-## v0.11.0
-
-February 27, 2026
-
-### New: `@json-render/image`
-
-Server-side image renderer powered by Satori. Turns the same `{ root, elements }` spec format into SVG or PNG output for OG images, social cards, and banners.
-
-```bash
-npm install @json-render/image
-```
-
-```typescript
-import { renderToSvg, renderToPng } from "@json-render/image/render";
-import { standardComponentDefinitions } from "@json-render/image/catalog";
-
-const svg = await renderToSvg(spec, { width: 1200, height: 630 });
-const png = await renderToPng(spec, { width: 1200, height: 630 });
-```
-
-9 standard components: Frame, Box, Row, Column, Heading, Text, Image, Divider, Spacer. Server-safe import path at `@json-render/image/server`.
-
----
-
 ## v0.10.0
 
-February 25, 2026
+February 2026
 
 ### New: `@json-render/vue`
 
@@ -383,7 +120,7 @@ All form components now support `checks` and `validateOn` props:
 
 ## v0.9.1
 
-February 24, 2026
+February 2026
 
 ### Fixed: Install failure due to private dependency
 
@@ -393,7 +130,7 @@ February 24, 2026
 
 ## v0.9.0
 
-February 24, 2026
+February 2026
 
 ### New: External State Store
 
@@ -447,7 +184,7 @@ Fixed safely resolving the inner type for Zod arrays in schema introspection, pr
 
 ## v0.8.0
 
-February 20, 2026
+February 2026
 
 ### New: `@json-render/react-pdf`
 
@@ -509,7 +246,7 @@ Supports custom catalogs with `defineRegistry`, server-safe imports via `@json-r
 
 ## v0.7.0
 
-February 17, 2026
+February 2026
 
 ### New: `@json-render/shadcn`
 
@@ -600,7 +337,7 @@ Action bindings now support a `preventDefault` boolean field, allowing the LLM t
 
 ## v0.6.0
 
-February 13, 2026
+February 2026
 
 ### New: Chat Mode (Inline GenUI)
 
@@ -742,7 +479,7 @@ See the [Migration Guide](/docs/migration) for detailed upgrade instructions.
 
 ## v0.5.0
 
-February 9, 2026
+February 2026
 
 ### New: @json-render/react-native
 
@@ -861,7 +598,7 @@ Schema prompts now include streaming best practices, repeat/list examples, and s
 
 ## v0.4.0
 
-February 5, 2026
+February 2026
 
 ### New: Custom Schema System
 
@@ -996,7 +733,7 @@ The dashboard example is now a full-featured accounting dashboard with:
 
 ## v0.3.0
 
-January 20, 2026
+January 2026
 
 Internal release with codegen foundations.
 
@@ -1010,7 +747,7 @@ Internal release with codegen foundations.
 
 ## v0.2.0
 
-January 14, 2026
+January 2026
 
 Initial public release.
 

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

@@ -1,124 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("docs/directives")
-
-# Directives
-
-Extend the spec language with custom `$`-prefixed dynamic values. Directives let you add formatting, math, string manipulation, i18n, and any other transformation without modifying core.
-
-## Overview
-
-A directive is a user-defined dynamic value expression, like `$state` or `$computed`, but defined in userland. Each directive has a `$`-prefixed name, a Zod schema for validation, and a resolver function.
-
-```json
-{
-  "type": "Text",
-  "props": {
-    "text": {
-      "$format": "currency",
-      "value": { "$state": "/cart/total" },
-      "currency": "USD"
-    }
-  },
-  "children": []
-}
-```
-
-## Defining a Directive
-
-Use `defineDirective` from `@json-render/core`:
-
-```typescript
-import { defineDirective, resolvePropValue } from '@json-render/core';
-import { z } from 'zod';
-
-const doubleDirective = defineDirective({
-  name: '$double',
-  description: 'Double a numeric value.',
-  schema: z.object({
-    $double: z.unknown(),
-  }),
-  resolve(value, ctx) {
-    const resolved = resolvePropValue(value.$double, ctx);
-    return (resolved as number) * 2;
-  },
-});
-```
-
-The `description` field is optional. When generating prompts, the directive's schema fields are auto-described from the Zod schema; the `description` adds short behavioral context the schema can't express.
-
-## Wiring Directives
-
-Pass directives to both the renderer (for runtime resolution) and the catalog prompt (for AI generation).
-
-### Runtime
-
-```tsx
-import { JSONUIProvider, Renderer } from '@json-render/react';
-import { standardDirectives } from '@json-render/directives';
-
-<JSONUIProvider registry={registry} directives={standardDirectives}>
-  <Renderer spec={spec} registry={registry} />
-</JSONUIProvider>
-```
-
-Or with `createRenderer`:
-
-```tsx
-const MyRenderer = createRenderer(catalog, components);
-
-<MyRenderer spec={spec} directives={directives} />
-```
-
-All four renderers (React, Vue, Svelte, Solid) accept the `directives` prop on their provider and `createRenderer` output.
-
-### Prompt Generation
-
-```typescript
-const prompt = catalog.prompt({ directives });
-```
-
-Each directive's schema is auto-described in the "CUSTOM DYNAMIC VALUES" section of the system prompt. The optional `description` field adds behavioral context inline.
-
-## Pre-built Directives
-
-The `@json-render/directives` package ships ready-to-use directives:
-
-```typescript
-import { standardDirectives, createI18nDirective } from '@json-render/directives';
-```
-
-`standardDirectives` includes `$format`, `$math`, `$concat`, `$count`, `$truncate`, `$pluralize`, and `$join`. Add factory directives by spreading:
-
-```typescript
-const directives = [...standardDirectives, createI18nDirective(config)];
-```
-
-See the [API reference](/docs/api/directives) for details on each directive.
-
-## Composition
-
-Directives compose naturally. Each resolver calls `resolvePropValue` on its inputs, so directives can wrap other directives or built-in expressions like `$state`:
-
-```json
-{
-  "$format": "currency",
-  "value": {
-    "$math": "multiply",
-    "a": { "$state": "/price" },
-    "b": { "$state": "/qty" }
-  },
-  "currency": "USD"
-}
-```
-
-This resolves inside-out: `$state` reads from state, `$math` multiplies the values, and `$format` formats the result as currency.
-
-## Built-in Precedence
-
-Built-in expressions (`$state`, `$computed`, `$cond`, `$template`, etc.) always take precedence over custom directives. `defineDirective` throws if you try to register a name that conflicts with a built-in key.
-
-## Next
-
-- [API Reference](/docs/api/directives) — full directive reference
-- [Computed Values](/docs/computed-values) — `$computed` and `$template` expressions
-- [Data Binding](/docs/data-binding) — `$state`, `$item`, and binding expressions

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

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

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

@@ -16,8 +16,8 @@ const SYSTEM_PROMPT = `You are a helpful documentation assistant for json-render
 
 GitHub repository: https://github.com/vercel-labs/json-render
 Documentation: https://json-render.dev/docs
-npm packages: @json-render/core, @json-render/react, @json-render/next, @json-render/ink, @json-render/vue, @json-render/svelte, @json-render/solid, @json-render/shadcn, @json-render/shadcn-svelte, @json-render/react-three-fiber, @json-render/react-native, @json-render/react-email, @json-render/react-pdf, @json-render/image, @json-render/remotion, @json-render/directives, @json-render/codegen, @json-render/devtools, @json-render/devtools-react, @json-render/devtools-vue, @json-render/devtools-svelte, @json-render/devtools-solid, @json-render/mcp, @json-render/redux, @json-render/zustand, @json-render/jotai, @json-render/xstate, @json-render/yaml
-Skills: json-render ships AI agent skills that teach coding agents how to use each package. Install with "npx skills add vercel-labs/json-render --skill <name>". Available skills: core, react, next, ink, react-pdf, react-email, react-native, shadcn, shadcn-svelte, react-three-fiber, image, remotion, vue, svelte, solid, directives, codegen, devtools, mcp, redux, zustand, jotai, xstate, yaml. See /docs/skills for details.
+npm packages: @json-render/core, @json-render/react, @json-render/next, @json-render/ink, @json-render/vue, @json-render/svelte, @json-render/solid, @json-render/shadcn, @json-render/shadcn-svelte, @json-render/react-three-fiber, @json-render/react-native, @json-render/react-email, @json-render/react-pdf, @json-render/image, @json-render/remotion, @json-render/codegen, @json-render/devtools, @json-render/devtools-react, @json-render/devtools-vue, @json-render/devtools-svelte, @json-render/devtools-solid, @json-render/mcp, @json-render/redux, @json-render/zustand, @json-render/jotai, @json-render/xstate, @json-render/yaml
+Skills: json-render ships AI agent skills that teach coding agents how to use each package. Install with "npx skills add vercel-labs/json-render --skill <name>". Available skills: core, react, next, ink, react-pdf, react-email, react-native, shadcn, shadcn-svelte, react-three-fiber, image, remotion, vue, svelte, solid, codegen, devtools, mcp, redux, zustand, jotai, xstate, yaml. See /docs/skills for details.
 
 You have access to the full json-render documentation via the bash and readFile tools. The docs are available as markdown files in the /workspace/docs/ directory.
 

apps/web/lib/docs-navigation.ts

@@ -32,7 +32,6 @@ export const docsNavigation: NavSection[] = [
       { title: "Visibility", href: "/docs/visibility" },
       { title: "Watchers", href: "/docs/watchers" },
       { title: "Validation", href: "/docs/validation" },
-      { title: "Directives", href: "/docs/directives" },
     ],
   },
   {
@@ -87,7 +86,6 @@ export const docsNavigation: NavSection[] = [
         title: "@json-render/react-three-fiber",
         href: "/docs/api/react-three-fiber",
       },
-      { title: "@json-render/directives", href: "/docs/api/directives" },
       { title: "@json-render/codegen", href: "/docs/api/codegen" },
       { title: "@json-render/devtools", href: "/docs/api/devtools" },
       {

apps/web/lib/page-titles.ts

@@ -40,7 +40,6 @@ export const PAGE_TITLES: Record<string, string> = {
   "docs/migration": "Migration Guide",
   "docs/changelog": "Changelog",
   "docs/skills": "Skills",
-  "docs/directives": "Directives",
 
   // API references
   "docs/api/core": "@json-render/core API",
@@ -52,7 +51,6 @@ export const PAGE_TITLES: Record<string, string> = {
   "docs/api/react-email": "@json-render/react-email API",
   "docs/api/react-native": "@json-render/react-native API",
   "docs/api/svelte": "@json-render/svelte API",
-  "docs/api/directives": "@json-render/directives API",
   "docs/api/codegen": "@json-render/codegen API",
   "docs/api/devtools": "@json-render/devtools API",
   "docs/api/devtools-react": "@json-render/devtools-react API",

examples/chat/README.md

@@ -1,50 +0,0 @@
-# Chat Example
-
-An AI-powered data explorer that streams rich, interactive UI directly into a chat interface. The assistant uses tool calls to fetch real data (weather, GitHub, crypto, Hacker News, web search), then generates a json-render spec that renders inline alongside the conversation using shadcn components, Recharts, and React Three Fiber.
-
-## What it shows
-
-- **Streaming specs inside chat messages** -- `pipeJsonRender` on the server merges the AI SDK UI stream with json-render spec patches so text, tool-call indicators, and rendered UI all appear in the correct order within a single message bubble.
-- **ToolLoopAgent with live data** -- the agent loops through tool calls (weather, GitHub repos/PRs, crypto prices, Hacker News, web search) to gather real data before generating UI.
-- **Full catalog/registry stack** -- a catalog constrains what the model can produce; the registry maps every component to a real React implementation (shadcn, Recharts charts, R3F 3D scenes).
-- **State and interactivity** -- `$state`, `$bindState`, visibility, and actions work inside the streamed spec, so the rendered UI is interactive, not static.
-
-## Setup
-
-```bash
-pnpm install          # from the monorepo root
-cd examples/chat
-cp .env.example .env.local
-```
-
-Set the required environment variables in `.env.local`:
-
-| Variable | Required | Description |
-|----------|----------|-------------|
-| `AI_GATEWAY_API_KEY` | Yes | Vercel AI Gateway key (auto-authenticated on Vercel) |
-| `AI_GATEWAY_MODEL` | No | Model identifier, defaults to `anthropic/claude-haiku-4.5` |
-| `KV_REST_API_URL` | No | Upstash Redis URL for rate limiting |
-| `KV_REST_API_TOKEN` | No | Upstash Redis token |
-| `RATE_LIMIT_PER_MINUTE` | No | Defaults to `10` |
-| `RATE_LIMIT_PER_DAY` | No | Defaults to `100` |
-
-Rate limiting is a no-op when the Upstash variables are not set.
-
-## Run
-
-```bash
-pnpm dev
-# http://chat-demo.json-render.localhost:1355
-```
-
-Requires global [`portless`](https://github.com/vercel-labs/portless). The `predev` script checks for it automatically.
-
-## Files
-
-- `app/page.tsx` -- chat UI with `useChat`, message rendering, and inline spec display
-- `app/api/generate/route.ts` -- streams the agent through `pipeJsonRender` with optional Upstash rate limiting
-- `lib/agent.ts` -- `ToolLoopAgent` with system prompt from `explorerCatalog.prompt()` and custom rules for layout, 3D, and interactivity
-- `lib/tools/` -- tool definitions for weather, GitHub, crypto, Hacker News, and web search
-- `lib/render/catalog.ts` -- component catalog (shadcn base + custom metrics, tables, charts, tabs, 3D)
-- `lib/render/registry.tsx` -- maps catalog types to React components (shadcn, Recharts, R3F)
-- `lib/render/renderer.tsx` -- `ExplorerRenderer` wrapping `StateProvider`, `VisibilityProvider`, `ActionProvider`, and `Renderer`

examples/dashboard/README.md

@@ -1,58 +0,0 @@
-# Dashboard Example
-
-AI-generated dashboard widgets with guardrails. Each widget is streamed from an LLM, constrained by a json-render catalog, and rendered with shadcn components and Recharts. Widgets can fetch and mutate data through named actions that hit a real REST API backed by Postgres.
-
-## What it shows
-
-- **Streaming widget generation** -- `useUIStream` streams JSONL patches from the server, progressively building each widget's spec.
-- **Catalog-constrained actions** -- the catalog declares typed actions (`viewCustomers`, `createInvoice`, `approveExpense`, etc.) that map to REST endpoints; the registry wires them to real `fetch` calls with toast feedback.
-- **Persistence** -- widget prompts and specs are saved to Postgres via Drizzle ORM, so widgets survive page reloads.
-- **Drag-and-drop reorder** -- `@dnd-kit` lets you rearrange widgets, with ordering persisted to the database.
-- **Edit mode** -- send a follow-up prompt to iteratively refine a saved widget.
-
-## Setup
-
-```bash
-pnpm install          # from the monorepo root
-cd examples/dashboard
-cp .env.example .env
-```
-
-Set the required environment variables:
-
-| Variable | Required | Description |
-|----------|----------|-------------|
-| `DATABASE_URL` | Yes | Postgres connection string |
-| `AI_GATEWAY_API_KEY` | Yes | Vercel AI Gateway key |
-| `AI_GATEWAY_MODEL` | No | Defaults to `anthropic/claude-haiku-4.5` |
-| `KV_REST_API_URL` | No | Upstash Redis URL for rate limiting |
-| `KV_REST_API_TOKEN` | No | Upstash Redis token |
-| `RATE_LIMIT_PER_MINUTE` | No | Defaults to `10` |
-| `RATE_LIMIT_PER_DAY` | No | Defaults to `100` |
-
-Set up the database:
-
-```bash
-pnpm db:push          # apply the schema to your database
-pnpm db:seed          # optional: populate with sample data
-```
-
-## Run
-
-```bash
-pnpm dev
-# http://dashboard-demo.json-render.localhost:1355
-```
-
-Requires global [`portless`](https://github.com/vercel-labs/portless). The `predev` script checks for it automatically.
-
-## Files
-
-- `app/page.tsx` -- dashboard grid with drag-and-drop, widget management, and add/edit flows
-- `app/api/generate/route.ts` -- streams text from the model using `dashboardCatalog.prompt()` as the system prompt
-- `app/api/v1/` -- REST API for widgets, customers, invoices, expenses, accounts, and reports
-- `lib/render/catalog.ts` -- component catalog with shadcn-based UI primitives and typed business actions
-- `lib/render/registry.tsx` -- maps components to React (shadcn + Recharts) and wires actions to REST calls
-- `lib/render/renderer.tsx` -- `DashboardRenderer` with state, visibility, and action providers
-- `lib/db/schema.ts` -- Drizzle schema for customers, invoices, expenses, accounts, transactions, and widgets
-- `components/widget.tsx` -- individual widget with `useUIStream`, auto-action execution, and save/edit logic

examples/game-engine/README.md

@@ -1,58 +0,0 @@
-# Game Engine Example
-
-A 3D scene editor and lightweight game runtime built with json-render, React Three Fiber, and Rapier physics. Edit levels as structured objects, preview them on a canvas, then press play for first/third-person movement, physics, health/damage, NPCs, and optional AI-assisted editing.
-
-## What it shows
-
-- **3D rendering with json-render** -- the editor's scene graph is converted to a json-render `Spec` via `sceneToSpec`, then rendered with `ThreeRenderer` and the `@json-render/react-three-fiber` registry.
-- **AI scene editing** -- type a prompt in the editor sidebar; the server streams YAML patches that are merged into the current spec, updating the 3D scene in real time.
-- **In-game AI** -- while playing, an AI agent can manipulate the scene by streaming JSONL function calls (`addObject`, `updateObjectTransform`, etc.).
-- **Play mode with physics** -- toggle between edit mode (gizmos, selection) and play mode (Rapier physics, first/third-person controls, health, damage zones, collectibles).
-- **NPC dialogue with optional TTS** -- `GameCharacter` components support AI-generated dialogue, with optional ElevenLabs text-to-speech.
-- **GLB uploads** -- upload custom 3D models and environments via Vercel Blob.
-
-## Setup
-
-```bash
-pnpm install          # from the monorepo root
-cd examples/game-engine
-cp .env.example .env
-```
-
-Set the required environment variables:
-
-| Variable | Required | Description |
-|----------|----------|-------------|
-| `AI_GATEWAY_API_KEY` | Yes | Vercel AI Gateway key |
-| `AI_GATEWAY_MODEL` | No | Defaults to `anthropic/claude-sonnet-4-6` |
-| `ELEVENLABS_API_KEY` | No | Enables text-to-speech for NPC dialogue |
-| `KV_REST_API_URL` | No | Upstash Redis URL for rate limiting |
-| `KV_REST_API_TOKEN` | No | Upstash Redis token |
-| `RATE_LIMIT_PER_MINUTE` | No | Defaults to `10` |
-| `RATE_LIMIT_PER_DAY` | No | Defaults to `100` |
-
-Model/environment uploads require Vercel Blob configuration when deployed.
-
-## Run
-
-```bash
-pnpm dev
-# http://game-engine-demo.json-render.localhost:1355
-```
-
-Requires global [`portless`](https://github.com/vercel-labs/portless). The `predev` script checks for it automatically.
-
-## Files
-
-- `app/page.tsx` -- mounts `GameEngine`
-- `components/game-engine.tsx` -- main shell: R3F canvas, sidebars, play/edit mode toggle, AI prompt integration
-- `components/game/` -- game primitives (`GameBox`, `GameSphere`, `Player`, `GameCharacter`, etc.) with physics and interactions
-- `components/editor/` -- editor UI: object inspector, scene tree, AI prompt sidebar, gizmo controls
-- `components/hud/` -- in-game HUD: health bar, crosshair, in-game AI prompt
-- `app/api/ai/route.ts` -- streams YAML scene edits from the model
-- `app/api/ai-game/route.ts` -- streams JSONL function calls for in-game AI manipulation
-- `app/api/character-responses/route.ts` -- generates NPC dialogue, optionally with TTS
-- `lib/catalog.ts` -- 3D component catalog (R3F base + game-specific primitives)
-- `lib/registry.tsx` -- maps catalog types to R3F and game components
-- `lib/store.ts` -- Zustand store for scenes, selection, play mode, health, undo/redo
-- `lib/scene-to-spec.ts` / `lib/spec-to-scene.ts` -- converts between the editor's scene graph and json-render specs

examples/harness-chat/README.md

@@ -1,78 +0,0 @@
-# Harness Agent Chat Example
-
-**json-render as the UI for agent harnesses.**
-
-This example runs a real coding agent -- pick **Claude Code**, **Codex**, or **Pi** -- in a Vercel Sandbox, driven through the AI SDK 7 [`HarnessAgent`](https://vercel.com/changelog/program-agent-harnesses-with-ai-sdk) API, and renders its work as generative UI instead of a wall of markdown.
-
-The agent edits files, runs commands, and executes tests inside the sandbox. When it reports back, it emits a json-render spec constrained to a catalog of work-report components (`Steps`, `FileChange`, `Terminal`, `TestResults`, `Metric`, `BarChart`, `LineChart`, ...), which streams into the chat as structured, rendered UI.
-
-## How it works
-
-The round trip: the browser posts the chosen agent and prompt, the server streams a harness turn, and `pipeJsonRender` extracts the spec fence on the way back.
-
-```mermaid
-flowchart LR
-  subgraph browser [Browser]
-    UI["app/page.tsx<br/>useChat · AgentSelector"]
-  end
-  subgraph server ["app/api/agent/route.ts"]
-    SESS["getSession(chatId, agent)"]
-    AGENT["HarnessAgent<br/>Claude Code · Codex · Pi"]
-    SANDBOX[("Vercel Sandbox")]
-    PIPE["pipeJsonRender"]
-  end
-  UI -- "POST { messages, agent }" --> SESS
-  SESS --> AGENT
-  AGENT <-->|"bash · edit · test"| SANDBOX
-  AGENT -- "toUIMessageStream()" --> PIPE
-  PIPE -- "text · tool calls · data-spec parts" --> UI
-```
-
-What happens on a single turn:
-
-```mermaid
-sequenceDiagram
-  participant U as User
-  participant UI as page.tsx
-  participant API as /api/agent
-  participant AG as HarnessAgent
-  participant SB as Sandbox
-  U->>UI: pick agent + send prompt
-  UI->>API: POST { messages, agent }
-  API->>AG: getSession + stream(prompt)
-  AG->>SB: run commands / edit files
-  SB-->>AG: output
-  AG-->>API: prose + spec fence (streamed)
-  Note over API: pipeJsonRender splits the spec fence out
-  API-->>UI: text · tool calls · data-spec parts
-  UI-->>U: markdown + rendered report
-```
-
-1. `lib/agents.ts` is a client-safe catalog of the selectable agents; `lib/agent.ts` builds a `HarnessAgent` per agent (Claude Code, Codex, or Pi), each with a Vercel sandbox provider. The shared `instructions` embed `agentReportCatalog.prompt({ mode: "inline" })`, teaching the runtime to wrap its UI report in a ` ```spec ` fence.
-2. `app/api/agent/route.ts` reads the chosen `agent` from the request body and keeps one live harness session per chat, locked to the agent that created it (the harness owns its own conversation history, so each turn sends only the fresh user message). It streams the turn and pipes it through `pipeJsonRender` -- which extracts the spec fence into typed `data-spec` parts while passing text and tool calls through untouched.
-3. `app/page.tsx` renders text with markdown, builtin tool calls (bash, edit, ...) as activity lines, and the spec inline with `<ReportRenderer>` via `useJsonRenderMessage`. The `AgentSelector` on the first screen chooses which harness to run.
-
-Because `HarnessAgent.stream()` returns a standard AI SDK `StreamTextResult`, the json-render pipeline is identical to the single-model [chat example](../chat) -- swapping a model call for a full agent harness changes nothing about the UI layer.
-
-## Setup
-
-The AI SDK harness packages are **experimental canary releases**; expect breaking changes.
-
-1. Give the sandbox provider Vercel credentials, either:
-   - Be logged in with the Vercel CLI (`vercel login`) and run the dev server in a terminal (the SDK only falls back to CLI auth when attached to a TTY). It uses or creates a `vercel-sandbox-default-project` in your personal scope.
-   - Or link a project and pull an OIDC token: `vercel link && vercel env pull`.
-
-2. Provide model credentials. `AI_GATEWAY_API_KEY` (Vercel AI Gateway) works for all three agents. Or use a provider key directly for the agent you run: `ANTHROPIC_API_KEY` (Claude Code) or `OPENAI_API_KEY` (Codex); Pi resolves credentials from the gateway.
-
-3. Optionally pin a model per agent: `CLAUDE_CODE_MODEL`, `CODEX_MODEL`, or `PI_MODEL` (each defaults to that runtime's own default).
-
-## Run
-
-```bash
-pnpm install
-pnpm dev
-```
-
-Then open `harness-chat-demo.json-render.localhost:1355`.
-
-Note: the first message in a chat boots a fresh sandbox, which takes a while; follow-up messages reuse it. "Start Over" destroys the server-side session and its sandbox; idle sessions are destroyed after 10 minutes.

examples/harness-chat/app/api/agent/route.ts

@@ -1,64 +0,0 @@
-import {
-  createUIMessageStream,
-  createUIMessageStreamResponse,
-  type UIMessage,
-} from "ai";
-import { pipeJsonRender } from "@json-render/core";
-import { getSession, dropSession } from "@/lib/agent";
-import { DEFAULT_AGENT_ID, isAgentId } from "@/lib/agents";
-
-// Harness turns are long: the agent boots a sandbox, edits files, and runs
-// commands before answering.
-export const maxDuration = 600;
-
-function lastUserText(messages: UIMessage[]): string | null {
-  for (let i = messages.length - 1; i >= 0; i--) {
-    const message = messages[i];
-    if (message?.role !== "user") continue;
-    const text = message.parts
-      .filter((part) => part.type === "text")
-      .map((part) => part.text)
-      .join("\n")
-      .trim();
-    return text.length > 0 ? text : null;
-  }
-  return null;
-}
-
-export async function POST(req: Request) {
-  const body = await req.json();
-  const chatId: string = body.id ?? "default";
-  const messages: UIMessage[] = body.messages ?? [];
-
-  const prompt = lastUserText(messages);
-  if (!prompt) {
-    return new Response(
-      JSON.stringify({ error: "a user message with text is required" }),
-      { status: 400, headers: { "Content-Type": "application/json" } },
-    );
-  }
-
-  // The agent is chosen on the first message and locked for the chat: an
-  // existing session ignores `body.agent` and keeps its original agent.
-  const requestedAgent = isAgentId(body.agent) ? body.agent : DEFAULT_AGENT_ID;
-
-  // The harness session owns its own conversation history, so each turn
-  // sends only the fresh user input -- not the whole transcript.
-  const { session, agent } = await getSession(chatId, requestedAgent);
-  const result = await agent.stream({ prompt, session });
-
-  const stream = createUIMessageStream({
-    execute: async ({ writer }) => {
-      writer.merge(pipeJsonRender(result.toUIMessageStream()));
-    },
-  });
-
-  return createUIMessageStreamResponse({ stream });
-}
-
-export async function DELETE(req: Request) {
-  const { searchParams } = new URL(req.url);
-  const chatId = searchParams.get("id") ?? "default";
-  dropSession(chatId);
-  return new Response(null, { status: 204 });
-}

examples/harness-chat/app/globals.css

@@ -1,161 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@source "../../../node_modules/streamdown/dist/*.js";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-}
-
-:root {
-  --radius: 0.625rem;
-
-  /* Restrained neutrals. Craft comes from type and spacing, not color. */
-  --background: oklch(0.994 0 0);
-  --foreground: oklch(0.205 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.205 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.973 0 0);
-  --muted-foreground: oklch(0.553 0 0);
-  --accent: oklch(0.968 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.585 0.2 27.3);
-  --border: oklch(0.917 0 0);
-  --input: oklch(0.917 0 0);
-  --ring: oklch(0.708 0 0);
-
-  /* Muted, functional data colors — used only when a chart names a tone. */
-  --chart-1: oklch(0.5 0.13 277);
-  --chart-2: oklch(0.6 0.12 162);
-  --chart-3: oklch(0.7 0.12 70);
-  --chart-4: oklch(0.58 0.12 248);
-}
-
-.dark {
-  --background: oklch(0.165 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.265 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.265 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.27 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.2);
-  --border: oklch(1 0 0 / 9%);
-  --input: oklch(1 0 0 / 13%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.62 0.13 277);
-  --chart-2: oklch(0.68 0.12 162);
-  --chart-3: oklch(0.76 0.12 70);
-  --chart-4: oklch(0.66 0.12 248);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* Map Tailwind's font tokens to Geist. next/font sets --font-geist-* on
-   <body>, so this must live on body (not :root, where those vars are
-   undefined) for `font-sans`/`font-mono` to resolve to Geist / Geist Mono. */
-body {
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-button {
-  cursor: pointer;
-}
-
-/* One restrained elevation step — a hairline, not a drop shadow. */
-.shadow-subtle {
-  box-shadow:
-    0 1px 1px oklch(0 0 0 / 0.04),
-    0 2px 6px -2px oklch(0 0 0 / 0.06);
-}
-
-/* Inline code in agent markdown gets a shaded pill. `:not(pre) > code` targets
-   only inline code, leaving fenced code blocks (Shiki) untouched. The tint is
-   derived from the muted-foreground so it reads in both light and dark mode. */
-.markdown :not(pre) > code {
-  border-radius: 0.375rem;
-  background-color: color-mix(in oklab, var(--muted-foreground) 16%, transparent);
-  padding: 0.1em 0.35em;
-  font-size: 0.85em;
-  font-family: var(--font-mono);
-}
-
-/* A bright band sweeps across dim text. `inline-block` is essential: it sizes
-   the gradient to the text itself, so the band actually passes over the words
-   (on a full-width block the band rarely reaches the short label). */
-@keyframes shimmer {
-  0% {
-    background-position: 100% 0;
-  }
-  100% {
-    background-position: 0% 0;
-  }
-}
-
-.animate-shimmer {
-  display: inline-block;
-  color: transparent;
-  background-image: linear-gradient(
-    90deg,
-    var(--muted-foreground) 0%,
-    var(--muted-foreground) 40%,
-    var(--foreground) 50%,
-    var(--muted-foreground) 60%,
-    var(--muted-foreground) 100%
-  );
-  background-size: 300% 100%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: shimmer 1.5s linear infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animate-shimmer {
-    animation: none;
-    color: var(--muted-foreground);
-    -webkit-text-fill-color: var(--muted-foreground);
-  }
-}

examples/harness-chat/app/layout.tsx

@@ -1,36 +0,0 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "streamdown/styles.css";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "json-render Harness Agent Example",
-  description:
-    "A coding agent harness (Claude Code) that reports its work as generative UI via json-render",
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}
-      >
-        {children}
-      </body>
-    </html>
-  );
-}

examples/harness-chat/app/page.tsx

@@ -1,583 +0,0 @@
-"use client";
-
-import { useCallback, useRef, useState } from "react";
-import { useChat } from "@ai-sdk/react";
-import { DefaultChatTransport, type UIMessage } from "ai";
-import {
-  SPEC_DATA_PART,
-  SPEC_DATA_PART_TYPE,
-  type SpecDataPart,
-} from "@json-render/core";
-import { useJsonRenderMessage } from "@json-render/react";
-import {
-  ArrowUp,
-  Bug,
-  ChevronRight,
-  FilePen,
-  FilePlus,
-  FileText,
-  FolderGit2,
-  FolderSearch,
-  FolderTree,
-  Gauge,
-  Globe,
-  Hammer,
-  ListChecks,
-  Loader2,
-  Search,
-  SquareChevronRight,
-  Wrench,
-  type LucideIcon,
-} from "lucide-react";
-import { Streamdown } from "streamdown";
-import { code } from "@streamdown/code";
-
-import { ReportRenderer } from "@/lib/render/renderer";
-import {
-  AGENT_IDS,
-  AGENTS,
-  type AgentId,
-  DEFAULT_AGENT_ID,
-} from "@/lib/agents";
-
-type AppDataParts = { [SPEC_DATA_PART]: SpecDataPart };
-type AppMessage = UIMessage<unknown, AppDataParts>;
-
-const transport = new DefaultChatTransport({ api: "/api/agent" });
-
-const SUGGESTIONS: Array<{
-  label: string;
-  description: string;
-  icon: LucideIcon;
-  prompt: string;
-}> = [
-  {
-    label: "Build & test a library",
-    description: "Scaffold a TS package with vitest and run the suite.",
-    icon: Hammer,
-    prompt:
-      "Scaffold a tiny TypeScript semver-parsing library with vitest tests, run the tests, and report the results.",
-  },
-  {
-    label: "Fix failing code",
-    description: "Plant a subtle bug, then debug it end to end.",
-    icon: Bug,
-    prompt:
-      "Create a small JS module with a subtle off-by-one bug and a failing test, then diagnose and fix it like a real debugging session.",
-  },
-  {
-    label: "Benchmark something",
-    description: "Measure two approaches and chart the numbers.",
-    icon: Gauge,
-    prompt:
-      "Write and run a quick benchmark comparing JSON.parse vs a streaming JSON parser on a 5MB file, and report the numbers as a bar chart.",
-  },
-  {
-    label: "Explore a repo",
-    description: "Clone a project and map out what each part does.",
-    icon: FolderGit2,
-    prompt:
-      "Clone github.com/vercel-labs/json-render, explore the package structure, and report what each package does.",
-  },
-];
-
-/** Per-tool icon + readable [running, done] labels (labels used for a11y). */
-const TOOL_META: Record<
-  string,
-  { icon: LucideIcon; labels: [string, string] }
-> = {
-  bash: {
-    icon: SquareChevronRight,
-    labels: ["Running command", "Ran command"],
-  },
-  read: { icon: FileText, labels: ["Reading file", "Read file"] },
-  write: { icon: FilePlus, labels: ["Writing file", "Wrote file"] },
-  edit: { icon: FilePen, labels: ["Editing file", "Edited file"] },
-  grep: { icon: Search, labels: ["Searching code", "Searched code"] },
-  glob: { icon: FolderSearch, labels: ["Listing files", "Listed files"] },
-  ls: { icon: FolderTree, labels: ["Listing directory", "Listed directory"] },
-  webSearch: { icon: Globe, labels: ["Searching the web", "Searched the web"] },
-  WebFetch: { icon: Globe, labels: ["Fetching page", "Fetched page"] },
-  TodoWrite: { icon: ListChecks, labels: ["Updating plan", "Updated plan"] },
-};
-
-/** Pull a one-line human hint out of a tool input (command, path, query). */
-function toolInputHint(input: unknown): string | null {
-  if (input == null || typeof input !== "object") return null;
-  const record = input as Record<string, unknown>;
-  const hint =
-    record.command ?? record.file_path ?? record.pattern ?? record.query;
-  return typeof hint === "string" ? hint : null;
-}
-
-function ToolCallDisplay({
-  toolName,
-  state,
-  input,
-  output,
-}: {
-  toolName: string;
-  state: string;
-  input: unknown;
-  output: unknown;
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const isLoading =
-    state !== "output-available" &&
-    state !== "output-error" &&
-    state !== "output-denied";
-  const meta = TOOL_META[toolName];
-  const Icon = meta?.icon ?? Wrench;
-  const label = meta ? meta.labels[isLoading ? 0 : 1] : toolName;
-  const hint = toolInputHint(input);
-
-  return (
-    <div className="group rounded-lg border bg-card px-3 py-2 text-sm shadow-subtle">
-      <button
-        type="button"
-        title={label}
-        aria-label={label}
-        className="flex w-full max-w-full items-center gap-2 text-left"
-        onClick={() => setExpanded((e) => !e)}
-      >
-        <Icon
-          className={`size-3.5 shrink-0 text-muted-foreground ${
-            isLoading && !hint ? "animate-pulse" : ""
-          }`}
-          strokeWidth={1.75}
-        />
-        {hint && (
-          <code
-            className={`truncate font-mono text-xs text-muted-foreground/70 ${
-              isLoading ? "animate-shimmer" : ""
-            }`}
-          >
-            {hint}
-          </code>
-        )}
-        {!isLoading && output != null && (
-          <ChevronRight
-            className={`ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground/40 transition-transform group-hover:text-muted-foreground ${expanded ? "rotate-90" : ""}`}
-          />
-        )}
-      </button>
-      {expanded && !isLoading && output != null && (
-        <pre className="mt-2 max-h-64 overflow-auto border-t pt-2 text-xs text-muted-foreground whitespace-pre-wrap break-all">
-          {typeof output === "string"
-            ? output
-            : JSON.stringify(output, null, 2)}
-        </pre>
-      )}
-    </div>
-  );
-}
-
-/**
- * Monochrome agent marks. Claude (svgl) and OpenAI (svgl) are single-path
- * brand glyphs forced to `currentColor`; Pi uses its namesake π since it has
- * no published logo. All inherit the surrounding text color.
- */
-type MarkProps = { className?: string };
-
-function ClaudeMark({ className }: MarkProps) {
-  return (
-    <svg viewBox="0 0 256 257" className={className} aria-hidden="true">
-      <path
-        fill="currentColor"
-        d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z"
-      />
-    </svg>
-  );
-}
-
-function OpenAIMark({ className }: MarkProps) {
-  return (
-    <svg viewBox="0 0 256 260" className={className} aria-hidden="true">
-      <path
-        fill="currentColor"
-        d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z"
-      />
-    </svg>
-  );
-}
-
-function PiMark({ className }: MarkProps) {
-  // pi.dev/logo-auto.svg — blocky "Pi" mark. The viewBox is padded a little
-  // past the mark's bounds so it reads slightly smaller than the other marks.
-  return (
-    <svg
-      viewBox="120 120 560 560"
-      className={className}
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"
-      />
-      <path d="M517.36 400H634.72V634.72H517.36Z" />
-    </svg>
-  );
-}
-
-const AGENT_MARKS: Record<AgentId, (props: MarkProps) => React.ReactNode> = {
-  "claude-code": ClaudeMark,
-  codex: OpenAIMark,
-  pi: PiMark,
-};
-
-/** Segmented control for picking the coding agent before a chat starts. */
-function AgentSelector({
-  value,
-  onChange,
-}: {
-  value: AgentId;
-  onChange: (id: AgentId) => void;
-}) {
-  return (
-    <div className="inline-flex items-center gap-0.5 rounded-lg border bg-card p-0.5">
-      {AGENT_IDS.map((id) => {
-        const Mark = AGENT_MARKS[id];
-        return (
-          <button
-            key={id}
-            type="button"
-            onClick={() => onChange(id)}
-            aria-pressed={value === id}
-            className={`inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
-              value === id
-                ? "bg-foreground text-background"
-                : "text-muted-foreground hover:text-foreground"
-            }`}
-          >
-            <Mark className="h-3.5 w-3.5" />
-            {AGENTS[id].label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
-/** Shimmering status line shown while we wait for the agent to produce output. */
-function PendingLine({ label }: { label: string }) {
-  return (
-    <div className="text-sm text-muted-foreground animate-shimmer">{label}</div>
-  );
-}
-
-function MessageBubble({
-  message,
-  isLast,
-  isStreaming,
-  pendingLabel,
-}: {
-  message: AppMessage;
-  isLast: boolean;
-  isStreaming: boolean;
-  pendingLabel: string;
-}) {
-  const { spec, text, hasSpec } = useJsonRenderMessage(message.parts);
-
-  if (message.role === "user") {
-    return (
-      <div className="flex justify-end">
-        <div className="max-w-[85%] rounded-2xl rounded-tr-sm bg-foreground px-3.5 py-2 text-sm leading-relaxed whitespace-pre-wrap text-background">
-          {text}
-        </div>
-      </div>
-    );
-  }
-
-  // Ordered segments: adjacent text merged, adjacent tool calls grouped,
-  // the spec rendered inline where the agent emitted it.
-  const segments: Array<
-    | { kind: "text"; text: string }
-    | {
-        kind: "tools";
-        tools: Array<{
-          toolCallId: string;
-          toolName: string;
-          state: string;
-          input: unknown;
-          output: unknown;
-        }>;
-      }
-    | { kind: "spec" }
-  > = [];
-  let specInserted = false;
-
-  for (const part of message.parts) {
-    if (part.type === "text") {
-      if (!part.text.trim()) continue;
-      const last = segments[segments.length - 1];
-      if (last?.kind === "text") last.text += part.text;
-      else segments.push({ kind: "text", text: part.text });
-    } else if (part.type.startsWith("tool-")) {
-      const tp = part as {
-        type: string;
-        toolCallId: string;
-        state: string;
-        input?: unknown;
-        output?: unknown;
-      };
-      const tool = {
-        toolCallId: tp.toolCallId,
-        toolName: tp.type.replace(/^tool-/, ""),
-        state: tp.state,
-        input: tp.input,
-        output: tp.output,
-      };
-      const last = segments[segments.length - 1];
-      if (last?.kind === "tools") last.tools.push(tool);
-      else segments.push({ kind: "tools", tools: [tool] });
-    } else if (part.type === SPEC_DATA_PART_TYPE && !specInserted) {
-      segments.push({ kind: "spec" });
-      specInserted = true;
-    }
-  }
-
-  const showLoader = isLast && isStreaming && segments.length === 0 && !hasSpec;
-
-  return (
-    <div className="flex w-full flex-col gap-3">
-      {segments.map((seg, i) => {
-        if (seg.kind === "text") {
-          return (
-            <div key={`text-${i}`} className="markdown text-sm leading-relaxed">
-              <Streamdown
-                plugins={{ code }}
-                animated={isLast && isStreaming && i === segments.length - 1}
-              >
-                {seg.text}
-              </Streamdown>
-            </div>
-          );
-        }
-        if (seg.kind === "spec") {
-          if (!hasSpec) return null;
-          return (
-            <div key="spec" className="w-full">
-              <ReportRenderer spec={spec} loading={isLast && isStreaming} />
-            </div>
-          );
-        }
-        return (
-          <div key={`tools-${i}`} className="flex flex-col gap-1.5">
-            {seg.tools.map((t) => (
-              <ToolCallDisplay
-                key={t.toolCallId}
-                toolName={t.toolName}
-                state={t.state}
-                input={t.input}
-                output={t.output}
-              />
-            ))}
-          </div>
-        );
-      })}
-
-      {showLoader && <PendingLine label={pendingLabel} />}
-
-      {hasSpec && !specInserted && (
-        <div className="w-full">
-          <ReportRenderer spec={spec} loading={isLast && isStreaming} />
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default function HarnessChatPage() {
-  const [input, setInput] = useState("");
-  const [agentId, setAgentId] = useState<AgentId>(DEFAULT_AGENT_ID);
-  const [chatId, setChatId] = useState(() => crypto.randomUUID());
-  const [isResetting, setIsResetting] = useState(false);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  const { messages, sendMessage, setMessages, status, error, id, stop } =
-    useChat<AppMessage>({ transport, id: chatId });
-
-  const isStreaming = status === "streaming" || status === "submitted";
-  const isBusy = isStreaming || isResetting;
-
-  const handleSubmit = useCallback(
-    async (text?: string) => {
-      const message = text || input;
-      if (!message.trim() || isBusy) return;
-      setInput("");
-      // The server locks the agent to the chat on the first message; sending
-      // it every turn is harmless and keeps follow-ups consistent.
-      await sendMessage({ text: message.trim() }, { body: { agent: agentId } });
-    },
-    [input, isBusy, sendMessage, agentId],
-  );
-
-  const handleClear = useCallback(async () => {
-    if (isResetting) return;
-    setIsResetting(true);
-    stop();
-
-    // Drop the server-side harness session (and its sandbox) for this chat.
-    try {
-      await fetch(`/api/agent?id=${encodeURIComponent(id)}`, {
-        method: "DELETE",
-      });
-    } finally {
-      setMessages([]);
-      setChatId(crypto.randomUUID());
-      setInput("");
-      setIsResetting(false);
-      inputRef.current?.focus();
-    }
-  }, [id, isResetting, setMessages, stop]);
-
-  const isEmpty = messages.length === 0;
-
-  return (
-    <div className="flex h-screen flex-col overflow-hidden">
-      {/* The header only appears once a chat has started; the first screen is
-          headerless so the brand title carries it. */}
-      {!isEmpty && (
-        <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center justify-between border-b bg-background/80 px-5 backdrop-blur-md">
-          {/* Left: active agent */}
-          {(() => {
-            const Mark = AGENT_MARKS[agentId];
-            return (
-              <span className="flex items-center gap-1.5 text-sm text-muted-foreground">
-                <Mark className="h-3.5 w-3.5" />
-                {AGENTS[agentId].label}
-              </span>
-            );
-          })()}
-          {/* Center: brand, absolutely centered so side widths can't shift it */}
-          <h1 className="pointer-events-none absolute left-1/2 -translate-x-1/2 text-sm font-medium tracking-tight whitespace-nowrap text-muted-foreground">
-            AI SDK <span className="font-mono">HarnessAgent</span>
-            <span className="mx-1.5 font-normal">+</span>
-            <span className="font-mono">json-render</span>
-          </h1>
-          {/* Right: reset */}
-          <button
-            onClick={handleClear}
-            disabled={isResetting}
-            className="-mr-1.5 rounded-md px-2.5 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            Start over
-          </button>
-        </header>
-      )}
-
-      <main className="flex flex-1 flex-col overflow-auto">
-        {isEmpty ? (
-          <div className="flex flex-1 flex-col items-center justify-center px-6">
-            <div className="w-full max-w-3xl">
-              <div className="space-y-3">
-                <h2 className="text-3xl font-semibold tracking-tight">
-                  AI SDK <span className="font-mono">HarnessAgent</span>
-                  <span className="mx-1.5 font-normal text-muted-foreground">
-                    +
-                  </span>
-                  <span className="font-mono">json-render</span>
-                </h2>
-                <p className="max-w-md text-[15px] leading-relaxed text-muted-foreground">
-                  A coding agent works in a live sandbox, then reports back as
-                  rendered UI — steps, diffs, terminal output, tests, and charts
-                  — instead of a wall of markdown.
-                </p>
-              </div>
-              <div className="mt-8 grid grid-cols-1 gap-px overflow-hidden rounded-xl border bg-border sm:grid-cols-2">
-                {SUGGESTIONS.map((s) => {
-                  const Icon = s.icon;
-                  return (
-                    <button
-                      key={s.label}
-                      onClick={() => handleSubmit(s.prompt)}
-                      disabled={isBusy}
-                      className="group flex items-start gap-3 bg-card p-4 text-left transition-colors hover:bg-accent"
-                    >
-                      <Icon
-                        className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground"
-                        strokeWidth={1.75}
-                      />
-                      <span className="min-w-0 space-y-0.5">
-                        <span className="block text-sm font-medium tracking-tight">
-                          {s.label}
-                        </span>
-                        <span className="block text-[13px] leading-snug text-muted-foreground">
-                          {s.description}
-                        </span>
-                      </span>
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className="mx-auto w-full max-w-3xl space-y-6 px-6 py-6">
-            {messages.map((message, index) => (
-              <MessageBubble
-                key={message.id}
-                message={message}
-                isLast={index === messages.length - 1}
-                isStreaming={isStreaming}
-                pendingLabel={index <= 1 ? "Starting sandbox…" : "Working…"}
-              />
-            ))}
-            {isStreaming && messages[messages.length - 1]?.role === "user" && (
-              <PendingLine
-                label={messages.length <= 1 ? "Starting sandbox…" : "Working…"}
-              />
-            )}
-            {error && (
-              <div className="rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive">
-                {error.message}
-              </div>
-            )}
-          </div>
-        )}
-      </main>
-
-      <div className="shrink-0 px-6 pb-5">
-        {isEmpty && (
-          <div className="mx-auto mb-2.5 flex max-w-3xl items-center gap-2">
-            <span className="text-xs text-muted-foreground">Agent</span>
-            <AgentSelector value={agentId} onChange={setAgentId} />
-          </div>
-        )}
-        <div className="group relative mx-auto max-w-3xl rounded-xl border bg-card shadow-subtle transition-colors focus-within:border-ring">
-          <textarea
-            ref={inputRef}
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault();
-                handleSubmit();
-              }
-            }}
-            placeholder={
-              isEmpty
-                ? "Scaffold a TypeScript library and run its tests…"
-                : "Ask a follow-up…"
-            }
-            rows={2}
-            className="w-full resize-none bg-transparent px-3.5 py-3 pr-12 text-sm leading-relaxed placeholder:text-muted-foreground focus-visible:outline-none"
-            autoFocus
-          />
-          <button
-            onClick={() => handleSubmit()}
-            disabled={!input.trim() || isBusy}
-            className="absolute right-2.5 bottom-2.5 flex h-7 w-7 items-center justify-center rounded-lg bg-foreground text-background transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-25"
-          >
-            {isBusy ? (
-              <Loader2 className="h-3.5 w-3.5 animate-spin" />
-            ) : (
-              <ArrowUp className="h-3.5 w-3.5" strokeWidth={2.25} />
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

examples/harness-chat/eslint.config.js

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

examples/harness-chat/lib/agent.ts

@@ -1,161 +0,0 @@
-import {
-  HarnessAgent,
-  type HarnessAgentAdapter,
-  type HarnessAgentSession,
-} from "@ai-sdk/harness/agent";
-import { createClaudeCode } from "@ai-sdk/harness-claude-code";
-import { createCodex } from "@ai-sdk/harness-codex";
-import { createPi } from "@ai-sdk/harness-pi";
-import { createVercelSandbox } from "@ai-sdk/sandbox-vercel";
-import { agentReportCatalog } from "./render/catalog";
-import { type AgentId } from "./agents";
-
-const AGENT_INSTRUCTIONS = `You are a coding agent running inside a fresh Linux sandbox with Node.js available. The user gives you software tasks; you do the work with your tools (bash, file edits, web search), then report back.
-
-REPORTING:
-Your chat output is rendered in a web UI that understands a JSON component spec. After finishing the work for a turn:
-1. Write one or two short conversational sentences about the outcome.
-2. Then output a UI report as a JSONL spec wrapped in a \`\`\`spec fence.
-
-Make the report reflect what actually happened, drawing from your real session:
-- Steps for the plan you executed (statuses: done/error; use active/pending only if work remains).
-- FileChange entries for files you created, modified, or deleted.
-- Terminal for important commands you ran and their real output (trim long output).
-- TestResults when you ran a test suite.
-- Metric for headline numbers (files changed, tests passed, duration).
-- BarChart to compare numbers across labeled categories (e.g. bundle size per module, benchmark per case).
-- LineChart for a number that changes across an ordered sequence (e.g. coverage per commit, latency over runs).
-- CodeBlock for the key snippet worth showing, with the file path as title.
-- Callout for risks, caveats, or suggested follow-ups.
-- Group sections with Card; never nest Cards.
-
-Never invent results. If something failed, show it (error step, non-zero exit, failed tests) and say what you would try next.
-
-Never use emojis -- not in prose, headings, labels, callouts, or any text field. The UI components supply their own icons.
-
-${agentReportCatalog.prompt({
-  mode: "inline",
-  customRules: [
-    "Keep reports compact and information-dense; the UI renders inside a chat thread.",
-    "Prefer Grid with columns='2' or '3' for Metric rows.",
-    "Use real command output captured during the session in Terminal components.",
-    "Never put emojis in any text field; the components already provide icons.",
-  ],
-})}`;
-
-const gatewayKey = process.env.AI_GATEWAY_API_KEY;
-
-// Each agent runs in its own fresh Node sandbox.
-const sandbox = () => createVercelSandbox({ runtime: "node24", ports: [3000] });
-
-/**
- * Build the HarnessAgent for an agent id. Both adapters need a `as unknown`
- * cast on current canaries: they pin zod@3 while the rest of the tree resolves
- * zod@4, so their HarnessV1 type carries a different provider-utils instance.
- * Type-level only.
- */
-function createAgent(id: AgentId): HarnessAgent {
-  if (id === "codex") {
-    const auth = gatewayKey
-      ? { gateway: { apiKey: gatewayKey } }
-      : process.env.OPENAI_API_KEY
-        ? { openai: { apiKey: process.env.OPENAI_API_KEY } }
-        : undefined;
-    return new HarnessAgent({
-      harness: createCodex({
-        auth,
-        model: process.env.CODEX_MODEL,
-      }) as unknown as HarnessAgentAdapter,
-      sandbox: sandbox(),
-      instructions: AGENT_INSTRUCTIONS,
-    });
-  }
-
-  if (id === "pi") {
-    // Pi reads gateway credentials from process.env when auth is omitted; we
-    // pass it explicitly when set for parity with the other agents.
-    return new HarnessAgent({
-      harness: createPi({
-        auth: gatewayKey ? { gateway: { apiKey: gatewayKey } } : undefined,
-        model: process.env.PI_MODEL,
-      }) as unknown as HarnessAgentAdapter,
-      sandbox: sandbox(),
-      instructions: AGENT_INSTRUCTIONS,
-    });
-  }
-
-  const auth = gatewayKey
-    ? { gateway: { apiKey: gatewayKey } }
-    : process.env.ANTHROPIC_API_KEY
-      ? { anthropic: { apiKey: process.env.ANTHROPIC_API_KEY } }
-      : undefined;
-  return new HarnessAgent({
-    harness: createClaudeCode({
-      auth,
-      model: process.env.CLAUDE_CODE_MODEL,
-    }) as unknown as HarnessAgentAdapter,
-    sandbox: sandbox(),
-    instructions: AGENT_INSTRUCTIONS,
-  });
-}
-
-// One HarnessAgent instance per agent id, built lazily and reused.
-const agents = new Map<AgentId, HarnessAgent>();
-function getAgent(id: AgentId): HarnessAgent {
-  let agent = agents.get(id);
-  if (!agent) {
-    agent = createAgent(id);
-    agents.set(id, agent);
-  }
-  return agent;
-}
-
-/**
- * One live harness session per chat. A session owns the sandbox and the
- * runtime's own conversation history, so follow-up messages in the same chat
- * keep working against the same workspace. The session is bound to the agent
- * that created it, so the chosen agent is locked for the life of the chat.
- *
- * In-memory only -- fine for a dev-server example. A production app would
- * persist `session.detach()` state and resume by sessionId instead.
- */
-type SessionEntry = {
-  session: HarnessAgentSession;
-  agent: HarnessAgent;
-  agentId: AgentId;
-  expireTimer: NodeJS.Timeout;
-};
-
-const sessions = new Map<string, SessionEntry>();
-
-const SESSION_IDLE_MS = 10 * 60 * 1000;
-
-export async function getSession(
-  chatId: string,
-  agentId: AgentId,
-): Promise<SessionEntry> {
-  const existing = sessions.get(chatId);
-  if (existing) {
-    existing.expireTimer.refresh();
-    return existing;
-  }
-
-  const agent = getAgent(agentId);
-  const session = await agent.createSession();
-  const expireTimer = setTimeout(() => {
-    sessions.delete(chatId);
-    session.destroy().catch(() => {});
-  }, SESSION_IDLE_MS);
-  expireTimer.unref?.();
-  const entry: SessionEntry = { session, agent, agentId, expireTimer };
-  sessions.set(chatId, entry);
-  return entry;
-}
-
-export function dropSession(chatId: string): void {
-  const entry = sessions.get(chatId);
-  if (!entry) return;
-  clearTimeout(entry.expireTimer);
-  sessions.delete(chatId);
-  entry.session.destroy().catch(() => {});
-}

examples/harness-chat/lib/agents.ts

@@ -1,21 +0,0 @@
-/**
- * Agent catalog — client-safe metadata shared by the UI selector and the
- * server route. Kept free of server-only imports (harness/sandbox SDKs) so it
- * can be imported from client components without leaking those into the bundle.
- * The actual harness construction lives in `lib/agent.ts`.
- */
-export const AGENTS = {
-  "claude-code": { label: "Claude Code" },
-  codex: { label: "Codex" },
-  pi: { label: "Pi" },
-} as const;
-
-export type AgentId = keyof typeof AGENTS;
-
-export const AGENT_IDS = Object.keys(AGENTS) as AgentId[];
-
-export const DEFAULT_AGENT_ID: AgentId = "claude-code";
-
-export function isAgentId(value: unknown): value is AgentId {
-  return typeof value === "string" && value in AGENTS;
-}

examples/harness-chat/lib/render/catalog.ts

@@ -1,226 +0,0 @@
-import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/react/schema";
-import { z } from "zod";
-
-/**
- * json-render + HarnessAgent Example Catalog
- *
- * Components for a coding agent (Claude Code running in a Vercel Sandbox)
- * to report its work as structured UI: plans, commands, file changes,
- * test results, and summaries.
- */
-export const agentReportCatalog = defineCatalog(schema, {
-  components: {
-    Stack: {
-      props: z.object({
-        direction: z.enum(["horizontal", "vertical"]).nullable(),
-        gap: z.enum(["sm", "md", "lg"]).nullable(),
-      }),
-      slots: ["default"],
-      description: "Flex container for laying out children",
-      example: { direction: "vertical", gap: "md" },
-    },
-
-    Grid: {
-      props: z.object({
-        columns: z.enum(["2", "3"]).nullable(),
-      }),
-      slots: ["default"],
-      description: "Multi-column grid layout",
-      example: { columns: "2" },
-    },
-
-    Card: {
-      props: z.object({
-        title: z.string().nullable(),
-        description: z.string().nullable(),
-      }),
-      slots: ["default"],
-      description: "Container card grouping related content, never nested",
-      example: { title: "Test results" },
-    },
-
-    Heading: {
-      props: z.object({
-        text: z.string(),
-        level: z.enum(["1", "2", "3"]).nullable(),
-      }),
-      description: "Section heading",
-      example: { text: "What I changed", level: "2" },
-    },
-
-    Text: {
-      props: z.object({
-        content: z.string(),
-        muted: z.boolean().nullable(),
-      }),
-      description: "Paragraph of text",
-      example: { content: "All tests pass after the fix." },
-    },
-
-    Badge: {
-      props: z.object({
-        label: z.string(),
-        tone: z.enum(["neutral", "success", "warning", "error"]).nullable(),
-      }),
-      description: "Small status label",
-      example: { label: "passing", tone: "success" },
-    },
-
-    Callout: {
-      props: z.object({
-        title: z.string().nullable(),
-        content: z.string(),
-        tone: z.enum(["info", "success", "warning", "error"]).nullable(),
-      }),
-      description: "Highlighted note for key takeaways, risks, or follow-ups",
-      example: {
-        title: "Follow-up",
-        content: "Consider adding a regression test for the edge case.",
-        tone: "info",
-      },
-    },
-
-    Metric: {
-      props: z.object({
-        label: z.string(),
-        value: z.string(),
-        detail: z.string().nullable(),
-      }),
-      description: "Key number with a label (files changed, duration, etc.)",
-      example: { label: "Files changed", value: "4", detail: "+120 / -36" },
-    },
-
-    Steps: {
-      props: z.object({
-        items: z.array(
-          z.object({
-            title: z.string(),
-            detail: z.string().nullable(),
-            status: z.enum(["done", "active", "pending", "error"]),
-          }),
-        ),
-      }),
-      description: "Ordered list of work steps with per-step status",
-      example: {
-        items: [
-          { title: "Reproduce the failure", detail: null, status: "done" },
-          { title: "Fix the off-by-one", detail: null, status: "active" },
-        ],
-      },
-    },
-
-    FileChange: {
-      props: z.object({
-        path: z.string(),
-        kind: z.enum(["created", "modified", "deleted"]),
-        summary: z.string().nullable(),
-        additions: z.number().nullable(),
-        deletions: z.number().nullable(),
-      }),
-      description: "One changed file with what was done to it",
-      example: {
-        path: "src/parser.ts",
-        kind: "modified",
-        summary: "Handle empty input in tokenize()",
-        additions: 12,
-        deletions: 3,
-      },
-    },
-
-    CodeBlock: {
-      props: z.object({
-        code: z.string(),
-        language: z.string().nullable(),
-        title: z.string().nullable(),
-      }),
-      description: "Syntax-highlighted code snippet",
-      example: {
-        code: "export const sum = (a: number, b: number) => a + b;",
-        language: "typescript",
-        title: "src/sum.ts",
-      },
-    },
-
-    Terminal: {
-      props: z.object({
-        command: z.string(),
-        output: z.string().nullable(),
-        exitCode: z.number().nullable(),
-      }),
-      description: "A command that was run and its output",
-      example: {
-        command: "pnpm test",
-        output: "12 passed, 0 failed",
-        exitCode: 0,
-      },
-    },
-
-    TestResults: {
-      props: z.object({
-        passed: z.number(),
-        failed: z.number(),
-        skipped: z.number().nullable(),
-        failures: z
-          .array(
-            z.object({
-              name: z.string(),
-              message: z.string(),
-            }),
-          )
-          .nullable(),
-      }),
-      description: "Test run summary with optional failure details",
-      example: { passed: 11, failed: 1, skipped: 0, failures: null },
-    },
-
-    BarChart: {
-      props: z.object({
-        title: z.string().nullable(),
-        data: z.array(
-          z.object({
-            label: z.string(),
-            value: z.number(),
-          }),
-        ),
-        unit: z.string().nullable(),
-      }),
-      description:
-        "Bar chart comparing labeled numeric values (e.g. bundle size per module, benchmark per case). Pass already-computed numbers; do not aggregate raw data.",
-      example: {
-        title: "Build time by package",
-        data: [
-          { label: "core", value: 1.2 },
-          { label: "react", value: 2.8 },
-          { label: "cli", value: 0.6 },
-        ],
-        unit: "s",
-      },
-    },
-
-    LineChart: {
-      props: z.object({
-        title: z.string().nullable(),
-        data: z.array(
-          z.object({
-            label: z.string(),
-            value: z.number(),
-          }),
-        ),
-        unit: z.string().nullable(),
-      }),
-      description:
-        "Line chart showing a numeric value as it changes across an ordered sequence (e.g. coverage per commit, latency over runs). Points are connected in array order.",
-      example: {
-        title: "Coverage over commits",
-        data: [
-          { label: "a1b2", value: 71 },
-          { label: "c3d4", value: 78 },
-          { label: "e5f6", value: 84 },
-        ],
-        unit: "%",
-      },
-    },
-  },
-  actions: {},
-});

examples/harness-chat/lib/render/registry.tsx

@@ -1,475 +0,0 @@
-"use client";
-
-import { defineRegistry } from "@json-render/react";
-import {
-  AlertTriangle,
-  Check,
-  CircleDashed,
-  FileMinus,
-  FilePen,
-  FilePlus,
-  Info,
-  Loader2,
-  TriangleAlert,
-  X,
-} from "lucide-react";
-
-import { agentReportCatalog } from "./catalog";
-
-const toneStyles: Record<string, string> = {
-  neutral: "bg-muted text-muted-foreground",
-  success:
-    "bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300",
-  warning: "bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300",
-  error: "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300",
-};
-
-const calloutStyles: Record<string, string> = {
-  info: "border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950/40",
-  success:
-    "border-emerald-200 bg-emerald-50 dark:border-emerald-900 dark:bg-emerald-950/40",
-  warning:
-    "border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/40",
-  error: "border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/40",
-};
-
-const calloutIcons = {
-  info: Info,
-  success: Check,
-  warning: TriangleAlert,
-  error: AlertTriangle,
-} as const;
-
-const stepIcons = {
-  done: <Check className="h-3.5 w-3.5 text-emerald-600" />,
-  active: <Loader2 className="h-3.5 w-3.5 animate-spin text-blue-600" />,
-  pending: <CircleDashed className="h-3.5 w-3.5 text-muted-foreground" />,
-  error: <X className="h-3.5 w-3.5 text-red-600" />,
-} as const;
-
-const fileChangeMeta = {
-  created: { icon: FilePlus, label: "created", className: "text-emerald-600" },
-  modified: { icon: FilePen, label: "modified", className: "text-blue-600" },
-  deleted: { icon: FileMinus, label: "deleted", className: "text-red-600" },
-} as const;
-
-type ChartPoint = { label: string; value: number };
-
-// Charts are intentionally monochrome — they ink in the foreground color.
-const CHART_COLOR = "var(--foreground)";
-
-/** Format a value compactly, appending an optional unit. */
-function formatChartValue(value: number, unit: string | null): string {
-  const rounded =
-    Math.abs(value) >= 100 || Number.isInteger(value)
-      ? Math.round(value).toString()
-      : value.toFixed(1);
-  return unit ? `${rounded}${unit}` : rounded;
-}
-
-function ChartFrame({
-  title,
-  children,
-}: {
-  title: string | null;
-  children: React.ReactNode;
-}) {
-  // No border/background of its own: a chart is content, not a card. This
-  // keeps it from looking like a card nested inside a Card.
-  return (
-    <div>
-      {title && (
-        <div className="mb-2.5 text-xs font-medium text-muted-foreground">
-          {title}
-        </div>
-      )}
-      {children}
-    </div>
-  );
-}
-
-export const { registry } = defineRegistry(agentReportCatalog, {
-  actions: {},
-  components: {
-    Stack: ({ props, children }) => (
-      <div
-        className={`flex ${
-          props.direction === "horizontal"
-            ? "flex-row flex-wrap items-start"
-            : "flex-col"
-        } ${{ sm: "gap-2", md: "gap-4", lg: "gap-6" }[props.gap ?? "md"]}`}
-      >
-        {children}
-      </div>
-    ),
-
-    Grid: ({ props, children }) => (
-      <div
-        className={`grid gap-4 ${
-          props.columns === "3" ? "sm:grid-cols-3" : "sm:grid-cols-2"
-        }`}
-      >
-        {children}
-      </div>
-    ),
-
-    Card: ({ props, children }) => (
-      <div className="rounded-2xl border border-border/70 bg-card/80 p-5 shadow-elevated backdrop-blur-sm">
-        {props.title && (
-          <h3 className="text-sm font-semibold tracking-tight mb-1">
-            {props.title}
-          </h3>
-        )}
-        {props.description && (
-          <p className="text-sm text-muted-foreground mb-3">
-            {props.description}
-          </p>
-        )}
-        <div className="flex flex-col gap-3">{children}</div>
-      </div>
-    ),
-
-    Heading: ({ props }) => {
-      const sizes = { "1": "text-xl", "2": "text-lg", "3": "text-base" };
-      return (
-        <div className={`font-semibold ${sizes[props.level ?? "2"]}`}>
-          {props.text}
-        </div>
-      );
-    },
-
-    Text: ({ props }) => (
-      <p
-        className={`text-sm leading-relaxed ${
-          props.muted ? "text-muted-foreground" : ""
-        }`}
-      >
-        {props.content}
-      </p>
-    ),
-
-    Badge: ({ props }) => (
-      <span
-        className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
-          toneStyles[props.tone ?? "neutral"]
-        }`}
-      >
-        {props.label}
-      </span>
-    ),
-
-    Callout: ({ props }) => {
-      const tone = props.tone ?? "info";
-      const Icon = calloutIcons[tone];
-      return (
-        <div className={`rounded-lg border px-3 py-2.5 ${calloutStyles[tone]}`}>
-          <div className="flex gap-2">
-            <Icon className="h-4 w-4 mt-0.5 shrink-0" />
-            <div className="text-sm">
-              {props.title && (
-                <span className="font-medium">{props.title}: </span>
-              )}
-              {props.content}
-            </div>
-          </div>
-        </div>
-      );
-    },
-
-    Metric: ({ props }) => (
-      <div className="rounded-xl border border-border/70 bg-gradient-to-b from-card to-muted/40 px-3.5 py-3">
-        <div className="text-xs font-medium text-muted-foreground">
-          {props.label}
-        </div>
-        <div className="mt-0.5 text-2xl font-semibold tracking-tight tabular-nums">
-          {props.value}
-        </div>
-        {props.detail && (
-          <div className="text-xs text-muted-foreground tabular-nums">
-            {props.detail}
-          </div>
-        )}
-      </div>
-    ),
-
-    Steps: ({ props }) => (
-      <ol className="flex flex-col gap-2">
-        {props.items.map((item, i) => (
-          <li key={i} className="flex items-start gap-2.5 text-sm">
-            <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border bg-card">
-              {stepIcons[item.status]}
-            </span>
-            <span>
-              <span
-                className={
-                  item.status === "pending" ? "text-muted-foreground" : ""
-                }
-              >
-                {item.title}
-              </span>
-              {item.detail && (
-                <span className="block text-xs text-muted-foreground">
-                  {item.detail}
-                </span>
-              )}
-            </span>
-          </li>
-        ))}
-      </ol>
-    ),
-
-    FileChange: ({ props }) => {
-      const meta = fileChangeMeta[props.kind];
-      const Icon = meta.icon;
-      return (
-        <div className="flex items-start gap-2.5 rounded-lg border bg-card px-3 py-2">
-          <Icon className={`h-4 w-4 mt-0.5 shrink-0 ${meta.className}`} />
-          <div className="min-w-0 text-sm">
-            <div className="flex flex-wrap items-center gap-2">
-              <code className="font-mono text-xs">{props.path}</code>
-              <span className={`text-xs ${meta.className}`}>{meta.label}</span>
-              {(props.additions != null || props.deletions != null) && (
-                <span className="text-xs tabular-nums">
-                  {props.additions != null && (
-                    <span className="text-emerald-600">
-                      +{props.additions}{" "}
-                    </span>
-                  )}
-                  {props.deletions != null && (
-                    <span className="text-red-600">-{props.deletions}</span>
-                  )}
-                </span>
-              )}
-            </div>
-            {props.summary && (
-              <div className="text-xs text-muted-foreground">
-                {props.summary}
-              </div>
-            )}
-          </div>
-        </div>
-      );
-    },
-
-    CodeBlock: ({ props }) => (
-      <div className="overflow-hidden rounded-lg border">
-        {props.title && (
-          <div className="border-b bg-muted/50 px-3 py-1.5 font-mono text-xs text-muted-foreground">
-            {props.title}
-          </div>
-        )}
-        <pre className="overflow-x-auto bg-card p-3 text-xs leading-relaxed">
-          <code>{props.code}</code>
-        </pre>
-      </div>
-    ),
-
-    Terminal: ({ props }) => (
-      <div className="overflow-hidden rounded-lg bg-zinc-950 text-zinc-100">
-        <div className="flex items-center justify-between gap-2 border-b border-zinc-800 px-3 py-1.5">
-          <code className="font-mono text-xs text-zinc-300">
-            $ {props.command}
-          </code>
-          {props.exitCode != null && (
-            <span
-              className={`text-xs tabular-nums ${
-                props.exitCode === 0 ? "text-emerald-400" : "text-red-400"
-              }`}
-            >
-              exit {props.exitCode}
-            </span>
-          )}
-        </div>
-        {props.output && (
-          <pre className="max-h-64 overflow-auto p-3 font-mono text-xs leading-relaxed text-zinc-300 whitespace-pre-wrap">
-            {props.output}
-          </pre>
-        )}
-      </div>
-    ),
-
-    TestResults: ({ props }) => (
-      <div className="flex flex-col gap-2">
-        <div className="flex gap-2">
-          <span
-            className={`rounded-md px-2 py-1 text-xs ${toneStyles.success}`}
-          >
-            {props.passed} passed
-          </span>
-          <span
-            className={`rounded-md px-2 py-1 text-xs ${
-              props.failed > 0 ? toneStyles.error : toneStyles.neutral
-            }`}
-          >
-            {props.failed} failed
-          </span>
-          {props.skipped != null && props.skipped > 0 && (
-            <span
-              className={`rounded-md px-2 py-1 text-xs ${toneStyles.warning}`}
-            >
-              {props.skipped} skipped
-            </span>
-          )}
-        </div>
-        {props.failures && props.failures.length > 0 && (
-          <ul className="flex flex-col gap-1.5">
-            {props.failures.map((f, i) => (
-              <li
-                key={i}
-                className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs dark:border-red-900 dark:bg-red-950/40"
-              >
-                <div className="font-mono font-medium">{f.name}</div>
-                <div className="text-muted-foreground">{f.message}</div>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-    ),
-
-    BarChart: ({ props }) => {
-      const data = props.data as ChartPoint[];
-      const color = CHART_COLOR;
-      const values = data.map((d) => d.value);
-      const max = Math.max(...values, 0);
-      const min = Math.min(...values, 0);
-      const span = max - min || 1;
-      const zeroTop = ((max - 0) / span) * 100;
-
-      return (
-        <ChartFrame title={props.title}>
-          {data.length === 0 ? (
-            <div className="text-xs text-muted-foreground">No data</div>
-          ) : (
-            <div className="flex h-40 gap-2.5">
-              {data.map((d, i) => {
-                const rawHeight = (Math.abs(d.value) / span) * 100;
-                const availableHeight = d.value >= 0 ? zeroTop : 100 - zeroTop;
-                const height =
-                  d.value === 0
-                    ? 0
-                    : Math.min(Math.max(rawHeight, 1.5), availableHeight);
-                const top = d.value >= 0 ? zeroTop - height : zeroTop;
-                return (
-                  <div
-                    key={i}
-                    className="flex h-full min-w-0 flex-1 flex-col items-center gap-1.5"
-                  >
-                    <div className="text-[11px] tabular-nums text-muted-foreground">
-                      {formatChartValue(d.value, props.unit)}
-                    </div>
-                    <div className="relative min-h-0 w-full flex-1">
-                      <div
-                        className="absolute inset-x-0 border-t border-muted-foreground/25"
-                        style={{ top: `${zeroTop}%` }}
-                      />
-                      {d.value === 0 ? (
-                        <div
-                          className="absolute inset-x-0 h-px"
-                          style={{
-                            top: `${zeroTop}%`,
-                            backgroundColor: color,
-                          }}
-                        />
-                      ) : (
-                        <div
-                          className="absolute inset-x-0 rounded-sm"
-                          style={{
-                            top: `${top}%`,
-                            height: `${height}%`,
-                            backgroundColor: color,
-                          }}
-                        />
-                      )}
-                    </div>
-                    <div className="w-full truncate text-center text-[11px] text-muted-foreground">
-                      {d.label}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </ChartFrame>
-      );
-    },
-
-    LineChart: ({ props }) => {
-      const data = props.data as ChartPoint[];
-      const color = CHART_COLOR;
-
-      const W = 100;
-      const H = 40;
-      const values = data.map((d) => d.value);
-      const max = Math.max(...values, 0);
-      const min = Math.min(...values, 0);
-      const span = max - min || 1;
-
-      // Map each point into the viewBox; single point sits centered.
-      const points = data.map((d, i) => {
-        const x = data.length === 1 ? W / 2 : (i / (data.length - 1)) * W;
-        const y = H - ((d.value - min) / span) * H;
-        return { x, y };
-      });
-      const line = points.map((p) => `${p.x},${p.y}`).join(" ");
-      const area = `0,${H} ${line} ${W},${H}`;
-
-      const first = data[0];
-      const last = data[data.length - 1];
-
-      return (
-        <ChartFrame title={props.title}>
-          {!first || !last ? (
-            <div className="text-xs text-muted-foreground">No data</div>
-          ) : (
-            <>
-              <svg
-                viewBox={`0 0 ${W} ${H}`}
-                preserveAspectRatio="none"
-                className="h-28 w-full"
-                role="img"
-              >
-                <polygon points={area} fill={color} fillOpacity={0.06} />
-                <polyline
-                  points={line}
-                  fill="none"
-                  stroke={color}
-                  strokeWidth={1.5}
-                  strokeLinejoin="round"
-                  strokeLinecap="round"
-                  vectorEffect="non-scaling-stroke"
-                />
-              </svg>
-              <div className="mt-1 flex justify-between text-[10px] text-muted-foreground">
-                <span className="truncate">
-                  {first.label}
-                  <span className="tabular-nums">
-                    {" "}
-                    · {formatChartValue(first.value, props.unit)}
-                  </span>
-                </span>
-                {data.length > 1 && (
-                  <span className="truncate">
-                    {last.label}
-                    <span className="tabular-nums">
-                      {" "}
-                      · {formatChartValue(last.value, props.unit)}
-                    </span>
-                  </span>
-                )}
-              </div>
-            </>
-          )}
-        </ChartFrame>
-      );
-    },
-  },
-});
-
-export function Fallback({ type }: { type: string }) {
-  return (
-    <div className="rounded-lg border border-dashed px-3 py-2 text-xs text-muted-foreground">
-      Unknown component: {type}
-    </div>
-  );
-}

examples/harness-chat/lib/render/renderer.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { type ReactNode } from "react";
-import {
-  Renderer,
-  type ComponentRenderer,
-  type Spec,
-  StateProvider,
-  VisibilityProvider,
-  ActionProvider,
-} from "@json-render/react";
-
-import { registry, Fallback } from "./registry";
-
-const fallback: ComponentRenderer = ({ element }) => (
-  <Fallback type={element.type} />
-);
-
-export function ReportRenderer({
-  spec,
-  loading,
-}: {
-  spec: Spec | null;
-  loading?: boolean;
-}): ReactNode {
-  if (!spec) return null;
-
-  return (
-    <StateProvider initialState={spec.state ?? {}}>
-      <VisibilityProvider>
-        <ActionProvider>
-          <Renderer
-            spec={spec}
-            registry={registry}
-            fallback={fallback}
-            loading={loading}
-          />
-        </ActionProvider>
-      </VisibilityProvider>
-    </StateProvider>
-  );
-}

examples/harness-chat/next.config.ts

@@ -1,20 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  // The dev server is reached through the portless proxy origin; Next 16
-  // blocks cross-origin dev requests (and silently breaks hydration)
-  // unless the origin is allowlisted.
-  allowedDevOrigins: ["harness-chat-demo.json-render.localhost"],
-  // The harness adapters ship sandbox bridge files they load at runtime via
-  // new URL(..., import.meta.url); bundling breaks that resolution.
-  serverExternalPackages: [
-    "@ai-sdk/harness",
-    "@ai-sdk/harness-claude-code",
-    "@ai-sdk/harness-codex",
-    "@ai-sdk/harness-pi",
-    "@ai-sdk/sandbox-vercel",
-    "@vercel/sandbox",
-  ],
-};
-
-export default nextConfig;

examples/harness-chat/package.json

@@ -1,44 +0,0 @@
-{
-  "name": "example-harness-chat",
-  "version": "0.1.0",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "predev": "command -v portless >/dev/null 2>&1 || (echo '\\nportless is required but not installed. Run: npm i -g portless\\nSee: https://github.com/vercel-labs/portless\\n' && exit 1)",
-    "dev": "portless harness-chat-demo.json-render next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint --max-warnings 0",
-    "check-types": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@ai-sdk/harness": "1.0.0-canary.9",
-    "@ai-sdk/harness-claude-code": "1.0.0-canary.5",
-    "@ai-sdk/harness-codex": "1.0.0-canary.5",
-    "@ai-sdk/harness-pi": "1.0.0-canary.5",
-    "@ai-sdk/react": "4.0.0-canary.176",
-    "@ai-sdk/sandbox-vercel": "1.0.0-canary.9",
-    "@json-render/core": "workspace:*",
-    "@json-render/react": "workspace:*",
-    "@streamdown/code": "^1.1.1",
-    "ai": "7.0.0-canary.173",
-    "lucide-react": "^0.563.0",
-    "next": "16.2.9",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "streamdown": "^2.5.0",
-    "zod": "4.3.6"
-  },
-  "devDependencies": {
-    "@internal/eslint-config": "workspace:*",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^22.10.0",
-    "@types/react": "19.2.3",
-    "@types/react-dom": "19.2.3",
-    "eslint": "^9.39.1",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^5.7.2"
-  }
-}

examples/harness-chat/postcss.config.mjs

@@ -1,5 +0,0 @@
-export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};

examples/harness-chat/tsconfig.json

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

examples/no-ai/README.md

@@ -1,47 +0,0 @@
-# No-AI Example
-
-Static JSON specs rendered with json-render -- no AI required. This example demonstrates that json-render works as a standalone UI renderer without any LLM, streaming, or backend. Hand-authored specs are rendered client-side with `JSONUIProvider` and `Renderer`.
-
-## What it shows
-
-- **json-render without AI** -- specs are plain JSON objects defined in code; no API routes, no streaming, no environment variables.
-- **Interactive forms** -- `$bindState` for two-way input binding, `$cond` for conditional visibility, `checks` for field validation, and a `validateForm` action.
-- **Computed functions** -- `$computed` with custom functions like `formatAddress` and `citiesForCountry` for derived values.
-- **Watch and cascading state** -- `watch` triggers `setState` actions when a value changes, enabling cascading select patterns.
-- **Templates** -- `$template` for string interpolation with state values.
-- **Custom actions** -- a `confetti` action wired to `react-confetti-explosion`.
-
-## Demos
-
-The app includes several tabbed demos:
-
-- **Confetti** -- custom action integration
-- **Layouts** -- cards, stacks, grids, typography, badges, progress bars, pricing tables, status dashboards
-- **Forms** -- state binding, inputs, selects, switches, validation
-- **Registration form** -- `$template`, `$cond`, cross-field checks, `validateForm`, conditional visibility
-- **Cascading selects** -- `watch` + `setState`, `$computed`, `$template`
-
-## Setup
-
-```bash
-pnpm install          # from the monorepo root
-cd examples/no-ai
-```
-
-No environment variables are needed.
-
-## Run
-
-```bash
-pnpm dev
-# http://no-ai-demo.json-render.localhost:1355
-```
-
-Requires global [`portless`](https://github.com/vercel-labs/portless). The `predev` script checks for it automatically.
-
-## Files
-
-- `app/page.tsx` -- tabbed gallery rendering each demo spec with `JSONUIProvider` and `Renderer`
-- `lib/examples.ts` -- all demo specs as static `Spec` objects
-- `lib/render/catalog.ts` -- component catalog using shadcn component definitions, with a `confetti` action and custom functions
-- `lib/render/registry.tsx` -- registry mapping shadcn components, the `confetti` action handler, and computed function implementations

package.json

@@ -25,7 +25,7 @@
     "prepare": "husky",
     "version:sync": "node scripts/sync-version.js",
     "version:check": "node scripts/check-version-sync.js",
-    "ci:publish": "pnpm run build && pnpm -r publish --provenance --no-git-checks --access public --filter '@json-render/*'",
+    "ci:publish": "pnpm run build && pnpm -r publish --no-git-checks --filter '@json-render/*'",
     "generate:og": "npx tsx scripts/generate-og-images.mts"
   },
   "devDependencies": {
@@ -50,10 +50,9 @@
     "vite-plugin-solid": "^2.11.10",
     "vitest": "^4.0.17"
   },
-  "packageManager": "pnpm@11.1.3",
+  "packageManager": "pnpm@10.29.3",
   "engines": {
-    "node": ">=24",
-    "pnpm": ">=11"
+    "node": ">=18"
   },
   "lint-staged": {
     "*.{ts,tsx}": "prettier --write"

packages/codegen/package.json

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

packages/core/README.md

@@ -230,7 +230,7 @@ Schema options:
 | Export | Purpose |
 |--------|---------|
 | `validateSpec(spec, options?)` | Validate spec structure and return issues |
-| `autoFixSpec(spec, options?)` | Auto-fix common spec issues; `fixDetails` classifies each fix as lossy or lossless, `{ lossy: false }` withholds pruning |
+| `autoFixSpec(spec)` | Auto-fix common spec issues (returns corrected copy) |
 | `formatSpecIssues(issues)` | Format validation issues as readable strings |
 
 ### Actions
@@ -553,16 +553,7 @@ const { valid, issues } = validateSpec(spec);
 console.log(formatSpecIssues(issues));
 
 // Auto-fix common issues (returns a corrected copy)
-const { spec: fixed, fixes, fixDetails } = autoFixSpec(spec);
-```
-
-`validateSpec` checks structure beyond the catalog schema: missing or dangling `children` references, malformed `visible` conditions (anything outside the documented forms evaluates to hidden at runtime, so it is rejected with code `invalid_visible`), `repeat` containers with no children (`repeat_without_children`), and `repeat.statePath` values that do not reference an array in the spec's own `state` (`repeat_state_mismatch`).
-
-`autoFixSpec` distinguishes lossless fixes (relocating `visible`/`on`/`repeat`/`watch` out of `props`) from lossy ones (pruning `children` references to elements that were never defined). Each entry in `fixDetails` carries `{ message, lossy }`. Callers with a repair loop should apply lossless fixes immediately and prefer re-prompting over lossy fixes, passing `{ lossy: false }` to withhold pruning until retries are exhausted:
-
-```typescript
-const lastAttempt = retriesUsed >= maxRetries;
-const { spec: fixed, fixDetails } = autoFixSpec(spec, { lossy: lastAttempt });
+const fixed = autoFixSpec(spec);
 ```
 
 ## State Watchers

packages/core/package.json

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

packages/core/src/directives.test.ts

@@ -1,214 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { z } from "zod";
-import {
-  defineDirective,
-  createDirectiveRegistry,
-  findDirective,
-} from "./directives";
-import { resolvePropValue } from "./props";
-import type { PropResolutionContext } from "./props";
-
-describe("defineDirective", () => {
-  it("returns the definition unchanged", () => {
-    const def = defineDirective({
-      name: "$double",
-      schema: z.object({ $double: z.number() }),
-      resolve: (v) => (v as { $double: number }).$double * 2,
-    });
-    expect(def.name).toBe("$double");
-    expect(typeof def.resolve).toBe("function");
-  });
-
-  it("throws when name does not start with $", () => {
-    expect(() =>
-      defineDirective({
-        name: "double",
-        schema: z.object({ double: z.number() }),
-        resolve: () => 0,
-      }),
-    ).toThrow('Directive name must start with "$"');
-  });
-
-  it("throws when name conflicts with a built-in key", () => {
-    for (const name of [
-      "$state",
-      "$item",
-      "$index",
-      "$bindState",
-      "$bindItem",
-      "$cond",
-      "$computed",
-      "$template",
-    ]) {
-      expect(() =>
-        defineDirective({
-          name,
-          schema: z.object({}),
-          resolve: () => 0,
-        }),
-      ).toThrow(`conflicts with a built-in`);
-    }
-  });
-});
-
-describe("createDirectiveRegistry", () => {
-  it("creates a Map from an array of definitions", () => {
-    const d1 = defineDirective({
-      name: "$a",
-      schema: z.object({ $a: z.string() }),
-      resolve: () => "a",
-    });
-    const d2 = defineDirective({
-      name: "$b",
-      schema: z.object({ $b: z.string() }),
-      resolve: () => "b",
-    });
-    const reg = createDirectiveRegistry([d1, d2]);
-    expect(reg.size).toBe(2);
-    expect(reg.get("$a")).toBe(d1);
-    expect(reg.get("$b")).toBe(d2);
-  });
-
-  it("returns an empty Map for an empty array", () => {
-    const reg = createDirectiveRegistry([]);
-    expect(reg.size).toBe(0);
-  });
-});
-
-describe("findDirective", () => {
-  const d = defineDirective({
-    name: "$upper",
-    schema: z.object({ $upper: z.string() }),
-    resolve: (v) => String((v as { $upper: string }).$upper).toUpperCase(),
-  });
-  const registry = createDirectiveRegistry([d]);
-
-  it("finds a matching directive", () => {
-    expect(findDirective({ $upper: "hello" }, registry)).toBe(d);
-  });
-
-  it("returns undefined for non-matching objects", () => {
-    expect(findDirective({ foo: "bar" }, registry)).toBeUndefined();
-  });
-
-  it("returns undefined when registry is undefined", () => {
-    expect(findDirective({ $upper: "hello" }, undefined)).toBeUndefined();
-  });
-
-  it("returns undefined for empty registry", () => {
-    expect(findDirective({ $upper: "hello" }, new Map())).toBeUndefined();
-  });
-
-  it("ignores $ keys not in registry", () => {
-    expect(findDirective({ $unknown: 1 }, registry)).toBeUndefined();
-  });
-
-  it("throws when multiple directive keys match", () => {
-    const d2 = defineDirective({
-      name: "$lower",
-      schema: z.object({ $lower: z.string() }),
-      resolve: (v) => String((v as { $lower: string }).$lower).toLowerCase(),
-    });
-    const multiRegistry = createDirectiveRegistry([d, d2]);
-    expect(() =>
-      findDirective({ $upper: "hello", $lower: "WORLD" }, multiRegistry),
-    ).toThrow("Ambiguous directive");
-  });
-});
-
-describe("resolvePropValue with custom directives", () => {
-  const doubleDirective = defineDirective({
-    name: "$double",
-    schema: z.object({ $double: z.unknown() }),
-    resolve(value, ctx) {
-      const resolved = resolvePropValue(
-        (value as { $double: unknown }).$double,
-        ctx,
-      );
-      return (resolved as number) * 2;
-    },
-  });
-
-  const upperDirective = defineDirective({
-    name: "$upper",
-    schema: z.object({ $upper: z.unknown() }),
-    resolve(value, ctx) {
-      const resolved = resolvePropValue(
-        (value as { $upper: unknown }).$upper,
-        ctx,
-      );
-      return String(resolved).toUpperCase();
-    },
-  });
-
-  const registry = createDirectiveRegistry([doubleDirective, upperDirective]);
-
-  it("resolves a custom directive", () => {
-    const ctx: PropResolutionContext = { stateModel: {}, directives: registry };
-    expect(resolvePropValue({ $double: 5 }, ctx)).toBe(10);
-  });
-
-  it("resolves a directive with $state sub-value", () => {
-    const ctx: PropResolutionContext = {
-      stateModel: { count: 7 },
-      directives: registry,
-    };
-    expect(resolvePropValue({ $double: { $state: "/count" } }, ctx)).toBe(14);
-  });
-
-  it("resolves nested directives (composition)", () => {
-    const ctx: PropResolutionContext = {
-      stateModel: { val: 3 },
-      directives: registry,
-    };
-    const value = { $double: { $double: { $state: "/val" } } };
-    expect(resolvePropValue(value, ctx)).toBe(12);
-  });
-
-  it("resolves directives inside object props", () => {
-    const ctx: PropResolutionContext = {
-      stateModel: { name: "alice" },
-      directives: registry,
-    };
-    const value = { label: { $upper: { $state: "/name" } }, count: 1 };
-    expect(resolvePropValue(value, ctx)).toEqual({
-      label: "ALICE",
-      count: 1,
-    });
-  });
-
-  it("resolves directives inside arrays", () => {
-    const ctx: PropResolutionContext = {
-      stateModel: { x: 5 },
-      directives: registry,
-    };
-    const value = [{ $double: { $state: "/x" } }, "literal"];
-    expect(resolvePropValue(value, ctx)).toEqual([10, "literal"]);
-  });
-
-  it("falls through to plain object resolution when no directive matches", () => {
-    const ctx: PropResolutionContext = {
-      stateModel: { a: 1 },
-      directives: registry,
-    };
-    expect(resolvePropValue({ foo: { $state: "/a" } }, ctx)).toEqual({
-      foo: 1,
-    });
-  });
-
-  it("cannot register a directive that shadows a built-in key", () => {
-    expect(() =>
-      defineDirective({
-        name: "$state",
-        schema: z.object({ $state: z.string() }),
-        resolve: () => "should-not-reach",
-      }),
-    ).toThrow("conflicts with a built-in");
-  });
-
-  it("works without directives in context (backward compat)", () => {
-    const ctx: PropResolutionContext = { stateModel: { x: 1 } };
-    expect(resolvePropValue({ $state: "/x" }, ctx)).toBe(1);
-    expect(resolvePropValue({ foo: "bar" }, ctx)).toEqual({ foo: "bar" });
-  });
-});

packages/core/src/directives.ts

@@ -1,124 +0,0 @@
-import type { z } from "zod";
-import type { PropResolutionContext } from "./props";
-
-/**
- * Definition for a custom directive — a user-defined `$`-prefixed dynamic
- * value that extends the spec language.
- *
- * @example
- * ```ts
- * const formatDirective = defineDirective({
- *   name: '$format',
- *   description: 'Locale-aware value formatting (date, currency, number, percent).',
- *   schema: z.object({
- *     $format: z.enum(['date', 'currency', 'number']),
- *     value: z.unknown(),
- *   }),
- *   resolve(value, ctx) {
- *     const resolved = resolvePropValue(value.value, ctx);
- *     return new Intl.NumberFormat().format(resolved);
- *   },
- * });
- * ```
- */
-export interface DirectiveDefinition<TSchema extends z.ZodType = z.ZodType> {
-  /** The `$`-prefixed key that triggers this directive (e.g. `"$format"`). */
-  name: string;
-  /**
-   * Short description of the directive for the AI system prompt.
-   * The schema fields are auto-generated; this adds behavioral context.
-   */
-  description?: string;
-  /** Zod schema for validating the directive object. */
-  schema: TSchema;
-  /**
-   * Resolver function. Receives the raw directive value and the current
-   * {@link PropResolutionContext}. May call `resolvePropValue` on sub-values
-   * to support composition with other dynamic expressions.
-   */
-  resolve: (value: z.infer<TSchema>, ctx: PropResolutionContext) => unknown;
-}
-
-/**
- * A Map from directive name (e.g. `"$format"`) to its definition.
- * Passed through {@link PropResolutionContext} for runtime resolution.
- */
-export type DirectiveRegistry = Map<string, DirectiveDefinition>;
-
-/** Keys handled by built-in prop resolution — directives must not shadow these. */
-const BUILT_IN_KEYS = new Set([
-  "$state",
-  "$item",
-  "$index",
-  "$bindState",
-  "$bindItem",
-  "$cond",
-  "$computed",
-  "$template",
-]);
-
-/**
- * Define a custom directive.
- *
- * This is an identity function that provides type checking and serves as
- * a documentation convention. Throws if the name collides with a built-in
- * prop expression key.
- */
-export function defineDirective<TSchema extends z.ZodType>(
-  definition: DirectiveDefinition<TSchema>,
-): DirectiveDefinition<TSchema> {
-  if (!definition.name.startsWith("$")) {
-    throw new Error(
-      `Directive name must start with "$": got "${definition.name}"`,
-    );
-  }
-  if (BUILT_IN_KEYS.has(definition.name)) {
-    throw new Error(
-      `Directive name "${definition.name}" conflicts with a built-in prop expression key`,
-    );
-  }
-  return definition;
-}
-
-/**
- * Convert an array of directive definitions into a {@link DirectiveRegistry}.
- */
-export function createDirectiveRegistry(
-  directives: DirectiveDefinition[],
-): DirectiveRegistry {
-  const registry: DirectiveRegistry = new Map();
-  for (const d of directives) {
-    registry.set(d.name, d);
-  }
-  return registry;
-}
-
-/**
- * Look up a custom directive for a plain-object value.
- *
- * Iterates the registry and checks whether the object contains a matching key.
- * Returns `undefined` when no match is found or when no registry is provided.
- *
- * This is only called **after** all built-in expressions (`$state`, `$cond`,
- * etc.) have been checked in `resolvePropValue`, so built-ins always take
- * precedence. {@link defineDirective} enforces this at registration time by
- * rejecting names that collide with built-in keys.
- */
-export function findDirective(
-  value: Record<string, unknown>,
-  directives?: DirectiveRegistry,
-): DirectiveDefinition | undefined {
-  if (!directives || directives.size === 0) return undefined;
-  let match: DirectiveDefinition | undefined;
-  for (const [key, def] of directives) {
-    if (key in value) {
-      if (match) {
-        throw new Error(
-          `Ambiguous directive: object has multiple directive keys ("${match.name}" and "${key}")`,
-        );
-      }
-      match = def;
-    }
-  }
-  return match;
-}

packages/core/src/index.ts

@@ -67,9 +67,6 @@ export type { VisibilityContext } from "./visibility";
 
 export {
   VisibilityConditionSchema,
-  VisibilityConditionStrictSchema,
-  conditionUsesItemScope,
-  splitRepeatVisibility,
   evaluateVisibility,
   visibility,
 } from "./visibility";
@@ -88,15 +85,6 @@ export {
   resolveActionParam,
 } from "./props";
 
-// Custom Directives
-export type { DirectiveDefinition, DirectiveRegistry } from "./directives";
-
-export {
-  defineDirective,
-  createDirectiveRegistry,
-  findDirective,
-} from "./directives";
-
 // Actions
 export type {
   ActionBinding,

packages/core/src/props.ts

@@ -1,7 +1,6 @@
 import type { VisibilityCondition, StateModel } from "./types";
 import { getByPath } from "./types";
 import { evaluateVisibility, type VisibilityContext } from "./visibility";
-import { findDirective, type DirectiveRegistry } from "./directives";
 
 // =============================================================================
 // Prop Expression Types
@@ -62,8 +61,6 @@ export interface PropResolutionContext extends VisibilityContext {
   repeatBasePath?: string;
   /** Named functions available for `$computed` expressions. */
   functions?: Record<string, ComputedFunction>;
-  /** Custom directive registry for user-defined `$`-prefixed dynamic values. */
-  directives?: DirectiveRegistry;
 }
 
 // =============================================================================
@@ -294,17 +291,8 @@ export function resolvePropValue(
     return value.map((item) => resolvePropValue(item, ctx));
   }
 
-  // Custom directives: check registry before generic object recursion
+  // Plain objects (not expressions): resolve each value recursively
   if (typeof value === "object") {
-    const directive = findDirective(
-      value as Record<string, unknown>,
-      ctx.directives,
-    );
-    if (directive) {
-      return directive.resolve(value, ctx);
-    }
-
-    // Plain objects (not expressions): resolve each value recursively
     const resolved: Record<string, unknown> = {};
     for (const [key, val] of Object.entries(value as Record<string, unknown>)) {
       resolved[key] = resolvePropValue(val, ctx);

packages/core/src/schema.test.ts

@@ -14,7 +14,7 @@ const testSchema = defineSchema((s) => ({
         type: s.ref("catalog.components"),
         props: s.propsOf("catalog.components"),
         children: s.array(s.string()),
-        visible: { ...s.any(), ...s.optional() },
+        visible: s.any(),
       }),
     ),
   }),
@@ -583,26 +583,6 @@ describe("catalog.validate", () => {
     expect(result.data).toEqual(spec);
   });
 
-  it("accepts elements without visible regardless of zod version (z.any() keys became nonoptional in zod 4.4)", () => {
-    const result = catalog.validate({
-      root: "text-1",
-      elements: {
-        "text-1": { type: "Text", props: { content: "Hello" }, children: [] },
-      },
-    });
-    expect(result.success).toBe(true);
-  });
-
-  it("still requires children on every element", () => {
-    const result = catalog.validate({
-      root: "text-1",
-      elements: {
-        "text-1": { type: "Text", props: { content: "Hello" } },
-      },
-    });
-    expect(result.success).toBe(false);
-  });
-
   it("rejects spec with wrong root type", () => {
     const result = catalog.validate({ root: 123, elements: {} });
     expect(result.success).toBe(false);

packages/core/src/schema.ts

@@ -1,7 +1,6 @@
 import { z } from "zod";
 import type { EditMode } from "./edit-modes";
 import { buildEditInstructions } from "./edit-modes";
-import type { DirectiveDefinition } from "./directives";
 
 /**
  * Schema builder primitives
@@ -147,12 +146,6 @@ export interface PromptOptions {
   mode?: "standalone" | "inline" | "generate" | "chat";
   /** Edit modes to document in the system prompt. Default: `["patch"]`. */
   editModes?: EditMode[];
-  /**
-   * Custom directives to include in the system prompt.
-   * Each directive's schema is auto-described; the optional `description`
-   * field adds behavioral context. Pass the same array used at runtime.
-   */
-  directives?: DirectiveDefinition[];
 }
 
 /**
@@ -328,13 +321,7 @@ export type InferSpec<TDef extends SchemaDefinition, TCatalog> = TDef extends {
   : unknown;
 
 type InferSpecObject<Shape, TCatalog> = {
-  [K in keyof Shape as Shape[K] extends { optional: true }
-    ? never
-    : K]: InferSpecField<Shape[K], TCatalog>;
-} & {
-  [K in keyof Shape as Shape[K] extends { optional: true }
-    ? K
-    : never]?: InferSpecField<Shape[K], TCatalog>;
+  [K in keyof Shape]: InferSpecField<Shape[K], TCatalog>;
 };
 
 type InferSpecField<T, TCatalog> =
@@ -981,22 +968,6 @@ Note: state patches appear right after the elements that use them, so the UI fil
     lines.push("");
   }
 
-  // Custom directives section — auto-describe schema + optional description
-  const directives = options.directives;
-  if (directives && directives.length > 0) {
-    lines.push("CUSTOM DYNAMIC VALUES:");
-    lines.push("");
-    for (const d of directives) {
-      const desc = d.description ? ` (${d.description})` : "";
-      lines.push(`- ${d.name}${desc}: ${formatZodType(d.schema)}`);
-    }
-    lines.push("");
-    lines.push(
-      "Directives compose: any value field can contain another directive or a $state expression, resolved inside-out.",
-    );
-    lines.push("");
-  }
-
   // Validation section — only emit when at least one component has a `checks` prop
   const hasChecksComponents = allComponents
     ? Object.entries(allComponents).some(([, def]) => {

packages/core/src/spec-validator.test.ts

@@ -147,239 +147,7 @@ describe("validateSpec", () => {
 // autoFixSpec
 // =============================================================================
 
-describe("repeat validation", () => {
-  it("rejects repeat without children", () => {
-    const result = validateSpec({
-      root: "list",
-      state: { items: [{ id: "1" }] },
-      elements: {
-        list: {
-          type: "Stack",
-          props: {},
-          repeat: { statePath: "/items" },
-          children: [],
-        },
-      },
-    });
-    expect(result.valid).toBe(false);
-    expect(
-      result.issues.some((i) => i.code === "repeat_without_children"),
-    ).toBe(true);
-  });
-
-  it("rejects repeat over a non-array state value", () => {
-    const result = validateSpec({
-      root: "list",
-      state: { items: { "1": { title: "x" } } },
-      elements: {
-        list: {
-          type: "Stack",
-          props: {},
-          repeat: { statePath: "/items" },
-          children: ["card"],
-        },
-        card: { type: "Text", props: {}, children: [] },
-      },
-    });
-    expect(result.valid).toBe(false);
-    expect(result.issues.some((i) => i.code === "repeat_state_mismatch")).toBe(
-      true,
-    );
-  });
-
-  it("rejects repeat over a missing state path when state is provided", () => {
-    const result = validateSpec({
-      root: "list",
-      state: { other: [] },
-      elements: {
-        list: {
-          type: "Stack",
-          props: {},
-          repeat: { statePath: "/items" },
-          children: ["card"],
-        },
-        card: { type: "Text", props: {}, children: [] },
-      },
-    });
-    expect(result.valid).toBe(false);
-    expect(result.issues.some((i) => i.code === "repeat_state_mismatch")).toBe(
-      true,
-    );
-  });
-
-  it("accepts a well-formed repeat and skips state checks when no state is provided", () => {
-    const withState = validateSpec({
-      root: "list",
-      state: { items: [{ id: "1" }] },
-      elements: {
-        list: {
-          type: "Stack",
-          props: {},
-          repeat: { statePath: "/items" },
-          children: ["card"],
-        },
-        card: { type: "Text", props: {}, children: [] },
-      },
-    });
-    expect(withState.valid).toBe(true);
-    const runtimeState = validateSpec({
-      root: "list",
-      elements: {
-        list: {
-          type: "Stack",
-          props: {},
-          repeat: { statePath: "/items" },
-          children: ["card"],
-        },
-        card: { type: "Text", props: {}, children: [] },
-      },
-    });
-    expect(runtimeState.valid).toBe(true);
-  });
-});
-
-describe("visible condition validation", () => {
-  const base = (visible: unknown): Spec => ({
-    root: "root",
-    elements: {
-      root: {
-        type: "Text",
-        props: { text: "hi" },
-        children: [],
-        visible: visible as Spec["elements"][string]["visible"],
-      },
-    },
-  });
-
-  it("accepts documented forms", () => {
-    for (const visible of [
-      true,
-      false,
-      { $state: "/tab", eq: "home" },
-      { $item: "status", eq: "todo" },
-      { $index: true, lt: 3 },
-      [
-        { $state: "/a", eq: 1 },
-        { $item: "b", neq: 2 },
-      ],
-      { $or: [{ $state: "/a", eq: 1 }, { $and: [{ $item: "b", not: true }] }] },
-    ]) {
-      expect(validateSpec(base(visible)).valid).toBe(true);
-    }
-  });
-
-  it("rejects conditions mixing $state and $item (silently hidden at runtime)", () => {
-    const result = validateSpec(
-      base([{ $state: "/tasks", $item: "status", eq: "todo" }]),
-    );
-    expect(result.valid).toBe(false);
-    expect(
-      result.issues.some((issue) => issue.code === "invalid_visible"),
-    ).toBe(true);
-  });
-
-  it("rejects unknown condition shapes", () => {
-    const result = validateSpec(base({ when: "/tasks", is: "todo" }));
-    expect(result.valid).toBe(false);
-    expect(result.issues[0]!.code).toBe("invalid_visible");
-  });
-});
-
 describe("autoFixSpec", () => {
-  it("prunes children references to undefined elements", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: { type: "Card", props: {}, children: ["text", "ghost"] },
-        text: { type: "Text", props: { text: "hi" }, children: [] },
-      },
-    };
-    const { spec: fixed, fixes, fixDetails } = autoFixSpec(spec);
-    expect(fixed.elements.root!.children).toEqual(["text"]);
-    expect(fixes).toEqual([
-      'Removed reference to undefined element "ghost" from children of "root".',
-    ]);
-    expect(fixDetails).toEqual([
-      {
-        message:
-          'Removed reference to undefined element "ghost" from children of "root".',
-        lossy: true,
-      },
-    ]);
-    expect(validateSpec(fixed).valid).toBe(true);
-  });
-
-  it("leaves intact children untouched", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: { type: "Card", props: {}, children: ["text"] },
-        text: { type: "Text", props: { text: "hi" }, children: [] },
-      },
-    };
-    const { spec: fixed, fixes } = autoFixSpec(spec);
-    expect(fixed.elements.root!.children).toEqual(["text"]);
-    expect(fixes).toEqual([]);
-  });
-
-  it("does not prune a repeat container down to zero children", () => {
-    const spec: Spec = {
-      root: "list",
-      state: { items: [{ id: "1" }] },
-      elements: {
-        list: {
-          type: "Stack",
-          props: {},
-          repeat: { statePath: "/items" },
-          children: ["ghost"],
-        },
-      },
-    };
-    const { spec: fixed, fixDetails } = autoFixSpec(spec);
-    expect(fixed.elements.list!.children).toEqual(["ghost"]);
-    expect(fixDetails).toEqual([]);
-    // The real problem (missing template) stays visible to the repair loop.
-    const result = validateSpec(fixed);
-    expect(result.valid).toBe(false);
-    expect(result.issues.some((i) => i.code === "missing_child")).toBe(true);
-  });
-
-  it("withholds lossy fixes when options.lossy is false", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: {
-          type: "Card",
-          props: { visible: true },
-          children: ["ghost"],
-        },
-      },
-    };
-    const { spec: fixed, fixDetails } = autoFixSpec(spec, { lossy: false });
-    expect(fixed.elements.root!.children).toEqual(["ghost"]);
-    expect(fixDetails.every((fix) => !fix.lossy)).toBe(true);
-    expect(fixDetails.length).toBeGreaterThan(0);
-  });
-
-  it("classifies field relocations as lossless", () => {
-    const { fixDetails } = autoFixSpec({
-      root: "root",
-      elements: {
-        root: {
-          type: "Text",
-          props: { text: "hi", visible: true },
-          children: [],
-        },
-      },
-    });
-    expect(fixDetails).toEqual([
-      {
-        message: 'Moved "visible" from props to element level on "root".',
-        lossy: false,
-      },
-    ]);
-  });
-
   it("moves visible from props to element level", () => {
     const spec: Spec = {
       root: "root",

packages/core/src/spec-validator.ts

@@ -1,6 +1,4 @@
 import type { Spec, UIElement } from "./types";
-import { getByPath } from "./types";
-import { VisibilityConditionStrictSchema } from "./visibility";
 
 // =============================================================================
 // Spec Structural Validation
@@ -26,9 +24,6 @@ export interface SpecIssue {
     | "missing_root"
     | "root_not_found"
     | "missing_child"
-    | "invalid_visible"
-    | "repeat_without_children"
-    | "repeat_state_mismatch"
     | "visible_in_props"
     | "orphaned_element"
     | "empty_spec"
@@ -127,44 +122,6 @@ export function validateSpec(
       }
     }
 
-    // 3b. Repeat containers that can never render anything. Both shapes pass
-    // schema validation but produce silently empty regions at runtime.
-    if (element.repeat !== undefined) {
-      if (!element.children || element.children.length === 0) {
-        issues.push({
-          severity: "error",
-          message: `Element "${key}" has "repeat" but no children. The repeated template must be a child element: add a child that renders one item (it may read fields with {"$item": "field"}).`,
-          elementKey: key,
-          code: "repeat_without_children",
-        });
-      }
-      if (spec.state !== undefined) {
-        const value = getByPath(spec.state, element.repeat.statePath);
-        if (!Array.isArray(value)) {
-          issues.push({
-            severity: "error",
-            message: `Element "${key}" repeats over "${element.repeat.statePath}" but state${value === undefined ? " has no value there" : ` has a ${typeof value} there`}. Repeat statePath must reference an array in state; add sample items to state at that path.`,
-            elementKey: key,
-            code: "repeat_state_mismatch",
-          });
-        }
-      }
-    }
-
-    // 3b. Malformed visible condition. Unrecognized shapes silently evaluate
-    // to hidden at runtime, so catch them here with a repairable message.
-    if (
-      element.visible !== undefined &&
-      !VisibilityConditionStrictSchema.safeParse(element.visible).success
-    ) {
-      issues.push({
-        severity: "error",
-        message: `Element "${key}" has an invalid "visible" condition: ${JSON.stringify(element.visible)}. Valid forms: true, false, {"$state":"/path","eq":value}, {"$item":"field","eq":value}, {"$index":true,"eq":n}, an array of those (AND), or {"$and":[...]} / {"$or":[...]}. Use exactly one of $state, $item, or $index per condition object.`,
-        elementKey: key,
-        code: "invalid_visible",
-      });
-    }
-
     // 3b. `visible` inside props
     const props = element.props as Record<string, unknown> | undefined;
     if (props && "visible" in props && props.visible !== undefined) {
@@ -252,42 +209,11 @@ export function validateSpec(
  *
  * Returns the fixed spec and a list of fixes applied.
  */
-export interface SpecFix {
-  message: string;
-  /**
-   * Lossy fixes change what renders (e.g. pruning a dangling child
-   * reference); lossless fixes only relocate misplaced fields. Callers with a
-   * repair loop should prefer re-prompting over accepting lossy fixes, and
-   * use the lossy-fixed spec as a last resort.
-   */
-  lossy: boolean;
-}
-
-export interface AutoFixOptions {
-  /**
-   * Apply lossy fixes (content pruning). Default true. Callers with a repair
-   * loop should pass false while retries remain so the model regenerates the
-   * missing content, then true as a last resort.
-   */
-  lossy?: boolean;
-}
-
-export function autoFixSpec(
-  spec: Spec,
-  options: AutoFixOptions = {},
-): {
+export function autoFixSpec(spec: Spec): {
   spec: Spec;
   fixes: string[];
-  /** Structured fix records; fixes is the plain-message projection. */
-  fixDetails: SpecFix[];
 } {
-  const applyLossy = options.lossy !== false;
-  const fixDetails: SpecFix[] = [];
-  const fixes = {
-    push(message: string, lossy = false) {
-      fixDetails.push({ message, lossy });
-    },
-  };
+  const fixes: string[] = [];
   const fixedElements: Record<string, UIElement> = {};
 
   for (const [key, element] of Object.entries(spec.elements)) {
@@ -351,37 +277,9 @@ export function autoFixSpec(
     fixedElements[key] = fixed;
   }
 
-  // Drop references to elements that were never defined. The renderer skips
-  // missing children at runtime, so pruning produces the same rendered output
-  // while letting the spec pass validation instead of hard-failing.
-  if (applyLossy)
-    for (const [key, element] of Object.entries(fixedElements)) {
-      if (!element.children || element.children.length === 0) continue;
-      const present = element.children.filter(
-        (child) => child in fixedElements,
-      );
-      if (present.length === element.children.length) continue;
-      if (element.repeat !== undefined && present.length === 0) {
-        // Pruning every child of a repeat container would only trade the
-        // missing_child error for repeat_without_children; keep the dangling
-        // reference so repair targets the real problem (the missing template).
-        continue;
-      }
-      for (const child of element.children) {
-        if (!(child in fixedElements)) {
-          fixes.push(
-            `Removed reference to undefined element "${child}" from children of "${key}".`,
-            true,
-          );
-        }
-      }
-      fixedElements[key] = { ...element, children: present };
-    }
-
   return {
     spec: { root: spec.root, elements: fixedElements, state: spec.state },
-    fixes: fixDetails.map((fix) => fix.message),
-    fixDetails,
+    fixes,
   };
 }
 

packages/core/src/visibility.test.ts

@@ -1,9 +1,5 @@
 import { describe, it, expect } from "vitest";
-import {
-  evaluateVisibility,
-  splitRepeatVisibility,
-  visibility,
-} from "./visibility";
+import { evaluateVisibility, visibility } from "./visibility";
 
 describe("evaluateVisibility", () => {
   describe("undefined / boolean", () => {
@@ -729,53 +725,3 @@ describe("visibility helper", () => {
     });
   });
 });
-
-describe("splitRepeatVisibility", () => {
-  it("passes through pure container conditions", () => {
-    const cond = { $state: "/show", eq: true };
-    expect(splitRepeatVisibility(cond)).toEqual({
-      container: cond,
-      itemFilter: undefined,
-    });
-    expect(splitRepeatVisibility(undefined)).toEqual({
-      container: undefined,
-      itemFilter: undefined,
-    });
-    expect(splitRepeatVisibility(true)).toEqual({
-      container: true,
-      itemFilter: undefined,
-    });
-  });
-
-  it("routes pure item conditions to the item filter", () => {
-    const cond = { $item: "status", eq: "todo" };
-    expect(splitRepeatVisibility(cond)).toEqual({
-      container: undefined,
-      itemFilter: cond,
-    });
-  });
-
-  it("partitions AND-composed mixed conditions", () => {
-    const state = { $state: "/show", eq: true };
-    const item = { $item: "status", eq: "todo" };
-    for (const cond of [[state, item], { $and: [state, item] }]) {
-      expect(splitRepeatVisibility(cond as never)).toEqual({
-        container: { $and: [state] },
-        itemFilter: { $and: [item] },
-      });
-    }
-  });
-
-  it("keeps mixed $or entirely as an item filter", () => {
-    const cond = {
-      $or: [
-        { $state: "/all", eq: true },
-        { $item: "pinned", eq: true },
-      ],
-    };
-    expect(splitRepeatVisibility(cond)).toEqual({
-      container: undefined,
-      itemFilter: cond,
-    });
-  });
-});

packages/core/src/visibility.ts

@@ -70,89 +70,6 @@ export const VisibilityConditionSchema: z.ZodType<VisibilityCondition> = z.lazy(
     ]),
 );
 
-const StrictSingleConditionSchema = z.union([
-  z.strictObject({ $state: z.string(), ...comparisonOps }),
-  z.strictObject({ $item: z.string(), ...comparisonOps }),
-  z.strictObject({ $index: z.literal(true), ...comparisonOps }),
-]);
-
-/**
- * Strict variant for spec validation: rejects unknown keys, so malformed
- * conditions (e.g. mixing $state and $item in one object) are caught at
- * validation time instead of silently evaluating to hidden at runtime.
- */
-/**
- * True when a condition references the repeat-item scope ($item or $index)
- * anywhere in its tree. Renderers use this to apply a repeat container's own
- * visible condition as a per-item filter instead of evaluating it (and
- * failing) outside the repeat scope.
- */
-export function conditionUsesItemScope(
-  condition: VisibilityCondition | undefined,
-): boolean {
-  if (condition === undefined || typeof condition === "boolean") return false;
-  if (Array.isArray(condition)) return condition.some(conditionUsesItemScope);
-  if (typeof condition !== "object" || condition === null) return false;
-  if ("$item" in condition || "$index" in condition) return true;
-  if ("$and" in condition)
-    return (condition as { $and: VisibilityCondition[] }).$and.some(
-      conditionUsesItemScope,
-    );
-  if ("$or" in condition)
-    return (condition as { $or: VisibilityCondition[] }).$or.some(
-      conditionUsesItemScope,
-    );
-  return false;
-}
-
-/**
- * Splits a repeat container's visible condition into a container-level gate
- * and a per-item filter. Top-level AND structures (arrays, $and) partition
- * cleanly: conjuncts that reference $item/$index filter items, the rest gate
- * the container. An $or that mixes scopes cannot be partitioned soundly and
- * is applied entirely per item (state parts still evaluate correctly there;
- * the container shell just cannot be hidden by it).
- */
-export function splitRepeatVisibility(
-  condition: VisibilityCondition | undefined,
-): {
-  container: VisibilityCondition | undefined;
-  itemFilter: VisibilityCondition | undefined;
-} {
-  if (condition === undefined || !conditionUsesItemScope(condition)) {
-    return { container: condition, itemFilter: undefined };
-  }
-  const partition = (parts: VisibilityCondition[]) => {
-    const container = parts.filter((part) => !conditionUsesItemScope(part));
-    const item = parts.filter((part) => conditionUsesItemScope(part));
-    return {
-      container: container.length > 0 ? { $and: container } : undefined,
-      itemFilter: item.length > 0 ? { $and: item } : undefined,
-    };
-  };
-  if (Array.isArray(condition)) return partition(condition);
-  if (
-    typeof condition === "object" &&
-    condition !== null &&
-    "$and" in condition
-  ) {
-    return partition((condition as { $and: VisibilityCondition[] }).$and);
-  }
-  // Single item-scoped condition or an $or that mixes scopes.
-  return { container: undefined, itemFilter: condition };
-}
-
-export const VisibilityConditionStrictSchema: z.ZodType<VisibilityCondition> =
-  z.lazy(() =>
-    z.union([
-      z.boolean(),
-      StrictSingleConditionSchema,
-      z.array(StrictSingleConditionSchema),
-      z.strictObject({ $and: z.array(VisibilityConditionStrictSchema) }),
-      z.strictObject({ $or: z.array(VisibilityConditionStrictSchema) }),
-    ]),
-  );
-
 // =============================================================================
 // Context
 // =============================================================================

packages/devtools-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/devtools-react",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "React adapter for @json-render/devtools. Drop-in <JsonRenderDevtools /> component.",
   "keywords": [

packages/devtools-solid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/devtools-solid",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "SolidJS adapter for @json-render/devtools. Drop-in <JsonRenderDevtools /> component.",
   "keywords": [

packages/devtools-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/devtools-svelte",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "Svelte adapter for @json-render/devtools. Drop-in <JsonRenderDevtools /> component.",
   "keywords": [

packages/devtools-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/devtools-vue",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "Vue adapter for @json-render/devtools. Drop-in <JsonRenderDevtools /> component.",
   "keywords": [

packages/devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/devtools",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "Framework-agnostic devtools core for json-render: event store, panel UI, picker, stream taps.",
   "keywords": [

packages/directives/README.md

@@ -1,126 +0,0 @@
-# @json-render/directives
-
-Pre-built custom directives for `@json-render/core`. Drop them into your catalog and renderer to add formatting, math, string manipulation, and i18n to your AI-generated UIs.
-
-## Install
-
-```bash
-npm install @json-render/directives
-```
-
-## Quick Start
-
-```typescript
-import { standardDirectives } from '@json-render/directives';
-
-// Wire into prompt generation
-const prompt = catalog.prompt({ directives: standardDirectives });
-
-// Wire into the renderer
-<JSONUIProvider spec={spec} directives={directives}>
-  ...
-</JSONUIProvider>
-```
-
-## Available Directives
-
-### `$format` — Locale-aware value formatting
-
-```json
-{ "$format": "currency", "value": { "$state": "/cart/total" }, "currency": "USD" }
-{ "$format": "date", "value": { "$state": "/user/createdAt" } }
-{ "$format": "number", "value": 1234567, "notation": "compact" }
-{ "$format": "percent", "value": 0.75 }
-```
-
-Formats: `date`, `currency`, `number`, `percent`. The `value` field accepts any dynamic expression.
-
-### `$math` — Arithmetic operations
-
-```json
-{ "$math": "add", "a": { "$state": "/subtotal" }, "b": { "$state": "/tax" } }
-{ "$math": "multiply", "a": { "$state": "/price" }, "b": { "$state": "/qty" } }
-{ "$math": "round", "a": 3.7 }
-```
-
-Operations: `add`, `subtract`, `multiply`, `divide`, `mod`, `min`, `max`, `round`, `floor`, `ceil`, `abs`. Unary ops only use `a`.
-
-### `$concat` — String concatenation
-
-```json
-{ "$concat": [{ "$state": "/user/firstName" }, " ", { "$state": "/user/lastName" }] }
-```
-
-Each element is resolved then joined into a single string.
-
-### `$count` — Array/string length
-
-```json
-{ "$count": { "$state": "/cart/items" } }
-```
-
-Returns the length of an array or string. Returns `0` for other types.
-
-### `$truncate` — Text truncation
-
-```json
-{ "$truncate": { "$state": "/post/body" }, "length": 140, "suffix": "..." }
-```
-
-Default length is 100, default suffix is `"..."`.
-
-### `$pluralize` — Singular/plural forms
-
-```json
-{ "$pluralize": { "$state": "/cart/itemCount" }, "one": "item", "other": "items", "zero": "no items" }
-```
-
-Outputs: `"3 items"`, `"1 item"`, or `"no items"`. The `zero` form is optional.
-
-### `$join` — Join array elements
-
-```json
-{ "$join": { "$state": "/tags" }, "separator": ", " }
-```
-
-Default separator is `", "`.
-
-### `createI18nDirective` — Internationalization
-
-```typescript
-import { createI18nDirective } from '@json-render/directives';
-
-const t = createI18nDirective({
-  locale: 'en',
-  messages: {
-    en: { "greeting": "Hello, {{name}}!", "checkout.submit": "Place Order" },
-    es: { "greeting": "Hola, {{name}}!", "checkout.submit": "Realizar Pedido" },
-  },
-  fallbackLocale: 'en',
-});
-```
-
-```json
-{ "$t": "checkout.submit" }
-{ "$t": "greeting", "params": { "name": { "$state": "/user/name" } } }
-```
-
-This is a factory function because it requires locale configuration at setup time.
-
-## Composition
-
-Directives compose naturally — each resolver calls `resolvePropValue` on its inputs:
-
-```json
-{
-  "$format": "currency",
-  "value": { "$math": "multiply", "a": { "$state": "/price" }, "b": { "$state": "/qty" } },
-  "currency": "USD"
-}
-```
-
-This resolves inside-out: `$math` first, then `$format` on the result.
-
-## License
-
-Apache-2.0

packages/directives/package.json

@@ -1,58 +0,0 @@
-{
-  "name": "@json-render/directives",
-  "version": "0.19.0",
-  "license": "Apache-2.0",
-  "description": "Pre-built directives for @json-render/core — $format, $math, $concat, $count, $truncate, $pluralize, $join, and $t (i18n).",
-  "keywords": [
-    "json-render",
-    "directives",
-    "format",
-    "i18n",
-    "math",
-    "generative-ui"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vercel-labs/json-render.git",
-    "directory": "packages/directives"
-  },
-  "homepage": "https://json-render.dev",
-  "bugs": {
-    "url": "https://github.com/vercel-labs/json-render/issues"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run"
-  },
-  "dependencies": {
-    "@json-render/core": "workspace:*"
-  },
-  "devDependencies": {
-    "@internal/typescript-config": "workspace:*",
-    "tsup": "^8.0.2",
-    "typescript": "^5.4.5",
-    "vitest": "^4.0.17",
-    "zod": "^4.3.6"
-  },
-  "peerDependencies": {
-    "zod": "^4.0.0"
-  }
-}

packages/directives/src/concat.ts

@@ -1,18 +0,0 @@
-import { z } from "zod";
-import { defineDirective, resolvePropValue } from "@json-render/core";
-
-export const concatDirective = defineDirective({
-  name: "$concat",
-  description: "Concatenate multiple dynamic values into a string.",
-  schema: z.object({
-    $concat: z.array(z.unknown()),
-  }),
-  resolve(raw, ctx) {
-    return raw.$concat
-      .map((part) => {
-        const resolved = resolvePropValue(part, ctx);
-        return resolved != null ? String(resolved) : "";
-      })
-      .join("");
-  },
-});

packages/directives/src/count.ts

@@ -1,16 +0,0 @@
-import { z } from "zod";
-import { defineDirective, resolvePropValue } from "@json-render/core";
-
-export const countDirective = defineDirective({
-  name: "$count",
-  description: "Get the length of an array or string.",
-  schema: z.object({
-    $count: z.unknown(),
-  }),
-  resolve(raw, ctx) {
-    const resolved = resolvePropValue(raw.$count, ctx);
-    if (Array.isArray(resolved)) return resolved.length;
-    if (typeof resolved === "string") return resolved.length;
-    return 0;
-  },
-});

packages/directives/src/directives.test.ts

@@ -1,497 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import {
-  resolvePropValue,
-  createDirectiveRegistry,
-  type PropResolutionContext,
-} from "@json-render/core";
-import { formatDirective } from "./format";
-import { mathDirective } from "./math";
-import { concatDirective } from "./concat";
-import { countDirective } from "./count";
-import { truncateDirective } from "./truncate";
-import { pluralizeDirective } from "./pluralize";
-import { joinDirective } from "./join";
-import { createI18nDirective } from "./i18n";
-
-const allDirectives = [
-  formatDirective,
-  mathDirective,
-  concatDirective,
-  countDirective,
-  truncateDirective,
-  pluralizeDirective,
-  joinDirective,
-];
-
-function makeCtx(
-  state: Record<string, unknown> = {},
-  extra: Partial<PropResolutionContext> = {},
-): PropResolutionContext {
-  return {
-    stateModel: state,
-    directives: createDirectiveRegistry(allDirectives),
-    ...extra,
-  };
-}
-
-// ============================================================================
-// $format
-// ============================================================================
-
-describe("$format", () => {
-  it("formats a number", () => {
-    const ctx = makeCtx();
-    const result = resolvePropValue({ $format: "number", value: 1234.56 }, ctx);
-    expect(typeof result).toBe("string");
-    expect(result).toContain("1");
-  });
-
-  it("formats currency", () => {
-    const ctx = makeCtx({ total: 42.5 });
-    const result = resolvePropValue(
-      { $format: "currency", value: { $state: "/total" }, currency: "USD" },
-      ctx,
-    );
-    expect(typeof result).toBe("string");
-    expect(result).toContain("42");
-  });
-
-  it("formats percent", () => {
-    const ctx = makeCtx();
-    const result = resolvePropValue({ $format: "percent", value: 0.75 }, ctx);
-    expect(typeof result).toBe("string");
-    expect(result).toContain("75");
-  });
-
-  it("formats a date", () => {
-    const ctx = makeCtx();
-    const result = resolvePropValue(
-      { $format: "date", value: "2024-01-15" },
-      ctx,
-    );
-    expect(typeof result).toBe("string");
-    expect(result).toContain("2024");
-  });
-
-  it("formats a relative date with injectable now", () => {
-    const ctx = makeCtx();
-    const baseDate = new Date("2024-06-15T12:00:00Z").getTime();
-    const result = resolvePropValue(
-      {
-        $format: "date",
-        value: "2024-06-15T12:00:00Z",
-        style: "relative",
-        now: baseDate + 3 * 60 * 60 * 1000,
-      },
-      ctx,
-    );
-    expect(result).toBe("3h ago");
-  });
-
-  it("formats a future relative date", () => {
-    const ctx = makeCtx();
-    const baseDate = new Date("2024-06-15T12:00:00Z").getTime();
-    const result = resolvePropValue(
-      {
-        $format: "date",
-        value: "2024-06-15T12:00:00Z",
-        style: "relative",
-        now: baseDate - 2 * 60 * 60 * 1000,
-      },
-      ctx,
-    );
-    expect(result).toBe("2h from now");
-  });
-
-  it("returns 'just now' when date equals now", () => {
-    const ctx = makeCtx();
-    const ts = new Date("2024-06-15T12:00:00Z").getTime();
-    const result = resolvePropValue(
-      {
-        $format: "date",
-        value: "2024-06-15T12:00:00Z",
-        style: "relative",
-        now: ts,
-      },
-      ctx,
-    );
-    expect(result).toBe("just now");
-  });
-});
-
-// ============================================================================
-// $math
-// ============================================================================
-
-describe("$math", () => {
-  it("adds two values", () => {
-    const ctx = makeCtx({ a: 10, b: 5 });
-    expect(
-      resolvePropValue(
-        { $math: "add", a: { $state: "/a" }, b: { $state: "/b" } },
-        ctx,
-      ),
-    ).toBe(15);
-  });
-
-  it("subtracts", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $math: "subtract", a: 10, b: 3 }, ctx)).toBe(7);
-  });
-
-  it("multiplies", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $math: "multiply", a: 4, b: 5 }, ctx)).toBe(20);
-  });
-
-  it("divides", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $math: "divide", a: 10, b: 4 }, ctx)).toBe(2.5);
-  });
-
-  it("handles division by zero", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $math: "divide", a: 10, b: 0 }, ctx)).toBe(0);
-  });
-
-  it("computes modulo", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $math: "mod", a: 10, b: 3 }, ctx)).toBe(1);
-  });
-
-  it("computes min", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $math: "min", a: 10, b: 3 }, ctx)).toBe(3);
-  });
-
-  it("computes max", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $math: "max", a: 10, b: 3 }, ctx)).toBe(10);
-  });
-
-  it("rounds", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $math: "round", a: 3.7 }, ctx)).toBe(4);
-  });
-
-  it("floors", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $math: "floor", a: 3.7 }, ctx)).toBe(3);
-  });
-
-  it("ceils", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $math: "ceil", a: 3.2 }, ctx)).toBe(4);
-  });
-
-  it("computes abs", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $math: "abs", a: -5 }, ctx)).toBe(5);
-  });
-
-  it("defaults missing operand b to 0", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $math: "add", a: 5 }, ctx)).toBe(5);
-  });
-
-  it("defaults missing operand a to 0", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $math: "add", b: 3 }, ctx)).toBe(3);
-  });
-
-  it("warns when a non-numeric value is coerced to 0", () => {
-    const ctx = makeCtx();
-    const spy = vi.spyOn(console, "warn").mockImplementation(() => {});
-    const result = resolvePropValue({ $math: "add", a: "foo", b: 3 }, ctx);
-    expect(result).toBe(3);
-    expect(spy).toHaveBeenCalledWith(
-      "$math: non-numeric value coerced to 0:",
-      "foo",
-    );
-    spy.mockRestore();
-  });
-});
-
-// ============================================================================
-// $concat
-// ============================================================================
-
-describe("$concat", () => {
-  it("concatenates strings", () => {
-    const ctx = makeCtx({ first: "John", last: "Doe" });
-    expect(
-      resolvePropValue(
-        { $concat: [{ $state: "/first" }, " ", { $state: "/last" }] },
-        ctx,
-      ),
-    ).toBe("John Doe");
-  });
-
-  it("handles null values", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $concat: ["hello", null, "world"] }, ctx)).toBe(
-      "helloworld",
-    );
-  });
-
-  it("converts non-strings", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $concat: ["count: ", 42] }, ctx)).toBe(
-      "count: 42",
-    );
-  });
-});
-
-// ============================================================================
-// $count
-// ============================================================================
-
-describe("$count", () => {
-  it("counts array items", () => {
-    const ctx = makeCtx({ items: [1, 2, 3] });
-    expect(resolvePropValue({ $count: { $state: "/items" } }, ctx)).toBe(3);
-  });
-
-  it("counts string length", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $count: "hello" }, ctx)).toBe(5);
-  });
-
-  it("returns 0 for non-countable", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $count: 42 }, ctx)).toBe(0);
-  });
-
-  it("returns 0 for empty array", () => {
-    const ctx = makeCtx({ items: [] });
-    expect(resolvePropValue({ $count: { $state: "/items" } }, ctx)).toBe(0);
-  });
-});
-
-// ============================================================================
-// $truncate
-// ============================================================================
-
-describe("$truncate", () => {
-  it("truncates long text", () => {
-    const ctx = makeCtx();
-    const text = "a".repeat(200);
-    const result = resolvePropValue(
-      { $truncate: text, length: 10, suffix: "..." },
-      ctx,
-    ) as string;
-    expect(result.length).toBe(13);
-    expect(result).toBe("a".repeat(10) + "...");
-  });
-
-  it("does not truncate short text", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $truncate: "hello", length: 10 }, ctx)).toBe(
-      "hello",
-    );
-  });
-
-  it("uses default length and suffix", () => {
-    const ctx = makeCtx();
-    const text = "a".repeat(200);
-    const result = resolvePropValue({ $truncate: text }, ctx) as string;
-    expect(result.length).toBe(103); // 100 + "..."
-  });
-
-  it("resolves dynamic values", () => {
-    const ctx = makeCtx({ body: "hello world this is a test" });
-    expect(
-      resolvePropValue(
-        { $truncate: { $state: "/body" }, length: 11, suffix: "…" },
-        ctx,
-      ),
-    ).toBe("hello world…");
-  });
-});
-
-// ============================================================================
-// $pluralize
-// ============================================================================
-
-describe("$pluralize", () => {
-  it("handles singular", () => {
-    const ctx = makeCtx();
-    expect(
-      resolvePropValue({ $pluralize: 1, one: "item", other: "items" }, ctx),
-    ).toBe("1 item");
-  });
-
-  it("handles plural", () => {
-    const ctx = makeCtx();
-    expect(
-      resolvePropValue({ $pluralize: 5, one: "item", other: "items" }, ctx),
-    ).toBe("5 items");
-  });
-
-  it("handles zero with zero form", () => {
-    const ctx = makeCtx();
-    expect(
-      resolvePropValue(
-        { $pluralize: 0, one: "item", other: "items", zero: "no items" },
-        ctx,
-      ),
-    ).toBe("no items");
-  });
-
-  it("handles zero without zero form", () => {
-    const ctx = makeCtx();
-    expect(
-      resolvePropValue({ $pluralize: 0, one: "item", other: "items" }, ctx),
-    ).toBe("0 items");
-  });
-
-  it("resolves count from state", () => {
-    const ctx = makeCtx({ count: 3 });
-    expect(
-      resolvePropValue(
-        { $pluralize: { $state: "/count" }, one: "file", other: "files" },
-        ctx,
-      ),
-    ).toBe("3 files");
-  });
-
-  it("coerces string count to number", () => {
-    const ctx = makeCtx();
-    expect(
-      resolvePropValue({ $pluralize: "3", one: "item", other: "items" }, ctx),
-    ).toBe("3 items");
-  });
-});
-
-// ============================================================================
-// $join
-// ============================================================================
-
-describe("$join", () => {
-  it("joins array with default separator", () => {
-    const ctx = makeCtx({ tags: ["red", "green", "blue"] });
-    expect(resolvePropValue({ $join: { $state: "/tags" } }, ctx)).toBe(
-      "red, green, blue",
-    );
-  });
-
-  it("joins with custom separator", () => {
-    const ctx = makeCtx({ tags: ["a", "b", "c"] });
-    expect(
-      resolvePropValue({ $join: { $state: "/tags" }, separator: " | " }, ctx),
-    ).toBe("a | b | c");
-  });
-
-  it("handles non-array values", () => {
-    const ctx = makeCtx();
-    expect(resolvePropValue({ $join: "hello" }, ctx)).toBe("hello");
-  });
-
-  it("handles null items", () => {
-    const ctx = makeCtx({ items: ["a", null, "b"] });
-    expect(
-      resolvePropValue({ $join: { $state: "/items" }, separator: "-" }, ctx),
-    ).toBe("a--b");
-  });
-});
-
-// ============================================================================
-// $t (i18n)
-// ============================================================================
-
-describe("createI18nDirective", () => {
-  const tDirective = createI18nDirective({
-    locale: "en",
-    messages: {
-      en: {
-        greeting: "Hello, {{name}}!",
-        "checkout.submit": "Place Order",
-        "items.count": "{{count}} items in cart",
-      },
-      es: {
-        greeting: "Hola, {{name}}!",
-        "checkout.submit": "Realizar Pedido",
-      },
-    },
-    fallbackLocale: "en",
-  });
-
-  function makeI18nCtx(
-    state: Record<string, unknown> = {},
-  ): PropResolutionContext {
-    return {
-      stateModel: state,
-      directives: createDirectiveRegistry([tDirective]),
-    };
-  }
-
-  it("translates a simple key", () => {
-    const ctx = makeI18nCtx();
-    expect(resolvePropValue({ $t: "checkout.submit" }, ctx)).toBe(
-      "Place Order",
-    );
-  });
-
-  it("interpolates parameters", () => {
-    const ctx = makeI18nCtx({ name: "Alice" });
-    expect(
-      resolvePropValue(
-        { $t: "greeting", params: { name: { $state: "/name" } } },
-        ctx,
-      ),
-    ).toBe("Hello, Alice!");
-  });
-
-  it("returns key for missing translations", () => {
-    const ctx = makeI18nCtx();
-    expect(resolvePropValue({ $t: "missing.key" }, ctx)).toBe("missing.key");
-  });
-
-  it("handles multiple params", () => {
-    const ctx = makeI18nCtx({ count: 3 });
-    expect(
-      resolvePropValue(
-        { $t: "items.count", params: { count: { $state: "/count" } } },
-        ctx,
-      ),
-    ).toBe("3 items in cart");
-  });
-});
-
-// ============================================================================
-// Composition tests
-// ============================================================================
-
-describe("directive composition", () => {
-  it("composes $math inside $format", () => {
-    const ctx = makeCtx({ price: 10, qty: 3 });
-    const result = resolvePropValue(
-      {
-        $format: "currency",
-        value: {
-          $math: "multiply",
-          a: { $state: "/price" },
-          b: { $state: "/qty" },
-        },
-        currency: "USD",
-      },
-      ctx,
-    );
-    expect(typeof result).toBe("string");
-    expect(result).toContain("30");
-  });
-
-  it("composes $count inside $pluralize", () => {
-    const ctx = makeCtx({ items: [1, 2, 3] });
-    expect(
-      resolvePropValue(
-        {
-          $pluralize: { $count: { $state: "/items" } },
-          one: "item",
-          other: "items",
-        },
-        ctx,
-      ),
-    ).toBe("3 items");
-  });
-});

packages/directives/src/format.ts

@@ -1,71 +0,0 @@
-import { z } from "zod";
-import { defineDirective, resolvePropValue } from "@json-render/core";
-
-export const formatDirective = defineDirective({
-  name: "$format",
-  description:
-    'Locale-aware value formatting (date, currency, number, percent). Supports style: "relative" for relative dates.',
-  schema: z.object({
-    $format: z.enum(["date", "currency", "number", "percent"]),
-    value: z.unknown(),
-    locale: z.string().optional(),
-    currency: z.string().optional(),
-    notation: z.string().optional(),
-    style: z.string().optional(),
-    options: z.record(z.string(), z.unknown()).optional(),
-    now: z.number().optional(),
-  }),
-  resolve(raw, ctx) {
-    const value = resolvePropValue(raw.value, ctx);
-    const locale = raw.locale ?? undefined;
-    const extra = raw.options ?? {};
-
-    switch (raw.$format) {
-      case "date": {
-        const date =
-          value instanceof Date ? value : new Date(value as string | number);
-        if (raw.style === "relative") {
-          const now = raw.now ?? Date.now();
-          const diff = now - date.getTime();
-          if (diff === 0) return "just now";
-          const absDiff = Math.abs(diff);
-          const suffix = diff > 0 ? "ago" : "from now";
-          const seconds = Math.floor(absDiff / 1000);
-          const minutes = Math.floor(seconds / 60);
-          const hours = Math.floor(minutes / 60);
-          const days = Math.floor(hours / 24);
-          if (days > 0) return `${days}d ${suffix}`;
-          if (hours > 0) return `${hours}h ${suffix}`;
-          if (minutes > 0) return `${minutes}m ${suffix}`;
-          return `${seconds}s ${suffix}`;
-        }
-        return new Intl.DateTimeFormat(
-          locale,
-          extra as Intl.DateTimeFormatOptions,
-        ).format(date);
-      }
-      case "currency":
-        return new Intl.NumberFormat(locale, {
-          style: "currency",
-          currency: raw.currency ?? "USD",
-          ...(extra as Intl.NumberFormatOptions),
-        }).format(value as number);
-      case "number":
-        return new Intl.NumberFormat(locale, {
-          ...(raw.notation
-            ? {
-                notation: raw.notation as Intl.NumberFormatOptions["notation"],
-              }
-            : {}),
-          ...(extra as Intl.NumberFormatOptions),
-        }).format(value as number);
-      case "percent":
-        return new Intl.NumberFormat(locale, {
-          style: "percent",
-          ...(extra as Intl.NumberFormatOptions),
-        }).format(value as number);
-      default:
-        return value;
-    }
-  },
-});

packages/directives/src/i18n.ts

@@ -1,58 +0,0 @@
-import { z } from "zod";
-import { defineDirective, resolvePropValue } from "@json-render/core";
-import type { DirectiveDefinition } from "@json-render/core";
-
-export interface I18nConfig {
-  /** Current locale (e.g. "en", "es") */
-  locale: string;
-  /** Map of locale → key → translated string */
-  messages: Record<string, Record<string, string>>;
-  /** Fallback locale when a key is missing in the current locale */
-  fallbackLocale?: string;
-}
-
-/**
- * Create a `$t` directive for internationalization.
- *
- * @example
- * ```ts
- * const t = createI18nDirective({
- *   locale: 'en',
- *   messages: {
- *     en: { "greeting": "Hello, {{name}}!" },
- *     es: { "greeting": "Hola, {{name}}!" },
- *   },
- * });
- * ```
- */
-export function createI18nDirective(config: I18nConfig): DirectiveDefinition {
-  return defineDirective({
-    name: "$t",
-    description: "Translated text with {{param}} interpolation.",
-    schema: z.object({
-      $t: z.string(),
-      params: z.record(z.string(), z.unknown()).optional(),
-    }),
-    resolve(raw, ctx) {
-      const key = raw.$t;
-
-      const localeMessages = config.messages[config.locale];
-      const fallbackMessages = config.fallbackLocale
-        ? config.messages[config.fallbackLocale]
-        : undefined;
-      let template = localeMessages?.[key] ?? fallbackMessages?.[key] ?? key;
-
-      if (raw.params) {
-        for (const [paramKey, paramValue] of Object.entries(raw.params)) {
-          const resolved = resolvePropValue(paramValue, ctx);
-          template = template.replace(
-            new RegExp(`\\{\\{${paramKey}\\}\\}`, "g"),
-            resolved != null ? String(resolved) : "",
-          );
-        }
-      }
-
-      return template;
-    },
-  });
-}

packages/directives/src/index.ts

@@ -1,31 +0,0 @@
-export { formatDirective } from "./format";
-export { mathDirective } from "./math";
-export { concatDirective } from "./concat";
-export { countDirective } from "./count";
-export { truncateDirective } from "./truncate";
-export { pluralizeDirective } from "./pluralize";
-export { joinDirective } from "./join";
-export { createI18nDirective, type I18nConfig } from "./i18n";
-
-import { formatDirective } from "./format";
-import { mathDirective } from "./math";
-import { concatDirective } from "./concat";
-import { countDirective } from "./count";
-import { truncateDirective } from "./truncate";
-import { pluralizeDirective } from "./pluralize";
-import { joinDirective } from "./join";
-
-/**
- * All non-factory directives in a single array.
- * Spread with factory directives as needed:
- * `[...standardDirectives, createI18nDirective(config)]`
- */
-export const standardDirectives = [
-  formatDirective,
-  mathDirective,
-  concatDirective,
-  countDirective,
-  truncateDirective,
-  pluralizeDirective,
-  joinDirective,
-];

packages/directives/src/join.ts

@@ -1,22 +0,0 @@
-import { z } from "zod";
-import { defineDirective, resolvePropValue } from "@json-render/core";
-
-export const joinDirective = defineDirective({
-  name: "$join",
-  description: "Join array elements with a separator.",
-  schema: z.object({
-    $join: z.unknown(),
-    separator: z.string().optional(),
-  }),
-  resolve(raw, ctx) {
-    const resolved = resolvePropValue(raw.$join, ctx);
-    const separator = raw.separator ?? ", ";
-
-    if (Array.isArray(resolved)) {
-      return resolved
-        .map((item) => (item != null ? String(item) : ""))
-        .join(separator);
-    }
-    return resolved != null ? String(resolved) : "";
-  },
-});

packages/directives/src/math.ts

@@ -1,66 +0,0 @@
-import { z } from "zod";
-import { defineDirective, resolvePropValue } from "@json-render/core";
-
-function toNum(v: unknown): number {
-  if (v == null) return 0;
-  const n = Number(v);
-  if (Number.isNaN(n)) {
-    console.warn(`$math: non-numeric value coerced to 0:`, v);
-    return 0;
-  }
-  return n;
-}
-
-export const mathDirective = defineDirective({
-  name: "$math",
-  description:
-    'Arithmetic operations. Unary ops (round, floor, ceil, abs) only use "a". Division by zero returns 0.',
-  schema: z.object({
-    $math: z.enum([
-      "add",
-      "subtract",
-      "multiply",
-      "divide",
-      "mod",
-      "min",
-      "max",
-      "round",
-      "floor",
-      "ceil",
-      "abs",
-    ]),
-    a: z.unknown().optional(),
-    b: z.unknown().optional(),
-  }),
-  resolve(raw, ctx) {
-    const a = toNum(resolvePropValue(raw.a, ctx));
-    const b = toNum(resolvePropValue(raw.b, ctx));
-
-    switch (raw.$math) {
-      case "add":
-        return a + b;
-      case "subtract":
-        return a - b;
-      case "multiply":
-        return a * b;
-      case "divide":
-        return b !== 0 ? a / b : 0;
-      case "mod":
-        return b !== 0 ? a % b : 0;
-      case "min":
-        return Math.min(a, b);
-      case "max":
-        return Math.max(a, b);
-      case "round":
-        return Math.round(a);
-      case "floor":
-        return Math.floor(a);
-      case "ceil":
-        return Math.ceil(a);
-      case "abs":
-        return Math.abs(a);
-      default:
-        return a;
-    }
-  },
-});

packages/directives/src/pluralize.ts

@@ -1,23 +0,0 @@
-import { z } from "zod";
-import { defineDirective, resolvePropValue } from "@json-render/core";
-
-export const pluralizeDirective = defineDirective({
-  name: "$pluralize",
-  description:
-    'Select singular/plural/zero form based on count. Output: "3 items", "1 item", or "no items".',
-  schema: z.object({
-    $pluralize: z.unknown(),
-    zero: z.string().optional(),
-    one: z.string(),
-    other: z.string(),
-  }),
-  resolve(raw, ctx) {
-    const resolved = resolvePropValue(raw.$pluralize, ctx);
-    const n = Number(resolved);
-    const count = Number.isNaN(n) ? 0 : n;
-
-    if (count === 0 && raw.zero != null) return raw.zero;
-    if (count === 1) return `${count} ${raw.one}`;
-    return `${count} ${raw.other}`;
-  },
-});

packages/directives/src/truncate.ts

@@ -1,21 +0,0 @@
-import { z } from "zod";
-import { defineDirective, resolvePropValue } from "@json-render/core";
-
-export const truncateDirective = defineDirective({
-  name: "$truncate",
-  description: "Truncate text to a max length with a suffix.",
-  schema: z.object({
-    $truncate: z.unknown(),
-    length: z.number().optional(),
-    suffix: z.string().optional(),
-  }),
-  resolve(raw, ctx) {
-    const resolved = resolvePropValue(raw.$truncate, ctx);
-    const text = resolved != null ? String(resolved) : "";
-    const maxLength = raw.length ?? 100;
-    const suffix = raw.suffix ?? "...";
-
-    if (text.length <= maxLength) return text;
-    return text.slice(0, maxLength) + suffix;
-  },
-});

packages/directives/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "@internal/typescript-config/base.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "rootDir": "src"
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
-}

packages/directives/tsup.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig({
-  entry: ["src/index.ts"],
-  format: ["cjs", "esm"],
-  dts: true,
-  sourcemap: true,
-  clean: true,
-  external: ["@json-render/core", "zod"],
-});

packages/image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/image",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "Image renderer for @json-render/core. JSON becomes SVG and PNG images via Satori.",
   "keywords": [

packages/image/src/render.tsx

@@ -206,6 +206,5 @@ export async function renderToPng(
 
   const resvg = new Resvg(svg);
   const pngData = resvg.render();
-  const png = pngData.asPng();
-  return new Uint8Array(png.buffer, png.byteOffset, png.byteLength);
+  return pngData.asPng();
 }

packages/image/src/schema.ts

@@ -18,7 +18,7 @@ export const schema = defineSchema(
           type: s.ref("catalog.components"),
           props: s.propsOf("catalog.components"),
           children: s.array(s.string()),
-          visible: { ...s.any(), ...s.optional() },
+          visible: s.any(),
         }),
       ),
     }),
@@ -41,7 +41,6 @@ export const schema = defineSchema(
       "Image src must be a fully qualified URL. For placeholder images, use https://picsum.photos/{width}/{height}?random={n}.",
       "Satori renders a subset of CSS: flexbox layout, borders, backgrounds, text styling. Absolute positioning is supported via position/top/left/right/bottom.",
       "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.",
-      'REQUIRED FIELDS: Every element MUST include a "children" array. Leaf elements (text, badges, inputs, images) use an empty array: "children": []. Omitting "children" fails validation.',
     ],
   },
 );

packages/ink/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/ink",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "Ink terminal renderer for @json-render/core. JSON becomes terminal UIs.",
   "keywords": [

packages/ink/src/hooks.ts

@@ -417,16 +417,10 @@ export function useUIStream({
           }
 
           // ---------------------------------------------------------------
-          // Post-stream: auto-fix deterministic issues. Lossless fixes (field
-          // relocations) apply immediately. Lossy fixes (pruned content) are
-          // held back while retries remain so validation fails and the model
-          // is asked to repair; they apply as a last resort once retries are
-          // exhausted, trading dropped content for a renderable spec.
+          // Post-stream: auto-fix deterministic issues (no retry needed)
           // ---------------------------------------------------------------
-          const { spec: fixedSpec, fixDetails } = autoFixSpec(currentSpec, {
-            lossy: retriesUsed >= maxRetries,
-          });
-          if (fixDetails.length > 0) {
+          const { spec: fixedSpec, fixes } = autoFixSpec(currentSpec);
+          if (fixes.length > 0) {
             currentSpec = fixedSpec;
             setSpec({ ...currentSpec });
           }

packages/ink/src/schema.ts

@@ -22,7 +22,7 @@ export const schema = defineSchema(
           /** Child element keys (flat reference) */
           children: s.array(s.string()),
           /** Visibility condition */
-          visible: { ...s.any(), ...s.optional() },
+          visible: s.any(),
         }),
       ),
     }),
@@ -70,7 +70,6 @@ export const schema = defineSchema(
       // 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.",
-      'REQUIRED FIELDS: Every element MUST include a "children" array. Leaf elements (text, badges, inputs, images) use an empty array: "children": []. Omitting "children" fails validation.',
       // Field placement
       'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"<ComponentName>","props":{},"visible":{"$state":"/tab","eq":"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.',

packages/jotai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/jotai",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "Jotai adapter for json-render StateStore",
   "keywords": [

packages/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/mcp",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "MCP Apps integration for @json-render/core. Serve json-render UIs as interactive MCP Apps in Claude, ChatGPT, Cursor, and VS Code.",
   "keywords": [

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/next",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "Next.js renderer for @json-render/core. JSON becomes full Next.js applications with routes, layouts, metadata, and SSR.",
   "keywords": [

packages/next/src/schema.test.ts

@@ -1,104 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { schema, type NextSpec } from "./schema";
-
-const catalog = schema.createCatalog({
-  components: {},
-  actions: {},
-});
-
-describe("@json-render/next schema", () => {
-  it("accepts the minimal public Next app spec shape", () => {
-    const spec = {
-      routes: {
-        "/": {
-          page: {
-            root: "root",
-            elements: {
-              root: {
-                type: "Card",
-                props: {},
-                children: [],
-              },
-            },
-          },
-        },
-      },
-    };
-
-    const result = catalog.validate(spec);
-    expect(result.success).toBe(true);
-    expect(result.data).toEqual(spec);
-  });
-
-  it("preserves optional metadata fields during validation", () => {
-    const spec = {
-      metadata: {
-        title: "Home",
-        alternates: {
-          canonical: "https://example.com",
-        },
-      },
-      routes: {
-        "/": {
-          page: {
-            root: "root",
-            elements: {
-              root: {
-                type: "Card",
-                props: {},
-                children: [],
-              },
-            },
-          },
-        },
-      },
-    };
-
-    const result = catalog.validate(spec);
-    expect(result.success).toBe(true);
-    expect(result.data).toEqual(spec);
-  });
-
-  it("still requires children on every page element", () => {
-    const result = catalog.validate({
-      routes: {
-        "/": {
-          page: {
-            root: "root",
-            elements: {
-              root: {
-                type: "Card",
-                props: {},
-              },
-            },
-          },
-        },
-      },
-    });
-
-    expect(result.success).toBe(false);
-  });
-
-  it("infers documented Next fields as optional", () => {
-    type InferredSpec = NextSpec<Parameters<typeof schema.createCatalog>[0]>;
-
-    const spec: InferredSpec = {
-      routes: {
-        "/": {
-          page: {
-            root: "root",
-            elements: {
-              root: {
-                type: "Card",
-                props: {},
-                children: [],
-              },
-            },
-          },
-        },
-      },
-    };
-
-    expect(spec.routes["/"]?.page.root).toBe("root");
-  });
-});

packages/next/src/schema.ts

@@ -212,19 +212,15 @@ export const schema = defineSchema(
   (s) => ({
     spec: s.object({
       /** Root-level metadata applied as defaults */
-      metadata: {
-        ...s.object({
-          title: { ...s.any(), ...s.optional() },
-          description: { ...s.string(), ...s.optional() },
-          keywords: { ...s.array(s.string()), ...s.optional() },
-          openGraph: { ...s.any(), ...s.optional() },
-          twitter: { ...s.any(), ...s.optional() },
-          robots: { ...s.any(), ...s.optional() },
-          alternates: { ...s.any(), ...s.optional() },
-          icons: { ...s.any(), ...s.optional() },
-        }),
-        ...s.optional(),
-      },
+      metadata: s.object({
+        title: s.any(),
+        description: s.string(),
+        keywords: s.array(s.string()),
+        openGraph: s.any(),
+        twitter: s.any(),
+        robots: s.any(),
+        icons: s.any(),
+      }),
 
       /** Route definitions keyed by URL pattern */
       routes: s.record(
@@ -237,49 +233,46 @@ export const schema = defineSchema(
                 type: s.ref("catalog.components"),
                 props: s.propsOf("catalog.components"),
                 children: s.array(s.string()),
-                visible: { ...s.any(), ...s.optional() },
+                visible: s.any(),
               }),
             ),
-            state: { ...s.any(), ...s.optional() },
+            state: s.any(),
           }),
           /** Per-route metadata */
-          metadata: { ...s.any(), ...s.optional() },
+          metadata: s.any(),
           /** Layout key */
-          layout: { ...s.string(), ...s.optional() },
+          layout: s.string(),
           /** Loading state element tree */
-          loading: { ...s.any(), ...s.optional() },
+          loading: s.any(),
           /** Error state element tree */
-          error: { ...s.any(), ...s.optional() },
+          error: s.any(),
           /** Not-found element tree */
-          notFound: { ...s.any(), ...s.optional() },
+          notFound: s.any(),
           /** Server-side data loader name */
-          loader: { ...s.string(), ...s.optional() },
+          loader: s.string(),
           /** Static params for SSG */
-          staticParams: { ...s.any(), ...s.optional() },
+          staticParams: s.any(),
         }),
       ),
 
       /** Reusable layout element trees */
-      layouts: {
-        ...s.record(
-          s.object({
-            root: s.string(),
-            elements: s.record(
-              s.object({
-                type: s.ref("catalog.components"),
-                props: s.propsOf("catalog.components"),
-                children: s.array(s.string()),
-                visible: { ...s.any(), ...s.optional() },
-              }),
-            ),
-            state: { ...s.any(), ...s.optional() },
-          }),
-        ),
-        ...s.optional(),
-      },
+      layouts: s.record(
+        s.object({
+          root: s.string(),
+          elements: s.record(
+            s.object({
+              type: s.ref("catalog.components"),
+              props: s.propsOf("catalog.components"),
+              children: s.array(s.string()),
+              visible: s.any(),
+            }),
+          ),
+          state: s.any(),
+        }),
+      ),
 
       /** Global initial state */
-      state: { ...s.any(), ...s.optional() },
+      state: s.any(),
     }),
 
     catalog: s.object({

packages/react-email/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/react-email",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "React Email renderer for @json-render/core. JSON becomes HTML emails.",
   "keywords": [

packages/react-email/src/schema.ts

@@ -18,7 +18,7 @@ export const schema = defineSchema(
           type: s.ref("catalog.components"),
           props: s.propsOf("catalog.components"),
           children: s.array(s.string()),
-          visible: { ...s.any(), ...s.optional() },
+          visible: s.any(),
         }),
       ),
     }),
@@ -44,7 +44,6 @@ export const schema = defineSchema(
       "Use Heading (h1-h6) and Text for all text content. Raw strings are not supported.",
       "Button renders as a link styled as a button. Always provide both text and href.",
       "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.",
-      'REQUIRED FIELDS: Every element MUST include a "children" array. Leaf elements (text, badges, inputs, images) use an empty array: "children": []. Omitting "children" fails validation.',
     ],
   },
 );

packages/react-native/package.json

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

packages/react-native/src/hooks.ts

@@ -523,16 +523,10 @@ export function useUIStream({
           }
 
           // ---------------------------------------------------------------
-          // Post-stream: auto-fix deterministic issues. Lossless fixes (field
-          // relocations) apply immediately. Lossy fixes (pruned content) are
-          // held back while retries remain so validation fails and the model
-          // is asked to repair; they apply as a last resort once retries are
-          // exhausted, trading dropped content for a renderable spec.
+          // Post-stream: auto-fix deterministic issues (no retry needed)
           // ---------------------------------------------------------------
-          const { spec: fixedSpec, fixDetails } = autoFixSpec(currentSpec, {
-            lossy: retriesUsed >= maxRetries,
-          });
-          if (fixDetails.length > 0) {
+          const { spec: fixedSpec, fixes } = autoFixSpec(currentSpec);
+          if (fixes.length > 0) {
             currentSpec = fixedSpec;
             setSpec({ ...currentSpec });
           }
@@ -563,21 +557,6 @@ export function useUIStream({
           // continue loop
         }
 
-        // If retries were exhausted and validation still fails, report error
-        // instead of silently treating partial/invalid specs as complete.
-        if (enableValidation && retriesUsed >= maxRetries && currentSpec.root) {
-          const finalValidation = validateSpec(currentSpec);
-          if (!finalValidation.valid) {
-            const issueText = formatSpecIssues(finalValidation.issues);
-            const validationError = new Error(
-              `Spec validation failed after ${maxRetries} retries:\n${issueText}`,
-            );
-            setError(validationError);
-            onError?.(validationError);
-            return;
-          }
-        }
-
         onComplete?.(currentSpec);
       } catch (err) {
         if ((err as Error).name === "AbortError") {

packages/react-native/src/schema.ts

@@ -23,7 +23,7 @@ export const schema = defineSchema(
           /** Child element keys (flat reference) */
           children: s.array(s.string()),
           /** Visibility condition */
-          visible: { ...s.any(), ...s.optional() },
+          visible: s.any(),
         }),
       ),
     }),
@@ -59,7 +59,6 @@ export const schema = defineSchema(
       // 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.",
-      'REQUIRED FIELDS: Every element MUST include a "children" array. Leaf elements (text, badges, inputs, images) use an empty array: "children": []. Omitting "children" fails validation.',
       '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": { "statePath": "/todos", "key": "id" }, "children": ["todo-item"] }. Inside repeated children, use { "$item": "field" } to read a field from the current item, and { "$index": true } for the current array index. For two-way binding to an item field use { "$bindItem": "completed" }. Do NOT hardcode individual elements for each array item.',
 
       // Visible field placement

packages/react-pdf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/react-pdf",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "React PDF renderer for @json-render/core. JSON becomes PDF documents.",
   "keywords": [

packages/react-pdf/src/render.tsx

@@ -153,8 +153,7 @@ export async function renderToBuffer(
   options?: RenderOptions,
 ): Promise<Uint8Array> {
   const document = buildDocument(spec, options);
-  const buffer = await pdfRenderToBuffer(document as any);
-  return new Uint8Array(buffer.buffer, buffer.byteOffset, buffer.byteLength);
+  return pdfRenderToBuffer(document as any);
 }
 
 /**
@@ -163,7 +162,7 @@ export async function renderToBuffer(
 export async function renderToStream(
   spec: Spec,
   options?: RenderOptions,
-): Promise<NodeJS.ReadableStream> {
+): Promise<ReadableStream> {
   const document = buildDocument(spec, options);
   return pdfRenderToStream(document as any);
 }

packages/react-pdf/src/schema.ts

@@ -18,7 +18,7 @@ export const schema = defineSchema(
           type: s.ref("catalog.components"),
           props: s.propsOf("catalog.components"),
           children: s.array(s.string()),
-          visible: { ...s.any(), ...s.optional() },
+          visible: s.any(),
         }),
       ),
     }),
@@ -44,7 +44,6 @@ export const schema = defineSchema(
       "NEVER use emoji characters in any text content. The PDF font (Helvetica) does not support emojis and they will render as garbled/overlapping characters. Use plain text descriptions instead (e.g. 'Phone:' not '📞', 'Email:' not '📧').",
       "PAGE LAYOUT: Be conservative with content density. A portrait A4/LETTER page with 40pt margins fits roughly 700pt of content height. For single-page documents (flyers, posters, one-pagers), keep all content on one page using smaller font sizes (10-11), tighter gaps (4-8), less padding (10-15), and smaller images (max height 200). For multi-page documents (resumes, reports), pack content densely to avoid large blank areas at the bottom of pages. Use small margins (marginTop: 30, marginBottom: 20), tight spacing (gap: 4-6), and compact font sizes (9-11 for body text) so pages are well-filled. It is better to fit more content on fewer pages than to spread thin content across many pages.",
       "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.",
-      'REQUIRED FIELDS: Every element MUST include a "children" array. Leaf elements (text, badges, inputs, images) use an empty array: "children": []. Omitting "children" fails validation.',
     ],
   },
 );

packages/react-three-fiber/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/react-three-fiber",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "React Three Fiber renderer for @json-render/core. JSON becomes 3D scenes.",
   "keywords": [

packages/react/README.md

@@ -323,9 +323,7 @@ Any prop value can use data-driven expressions that resolve at render time. The
 }
 ```
 
-For two-way binding, use `{ "$bindState": "/path" }` on the natural value prop (e.g. `value`, `checked`, `pressed`). Inside repeat scopes, use `{ "$bindItem": "field" }` instead.
-
-To render a filtered list (kanban columns, status sections), put `repeat` and an `$item` visibility condition on the same container: `{ "repeat": { "statePath": "/tasks", "key": "id" }, "visible": { "$item": "status", "eq": "todo" }, "children": ["task-card"] }` renders one child per matching item. AND-composed `$state` conjuncts still gate the container itself. Components receive resolved `bindings` with the state path for each bound prop; use `useBoundProp(props.value, bindings?.value)` to get `[value, setValue]`.
+For two-way binding, use `{ "$bindState": "/path" }` on the natural value prop (e.g. `value`, `checked`, `pressed`). Inside repeat scopes, use `{ "$bindItem": "field" }` instead. Components receive resolved `bindings` with the state path for each bound prop; use `useBoundProp(props.value, bindings?.value)` to get `[value, setValue]`.
 
 ### `$template` and `$computed`
 

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/react",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "React renderer for @json-render/core. JSON becomes React components.",
   "keywords": [
@@ -57,8 +57,7 @@
     "@internal/typescript-config": "workspace:*",
     "@types/react": "19.2.3",
     "tsup": "^8.0.2",
-    "typescript": "^5.4.5",
-    "zod": "^4.3.6"
+    "typescript": "^5.4.5"
   },
   "peerDependencies": {
     "react": "^19.2.3"

packages/react/src/directives.test.tsx

@@ -1,110 +0,0 @@
-import { describe, it, expect } from "vitest";
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import { z } from "zod";
-import type { Spec } from "@json-render/core";
-import { defineDirective, resolvePropValue } from "@json-render/core";
-import {
-  JSONUIProvider,
-  Renderer,
-  type ComponentRenderProps,
-} from "./renderer";
-
-function Text({ element }: ComponentRenderProps<{ text: unknown }>) {
-  const value = element.props.text;
-  return <span data-testid="text">{value == null ? "" : String(value)}</span>;
-}
-
-const registry = { Text };
-
-const doubleDirective = defineDirective({
-  name: "$double",
-  description: "Double a numeric value.",
-  schema: z.object({ $double: z.unknown() }),
-  resolve(value, ctx) {
-    const resolved = resolvePropValue(value.$double, ctx);
-    return (resolved as number) * 2;
-  },
-});
-
-const upperDirective = defineDirective({
-  name: "$upper",
-  schema: z.object({ $upper: z.unknown() }),
-  resolve(value, ctx) {
-    const resolved = resolvePropValue(value.$upper, ctx);
-    return String(resolved).toUpperCase();
-  },
-});
-
-describe("directives in React renderer", () => {
-  it("resolves a custom directive in rendered props", () => {
-    const spec: Spec = {
-      root: "main",
-      elements: {
-        main: {
-          type: "Text",
-          props: { text: { $upper: "hello" } },
-          children: [],
-        },
-      },
-    };
-
-    render(
-      <JSONUIProvider
-        registry={registry}
-        directives={[doubleDirective, upperDirective]}
-      >
-        <Renderer spec={spec} registry={registry} />
-      </JSONUIProvider>,
-    );
-
-    expect(screen.getByTestId("text").textContent).toBe("HELLO");
-  });
-
-  it("resolves a directive that reads from state", () => {
-    const spec: Spec = {
-      root: "main",
-      elements: {
-        main: {
-          type: "Text",
-          props: { text: { $double: { $state: "/count" } } },
-          children: [],
-        },
-      },
-      state: { count: 7 },
-    };
-
-    render(
-      <JSONUIProvider
-        registry={registry}
-        initialState={{ count: 7 }}
-        directives={[doubleDirective, upperDirective]}
-      >
-        <Renderer spec={spec} registry={registry} />
-      </JSONUIProvider>,
-    );
-
-    expect(screen.getByTestId("text").textContent).toBe("14");
-  });
-
-  it("renders without directives (backward compat)", () => {
-    const spec: Spec = {
-      root: "main",
-      elements: {
-        main: {
-          type: "Text",
-          props: { text: "plain" },
-          children: [],
-        },
-      },
-    };
-
-    render(
-      <JSONUIProvider registry={registry}>
-        <Renderer spec={spec} registry={registry} />
-      </JSONUIProvider>,
-    );
-
-    expect(screen.getByTestId("text").textContent).toBe("plain");
-  });
-});

packages/react/src/renderer.tsx

@@ -17,19 +17,15 @@ import type {
   SchemaDefinition,
   StateStore,
   ComputedFunction,
-  DirectiveDefinition,
-  DirectiveRegistry,
 } from "@json-render/core";
 import {
   resolveElementProps,
   resolveBindings,
   resolveActionParam,
-  splitRepeatVisibility,
   evaluateVisibility,
   getByPath,
   isDevtoolsActive,
   subscribeDevtoolsActive,
-  createDirectiveRegistry,
   type PropResolutionContext,
   type VisibilityContext as CoreVisibilityContext,
 } from "@json-render/core";
@@ -158,18 +154,6 @@ function useFunctions(): Record<string, ComputedFunction> {
   return React.useContext(FunctionsContext);
 }
 
-// ---------------------------------------------------------------------------
-// DirectivesContext – provides custom directive registry to the element tree
-// ---------------------------------------------------------------------------
-
-const DirectivesContext = React.createContext<DirectiveRegistry | undefined>(
-  undefined,
-);
-
-function useDirectives(): DirectiveRegistry | undefined {
-  return React.useContext(DirectivesContext);
-}
-
 interface ElementRendererProps {
   element: UIElement;
   /** Spec key for this element. Used by the devtools picker. */
@@ -210,9 +194,8 @@ const ElementRenderer = React.memo(function ElementRenderer({
   const { execute } = useActions();
   const { getSnapshot, state: watchState } = useStateStore();
   const functions = useFunctions();
-  const directives = useDirectives();
 
-  // Build context with repeat scope, $computed functions, and custom directives
+  // Build context with repeat scope and $computed functions
   const fullCtx: PropResolutionContext = useMemo(() => {
     const base: PropResolutionContext = repeatScope
       ? {
@@ -223,26 +206,14 @@ const ElementRenderer = React.memo(function ElementRenderer({
         }
       : { ...ctx };
     base.functions = functions;
-    base.directives = directives;
     return base;
-  }, [ctx, repeatScope, functions, directives]);
-
-  // A repeat container whose own visible condition references $item/$index
-  // outside any repeat scope is (partly) a per-item filter: models and humans
-  // write {"repeat": ..., "visible": {"$item": "status", "eq": "todo"}} to
-  // mean a filtered list. AND-composed $state conjuncts still gate the
-  // container itself so a false gate hides the shell, not just the items.
-  const repeatVisibility =
-    element.repeat !== undefined && repeatScope == null
-      ? splitRepeatVisibility(element.visible)
-      : { container: element.visible, itemFilter: undefined };
-  const repeatItemFilter = repeatVisibility.itemFilter;
+  }, [ctx, repeatScope, functions]);
 
   // Evaluate visibility (now supports $item/$index inside repeat scopes)
   const isVisible =
-    repeatVisibility.container === undefined
+    element.visible === undefined
       ? true
-      : evaluateVisibility(repeatVisibility.container, fullCtx);
+      : evaluateVisibility(element.visible, fullCtx);
 
   // Create emit function that resolves events to action bindings.
   // Must be called before any early return to satisfy Rules of Hooks.
@@ -403,7 +374,6 @@ const ElementRenderer = React.memo(function ElementRenderer({
       registry={registry}
       loading={loading}
       fallback={fallback}
-      itemFilter={repeatItemFilter}
     />
   ) : (
     resolvedElement.children?.map((childKey) => {
@@ -472,40 +442,22 @@ function RepeatChildren({
   registry,
   loading,
   fallback,
-  itemFilter,
 }: {
   element: UIElement;
   spec: Spec;
   registry: ComponentRegistry;
   loading?: boolean;
   fallback?: ComponentRenderer;
-  itemFilter?: UIElement["visible"];
 }) {
   const { state } = useStateStore();
-  const { ctx } = useVisibility();
   const repeat = element.repeat!;
   const statePath = repeat.statePath;
 
   const items = (getByPath(state, statePath) as unknown[] | undefined) ?? [];
 
-  // Per-item filter from the container's own $item/$index visible condition.
-  // Original indices are preserved so item state paths still point at the
-  // right array entry.
-  const entries = items
-    .map((itemValue, index) => ({ itemValue, index }))
-    .filter(
-      ({ itemValue, index }) =>
-        itemFilter === undefined ||
-        evaluateVisibility(itemFilter, {
-          ...ctx,
-          repeatItem: itemValue,
-          repeatIndex: index,
-        }),
-    );
-
   return (
     <>
-      {entries.map(({ itemValue, index }) => {
+      {items.map((itemValue, index) => {
         // Use a stable key: prefer key field, fall back to index
         const key =
           repeat.key && typeof itemValue === "object" && itemValue !== null
@@ -602,8 +554,6 @@ export interface JSONUIProviderProps {
   >;
   /** Named functions for `$computed` expressions in props */
   functions?: Record<string, ComputedFunction>;
-  /** Custom directives for user-defined `$`-prefixed dynamic values */
-  directives?: DirectiveDefinition[];
   /** Callback when state changes (uncontrolled mode) */
   onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void;
   children: ReactNode;
@@ -620,14 +570,9 @@ export function JSONUIProvider({
   navigate,
   validationFunctions,
   functions,
-  directives,
   onStateChange,
   children,
 }: JSONUIProviderProps) {
-  const directiveRegistry = useMemo(
-    () => (directives ? createDirectiveRegistry(directives) : undefined),
-    [directives],
-  );
   return (
     <StateProvider
       store={store}
@@ -638,10 +583,8 @@ export function JSONUIProvider({
         <ValidationProvider customFunctions={validationFunctions}>
           <ActionProvider handlers={handlers} navigate={navigate}>
             <FunctionsContext.Provider value={functions ?? EMPTY_FUNCTIONS}>
-              <DirectivesContext.Provider value={directiveRegistry}>
-                {children}
-                <ConfirmationDialogManager />
-              </DirectivesContext.Provider>
+              {children}
+              <ConfirmationDialogManager />
             </FunctionsContext.Provider>
           </ActionProvider>
         </ValidationProvider>
@@ -847,8 +790,6 @@ export interface CreateRendererProps {
   onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void;
   /** Named functions for `$computed` expressions in props */
   functions?: Record<string, ComputedFunction>;
-  /** Custom directives for user-defined `$`-prefixed dynamic values */
-  directives?: DirectiveDefinition[];
   /** Whether the spec is currently loading/streaming */
   loading?: boolean;
   /** Fallback component for unknown types */
@@ -903,15 +844,9 @@ export function createRenderer<
     onAction,
     onStateChange,
     functions,
-    directives,
     loading,
     fallback,
   }: CreateRendererProps) {
-    const directiveRegistry = useMemo(
-      () => (directives ? createDirectiveRegistry(directives) : undefined),
-      [directives],
-    );
-
     // Wrap onAction with a Proxy so any action name routes to the callback
     const actionHandlers = onAction
       ? new Proxy(
@@ -939,15 +874,13 @@ export function createRenderer<
           <ValidationProvider>
             <ActionProvider handlers={actionHandlers}>
               <FunctionsContext.Provider value={functions ?? EMPTY_FUNCTIONS}>
-                <DirectivesContext.Provider value={directiveRegistry}>
-                  <Renderer
-                    spec={spec}
-                    registry={registry}
-                    loading={loading}
-                    fallback={fallback}
-                  />
-                  <ConfirmationDialogManager />
-                </DirectivesContext.Provider>
+                <Renderer
+                  spec={spec}
+                  registry={registry}
+                  loading={loading}
+                  fallback={fallback}
+                />
+                <ConfirmationDialogManager />
               </FunctionsContext.Provider>
             </ActionProvider>
           </ValidationProvider>

packages/react/src/repeat-filter.test.tsx

@@ -1,164 +0,0 @@
-import { describe, it, expect } from "vitest";
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import type { Spec } from "@json-render/core";
-import {
-  JSONUIProvider,
-  Renderer,
-  type ComponentRenderProps,
-} from "./renderer";
-
-function Stack({ children }: ComponentRenderProps) {
-  return <div data-testid="stack">{children}</div>;
-}
-
-function Text({ element }: ComponentRenderProps<{ text: unknown }>) {
-  return <span data-testid="text">{String(element.props.text)}</span>;
-}
-
-const registry = { Stack, Text };
-
-const tasks = [
-  { id: "1", title: "Auth flow", status: "todo" },
-  { id: "2", title: "Push notifications", status: "in-progress" },
-  { id: "3", title: "Dark mode", status: "todo" },
-  { id: "4", title: "App icon", status: "done" },
-];
-
-function mount(spec: Spec) {
-  return render(
-    <JSONUIProvider registry={registry} initialState={spec.state ?? {}}>
-      <Renderer spec={spec} registry={registry} />
-    </JSONUIProvider>,
-  );
-}
-
-describe("repeat with $item visible on the container (filtered list)", () => {
-  it("renders only the items matching the filter", () => {
-    mount({
-      root: "column",
-      state: { tasks },
-      elements: {
-        column: {
-          type: "Stack",
-          props: {},
-          repeat: { statePath: "/tasks", key: "id" },
-          visible: { $item: "status", eq: "todo" },
-          children: ["card"],
-        },
-        card: {
-          type: "Text",
-          props: { text: { $item: "title" } },
-          children: [],
-        },
-      },
-    });
-    const texts = screen.getAllByTestId("text").map((n) => n.textContent);
-    expect(texts).toEqual(["Auth flow", "Dark mode"]);
-  });
-
-  it("renders every item without a filter", () => {
-    mount({
-      root: "column",
-      state: { tasks },
-      elements: {
-        column: {
-          type: "Stack",
-          props: {},
-          repeat: { statePath: "/tasks", key: "id" },
-          children: ["card"],
-        },
-        card: {
-          type: "Text",
-          props: { text: { $item: "title" } },
-          children: [],
-        },
-      },
-    });
-    expect(screen.getAllByTestId("text")).toHaveLength(4);
-  });
-
-  it("still hides the whole list for a container-level $state condition", () => {
-    mount({
-      root: "column",
-      state: { tasks, showTasks: false },
-      elements: {
-        column: {
-          type: "Stack",
-          props: {},
-          repeat: { statePath: "/tasks", key: "id" },
-          visible: { $state: "/showTasks", eq: true },
-          children: ["card"],
-        },
-        card: {
-          type: "Text",
-          props: { text: { $item: "title" } },
-          children: [],
-        },
-      },
-    });
-    expect(screen.queryAllByTestId("text")).toHaveLength(0);
-  });
-
-  it("keeps per-child $item visible working inside the repeat scope", () => {
-    mount({
-      root: "column",
-      state: { tasks },
-      elements: {
-        column: {
-          type: "Stack",
-          props: {},
-          repeat: { statePath: "/tasks", key: "id" },
-          children: ["card"],
-        },
-        card: {
-          type: "Text",
-          props: { text: { $item: "title" } },
-          visible: { $item: "status", eq: "done" },
-          children: [],
-        },
-      },
-    });
-    const texts = screen.getAllByTestId("text").map((n) => n.textContent);
-    expect(texts).toEqual(["App icon"]);
-  });
-});
-
-describe("mixed container/item visibility on repeat containers", () => {
-  const mixedSpec = (showTasks: boolean): Spec => ({
-    root: "column",
-    state: { tasks, showTasks },
-    elements: {
-      column: {
-        type: "Stack",
-        props: {},
-        repeat: { statePath: "/tasks", key: "id" },
-        visible: {
-          $and: [
-            { $state: "/showTasks", eq: true },
-            { $item: "status", eq: "todo" },
-          ],
-        },
-        children: ["card"],
-      },
-      card: {
-        type: "Text",
-        props: { text: { $item: "title" } },
-        children: [],
-      },
-    },
-  });
-
-  it("hides the container shell when the $state gate is false", () => {
-    mount(mixedSpec(false));
-    expect(screen.queryAllByTestId("stack")).toHaveLength(0);
-    expect(screen.queryAllByTestId("text")).toHaveLength(0);
-  });
-
-  it("filters items when the $state gate is true", () => {
-    mount(mixedSpec(true));
-    expect(screen.getAllByTestId("stack")).toHaveLength(1);
-    const texts = screen.getAllByTestId("text").map((n) => n.textContent);
-    expect(texts).toEqual(["Auth flow", "Dark mode"]);
-  });
-});

packages/react/src/schema.ts

@@ -23,7 +23,7 @@ export const schema = defineSchema(
           /** Child element keys (flat reference) */
           children: s.array(s.string()),
           /** Visibility condition */
-          visible: { ...s.any(), ...s.optional() },
+          visible: s.any(),
         }),
       ),
     }),
@@ -77,8 +77,6 @@ export const schema = defineSchema(
       // 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.",
-      'REQUIRED FIELDS: Every element MUST include a "children" array. Leaf elements (text, badges, inputs, images) use an empty array: "children": []. Omitting "children" fails validation.',
-      'FILTERED LISTS: To render only the items matching a field value (kanban columns, tabbed lists, status sections), put "repeat" and a "visible" condition with $item on the same container element: {"repeat": {"statePath": "/tasks", "key": "id"}, "visible": {"$item": "status", "eq": "todo"}} renders one child per matching item. A visible condition object must use exactly one of $state, $item, or $index — never combine them in one object.',
 
       // Field placement
       'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"<ComponentName>","props":{},"visible":{"$state":"/tab","eq":"home"},"children":[...]}.',

packages/redux/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/redux",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "Redux adapter for json-render StateStore",
   "keywords": [

packages/remotion/package.json

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

packages/shadcn-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/shadcn-svelte",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "shadcn-svelte component library for @json-render/svelte. JSON becomes beautiful Tailwind-styled Svelte components.",
   "keywords": [

packages/shadcn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/shadcn",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "shadcn/ui component library for @json-render/core. JSON becomes beautiful Tailwind-styled React components.",
   "keywords": [

packages/solid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/solid",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "SolidJS renderer for @json-render/core. JSON becomes Solid components.",
   "keywords": [

packages/solid/src/renderer.tsx

@@ -19,8 +19,6 @@ import type {
   SchemaDefinition,
   StateStore,
   ComputedFunction,
-  DirectiveDefinition,
-  DirectiveRegistry,
 } from "@json-render/core";
 import {
   resolveElementProps,
@@ -30,7 +28,6 @@ import {
   getByPath,
   isDevtoolsActive,
   subscribeDevtoolsActive,
-  createDirectiveRegistry,
   type PropResolutionContext,
   type VisibilityContext as CoreVisibilityContext,
 } from "@json-render/core";
@@ -114,18 +111,6 @@ function useFunctions(): Record<string, ComputedFunction> {
   return useContext(FunctionsContext) ?? EMPTY_FUNCTIONS;
 }
 
-// ---------------------------------------------------------------------------
-// DirectivesContext – provides custom directive registry to the element tree
-// ---------------------------------------------------------------------------
-
-const DirectivesContext = createContext<DirectiveRegistry | undefined>(
-  undefined,
-);
-
-function useDirectives(): DirectiveRegistry | undefined {
-  return useContext(DirectivesContext);
-}
-
 interface ElementRendererProps {
   element: UIElement;
   /** Spec key for this element. Used by the devtools picker. */
@@ -157,9 +142,8 @@ function ElementRenderer(props: ElementRendererProps) {
   const stateStore = useStateStore();
   const getSnapshot = () => stateStore.getSnapshot();
   const functions = useFunctions();
-  const directives = useDirectives();
 
-  // Build context with repeat scope, $computed functions, and custom directives
+  // Build context with repeat scope and $computed functions
   const fullCtx = createMemo<PropResolutionContext>(() => {
     const repeatItem = repeatScope?.item;
     const repeatIndex = repeatScope?.index;
@@ -173,7 +157,6 @@ function ElementRenderer(props: ElementRendererProps) {
       ...(repeatIndex !== undefined ? { repeatIndex } : {}),
       ...(repeatBasePath !== undefined ? { repeatBasePath } : {}),
       functions,
-      directives,
     };
   });
 
@@ -536,8 +519,6 @@ export interface JSONUIProviderProps {
   >;
   /** Named functions for `$computed` expressions in props */
   functions?: Record<string, ComputedFunction>;
-  /** Custom directives for user-defined `$`-prefixed dynamic values */
-  directives?: DirectiveDefinition[];
   /** Callback when state changes (uncontrolled mode) */
   onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void;
   children: JSX.Element;
@@ -547,9 +528,6 @@ export interface JSONUIProviderProps {
  * Combined provider for all JSONUI contexts
  */
 export function JSONUIProvider(props: JSONUIProviderProps) {
-  const directiveRegistry = createMemo(() =>
-    props.directives ? createDirectiveRegistry(props.directives) : undefined,
-  );
   return (
     <StateProvider
       store={props.store}
@@ -562,10 +540,8 @@ export function JSONUIProvider(props: JSONUIProviderProps) {
             <FunctionsContext.Provider
               value={props.functions ?? EMPTY_FUNCTIONS}
             >
-              <DirectivesContext.Provider value={directiveRegistry()}>
-                {props.children}
-                <ConfirmationDialogManager />
-              </DirectivesContext.Provider>
+              {props.children}
+              <ConfirmationDialogManager />
             </FunctionsContext.Provider>
           </ActionProvider>
         </ValidationProvider>
@@ -772,8 +748,6 @@ export interface CreateRendererProps {
   onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void;
   /** Named functions for `$computed` expressions in props */
   functions?: Record<string, ComputedFunction>;
-  /** Custom directives for user-defined `$`-prefixed dynamic values */
-  directives?: DirectiveDefinition[];
   /** Whether the spec is currently loading/streaming */
   loading?: boolean;
   /** Fallback component for unknown types */
@@ -822,10 +796,6 @@ export function createRenderer<
 
   // Return the renderer component
   return function CatalogRenderer(props: CreateRendererProps) {
-    const directiveRegistry = createMemo(() =>
-      props.directives ? createDirectiveRegistry(props.directives) : undefined,
-    );
-
     // Wrap onAction with a Proxy so any action name routes to the callback
     const actionHandlers = () =>
       props.onAction
@@ -856,15 +826,13 @@ export function createRenderer<
               <FunctionsContext.Provider
                 value={props.functions ?? EMPTY_FUNCTIONS}
               >
-                <DirectivesContext.Provider value={directiveRegistry()}>
-                  <Renderer
-                    spec={props.spec}
-                    registry={registry}
-                    loading={props.loading}
-                    fallback={props.fallback}
-                  />
-                  <ConfirmationDialogManager />
-                </DirectivesContext.Provider>
+                <Renderer
+                  spec={props.spec}
+                  registry={registry}
+                  loading={props.loading}
+                  fallback={props.fallback}
+                />
+                <ConfirmationDialogManager />
               </FunctionsContext.Provider>
             </ActionProvider>
           </ValidationProvider>

packages/solid/src/schema.ts

@@ -23,7 +23,7 @@ export const schema = defineSchema(
           /** Child element keys (flat reference) */
           children: s.array(s.string()),
           /** Visibility condition */
-          visible: { ...s.any(), ...s.optional() },
+          visible: s.any(),
         }),
       ),
     }),
@@ -77,7 +77,6 @@ export const schema = defineSchema(
       // 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.",
-      'REQUIRED FIELDS: Every element MUST include a "children" array. Leaf elements (text, badges, inputs, images) use an empty array: "children": []. Omitting "children" fails validation.',
 
       // Field placement
       'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"<ComponentName>","props":{},"visible":{"$state":"/tab","eq":"home"},"children":[...]}.',

packages/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/svelte",
-  "version": "0.19.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "description": "Svelte 5 renderer for @json-render/core. JSON becomes Svelte components.",
   "keywords": [

packages/svelte/src/CatalogRenderer.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import type { ComputedFunction, DirectiveDefinition, Spec, StateStore } from "@json-render/core";
+  import type { ComputedFunction, Spec, StateStore } from "@json-render/core";
   import type { ComponentRenderer, ComponentRegistry } from "./renderer.js";
 
   export interface CatalogRendererProps {
@@ -10,8 +10,6 @@
     onAction?: (actionName: string, params?: Record<string, unknown>) => void;
     onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void;
     functions?: Record<string, ComputedFunction>;
-    /** Custom directives for user-defined `$`-prefixed dynamic values */
-    directives?: DirectiveDefinition[];
     loading?: boolean;
     fallback?: ComponentRenderer;
   }
@@ -30,7 +28,6 @@
     onAction,
     onStateChange,
     functions,
-    directives,
     loading = false,
     fallback,
   }: CatalogRendererProps = $props();
@@ -53,7 +50,6 @@
   initialState={state}
   handlers={actionHandlers}
   {functions}
-  {directives}
   {onStateChange}>
   <Renderer {spec} {registry} {loading} {fallback} />
 </JsonUIProvider>