ngx-json-render 0.2.1 → 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, removeByPath, addByPath, setByPath, SPEC_DATA_PART_TYPE, 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
@@ -1891,6 +2236,8 @@ function injectUIStream(options) {
     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 = () => {
@@ -1905,6 +2252,7 @@ function injectUIStream(options) {
         error.set(null);
         usage.set(null);
         rawLines.set([]);
+        issues.set([]);
     };
     const send = async (prompt, sendOptions) => {
         const gate = session.begin();
@@ -1912,6 +2260,7 @@ function injectUIStream(options) {
         error.set(null);
         usage.set(null);
         rawLines.set([]);
+        issues.set([]);
         const previousSpec = sendOptions?.previousSpec;
         let currentSpec = previousSpec && previousSpec.root
             ? { ...previousSpec, elements: { ...previousSpec.elements } }
@@ -1942,7 +2291,26 @@ function injectUIStream(options) {
                 fetch: options.fetch,
                 signal: gate.signal,
             }, createLineConsumer(handleLine));
-            gate.commit(() => options.onComplete?.(currentSpec));
+            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))
@@ -1963,6 +2331,7 @@ function injectUIStream(options) {
         error: error.asReadonly(),
         usage: usage.asReadonly(),
         rawLines: rawLines.asReadonly(),
+        issues: issues.asReadonly(),
         send,
         stop,
         clear,
@@ -1990,6 +2359,8 @@ 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 */ []));
+    const issues = signal([], ...(ngDevMode ? [{ debugName: "issues" }] : /* istanbul ignore next */ []));
+    const validate = options.validate ?? 'off';
     const session = createStreamSession();
     inject(DestroyRef).onDestroy(() => session.cancel());
     const stop = () => {
@@ -2000,6 +2371,7 @@ function injectChatUI(options) {
         stop();
         messages.set([]);
         error.set(null);
+        issues.set([]);
     };
     const send = async (text) => {
         if (!text.trim())
@@ -2073,13 +2445,33 @@ function injectChatUI(options) {
                 fetch: options.fetch,
                 signal: gate.signal,
             }, parser);
-            const finalMessage = {
-                id: assistantId,
-                role: 'assistant',
-                text: accumulatedText,
-                spec: hasSpec ? currentSpec : null,
-            };
-            gate.commit(() => options.onComplete?.(finalMessage));
+            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;
+                }
+                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;
+                }
+                options.onComplete?.(finalMessage);
+            });
         }
         catch (err) {
             // Unconditional: however this turn ended, its own bubble goes with it if
@@ -2103,6 +2495,7 @@ function injectChatUI(options) {
         messages: messages.asReadonly(),
         isStreaming: isStreaming.asReadonly(),
         error: error.asReadonly(),
+        issues: issues.asReadonly(),
         send,
         stop,
         clear,
@@ -2186,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
@@ -2214,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