chore: version packages (#75)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/workflows/release.yml

@@ -24,8 +24,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
-        with:
-          version: 9
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

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

@@ -94,15 +94,15 @@ type Registry = Record<string, React.ComponentType<ComponentRenderProps>>;`}</Co
 
       <h3 className="text-lg font-semibold mt-8 mb-4">useUIStream</h3>
       <Code lang="typescript">{`const {
-  spec,         // Spec - current UI state
+  spec,         // Spec | null - current UI state
   isStreaming,  // boolean - true while streaming
   error,        // Error | null
-  send,         // (prompt: string) => void
-  abort,        // () => void
+  send,         // (prompt: string, context?: Record<string, unknown>) => Promise<void>
+  clear,        // () => void - reset spec and error
 } = useUIStream({
-  api: string,                       // API endpoint URL
-  onChunk?: (chunk: string) => void, // Called for each chunk
-  onFinish?: (spec: Spec) => void,   // Called when streaming completes
+  api: string,                         // API endpoint URL
+  onComplete?: (spec: Spec) => void,   // Called when streaming completes
+  onError?: (error: Error) => void,    // Called when an error occurs
 });`}</Code>
 
       <h3 className="text-lg font-semibold mt-8 mb-4">useData</h3>

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

@@ -14,82 +14,86 @@ export default function RegistryPage() {
         life.
       </p>
 
-      {/* Components Section */}
-      <h2 className="text-xl font-semibold mt-12 mb-4">Component Registry</h2>
+      {/* defineRegistry */}
+      <h2 className="text-xl font-semibold mt-12 mb-4">defineRegistry</h2>
       <p className="text-sm text-muted-foreground mb-4">
-        Create a registry that maps catalog component types to React components:
+        Use <code>defineRegistry</code> to create a type-safe registry from your
+        catalog. Pass your components, actions, or both in a single call:
       </p>
-      <Code lang="tsx">{`import { useAction } from '@json-render/react';
+      <Code lang="tsx">{`import { defineRegistry } from '@json-render/react';
+import { myCatalog } from './catalog';
 
-const registry = {
-  Card: ({ props, children }) => (
-    <div className="card">
-      <h2>{props.title}</h2>
-      {props.description && <p>{props.description}</p>}
-      {children}
-    </div>
-  ),
-  
-  Button: ({ props }) => {
-    const executeAction = useAction(props.action);
-    return (
-      <button onClick={() => executeAction({})}>
+export const { registry, handlers, executeAction } = defineRegistry(myCatalog, {
+  components: {
+    Card: ({ props, children }) => (
+      <div className="card">
+        <h2>{props.title}</h2>
+        {props.description && <p>{props.description}</p>}
+        {children}
+      </div>
+    ),
+
+    Button: ({ props, onAction }) => (
+      <button onClick={() => onAction?.({ name: props.action })}>
         {props.label}
       </button>
-    );
+    ),
   },
-};`}</Code>
 
+  actions: {
+    submit_form: async (params, setData) => {
+      const res = await fetch('/api/submit', {
+        method: 'POST',
+        body: JSON.stringify(params),
+      });
+      const result = await res.json();
+      setData((prev) => ({ ...prev, formResult: result }));
+    },
+
+    export_data: async (params) => {
+      const blob = await generateExport(params.format);
+      downloadBlob(blob, \`export.\${params.format}\`);
+    },
+  },
+});`}</Code>
+
+      <p className="text-sm text-muted-foreground mt-4 mb-4">
+        The returned object contains:
+      </p>
+      <ul className="list-disc list-inside text-sm text-muted-foreground mb-4 space-y-1">
+        <li>
+          <code>registry</code> - component registry for{" "}
+          <code>{"<Renderer />"}</code>
+        </li>
+        <li>
+          <code>handlers</code> - factory for ActionProvider-compatible handlers
+        </li>
+        <li>
+          <code>executeAction</code> - imperative action dispatch (for use
+          outside the React tree)
+        </li>
+      </ul>
+
+      {/* Component Props */}
       <h2 className="text-xl font-semibold mt-12 mb-4">Component Props</h2>
       <p className="text-sm text-muted-foreground mb-4">
-        Each component receives these props:
+        Each component in the registry receives a <code>ComponentContext</code>{" "}
+        object:
       </p>
-      <Code lang="typescript">{`interface ComponentProps<T = Record<string, unknown>> {
-  props: T;                    // Component props from the spec
+      <Code lang="typescript">{`interface ComponentContext {
+  props: T;                    // Type-safe props from your catalog
   children?: React.ReactNode;  // Rendered children (for slot components)
-}
+  onAction?: (action: ActionTrigger) => void;  // Dispatch an action
+  loading?: boolean;           // Whether the renderer is in a loading state
+}`}</Code>
 
-// Type-safe props by extracting from your catalog
-type CardProps = ComponentProps<{
-  title: string;
-  description: string | null;
-}>;
-
-// Use hooks for actions and data within components
-import { useAction, useDataValue } from '@json-render/react';`}</Code>
-
-      <h2 className="text-xl font-semibold mt-12 mb-4">Using Data Binding</h2>
-      <p className="text-sm text-muted-foreground mb-4">
-        Use hooks to read and write data:
+      <p className="text-sm text-muted-foreground mt-4 mb-4">
+        Props are automatically inferred from your catalog, so{" "}
+        <code>props.title</code> is typed as <code>string</code> if your catalog
+        defines it that way.
       </p>
-      <Code lang="tsx">{`import { useDataValue, useDataBinding } from '@json-render/react';
 
-const Metric = ({ props }) => {
-  // Read-only value from data context
-  const value = useDataValue(props.valuePath);
-  
-  return (
-    <div className="metric">
-      <span className="label">{props.label}</span>
-      <span className="value">{formatValue(value)}</span>
-    </div>
-  );
-};
-
-const TextField = ({ props }) => {
-  // Two-way binding to data context
-  const [value, setValue] = useDataBinding(props.valuePath);
-  
-  return (
-    <input
-      value={value || ''}
-      onChange={(e) => setValue(e.target.value)}
-      placeholder={props.placeholder}
-    />
-  );
-};`}</Code>
-
-      {/* Actions Section */}
+      {/* Action Handlers */}
       <h2 className="text-xl font-semibold mt-12 mb-4">Action Handlers</h2>
       <p className="text-sm text-muted-foreground mb-4">
         Instead of AI generating arbitrary code, it declares <em>intent</em> by
@@ -117,9 +121,6 @@ const catalog = defineCatalog(schema, {
     export_data: {
       params: z.object({
         format: z.enum(['csv', 'pdf', 'json']),
-        filters: z.object({
-          dateRange: z.string().nullable(),
-        }).nullable(),
       }),
     },
     navigate: {
@@ -130,78 +131,104 @@ const catalog = defineCatalog(schema, {
   },
 });`}</Code>
 
-      <h3 className="text-lg font-medium mt-8 mb-3">ActionProvider</h3>
+      <h3 className="text-lg font-medium mt-8 mb-3">
+        Implementing Action Handlers
+      </h3>
       <p className="text-sm text-muted-foreground mb-4">
-        Provide action handlers to your app:
+        Action handlers receive <code>(params, setData, data)</code> and are
+        defined inside <code>defineRegistry</code>:
       </p>
-      <Code lang="tsx">{`import { ActionProvider } from '@json-render/react';
-
-function App() {
-  const handlers = {
-    submit_form: async (params) => {
+      <Code lang="tsx">{`export const { handlers, executeAction } = defineRegistry(catalog, {
+  actions: {
+    submit_form: async (params, setData) => {
       const response = await fetch('/api/submit', {
         method: 'POST',
         body: JSON.stringify({ formId: params.formId }),
       });
-      return response.json();
+      const result = await response.json();
+      setData((prev) => ({ ...prev, formResult: result }));
     },
-    
+
     export_data: async (params) => {
-      const blob = await generateExport(params.format, params.filters);
+      const blob = await generateExport(params.format);
       downloadBlob(blob, \`export.\${params.format}\`);
     },
-    
+
     navigate: (params) => {
       window.location.href = params.url;
     },
-  };
+  },
+});`}</Code>
+
+      {/* Using Data Binding */}
+      <h2 className="text-xl font-semibold mt-12 mb-4">Using Data Binding</h2>
+      <p className="text-sm text-muted-foreground mb-4">
+        Use hooks inside your registry components to read and write data:
+      </p>
+      <Code lang="tsx">{`import { useData } from '@json-render/react';
+import { getByPath } from '@json-render/core';
+
+// Inside defineRegistry components:
+
+Metric: ({ props }) => {
+  const { data } = useData();
+  const value = getByPath(data, props.valuePath);
 
   return (
-    <ActionProvider handlers={handlers}>
-      {/* Your UI */}
-    </ActionProvider>
+    <div className="metric">
+      <span className="label">{props.label}</span>
+      <span className="value">{formatValue(value)}</span>
+    </div>
   );
-}`}</Code>
+},
 
-      <h3 className="text-lg font-medium mt-8 mb-3">
-        Using Actions in Components
-      </h3>
-      <Code lang="tsx">{`import { useAction } from '@json-render/react';
+TextField: ({ props }) => {
+  const { data, set } = useData();
+  const value = getByPath(data, props.valuePath) as string;
 
-// Using the useAction hook (recommended)
-const Button = ({ props }) => {
-  const executeAction = useAction(props.action);
-  
   return (
-    <button onClick={() => executeAction({})}>
-      {props.label}
-    </button>
+    <input
+      value={value || ''}
+      onChange={(e) => set(props.valuePath, e.target.value)}
+      placeholder={props.placeholder}
+    />
   );
-};
-
-// Or for standalone use
-function SubmitButton() {
-  const submitForm = useAction('submit_form');
-  
-  return (
-    <button onClick={() => submitForm({ formId: 'contact' })}>
-      Submit
-    </button>
-  );
-}`}</Code>
+},`}</Code>
 
       {/* Renderer Section */}
       <h2 className="text-xl font-semibold mt-12 mb-4">Using the Renderer</h2>
-      <Code lang="tsx">{`import { Renderer, ActionProvider } from '@json-render/react';
+      <p className="text-sm text-muted-foreground mb-4">
+        Wire everything together with providers and the{" "}
+        <code>{"<Renderer />"}</code> component:
+      </p>
+      <Code lang="tsx">{`import { useMemo, useRef } from 'react';
+import {
+  Renderer,
+  DataProvider,
+  VisibilityProvider,
+  ActionProvider,
+} from '@json-render/react';
+import { registry, handlers } from './registry';
+
+function App({ spec, data, setData }) {
+  const dataRef = useRef(data);
+  const setDataRef = useRef(setData);
+  dataRef.current = data;
+  setDataRef.current = setData;
+
+  const actionHandlers = useMemo(
+    () => handlers(() => setDataRef.current, () => dataRef.current),
+    [],
+  );
 
-function App() {
   return (
-    <ActionProvider handlers={actionHandlers}>
-      <Renderer
-        spec={uiSpec}
-        registry={registry}
-      />
-    </ActionProvider>
+    <DataProvider initialData={data}>
+      <VisibilityProvider>
+        <ActionProvider handlers={actionHandlers}>
+          <Renderer spec={spec} registry={registry} />
+        </ActionProvider>
+      </VisibilityProvider>
+    </DataProvider>
   );
 }`}</Code>
 

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

@@ -34,11 +34,11 @@ function App() {
     isStreaming,   // True while streaming
     error,         // Any error that occurred
     send,          // Function to start generation
-    abort,         // Function to cancel streaming
+    clear,         // Function to reset spec and error
   } = useUIStream({
     api: '/api/generate',
-    onChunk: (chunk) => {},   // Optional: called for each chunk
-    onFinish: (spec) => {},   // Optional: called when complete
+    onComplete: (spec) => {},  // Optional: called when streaming completes
+    onError: (error) => {},    // Optional: called when an error occurs
   });
 }`}</Code>
 
@@ -112,8 +112,14 @@ export async function POST(req: Request) {
 }`}</Code>
 
       <h2 className="text-xl font-semibold mt-12 mb-4">Aborting Streams</h2>
+      <p className="text-sm text-muted-foreground mb-4">
+        Calling <code className="text-foreground">send</code> again
+        automatically aborts the previous request. Use{" "}
+        <code className="text-foreground">clear</code> to reset the spec and
+        error state:
+      </p>
       <Code lang="tsx">{`function App() {
-  const { isStreaming, send, abort } = useUIStream({
+  const { isStreaming, send, clear } = useUIStream({
     api: '/api/generate',
   });
 
@@ -122,9 +128,7 @@ export async function POST(req: Request) {
       <button onClick={() => send('Create dashboard')}>
         Generate
       </button>
-      {isStreaming && (
-        <button onClick={abort}>Cancel</button>
-      )}
+      <button onClick={clear}>Reset</button>
     </div>
   );
 }`}</Code>

examples/stripe-app/package.json

@@ -6,8 +6,8 @@
   "license": "~~proprietary~~",
   "type": "module",
   "dependencies": {
-    "@json-render/core": "^0.4.0",
-    "@json-render/react": "^0.4.0",
+    "@json-render/core": "workspace:*",
+    "@json-render/react": "workspace:*",
     "@stripe/ui-extension-sdk": "^9.1.0",
     "stripe": "^13.11.0"
   },

packages/codegen/CHANGELOG.md

@@ -0,0 +1,17 @@
+# @json-render/codegen
+
+## 0.4.3
+
+### Patch Changes
+
+- 61ee8e5: include remove op in system prompt
+- Updated dependencies [61ee8e5]
+  - @json-render/core@0.4.3
+
+## 0.4.2
+
+### Patch Changes
+
+- 54bce09: add defineRegistry function
+- Updated dependencies [54bce09]
+  - @json-render/core@0.4.2

packages/codegen/package.json

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

packages/core/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @json-render/core
+
+## 0.4.3
+
+### Patch Changes
+
+- 61ee8e5: include remove op in system prompt
+
+## 0.4.2
+
+### Patch Changes
+
+- 54bce09: add defineRegistry function

packages/core/package.json

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

packages/core/src/catalog.ts

@@ -502,6 +502,7 @@ export function generateSystemPrompt<
   lines.push(
     '{"op":"add","path":"/elements/key","value":{"key":"...","type":"...","props":{...},"children":[...]}}',
   );
+  lines.push('{"op":"remove","path":"/elements/key"}');
   lines.push("");
 
   // Rules
@@ -509,6 +510,7 @@ export function generateSystemPrompt<
   const baseRules = [
     "First line sets /root to root element key",
     "Add elements with /elements/{key}",
+    "Remove elements with op:remove - also update the parent's children array to exclude the removed key",
     "Children array contains string keys, not objects",
     "Parent first, then children",
     "Each element needs: key, type, props",

packages/react/CHANGELOG.md

@@ -0,0 +1,17 @@
+# @json-render/react
+
+## 0.4.3
+
+### Patch Changes
+
+- 61ee8e5: include remove op in system prompt
+- Updated dependencies [61ee8e5]
+  - @json-render/core@0.4.3
+
+## 0.4.2
+
+### Patch Changes
+
+- 54bce09: add defineRegistry function
+- Updated dependencies [54bce09]
+  - @json-render/core@0.4.2

packages/react/package.json

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

packages/remotion/CHANGELOG.md

@@ -0,0 +1,17 @@
+# @json-render/remotion
+
+## 0.4.3
+
+### Patch Changes
+
+- 61ee8e5: include remove op in system prompt
+- Updated dependencies [61ee8e5]
+  - @json-render/core@0.4.3
+
+## 0.4.2
+
+### Patch Changes
+
+- 54bce09: add defineRegistry function
+- Updated dependencies [54bce09]
+  - @json-render/core@0.4.2

packages/remotion/package.json

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

pnpm-lock.yaml

@@ -348,11 +348,11 @@ importers:
   examples/stripe-app:
     dependencies:
       '@json-render/core':
-        specifier: ^0.4.0
-        version: 0.4.0(zod@4.3.5)
+        specifier: workspace:*
+        version: link:../../packages/core
       '@json-render/react':
-        specifier: ^0.4.0
-        version: 0.4.0(react@18.3.1)(zod@4.3.5)
+        specifier: workspace:*
+        version: link:../../packages/react
       '@stripe/ui-extension-sdk':
         specifier: ^9.1.0
         version: 9.1.0(stripe@13.11.0)
@@ -1793,16 +1793,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@json-render/core@0.4.0':
-    resolution: {integrity: sha512-zcmNNetyXoqShG9qfXnipnkaGLn3XC7Kec/t3+C39mXAStg2RX29ciZwsZT+Fzo900LeRHRIGel7L/IHCdktrA==}
-    peerDependencies:
-      zod: ^4.0.0
-
-  '@json-render/react@0.4.0':
-    resolution: {integrity: sha512-OAXdWdOrAXHEFzpEF7xV+84D00JEmLMKlt5u0wc+C/P+q4q6TnpAWx2j28PBpDB2mpidkW9VnTUM+SCH9J8Lrw==}
-    peerDependencies:
-      react: ^19.0.0
-
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
 
@@ -8002,17 +7992,6 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@json-render/core@0.4.0(zod@4.3.5)':
-    dependencies:
-      zod: 4.3.5
-
-  '@json-render/react@0.4.0(react@18.3.1)(zod@4.3.5)':
-    dependencies:
-      '@json-render/core': 0.4.0(zod@4.3.5)
-      react: 18.3.1
-    transitivePeerDependencies:
-      - zod
-
   '@manypkg/find-root@1.1.0':
     dependencies:
       '@babel/runtime': 7.28.6