@json-render/svelte 0.6.1

package/dist/contexts/actions.test.js

@@ -0,0 +1,156 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount, unmount } from "svelte";
+import StateProvider, { getStateContext } from "./StateProvider.svelte";
+import ActionProvider, { getActionContext } from "./ActionProvider.svelte";
+import ValidationProvider, { getValidationContext, } from "./ValidationProvider.svelte";
+function component(runTest, options = {}) {
+    return async () => {
+        let promise;
+        const c = mount(((_anchor) => {
+            StateProvider(_anchor, {
+                initialState: options.initialState ?? {},
+                children: ((_inner) => {
+                    if (options.withValidation) {
+                        ValidationProvider(_inner, {
+                            children: ((__inner) => {
+                                ActionProvider(__inner, {
+                                    handlers: options.handlers ?? {},
+                                    children: (() => {
+                                        promise = runTest();
+                                    }),
+                                });
+                            }),
+                        });
+                        return;
+                    }
+                    ActionProvider(_inner, {
+                        handlers: options.handlers ?? {},
+                        children: (() => {
+                            promise = runTest();
+                        }),
+                    });
+                }),
+            });
+        }), { target: document.body });
+        await promise; // eslint-disable-line @typescript-eslint/no-non-null-assertion
+        unmount(c);
+    };
+}
+describe("createActionContext", () => {
+    it("executes built-in setState action", component(async () => {
+        const stateCtx = getStateContext();
+        const actionCtx = getActionContext();
+        await actionCtx.execute({
+            action: "setState",
+            params: { statePath: "/count", value: 5 },
+        });
+        expect(stateCtx.state.count).toBe(5);
+    }, { initialState: { count: 0 } }));
+    it("executes built-in pushState action", component(async () => {
+        const stateCtx = getStateContext();
+        const actionCtx = getActionContext();
+        await actionCtx.execute({
+            action: "pushState",
+            params: { statePath: "/items", value: "c" },
+        });
+        expect(stateCtx.state.items).toEqual(["a", "b", "c"]);
+    }, { initialState: { items: ["a", "b"] } }));
+    it("pushState creates array if missing", component(async () => {
+        const stateCtx = getStateContext();
+        const actionCtx = getActionContext();
+        await actionCtx.execute({
+            action: "pushState",
+            params: { statePath: "/newList", value: "first" },
+        });
+        expect(stateCtx.get("/newList")).toEqual(["first"]);
+    }));
+    it("executes built-in removeState action", component(async () => {
+        const stateCtx = getStateContext();
+        const actionCtx = getActionContext();
+        await actionCtx.execute({
+            action: "removeState",
+            params: { statePath: "/items", index: 1 },
+        });
+        expect(stateCtx.state.items).toEqual(["a", "c"]);
+    }, { initialState: { items: ["a", "b", "c"] } }));
+    it("executes push navigation action", component(async () => {
+        const stateCtx = getStateContext();
+        const actionCtx = getActionContext();
+        await actionCtx.execute({
+            action: "push",
+            params: { screen: "settings" },
+        });
+        expect(stateCtx.get("/currentScreen")).toBe("settings");
+        expect(stateCtx.get("/navStack")).toEqual(["home"]);
+    }, { initialState: { currentScreen: "home" } }));
+    it("executes pop navigation action", component(async () => {
+        const stateCtx = getStateContext();
+        const actionCtx = getActionContext();
+        await actionCtx.execute({ action: "pop" });
+        expect(stateCtx.get("/currentScreen")).toBe("home");
+        expect(stateCtx.get("/navStack")).toEqual([]);
+    }, { initialState: { currentScreen: "settings", navStack: ["home"] } }));
+    it("executes custom handlers", (() => {
+        const customHandler = vi.fn().mockResolvedValue(undefined);
+        return component(async () => {
+            const actionCtx = getActionContext();
+            await actionCtx.execute({
+                action: "myAction",
+                params: { foo: "bar" },
+            });
+            expect(customHandler).toHaveBeenCalledWith({ foo: "bar" });
+        }, { handlers: { myAction: customHandler } });
+    })());
+    it("warns when no handler registered", component(async () => {
+        const actionCtx = getActionContext();
+        const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => { });
+        await actionCtx.execute({ action: "unknownAction" });
+        expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("unknownAction"));
+        warnSpy.mockRestore();
+    }));
+    it("tracks loading state for actions", (() => {
+        let resolveHandler;
+        const slowHandler = vi.fn(() => new Promise((resolve) => {
+            resolveHandler = resolve;
+        }));
+        return component(async () => {
+            const actionCtx = getActionContext();
+            const executePromise = actionCtx.execute({ action: "slowAction" });
+            expect(actionCtx.loadingActions.has("slowAction")).toBe(true);
+            resolveHandler();
+            await executePromise;
+            expect(actionCtx.loadingActions.has("slowAction")).toBe(false);
+        }, {
+            handlers: {
+                slowAction: slowHandler,
+            },
+        });
+    })());
+    it("allows registering handlers dynamically", component(async () => {
+        const actionCtx = getActionContext();
+        const dynamicHandler = vi.fn();
+        actionCtx.registerHandler("dynamicAction", dynamicHandler);
+        await actionCtx.execute({ action: "dynamicAction", params: { x: 1 } });
+        expect(dynamicHandler).toHaveBeenCalledWith({ x: 1 });
+    }));
+    it("executes validateForm and writes result to /formValidation", component(async () => {
+        const stateCtx = getStateContext();
+        const actionCtx = getActionContext();
+        const validationCtx = getValidationContext();
+        validationCtx.registerField("/form/email", {
+            checks: [{ type: "required", message: "Required" }],
+        });
+        await actionCtx.execute({ action: "validateForm" });
+        expect(stateCtx.get("/formValidation")).toEqual({
+            valid: false,
+            errors: { "/form/email": ["Required"] },
+        });
+    }, { withValidation: true }));
+    it("validateForm defaults to warning when validation context is missing", component(async () => {
+        const actionCtx = getActionContext();
+        const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => { });
+        await actionCtx.execute({ action: "validateForm" });
+        expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("validateForm action was dispatched"));
+        warnSpy.mockRestore();
+    }));
+});

package/dist/contexts/state.test.js

@@ -0,0 +1,118 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount, unmount } from "svelte";
+import { createStateStore } from "@json-render/core";
+import StateProvider, { getStateContext } from "./StateProvider.svelte";
+function component(runTest, props = {}) {
+    return () => {
+        const c = mount(((_anchor) => {
+            StateProvider(_anchor, {
+                ...props,
+                children: (() => {
+                    runTest();
+                }),
+            });
+        }), { target: document.body });
+        unmount(c);
+    };
+}
+describe("StateProvider", () => {
+    it("provides initial state to consumers", component(() => {
+        const ctx = getStateContext();
+        expect(ctx.state).toEqual({ user: { name: "John" } });
+    }, { initialState: { user: { name: "John" } } }));
+    it("provides empty object when no initial state", component(() => {
+        const ctx = getStateContext();
+        expect(ctx.state).toEqual({});
+    }));
+});
+describe("StateContext.get", () => {
+    it("retrieves values by path", component(() => {
+        const ctx = getStateContext();
+        expect(ctx.get("/user/name")).toBe("John");
+        expect(ctx.get("/user/age")).toBe(30);
+    }, { initialState: { user: { name: "John", age: 30 } } }));
+    it("returns undefined for missing path", component(() => {
+        const ctx = getStateContext();
+        expect(ctx.get("/user/email")).toBeUndefined();
+        expect(ctx.get("/nonexistent")).toBeUndefined();
+    }, { initialState: { user: { name: "John" } } }));
+});
+describe("StateContext.set", () => {
+    it("updates values at path", component(() => {
+        const ctx = getStateContext();
+        ctx.set("/count", 5);
+        expect(ctx.state.count).toBe(5);
+    }, { initialState: { count: 0 } }));
+    it("creates nested paths", component(() => {
+        const ctx = getStateContext();
+        ctx.set("/user/name", "Jane");
+        expect(ctx.get("/user/name")).toBe("Jane");
+    }));
+    it("calls onStateChange callback with change entries", component(() => {
+        const ctx = getStateContext();
+        ctx.set("/value", 2);
+    }, {
+        initialState: { value: 1 },
+        onStateChange: vi.fn((changes) => {
+            expect(changes).toEqual([{ path: "/value", value: 2 }]);
+        }),
+    }));
+});
+describe("StateContext.update", () => {
+    it("handles multiple values at once", component(() => {
+        const ctx = getStateContext();
+        ctx.update({ "/a": 10, "/b": 20 });
+        expect(ctx.state.a).toBe(10);
+        expect(ctx.state.b).toBe(20);
+    }, { initialState: { a: 1, b: 2 } }));
+    it("calls onStateChange once with all changed updates", component(() => {
+        const ctx = getStateContext();
+        ctx.update({ "/x": 1, "/y": 2 });
+    }, {
+        initialState: { x: 0, y: 0 },
+        onStateChange: vi.fn((changes) => {
+            expect(changes).toEqual([
+                { path: "/x", value: 1 },
+                { path: "/y", value: 2 },
+            ]);
+        }),
+    }));
+});
+describe("StateContext nested paths", () => {
+    it("handles deeply nested state paths", component(() => {
+        const ctx = getStateContext();
+        expect(ctx.get("/app/settings/theme")).toBe("light");
+        expect(ctx.get("/app/settings/notifications/enabled")).toBe(true);
+        ctx.set("/app/settings/theme", "dark");
+        expect(ctx.get("/app/settings/theme")).toBe("dark");
+    }, {
+        initialState: {
+            app: {
+                settings: {
+                    theme: "light",
+                    notifications: { enabled: true },
+                },
+            },
+        },
+    }));
+    it("handles array indices in paths", component(() => {
+        const ctx = getStateContext();
+        expect(ctx.get("/items/0")).toBe("a");
+        expect(ctx.get("/items/1")).toBe("b");
+        ctx.set("/items/1", "B");
+        expect(ctx.get("/items/1")).toBe("B");
+    }, { initialState: { items: ["a", "b", "c"] } }));
+});
+describe("controlled mode", () => {
+    it("reads and writes through external StateStore", (() => {
+        const store = createStateStore({ count: 1 });
+        const onStateChange = vi.fn();
+        return component(() => {
+            const ctx = getStateContext();
+            expect(ctx.get("/count")).toBe(1);
+            ctx.set("/count", 2);
+            expect(store.get("/count")).toBe(2);
+            expect(onStateChange).not.toHaveBeenCalled();
+        }, { store, onStateChange });
+    })());
+});

package/dist/contexts/visibility.test.js

@@ -0,0 +1,71 @@
+import { describe, it, expect } from "vitest";
+import { mount, unmount } from "svelte";
+import StateProvider, { getStateContext } from "./StateProvider.svelte";
+import VisibilityProvider, { getVisibilityContext, } from "./VisibilityProvider.svelte";
+function component(runTest, initialState = {}) {
+    return () => {
+        const c = mount(((_anchor) => {
+            StateProvider(_anchor, {
+                initialState,
+                children: ((_inner) => {
+                    VisibilityProvider(_inner, {
+                        children: (() => {
+                            runTest();
+                        }),
+                    });
+                }),
+            });
+        }), { target: document.body });
+        unmount(c);
+    };
+}
+describe("VisibilityProvider", () => {
+    it("provides isVisible function", component(() => {
+        const visCtx = getVisibilityContext();
+        expect(typeof visCtx.isVisible).toBe("function");
+    }));
+    it("provides visibility context", component(() => {
+        const visCtx = getVisibilityContext();
+        expect(visCtx.ctx).toBeDefined();
+        expect(visCtx.ctx.stateModel).toEqual({ value: true });
+    }, { value: true }));
+});
+describe("isVisible", () => {
+    it("returns true for undefined condition", component(() => {
+        const visCtx = getVisibilityContext();
+        expect(visCtx.isVisible(undefined)).toBe(true);
+    }));
+    it("returns true for true condition", component(() => {
+        const visCtx = getVisibilityContext();
+        expect(visCtx.isVisible(true)).toBe(true);
+    }));
+    it("returns false for false condition", component(() => {
+        const visCtx = getVisibilityContext();
+        expect(visCtx.isVisible(false)).toBe(false);
+    }));
+    it("evaluates $state conditions against data", component(() => {
+        const stateCtx = getStateContext();
+        const visCtx = getVisibilityContext();
+        expect(visCtx.isVisible({ $state: "/isLoggedIn" })).toBe(true);
+        stateCtx.set("/isLoggedIn", false);
+        expect(visCtx.isVisible({ $state: "/isLoggedIn" })).toBe(false);
+    }, { isLoggedIn: true }));
+    it("evaluates equality conditions", component(() => {
+        const visCtx = getVisibilityContext();
+        expect(visCtx.isVisible({ $state: "/tab", eq: "home" })).toBe(true);
+        expect(visCtx.isVisible({ $state: "/tab", eq: "settings" })).toBe(false);
+    }, { tab: "home" }));
+    it("evaluates array conditions (implicit AND)", component(() => {
+        const visCtx = getVisibilityContext();
+        expect(visCtx.isVisible([{ $state: "/a" }, { $state: "/b" }])).toBe(true);
+        expect(visCtx.isVisible([{ $state: "/a" }, { $state: "/c" }])).toBe(false);
+    }, { a: true, b: true, c: false }));
+    it("evaluates $and conditions", component(() => {
+        const visCtx = getVisibilityContext();
+        expect(visCtx.isVisible({ $and: [{ $state: "/x" }, { $state: "/y" }] })).toBe(false);
+    }, { x: true, y: false }));
+    it("evaluates $or conditions", component(() => {
+        const visCtx = getVisibilityContext();
+        expect(visCtx.isVisible({ $or: [{ $state: "/x" }, { $state: "/y" }] })).toBe(true);
+    }, { x: true, y: false }));
+});

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+export { default as StateProvider, getStateContext, getStateValue, getBoundProp, type StateContext, } from "./contexts/StateProvider.svelte";
+export { default as VisibilityProvider, getVisibilityContext, isVisible, type VisibilityContext, } from "./contexts/VisibilityProvider.svelte";
+export { default as ActionProvider, getActionContext, getAction, type ActionContext, type PendingConfirmation, } from "./contexts/ActionProvider.svelte";
+export { default as ValidationProvider, getValidationContext, getOptionalValidationContext, getFieldValidation, type ValidationContext, type FieldValidationState, } from "./contexts/ValidationProvider.svelte";
+export { default as RepeatScopeProvider, getRepeatScope, type RepeatScopeValue, } from "./contexts/RepeatScopeProvider.svelte";
+export { default as FunctionsContextProvider, getFunctions, type FunctionsContext, } from "./contexts/FunctionsContextProvider.svelte";
+export { schema, type SvelteSchema, type SvelteSpec } from "./schema.js";
+export type { EventHandle, BaseComponentProps, SetState, StateModel, ComponentContext, ComponentFn, Components, ActionFn, Actions, } from "./catalog-types.js";
+export { flatToTree, buildSpecFromParts, getTextFromParts, type DataPart, } from "./utils.svelte.js";
+export { createUIStream, createChatUI, type UIStreamOptions, type UIStreamReturn, type UIStreamState, type ChatUIOptions, type ChatUIReturn, type ChatMessage, type TokenUsage, } from "./streaming.svelte.js";
+export { defineRegistry, createRenderer, type DefineRegistryResult, type ComponentRenderer, type ComponentRegistry, } from "./renderer.js";
+export { default as Renderer, type RendererProps } from "./Renderer.svelte";
+export { default as CatalogRenderer, type CatalogRendererProps, } from "./CatalogRenderer.svelte";
+export { default as JsonUIProvider, type JSONUIProviderProps, } from "./JsonUIProvider.svelte";
+export { default as ConfirmDialog } from "./ConfirmDialog.svelte";
+export { default as ConfirmDialogManager } from "./ConfirmDialogManager.svelte";
+export type { Spec, UIElement, ActionBinding, ActionHandler, } from "@json-render/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,KAAK,YAAY,GAClB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EACL,OAAO,IAAI,kBAAkB,EAC7B,oBAAoB,EACpB,SAAS,EACT,KAAK,iBAAiB,GACvB,MAAM,sCAAsC,CAAC;AAE9C,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,gBAAgB,EAChB,SAAS,EACT,KAAK,aAAa,EAClB,KAAK,mBAAmB,GACzB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EACL,OAAO,IAAI,kBAAkB,EAC7B,oBAAoB,EACpB,4BAA4B,EAC5B,kBAAkB,EAClB,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,GAC1B,MAAM,sCAAsC,CAAC;AAE9C,OAAO,EACL,OAAO,IAAI,mBAAmB,EAC9B,cAAc,EACd,KAAK,gBAAgB,GACtB,MAAM,uCAAuC,CAAC;AAE/C,OAAO,EACL,OAAO,IAAI,wBAAwB,EACnC,YAAY,EACZ,KAAK,gBAAgB,GACtB,MAAM,4CAA4C,CAAC;AAMpD,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAMzE,YAAY,EACV,WAAW,EACX,kBAAkB,EAClB,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,OAAO,GACR,MAAM,oBAAoB,CAAC;AAM5B,OAAO,EACL,UAAU,EACV,kBAAkB,EAClB,gBAAgB,EAChB,KAAK,QAAQ,GACd,MAAM,mBAAmB,CAAC;AAM3B,OAAO,EACL,cAAc,EACd,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,uBAAuB,CAAC;AAM/B,OAAO,EACL,cAAc,EACd,cAAc,EACd,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,GACvB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,OAAO,IAAI,eAAe,EAC1B,KAAK,oBAAoB,GAC1B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,KAAK,mBAAmB,GACzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAMhF,YAAY,EACV,IAAI,EACJ,SAAS,EACT,aAAa,EACb,aAAa,GACd,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,30 @@
+// =============================================================================
+// Contexts
+// =============================================================================
+export { default as StateProvider, getStateContext, getStateValue, getBoundProp, } from "./contexts/StateProvider.svelte";
+export { default as VisibilityProvider, getVisibilityContext, isVisible, } from "./contexts/VisibilityProvider.svelte";
+export { default as ActionProvider, getActionContext, getAction, } from "./contexts/ActionProvider.svelte";
+export { default as ValidationProvider, getValidationContext, getOptionalValidationContext, getFieldValidation, } from "./contexts/ValidationProvider.svelte";
+export { default as RepeatScopeProvider, getRepeatScope, } from "./contexts/RepeatScopeProvider.svelte";
+export { default as FunctionsContextProvider, getFunctions, } from "./contexts/FunctionsContextProvider.svelte";
+// =============================================================================
+// Schema
+// =============================================================================
+export { schema } from "./schema.js";
+// =============================================================================
+// Utilities
+// =============================================================================
+export { flatToTree, buildSpecFromParts, getTextFromParts, } from "./utils.svelte.js";
+// =============================================================================
+// Streaming
+// =============================================================================
+export { createUIStream, createChatUI, } from "./streaming.svelte.js";
+// =============================================================================
+// Registry
+// =============================================================================
+export { defineRegistry, createRenderer, } from "./renderer.js";
+export { default as Renderer } from "./Renderer.svelte";
+export { default as CatalogRenderer, } from "./CatalogRenderer.svelte";
+export { default as JsonUIProvider, } from "./JsonUIProvider.svelte";
+export { default as ConfirmDialog } from "./ConfirmDialog.svelte";
+export { default as ConfirmDialogManager } from "./ConfirmDialogManager.svelte";

package/dist/renderer.d.ts

@@ -0,0 +1,128 @@
+import type { Catalog, ComputedFunction, SchemaDefinition, Spec, StateStore, UIElement } from "@json-render/core";
+import type { Component, Snippet } from "svelte";
+import type { BaseComponentProps, EventHandle, SetState, StateModel } from "./catalog-types.js";
+/**
+ * Props passed to component renderers
+ */
+export interface ComponentRenderProps<P = Record<string, unknown>> {
+    /** The element being rendered */
+    element: UIElement<string, P>;
+    /** Rendered children snippet */
+    children?: Snippet;
+    /** Emit a named event. The renderer resolves the event to action binding(s) from the element's `on` field. */
+    emit: (event: string) => void;
+    /** Get an event handle with metadata */
+    on: (event: string) => EventHandle;
+    /**
+     * Two-way binding paths resolved from `$bindState` / `$bindItem` expressions.
+     * Maps prop name → absolute state path for write-back.
+     */
+    bindings?: Record<string, string>;
+    /** Whether the parent is loading */
+    loading?: boolean;
+}
+/**
+ * Component renderer type - a Svelte component that receives ComponentRenderProps
+ */
+export type ComponentRenderer<P = Record<string, unknown>> = Component<ComponentRenderProps<P>>;
+/**
+ * Registry of component renderers.
+ * Maps component type names to Svelte components.
+ */
+export type ComponentRegistry = Record<string, ComponentRenderer<any>>;
+/**
+ * Action handler function for defineRegistry
+ */
+type DefineRegistryActionFn = (params: Record<string, unknown> | undefined, setState: SetState, state: StateModel) => Promise<void>;
+/**
+ * Result returned by defineRegistry
+ */
+export interface DefineRegistryResult {
+    /** Component registry for Renderer */
+    registry: ComponentRegistry;
+    /**
+     * Create ActionProvider-compatible handlers.
+     */
+    handlers: (getSetState: () => SetState | undefined, getState: () => StateModel) => Record<string, (params: Record<string, unknown>) => Promise<void>>;
+    /**
+     * Execute an action by name imperatively
+     */
+    executeAction: (actionName: string, params: Record<string, unknown> | undefined, setState: SetState, state?: StateModel) => Promise<void>;
+}
+/**
+ * Create a registry from a catalog with Svelte components and/or actions.
+ *
+ * Components must accept `BaseComponentProps` as their props interface.
+ *
+ * @example
+ * ```ts
+ * import { defineRegistry } from "@json-render/svelte";
+ * import Card from "./components/Card.svelte";
+ * import Button from "./components/Button.svelte";
+ * import { myCatalog } from "./catalog";
+ *
+ * const { registry, handlers } = defineRegistry(myCatalog, {
+ *   components: {
+ *     Card,
+ *     Button,
+ *   },
+ *   actions: {
+ *     submit: async (params, setState) => {
+ *       // handle action
+ *     },
+ *   },
+ * });
+ * ```
+ */
+export declare function defineRegistry<C extends Catalog, TComponents extends Record<string, Component<BaseComponentProps<any>>>>(_catalog: C, options: {
+    /** Svelte components that accept BaseComponentProps */
+    components?: TComponents;
+    /** Action handlers */
+    actions?: Record<string, DefineRegistryActionFn>;
+}): DefineRegistryResult;
+/**
+ * Props for renderers created with createRenderer
+ */
+export interface CreateRendererProps {
+    spec: Spec | null;
+    store?: StateStore;
+    state?: Record<string, unknown>;
+    onAction?: (actionName: string, params?: Record<string, unknown>) => void;
+    onStateChange?: (changes: Array<{
+        path: string;
+        value: unknown;
+    }>) => void;
+    /** Named functions for `$computed` expressions in props */
+    functions?: Record<string, ComputedFunction>;
+    loading?: boolean;
+    fallback?: Component;
+}
+/**
+ * Component map type — maps component names to Vue components
+ */
+export type ComponentMap<TComponents extends Record<string, {
+    props: unknown;
+}>> = {
+    [K in keyof TComponents]: Component<any, any, string>;
+};
+/**
+ * Create a renderer from a catalog
+ *
+ * @example
+ * ```typescript
+ * const DashboardRenderer = createRenderer(dashboardCatalog, {
+ *   Card,
+ *   Metric,
+ * });
+ *
+ * // Usage in template
+ * <DashboardRenderer spec={aiGeneratedSpec} {state} />
+ * ```
+ */
+export declare function createRenderer<TDef extends SchemaDefinition, TCatalog extends {
+    components: Record<string, {
+        props: unknown;
+    }>;
+}>(_catalog: Catalog<TDef, TCatalog>, components: ComponentMap<TCatalog["components"]>): Component<CreateRendererProps>;
+export {};
+//# sourceMappingURL=renderer.d.ts.map

package/dist/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"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"}

package/dist/renderer.js

@@ -0,0 +1,124 @@
+import CatalogRenderer from "./CatalogRenderer.svelte";
+/**
+ * Create a registry from a catalog with Svelte components and/or actions.
+ *
+ * Components must accept `BaseComponentProps` as their props interface.
+ *
+ * @example
+ * ```ts
+ * import { defineRegistry } from "@json-render/svelte";
+ * import Card from "./components/Card.svelte";
+ * import Button from "./components/Button.svelte";
+ * import { myCatalog } from "./catalog";
+ *
+ * const { registry, handlers } = defineRegistry(myCatalog, {
+ *   components: {
+ *     Card,
+ *     Button,
+ *   },
+ *   actions: {
+ *     submit: async (params, setState) => {
+ *       // handle action
+ *     },
+ *   },
+ * });
+ * ```
+ */
+export function defineRegistry(_catalog, options) {
+    const registry = {};
+    if (options.components) {
+        for (const [name, componentFn] of Object.entries(options.components)) {
+            registry[name] = (_, props) => componentFn(_, {
+                get props() {
+                    return props.element.props;
+                },
+                get children() {
+                    return props.children;
+                },
+                get emit() {
+                    return props.emit;
+                },
+                get on() {
+                    return props.on;
+                },
+                get bindings() {
+                    return props.bindings;
+                },
+                get loading() {
+                    return props.loading;
+                },
+            });
+        }
+    }
+    // Build action helpers
+    const actionMap = options.actions
+        ? Object.entries(options.actions)
+        : [];
+    const handlers = (getSetState, getState) => {
+        const result = {};
+        for (const [name, actionFn] of actionMap) {
+            result[name] = async (params) => {
+                const setState = getSetState();
+                const state = getState();
+                if (setState) {
+                    await actionFn(params, setState, state);
+                }
+            };
+        }
+        return result;
+    };
+    const executeAction = async (actionName, params, setState, state = {}) => {
+        const entry = actionMap.find(([name]) => name === actionName);
+        if (entry) {
+            await entry[1](params, setState, state);
+        }
+        else {
+            console.warn(`Unknown action: ${actionName}`);
+        }
+    };
+    return { registry, handlers, executeAction };
+}
+/**
+ * Create a renderer from a catalog
+ *
+ * @example
+ * ```typescript
+ * const DashboardRenderer = createRenderer(dashboardCatalog, {
+ *   Card,
+ *   Metric,
+ * });
+ *
+ * // Usage in template
+ * <DashboardRenderer spec={aiGeneratedSpec} {state} />
+ * ```
+ */
+export function createRenderer(_catalog, components) {
+    const registry = components;
+    return (_, props) => CatalogRenderer(_, {
+        registry,
+        get spec() {
+            return props.spec;
+        },
+        get store() {
+            return props.store;
+        },
+        get state() {
+            return props.state;
+        },
+        get onAction() {
+            return props.onAction;
+        },
+        get onStateChange() {
+            return props.onStateChange;
+        },
+        get functions() {
+            return props.functions;
+        },
+        get loading() {
+            return props.loading;
+        },
+        get fallback() {
+            return props.fallback;
+        },
+    });
+}