ngx-json-render 0.2.1 → 0.4.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, 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 */ []));
 /**
@@ -18,6 +18,11 @@ class JsonRenderRootContext {
     registry = EMPTY;
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     fallback = EMPTY;
+    /**
+     * Caps on what the spec may cost the browser. Read as the tree renders, so
+     * they apply whatever `validate` is set to.
+     */
+    limits = EMPTY;
     /** External store (controlled mode). */
     store = EMPTY;
     /** Initial state (uncontrolled mode); falls back to `spec.state`. */
@@ -273,29 +278,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 +417,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 +502,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 +518,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 +627,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 +709,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 +783,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,11 +972,26 @@ 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.
  */
 const REPEAT_SCOPE = new InjectionToken('ngx-json-render REPEAT_SCOPE');
+/**
+ * This element's position in the render tree. Provided by `<jr-element>` for
+ * everything it renders below itself, so each element can see its own depth
+ * and its own ancestry.
+ *
+ * @internal Not part of the public API: it exists so the renderer can refuse
+ * to draw an element that is its own ancestor, and to enforce
+ * `renderLimits.maxDepth`.
+ */
+const RENDER_PATH = new InjectionToken('ngx-json-render RENDER_PATH');
 /**
  * Inject the render context inside a catalog component.
  *
@@ -802,6 +1013,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.
@@ -820,6 +1052,53 @@ function reportActionError(error) {
         return;
     console.error(error);
 }
+/**
+ * Whether `inner` reads strictly deeper into state than `outer` — the state
+ * path of one repeat item nested inside another's.
+ *
+ * `null` is the world outside any repeat, so stepping into one is always
+ * progress. Below that it is a prefix test on the resolved path, and the
+ * trailing separator is what keeps `/tree/10` from counting as a step inside
+ * `/tree/1`.
+ */
+function descendsInto(outer, inner) {
+    if (inner === null)
+        return false;
+    if (outer === null)
+        return true;
+    return inner.startsWith(`${outer}/`);
+}
+/**
+ * Whether this element renders itself again without getting anywhere — the
+ * one arrangement that cannot terminate.
+ *
+ * An element reaching itself is not by itself a defect. It is how a tree gets
+ * drawn — a comment thread, a file browser, a nested menu — where each pass
+ * repeats over a path relative to the item it is already inside and so reads
+ * one level further into the data. That ends when the data does.
+ *
+ * What separates the two is whether the repeat descended. Compare against the
+ * nearest occurrence above: `/tree/0` then `/tree/0/children/1` is a tree
+ * walking down, while `/items/0` then `/items/1` is a spec repeating over a
+ * fixed array inside itself, and `/items/0` twice is one with no repeat
+ * between the passes at all. Only the first can run out.
+ */
+function repeatsItself(path) {
+    for (let step = path.parent; step !== null; step = step.parent) {
+        if (step.key !== path.key)
+            continue;
+        return !descendsInto(step.scopePath, path.scopePath);
+    }
+    return false;
+}
+/** The chain from the root down to `path`, as a line a human can follow. */
+function describePath(path) {
+    const keys = [];
+    for (let step = path; step !== null; step = step.parent) {
+        keys.push(step.key);
+    }
+    return keys.reverse().join(' \u2192 ');
+}
 /**
  * Renders a single spec element: evaluates visibility, resolves prop
  * expressions against the state model, wires event/watch bindings, and
@@ -833,6 +1112,7 @@ class JrElement {
     state = inject(JsonRenderStateService);
     actions = inject(JsonRenderActionsService);
     repeatScope = inject(REPEAT_SCOPE, { optional: true });
+    parentPath = inject(RENDER_PATH, { optional: true });
     devtoolsActive = injectDevtoolsActive();
     /** The raw (unresolved) element from the spec. */
     rawElement = computed(() => this.root.spec()?.elements?.[this.elementKey()], ...(ngDevMode ? [{ debugName: "rawElement" }] : /* istanbul ignore next */ []));
@@ -881,6 +1161,39 @@ class JrElement {
     }, ...(ngDevMode ? [{ debugName: "entry" }] : /* istanbul ignore next */ []));
     component = computed(() => this.entry()?.component ?? null, ...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
     devtoolsKey = computed(() => this.devtoolsActive() ? this.elementKey() : null, ...(ngDevMode ? [{ debugName: "devtoolsKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Where this element sits in the tree. Passed down to everything it renders
+     * below itself, which is what lets each element see its own ancestry
+     * without the renderer holding a registry of who is drawing what.
+     */
+    path = computed(() => {
+        const parent = this.parentPath?.() ?? null;
+        return {
+            key: this.elementKey(),
+            depth: (parent?.depth ?? 0) + 1,
+            scopePath: this.repeatScope?.basePath() ?? null,
+            parent,
+        };
+    }, ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    /**
+     * Why this element is not drawn, or null when it is.
+     *
+     * The cycle half is unconditional — not something `validate` turns on. An
+     * element that renders itself without reading any deeper renders forever,
+     * and a spec that never stops rendering takes the tab with it; refusing to
+     * draw the repetition is the only outcome that leaves anything on screen.
+     * It costs one walk up a chain of parents, bounded by `maxDepth` where one
+     * is set and by the spec's own nesting where it is not.
+     */
+    refusal = computed(() => {
+        const path = this.path();
+        if (repeatsItself(path))
+            return 'cycle';
+        const maxDepth = this.root.limits()?.maxDepth;
+        if (maxDepth !== undefined && path.depth > maxDepth)
+            return 'depth';
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "refusal" }] : /* istanbul ignore next */ []));
     renderCtx = {
         element: this.resolvedElement,
         props: computed(() => this.resolvedElement()?.props ?? {}),
@@ -899,10 +1212,31 @@ 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 },
+            { provide: RENDER_PATH, useValue: this.path },
+        ],
         parent: inject(Injector),
     });
     constructor() {
+        // Warn (once) when this element is refused. Both reasons are silent
+        // failures on screen — something the spec asked for is missing — so
+        // neither should be silent in the console.
+        let warnedRefusal = false;
+        effect(() => {
+            const reason = this.refusal();
+            if (!reason || warnedRefusal)
+                return;
+            warnedRefusal = true;
+            const path = untracked(this.path);
+            if (reason === 'cycle') {
+                console.warn(`[ngx-json-render] Cycle in the spec: ${describePath(path)}. "${path.key}" renders itself again without reading any deeper into state${path.scopePath === null ? '' : ` (still at "${path.scopePath}")`}, so it never ends. It is not rendered again; everything above it still is. A tree that recurses needs a repeat with a relative statePath, like {"$item": "children"}.`);
+            }
+            else {
+                console.warn(`[ngx-json-render] renderLimits.maxDepth (${untracked(this.root.limits)?.maxDepth}) reached at ${describePath(path)}. "${path.key}" and anything below it do not render.`);
+            }
+        });
         // Warn (once per type) about unknown component types.
         const warnedTypes = new Set();
         effect(() => {
@@ -935,6 +1269,14 @@ class JrElement {
         });
         // Watch effect: fire actions when watched state paths change.
         effect((onCleanup) => {
+            // A refused element does not act, not just draw nothing. `watch` is the
+            // one thing an element does without being on screen, so leaving it wired
+            // would let the element past `maxDepth` — or the one that closes a cycle
+            // — keep dispatching actions from behind a cap that was supposed to have
+            // stopped it. Reading the signal here also unwires it if the refusal
+            // arrives later, when the limits change.
+            if (this.refusal())
+                return;
             const watchConfig = this.rawElement()?.watch;
             if (!watchConfig)
                 return;
@@ -1021,7 +1363,7 @@ class JrElement {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: JrElement, isStandalone: true, selector: "jr-element", inputs: { elementKey: { classPropertyName: "elementKey", publicName: "elementKey", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @if (rawElement() && visible() && component()) {
+    @if (!refusal() && rawElement() && visible() && component()) {
       @if (devtoolsKey(); as dk) {
         <span [attr.data-jr-key]="dk" style="display: contents">
           <ng-container *ngComponentOutlet="component(); injector: outletInjector" />
@@ -1035,7 +1377,7 @@ class JrElement {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrElement, decorators: [{
             type: Component,
             args: [{ selector: 'jr-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet], template: `
-    @if (rawElement() && visible() && component()) {
+    @if (!refusal() && rawElement() && visible() && component()) {
       @if (devtoolsKey(); as dk) {
         <span [attr.data-jr-key]="dk" style="display: contents">
           <ng-container *ngComponentOutlet="component(); injector: outletInjector" />
@@ -1047,6 +1389,332 @@ 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 }] }] } });
 
+/**
+ * A hostile spec can fail the catalog's schema in as many places as it has
+ * properties. Report enough to act on and stop; the spec is refused either
+ * way, and a console full of them helps nobody.
+ */
+const MAX_REPORTED_PROP_ISSUES = 20;
+/**
+ * Whether this element's `repeat` descends into the item it is already inside,
+ * rather than re-reading a fixed path in state.
+ *
+ * A relative statePath — `{"$item": "children"}` — resolves against the
+ * enclosing item, so each pass reads one level further into the data and the
+ * recursion ends where the data does. A plain string is absolute: every pass
+ * reads the same array, and a spec that re-enters itself through one never
+ * terminates.
+ */
+function descendsIntoItems(element) {
+    const repeat = element.repeat;
+    return repeat !== undefined && typeof repeat.statePath !== 'string';
+}
+/** Every key an element renders below itself: `children` plus every slot. */
+function childKeysOf(element) {
+    const slots = element.slots;
+    if (!slots)
+        return element.children ?? [];
+    const fromSlots = Object.values(slots).flat();
+    return element.children ? [...element.children, ...fromSlots] : fromSlots;
+}
+/**
+ * Walk the element graph once for depth and cycles.
+ *
+ * Iterative on purpose. A recursive walk would blow the stack on exactly the
+ * specs this exists to catch, which would make the guard a second way to
+ * crash rather than the fix for the first.
+ *
+ * Depth is measured from `spec.root`, because that is what renders. Cycles
+ * are swept for across every element, including the ones no parent reaches:
+ * an unreachable cycle is still a defect, and one edit away from a reachable
+ * one.
+ *
+ * Not every element that reaches itself is a defect, though. Drawing a tree —
+ * a comment thread, a file browser, a nested menu — means an element that
+ * repeats over a relative path and renders itself for each item, and that ends
+ * when the data does. A back edge is only reported when nothing along it
+ * descends into the data, which is the case that cannot end.
+ *
+ * `depthBelow` is memoised per element, so a shared subtree costs one visit
+ * instead of one per path into it — without that, a spec whose elements each
+ * name the next two is exponential to check. The memo makes the reported
+ * depth a lower bound once a cycle has been cut, since which edge closes the
+ * cycle depends on the order the walk reached it. The cycle is reported as an
+ * error of its own, which is the finding worth acting on.
+ */
+function analyseSpecGraph(spec) {
+    const elements = spec.elements ?? {};
+    const cycles = new Set();
+    const depthBelow = new Map();
+    const onPath = new Set();
+    const walkFrom = (start) => {
+        const first = elements[start];
+        if (!first || depthBelow.has(start))
+            return;
+        const stack = [
+            { key: start, kids: childKeysOf(first), next: 0, deepest: 0 },
+        ];
+        onPath.add(start);
+        while (stack.length > 0) {
+            const frame = stack[stack.length - 1];
+            if (frame.next < frame.kids.length) {
+                const childKey = frame.kids[frame.next++];
+                const memo = depthBelow.get(childKey);
+                if (memo !== undefined) {
+                    frame.deepest = Math.max(frame.deepest, memo);
+                    continue;
+                }
+                // A child that closes the cycle is not followed — that is what keeps
+                // this walk finite — and not counted towards depth either.
+                if (onPath.has(childKey)) {
+                    const from = stack.findIndex((frame) => frame.key === childKey);
+                    const descends = stack
+                        .slice(from)
+                        .some((frame) => descendsIntoItems(elements[frame.key]));
+                    if (!descends)
+                        cycles.add(childKey);
+                    continue;
+                }
+                const child = elements[childKey];
+                // A child the spec never defined is validateSpec's finding, not ours.
+                if (!child)
+                    continue;
+                onPath.add(childKey);
+                stack.push({
+                    key: childKey,
+                    kids: childKeysOf(child),
+                    next: 0,
+                    deepest: 0,
+                });
+                continue;
+            }
+            stack.pop();
+            onPath.delete(frame.key);
+            const depth = frame.deepest + 1;
+            depthBelow.set(frame.key, depth);
+            const parent = stack[stack.length - 1];
+            if (parent)
+                parent.deepest = Math.max(parent.deepest, depth);
+        }
+    };
+    if (spec.root)
+        walkFrom(spec.root);
+    const depth = (spec.root ? depthBelow.get(spec.root) : undefined) ?? 0;
+    for (const key of Object.keys(elements))
+        walkFrom(key);
+    return { depth, cycles: [...cycles] };
+}
+/** Report a cycle, naming the element that is its own descendant. */
+function cycleIssue(key) {
+    return {
+        severity: 'error',
+        code: 'cycle',
+        elementKey: key,
+        message: `Element "${key}" renders itself against the same data, which never terminates. The cycle is broken where it closes — the repeated element does not render a second time — but the spec cannot be drawn as written. A tree that recurses needs a repeat with a relative statePath, like {"$item": "children"}.`,
+    };
+}
+/** Report a breached element-count cap. */
+function elementCountIssue(count, limit) {
+    return {
+        severity: 'error',
+        code: 'too_many_elements',
+        message: `Spec has ${count} elements, over the limit of ${limit}. Nothing is rendered: renderLimits.maxElements is a cap on the whole spec.`,
+    };
+}
+/** Report a breached depth cap. */
+function depthIssue(depth, limit) {
+    return {
+        severity: 'error',
+        code: 'too_deep',
+        message: `Spec nests ${depth} levels deep, over the limit of ${limit}. Elements below level ${limit} do not render.`,
+    };
+}
+/**
+ * Check a spec against a catalog: the component types it names, and then the
+ * catalog's own schema.
+ *
+ * The schema pass is skipped while a type is unknown. A catalog schema keys
+ * its element shapes off `type`, so one name it does not recognise turns into
+ * a pile of prop errors describing a component that was never the point.
+ */
+function catalogIssues(spec, catalog) {
+    const issues = [];
+    const known = new Set(catalog.componentNames);
+    for (const [key, element] of Object.entries(spec.elements ?? {})) {
+        if (known.has(element.type))
+            continue;
+        issues.push({
+            severity: 'error',
+            code: 'unknown_component',
+            elementKey: key,
+            message: `Element "${key}" has type "${element.type}", which this catalog does not define. Nothing renders for it.`,
+        });
+    }
+    if (issues.length > 0)
+        return issues;
+    const result = catalog.validate(spec);
+    if (result.success)
+        return issues;
+    return propIssues(result.error);
+}
+/**
+ * Turn whatever the catalog's schema reported into issues.
+ *
+ * Read defensively rather than typed against the schema library: the shape
+ * below (`issues`, each with `path` and `message`) is what every version of
+ * it has produced, and a renderer that threw while explaining a bad spec
+ * would be the worse failure.
+ */
+function propIssues(error) {
+    const raw = error?.issues;
+    if (!Array.isArray(raw))
+        return [];
+    return raw.slice(0, MAX_REPORTED_PROP_ISSUES).map((entry) => {
+        const item = entry;
+        const path = Array.isArray(item.path) ? item.path : [];
+        const message = typeof item.message === 'string' ? item.message : 'is not valid';
+        // Paths are rooted at the spec, so `elements.<key>.props.<prop>` names the
+        // element in its second segment.
+        const elementKey = path[0] === 'elements' && typeof path[1] === 'string'
+            ? path[1]
+            : undefined;
+        const where = path.length > 0 ? path.join('.') : 'spec';
+        return {
+            severity: 'error',
+            code: 'invalid_props',
+            ...(elementKey === undefined ? {} : { elementKey }),
+            message: `${where}: ${message}`,
+        };
+    });
+}
+
+const CLEAN = {
+    spec: null,
+    issues: [],
+    fixes: [],
+    hasErrors: false,
+    blocked: false,
+};
+/**
+ * Check a spec the way `validate` and `renderLimits` ask 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.
+ *
+ * Note what is *not* here: cycles are broken as the tree renders, whatever
+ * this returns, because a spec that never stops rendering is a crash rather
+ * than an opinion about quality. This reports them so an app can see them.
+ */
+function checkSpec(spec, mode, options = {}) {
+    if (!spec)
+        return CLEAN;
+    const limits = options.limits ?? null;
+    const wantsStructure = mode !== 'off';
+    // `maxRepeatItems` caps a live state array, which no amount of reading the
+    // spec can predict — it is enforced as the repeat expands, not here.
+    const maxElements = limits?.maxElements;
+    const maxDepth = limits?.maxDepth;
+    if (!wantsStructure && maxElements === undefined && maxDepth === undefined) {
+        return { spec, issues: [], fixes: [], hasErrors: false, blocked: false };
+    }
+    // The order below is the point of this function, not an accident of it.
+    //
+    // Core's `validateSpec` walks the element tree by recursion, so the specs
+    // that most need a limit are the ones that would overflow the stack proving
+    // they exceed it. Each cheap, non-recursive cap therefore runs first and can
+    // stop the expensive check from being attempted at all: count, then depth —
+    // measured by a walk of our own that uses an explicit stack — and only then
+    // the structural pass.
+    //
+    // `autoFixSpec` only relocates fields inside `props` and never touches
+    // `children` or `slots`, so measuring the graph before fixing it measures
+    // the same graph.
+    if (maxElements !== undefined) {
+        const count = Object.keys(spec.elements ?? {}).length;
+        if (count > maxElements) {
+            const issue = elementCountIssue(count, maxElements);
+            return {
+                spec,
+                issues: [issue],
+                fixes: [],
+                hasErrors: true,
+                blocked: true,
+            };
+        }
+    }
+    const issues = [];
+    let tooDeep = false;
+    if (wantsStructure || maxDepth !== undefined) {
+        const graph = analyseSpecGraph(spec);
+        if (maxDepth !== undefined && graph.depth > maxDepth) {
+            tooDeep = true;
+            issues.push(depthIssue(graph.depth, maxDepth));
+        }
+        if (wantsStructure) {
+            for (const key of graph.cycles)
+                issues.push(cycleIssue(key));
+        }
+    }
+    // A spec past its depth cap is not handed to the recursive checks. The cap
+    // is the finding worth having, and it renders truncated either way.
+    const fixed = wantsStructure && !tooDeep
+        ? autoFixSpec(spec, { lossy: false })
+        : { spec, fixes: [] };
+    if (wantsStructure && !tooDeep) {
+        issues.push(...validateSpec(fixed.spec).issues);
+        if (options.catalog) {
+            issues.push(...catalogIssues(fixed.spec, options.catalog));
+        }
+    }
+    return {
+        spec: fixed.spec,
+        issues,
+        fixes: fixed.fixes,
+        hasErrors: issues.some((issue) => issue.severity === 'error'),
+        blocked: false,
+    };
+}
+/**
+ * Render issues as one indented block, errors and warnings alike.
+ *
+ * Core's `formatSpecIssues` drops warnings and only accepts core's own issue
+ * codes, so it cannot describe what this package reports. Use this instead
+ * when showing `issues()` to a developer.
+ */
+function formatSpecCheckIssues(issues) {
+    return issues
+        .map((issue) => `  ${issue.severity === 'error' ? 'error  ' : 'warning'} ${issue.elementKey ? `[${issue.elementKey}] ` : ''}${issue.message}`)
+        .join('\n');
+}
+/**
+ * Report a check to the console: fixes as information, issues at the severity
+ * the outcome gives them. A spec that will not render — refused by a limit,
+ * or by `strict` — is reported as an error, because something the developer
+ * asked for is now missing from the screen; one that renders anyway is a
+ * warning.
+ */
+function reportSpecCheck(check, mode) {
+    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${formatSpecCheckIssues(check.issues)}`;
+    if (check.blocked) {
+        console.error(`${report}\nNothing is rendered: the spec is over a renderLimits cap.`);
+    }
+    else 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 +1743,40 @@ 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 */ []));
+    /**
+     * Caps on what the spec may cost the browser: `maxElements`, `maxDepth` and
+     * `maxRepeatItems`. Unset by default, and each field is independently
+     * optional.
+     *
+     * Unlike `validate`, these are enforced in every mode — a number the app
+     * chose is a control, not a report. A spec over `maxElements` renders
+     * nothing; `maxDepth` and `maxRepeatItems` truncate where they are hit.
+     * They apply while `loading` too: a partial spec is a subset of the
+     * finished one, so a cap can only ever fire early, never falsely.
+     */
+    renderLimits = input(null, ...(ngDevMode ? [{ debugName: "renderLimits" }] : /* istanbul ignore next */ []));
+    /**
+     * The catalog the spec was generated for. Given one, `validate` also checks
+     * what structure alone cannot: that every `type` is a component the catalog
+     * defines, and that the props match its schema.
+     *
+     * Only read when `validate` is on, and — like the rest of the check —
+     * skipped while `loading`.
+     */
+    catalog = input(null, ...(ngDevMode ? [{ debugName: "catalog" }] : /* istanbul ignore next */ []));
     /**
      * Initial state model (uncontrolled mode). Defaults to `spec.state`.
      * Ignored when `store` is provided.
@@ -1100,12 +1802,24 @@ 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(), {
+        limits: this.renderLimits(),
+        catalog: this.catalog(),
+    }), ...(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;
+        root.limits = this.renderLimits;
         root.store = this.store;
         root.initialState = computed(() => this.state() ?? this.spec()?.state ?? {}, ...(ngDevMode ? [{ debugName: "initialState" }] : /* istanbul ignore next */ []));
         root.handlers = this.handlers;
@@ -1122,14 +1836,64 @@ 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, the limits or the loading flag
+        // change. Silent while loading — a limit can fire on a spec that is still
+        // arriving, and reporting it on every patch would bury the one report
+        // that describes the finished spec.
+        effect(() => {
+            if (this.loading())
+                return;
+            reportSpecCheck(this.checked(), this.validate());
+        });
     }
     rootKey = computed(() => {
-        const spec = this.spec();
+        const checked = this.checked();
+        // A spec over an enforced cap does not render in any mode. Whether to
+        // check was the app's decision; once it has made it, honouring the answer
+        // is not also `validate`'s to decide.
+        if (checked.blocked)
+            return null;
+        // 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 }, renderLimits: { classPropertyName: "renderLimits", publicName: "renderLimits", isSignal: true, isRequired: false, transformFunction: null }, catalog: { classPropertyName: "catalog", publicName: "catalog", 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 +1903,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 +1929,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 }] }], renderLimits: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderLimits", required: false }] }], catalog: [{ type: i0.Input, args: [{ isSignal: true, alias: "catalog", 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
@@ -1241,13 +2017,43 @@ class JrChildren {
         }
         return resolved;
     }, ...(ngDevMode ? [{ debugName: "repeatBasePath" }] : /* istanbul ignore next */ []));
-    repeatItems = computed(() => {
+    /** Every item the repeat's state array holds, before any cap. */
+    allRepeatItems = computed(() => {
         const basePath = this.repeatBasePath();
         if (basePath === undefined)
             return [];
         return (getByPath(this.state.state(), basePath) ?? []);
+    }, ...(ngDevMode ? [{ debugName: "allRepeatItems" }] : /* istanbul ignore next */ []));
+    /**
+     * The items this repeat actually renders.
+     *
+     * `repeat` iterates a state array the spec may itself have supplied, which
+     * is the one place a spec sizes the render tree out of data rather than out
+     * of its own structure — so the cap has to be applied here, as it expands,
+     * rather than anywhere a spec can be inspected up front.
+     */
+    repeatItems = computed(() => {
+        const items = this.allRepeatItems();
+        const max = this.root.limits()?.maxRepeatItems;
+        return max !== undefined && items.length > max
+            ? items.slice(0, max)
+            : items;
     }, ...(ngDevMode ? [{ debugName: "repeatItems" }] : /* istanbul ignore next */ []));
     constructor() {
+        // Warn (once) when the cap holds items back. Reading the count only after
+        // the two cheap guards keeps the effect from tracking the state array at
+        // all once there is nothing left to say.
+        let warnedRepeatCap = false;
+        effect(() => {
+            const max = this.root.limits()?.maxRepeatItems;
+            if (max === undefined || warnedRepeatCap)
+                return;
+            const total = this.allRepeatItems().length;
+            if (total <= max)
+                return;
+            warnedRepeatCap = true;
+            console.warn(`[ngx-json-render] renderLimits.maxRepeatItems (${max}) reached: "${untracked(this.repeatBasePath)}" holds ${total} items, so ${total - max} of them do not render.`);
+        });
         // Warn (once per key) about children referencing missing elements.
         const warned = new Set();
         effect(() => {
@@ -1891,6 +2697,12 @@ 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 checkOptions = {
+        limits: options.renderLimits ?? null,
+        catalog: options.catalog ?? null,
+    };
     const session = createStreamSession();
     inject(DestroyRef).onDestroy(() => session.cancel());
     const stop = () => {
@@ -1905,6 +2717,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 +2725,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 +2756,29 @@ function injectUIStream(options) {
                 fetch: options.fetch,
                 signal: gate.signal,
             }, createLineConsumer(handleLine));
-            gate.commit(() => options.onComplete?.(currentSpec));
+            gate.commit(() => {
+                const check = checkSpec(currentSpec, validate, checkOptions);
+                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.
+                // A limit the app set fails the generation whatever the mode: the
+                // spec it would hand `onComplete` is one the app already said it did
+                // not want rendered.
+                if (check.blocked || (validate === 'strict' && check.hasErrors)) {
+                    const invalid = new Error(`Generated spec failed validation:\n${formatSpecCheckIssues(check.issues)}`);
+                    error.set(invalid);
+                    options.onError?.(invalid);
+                    return;
+                }
+                options.onComplete?.(currentSpec);
+            });
         }
         catch (err) {
             if (isAbortError(err))
@@ -1963,6 +2799,7 @@ function injectUIStream(options) {
         error: error.asReadonly(),
         usage: usage.asReadonly(),
         rawLines: rawLines.asReadonly(),
+        issues: issues.asReadonly(),
         send,
         stop,
         clear,
@@ -1990,6 +2827,12 @@ 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 checkOptions = {
+        limits: options.renderLimits ?? null,
+        catalog: options.catalog ?? null,
+    };
     const session = createStreamSession();
     inject(DestroyRef).onDestroy(() => session.cancel());
     const stop = () => {
@@ -2000,6 +2843,7 @@ function injectChatUI(options) {
         stop();
         messages.set([]);
         error.set(null);
+        issues.set([]);
     };
     const send = async (text) => {
         if (!text.trim())
@@ -2073,13 +2917,36 @@ 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, checkOptions);
+                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)));
+                // A limit the app set fails the generation whatever the mode: the
+                // spec it would hand `onComplete` is one the app already said it did
+                // not want rendered.
+                if (check.blocked || (validate === 'strict' && check.hasErrors)) {
+                    const invalid = new Error(`Generated spec failed validation:\n${formatSpecCheckIssues(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 +2970,7 @@ function injectChatUI(options) {
         messages: messages.asReadonly(),
         isStreaming: isStreaming.asReadonly(),
         error: error.asReadonly(),
+        issues: issues.asReadonly(),
         send,
         stop,
         clear,
@@ -2186,6 +3054,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 +3086,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, formatSpecCheckIssues, 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