fix dashboard build

Introduces a `StateStore` interface that lets users plug in their own state management (Redux, Zustand, XState, etc.) instead of being locked into the internal `useState`-based store.

- Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
- `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
- When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
- When `store` is omitted, everything works exactly as before (fully backward compatible)
- Applied across all platform packages: react, react-native, react-pdf

.changeset/config.json

@@ -10,12 +10,7 @@
       "@json-render/shadcn",
       "@json-render/react-native",
       "@json-render/remotion",
-      "@json-render/codegen",
-      "@json-render/zustand",
-      "@json-render/redux",
-      "@json-render/jotai",
-      "@json-render/vue",
-      "@json-render/xstate"
+      "@json-render/codegen"
     ]
   ],
   "linked": [],
@@ -23,7 +18,7 @@
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
   "privatePackages": {
-    "version": true,
+    "version": false,
     "tag": false
   }
 }

README.md

@@ -5,18 +5,15 @@
 Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output.
 
 ```bash
-# for React
 npm install @json-render/core @json-render/react
-# for React with pre-built shadcn/ui components
+# pre-built shadcn/ui components
 npm install @json-render/shadcn
-# or for React Native
+# or for mobile
 npm install @json-render/core @json-render/react-native
 # or for video
 npm install @json-render/core @json-render/remotion
 # or for PDF documents
 npm install @json-render/core @json-render/react-pdf
-# or for Vue
-npm install @json-render/core @json-render/vue
 ```
 
 ## Why json-render?
@@ -26,7 +23,7 @@ json-render is a **Generative UI** framework: AI generates interfaces from natur
 - **Guardrailed** - AI can only use components in your catalog
 - **Predictable** - JSON output matches your schema, every time
 - **Fast** - Stream and render progressively as the model responds
-- **Cross-Platform** - React, Vue (web), React Native (mobile) from the same catalog
+- **Cross-Platform** - React (web) and React Native (mobile) from the same catalog
 - **Batteries Included** - 36 pre-built shadcn/ui components ready to use
 
 ## Quick Start
@@ -35,7 +32,7 @@ json-render is a **Generative UI** framework: AI generates interfaces from natur
 
 ```typescript
 import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/react/schema";
+import { schema } from "@json-render/react";
 import { z } from "zod";
 
 const catalog = defineCatalog(schema, {
@@ -113,7 +110,6 @@ function Dashboard({ spec }) {
 |---------|-------------|
 | `@json-render/core` | Schemas, catalogs, AI prompts, dynamic props, SpecStream utilities |
 | `@json-render/react` | React renderer, contexts, hooks |
-| `@json-render/vue` | Vue 3 renderer, composables, providers |
 | `@json-render/shadcn` | 36 pre-built shadcn/ui components (Radix UI + Tailwind CSS) |
 | `@json-render/react-native` | React Native renderer with standard mobile components |
 | `@json-render/remotion` | Remotion video renderer, timeline schema |
@@ -121,7 +117,6 @@ function Dashboard({ spec }) {
 | `@json-render/redux` | Redux / Redux Toolkit adapter for `StateStore` |
 | `@json-render/zustand` | Zustand adapter for `StateStore` |
 | `@json-render/jotai` | Jotai adapter for `StateStore` |
-| `@json-render/xstate` | XState Store (atom) adapter for `StateStore` |
 
 ## Renderers
 
@@ -129,7 +124,7 @@ function Dashboard({ spec }) {
 
 ```tsx
 import { defineRegistry, Renderer } from "@json-render/react";
-import { schema } from "@json-render/react/schema";
+import { schema } from "@json-render/react";
 
 // Flat spec format (root key + elements map)
 const spec = {
@@ -153,32 +148,11 @@ const { registry } = defineRegistry(catalog, { components });
 <Renderer spec={spec} registry={registry} />
 ```
 
-### Vue (UI)
-
-```typescript
-import { h } from "vue";
-import { defineRegistry, Renderer } from "@json-render/vue";
-import { schema } from "@json-render/vue/schema";
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: ({ props, children }) =>
-      h("div", { class: "card" }, [h("h3", null, props.title), children]),
-    Button: ({ props, emit }) =>
-      h("button", { onClick: () => emit("press") }, props.label),
-  },
-});
-
-// In your Vue component template:
-// <Renderer :spec="spec" :registry="registry" />
-```
-
 ### shadcn/ui (Web)
 
 ```tsx
 import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/react/schema";
-import { defineRegistry, Renderer } from "@json-render/react";
+import { schema, defineRegistry, Renderer } from "@json-render/react";
 import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
 import { shadcnComponents } from "@json-render/shadcn";
 
@@ -342,12 +316,10 @@ Any prop value can be data-driven using expressions:
 }
 ```
 
-Expression forms:
+Two expression forms:
 
 - **`{ "$state": "/state/key" }`** - reads a value from the state model
-- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** - evaluates a condition and picks a branch
-- **`{ "$template": "Hello, ${/user/name}!" }`** - interpolates state values into strings
-- **`{ "$computed": "fn", "args": { ... } }`** - calls a registered function with resolved args
+- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** - evaluates a condition (same syntax as visibility conditions) and picks a branch
 
 ### Actions
 
@@ -363,22 +335,6 @@ Components can trigger actions, including the built-in `setState` action:
 
 The `setState` action updates the state model directly, which re-evaluates visibility conditions and dynamic prop expressions.
 
-### State Watchers
-
-React to state changes by triggering actions:
-
-```json
-{
-  "type": "Select",
-  "props": { "value": { "$bindState": "/form/country" }, "options": ["US", "Canada", "UK"] },
-  "watch": {
-    "/form/country": { "action": "loadCities", "params": { "country": { "$state": "/form/country" } } }
-  }
-}
-```
-
-`watch` is a top-level field on elements (sibling of `type`/`props`/`children`). Watchers fire when the watched value changes, not on initial render.
-
 ---
 
 ## Demo
@@ -394,8 +350,6 @@ pnpm dev
 - http://dashboard-demo.json-render.localhost:1355 - Example Dashboard
 - http://remotion-demo.json-render.localhost:1355 - Remotion Video Example
 - Chat Example: run `pnpm dev` in `examples/chat`
-- Vue Example: run `pnpm dev` in `examples/vue`
-- Vite Renderers (React + Vue): run `pnpm dev` in `examples/vite-renderers`
 - React Native example: run `npx expo start` in `examples/react-native`
 
 ## How It Works

apps/web/CHANGELOG.md

@@ -1,28 +0,0 @@
-# web
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-  - @json-render/react@0.10.0
-  - @json-render/codegen@0.10.0
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies [b103676]
-  - @json-render/react@0.9.1
-  - @json-render/core@0.9.1
-  - @json-render/codegen@0.9.1
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [1d755c1]
-  - @json-render/core@0.9.0
-  - @json-render/react@0.9.0
-  - @json-render/codegen@0.9.0

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

@@ -67,7 +67,7 @@ A2UI uses an adjacency list model - a flat list of components with ID references
 
 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';
 import { z } from 'zod';
 
 // A2UI BoundValue schema

apps/web/app/(main)/docs/adaptive-cards/page.mdx

@@ -90,7 +90,7 @@ Define a catalog matching the Adaptive Cards element types:
 
 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';
 import { z } from 'zod';
 
 // Common Adaptive Cards properties

apps/web/app/(main)/docs/ag-ui/page.mdx

@@ -151,7 +151,7 @@ Create a catalog for UI components that agents can render:
 
 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';
 import { z } from 'zod';
 
 export const aguiCatalog = defineCatalog(schema, {

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

@@ -11,7 +11,7 @@ Creates a type-safe catalog definition with schema validation.
 
 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';
 
 function defineCatalog<T extends ZodType>(
   s: T,
@@ -119,7 +119,7 @@ The schema for flat UI element trees. This is exported from @json-render/react.
 
 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';
 
 // schema defines:
 // - Spec shape: { root: string, elements: Record<string, UIElement> }

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

@@ -109,27 +109,6 @@ const { registry } = defineRegistry(catalog, {
 type Registry = Record<string, React.ComponentType<ComponentRenderProps>>;
 ```
 
-### JSONUIProvider
-
-Convenience wrapper that combines `StateProvider`, `VisibilityProvider`, `ValidationProvider`, and `ActionProvider`. Accepts all their props plus:
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `functions` | `Record<string, ComputedFunction>` | Named functions for `$computed` expressions in props |
-
-```tsx
-<JSONUIProvider
-  spec={spec}
-  catalog={catalog}
-  handlers={{ submit: async () => { /* ... */ } }}
-  functions={{ fullName: (args) => `${args.first} ${args.last}` }}
->
-  <Renderer spec={spec} registry={registry} />
-</JSONUIProvider>
-```
-
-The `functions` prop is also available on `createRenderer`.
-
 ### Component Props (via defineRegistry)
 
 ```tsx
@@ -258,15 +237,6 @@ const {
 
 `ValidationConfig` is `{ checks?: ValidationCheck[], validateOn?: 'change' | 'blur' | 'submit' }`.
 
-### useOptionalValidation
-
-Non-throwing variant of `useValidation()`. Returns `null` when no `ValidationProvider` is present, instead of throwing. Useful in components that may or may not be rendered inside a validation context.
-
-```typescript
-const validation = useOptionalValidation();
-// ValidationContextValue | null
-```
-
 ### useBoundProp
 
 Two-way binding helper for `$bindState` / `$bindItem` expressions. Returns `[value, setValue]` where `setValue` writes back to the bound state path.

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

@@ -1,246 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("docs/api/vue")
-
-# @json-render/vue
-
-Vue 3 components, providers, and composables.
-
-## Providers
-
-### StateProvider
-
-```vue
-<StateProvider :initial-state="object" :on-state-change="fn">
-  <!-- children -->
-</StateProvider>
-```
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `store` | `StateStore` | External store (controlled mode). When provided, `initialState` and `onStateChange` are ignored. |
-| `initialState` | `Record<string, unknown>` | Initial state model (uncontrolled mode). |
-| `onStateChange` | `(changes: Array<{ path: string; value: unknown }>) => void` | Callback when state changes (uncontrolled mode). Called once per `set` or `update` with all changed entries. |
-
-#### External Store (Controlled Mode)
-
-Pass a `StateStore` to bypass the internal state and wire json-render to any state management library:
-
-```typescript
-import { createStateStore, type StateStore } from "@json-render/vue";
-
-const store = createStateStore({ count: 0 });
-```
-
-```vue
-<StateProvider :store="store">
-  <!-- children -->
-</StateProvider>
-```
-
-```typescript
-// Mutate from anywhere — Vue re-renders automatically:
-store.set("/count", 1);
-```
-
-### ActionProvider
-
-```vue
-<ActionProvider :handlers="Record<string, ActionHandler>" :navigate="fn">
-  <!-- children -->
-</ActionProvider>
-
-// type ActionHandler = (params: Record<string, unknown>) => void | Promise<void>;
-```
-
-### VisibilityProvider
-
-```vue
-<VisibilityProvider>
-  <!-- children -->
-</VisibilityProvider>
-```
-
-`VisibilityProvider` reads state from the parent `StateProvider` automatically. Conditions in specs use the `VisibilityCondition` format with `$state` paths (e.g. `{ "$state": "/path" }`, `{ "$state": "/path", "eq": value }`). See [visibility](/docs/visibility) for the full syntax.
-
-### ValidationProvider
-
-```vue
-<ValidationProvider :custom-functions="Record<string, ValidationFunction>">
-  <!-- children -->
-</ValidationProvider>
-
-// type ValidationFunction = (value: unknown, args?: object) => boolean | Promise<boolean>;
-```
-
-## defineRegistry
-
-Create a type-safe component registry from a catalog. Components receive `props`, `children`, `emit`, `on`, and `loading` with catalog-inferred types.
-
-When the catalog declares actions, the `actions` field is required. When the catalog has no actions (e.g. `actions: {}`), the field is optional. When passing stubs, any `async () => {}` is sufficient.
-
-```typescript
-import { h } from "vue";
-import { defineRegistry } from "@json-render/vue";
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: ({ props, children }) =>
-      h("div", { class: "card" }, [h("h3", null, props.title), children]),
-    Button: ({ props, emit }) =>
-      h("button", { onClick: () => emit("press") }, props.label),
-  },
-  // Required when catalog declares actions:
-  actions: {
-    submit: async (params) => { /* ... */ },
-  },
-});
-
-// Pass to <Renderer>
-// <Renderer :spec="spec" :registry="registry" />
-```
-
-## Components
-
-### Renderer
-
-```vue
-<Renderer
-  :spec="Spec"           // The UI spec to render
-  :registry="Registry"   // Component registry (from defineRegistry)
-  :loading="boolean"     // Optional loading state
-  :fallback="Component"  // Optional fallback for unknown types
-/>
-```
-
-### Component Props (via defineRegistry)
-
-```typescript
-import type { VNode } from "vue";
-
-interface ComponentContext<P> {
-  props: P;                          // Typed props from catalog
-  children?: VNode | VNode[];        // Rendered children (for container components)
-  emit: (event: string) => void;     // Emit a named event (always defined)
-  on: (event: string) => EventHandle; // Get event handle with metadata
-  loading?: boolean;
-  bindings?: Record<string, string>; // State paths from $bindState/$bindItem expressions
-}
-
-interface EventHandle {
-  emit: () => void;              // Fire the event
-  shouldPreventDefault: boolean; // Whether any binding requested preventDefault
-  bound: boolean;                // Whether any handler is bound
-}
-```
-
-Use `emit("press")` for simple event firing. Use `on("click")` when you need metadata like `shouldPreventDefault`:
-
-```typescript
-Link: ({ props, on }) => {
-  const click = on("click");
-  return h("a", {
-    href: props.href,
-    onClick: (e: MouseEvent) => {
-      if (click.shouldPreventDefault) e.preventDefault();
-      click.emit();
-    },
-  }, props.label);
-},
-```
-
-### BaseComponentProps
-
-Catalog-agnostic base type for building reusable component libraries that are not tied to a specific catalog:
-
-```typescript
-import type { BaseComponentProps } from "@json-render/vue";
-
-const Card = ({ props, children }: BaseComponentProps<{ title?: string }>) =>
-  h("div", null, [props.title, children]);
-```
-
-## Composables
-
-### useStateStore
-
-```typescript
-const {
-  state,   // ShallowRef<StateModel> — access with state.value
-  get,     // (path: string) => unknown
-  set,     // (path: string, value: unknown) => void
-  update,  // (updates: Record<string, unknown>) => void
-} = useStateStore();
-```
-
-> **Note:** `state` is a `ShallowRef<StateModel>`, not a plain object. Use `state.value` to read the current state. This differs from the React renderer.
-
-### useStateValue
-
-```typescript
-const value = useStateValue(path: string); // ComputedRef<T | undefined>
-```
-
-Returns a `ComputedRef` that automatically updates when the state at `path` changes. Use `.value` to access the current value.
-
-### useStateBinding (deprecated)
-
-> **Deprecated.** Use `$bindState` expressions with `bindings` prop instead.
-
-```typescript
-const [value, setValue] = useStateBinding(path: string);
-// value: ComputedRef<T | undefined>
-// setValue: (value: T) => void
-```
-
-### useActions
-
-```typescript
-const { execute } = useActions();
-// execute(binding: ActionBinding) => Promise<void>
-```
-
-### useAction
-
-```typescript
-const { execute, isLoading } = useAction(binding: ActionBinding);
-// execute: () => Promise<void>
-// isLoading: ComputedRef<boolean>
-```
-
-### useIsVisible
-
-```typescript
-const isVisible = useIsVisible(condition?: VisibilityCondition);
-```
-
-### useFieldValidation
-
-```typescript
-const {
-  state,     // ComputedRef<FieldValidationState>
-  validate,  // () => ValidationResult
-  touch,     // () => void
-  clear,     // () => void
-  errors,    // ComputedRef<string[]>
-  isValid,   // ComputedRef<boolean>
-} = useFieldValidation(path: string, config?: ValidationConfig);
-```
-
-`ValidationConfig` is `{ checks?: ValidationCheck[], validateOn?: 'change' | 'blur' | 'submit' }`.
-
-## Differences from `@json-render/react`
-
-| API | React | Vue | Note |
-|-----|-------|-----|------|
-| `useStateStore().state` | `StateModel` (plain object) | `ShallowRef<StateModel>` | Vue reactivity; use `state.value` |
-| `useStateValue()` | `T \| undefined` | `ComputedRef<T \| undefined>` | Vue reactivity; use `.value` |
-| `useStateBinding()` | `[T \| undefined, setter]` | `[ComputedRef<T \| undefined>, setter]` | Vue reactivity; use `value.value` |
-| `useAction().isLoading` | `boolean` | `ComputedRef<boolean>` | Vue reactivity; use `.value` |
-| `useFieldValidation().state` | `FieldValidationState` | `ComputedRef<FieldValidationState>` | Vue reactivity; use `.value` |
-| `useFieldValidation().errors` | `string[]` | `ComputedRef<string[]>` | Vue reactivity; use `.value` |
-| `useFieldValidation().isValid` | `boolean` | `ComputedRef<boolean>` | Vue reactivity; use `.value` |
-| `VisibilityContextValue.ctx` | `CoreVisibilityContext` | `ComputedRef<CoreVisibilityContext>` | Vue reactivity; use `ctx.value` |
-| `children` type | `React.ReactNode` | `VNode \| VNode[]` | Platform-specific |
-| `useBoundProp` | exported | exported | Same API; returns `[value, setValue]` |
-| `VisibilityProviderProps` | exported | not exported (no props) | Vue uses slot, no prop needed |
-| Streaming hooks | `useUIStream`, `useChatUI` | `useUIStream`, `useChatUI` | Same API; returns Vue `Ref` values |

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

@@ -19,7 +19,7 @@ A catalog is the vocabulary for your UI. While the [schema](/docs/schemas) defin
 
 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema'; // or '@json-render/react-native/schema'
+import { schema } from '@json-render/react'; // or '@json-render/react-native'
 import { z } from 'zod';
 
 const catalog = defineCatalog(schema, {

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

@@ -5,130 +5,7 @@ export const metadata = pageMetadata("docs/changelog")
 
 Notable changes and updates to json-render.
 
-## v0.10.0
-
-February 2026
-
-### New: `@json-render/vue`
-
-Vue 3 renderer for json-render with full feature parity with `@json-render/react`. Data binding, visibility conditions, actions, validation, repeat scopes, streaming, and external store support.
-
-```bash
-npm install @json-render/core @json-render/vue
-```
-
-```typescript
-import { h } from "vue";
-import { defineRegistry, Renderer } from "@json-render/vue";
-import { schema } from "@json-render/vue/schema";
-
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: ({ props, children }) =>
-      h("div", { class: "card" }, [h("h3", null, props.title), children]),
-    Button: ({ props, emit }) =>
-      h("button", { onClick: () => emit("press") }, props.label),
-  },
-});
-```
-
-Providers: `StateProvider`, `ActionProvider`, `VisibilityProvider`, `ValidationProvider`. Composables: `useStateStore`, `useStateValue`, `useActions`, `useAction`, `useIsVisible`, `useFieldValidation`, `useBoundProp`, `useUIStream`, `useChatUI`.
-
-See the [Vue API reference](/docs/api/vue) for details.
-
-### New: `@json-render/xstate`
-
-[XState Store](https://stately.ai/docs/xstate-store) (atom) adapter for json-render's `StateStore` interface. Wire an `@xstate/store` atom as the state backend for any renderer.
-
-```bash
-npm install @json-render/xstate @xstate/store
-```
-
-```typescript
-import { createAtom } from "@xstate/store";
-import { xstateStoreStateStore } from "@json-render/xstate";
-
-const atom = createAtom({ count: 0 });
-const store = xstateStoreStateStore({ atom });
-```
-
-Requires `@xstate/store` v3+.
-
-### New: `$computed` and `$template` Expressions
-
-Two new prop expression types for dynamic values:
-
-- **`$template`** -- interpolate state values into strings: `{ "$template": "Hello, ${/user/name}!" }`
-- **`$computed`** -- call registered functions: `{ "$computed": "fullName", "args": { "first": { "$state": "/form/firstName" } } }`
-
-Register functions via the `functions` prop on `JSONUIProvider` or `createRenderer`. See [Computed Values](/docs/computed-values) for details.
-
-### New: State Watchers
-
-Elements can declare a `watch` field to trigger actions when state values change. Useful for cascading dependencies like country/city selects.
-
-```json
-{
-  "type": "Select",
-  "props": { "value": { "$bindState": "/form/country" }, "options": ["US", "Canada"] },
-  "watch": {
-    "/form/country": { "action": "loadCities", "params": { "country": { "$state": "/form/country" } } }
-  }
-}
-```
-
-`watch` is a top-level field on elements (sibling of type/props/children), not inside props. Watchers only fire on value changes, not on initial render. See [Watchers](/docs/watchers) for details.
-
-### New: Cross-Field Validation
-
-New built-in validation functions for cross-field comparisons:
-
-- `equalTo` -- alias for `matches` with clearer semantics
-- `lessThan` -- value must be less than another field
-- `greaterThan` -- value must be greater than another field
-- `requiredIf` -- required only when a condition field is truthy
-
-Validation check args now resolve through `resolvePropValue`, so `$state` expressions work consistently.
-
-### New: `validateForm` Action
-
-Built-in action (React) that validates all registered form fields at once and writes `{ valid, errors }` to state:
-
-```json
-{
-  "on": {
-    "press": [
-      { "action": "validateForm", "params": { "statePath": "/formResult" } },
-      { "action": "submitForm" }
-    ]
-  }
-}
-```
-
-### Improved: shadcn/ui Validation
-
-All form components now support `checks` and `validateOn` props:
-- Checkbox, Radio, Switch added validation support
-- `validateOn` controls timing: `"change"` (default for Select, Checkbox, Radio, Switch), `"blur"` (default for Input, Textarea), or `"submit"`
-
-### New Examples
-
-- **Vue example** -- standalone Vue 3 app with custom components
-- **Vite Renderers** -- side-by-side React and Vue renderers with shared catalog
-
----
-
-## v0.9.1
-
-February 2026
-
-### Fixed: Install failure due to private dependency
-
-`@json-render/react`, `@json-render/react-pdf`, and `@json-render/react-native` v0.9.0 failed to install because `@internal/react-state` (a private workspace package) was published as a dependency. The internal package is now bundled into each renderer at build time, so it no longer needs to be resolved from npm.
-
----
-
-## v0.9.0
+## v0.8.0
 
 February 2026
 
@@ -136,17 +13,8 @@ February 2026
 
 The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
 
-- Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
-- `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop
-- When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
-- When `store` is omitted, everything works exactly as before (fully backward compatible)
-- Applied across all platform packages: react, react-native, react-pdf
-- Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
-
 New adapter packages: `@json-render/redux`, `@json-render/zustand`, `@json-render/jotai`.
 
-See the [Data Binding](/docs/data-binding#external-store-controlled-mode) guide for usage.
-
 ### Changed: `onStateChange` signature updated (breaking)
 
 The `onStateChange` callback now receives a single array of changed entries instead of being called once per path. This makes batch updates via `update()` easier to handle:
@@ -161,31 +29,6 @@ onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
 
 The callback is only called when a `set()` or `update()` call actually changes the state. A `set()` call produces a single-element array; an `update()` call produces one array with all changed paths.
 
-### Fixed: Server-safe schema import
-
-`@json-render/react` barrel-imports React contexts that call `createContext`, which crashes in Next.js App Router API routes (RSC runtime strips `createContext`). All docs, examples, and skills now import `schema` from `@json-render/react/schema` instead of `@json-render/react`.
-
-For combined imports, split into separate `schema` (subpath) and client API (main entry) lines:
-
-```ts
-import { schema } from "@json-render/react/schema";
-import { defineRegistry, Renderer } from "@json-render/react";
-```
-
-### Fixed: Chaining actions
-
-Fixed an issue where chaining multiple actions on the same event (e.g. `setState` followed by a custom action) did not execute all actions. Affected `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`.
-
-### Fixed: Zod array inner type resolution
-
-Fixed safely resolving the inner type for Zod arrays in schema introspection, preventing errors when catalog component props use `z.array()`.
-
----
-
-## v0.8.0
-
-February 2026
-
 ### New: `@json-render/react-pdf`
 
 PDF renderer for json-render, powered by [`@react-pdf/renderer`](https://react-pdf.org/). Define catalogs and registries the same way as `@json-render/react`, but output PDF documents instead of web UI.

apps/web/app/(main)/docs/computed-values/page.mdx

@@ -1,119 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("docs/computed-values")
-
-# Computed Values
-
-Derive dynamic prop values using registered functions or string templates.
-
-## `$template` — String Interpolation
-
-Use `{ "$template": "..." }` to embed state values into a string. References use `${/path}` syntax where the path is a JSON Pointer:
-
-```json
-{
-  "type": "Text",
-  "props": {
-    "text": { "$template": "Hello, ${/user/name}! You have ${/inbox/count} messages." }
-  },
-  "children": []
-}
-```
-
-If state is `{ "user": { "name": "Alice" }, "inbox": { "count": 3 } }`, the text renders as "Hello, Alice! You have 3 messages."
-
-Missing paths resolve to an empty string.
-
-## `$computed` — Registered Functions
-
-Use `{ "$computed": "<name>", "args": { ... } }` to call a named function registered in your catalog. Each arg can be a literal value or any prop expression (`$state`, `$item`, `$cond`, etc.):
-
-```json
-{
-  "type": "Text",
-  "props": {
-    "text": {
-      "$computed": "fullName",
-      "args": {
-        "first": { "$state": "/form/firstName" },
-        "last": { "$state": "/form/lastName" }
-      }
-    }
-  },
-  "children": []
-}
-```
-
-### Registering Functions
-
-Functions are registered in the catalog and provided at runtime.
-
-**Catalog definition (for AI prompt generation):**
-
-```typescript
-import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
-
-const catalog = defineCatalog(schema, {
-  components: { /* ... */ },
-  functions: {
-    fullName: {
-      description: 'Combines first and last name into a full name',
-    },
-    formatCurrency: {
-      description: 'Formats a number as currency',
-    },
-  },
-});
-```
-
-**Runtime implementation:**
-
-```tsx
-import { JSONUIProvider } from '@json-render/react';
-
-const functions = {
-  fullName: (args) => `${args.first ?? ''} ${args.last ?? ''}`.trim(),
-  formatCurrency: (args) => {
-    const value = Number(args.value ?? 0);
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: (args.currency as string) ?? 'USD',
-    }).format(value);
-  },
-};
-
-<JSONUIProvider registry={registry} functions={functions}>
-  <Renderer spec={spec} registry={registry} />
-</JSONUIProvider>
-```
-
-### Using with `createRenderer`
-
-```tsx
-const MyRenderer = createRenderer(catalog, components);
-
-<MyRenderer
-  spec={spec}
-  functions={functions}
-/>
-```
-
-## Combining Expressions
-
-`$computed` args can use any expression type. This example computes a total from repeat item fields:
-
-```json
-{
-  "$computed": "lineTotal",
-  "args": {
-    "price": { "$item": "price" },
-    "quantity": { "$item": "quantity" }
-  }
-}
-```
-
-## Next
-
-- [Watchers](/docs/watchers) — react to state changes with cascading actions
-- [Data Binding](/docs/data-binding) — all expression types
-- [Validation](/docs/validation) — validate form inputs

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

@@ -213,22 +213,6 @@ Use `$cond` / `$then` / `$else` to pick a prop value based on a condition:
 
 The condition uses the same [visibility](/docs/visibility) expression format.
 
-## Template Strings
-
-Use `{ "$template": "..." }` to interpolate state values into a string using `${/path}` syntax:
-
-```json
-{
-  "type": "Text",
-  "props": {
-    "text": { "$template": "Welcome back, ${/user/name}!" }
-  },
-  "children": []
-}
-```
-
-See [Computed Values](/docs/computed-values) for details on `$template` and `$computed` expressions.
-
 ## Quick Reference
 
 <div className="my-6 overflow-x-auto">
@@ -271,16 +255,6 @@ See [Computed Values](/docs/computed-values) for details on `$template` and `$co
         <td><code>{'{ "$bindItem": "field" }'}</code></td>
         <td>Form components inside repeat</td>
       </tr>
-      <tr>
-        <td><code>{"$template"}</code></td>
-        <td><code>{'{ "$template": "Hello, ${/name}!" }'}</code></td>
-        <td>Anywhere (string props)</td>
-      </tr>
-      <tr>
-        <td><code>{"$computed"}</code></td>
-        <td><code>{'{ "$computed": "fn", "args": { ... } }'}</code></td>
-        <td>Anywhere (requires registered function)</td>
-      </tr>
     </tbody>
   </table>
 </div>

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

@@ -9,18 +9,6 @@ Install the core package plus your renderer of choice.
 
 <PackageInstall packages="@json-render/core @json-render/react" />
 
-Peer dependencies: `react ^19.0.0` and `zod ^4.0.0`.
-
-<PackageInstall packages="react zod" />
-
-## For Vue
-
-<PackageInstall packages="@json-render/core @json-render/vue" />
-
-Peer dependencies: `vue ^3.5.0` and `zod ^4.0.0`.
-
-<PackageInstall packages="vue zod" />
-
 ## For React UI with shadcn/ui
 
 Pre-built components for fast prototyping and production use:
@@ -37,19 +25,14 @@ Requires Tailwind CSS in your project. See the [@json-render/shadcn API referenc
 
 <PackageInstall packages="@json-render/core @json-render/remotion remotion @remotion/player" />
 
-## For External State Management (Optional)
+## Peer Dependencies
 
-If you want to wire json-render to an existing state management library instead of the built-in store, install the adapter for your library:
+json-render requires the following peer dependencies:
 
-<PackageInstall packages="@json-render/zustand" />
+- `react` ^19.0.0
+- `zod` ^4.0.0
 
-<PackageInstall packages="@json-render/redux" />
-
-<PackageInstall packages="@json-render/jotai" />
-
-<PackageInstall packages="@json-render/xstate" />
-
-See the [Data Binding](/docs/data-binding#external-store-controlled-mode) guide for usage.
+<PackageInstall packages="react zod" />
 
 ## For AI Integration
 

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

@@ -100,7 +100,7 @@ Create components that map to OpenAPI data types:
 
 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';
 import { z } from 'zod';
 
 export const openapiCatalog = defineCatalog(schema, {

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

@@ -23,7 +23,7 @@ A catalog declares what AI can use: components with typed props, actions with ty
 
 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';
 import { z } from 'zod';
 
 export const catalog = defineCatalog(schema, {

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

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

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

@@ -133,7 +133,7 @@ Actions are declared in your [catalog](/docs/catalog). The `@json-render/react`
 
 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema';
+import { schema } from '@json-render/react';
 import { z } from 'zod';
 
 const catalog = defineCatalog(schema, {

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

@@ -11,18 +11,11 @@ json-render includes common validation functions:
 
 - `required` — Value must be non-empty
 - `email` — Valid email format
-- `minLength` — Minimum string length (args: `{ "min": N }`)
-- `maxLength` — Maximum string length (args: `{ "max": N }`)
-- `pattern` — Match a regex pattern (args: `{ "pattern": "regex" }`)
-- `min` — Minimum numeric value (args: `{ "min": N }`)
-- `max` — Maximum numeric value (args: `{ "max": N }`)
-- `numeric` — Value must be a number
-- `url` — Valid URL format
-- `matches` — Must equal another field (args: `{ "other": { "$state": "/path" } }`)
-- `equalTo` — Alias for matches (args: `{ "other": { "$state": "/path" } }`)
-- `lessThan` — Value must be less than another field (args: `{ "other": { "$state": "/path" } }`)
-- `greaterThan` — Value must be greater than another field (args: `{ "other": { "$state": "/path" } }`)
-- `requiredIf` — Required only when another field is truthy (args: `{ "field": { "$state": "/path" } }`)
+- `minLength` — Minimum string length
+- `maxLength` — Maximum string length
+- `pattern` — Match a regex pattern
+- `min` — Minimum numeric value
+- `max` — Maximum numeric value
 
 ## Using Validation in JSON
 
@@ -74,7 +67,7 @@ Define custom validators in your catalog's `functions` field. The catalog itself
 
 ```typescript
 import { defineCatalog } from '@json-render/core';
-import { schema } from '@json-render/react/schema'; // or '@json-render/react-native/schema'
+import { schema } from '@json-render/react'; // or '@json-render/react-native'
 import { z } from 'zod';
 
 const catalog = defineCatalog(schema, {
@@ -150,114 +143,14 @@ function TextField({ props, bindings }) {
 
 See the [@json-render/react API reference](/docs/api/react) for full `ValidationProvider` and `useFieldValidation` documentation.
 
-## Cross-Field Validation
-
-Validation args support `{ "$state": "/path" }` references to compare against other fields. This enables cross-field rules like "confirm password must match password":
-
-```json
-{
-  "type": "Input",
-  "props": {
-    "label": "Confirm Password",
-    "value": { "$bindState": "/form/confirmPassword" },
-    "checks": [
-      { "type": "required", "message": "Please confirm your password" },
-      {
-        "type": "matches",
-        "args": { "other": { "$state": "/form/password" } },
-        "message": "Passwords must match"
-      }
-    ]
-  }
-}
-```
-
-Other cross-field examples:
-
-```json
-{
-  "checks": [
-    {
-      "type": "greaterThan",
-      "args": { "other": { "$state": "/form/startDate" } },
-      "message": "End date must be after start date"
-    }
-  ]
-}
-```
-
-```json
-{
-  "checks": [
-    {
-      "type": "requiredIf",
-      "args": { "field": { "$state": "/form/enableNotifications" } },
-      "message": "Email is required when notifications are enabled"
-    }
-  ]
-}
-```
-
-## Conditional Validation
-
-Use the `enabled` field in the validation config to only run checks when a condition is met:
-
-```json
-{
-  "type": "Input",
-  "props": {
-    "label": "Company Name",
-    "value": { "$bindState": "/form/company" },
-    "checks": [
-      { "type": "required", "message": "Company name is required" }
-    ]
-  }
-}
-```
-
-In the component implementation, you can pass `enabled` to `useFieldValidation`:
-
-```typescript
-useFieldValidation(bindings?.value ?? "", {
-  checks: props.checks ?? [],
-  enabled: { "$state": "/form/accountType", eq: "business" },
-});
-```
-
-This only validates the company name when the account type is "business".
-
 ## Validation Timing
 
 Control when validation runs with `validateOn`:
 
 - `change` — Validate on every input change
-- `blur` — Validate when field loses focus (default for Input, Textarea)
+- `blur` — Validate when field loses focus
 - `submit` — Validate only on form submission
 
-## Form-Level Validation
-
-Use the built-in `validateForm` action to validate all registered fields at once. This is useful for a "Submit" button that should validate the entire form before proceeding:
-
-```json
-{
-  "type": "Button",
-  "props": { "label": "Submit" },
-  "on": {
-    "press": [
-      { "action": "validateForm", "params": { "statePath": "/formResult" } },
-      { "action": "submitForm" }
-    ]
-  },
-  "children": []
-}
-```
-
-The `validateForm` action runs `validateAll()` and writes `{ valid: boolean }` to the specified state path (defaults to `/formValidation`). Your submit handler can then check `{ "$state": "/formResult/valid" }` to decide whether to proceed.
-
-> **Note:** Actions in a list execute sequentially, but `submitForm` does not automatically gate on validation. Guard submission with a `$cond` visibility condition on the button or check `{ "$state": "/formResult/valid" }` inside your action handler to skip submission when the form is invalid.
-
 ## Next
 
-- [Computed Values](/docs/computed-values) — derive dynamic prop values
-- [Watchers](/docs/watchers) — react to state changes
-- [Generation Modes](/docs/generation-modes) — how AI generates specs
+Learn about [generation modes](/docs/generation-modes).

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

@@ -1,150 +0,0 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("docs/watchers")
-
-# Watchers
-
-React to state changes by triggering actions when watched paths update.
-
-## The `watch` Field
-
-Elements can have an optional `watch` field that maps state paths to action bindings. When the value at a watched path changes, the bound actions fire automatically.
-
-`watch` is a **top-level field** on the element (sibling of `type`, `props`, `children`) — not inside `props`.
-
-```json
-{
-  "type": "Select",
-  "props": {
-    "label": "Country",
-    "value": { "$bindState": "/form/country" },
-    "options": ["US", "Canada", "UK"]
-  },
-  "watch": {
-    "/form/country": {
-      "action": "loadCities",
-      "params": { "country": { "$state": "/form/country" } }
-    }
-  },
-  "children": []
-}
-```
-
-When the user selects a different country, the `loadCities` action fires with the new country value. The action handler can fetch city data and update state, causing a dependent city Select to re-render with new options.
-
-## Cascading Selects
-
-A common pattern is cascading dropdowns where selecting a value in one field loads options for another:
-
-```json
-{
-  "root": "form",
-  "elements": {
-    "form": {
-      "type": "Stack",
-      "props": { "direction": "vertical", "gap": "md" },
-      "children": ["country-select", "city-select"]
-    },
-    "country-select": {
-      "type": "Select",
-      "props": {
-        "label": "Country",
-        "value": { "$bindState": "/form/country" },
-        "options": ["US", "Canada", "UK"]
-      },
-      "watch": {
-        "/form/country": [
-          { "action": "loadCities", "params": { "country": { "$state": "/form/country" } } },
-          { "action": "setState", "params": { "statePath": "/form/city", "value": "" } }
-        ]
-      },
-      "children": []
-    },
-    "city-select": {
-      "type": "Select",
-      "props": {
-        "label": "City",
-        "value": { "$bindState": "/form/city" },
-        "options": { "$state": "/availableCities" },
-        "placeholder": "Select a city"
-      },
-      "children": []
-    }
-  },
-  "state": {
-    "form": { "country": "", "city": "" },
-    "availableCities": []
-  }
-}
-```
-
-The watcher on `country-select` fires two actions when the country changes:
-1. `loadCities` — fetches and writes city options to `/availableCities`
-2. `setState` — resets the city selection
-
-The city Select reads its options from `{ "$state": "/availableCities" }`, so it automatically updates when the data is loaded.
-
-### Action Handler
-
-```typescript
-const handlers = {
-  loadCities: async (params) => {
-    const cities = await fetchCities(params.country);
-    // setState is called by the runtime to write the result
-    return cities;
-  },
-};
-```
-
-Or with `defineRegistry`:
-
-```typescript
-const { registry, handlers } = defineRegistry(catalog, {
-  components: { /* ... */ },
-  actions: {
-    loadCities: async (params, setState) => {
-      const response = await fetch(`/api/cities?country=${params.country}`);
-      const cities = await response.json();
-      setState('/availableCities', cities);
-    },
-  },
-});
-```
-
-## Multiple Watchers
-
-An element can watch multiple state paths. Each path maps to one or more action bindings:
-
-```json
-{
-  "watch": {
-    "/form/startDate": { "action": "validateDateRange" },
-    "/form/endDate": { "action": "validateDateRange" },
-    "/form/quantity": [
-      { "action": "recalculateTotal" },
-      { "action": "checkInventory", "params": { "qty": { "$state": "/form/quantity" } } }
-    ]
-  }
-}
-```
-
-## Behavior
-
-- Watchers only fire on **value changes**, not on the initial render
-- Comparison is by reference (`===`), not deep equality
-- Action params support the same expressions as event bindings (`$state`, `$item`, `$index`)
-- Multiple action bindings on the same path execute sequentially
-
-## When to Use `watch` vs `on`
-
-| Mechanism | Trigger | Use Case |
-|-----------|---------|----------|
-| `on` | User interaction (press, change, blur) | Button clicks, input changes, form submissions |
-| `watch` | State value change (any source) | Cascading data, derived state, cross-field sync |
-
-Use `on` when reacting to direct user actions. Use `watch` when a state change (from any source — user input, action handler, or external store update) should trigger side effects.
-
-## Next
-
-- [Data Binding](/docs/data-binding) — connect elements to state
-- [Computed Values](/docs/computed-values) — derive prop values
-- [Visibility](/docs/visibility) — conditionally show or hide elements

apps/web/lib/docs-navigation.ts

@@ -27,9 +27,7 @@ export const docsNavigation: NavSection[] = [
       { title: "Schemas", href: "/docs/schemas" },
       { title: "Catalog", href: "/docs/catalog" },
       { title: "Data Binding", href: "/docs/data-binding" },
-      { title: "Computed Values", href: "/docs/computed-values" },
       { title: "Visibility", href: "/docs/visibility" },
-      { title: "Watchers", href: "/docs/watchers" },
       { title: "Validation", href: "/docs/validation" },
     ],
   },
@@ -69,16 +67,6 @@ export const docsNavigation: NavSection[] = [
         href: "https://github.com/vercel-labs/json-render/tree/main/examples/remotion",
         external: true,
       },
-      {
-        title: "Vue",
-        href: "https://github.com/vercel-labs/json-render/tree/main/examples/vue",
-        external: true,
-      },
-      {
-        title: "Renders with Vite (Vue / React)",
-        href: "https://github.com/vercel-labs/json-render/tree/main/examples/vite-renderers",
-        external: true,
-      },
     ],
   },
   {
@@ -107,7 +95,6 @@ export const docsNavigation: NavSection[] = [
       { title: "@json-render/shadcn", href: "/docs/api/shadcn" },
       { title: "@json-render/react-native", href: "/docs/api/react-native" },
       { title: "@json-render/remotion", href: "/docs/api/remotion" },
-      { title: "@json-render/vue", href: "/docs/api/vue" },
       { title: "@json-render/codegen", href: "/docs/api/codegen" },
     ],
   },

apps/web/lib/page-titles.ts

@@ -23,9 +23,7 @@ export const PAGE_TITLES: Record<string, string> = {
   "docs/streaming": "Streaming",
   "docs/validation": "Validation",
   "docs/data-binding": "Data Binding",
-  "docs/computed-values": "Computed Values",
   "docs/visibility": "Visibility",
-  "docs/watchers": "Watchers",
   "docs/generation-modes": "Generation Modes",
   "docs/code-export": "Code Export",
   "docs/custom-schema": "Custom Schema & Renderer",
@@ -40,7 +38,6 @@ export const PAGE_TITLES: Record<string, string> = {
   // API references
   "docs/api/core": "@json-render/core API",
   "docs/api/react": "@json-render/react API",
-  "docs/api/vue": "@json-render/vue API",
   "docs/api/react-pdf": "@json-render/react-pdf API",
   "docs/api/react-native": "@json-render/react-native API",
   "docs/api/codegen": "@json-render/codegen API",

apps/web/package.json

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

examples/chat/CHANGELOG.md

@@ -1,28 +0,0 @@
-# example-chat
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-  - @json-render/react@0.10.0
-  - @json-render/shadcn@0.10.0
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies [b103676]
-  - @json-render/react@0.9.1
-  - @json-render/shadcn@0.9.1
-  - @json-render/core@0.9.1
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [1d755c1]
-  - @json-render/core@0.9.0
-  - @json-render/react@0.9.0
-  - @json-render/shadcn@0.9.0

examples/chat/package.json

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

examples/dashboard/CHANGELOG.md

@@ -1,28 +0,0 @@
-# example-dashboard
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-  - @json-render/react@0.10.0
-  - @json-render/codegen@0.10.0
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies [b103676]
-  - @json-render/react@0.9.1
-  - @json-render/core@0.9.1
-  - @json-render/codegen@0.9.1
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [1d755c1]
-  - @json-render/core@0.9.0
-  - @json-render/react@0.9.0
-  - @json-render/codegen@0.9.0

examples/dashboard/package.json

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

examples/no-ai/CHANGELOG.md

@@ -1,28 +0,0 @@
-# example-no-ai
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-  - @json-render/react@0.10.0
-  - @json-render/shadcn@0.10.0
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies [b103676]
-  - @json-render/react@0.9.1
-  - @json-render/shadcn@0.9.1
-  - @json-render/core@0.9.1
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [1d755c1]
-  - @json-render/core@0.9.0
-  - @json-render/react@0.9.0
-  - @json-render/shadcn@0.9.0

examples/no-ai/app/page.tsx

@@ -2,31 +2,33 @@
 
 import { useState, useEffect, useCallback, type ReactNode } from "react";
 import ConfettiExplosion from "react-confetti-explosion";
-import { JSONUIProvider, Renderer } from "@json-render/react";
-import type { Spec } from "@json-render/core";
 import {
-  registry,
-  actionHandlers,
-  computedFunctions,
-  onConfetti,
-} from "@/lib/render/registry";
+  Renderer,
+  StateProvider,
+  VisibilityProvider,
+  ActionProvider,
+  ValidationProvider,
+} from "@json-render/react";
+import type { Spec } from "@json-render/core";
+import { registry, actionHandlers, onConfetti } from "@/lib/render/registry";
 import { examples } from "@/lib/examples";
 
 function SpecRenderer({ spec }: { spec: Spec }): ReactNode {
   return (
-    <JSONUIProvider
-      registry={registry}
-      initialState={spec.state ?? {}}
-      handlers={actionHandlers}
-      functions={computedFunctions}
-    >
-      <Renderer spec={spec} registry={registry} />
-    </JSONUIProvider>
+    <StateProvider initialState={spec.state ?? {}}>
+      <VisibilityProvider>
+        <ActionProvider handlers={actionHandlers}>
+          <ValidationProvider>
+            <Renderer spec={spec} registry={registry} />
+          </ValidationProvider>
+        </ActionProvider>
+      </VisibilityProvider>
+    </StateProvider>
   );
 }
 
 export default function Page() {
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [selectedIndex] = useState(0);
   const selected = examples[selectedIndex]!;
   const [confettiKey, setConfettiKey] = useState(0);
   const [confettiActive, setConfettiActive] = useState(false);
@@ -39,50 +41,30 @@ export default function Page() {
   useEffect(() => onConfetti(fireConfetti), [fireConfetti]);
 
   return (
-    <div className="h-screen flex flex-col bg-muted/30">
-      {/* Example selector */}
-      <nav className="flex gap-1 p-3 overflow-x-auto border-b bg-background shrink-0">
-        {examples.map((ex, i) => (
-          <button
-            key={ex.name}
-            onClick={() => setSelectedIndex(i)}
-            className={`px-3 py-1.5 text-sm rounded-md whitespace-nowrap transition-colors ${
-              i === selectedIndex
-                ? "bg-primary text-primary-foreground"
-                : "hover:bg-muted"
-            }`}
-          >
-            {ex.name}
-          </button>
-        ))}
-      </nav>
-
-      {/* Render area */}
-      <div className="flex-1 flex items-start justify-center overflow-auto p-6">
-        <div className="relative bg-background border rounded-lg shadow-sm w-full max-w-[960px]">
-          {confettiActive && (
-            <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-              <ConfettiExplosion
-                key={confettiKey}
-                portal={false}
-                force={0.8}
-                duration={3500}
-                particleCount={400}
-                particleSize={8}
-                colors={["#00F0FF", "#7B61FF", "#FF3DFF", "#00FF94", "#FFE14D"]}
-                width={1600}
-                height="200vh"
-                zIndex={1}
-                onComplete={() => setConfettiActive(false)}
-              />
-            </div>
-          )}
-          <div className="p-6 relative z-10">
-            <p className="text-xs text-muted-foreground mb-4">
-              {selected.description}
-            </p>
-            <SpecRenderer key={selectedIndex} spec={selected.spec} />
+    <div className="h-screen flex items-center justify-center bg-muted/30">
+      <div
+        className="relative bg-background border rounded-lg shadow-sm"
+        style={{ width: 960, height: 1080 }}
+      >
+        {confettiActive && (
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+            <ConfettiExplosion
+              key={confettiKey}
+              portal={false}
+              force={0.8}
+              duration={3500}
+              particleCount={400}
+              particleSize={8}
+              colors={["#00F0FF", "#7B61FF", "#FF3DFF", "#00FF94", "#FFE14D"]}
+              width={1600}
+              height="200vh"
+              zIndex={1}
+              onComplete={() => setConfettiActive(false)}
+            />
           </div>
+        )}
+        <div className="h-full overflow-auto p-6 flex items-center justify-center relative z-10">
+          <SpecRenderer key={selectedIndex} spec={selected.spec} />
         </div>
       </div>
     </div>

examples/no-ai/lib/examples.ts

@@ -508,353 +508,4 @@ export const examples: Example[] = [
       },
     },
   },
-
-  // =========================================================================
-  // Advanced: Registration form with cross-field validation & $template
-  // =========================================================================
-  {
-    name: "Registration Form",
-    description:
-      "Cross-field validation, $template preview, and validateForm action",
-    spec: {
-      root: "card",
-      state: {
-        form: {
-          name: "",
-          email: "",
-          password: "",
-          confirmPassword: "",
-          accountType: "personal",
-          company: "",
-        },
-        result: null,
-      },
-      elements: {
-        card: {
-          type: "Card",
-          props: {
-            title: "Create Account",
-            description: "Fill out the form below to register",
-            maxWidth: "md",
-            centered: null,
-          },
-          children: ["formStack"],
-        },
-        formStack: {
-          type: "Stack",
-          props: {
-            direction: "vertical",
-            gap: "md",
-            align: null,
-            justify: null,
-          },
-          children: [
-            "preview",
-            "sep0",
-            "nameInput",
-            "emailInput",
-            "passwordInput",
-            "confirmInput",
-            "sep1",
-            "accountTypeRadio",
-            "companyInput",
-            "sep2",
-            "actions",
-            "statusText",
-          ],
-        },
-
-        // $template live preview
-        preview: {
-          type: "Text",
-          props: {
-            text: {
-              $template: "Welcome, ${/form/name}! Your email: ${/form/email}",
-            },
-            variant: "muted",
-          },
-          visible: { $state: "/form/name", neq: "" },
-          children: [],
-        },
-        sep0: { type: "Separator", props: { orientation: null }, children: [] },
-
-        nameInput: {
-          type: "Input",
-          props: {
-            label: "Full Name",
-            name: "name",
-            type: "text",
-            placeholder: "Jane Doe",
-            value: { $bindState: "/form/name" },
-            checks: [
-              { type: "required", message: "Name is required" },
-              {
-                type: "minLength",
-                args: { min: 2 },
-                message: "Name must be at least 2 characters",
-              },
-            ],
-            validateOn: "blur",
-          },
-          children: [],
-        },
-        emailInput: {
-          type: "Input",
-          props: {
-            label: "Email",
-            name: "email",
-            type: "email",
-            placeholder: "jane@example.com",
-            value: { $bindState: "/form/email" },
-            checks: [
-              { type: "required", message: "Email is required" },
-              { type: "email", message: "Enter a valid email address" },
-            ],
-            validateOn: "blur",
-          },
-          children: [],
-        },
-        passwordInput: {
-          type: "Input",
-          props: {
-            label: "Password",
-            name: "password",
-            type: "password",
-            placeholder: "At least 8 characters",
-            value: { $bindState: "/form/password" },
-            checks: [
-              { type: "required", message: "Password is required" },
-              {
-                type: "minLength",
-                args: { min: 8 },
-                message: "Password must be at least 8 characters",
-              },
-            ],
-            validateOn: "blur",
-          },
-          children: [],
-        },
-        confirmInput: {
-          type: "Input",
-          props: {
-            label: "Confirm Password",
-            name: "confirmPassword",
-            type: "password",
-            placeholder: "Re-enter your password",
-            value: { $bindState: "/form/confirmPassword" },
-            checks: [
-              { type: "required", message: "Please confirm your password" },
-              {
-                type: "matches",
-                args: { other: { $state: "/form/password" } },
-                message: "Passwords must match",
-              },
-            ],
-            validateOn: "blur",
-          },
-          children: [],
-        },
-        sep1: { type: "Separator", props: { orientation: null }, children: [] },
-
-        accountTypeRadio: {
-          type: "Radio",
-          props: {
-            label: "Account Type",
-            name: "accountType",
-            options: ["personal", "business"],
-            value: { $bindState: "/form/accountType" },
-            checks: null,
-            validateOn: null,
-          },
-          children: [],
-        },
-        companyInput: {
-          type: "Input",
-          props: {
-            label: "Company Name",
-            name: "company",
-            type: "text",
-            placeholder: "Acme Inc.",
-            value: { $bindState: "/form/company" },
-            checks: [
-              {
-                type: "requiredIf",
-                args: { field: { $state: "/form/accountType" } },
-                message: "Company name is required for business accounts",
-              },
-            ],
-            validateOn: "blur",
-          },
-          visible: { $state: "/form/accountType", eq: "business" },
-          children: [],
-        },
-        sep2: { type: "Separator", props: { orientation: null }, children: [] },
-
-        actions: {
-          type: "Stack",
-          props: {
-            direction: "horizontal",
-            gap: "sm",
-            align: null,
-            justify: "end",
-          },
-          children: ["submitBtn"],
-        },
-        submitBtn: {
-          type: "Button",
-          props: { label: "Register", variant: "primary", disabled: null },
-          on: {
-            press: [
-              {
-                action: "validateForm",
-                params: { statePath: "/result" },
-              },
-            ],
-          },
-          children: [],
-        },
-
-        // Validation result
-        statusText: {
-          type: "Alert",
-          props: {
-            title: "Validation Result",
-            message: {
-              $cond: { $state: "/result/valid", eq: true },
-              $then: "All fields are valid -- ready to submit!",
-              $else: "Please fix the errors above before submitting.",
-            },
-            type: {
-              $cond: { $state: "/result/valid", eq: true },
-              $then: "success",
-              $else: "error",
-            },
-          },
-          visible: { $state: "/result", neq: null },
-          children: [],
-        },
-      },
-    },
-  },
-
-  // =========================================================================
-  // Advanced: Cascading selects with watchers & $computed
-  // =========================================================================
-  {
-    name: "Cascading Selects",
-    description:
-      "Watchers reset dependent fields, $computed derives display values",
-    spec: {
-      root: "card",
-      state: {
-        form: { country: "", city: "" },
-        availableCities: [],
-      },
-      elements: {
-        card: {
-          type: "Card",
-          props: {
-            title: "Shipping Address",
-            description: "Select your country to load available cities",
-            maxWidth: "md",
-            centered: null,
-          },
-          children: ["formStack"],
-        },
-        formStack: {
-          type: "Stack",
-          props: {
-            direction: "vertical",
-            gap: "md",
-            align: null,
-            justify: null,
-          },
-          children: [
-            "countrySelect",
-            "citySelect",
-            "sep",
-            "addressPreview",
-            "templatePreview",
-          ],
-        },
-
-        countrySelect: {
-          type: "Select",
-          props: {
-            label: "Country",
-            name: "country",
-            options: ["US", "Canada", "UK", "Germany", "Japan"],
-            placeholder: "Choose a country",
-            value: { $bindState: "/form/country" },
-            checks: [{ type: "required", message: "Country is required" }],
-            validateOn: "change",
-          },
-          watch: {
-            "/form/country": [
-              {
-                action: "setState",
-                params: {
-                  statePath: "/availableCities",
-                  value: {
-                    $computed: "citiesForCountry",
-                    args: { country: { $state: "/form/country" } },
-                  },
-                },
-              },
-              {
-                action: "setState",
-                params: { statePath: "/form/city", value: "" },
-              },
-            ],
-          },
-          children: [],
-        },
-
-        citySelect: {
-          type: "Select",
-          props: {
-            label: "City",
-            name: "city",
-            options: { $state: "/availableCities" },
-            placeholder: "Select a city",
-            value: { $bindState: "/form/city" },
-            checks: [{ type: "required", message: "City is required" }],
-            validateOn: "change",
-          },
-          children: [],
-        },
-        sep: { type: "Separator", props: { orientation: null }, children: [] },
-
-        // $computed formatted address
-        addressPreview: {
-          type: "Heading",
-          props: {
-            text: {
-              $computed: "formatAddress",
-              args: {
-                city: { $state: "/form/city" },
-                country: { $state: "/form/country" },
-              },
-            },
-            level: "h3",
-          },
-          children: [],
-        },
-
-        // $template string interpolation
-        templatePreview: {
-          type: "Text",
-          props: {
-            text: {
-              $template:
-                "Shipping to: ${/form/city} in ${/form/country}. Cities available: ${/availableCities}",
-            },
-            variant: "muted",
-          },
-          visible: { $state: "/form/country", neq: "" },
-          children: [],
-        },
-      },
-    },
-  },
 ];

examples/no-ai/lib/render/catalog.ts

@@ -13,13 +13,4 @@ export const catalog = defineCatalog(schema, {
       description: "Fire confetti",
     },
   },
-  functions: {
-    formatAddress: {
-      description:
-        "Formats country and city into a single address string like 'City, Country'",
-    },
-    citiesForCountry: {
-      description: "Returns an array of city names for the given country code",
-    },
-  },
 });

examples/no-ai/lib/render/registry.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { defineRegistry } from "@json-render/react";
-import type { ComputedFunction } from "@json-render/core";
 import { shadcnComponents } from "@json-render/shadcn";
 import { catalog } from "./catalog";
 
@@ -14,14 +13,6 @@ export function onConfetti(cb: () => void) {
   };
 }
 
-const cityData: Record<string, string[]> = {
-  US: ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"],
-  Canada: ["Toronto", "Vancouver", "Montreal", "Calgary", "Ottawa"],
-  UK: ["London", "Manchester", "Birmingham", "Edinburgh", "Bristol"],
-  Germany: ["Berlin", "Munich", "Hamburg", "Frankfurt", "Cologne"],
-  Japan: ["Tokyo", "Osaka", "Kyoto", "Yokohama", "Sapporo"],
-};
-
 export const { registry } = defineRegistry(catalog, {
   components: {
     ...shadcnComponents,
@@ -33,23 +24,6 @@ export const { registry } = defineRegistry(catalog, {
   },
 });
 
-export const actionHandlers: Record<
-  string,
-  (params: Record<string, unknown>) => void
-> = {
+export const actionHandlers: Record<string, () => void> = {
   confetti: () => confettiListener?.(),
 };
-
-export const computedFunctions: Record<string, ComputedFunction> = {
-  formatAddress: (args) => {
-    const city = (args.city as string) ?? "";
-    const country = (args.country as string) ?? "";
-    if (!city && !country) return "No location selected";
-    if (!city) return country;
-    return `${city}, ${country}`;
-  },
-  citiesForCountry: (args) => {
-    const country = (args.country as string) ?? "";
-    return cityData[country] ?? [];
-  },
-};

examples/no-ai/package.json

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

examples/react-native/CHANGELOG.md

@@ -1,25 +0,0 @@
-# example-react-native
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-  - @json-render/react-native@0.10.0
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies [b103676]
-  - @json-render/react-native@0.9.1
-  - @json-render/core@0.9.1
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [1d755c1]
-  - @json-render/core@0.9.0
-  - @json-render/react-native@0.9.0

examples/react-native/package.json

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

examples/react-pdf/CHANGELOG.md

@@ -1,25 +0,0 @@
-# example-react-pdf
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-  - @json-render/react-pdf@0.10.0
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies [b103676]
-  - @json-render/react-pdf@0.9.1
-  - @json-render/core@0.9.1
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [1d755c1]
-  - @json-render/core@0.9.0
-  - @json-render/react-pdf@0.9.0

examples/react-pdf/package.json

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

examples/remotion/CHANGELOG.md

@@ -1,24 +0,0 @@
-# example-remotion
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-  - @json-render/remotion@0.10.0
-
-## 0.1.2
-
-### Patch Changes
-
-- @json-render/core@0.9.1
-- @json-render/remotion@0.9.1
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [1d755c1]
-  - @json-render/core@0.9.0
-  - @json-render/remotion@0.9.0

examples/remotion/package.json

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

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

@@ -1,25 +0,0 @@
-# com.example.json-render-demo
-
-## 0.0.4
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-  - @json-render/react@0.10.0
-
-## 0.0.3
-
-### Patch Changes
-
-- Updated dependencies [b103676]
-  - @json-render/react@0.9.1
-  - @json-render/core@0.9.1
-
-## 0.0.2
-
-### Patch Changes
-
-- Updated dependencies [1d755c1]
-  - @json-render/core@0.9.0
-  - @json-render/react@0.9.0

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

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

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

@@ -1,5 +1,5 @@
 import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/react/schema";
+import { schema } from "@json-render/react";
 import { z } from "zod";
 
 /**

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

@@ -1,25 +0,0 @@
-# com.example.json-render-fullpage-demo
-
-## 0.0.4
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-  - @json-render/react@0.10.0
-
-## 0.0.3
-
-### Patch Changes
-
-- Updated dependencies [b103676]
-  - @json-render/react@0.9.1
-  - @json-render/core@0.9.1
-
-## 0.0.2
-
-### Patch Changes
-
-- Updated dependencies [1d755c1]
-  - @json-render/core@0.9.0
-  - @json-render/react@0.9.0

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

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

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

@@ -1,5 +1,5 @@
 import { defineCatalog } from "@json-render/core";
-import { schema } from "@json-render/react/schema";
+import { schema } from "@json-render/react";
 import { z } from "zod";
 
 /**

examples/vite-renderers/CHANGELOG.md

@@ -1,10 +0,0 @@
-# vite-renderers
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-  - @json-render/react@0.10.0
-  - @json-render/vue@0.10.0

examples/vite-renderers/index.html

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@json-render multi-renderer demo</title>
-    <style>
-      * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-      }
-
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        background: #f3f4f6;
-        min-height: 100vh;
-      }
-
-      #renderer-root {
-        max-width: 640px;
-        margin: 0 auto;
-        padding: 24px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="renderer-root"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

examples/vite-renderers/package.json

@@ -1,27 +0,0 @@
-{
-  "name": "vite-renderers",
-  "version": "0.1.1",
-  "private": true,
-  "scripts": {
-    "dev": "portless vite-renderers.json-render vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@json-render/core": "workspace:*",
-    "@json-render/react": "workspace:*",
-    "@json-render/vue": "workspace:*",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "vue": "^3.5.29",
-    "zod": "^4.3.6"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
-    "@vitejs/plugin-vue": "^6.0.4",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1"
-  }
-}

examples/vite-renderers/src/main.ts

@@ -1,30 +0,0 @@
-import "./shared/styles.css";
-import { demoSpec } from "./spec";
-
-type Renderer = "vue" | "react";
-
-const container = document.getElementById("renderer-root") as HTMLElement;
-
-let unmountCurrent: (() => void) | null = null;
-
-async function switchTo(renderer: Renderer) {
-  unmountCurrent?.();
-  container.innerHTML = "";
-  if (renderer === "vue") {
-    const mod = await import("./vue/mount.ts");
-    mod.mount(container, renderer, demoSpec);
-    unmountCurrent = mod.unmount;
-  } else {
-    const mod = await import("./react/mount.tsx");
-    mod.mount(container, renderer, demoSpec);
-    unmountCurrent = mod.unmount;
-  }
-}
-
-// The RendererTabs component (rendered by JSON renderer) dispatches this event
-document.addEventListener("switch-renderer", (e: Event) => {
-  switchTo((e as CustomEvent<string>).detail as Renderer);
-});
-
-// Default: Vue
-switchTo("vue");

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

@@ -1,51 +0,0 @@
-import { useMemo } from "react";
-import type { Spec } from "@json-render/core";
-import {
-  StateProvider,
-  ActionProvider,
-  VisibilityProvider,
-  ValidationProvider,
-  Renderer,
-  defineRegistry,
-  useStateStore,
-} from "@json-render/react";
-import { catalog } from "./catalog";
-import { components } from "./registry";
-import { actionStubs, makeHandlers } from "../shared/handlers";
-
-const { registry } = defineRegistry(catalog, {
-  components,
-  actions: actionStubs,
-});
-
-function DemoRenderer({ spec }: { spec: Spec }) {
-  const { get, set } = useStateStore();
-  const handlers = useMemo(() => makeHandlers(get, set), [get, set]);
-  return (
-    <ActionProvider handlers={handlers}>
-      <VisibilityProvider>
-        <ValidationProvider>
-          <Renderer spec={spec} registry={registry} />
-        </ValidationProvider>
-      </VisibilityProvider>
-    </ActionProvider>
-  );
-}
-
-export default function App({
-  initialRenderer = "vue",
-  spec,
-}: {
-  initialRenderer?: string;
-  spec: Spec;
-}) {
-  return (
-    <div className={`renderer-${initialRenderer}`}>
-      <StateProvider
-        initialState={{ ...spec.state, renderer: initialRenderer }}
-      >
-        <DemoRenderer spec={spec} />
-      </StateProvider>
-    </div>
-  );
-}

examples/vite-renderers/src/react/catalog.ts

@@ -1,5 +0,0 @@
-import { schema } from "@json-render/react/schema";
-import { catalogDef } from "../shared/catalog-def";
-
-export const catalog = schema.createCatalog(catalogDef);
-export type AppCatalog = typeof catalog;

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

@@ -1,15 +0,0 @@
-import { createRoot, type Root } from "react-dom/client";
-import type { Spec } from "@json-render/core";
-import App from "./App";
-
-let root: Root | null = null;
-
-export function mount(container: HTMLElement, renderer: string, spec: Spec) {
-  root = createRoot(container);
-  root.render(<App initialRenderer={renderer} spec={spec} />);
-}
-
-export function unmount() {
-  root?.unmount();
-  root = null;
-}

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

@@ -1,155 +0,0 @@
-import type { Components } from "@json-render/react";
-import type { AppCatalog } from "./catalog";
-
-export const components: Components<AppCatalog> = {
-  Stack: ({ props, children }) => (
-    <div
-      className={[
-        "json-render-stack",
-        props.direction === "horizontal" && "json-render-stack--horizontal",
-        props.align && `json-render-stack--align-${props.align}`,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      style={{
-        gap: props.gap ? `${props.gap}px` : undefined,
-        padding: props.padding ? `${props.padding}px` : undefined,
-      }}
-    >
-      {children}
-    </div>
-  ),
-
-  Card: ({ props, children }) => (
-    <div className="json-render-card">
-      {props.title && (
-        <div className="json-render-card-title-wrap">
-          <h2 className="json-render-card-title">{props.title}</h2>
-        </div>
-      )}
-      {props.subtitle && (
-        <p className="json-render-card-subtitle">{props.subtitle}</p>
-      )}
-      {children}
-    </div>
-  ),
-
-  Text: ({ props }) => (
-    <span
-      className={[
-        "json-render-text",
-        props.size && props.size !== "md" && `json-render-text--${props.size}`,
-        props.weight &&
-          props.weight !== "normal" &&
-          `json-render-text--${props.weight}`,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      style={props.color ? { color: props.color } : undefined}
-    >
-      {String(props.content ?? "")}
-    </span>
-  ),
-
-  Button: ({ props, emit }) => (
-    <button
-      disabled={props.disabled}
-      onClick={() => emit("press")}
-      className={[
-        "json-render-button",
-        props.variant && `json-render-button--${props.variant}`,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-    >
-      {props.label}
-    </button>
-  ),
-
-  Badge: ({ props }) => (
-    <span
-      className="json-render-badge"
-      style={
-        props.color
-          ? {
-              backgroundColor: `${props.color}20`,
-              color: props.color,
-              borderColor: `${props.color}40`,
-            }
-          : undefined
-      }
-    >
-      {props.label}
-    </span>
-  ),
-
-  ListItem: ({ props, emit }) => (
-    <div
-      onClick={() => emit("press")}
-      className={[
-        "json-render-list-item",
-        props.completed && "json-render-list-item--done",
-      ]
-        .filter(Boolean)
-        .join(" ")}
-    >
-      <div
-        className={[
-          "json-render-list-item-check",
-          props.completed && "json-render-list-item-check--done",
-        ]
-          .filter(Boolean)
-          .join(" ")}
-      >
-        {props.completed ? "✓" : ""}
-      </div>
-      <span
-        className={[
-          "json-render-list-item-text",
-          props.completed && "json-render-list-item-text--done",
-        ]
-          .filter(Boolean)
-          .join(" ")}
-      >
-        {props.title}
-      </span>
-    </div>
-  ),
-
-  RendererBadge: ({ props }) => (
-    <span className="json-render-renderer-badge">
-      <span className="json-render-renderer-dot" />
-      {props.renderer === "vue" ? "Rendered with Vue" : "Rendered with React"}
-    </span>
-  ),
-
-  RendererTabs: ({ props, emit }) => (
-    <div className="json-render-renderer-tabs-wrapper">
-      <span className="json-render-renderer-tabs-label">Render</span>
-      <div className="json-render-renderer-tabs">
-        <button
-          onClick={() => emit("pressVue")}
-          className={[
-            "json-render-renderer-tab",
-            props.renderer === "vue" && "json-render-renderer-tab--active",
-          ]
-            .filter(Boolean)
-            .join(" ")}
-        >
-          Vue
-        </button>
-        <button
-          onClick={() => emit("pressReact")}
-          className={[
-            "json-render-renderer-tab",
-            props.renderer === "react" && "json-render-renderer-tab--active",
-          ]
-            .filter(Boolean)
-            .join(" ")}
-        >
-          React
-        </button>
-      </div>
-    </div>
-  ),
-};

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

@@ -1,99 +0,0 @@
-import { z } from "zod";
-
-/**
- * Shared catalog definition — imported by both vue/catalog.ts and react/catalog.ts.
- * Each renderer calls schema.createCatalog(catalogDef) with its own schema instance.
- */
-export const catalogDef = {
-  components: {
-    Stack: {
-      props: z.object({
-        gap: z.number().optional(),
-        padding: z.number().optional(),
-        direction: z.enum(["vertical", "horizontal"]).optional(),
-        align: z.enum(["start", "center", "end"]).optional(),
-      }),
-      slots: ["default"],
-      description:
-        "Layout container that stacks children vertically or horizontally",
-    },
-    Card: {
-      props: z.object({
-        title: z.string().optional(),
-        subtitle: z.string().optional(),
-      }),
-      slots: ["default"],
-      description: "A card container with optional title and subtitle",
-    },
-    Text: {
-      props: z.object({
-        content: z.string(),
-        size: z.enum(["sm", "md", "lg", "xl"]).optional(),
-        weight: z.enum(["normal", "medium", "bold"]).optional(),
-        color: z.string().optional(),
-      }),
-      slots: [],
-      description: "Displays a text string",
-    },
-    Button: {
-      props: z.object({
-        label: z.string(),
-        variant: z.enum(["primary", "secondary", "danger"]).optional(),
-        disabled: z.boolean().optional(),
-      }),
-      slots: [],
-      description: "A clickable button that emits a 'press' event",
-    },
-    Badge: {
-      props: z.object({
-        label: z.string(),
-        color: z.string().optional(),
-      }),
-      slots: [],
-      description: "A small badge/tag label",
-    },
-    ListItem: {
-      props: z.object({
-        title: z.string(),
-        description: z.string().optional(),
-        completed: z.boolean().optional(),
-      }),
-      slots: [],
-      description: "A single item in a list",
-    },
-    RendererTabs: {
-      props: z.object({ renderer: z.string() }),
-      slots: [],
-      description:
-        "Segmented tab control for switching between Vue and React renderers",
-    },
-    RendererBadge: {
-      props: z.object({ renderer: z.string() }),
-      slots: [],
-      description: "Badge indicating which renderer is currently active",
-    },
-  },
-  actions: {
-    increment: {
-      params: z.object({}),
-      description: "Increment the counter by 1",
-    },
-    decrement: {
-      params: z.object({}),
-      description: "Decrement the counter by 1",
-    },
-    reset: { params: z.object({}), description: "Reset the counter to 0" },
-    toggleItem: {
-      params: z.object({ index: z.number() }),
-      description: "Toggle the completed state of a todo item",
-    },
-    switchToVue: {
-      params: z.object({}),
-      description: "Switch to the Vue renderer",
-    },
-    switchToReact: {
-      params: z.object({}),
-      description: "Switch to the React renderer",
-    },
-  },
-};

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

@@ -1,50 +0,0 @@
-type Get = (path: string) => unknown;
-type Set = (path: string, value: unknown) => void;
-
-/** Stub actions for defineRegistry (no-ops; real logic is in makeHandlers) */
-export const actionStubs = {
-  increment: async () => {},
-  decrement: async () => {},
-  reset: async () => {},
-  toggleItem: async () => {},
-  switchToVue: async () => {},
-  switchToReact: async () => {},
-};
-
-/** Creates action handlers that close over the state store's get/set */
-export function makeHandlers(get: Get, set: Set) {
-  return {
-    increment: async () => {
-      set("/count", Number(get("/count") || 0) + 1);
-    },
-    decrement: async () => {
-      set("/count", Math.max(0, Number(get("/count") || 0) - 1));
-    },
-    reset: async () => {
-      set("/count", 0);
-    },
-    toggleItem: async (params: Record<string, unknown>) => {
-      const index = params.index as number;
-      const todos = (
-        get("/todos") as Array<{
-          id: number;
-          title: string;
-          completed: boolean;
-        }>
-      ).slice();
-      const item = todos[index];
-      if (item) todos[index] = { ...item, completed: !item.completed };
-      set("/todos", todos);
-    },
-    switchToVue: async () => {
-      document.dispatchEvent(
-        new CustomEvent("switch-renderer", { detail: "vue" }),
-      );
-    },
-    switchToReact: async () => {
-      document.dispatchEvent(
-        new CustomEvent("switch-renderer", { detail: "react" }),
-      );
-    },
-  };
-}

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

@@ -1,248 +0,0 @@
-/* ---- Stack ---------------------------------------------------------------- */
-
-.json-render-stack {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.json-render-stack--horizontal {
-  flex-direction: row;
-  align-items: center;
-}
-
-.json-render-stack--align-start  { align-items: flex-start; }
-.json-render-stack--align-center { align-items: center; }
-.json-render-stack--align-end    { align-items: flex-end; }
-
-/* ---- Card ----------------------------------------------------------------- */
-
-.json-render-card {
-  background-color: white;
-  border-radius: 12px;
-  border: 1px solid #e5e7eb;
-  padding: 20px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.json-render-card-title-wrap {
-  margin-bottom: 4px;
-}
-
-.json-render-card-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #111827;
-  margin: 0;
-}
-
-.json-render-card-subtitle {
-  font-size: 13px;
-  color: #6b7280;
-  margin: 0 0 12px 0;
-}
-
-/* ---- Text ----------------------------------------------------------------- */
-
-.json-render-text {
-  font-size: 14px;
-  font-weight: 400;
-  color: #111827;
-}
-
-.json-render-text--sm { font-size: 12px; }
-.json-render-text--lg { font-size: 16px; }
-.json-render-text--xl { font-size: 24px; }
-
-.json-render-text--medium { font-weight: 500; }
-.json-render-text--bold   { font-weight: 700; }
-
-/* ---- Button --------------------------------------------------------------- */
-
-.json-render-button {
-  padding: 8px 16px;
-  border-radius: 8px;
-  border: none;
-  cursor: pointer;
-  font-weight: 500;
-  font-size: 14px;
-  transition: background 0.15s;
-  background-color: #3b82f6;
-  color: white;
-}
-
-.json-render-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.json-render-button--primary {
-  background-color: #3b82f6;
-  color: white;
-}
-
-.json-render-button--secondary {
-  background-color: #f3f4f6;
-  color: #374151;
-}
-
-.json-render-button--danger {
-  background-color: #fee2e2;
-  color: #dc2626;
-}
-
-/* ---- Badge ---------------------------------------------------------------- */
-
-.json-render-badge {
-  display: inline-block;
-  padding: 4px 12px;
-  border-radius: 999px;
-  font-size: 13px;
-  font-weight: 500;
-  background-color: #e0f2fe;
-  color: #0369a1;
-  border: 1px solid #bae6fd;
-}
-
-/* ---- ListItem ------------------------------------------------------------- */
-
-.json-render-list-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  border-radius: 8px;
-  cursor: pointer;
-  background-color: #f9fafb;
-  border: 1px solid #e5e7eb;
-}
-
-.json-render-list-item--done {
-  background-color: #f0fdf4;
-  border-color: #bbf7d0;
-}
-
-.json-render-list-item-check {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  border: 2px solid #d1d5db;
-  background-color: transparent;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  color: white;
-}
-
-.json-render-list-item-check--done {
-  border-color: #16a34a;
-  background-color: #16a34a;
-}
-
-.json-render-list-item-text {
-  font-size: 14px;
-  color: #111827;
-  text-decoration: none;
-}
-
-.json-render-list-item-text--done {
-  color: #6b7280;
-  text-decoration: line-through;
-}
-
-/* ---- RendererBadge -------------------------------------------------------- */
-
-.json-render-renderer-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 10px 15px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 500;
-  /* default colors; overridden by renderer parent class below */
-  background-color: #e0f2fe;
-  color: #0369a1;
-  border: 1px solid #bae6fd;
-}
-
-.json-render-renderer-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  display: inline-block;
-  /* background overridden by renderer parent class below */
-  background-color: #0369a1;
-}
-
-/* ---- RendererTabs --------------------------------------------------------- */
-
-.json-render-renderer-tabs-wrapper {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: auto;
-}
-
-.json-render-renderer-tabs-label {
-  font-size: 13px;
-  color: #6b7280;
-  font-weight: 500;
-}
-
-.json-render-renderer-tabs {
-  display: inline-flex;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
-  overflow: hidden;
-}
-
-.json-render-renderer-tab {
-  padding: 6px 16px;
-  border: none;
-  border-right: 0;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-  background-color: white;
-  color: #374151;
-  transition: background 0.15s;
-}
-
-.json-render-renderer-tab:first-child {
-  border-right: 1px solid #e5e7eb;
-}
-
-/* ---- Renderer-specific overrides ----------------------------------------- */
-
-.renderer-vue .json-render-renderer-badge {
-  color: #42b883;
-  background-color: #42b88318;
-  border-color: #42b88340;
-}
-
-.renderer-vue .json-render-renderer-dot {
-  background-color: #42b883;
-}
-
-.renderer-vue .json-render-renderer-tab--active {
-  background-color: #42b883;
-  color: white;
-}
-
-.renderer-react .json-render-renderer-badge {
-  color: #149eca;
-  background-color: #149eca18;
-  border-color: #149eca40;
-}
-
-.renderer-react .json-render-renderer-dot {
-  background-color: #149eca;
-}
-
-.renderer-react .json-render-renderer-tab--active {
-  background-color: #149eca;
-  color: white;
-}

examples/vite-renderers/src/spec.ts

@@ -1,126 +0,0 @@
-import type { Spec } from "@json-render/core";
-
-export const demoSpec: Spec = {
-  root: "root",
-  state: {
-    renderer: "vue",
-    count: 0,
-    todos: [
-      { id: 1, title: "Learn JSON Render", completed: true },
-      {
-        id: 2,
-        title: "Try @json-render/vue or @json-render/react",
-        completed: false,
-      },
-      { id: 3, title: "Build something awesome", completed: false },
-    ],
-  },
-  elements: {
-    root: {
-      type: "Stack",
-      props: { gap: 24, padding: 24, direction: "vertical" },
-      children: [
-        "demo-title",
-        "renderer-tabs",
-        "renderer-badge",
-        "counter-card",
-        "milestone-badge",
-        "todos-card",
-      ],
-    },
-
-    "demo-title": {
-      type: "Text",
-      props: {
-        content: "@json-render multi-renderer demo",
-        size: "xl",
-        weight: "bold",
-      },
-    },
-    "renderer-badge": {
-      type: "RendererBadge",
-      props: { renderer: { $state: "/renderer" } },
-    },
-    "renderer-tabs": {
-      type: "RendererTabs",
-      props: { renderer: { $state: "/renderer" } },
-      on: {
-        pressVue: { action: "switchToVue" },
-        pressReact: { action: "switchToReact" },
-      },
-    },
-
-    // ---- Counter card ----
-    "counter-card": {
-      type: "Card",
-      props: {
-        title: "Counter",
-        subtitle: "Click the buttons to change the count",
-      },
-      children: ["counter-body"],
-    },
-    "counter-body": {
-      type: "Stack",
-      props: { gap: 12, direction: "horizontal", align: "center" },
-      children: [
-        "decrement-btn",
-        "counter-value",
-        "increment-btn",
-        "reset-btn",
-      ],
-    },
-    "decrement-btn": {
-      type: "Button",
-      props: { label: "−", variant: "secondary" },
-      on: { press: { action: "decrement" } },
-    },
-    "counter-value": {
-      type: "Text",
-      props: {
-        content: { $state: "/count" },
-        size: "xl",
-        weight: "bold",
-      },
-    },
-    "increment-btn": {
-      type: "Button",
-      props: { label: "+", variant: "primary" },
-      on: { press: { action: "increment" } },
-    },
-    "reset-btn": {
-      type: "Button",
-      props: { label: "Reset", variant: "danger" },
-      on: { press: { action: "reset" } },
-    },
-
-    // ---- Milestone badge (visible only when count >= 10) ----
-    "milestone-badge": {
-      type: "Badge",
-      props: { label: "Milestone reached: 10!", color: "#10b981" },
-      visible: { $state: "/count", gte: 10 },
-    },
-
-    // ---- Todos card ----
-    "todos-card": {
-      type: "Card",
-      props: { title: "Todo List", subtitle: "Your tasks" },
-      children: ["todos-list"],
-    },
-    "todos-list": {
-      type: "Stack",
-      props: { gap: 8, direction: "vertical" },
-      repeat: { statePath: "/todos", key: "id" },
-      children: ["todo-item"],
-    },
-    "todo-item": {
-      type: "ListItem",
-      props: {
-        title: { $item: "title" },
-        completed: { $item: "completed" },
-      },
-      on: {
-        press: { action: "toggleItem", params: { index: { $index: true } } },
-      },
-    },
-  },
-};

examples/vite-renderers/src/vue/App.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { Spec } from "@json-render/core";
-import { StateProvider } from "@json-render/vue";
-import DemoRenderer from "./DemoRenderer.vue";
-
-const props = defineProps<{
-  initialRenderer?: string; spec: Spec }>();
-const initialState = {
-  ...props.spec.state,
-  renderer: props.initialRenderer ?? "vue" };
-</script>
-
-<template>
-  <div :class="`renderer-${props.initialRenderer ?? 'vue'}`">
-    <StateProvider :initial-state="initialState">
-      <DemoRenderer :spec="props.spec" />
-    </StateProvider>
-  </div>
-</template>

examples/vite-renderers/src/vue/DemoRenderer.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { Spec } from "@json-render/core";
-import {
-  ActionProvider, ValidationProvider, VisibilityProvider,
-  Renderer, defineRegistry, useStateStore,
-} from "@json-render/vue";
-import { catalog } from "./catalog";
-import { components } from "./registry";
-import { actionStubs, makeHandlers } from "../shared/handlers";
-
-const props = defineProps<{ spec: Spec }>();
-const { get, set } = useStateStore();
-const { registry } = defineRegistry(catalog, { components, actions: actionStubs });
-const handlers = makeHandlers(get, set);
-</script>
-
-<template>
-  <ActionProvider :handlers="handlers">
-    <VisibilityProvider>
-      <ValidationProvider>
-        <Renderer :spec="props.spec" :registry="registry" />
-      </ValidationProvider>
-    </VisibilityProvider>
-  </ActionProvider>
-</template>

examples/vite-renderers/src/vue/catalog.ts

@@ -1,5 +0,0 @@
-import { schema } from "@json-render/vue/schema";
-import { catalogDef } from "../shared/catalog-def";
-
-export const catalog = schema.createCatalog(catalogDef);
-export type AppCatalog = typeof catalog;

examples/vite-renderers/src/vue/mount.ts

@@ -1,15 +0,0 @@
-import { createApp, type App } from "vue";
-import type { Spec } from "@json-render/core";
-import VueApp from "./App.vue";
-
-let app: App | null = null;
-
-export function mount(container: HTMLElement, renderer: string, spec: Spec) {
-  app = createApp(VueApp, { initialRenderer: renderer, spec });
-  app.mount(container);
-}
-
-export function unmount() {
-  app?.unmount();
-  app = null;
-}

examples/vite-renderers/src/vue/registry.ts

@@ -1,166 +0,0 @@
-import { h } from "vue";
-import type { Components } from "@json-render/vue";
-import type { AppCatalog } from "./catalog";
-
-export const components: Components<AppCatalog> = {
-  Stack: ({ props, children }) =>
-    h(
-      "div",
-      {
-        class: [
-          "json-render-stack",
-          props.direction === "horizontal" && "json-render-stack--horizontal",
-          props.align && `json-render-stack--align-${props.align}`,
-        ]
-          .filter(Boolean)
-          .join(" "),
-        style: {
-          gap: props.gap ? `${props.gap}px` : undefined,
-          padding: props.padding ? `${props.padding}px` : undefined,
-        },
-      },
-      children,
-    ),
-
-  Card: ({ props, children }) =>
-    h("div", { class: "json-render-card" }, [
-      props.title &&
-        h("div", { class: "json-render-card-title-wrap" }, [
-          h("h2", { class: "json-render-card-title" }, props.title),
-        ]),
-      props.subtitle &&
-        h("p", { class: "json-render-card-subtitle" }, props.subtitle),
-      children,
-    ]),
-
-  Text: ({ props }) =>
-    h(
-      "span",
-      {
-        class: [
-          "json-render-text",
-          props.size &&
-            props.size !== "md" &&
-            `json-render-text--${props.size}`,
-          props.weight &&
-            props.weight !== "normal" &&
-            `json-render-text--${props.weight}`,
-        ]
-          .filter(Boolean)
-          .join(" "),
-        style: props.color ? { color: props.color } : undefined,
-      },
-      String(props.content ?? ""),
-    ),
-
-  Button: ({ props, emit }) =>
-    h(
-      "button",
-      {
-        disabled: props.disabled,
-        onClick: () => emit("press"),
-        class: [
-          "json-render-button",
-          props.variant && `json-render-button--${props.variant}`,
-        ]
-          .filter(Boolean)
-          .join(" "),
-      },
-      props.label,
-    ),
-
-  Badge: ({ props }) =>
-    h(
-      "span",
-      {
-        class: "json-render-badge",
-        style: props.color
-          ? {
-              backgroundColor: `${props.color}20`,
-              color: props.color,
-              borderColor: `${props.color}40`,
-            }
-          : undefined,
-      },
-      props.label,
-    ),
-
-  ListItem: ({ props, emit }) =>
-    h(
-      "div",
-      {
-        onClick: () => emit("press"),
-        class: [
-          "json-render-list-item",
-          props.completed && "json-render-list-item--done",
-        ]
-          .filter(Boolean)
-          .join(" "),
-      },
-      [
-        h(
-          "div",
-          {
-            class: [
-              "json-render-list-item-check",
-              props.completed && "json-render-list-item-check--done",
-            ]
-              .filter(Boolean)
-              .join(" "),
-          },
-          props.completed ? "✓" : "",
-        ),
-        h(
-          "span",
-          {
-            class: [
-              "json-render-list-item-text",
-              props.completed && "json-render-list-item-text--done",
-            ]
-              .filter(Boolean)
-              .join(" "),
-          },
-          props.title,
-        ),
-      ],
-    ),
-
-  RendererBadge: ({ props }) =>
-    h("span", { class: "json-render-renderer-badge" }, [
-      h("span", { class: "json-render-renderer-dot" }),
-      props.renderer === "vue" ? "Rendered with Vue" : "Rendered with React",
-    ]),
-
-  RendererTabs: ({ props, emit }) =>
-    h("div", { class: "json-render-renderer-tabs-wrapper" }, [
-      h("span", { class: "json-render-renderer-tabs-label" }, "Render"),
-      h("div", { class: "json-render-renderer-tabs" }, [
-        h(
-          "button",
-          {
-            onClick: () => emit("pressVue"),
-            class: [
-              "json-render-renderer-tab",
-              props.renderer === "vue" && "json-render-renderer-tab--active",
-            ]
-              .filter(Boolean)
-              .join(" "),
-          },
-          "Vue",
-        ),
-        h(
-          "button",
-          {
-            onClick: () => emit("pressReact"),
-            class: [
-              "json-render-renderer-tab",
-              props.renderer === "react" && "json-render-renderer-tab--active",
-            ]
-              .filter(Boolean)
-              .join(" "),
-          },
-          "React",
-        ),
-      ]),
-    ]),
-};

examples/vite-renderers/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "strict": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
-}

examples/vite-renderers/vite.config.ts

@@ -1,7 +0,0 @@
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import react from "@vitejs/plugin-react";
-
-export default defineConfig({
-  plugins: [vue(), react({ include: /\.tsx$/ })],
-});

examples/vue/CHANGELOG.md

@@ -1,9 +0,0 @@
-# example-vue
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-  - @json-render/vue@0.10.0

examples/vue/index.html

@@ -1,26 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>json-render vue example</title>
-    <style>
-      * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-      }
-      body {
-        font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-        background: #f9fafb;
-        color: #111827;
-        min-height: 100vh;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

examples/vue/package.json

@@ -1,22 +0,0 @@
-{
-  "name": "example-vue",
-  "version": "0.1.1",
-  "private": true,
-  "scripts": {
-    "dev": "portless vue.json-render vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@json-render/core": "workspace:*",
-    "@json-render/vue": "workspace:*",
-    "vue": "^3.5.0",
-    "zod": "^4.3.6"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.4",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vue-tsc": "^3.2.5"
-  }
-}

examples/vue/src/App.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { StateProvider } from "@json-render/vue";
-import { demoSpec } from "./lib/spec";
-import DemoRenderer from "./DemoRenderer.vue";
-
-const initialState = demoSpec.state ?? {};
-</script>
-
-<template>
-  <!-- StateProvider sets up the reactive state store for the whole tree -->
-  <StateProvider :initial-state="initialState">
-    <DemoRenderer />
-  </StateProvider>
-</template>

examples/vue/src/DemoRenderer.vue

@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import {
-  ActionProvider,
-  ValidationProvider,
-  VisibilityProvider,
-  Renderer,
-  defineRegistry,
-  useStateStore,
-} from "@json-render/vue";
-import { catalog } from "./lib/catalog";
-import { components } from "./lib/registry";
-import { demoSpec } from "./lib/spec";
-
-// Access the state store provided by the parent StateProvider
-const { get, set } = useStateStore();
-
-// Build registry — include stub actions to satisfy catalog types.
-// The actual logic runs in the handlers below, which have direct
-// access to the state store.
-const { registry } = defineRegistry(catalog, {
-  components,
-  actions: {
-    increment: async () => {},
-    decrement: async () => {},
-    reset: async () => {},
-    toggleItem: async () => {},
-  },
-});
-
-// Action handlers — close over the state store's get/set so they
-// can read and write state directly without needing an external store.
-const handlers = {
-  increment: async () => {
-    set("/count", Number(get("/count") || 0) + 1);
-  },
-  decrement: async () => {
-    set("/count", Math.max(0, Number(get("/count") || 0) - 1));
-  },
-  reset: async () => {
-    set("/count", 0);
-  },
-  toggleItem: async (params: Record<string, unknown>) => {
-    const index = params.index as number;
-    const todos = (
-      get("/todos") as Array<{
-        id: number;
-        title: string;
-        completed: boolean;
-      }>
-    ).slice();
-    const item = todos[index];
-    if (item) {
-      todos[index] = { ...item, completed: !item.completed };
-    }
-    set("/todos", todos);
-  },
-};
-</script>
-
-<template>
-  <ActionProvider :handlers="handlers">
-    <VisibilityProvider>
-      <ValidationProvider>
-        <Renderer :spec="demoSpec" :registry="registry" />
-      </ValidationProvider>
-    </VisibilityProvider>
-  </ActionProvider>
-</template>

examples/vue/src/lib/catalog.ts

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

examples/vue/src/lib/registry.ts

@@ -1,213 +0,0 @@
-import { h } from "vue";
-import type { Components } from "@json-render/vue";
-import { useBoundProp } from "@json-render/vue";
-import type { AppCatalog } from "./catalog";
-
-export const components: Components<AppCatalog> = {
-  Stack: ({ props, children }) => {
-    const isHorizontal = props.direction === "horizontal";
-    return h(
-      "div",
-      {
-        style: {
-          display: "flex",
-          flexDirection: isHorizontal ? "row" : "column",
-          gap: props.gap ? `${props.gap}px` : undefined,
-          padding: props.padding ? `${props.padding}px` : undefined,
-          alignItems: props.align ?? (isHorizontal ? "center" : "stretch"),
-        },
-      },
-      children,
-    );
-  },
-
-  Card: ({ props, children }) =>
-    h(
-      "div",
-      {
-        style: {
-          backgroundColor: "white",
-          borderRadius: "12px",
-          border: "1px solid #e5e7eb",
-          padding: "20px",
-          boxShadow: "0 1px 3px rgba(0,0,0,0.05)",
-        },
-      },
-      [
-        props.title &&
-          h("div", { style: { marginBottom: "4px" } }, [
-            h(
-              "h2",
-              {
-                style: {
-                  fontSize: "16px",
-                  fontWeight: "600",
-                  color: "#111827",
-                  margin: 0,
-                },
-              },
-              props.title,
-            ),
-          ]),
-        props.subtitle &&
-          h(
-            "p",
-            {
-              style: {
-                fontSize: "13px",
-                color: "#6b7280",
-                margin: "0 0 12px 0",
-              },
-            },
-            props.subtitle,
-          ),
-        children,
-      ],
-    ),
-
-  Text: ({ props }) => {
-    const sizeMap: Record<string, string> = {
-      sm: "12px",
-      md: "14px",
-      lg: "16px",
-      xl: "24px",
-    };
-    const weightMap: Record<string, string> = {
-      normal: "400",
-      medium: "500",
-      bold: "700",
-    };
-    return h(
-      "span",
-      {
-        style: {
-          fontSize: sizeMap[props.size ?? "md"] ?? "14px",
-          fontWeight: weightMap[props.weight ?? "normal"] ?? "400",
-          color: props.color ?? "#111827",
-        },
-      },
-      String(props.content ?? ""),
-    );
-  },
-
-  Button: ({ props, emit }) =>
-    h(
-      "button",
-      {
-        disabled: props.disabled,
-        onClick: () => emit("press"),
-        style: {
-          padding: "8px 16px",
-          borderRadius: "8px",
-          border: "none",
-          cursor: props.disabled ? "not-allowed" : "pointer",
-          fontWeight: "500",
-          fontSize: "14px",
-          transition: "background 0.15s",
-          opacity: props.disabled ? "0.5" : "1",
-          backgroundColor:
-            props.variant === "danger"
-              ? "#fee2e2"
-              : props.variant === "secondary"
-                ? "#f3f4f6"
-                : "#3b82f6",
-          color:
-            props.variant === "danger"
-              ? "#dc2626"
-              : props.variant === "secondary"
-                ? "#374151"
-                : "white",
-        },
-      },
-      props.label,
-    ),
-
-  Badge: ({ props }) =>
-    h(
-      "span",
-      {
-        style: {
-          display: "inline-block",
-          padding: "4px 12px",
-          borderRadius: "999px",
-          fontSize: "13px",
-          fontWeight: "500",
-          backgroundColor: props.color ? `${props.color}20` : "#e0f2fe",
-          color: props.color ?? "#0369a1",
-          border: `1px solid ${props.color ? `${props.color}40` : "#bae6fd"}`,
-        },
-      },
-      props.label,
-    ),
-
-  Input: ({ props, bindings }) => {
-    const [value, setValue] = useBoundProp<string>(
-      props.value as string | undefined,
-      bindings?.value,
-    );
-    return h("input", {
-      value: value ?? "",
-      placeholder: props.placeholder as string | undefined,
-      onInput: (e: Event) => setValue((e.target as HTMLInputElement).value),
-      style: {
-        padding: "8px 12px",
-        borderRadius: "8px",
-        border: "1px solid #d1d5db",
-        fontSize: "14px",
-        outline: "none",
-        width: "100%",
-        boxSizing: "border-box",
-      },
-    });
-  },
-
-  ListItem: ({ props, emit }) =>
-    h(
-      "div",
-      {
-        onClick: () => emit("press"),
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "12px",
-          padding: "10px 12px",
-          borderRadius: "8px",
-          cursor: "pointer",
-          backgroundColor: props.completed ? "#f0fdf4" : "#f9fafb",
-          border: `1px solid ${props.completed ? "#bbf7d0" : "#e5e7eb"}`,
-        },
-      },
-      [
-        h(
-          "div",
-          {
-            style: {
-              width: "18px",
-              height: "18px",
-              borderRadius: "50%",
-              border: `2px solid ${props.completed ? "#16a34a" : "#d1d5db"}`,
-              backgroundColor: props.completed ? "#16a34a" : "transparent",
-              flexShrink: "0",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: "11px",
-              color: "white",
-            },
-          },
-          props.completed ? "✓" : "",
-        ),
-        h(
-          "span",
-          {
-            style: {
-              fontSize: "14px",
-              color: props.completed ? "#6b7280" : "#111827",
-              textDecoration: props.completed ? "line-through" : "none",
-            },
-          },
-          props.title,
-        ),
-      ],
-    ),
-};

examples/vue/src/lib/spec.ts

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

examples/vue/src/main.ts

@@ -1,4 +0,0 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-
-createApp(App).mount("#app");

examples/vue/tsconfig.json

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

examples/vue/vite.config.ts

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

package.json

@@ -12,7 +12,7 @@
   },
   "scripts": {
     "build": "turbo run build",
-    "dev": "turbo run dev --concurrency 20",
+    "dev": "turbo run dev --concurrency 15",
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx}\"",
     "type-check": "turbo run check-types",

packages/codegen/CHANGELOG.md

@@ -1,61 +1,5 @@
 # @json-render/codegen
 
-## 0.10.0
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-
-## 0.9.1
-
-### Patch Changes
-
-- @json-render/core@0.9.1
-
-## 0.9.0
-
-### Minor Changes
-
-- 1d755c1: External state store, store adapters, and bug fixes.
-
-  ### New: External State Store
-
-  The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
-  - Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
-  - `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
-  - When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
-  - When `store` is omitted, everything works exactly as before (fully backward compatible)
-  - Applied across all platform packages: react, react-native, react-pdf
-  - Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
-
-  ### New: Store Adapter Packages
-  - `@json-render/zustand` — Zustand adapter for `StateStore`
-  - `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
-  - `@json-render/jotai` — Jotai adapter for `StateStore`
-
-  ### Changed: `onStateChange` signature updated (breaking)
-
-  The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
-
-  ```ts
-  // Before
-  onStateChange?: (path: string, value: unknown) => void
-
-  // After
-  onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
-  ```
-
-  ### Fixed
-  - Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
-  - Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
-  - Fix safely resolving inner type for Zod arrays in core schema
-
-### Patch Changes
-
-- Updated dependencies [1d755c1]
-  - @json-render/core@0.9.0
-
 ## 0.8.0
 
 ### Patch Changes

packages/codegen/package.json

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

packages/core/CHANGELOG.md

@@ -1,116 +1,5 @@
 # @json-render/core
 
-## 0.10.0
-
-### Minor Changes
-
-- 9cef4e9: Dynamic forms, Vue renderer, XState Store adapter, and computed values.
-
-  ### New: `@json-render/vue` Package
-
-  Vue 3 renderer for json-render. Full feature parity with `@json-render/react` including data binding, visibility conditions, actions, validation, repeat scopes, and streaming.
-  - `defineRegistry` — create type-safe component registries from catalogs
-  - `Renderer` — render specs as Vue component trees
-  - Providers: `StateProvider`, `ActionProvider`, `VisibilityProvider`, `ValidationProvider`
-  - Composables: `useStateStore`, `useStateValue`, `useStateBinding`, `useActions`, `useAction`, `useIsVisible`, `useFieldValidation`
-  - Streaming: `useUIStream`, `useChatUI`
-  - External store support via `StateStore` interface
-
-  ### New: `@json-render/xstate` Package
-
-  XState Store (atom) adapter for json-render's `StateStore` interface. Wire an `@xstate/store` atom as the state backend.
-  - `xstateStoreStateStore({ atom })` — creates a `StateStore` from an `@xstate/store` atom
-  - Requires `@xstate/store` v3+
-
-  ### New: `$computed` Expressions
-
-  Call registered functions from prop expressions:
-  - `{ "$computed": "functionName", "args": { "key": <expression> } }` — calls a named function with resolved args
-  - Functions registered via catalog and provided at runtime through `functions` prop on `JSONUIProvider` / `createRenderer`
-  - `ComputedFunction` type exported from `@json-render/core`
-
-  ### New: `$template` Expressions
-
-  Interpolate state values into strings:
-  - `{ "$template": "Hello, ${/user/name}!" }` — replaces `${/path}` references with state values
-  - Missing paths resolve to empty string
-
-  ### New: State Watchers
-
-  React to state changes by triggering actions:
-  - `watch` field on elements maps state paths to action bindings
-  - Fires when watched values change (not on initial render)
-  - Supports cascading dependencies (e.g. country → city loading)
-  - `watch` is a top-level field on elements (sibling of type/props/children), not inside props
-  - Spec validator detects and auto-fixes `watch` placed inside props
-
-  ### New: Cross-Field Validation Functions
-
-  New built-in validation functions for cross-field comparisons:
-  - `equalTo` — alias for `matches` with clearer semantics
-  - `lessThan` — value must be less than another field (numbers, strings, coerced)
-  - `greaterThan` — value must be greater than another field
-  - `requiredIf` — required only when a condition field is truthy
-  - Validation args now resolve through `resolvePropValue` for consistent `$state` expression handling
-
-  ### New: `validateForm` Action (React)
-
-  Built-in action that validates all registered form fields at once:
-  - Runs `validateAll()` synchronously and writes `{ valid, errors }` to state
-  - Default state path: `/formValidation` (configurable via `statePath` param)
-  - Added to React schema's built-in actions list
-
-  ### Improved: shadcn/ui Validation
-
-  All form components now support validation:
-  - Checkbox, Radio, Switch — added `checks` and `validateOn` props
-  - Input, Textarea, Select — added `validateOn` prop (controls timing: change/blur/submit)
-  - Shared validation schemas reduce catalog definition duplication
-
-  ### Improved: React Provider Tree
-
-  Reordered provider nesting so `ValidationProvider` wraps `ActionProvider`, enabling `validateForm` to access validation state. Added `useOptionalValidation` hook for non-throwing access.
-
-## 0.9.1
-
-## 0.9.0
-
-### Minor Changes
-
-- 1d755c1: External state store, store adapters, and bug fixes.
-
-  ### New: External State Store
-
-  The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
-  - Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
-  - `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
-  - When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
-  - When `store` is omitted, everything works exactly as before (fully backward compatible)
-  - Applied across all platform packages: react, react-native, react-pdf
-  - Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
-
-  ### New: Store Adapter Packages
-  - `@json-render/zustand` — Zustand adapter for `StateStore`
-  - `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
-  - `@json-render/jotai` — Jotai adapter for `StateStore`
-
-  ### Changed: `onStateChange` signature updated (breaking)
-
-  The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
-
-  ```ts
-  // Before
-  onStateChange?: (path: string, value: unknown) => void
-
-  // After
-  onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
-  ```
-
-  ### Fixed
-  - Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
-  - Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
-  - Fix safely resolving inner type for Zod arrays in core schema
-
 ## 0.8.0
 
 ### Minor Changes

packages/core/README.md

@@ -188,22 +188,6 @@ Schema options:
 | `resolvePropValue(value, ctx)` | Resolve a single prop expression |
 | `resolveElementProps(props, ctx)` | Resolve all prop expressions in an element |
 | `PropExpression<T>` | Type for prop values that may contain expressions |
-| `ComputedFunction` | Function signature for `$computed` expressions |
-| `PropResolutionContext` | Context for resolving props (includes `functions` for `$computed`) |
-
-### Validation
-
-| Export | Purpose |
-|--------|---------|
-| `check.required()` | Required validation helper |
-| `check.email()` | Email validation helper |
-| `check.matches(path)` | Cross-field match helper |
-| `check.equalTo(path)` | Cross-field equality helper |
-| `check.lessThan(path)` | Cross-field less-than helper |
-| `check.greaterThan(path)` | Cross-field greater-than helper |
-| `check.requiredIf(path)` | Conditional required helper |
-| `builtInValidationFunctions` | All built-in validation functions |
-| `runValidationCheck()` | Run a single validation check |
 
 ### User Prompt
 
@@ -301,7 +285,6 @@ The official adapter packages (`@json-render/redux`, `@json-render/zustand`, `@j
 | `Spec` | Base spec type |
 | `Catalog` | Catalog type |
 | `BuiltInAction` | Built-in action type (`name` + `description`) |
-| `ComputedFunction` | Function signature for `$computed` expressions |
 | `VisibilityCondition` | Visibility condition type (used by `$cond`) |
 | `VisibilityContext` | Context for evaluating visibility and prop expressions |
 | `SpecStreamLine` | Single patch operation |
@@ -389,44 +372,6 @@ Get the current array index inside a repeat:
 
 `$index` uses `true` as a sentinel flag because the index is a scalar value with no sub-path to navigate (unlike `$item` which needs a path).
 
-### Template (`$template`)
-
-Interpolate state values into strings using `${/path}` syntax:
-
-```json
-{
-  "label": { "$template": "Hello, ${/user/name}! You have ${/inbox/count} messages." }
-}
-```
-
-Missing paths resolve to an empty string.
-
-### Computed (`$computed`)
-
-Call a registered function with resolved arguments:
-
-```json
-{
-  "text": {
-    "$computed": "fullName",
-    "args": {
-      "first": { "$state": "/form/firstName" },
-      "last": { "$state": "/form/lastName" }
-    }
-  }
-}
-```
-
-Functions are registered in the catalog and provided at runtime via the `functions` prop on the renderer.
-
-```typescript
-import type { ComputedFunction } from "@json-render/core";
-
-const functions: Record<string, ComputedFunction> = {
-  fullName: (args) => `${args.first} ${args.last}`,
-};
-```
-
 ### API
 
 ```typescript
@@ -521,65 +466,6 @@ console.log(formatSpecIssues(issues));
 const fixed = autoFixSpec(spec);
 ```
 
-## State Watchers
-
-Elements can declare a `watch` field to trigger actions when state values change. `watch` is a top-level field on the element (sibling of `type`, `props`, `children`), not inside `props`.
-
-```json
-{
-  "type": "Select",
-  "props": {
-    "label": "Country",
-    "value": { "$bindState": "/form/country" },
-    "options": ["US", "Canada", "UK"]
-  },
-  "watch": {
-    "/form/country": {
-      "action": "loadCities",
-      "params": { "country": { "$state": "/form/country" } }
-    }
-  },
-  "children": []
-}
-```
-
-Watchers only fire on value changes, not on initial render. Multiple action bindings per path execute sequentially.
-
-## Validation
-
-### Built-in Validation Functions
-
-| Function | Description | Args |
-|----------|-------------|------|
-| `required` | Value must not be empty | — |
-| `email` | Must be a valid email | — |
-| `url` | Must be a valid URL | — |
-| `numeric` | Must be a number | — |
-| `minLength` | Minimum string length | `{ min: number }` |
-| `maxLength` | Maximum string length | `{ max: number }` |
-| `min` | Minimum numeric value | `{ min: number }` |
-| `max` | Maximum numeric value | `{ max: number }` |
-| `pattern` | Must match regex | `{ pattern: string }` |
-| `matches` | Must equal another field | `{ other: { $state: "/path" } }` |
-| `equalTo` | Alias for matches | `{ other: { $state: "/path" } }` |
-| `lessThan` | Must be less than another field | `{ other: { $state: "/path" } }` |
-| `greaterThan` | Must be greater than another field | `{ other: { $state: "/path" } }` |
-| `requiredIf` | Required when condition is truthy | `{ field: { $state: "/path" } }` |
-
-### TypeScript Helpers
-
-```typescript
-import { check } from "@json-render/core";
-
-check.required("Field is required");
-check.email("Invalid email");
-check.matches("/form/password", "Passwords must match");
-check.equalTo("/form/password", "Passwords must match");
-check.lessThan("/form/endDate", "Must be before end date");
-check.greaterThan("/form/startDate", "Must be after start date");
-check.requiredIf("/form/enableNotifications", "Required when notifications enabled");
-```
-
 ## Custom Schemas
 
 json-render supports completely different spec formats for different renderers:

packages/core/package.json

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

packages/core/src/index.ts

@@ -72,11 +72,7 @@ export {
 } from "./visibility";
 
 // Prop Expressions
-export type {
-  PropExpression,
-  PropResolutionContext,
-  ComputedFunction,
-} from "./props";
+export type { PropExpression, PropResolutionContext } from "./props";
 
 export {
   resolvePropValue,

packages/core/src/props.test.ts

@@ -1,11 +1,9 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect } from "vitest";
 import {
   resolvePropValue,
   resolveElementProps,
   resolveBindings,
   resolveActionParam,
-  _resetWarnedComputedFns,
-  _resetWarnedTemplatePaths,
 } from "./props";
 import type { PropResolutionContext } from "./props";
 
@@ -500,165 +498,3 @@ describe("resolveActionParam", () => {
     expect(resolveActionParam(null, ctx)).toBeNull();
   });
 });
-
-// =============================================================================
-// $computed expressions
-// =============================================================================
-
-describe("$computed expressions", () => {
-  it("calls a registered function with resolved args", () => {
-    const ctx: PropResolutionContext = {
-      stateModel: { form: { firstName: "Jane", lastName: "Doe" } },
-      functions: {
-        fullName: (args) => `${args.first} ${args.last}`,
-      },
-    };
-    expect(
-      resolvePropValue(
-        {
-          $computed: "fullName",
-          args: {
-            first: { $state: "/form/firstName" },
-            last: { $state: "/form/lastName" },
-          },
-        },
-        ctx,
-      ),
-    ).toBe("Jane Doe");
-  });
-
-  it("calls function with no args", () => {
-    const ctx: PropResolutionContext = {
-      stateModel: {},
-      functions: {
-        timestamp: () => 1234567890,
-      },
-    };
-    expect(resolvePropValue({ $computed: "timestamp" }, ctx)).toBe(1234567890);
-  });
-
-  it("returns undefined for unknown function", () => {
-    const ctx: PropResolutionContext = {
-      stateModel: {},
-      functions: {},
-    };
-    expect(resolvePropValue({ $computed: "unknown" }, ctx)).toBeUndefined();
-  });
-
-  it("returns undefined when no functions in context", () => {
-    const ctx: PropResolutionContext = { stateModel: {} };
-    expect(resolvePropValue({ $computed: "any" }, ctx)).toBeUndefined();
-  });
-
-  it("deduplicates warnings for the same unknown function", () => {
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-    const ctx: PropResolutionContext = { stateModel: {}, functions: {} };
-    resolvePropValue({ $computed: "dedupTest" }, ctx);
-    resolvePropValue({ $computed: "dedupTest" }, ctx);
-    const calls = warnSpy.mock.calls.filter((c) =>
-      String(c[0]).includes("dedupTest"),
-    );
-    expect(calls).toHaveLength(1);
-    warnSpy.mockRestore();
-  });
-
-  it("resolves nested expressions in args", () => {
-    const ctx: PropResolutionContext = {
-      stateModel: { active: true, values: { a: 10, b: 20 } },
-      functions: {
-        conditionalSum: (args) => {
-          if (args.enabled) return (args.x as number) + (args.y as number);
-          return 0;
-        },
-      },
-    };
-    expect(
-      resolvePropValue(
-        {
-          $computed: "conditionalSum",
-          args: {
-            enabled: { $state: "/active" },
-            x: { $state: "/values/a" },
-            y: { $state: "/values/b" },
-          },
-        },
-        ctx,
-      ),
-    ).toBe(30);
-  });
-});
-
-// =============================================================================
-// $template expressions
-// =============================================================================
-
-describe("$template expressions", () => {
-  it("interpolates state values into a string", () => {
-    const ctx: PropResolutionContext = {
-      stateModel: { user: { name: "Alice" }, count: 3 },
-    };
-    expect(
-      resolvePropValue(
-        { $template: "Hello, ${/user/name}! You have ${/count} messages." },
-        ctx,
-      ),
-    ).toBe("Hello, Alice! You have 3 messages.");
-  });
-
-  it("replaces missing paths with empty string", () => {
-    const ctx: PropResolutionContext = { stateModel: {} };
-    expect(resolvePropValue({ $template: "Hi ${/name}!" }, ctx)).toBe("Hi !");
-  });
-
-  it("handles template with no interpolations", () => {
-    const ctx: PropResolutionContext = { stateModel: {} };
-    expect(resolvePropValue({ $template: "No variables here" }, ctx)).toBe(
-      "No variables here",
-    );
-  });
-
-  it("handles multiple references to the same path", () => {
-    const ctx: PropResolutionContext = {
-      stateModel: { x: "A" },
-    };
-    expect(resolvePropValue({ $template: "${/x} and ${/x}" }, ctx)).toBe(
-      "A and A",
-    );
-  });
-
-  it("converts non-string values to strings", () => {
-    const ctx: PropResolutionContext = {
-      stateModel: { num: 42, bool: true },
-    };
-    expect(resolvePropValue({ $template: "${/num} is ${/bool}" }, ctx)).toBe(
-      "42 is true",
-    );
-  });
-
-  it("warns when path does not start with /", () => {
-    _resetWarnedTemplatePaths();
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-    const ctx: PropResolutionContext = { stateModel: { name: "Bob" } };
-    const result = resolvePropValue({ $template: "Hi ${name}!" }, ctx);
-    expect(result).toBe("Hi Bob!");
-    expect(warnSpy).toHaveBeenCalledWith(
-      expect.stringContaining('$template path "name"'),
-    );
-    warnSpy.mockRestore();
-    _resetWarnedTemplatePaths();
-  });
-
-  it("deduplicates warnings for the same $template path", () => {
-    _resetWarnedTemplatePaths();
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-    const ctx: PropResolutionContext = { stateModel: { name: "Bob" } };
-    resolvePropValue({ $template: "Hi ${name}!" }, ctx);
-    resolvePropValue({ $template: "Hi ${name}!" }, ctx);
-    const calls = warnSpy.mock.calls.filter((c) =>
-      String(c[0]).includes('$template path "name"'),
-    );
-    expect(calls).toHaveLength(1);
-    warnSpy.mockRestore();
-    _resetWarnedTemplatePaths();
-  });
-});

packages/core/src/props.ts

@@ -22,10 +22,6 @@ import { evaluateVisibility, type VisibilityContext } from "./visibility";
  *    repeat item — resolves via `repeatBasePath + path` and exposes the
  *    absolute state path for write-back.
  * - `{ $cond, $then, $else }` conditionally picks a value
- * - `{ $computed: string, args?: Record<string, PropExpression> }` calls a
- *    registered function with resolved args and returns the result
- * - `{ $template: string }` interpolates `${/path}` references in the
- *    string with values from the state model
  * - Any other value is a literal (passthrough)
  */
 export type PropExpression<T = unknown> =
@@ -39,15 +35,7 @@ export type PropExpression<T = unknown> =
       $cond: VisibilityCondition;
       $then: PropExpression<T>;
       $else: PropExpression<T>;
-    }
-  | { $computed: string; args?: Record<string, unknown> }
-  | { $template: string };
-
-/**
- * Function signature for `$computed` expressions.
- * Receives a record of resolved argument values and returns a computed result.
- */
-export type ComputedFunction = (args: Record<string, unknown>) => unknown;
+    };
 
 /**
  * Context for resolving prop expressions.
@@ -57,8 +45,6 @@ export type ComputedFunction = (args: Record<string, unknown>) => unknown;
 export interface PropResolutionContext extends VisibilityContext {
   /** Absolute state path to the current repeat item (e.g. "/todos/0"). Set inside repeat scopes. */
   repeatBasePath?: string;
-  /** Named functions available for `$computed` expressions. */
-  functions?: Record<string, ComputedFunction>;
 }
 
 // =============================================================================
@@ -124,47 +110,6 @@ function isCondExpression(
   );
 }
 
-function isComputedExpression(
-  value: unknown,
-): value is { $computed: string; args?: Record<string, unknown> } {
-  return (
-    typeof value === "object" &&
-    value !== null &&
-    "$computed" in value &&
-    typeof (value as Record<string, unknown>).$computed === "string"
-  );
-}
-
-function isTemplateExpression(value: unknown): value is { $template: string } {
-  return (
-    typeof value === "object" &&
-    value !== null &&
-    "$template" in value &&
-    typeof (value as Record<string, unknown>).$template === "string"
-  );
-}
-
-// Module-level set to avoid spamming console.warn on every render for the same
-// unknown $computed function name. Once the set reaches WARNED_COMPUTED_MAX,
-// new names are no longer deduplicated (warnings still fire) but the set stops
-// growing, preventing unbounded memory use in long-lived processes (e.g. SSR).
-const WARNED_COMPUTED_MAX = 100;
-const warnedComputedFns = new Set<string>();
-
-/** @internal Test-only: clear the deduplication set for $computed warnings. */
-export function _resetWarnedComputedFns(): void {
-  warnedComputedFns.clear();
-}
-
-// Same deduplication pattern for $template paths that don't start with "/".
-const WARNED_TEMPLATE_MAX = 100;
-const warnedTemplatePaths = new Set<string>();
-
-/** @internal Test-only: clear the deduplication set for $template warnings. */
-export function _resetWarnedTemplatePaths(): void {
-  warnedTemplatePaths.clear();
-}
-
 // =============================================================================
 // Prop Expression Resolution
 // =============================================================================
@@ -248,50 +193,6 @@ export function resolvePropValue(
     return resolvePropValue(result ? value.$then : value.$else, ctx);
   }
 
-  // $computed: call a registered function with resolved args
-  if (isComputedExpression(value)) {
-    const fn = ctx.functions?.[value.$computed];
-    if (!fn) {
-      if (!warnedComputedFns.has(value.$computed)) {
-        if (warnedComputedFns.size < WARNED_COMPUTED_MAX) {
-          warnedComputedFns.add(value.$computed);
-        }
-        console.warn(`Unknown $computed function: "${value.$computed}"`);
-      }
-      return undefined;
-    }
-    const resolvedArgs: Record<string, unknown> = {};
-    if (value.args) {
-      for (const [key, arg] of Object.entries(value.args)) {
-        resolvedArgs[key] = resolvePropValue(arg, ctx);
-      }
-    }
-    return fn(resolvedArgs);
-  }
-
-  // $template: interpolate ${/path} references with state values
-  if (isTemplateExpression(value)) {
-    return value.$template.replace(
-      /\$\{([^}]+)\}/g,
-      (_match, rawPath: string) => {
-        let path = rawPath;
-        if (!path.startsWith("/")) {
-          if (!warnedTemplatePaths.has(path)) {
-            if (warnedTemplatePaths.size < WARNED_TEMPLATE_MAX) {
-              warnedTemplatePaths.add(path);
-            }
-            console.warn(
-              `$template path "${path}" should be a JSON Pointer starting with "/". Automatically resolving as "/${path}".`,
-            );
-          }
-          path = "/" + path;
-        }
-        const resolved = getByPath(ctx.stateModel, path);
-        return resolved != null ? String(resolved) : "";
-      },
-    );
-  }
-
   // Arrays: resolve each element
   if (Array.isArray(value)) {
     return value.map((item) => resolvePropValue(item, ctx));

packages/core/src/schema.test.ts

@@ -169,11 +169,7 @@ describe("catalog.prompt", () => {
     const catalog = defineCatalog(testSchema, {
       components: {
         Card: {
-          props: z.object({
-            title: z.string(),
-            names: z.array(z.string()),
-            users: z.array(z.object({ name: z.string(), age: z.number() })),
-          }),
+          props: z.object({ title: z.string() }),
           description: "A card container",
           slots: ["default"],
         },
@@ -184,9 +180,6 @@ describe("catalog.prompt", () => {
     expect(prompt).toContain("AVAILABLE COMPONENTS");
     expect(prompt).toContain("Card");
     expect(prompt).toContain("A card container");
-    expect(prompt).toContain("title: string");
-    expect(prompt).toContain("names: Array<string>");
-    expect(prompt).toContain("users: Array<{ name: string, age: number }>");
   });
 
   it("includes AVAILABLE ACTIONS when present", () => {

packages/core/src/schema.ts

@@ -900,31 +900,6 @@ Note: state patches appear right after the elements that use them, so the UI fil
     "Use $bindState for form inputs (text fields, checkboxes, selects, sliders, etc.) and $state for read-only data display. Inside repeat scopes, use $bindItem for form inputs bound to the current item. Use dynamic props instead of duplicating elements with opposing visible conditions when only prop values differ.",
   );
   lines.push("");
-  lines.push(
-    '4. Template: `{ "$template": "Hello, ${/name}!" }` - interpolates `${/path}` references in the string with values from the state model.',
-  );
-  lines.push(
-    '   Example: `"label": { "$template": "Items: ${/cart/count} | Total: ${/cart/total}" }` renders "Items: 3 | Total: 42.00" when /cart/count is 3 and /cart/total is 42.00.',
-  );
-  lines.push("");
-
-  // $computed section — only emit when catalog defines functions
-  const catalogFunctions = (catalog.data as Record<string, unknown>).functions;
-  if (catalogFunctions && Object.keys(catalogFunctions).length > 0) {
-    lines.push(
-      '5. Computed: `{ "$computed": "<functionName>", "args": { "key": <expression> } }` - calls a registered function with resolved args and returns the result.',
-    );
-    lines.push(
-      '   Example: `"value": { "$computed": "fullName", "args": { "first": { "$state": "/form/firstName" }, "last": { "$state": "/form/lastName" } } }`',
-    );
-    lines.push("   Available functions:");
-    for (const name of Object.keys(
-      catalogFunctions as Record<string, unknown>,
-    )) {
-      lines.push(`   - ${name}`);
-    }
-    lines.push("");
-  }
 
   // Validation section — only emit when at least one component has a `checks` prop
   const hasChecksComponents = allComponents
@@ -955,19 +930,7 @@ Note: state patches appear right after the elements that use them, so the UI fil
     lines.push("  - numeric — value must be a number");
     lines.push("  - url — valid URL format");
     lines.push(
-      '  - matches — must equal another field (args: { "other": { "$state": "/path" } })',
-    );
-    lines.push(
-      '  - equalTo — alias for matches (args: { "other": { "$state": "/path" } })',
-    );
-    lines.push(
-      '  - lessThan — value must be less than another field (args: { "other": { "$state": "/path" } })',
-    );
-    lines.push(
-      '  - greaterThan — value must be greater than another field (args: { "other": { "$state": "/path" } })',
-    );
-    lines.push(
-      '  - requiredIf — required only when another field is truthy (args: { "field": { "$state": "/path" } })',
+      '  - matches — must equal another field (args: { "other": "value" })',
     );
     lines.push("");
     lines.push("Example:");
@@ -984,33 +947,6 @@ Note: state patches appear right after the elements that use them, so the UI fil
     lines.push("");
   }
 
-  // State watchers section — only emit when actions are available (watchers
-  // trigger actions, so the section is irrelevant without them).
-  if (hasCustomActions || hasBuiltInActions) {
-    lines.push("STATE WATCHERS:");
-    lines.push(
-      "Elements can have an optional `watch` field to react to state changes and trigger actions. The `watch` field is a top-level field on the element (sibling of type/props/children), NOT inside props.",
-    );
-    lines.push(
-      "Maps state paths (JSON Pointers) to action bindings. When the value at a watched path changes, the bound actions fire automatically.",
-    );
-    lines.push("");
-    lines.push(
-      "Example (cascading select — country changes trigger city loading):",
-    );
-    lines.push(
-      `  ${JSON.stringify({ type: "Select", props: { value: { $bindState: "/form/country" }, options: ["US", "Canada", "UK"] }, watch: { "/form/country": { action: "loadCities", params: { country: { $state: "/form/country" } } } }, children: [] })}`,
-    );
-    lines.push("");
-    lines.push(
-      "Use `watch` for cascading dependencies where changing one field should trigger side effects (loading data, resetting dependent fields, computing derived values).",
-    );
-    lines.push(
-      "IMPORTANT: `watch` is a top-level field on the element (sibling of type/props/children), NOT inside props. Watchers only fire when the value changes, not on initial render.",
-    );
-    lines.push("");
-  }
-
   // Rules
   lines.push("RULES:");
   const baseRules =
@@ -1252,14 +1188,7 @@ function formatZodType(schema: z.ZodType): string {
     }
     case "ZodArray":
     case "array": {
-      // safely resolve inner type for Zod arrays
-      const inner = (
-        typeof def.element === "object"
-          ? def.element
-          : typeof def.type === "object"
-            ? def.type
-            : undefined
-      ) as z.ZodType | undefined;
+      const inner = (def.type as z.ZodType) ?? (def.element as z.ZodType);
       return inner ? `Array<${formatZodType(inner)}>` : "Array<unknown>";
     }
     case "ZodObject":

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

@@ -1,250 +0,0 @@
-import { describe, it, expect } from "vitest";
-import type { Spec } from "./types";
-import { validateSpec, autoFixSpec } from "./spec-validator";
-
-// =============================================================================
-// validateSpec
-// =============================================================================
-
-describe("validateSpec", () => {
-  it("returns valid for a correct spec", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: { type: "Stack", props: {}, children: ["child1"] },
-        child1: { type: "Text", props: { text: "hello" }, children: [] },
-      },
-    };
-    const result = validateSpec(spec);
-    expect(result.valid).toBe(true);
-    expect(result.issues).toHaveLength(0);
-  });
-
-  it("detects missing root", () => {
-    const spec = {
-      root: "",
-      elements: { a: { type: "T", props: {}, children: [] } },
-    } as Spec;
-    const result = validateSpec(spec);
-    expect(result.valid).toBe(false);
-    expect(result.issues.some((i) => i.code === "missing_root")).toBe(true);
-  });
-
-  it("detects root_not_found", () => {
-    const spec: Spec = {
-      root: "missing",
-      elements: { a: { type: "T", props: {}, children: [] } },
-    };
-    const result = validateSpec(spec);
-    expect(result.valid).toBe(false);
-    expect(result.issues.some((i) => i.code === "root_not_found")).toBe(true);
-  });
-
-  it("detects empty spec", () => {
-    const spec: Spec = { root: "r", elements: {} };
-    const result = validateSpec(spec);
-    expect(result.valid).toBe(false);
-    expect(result.issues.some((i) => i.code === "empty_spec")).toBe(true);
-  });
-
-  it("detects missing_child", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: { type: "Stack", props: {}, children: ["nonexistent"] },
-      },
-    };
-    const result = validateSpec(spec);
-    expect(result.valid).toBe(false);
-    expect(result.issues.some((i) => i.code === "missing_child")).toBe(true);
-  });
-
-  it("detects visible_in_props", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: {
-          type: "Text",
-          props: { visible: { $state: "/show" } },
-          children: [],
-        },
-      },
-    };
-    const result = validateSpec(spec);
-    expect(result.valid).toBe(false);
-    expect(result.issues.some((i) => i.code === "visible_in_props")).toBe(true);
-  });
-
-  it("detects on_in_props", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: {
-          type: "Button",
-          props: { on: { press: { action: "doSomething" } } },
-          children: [],
-        },
-      },
-    };
-    const result = validateSpec(spec);
-    expect(result.valid).toBe(false);
-    expect(result.issues.some((i) => i.code === "on_in_props")).toBe(true);
-  });
-
-  it("detects repeat_in_props", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: {
-          type: "Stack",
-          props: { repeat: { statePath: "/items" } },
-          children: [],
-        },
-      },
-    };
-    const result = validateSpec(spec);
-    expect(result.valid).toBe(false);
-    expect(result.issues.some((i) => i.code === "repeat_in_props")).toBe(true);
-  });
-
-  it("detects watch_in_props", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: {
-          type: "Select",
-          props: {
-            watch: {
-              "/form/country": { action: "loadCities" },
-            },
-          },
-          children: [],
-        },
-      },
-    };
-    const result = validateSpec(spec);
-    expect(result.valid).toBe(false);
-    const watchIssue = result.issues.find((i) => i.code === "watch_in_props");
-    expect(watchIssue).toBeDefined();
-    expect(watchIssue!.elementKey).toBe("root");
-  });
-
-  it("detects orphaned elements when checkOrphans is true", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: { type: "Stack", props: {}, children: [] },
-        orphan: { type: "Text", props: {}, children: [] },
-      },
-    };
-    const result = validateSpec(spec, { checkOrphans: true });
-    expect(result.valid).toBe(true);
-    expect(result.issues.some((i) => i.code === "orphaned_element")).toBe(true);
-  });
-});
-
-// =============================================================================
-// autoFixSpec
-// =============================================================================
-
-describe("autoFixSpec", () => {
-  it("moves visible from props to element level", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: {
-          type: "Text",
-          props: { text: "hi", visible: { $state: "/show" } },
-          children: [],
-        },
-      },
-    };
-    const { spec: fixed, fixes } = autoFixSpec(spec);
-    expect(
-      (fixed.elements.root.props as Record<string, unknown>).visible,
-    ).toBeUndefined();
-    expect(fixed.elements.root.visible).toEqual({ $state: "/show" });
-    expect(fixes.some((f) => f.includes("visible"))).toBe(true);
-  });
-
-  it("moves on from props to element level", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: {
-          type: "Button",
-          props: { label: "OK", on: { press: { action: "submit" } } },
-          children: [],
-        },
-      },
-    };
-    const { spec: fixed, fixes } = autoFixSpec(spec);
-    expect(
-      (fixed.elements.root.props as Record<string, unknown>).on,
-    ).toBeUndefined();
-    expect(fixed.elements.root.on).toEqual({ press: { action: "submit" } });
-    expect(fixes.some((f) => f.includes('"on"'))).toBe(true);
-  });
-
-  it("moves repeat from props to element level", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: {
-          type: "Stack",
-          props: { repeat: { statePath: "/items" } },
-          children: ["child"],
-        },
-        child: { type: "Text", props: {}, children: [] },
-      },
-    };
-    const { spec: fixed, fixes } = autoFixSpec(spec);
-    expect(
-      (fixed.elements.root.props as Record<string, unknown>).repeat,
-    ).toBeUndefined();
-    expect(fixed.elements.root.repeat).toEqual({ statePath: "/items" });
-    expect(fixes.some((f) => f.includes('"repeat"'))).toBe(true);
-  });
-
-  it("moves watch from props to element level", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: {
-          type: "Select",
-          props: {
-            label: "Country",
-            watch: {
-              "/form/country": { action: "loadCities" },
-            },
-          },
-          children: [],
-        },
-      },
-    };
-    const { spec: fixed, fixes } = autoFixSpec(spec);
-    expect(
-      (fixed.elements.root.props as Record<string, unknown>).watch,
-    ).toBeUndefined();
-    expect(fixed.elements.root.watch).toEqual({
-      "/form/country": { action: "loadCities" },
-    });
-    expect(fixes.some((f) => f.includes('"watch"'))).toBe(true);
-  });
-
-  it("returns no fixes for a correct spec", () => {
-    const spec: Spec = {
-      root: "root",
-      elements: {
-        root: {
-          type: "Stack",
-          props: { direction: "vertical" },
-          children: [],
-          watch: { "/x": { action: "y" } },
-        },
-      },
-    };
-    const { fixes } = autoFixSpec(spec);
-    expect(fixes).toHaveLength(0);
-  });
-});

packages/core/src/spec-validator.ts

@@ -28,8 +28,7 @@ export interface SpecIssue {
     | "orphaned_element"
     | "empty_spec"
     | "on_in_props"
-    | "repeat_in_props"
-    | "watch_in_props";
+    | "repeat_in_props";
 }
 
 /**
@@ -152,16 +151,6 @@ export function validateSpec(
         code: "repeat_in_props",
       });
     }
-
-    // 3e. `watch` inside props (should be a top-level field)
-    if (props && "watch" in props && props.watch !== undefined) {
-      issues.push({
-        severity: "error",
-        message: `Element "${key}" has "watch" inside "props". It should be a top-level field on the element (sibling of type/props/children).`,
-        elementKey: key,
-        code: "watch_in_props",
-      });
-    }
   }
 
   // 4. Orphaned elements (optional)
@@ -259,21 +248,6 @@ export function autoFixSpec(spec: Spec): {
       fixes.push(`Moved "repeat" from props to element level on "${key}".`);
     }
 
-    currentProps = fixed.props as Record<string, unknown> | undefined;
-    if (
-      currentProps &&
-      "watch" in currentProps &&
-      currentProps.watch !== undefined
-    ) {
-      const { watch, ...restProps } = currentProps;
-      fixed = {
-        ...fixed,
-        props: restProps,
-        watch: watch as UIElement["watch"],
-      };
-      fixes.push(`Moved "watch" from props to element level on "${key}".`);
-    }
-
     fixedElements[key] = fixed;
   }
 

packages/core/src/types.ts

@@ -69,12 +69,6 @@ export interface UIElement<
   on?: Record<string, ActionBinding | ActionBinding[]>;
   /** Repeat children once per item in a state array */
   repeat?: { statePath: string; key?: string };
-  /**
-   * State watchers — maps JSON Pointer state paths to action bindings.
-   * When the value at a watched path changes, the bound actions fire.
-   * Useful for cascading dependencies (e.g. country → city option loading).
-   */
-  watch?: Record<string, ActionBinding | ActionBinding[]>;
 }
 
 /**

packages/core/src/validation.test.ts

@@ -187,226 +187,6 @@ describe("builtInValidationFunctions", () => {
       ).toBe(false);
     });
   });
-
-  describe("equalTo", () => {
-    it("passes when values are equal", () => {
-      expect(builtInValidationFunctions.equalTo("abc", { other: "abc" })).toBe(
-        true,
-      );
-    });
-
-    it("fails when values differ", () => {
-      expect(builtInValidationFunctions.equalTo("abc", { other: "xyz" })).toBe(
-        false,
-      );
-    });
-  });
-
-  describe("lessThan", () => {
-    it("passes when value is less than other", () => {
-      expect(builtInValidationFunctions.lessThan(3, { other: 5 })).toBe(true);
-    });
-
-    it("fails when value equals other", () => {
-      expect(builtInValidationFunctions.lessThan(5, { other: 5 })).toBe(false);
-    });
-
-    it("fails when value is greater than other", () => {
-      expect(builtInValidationFunctions.lessThan(7, { other: 5 })).toBe(false);
-    });
-
-    it("coerces numeric string vs number", () => {
-      expect(builtInValidationFunctions.lessThan("3", { other: 5 })).toBe(true);
-    });
-
-    it("fails coercion when non-numeric string", () => {
-      expect(builtInValidationFunctions.lessThan("abc", { other: 5 })).toBe(
-        false,
-      );
-    });
-
-    it("passes for string comparison (ISO dates)", () => {
-      expect(
-        builtInValidationFunctions.lessThan("2026-01-01", {
-          other: "2026-06-15",
-        }),
-      ).toBe(true);
-    });
-
-    it("fails for equal strings", () => {
-      expect(
-        builtInValidationFunctions.lessThan("2026-01-01", {
-          other: "2026-01-01",
-        }),
-      ).toBe(false);
-    });
-
-    it("returns false when value is empty string", () => {
-      expect(builtInValidationFunctions.lessThan("", { other: 5 })).toBe(false);
-    });
-
-    it("returns false when other is empty string", () => {
-      expect(builtInValidationFunctions.lessThan(3, { other: "" })).toBe(false);
-    });
-
-    it("returns false when value is empty string vs non-empty string", () => {
-      expect(builtInValidationFunctions.lessThan("", { other: "abc" })).toBe(
-        false,
-      );
-    });
-
-    it("returns false when other is empty string vs non-empty string", () => {
-      expect(builtInValidationFunctions.lessThan("abc", { other: "" })).toBe(
-        false,
-      );
-    });
-
-    it("returns false when other is null", () => {
-      expect(builtInValidationFunctions.lessThan(3, { other: null })).toBe(
-        false,
-      );
-    });
-
-    it("returns false when value is null", () => {
-      expect(builtInValidationFunctions.lessThan(null, { other: 5 })).toBe(
-        false,
-      );
-    });
-
-    it("returns false when other is undefined", () => {
-      expect(builtInValidationFunctions.lessThan(3, { other: undefined })).toBe(
-        false,
-      );
-    });
-  });
-
-  describe("greaterThan", () => {
-    it("passes when value is greater than other", () => {
-      expect(builtInValidationFunctions.greaterThan(7, { other: 5 })).toBe(
-        true,
-      );
-    });
-
-    it("fails when value equals other", () => {
-      expect(builtInValidationFunctions.greaterThan(5, { other: 5 })).toBe(
-        false,
-      );
-    });
-
-    it("fails when value is less than other", () => {
-      expect(builtInValidationFunctions.greaterThan(3, { other: 5 })).toBe(
-        false,
-      );
-    });
-
-    it("coerces numeric string vs number", () => {
-      expect(builtInValidationFunctions.greaterThan("7", { other: 5 })).toBe(
-        true,
-      );
-    });
-
-    it("fails coercion when non-numeric string", () => {
-      expect(builtInValidationFunctions.greaterThan("abc", { other: 5 })).toBe(
-        false,
-      );
-    });
-
-    it("passes for string comparison (ISO dates)", () => {
-      expect(
-        builtInValidationFunctions.greaterThan("2026-06-15", {
-          other: "2026-01-01",
-        }),
-      ).toBe(true);
-    });
-
-    it("fails for lesser strings", () => {
-      expect(
-        builtInValidationFunctions.greaterThan("2026-01-01", {
-          other: "2026-06-15",
-        }),
-      ).toBe(false);
-    });
-
-    it("returns false when value is empty string", () => {
-      expect(builtInValidationFunctions.greaterThan("", { other: 5 })).toBe(
-        false,
-      );
-    });
-
-    it("returns false when other is empty string", () => {
-      expect(builtInValidationFunctions.greaterThan(3, { other: "" })).toBe(
-        false,
-      );
-    });
-
-    it("returns false when value is empty string vs non-empty string", () => {
-      expect(builtInValidationFunctions.greaterThan("", { other: "abc" })).toBe(
-        false,
-      );
-    });
-
-    it("returns false when other is empty string vs non-empty string", () => {
-      expect(builtInValidationFunctions.greaterThan("abc", { other: "" })).toBe(
-        false,
-      );
-    });
-
-    it("returns false when other is null", () => {
-      expect(builtInValidationFunctions.greaterThan(3, { other: null })).toBe(
-        false,
-      );
-    });
-
-    it("returns false when value is undefined", () => {
-      expect(
-        builtInValidationFunctions.greaterThan(undefined, { other: 5 }),
-      ).toBe(false);
-    });
-
-    it("returns false when value is null", () => {
-      expect(builtInValidationFunctions.greaterThan(null, { other: 5 })).toBe(
-        false,
-      );
-    });
-  });
-
-  describe("requiredIf", () => {
-    it("passes when condition is falsy (field not required)", () => {
-      expect(builtInValidationFunctions.requiredIf("", { field: false })).toBe(
-        true,
-      );
-      expect(builtInValidationFunctions.requiredIf("", { field: "" })).toBe(
-        true,
-      );
-      expect(builtInValidationFunctions.requiredIf("", { field: null })).toBe(
-        true,
-      );
-      expect(
-        builtInValidationFunctions.requiredIf("", { field: undefined }),
-      ).toBe(true);
-    });
-
-    it("fails when condition is truthy and value is empty", () => {
-      expect(builtInValidationFunctions.requiredIf("", { field: true })).toBe(
-        false,
-      );
-      expect(
-        builtInValidationFunctions.requiredIf(null, { field: "yes" }),
-      ).toBe(false);
-      expect(
-        builtInValidationFunctions.requiredIf(undefined, { field: 1 }),
-      ).toBe(false);
-    });
-
-    it("passes when condition is truthy and value is present", () => {
-      expect(
-        builtInValidationFunctions.requiredIf("hello", { field: true }),
-      ).toBe(true);
-      expect(builtInValidationFunctions.requiredIf(42, { field: true })).toBe(
-        true,
-      );
-    });
-  });
 });
 
 describe("runValidationCheck", () => {
@@ -611,22 +391,6 @@ describe("check helper", () => {
     });
   });
 
-  describe("numeric", () => {
-    it("creates numeric check with default message", () => {
-      const c = check.numeric();
-
-      expect(c.type).toBe("numeric");
-      expect(c.message).toBe("Must be a number");
-    });
-
-    it("creates numeric check with custom message", () => {
-      const c = check.numeric("Numbers only");
-
-      expect(c.type).toBe("numeric");
-      expect(c.message).toBe("Numbers only");
-    });
-  });
-
   describe("matches", () => {
     it("creates matches check with path reference", () => {
       const c = check.matches("/password", "Passwords must match");
@@ -636,109 +400,4 @@ describe("check helper", () => {
       expect(c.message).toBe("Passwords must match");
     });
   });
-
-  describe("equalTo", () => {
-    it("creates equalTo check with path reference", () => {
-      const c = check.equalTo("/email", "Emails must match");
-
-      expect(c.type).toBe("equalTo");
-      expect(c.args).toEqual({ other: { $state: "/email" } });
-      expect(c.message).toBe("Emails must match");
-    });
-  });
-
-  describe("lessThan", () => {
-    it("creates lessThan check with path reference", () => {
-      const c = check.lessThan("/maxValue", "Must be less");
-
-      expect(c.type).toBe("lessThan");
-      expect(c.args).toEqual({ other: { $state: "/maxValue" } });
-      expect(c.message).toBe("Must be less");
-    });
-  });
-
-  describe("greaterThan", () => {
-    it("creates greaterThan check with path reference", () => {
-      const c = check.greaterThan("/minValue");
-
-      expect(c.type).toBe("greaterThan");
-      expect(c.args).toEqual({ other: { $state: "/minValue" } });
-    });
-  });
-
-  describe("requiredIf", () => {
-    it("creates requiredIf check with path reference", () => {
-      const c = check.requiredIf("/toggle", "Required when toggle is on");
-
-      expect(c.type).toBe("requiredIf");
-      expect(c.args).toEqual({ field: { $state: "/toggle" } });
-      expect(c.message).toBe("Required when toggle is on");
-    });
-  });
-});
-
-// =============================================================================
-// Deep arg resolution in runValidationCheck
-// =============================================================================
-
-describe("deep arg resolution", () => {
-  it("resolves nested $state refs in validation args", () => {
-    const result = runValidationCheck(
-      {
-        type: "matches",
-        args: { other: { $state: "/form/password" } },
-        message: "Passwords must match",
-      },
-      {
-        value: "secret123",
-        stateModel: { form: { password: "secret123" } },
-      },
-    );
-    expect(result.valid).toBe(true);
-  });
-
-  it("resolves $state in cross-field lessThan check", () => {
-    const result = runValidationCheck(
-      {
-        type: "lessThan",
-        args: { other: { $state: "/form/maxPrice" } },
-        message: "Must be less than max price",
-      },
-      {
-        value: 50,
-        stateModel: { form: { maxPrice: 100 } },
-      },
-    );
-    expect(result.valid).toBe(true);
-  });
-
-  it("resolves $state in requiredIf check", () => {
-    const result = runValidationCheck(
-      {
-        type: "requiredIf",
-        args: { field: { $state: "/form/enableEmail" } },
-        message: "Email is required",
-      },
-      {
-        value: "",
-        stateModel: { form: { enableEmail: true } },
-      },
-    );
-    expect(result.valid).toBe(false);
-  });
-
-  it("passes requiredIf when condition is false", () => {
-    const result = runValidationCheck(
-      {
-        type: "requiredIf",
-        args: { field: { $state: "/form/enableEmail" } },
-        message: "Email is required",
-      },
-      {
-        value: "",
-        stateModel: { form: { enableEmail: false } },
-      },
-    );
-    expect(result.valid).toBe(true);
-  });
 });

packages/core/src/validation.ts

@@ -2,7 +2,6 @@ import { z } from "zod";
 import type { DynamicValue, StateModel, VisibilityCondition } from "./types";
 import { DynamicValueSchema, resolveDynamicValue } from "./types";
 import { VisibilityConditionSchema, evaluateVisibility } from "./visibility";
-import { resolvePropValue } from "./props";
 
 /**
  * Validation check definition
@@ -64,14 +63,6 @@ export interface ValidationFunctionDefinition {
   description?: string;
 }
 
-const matchesImpl: ValidationFunction = (
-  value: unknown,
-  args?: Record<string, unknown>,
-) => {
-  const other = args?.other;
-  return value === other;
-};
-
 /**
  * Built-in validation functions
  */
@@ -173,64 +164,9 @@ export const builtInValidationFunctions: Record<string, ValidationFunction> = {
   /**
    * Check if value matches another field
    */
-  matches: matchesImpl,
-
-  /**
-   * Alias for matches with a more descriptive name for cross-field equality
-   */
-  equalTo: matchesImpl,
-
-  /**
-   * Check if value is less than another field's value.
-   * Supports numbers, strings (useful for ISO date comparison), and
-   * cross-type numeric coercion (e.g. string "3" vs number 5).
-   */
-  lessThan: (value: unknown, args?: Record<string, unknown>) => {
+  matches: (value: unknown, args?: Record<string, unknown>) => {
     const other = args?.other;
-    if (value == null || other == null || value === "" || other === "")
-      return false;
-    if (typeof value === "number" && typeof other === "number")
-      return value < other;
-    if (typeof value === "string" && typeof other === "string")
-      return value < other;
-    const numVal = Number(value);
-    const numOther = Number(other);
-    if (!isNaN(numVal) && !isNaN(numOther)) return numVal < numOther;
-    return false;
-  },
-
-  /**
-   * Check if value is greater than another field's value.
-   * Supports numbers, strings (useful for ISO date comparison), and
-   * cross-type numeric coercion (e.g. string "7" vs number 5).
-   */
-  greaterThan: (value: unknown, args?: Record<string, unknown>) => {
-    const other = args?.other;
-    if (value == null || other == null || value === "" || other === "")
-      return false;
-    if (typeof value === "number" && typeof other === "number")
-      return value > other;
-    if (typeof value === "string" && typeof other === "string")
-      return value > other;
-    const numVal = Number(value);
-    const numOther = Number(other);
-    if (!isNaN(numVal) && !isNaN(numOther)) return numVal > numOther;
-    return false;
-  },
-
-  /**
-   * Required only when a condition is met.
-   * Uses JS truthiness: 0, false, "", null, and undefined are all
-   * treated as "condition not met" (field not required), matching
-   * the visibility system's bare-condition semantics.
-   */
-  requiredIf: (value: unknown, args?: Record<string, unknown>) => {
-    const condition = args?.field;
-    if (!condition) return true;
-    if (value === null || value === undefined) return false;
-    if (typeof value === "string") return value.trim().length > 0;
-    if (Array.isArray(value)) return value.length > 0;
-    return true;
+    return value === other;
   },
 };
 
@@ -273,12 +209,11 @@ export function runValidationCheck(
 ): ValidationCheckResult {
   const { value, stateModel, customFunctions } = ctx;
 
-  // Resolve args using resolvePropValue so nested $state refs (and any other
-  // prop expressions) are handled consistently with the rest of the system.
+  // Resolve args
   const resolvedArgs: Record<string, unknown> = {};
   if (check.args) {
     for (const [key, argValue] of Object.entries(check.args)) {
-      resolvedArgs[key] = resolvePropValue(argValue, { stateModel });
+      resolvedArgs[key] = resolveDynamicValue(argValue, stateModel);
     }
   }
 
@@ -391,11 +326,6 @@ export const check = {
     message,
   }),
 
-  numeric: (message = "Must be a number"): ValidationCheck => ({
-    type: "numeric",
-    message,
-  }),
-
   matches: (
     otherPath: string,
     message = "Fields must match",
@@ -404,34 +334,4 @@ export const check = {
     args: { other: { $state: otherPath } },
     message,
   }),
-
-  equalTo: (
-    otherPath: string,
-    message = "Fields must match",
-  ): ValidationCheck => ({
-    type: "equalTo",
-    args: { other: { $state: otherPath } },
-    message,
-  }),
-
-  lessThan: (otherPath: string, message?: string): ValidationCheck => ({
-    type: "lessThan",
-    args: { other: { $state: otherPath } },
-    message: message ?? "Must be less than the compared field",
-  }),
-
-  greaterThan: (otherPath: string, message?: string): ValidationCheck => ({
-    type: "greaterThan",
-    args: { other: { $state: otherPath } },
-    message: message ?? "Must be greater than the compared field",
-  }),
-
-  requiredIf: (
-    fieldPath: string,
-    message = "This field is required",
-  ): ValidationCheck => ({
-    type: "requiredIf",
-    args: { field: { $state: fieldPath } },
-    message,
-  }),
 };

packages/jotai/CHANGELOG.md

@@ -1,57 +0,0 @@
-# @json-render/jotai
-
-## 0.10.0
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-
-## 0.9.1
-
-### Patch Changes
-
-- @json-render/core@0.9.1
-
-## 0.9.0
-
-### Minor Changes
-
-- 1d755c1: External state store, store adapters, and bug fixes.
-
-  ### New: External State Store
-
-  The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
-  - Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
-  - `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
-  - When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
-  - When `store` is omitted, everything works exactly as before (fully backward compatible)
-  - Applied across all platform packages: react, react-native, react-pdf
-  - Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
-
-  ### New: Store Adapter Packages
-  - `@json-render/zustand` — Zustand adapter for `StateStore`
-  - `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
-  - `@json-render/jotai` — Jotai adapter for `StateStore`
-
-  ### Changed: `onStateChange` signature updated (breaking)
-
-  The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
-
-  ```ts
-  // Before
-  onStateChange?: (path: string, value: unknown) => void
-
-  // After
-  onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
-  ```
-
-  ### Fixed
-  - Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
-  - Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
-  - Fix safely resolving inner type for Zod arrays in core schema
-
-### Patch Changes
-
-- Updated dependencies [1d755c1]
-  - @json-render/core@0.9.0

packages/jotai/package.json

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

packages/react-native/CHANGELOG.md

@@ -1,63 +1,5 @@
 # @json-render/react-native
 
-## 0.10.0
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-
-## 0.9.1
-
-### Patch Changes
-
-- b103676: Fix install failure caused by `@internal/react-state` (a private workspace package) being listed as a published dependency. The internal package is now bundled into each renderer's output at build time, so consumers no longer need to resolve it from npm.
-  - @json-render/core@0.9.1
-
-## 0.9.0
-
-### Minor Changes
-
-- 1d755c1: External state store, store adapters, and bug fixes.
-
-  ### New: External State Store
-
-  The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
-  - Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
-  - `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
-  - When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
-  - When `store` is omitted, everything works exactly as before (fully backward compatible)
-  - Applied across all platform packages: react, react-native, react-pdf
-  - Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
-
-  ### New: Store Adapter Packages
-  - `@json-render/zustand` — Zustand adapter for `StateStore`
-  - `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
-  - `@json-render/jotai` — Jotai adapter for `StateStore`
-
-  ### Changed: `onStateChange` signature updated (breaking)
-
-  The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
-
-  ```ts
-  // Before
-  onStateChange?: (path: string, value: unknown) => void
-
-  // After
-  onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
-  ```
-
-  ### Fixed
-  - Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
-  - Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
-  - Fix safely resolving inner type for Zod arrays in core schema
-
-### Patch Changes
-
-- Updated dependencies [1d755c1]
-  - @json-render/core@0.9.0
-  - @internal/react-state@0.8.1
-
 ## 0.8.0
 
 ### Patch Changes

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/react-native",
-  "version": "0.10.0",
+  "version": "0.8.0",
   "license": "Apache-2.0",
   "description": "React Native renderer for @json-render/core. JSON becomes React Native components.",
   "keywords": [
@@ -56,10 +56,10 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@json-render/core": "workspace:*"
+    "@json-render/core": "workspace:*",
+    "@internal/react-state": "workspace:*"
   },
   "devDependencies": {
-    "@internal/react-state": "workspace:*",
     "@internal/typescript-config": "workspace:*",
     "@types/react": "19.2.3",
     "react-native": "0.83.1",

packages/react-native/src/contexts/actions.tsx

@@ -135,7 +135,7 @@ export function ActionProvider({
   navigate,
   children,
 }: ActionProviderProps) {
-  const { get, set, getSnapshot } = useStateStore();
+  const { state, get, set } = useStateStore();
   const [handlers, setHandlers] =
     useState<Record<string, ActionHandler>>(initialHandlers);
   const [loadingActions, setLoadingActions] = useState<Set<string>>(new Set());
@@ -151,7 +151,7 @@ export function ActionProvider({
 
   const execute = useCallback(
     async (binding: ActionBinding) => {
-      const resolved = resolveAction(binding, getSnapshot());
+      const resolved = resolveAction(binding, state);
 
       // Built-in: setState updates the StateProvider state directly
       if (resolved.action === "setState" && resolved.params) {
@@ -298,7 +298,7 @@ export function ActionProvider({
         });
       }
     },
-    [handlers, get, set, getSnapshot, navigate],
+    [state, handlers, get, set, navigate],
   );
 
   const confirm = useCallback(() => {

packages/react-native/src/renderer.tsx

@@ -158,7 +158,6 @@ const ElementRenderer = React.memo(function ElementRenderer({
   const repeatScope = useRepeatScope();
   const { ctx } = useVisibility();
   const { execute } = useActions();
-  const { getSnapshot } = useStateStore();
 
   // Build context with repeat scope (used for both visibility and props)
   const fullCtx: PropResolutionContext = useMemo(
@@ -184,29 +183,25 @@ const ElementRenderer = React.memo(function ElementRenderer({
   // Must be called before any early return to satisfy Rules of Hooks.
   const onBindings = element.on;
   const emit = useCallback(
-    async (eventName: string) => {
+    (eventName: string) => {
       const binding = onBindings?.[eventName];
       if (!binding) return;
       const actionBindings = Array.isArray(binding) ? binding : [binding];
       for (const b of actionBindings) {
         if (!b.params) {
-          await execute(b);
+          execute(b);
           continue;
         }
-        // Build a fresh context with live store state so that $state
-        // references in later actions see mutations from earlier ones.
-        const liveCtx: PropResolutionContext = {
-          ...fullCtx,
-          stateModel: getSnapshot(),
-        };
+        // Resolve all action params via resolveActionParam which handles
+        // $item (→ absolute state path), $index (→ number), $state, $cond, and literals.
         const resolved: Record<string, unknown> = {};
         for (const [key, val] of Object.entries(b.params)) {
-          resolved[key] = resolveActionParam(val, liveCtx);
+          resolved[key] = resolveActionParam(val, fullCtx);
         }
-        await execute({ ...b, params: resolved });
+        execute({ ...b, params: resolved });
       }
     },
-    [onBindings, execute, fullCtx, getSnapshot],
+    [onBindings, execute, fullCtx],
   );
 
   // Don't render if not visible

packages/react-native/tsup.config.ts

@@ -3,9 +3,8 @@ import { defineConfig } from "tsup";
 export default defineConfig({
   entry: ["src/index.ts", "src/schema.ts", "src/catalog.ts"],
   format: ["cjs", "esm"],
-  dts: { resolve: ["@internal/react-state"] },
+  dts: true,
   sourcemap: true,
   clean: true,
-  noExternal: ["@internal/react-state"],
   external: ["react", "react-native", "@json-render/core", "zod"],
 });

packages/react-pdf/CHANGELOG.md

@@ -1,63 +1,5 @@
 # @json-render/react-pdf
 
-## 0.10.0
-
-### Patch Changes
-
-- Updated dependencies [9cef4e9]
-  - @json-render/core@0.10.0
-
-## 0.9.1
-
-### Patch Changes
-
-- b103676: Fix install failure caused by `@internal/react-state` (a private workspace package) being listed as a published dependency. The internal package is now bundled into each renderer's output at build time, so consumers no longer need to resolve it from npm.
-  - @json-render/core@0.9.1
-
-## 0.9.0
-
-### Minor Changes
-
-- 1d755c1: External state store, store adapters, and bug fixes.
-
-  ### New: External State Store
-
-  The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
-  - Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
-  - `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
-  - When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
-  - When `store` is omitted, everything works exactly as before (fully backward compatible)
-  - Applied across all platform packages: react, react-native, react-pdf
-  - Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
-
-  ### New: Store Adapter Packages
-  - `@json-render/zustand` — Zustand adapter for `StateStore`
-  - `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
-  - `@json-render/jotai` — Jotai adapter for `StateStore`
-
-  ### Changed: `onStateChange` signature updated (breaking)
-
-  The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
-
-  ```ts
-  // Before
-  onStateChange?: (path: string, value: unknown) => void
-
-  // After
-  onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
-  ```
-
-  ### Fixed
-  - Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
-  - Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
-  - Fix safely resolving inner type for Zod arrays in core schema
-
-### Patch Changes
-
-- Updated dependencies [1d755c1]
-  - @json-render/core@0.9.0
-  - @internal/react-state@0.8.1
-
 ## 0.8.0
 
 ### Minor Changes

packages/react-pdf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/react-pdf",
-  "version": "0.10.0",
+  "version": "0.8.0",
   "license": "Apache-2.0",
   "description": "React PDF renderer for @json-render/core. JSON becomes PDF documents.",
   "keywords": [
@@ -61,10 +61,10 @@
   },
   "dependencies": {
     "@json-render/core": "workspace:*",
+    "@internal/react-state": "workspace:*",
     "@react-pdf/renderer": "^4.3.2"
   },
   "devDependencies": {
-    "@internal/react-state": "workspace:*",
     "@internal/typescript-config": "workspace:*",
     "@types/react": "19.2.3",
     "tsup": "^8.0.2",