ngx-json-render 0.1.0

package/fesm2022/ngx-json-render.mjs

@@ -0,0 +1,2029 @@
+import * as i0 from '@angular/core';
+import { signal, Injectable, inject, computed, untracked, effect, isDevMode, input, output, ChangeDetectionStrategy, Component, DestroyRef, InjectionToken, Injector, forwardRef } from '@angular/core';
+import { createStateStore, getByPath, runValidation, resolveAction, nextActionDispatchId, notifyActionDispatch, notifyActionSettle, executeAction, isDevtoolsActive, subscribeDevtoolsActive, evaluateVisibility, resolveElementProps, resolveBindings, resolveActionParam, createDirectiveRegistry, resolveRepeatStatePath, resolveRepeatItemStatePath, setByPath, removeByPath, SPEC_DATA_PART_TYPE, applySpecPatch, nestedToFlat, createMixedStreamParser, defineSchema } from '@json-render/core';
+export { createStateStore, nestedToFlat } from '@json-render/core';
+import { flattenToPointers } from '@json-render/core/store-utils';
+import { NgComponentOutlet } from '@angular/common';
+
+const EMPTY = signal(undefined, ...(ngDevMode ? [{ debugName: "EMPTY" }] : /* istanbul ignore next */ []));
+/**
+ * Internal bridge between the `<json-render>` component's inputs and the
+ * renderer services / element tree. The renderer component replaces these
+ * signal references with its own input signals at construction time.
+ *
+ * @internal
+ */
+class JsonRenderRootContext {
+    spec = EMPTY;
+    registry = EMPTY;
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    fallback = EMPTY;
+    /** External store (controlled mode). */
+    store = EMPTY;
+    /** Initial state (uncontrolled mode); falls back to `spec.state`. */
+    initialState = signal({}, ...(ngDevMode ? [{ debugName: "initialState" }] : /* istanbul ignore next */ []));
+    handlers = EMPTY;
+    onAction = EMPTY;
+    navigate = EMPTY;
+    validationFunctions = EMPTY;
+    functions = EMPTY;
+    directiveRegistry = EMPTY;
+    /** Emits uncontrolled-mode state changes to the renderer output. */
+    emitStateChange = () => { };
+    /** Resolve a registry entry (component + slot metadata) for a type. */
+    resolveEntry(type) {
+        const raw = this.registry()?.[type] ?? this.fallback() ?? undefined;
+        if (!raw)
+            return undefined;
+        return typeof raw === 'function' ? { component: raw } : raw;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderRootContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderRootContext });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderRootContext, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * The state store of a `<json-render>` subtree.
+ *
+ * Wraps a core {@link StateStore} (either the internal in-memory store in
+ * uncontrolled mode, or an external store passed via the `store` input) and
+ * exposes the current state model as a signal.
+ *
+ * Inject it from catalog components or action handlers via
+ * {@link injectStateStore}.
+ */
+class JsonRenderStateService {
+    root = inject(JsonRenderRootContext);
+    internalStore = createStateStore({});
+    changeListeners = new Set();
+    _state = signal({}, { ...(ngDevMode ? { debugName: "_state" } : /* istanbul ignore next */ {}), equal: () => false });
+    /** The current state model as a signal. */
+    state = this._state.asReadonly();
+    currentStore = computed(() => this.root.store() ?? this.internalStore, ...(ngDevMode ? [{ debugName: "currentStore" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const initialMode = untracked(this.currentStore) === this.internalStore
+            ? 'uncontrolled'
+            : 'controlled';
+        let modeWarned = false;
+        // Keep the state signal in sync with whichever store is active.
+        effect((onCleanup) => {
+            const store = this.currentStore();
+            if (isDevMode() && !modeWarned) {
+                const mode = store === this.internalStore ? 'uncontrolled' : 'controlled';
+                if (mode !== initialMode) {
+                    modeWarned = true;
+                    console.warn(`[ngx-json-render] switching from ${initialMode} to ${mode} mode is not supported.`);
+                }
+            }
+            untracked(() => this._state.set(store.getSnapshot()));
+            const unsubscribe = store.subscribe(() => {
+                this._state.set(store.getSnapshot());
+            });
+            onCleanup(unsubscribe);
+        });
+        // Uncontrolled mode: when the (resolved) initial state changes — e.g.
+        // `spec.state` grows while streaming — diff it against the previous
+        // initial state and apply only the changed leaves to the store.
+        let prevFlat = {};
+        effect(() => {
+            if (this.root.store())
+                return;
+            const initialState = this.root.initialState() ?? {};
+            const nextFlat = Object.keys(initialState).length > 0
+                ? flattenToPointers(initialState)
+                : {};
+            const allKeys = new Set([
+                ...Object.keys(prevFlat),
+                ...Object.keys(nextFlat),
+            ]);
+            const updates = {};
+            for (const key of allKeys) {
+                if (prevFlat[key] !== nextFlat[key]) {
+                    updates[key] = key in nextFlat ? nextFlat[key] : undefined;
+                }
+            }
+            prevFlat = nextFlat;
+            if (Object.keys(updates).length > 0) {
+                untracked(() => this.internalStore.update(updates));
+            }
+        });
+    }
+    /** Read a value by JSON Pointer path from the current state. */
+    get(path) {
+        return untracked(this.currentStore).get(path);
+    }
+    /** Write a value by JSON Pointer path and notify subscribers. */
+    set(path, value) {
+        const store = untracked(this.currentStore);
+        const prev = store.getSnapshot();
+        const prevValue = getByPath(prev, path);
+        store.set(path, value);
+        if (prevValue !== value) {
+            const changes = [{ path, value }];
+            this.notifyChanges(changes);
+            if (!untracked(this.root.store) && store.getSnapshot() !== prev) {
+                this.root.emitStateChange(changes);
+            }
+        }
+    }
+    /** Write multiple values at once (single notification). */
+    update(updates) {
+        const store = untracked(this.currentStore);
+        const prev = store.getSnapshot();
+        store.update(updates);
+        const changes = [];
+        for (const [path, value] of Object.entries(updates)) {
+            if (getByPath(prev, path) !== value) {
+                changes.push({ path, value });
+            }
+        }
+        if (changes.length > 0) {
+            this.notifyChanges(changes);
+            if (!untracked(this.root.store) && store.getSnapshot() !== prev) {
+                this.root.emitStateChange(changes);
+            }
+        }
+    }
+    /** Return the full state object (non-reactive read). */
+    getSnapshot() {
+        return untracked(this.currentStore).getSnapshot();
+    }
+    /**
+     * Register a listener called with the list of changed paths whenever state
+     * is written through this service (element `watch` fields rely on this).
+     * Returns an unsubscribe function.
+     */
+    subscribeChanges(listener) {
+        this.changeListeners.add(listener);
+        return () => {
+            this.changeListeners.delete(listener);
+        };
+    }
+    notifyChanges(changes) {
+        for (const listener of this.changeListeners) {
+            listener(changes);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderStateService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderStateService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+/**
+ * Inject the state store of the nearest `<json-render>` renderer.
+ * Must be called from within the renderer's subtree (e.g. a catalog
+ * component) or a component that provides {@link JsonRenderStateService}.
+ */
+function injectStateStore() {
+    return inject(JsonRenderStateService);
+}
+/** Reactive read of a state value by JSON Pointer path. */
+function injectStateValue(path) {
+    const store = injectStateStore();
+    const getPath = typeof path === 'function' ? path : () => path;
+    return computed(() => getByPath(store.state(), getPath()));
+}
+/**
+ * Reactive two-way binding to a state path: a value signal plus a setter
+ * that writes back to the same path.
+ */
+function injectStateBinding(path) {
+    const store = injectStateStore();
+    const getPath = typeof path === 'function' ? path : () => path;
+    return {
+        value: computed(() => getByPath(store.state(), getPath())),
+        set: (value) => store.set(getPath(), value),
+    };
+}
+/**
+ * Two-way bound prop helper for catalog components, mirroring `useBoundProp`
+ * from the other renderers: the value comes from the already-resolved prop,
+ * and the setter writes back to the bound state path (no-op if not bound).
+ *
+ * @example
+ * ```ts
+ * const ctx = injectRenderContext<{ value?: string }>();
+ * const bound = injectBoundProp<string>(
+ *   () => ctx.props().value,
+ *   () => ctx.bindings()?.['value'],
+ * );
+ * // template: <input [value]="bound.value() ?? ''" (input)="bound.set($any($event.target).value)" />
+ * ```
+ */
+function injectBoundProp(propValue, bindingPath) {
+    const store = injectStateStore();
+    return {
+        value: computed(propValue),
+        set: (value) => {
+            const path = bindingPath();
+            if (path)
+                store.set(path, value);
+        },
+    };
+}
+
+function dynamicArgsEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length)
+        return false;
+    for (const key of keysA) {
+        const va = a[key];
+        const vb = b[key];
+        if (va === vb)
+            continue;
+        if (typeof va === 'object' &&
+            va !== null &&
+            typeof vb === 'object' &&
+            vb !== null) {
+            const sa = va['$state'];
+            const sb = vb['$state'];
+            if (typeof sa === 'string' && sa === sb)
+                continue;
+        }
+        return false;
+    }
+    return true;
+}
+function validationConfigEqual(a, b) {
+    if (a === b)
+        return true;
+    if (a.validateOn !== b.validateOn)
+        return false;
+    const ac = a.checks ?? [];
+    const bc = b.checks ?? [];
+    if (ac.length !== bc.length)
+        return false;
+    for (let i = 0; i < ac.length; i++) {
+        const ca = ac[i];
+        const cb = bc[i];
+        if (ca.type !== cb.type)
+            return false;
+        if (ca.message !== cb.message)
+            return false;
+        if (!dynamicArgsEqual(ca.args, cb.args))
+            return false;
+    }
+    return true;
+}
+/**
+ * Form validation state of a `<json-render>` subtree. Fields register their
+ * {@link ValidationConfig}; the built-in `validateForm` action validates all
+ * registered fields and writes the result to state.
+ */
+class JsonRenderValidationService {
+    root = inject(JsonRenderRootContext);
+    state = inject(JsonRenderStateService);
+    _fieldStates = signal({}, ...(ngDevMode ? [{ debugName: "_fieldStates" }] : /* istanbul ignore next */ []));
+    _fieldConfigs = signal({}, ...(ngDevMode ? [{ debugName: "_fieldConfigs" }] : /* istanbul ignore next */ []));
+    /** Validation state per registered field path. */
+    fieldStates = this._fieldStates.asReadonly();
+    get customFunctions() {
+        return untracked(this.root.validationFunctions) ?? {};
+    }
+    /** Register (or update) a field's validation config. */
+    registerField(path, config) {
+        const prev = untracked(this._fieldConfigs);
+        const existing = prev[path];
+        if (existing && validationConfigEqual(existing, config))
+            return;
+        this._fieldConfigs.set({ ...prev, [path]: config });
+    }
+    /** Validate a single field and record the result. */
+    validate(path, config) {
+        const currentState = this.state.getSnapshot();
+        const segments = path.split('/').filter(Boolean);
+        let value = currentState;
+        for (const seg of segments) {
+            if (value != null && typeof value === 'object') {
+                value = value[seg];
+            }
+            else {
+                value = undefined;
+                break;
+            }
+        }
+        const result = runValidation(config, {
+            value,
+            stateModel: currentState,
+            customFunctions: this.customFunctions,
+        });
+        const prev = untracked(this._fieldStates);
+        this._fieldStates.set({
+            ...prev,
+            [path]: {
+                touched: prev[path]?.touched ?? true,
+                validated: true,
+                result,
+            },
+        });
+        return result;
+    }
+    /** Mark a field as touched. */
+    touch(path) {
+        const prev = untracked(this._fieldStates);
+        this._fieldStates.set({
+            ...prev,
+            [path]: {
+                ...prev[path],
+                touched: true,
+                validated: prev[path]?.validated ?? false,
+                result: prev[path]?.result ?? null,
+            },
+        });
+    }
+    /** Clear a field's validation state. */
+    clear(path) {
+        const { [path]: _, ...rest } = untracked(this._fieldStates);
+        this._fieldStates.set(rest);
+    }
+    /** Validate all registered fields. Returns whether all are valid. */
+    validateAll() {
+        let allValid = true;
+        for (const [path, config] of Object.entries(untracked(this._fieldConfigs))) {
+            const result = this.validate(path, config);
+            if (!result.valid) {
+                allValid = false;
+            }
+        }
+        return allValid;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderValidationService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderValidationService, decorators: [{
+            type: Injectable
+        }] });
+/** Inject the validation service of the nearest `<json-render>` renderer. */
+function injectValidation() {
+    return inject(JsonRenderValidationService);
+}
+/**
+ * Field-level validation helper for catalog input components: registers the
+ * config and exposes the field's validation state as signals.
+ */
+function injectFieldValidation(path, config) {
+    const validation = injectValidation();
+    const getPath = typeof path === 'function' ? path : () => path;
+    const getConfig = typeof config === 'function' ? config : () => config;
+    effect(() => {
+        const p = getPath();
+        const c = getConfig();
+        if (p && c) {
+            validation.registerField(p, c);
+        }
+    });
+    const state = computed(() => {
+        const current = validation.fieldStates()[getPath()];
+        return current ?? { touched: false, validated: false, result: null };
+    }, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    return {
+        state,
+        validate: () => validation.validate(getPath(), getConfig() ?? { checks: [] }),
+        touch: () => validation.touch(getPath()),
+        clear: () => validation.clear(getPath()),
+        errors: computed(() => state().result?.errors ?? []),
+        isValid: computed(() => state().result?.valid ?? true),
+    };
+}
+
+let idCounter = 0;
+function generateUniqueId() {
+    idCounter += 1;
+    return `${Date.now()}-${idCounter}`;
+}
+function deepResolveValue(value, get) {
+    if (value === null || value === undefined)
+        return value;
+    if (value === '$id') {
+        return generateUniqueId();
+    }
+    if (typeof value === 'object' && !Array.isArray(value)) {
+        const obj = value;
+        const keys = Object.keys(obj);
+        if (keys.length === 1 && typeof obj['$state'] === 'string') {
+            return get(obj['$state']);
+        }
+        if (keys.length === 1 && '$id' in obj) {
+            return generateUniqueId();
+        }
+    }
+    if (Array.isArray(value)) {
+        return value.map((item) => deepResolveValue(item, get));
+    }
+    if (typeof value === 'object') {
+        const resolved = {};
+        for (const [key, val] of Object.entries(value)) {
+            resolved[key] = deepResolveValue(val, get);
+        }
+        return resolved;
+    }
+    return value;
+}
+/**
+ * Action dispatcher of a `<json-render>` subtree.
+ *
+ * Executes {@link ActionBinding}s: built-in actions (`setState`, `pushState`,
+ * `removeState`, `push`, `pop`, `validateForm`) are handled internally;
+ * everything else is routed to the host-provided `handlers` (or the
+ * `onAction` catch-all), honoring `confirm`, `onSuccess`, and `onError`.
+ */
+class JsonRenderActionsService {
+    root = inject(JsonRenderRootContext);
+    state = inject(JsonRenderStateService);
+    validation = inject(JsonRenderValidationService, {
+        optional: true,
+    });
+    extraHandlers = signal({}, ...(ngDevMode ? [{ debugName: "extraHandlers" }] : /* istanbul ignore next */ []));
+    _loadingActions = signal(new Set(), ...(ngDevMode ? [{ debugName: "_loadingActions" }] : /* istanbul ignore next */ []));
+    _pendingConfirmation = signal(null, ...(ngDevMode ? [{ debugName: "_pendingConfirmation" }] : /* istanbul ignore next */ []));
+    /** Names of actions currently executing. */
+    loadingActions = this._loadingActions.asReadonly();
+    /** The confirmation currently awaiting user input, if any. */
+    pendingConfirmation = this._pendingConfirmation.asReadonly();
+    /** All registered handlers (host handlers + runtime registrations). */
+    get handlers() {
+        return {
+            ...(untracked(this.root.handlers) ?? {}),
+            ...untracked(this.extraHandlers),
+        };
+    }
+    /** Register an additional action handler at runtime. */
+    registerHandler(name, handler) {
+        this.extraHandlers.set({
+            ...untracked(this.extraHandlers),
+            [name]: handler,
+        });
+    }
+    /** Execute an action binding. */
+    async execute(binding) {
+        const resolved = resolveAction(binding, this.state.getSnapshot());
+        const get = (path) => this.state.get(path);
+        const set = (path, value) => this.state.set(path, value);
+        // --- devtools / observer hooks ---
+        const dispatchId = nextActionDispatchId();
+        const dispatchedAt = Date.now();
+        notifyActionDispatch({
+            id: dispatchId,
+            name: resolved.action,
+            params: resolved.params,
+            at: dispatchedAt,
+        });
+        let ok = true;
+        let error = undefined;
+        try {
+            if (resolved.action === 'setState' && resolved.params) {
+                const statePath = resolved.params['statePath'];
+                const value = resolved.params['value'];
+                if (statePath) {
+                    set(statePath, value);
+                }
+                return;
+            }
+            if (resolved.action === 'pushState' && resolved.params) {
+                const statePath = resolved.params['statePath'];
+                const rawValue = resolved.params['value'];
+                if (statePath) {
+                    const resolvedValue = deepResolveValue(rawValue, get);
+                    const arr = get(statePath) ?? [];
+                    set(statePath, [...arr, resolvedValue]);
+                    const clearStatePath = resolved.params['clearStatePath'];
+                    if (clearStatePath) {
+                        set(clearStatePath, '');
+                    }
+                }
+                return;
+            }
+            if (resolved.action === 'removeState' && resolved.params) {
+                const statePath = resolved.params['statePath'];
+                const index = resolved.params['index'];
+                if (statePath !== undefined && index !== undefined) {
+                    const arr = get(statePath) ?? [];
+                    set(statePath, arr.filter((_, i) => i !== index));
+                }
+                return;
+            }
+            if (resolved.action === 'push' && resolved.params) {
+                const screen = resolved.params['screen'];
+                if (screen) {
+                    const currentScreen = get('/currentScreen');
+                    const navStack = get('/navStack') ?? [];
+                    if (currentScreen) {
+                        set('/navStack', [...navStack, currentScreen]);
+                    }
+                    else {
+                        set('/navStack', [...navStack, '']);
+                    }
+                    set('/currentScreen', screen);
+                }
+                return;
+            }
+            if (resolved.action === 'pop') {
+                const navStack = get('/navStack') ?? [];
+                if (navStack.length > 0) {
+                    const previousScreen = navStack[navStack.length - 1];
+                    set('/navStack', navStack.slice(0, -1));
+                    if (previousScreen) {
+                        set('/currentScreen', previousScreen);
+                    }
+                    else {
+                        set('/currentScreen', undefined);
+                    }
+                }
+                return;
+            }
+            if (resolved.action === 'validateForm') {
+                if (!this.validation) {
+                    console.warn('validateForm action was dispatched but no JsonRenderValidationService is available.');
+                    return;
+                }
+                const valid = this.validation.validateAll();
+                const errors = {};
+                for (const [path, fs] of Object.entries(untracked(this.validation.fieldStates))) {
+                    if (fs.result && !fs.result.valid) {
+                        errors[path] = fs.result.errors;
+                    }
+                }
+                const statePath = resolved.params?.['statePath'] || '/formValidation';
+                set(statePath, { valid, errors });
+                return;
+            }
+            const handler = this.lookupHandler(resolved.action);
+            if (!handler) {
+                console.warn(`No handler registered for action: ${resolved.action}`);
+                return;
+            }
+            if (resolved.confirm) {
+                return new Promise((resolve, reject) => {
+                    this._pendingConfirmation.set({
+                        action: resolved,
+                        handler,
+                        resolve: () => {
+                            this._pendingConfirmation.set(null);
+                            resolve();
+                        },
+                        reject: () => {
+                            this._pendingConfirmation.set(null);
+                            reject(new Error('Action cancelled'));
+                        },
+                    });
+                }).then(() => this.runHandler(resolved, handler));
+            }
+            await this.runHandler(resolved, handler);
+        }
+        catch (err) {
+            ok = false;
+            error = err;
+            throw err;
+        }
+        finally {
+            const now = Date.now();
+            notifyActionSettle({
+                id: dispatchId,
+                name: resolved.action,
+                ok,
+                at: now,
+                durationMs: now - dispatchedAt,
+                error,
+            });
+        }
+    }
+    /** Confirm the pending confirmation dialog. */
+    confirm() {
+        untracked(this._pendingConfirmation)?.resolve();
+    }
+    /** Cancel the pending confirmation dialog. */
+    cancel() {
+        untracked(this._pendingConfirmation)?.reject();
+    }
+    lookupHandler(name) {
+        const direct = this.handlers[name];
+        if (direct)
+            return direct;
+        // Catch-all: route unknown actions to the `onAction` input when provided.
+        const onAction = untracked(this.root.onAction);
+        if (onAction) {
+            return (params) => onAction(name, params);
+        }
+        return undefined;
+    }
+    async runHandler(resolved, handler) {
+        this._loadingActions.set(new Set(untracked(this._loadingActions)).add(resolved.action));
+        try {
+            await executeAction({
+                action: resolved,
+                handler,
+                setState: (path, value) => this.state.set(path, value),
+                navigate: untracked(this.root.navigate) ?? undefined,
+                executeAction: async (binding) => {
+                    await this.execute(binding);
+                },
+            });
+        }
+        finally {
+            const next = new Set(untracked(this._loadingActions));
+            next.delete(resolved.action);
+            this._loadingActions.set(next);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderActionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderActionsService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderActionsService, decorators: [{
+            type: Injectable
+        }] });
+/** Inject the actions service of the nearest `<json-render>` renderer. */
+function injectActions() {
+    return inject(JsonRenderActionsService);
+}
+/**
+ * Convenience helper for executing a fixed action binding, mirroring
+ * `useAction` from the other renderers.
+ */
+function injectAction(binding) {
+    const actions = injectActions();
+    return {
+        execute: () => actions.execute(binding),
+        isLoading: computed(() => actions.loadingActions().has(binding.action)),
+    };
+}
+
+/**
+ * Default confirmation dialog shown for action bindings with a `confirm`
+ * field. Rendered automatically by `<json-render>`; can also be used
+ * standalone with a custom action flow.
+ */
+class JrConfirmDialog {
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    confirmed = output();
+    cancelled = output();
+    isDanger = computed(() => this.config().variant === 'danger', ...(ngDevMode ? [{ debugName: "isDanger" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: JrConfirmDialog, isStandalone: true, selector: "jr-confirm-dialog", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, ngImport: i0, template: `
+    <div
+      style="position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 50"
+      (click)="cancelled.emit()"
+    >
+      <div
+        style="background-color: white; border-radius: 8px; padding: 24px; max-width: 400px; width: 100%; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1)"
+        (click)="$event.stopPropagation()"
+      >
+        <h3 style="margin: 0 0 8px 0; font-size: 18px; font-weight: 600">
+          {{ config().title }}
+        </h3>
+        <p style="margin: 0 0 24px 0; color: #6b7280">{{ config().message }}</p>
+        <div style="display: flex; gap: 12px; justify-content: flex-end">
+          <button
+            type="button"
+            (click)="cancelled.emit()"
+            style="padding: 8px 16px; border-radius: 6px; border: 1px solid #d1d5db; background-color: white; cursor: pointer"
+          >
+            {{ config().cancelLabel ?? 'Cancel' }}
+          </button>
+          <button
+            type="button"
+            (click)="confirmed.emit()"
+            [style.background-color]="isDanger() ? '#dc2626' : '#3b82f6'"
+            style="padding: 8px 16px; border-radius: 6px; border: none; color: white; cursor: pointer"
+          >
+            {{ config().confirmLabel ?? 'Confirm' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrConfirmDialog, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-confirm-dialog',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div
+      style="position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 50"
+      (click)="cancelled.emit()"
+    >
+      <div
+        style="background-color: white; border-radius: 8px; padding: 24px; max-width: 400px; width: 100%; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1)"
+        (click)="$event.stopPropagation()"
+      >
+        <h3 style="margin: 0 0 8px 0; font-size: 18px; font-weight: 600">
+          {{ config().title }}
+        </h3>
+        <p style="margin: 0 0 24px 0; color: #6b7280">{{ config().message }}</p>
+        <div style="display: flex; gap: 12px; justify-content: flex-end">
+          <button
+            type="button"
+            (click)="cancelled.emit()"
+            style="padding: 8px 16px; border-radius: 6px; border: 1px solid #d1d5db; background-color: white; cursor: pointer"
+          >
+            {{ config().cancelLabel ?? 'Cancel' }}
+          </button>
+          <button
+            type="button"
+            (click)="confirmed.emit()"
+            [style.background-color]="isDanger() ? '#dc2626' : '#3b82f6'"
+            style="padding: 8px 16px; border-radius: 6px; border: none; color: white; cursor: pointer"
+          >
+            {{ config().confirmLabel ?? 'Confirm' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
+/**
+ * Reactive mirror of the json-render devtools-active flag. When active, the
+ * renderer wraps each element with a `data-jr-key` attribute for the picker.
+ */
+function injectDevtoolsActive() {
+    const active = signal(isDevtoolsActive(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    const unsubscribe = subscribeDevtoolsActive(() => active.set(isDevtoolsActive()));
+    inject(DestroyRef).onDestroy(unsubscribe);
+    return active.asReadonly();
+}
+
+/**
+ * The render context of the element currently being rendered.
+ * Provided by the renderer for every catalog component instance.
+ */
+const RENDER_CONTEXT = new InjectionToken('ngx-json-render RENDER_CONTEXT');
+/**
+ * The current repeat scope. Present only for elements rendered inside a
+ * `repeat` block.
+ */
+const REPEAT_SCOPE = new InjectionToken('ngx-json-render REPEAT_SCOPE');
+/**
+ * Inject the render context inside a catalog component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   selector: 'app-button',
+ *   template: `<button (click)="ctx.emit('press')">{{ ctx.props().label }}</button>`,
+ * })
+ * export class ButtonComponent {
+ *   readonly ctx = injectRenderContext<{ label: string }>();
+ * }
+ * ```
+ */
+function injectRenderContext() {
+    const ctx = inject(RENDER_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error('injectRenderContext() must be used inside a component rendered by <json-render>');
+    }
+    return ctx;
+}
+/**
+ * Inject the current repeat scope, or `null` when the component is not
+ * rendered inside a `repeat` block.
+ */
+function injectRepeatScope() {
+    return inject(REPEAT_SCOPE, { optional: true });
+}
+
+const warnedSlots = new Set();
+/**
+ * Renders a single spec element: evaluates visibility, resolves prop
+ * expressions against the state model, wires event/watch bindings, and
+ * instantiates the catalog component with a {@link RenderContext} injector.
+ *
+ * @internal Used by `<json-render>` and `<jr-children>`.
+ */
+class JrElement {
+    elementKey = input.required(...(ngDevMode ? [{ debugName: "elementKey" }] : /* istanbul ignore next */ []));
+    root = inject(JsonRenderRootContext);
+    state = inject(JsonRenderStateService);
+    actions = inject(JsonRenderActionsService);
+    repeatScope = inject(REPEAT_SCOPE, { optional: true });
+    devtoolsActive = injectDevtoolsActive();
+    /** The raw (unresolved) element from the spec. */
+    rawElement = computed(() => this.root.spec()?.elements?.[this.elementKey()], ...(ngDevMode ? [{ debugName: "rawElement" }] : /* istanbul ignore next */ []));
+    /** Prop/visibility resolution context (state + repeat scope + extensions). */
+    resolutionCtx = computed(() => {
+        const scope = this.repeatScope;
+        return {
+            stateModel: this.state.state(),
+            ...(scope
+                ? {
+                    repeatItem: scope.item(),
+                    repeatIndex: scope.index(),
+                    repeatBasePath: scope.basePath(),
+                }
+                : {}),
+            functions: this.root.functions() ?? {},
+            directives: this.root.directiveRegistry(),
+        };
+    }, ...(ngDevMode ? [{ debugName: "resolutionCtx" }] : /* istanbul ignore next */ []));
+    visible = computed(() => {
+        const el = this.rawElement();
+        if (!el || el.visible === undefined)
+            return true;
+        return evaluateVisibility(el.visible, this.resolutionCtx());
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /** The element with all prop expressions resolved. */
+    resolvedElement = computed(() => {
+        const el = this.rawElement();
+        if (!el)
+            return undefined;
+        return { ...el, props: resolveElementProps(el.props ?? {}, this.resolutionCtx()) };
+    }, ...(ngDevMode ? [{ debugName: "resolvedElement" }] : /* istanbul ignore next */ []));
+    /** Two-way binding paths ($bindState / $bindItem) by prop name. */
+    bindings = computed(() => {
+        const el = this.rawElement();
+        return el ? resolveBindings(el.props ?? {}, this.resolutionCtx()) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "bindings" }] : /* istanbul ignore next */ []));
+    entry = computed(() => {
+        const el = this.rawElement();
+        return el ? this.root.resolveEntry(el.type) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "entry" }] : /* istanbul ignore next */ []));
+    component = computed(() => this.entry()?.component ?? null, ...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
+    devtoolsKey = computed(() => this.devtoolsActive() ? this.elementKey() : null, ...(ngDevMode ? [{ debugName: "devtoolsKey" }] : /* istanbul ignore next */ []));
+    renderCtx = {
+        element: this.resolvedElement,
+        props: computed(() => this.resolvedElement()?.props ?? {}),
+        emit: (event) => void this.emitEvent(event),
+        on: (event) => this.eventHandle(event),
+        bindings: this.bindings,
+        loading: computed(() => this.root.loading()),
+        setBound: (prop, value) => {
+            const path = untracked(this.bindings)?.[prop];
+            if (path) {
+                this.state.set(path, value);
+            }
+            else if (isDevMode()) {
+                console.warn(`[ngx-json-render] setBound("${prop}"): prop has no $bindState/$bindItem binding`);
+            }
+        },
+    };
+    outletInjector = Injector.create({
+        providers: [{ provide: RENDER_CONTEXT, useValue: this.renderCtx }],
+        parent: inject(Injector),
+    });
+    constructor() {
+        // Warn (once per type) about unknown component types.
+        const warnedTypes = new Set();
+        effect(() => {
+            const el = this.rawElement();
+            if (!el || this.entry() || warnedTypes.has(el.type))
+                return;
+            warnedTypes.add(el.type);
+            console.warn(`No renderer for component type: ${el.type}`);
+        });
+        // Warn about unknown / default slots when the registry carries metadata.
+        effect(() => {
+            const el = this.rawElement();
+            const meta = this.entry();
+            if (!el?.slots || !meta?.slots)
+                return;
+            const available = new Set(meta.slots);
+            for (const slotName of Object.keys(el.slots)) {
+                const warnKey = `${el.type}:${slotName}`;
+                if (warnedSlots.has(warnKey))
+                    continue;
+                if (slotName === 'default') {
+                    warnedSlots.add(warnKey);
+                    console.warn(`[json-render] Component "${el.type}" uses slots.default. Use "children" for default slot content.`);
+                }
+                else if (!available.has(slotName)) {
+                    warnedSlots.add(warnKey);
+                    console.warn(`[json-render] Unknown slot "${slotName}" on component "${el.type}". Available slots: ${meta.slots.join(', ')}`);
+                }
+            }
+        });
+        // Watch effect: fire actions when watched state paths change.
+        effect((onCleanup) => {
+            const watchConfig = this.rawElement()?.watch;
+            if (!watchConfig)
+                return;
+            const paths = Object.keys(watchConfig);
+            if (paths.length === 0)
+                return;
+            const unsubscribe = this.state.subscribeChanges((changes) => {
+                const changedPaths = new Set(changes.map((change) => change.path));
+                void (async () => {
+                    for (const path of paths) {
+                        if (!changedPaths.has(path))
+                            continue;
+                        const binding = watchConfig[path];
+                        if (!binding)
+                            continue;
+                        const bindings = Array.isArray(binding) ? binding : [binding];
+                        for (const b of bindings) {
+                            if (!b.params) {
+                                await this.actions.execute(b);
+                                continue;
+                            }
+                            const liveCtx = this.liveResolutionCtx();
+                            const resolved = {};
+                            for (const [key, val] of Object.entries(b.params)) {
+                                resolved[key] = resolveActionParam(val, liveCtx);
+                            }
+                            await this.actions.execute({ ...b, params: resolved });
+                        }
+                    }
+                })().catch(console.error);
+            });
+            onCleanup(unsubscribe);
+        });
+    }
+    /**
+     * Resolution context with a live state snapshot, so `$state` references in
+     * later actions of a chain see mutations from earlier ones.
+     */
+    liveResolutionCtx() {
+        return {
+            ...untracked(this.resolutionCtx),
+            stateModel: this.state.getSnapshot(),
+        };
+    }
+    async emitEvent(eventName) {
+        const el = untracked(this.rawElement);
+        const binding = el?.on?.[eventName];
+        if (!binding)
+            return;
+        const actionBindings = Array.isArray(binding) ? binding : [binding];
+        for (const b of actionBindings) {
+            if (!b.params) {
+                await this.actions.execute(b);
+                continue;
+            }
+            const liveCtx = this.liveResolutionCtx();
+            const resolved = {};
+            for (const [key, val] of Object.entries(b.params)) {
+                resolved[key] = resolveActionParam(val, liveCtx);
+            }
+            await this.actions.execute({ ...b, params: resolved });
+        }
+    }
+    eventHandle(eventName) {
+        const el = this.rawElement();
+        const binding = el?.on?.[eventName];
+        if (!binding) {
+            return { emit: () => { }, shouldPreventDefault: false, bound: false };
+        }
+        const actionBindings = Array.isArray(binding) ? binding : [binding];
+        return {
+            emit: () => void this.emitEvent(eventName),
+            shouldPreventDefault: actionBindings.some((b) => b.preventDefault),
+            bound: true,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: JrElement, isStandalone: true, selector: "jr-element", inputs: { elementKey: { classPropertyName: "elementKey", publicName: "elementKey", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (rawElement() && visible() && component()) {
+      @if (devtoolsKey(); as dk) {
+        <span [attr.data-jr-key]="dk" style="display: contents">
+          <ng-container *ngComponentOutlet="component(); injector: outletInjector" />
+        </span>
+      } @else {
+        <ng-container *ngComponentOutlet="component(); injector: outletInjector" />
+      }
+    }
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrElement, decorators: [{
+            type: Component,
+            args: [{ selector: 'jr-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet], template: `
+    @if (rawElement() && visible() && component()) {
+      @if (devtoolsKey(); as dk) {
+        <span [attr.data-jr-key]="dk" style="display: contents">
+          <ng-container *ngComponentOutlet="component(); injector: outletInjector" />
+        </span>
+      } @else {
+        <ng-container *ngComponentOutlet="component(); injector: outletInjector" />
+      }
+    }
+  `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { elementKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementKey", required: true }] }] } });
+
+/**
+ * Renders a json-render {@link Spec} using a registry of Angular components.
+ *
+ * The renderer owns the state store, action dispatcher, and validation state
+ * of its subtree (all injectable from catalog components). Pass an external
+ * {@link StateStore} via `store` for controlled mode or to share state across
+ * renderers.
+ *
+ * @example
+ * ```html
+ * <json-render
+ *   [spec]="spec()"
+ *   [registry]="registry"
+ *   [handlers]="handlers"
+ *   [loading]="isStreaming()"
+ *   (stateChange)="onStateChange($event)"
+ * />
+ * ```
+ */
+class JsonRenderer {
+    /** The UI spec to render (may be partial while streaming). */
+    spec = input.required(...(ngDevMode ? [{ debugName: "spec" }] : /* istanbul ignore next */ []));
+    /** Component registry mapping catalog type names to Angular components. */
+    registry = input.required(...(ngDevMode ? [{ debugName: "registry" }] : /* istanbul ignore next */ []));
+    /** Whether the spec is currently loading/streaming. */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Fallback component for unknown types. */
+    fallback = input(null, ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+    /**
+     * Initial state model (uncontrolled mode). Defaults to `spec.state`.
+     * Ignored when `store` is provided.
+     */
+    state = input(undefined, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** External state store (controlled mode). */
+    store = input(null, ...(ngDevMode ? [{ debugName: "store" }] : /* istanbul ignore next */ []));
+    /** Action handlers by action name. */
+    handlers = input(undefined, ...(ngDevMode ? [{ debugName: "handlers" }] : /* istanbul ignore next */ []));
+    /** Catch-all action handler for actions without a dedicated handler. */
+    onAction = input(null, ...(ngDevMode ? [{ debugName: "onAction" }] : /* istanbul ignore next */ []));
+    /** Navigation function used by `onSuccess: { navigate }` handlers. */
+    navigate = input(null, ...(ngDevMode ? [{ debugName: "navigate" }] : /* istanbul ignore next */ []));
+    /** Custom validation functions. */
+    validationFunctions = input(undefined, ...(ngDevMode ? [{ debugName: "validationFunctions" }] : /* istanbul ignore next */ []));
+    /** Named functions for `$computed` expressions in props. */
+    functions = input(undefined, ...(ngDevMode ? [{ debugName: "functions" }] : /* istanbul ignore next */ []));
+    /** Custom directives for user-defined `$`-prefixed dynamic values. */
+    directives = input(undefined, ...(ngDevMode ? [{ debugName: "directives" }] : /* istanbul ignore next */ []));
+    /** Emits state changes in uncontrolled mode. */
+    stateChange = output();
+    /** The state store of this renderer (also injectable in the subtree). */
+    stateStore;
+    /** The action dispatcher of this renderer. */
+    actions;
+    constructor() {
+        const root = inject(JsonRenderRootContext);
+        root.spec = this.spec;
+        root.registry = this.registry;
+        root.loading = this.loading;
+        root.fallback = this.fallback;
+        root.store = this.store;
+        root.initialState = computed(() => this.state() ?? this.spec()?.state ?? {}, ...(ngDevMode ? [{ debugName: "initialState" }] : /* istanbul ignore next */ []));
+        root.handlers = this.handlers;
+        root.onAction = this.onAction;
+        root.navigate = this.navigate;
+        root.validationFunctions = this.validationFunctions;
+        root.functions = this.functions;
+        root.directiveRegistry = computed(() => {
+            const definitions = this.directives();
+            return definitions ? createDirectiveRegistry(definitions) : undefined;
+        }, ...(ngDevMode ? [{ debugName: "directiveRegistry" }] : /* istanbul ignore next */ []));
+        root.emitStateChange = (changes) => this.stateChange.emit(changes);
+        // Instantiate the subtree services now that the root context is wired.
+        this.stateStore = inject(JsonRenderStateService);
+        inject(JsonRenderValidationService);
+        this.actions = inject(JsonRenderActionsService);
+    }
+    rootKey = computed(() => {
+        const spec = this.spec();
+        return spec?.root && spec.elements?.[spec.root] ? spec.root : null;
+    }, ...(ngDevMode ? [{ debugName: "rootKey" }] : /* istanbul ignore next */ []));
+    pendingConfirm = computed(() => this.actions.pendingConfirmation()?.action.confirm ?? null, ...(ngDevMode ? [{ debugName: "pendingConfirm" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: JsonRenderer, isStandalone: true, selector: "json-render", inputs: { spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, registry: { classPropertyName: "registry", publicName: "registry", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, handlers: { classPropertyName: "handlers", publicName: "handlers", isSignal: true, isRequired: false, transformFunction: null }, onAction: { classPropertyName: "onAction", publicName: "onAction", isSignal: true, isRequired: false, transformFunction: null }, navigate: { classPropertyName: "navigate", publicName: "navigate", isSignal: true, isRequired: false, transformFunction: null }, validationFunctions: { classPropertyName: "validationFunctions", publicName: "validationFunctions", isSignal: true, isRequired: false, transformFunction: null }, functions: { classPropertyName: "functions", publicName: "functions", isSignal: true, isRequired: false, transformFunction: null }, directives: { classPropertyName: "directives", publicName: "directives", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange" }, providers: [
+            JsonRenderRootContext,
+            JsonRenderStateService,
+            JsonRenderValidationService,
+            JsonRenderActionsService,
+        ], ngImport: i0, template: `
+    @if (rootKey(); as key) {
+      <jr-element [elementKey]="key" />
+    }
+    @if (pendingConfirm(); as confirm) {
+      <jr-confirm-dialog
+        [config]="confirm"
+        (confirmed)="actions.confirm()"
+        (cancelled)="actions.cancel()"
+      />
+    }
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: JrElement, selector: "jr-element", inputs: ["elementKey"] }, { kind: "component", type: JrConfirmDialog, selector: "jr-confirm-dialog", inputs: ["config"], outputs: ["confirmed", "cancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'json-render', changeDetection: ChangeDetectionStrategy.OnPush, imports: [JrElement, JrConfirmDialog], providers: [
+                        JsonRenderRootContext,
+                        JsonRenderStateService,
+                        JsonRenderValidationService,
+                        JsonRenderActionsService,
+                    ], template: `
+    @if (rootKey(); as key) {
+      <jr-element [elementKey]="key" />
+    }
+    @if (pendingConfirm(); as confirm) {
+      <jr-confirm-dialog
+        [config]="confirm"
+        (confirmed)="actions.confirm()"
+        (cancelled)="actions.cancel()"
+      />
+    }
+  `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], registry: [{ type: i0.Input, args: [{ isSignal: true, alias: "registry", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: false }] }], handlers: [{ type: i0.Input, args: [{ isSignal: true, alias: "handlers", required: false }] }], onAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "onAction", required: false }] }], navigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigate", required: false }] }], validationFunctions: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationFunctions", required: false }] }], functions: [{ type: i0.Input, args: [{ isSignal: true, alias: "functions", required: false }] }], directives: [{ type: i0.Input, args: [{ isSignal: true, alias: "directives", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }] } });
+
+/**
+ * Provides the repeat scope (item, index, absolute base path) to the elements
+ * rendered inside a `repeat` block.
+ *
+ * @internal Used by `<jr-children>`; not intended for direct use.
+ */
+class JrRepeatScope {
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    index = input.required(...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    basePath = input.required(...(ngDevMode ? [{ debugName: "basePath" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrRepeatScope, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: JrRepeatScope, isStandalone: true, selector: "jr-repeat-scope", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            { provide: REPEAT_SCOPE, useExisting: forwardRef(() => JrRepeatScope) },
+        ], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrRepeatScope, decorators: [{
+            type: Component,
+            args: [{ selector: 'jr-repeat-scope', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: REPEAT_SCOPE, useExisting: forwardRef(() => JrRepeatScope) },
+                    ], template: '<ng-content />', styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], basePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "basePath", required: true }] }] } });
+
+/**
+ * Renders the children of the current element. Place it inside a catalog
+ * component's template where nested content should appear — like a
+ * `<router-outlet>` for the spec tree.
+ *
+ * - Default (no `slot`): renders `element.children`, honoring the element's
+ *   `repeat` field (one pass per item of the referenced state array, with the
+ *   proper repeat scope for `$item` / `$index` / `$bindItem` expressions).
+ * - With `slot`: renders the element keys of `element.slots[slot]`.
+ *
+ * @example
+ * ```html
+ * <div class="card">
+ *   <h3>{{ ctx.props().title }}</h3>
+ *   <jr-children />
+ * </div>
+ * ```
+ */
+class JrChildren {
+    /** Named slot to render instead of the default children. */
+    slot = input(null, ...(ngDevMode ? [{ debugName: "slot" }] : /* istanbul ignore next */ []));
+    ctx = injectRenderContext();
+    root = inject(JsonRenderRootContext);
+    state = inject(JsonRenderStateService);
+    // The repeat scope enclosing the host element (scopes created by this
+    // element's own repeat live below, in the template).
+    parentScope = inject(REPEAT_SCOPE, { optional: true });
+    childKeys = computed(() => {
+        const el = this.ctx.element();
+        if (!el)
+            return [];
+        const slot = this.slot();
+        if (slot)
+            return el.slots?.[slot] ?? [];
+        return el.children ?? [];
+    }, ...(ngDevMode ? [{ debugName: "childKeys" }] : /* istanbul ignore next */ []));
+    repeat = computed(() => {
+        if (this.slot())
+            return undefined;
+        return this.ctx.element()?.repeat;
+    }, ...(ngDevMode ? [{ debugName: "repeat" }] : /* istanbul ignore next */ []));
+    repeatBasePath = computed(() => {
+        const rep = this.repeat();
+        if (!rep)
+            return undefined;
+        const resolved = resolveRepeatStatePath(rep.statePath, this.parentScope?.basePath());
+        if (resolved === undefined) {
+            console.warn('[ngx-json-render] $item in repeat.statePath used outside of a repeat scope');
+        }
+        return resolved;
+    }, ...(ngDevMode ? [{ debugName: "repeatBasePath" }] : /* istanbul ignore next */ []));
+    repeatItems = computed(() => {
+        const basePath = this.repeatBasePath();
+        if (basePath === undefined)
+            return [];
+        return (getByPath(this.state.state(), basePath) ?? []);
+    }, ...(ngDevMode ? [{ debugName: "repeatItems" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Warn (once per key) about children referencing missing elements.
+        const warned = new Set();
+        effect(() => {
+            if (this.root.loading())
+                return;
+            const spec = this.root.spec();
+            if (!spec)
+                return;
+            for (const key of this.childKeys()) {
+                if (!spec.elements?.[key] && !warned.has(key)) {
+                    warned.add(key);
+                    console.warn(`[json-render] Missing element "${key}" referenced as child of "${untracked(this.ctx.element)?.type}". This element will not render.`);
+                }
+            }
+        });
+    }
+    itemPath(index) {
+        return resolveRepeatItemStatePath(this.repeatBasePath(), index);
+    }
+    trackItem(index, item) {
+        const rep = untracked(this.repeat);
+        if (rep?.key && typeof item === 'object' && item !== null) {
+            return item[rep.key] ?? index;
+        }
+        return index;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrChildren, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: JrChildren, isStandalone: true, selector: "jr-children", inputs: { slot: { classPropertyName: "slot", publicName: "slot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (repeat()) {
+      @for (item of repeatItems(); track trackItem($index, item)) {
+        <jr-repeat-scope
+          [item]="item"
+          [index]="$index"
+          [basePath]="itemPath($index)"
+        >
+          @for (key of childKeys(); track key) {
+            <jr-element [elementKey]="key" />
+          }
+        </jr-repeat-scope>
+      }
+    } @else {
+      @for (key of childKeys(); track key) {
+        <jr-element [elementKey]="key" />
+      }
+    }
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: JrElement, selector: "jr-element", inputs: ["elementKey"] }, { kind: "component", type: JrRepeatScope, selector: "jr-repeat-scope", inputs: ["item", "index", "basePath"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrChildren, decorators: [{
+            type: Component,
+            args: [{ selector: 'jr-children', changeDetection: ChangeDetectionStrategy.OnPush, imports: [JrElement, JrRepeatScope], template: `
+    @if (repeat()) {
+      @for (item of repeatItems(); track trackItem($index, item)) {
+        <jr-repeat-scope
+          [item]="item"
+          [index]="$index"
+          [basePath]="itemPath($index)"
+        >
+          @for (key of childKeys(); track key) {
+            <jr-element [elementKey]="key" />
+          }
+        </jr-repeat-scope>
+      }
+    } @else {
+      @for (key of childKeys(); track key) {
+        <jr-element [elementKey]="key" />
+      }
+    }
+  `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { slot: [{ type: i0.Input, args: [{ isSignal: true, alias: "slot", required: false }] }] } });
+
+/**
+ * Create a registry from a catalog with components and/or actions.
+ *
+ * Component keys are type-checked against the catalog, and slot metadata from
+ * the catalog is carried into the registry for dev-mode slot warnings.
+ *
+ * @example
+ * ```ts
+ * const { registry, handlers } = defineRegistry(catalog, {
+ *   components: { Card: CardComponent, Button: ButtonComponent },
+ *   actions: {
+ *     refresh: async (params, setState) => {
+ *       setState((prev) => ({ ...prev, refreshedAt: Date.now() }));
+ *     },
+ *   },
+ * });
+ * ```
+ */
+function defineRegistry(catalog, options) {
+    const catalogComponents = catalog.data?.components;
+    // Build the component registry, attaching slot metadata from the catalog.
+    const registry = {};
+    if (options.components) {
+        for (const [name, component] of Object.entries(options.components)) {
+            const entry = { component };
+            const slots = catalogComponents?.[name]?.slots;
+            if (slots)
+                entry.slots = slots;
+            registry[name] = entry;
+        }
+    }
+    // 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 };
+}
+/**
+ * Build a {@link SetState} (whole-state updater) on top of a path-based
+ * store. The updater's result is diffed against the previous state and only
+ * changed leaves are written, preserving fine-grained reactivity.
+ *
+ * Works with both a core {@link StateStore} and the renderer's injected
+ * `JsonRenderStateService`.
+ */
+function createStoreSetState(store) {
+    return (updater) => {
+        const prev = store.getSnapshot();
+        const next = updater(prev);
+        if (next === prev)
+            return;
+        const prevFlat = flattenToPointers(prev);
+        const nextFlat = flattenToPointers(next);
+        const allKeys = new Set([
+            ...Object.keys(prevFlat),
+            ...Object.keys(nextFlat),
+        ]);
+        const updates = {};
+        for (const key of allKeys) {
+            if (prevFlat[key] !== nextFlat[key]) {
+                updates[key] = key in nextFlat ? nextFlat[key] : undefined;
+            }
+        }
+        if (Object.keys(updates).length > 0) {
+            store.update(updates);
+        }
+    };
+}
+
+/**
+ * Parse a single JSON line (patch or metadata).
+ */
+function parseLine(line) {
+    try {
+        const trimmed = line.trim();
+        if (!trimmed || trimmed.startsWith('//')) {
+            return null;
+        }
+        const parsed = JSON.parse(trimmed);
+        // Check for usage metadata
+        if (parsed.__meta === 'usage') {
+            return {
+                type: 'usage',
+                usage: {
+                    promptTokens: parsed.promptTokens ?? 0,
+                    completionTokens: parsed.completionTokens ?? 0,
+                    totalTokens: parsed.totalTokens ?? 0,
+                },
+            };
+        }
+        return { type: 'patch', patch: parsed };
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Set a value at a spec path (for add/replace operations).
+ */
+function setSpecValue(newSpec, path, value) {
+    if (path === '/root') {
+        newSpec.root = value;
+        return;
+    }
+    if (path === '/state') {
+        newSpec.state = value;
+        return;
+    }
+    if (path.startsWith('/state/')) {
+        if (!newSpec.state)
+            newSpec.state = {};
+        const statePath = path.slice('/state'.length); // e.g. "/posts"
+        setByPath(newSpec.state, statePath, value);
+        return;
+    }
+    if (path.startsWith('/elements/')) {
+        const pathParts = path.slice('/elements/'.length).split('/');
+        const elementKey = pathParts[0];
+        if (!elementKey)
+            return;
+        if (pathParts.length === 1) {
+            newSpec.elements[elementKey] = value;
+        }
+        else {
+            const element = newSpec.elements[elementKey];
+            if (element) {
+                const propPath = '/' + pathParts.slice(1).join('/');
+                const newElement = { ...element };
+                setByPath(newElement, propPath, value);
+                newSpec.elements[elementKey] = newElement;
+            }
+        }
+    }
+}
+/**
+ * Remove a value at a spec path.
+ */
+function removeSpecValue(newSpec, path) {
+    if (path === '/state') {
+        delete newSpec.state;
+        return;
+    }
+    if (path.startsWith('/state/') && newSpec.state) {
+        const statePath = path.slice('/state'.length);
+        removeByPath(newSpec.state, statePath);
+        return;
+    }
+    if (path.startsWith('/elements/')) {
+        const pathParts = path.slice('/elements/'.length).split('/');
+        const elementKey = pathParts[0];
+        if (!elementKey)
+            return;
+        if (pathParts.length === 1) {
+            const { [elementKey]: _, ...rest } = newSpec.elements;
+            newSpec.elements = rest;
+        }
+        else {
+            const element = newSpec.elements[elementKey];
+            if (element) {
+                const propPath = '/' + pathParts.slice(1).join('/');
+                const newElement = { ...element };
+                removeByPath(newElement, propPath);
+                newSpec.elements[elementKey] = newElement;
+            }
+        }
+    }
+}
+/**
+ * Get a value at a spec path.
+ */
+function getSpecValue(spec, path) {
+    if (path === '/root')
+        return spec.root;
+    if (path === '/state')
+        return spec.state;
+    if (path.startsWith('/state/') && spec.state) {
+        const statePath = path.slice('/state'.length);
+        return getByPath(spec.state, statePath);
+    }
+    return getByPath(spec, path);
+}
+/**
+ * Apply an RFC 6902 JSON patch to the current spec, returning a new spec
+ * object (structural sharing for untouched elements).
+ * Supports add, remove, replace, move, copy, and test operations.
+ */
+function applyPatch(spec, patch) {
+    const newSpec = {
+        ...spec,
+        elements: { ...spec.elements },
+        ...(spec.state ? { state: { ...spec.state } } : {}),
+    };
+    switch (patch.op) {
+        case 'add':
+        case 'replace': {
+            setSpecValue(newSpec, patch.path, patch.value);
+            break;
+        }
+        case 'remove': {
+            removeSpecValue(newSpec, patch.path);
+            break;
+        }
+        case 'move': {
+            if (!patch.from)
+                break;
+            const moveValue = getSpecValue(newSpec, patch.from);
+            removeSpecValue(newSpec, patch.from);
+            setSpecValue(newSpec, patch.path, moveValue);
+            break;
+        }
+        case 'copy': {
+            if (!patch.from)
+                break;
+            const copyValue = getSpecValue(newSpec, patch.from);
+            setSpecValue(newSpec, patch.path, copyValue);
+            break;
+        }
+        case 'test': {
+            // test is a no-op for rendering purposes (validation only)
+            break;
+        }
+    }
+    return newSpec;
+}
+/**
+ * Streaming UI generation. POSTs `{ prompt, context, currentSpec }` to the
+ * endpoint and progressively applies the returned JSONL patch stream to the
+ * `spec` signal, so partial UIs render as they arrive.
+ *
+ * Must be called in an injection context (aborts in-flight requests on
+ * destroy).
+ *
+ * @example
+ * ```ts
+ * export class GeneratePage {
+ *   readonly ui = injectUIStream({ api: '/api/generate' });
+ * }
+ * // template:
+ * // <json-render [spec]="ui.spec()" [registry]="registry" [loading]="ui.isStreaming()" />
+ * ```
+ */
+function injectUIStream(options) {
+    const spec = signal(null, ...(ngDevMode ? [{ debugName: "spec" }] : /* istanbul ignore next */ []));
+    const isStreaming = signal(false, ...(ngDevMode ? [{ debugName: "isStreaming" }] : /* istanbul ignore next */ []));
+    const error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    const usage = signal(null, ...(ngDevMode ? [{ debugName: "usage" }] : /* istanbul ignore next */ []));
+    const rawLines = signal([], ...(ngDevMode ? [{ debugName: "rawLines" }] : /* istanbul ignore next */ []));
+    let abortController = null;
+    inject(DestroyRef).onDestroy(() => {
+        abortController?.abort();
+    });
+    const clear = () => {
+        spec.set(null);
+        error.set(null);
+    };
+    const send = async (prompt, context) => {
+        // Abort any existing request
+        abortController?.abort();
+        abortController = new AbortController();
+        isStreaming.set(true);
+        error.set(null);
+        usage.set(null);
+        rawLines.set([]);
+        // Start with previous spec if provided, otherwise empty spec
+        const previousSpec = context?.['previousSpec'];
+        let currentSpec = previousSpec && previousSpec.root
+            ? { ...previousSpec, elements: { ...previousSpec.elements } }
+            : { root: '', elements: {} };
+        spec.set(currentSpec);
+        const handleLine = (trimmed) => {
+            const result = parseLine(trimmed);
+            if (!result)
+                return;
+            if (result.type === 'usage') {
+                usage.set(result.usage);
+            }
+            else {
+                rawLines.update((prev) => [...prev, trimmed]);
+                currentSpec = applyPatch(currentSpec, result.patch);
+                spec.set(currentSpec);
+            }
+        };
+        try {
+            const response = await fetch(options.api, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    prompt,
+                    context,
+                    currentSpec,
+                }),
+                signal: abortController.signal,
+            });
+            if (!response.ok) {
+                // Try to parse JSON error response for better error messages
+                let errorMessage = `HTTP error: ${response.status}`;
+                try {
+                    const errorData = await response.json();
+                    if (errorData.message) {
+                        errorMessage = errorData.message;
+                    }
+                    else if (errorData.error) {
+                        errorMessage = errorData.error;
+                    }
+                }
+                catch {
+                    // Ignore JSON parsing errors, use default message
+                }
+                throw new Error(errorMessage);
+            }
+            const reader = response.body?.getReader();
+            if (!reader) {
+                throw new Error('No response body');
+            }
+            const decoder = new TextDecoder();
+            let buffer = '';
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                buffer += decoder.decode(value, { stream: true });
+                // Process complete lines
+                const lines = buffer.split('\n');
+                buffer = lines.pop() ?? '';
+                for (const line of lines) {
+                    const trimmed = line.trim();
+                    if (!trimmed)
+                        continue;
+                    handleLine(trimmed);
+                }
+            }
+            // Process any remaining buffer
+            if (buffer.trim()) {
+                handleLine(buffer.trim());
+            }
+            options.onComplete?.(currentSpec);
+        }
+        catch (err) {
+            if (err.name === 'AbortError') {
+                return;
+            }
+            const resolvedError = err instanceof Error ? err : new Error(String(err));
+            error.set(resolvedError);
+            options.onError?.(resolvedError);
+        }
+        finally {
+            isStreaming.set(false);
+        }
+    };
+    return {
+        spec: spec.asReadonly(),
+        isStreaming: isStreaming.asReadonly(),
+        error: error.asReadonly(),
+        usage: usage.asReadonly(),
+        rawLines: rawLines.asReadonly(),
+        send,
+        clear,
+    };
+}
+/**
+ * Convert a flat element list to a Spec.
+ * Input elements use key/parentKey to establish identity and relationships.
+ * Output spec uses the map-based format where key is the map entry key
+ * and parent-child relationships are expressed through children arrays.
+ */
+function flatToTree(elements) {
+    const elementMap = {};
+    let root = '';
+    // First pass: add all elements to map
+    for (const element of elements) {
+        elementMap[element.key] = {
+            type: element.type,
+            props: element.props,
+            children: [],
+            visible: element.visible,
+        };
+    }
+    // Second pass: build parent-child relationships
+    for (const element of elements) {
+        if (element.parentKey) {
+            const parent = elementMap[element.parentKey];
+            if (parent) {
+                if (!parent.children) {
+                    parent.children = [];
+                }
+                parent.children.push(element.key);
+            }
+        }
+        else {
+            root = element.key;
+        }
+    }
+    return { root, elements: elementMap };
+}
+/**
+ * Type guard that validates a data part payload looks like a valid
+ * {@link SpecDataPart} before we cast it.
+ */
+function isSpecDataPart(data) {
+    if (typeof data !== 'object' || data === null)
+        return false;
+    const obj = data;
+    switch (obj['type']) {
+        case 'patch':
+            return typeof obj['patch'] === 'object' && obj['patch'] !== null;
+        case 'flat':
+        case 'nested':
+            return typeof obj['spec'] === 'object' && obj['spec'] !== null;
+        default:
+            return false;
+    }
+}
+/**
+ * Build a `Spec` by replaying all spec data parts from a message's
+ * parts array (AI SDK `UIMessage.parts`). Returns `null` if no spec data
+ * parts are present.
+ */
+function buildSpecFromParts(parts) {
+    const spec = { root: '', elements: {} };
+    let hasSpec = false;
+    for (const part of parts) {
+        if (part.type === SPEC_DATA_PART_TYPE) {
+            if (!isSpecDataPart(part.data))
+                continue;
+            const payload = part.data;
+            if (payload.type === 'patch') {
+                hasSpec = true;
+                applySpecPatch(spec, payload.patch);
+            }
+            else if (payload.type === 'flat') {
+                hasSpec = true;
+                Object.assign(spec, payload.spec);
+            }
+            else if (payload.type === 'nested') {
+                hasSpec = true;
+                const flat = nestedToFlat(payload.spec);
+                Object.assign(spec, flat);
+            }
+        }
+    }
+    return hasSpec ? spec : null;
+}
+/**
+ * Extract and join all text content from a message's parts array.
+ */
+function getTextFromParts(parts) {
+    return parts
+        .filter((p) => p.type === 'text' && typeof p.text === 'string')
+        .map((p) => p.text.trim())
+        .filter(Boolean)
+        .join('\n\n');
+}
+/**
+ * Extract both the json-render spec and the text content from a message's
+ * parts array, as memoized signals. Angular counterpart of
+ * `useJsonRenderMessage` from the other renderers.
+ *
+ * @example
+ * ```ts
+ * readonly msg = jsonRenderMessage(() => this.message().parts);
+ * // template: @if (msg.hasSpec()) { <json-render [spec]="msg.spec()" ... /> }
+ * ```
+ */
+function jsonRenderMessage(parts) {
+    const result = computed(() => {
+        const p = parts();
+        return {
+            spec: buildSpecFromParts(p),
+            text: getTextFromParts(p),
+        };
+    }, ...(ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []));
+    return {
+        spec: computed(() => result().spec),
+        text: computed(() => result().text),
+        hasSpec: computed(() => {
+            const s = result().spec;
+            return s !== null && Object.keys(s.elements || {}).length > 0;
+        }),
+    };
+}
+let chatMessageIdCounter = 0;
+function generateChatId() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID();
+    }
+    chatMessageIdCounter += 1;
+    return `msg-${Date.now()}-${chatMessageIdCounter}`;
+}
+/**
+ * Chat + GenUI: manages a multi-turn conversation where each assistant
+ * message can contain both conversational text and a json-render UI spec.
+ * The full message history is sent to the endpoint and the streamed response
+ * is split into text lines and JSONL patch lines.
+ *
+ * Must be called in an injection context.
+ */
+function injectChatUI(options) {
+    const messages = signal([], ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    const isStreaming = signal(false, ...(ngDevMode ? [{ debugName: "isStreaming" }] : /* istanbul ignore next */ []));
+    const error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    let abortController = null;
+    inject(DestroyRef).onDestroy(() => {
+        abortController?.abort();
+    });
+    const clear = () => {
+        messages.set([]);
+        error.set(null);
+    };
+    const send = async (text) => {
+        if (!text.trim())
+            return;
+        // Abort any existing request
+        abortController?.abort();
+        abortController = new AbortController();
+        const userMessage = {
+            id: generateChatId(),
+            role: 'user',
+            text: text.trim(),
+            spec: null,
+        };
+        const assistantId = generateChatId();
+        const assistantMessage = {
+            id: assistantId,
+            role: 'assistant',
+            text: '',
+            spec: null,
+        };
+        // Build messages array for the API (full conversation history + new message).
+        const historyForApi = [
+            ...messages()
+                .filter((m) => m.id !== userMessage.id && m.id !== assistantId)
+                .map((m) => ({
+                role: m.role,
+                content: m.text,
+            })),
+            { role: 'user', content: text.trim() },
+        ];
+        // Append user message and empty assistant placeholder
+        messages.update((prev) => [...prev, userMessage, assistantMessage]);
+        isStreaming.set(true);
+        error.set(null);
+        // Mutable state for accumulating the assistant response
+        let accumulatedText = '';
+        const currentSpec = { root: '', elements: {} };
+        let hasSpec = false;
+        const snapshotSpec = () => ({
+            root: currentSpec.root,
+            elements: { ...currentSpec.elements },
+            ...(currentSpec.state ? { state: { ...currentSpec.state } } : {}),
+        });
+        try {
+            const response = await fetch(options.api, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ messages: historyForApi }),
+                signal: abortController.signal,
+            });
+            if (!response.ok) {
+                let errorMessage = `HTTP error: ${response.status}`;
+                try {
+                    const errorData = await response.json();
+                    if (errorData.message) {
+                        errorMessage = errorData.message;
+                    }
+                    else if (errorData.error) {
+                        errorMessage = errorData.error;
+                    }
+                }
+                catch {
+                    // Ignore JSON parsing errors
+                }
+                throw new Error(errorMessage);
+            }
+            const reader = response.body?.getReader();
+            if (!reader) {
+                throw new Error('No response body');
+            }
+            const decoder = new TextDecoder();
+            // Use createMixedStreamParser to classify lines
+            const parser = createMixedStreamParser({
+                onPatch(patch) {
+                    hasSpec = true;
+                    applySpecPatch(currentSpec, patch);
+                    const snapshot = snapshotSpec();
+                    messages.update((prev) => prev.map((m) => m.id === assistantId ? { ...m, spec: snapshot } : m));
+                },
+                onText(line) {
+                    accumulatedText += (accumulatedText ? '\n' : '') + line;
+                    messages.update((prev) => prev.map((m) => m.id === assistantId ? { ...m, text: accumulatedText } : m));
+                },
+            });
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                parser.push(decoder.decode(value, { stream: true }));
+            }
+            parser.flush();
+            // Build final message for onComplete callback
+            const finalMessage = {
+                id: assistantId,
+                role: 'assistant',
+                text: accumulatedText,
+                spec: hasSpec ? snapshotSpec() : null,
+            };
+            options.onComplete?.(finalMessage);
+        }
+        catch (err) {
+            if (err.name === 'AbortError') {
+                return;
+            }
+            const resolvedError = err instanceof Error ? err : new Error(String(err));
+            error.set(resolvedError);
+            // Remove empty assistant message on error
+            messages.update((prev) => prev.filter((m) => m.id !== assistantId || m.text.length > 0));
+            options.onError?.(resolvedError);
+        }
+        finally {
+            isStreaming.set(false);
+        }
+    };
+    return {
+        messages: messages.asReadonly(),
+        isStreaming: isStreaming.asReadonly(),
+        error: error.asReadonly(),
+        send,
+        clear,
+    };
+}
+
+/**
+ * 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[]> }.',
+        },
+    ],
+    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
+ */
+// Renderer components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { JrChildren, JrConfirmDialog, JrElement, JrRepeatScope, JsonRenderActionsService, JsonRenderRootContext, JsonRenderStateService, JsonRenderValidationService, JsonRenderer, RENDER_CONTEXT, REPEAT_SCOPE, applyPatch, buildSpecFromParts, createStoreSetState, defineRegistry, flatToTree, getTextFromParts, injectAction, injectActions, injectBoundProp, injectChatUI, injectDevtoolsActive, injectFieldValidation, injectRenderContext, injectRepeatScope, injectStateBinding, injectStateStore, injectStateValue, injectUIStream, injectValidation, jsonRenderMessage, schema };
+//# sourceMappingURL=ngx-json-render.mjs.map