ngx-json-render 0.7.7 → 0.8.0

package/README.md

@@ -135,7 +135,7 @@ ready-made Material catalog before you have written a component.
 
 ```ts
 // catalog.ts
-import { schema } from 'ngx-json-render';
+import { schema } from 'ngx-json-render/schema';
 import { z } from 'zod';
 
 export const catalog = schema.createCatalog({
@@ -302,7 +302,7 @@ app.post('/api/generate', async (req, res) => {
 });
 ```
 
-`catalog.ts` imports `schema` from `ngx-json-render`, and that entry point also loads Angular and the renderer's components, which are published partially compiled. In an Angular SSR app (`ng new --ssr`) the Angular CLI finishes compiling them when it builds the server, so the route above goes into its `server.ts` unchanged and works both under `ng serve` and from the built server. On Angular 20 and 21, add `"prebundle": { "exclude": ["zod"] }` to the `serve` options in `angular.json` first: their Vite 7 dev server can't transform zod for the server (`Cannot split a chunk that has already been edited`) and answers every page and API route with a 500. A Node server the Angular CLI doesn't build, run with `node` or `tsx`, fails on that import with `'@angular/compiler' is not available` — make `import '@angular/compiler';` its first import.
+`catalog.ts` imports `schema` from `ngx-json-render/schema`, an entry point that needs nothing but `@json-render/core`, so any server can load the catalog without Angular: plain Node, `tsx`, an edge function. (`ngx-json-render` exports the same `schema`, but that entry point also loads Angular and the renderer's partially compiled components. A Node server the Angular CLI doesn't build then fails with `'@angular/compiler' is not available`.) In an Angular SSR app (`ng new --ssr`) the route goes into its `server.ts`. On Angular 20 and 21, add `"prebundle": { "exclude": ["zod"] }` to the `serve` options in `angular.json` first: their Vite 7 dev server can't transform zod for the server (`Cannot split a chunk that has already been edited`) and answers every page and API route with a 500.
 
 The patches apply to the `spec` signal as each line arrives, so the UI assembles on screen while the model is still generating — exactly what the [demo's Streaming tab](https://shteynu.github.io/ngx-json-render/) replays. Prefer structured output? `catalog.jsonSchema()` exports a JSON Schema for `streamObject`/tool calls, and `checkSpec(spec, 'strict', { catalog })` checks a finished spec against the catalog, props included — see [Checking what the model produced](#checking-what-the-model-produced) for why that and not `catalog.validate(spec)` alone.
 
@@ -507,6 +507,35 @@ stack proving they exceed it. If you accept specs you did not generate, set
 `maxDepth` — with no cap there is nothing to stop the check from recursing as
 deep as the spec asks.
 
+## Inside an MCP App host
+
+An [MCP App](https://modelcontextprotocol.io/docs/extensions/apps) is a tool whose result a host (Claude, ChatGPT, VS Code) renders as an inline view. `ngx-json-render/mcp` is the Angular side of that view: `injectJsonRenderApp()` connects to the host and keeps the spec the model passed to the tool in a signal. It is the counterpart of `useJsonRenderApp` from `@json-render/mcp/app`. It needs two optional peers:
+
+```bash
+npm install @modelcontextprotocol/ext-apps @modelcontextprotocol/sdk
+```
+
+```ts
+import { Component } from '@angular/core';
+import { JsonRenderer } from 'ngx-json-render';
+import { injectJsonRenderApp } from 'ngx-json-render/mcp';
+import { materialRegistry } from 'ngx-json-render-material';
+
+@Component({
+  selector: 'app-root',
+  imports: [JsonRenderer],
+  template: `<json-render [spec]="mcp.spec()" [loading]="mcp.loading()" [registry]="registry" />`,
+})
+export class App {
+  readonly mcp = injectJsonRenderApp({ name: 'my-app', version: '1.0.0' });
+  readonly registry = materialRegistry;
+}
+```
+
+The spec renders while the model is still writing the tool call, from the host's `toolinputpartial` notifications; pass `streamPartialInput: false` to wait for the result. `mcp.sendMessage(text, data)` posts a user message to the chat, so a button can continue the conversation, and `mcp.callServerTool(name, args)` replaces the spec with another tool's result. The connection closes with the injector that created it.
+
+The server side is upstream's `@json-render/mcp`, which serves the view as a single HTML resource. [`projects/mcp-app`](https://github.com/shteynu/ngx-json-render/tree/main/projects/mcp-app) is a complete example with the Material catalog: the view, the build that inlines it into one page, and a server that works around two `createMcpApp` problems.
+
 ## Testing
 
 `ngx-json-render/testing` is a separate entry point, so nothing in it can reach
@@ -686,14 +715,18 @@ A write reaches only the components whose resolved props actually changed. Writi
 - Objects and arrays compare by reference with the built-in store, which copies every path it writes.
 - With an external `store`, objects and arrays always count as changed, because such a store may write into its snapshot in place.
 
-Elements with a `$bindState` or `$bindItem` prop still re-run on every write. Their DOM can hold the user's input before state does, and the note below depends on them getting the chance to put it right.
+Elements with a `$bindState` or `$bindItem` prop also re-run on every write that touches their bound path — the path itself, a container above it, or a path inside it — even when the value comes back to what it was. Their DOM can hold the user's input before state does, and the note below depends on them getting the chance to put it right. Writes anywhere else reach them like any other element.
 
-Before any of that, a write only makes the elements that can read its path resolve their props at all. The renderer works the paths out from each element's spec — `$state`, `$item`, `$template` placeholders, both branches of a `$cond`, `$computed` arguments and `visible` conditions — so a write to `/user/name` leaves the todo list alone, and its `$computed` functions don't run. A `$computed` function should therefore depend only on its arguments: one that also reads the clock or a variable outside the spec is no longer called again by unrelated writes.
+Before any of that, a write only makes the elements that can read its path resolve their props at all. The renderer works the paths out from each element's spec — `$state`, `$item`, `$template` placeholders, both branches of a `$cond`, `$computed` arguments, `visible` conditions, and the paths `$bindState` and `$bindItem` write back to — so a write to `/user/name` leaves the todo list alone, and its `$computed` functions don't run. A `$computed` function should therefore depend only on its arguments: one that also reads the clock or a variable outside the spec is no longer called again by unrelated writes.
 
-Some elements keep resolving on every write, because their reads can't be known from the spec: those using a directive (its `resolve` gets the whole state), those with a two-way binding, and any prop with a `$`-key the renderer doesn't recognise.
+Some elements keep resolving on every write, because their reads can't be known from the spec: those using a directive (its `resolve` gets the whole state) and any prop with a `$`-key the renderer doesn't recognise.
 
 In dev mode each element that skipped a write resolves anyway, against the whole state, and the console warns once if that gives anything other than what it shows. The warning means a `$computed` function reads more than its arguments, or the renderer missed a read, which is a bug worth reporting. The element itself is left as production would leave it. The check calls the element's `$computed` functions again, so in dev mode they still run on every write.
 
+### What a new spec re-renders
+
+A spec element is compared by content, not by identity. A streamed patch shares every element it did not touch, but a spec can also arrive as all-new objects — a whole-spec part, a host that fetches the spec again, `buildSpecFromParts` replaying a message — and then only the elements whose content changed resolve and re-render. The same goes for `spec.state` in uncontrolled mode: only leaves whose content changed are written to the store, so handing over the same spec again keeps what the user has changed since, including edits inside an array.
+
 ### A note on inputs
 
 If a catalog component renders `<input [value]="ctx.props().value">`, remember that one-way bindings do not re-assert the DOM when the bound value returns to its previously applied value while the user typed in between (e.g. `pushState` + `clearStatePath`). Sync imperatively instead — see `InputComponent` in the demo app for the pattern.
@@ -870,6 +903,10 @@ is how you tell the two apart. One dialog is open at a time: an action with a
 
 Registry & schema: `defineRegistry`, `createStoreSetState`, `schema`, and the catalog types `InferComponentProps`, `InferCatalogComponents`, `InferActionParams` (re-exported from core).
 
+Schema alone (`ngx-json-render/schema`): `schema`, `AngularSchema`, `AngularSpec`, with no Angular behind them, for a server that defines a catalog.
+
+MCP Apps (`ngx-json-render/mcp`): `injectJsonRenderApp`, `parseSpecFromToolResult`, `messageText`, and the types `JsonRenderApp`, `JsonRenderAppOptions`. Needs the optional peers `@modelcontextprotocol/ext-apps` and `@modelcontextprotocol/sdk`.
+
 Testing (`ngx-json-render/testing`): `renderSpec`, `renderComponent`, `recordedTransport`, `specStream`, `usageLine`.
 
 Everything from `@json-render/core` (types, `createStateStore`, `nestedToFlat`, prompt builders, spec validators, SpecStream compiler) composes with this package; the most common symbols are re-exported.

package/fesm2022/ngx-json-render-mcp.mjs

@@ -0,0 +1,132 @@
+import { signal, inject, DestroyRef, computed } from '@angular/core';
+import { App } from '@modelcontextprotocol/ext-apps';
+
+/** The text of a {@link JsonRenderApp.sendMessage} message. */
+function messageText(text, data) {
+    if (!data)
+        return text;
+    return `${text}\n\n\`\`\`json\n${JSON.stringify(data, null, 2)}\n\`\`\``;
+}
+/**
+ * Read a spec out of a tool result. Same rule as `@json-render/mcp/app`: the
+ * first text block, parsed as JSON, either a bare spec or `{ spec }`.
+ */
+function parseSpecFromToolResult(result) {
+    const text = result.content?.find((c) => c.type === 'text')?.text;
+    if (!text)
+        return null;
+    try {
+        return specFrom(JSON.parse(text));
+    }
+    catch {
+        return null;
+    }
+}
+/** A bare spec, or the `spec` field of a tool's arguments or result. */
+function specFrom(value) {
+    if (!value || typeof value !== 'object')
+        return null;
+    const spec = 'spec' in value ? value.spec : value;
+    if (!spec || typeof spec !== 'object' || !('root' in spec))
+        return null;
+    return spec;
+}
+/**
+ * Connect an Angular app running inside an MCP Apps iframe to its host and
+ * keep the json-render spec the model sent in a signal. The Angular
+ * counterpart of `useJsonRenderApp` from `@json-render/mcp/app`; the server
+ * side is `createMcpApp` from `@json-render/mcp`, unchanged.
+ *
+ * Call it in an injection context. The connection closes when the injector
+ * that created it is destroyed.
+ *
+ * ```ts
+ * readonly mcp = injectJsonRenderApp();
+ * // <json-render [spec]="mcp.spec()" [loading]="mcp.loading()" [registry]="registry" />
+ * ```
+ */
+function injectJsonRenderApp(options = {}) {
+    const { name = 'json-render', version = '1.0.0', streamPartialInput = true, transport, autoResize = true, } = options;
+    const spec = signal(null, ...(ngDevMode ? [{ debugName: "spec" }] : /* istanbul ignore next */ []));
+    const loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    const connected = signal(false, ...(ngDevMode ? [{ debugName: "connected" }] : /* istanbul ignore next */ []));
+    const error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    const app = new App({ name, version }, {}, { autoResize });
+    // Listeners go on before connect(), so a notification the host sends right
+    // after the handshake is not lost.
+    if (streamPartialInput) {
+        app.addEventListener('toolinputpartial', ({ arguments: args }) => {
+            const partial = specFrom(args);
+            if (partial)
+                spec.set(partial);
+        });
+    }
+    app.addEventListener('toolinput', ({ arguments: args }) => {
+        const input = specFrom(args);
+        if (input)
+            spec.set(input);
+    });
+    app.addEventListener('toolresult', (result) => {
+        const parsed = parseSpecFromToolResult(result);
+        if (parsed)
+            spec.set(parsed);
+        loading.set(false);
+    });
+    app.addEventListener('toolcancelled', () => loading.set(false));
+    app
+        .connect(transport)
+        .then(() => connected.set(true))
+        .catch((err) => error.set(err instanceof Error ? err : new Error(String(err))));
+    inject(DestroyRef).onDestroy(() => {
+        app.close().catch(() => undefined);
+    });
+    return {
+        spec: spec.asReadonly(),
+        connecting: computed(() => !connected() && !error()),
+        connected: connected.asReadonly(),
+        error: error.asReadonly(),
+        loading: loading.asReadonly(),
+        app,
+        async callServerTool(toolName, args = {}) {
+            loading.set(true);
+            try {
+                const result = await app.callServerTool({
+                    name: toolName,
+                    arguments: args,
+                });
+                const parsed = parseSpecFromToolResult(result);
+                if (parsed)
+                    spec.set(parsed);
+            }
+            finally {
+                loading.set(false);
+            }
+        },
+        async sendMessage(text, data) {
+            if (!app.getHostCapabilities()?.message) {
+                throw new Error('The host does not accept messages from the view.');
+            }
+            const result = await app.sendMessage({
+                role: 'user',
+                content: [{ type: 'text', text: messageText(text, data) }],
+            });
+            if (result.isError)
+                throw new Error('The host declined the message.');
+        },
+    };
+}
+
+/*
+ * Public API Surface of ngx-json-render/mcp
+ *
+ * Render json-render specs inside an MCP Apps host (Claude, ChatGPT, VS Code).
+ * A separate entry point so `@modelcontextprotocol/ext-apps`, an optional
+ * peer, is only needed by apps that import it.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { injectJsonRenderApp, messageText, parseSpecFromToolResult };
+//# sourceMappingURL=ngx-json-render-mcp.mjs.map

package/fesm2022/ngx-json-render-mcp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-json-render-mcp.mjs","sources":["../../../projects/ngx-json-render/mcp/src/json-render-app.ts","../../../projects/ngx-json-render/mcp/src/public-api.ts","../../../projects/ngx-json-render/mcp/src/ngx-json-render-mcp.ts"],"sourcesContent":["import {\n  DestroyRef,\n  type Signal,\n  computed,\n  inject,\n  signal,\n} from '@angular/core';\nimport type { Spec } from '@json-render/core';\nimport { App } from '@modelcontextprotocol/ext-apps';\nimport type { Transport } from '@modelcontextprotocol/sdk/shared/transport.js';\n\n/** Options for {@link injectJsonRenderApp}. */\nexport interface JsonRenderAppOptions {\n  /** App name sent to the host during initialization. Defaults to `\"json-render\"`. */\n  name?: string;\n  /** App version sent to the host. Defaults to `\"1.0.0\"`. */\n  version?: string;\n  /**\n   * Render the spec while the model is still writing the tool call, from the\n   * host's `toolinputpartial` notifications. The host \"heals\" the truncated\n   * JSON, so each partial spec is valid but may end in a half-written\n   * element; the renderer skips children that do not exist yet. Defaults to\n   * `true`. `useJsonRenderApp` in `@json-render/mcp/app` has no equivalent —\n   * it waits for the tool result.\n   */\n  streamPartialInput?: boolean;\n  /**\n   * Transport to the host. Omit it inside a real MCP Apps iframe: `App`\n   * then talks to `window.parent` over `postMessage`. Tests pass one end of\n   * an in-memory pair here and an `AppBridge` on the other.\n   */\n  transport?: Transport;\n  /**\n   * Report the page's size to the host as it changes, so the iframe grows\n   * with the rendered UI. Defaults to `true`; needs `ResizeObserver`.\n   */\n  autoResize?: boolean;\n}\n\n/**\n * What {@link injectJsonRenderApp} returns — the fields of\n * `UseJsonRenderAppReturn` from `@json-render/mcp/app`, as signals.\n */\nexport interface JsonRenderApp {\n  /** The current spec; `null` until the first tool input or result. */\n  readonly spec: Signal<Spec | null>;\n  /** Whether the app is still connecting to the host. */\n  readonly connecting: Signal<boolean>;\n  /** Whether the app is connected to the host. */\n  readonly connected: Signal<boolean>;\n  /** Connection error, if any. */\n  readonly error: Signal<Error | null>;\n  /** Whether the spec is still arriving: pass it to `<json-render [loading]>`. */\n  readonly loading: Signal<boolean>;\n  /** The underlying MCP Apps `App`. */\n  readonly app: App;\n  /**\n   * Call a tool on the MCP server and replace the spec with its result —\n   * for refresh and drill-down interactions.\n   */\n  callServerTool(name: string, args?: Record<string, unknown>): Promise<void>;\n  /**\n   * Post a user message to the host's chat, so the model answers what the\n   * user did in the view. `data`, if given, follows the text as a JSON block.\n   * Rejects when the host does not accept messages from views or turns this\n   * one down, so an action's `onError` runs.\n   */\n  sendMessage(text: string, data?: Record<string, unknown>): Promise<void>;\n}\n\n/** The text of a {@link JsonRenderApp.sendMessage} message. */\nexport function messageText(\n  text: string,\n  data?: Record<string, unknown>,\n): string {\n  if (!data) return text;\n  return `${text}\\n\\n\\`\\`\\`json\\n${JSON.stringify(data, null, 2)}\\n\\`\\`\\``;\n}\n\ninterface ToolResultLike {\n  content?: { type: string; text?: string }[];\n}\n\n/**\n * Read a spec out of a tool result. Same rule as `@json-render/mcp/app`: the\n * first text block, parsed as JSON, either a bare spec or `{ spec }`.\n */\nexport function parseSpecFromToolResult(result: ToolResultLike): Spec | null {\n  const text = result.content?.find((c) => c.type === 'text')?.text;\n  if (!text) return null;\n  try {\n    return specFrom(JSON.parse(text));\n  } catch {\n    return null;\n  }\n}\n\n/** A bare spec, or the `spec` field of a tool's arguments or result. */\nfunction specFrom(value: unknown): Spec | null {\n  if (!value || typeof value !== 'object') return null;\n  const spec = 'spec' in value ? (value as { spec: unknown }).spec : value;\n  if (!spec || typeof spec !== 'object' || !('root' in spec)) return null;\n  return spec as Spec;\n}\n\n/**\n * Connect an Angular app running inside an MCP Apps iframe to its host and\n * keep the json-render spec the model sent in a signal. The Angular\n * counterpart of `useJsonRenderApp` from `@json-render/mcp/app`; the server\n * side is `createMcpApp` from `@json-render/mcp`, unchanged.\n *\n * Call it in an injection context. The connection closes when the injector\n * that created it is destroyed.\n *\n * ```ts\n * readonly mcp = injectJsonRenderApp();\n * // <json-render [spec]=\"mcp.spec()\" [loading]=\"mcp.loading()\" [registry]=\"registry\" />\n * ```\n */\nexport function injectJsonRenderApp(\n  options: JsonRenderAppOptions = {},\n): JsonRenderApp {\n  const {\n    name = 'json-render',\n    version = '1.0.0',\n    streamPartialInput = true,\n    transport,\n    autoResize = true,\n  } = options;\n\n  const spec = signal<Spec | null>(null);\n  const loading = signal(true);\n  const connected = signal(false);\n  const error = signal<Error | null>(null);\n\n  const app = new App({ name, version }, {}, { autoResize });\n\n  // Listeners go on before connect(), so a notification the host sends right\n  // after the handshake is not lost.\n  if (streamPartialInput) {\n    app.addEventListener('toolinputpartial', ({ arguments: args }) => {\n      const partial = specFrom(args);\n      if (partial) spec.set(partial);\n    });\n  }\n  app.addEventListener('toolinput', ({ arguments: args }) => {\n    const input = specFrom(args);\n    if (input) spec.set(input);\n  });\n  app.addEventListener('toolresult', (result) => {\n    const parsed = parseSpecFromToolResult(result);\n    if (parsed) spec.set(parsed);\n    loading.set(false);\n  });\n  app.addEventListener('toolcancelled', () => loading.set(false));\n\n  app\n    .connect(transport)\n    .then(() => connected.set(true))\n    .catch((err: unknown) =>\n      error.set(err instanceof Error ? err : new Error(String(err))),\n    );\n\n  inject(DestroyRef).onDestroy(() => {\n    app.close().catch(() => undefined);\n  });\n\n  return {\n    spec: spec.asReadonly(),\n    connecting: computed(() => !connected() && !error()),\n    connected: connected.asReadonly(),\n    error: error.asReadonly(),\n    loading: loading.asReadonly(),\n    app,\n    async callServerTool(toolName, args = {}) {\n      loading.set(true);\n      try {\n        const result = await app.callServerTool({\n          name: toolName,\n          arguments: args,\n        });\n        const parsed = parseSpecFromToolResult(result);\n        if (parsed) spec.set(parsed);\n      } finally {\n        loading.set(false);\n      }\n    },\n    async sendMessage(text, data) {\n      if (!app.getHostCapabilities()?.message) {\n        throw new Error('The host does not accept messages from the view.');\n      }\n      const result = await app.sendMessage({\n        role: 'user',\n        content: [{ type: 'text', text: messageText(text, data) }],\n      });\n      if (result.isError) throw new Error('The host declined the message.');\n    },\n  };\n}\n","/*\n * Public API Surface of ngx-json-render/mcp\n *\n * Render json-render specs inside an MCP Apps host (Claude, ChatGPT, VS Code).\n * A separate entry point so `@modelcontextprotocol/ext-apps`, an optional\n * peer, is only needed by apps that import it.\n */\n\nexport {\n  injectJsonRenderApp,\n  messageText,\n  parseSpecFromToolResult,\n  type JsonRenderApp,\n  type JsonRenderAppOptions,\n} from './json-render-app';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-json-render-schema.mjs

@@ -0,0 +1,107 @@
+import { defineSchema } from '@json-render/core';
+
+/**
+ * The schema for ngx-json-render.
+ *
+ * Defines:
+ * - Spec: A flat tree of elements with keys, types, props, and children references
+ * - Catalog: Components with props schemas, and optional actions
+ *
+ * This is the same spec grammar the other json-render renderers use, so
+ * catalogs and specs are portable across frameworks.
+ */
+const schema = defineSchema((s) => ({
+    // What the AI-generated SPEC looks like
+    spec: s.object({
+        /** Root element key */
+        root: s.string(),
+        /** Flat map of elements by key */
+        elements: s.record(s.object({
+            /** Component type from catalog */
+            type: s.ref('catalog.components'),
+            /** Component props */
+            props: s.propsOf('catalog.components'),
+            /** Child element keys (flat reference) */
+            children: s.array(s.string()),
+            /** Visibility condition */
+            visible: { ...s.any(), ...s.optional() },
+            /** Repeat children from a state array */
+            repeat: { ...s.any(), ...s.optional() },
+        })),
+    }),
+    // What the CATALOG must provide
+    catalog: s.object({
+        /** Component definitions */
+        components: s.map({
+            /** Zod schema for component props */
+            props: s.zod(),
+            /** Slots for this component. Use ['default'] for children, or named slots like ['header', 'footer'] */
+            slots: s.array(s.string()),
+            /** Description for AI generation hints */
+            description: s.string(),
+            /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */
+            example: s.any(),
+        }),
+        /** Action definitions (optional) */
+        actions: s.map({
+            /** Zod schema for action params */
+            params: s.zod(),
+            /** Description for AI generation hints */
+            description: s.string(),
+        }),
+    }),
+}), {
+    builtInActions: [
+        {
+            name: 'setState',
+            description: 'Update a value in the state model at the given statePath. Params: { statePath: string, value: any }',
+        },
+        {
+            name: 'pushState',
+            description: 'Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }. Value can contain {"$state":"/path"} refs and "$id" for auto IDs.',
+        },
+        {
+            name: 'removeState',
+            description: 'Remove an item from an array in state by index. Params: { statePath: string, index: number }',
+        },
+        {
+            name: 'validateForm',
+            description: 'Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }.',
+        },
+        {
+            name: 'submitForm',
+            description: "Validate all registered form fields and, only if every one passes, dispatch another action. Params: { action: string, params?: object, statePath?: string }. Writes the same { valid, errors } result as validateForm. Use this on a form's submit button: it is validateForm and the submit in one binding, and the submit is skipped when the form is invalid.",
+        },
+    ],
+    defaultRules: [
+        // Element integrity
+        "CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.",
+        'SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.',
+        'REQUIRED FIELDS: Every element MUST include a "children" array. Leaf elements (text, badges, inputs, images) use an empty array: "children": []. Omitting "children" fails validation.',
+        // Field placement
+        'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"<ComponentName>","props":{},"visible":{"$state":"/tab","eq":"home"},"children":[...]}.',
+        'CRITICAL: The "on" field goes on the ELEMENT object, NOT inside "props". Use on.press, on.change, on.submit etc. NEVER put action/actionParams inside props.',
+        // State and data
+        'When the user asks for a UI that displays data (e.g. blog posts, products, users), ALWAYS include a state field with realistic sample data. The state field is a top-level field on the spec (sibling of root/elements).',
+        'When building repeating content backed by a state array (e.g. posts, products, items), use the "repeat" field on a container element. Example: { "type": "<ContainerComponent>", "props": {}, "repeat": { "statePath": "/posts", "key": "id" }, "children": ["post-card"] }. For a nested list stored on the enclosing item, use "repeat": { "statePath": { "$item": "comments" }, "key": "id" }. The $item statePath form is valid only inside another repeat. Inside repeated children, use { "$item": "field" } to read a field from the current item, and { "$index": true } for the current array index. For two-way binding to an item field use { "$bindItem": "completed" }. Do NOT hardcode individual elements for each array item.',
+        // Design quality
+        'Design with visual hierarchy: use container components to group content, heading components for section titles, proper spacing, and status indicators. ONLY use components from the AVAILABLE COMPONENTS list.',
+        'For data-rich UIs, use multi-column layout components if available. For forms and single-column content, use vertical layout components. ONLY use components from the AVAILABLE COMPONENTS list.',
+        'Always include realistic, professional-looking sample data. For blogs include 3-4 posts with varied titles, authors, dates, categories. For products include names, prices, images. Never leave data empty.',
+    ],
+});
+
+/*
+ * Public API Surface of ngx-json-render/schema
+ *
+ * The spec grammar alone, with nothing but `@json-render/core` behind it, so
+ * a server can define a catalog without loading Angular. The primary entry
+ * point re-exports it.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { schema };
+//# sourceMappingURL=ngx-json-render-schema.mjs.map

package/fesm2022/ngx-json-render-schema.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-json-render-schema.mjs","sources":["../../../projects/ngx-json-render/schema/src/schema.ts","../../../projects/ngx-json-render/schema/src/public-api.ts","../../../projects/ngx-json-render/schema/src/ngx-json-render-schema.ts"],"sourcesContent":["import { defineSchema } from '@json-render/core';\n\n/**\n * The schema for ngx-json-render.\n *\n * Defines:\n * - Spec: A flat tree of elements with keys, types, props, and children references\n * - Catalog: Components with props schemas, and optional actions\n *\n * This is the same spec grammar the other json-render renderers use, so\n * catalogs and specs are portable across frameworks.\n */\nexport const schema = defineSchema(\n  (s) => ({\n    // What the AI-generated SPEC looks like\n    spec: s.object({\n      /** Root element key */\n      root: s.string(),\n      /** Flat map of elements by key */\n      elements: s.record(\n        s.object({\n          /** Component type from catalog */\n          type: s.ref('catalog.components'),\n          /** Component props */\n          props: s.propsOf('catalog.components'),\n          /** Child element keys (flat reference) */\n          children: s.array(s.string()),\n          /** Visibility condition */\n          visible: { ...s.any(), ...s.optional() },\n          /** Repeat children from a state array */\n          repeat: { ...s.any(), ...s.optional() },\n        }),\n      ),\n    }),\n\n    // What the CATALOG must provide\n    catalog: s.object({\n      /** Component definitions */\n      components: s.map({\n        /** Zod schema for component props */\n        props: s.zod(),\n        /** Slots for this component. Use ['default'] for children, or named slots like ['header', 'footer'] */\n        slots: s.array(s.string()),\n        /** Description for AI generation hints */\n        description: s.string(),\n        /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */\n        example: s.any(),\n      }),\n      /** Action definitions (optional) */\n      actions: s.map({\n        /** Zod schema for action params */\n        params: s.zod(),\n        /** Description for AI generation hints */\n        description: s.string(),\n      }),\n    }),\n  }),\n  {\n    builtInActions: [\n      {\n        name: 'setState',\n        description:\n          'Update a value in the state model at the given statePath. Params: { statePath: string, value: any }',\n      },\n      {\n        name: 'pushState',\n        description:\n          'Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }. Value can contain {\"$state\":\"/path\"} refs and \"$id\" for auto IDs.',\n      },\n      {\n        name: 'removeState',\n        description:\n          'Remove an item from an array in state by index. Params: { statePath: string, index: number }',\n      },\n      {\n        name: 'validateForm',\n        description:\n          'Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }.',\n      },\n      {\n        name: 'submitForm',\n        description:\n          \"Validate all registered form fields and, only if every one passes, dispatch another action. Params: { action: string, params?: object, statePath?: string }. Writes the same { valid, errors } result as validateForm. Use this on a form's submit button: it is validateForm and the submit in one binding, and the submit is skipped when the form is invalid.\",\n      },\n    ],\n    defaultRules: [\n      // Element integrity\n      \"CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.\",\n      'SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.',\n      'REQUIRED FIELDS: Every element MUST include a \"children\" array. Leaf elements (text, badges, inputs, images) use an empty array: \"children\": []. Omitting \"children\" fails validation.',\n\n      // Field placement\n      'CRITICAL: The \"visible\" field goes on the ELEMENT object, NOT inside \"props\". Correct: {\"type\":\"<ComponentName>\",\"props\":{},\"visible\":{\"$state\":\"/tab\",\"eq\":\"home\"},\"children\":[...]}.',\n      'CRITICAL: The \"on\" field goes on the ELEMENT object, NOT inside \"props\". Use on.press, on.change, on.submit etc. NEVER put action/actionParams inside props.',\n\n      // State and data\n      'When the user asks for a UI that displays data (e.g. blog posts, products, users), ALWAYS include a state field with realistic sample data. The state field is a top-level field on the spec (sibling of root/elements).',\n      'When building repeating content backed by a state array (e.g. posts, products, items), use the \"repeat\" field on a container element. Example: { \"type\": \"<ContainerComponent>\", \"props\": {}, \"repeat\": { \"statePath\": \"/posts\", \"key\": \"id\" }, \"children\": [\"post-card\"] }. For a nested list stored on the enclosing item, use \"repeat\": { \"statePath\": { \"$item\": \"comments\" }, \"key\": \"id\" }. The $item statePath form is valid only inside another repeat. Inside repeated children, use { \"$item\": \"field\" } to read a field from the current item, and { \"$index\": true } for the current array index. For two-way binding to an item field use { \"$bindItem\": \"completed\" }. Do NOT hardcode individual elements for each array item.',\n\n      // Design quality\n      'Design with visual hierarchy: use container components to group content, heading components for section titles, proper spacing, and status indicators. ONLY use components from the AVAILABLE COMPONENTS list.',\n      'For data-rich UIs, use multi-column layout components if available. For forms and single-column content, use vertical layout components. ONLY use components from the AVAILABLE COMPONENTS list.',\n      'Always include realistic, professional-looking sample data. For blogs include 3-4 posts with varied titles, authors, dates, categories. For products include names, prices, images. Never leave data empty.',\n    ],\n  },\n);\n\n/**\n * Type for the Angular schema\n */\nexport type AngularSchema = typeof schema;\n\n/**\n * Infer the spec type from a catalog\n */\nexport type AngularSpec<TCatalog> = typeof schema extends {\n  createCatalog: (catalog: TCatalog) => { _specType: infer S };\n}\n  ? S\n  : never;\n","/*\n * Public API Surface of ngx-json-render/schema\n *\n * The spec grammar alone, with nothing but `@json-render/core` behind it, so\n * a server can define a catalog without loading Angular. The primary entry\n * point re-exports it.\n */\n\nexport { schema, type AngularSchema, type AngularSpec } from './schema';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAEA;;;;;;;;;AASG;AACI,MAAM,MAAM,GAAG,YAAY,CAChC,CAAC,CAAC,MAAM;;AAEN,IAAA,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;;AAEb,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE;;QAEhB,QAAQ,EAAE,CAAC,CAAC,MAAM,CAChB,CAAC,CAAC,MAAM,CAAC;;AAEP,YAAA,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,oBAAoB,CAAC;;AAEjC,YAAA,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC;;YAEtC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;;AAE7B,YAAA,OAAO,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;;AAExC,YAAA,MAAM,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;AACxC,SAAA,CAAC,CACH;KACF,CAAC;;AAGF,IAAA,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC;;AAEhB,QAAA,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC;;AAEhB,YAAA,KAAK,EAAE,CAAC,CAAC,GAAG,EAAE;;YAEd,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;;AAE1B,YAAA,WAAW,EAAE,CAAC,CAAC,MAAM,EAAE;;AAEvB,YAAA,OAAO,EAAE,CAAC,CAAC,GAAG,EAAE;SACjB,CAAC;;AAEF,QAAA,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC;;AAEb,YAAA,MAAM,EAAE,CAAC,CAAC,GAAG,EAAE;;AAEf,YAAA,WAAW,EAAE,CAAC,CAAC,MAAM,EAAE;SACxB,CAAC;KACH,CAAC;AACH,CAAA,CAAC,EACF;AACE,IAAA,cAAc,EAAE;AACd,QAAA;AACE,YAAA,IAAI,EAAE,UAAU;AAChB,YAAA,WAAW,EACT,qGAAqG;AACxG,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,WAAW,EACT,4KAA4K;AAC/K,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,WAAW,EACT,8FAA8F;AACjG,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,WAAW,EACT,+LAA+L;AAClM,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,YAAY;AAClB,YAAA,WAAW,EACT,kWAAkW;AACrW,SAAA;AACF,KAAA;AACD,IAAA,YAAY,EAAE;;QAEZ,2TAA2T;QAC3T,8MAA8M;QAC9M,wLAAwL;;QAGxL,wLAAwL;QACxL,8JAA8J;;QAG9J,0NAA0N;QAC1N,+sBAA+sB;;QAG/sB,gNAAgN;QAChN,kMAAkM;QAClM,6MAA6M;AAC9M,KAAA;AACF,CAAA;;ACxGH;;;;;;AAMG;;ACNH;;AAEG;;"}