@ng-render/angular 0.1.0

package/fesm2022/ng-render-angular.mjs

@@ -0,0 +1,1527 @@
+import { defineSchema, getByPath, setByPath, evaluateVisibility, resolveAction, executeAction, runValidation, resolveBindings, resolveElementProps, resolveActionParam, removeByPath, createMixedStreamParser, applySpecPatch, SPEC_DATA_PART_TYPE, nestedToFlat } from '@json-render/core';
+export { defineCatalog } from '@json-render/core';
+import * as i0 from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, signal, Injectable, inject, computed, ErrorHandler, input, ViewContainerRef, Injector, EnvironmentInjector, effect, createEnvironmentInjector, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+
+/**
+ * The schema for @ng-render/angular.
+ *
+ * Identical to the React schema — the schema is framework-agnostic.
+ */
+const schema = defineSchema((s) => ({
+    spec: s.object({
+        root: s.string(),
+        elements: s.record(s.object({
+            type: s.ref('catalog.components'),
+            props: s.propsOf('catalog.components'),
+            children: s.array(s.string()),
+            visible: s.any(),
+        })),
+    }),
+    catalog: s.object({
+        components: s.map({
+            props: s.zod(),
+            slots: s.array(s.string()),
+            description: s.string(),
+            example: s.any(),
+        }),
+        actions: s.map({
+            params: s.zod(),
+            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 }',
+        },
+    ],
+    defaultRules: [
+        '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.',
+        '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.',
+        '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"] }. Replace <ContainerComponent> with an appropriate component from the AVAILABLE COMPONENTS list. 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 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.',
+    ],
+});
+
+const NG_RENDER_REGISTRY = new InjectionToken('NG_RENDER_REGISTRY');
+const NG_RENDER_ACTION_HANDLERS = new InjectionToken('NG_RENDER_ACTION_HANDLERS');
+const NG_RENDER_NAVIGATE = new InjectionToken('NG_RENDER_NAVIGATE');
+const NG_RENDER_FALLBACK = new InjectionToken('NG_RENDER_FALLBACK');
+
+/**
+ * Create a type-safe registry from a catalog.
+ * Maps component names to Angular component classes.
+ */
+function defineRegistry(_catalog, options) {
+    const registry = {};
+    if (options.components) {
+        for (const [name, componentType] of Object.entries(options.components)) {
+            registry[name] = componentType;
+        }
+    }
+    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 };
+}
+/**
+ * Provide ng-render configuration at the environment level.
+ * Replaces React's <JSONUIProvider>.
+ */
+function provideNgRender(options) {
+    const providers = [
+        { provide: NG_RENDER_REGISTRY, useValue: options.registry },
+    ];
+    if (options.handlers) {
+        providers.push({
+            provide: NG_RENDER_ACTION_HANDLERS,
+            useValue: options.handlers,
+        });
+    }
+    if (options.navigate) {
+        providers.push({
+            provide: NG_RENDER_NAVIGATE,
+            useValue: options.navigate,
+        });
+    }
+    if (options.fallback) {
+        providers.push({
+            provide: NG_RENDER_FALLBACK,
+            useValue: options.fallback,
+        });
+    }
+    return makeEnvironmentProviders(providers);
+}
+
+class SpecStateService {
+    _state = signal({}, ...(ngDevMode ? [{ debugName: "_state" }] : []));
+    state = this._state.asReadonly();
+    get(path) {
+        return getByPath(this._state(), path);
+    }
+    set(path, value) {
+        this._state.update((prev) => {
+            const next = { ...prev };
+            setByPath(next, path, value);
+            return next;
+        });
+    }
+    update(updates) {
+        this._state.update((prev) => {
+            const next = { ...prev };
+            for (const [path, value] of Object.entries(updates)) {
+                setByPath(next, path, value);
+            }
+            return next;
+        });
+    }
+    initialize(initialState) {
+        this._state.set({ ...initialState });
+    }
+    mergeInitialState(state) {
+        this._state.update((prev) => ({ ...prev, ...state }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SpecStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SpecStateService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SpecStateService, decorators: [{
+            type: Injectable
+        }] });
+
+class VisibilityService {
+    stateService = inject(SpecStateService);
+    ctx = computed(() => ({
+        stateModel: this.stateService.state(),
+    }), ...(ngDevMode ? [{ debugName: "ctx" }] : []));
+    isVisible(condition) {
+        return evaluateVisibility(condition, this.ctx());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: VisibilityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: VisibilityService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: VisibilityService, decorators: [{
+            type: Injectable
+        }] });
+
+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;
+}
+class ActionDispatcherService {
+    stateService = inject(SpecStateService);
+    handlers = inject(NG_RENDER_ACTION_HANDLERS, { optional: true }) ?? {};
+    navigate = inject(NG_RENDER_NAVIGATE, {
+        optional: true,
+    });
+    loadingActions = signal(new Set(), ...(ngDevMode ? [{ debugName: "loadingActions" }] : []));
+    pendingConfirmation = signal(null, ...(ngDevMode ? [{ debugName: "pendingConfirmation" }] : []));
+    async execute(binding) {
+        const state = this.stateService.state();
+        const resolved = resolveAction(binding, state);
+        // Built-in: setState
+        if (resolved.action === 'setState' && resolved.params) {
+            const statePath = resolved.params['statePath'];
+            const value = resolved.params['value'];
+            if (statePath) {
+                this.stateService.set(statePath, value);
+            }
+            return;
+        }
+        // Built-in: pushState
+        if (resolved.action === 'pushState' && resolved.params) {
+            const statePath = resolved.params['statePath'];
+            const rawValue = resolved.params['value'];
+            if (statePath) {
+                const resolvedValue = deepResolveValue(rawValue, (p) => this.stateService.get(p));
+                const arr = this.stateService.get(statePath) ?? [];
+                this.stateService.set(statePath, [...arr, resolvedValue]);
+                const clearStatePath = resolved.params['clearStatePath'];
+                if (clearStatePath) {
+                    this.stateService.set(clearStatePath, '');
+                }
+            }
+            return;
+        }
+        // Built-in: removeState
+        if (resolved.action === 'removeState' && resolved.params) {
+            const statePath = resolved.params['statePath'];
+            const index = resolved.params['index'];
+            if (statePath !== undefined && index !== undefined) {
+                const arr = this.stateService.get(statePath) ?? [];
+                this.stateService.set(statePath, arr.filter((_, i) => i !== index));
+            }
+            return;
+        }
+        // Built-in: push (navigation)
+        if (resolved.action === 'push' && resolved.params) {
+            const screen = resolved.params['screen'];
+            if (screen) {
+                const currentScreen = this.stateService.get('/currentScreen');
+                const navStack = this.stateService.get('/navStack') ?? [];
+                if (currentScreen) {
+                    this.stateService.set('/navStack', [...navStack, currentScreen]);
+                }
+                else {
+                    this.stateService.set('/navStack', [...navStack, '']);
+                }
+                this.stateService.set('/currentScreen', screen);
+            }
+            return;
+        }
+        // Built-in: pop (navigation)
+        if (resolved.action === 'pop') {
+            const navStack = this.stateService.get('/navStack') ?? [];
+            if (navStack.length > 0) {
+                const previousScreen = navStack[navStack.length - 1];
+                this.stateService.set('/navStack', navStack.slice(0, -1));
+                if (previousScreen) {
+                    this.stateService.set('/currentScreen', previousScreen);
+                }
+                else {
+                    this.stateService.set('/currentScreen', undefined);
+                }
+            }
+            return;
+        }
+        const handler = this.handlers[resolved.action];
+        if (!handler) {
+            console.warn(`No handler registered for action: ${resolved.action}`);
+            return;
+        }
+        // Confirmation flow
+        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(async () => {
+                await this.executeHandler(resolved, handler);
+            });
+        }
+        await this.executeHandler(resolved, handler);
+    }
+    confirm() {
+        this.pendingConfirmation()?.resolve();
+    }
+    cancel() {
+        this.pendingConfirmation()?.reject();
+    }
+    async executeHandler(resolved, handler) {
+        this.loadingActions.update((prev) => {
+            const next = new Set(prev);
+            next.add(resolved.action);
+            return next;
+        });
+        try {
+            await executeAction({
+                action: resolved,
+                handler,
+                setState: (path, value) => this.stateService.set(path, value),
+                navigate: this.navigate ?? undefined,
+                executeAction: async (name) => {
+                    await this.execute({ action: name });
+                },
+            });
+        }
+        finally {
+            this.loadingActions.update((prev) => {
+                const next = new Set(prev);
+                next.delete(resolved.action);
+                return next;
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ActionDispatcherService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ActionDispatcherService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ActionDispatcherService, decorators: [{
+            type: Injectable
+        }] });
+
+class ValidationService {
+    stateService = inject(SpecStateService);
+    customFunctions = {};
+    fieldConfigs = {};
+    fieldStates = signal({}, ...(ngDevMode ? [{ debugName: "fieldStates" }] : []));
+    setCustomFunctions(fns) {
+        this.customFunctions = fns;
+    }
+    registerField(path, config) {
+        this.fieldConfigs[path] = config;
+    }
+    validate(path, config) {
+        const currentState = this.stateService.state();
+        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,
+        });
+        this.fieldStates.update((prev) => ({
+            ...prev,
+            [path]: {
+                touched: prev[path]?.touched ?? true,
+                validated: true,
+                result,
+            },
+        }));
+        return result;
+    }
+    touch(path) {
+        this.fieldStates.update((prev) => ({
+            ...prev,
+            [path]: {
+                ...prev[path],
+                touched: true,
+                validated: prev[path]?.validated ?? false,
+                result: prev[path]?.result ?? null,
+            },
+        }));
+    }
+    clear(path) {
+        this.fieldStates.update((prev) => {
+            const { [path]: _, ...rest } = prev;
+            return rest;
+        });
+    }
+    validateAll() {
+        let allValid = true;
+        for (const [path, config] of Object.entries(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.1.4", ngImport: i0, type: ValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ValidationService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ValidationService, decorators: [{
+            type: Injectable
+        }] });
+
+class RepeatScopeService {
+    item = undefined;
+    index = 0;
+    basePath = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RepeatScopeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RepeatScopeService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RepeatScopeService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Custom error handler that absorbs rendering errors for individual elements.
+ * Prevents one broken component from crashing the entire tree.
+ */
+class ElementErrorHandler extends ErrorHandler {
+    handleError(error) {
+        console.error('[json-render] Rendering error in element:', error);
+    }
+}
+
+class ElementRendererComponent {
+    element = input.required(...(ngDevMode ? [{ debugName: "element" }] : []));
+    spec = input.required(...(ngDevMode ? [{ debugName: "spec" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    vcr = inject(ViewContainerRef);
+    injector = inject(Injector);
+    envInjector = inject(EnvironmentInjector);
+    stateService = inject(SpecStateService);
+    visibilityService = inject(VisibilityService);
+    actionDispatcher = inject(ActionDispatcherService);
+    repeatScope = inject(RepeatScopeService, {
+        optional: true,
+    });
+    registry = inject(NG_RENDER_REGISTRY);
+    fallbackComponent = inject(NG_RENDER_FALLBACK, {
+        optional: true,
+    });
+    componentRef = null;
+    childRenderers = [];
+    repeatInjectors = [];
+    constructor() {
+        effect(() => {
+            this.render();
+        });
+    }
+    render() {
+        this.cleanup();
+        const element = this.element();
+        const spec = this.spec();
+        const loading = this.loading();
+        // Read state signal to register dependency for re-rendering
+        const state = this.stateService.state();
+        // Build PropResolutionContext with repeat scope data
+        const baseCtx = this.visibilityService.ctx();
+        const fullCtx = this.repeatScope
+            ? {
+                ...baseCtx,
+                repeatItem: this.repeatScope.item,
+                repeatIndex: this.repeatScope.index,
+                repeatBasePath: this.repeatScope.basePath,
+            }
+            : baseCtx;
+        // Evaluate visibility
+        if (element.visible !== undefined &&
+            !evaluateVisibility(element.visible, fullCtx)) {
+            return;
+        }
+        // Handle repeat elements
+        if (element.repeat) {
+            this.renderRepeat(element, spec, loading, fullCtx);
+            return;
+        }
+        // Resolve bindings and props
+        const rawProps = element.props;
+        const elementBindings = resolveBindings(rawProps, fullCtx);
+        const resolvedProps = resolveElementProps(rawProps, fullCtx);
+        const resolvedElement = resolvedProps !== element.props
+            ? { ...element, props: resolvedProps }
+            : element;
+        // Create emit function
+        const onBindings = element.on;
+        const emit = (eventName) => {
+            const binding = onBindings?.[eventName];
+            if (!binding)
+                return;
+            const actionBindings = Array.isArray(binding)
+                ? binding
+                : [binding];
+            for (const b of actionBindings) {
+                if (!b.params) {
+                    this.actionDispatcher.execute(b);
+                    continue;
+                }
+                const resolved = {};
+                for (const [key, val] of Object.entries(b.params)) {
+                    resolved[key] = resolveActionParam(val, fullCtx);
+                }
+                this.actionDispatcher.execute({ ...b, params: resolved });
+            }
+        };
+        // Create on() function
+        const on = (eventName) => {
+            const binding = onBindings?.[eventName];
+            if (!binding) {
+                return { emit: () => { }, shouldPreventDefault: false, bound: false };
+            }
+            const actionBindings = Array.isArray(binding)
+                ? binding
+                : [binding];
+            const shouldPreventDefault = actionBindings.some((b) => b.preventDefault);
+            return {
+                emit: () => emit(eventName),
+                shouldPreventDefault,
+                bound: true,
+            };
+        };
+        // Look up component
+        const ComponentClass = this.registry[resolvedElement.type] ?? this.fallbackComponent;
+        if (!ComponentClass) {
+            console.warn(`[ng-render] No renderer for component type: "${resolvedElement.type}"`);
+            return;
+        }
+        // Create the component
+        try {
+            this.componentRef = this.vcr.createComponent(ComponentClass, {
+                injector: this.injector,
+                environmentInjector: this.envInjector,
+            });
+            this.componentRef.setInput('element', resolvedElement);
+            this.componentRef.setInput('emit', emit);
+            this.componentRef.setInput('on', on);
+            if (elementBindings) {
+                this.componentRef.setInput('bindings', elementBindings);
+            }
+            this.componentRef.setInput('loading', loading);
+            // Render children into the ChildrenOutletDirective if present
+            if (resolvedElement.children && resolvedElement.children.length > 0) {
+                // Trigger change detection so ViewChild queries resolve
+                this.componentRef.changeDetectorRef.detectChanges();
+                // Look for children outlet on the component instance.
+                // Components that accept children must declare:
+                //   @ViewChild(ChildrenOutletDirective, { static: true })
+                //   childrenOutlet!: ChildrenOutletDirective;
+                const instance = this.componentRef.instance;
+                const outlet = instance?.childrenOutlet;
+                if (outlet?.vcr) {
+                    this.renderChildren(resolvedElement.children, spec, loading, outlet.vcr);
+                }
+                else {
+                    // No outlet found — render children as siblings after the component.
+                    // This handles components without explicit jrChildren directive.
+                    this.renderChildren(resolvedElement.children, spec, loading, this.vcr);
+                }
+            }
+        }
+        catch (error) {
+            console.error(`[ng-render] Error creating component for type "${resolvedElement.type}":`, error);
+        }
+    }
+    renderRepeat(element, spec, loading, ctx) {
+        const repeat = element.repeat;
+        const items = getByPath(this.stateService.state(), repeat.statePath) ?? [];
+        for (let index = 0; index < items.length; index++) {
+            const itemValue = items[index];
+            const basePath = `${repeat.statePath}/${index}`;
+            // Create a child injector with a fresh RepeatScopeService
+            const repeatScopeService = new RepeatScopeService();
+            repeatScopeService.item = itemValue;
+            repeatScopeService.index = index;
+            repeatScopeService.basePath = basePath;
+            const childInjector = createEnvironmentInjector([{ provide: RepeatScopeService, useValue: repeatScopeService }], this.envInjector);
+            this.repeatInjectors.push(childInjector);
+            // Render children for this repeat iteration
+            if (element.children) {
+                for (const childKey of element.children) {
+                    const childElement = spec.elements[childKey];
+                    if (!childElement) {
+                        if (!loading) {
+                            console.warn(`[ng-render] Missing element "${childKey}" referenced as child of "${element.type}" (repeat).`);
+                        }
+                        continue;
+                    }
+                    const childRef = this.vcr.createComponent(ElementRendererComponent, {
+                        environmentInjector: childInjector,
+                    });
+                    childRef.setInput('element', childElement);
+                    childRef.setInput('spec', spec);
+                    childRef.setInput('loading', loading);
+                    this.childRenderers.push(childRef);
+                }
+            }
+        }
+    }
+    renderChildren(childKeys, spec, loading, vcr) {
+        for (const childKey of childKeys) {
+            const childElement = spec.elements[childKey];
+            if (!childElement) {
+                if (!loading) {
+                    console.warn(`[ng-render] Missing element "${childKey}". This element will not render.`);
+                }
+                continue;
+            }
+            const childRef = vcr.createComponent(ElementRendererComponent, {
+                environmentInjector: this.envInjector,
+            });
+            childRef.setInput('element', childElement);
+            childRef.setInput('spec', spec);
+            childRef.setInput('loading', loading);
+            this.childRenderers.push(childRef);
+        }
+    }
+    cleanup() {
+        for (const ref of this.childRenderers) {
+            ref.destroy();
+        }
+        this.childRenderers = [];
+        for (const inj of this.repeatInjectors) {
+            inj.destroy();
+        }
+        this.repeatInjectors = [];
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+        this.vcr.clear();
+    }
+    ngOnDestroy() {
+        this.cleanup();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ElementRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ElementRendererComponent, isStandalone: true, selector: "jr-element-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: ErrorHandler, useClass: ElementErrorHandler }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ElementRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-element-renderer',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: ErrorHandler, useClass: ElementErrorHandler }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+
+class JsonRendererComponent {
+    spec = input(null, ...(ngDevMode ? [{ debugName: "spec" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    initialState = input({}, ...(ngDevMode ? [{ debugName: "initialState" }] : []));
+    onStateChange = input(undefined, ...(ngDevMode ? [{ debugName: "onStateChange" }] : []));
+    stateService = inject(SpecStateService);
+    previousSpecState;
+    previousInitialState;
+    rootElement = computed(() => {
+        const s = this.spec();
+        if (!s?.root)
+            return null;
+        return s.elements[s.root] ?? null;
+    }, ...(ngDevMode ? [{ debugName: "rootElement" }] : []));
+    constructor() {
+        // Initialize from initialState input — only when values actually change
+        effect(() => {
+            const initial = this.initialState();
+            const serialized = JSON.stringify(initial);
+            if (serialized !== this.previousInitialState) {
+                this.previousInitialState = serialized;
+                if (initial && Object.keys(initial).length > 0) {
+                    this.stateService.mergeInitialState(initial);
+                }
+            }
+        });
+        // Merge spec.state when spec changes
+        effect(() => {
+            const s = this.spec();
+            if (s?.state && s.state !== this.previousSpecState) {
+                this.previousSpecState = s.state;
+                if (Object.keys(s.state).length > 0) {
+                    this.stateService.mergeInitialState(s.state);
+                }
+            }
+        });
+        // Wire onStateChange callback — observe state and forward changes
+        effect(() => {
+            const callback = this.onStateChange();
+            const state = this.stateService.state();
+            // The callback is invoked with the full state snapshot
+            // Components should use the SpecStateService for granular path-level changes
+            if (callback && state) {
+                callback('', state);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: JsonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: JsonRendererComponent, isStandalone: true, selector: "json-renderer", inputs: { spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, initialState: { classPropertyName: "initialState", publicName: "initialState", isSignal: true, isRequired: false, transformFunction: null }, onStateChange: { classPropertyName: "onStateChange", publicName: "onStateChange", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            SpecStateService,
+            VisibilityService,
+            ActionDispatcherService,
+            ValidationService,
+        ], ngImport: i0, template: `
+    @if (rootElement(); as root) {
+      <jr-element-renderer
+        [element]="root"
+        [spec]="spec()!"
+        [loading]="loading()" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: ElementRendererComponent, selector: "jr-element-renderer", inputs: ["element", "spec", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: JsonRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'json-renderer',
+                    standalone: true,
+                    imports: [ElementRendererComponent],
+                    template: `
+    @if (rootElement(); as root) {
+      <jr-element-renderer
+        [element]="root"
+        [spec]="spec()!"
+        [loading]="loading()" />
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        SpecStateService,
+                        VisibilityService,
+                        ActionDispatcherService,
+                        ValidationService,
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], initialState: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialState", required: false }] }], onStateChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "onStateChange", required: false }] }] } });
+
+/**
+ * Directive that marks where children should be rendered inside a
+ * registered component.
+ *
+ * Usage in component templates:
+ * ```html
+ * <div class="card">
+ *   <ng-template jrChildren></ng-template>
+ * </div>
+ * ```
+ */
+class ChildrenOutletDirective {
+    vcr = inject(ViewContainerRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ChildrenOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: ChildrenOutletDirective, isStandalone: true, selector: "[jrChildren]", exportAs: ["jrChildren"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ChildrenOutletDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[jrChildren]',
+                    standalone: true,
+                    exportAs: 'jrChildren',
+                }]
+        }] });
+
+/**
+ * Default confirmation dialog component.
+ * Renders when an action has a `confirm` field.
+ *
+ * Place inside or near the `<json-renderer>` in your template:
+ * ```html
+ * <json-renderer [spec]="spec">
+ *   <jr-confirm-dialog />
+ * </json-renderer>
+ * ```
+ *
+ * Or use it standalone anywhere the ActionDispatcherService is available.
+ */
+class ConfirmDialogComponent {
+    dispatcher = inject(ActionDispatcherService);
+    confirm = computed(() => {
+        const pending = this.dispatcher.pendingConfirmation();
+        return pending?.action.confirm ?? null;
+    }, ...(ngDevMode ? [{ debugName: "confirm" }] : []));
+    onConfirm() {
+        this.dispatcher.confirm();
+    }
+    onCancel() {
+        this.dispatcher.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ConfirmDialogComponent, isStandalone: true, selector: "jr-confirm-dialog", ngImport: i0, template: `
+    @if (confirm(); as c) {
+      <div class="jr-confirm-overlay" (click)="onCancel()">
+        <div class="jr-confirm-dialog" (click)="$event.stopPropagation()">
+          <h3 class="jr-confirm-title">{{ c.title }}</h3>
+          <p class="jr-confirm-message">{{ c.message }}</p>
+          <div class="jr-confirm-actions">
+            <button class="jr-confirm-btn jr-confirm-btn-cancel" (click)="onCancel()">
+              {{ c.cancelLabel ?? 'Cancel' }}
+            </button>
+            <button
+              class="jr-confirm-btn"
+              [class.jr-confirm-btn-danger]="c.variant === 'danger'"
+              [class.jr-confirm-btn-primary]="c.variant !== 'danger'"
+              (click)="onConfirm()">
+              {{ c.confirmLabel ?? 'Confirm' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [".jr-confirm-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:50}.jr-confirm-dialog{background:#fff;border-radius:8px;padding:24px;max-width:400px;width:100%;box-shadow:0 20px 25px -5px #0000001a}.jr-confirm-title{margin:0 0 8px;font-size:18px;font-weight:600}.jr-confirm-message{margin:0 0 24px;color:#6b7280}.jr-confirm-actions{display:flex;gap:12px;justify-content:flex-end}.jr-confirm-btn{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.jr-confirm-btn-cancel{border:1px solid #d1d5db;background:#fff;color:#374151}.jr-confirm-btn-primary{border:none;background:#3b82f6;color:#fff}.jr-confirm-btn-danger{border:none;background:#dc2626;color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jr-confirm-dialog', standalone: true, template: `
+    @if (confirm(); as c) {
+      <div class="jr-confirm-overlay" (click)="onCancel()">
+        <div class="jr-confirm-dialog" (click)="$event.stopPropagation()">
+          <h3 class="jr-confirm-title">{{ c.title }}</h3>
+          <p class="jr-confirm-message">{{ c.message }}</p>
+          <div class="jr-confirm-actions">
+            <button class="jr-confirm-btn jr-confirm-btn-cancel" (click)="onCancel()">
+              {{ c.cancelLabel ?? 'Cancel' }}
+            </button>
+            <button
+              class="jr-confirm-btn"
+              [class.jr-confirm-btn-danger]="c.variant === 'danger'"
+              [class.jr-confirm-btn-primary]="c.variant !== 'danger'"
+              (click)="onConfirm()">
+              {{ c.confirmLabel ?? 'Confirm' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".jr-confirm-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:50}.jr-confirm-dialog{background:#fff;border-radius:8px;padding:24px;max-width:400px;width:100%;box-shadow:0 20px 25px -5px #0000001a}.jr-confirm-title{margin:0 0 8px;font-size:18px;font-weight:600}.jr-confirm-message{margin:0 0 24px;color:#6b7280}.jr-confirm-actions{display:flex;gap:12px;justify-content:flex-end}.jr-confirm-btn{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.jr-confirm-btn-cancel{border:1px solid #d1d5db;background:#fff;color:#374151}.jr-confirm-btn-primary{border:none;background:#3b82f6;color:#fff}.jr-confirm-btn-danger{border:none;background:#dc2626;color:#fff}\n"] }]
+        }] });
+
+/**
+ * Default fallback component for unknown element types.
+ * Displays a warning in development.
+ *
+ * Register via provideNgRender:
+ * ```ts
+ * provideNgRender({
+ *   registry: myRegistry,
+ *   fallback: FallbackComponent,
+ * })
+ * ```
+ */
+class FallbackComponent {
+    element = input.required(...(ngDevMode ? [{ debugName: "element" }] : []));
+    emit = input.required(...(ngDevMode ? [{ debugName: "emit" }] : []));
+    on = input.required(...(ngDevMode ? [{ debugName: "on" }] : []));
+    bindings = input(...(ngDevMode ? [undefined, { debugName: "bindings" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: FallbackComponent, isStandalone: true, selector: "jr-fallback", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: true, transformFunction: null }, on: { classPropertyName: "on", publicName: "on", isSignal: true, isRequired: true, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="jr-fallback">
+      Unknown component: "{{ element().type }}"
+    </div>
+  `, isInline: true, styles: [".jr-fallback{padding:8px 12px;border:1px dashed #f59e0b;border-radius:6px;background:#fffbeb;color:#92400e;font-size:12px;font-family:monospace}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FallbackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jr-fallback', standalone: true, template: `
+    <div class="jr-fallback">
+      Unknown component: "{{ element().type }}"
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".jr-fallback{padding:8px 12px;border:1px dashed #f59e0b;border-radius:6px;background:#fffbeb;color:#92400e;font-size:12px;font-family:monospace}\n"] }]
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: true }] }], on: [{ type: i0.Input, args: [{ isSignal: true, alias: "on", required: true }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+
+/**
+ * Parse a single JSONL line into a patch or usage metadata.
+ */
+function parseLine(line) {
+    try {
+        const trimmed = line.trim();
+        if (!trimmed || trimmed.startsWith('//'))
+            return null;
+        const parsed = JSON.parse(trimmed);
+        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;
+    }
+}
+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);
+        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;
+            }
+        }
+    }
+}
+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;
+            }
+        }
+    }
+}
+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 a Spec.
+ * Returns a new shallow-copied Spec (immutable pattern for signal updates).
+ */
+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':
+            break;
+    }
+    return newSpec;
+}
+
+/**
+ * Create a streaming UI generator.
+ * Angular equivalent of React's `useUIStream` hook.
+ *
+ * Returns signal-based reactive state + imperative send/clear functions.
+ *
+ * @example
+ * ```ts
+ * // In a component
+ * private stream = createUIStream({ api: '/api/generate' });
+ * spec = this.stream.spec;
+ * isStreaming = this.stream.isStreaming;
+ *
+ * async generate() {
+ *   await this.stream.send('Create a dashboard');
+ * }
+ *
+ * ngOnDestroy() {
+ *   this.stream.destroy();
+ * }
+ * ```
+ */
+function createUIStream(options) {
+    const spec = signal(null, ...(ngDevMode ? [{ debugName: "spec" }] : []));
+    const isStreaming = signal(false, ...(ngDevMode ? [{ debugName: "isStreaming" }] : []));
+    const error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    const usage = signal(null, ...(ngDevMode ? [{ debugName: "usage" }] : []));
+    const rawLines = signal([], ...(ngDevMode ? [{ debugName: "rawLines" }] : []));
+    let abortController = null;
+    const clear = () => {
+        spec.set(null);
+        error.set(null);
+    };
+    const destroy = () => {
+        abortController?.abort();
+        abortController = null;
+    };
+    const send = async (prompt, context) => {
+        abortController?.abort();
+        abortController = new AbortController();
+        isStreaming.set(true);
+        error.set(null);
+        usage.set(null);
+        rawLines.set([]);
+        const previousSpec = context?.['previousSpec'];
+        let currentSpec = previousSpec && previousSpec.root
+            ? { ...previousSpec, elements: { ...previousSpec.elements } }
+            : { root: '', elements: {} };
+        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) {
+                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
+                }
+                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 });
+                const lines = buffer.split('\n');
+                buffer = lines.pop() ?? '';
+                for (const line of lines) {
+                    const trimmed = line.trim();
+                    if (!trimmed)
+                        continue;
+                    const result = parseLine(trimmed);
+                    if (!result)
+                        continue;
+                    if (result.type === 'usage') {
+                        usage.set(result.usage);
+                    }
+                    else {
+                        rawLines.update((prev) => [...prev, trimmed]);
+                        currentSpec = applyPatch(currentSpec, result.patch);
+                        spec.set({ ...currentSpec });
+                    }
+                }
+            }
+            // Process remaining buffer
+            if (buffer.trim()) {
+                const result = parseLine(buffer.trim());
+                if (result) {
+                    if (result.type === 'usage') {
+                        usage.set(result.usage);
+                    }
+                    else {
+                        rawLines.update((prev) => [...prev, buffer.trim()]);
+                        currentSpec = applyPatch(currentSpec, result.patch);
+                        spec.set({ ...currentSpec });
+                    }
+                }
+            }
+            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,
+        destroy,
+    };
+}
+
+let chatMessageIdCounter = 0;
+function generateChatId() {
+    if (typeof crypto !== 'undefined' &&
+        typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID();
+    }
+    chatMessageIdCounter += 1;
+    return `msg-${Date.now()}-${chatMessageIdCounter}`;
+}
+/**
+ * Create a chat + GenUI interface.
+ * Angular equivalent of React's `useChatUI` hook.
+ *
+ * Manages a multi-turn conversation where each assistant message can contain
+ * both conversational text and a json-render UI spec.
+ *
+ * @example
+ * ```ts
+ * private chat = createChatUI({ api: '/api/chat' });
+ * messages = this.chat.messages;
+ * isStreaming = this.chat.isStreaming;
+ *
+ * async send(text: string) {
+ *   await this.chat.send(text);
+ * }
+ *
+ * ngOnDestroy() {
+ *   this.chat.destroy();
+ * }
+ * ```
+ */
+function createChatUI(options) {
+    const messages = signal([], ...(ngDevMode ? [{ debugName: "messages" }] : []));
+    const isStreaming = signal(false, ...(ngDevMode ? [{ debugName: "isStreaming" }] : []));
+    const error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    let abortController = null;
+    const clear = () => {
+        messages.set([]);
+        error.set(null);
+    };
+    const destroy = () => {
+        abortController?.abort();
+        abortController = null;
+    };
+    const send = async (text) => {
+        if (!text.trim())
+            return;
+        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,
+        };
+        messages.update((prev) => [...prev, userMessage, assistantMessage]);
+        isStreaming.set(true);
+        error.set(null);
+        const historyForApi = messages()
+            .filter((m) => m.id !== assistantId)
+            .map((m) => ({ role: m.role, content: m.text }));
+        historyForApi.push({ role: 'user', content: text.trim() });
+        let accumulatedText = '';
+        let currentSpec = { root: '', elements: {} };
+        let hasSpec = false;
+        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
+                }
+                throw new Error(errorMessage);
+            }
+            const reader = response.body?.getReader();
+            if (!reader)
+                throw new Error('No response body');
+            const decoder = new TextDecoder();
+            const parser = createMixedStreamParser({
+                onPatch(patch) {
+                    hasSpec = true;
+                    applySpecPatch(currentSpec, patch);
+                    messages.update((prev) => prev.map((m) => m.id === assistantId
+                        ? {
+                            ...m,
+                            spec: {
+                                root: currentSpec.root,
+                                elements: { ...currentSpec.elements },
+                                ...(currentSpec.state
+                                    ? { state: { ...currentSpec.state } }
+                                    : {}),
+                            },
+                        }
+                        : 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();
+            const finalMessage = {
+                id: assistantId,
+                role: 'assistant',
+                text: accumulatedText,
+                spec: hasSpec
+                    ? {
+                        root: currentSpec.root,
+                        elements: { ...currentSpec.elements },
+                        ...(currentSpec.state
+                            ? { state: { ...currentSpec.state } }
+                            : {}),
+                    }
+                    : null,
+            };
+            options.onComplete?.(finalMessage);
+        }
+        catch (err) {
+            if (err.name === 'AbortError')
+                return;
+            const resolvedError = err instanceof Error ? err : new Error(String(err));
+            error.set(resolvedError);
+            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,
+        destroy,
+    };
+}
+
+/**
+ * Create a two-way bound prop helper.
+ * Angular equivalent of React's `useBoundProp` hook.
+ *
+ * Must be called within an injection context (constructor, factory, etc.)
+ * where SpecStateService is available.
+ *
+ * @example
+ * ```ts
+ * // In a component that receives bindings
+ * private stateService = inject(SpecStateService);
+ *
+ * // Create bound prop for a form input
+ * get emailBinding(): BoundProp<string> {
+ *   return boundProp(
+ *     this.element().props['value'] as string,
+ *     this.bindings()?.['value'],
+ *     this.stateService,
+ *   );
+ * }
+ *
+ * onInput(event: Event) {
+ *   this.emailBinding.setValue((event.target as HTMLInputElement).value);
+ * }
+ * ```
+ */
+function boundProp(propValue, bindingPath, stateService) {
+    return {
+        value: propValue,
+        setValue: (value) => {
+            if (bindingPath) {
+                stateService.set(bindingPath, value);
+            }
+        },
+    };
+}
+/**
+ * Create a two-way bound prop helper using dependency injection.
+ * Convenience wrapper that injects SpecStateService automatically.
+ *
+ * Must be called within an injection context.
+ *
+ * @example
+ * ```ts
+ * // In a component constructor or field initializer
+ * private createBound = injectBoundProp();
+ *
+ * get emailBinding() {
+ *   return this.createBound(
+ *     this.element().props['value'] as string,
+ *     this.bindings()?.['value'],
+ *   );
+ * }
+ * ```
+ */
+function injectBoundProp() {
+    const stateService = inject(SpecStateService);
+    return (propValue, bindingPath) => boundProp(propValue, bindingPath, stateService);
+}
+
+/**
+ * Type guard that validates a data part payload looks like a valid SpecDataPart.
+ */
+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.
+ * Returns null if no spec data parts are present.
+ *
+ * Works with the AI SDK's UIMessage.parts array.
+ *
+ * @example
+ * ```ts
+ * const spec = buildSpecFromParts(message.parts);
+ * if (spec) {
+ *   // render with <json-renderer [spec]="spec" />
+ * }
+ * ```
+ */
+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.
+ *
+ * @example
+ * ```ts
+ * const text = getTextFromParts(message.parts);
+ * ```
+ */
+function getTextFromParts(parts) {
+    return parts
+        .filter((p) => p.type === 'text' && typeof p.text === 'string')
+        .map((p) => p.text.trim())
+        .filter(Boolean)
+        .join('\n\n');
+}
+/**
+ * Convert a flat element list to a Spec.
+ * Input elements use key/parentKey to establish identity and relationships.
+ *
+ * @example
+ * ```ts
+ * const spec = flatToTree([
+ *   { key: 'root', type: 'Stack', props: {}, children: [] },
+ *   { key: 'text', parentKey: 'root', type: 'Text', props: { content: 'Hello' } },
+ * ]);
+ * ```
+ */
+function flatToTree(elements) {
+    const elementMap = {};
+    let root = '';
+    for (const element of elements) {
+        elementMap[element.key] = {
+            type: element.type,
+            props: element.props,
+            children: [],
+            visible: element.visible,
+        };
+    }
+    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 };
+}
+/**
+ * Extract both spec and text from message parts.
+ * Combines buildSpecFromParts and getTextFromParts.
+ *
+ * @example
+ * ```ts
+ * const { spec, text, hasSpec } = extractFromParts(message.parts);
+ * ```
+ */
+function extractFromParts(parts) {
+    const spec = buildSpecFromParts(parts);
+    const text = getTextFromParts(parts);
+    const hasSpec = spec !== null && Object.keys(spec.elements || {}).length > 0;
+    return { spec, text, hasSpec };
+}
+
+/*
+ * Public API Surface of @ng-render/angular
+ */
+// Schema
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionDispatcherService, ChildrenOutletDirective, ConfirmDialogComponent, ElementRendererComponent, FallbackComponent, JsonRendererComponent, NG_RENDER_ACTION_HANDLERS, NG_RENDER_FALLBACK, NG_RENDER_NAVIGATE, NG_RENDER_REGISTRY, RepeatScopeService, SpecStateService, ValidationService, VisibilityService, applyPatch, boundProp, buildSpecFromParts, createChatUI, createUIStream, defineRegistry, extractFromParts, flatToTree, getTextFromParts, injectBoundProp, provideNgRender, schema };
+//# sourceMappingURL=ng-render-angular.mjs.map