ngx-json-render 0.2.0 → 0.3.0

package/fesm2022/ngx-json-render.mjs

@@ -1,9 +1,9 @@
+import { NgComponentOutlet } from '@angular/common';
 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 { signal, Injectable, inject, computed, untracked, effect, isDevMode, DestroyRef, InjectionToken, input, output, viewChild, afterNextRender, ChangeDetectionStrategy, Component, Injector, forwardRef } from '@angular/core';
+import { createStateStore, getByPath, runValidation, resolveAction, nextActionDispatchId, notifyActionDispatch, notifyActionSettle, executeAction, isDevtoolsActive, subscribeDevtoolsActive, evaluateVisibility, resolveElementProps, resolveBindings, resolveActionParam, autoFixSpec, validateSpec, formatSpecIssues, createDirectiveRegistry, resolveRepeatStatePath, resolveRepeatItemStatePath, removeByPath, addByPath, setByPath, SPEC_DATA_PART_TYPE, nestedToFlat, createMixedStreamParser, defineSchema } from '@json-render/core';
+export { autoFixSpec, createStateStore, formatSpecIssues, nestedToFlat, validateSpec } 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 */ []));
 /**
@@ -273,29 +273,73 @@ function validationConfigEqual(a, b) {
     }
     return true;
 }
+/**
+ * Owner of a registration made through the service's own API rather than by
+ * a field component. Manual registrations release together, which is the
+ * behaviour a caller of `registerField(path, config)` would expect.
+ */
+const MANUAL_OWNER = { manual: 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.
+ *
+ * Registrations are owner-scoped: a path stays registered while at least one
+ * owner holds it, and its config and state are dropped when the last one
+ * releases. A spec that swaps screens or hides fields therefore stops
+ * validating what is no longer on screen.
  */
 class JsonRenderValidationService {
     root = inject(JsonRenderRootContext);
     state = inject(JsonRenderStateService);
     _fieldStates = signal({}, ...(ngDevMode ? [{ debugName: "_fieldStates" }] : /* istanbul ignore next */ []));
     _fieldConfigs = signal({}, ...(ngDevMode ? [{ debugName: "_fieldConfigs" }] : /* istanbul ignore next */ []));
+    /** Live owners per path — the reference count behind a registration. */
+    fieldOwners = new Map();
     /** 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) {
+    /**
+     * Register (or update) a field's validation config.
+     *
+     * @param owner Identity holding the registration — pass the same value to
+     * {@link unregisterField} to release it. Field components pass themselves,
+     * so two components bound to one path each hold their own claim.
+     */
+    registerField(path, config, owner = MANUAL_OWNER) {
+        const owners = this.fieldOwners.get(path);
+        if (owners)
+            owners.add(owner);
+        else
+            this.fieldOwners.set(path, new Set([owner]));
         const prev = untracked(this._fieldConfigs);
         const existing = prev[path];
         if (existing && validationConfigEqual(existing, config))
             return;
         this._fieldConfigs.set({ ...prev, [path]: config });
     }
+    /**
+     * Release one owner's registration of a field. The config and validation
+     * state survive while another owner still holds the path; once the last
+     * one lets go, `validateAll` stops seeing the field.
+     */
+    unregisterField(path, owner = MANUAL_OWNER) {
+        const owners = this.fieldOwners.get(path);
+        if (!owners)
+            return;
+        owners.delete(owner);
+        if (owners.size > 0)
+            return;
+        this.fieldOwners.delete(path);
+        const prev = untracked(this._fieldConfigs);
+        if (path in prev) {
+            const { [path]: _removed, ...rest } = prev;
+            this._fieldConfigs.set(rest);
+        }
+        this.clear(path);
+    }
     /** Validate a single field and record the result. */
     validate(path, config) {
         const currentState = this.state.getSnapshot();
@@ -368,18 +412,39 @@ function injectValidation() {
 /**
  * Field-level validation helper for catalog input components: registers the
  * config and exposes the field's validation state as signals.
+ *
+ * The registration follows the component: it moves when the bound path
+ * changes and is released when the component is destroyed, so a field that
+ * has left the screen no longer takes part in `validateForm`.
  */
 function injectFieldValidation(path, config) {
     const validation = injectValidation();
     const getPath = typeof path === 'function' ? path : () => path;
     const getConfig = typeof config === 'function' ? config : () => config;
+    // Identity of this field's claim on a path. Two components bound to the
+    // same path hold separate claims, so one being destroyed does not
+    // deregister the other.
+    const owner = {};
+    let registeredPath = null;
     effect(() => {
         const p = getPath();
         const c = getConfig();
-        if (p && c) {
-            validation.registerField(p, c);
+        const next = p && c ? p : null;
+        if (registeredPath !== null && registeredPath !== next) {
+            validation.unregisterField(registeredPath, owner);
+            registeredPath = null;
+        }
+        if (next && c) {
+            validation.registerField(next, c, owner);
+            registeredPath = next;
         }
     });
+    inject(DestroyRef).onDestroy(() => {
+        if (registeredPath === null)
+            return;
+        validation.unregisterField(registeredPath, owner);
+        registeredPath = null;
+    });
     const state = computed(() => {
         const current = validation.fieldStates()[getPath()];
         return current ?? { touched: false, validated: false, result: null };
@@ -432,7 +497,7 @@ function deepResolveValue(value, get) {
  * Carries a stable `name` so callers can tell a cancellation apart from a
  * handler failure without matching on the message.
  *
- * @internal Not part of the public API; check `error.name` instead.
+ * @internal Not part of the public API; use {@link isActionCancelled}.
  */
 class ActionCancelledError extends Error {
     constructor() {
@@ -448,9 +513,9 @@ function isActionCancelled(error) {
  * 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`.
+ * `removeState`, `push`, `pop`, `validateForm`, `submitForm`) 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);
@@ -557,19 +622,36 @@ class JsonRenderActionsService {
                 return;
             }
             if (resolved.action === 'validateForm') {
-                if (!this.validation) {
+                if (this.checkForm(resolved) === null) {
                     console.warn('validateForm action was dispatched but no JsonRenderValidationService is available.');
+                }
+                return;
+            }
+            if (resolved.action === 'submitForm') {
+                const valid = this.checkForm(resolved);
+                if (valid === null) {
+                    console.warn('submitForm action was dispatched but no JsonRenderValidationService is available; nothing was submitted.');
                     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;
-                    }
+                // An invalid form stops here, with the errors already written to
+                // state and every field marked validated, so they are on screen.
+                if (!valid)
+                    return;
+                const target = resolved.params?.['action'];
+                if (typeof target !== 'string' || !target) {
+                    console.warn('submitForm needs the action to submit to: { "action": "submitForm", "params": { "action": "saveUser" } }.');
+                    return;
                 }
-                const statePath = resolved.params?.['statePath'] || '/formValidation';
-                set(statePath, { valid, errors });
+                // Dispatched, not called directly, so the submitted action goes
+                // through the same lookup, confirmation, loading state and observers
+                // as any other — submitForm gates it, it does not replace it.
+                await this.execute({
+                    action: target,
+                    params: deepResolveValue(resolved.params?.['params'], get),
+                    confirm: resolved.confirm,
+                    onSuccess: resolved.onSuccess,
+                    onError: resolved.onError,
+                });
                 return;
             }
             const handler = this.lookupHandler(resolved.action);
@@ -622,6 +704,28 @@ class JsonRenderActionsService {
     cancel() {
         untracked(this._pendingConfirmation)?.reject();
     }
+    /**
+     * Validate every registered field and write `{ valid, errors }` to the
+     * action's `statePath` (default `/formValidation`). Returns null when there
+     * is no validation service to ask.
+     *
+     * Shared by `validateForm` and `submitForm`: the two must report the same
+     * thing about the same form, and one implementation is how that stays true.
+     */
+    checkForm(resolved) {
+        if (!this.validation)
+            return null;
+        const valid = this.validation.validateAll();
+        const errors = {};
+        for (const [path, fieldState] of Object.entries(untracked(this.validation.fieldStates))) {
+            if (fieldState.result && !fieldState.result.valid) {
+                errors[path] = fieldState.result.errors;
+            }
+        }
+        const statePath = resolved.params?.['statePath'] || '/formValidation';
+        this.state.set(statePath, { valid, errors });
+        return valid;
+    }
     lookupHandler(name) {
         const direct = this.handlers[name];
         if (direct)
@@ -674,91 +778,178 @@ function injectAction(binding) {
     };
 }
 
+/**
+ * Labels for the default confirmation dialog's buttons, when the spec does not
+ * supply `confirmLabel` / `cancelLabel` of its own.
+ *
+ * They are the only strings this package puts on screen, and they were English
+ * with no way to change them. Override once, in an app's providers:
+ *
+ * ```ts
+ * { provide: JR_CONFIRM_LABELS, useValue: { confirm: 'Подтвердить', cancel: 'Отмена' } }
+ * ```
+ */
+const JR_CONFIRM_LABELS = new InjectionToken('ngx-json-render JR_CONFIRM_LABELS', {
+    providedIn: 'root',
+    factory: () => ({ confirm: 'Confirm', cancel: 'Cancel' }),
+});
+/** The confirmation a replacement dialog component is rendered for. */
+const CONFIRM_CONTEXT = new InjectionToken('ngx-json-render CONFIRM_CONTEXT');
+/**
+ * The component `<json-render>` should render for a `confirm` on an action.
+ * Unset means the packaged {@link JrConfirmDialog}.
+ *
+ * The component is rendered with a {@link CONFIRM_CONTEXT} in its injector, so
+ * it takes no inputs and emits no outputs:
+ *
+ * ```ts
+ * @Component({ template: `<my-modal (ok)="ctx.confirm()" (dismiss)="ctx.cancel()">…` })
+ * export class AppConfirm {
+ *   readonly ctx = injectConfirmContext();
+ * }
+ * // providers: [{ provide: JR_CONFIRM_DIALOG, useValue: AppConfirm }]
+ * ```
+ */
+const JR_CONFIRM_DIALOG = new InjectionToken('ngx-json-render JR_CONFIRM_DIALOG');
+/** Inject the confirmation a replacement dialog component is rendering for. */
+function injectConfirmContext() {
+    const ctx = inject(CONFIRM_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error('injectConfirmContext() must be used inside a component provided through JR_CONFIRM_DIALOG');
+    }
+    return ctx;
+}
+
+let dialogIdCounter = 0;
 /**
  * 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.
+ *
+ * It is a real dialog: `role="dialog"` with `aria-modal`, labelled by its own
+ * title and described by its message, focus moved in on open and returned to
+ * wherever it came from on close, Tab kept inside it and Escape cancelling.
+ * A generated UI can ask for confirmation of something destructive, so a
+ * keyboard or screen-reader user has to be able to answer it.
+ *
+ * Colours come from CSS custom properties with light and dark defaults, so an
+ * app can theme it — `--jr-confirm-surface`, `--jr-confirm-ink`,
+ * `--jr-confirm-muted`, `--jr-confirm-border`, `--jr-confirm-scrim`,
+ * `--jr-confirm-accent`, `--jr-confirm-danger`, `--jr-confirm-on-accent`,
+ * `--jr-confirm-radius` — and replace it outright through
+ * {@link JR_CONFIRM_DIALOG} when that is not enough.
  */
 class JrConfirmDialog {
     config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     confirmed = output();
     cancelled = output();
+    labels = inject(JR_CONFIRM_LABELS);
+    id = dialogIdCounter++;
+    titleId = `jr-confirm-title-${this.id}`;
+    messageId = `jr-confirm-message-${this.id}`;
+    cancelButton = viewChild('cancel', ...(ngDevMode ? [{ debugName: "cancelButton" }] : /* istanbul ignore next */ []));
+    confirmButton = viewChild('confirm', ...(ngDevMode ? [{ debugName: "confirmButton" }] : /* istanbul ignore next */ []));
     isDanger = computed(() => this.config().variant === 'danger', ...(ngDevMode ? [{ debugName: "isDanger" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Whatever was focused when the action fired — usually the control that
+        // dispatched it, which is still in the document behind the dialog.
+        const previous = typeof document !== 'undefined'
+            ? document.activeElement
+            : null;
+        // Cancel takes focus rather than confirm: a dialog exists to interrupt,
+        // and landing on the destructive answer makes a stray Enter destructive.
+        afterNextRender(() => this.cancelButton()?.nativeElement.focus());
+        inject(DestroyRef).onDestroy(() => previous?.focus?.());
+    }
+    /**
+     * Keep Tab inside the dialog. With exactly two buttons the whole trap is
+     * wrapping the ends; a modal that lets focus wander behind it is a modal
+     * only for people using a mouse.
+     */
+    onKeydown(event) {
+        if (event.key !== 'Tab')
+            return;
+        const cancel = this.cancelButton()?.nativeElement;
+        const confirm = this.confirmButton()?.nativeElement;
+        if (!cancel || !confirm)
+            return;
+        const active = event.target;
+        if (event.shiftKey && active === cancel) {
+            event.preventDefault();
+            confirm.focus();
+        }
+        else if (!event.shiftKey && active === confirm) {
+            event.preventDefault();
+            cancel.focus();
+        }
+    }
     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()"
-    >
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.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" }, host: { listeners: { "keydown.escape": "cancelled.emit()" } }, viewQueries: [{ propertyName: "cancelButton", first: true, predicate: ["cancel"], descendants: true, isSignal: true }, { propertyName: "confirmButton", first: true, predicate: ["confirm"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="jr-confirm-scrim" (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)"
+        class="jr-confirm-panel"
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-labelledby]="titleId"
+        [attr.aria-describedby]="messageId"
         (click)="$event.stopPropagation()"
+        (keydown)="onKeydown($event)"
       >
-        <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' }}
+        <h3 class="jr-confirm-title" [id]="titleId">{{ config().title }}</h3>
+        <p class="jr-confirm-message" [id]="messageId">{{ config().message }}</p>
+        <div class="jr-confirm-actions">
+          <button #cancel type="button" class="jr-confirm-cancel" (click)="cancelled.emit()">
+            {{ config().cancelLabel ?? labels.cancel }}
           </button>
           <button
+            #confirm
             type="button"
+            class="jr-confirm-confirm"
+            [class.jr-confirm-danger]="isDanger()"
             (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' }}
+            {{ config().confirmLabel ?? labels.confirm }}
           </button>
         </div>
       </div>
     </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{--jr-confirm-scrim-default: rgba(0, 0, 0, .5);--jr-confirm-surface-default: #ffffff;--jr-confirm-ink-default: #111827;--jr-confirm-muted-default: #6b7280;--jr-confirm-border-default: #d1d5db;--jr-confirm-accent-default: #3b82f6;--jr-confirm-danger-default: #dc2626;--jr-confirm-on-accent-default: #ffffff}@media(prefers-color-scheme:dark){:host{--jr-confirm-scrim-default: rgba(0, 0, 0, .65);--jr-confirm-surface-default: #1f2937;--jr-confirm-ink-default: #f3f4f6;--jr-confirm-muted-default: #9ca3af;--jr-confirm-border-default: #4b5563;--jr-confirm-accent-default: #60a5fa;--jr-confirm-danger-default: #f87171;--jr-confirm-on-accent-default: #111827}}.jr-confirm-scrim{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background-color:var(--jr-confirm-scrim, var(--jr-confirm-scrim-default))}.jr-confirm-panel{width:100%;max-width:400px;padding:24px;border-radius:var(--jr-confirm-radius, 8px);background-color:var(--jr-confirm-surface, var(--jr-confirm-surface-default));color:var(--jr-confirm-ink, var(--jr-confirm-ink-default));box-shadow:0 20px 25px -5px #00000040}.jr-confirm-title{margin:0 0 8px;font-size:18px;font-weight:600}.jr-confirm-message{margin:0 0 24px;color:var(--jr-confirm-muted, var(--jr-confirm-muted-default))}.jr-confirm-actions{display:flex;gap:12px;justify-content:flex-end}.jr-confirm-actions button{padding:8px 16px;border-radius:6px;font:inherit;cursor:pointer}.jr-confirm-cancel{border:1px solid var(--jr-confirm-border, var(--jr-confirm-border-default));background-color:transparent;color:inherit}.jr-confirm-confirm{border:none;background-color:var(--jr-confirm-accent, var(--jr-confirm-accent-default));color:var(--jr-confirm-on-accent, var(--jr-confirm-on-accent-default))}.jr-confirm-confirm.jr-confirm-danger{background-color:var(--jr-confirm-danger, var(--jr-confirm-danger-default))}\n"], 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()"
-    >
+            args: [{ selector: 'jr-confirm-dialog', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(keydown.escape)': 'cancelled.emit()',
+                    }, template: `
+    <div class="jr-confirm-scrim" (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)"
+        class="jr-confirm-panel"
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-labelledby]="titleId"
+        [attr.aria-describedby]="messageId"
         (click)="$event.stopPropagation()"
+        (keydown)="onKeydown($event)"
       >
-        <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' }}
+        <h3 class="jr-confirm-title" [id]="titleId">{{ config().title }}</h3>
+        <p class="jr-confirm-message" [id]="messageId">{{ config().message }}</p>
+        <div class="jr-confirm-actions">
+          <button #cancel type="button" class="jr-confirm-cancel" (click)="cancelled.emit()">
+            {{ config().cancelLabel ?? labels.cancel }}
           </button>
           <button
+            #confirm
             type="button"
+            class="jr-confirm-confirm"
+            [class.jr-confirm-danger]="isDanger()"
             (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' }}
+            {{ config().confirmLabel ?? labels.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"] }] } });
+  `, styles: [":host{--jr-confirm-scrim-default: rgba(0, 0, 0, .5);--jr-confirm-surface-default: #ffffff;--jr-confirm-ink-default: #111827;--jr-confirm-muted-default: #6b7280;--jr-confirm-border-default: #d1d5db;--jr-confirm-accent-default: #3b82f6;--jr-confirm-danger-default: #dc2626;--jr-confirm-on-accent-default: #ffffff}@media(prefers-color-scheme:dark){:host{--jr-confirm-scrim-default: rgba(0, 0, 0, .65);--jr-confirm-surface-default: #1f2937;--jr-confirm-ink-default: #f3f4f6;--jr-confirm-muted-default: #9ca3af;--jr-confirm-border-default: #4b5563;--jr-confirm-accent-default: #60a5fa;--jr-confirm-danger-default: #f87171;--jr-confirm-on-accent-default: #111827}}.jr-confirm-scrim{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background-color:var(--jr-confirm-scrim, var(--jr-confirm-scrim-default))}.jr-confirm-panel{width:100%;max-width:400px;padding:24px;border-radius:var(--jr-confirm-radius, 8px);background-color:var(--jr-confirm-surface, var(--jr-confirm-surface-default));color:var(--jr-confirm-ink, var(--jr-confirm-ink-default));box-shadow:0 20px 25px -5px #00000040}.jr-confirm-title{margin:0 0 8px;font-size:18px;font-weight:600}.jr-confirm-message{margin:0 0 24px;color:var(--jr-confirm-muted, var(--jr-confirm-muted-default))}.jr-confirm-actions{display:flex;gap:12px;justify-content:flex-end}.jr-confirm-actions button{padding:8px 16px;border-radius:6px;font:inherit;cursor:pointer}.jr-confirm-cancel{border:1px solid var(--jr-confirm-border, var(--jr-confirm-border-default));background-color:transparent;color:inherit}.jr-confirm-confirm{border:none;background-color:var(--jr-confirm-accent, var(--jr-confirm-accent-default));color:var(--jr-confirm-on-accent, var(--jr-confirm-on-accent-default))}.jr-confirm-confirm.jr-confirm-danger{background-color:var(--jr-confirm-danger, var(--jr-confirm-danger-default))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], cancelButton: [{ type: i0.ViewChild, args: ['cancel', { isSignal: true }] }], confirmButton: [{ type: i0.ViewChild, args: ['confirm', { isSignal: true }] }] } });
 
 /**
  * Reactive mirror of the json-render devtools-active flag. When active, the
@@ -776,6 +967,11 @@ function injectDevtoolsActive() {
  * Provided by the renderer for every catalog component instance.
  */
 const RENDER_CONTEXT = new InjectionToken('ngx-json-render RENDER_CONTEXT');
+/**
+ * The spec key of the element currently being rendered. Provided alongside
+ * {@link RENDER_CONTEXT} for every catalog component instance.
+ */
+const ELEMENT_KEY = new InjectionToken('ngx-json-render ELEMENT_KEY');
 /**
  * The current repeat scope. Present only for elements rendered inside a
  * `repeat` block.
@@ -802,6 +998,27 @@ function injectRenderContext() {
     }
     return ctx;
 }
+/**
+ * Inject the spec key of the element this component renders.
+ *
+ * Catalog components that collect their children — a tab group discovering
+ * its tabs, for instance — need it to order registrations by the spec's
+ * `children` array rather than by the order the children happened to
+ * announce themselves in.
+ *
+ * @example
+ * ```ts
+ * const key = injectElementKey();
+ * const index = computed(() => parent.element().children?.indexOf(key()) ?? -1);
+ * ```
+ */
+function injectElementKey() {
+    const key = inject(ELEMENT_KEY, { optional: true });
+    if (!key) {
+        throw new Error('injectElementKey() must be used inside a component rendered by <json-render>');
+    }
+    return key;
+}
 /**
  * Inject the current repeat scope, or `null` when the component is not
  * rendered inside a `repeat` block.
@@ -899,7 +1116,10 @@ class JrElement {
         },
     };
     outletInjector = Injector.create({
-        providers: [{ provide: RENDER_CONTEXT, useValue: this.renderCtx }],
+        providers: [
+            { provide: RENDER_CONTEXT, useValue: this.renderCtx },
+            { provide: ELEMENT_KEY, useValue: this.elementKey },
+        ],
         parent: inject(Injector),
     });
     constructor() {
@@ -1047,6 +1267,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
   `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { elementKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementKey", required: true }] }] } });
 
+const CLEAN = {
+    spec: null,
+    issues: [],
+    fixes: [],
+    hasErrors: false,
+};
+/**
+ * Check a spec the way `validate` asks for.
+ *
+ * Only lossless fixes are applied — `visible`, `on` and `repeat` that a model
+ * put inside `props`, which the renderer would otherwise ignore, moved back
+ * where they belong. The lossy ones prune content, and core's own guidance is
+ * to re-prompt rather than accept that; a renderer that silently deleted
+ * elements would be the worse failure.
+ */
+function checkSpec(spec, mode) {
+    if (!spec)
+        return CLEAN;
+    if (mode === 'off') {
+        return { spec, issues: [], fixes: [], hasErrors: false };
+    }
+    const fixed = autoFixSpec(spec, { lossy: false });
+    const { issues } = validateSpec(fixed.spec);
+    return {
+        spec: fixed.spec,
+        issues,
+        fixes: fixed.fixes,
+        hasErrors: issues.some((issue) => issue.severity === 'error'),
+    };
+}
+/**
+ * Report a check to the console: fixes as information, issues at the severity
+ * the mode gives them. `strict` refuses to render, so its errors are reported
+ * as errors; under `warn` the spec still renders and the same finding is a
+ * warning.
+ */
+function reportSpecCheck(check, mode) {
+    if (mode === 'off')
+        return;
+    if (check.fixes.length > 0) {
+        console.info(`[ngx-json-render] Fixed ${check.fixes.length} spec issue(s) before rendering:\n` +
+            check.fixes.map((fix) => `  - ${fix}`).join('\n'));
+    }
+    if (check.issues.length === 0)
+        return;
+    const report = `[ngx-json-render] Spec validation:\n${formatSpecIssues([...check.issues])}`;
+    if (mode === 'strict' && check.hasErrors) {
+        console.error(`${report}\nNothing is rendered: validate="strict".`);
+    }
+    else {
+        console.warn(report);
+    }
+}
+
 /**
  * Renders a json-render {@link Spec} using a registry of Angular components.
  *
@@ -1075,6 +1349,19 @@ class JsonRenderer {
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     /** Fallback component for unknown types. */
     fallback = input(null, ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to check the spec's structure before rendering it, and what to do
+     * about what turns up. Off by default.
+     *
+     * `'warn'` reports the issues and renders anyway; `'strict'` renders nothing
+     * when the spec has errors. Both first apply the lossless fixes — `visible`,
+     * `on` and `repeat` misplaced inside `props` are moved back to the element,
+     * where they take effect instead of being ignored.
+     *
+     * The check is skipped while `loading` is true: a spec that is still
+     * arriving is expected to reference children that have not streamed in yet.
+     */
+    validate = input('off', ...(ngDevMode ? [{ debugName: "validate" }] : /* istanbul ignore next */ []));
     /**
      * Initial state model (uncontrolled mode). Defaults to `spec.state`.
      * Ignored when `store` is provided.
@@ -1100,9 +1387,17 @@ class JsonRenderer {
     stateStore;
     /** The action dispatcher of this renderer. */
     actions;
+    /**
+     * The spec as checked, and what the check found. While `loading`, the mode
+     * is forced off: the spec is still arriving, and the missing children it
+     * refers to are the normal state of a stream, not a defect.
+     */
+    checked = computed(() => checkSpec(this.spec(), this.loading() ? 'off' : this.validate()), ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
     constructor() {
         const root = inject(JsonRenderRootContext);
-        root.spec = this.spec;
+        // The fixed spec, not the input: a `visible` the check moved out of
+        // `props` has to be the one the tree renders, or the fix is cosmetic.
+        root.spec = computed(() => this.checked().spec, ...(ngDevMode ? [{ debugName: "spec" }] : /* istanbul ignore next */ []));
         root.registry = this.registry;
         root.loading = this.loading;
         root.fallback = this.fallback;
@@ -1122,14 +1417,52 @@ class JsonRenderer {
         this.stateStore = inject(JsonRenderStateService);
         inject(JsonRenderValidationService);
         this.actions = inject(JsonRenderActionsService);
+        // Reports once per distinct check rather than once per render: `checked`
+        // only recomputes when the spec, the mode or the loading flag change.
+        effect(() => reportSpecCheck(this.checked(), this.validate()));
     }
     rootKey = computed(() => {
-        const spec = this.spec();
+        const checked = this.checked();
+        // A spec whose errors survived the fixes does not render under `strict`.
+        // Reporting it and drawing half of it anyway is the behaviour the mode
+        // exists to refuse.
+        if (this.validate() === 'strict' && checked.hasErrors)
+            return null;
+        const spec = checked.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 */ []));
+    /**
+     * The app's own dialog, if it provided one. Read once: which component
+     * answers a confirmation is an application decision, not something that
+     * changes between two confirmations.
+     */
+    customDialog = inject(JR_CONFIRM_DIALOG, {
+        optional: true,
+    });
+    injector = inject(Injector);
+    /**
+     * A replacement dialog takes no inputs and emits no outputs — it injects
+     * everything it needs, the way catalog components do. That keeps the seam
+     * one token wide instead of a component contract the renderer would have to
+     * bind to.
+     */
+    confirmInjector = computed(() => {
+        const config = this.pendingConfirm();
+        if (!config)
+            return null;
+        const context = {
+            config,
+            confirm: () => this.actions.confirm(),
+            cancel: () => this.actions.cancel(),
+        };
+        return Injector.create({
+            providers: [{ provide: CONFIRM_CONTEXT, useValue: context }],
+            parent: this.injector,
+        });
+    }, ...(ngDevMode ? [{ debugName: "confirmInjector" }] : /* 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: [
+    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 }, validate: { classPropertyName: "validate", publicName: "validate", 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,
@@ -1139,17 +1472,23 @@ class JsonRenderer {
       <jr-element [elementKey]="key" />
     }
     @if (pendingConfirm(); as confirm) {
-      <jr-confirm-dialog
-        [config]="confirm"
-        (confirmed)="actions.confirm()"
-        (cancelled)="actions.cancel()"
-      />
+      @if (customDialog; as dialog) {
+        <ng-container
+          *ngComponentOutlet="dialog; injector: confirmInjector() ?? undefined"
+        />
+      } @else {
+        <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 });
+  `, 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"] }, { 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: JsonRenderer, decorators: [{
             type: Component,
-            args: [{ selector: 'json-render', changeDetection: ChangeDetectionStrategy.OnPush, imports: [JrElement, JrConfirmDialog], providers: [
+            args: [{ selector: 'json-render', changeDetection: ChangeDetectionStrategy.OnPush, imports: [JrElement, JrConfirmDialog, NgComponentOutlet], providers: [
                         JsonRenderRootContext,
                         JsonRenderStateService,
                         JsonRenderValidationService,
@@ -1159,14 +1498,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       <jr-element [elementKey]="key" />
     }
     @if (pendingConfirm(); as confirm) {
-      <jr-confirm-dialog
-        [config]="confirm"
-        (confirmed)="actions.confirm()"
-        (cancelled)="actions.cancel()"
-      />
+      @if (customDialog; as dialog) {
+        <ng-container
+          *ngComponentOutlet="dialog; injector: confirmInjector() ?? undefined"
+        />
+      } @else {
+        <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"] }] } });
+        }], 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 }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", 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
@@ -1409,33 +1754,6 @@ function createStoreSetState(store) {
     };
 }
 
-/**
- * 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;
-    }
-}
 /**
  * Split a JSON Pointer into its segments, undoing RFC 6901's escapes.
  *
@@ -1452,14 +1770,15 @@ function parseJsonPointer(path) {
  * Replace every node `path` descends through with a shallow copy of itself.
  *
  * `root` must already be private to the caller. Afterwards a mutating write
- * along that same path — `setByPath`, `removeByPath` — only ever touches
- * nodes nobody else is holding, while everything off the path stays shared.
- * That keeps a patch proportional to the depth of its path rather than to the
- * size of the spec, which matters when a stream applies hundreds of them.
+ * along that same path — `setByPath`, `addByPath`, `removeByPath` — only ever
+ * touches nodes nobody else is holding, while everything off the path stays
+ * shared. That keeps a patch proportional to the depth of its path rather than
+ * to the size of the spec, which matters when a stream applies hundreds of
+ * them.
  *
- * Descent stops at anything that is not an object: `setByPath` overwrites
- * such a node outright, and one that does not exist yet is created fresh, so
- * in neither case is there anything of the caller's left to protect.
+ * Descent stops at anything that is not an object: the writers overwrite such
+ * a node outright, and one that does not exist yet is created fresh, so in
+ * neither case is there anything of the caller's left to protect.
  */
 function copyAlongPath(root, path) {
     const segments = parseJsonPointer(path);
@@ -1478,9 +1797,10 @@ function copyAlongPath(root, path) {
     }
 }
 /**
- * Set a value at a spec path (for add/replace operations).
+ * Write a value at a spec path, copying every node on the way so the caller's
+ * previous spec keeps its own contents.
  */
-function setSpecValue(newSpec, path, value) {
+function writeSpecValue(newSpec, path, value, write) {
     if (path === '/root') {
         newSpec.root = value;
         return;
@@ -1495,7 +1815,7 @@ function setSpecValue(newSpec, path, value) {
         const statePath = path.slice('/state'.length); // e.g. "/posts"
         const state = newSpec.state;
         copyAlongPath(state, statePath);
-        setByPath(state, statePath, value);
+        write(state, statePath, value);
         return;
     }
     if (path.startsWith('/elements/')) {
@@ -1505,22 +1825,32 @@ function setSpecValue(newSpec, path, value) {
             return;
         if (pathParts.length === 1) {
             newSpec.elements[elementKey] = value;
+            return;
         }
-        else {
-            const element = newSpec.elements[elementKey];
-            if (element) {
-                const propPath = '/' + pathParts.slice(1).join('/');
-                const newElement = { ...element };
-                copyAlongPath(newElement, propPath);
-                setByPath(newElement, propPath, value);
-                newSpec.elements[elementKey] = newElement;
-            }
-        }
+        // A prop path whose element is not there is dropped rather than
+        // auto-created: the generic writers would happily conjure an element with
+        // props and no `type`, which renders as nothing and warns about an unknown
+        // component. A malformed patch should lose its own write, not add a broken
+        // element to the tree.
+        const element = newSpec.elements[elementKey];
+        if (!element)
+            return;
+        const propPath = '/' + pathParts.slice(1).join('/');
+        const newElement = { ...element };
+        copyAlongPath(newElement, propPath);
+        write(newElement, propPath, value);
+        newSpec.elements[elementKey] = newElement;
+        return;
     }
+    // Any other top-level path is applied verbatim. The spec grammar is
+    // upstream's and grows without this renderer: dropping what we do not
+    // recognise would silently discard a field a newer `@json-render/core`
+    // understands.
+    const root = newSpec;
+    copyAlongPath(root, path);
+    write(root, path, value);
 }
-/**
- * Remove a value at a spec path.
- */
+/** Remove the value at a spec path, with the same copy-on-write discipline. */
 function removeSpecValue(newSpec, path) {
     if (path === '/state') {
         delete newSpec.state;
@@ -1539,39 +1869,38 @@ function removeSpecValue(newSpec, path) {
         if (!elementKey)
             return;
         if (pathParts.length === 1) {
-            const { [elementKey]: _, ...rest } = newSpec.elements;
+            const { [elementKey]: _removed, ...rest } = newSpec.elements;
             newSpec.elements = rest;
+            return;
         }
-        else {
-            const element = newSpec.elements[elementKey];
-            if (element) {
-                const propPath = '/' + pathParts.slice(1).join('/');
-                const newElement = { ...element };
-                copyAlongPath(newElement, propPath);
-                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);
+        const element = newSpec.elements[elementKey];
+        if (!element)
+            return;
+        const propPath = '/' + pathParts.slice(1).join('/');
+        const newElement = { ...element };
+        copyAlongPath(newElement, propPath);
+        removeByPath(newElement, propPath);
+        newSpec.elements[elementKey] = newElement;
+        return;
     }
-    return getByPath(spec, path);
+    const root = newSpec;
+    copyAlongPath(root, path);
+    removeByPath(root, 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.
+ * Apply an RFC 6902 JSON patch to a spec, returning a new spec object and
+ * sharing every subtree the patch did not touch.
+ *
+ * This is the only patch engine in the package: `injectUIStream`,
+ * `injectChatUI` and `buildSpecFromParts` all route through it, so the same
+ * stream produces the same spec whichever one an app reached for. The write
+ * primitives come from `@json-render/core`, so `add` splices into an array
+ * where `replace` overwrites, exactly as the other renderers do.
+ *
+ * One deliberate deviation from RFC 6902: a failing `test` op is a no-op
+ * rather than an abort. These patches come off a model's output, where the
+ * established behaviour — see the line parser — is to drop what does not make
+ * sense and keep rendering rather than kill a generation mid-flight.
  */
 function applyPatch(spec, patch) {
     const newSpec = {
@@ -1580,9 +1909,12 @@ function applyPatch(spec, patch) {
         ...(spec.state ? { state: { ...spec.state } } : {}),
     };
     switch (patch.op) {
-        case 'add':
+        case 'add': {
+            writeSpecValue(newSpec, patch.path, patch.value, addByPath);
+            break;
+        }
         case 'replace': {
-            setSpecValue(newSpec, patch.path, patch.value);
+            writeSpecValue(newSpec, patch.path, patch.value, setByPath);
             break;
         }
         case 'remove': {
@@ -1592,170 +1924,29 @@ function applyPatch(spec, patch) {
         case 'move': {
             if (!patch.from)
                 break;
-            const moveValue = getSpecValue(newSpec, patch.from);
+            const moveValue = getByPath(newSpec, patch.from);
             removeSpecValue(newSpec, patch.from);
-            setSpecValue(newSpec, patch.path, moveValue);
+            writeSpecValue(newSpec, patch.path, moveValue, addByPath);
             break;
         }
         case 'copy': {
             if (!patch.from)
                 break;
-            const copyValue = getSpecValue(newSpec, patch.from);
-            setSpecValue(newSpec, patch.path, copyValue);
+            // RFC 6902 copies the *value*. Handing over the live reference instead
+            // aliases source and target, and a `path` that descends into its own
+            // `from` then makes the spec self-referential — which the next request
+            // discovers when it tries to serialise it into the body.
+            const copyValue = structuredClone(getByPath(newSpec, patch.from));
+            writeSpecValue(newSpec, patch.path, copyValue, addByPath);
             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();
-        const controller = new AbortController();
-        abortController = controller;
-        // A superseded request must not write to the shared signals on its way
-        // out: its `finally` would otherwise clear `isStreaming` while the request
-        // that replaced it is still streaming.
-        const isCurrent = () => abortController === controller;
-        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);
-            }
-        };
-        // Bound, because a bare `globalThis.fetch` called as a plain function is
-        // an illegal invocation in the browser.
-        const doFetch = options.fetch ?? globalThis.fetch.bind(globalThis);
-        try {
-            const response = await doFetch(options.api, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    prompt,
-                    context,
-                    currentSpec,
-                }),
-                signal: controller.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' || !isCurrent()) {
-                return;
-            }
-            const resolvedError = err instanceof Error ? err : new Error(String(err));
-            error.set(resolvedError);
-            options.onError?.(resolvedError);
-        }
-        finally {
-            if (isCurrent()) {
-                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.
@@ -1814,7 +2005,7 @@ function isSpecDataPart(data) {
  * parts are present.
  */
 function buildSpecFromParts(parts) {
-    const spec = { root: '', elements: {} };
+    let spec = { root: '', elements: {} };
     let hasSpec = false;
     for (const part of parts) {
         if (part.type === SPEC_DATA_PART_TYPE) {
@@ -1823,16 +2014,15 @@ function buildSpecFromParts(parts) {
             const payload = part.data;
             if (payload.type === 'patch') {
                 hasSpec = true;
-                applySpecPatch(spec, payload.patch);
+                spec = applyPatch(spec, payload.patch);
             }
             else if (payload.type === 'flat') {
                 hasSpec = true;
-                Object.assign(spec, payload.spec);
+                spec = { ...spec, ...payload.spec };
             }
             else if (payload.type === 'nested') {
                 hasSpec = true;
-                const flat = nestedToFlat(payload.spec);
-                Object.assign(spec, flat);
+                spec = { ...spec, ...nestedToFlat(payload.spec) };
             }
         }
     }
@@ -1876,6 +2066,278 @@ function jsonRenderMessage(parts) {
         }),
     };
 }
+
+function createStreamSession() {
+    let current = null;
+    return {
+        begin() {
+            current?.abort();
+            const controller = new AbortController();
+            current = controller;
+            const isCurrent = () => current === controller;
+            return {
+                signal: controller.signal,
+                isCurrent,
+                commit(write) {
+                    if (isCurrent())
+                        write();
+                },
+            };
+        },
+        cancel() {
+            current?.abort();
+            // Cleared, not just aborted: with no current controller the in-flight
+            // request's gate closes too, so a stop() cannot be undone a moment later
+            // by the request it just cancelled.
+            current = null;
+        },
+    };
+}
+/** True for the rejection `fetch` and a stream reader raise on abort. */
+function isAbortError(error) {
+    return error?.name === 'AbortError';
+}
+/**
+ * Buffer decoded text and hand back whole lines, dropping blank ones. What is
+ * left when the stream ends is flushed as a final line, since a model's last
+ * line often arrives without its newline.
+ */
+function createLineConsumer(onLine) {
+    let buffer = '';
+    return {
+        push(text) {
+            buffer += text;
+            const lines = buffer.split('\n');
+            buffer = lines.pop() ?? '';
+            for (const line of lines) {
+                const trimmed = line.trim();
+                if (trimmed)
+                    onLine(trimmed);
+            }
+        },
+        flush() {
+            const trimmed = buffer.trim();
+            buffer = '';
+            if (trimmed)
+                onLine(trimmed);
+        },
+    };
+}
+/**
+ * Mine an error response for something better to show than its status code.
+ */
+async function readErrorMessage(response) {
+    try {
+        const body = await response.json();
+        if (body.message)
+            return String(body.message);
+        if (body.error)
+            return String(body.error);
+    }
+    catch {
+        // A non-JSON error body is ordinary; the status line still says enough.
+    }
+    return `HTTP error: ${response.status}`;
+}
+/**
+ * POST `body` and feed the streamed response to `consumer` until it ends.
+ *
+ * Both hooks share this so the request lifecycle — error mining, the reader
+ * loop, the decoder's final flush — has one implementation to get right
+ * rather than one per hook that has to be fixed twice.
+ */
+async function streamRequest(request, consumer) {
+    // Bound, because a bare `globalThis.fetch` called as a plain function is
+    // an illegal invocation in the browser.
+    const doFetch = request.fetch ?? globalThis.fetch.bind(globalThis);
+    const response = await doFetch(request.api, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(request.body),
+        signal: request.signal,
+    });
+    if (!response.ok) {
+        throw new Error(await readErrorMessage(response));
+    }
+    const reader = response.body?.getReader();
+    if (!reader) {
+        throw new Error('No response body');
+    }
+    const decoder = new TextDecoder();
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done)
+            break;
+        consumer.push(decoder.decode(value, { stream: true }));
+    }
+    // Without the final, non-streaming decode a multi-byte character split
+    // across the last chunk is dropped instead of surfacing.
+    const tail = decoder.decode();
+    if (tail)
+        consumer.push(tail);
+    consumer.flush();
+}
+
+/**
+ * Parse a single JSON line (patch or metadata). Anything that is not one of
+ * the two is dropped: half-written lines and stray prose are ordinary in a
+ * model's output, and aborting the generation over one would lose the UI
+ * built so far.
+ */
+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,
+                },
+            };
+        }
+        // Parseable JSON is not yet a patch: without this, a stray object would be
+        // recorded as a raw line and handed to the engine as an opless patch.
+        if (typeof parsed?.op !== 'string' || typeof parsed?.path !== 'string') {
+            return null;
+        }
+        return { type: 'patch', patch: parsed };
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * 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 */ []));
+    const issues = signal([], ...(ngDevMode ? [{ debugName: "issues" }] : /* istanbul ignore next */ []));
+    const validate = options.validate ?? 'off';
+    const session = createStreamSession();
+    inject(DestroyRef).onDestroy(() => session.cancel());
+    const stop = () => {
+        session.cancel();
+        isStreaming.set(false);
+    };
+    const clear = () => {
+        // Aborting first is what makes this true: without it the in-flight
+        // request puts its spec straight back on the next patch it applies.
+        stop();
+        spec.set(null);
+        error.set(null);
+        usage.set(null);
+        rawLines.set([]);
+        issues.set([]);
+    };
+    const send = async (prompt, sendOptions) => {
+        const gate = session.begin();
+        isStreaming.set(true);
+        error.set(null);
+        usage.set(null);
+        rawLines.set([]);
+        issues.set([]);
+        const previousSpec = sendOptions?.previousSpec;
+        let currentSpec = previousSpec && previousSpec.root
+            ? { ...previousSpec, elements: { ...previousSpec.elements } }
+            : { root: '', elements: {} };
+        spec.set(currentSpec);
+        const handleLine = (line) => {
+            const parsed = parseLine(line);
+            if (!parsed)
+                return;
+            gate.commit(() => {
+                if (parsed.type === 'usage') {
+                    usage.set(parsed.usage);
+                    return;
+                }
+                rawLines.update((prev) => [...prev, line]);
+                currentSpec = applyPatch(currentSpec, parsed.patch);
+                spec.set(currentSpec);
+            });
+        };
+        try {
+            await streamRequest({
+                api: options.api,
+                body: {
+                    prompt,
+                    context: sendOptions?.context,
+                    currentSpec,
+                },
+                fetch: options.fetch,
+                signal: gate.signal,
+            }, createLineConsumer(handleLine));
+            gate.commit(() => {
+                const check = checkSpec(currentSpec, validate);
+                reportSpecCheck(check, validate);
+                if (check.spec) {
+                    currentSpec = check.spec;
+                    spec.set(currentSpec);
+                }
+                issues.set(check.issues);
+                // Under `strict` a broken generation is a failure, not a result: the
+                // app's onComplete is where a spec usually gets persisted, and handing
+                // it one that cannot render is the outcome this mode is asked to
+                // prevent. The spec stays put so the app can show or discard it.
+                if (validate === 'strict' && check.hasErrors) {
+                    const invalid = new Error(`Generated spec failed validation:\n${formatSpecIssues([...check.issues])}`);
+                    error.set(invalid);
+                    options.onError?.(invalid);
+                    return;
+                }
+                options.onComplete?.(currentSpec);
+            });
+        }
+        catch (err) {
+            if (isAbortError(err))
+                return;
+            const resolvedError = err instanceof Error ? err : new Error(String(err));
+            gate.commit(() => {
+                error.set(resolvedError);
+                options.onError?.(resolvedError);
+            });
+        }
+        finally {
+            gate.commit(() => isStreaming.set(false));
+        }
+    };
+    return {
+        spec: spec.asReadonly(),
+        isStreaming: isStreaming.asReadonly(),
+        error: error.asReadonly(),
+        usage: usage.asReadonly(),
+        rawLines: rawLines.asReadonly(),
+        issues: issues.asReadonly(),
+        send,
+        stop,
+        clear,
+    };
+}
+
 let chatMessageIdCounter = 0;
 function generateChatId() {
     if (typeof crypto !== 'undefined' &&
@@ -1897,24 +2359,24 @@ 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 issues = signal([], ...(ngDevMode ? [{ debugName: "issues" }] : /* istanbul ignore next */ []));
+    const validate = options.validate ?? 'off';
+    const session = createStreamSession();
+    inject(DestroyRef).onDestroy(() => session.cancel());
+    const stop = () => {
+        session.cancel();
+        isStreaming.set(false);
+    };
     const clear = () => {
+        stop();
         messages.set([]);
         error.set(null);
+        issues.set([]);
     };
     const send = async (text) => {
         if (!text.trim())
             return;
-        // Abort any existing request
-        abortController?.abort();
-        const controller = new AbortController();
-        abortController = controller;
-        // See injectUIStream: a superseded request must not clear `isStreaming`
-        // out from under the request that replaced it.
-        const isCurrent = () => abortController === controller;
+        const gate = session.begin();
         const userMessage = {
             id: generateChatId(),
             role: 'user',
@@ -1928,10 +2390,25 @@ function injectChatUI(options) {
             text: '',
             spec: null,
         };
-        // Build messages array for the API (full conversation history + new message).
+        /**
+         * Drop this turn's assistant bubble if it never got any text.
+         *
+         * Deliberately outside the gate: the edit is scoped to this request's own
+         * message id, so it is safe even once a newer request has appended its
+         * turn — and a superseded request is exactly when it is needed, since an
+         * empty bubble left behind renders as a blank reply and is serialised
+         * into every later turn's history.
+         */
+        const dropEmptyPlaceholder = () => {
+            messages.update((prev) => prev.filter((m) => m.id !== assistantId || m.text.length > 0));
+        };
+        // Built before the new turn is appended, so it carries the conversation so
+        // far. Assistant turns with no text are left out: they say nothing to the
+        // model, some providers reject empty content outright, and a turn being
+        // superseded right now may still have its placeholder in the list.
         const historyForApi = [
             ...messages()
-                .filter((m) => m.id !== userMessage.id && m.id !== assistantId)
+                .filter((m) => m.role !== 'assistant' || m.text.length > 0)
                 .map((m) => ({
                 role: m.role,
                 content: m.text,
@@ -1944,98 +2421,96 @@ function injectChatUI(options) {
         error.set(null);
         // Mutable state for accumulating the assistant response
         let accumulatedText = '';
-        const currentSpec = { root: '', elements: {} };
+        let currentSpec = { root: '', elements: {} };
         let hasSpec = false;
-        const snapshotSpec = () => ({
-            root: currentSpec.root,
-            elements: { ...currentSpec.elements },
-            ...(currentSpec.state ? { state: { ...currentSpec.state } } : {}),
+        const parser = createMixedStreamParser({
+            onPatch(patch) {
+                hasSpec = true;
+                // applyPatch returns a fresh spec that shares what the patch did not
+                // touch, so the message can hold it directly — no snapshot copy.
+                currentSpec = applyPatch(currentSpec, patch);
+                const snapshot = currentSpec;
+                gate.commit(() => messages.update((prev) => prev.map((m) => m.id === assistantId ? { ...m, spec: snapshot } : m)));
+            },
+            onText(line) {
+                accumulatedText += (accumulatedText ? '\n' : '') + line;
+                const snapshot = accumulatedText;
+                gate.commit(() => messages.update((prev) => prev.map((m) => m.id === assistantId ? { ...m, text: snapshot } : m)));
+            },
         });
-        // Bound, because a bare `globalThis.fetch` called as a plain function is
-        // an illegal invocation in the browser.
-        const doFetch = options.fetch ?? globalThis.fetch.bind(globalThis);
         try {
-            const response = await doFetch(options.api, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ messages: historyForApi }),
-                signal: controller.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;
-                    }
+            await streamRequest({
+                api: options.api,
+                body: { messages: historyForApi },
+                fetch: options.fetch,
+                signal: gate.signal,
+            }, parser);
+            gate.commit(() => {
+                // A reply that only talked has no spec to check, and reporting
+                // "missing root" for a sentence would be nonsense.
+                const check = checkSpec(hasSpec ? currentSpec : null, validate);
+                if (hasSpec) {
+                    reportSpecCheck(check, validate);
+                    if (check.spec)
+                        currentSpec = check.spec;
                 }
-                catch {
-                    // Ignore JSON parsing errors
+                issues.set(check.issues);
+                const finalMessage = {
+                    id: assistantId,
+                    role: 'assistant',
+                    text: accumulatedText,
+                    spec: hasSpec ? currentSpec : null,
+                };
+                // The reply keeps the fixed spec, so what renders in the bubble is
+                // what was checked.
+                messages.update((prev) => prev.map((m) => (m.id === assistantId ? finalMessage : m)));
+                if (validate === 'strict' && check.hasErrors) {
+                    const invalid = new Error(`Generated spec failed validation:\n${formatSpecIssues([...check.issues])}`);
+                    error.set(invalid);
+                    options.onError?.(invalid);
+                    return;
                 }
-                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));
-                },
+                options.onComplete?.(finalMessage);
             });
-            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' || !isCurrent()) {
+            // Unconditional: however this turn ended, its own bubble goes with it if
+            // nothing was ever said into it. A superseded request usually unwinds by
+            // abort, but one whose stream failed for its own reason after being
+            // replaced would otherwise leave the placeholder behind.
+            dropEmptyPlaceholder();
+            if (isAbortError(err))
                 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);
+            gate.commit(() => {
+                error.set(resolvedError);
+                options.onError?.(resolvedError);
+            });
         }
         finally {
-            if (isCurrent()) {
-                isStreaming.set(false);
-            }
+            gate.commit(() => isStreaming.set(false));
         }
     };
     return {
         messages: messages.asReadonly(),
         isStreaming: isStreaming.asReadonly(),
         error: error.asReadonly(),
+        issues: issues.asReadonly(),
         send,
+        stop,
         clear,
     };
 }
 
+/**
+ * Streaming: applying a model's output to a spec as it arrives.
+ *
+ * - `patch` — the immutable RFC 6902 engine every entry point applies through.
+ * - `transport` — one streamed request lifecycle, shared by both hooks.
+ * - `parts` — adapters for the AI SDK's message parts.
+ * - `ui-stream` / `chat-ui` — the two hooks, composed from the above.
+ */
+
 /**
  * The schema for ngx-json-render.
  *
@@ -2104,6 +2579,10 @@ const schema = defineSchema((s) => ({
             name: 'validateForm',
             description: 'Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }.',
         },
+        {
+            name: 'submitForm',
+            description: "Validate all registered form fields and, only if every one passes, dispatch another action. Params: { action: string, params?: object, statePath?: string }. Writes the same { valid, errors } result as validateForm. Use this on a form's submit button: it is validateForm and the submit in one binding, and the submit is skipped when the form is invalid.",
+        },
     ],
     defaultRules: [
         // Element integrity
@@ -2132,5 +2611,5 @@ const schema = defineSchema((s) => ({
  * 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 };
+export { CONFIRM_CONTEXT, ELEMENT_KEY, JR_CONFIRM_DIALOG, JR_CONFIRM_LABELS, JrChildren, JrConfirmDialog, JrElement, JrRepeatScope, JsonRenderActionsService, JsonRenderRootContext, JsonRenderStateService, JsonRenderValidationService, JsonRenderer, RENDER_CONTEXT, REPEAT_SCOPE, applyPatch, buildSpecFromParts, checkSpec, createStoreSetState, defineRegistry, flatToTree, getTextFromParts, injectAction, injectActions, injectBoundProp, injectChatUI, injectConfirmContext, injectDevtoolsActive, injectElementKey, injectFieldValidation, injectRenderContext, injectRepeatScope, injectStateBinding, injectStateStore, injectStateValue, injectUIStream, injectValidation, isActionCancelled, jsonRenderMessage, schema };
 //# sourceMappingURL=ngx-json-render.mjs.map