blocks-renderer 0.1.1 → 0.1.2

package/README.md

@@ -1,9 +1,22 @@
 # blocks-renderer
 
+<p align="center" width="100%">
+  <img height="250" src="https://raw.githubusercontent.com/constructive-io/constructive/refs/heads/main/assets/outline-logo.svg" />
+</p>
+
 React adapter for `blocks-schema` UI documents: a recursive
 renderer with layerable widget registries, binding resolution, form state, and
 a visible unknown-block fallback.
 
+## Install
+
+```bash
+pnpm add blocks-renderer blocks-schema react
+```
+
+Built with `makage` and published from `dist`, so deep imports resolve without an
+exports map: `blocks-renderer/registry`, `blocks-renderer/bindings`.
+
 ## Usage
 
 ```tsx

package/adapter.d.ts

@@ -0,0 +1,14 @@
+import type { UIDocument } from 'blocks-schema';
+import { type RendererAdapter } from 'json-renderer';
+import type { ReactNode } from 'react';
+import type { BlockComponent, RendererContextValue } from './types';
+/**
+ * `blocks-renderer` as an explicit {@link RendererAdapter}: node type resolves to
+ * a React component, output is a React element, and an unsatisfied type renders
+ * {@link UnknownBlock}.
+ *
+ * The React components ({@link DocumentRenderer}, {@link BlockRenderer}) remain
+ * the ergonomic entry point; this object states the contract they satisfy so a
+ * second adapter has something to conform to.
+ */
+export declare const reactAdapter: RendererAdapter<BlockComponent, ReactNode, UIDocument, RendererContextValue>;

package/adapter.js

@@ -0,0 +1,36 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactAdapter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const json_renderer_1 = require("json-renderer");
+const context_1 = require("./context");
+const renderer_1 = require("./renderer");
+const unknown_block_1 = require("./unknown-block");
+/**
+ * `blocks-renderer` as an explicit {@link RendererAdapter}: node type resolves to
+ * a React component, output is a React element, and an unsatisfied type renders
+ * {@link UnknownBlock}.
+ *
+ * The React components ({@link DocumentRenderer}, {@link BlockRenderer}) remain
+ * the ergonomic entry point; this object states the contract they satisfy so a
+ * second adapter has something to conform to.
+ */
+exports.reactAdapter = {
+    name: 'blocks-renderer/react',
+    resolve(type, context) {
+        return (0, json_renderer_1.resolveNode)(context.registry, type);
+    },
+    resolveProps(node, context) {
+        return (0, json_renderer_1.resolveNodeProps)(node, context.scope);
+    },
+    renderNode(node, context) {
+        return (0, jsx_runtime_1.jsx)(context_1.RendererProvider, { value: context, children: (0, jsx_runtime_1.jsx)(renderer_1.BlockRenderer, { node: node }) });
+    },
+    renderUnknown(node) {
+        return (0, jsx_runtime_1.jsx)(unknown_block_1.UnknownBlock, { node: node });
+    },
+    renderDocument(document, context) {
+        return ((0, jsx_runtime_1.jsx)(context_1.RendererProvider, { value: { ...context, document }, children: (0, jsx_runtime_1.jsx)(renderer_1.BlockRenderer, { node: document.page }) }));
+    },
+};

package/bindings.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Binding resolution is framework-agnostic, so it lives in `json-renderer`.
+ * These re-exports keep `blocks-renderer/bindings` a stable import path.
+ */
+export { composeScope, readPath, resolveBinding, resolveNodeProps } from 'json-renderer';
+export type { BindingScope } from 'json-renderer';

package/bindings.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveNodeProps = exports.resolveBinding = exports.readPath = exports.composeScope = void 0;
+/**
+ * Binding resolution is framework-agnostic, so it lives in `json-renderer`.
+ * These re-exports keep `blocks-renderer/bindings` a stable import path.
+ */
+var json_renderer_1 = require("json-renderer");
+Object.defineProperty(exports, "composeScope", { enumerable: true, get: function () { return json_renderer_1.composeScope; } });
+Object.defineProperty(exports, "readPath", { enumerable: true, get: function () { return json_renderer_1.readPath; } });
+Object.defineProperty(exports, "resolveBinding", { enumerable: true, get: function () { return json_renderer_1.resolveBinding; } });
+Object.defineProperty(exports, "resolveNodeProps", { enumerable: true, get: function () { return json_renderer_1.resolveNodeProps; } });

package/context.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import type { RendererContextValue } from './types';
+export declare function RendererProvider({ children, value }: {
+    children: ReactNode;
+    value: RendererContextValue;
+}): import("react").JSX.Element;
+export declare function useRenderer(): RendererContextValue;
+/**
+ * Resolved props plus the value/error wiring for a field node. Widget
+ * implementations use this instead of reaching into the document themselves.
+ */
+export declare function useBlockField(name: string | undefined): {
+    value: undefined;
+    error: undefined;
+    setValue: () => void;
+    setError: () => void;
+    mode: import("./types").RenderMode;
+} | {
+    value: unknown;
+    error: string;
+    setValue: (value: unknown) => void;
+    setError: (error: string | null) => void;
+    mode: import("./types").RenderMode;
+};

package/context.js

@@ -0,0 +1,36 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RendererProvider = RendererProvider;
+exports.useRenderer = useRenderer;
+exports.useBlockField = useBlockField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RendererContext = (0, react_1.createContext)(null);
+function RendererProvider({ children, value }) {
+    return (0, jsx_runtime_1.jsx)(RendererContext.Provider, { value: value, children: children });
+}
+function useRenderer() {
+    const context = (0, react_1.useContext)(RendererContext);
+    if (!context) {
+        throw new Error('useRenderer must be used within a RendererProvider (or a DocumentRenderer)');
+    }
+    return context;
+}
+/**
+ * Resolved props plus the value/error wiring for a field node. Widget
+ * implementations use this instead of reaching into the document themselves.
+ */
+function useBlockField(name) {
+    const { values, errors, setValue, setError, mode } = useRenderer();
+    if (!name) {
+        return { value: undefined, error: undefined, setValue: () => { }, setError: () => { }, mode };
+    }
+    return {
+        value: values[name],
+        error: errors[name],
+        setValue: (value) => setValue(name, value),
+        setError: (error) => setError(name, error),
+        mode,
+    };
+}

package/esm/adapter.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { resolveNode, resolveNodeProps } from 'json-renderer';
+import { RendererProvider } from './context';
+import { BlockRenderer } from './renderer';
+import { UnknownBlock } from './unknown-block';
+/**
+ * `blocks-renderer` as an explicit {@link RendererAdapter}: node type resolves to
+ * a React component, output is a React element, and an unsatisfied type renders
+ * {@link UnknownBlock}.
+ *
+ * The React components ({@link DocumentRenderer}, {@link BlockRenderer}) remain
+ * the ergonomic entry point; this object states the contract they satisfy so a
+ * second adapter has something to conform to.
+ */
+export const reactAdapter = {
+    name: 'blocks-renderer/react',
+    resolve(type, context) {
+        return resolveNode(context.registry, type);
+    },
+    resolveProps(node, context) {
+        return resolveNodeProps(node, context.scope);
+    },
+    renderNode(node, context) {
+        return _jsx(RendererProvider, { value: context, children: _jsx(BlockRenderer, { node: node }) });
+    },
+    renderUnknown(node) {
+        return _jsx(UnknownBlock, { node: node });
+    },
+    renderDocument(document, context) {
+        return (_jsx(RendererProvider, { value: { ...context, document }, children: _jsx(BlockRenderer, { node: document.page }) }));
+    },
+};

package/esm/bindings.js

@@ -0,0 +1,5 @@
+/**
+ * Binding resolution is framework-agnostic, so it lives in `json-renderer`.
+ * These re-exports keep `blocks-renderer/bindings` a stable import path.
+ */
+export { composeScope, readPath, resolveBinding, resolveNodeProps } from 'json-renderer';

package/esm/context.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const RendererContext = createContext(null);
+export function RendererProvider({ children, value }) {
+    return _jsx(RendererContext.Provider, { value: value, children: children });
+}
+export function useRenderer() {
+    const context = useContext(RendererContext);
+    if (!context) {
+        throw new Error('useRenderer must be used within a RendererProvider (or a DocumentRenderer)');
+    }
+    return context;
+}
+/**
+ * Resolved props plus the value/error wiring for a field node. Widget
+ * implementations use this instead of reaching into the document themselves.
+ */
+export function useBlockField(name) {
+    const { values, errors, setValue, setError, mode } = useRenderer();
+    if (!name) {
+        return { value: undefined, error: undefined, setValue: () => { }, setError: () => { }, mode };
+    }
+    return {
+        value: values[name],
+        error: errors[name],
+        setValue: (value) => setValue(name, value),
+        setError: (error) => setError(name, error),
+        mode,
+    };
+}

package/esm/index.js

@@ -0,0 +1,6 @@
+export { reactAdapter } from './adapter';
+export { composeScope, readPath, resolveBinding, resolveNodeProps } from './bindings';
+export { RendererProvider, useBlockField, useRenderer } from './context';
+export { composeRegistry, missingTypes, registeredTypes, resolveBlock } from './registry';
+export { BlockRenderer, DocumentRenderer } from './renderer';
+export { UnknownBlock } from './unknown-block';

package/esm/registry.js

@@ -0,0 +1,24 @@
+/**
+ * Registry layering for the React adapter: `json-renderer`'s generic registry
+ * ops, typed over React block components.
+ */
+import { composeRegistry as composeNodeRegistry, missingTypes as missingRegistryTypes, registeredTypes as registeredNodeTypes, resolveHandler, } from 'json-renderer';
+/**
+ * Layer registries left-to-right, later layers winning. This is how a host
+ * customizes rendering: base primitives, then an app registry, then per-document
+ * overrides — no forking of the renderer, and no single global map.
+ */
+export function composeRegistry(...layers) {
+    return composeNodeRegistry(...layers);
+}
+export function resolveBlock(registry, type) {
+    return resolveHandler(registry, type);
+}
+/** Node types the registry can render, sorted for stable output. */
+export function registeredTypes(registry) {
+    return registeredNodeTypes(registry);
+}
+/** Node types a document uses that no registry layer satisfies. */
+export function missingTypes(registry, usedTypes) {
+    return missingRegistryTypes(registry, usedTypes);
+}

package/esm/renderer.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { collectDefaultValues, collectFieldConstraints, collectFieldNames, validateField, } from 'blocks-schema';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { resolveNodeProps } from './bindings';
+import { RendererProvider, useRenderer } from './context';
+import { UnknownBlock } from './unknown-block';
+/**
+ * Renders one node and, recursively, its children: resolve the node type in the
+ * registry, resolve bindings against the current scope, render children first,
+ * fall back to {@link UnknownBlock}.
+ */
+export function BlockRenderer({ node }) {
+    const { registry, scope } = useRenderer();
+    const Component = registry[node.type];
+    if (!Component) {
+        return _jsx(UnknownBlock, { node: node });
+    }
+    const children = node.children?.length
+        ? node.children.map((child) => _jsx(BlockRenderer, { node: child }, child.key))
+        : undefined;
+    return (_jsx(Component, { node: node, props: resolveNodeProps(node, scope), children: children }));
+}
+export function DocumentRenderer({ document, registry, initialValues, scope: externalScope, onSubmit, onChange, onAction, mode = 'preview', className, }) {
+    const defaults = useMemo(() => collectDefaultValues(document.page), [document]);
+    const constraints = useMemo(() => collectFieldConstraints(document.page), [document]);
+    const [values, setValues] = useState(() => ({ ...defaults, ...initialValues }));
+    const [errors, setErrors] = useState({});
+    useEffect(() => {
+        setValues((previous) => ({ ...defaults, ...initialValues, ...previous }));
+    }, [defaults, initialValues]);
+    const setError = useCallback((name, error) => {
+        setErrors((previous) => {
+            if (error)
+                return { ...previous, [name]: error };
+            if (!(name in previous))
+                return previous;
+            const next = { ...previous };
+            delete next[name];
+            return next;
+        });
+    }, []);
+    const setValue = useCallback((name, value) => {
+        setValues((previous) => {
+            const next = { ...previous, [name]: value };
+            onChange?.(next);
+            return next;
+        });
+        const field = constraints[name];
+        if (field) {
+            setError(name, validateField(value, field.constraints, field.required));
+        }
+    }, [onChange, constraints, setError]);
+    const handleAction = useCallback((action, event) => {
+        if (event === 'submit' && onSubmit) {
+            const failures = {};
+            for (const name of collectFieldNames(document.page)) {
+                const field = constraints[name];
+                if (!field)
+                    continue;
+                const error = validateField(values[name], field.constraints, field.required);
+                if (error)
+                    failures[name] = error;
+            }
+            if (Object.keys(failures).length > 0) {
+                setErrors(failures);
+                return;
+            }
+            onSubmit(values);
+        }
+        onAction?.(action, event);
+    }, [onSubmit, onAction, values, document.page, constraints]);
+    const contextValue = useMemo(() => ({
+        document,
+        registry,
+        mode,
+        values,
+        errors,
+        setValue,
+        setError,
+        scope: { ...externalScope, values, ...values },
+        onAction: handleAction,
+    }), [document, registry, mode, values, errors, setValue, setError, externalScope, handleAction]);
+    return (_jsx(RendererProvider, { value: contextValue, children: _jsx("div", { className: className, children: _jsx(BlockRenderer, { node: document.page }) }) }));
+}

package/esm/types.js

@@ -0,0 +1 @@
+export {};

package/esm/unknown-block.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Rendered when no registry layer satisfies a node type. A document may name
+ * blocks a given host has not installed, so an unknown type is a visible gap,
+ * never a thrown render.
+ */
+export function UnknownBlock({ node }) {
+    return (_jsxs("div", { "data-block-unknown": node.type, role: "note", children: ["Unknown block: ", node.type] }));
+}

package/index.d.ts

@@ -0,0 +1,10 @@
+export { reactAdapter } from './adapter';
+export { composeScope, readPath, resolveBinding, resolveNodeProps } from './bindings';
+export type { BindingScope } from './bindings';
+export { RendererProvider, useBlockField, useRenderer } from './context';
+export { composeRegistry, missingTypes, registeredTypes, resolveBlock } from './registry';
+export { BlockRenderer, DocumentRenderer } from './renderer';
+export type { DocumentRendererProps } from './renderer';
+export { UnknownBlock } from './unknown-block';
+export type { BlockComponent, BlockProps, BlockRegistry, RenderMode, RendererContextValue } from './types';
+export type { NodeResolution, RenderContext, RendererAdapter, UnknownNodePolicy, } from 'json-renderer';

package/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnknownBlock = exports.DocumentRenderer = exports.BlockRenderer = exports.resolveBlock = exports.registeredTypes = exports.missingTypes = exports.composeRegistry = exports.useRenderer = exports.useBlockField = exports.RendererProvider = exports.resolveNodeProps = exports.resolveBinding = exports.readPath = exports.composeScope = exports.reactAdapter = void 0;
+var adapter_1 = require("./adapter");
+Object.defineProperty(exports, "reactAdapter", { enumerable: true, get: function () { return adapter_1.reactAdapter; } });
+var bindings_1 = require("./bindings");
+Object.defineProperty(exports, "composeScope", { enumerable: true, get: function () { return bindings_1.composeScope; } });
+Object.defineProperty(exports, "readPath", { enumerable: true, get: function () { return bindings_1.readPath; } });
+Object.defineProperty(exports, "resolveBinding", { enumerable: true, get: function () { return bindings_1.resolveBinding; } });
+Object.defineProperty(exports, "resolveNodeProps", { enumerable: true, get: function () { return bindings_1.resolveNodeProps; } });
+var context_1 = require("./context");
+Object.defineProperty(exports, "RendererProvider", { enumerable: true, get: function () { return context_1.RendererProvider; } });
+Object.defineProperty(exports, "useBlockField", { enumerable: true, get: function () { return context_1.useBlockField; } });
+Object.defineProperty(exports, "useRenderer", { enumerable: true, get: function () { return context_1.useRenderer; } });
+var registry_1 = require("./registry");
+Object.defineProperty(exports, "composeRegistry", { enumerable: true, get: function () { return registry_1.composeRegistry; } });
+Object.defineProperty(exports, "missingTypes", { enumerable: true, get: function () { return registry_1.missingTypes; } });
+Object.defineProperty(exports, "registeredTypes", { enumerable: true, get: function () { return registry_1.registeredTypes; } });
+Object.defineProperty(exports, "resolveBlock", { enumerable: true, get: function () { return registry_1.resolveBlock; } });
+var renderer_1 = require("./renderer");
+Object.defineProperty(exports, "BlockRenderer", { enumerable: true, get: function () { return renderer_1.BlockRenderer; } });
+Object.defineProperty(exports, "DocumentRenderer", { enumerable: true, get: function () { return renderer_1.DocumentRenderer; } });
+var unknown_block_1 = require("./unknown-block");
+Object.defineProperty(exports, "UnknownBlock", { enumerable: true, get: function () { return unknown_block_1.UnknownBlock; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blocks-renderer",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Recursive React renderer for Constructive Blocks JSON UI documents, with layerable widget registries",
   "private": false,
   "license": "MIT",
@@ -14,41 +14,24 @@
     "url": "https://github.com/constructive-io/blocks/issues"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "directory": "dist"
   },
-  "type": "module",
   "sideEffects": false,
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
-    },
-    "./package.json": "./package.json"
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "LICENSE",
-    "README.md"
-  ],
+  "main": "index.js",
+  "module": "esm/index.js",
+  "types": "index.d.ts",
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "lint:types": "tsc --noEmit",
+    "build": "makage clean && makage build-ts && makage assets",
+    "build:dev": "makage clean && makage build-ts --dev && makage assets",
+    "lint:types": "tsc --noEmit -p tsconfig.lint.json",
     "test": "vitest run",
     "test:watch": "vitest",
-    "clean": "rm -rf dist"
+    "clean": "makage clean"
   },
   "dependencies": {
-    "blocks-schema": "^0.2.0"
+    "blocks-schema": "workspace:^",
+    "json-renderer": "workspace:^"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"
@@ -56,14 +39,13 @@
   "devDependencies": {
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
+    "makage": "^0.6.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4"
   },
   "engines": {
     "node": ">=24.0.0"
-  },
-  "gitHead": "b0fd1126b68b23543a51949c1e847c4d820863d3"
+  }
 }

package/registry.d.ts

@@ -0,0 +1,12 @@
+import type { BlockComponent, BlockRegistry } from './types';
+/**
+ * Layer registries left-to-right, later layers winning. This is how a host
+ * customizes rendering: base primitives, then an app registry, then per-document
+ * overrides — no forking of the renderer, and no single global map.
+ */
+export declare function composeRegistry(...layers: (BlockRegistry | undefined)[]): BlockRegistry;
+export declare function resolveBlock(registry: BlockRegistry, type: string): BlockComponent | undefined;
+/** Node types the registry can render, sorted for stable output. */
+export declare function registeredTypes(registry: BlockRegistry): string[];
+/** Node types a document uses that no registry layer satisfies. */
+export declare function missingTypes(registry: BlockRegistry, usedTypes: Iterable<string>): string[];

package/registry.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.composeRegistry = composeRegistry;
+exports.resolveBlock = resolveBlock;
+exports.registeredTypes = registeredTypes;
+exports.missingTypes = missingTypes;
+/**
+ * Registry layering for the React adapter: `json-renderer`'s generic registry
+ * ops, typed over React block components.
+ */
+const json_renderer_1 = require("json-renderer");
+/**
+ * Layer registries left-to-right, later layers winning. This is how a host
+ * customizes rendering: base primitives, then an app registry, then per-document
+ * overrides — no forking of the renderer, and no single global map.
+ */
+function composeRegistry(...layers) {
+    return (0, json_renderer_1.composeRegistry)(...layers);
+}
+function resolveBlock(registry, type) {
+    return (0, json_renderer_1.resolveHandler)(registry, type);
+}
+/** Node types the registry can render, sorted for stable output. */
+function registeredTypes(registry) {
+    return (0, json_renderer_1.registeredTypes)(registry);
+}
+/** Node types a document uses that no registry layer satisfies. */
+function missingTypes(registry, usedTypes) {
+    return (0, json_renderer_1.missingTypes)(registry, usedTypes);
+}

package/renderer.d.ts

@@ -0,0 +1,23 @@
+import { type UIAction, type UIDocument, type UINode } from 'blocks-schema';
+import type { BlockRegistry, RenderMode } from './types';
+/**
+ * Renders one node and, recursively, its children: resolve the node type in the
+ * registry, resolve bindings against the current scope, render children first,
+ * fall back to {@link UnknownBlock}.
+ */
+export declare function BlockRenderer({ node }: {
+    node: UINode;
+}): import("react").JSX.Element;
+export interface DocumentRendererProps {
+    document: UIDocument;
+    registry: BlockRegistry;
+    initialValues?: Record<string, unknown>;
+    /** Extra data for binding expressions, e.g. `{ row, user, params }`. */
+    scope?: Record<string, unknown>;
+    onSubmit?: (values: Record<string, unknown>) => void;
+    onChange?: (values: Record<string, unknown>) => void;
+    onAction?: (action: UIAction, event: string) => void;
+    mode?: RenderMode;
+    className?: string;
+}
+export declare function DocumentRenderer({ document, registry, initialValues, scope: externalScope, onSubmit, onChange, onAction, mode, className, }: DocumentRendererProps): import("react").JSX.Element;

package/renderer.js

@@ -0,0 +1,89 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockRenderer = BlockRenderer;
+exports.DocumentRenderer = DocumentRenderer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const blocks_schema_1 = require("blocks-schema");
+const react_1 = require("react");
+const bindings_1 = require("./bindings");
+const context_1 = require("./context");
+const unknown_block_1 = require("./unknown-block");
+/**
+ * Renders one node and, recursively, its children: resolve the node type in the
+ * registry, resolve bindings against the current scope, render children first,
+ * fall back to {@link UnknownBlock}.
+ */
+function BlockRenderer({ node }) {
+    const { registry, scope } = (0, context_1.useRenderer)();
+    const Component = registry[node.type];
+    if (!Component) {
+        return (0, jsx_runtime_1.jsx)(unknown_block_1.UnknownBlock, { node: node });
+    }
+    const children = node.children?.length
+        ? node.children.map((child) => (0, jsx_runtime_1.jsx)(BlockRenderer, { node: child }, child.key))
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)(Component, { node: node, props: (0, bindings_1.resolveNodeProps)(node, scope), children: children }));
+}
+function DocumentRenderer({ document, registry, initialValues, scope: externalScope, onSubmit, onChange, onAction, mode = 'preview', className, }) {
+    const defaults = (0, react_1.useMemo)(() => (0, blocks_schema_1.collectDefaultValues)(document.page), [document]);
+    const constraints = (0, react_1.useMemo)(() => (0, blocks_schema_1.collectFieldConstraints)(document.page), [document]);
+    const [values, setValues] = (0, react_1.useState)(() => ({ ...defaults, ...initialValues }));
+    const [errors, setErrors] = (0, react_1.useState)({});
+    (0, react_1.useEffect)(() => {
+        setValues((previous) => ({ ...defaults, ...initialValues, ...previous }));
+    }, [defaults, initialValues]);
+    const setError = (0, react_1.useCallback)((name, error) => {
+        setErrors((previous) => {
+            if (error)
+                return { ...previous, [name]: error };
+            if (!(name in previous))
+                return previous;
+            const next = { ...previous };
+            delete next[name];
+            return next;
+        });
+    }, []);
+    const setValue = (0, react_1.useCallback)((name, value) => {
+        setValues((previous) => {
+            const next = { ...previous, [name]: value };
+            onChange?.(next);
+            return next;
+        });
+        const field = constraints[name];
+        if (field) {
+            setError(name, (0, blocks_schema_1.validateField)(value, field.constraints, field.required));
+        }
+    }, [onChange, constraints, setError]);
+    const handleAction = (0, react_1.useCallback)((action, event) => {
+        if (event === 'submit' && onSubmit) {
+            const failures = {};
+            for (const name of (0, blocks_schema_1.collectFieldNames)(document.page)) {
+                const field = constraints[name];
+                if (!field)
+                    continue;
+                const error = (0, blocks_schema_1.validateField)(values[name], field.constraints, field.required);
+                if (error)
+                    failures[name] = error;
+            }
+            if (Object.keys(failures).length > 0) {
+                setErrors(failures);
+                return;
+            }
+            onSubmit(values);
+        }
+        onAction?.(action, event);
+    }, [onSubmit, onAction, values, document.page, constraints]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        document,
+        registry,
+        mode,
+        values,
+        errors,
+        setValue,
+        setError,
+        scope: { ...externalScope, values, ...values },
+        onAction: handleAction,
+    }), [document, registry, mode, values, errors, setValue, setError, externalScope, handleAction]);
+    return ((0, jsx_runtime_1.jsx)(context_1.RendererProvider, { value: contextValue, children: (0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(BlockRenderer, { node: document.page }) }) }));
+}