ngx-dynamic-entity-builder 2.1.0 → 2.2.0

package/fesm2022/ngx-dynamic-entity-builder.mjs

@@ -56,6 +56,95 @@ function deepClone(value) {
     return JSON.parse(JSON.stringify(value));
 }
 
+/**
+ * Bounded undo/redo over immutable states, with keystroke coalescing.
+ *
+ * Entries hold **references, not clones**. The store builds a new state on every edit and
+ * shares unchanged subtrees, so every entry already refers to immutable objects. Undo puts
+ * the stored object back, so a `record` that follows sees the reference already sitting at
+ * the cursor and skips it — no suppression flag to get out of step.
+ *
+ * Deliberately free of Angular DI: signals need no injection context, so `new BuilderStore()`
+ * keeps working and a test can assert straight after an edit without flushing effects.
+ */
+class BuilderHistory {
+    shapeOf;
+    same;
+    maxEntries;
+    coalesceMs;
+    entries = [];
+    cursor = signal(-1, ...(ngDevMode ? [{ debugName: "cursor" }] : /* istanbul ignore next */ []));
+    length = signal(0, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+    lastEditAt = 0;
+    canUndo = computed(() => this.cursor() > 0, ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+    canRedo = computed(() => this.cursor() < this.length() - 1, ...(ngDevMode ? [{ debugName: "canRedo" }] : /* istanbul ignore next */ []));
+    /**
+     * @param shapeOf  Counts that distinguish a structural edit from a value edit. Two
+     *                 consecutive edits merge only when their shapes match.
+     * @param same     Whether two states are the same state (reference identity, in practice).
+     */
+    constructor(shapeOf, same, maxEntries = 200, coalesceMs = 400) {
+        this.shapeOf = shapeOf;
+        this.same = same;
+        this.maxEntries = maxEntries;
+        this.coalesceMs = coalesceMs;
+    }
+    /**
+     * Fold a state into history.
+     *
+     * Recording the same state twice is harmless. A label bound to a keystroke would otherwise
+     * make undo walk back one character at a time, so two consecutive edits merge when they
+     * land inside `coalesceMs` *and* the shape is unchanged — a rename coalesces, while adding,
+     * removing or moving anything always earns its own step however fast it is clicked.
+     */
+    record(state) {
+        const at = this.cursor();
+        const top = at >= 0 ? this.entries[at] : undefined;
+        if (top && this.same(top.state, state))
+            return;
+        const now = Date.now();
+        const entry = { state, shape: this.shapeOf(state) };
+        if (top && now - this.lastEditAt < this.coalesceMs && top.shape === entry.shape && at === this.entries.length - 1) {
+            this.entries[at] = entry;
+            this.lastEditAt = now;
+            return;
+        }
+        // A new edit after an undo discards the redo branch, which is what every editor does.
+        this.entries.length = at + 1;
+        this.entries.push(entry);
+        // Bounded: a builder session is long, and the oldest steps are the ones nobody walks back to.
+        if (this.entries.length > this.maxEntries) {
+            this.entries.splice(0, this.entries.length - this.maxEntries);
+        }
+        this.cursor.set(this.entries.length - 1);
+        this.length.set(this.entries.length);
+        this.lastEditAt = now;
+    }
+    /** Start again from `state`. Nothing before it is undoable. */
+    reset(state) {
+        this.entries.length = 0;
+        this.entries.push({ state, shape: this.shapeOf(state) });
+        this.cursor.set(0);
+        this.length.set(1);
+        this.lastEditAt = 0;
+    }
+    /** Step back, returning the state to restore, or `null` when there is none. */
+    undo() {
+        return this.canUndo() ? this.moveTo(this.cursor() - 1) : null;
+    }
+    /** Step forward, returning the state to restore, or `null` when there is none. */
+    redo() {
+        return this.canRedo() ? this.moveTo(this.cursor() + 1) : null;
+    }
+    moveTo(index) {
+        const entry = this.entries[index];
+        if (!entry)
+            return null;
+        this.cursor.set(index);
+        return entry.state;
+    }
+}
+
 const clone = deepClone;
 const ID_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
 /**
@@ -66,6 +155,26 @@ const ID_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
  * un-ticked. Nothing writes it any more.
  */
 const LEGACY_EMAIL_PATTERN = '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$';
+/** Counts that distinguish a structural edit from a value edit. */
+function shapeOf({ config, rules }) {
+    let fields = 0;
+    let tabs = 0;
+    const walkFields = (list) => {
+        for (const f of list ?? []) {
+            fields += 1;
+            walkFields(f.children);
+        }
+    };
+    const walkTabs = (list) => {
+        for (const t of list ?? []) {
+            tabs += 1;
+            walkFields(t.fields);
+            walkTabs(t.children);
+        }
+    };
+    walkTabs(config.tabs);
+    return `${tabs}:${fields}:${rules.length}`;
+}
 /**
  * Follow a field rename through a rule reference, in either spelling.
  *
@@ -113,129 +222,34 @@ class BuilderStore {
     /**
      * Roles of the person using the builder — distinct from `availableRoles`, which is the
      * vocabulary a schema may reference. Needed so the SYSTEM_DEFAULT_CAN_EDIT predicate can
-     * be asked a real question; it was previously called with a hardcoded empty array, which
-     * made any role-checking predicate answer false for everyone.
+     * be asked a real question rather than answering for an empty role list.
      */
     _userRoles = signal([], ...(ngDevMode ? [{ debugName: "_userRoles" }] : /* istanbul ignore next */ []));
     // ─── Undo / redo ────────────────────────────────────────────────────────────
     //
-    // History is a list of {config, rules} pairs, because the builder's state is two signals
-    // and undoing one without the other would leave a rule pointing at a field that no longer
-    // exists.
-    //
-    // Entries hold **references, not clones**. `mutate` builds a new config and `mutateField`
-    // shares structure along the unchanged path, so every snapshot already refers to immutable
-    // objects and unchanged subtrees are shared between entries. That also removes the usual
-    // re-entrancy problem for free: undo puts the stored object back, so the recording effect
-    // sees the exact reference already sitting at the cursor and skips it. No suppression flag
-    // to get out of step.
-    history = [];
-    cursor = signal(-1, ...(ngDevMode ? [{ debugName: "cursor" }] : /* istanbul ignore next */ []));
-    historyLength = signal(0, ...(ngDevMode ? [{ debugName: "historyLength" }] : /* istanbul ignore next */ []));
-    lastEditAt = 0;
-    /** Consecutive edits closer together than this fold into one undo step. */
-    static COALESCE_MS = 400;
-    canUndo = computed(() => this.cursor() > 0, ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
-    canRedo = computed(() => this.cursor() < this.historyLength() - 1, ...(ngDevMode ? [{ debugName: "canRedo" }] : /* istanbul ignore next */ []));
-    /**
-     * Fold the current state into history.
-     *
-     * Called explicitly by the write paths rather than from an `effect`. An effect would have
-     * been fewer call sites, but it requires an injection context: `BuilderStore` had no
-     * constructor, so `new BuilderStore()` was legal, and adding one broke every caller that
-     * did it with NG0203. Explicit calls also make the timing deterministic — a test can
-     * assert straight after an edit instead of flushing effects first.
-     *
-     * Calling it twice for one operation is harmless: the second call sees the same signal
-     * references already at the cursor and returns.
-     *
-     * `setFieldLabel` is bound to a keystroke, so recording every emission would make undo
-     * walk back one character at a time. Two consecutive edits merge when they land inside
-     * `COALESCE_MS` *and* the structure is unchanged — a rename coalesces, while adding,
-     * removing or moving anything always earns its own step however fast it is clicked.
-     */
+    // History stores {config, rules} pairs, because the builder's state is two signals and
+    // undoing one without the other would leave a rule pointing at a field that no longer
+    // exists. Write paths call `record()` explicitly rather than from an `effect`, which would
+    // need an injection context and break `new BuilderStore()`.
+    history = new BuilderHistory(shapeOf, (a, b) => a.config === b.config && a.rules === b.rules);
+    canUndo = this.history.canUndo;
+    canRedo = this.history.canRedo;
     record() {
-        const config = this._config();
-        const rules = this._rules();
-        const at = this.cursor();
-        const top = at >= 0 ? this.history[at] : undefined;
-        if (top && top.config === config && top.rules === rules)
-            return;
-        const now = Date.now();
-        const snapshot = { config, rules, shape: this.shapeOf(config, rules) };
-        if (top &&
-            now - this.lastEditAt < BuilderStore.COALESCE_MS &&
-            top.shape === snapshot.shape &&
-            at === this.history.length - 1) {
-            this.history[at] = snapshot;
-            this.lastEditAt = now;
-            return;
-        }
-        // A new edit after an undo discards the redo branch, which is what every editor does.
-        this.history.length = at + 1;
-        this.history.push(snapshot);
-        // Bounded, because a builder session is long and every keystroke that does not coalesce
-        // earns an entry. Snapshots hold references and share unchanged subtrees, so an entry is
-        // cheap — but unbounded is unbounded, and the oldest steps are the ones nobody walks
-        // back to. Dropping from the front keeps the most recent 200.
-        if (this.history.length > BuilderStore.MAX_HISTORY) {
-            this.history.splice(0, this.history.length - BuilderStore.MAX_HISTORY);
-        }
-        this.cursor.set(this.history.length - 1);
-        this.historyLength.set(this.history.length);
-        this.lastEditAt = now;
-    }
-    /** How many undo steps are kept. */
-    static MAX_HISTORY = 200;
-    /** Counts that distinguish a structural edit from a value edit. */
-    shapeOf(config, rules) {
-        let fields = 0;
-        let tabs = 0;
-        const walkFields = (list) => {
-            for (const f of list ?? []) {
-                fields += 1;
-                walkFields(f.children);
-            }
-        };
-        const walkTabs = (list) => {
-            for (const t of list ?? []) {
-                tabs += 1;
-                walkFields(t.fields);
-                walkTabs(t.children);
-            }
-        };
-        walkTabs(config.tabs);
-        return `${tabs}:${fields}:${rules.length}`;
+        this.history.record({ config: this._config(), rules: this._rules() });
     }
     /** Start history again from the state just loaded. Nothing before it is undoable. */
     resetHistory() {
-        this.history.length = 0;
-        this.history.push({
-            config: this._config(),
-            rules: this._rules(),
-            shape: this.shapeOf(this._config(), this._rules()),
-        });
-        this.cursor.set(0);
-        this.historyLength.set(1);
-        this.lastEditAt = 0;
+        this.history.reset({ config: this._config(), rules: this._rules() });
     }
     undo() {
-        if (!this.canUndo())
-            return;
-        this.applyHistory(this.cursor() - 1);
+        this.restore(this.history.undo());
     }
     redo() {
-        if (!this.canRedo())
-            return;
-        this.applyHistory(this.cursor() + 1);
+        this.restore(this.history.redo());
     }
-    applyHistory(index) {
-        const snapshot = this.history[index];
+    restore(snapshot) {
         if (!snapshot)
             return;
-        this.cursor.set(index);
-        // Order matters only in that both land before the effect runs; it then sees references
-        // identical to this entry and records nothing.
         this._config.set(snapshot.config);
         this._rules.set(snapshot.rules);
         this._isDirty.set(true);
@@ -255,11 +269,8 @@ class BuilderStore {
     /**
      * Every field the config declares, sub-tabs included.
      *
-     * This used to stop at top-level tabs, which quietly broke three things at once: nine of
-     * `insuranceClaims`'s twenty-eight fields never appeared on the canvas, the entity-reference
-     * picker could not offer a nested field as a source, and the drift check looked a nested
-     * field up here, got nothing, and returned without checking. The store's structural
-     * operations already walked the whole tree — only this view did not.
+     * The canvas, the entity-reference source picker and the drift check all read this, so it
+     * has to reach nested tabs just as the store's structural operations do.
      *
      * It deliberately does not descend into a field's own `children`: `group` and `array`
      * children are rendered by the row that owns them, not as rows of their own.
@@ -389,10 +400,9 @@ class BuilderStore {
     /**
      * Every tab in the tree, flattened.
      *
-     * The structural operations below used to iterate `draft.tabs` directly, which is only
-     * the top level. A field on a sub-tab could be selected and edited but never removed,
-     * duplicated, moved or reordered — the builder could author nested configs it was then
-     * unable to restructure, which is the worst possible state for an authoring tool.
+     * The structural operations below go through this rather than `draft.tabs`, which is only
+     * the top level — otherwise a field on a sub-tab could be edited but never removed,
+     * duplicated, moved or reordered.
      */
     flattenTabs(tabs = []) {
         const list = [];
@@ -533,20 +543,16 @@ class BuilderStore {
      *
      * Ids are the wiring between fields — rules, cascades, patches and `showWhen` all address
      * fields by id — so a rename that only touches `field.id` silently breaks that wiring.
-     * That was survivable while renaming was a rare manual act; label-derived ids make it
-     * routine, so the references move with it.
-     */
-    /**
+     * Label-derived ids make renaming routine, so the references move with it.
+     *
      * `key` addresses the field to rename; `oldId` is the bare id every *reference* to it
-     * carries. They were one parameter, which worked only while an id was unique across the
-     * config: resolving needs the path, while `showWhen`, `parentField`, `autoPatch` targets
-     * and rules are all keyed by bare id and never match a path.
+     * carries. They are separate because resolving needs the path, while `showWhen`,
+     * `parentField`, `autoPatch` targets and rules are all keyed by bare id.
      */
     applyRename(key, oldId, newId) {
         // Selection is held as whatever the caller passed — `addField` stores a bare id while a
-        // canvas click stores a path — so comparing the two strings said "not selected" for a
-        // field that plainly was, and the inspector emptied itself mid-rename. Compare the
-        // fields the two keys resolve to instead.
+        // canvas click stores a path — so compare the fields the two keys resolve to, not the
+        // strings.
         const selectedKey = this._selectedFieldId();
         const tabsNow = this._config().tabs;
         const wasSelected = !!selectedKey && this.findFieldInTabs(tabsNow, selectedKey) === this.findFieldInTabs(tabsNow, key);
@@ -831,6 +837,12 @@ class BuilderStore {
                 if (field.validators.pattern === LEGACY_EMAIL_PATTERN)
                     delete field.validators.pattern;
             }
+            else if (validator === 'url' || validator === 'phone') {
+                if (on)
+                    field.validators[validator] = true;
+                else
+                    delete field.validators[validator];
+            }
         });
     }
     setParamValidator(id, validator, value) {
@@ -870,11 +882,12 @@ class BuilderStore {
         if (validator === 'required')
             return !!field.validators?.required;
         if (validator === 'email') {
-            // This used to report *any* pattern as email, so writing a custom regex silently
-            // ticked the box. The legacy encoding is still recognised so a config authored by the
-            // old builder keeps showing Email as ticked.
+            // Only the legacy email regex counts, never any pattern: a custom regex must not tick
+            // the box. Recognising it keeps older configs showing Email as ticked.
             return !!field.validators?.email || field.validators?.pattern === LEGACY_EMAIL_PATTERN;
         }
+        if (validator === 'url' || validator === 'phone')
+            return !!field.validators?.[validator];
         return false;
     }
     // ─── Options (dropdown / multiSelect / radio) ────────────────────────────────
@@ -941,7 +954,7 @@ class BuilderStore {
             }
         });
     }
-    /** Link a field to a field defined in another entity configuration (Phase 8). */
+    /** Link a field to a field defined in another entity configuration */
     linkReferencedField(fieldId, sourceEntityKey, sourceField) {
         this.mutate(draft => {
             const field = this.findFieldInTabs(draft.tabs, fieldId);
@@ -1670,10 +1683,10 @@ class BuilderStore {
         }
         return problems;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BuilderStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BuilderStore });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: BuilderStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: BuilderStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BuilderStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: BuilderStore, decorators: [{
             type: Injectable
         }] });
 
@@ -1976,9 +1989,9 @@ const DEFAULT_BUILDER_TEXT = {
     hintInLanguage: 'Help text ({language})',
     hintHint: 'An info icon beside the label, shown on hover and while the field has focus. Read out with the field.',
     defaultValue: 'Default value',
+    sliderStep: 'Step',
+    sliderStepHint: 'How far one notch moves the slider. Leave empty for 1.',
     // Field inspector — section headings and the layout control.
-    // `validation` used to be the heading above the validator checkboxes; the inspector's
-    // sections now own their headings, so `sectionValidation` replaces it.
     sectionBasics: 'Basics',
     sectionLayout: 'Layout',
     sectionValidation: 'Validation',
@@ -2175,10 +2188,10 @@ class BuilderTextService {
     text(key, params) {
         return resolveUiText(this.overrides, DEFAULT_BUILDER_TEXT, key, this.language(), params);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BuilderTextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BuilderTextService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: BuilderTextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: BuilderTextService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BuilderTextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: BuilderTextService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2268,8 +2281,8 @@ class EntityReferenceConfigComponent {
             this.filtersParseError.set('Invalid JSON.');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityReferenceConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityReferenceConfigComponent, isStandalone: true, selector: "ngx-entity-reference-config", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityReferenceConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: EntityReferenceConfigComponent, isStandalone: true, selector: "ngx-entity-reference-config", ngImport: i0, template: `
     @if (field(); as f) {
       <div class="deb-entity-ref">
         <span class="deb-section-title">{{ ui.text('entityReference') }}</span>
@@ -2429,7 +2442,7 @@ class EntityReferenceConfigComponent {
     }
   `, isInline: true, styles: [".deb-entity-ref{display:flex;flex-direction:column;gap:12px}.deb-option-row>mat-form-field{flex:1}.deb-error-hint{color:#b91c1c}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityReferenceConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityReferenceConfigComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-entity-reference-config', standalone: true, imports: [
                         FormsModule,
@@ -2619,6 +2632,8 @@ class RuleFormComponent {
         priority: 1,
     };
     save = new EventEmitter();
+    // Published API since 1.x: renaming it would break every host bound to `(cancel)`.
+    // eslint-disable-next-line @angular-eslint/no-output-native
     cancel = new EventEmitter();
     operators = [
         'EQUAL',
@@ -2684,8 +2699,8 @@ class RuleFormComponent {
     removeCondition(index) {
         this.rule.conditions.splice(index, 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RuleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: RuleFormComponent, isStandalone: true, selector: "ngx-rule-form", inputs: { rule: "rule" }, outputs: { save: "save", cancel: "cancel" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RuleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: RuleFormComponent, isStandalone: true, selector: "ngx-rule-form", inputs: { rule: "rule" }, outputs: { save: "save", cancel: "cancel" }, ngImport: i0, template: `
     <div class="deb-rule-form">
       <h3 class="deb-rule-form__title">{{ ui.text(rule.id ? 'editRuleTitle' : 'newRuleTitle') }}</h3>
 
@@ -2766,7 +2781,7 @@ class RuleFormComponent {
     </div>
   `, isInline: true, styles: [".deb-rule-form{display:flex;flex-direction:column;gap:12px;background:#fafafa;border:1px solid #e0e0e0;border-radius:8px;padding:16px}.deb-rule-form__title{margin:0 0 8px;font-size:16px;font-weight:600}.deb-full{width:100%}.deb-rule-path{color:#888;font-size:11px;margin-left:6px}.deb-rule-section{display:flex;flex-direction:column;gap:8px}.deb-rule-section h4{margin:0;font-size:13px;font-weight:600;color:#555}.deb-rule-row{display:flex;gap:8px;align-items:center}.deb-rule-row>*{flex:1}.deb-rule-form__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RuleFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RuleFormComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-rule-form', standalone: true, imports: [CommonModule, FormsModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule], template: `
     <div class="deb-rule-form">
@@ -2910,8 +2925,8 @@ class FieldRulesListComponent {
             : `${rule.action.type}: ${rule.action.value}`;
         return `${rule.fieldId} ${cond} → ${action}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldRulesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FieldRulesListComponent, isStandalone: true, selector: "ngx-field-rules-list", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FieldRulesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FieldRulesListComponent, isStandalone: true, selector: "ngx-field-rules-list", ngImport: i0, template: `
     <div class="deb-rules">
       <div class="deb-rules__head">
         <span class="deb-section-title">{{ ui.text('rules') }}</span>
@@ -2994,7 +3009,7 @@ class FieldRulesListComponent {
     </div>
   `, isInline: true, styles: [".deb-rules{display:flex;flex-direction:column;gap:8px}.deb-rules__head{display:flex;align-items:center;justify-content:space-between}.deb-rule-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px}.deb-rule-item--off{opacity:.55}.deb-rule-item__body{display:flex;flex-direction:column;min-width:0}.deb-rule-item__summary{font-size:13px;font-weight:600;overflow-wrap:anywhere}.deb-rule-item__meta{font-size:11px;color:#6b7280}.deb-rule-item__actions{display:flex;align-items:center;flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: RuleFormComponent, selector: "ngx-rule-form", inputs: ["rule"], outputs: ["save", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldRulesListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FieldRulesListComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-field-rules-list', standalone: true, imports: [MatButtonModule, MatIconModule, MatSlideToggleModule, MatTooltipModule, RuleFormComponent], template: `
     <div class="deb-rules">
@@ -3120,10 +3135,8 @@ class ReferencedFieldConfigComponent {
         }
     }
     /**
-     * Both callers pass the id of the field they just edited. This used to ignore that
-     * argument and read `store.selectedField()` instead, so whenever the edited field was not
-     * the selected one it checked drift against the wrong field's source entity — or bailed
-     * out entirely if nothing was selected.
+     * Takes the id of the field just edited rather than reading `store.selectedField()`, which
+     * need not be the same field — or any field at all.
      */
     async checkDriftForField(fieldId) {
         const f = this.store.fields().find(field => field.id === fieldId);
@@ -3172,8 +3185,8 @@ class ReferencedFieldConfigComponent {
         }
         return undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ReferencedFieldConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ReferencedFieldConfigComponent, isStandalone: true, selector: "ngx-referenced-field-config", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ReferencedFieldConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ReferencedFieldConfigComponent, isStandalone: true, selector: "ngx-referenced-field-config", ngImport: i0, template: `
     @if (field(); as f) {
       <div class="deb-referenced-field" style="margin-top: 16px;">
         <div class="deb-row" style="justify-content: space-between; align-items: center; margin-bottom: 8px;">
@@ -3234,7 +3247,7 @@ class ReferencedFieldConfigComponent {
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ReferencedFieldConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ReferencedFieldConfigComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -3376,6 +3389,11 @@ class FieldInspectorComponent {
         ];
         return flags.filter(Boolean).length;
     }
+    /** A step must be above zero; anything else clears it, and the slider uses 1. */
+    positiveOrUnset(value) {
+        const n = this.toNum(value);
+        return n !== null && n > 0 ? n : undefined;
+    }
     toNum(value) {
         if (value === '' || value === null || value === undefined)
             return null;
@@ -3443,9 +3461,7 @@ class FieldInspectorComponent {
     }
     /**
      * Seeds a new condition with the first field not already watched.
-     *
-     * It used to seed the literal string `field`, which is not a field id at all — so a new
-     * condition started out referencing nothing and silently hid the field until it was edited.
+     * A seed that names no real field would silently hide this one until edited.
      */
     addShowWhen(field) {
         const next = { ...(field.showWhen ?? {}) };
@@ -3533,7 +3549,7 @@ class FieldInspectorComponent {
         { label: 'Slug', pattern: '^[a-z0-9]+(?:-[a-z0-9]+)*$' },
     ];
     supportsPattern(type) {
-        return ['text', 'textarea', 'markdown', 'email', 'password'].includes(type);
+        return ['text', 'textarea', 'markdown', 'email', 'password', 'url', 'phone'].includes(type);
     }
     applyPreset(field, pattern) {
         this.store.setPatternValidator(this.store.keyOf(field), pattern);
@@ -3560,10 +3576,10 @@ class FieldInspectorComponent {
         if (key)
             this.store.selectField(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FieldInspectorComponent, isStandalone: true, selector: "ngx-field-inspector", ngImport: i0, template: "@if (field(); as f) {\n  <!--\n    The inspector, in collapsible sections.\n\n    It used to be one flat scroll of fifteen divider-separated blocks, so renaming a field\n    meant scrolling past every advanced setting a field has, and finding the rules list meant\n    scrolling past all of them.\n\n    All inspector sections start expanded by default so authors have immediate access to\n    validation, automation, visibility conditions, rules, dependencies, and reference settings\n    without needing to manually unfold each section. Sections can still be collapsed as desired.\n\n    `<details>` rather than mat-expansion-panel: the inspector already sits inside a card in a\n    scrolling rail, and a third level of Material elevation inside that read as noise.\n  -->\n  <div class=\"deb-inspector\">\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionBasics') }}\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <!-- Identity -->\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fieldId') }}</mat-label>\n            <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n            @if (store.hasManualId(f.id)) {\n              <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n            } @else {\n              <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</mat-hint>\n            }\n          </mat-form-field>\n          <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n        </div>\n\n        @if (tabOptions().length > 1) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('tab') }}</mat-label>\n            <mat-select data-testid=\"field-tab\" [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n              @for (tab of tabOptions(); track tab.id) {\n                <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n              }\n            </mat-select>\n            <mat-hint>{{ ui.text('tabMoveHint') }}</mat-hint>\n          </mat-form-field>\n        }\n\n        <!-- Localised text (active language) -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-label\"\n            [ngModel]=\"labelValue(f)\"\n            (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), lang(), $event)\"\n          />\n        </mat-form-field>\n\n        @if (meta()?.supportsPlaceholder) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"placeholderValue(f)\"\n              (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n            />\n          </mat-form-field>\n        }\n\n        <!--\n          Help text, offered on every field type \u2014 including the ones with no placeholder,\n          which are exactly the ones most likely to need explaining. Its hint says what it is\n          *for*, because the box above it is the one authors reach for by habit and a\n          placeholder is gone the moment somebody types.\n        -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('hintInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-hint\"\n            [ngModel]=\"hintValue(f)\"\n            (ngModelChange)=\"store.setFieldHint(store.keyOf(f), lang(), $event)\"\n          />\n          <mat-hint>{{ ui.text('hintHint') }}</mat-hint>\n        </mat-form-field>\n\n        @if (meta()?.supportsDefaultValue) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"f.defaultValue ?? ''\"\n              (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n            />\n          </mat-form-field>\n        }\n      </div>\n    </details>\n\n    <!--\n      Width.\n\n      `colSpan` has been in the schema and honoured by the renderer since the 12-column grid\n      existed, and the builder had no control for it \u2014 so every form authored here came out a\n      single-column ladder, and the only way to put two fields on one row was to hand-edit the\n      JSON. This is that control.\n    -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionLayout') }}\n        <span class=\"deb-inspector__count\" data-testid=\"layout-count\">{{ f.colSpan ?? 12 }}/12</span>\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-span-picker\" role=\"group\" [attr.aria-label]=\"ui.text('width')\">\n          @for (choice of spanChoices; track choice.span) {\n            <button\n              type=\"button\"\n              class=\"deb-span-picker__btn\"\n              [class.deb-span-picker__btn--active]=\"(f.colSpan ?? 12) === choice.span\"\n              [attr.data-testid]=\"'field-span-' + choice.span\"\n              [attr.aria-pressed]=\"(f.colSpan ?? 12) === choice.span\"\n              [matTooltip]=\"ui.text('widthOf', { span: choice.span })\"\n              (click)=\"store.updateField(store.keyOf(f), { colSpan: choice.span })\"\n            >\n              {{ ui.text(choice.textKey) }}\n            </button>\n          }\n        </div>\n        <p class=\"deb-hint\">{{ ui.text('widthHint') }}</p>\n      </div>\n    </details>\n\n    <!-- Validators -->\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length || supportsPattern(f.type) || f.validators?.pattern) {\n        <details class=\"deb-inspector__section\" open>\n          <summary class=\"deb-inspector__summary\">\n            {{ ui.text('sectionValidation') }}\n            @if (validatorCount(f); as count) {\n              <span class=\"deb-inspector__count\" data-testid=\"validation-count\">{{ count }}</span>\n            }\n            <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n          </summary>\n          <div class=\"deb-inspector__body\">\n            @if (m.flagValidators.length) {\n              <div class=\"deb-flags-row\">\n                @for (v of m.flagValidators; track v) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [ngModel]=\"store.hasFlagValidator(f, v)\"\n                    (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n                    >{{ v }}</mat-checkbox\n                  >\n                }\n              </div>\n            }\n            @if (m.paramValidators.length) {\n              <div class=\"deb-param-validators-grid\">\n                @for (v of m.paramValidators; track v) {\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                    <mat-label>{{ v }}</mat-label>\n                    <input\n                      matInput\n                      type=\"number\"\n                      [ngModel]=\"store.getParamValidator(f, v)\"\n                      (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n                    />\n                  </mat-form-field>\n                }\n              </div>\n            }\n\n            @if (supportsPattern(f.type) || f.validators?.pattern) {\n              <div class=\"deb-pattern-box\" data-testid=\"pattern-playground\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('pattern') }}</mat-label>\n                  <input\n                    matInput\n                    data-testid=\"field-pattern-input\"\n                    [ngModel]=\"f.validators?.pattern ?? ''\"\n                    (ngModelChange)=\"store.setPatternValidator(store.keyOf(f), $event)\"\n                  />\n                  <mat-hint>{{ ui.text('patternHint') }}</mat-hint>\n                </mat-form-field>\n\n                <div class=\"deb-pattern-presets\">\n                  <span class=\"deb-section-title\">{{ ui.text('quickPresets') }}:</span>\n                  @for (preset of patternPresets; track preset.label) {\n                    <button\n                      type=\"button\"\n                      class=\"deb-preset-btn\"\n                      [attr.data-testid]=\"'preset-' + preset.label.toLowerCase()\"\n                      (click)=\"applyPreset(f, preset.pattern)\"\n                    >\n                      {{ preset.label }}\n                    </button>\n                  }\n                </div>\n\n                <div class=\"deb-row deb-row--split\">\n                  <span class=\"deb-section-title\">{{ ui.text('testPattern') }}</span>\n                  <div\n                    class=\"deb-pattern-status\"\n                    [class.deb-pattern-status--match]=\"regexEvaluation().status === 'match'\"\n                    [class.deb-pattern-status--no-match]=\"regexEvaluation().status === 'no-match'\"\n                    [class.deb-pattern-status--invalid]=\"regexEvaluation().status === 'invalid'\"\n                    [class.deb-pattern-status--idle]=\"regexEvaluation().status === 'idle'\"\n                    [class.deb-pattern-status--empty]=\"regexEvaluation().status === 'empty'\"\n                    data-testid=\"regex-test-status\"\n                  >\n                    @switch (regexEvaluation().status) {\n                      @case ('match') {\n                        <mat-icon>check_circle</mat-icon> {{ ui.text('patternMatch') }}\n                      }\n                      @case ('no-match') {\n                        <mat-icon>cancel</mat-icon> {{ ui.text('patternNoMatch') }}\n                      }\n                      @case ('invalid') {\n                        <mat-icon>error</mat-icon> {{ ui.text('patternInvalid') }}\n                      }\n                      @case ('idle') {\n                        <mat-icon>edit_note</mat-icon> {{ ui.text('testPatternPlaceholder') }}\n                      }\n                      @case ('empty') {\n                        <mat-icon>info</mat-icon> {{ ui.text('patternEmptyPrompt') }}\n                      }\n                    }\n                  </div>\n                </div>\n\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <input\n                    matInput\n                    data-testid=\"regex-test-input\"\n                    [placeholder]=\"ui.text('testPatternPlaceholder')\"\n                    [ngModel]=\"testSample()\"\n                    (ngModelChange)=\"testSample.set($event)\"\n                  />\n                </mat-form-field>\n              </div>\n            }\n          </div>\n        </details>\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionOptions') }}\n          @if ((f.options ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"options-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n            <mat-select\n              data-testid=\"data-source\"\n              [ngModel]=\"store.fieldDataSource(f)\"\n              (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n            >\n              <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n              <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n              <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Named lookup list -->\n          @if (store.fieldDataSource(f) === 'lookup') {\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n              <mat-label>{{ ui.text('listName') }}</mat-label>\n              <input\n                matInput\n                data-testid=\"list-name\"\n                [ngModel]=\"f.listName ?? ''\"\n                (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n              />\n            </mat-form-field>\n            <p class=\"deb-hint\">\n              {{ ui.text('listNameHint') }}\n            </p>\n          }\n\n          <!-- Inline options -->\n          @if (store.fieldDataSource(f) !== 'lookup') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n              <span class=\"deb-row__actions\">\n                @if (store.hasUnkeyedOptions()) {\n                  <button\n                    mat-stroked-button\n                    type=\"button\"\n                    data-testid=\"assign-option-keys\"\n                    (click)=\"store.assignOptionKeys()\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                  >\n                    <mat-icon>key</mat-icon> {{ ui.text('assignOptionKeys') }}\n                  </button>\n                }\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"add-option\"\n                  (click)=\"store.addOption(store.keyOf(f))\"\n                >\n                  <mat-icon>add</mat-icon> {{ ui.text('option') }}\n                </button>\n              </span>\n            </div>\n            @for (opt of f.options ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <!-- One input: the displayed text is the stored value. -->\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n                  <input\n                    matInput\n                    [attr.data-testid]=\"'option-' + $index\"\n                    [ngModel]=\"optionLabel(opt)\"\n                    (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n                  />\n                </mat-form-field>\n                <!--\n                  Not a control. A key is the option's identity and every record already\n                  holding it matches on it, so a text box here \u2014 even a read-only one \u2014\n                  would be a data migration disguised as a field. It is shown because an\n                  author needs to be able to read it, and for no other reason.\n                -->\n                @if (store.optionKey(opt); as key) {\n                  <code\n                    class=\"deb-option-key\"\n                    [attr.data-testid]=\"'option-key-' + $index\"\n                    [attr.aria-label]=\"ui.text('optionKey')\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                    >{{ key }}</code\n                  >\n                }\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  (click)=\"store.removeOption(store.keyOf(f), $index)\"\n                  [matTooltip]=\"ui.text('removeOption')\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.options ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Flags -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDisplay') }}\n        @if (displayFlagCount(f); as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"display-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-toggles\" role=\"group\" [attr.aria-label]=\"ui.text('display')\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.visibility ?? true\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n            >{{ ui.text('visible') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.table?.visible ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n            >{{ ui.text('tableColumn') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.readonly ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n            >{{ ui.text('readOnly') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.disabled ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n            >{{ ui.text('disabled') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.maskData ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n            >{{ ui.text('maskData') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            data-testid=\"toggle-critical\"\n            [ngModel]=\"f.criticalField ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n            [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n            >{{ ui.text('criticalField') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.showOnMinimize ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n            [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n            >{{ ui.text('showInSummary') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </details>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionVisibility') }}\n        @if (showWhenEntries(f).length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"visibility-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-row deb-row--split\">\n          <span class=\"deb-section-title\">{{ ui.text('showWhen') }}</span>\n          <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n            <mat-icon>add</mat-icon> {{ ui.text('condition') }}\n          </button>\n        </div>\n        @for (entry of showWhenEntries(f); track entry.key) {\n          <div class=\"deb-option-row\" data-testid=\"option-row\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('watchedField') }}</mat-label>\n              <mat-select\n                data-testid=\"show-when-field\"\n                [ngModel]=\"entry.key\"\n                (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n              >\n                @for (option of optionsWith(entry.key); track option.value) {\n                  <mat-option [value]=\"option.value\">\n                    {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('equals') }}</mat-label>\n              <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n            </mat-form-field>\n            <button\n              mat-icon-button\n              type=\"button\"\n              color=\"warn\"\n              [matTooltip]=\"ui.text('removeCondition')\"\n              (click)=\"removeShowWhen(f, entry.key)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        }\n        @if (!showWhenEntries(f).length) {\n          <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Entity reference, cascade, autoPatch, and patchOnTrue -->\n    @if (meta()?.isEntityRef || f.type === 'boolean' || f.type === 'checkbox') {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionAutomation') }}\n          @if ((f.patchOnTrue ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"automation-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          @if (meta()?.isEntityRef) {\n            <ngx-entity-reference-config />\n          }\n\n          <!-- patchOnTrue (boolean/checkbox only) -->\n          @if (f.type === 'boolean' || f.type === 'checkbox') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('copyOnTrue') }}</span>\n              <button\n                mat-stroked-button\n                type=\"button\"\n                data-testid=\"add-patch-on-true\"\n                (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n              >\n                <mat-icon>add</mat-icon> {{ ui.text('mapping') }}\n              </button>\n            </div>\n            @for (mapping of f.patchOnTrue ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('fromField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-from\"\n                    [ngModel]=\"mapping.from\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.from); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('toField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-to\"\n                    [ngModel]=\"mapping.to\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.to); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  [matTooltip]=\"ui.text('removeMapping')\"\n                  (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.patchOnTrue ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Rules attached to this field -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionRules') }}\n        @if (store.rulesForSelectedField().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"rules-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-field-rules-list />\n      </div>\n    </details>\n\n    <!-- Field Dependencies Visualizer -->\n    <details\n      class=\"deb-inspector__section\"\n      open\n      data-testid=\"section-dependencies\"\n    >\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDependencies') }}\n        @if (incomingDependencies().length + outgoingDependencies().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"dependencies-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        @if (incomingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('dependsOn') }} ({{ incomingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"incoming-dependencies\">\n            @for (dep of incomingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.sourceLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.sourceLabel })\"\n                  (click)=\"selectField(dep.sourceKey)\"\n                >\n                  <mat-icon>arrow_back</mat-icon> {{ ui.text('jumpToField', { field: dep.sourceLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (outgoingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('affects') }} ({{ outgoingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"outgoing-dependencies\">\n            @for (dep of outgoingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.targetLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.targetLabel })\"\n                  (click)=\"selectField(dep.targetKey)\"\n                >\n                  <mat-icon>arrow_forward</mat-icon> {{ ui.text('jumpToField', { field: dep.targetLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (!incomingDependencies().length && !outgoingDependencies().length) {\n          <p class=\"deb-hint\" data-testid=\"no-field-dependencies\">{{ ui.text('noDependencies') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Cross-entity field reference & drift management -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionReference') }}\n        @if (f.isReferenced) {\n          <span class=\"deb-inspector__count\" data-testid=\"reference-count\">{{ f.referencedEntityKey }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-referenced-field-config />\n      </div>\n    </details>\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>{{ ui.text('inspectorEmpty') }}</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row>*{flex:1}.deb-row>.deb-chip{flex:0 0 auto}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-pattern-box{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.deb-pattern-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.deb-pattern-status--match{background:#dcfce7;color:#166534}.deb-pattern-status--no-match{background:#fee2e2;color:#991b1b}.deb-pattern-status--invalid{background:#fef3c7;color:#92400e}.deb-pattern-status--idle,.deb-pattern-status--empty{background:#f1f5f9;color:#334155}.deb-pattern-presets{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.deb-preset-btn{padding:2px 8px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;font-size:11px;color:#334155;cursor:pointer;transition:background .1s ease}.deb-preset-btn:hover{background:#e2e8f0}.deb-dep-list{display:flex;flex-direction:column;gap:6px;margin-top:4px;margin-bottom:12px}.deb-dep-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px}.deb-dep-info{display:flex;flex-direction:column;min-width:0}.deb-dep-name{font-size:12px;font-weight:600;color:#0f172a}.deb-dep-detail{font-size:11px;color:#64748b}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityReferenceConfigComponent, selector: "ngx-entity-reference-config" }, { kind: "component", type: FieldRulesListComponent, selector: "ngx-field-rules-list" }, { kind: "component", type: ReferencedFieldConfigComponent, selector: "ngx-referenced-field-config" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FieldInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FieldInspectorComponent, isStandalone: true, selector: "ngx-field-inspector", ngImport: i0, template: "@if (field(); as f) {\n  <!--\n    The inspector, in collapsible sections.\n\n    It used to be one flat scroll of fifteen divider-separated blocks, so renaming a field\n    meant scrolling past every advanced setting a field has, and finding the rules list meant\n    scrolling past all of them.\n\n    All inspector sections start expanded by default so authors have immediate access to\n    validation, automation, visibility conditions, rules, dependencies, and reference settings\n    without needing to manually unfold each section. Sections can still be collapsed as desired.\n\n    `<details>` rather than mat-expansion-panel: the inspector already sits inside a card in a\n    scrolling rail, and a third level of Material elevation inside that read as noise.\n  -->\n  <div class=\"deb-inspector\">\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionBasics') }}\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <!-- Identity -->\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fieldId') }}</mat-label>\n            <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n            @if (store.hasManualId(f.id)) {\n              <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n            } @else {\n              <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</mat-hint>\n            }\n          </mat-form-field>\n          <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n        </div>\n\n        @if (tabOptions().length > 1) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('tab') }}</mat-label>\n            <mat-select data-testid=\"field-tab\" [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n              @for (tab of tabOptions(); track tab.id) {\n                <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n              }\n            </mat-select>\n            <mat-hint>{{ ui.text('tabMoveHint') }}</mat-hint>\n          </mat-form-field>\n        }\n\n        <!-- Localised text (active language) -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-label\"\n            [ngModel]=\"labelValue(f)\"\n            (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), lang(), $event)\"\n          />\n        </mat-form-field>\n\n        @if (meta()?.supportsPlaceholder) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"placeholderValue(f)\"\n              (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n            />\n          </mat-form-field>\n        }\n\n        <!--\n          Help text, offered on every field type \u2014 including the ones with no placeholder,\n          which are exactly the ones most likely to need explaining. Its hint says what it is\n          *for*, because the box above it is the one authors reach for by habit and a\n          placeholder is gone the moment somebody types.\n        -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('hintInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-hint\"\n            [ngModel]=\"hintValue(f)\"\n            (ngModelChange)=\"store.setFieldHint(store.keyOf(f), lang(), $event)\"\n          />\n          <mat-hint>{{ ui.text('hintHint') }}</mat-hint>\n        </mat-form-field>\n\n        @if (meta()?.supportsDefaultValue) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"f.defaultValue ?? ''\"\n              (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n            />\n          </mat-form-field>\n        }\n      </div>\n    </details>\n\n    <!--\n      Width.\n\n      `colSpan` has been in the schema and honoured by the renderer since the 12-column grid\n      existed, and the builder had no control for it \u2014 so every form authored here came out a\n      single-column ladder, and the only way to put two fields on one row was to hand-edit the\n      JSON. This is that control.\n    -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionLayout') }}\n        <span class=\"deb-inspector__count\" data-testid=\"layout-count\">{{ f.colSpan ?? 12 }}/12</span>\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-span-picker\" role=\"group\" [attr.aria-label]=\"ui.text('width')\">\n          @for (choice of spanChoices; track choice.span) {\n            <button\n              type=\"button\"\n              class=\"deb-span-picker__btn\"\n              [class.deb-span-picker__btn--active]=\"(f.colSpan ?? 12) === choice.span\"\n              [attr.data-testid]=\"'field-span-' + choice.span\"\n              [attr.aria-pressed]=\"(f.colSpan ?? 12) === choice.span\"\n              [matTooltip]=\"ui.text('widthOf', { span: choice.span })\"\n              (click)=\"store.updateField(store.keyOf(f), { colSpan: choice.span })\"\n            >\n              {{ ui.text(choice.textKey) }}\n            </button>\n          }\n        </div>\n        <p class=\"deb-hint\">{{ ui.text('widthHint') }}</p>\n      </div>\n    </details>\n\n    <!-- Validators -->\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length || supportsPattern(f.type) || f.validators?.pattern) {\n        <details class=\"deb-inspector__section\" open>\n          <summary class=\"deb-inspector__summary\">\n            {{ ui.text('sectionValidation') }}\n            @if (validatorCount(f); as count) {\n              <span class=\"deb-inspector__count\" data-testid=\"validation-count\">{{ count }}</span>\n            }\n            <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n          </summary>\n          <div class=\"deb-inspector__body\">\n            @if (m.flagValidators.length) {\n              <div class=\"deb-flags-row\">\n                @for (v of m.flagValidators; track v) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [ngModel]=\"store.hasFlagValidator(f, v)\"\n                    (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n                    >{{ v }}</mat-checkbox\n                  >\n                }\n              </div>\n            }\n            @if (m.paramValidators.length) {\n              <div class=\"deb-param-validators-grid\">\n                @for (v of m.paramValidators; track v) {\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                    <mat-label>{{ v }}</mat-label>\n                    <input\n                      matInput\n                      type=\"number\"\n                      [ngModel]=\"store.getParamValidator(f, v)\"\n                      (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n                    />\n                  </mat-form-field>\n                }\n              </div>\n            }\n            @if (f.type === 'slider') {\n              <!-- The slider's range is min and max above; its increment is the one number left. -->\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('sliderStep') }}</mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  min=\"0\"\n                  data-testid=\"field-step\"\n                  [ngModel]=\"f.step ?? null\"\n                  (ngModelChange)=\"store.updateField(store.keyOf(f), { step: positiveOrUnset($event) })\"\n                />\n                <mat-hint>{{ ui.text('sliderStepHint') }}</mat-hint>\n              </mat-form-field>\n            }\n\n            @if (supportsPattern(f.type) || f.validators?.pattern) {\n              <div class=\"deb-pattern-box\" data-testid=\"pattern-playground\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('pattern') }}</mat-label>\n                  <input\n                    matInput\n                    data-testid=\"field-pattern-input\"\n                    [ngModel]=\"f.validators?.pattern ?? ''\"\n                    (ngModelChange)=\"store.setPatternValidator(store.keyOf(f), $event)\"\n                  />\n                  <mat-hint>{{ ui.text('patternHint') }}</mat-hint>\n                </mat-form-field>\n\n                <div class=\"deb-pattern-presets\">\n                  <span class=\"deb-section-title\">{{ ui.text('quickPresets') }}:</span>\n                  @for (preset of patternPresets; track preset.label) {\n                    <button\n                      type=\"button\"\n                      class=\"deb-preset-btn\"\n                      [attr.data-testid]=\"'preset-' + preset.label.toLowerCase()\"\n                      (click)=\"applyPreset(f, preset.pattern)\"\n                    >\n                      {{ preset.label }}\n                    </button>\n                  }\n                </div>\n\n                <div class=\"deb-row deb-row--split\">\n                  <span class=\"deb-section-title\">{{ ui.text('testPattern') }}</span>\n                  <div\n                    class=\"deb-pattern-status\"\n                    [class.deb-pattern-status--match]=\"regexEvaluation().status === 'match'\"\n                    [class.deb-pattern-status--no-match]=\"regexEvaluation().status === 'no-match'\"\n                    [class.deb-pattern-status--invalid]=\"regexEvaluation().status === 'invalid'\"\n                    [class.deb-pattern-status--idle]=\"regexEvaluation().status === 'idle'\"\n                    [class.deb-pattern-status--empty]=\"regexEvaluation().status === 'empty'\"\n                    data-testid=\"regex-test-status\"\n                  >\n                    @switch (regexEvaluation().status) {\n                      @case ('match') {\n                        <mat-icon>check_circle</mat-icon> {{ ui.text('patternMatch') }}\n                      }\n                      @case ('no-match') {\n                        <mat-icon>cancel</mat-icon> {{ ui.text('patternNoMatch') }}\n                      }\n                      @case ('invalid') {\n                        <mat-icon>error</mat-icon> {{ ui.text('patternInvalid') }}\n                      }\n                      @case ('idle') {\n                        <mat-icon>edit_note</mat-icon> {{ ui.text('testPatternPlaceholder') }}\n                      }\n                      @case ('empty') {\n                        <mat-icon>info</mat-icon> {{ ui.text('patternEmptyPrompt') }}\n                      }\n                    }\n                  </div>\n                </div>\n\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <input\n                    matInput\n                    data-testid=\"regex-test-input\"\n                    [placeholder]=\"ui.text('testPatternPlaceholder')\"\n                    [ngModel]=\"testSample()\"\n                    (ngModelChange)=\"testSample.set($event)\"\n                  />\n                </mat-form-field>\n              </div>\n            }\n          </div>\n        </details>\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionOptions') }}\n          @if ((f.options ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"options-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n            <mat-select\n              data-testid=\"data-source\"\n              [ngModel]=\"store.fieldDataSource(f)\"\n              (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n            >\n              <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n              <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n              <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Named lookup list -->\n          @if (store.fieldDataSource(f) === 'lookup') {\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n              <mat-label>{{ ui.text('listName') }}</mat-label>\n              <input\n                matInput\n                data-testid=\"list-name\"\n                [ngModel]=\"f.listName ?? ''\"\n                (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n              />\n            </mat-form-field>\n            <p class=\"deb-hint\">\n              {{ ui.text('listNameHint') }}\n            </p>\n          }\n\n          <!-- Inline options -->\n          @if (store.fieldDataSource(f) !== 'lookup') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n              <span class=\"deb-row__actions\">\n                @if (store.hasUnkeyedOptions()) {\n                  <button\n                    mat-stroked-button\n                    type=\"button\"\n                    data-testid=\"assign-option-keys\"\n                    (click)=\"store.assignOptionKeys()\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                  >\n                    <mat-icon>key</mat-icon> {{ ui.text('assignOptionKeys') }}\n                  </button>\n                }\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"add-option\"\n                  (click)=\"store.addOption(store.keyOf(f))\"\n                >\n                  <mat-icon>add</mat-icon> {{ ui.text('option') }}\n                </button>\n              </span>\n            </div>\n            @for (opt of f.options ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <!-- One input: the displayed text is the stored value. -->\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n                  <input\n                    matInput\n                    [attr.data-testid]=\"'option-' + $index\"\n                    [ngModel]=\"optionLabel(opt)\"\n                    (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n                  />\n                </mat-form-field>\n                <!--\n                  Not a control. A key is the option's identity and every record already\n                  holding it matches on it, so a text box here \u2014 even a read-only one \u2014\n                  would be a data migration disguised as a field. It is shown because an\n                  author needs to be able to read it, and for no other reason.\n                -->\n                @if (store.optionKey(opt); as key) {\n                  <code\n                    class=\"deb-option-key\"\n                    [attr.data-testid]=\"'option-key-' + $index\"\n                    [attr.aria-label]=\"ui.text('optionKey')\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                    >{{ key }}</code\n                  >\n                }\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  (click)=\"store.removeOption(store.keyOf(f), $index)\"\n                  [matTooltip]=\"ui.text('removeOption')\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.options ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Flags -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDisplay') }}\n        @if (displayFlagCount(f); as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"display-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-toggles\" role=\"group\" [attr.aria-label]=\"ui.text('display')\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.visibility ?? true\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n            >{{ ui.text('visible') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.table?.visible ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n            >{{ ui.text('tableColumn') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.readonly ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n            >{{ ui.text('readOnly') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.disabled ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n            >{{ ui.text('disabled') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.maskData ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n            >{{ ui.text('maskData') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            data-testid=\"toggle-critical\"\n            [ngModel]=\"f.criticalField ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n            [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n            >{{ ui.text('criticalField') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.showOnMinimize ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n            [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n            >{{ ui.text('showInSummary') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </details>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionVisibility') }}\n        @if (showWhenEntries(f).length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"visibility-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-row deb-row--split\">\n          <span class=\"deb-section-title\">{{ ui.text('showWhen') }}</span>\n          <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n            <mat-icon>add</mat-icon> {{ ui.text('condition') }}\n          </button>\n        </div>\n        @for (entry of showWhenEntries(f); track entry.key) {\n          <div class=\"deb-option-row\" data-testid=\"option-row\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('watchedField') }}</mat-label>\n              <mat-select\n                data-testid=\"show-when-field\"\n                [ngModel]=\"entry.key\"\n                (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n              >\n                @for (option of optionsWith(entry.key); track option.value) {\n                  <mat-option [value]=\"option.value\">\n                    {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('equals') }}</mat-label>\n              <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n            </mat-form-field>\n            <button\n              mat-icon-button\n              type=\"button\"\n              color=\"warn\"\n              [matTooltip]=\"ui.text('removeCondition')\"\n              (click)=\"removeShowWhen(f, entry.key)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        }\n        @if (!showWhenEntries(f).length) {\n          <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Entity reference, cascade, autoPatch, and patchOnTrue -->\n    @if (meta()?.isEntityRef || f.type === 'boolean' || f.type === 'checkbox') {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionAutomation') }}\n          @if ((f.patchOnTrue ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"automation-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          @if (meta()?.isEntityRef) {\n            <ngx-entity-reference-config />\n          }\n\n          <!-- patchOnTrue (boolean/checkbox only) -->\n          @if (f.type === 'boolean' || f.type === 'checkbox') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('copyOnTrue') }}</span>\n              <button\n                mat-stroked-button\n                type=\"button\"\n                data-testid=\"add-patch-on-true\"\n                (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n              >\n                <mat-icon>add</mat-icon> {{ ui.text('mapping') }}\n              </button>\n            </div>\n            @for (mapping of f.patchOnTrue ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('fromField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-from\"\n                    [ngModel]=\"mapping.from\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.from); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('toField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-to\"\n                    [ngModel]=\"mapping.to\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.to); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  [matTooltip]=\"ui.text('removeMapping')\"\n                  (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.patchOnTrue ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Rules attached to this field -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionRules') }}\n        @if (store.rulesForSelectedField().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"rules-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-field-rules-list />\n      </div>\n    </details>\n\n    <!-- Field Dependencies Visualizer -->\n    <details\n      class=\"deb-inspector__section\"\n      open\n      data-testid=\"section-dependencies\"\n    >\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDependencies') }}\n        @if (incomingDependencies().length + outgoingDependencies().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"dependencies-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        @if (incomingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('dependsOn') }} ({{ incomingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"incoming-dependencies\">\n            @for (dep of incomingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.sourceLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.sourceLabel })\"\n                  (click)=\"selectField(dep.sourceKey)\"\n                >\n                  <mat-icon>arrow_back</mat-icon> {{ ui.text('jumpToField', { field: dep.sourceLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (outgoingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('affects') }} ({{ outgoingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"outgoing-dependencies\">\n            @for (dep of outgoingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.targetLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.targetLabel })\"\n                  (click)=\"selectField(dep.targetKey)\"\n                >\n                  <mat-icon>arrow_forward</mat-icon> {{ ui.text('jumpToField', { field: dep.targetLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (!incomingDependencies().length && !outgoingDependencies().length) {\n          <p class=\"deb-hint\" data-testid=\"no-field-dependencies\">{{ ui.text('noDependencies') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Cross-entity field reference & drift management -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionReference') }}\n        @if (f.isReferenced) {\n          <span class=\"deb-inspector__count\" data-testid=\"reference-count\">{{ f.referencedEntityKey }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-referenced-field-config />\n      </div>\n    </details>\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>{{ ui.text('inspectorEmpty') }}</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row>*{flex:1}.deb-row>.deb-chip{flex:0 0 auto}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-pattern-box{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.deb-pattern-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.deb-pattern-status--match{background:#dcfce7;color:#166534}.deb-pattern-status--no-match{background:#fee2e2;color:#991b1b}.deb-pattern-status--invalid{background:#fef3c7;color:#92400e}.deb-pattern-status--idle,.deb-pattern-status--empty{background:#f1f5f9;color:#334155}.deb-pattern-presets{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.deb-preset-btn{padding:2px 8px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;font-size:11px;color:#334155;cursor:pointer;transition:background .1s ease}.deb-preset-btn:hover{background:#e2e8f0}.deb-dep-list{display:flex;flex-direction:column;gap:6px;margin-top:4px;margin-bottom:12px}.deb-dep-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px}.deb-dep-info{display:flex;flex-direction:column;min-width:0}.deb-dep-name{font-size:12px;font-weight:600;color:#0f172a}.deb-dep-detail{font-size:11px;color:#64748b}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityReferenceConfigComponent, selector: "ngx-entity-reference-config" }, { kind: "component", type: FieldRulesListComponent, selector: "ngx-field-rules-list" }, { kind: "component", type: ReferencedFieldConfigComponent, selector: "ngx-referenced-field-config" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldInspectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FieldInspectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-field-inspector', standalone: true, imports: [
                         FormsModule,
@@ -3579,7 +3595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         EntityReferenceConfigComponent,
                         FieldRulesListComponent,
                         ReferencedFieldConfigComponent,
-                    ], template: "@if (field(); as f) {\n  <!--\n    The inspector, in collapsible sections.\n\n    It used to be one flat scroll of fifteen divider-separated blocks, so renaming a field\n    meant scrolling past every advanced setting a field has, and finding the rules list meant\n    scrolling past all of them.\n\n    All inspector sections start expanded by default so authors have immediate access to\n    validation, automation, visibility conditions, rules, dependencies, and reference settings\n    without needing to manually unfold each section. Sections can still be collapsed as desired.\n\n    `<details>` rather than mat-expansion-panel: the inspector already sits inside a card in a\n    scrolling rail, and a third level of Material elevation inside that read as noise.\n  -->\n  <div class=\"deb-inspector\">\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionBasics') }}\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <!-- Identity -->\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fieldId') }}</mat-label>\n            <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n            @if (store.hasManualId(f.id)) {\n              <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n            } @else {\n              <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</mat-hint>\n            }\n          </mat-form-field>\n          <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n        </div>\n\n        @if (tabOptions().length > 1) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('tab') }}</mat-label>\n            <mat-select data-testid=\"field-tab\" [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n              @for (tab of tabOptions(); track tab.id) {\n                <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n              }\n            </mat-select>\n            <mat-hint>{{ ui.text('tabMoveHint') }}</mat-hint>\n          </mat-form-field>\n        }\n\n        <!-- Localised text (active language) -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-label\"\n            [ngModel]=\"labelValue(f)\"\n            (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), lang(), $event)\"\n          />\n        </mat-form-field>\n\n        @if (meta()?.supportsPlaceholder) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"placeholderValue(f)\"\n              (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n            />\n          </mat-form-field>\n        }\n\n        <!--\n          Help text, offered on every field type \u2014 including the ones with no placeholder,\n          which are exactly the ones most likely to need explaining. Its hint says what it is\n          *for*, because the box above it is the one authors reach for by habit and a\n          placeholder is gone the moment somebody types.\n        -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('hintInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-hint\"\n            [ngModel]=\"hintValue(f)\"\n            (ngModelChange)=\"store.setFieldHint(store.keyOf(f), lang(), $event)\"\n          />\n          <mat-hint>{{ ui.text('hintHint') }}</mat-hint>\n        </mat-form-field>\n\n        @if (meta()?.supportsDefaultValue) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"f.defaultValue ?? ''\"\n              (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n            />\n          </mat-form-field>\n        }\n      </div>\n    </details>\n\n    <!--\n      Width.\n\n      `colSpan` has been in the schema and honoured by the renderer since the 12-column grid\n      existed, and the builder had no control for it \u2014 so every form authored here came out a\n      single-column ladder, and the only way to put two fields on one row was to hand-edit the\n      JSON. This is that control.\n    -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionLayout') }}\n        <span class=\"deb-inspector__count\" data-testid=\"layout-count\">{{ f.colSpan ?? 12 }}/12</span>\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-span-picker\" role=\"group\" [attr.aria-label]=\"ui.text('width')\">\n          @for (choice of spanChoices; track choice.span) {\n            <button\n              type=\"button\"\n              class=\"deb-span-picker__btn\"\n              [class.deb-span-picker__btn--active]=\"(f.colSpan ?? 12) === choice.span\"\n              [attr.data-testid]=\"'field-span-' + choice.span\"\n              [attr.aria-pressed]=\"(f.colSpan ?? 12) === choice.span\"\n              [matTooltip]=\"ui.text('widthOf', { span: choice.span })\"\n              (click)=\"store.updateField(store.keyOf(f), { colSpan: choice.span })\"\n            >\n              {{ ui.text(choice.textKey) }}\n            </button>\n          }\n        </div>\n        <p class=\"deb-hint\">{{ ui.text('widthHint') }}</p>\n      </div>\n    </details>\n\n    <!-- Validators -->\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length || supportsPattern(f.type) || f.validators?.pattern) {\n        <details class=\"deb-inspector__section\" open>\n          <summary class=\"deb-inspector__summary\">\n            {{ ui.text('sectionValidation') }}\n            @if (validatorCount(f); as count) {\n              <span class=\"deb-inspector__count\" data-testid=\"validation-count\">{{ count }}</span>\n            }\n            <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n          </summary>\n          <div class=\"deb-inspector__body\">\n            @if (m.flagValidators.length) {\n              <div class=\"deb-flags-row\">\n                @for (v of m.flagValidators; track v) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [ngModel]=\"store.hasFlagValidator(f, v)\"\n                    (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n                    >{{ v }}</mat-checkbox\n                  >\n                }\n              </div>\n            }\n            @if (m.paramValidators.length) {\n              <div class=\"deb-param-validators-grid\">\n                @for (v of m.paramValidators; track v) {\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                    <mat-label>{{ v }}</mat-label>\n                    <input\n                      matInput\n                      type=\"number\"\n                      [ngModel]=\"store.getParamValidator(f, v)\"\n                      (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n                    />\n                  </mat-form-field>\n                }\n              </div>\n            }\n\n            @if (supportsPattern(f.type) || f.validators?.pattern) {\n              <div class=\"deb-pattern-box\" data-testid=\"pattern-playground\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('pattern') }}</mat-label>\n                  <input\n                    matInput\n                    data-testid=\"field-pattern-input\"\n                    [ngModel]=\"f.validators?.pattern ?? ''\"\n                    (ngModelChange)=\"store.setPatternValidator(store.keyOf(f), $event)\"\n                  />\n                  <mat-hint>{{ ui.text('patternHint') }}</mat-hint>\n                </mat-form-field>\n\n                <div class=\"deb-pattern-presets\">\n                  <span class=\"deb-section-title\">{{ ui.text('quickPresets') }}:</span>\n                  @for (preset of patternPresets; track preset.label) {\n                    <button\n                      type=\"button\"\n                      class=\"deb-preset-btn\"\n                      [attr.data-testid]=\"'preset-' + preset.label.toLowerCase()\"\n                      (click)=\"applyPreset(f, preset.pattern)\"\n                    >\n                      {{ preset.label }}\n                    </button>\n                  }\n                </div>\n\n                <div class=\"deb-row deb-row--split\">\n                  <span class=\"deb-section-title\">{{ ui.text('testPattern') }}</span>\n                  <div\n                    class=\"deb-pattern-status\"\n                    [class.deb-pattern-status--match]=\"regexEvaluation().status === 'match'\"\n                    [class.deb-pattern-status--no-match]=\"regexEvaluation().status === 'no-match'\"\n                    [class.deb-pattern-status--invalid]=\"regexEvaluation().status === 'invalid'\"\n                    [class.deb-pattern-status--idle]=\"regexEvaluation().status === 'idle'\"\n                    [class.deb-pattern-status--empty]=\"regexEvaluation().status === 'empty'\"\n                    data-testid=\"regex-test-status\"\n                  >\n                    @switch (regexEvaluation().status) {\n                      @case ('match') {\n                        <mat-icon>check_circle</mat-icon> {{ ui.text('patternMatch') }}\n                      }\n                      @case ('no-match') {\n                        <mat-icon>cancel</mat-icon> {{ ui.text('patternNoMatch') }}\n                      }\n                      @case ('invalid') {\n                        <mat-icon>error</mat-icon> {{ ui.text('patternInvalid') }}\n                      }\n                      @case ('idle') {\n                        <mat-icon>edit_note</mat-icon> {{ ui.text('testPatternPlaceholder') }}\n                      }\n                      @case ('empty') {\n                        <mat-icon>info</mat-icon> {{ ui.text('patternEmptyPrompt') }}\n                      }\n                    }\n                  </div>\n                </div>\n\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <input\n                    matInput\n                    data-testid=\"regex-test-input\"\n                    [placeholder]=\"ui.text('testPatternPlaceholder')\"\n                    [ngModel]=\"testSample()\"\n                    (ngModelChange)=\"testSample.set($event)\"\n                  />\n                </mat-form-field>\n              </div>\n            }\n          </div>\n        </details>\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionOptions') }}\n          @if ((f.options ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"options-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n            <mat-select\n              data-testid=\"data-source\"\n              [ngModel]=\"store.fieldDataSource(f)\"\n              (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n            >\n              <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n              <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n              <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Named lookup list -->\n          @if (store.fieldDataSource(f) === 'lookup') {\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n              <mat-label>{{ ui.text('listName') }}</mat-label>\n              <input\n                matInput\n                data-testid=\"list-name\"\n                [ngModel]=\"f.listName ?? ''\"\n                (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n              />\n            </mat-form-field>\n            <p class=\"deb-hint\">\n              {{ ui.text('listNameHint') }}\n            </p>\n          }\n\n          <!-- Inline options -->\n          @if (store.fieldDataSource(f) !== 'lookup') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n              <span class=\"deb-row__actions\">\n                @if (store.hasUnkeyedOptions()) {\n                  <button\n                    mat-stroked-button\n                    type=\"button\"\n                    data-testid=\"assign-option-keys\"\n                    (click)=\"store.assignOptionKeys()\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                  >\n                    <mat-icon>key</mat-icon> {{ ui.text('assignOptionKeys') }}\n                  </button>\n                }\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"add-option\"\n                  (click)=\"store.addOption(store.keyOf(f))\"\n                >\n                  <mat-icon>add</mat-icon> {{ ui.text('option') }}\n                </button>\n              </span>\n            </div>\n            @for (opt of f.options ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <!-- One input: the displayed text is the stored value. -->\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n                  <input\n                    matInput\n                    [attr.data-testid]=\"'option-' + $index\"\n                    [ngModel]=\"optionLabel(opt)\"\n                    (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n                  />\n                </mat-form-field>\n                <!--\n                  Not a control. A key is the option's identity and every record already\n                  holding it matches on it, so a text box here \u2014 even a read-only one \u2014\n                  would be a data migration disguised as a field. It is shown because an\n                  author needs to be able to read it, and for no other reason.\n                -->\n                @if (store.optionKey(opt); as key) {\n                  <code\n                    class=\"deb-option-key\"\n                    [attr.data-testid]=\"'option-key-' + $index\"\n                    [attr.aria-label]=\"ui.text('optionKey')\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                    >{{ key }}</code\n                  >\n                }\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  (click)=\"store.removeOption(store.keyOf(f), $index)\"\n                  [matTooltip]=\"ui.text('removeOption')\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.options ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Flags -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDisplay') }}\n        @if (displayFlagCount(f); as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"display-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-toggles\" role=\"group\" [attr.aria-label]=\"ui.text('display')\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.visibility ?? true\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n            >{{ ui.text('visible') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.table?.visible ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n            >{{ ui.text('tableColumn') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.readonly ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n            >{{ ui.text('readOnly') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.disabled ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n            >{{ ui.text('disabled') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.maskData ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n            >{{ ui.text('maskData') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            data-testid=\"toggle-critical\"\n            [ngModel]=\"f.criticalField ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n            [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n            >{{ ui.text('criticalField') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.showOnMinimize ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n            [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n            >{{ ui.text('showInSummary') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </details>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionVisibility') }}\n        @if (showWhenEntries(f).length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"visibility-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-row deb-row--split\">\n          <span class=\"deb-section-title\">{{ ui.text('showWhen') }}</span>\n          <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n            <mat-icon>add</mat-icon> {{ ui.text('condition') }}\n          </button>\n        </div>\n        @for (entry of showWhenEntries(f); track entry.key) {\n          <div class=\"deb-option-row\" data-testid=\"option-row\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('watchedField') }}</mat-label>\n              <mat-select\n                data-testid=\"show-when-field\"\n                [ngModel]=\"entry.key\"\n                (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n              >\n                @for (option of optionsWith(entry.key); track option.value) {\n                  <mat-option [value]=\"option.value\">\n                    {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('equals') }}</mat-label>\n              <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n            </mat-form-field>\n            <button\n              mat-icon-button\n              type=\"button\"\n              color=\"warn\"\n              [matTooltip]=\"ui.text('removeCondition')\"\n              (click)=\"removeShowWhen(f, entry.key)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        }\n        @if (!showWhenEntries(f).length) {\n          <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Entity reference, cascade, autoPatch, and patchOnTrue -->\n    @if (meta()?.isEntityRef || f.type === 'boolean' || f.type === 'checkbox') {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionAutomation') }}\n          @if ((f.patchOnTrue ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"automation-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          @if (meta()?.isEntityRef) {\n            <ngx-entity-reference-config />\n          }\n\n          <!-- patchOnTrue (boolean/checkbox only) -->\n          @if (f.type === 'boolean' || f.type === 'checkbox') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('copyOnTrue') }}</span>\n              <button\n                mat-stroked-button\n                type=\"button\"\n                data-testid=\"add-patch-on-true\"\n                (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n              >\n                <mat-icon>add</mat-icon> {{ ui.text('mapping') }}\n              </button>\n            </div>\n            @for (mapping of f.patchOnTrue ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('fromField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-from\"\n                    [ngModel]=\"mapping.from\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.from); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('toField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-to\"\n                    [ngModel]=\"mapping.to\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.to); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  [matTooltip]=\"ui.text('removeMapping')\"\n                  (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.patchOnTrue ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Rules attached to this field -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionRules') }}\n        @if (store.rulesForSelectedField().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"rules-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-field-rules-list />\n      </div>\n    </details>\n\n    <!-- Field Dependencies Visualizer -->\n    <details\n      class=\"deb-inspector__section\"\n      open\n      data-testid=\"section-dependencies\"\n    >\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDependencies') }}\n        @if (incomingDependencies().length + outgoingDependencies().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"dependencies-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        @if (incomingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('dependsOn') }} ({{ incomingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"incoming-dependencies\">\n            @for (dep of incomingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.sourceLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.sourceLabel })\"\n                  (click)=\"selectField(dep.sourceKey)\"\n                >\n                  <mat-icon>arrow_back</mat-icon> {{ ui.text('jumpToField', { field: dep.sourceLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (outgoingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('affects') }} ({{ outgoingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"outgoing-dependencies\">\n            @for (dep of outgoingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.targetLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.targetLabel })\"\n                  (click)=\"selectField(dep.targetKey)\"\n                >\n                  <mat-icon>arrow_forward</mat-icon> {{ ui.text('jumpToField', { field: dep.targetLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (!incomingDependencies().length && !outgoingDependencies().length) {\n          <p class=\"deb-hint\" data-testid=\"no-field-dependencies\">{{ ui.text('noDependencies') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Cross-entity field reference & drift management -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionReference') }}\n        @if (f.isReferenced) {\n          <span class=\"deb-inspector__count\" data-testid=\"reference-count\">{{ f.referencedEntityKey }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-referenced-field-config />\n      </div>\n    </details>\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>{{ ui.text('inspectorEmpty') }}</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row>*{flex:1}.deb-row>.deb-chip{flex:0 0 auto}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-pattern-box{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.deb-pattern-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.deb-pattern-status--match{background:#dcfce7;color:#166534}.deb-pattern-status--no-match{background:#fee2e2;color:#991b1b}.deb-pattern-status--invalid{background:#fef3c7;color:#92400e}.deb-pattern-status--idle,.deb-pattern-status--empty{background:#f1f5f9;color:#334155}.deb-pattern-presets{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.deb-preset-btn{padding:2px 8px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;font-size:11px;color:#334155;cursor:pointer;transition:background .1s ease}.deb-preset-btn:hover{background:#e2e8f0}.deb-dep-list{display:flex;flex-direction:column;gap:6px;margin-top:4px;margin-bottom:12px}.deb-dep-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px}.deb-dep-info{display:flex;flex-direction:column;min-width:0}.deb-dep-name{font-size:12px;font-weight:600;color:#0f172a}.deb-dep-detail{font-size:11px;color:#64748b}\n"] }]
+                    ], template: "@if (field(); as f) {\n  <!--\n    The inspector, in collapsible sections.\n\n    It used to be one flat scroll of fifteen divider-separated blocks, so renaming a field\n    meant scrolling past every advanced setting a field has, and finding the rules list meant\n    scrolling past all of them.\n\n    All inspector sections start expanded by default so authors have immediate access to\n    validation, automation, visibility conditions, rules, dependencies, and reference settings\n    without needing to manually unfold each section. Sections can still be collapsed as desired.\n\n    `<details>` rather than mat-expansion-panel: the inspector already sits inside a card in a\n    scrolling rail, and a third level of Material elevation inside that read as noise.\n  -->\n  <div class=\"deb-inspector\">\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionBasics') }}\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <!-- Identity -->\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fieldId') }}</mat-label>\n            <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n            @if (store.hasManualId(f.id)) {\n              <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n            } @else {\n              <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</mat-hint>\n            }\n          </mat-form-field>\n          <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n        </div>\n\n        @if (tabOptions().length > 1) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('tab') }}</mat-label>\n            <mat-select data-testid=\"field-tab\" [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n              @for (tab of tabOptions(); track tab.id) {\n                <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n              }\n            </mat-select>\n            <mat-hint>{{ ui.text('tabMoveHint') }}</mat-hint>\n          </mat-form-field>\n        }\n\n        <!-- Localised text (active language) -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-label\"\n            [ngModel]=\"labelValue(f)\"\n            (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), lang(), $event)\"\n          />\n        </mat-form-field>\n\n        @if (meta()?.supportsPlaceholder) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"placeholderValue(f)\"\n              (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n            />\n          </mat-form-field>\n        }\n\n        <!--\n          Help text, offered on every field type \u2014 including the ones with no placeholder,\n          which are exactly the ones most likely to need explaining. Its hint says what it is\n          *for*, because the box above it is the one authors reach for by habit and a\n          placeholder is gone the moment somebody types.\n        -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('hintInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-hint\"\n            [ngModel]=\"hintValue(f)\"\n            (ngModelChange)=\"store.setFieldHint(store.keyOf(f), lang(), $event)\"\n          />\n          <mat-hint>{{ ui.text('hintHint') }}</mat-hint>\n        </mat-form-field>\n\n        @if (meta()?.supportsDefaultValue) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"f.defaultValue ?? ''\"\n              (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n            />\n          </mat-form-field>\n        }\n      </div>\n    </details>\n\n    <!--\n      Width.\n\n      `colSpan` has been in the schema and honoured by the renderer since the 12-column grid\n      existed, and the builder had no control for it \u2014 so every form authored here came out a\n      single-column ladder, and the only way to put two fields on one row was to hand-edit the\n      JSON. This is that control.\n    -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionLayout') }}\n        <span class=\"deb-inspector__count\" data-testid=\"layout-count\">{{ f.colSpan ?? 12 }}/12</span>\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-span-picker\" role=\"group\" [attr.aria-label]=\"ui.text('width')\">\n          @for (choice of spanChoices; track choice.span) {\n            <button\n              type=\"button\"\n              class=\"deb-span-picker__btn\"\n              [class.deb-span-picker__btn--active]=\"(f.colSpan ?? 12) === choice.span\"\n              [attr.data-testid]=\"'field-span-' + choice.span\"\n              [attr.aria-pressed]=\"(f.colSpan ?? 12) === choice.span\"\n              [matTooltip]=\"ui.text('widthOf', { span: choice.span })\"\n              (click)=\"store.updateField(store.keyOf(f), { colSpan: choice.span })\"\n            >\n              {{ ui.text(choice.textKey) }}\n            </button>\n          }\n        </div>\n        <p class=\"deb-hint\">{{ ui.text('widthHint') }}</p>\n      </div>\n    </details>\n\n    <!-- Validators -->\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length || supportsPattern(f.type) || f.validators?.pattern) {\n        <details class=\"deb-inspector__section\" open>\n          <summary class=\"deb-inspector__summary\">\n            {{ ui.text('sectionValidation') }}\n            @if (validatorCount(f); as count) {\n              <span class=\"deb-inspector__count\" data-testid=\"validation-count\">{{ count }}</span>\n            }\n            <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n          </summary>\n          <div class=\"deb-inspector__body\">\n            @if (m.flagValidators.length) {\n              <div class=\"deb-flags-row\">\n                @for (v of m.flagValidators; track v) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [ngModel]=\"store.hasFlagValidator(f, v)\"\n                    (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n                    >{{ v }}</mat-checkbox\n                  >\n                }\n              </div>\n            }\n            @if (m.paramValidators.length) {\n              <div class=\"deb-param-validators-grid\">\n                @for (v of m.paramValidators; track v) {\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                    <mat-label>{{ v }}</mat-label>\n                    <input\n                      matInput\n                      type=\"number\"\n                      [ngModel]=\"store.getParamValidator(f, v)\"\n                      (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n                    />\n                  </mat-form-field>\n                }\n              </div>\n            }\n            @if (f.type === 'slider') {\n              <!-- The slider's range is min and max above; its increment is the one number left. -->\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('sliderStep') }}</mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  min=\"0\"\n                  data-testid=\"field-step\"\n                  [ngModel]=\"f.step ?? null\"\n                  (ngModelChange)=\"store.updateField(store.keyOf(f), { step: positiveOrUnset($event) })\"\n                />\n                <mat-hint>{{ ui.text('sliderStepHint') }}</mat-hint>\n              </mat-form-field>\n            }\n\n            @if (supportsPattern(f.type) || f.validators?.pattern) {\n              <div class=\"deb-pattern-box\" data-testid=\"pattern-playground\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('pattern') }}</mat-label>\n                  <input\n                    matInput\n                    data-testid=\"field-pattern-input\"\n                    [ngModel]=\"f.validators?.pattern ?? ''\"\n                    (ngModelChange)=\"store.setPatternValidator(store.keyOf(f), $event)\"\n                  />\n                  <mat-hint>{{ ui.text('patternHint') }}</mat-hint>\n                </mat-form-field>\n\n                <div class=\"deb-pattern-presets\">\n                  <span class=\"deb-section-title\">{{ ui.text('quickPresets') }}:</span>\n                  @for (preset of patternPresets; track preset.label) {\n                    <button\n                      type=\"button\"\n                      class=\"deb-preset-btn\"\n                      [attr.data-testid]=\"'preset-' + preset.label.toLowerCase()\"\n                      (click)=\"applyPreset(f, preset.pattern)\"\n                    >\n                      {{ preset.label }}\n                    </button>\n                  }\n                </div>\n\n                <div class=\"deb-row deb-row--split\">\n                  <span class=\"deb-section-title\">{{ ui.text('testPattern') }}</span>\n                  <div\n                    class=\"deb-pattern-status\"\n                    [class.deb-pattern-status--match]=\"regexEvaluation().status === 'match'\"\n                    [class.deb-pattern-status--no-match]=\"regexEvaluation().status === 'no-match'\"\n                    [class.deb-pattern-status--invalid]=\"regexEvaluation().status === 'invalid'\"\n                    [class.deb-pattern-status--idle]=\"regexEvaluation().status === 'idle'\"\n                    [class.deb-pattern-status--empty]=\"regexEvaluation().status === 'empty'\"\n                    data-testid=\"regex-test-status\"\n                  >\n                    @switch (regexEvaluation().status) {\n                      @case ('match') {\n                        <mat-icon>check_circle</mat-icon> {{ ui.text('patternMatch') }}\n                      }\n                      @case ('no-match') {\n                        <mat-icon>cancel</mat-icon> {{ ui.text('patternNoMatch') }}\n                      }\n                      @case ('invalid') {\n                        <mat-icon>error</mat-icon> {{ ui.text('patternInvalid') }}\n                      }\n                      @case ('idle') {\n                        <mat-icon>edit_note</mat-icon> {{ ui.text('testPatternPlaceholder') }}\n                      }\n                      @case ('empty') {\n                        <mat-icon>info</mat-icon> {{ ui.text('patternEmptyPrompt') }}\n                      }\n                    }\n                  </div>\n                </div>\n\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <input\n                    matInput\n                    data-testid=\"regex-test-input\"\n                    [placeholder]=\"ui.text('testPatternPlaceholder')\"\n                    [ngModel]=\"testSample()\"\n                    (ngModelChange)=\"testSample.set($event)\"\n                  />\n                </mat-form-field>\n              </div>\n            }\n          </div>\n        </details>\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionOptions') }}\n          @if ((f.options ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"options-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n            <mat-select\n              data-testid=\"data-source\"\n              [ngModel]=\"store.fieldDataSource(f)\"\n              (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n            >\n              <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n              <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n              <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Named lookup list -->\n          @if (store.fieldDataSource(f) === 'lookup') {\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n              <mat-label>{{ ui.text('listName') }}</mat-label>\n              <input\n                matInput\n                data-testid=\"list-name\"\n                [ngModel]=\"f.listName ?? ''\"\n                (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n              />\n            </mat-form-field>\n            <p class=\"deb-hint\">\n              {{ ui.text('listNameHint') }}\n            </p>\n          }\n\n          <!-- Inline options -->\n          @if (store.fieldDataSource(f) !== 'lookup') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n              <span class=\"deb-row__actions\">\n                @if (store.hasUnkeyedOptions()) {\n                  <button\n                    mat-stroked-button\n                    type=\"button\"\n                    data-testid=\"assign-option-keys\"\n                    (click)=\"store.assignOptionKeys()\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                  >\n                    <mat-icon>key</mat-icon> {{ ui.text('assignOptionKeys') }}\n                  </button>\n                }\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"add-option\"\n                  (click)=\"store.addOption(store.keyOf(f))\"\n                >\n                  <mat-icon>add</mat-icon> {{ ui.text('option') }}\n                </button>\n              </span>\n            </div>\n            @for (opt of f.options ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <!-- One input: the displayed text is the stored value. -->\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n                  <input\n                    matInput\n                    [attr.data-testid]=\"'option-' + $index\"\n                    [ngModel]=\"optionLabel(opt)\"\n                    (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n                  />\n                </mat-form-field>\n                <!--\n                  Not a control. A key is the option's identity and every record already\n                  holding it matches on it, so a text box here \u2014 even a read-only one \u2014\n                  would be a data migration disguised as a field. It is shown because an\n                  author needs to be able to read it, and for no other reason.\n                -->\n                @if (store.optionKey(opt); as key) {\n                  <code\n                    class=\"deb-option-key\"\n                    [attr.data-testid]=\"'option-key-' + $index\"\n                    [attr.aria-label]=\"ui.text('optionKey')\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                    >{{ key }}</code\n                  >\n                }\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  (click)=\"store.removeOption(store.keyOf(f), $index)\"\n                  [matTooltip]=\"ui.text('removeOption')\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.options ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Flags -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDisplay') }}\n        @if (displayFlagCount(f); as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"display-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-toggles\" role=\"group\" [attr.aria-label]=\"ui.text('display')\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.visibility ?? true\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n            >{{ ui.text('visible') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.table?.visible ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n            >{{ ui.text('tableColumn') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.readonly ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n            >{{ ui.text('readOnly') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.disabled ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n            >{{ ui.text('disabled') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.maskData ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n            >{{ ui.text('maskData') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            data-testid=\"toggle-critical\"\n            [ngModel]=\"f.criticalField ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n            [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n            >{{ ui.text('criticalField') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.showOnMinimize ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n            [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n            >{{ ui.text('showInSummary') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </details>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionVisibility') }}\n        @if (showWhenEntries(f).length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"visibility-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-row deb-row--split\">\n          <span class=\"deb-section-title\">{{ ui.text('showWhen') }}</span>\n          <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n            <mat-icon>add</mat-icon> {{ ui.text('condition') }}\n          </button>\n        </div>\n        @for (entry of showWhenEntries(f); track entry.key) {\n          <div class=\"deb-option-row\" data-testid=\"option-row\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('watchedField') }}</mat-label>\n              <mat-select\n                data-testid=\"show-when-field\"\n                [ngModel]=\"entry.key\"\n                (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n              >\n                @for (option of optionsWith(entry.key); track option.value) {\n                  <mat-option [value]=\"option.value\">\n                    {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('equals') }}</mat-label>\n              <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n            </mat-form-field>\n            <button\n              mat-icon-button\n              type=\"button\"\n              color=\"warn\"\n              [matTooltip]=\"ui.text('removeCondition')\"\n              (click)=\"removeShowWhen(f, entry.key)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        }\n        @if (!showWhenEntries(f).length) {\n          <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Entity reference, cascade, autoPatch, and patchOnTrue -->\n    @if (meta()?.isEntityRef || f.type === 'boolean' || f.type === 'checkbox') {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionAutomation') }}\n          @if ((f.patchOnTrue ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"automation-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          @if (meta()?.isEntityRef) {\n            <ngx-entity-reference-config />\n          }\n\n          <!-- patchOnTrue (boolean/checkbox only) -->\n          @if (f.type === 'boolean' || f.type === 'checkbox') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('copyOnTrue') }}</span>\n              <button\n                mat-stroked-button\n                type=\"button\"\n                data-testid=\"add-patch-on-true\"\n                (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n              >\n                <mat-icon>add</mat-icon> {{ ui.text('mapping') }}\n              </button>\n            </div>\n            @for (mapping of f.patchOnTrue ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('fromField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-from\"\n                    [ngModel]=\"mapping.from\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.from); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('toField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-to\"\n                    [ngModel]=\"mapping.to\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.to); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  [matTooltip]=\"ui.text('removeMapping')\"\n                  (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.patchOnTrue ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Rules attached to this field -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionRules') }}\n        @if (store.rulesForSelectedField().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"rules-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-field-rules-list />\n      </div>\n    </details>\n\n    <!-- Field Dependencies Visualizer -->\n    <details\n      class=\"deb-inspector__section\"\n      open\n      data-testid=\"section-dependencies\"\n    >\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDependencies') }}\n        @if (incomingDependencies().length + outgoingDependencies().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"dependencies-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        @if (incomingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('dependsOn') }} ({{ incomingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"incoming-dependencies\">\n            @for (dep of incomingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.sourceLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.sourceLabel })\"\n                  (click)=\"selectField(dep.sourceKey)\"\n                >\n                  <mat-icon>arrow_back</mat-icon> {{ ui.text('jumpToField', { field: dep.sourceLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (outgoingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('affects') }} ({{ outgoingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"outgoing-dependencies\">\n            @for (dep of outgoingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.targetLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.targetLabel })\"\n                  (click)=\"selectField(dep.targetKey)\"\n                >\n                  <mat-icon>arrow_forward</mat-icon> {{ ui.text('jumpToField', { field: dep.targetLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (!incomingDependencies().length && !outgoingDependencies().length) {\n          <p class=\"deb-hint\" data-testid=\"no-field-dependencies\">{{ ui.text('noDependencies') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Cross-entity field reference & drift management -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionReference') }}\n        @if (f.isReferenced) {\n          <span class=\"deb-inspector__count\" data-testid=\"reference-count\">{{ f.referencedEntityKey }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-referenced-field-config />\n      </div>\n    </details>\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>{{ ui.text('inspectorEmpty') }}</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row>*{flex:1}.deb-row>.deb-chip{flex:0 0 auto}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-pattern-box{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.deb-pattern-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.deb-pattern-status--match{background:#dcfce7;color:#166534}.deb-pattern-status--no-match{background:#fee2e2;color:#991b1b}.deb-pattern-status--invalid{background:#fef3c7;color:#92400e}.deb-pattern-status--idle,.deb-pattern-status--empty{background:#f1f5f9;color:#334155}.deb-pattern-presets{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.deb-preset-btn{padding:2px 8px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;font-size:11px;color:#334155;cursor:pointer;transition:background .1s ease}.deb-preset-btn:hover{background:#e2e8f0}.deb-dep-list{display:flex;flex-direction:column;gap:6px;margin-top:4px;margin-bottom:12px}.deb-dep-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px}.deb-dep-info{display:flex;flex-direction:column;min-width:0}.deb-dep-name{font-size:12px;font-weight:600;color:#0f172a}.deb-dep-detail{font-size:11px;color:#64748b}\n"] }]
         }] });
 
 /**
@@ -3598,12 +3614,18 @@ const GROUP_OF = {
     currency: 'basic',
     email: 'basic',
     password: 'basic',
+    url: 'basic',
+    phone: 'basic',
+    slider: 'basic',
+    color: 'basic',
     dropdown: 'choice',
     radio: 'choice',
     multiSelect: 'choice',
     checkbox: 'choice',
     boolean: 'choice',
     'entity-ref': 'choice',
+    rating: 'choice',
+    tags: 'choice',
     date: 'datetime',
     datetime: 'datetime',
     time: 'datetime',
@@ -3626,11 +3648,8 @@ const GROUP_TEXT_KEY = {
 /**
  * FieldPaletteComponent — the list of buildable field types.
  *
- * Two things changed the day this stopped being a flat grid of twenty-two buttons. The labels
- * were clipped mid-word — "Boolean Toggl", "Entity Referen", "File Attachmen" — because the
- * grid forced two equal columns and the button refused to wrap, so a third of the palette
- * could not be read. And with no order to them, finding "Month & Year" meant scanning the
- * whole list: the grouping and the filter are what make a palette this size navigable.
+ * Grouped and filterable, because a flat list of twenty-two types is not navigable, and
+ * tiles wrap their labels so names like "Entity Reference" are never clipped.
  */
 class FieldPaletteComponent {
     /** Builder chrome, overridable via BUILDER_TEXT. */
@@ -3659,8 +3678,8 @@ class FieldPaletteComponent {
         })).filter(section => section.items.length > 0);
     }, ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
     pick = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FieldPaletteComponent, isStandalone: true, selector: "ngx-field-palette", outputs: { pick: "pick" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FieldPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FieldPaletteComponent, isStandalone: true, selector: "ngx-field-palette", outputs: { pick: "pick" }, ngImport: i0, template: `
     <div class="deb-palette">
       <div class="deb-palette__search">
         <mat-icon aria-hidden="true">search</mat-icon>
@@ -3710,7 +3729,7 @@ class FieldPaletteComponent {
     </div>
   `, isInline: true, styles: [".deb-palette{display:flex;flex-direction:column;gap:14px}.deb-palette__search{display:flex;align-items:center;gap:8px;padding:0 10px;height:36px;border:1px solid var(--deb-border, #e2e8f0);border-radius:8px;background:#f8fafc}.deb-palette__search:focus-within{border-color:var(--deb-accent, #6366f1);background:#fff;box-shadow:0 0 0 3px #6366f129}.deb-palette__search mat-icon{font-size:17px;width:17px;height:17px;color:var(--deb-muted, #64748b);flex:none}.deb-palette__search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:inherit}.deb-palette__search input::-webkit-search-cancel-button{display:none}.deb-palette__clear{appearance:none;border:0;background:none;padding:0;cursor:pointer;display:flex;color:var(--deb-muted, #64748b)}.deb-palette__clear:hover{color:#0f172a}.deb-palette__section{display:flex;flex-direction:column;gap:6px}.deb-palette__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.deb-palette__item{justify-content:flex-start!important;height:auto!important;min-height:38px;line-height:1.25!important;border-radius:8px!important;border:1px solid var(--deb-border, #e2e8f0)!important;padding:7px 10px!important;font-family:var(--font-heading, inherit)!important;font-weight:600!important;font-size:12.5px!important;transition:all .18s cubic-bezier(.16,1,.3,1)!important;background:#fff!important;text-align:left!important}.deb-palette__item:hover{border-color:#6366f1!important;background:#f5f3ff!important;color:#4f46e5!important;transform:translateY(-1px);box-shadow:0 4px 12px #6366f126!important}.deb-palette__item mat-icon{color:#4338ca;margin-right:7px;font-size:17px;width:17px;height:17px;flex:none}.deb-palette__item span{white-space:normal;overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){.deb-palette__item{transition:none!important}.deb-palette__item:hover{transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldPaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FieldPaletteComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-field-palette', standalone: true, imports: [MatButtonModule, MatIconModule, MatTooltipModule], template: `
     <div class="deb-palette">
@@ -3792,8 +3811,8 @@ class TabManagerComponent {
         }
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TabManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: TabManagerComponent, isStandalone: true, selector: "ngx-tab-manager", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TabManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: TabManagerComponent, isStandalone: true, selector: "ngx-tab-manager", ngImport: i0, template: `
     <div class="deb-tabs">
       <div class="deb-tabs__head">
         <span class="deb-section-title">{{ ui.text('tabsManager') }}</span>
@@ -3939,7 +3958,7 @@ class TabManagerComponent {
     </div>
   `, isInline: true, styles: [".deb-tabs__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.deb-tab-card{border:1px solid var(--deb-border, #e5e7eb);border-radius:8px;padding:10px;margin-bottom:10px;background:var(--deb-bg-surface, #ffffff)}.deb-tab-card--system{border-left:4px solid var(--deb-accent, #6366f1)}.deb-tabs__row{display:flex;align-items:center;gap:4px}.deb-tab-settings{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:8px;font-size:13px}.deb-tab-module{margin-top:8px}.deb-subtabs{margin-top:8px;padding-left:16px;border-left:2px dashed var(--deb-border, #e5e7eb)}.deb-subtabs__title{font-size:12px;font-weight:600;color:var(--deb-muted, #6b7280)}.deb-subtab-row{margin-top:6px}.deb-grow{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TabManagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TabManagerComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-tab-manager', standalone: true, imports: [
                         FormsModule,
@@ -4114,8 +4133,8 @@ class EntityBuilderTreeNodeComponent {
         const lang = this.store.activeLanguage();
         return resolveLabel(field.label, lang) || field.id;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderTreeNodeComponent, isStandalone: true, selector: "ngx-entity-builder-tree-node", inputs: { field: "field", index: "index", totalCount: "totalCount" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityBuilderTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: EntityBuilderTreeNodeComponent, isStandalone: true, selector: "ngx-entity-builder-tree-node", inputs: { field: "field", index: "index", totalCount: "totalCount" }, ngImport: i0, template: `
     <div
       cdkDrag
       class="deb-field-row"
@@ -4231,7 +4250,7 @@ class EntityBuilderTreeNodeComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: EntityBuilderTreeNodeComponent, selector: "ngx-entity-builder-tree-node", inputs: ["field", "index", "totalCount"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderTreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityBuilderTreeNodeComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -4383,8 +4402,8 @@ class EntityBuilderCanvasComponent {
     onDrop(tabId, event) {
         this.store.reorderField(event.previousIndex, event.currentIndex, tabId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderCanvasComponent, isStandalone: true, selector: "ngx-entity-builder-canvas", outputs: { collapse: "collapse" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityBuilderCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: EntityBuilderCanvasComponent, isStandalone: true, selector: "ngx-entity-builder-canvas", outputs: { collapse: "collapse" }, ngImport: i0, template: `
     <mat-card class="deb-card deb-card--canvas">
       <mat-card-header>
         <mat-card-title class="deb-card__title">
@@ -4409,10 +4428,9 @@ class EntityBuilderCanvasComponent {
         @if (store.fields().length === 0) {
           <div class="deb-empty">
             <!--
-              Decoration, and marked as such. The sentence below says everything this glyph
-              says, so a reader hearing "widgets" before it learns nothing; and a faint
-              illustration cannot meet a text contrast ratio without ceasing to be faint.
-              Hidden from the accessibility tree, it is neither announced nor measured.
+              Decoration, and marked as such: the sentence below says everything this glyph
+              says, so it is hidden from the accessibility tree. axe still measures its
+              contrast, so its colour passes AA like any other text.
             -->
             <mat-icon aria-hidden="true">widgets</mat-icon>
             <p>{{ ui.text('canvasEmpty') }}</p>
@@ -4445,7 +4463,7 @@ class EntityBuilderCanvasComponent {
     </mat-card>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityBuilderTreeNodeComponent, selector: "ngx-entity-builder-tree-node", inputs: ["field", "index", "totalCount"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderCanvasComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityBuilderCanvasComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -4485,10 +4503,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         @if (store.fields().length === 0) {
           <div class="deb-empty">
             <!--
-              Decoration, and marked as such. The sentence below says everything this glyph
-              says, so a reader hearing "widgets" before it learns nothing; and a faint
-              illustration cannot meet a text contrast ratio without ceasing to be faint.
-              Hidden from the accessibility tree, it is neither announced nor measured.
+              Decoration, and marked as such: the sentence below says everything this glyph
+              says, so it is hidden from the accessibility tree. axe still measures its
+              contrast, so its colour passes AA like any other text.
             -->
             <mat-icon aria-hidden="true">widgets</mat-icon>
             <p>{{ ui.text('canvasEmpty') }}</p>
@@ -4573,8 +4590,8 @@ class RuleDependencyGraphComponent {
             this.dismiss.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RuleDependencyGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: RuleDependencyGraphComponent, isStandalone: true, selector: "ngx-rule-dependency-graph", outputs: { dismiss: "dismiss", selectField: "selectField" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RuleDependencyGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: RuleDependencyGraphComponent, isStandalone: true, selector: "ngx-rule-dependency-graph", outputs: { dismiss: "dismiss", selectField: "selectField" }, ngImport: i0, template: `
     <div class="deb-graph-backdrop" (click)="onBackdropClick($event)">
       <div class="deb-graph-dialog" role="dialog" aria-modal="true" data-testid="rule-graph-dialog">
         <div class="deb-graph-header">
@@ -4743,7 +4760,7 @@ class RuleDependencyGraphComponent {
     </div>
   `, isInline: true, styles: [".deb-graph-backdrop{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;animation:debFadeIn .15s ease-out}@keyframes debFadeIn{0%{opacity:0}to{opacity:1}}.deb-graph-dialog{background:var(--deb-surface, #ffffff);border:1px solid var(--deb-border, #e2e8f0);border-radius:14px;width:100%;max-width:960px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px #00000040;overflow:hidden}.deb-graph-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--deb-border, #e2e8f0)}.deb-graph-header__title-row{display:flex;align-items:center;gap:10px}.deb-graph-icon{color:var(--deb-accent, #6366f1);font-size:26px;width:26px;height:26px}.deb-graph-title{font-size:18px;font-weight:700;color:#0f172a;margin:0}.deb-graph-subtitle{font-size:13px;color:var(--deb-muted, #64748b);margin:4px 0 0}.deb-graph-metrics{display:flex;gap:12px;padding:12px 24px;background:#f8fafc;border-bottom:1px solid var(--deb-border, #e2e8f0);flex-wrap:wrap}.deb-metric-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:9999px;font-size:12px;font-weight:600;border:1px solid transparent}.deb-metric-pill mat-icon{font-size:16px;width:16px;height:16px}.deb-metric-pill--rule{background:#eef2ff;color:#4f46e5;border-color:#c7d2fe}.deb-metric-pill--show-when{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0}.deb-metric-pill--cascade{background:#fefce8;color:#ca8a04;border-color:#fef08a}.deb-metric-pill--patch{background:#fdf2f8;color:#db2777;border-color:#fbcfe8}.deb-graph-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;border-bottom:1px solid var(--deb-border, #e2e8f0);flex-wrap:wrap}.deb-graph-search{flex:1;min-width:240px}.deb-graph-filter-types{display:flex;gap:6px;flex-wrap:wrap}.deb-filter-btn{padding:5px 12px;border-radius:6px;border:1px solid var(--deb-border, #e2e8f0);background:#fff;font-size:12px;font-weight:500;color:#475569;cursor:pointer;transition:all .15s ease}.deb-filter-btn:hover{background:#f1f5f9;color:#0f172a}.deb-filter-btn--active{background:var(--deb-accent, #6366f1);color:#fff;border-color:var(--deb-accent, #6366f1)}.deb-filter-btn--active:hover{background:var(--deb-accent-hover, #4f46e5)}.deb-graph-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:12px}.deb-graph-empty{text-align:center;padding:48px 16px;color:var(--deb-muted, #64748b)}.deb-graph-empty mat-icon{font-size:40px;width:40px;height:40px;margin-bottom:8px;opacity:.5}.deb-edge-card{display:grid;grid-template-columns:220px 1fr 220px;align-items:center;gap:16px;padding:12px 16px;background:#fff;border:1px solid var(--deb-border, #e2e8f0);border-radius:10px;transition:box-shadow .15s ease,border-color .15s ease}.deb-edge-card:hover{border-color:#cbd5e1;box-shadow:0 4px 6px -1px #0000000d}.deb-node-chip{display:flex;flex-direction:column;align-items:flex-start;padding:8px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer;text-align:left;width:100%;transition:background .15s ease,border-color .15s ease}.deb-node-chip:hover{background:#f1f5f9;border-color:var(--deb-accent, #6366f1)}.deb-node-chip__icon{font-size:16px;width:16px;height:16px;color:var(--deb-accent, #6366f1);margin-bottom:2px}.deb-node-chip__label{font-size:13px;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}.deb-node-chip__key{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;color:var(--deb-muted, #64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}.deb-edge-flow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}.deb-edge-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px}.deb-edge-badge--rule{background:#eef2ff;color:#4f46e5}.deb-edge-badge--show-when{background:#f0fdf4;color:#16a34a}.deb-edge-badge--cascade{background:#fefce8;color:#a16207}.deb-edge-badge--patch{background:#fdf2f8;color:#be185d}.deb-edge-arrow{display:inline-flex;align-items:center;gap:6px;color:#475569}.deb-edge-summary{font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;background:#f1f5f9;padding:2px 8px;border-radius:4px}.deb-edge-arrow-icon{font-size:16px;width:16px;height:16px;color:var(--deb-muted, #64748b)}.deb-edge-desc{font-size:11px;color:var(--deb-muted, #64748b)}.deb-graph-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-top:1px solid var(--deb-border, #e2e8f0);background:#f8fafc}.deb-graph-count{font-size:13px;color:var(--deb-muted, #64748b)}@media(max-width:768px){.deb-edge-card{grid-template-columns:1fr;gap:8px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RuleDependencyGraphComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RuleDependencyGraphComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-rule-dependency-graph', standalone: true, imports: [
                         FormsModule,
@@ -5171,10 +5188,10 @@ class EntityBuilderComponent {
             .filter(Boolean)));
         this.store.setPermission(action, roles);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, rules: { classPropertyName: "rules", publicName: "rules", isSignal: false, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: false, isRequired: false, transformFunction: null }, uiLanguage: { classPropertyName: "uiLanguage", publicName: "uiLanguage", isSignal: false, isRequired: false, transformFunction: null }, availableRoles: { classPropertyName: "availableRoles", publicName: "availableRoles", isSignal: false, isRequired: false, transformFunction: null }, userRoles: { classPropertyName: "userRoles", publicName: "userRoles", isSignal: false, isRequired: false, transformFunction: null }, commonModules: { classPropertyName: "commonModules", publicName: "commonModules", isSignal: false, isRequired: false, transformFunction: null }, leftSidebarOpen: { classPropertyName: "leftSidebarOpen", publicName: "leftSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarOpen: { classPropertyName: "rightSidebarOpen", publicName: "rightSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, fieldsOpen: { classPropertyName: "fieldsOpen", publicName: "fieldsOpen", isSignal: true, isRequired: false, transformFunction: null }, previewOpen: { classPropertyName: "previewOpen", publicName: "previewOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", rulesChange: "rulesChange", save: "save", leftSidebarOpen: "leftSidebarOpenChange", rightSidebarOpen: "rightSidebarOpenChange", fieldsOpen: "fieldsOpenChange", previewOpen: "previewOpenChange" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-left-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"leftSidebarOpen()\"\n    [attr.aria-expanded]=\"leftSidebarOpen()\"\n    aria-controls=\"deb-left-sidebar\"\n    (click)=\"toggleLeftSidebar()\"\n    [matTooltip]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n    [attr.aria-label]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n  >\n    <mat-icon>{{ leftSidebarOpen() ? 'menu_open' : 'menu' }}</mat-icon>\n  </button>\n\n  <mat-icon class=\"deb-toolbar__mark\">dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-toolbar__entity\" data-testid=\"builder-toolbar-entity\">{{ store.config().entity || '\u2014' }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  <!--\n    The issue count, and the issues.\n    It used to be a button labelled \"0 / 1\" whose tooltip said to hover the items in the list\n    \u2014 a list that did not exist anywhere in the builder. The count now opens the problems\n    themselves, and an entry that names a field selects it, which is the action the person\n    reading the message wants to take next.\n  -->\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      data-testid=\"builder-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matMenuTriggerFor]=\"problemsMenu\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ ui.text('issuesCount', { errors: store.errors().length, total: store.problems().length }) }}\n    </button>\n    <mat-menu #problemsMenu=\"matMenu\" class=\"deb-problems-menu\">\n      @for (problem of store.problems(); track $index) {\n        <button\n          mat-menu-item\n          type=\"button\"\n          data-testid=\"builder-problem\"\n          [disabled]=\"!problem.fieldId\"\n          (click)=\"selectProblemField(problem)\"\n        >\n          <mat-icon [class.deb-problems--error]=\"problem.level === 'error'\">{{\n            problem.level === 'error' ? 'error' : 'warning'\n          }}</mat-icon>\n          <span class=\"deb-problems-menu__text\">{{ problem.message }}</span>\n        </button>\n      }\n    </mat-menu>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    (click)=\"copyJson()\"\n    [matTooltip]=\"ui.text('copyJson')\"\n    [attr.aria-label]=\"ui.text('copyJson')\"\n  >\n    <mat-icon>content_copy</mat-icon>\n    <!-- The label goes on a narrow screen; the tooltip and aria-label above carry the name. -->\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('copyJson') }}</span>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    data-testid=\"builder-rule-graph\"\n    (click)=\"openRuleGraph()\"\n    [matTooltip]=\"ui.text('ruleGraph')\"\n    [attr.aria-label]=\"ui.text('ruleGraph')\"\n  >\n    <mat-icon>hub</mat-icon>\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('ruleGraph') }}</span>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-fields\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"fieldsOpen()\"\n    [attr.aria-expanded]=\"fieldsOpen()\"\n    aria-controls=\"deb-fields-section\"\n    (click)=\"toggleFields()\"\n    [matTooltip]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n    [attr.aria-label]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n  >\n    <mat-icon>{{ fieldsOpen() ? 'view_agenda' : 'table_rows' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-preview\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"previewOpen()\"\n    [attr.aria-expanded]=\"previewOpen()\"\n    aria-controls=\"deb-preview-section\"\n    (click)=\"togglePreview()\"\n    [matTooltip]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n    [attr.aria-label]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n  >\n    <mat-icon>{{ previewOpen() ? 'visibility' : 'visibility_off' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-right-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"rightSidebarOpen()\"\n    [attr.aria-expanded]=\"rightSidebarOpen()\"\n    aria-controls=\"deb-right-sidebar\"\n    (click)=\"toggleRightSidebar()\"\n    [matTooltip]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n    [attr.aria-label]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n  >\n    <mat-icon>{{ rightSidebarOpen() ? 'vertical_split' : 'tune' }}</mat-icon>\n  </button>\n\n  <!--\n    The tooltip sits on a wrapper, not on the button.\n\n    A disabled button receives no pointer events, so a tooltip bound to it never fires \u2014 which\n    is the one state where the explanation is worth having. Saving stays disabled here (unlike\n    the renderer's Save, which refuses instead): an invalid *schema* is not something the\n    author can be shown their way out of one field at a time, and the issue list beside this\n    button is where that conversation happens.\n  -->\n  <span [matTooltip]=\"store.isValid() ? '' : ui.text('saveBlockedTooltip')\" [matTooltipDisabled]=\"store.isValid()\">\n    <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n    <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n      <mat-icon>save</mat-icon> {{ ui.text('save') }}\n    </button>\n  </span>\n</mat-toolbar>\n\n<div\n  class=\"deb-body\"\n  [class.deb-body--left-collapsed]=\"!leftSidebarOpen()\"\n  [class.deb-body--right-collapsed]=\"!rightSidebarOpen()\"\n>\n  <!-- Collapsed left sidebar: the rail that brings it back. -->\n  @if (!leftSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--left\"\n      data-testid=\"expand-left-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-left-sidebar\"\n      (click)=\"expandLeft()\"\n      [matTooltip]=\"ui.text('expandPalette')\"\n      [attr.aria-label]=\"ui.text('expandPalette')\"\n    >\n      <!--\n        The card's own icon, not its name turned on its side. A 44px rail can only hold a\n        label by rotating it, and a rotated word is one you have to tilt your head to read \u2014\n        worse in German, where \"Eigenschaften\" is half a screen tall. The tooltip and the\n        accessible name carry the words; the label below returns when the rail lies flat.\n      -->\n      <mat-icon class=\"deb-dock-btn__icon\">add_circle_outline</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('paletteRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_right</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-left-sidebar\"\n    class=\"deb-col deb-col--left\"\n    data-testid=\"builder-left-sidebar\"\n    [hidden]=\"!leftSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--palette\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">add_circle_outline</mat-icon>\n          {{ ui.text('addField') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-left-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-left-sidebar\"\n          (click)=\"collapseLeft()\"\n          [matTooltip]=\"ui.text('collapsePalette')\"\n          [attr.aria-label]=\"ui.text('collapsePalette')\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--settings\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ store.config().entity || ui.text('entityName') }}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <div class=\"deb-settings-grid\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('entityName') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"store.config().entity\"\n              (ngModelChange)=\"store.setEntityName($event)\"\n              [placeholder]=\"ui.text('entityNamePlaceholder')\"\n            />\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <div class=\"deb-mask-row\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"store.config().maskData ?? false\"\n            (ngModelChange)=\"store.setMaskData($event)\"\n            >{{ ui.text('maskEntity') }}</mat-slide-toggle\n          >\n        </div>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--tabs\">\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas, then what it renders as \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\" data-testid=\"builder-canvas-column\">\n    <!-- Collapsed fields canvas dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--fields\"\n      [class.deb-dock-pane--open]=\"!fieldsOpen()\"\n      [attr.aria-hidden]=\"fieldsOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--fields\"\n          data-testid=\"expand-fields\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-fields-section\"\n          (click)=\"expandFields()\"\n          [matTooltip]=\"ui.text('expandFields')\"\n          [attr.aria-label]=\"ui.text('expandFields')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">format_list_bulleted</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('fieldsRailLabel') }} ({{ store.fields().length }})</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Fields canvas section -->\n    <div\n      id=\"deb-fields-section\"\n      class=\"deb-toggle-pane deb-section--fields\"\n      [class.deb-toggle-pane--collapsed]=\"!fieldsOpen()\"\n      data-testid=\"builder-fields-section\"\n      [attr.aria-hidden]=\"!fieldsOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <ngx-entity-builder-canvas (collapse)=\"collapseFields()\" />\n      </div>\n    </div>\n\n    <!-- Collapsed preview dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--preview\"\n      [class.deb-dock-pane--open]=\"!previewOpen()\"\n      [attr.aria-hidden]=\"previewOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--preview\"\n          data-testid=\"expand-preview\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-preview-section\"\n          (click)=\"expandPreview()\"\n          [matTooltip]=\"ui.text('expandPreview')\"\n          [attr.aria-label]=\"ui.text('expandPreview')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">visibility</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('previewRailLabel') }}</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_up</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!--\n      The live preview, moved up from the footer.\n      Directly under the field list is where a change and its effect can be seen in the same glance.\n    -->\n    <div\n      id=\"deb-preview-section\"\n      class=\"deb-toggle-pane deb-preview-slot\"\n      [class.deb-toggle-pane--collapsed]=\"!previewOpen()\"\n      data-testid=\"builder-preview-section\"\n      [attr.aria-hidden]=\"!previewOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <mat-card class=\"deb-card deb-card--preview\">\n          <mat-card-header>\n            <mat-card-title class=\"deb-card__title\">\n              <mat-icon class=\"deb-card__icon\">visibility</mat-icon>\n              {{ ui.text('previewHeading') }}\n            </mat-card-title>\n            <button\n              mat-icon-button\n              type=\"button\"\n              class=\"deb-card__collapse-btn\"\n              data-testid=\"collapse-preview\"\n              aria-expanded=\"true\"\n              aria-controls=\"deb-preview-section\"\n              (click)=\"collapsePreview()\"\n              [matTooltip]=\"ui.text('collapsePreview')\"\n              [attr.aria-label]=\"ui.text('collapsePreview')\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          </mat-card-header>\n          <mat-card-content>\n            <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapsed right sidebar: the rail that brings it back. -->\n  @if (!rightSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--right\"\n      data-testid=\"expand-right-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-right-sidebar\"\n      (click)=\"expandRight()\"\n      [matTooltip]=\"ui.text('expandInspector')\"\n      [attr.aria-label]=\"ui.text('expandInspector')\"\n    >\n      <mat-icon class=\"deb-dock-btn__icon\">tune</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('inspectorRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_left</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-right-sidebar\"\n    class=\"deb-col deb-col--right\"\n    data-testid=\"builder-right-sidebar\"\n    [hidden]=\"!rightSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--inspector\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ ui.text('fieldProperties') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-right-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-right-sidebar\"\n          (click)=\"collapseRight()\"\n          [matTooltip]=\"ui.text('collapseInspector')\"\n          [attr.aria-label]=\"ui.text('collapseInspector')\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: the exported JSON \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n</div>\n\n@if (ruleGraphOpen()) {\n  <ngx-rule-dependency-graph\n    (dismiss)=\"closeRuleGraph()\"\n    (selectField)=\"onSelectFieldFromGraph($event)\"\n  />\n}\n", styles: ["ngx-entity-builder{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-ink: #4f46e5;--deb-accent-soft: #eef2ff;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;--deb-rail: 44px;--deb-left: clamp(320px, 26vw, 460px);--deb-right: 380px;--deb-left-wide: calc(var(--deb-left) + var(--deb-right) - var(--deb-rail));--deb-toolbar-h: 56px;--deb-sticky-top: calc(var(--deb-toolbar-h) + 20px);display:block}.deb-toolbar{background:var(--deb-surface);color:#0f172a;border-bottom:1px solid var(--deb-border);gap:4px;height:var(--deb-toolbar-h);position:sticky;top:0;z-index:20;flex-wrap:wrap;padding-block:4px}mat-toolbar.deb-toolbar{height:auto;min-height:var(--deb-toolbar-h)}.deb-toolbar__mark{color:var(--deb-accent-ink)}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:15px;font-weight:700;color:#0f172a}.deb-toolbar__entity{margin-left:10px;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deb-spacer{flex:1 1 auto}.deb-problems{font-weight:600}.deb-problems--error{color:#ef4444;font-weight:600}.deb-problems-menu__text{white-space:normal;line-height:1.35;padding:6px 0}.deb-problems-menu .mat-mdc-menu-item{height:auto;min-height:40px}.deb-problems-menu{max-width:460px}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-right);gap:24px;padding:24px;align-items:start;transition:grid-template-columns .25s cubic-bezier(.16,1,.3,1)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-right)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left-wide) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col{display:flex;flex-direction:column;gap:18px;min-width:0}.deb-col[hidden],.deb-section--fields[hidden],.deb-preview-slot[hidden]{display:none!important}.deb-col>.deb-card{flex:0 0 auto}@keyframes debDockFadeIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes debDockSlideInY{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debSectionExpand{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debColLeftExpand{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes debColRightExpand{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.deb-toggle-pane{display:grid;grid-template-rows:1fr;opacity:1;transform:translateY(0);transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-toggle-pane--collapsed{grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden}.deb-toggle-pane__inner,.deb-dock-pane__inner{overflow:hidden;min-height:0;padding:4px 2px;margin:-4px -2px}.deb-dock-pane{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-dock-pane--open{grid-template-rows:1fr;opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}.deb-col--left:not([hidden]){animation:debColLeftExpand .24s cubic-bezier(.16,1,.3,1) forwards}.deb-col--right:not([hidden]){animation:debColRightExpand .24s cubic-bezier(.16,1,.3,1) forwards}@media(prefers-reduced-motion:reduce){.deb-body,.deb-col--left,.deb-col--right,.deb-col--center,.deb-section--fields,.deb-preview-slot,.deb-dock-btn,.deb-card,.deb-sidebar-toggle-btn{transition:none!important;animation:none!important}}.deb-col--left,.deb-col--right{position:sticky;top:var(--deb-sticky-top);max-height:calc(100vh - var(--deb-sticky-top) - 20px);overflow-y:auto;padding-right:4px;transition:opacity .2s ease}.deb-card{border-radius:12px!important;border:1px solid var(--deb-border, #e2e8f0)!important;background:var(--deb-surface, #ffffff)!important;box-shadow:0 1px 3px #00000008,0 1px 2px #00000005!important;transition:box-shadow .2s ease,border-color .2s ease!important;overflow:hidden}.deb-card:hover{border-color:#cbd5e1!important;box-shadow:0 4px 12px #0f172a0d!important}.deb-card mat-card-header{padding:14px 16px 10px!important;display:flex!important;align-items:center!important}.deb-card mat-card-content{padding:0 16px 16px!important}.deb-card__title{display:flex!important;align-items:center!important;gap:8px!important;font-family:var(--font-heading, sans-serif)!important;font-size:13.5px!important;font-weight:700!important;color:#0f172a!important;margin:0!important}.deb-card__icon{color:var(--deb-accent-ink, #4f46e5)!important;font-size:18px!important;width:18px!important;height:18px!important;flex:none!important}.deb-card__collapse-btn{margin-left:auto!important;width:32px!important;height:32px!important;color:var(--deb-muted, #64748b)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.deb-card__collapse-btn:hover{color:#0f172a!important;background:#f1f5f9!important}.deb-sidebar-toggle-btn{color:var(--deb-muted, #64748b);transition:all .15s ease}.deb-sidebar-toggle-btn:hover{color:#0f172a;background:#f1f5f9}.deb-sidebar-toggle-btn--active{color:var(--deb-accent-ink, #4f46e5)!important;background:var(--deb-accent-soft, #eef2ff)!important}.deb-dock-btn{position:sticky;top:var(--deb-sticky-top);align-self:start;justify-self:center;z-index:10;display:inline-flex;flex-direction:column;align-items:center;gap:10px;width:36px;padding:12px 0;border-radius:9999px;border:1px solid #c7d2fe;background:#fff;color:var(--deb-accent-hover, #4f46e5);font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;box-shadow:0 4px 14px #6366f126;cursor:pointer;animation:debDockFadeIn .22s cubic-bezier(.16,1,.3,1) forwards;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.deb-dock-btn:hover{background:var(--deb-accent-soft, #eef2ff);border-color:var(--deb-accent, #6366f1);box-shadow:0 6px 20px #6366f140}.deb-dock-btn mat-icon{flex:none}.deb-dock-btn__icon{font-size:20px;width:20px;height:20px;color:var(--deb-accent-ink, #4f46e5)}.deb-dock-btn__chevron{font-size:16px;width:16px;height:16px;opacity:.75}.deb-dock-btn__label{display:none;letter-spacing:.04em;white-space:nowrap}.deb-dock-btn--horizontal{flex-direction:row;justify-content:center;width:100%;padding:10px 18px;border-radius:12px;gap:12px;position:static;animation:debDockSlideInY .22s cubic-bezier(.16,1,.3,1) forwards}.deb-dock-btn--horizontal .deb-dock-btn__label{display:inline}.deb-card--preview mat-card-content{padding:0 16px 16px!important}.deb-settings-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:6px}.deb-mask-row{padding:4px 0 8px}.deb-preview-slot:empty{display:none}@media(max-width:1300px){ngx-entity-builder{--deb-left: clamp(280px, 28vw, 340px)}.deb-body{grid-template-columns:var(--deb-left) minmax(0,1fr)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col--right{grid-column:2;position:static;max-height:none;overflow:visible}}@media(max-width:900px){ngx-entity-builder{--deb-rail: 36px}.deb-body{gap:12px;padding:12px;grid-template-columns:minmax(0,1fr)}.deb-body.deb-body--left-collapsed,.deb-body.deb-body--right-collapsed,.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:minmax(0,1fr)}.deb-col--left,.deb-col--right,.deb-dock-btn--left,.deb-dock-btn--right{grid-column:1;position:static;max-height:none;overflow:visible}.deb-dock-btn--left,.deb-dock-btn--right{flex-direction:row;justify-content:center;width:auto;justify-self:stretch;padding:10px 16px}.deb-dock-btn__label{display:inline}}@media(max-width:900px){.deb-toolbar__title,.deb-toolbar__mark{display:none}}@media(max-width:560px){.deb-toolbar__btn-label{display:none}}.deb-canvas__group{margin:14px 0 6px;font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-canvas__group:first-of-type{margin-top:0}.deb-field-list{display:flex;flex-direction:column;gap:8px}.deb-field-list:empty{min-height:44px;border:1px dashed var(--deb-border);border-radius:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-field-row__actions{display:flex;align-items:center;margin-left:auto;opacity:0;transition:opacity .15s ease}.deb-field-row:hover .deb-field-row__actions,.deb-field-row:focus-within .deb-field-row__actions,.deb-field-row--active .deb-field-row__actions{opacity:1}@media(hover:none){.deb-field-row__actions{opacity:1}}@media(max-width:560px){.deb-field-row{flex-wrap:wrap;row-gap:4px}.deb-field-row__actions{margin-left:auto}}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca;flex:none}.deb-span-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f1f5f9;color:#475569;font-family:ui-monospace,SFMono-Regular,monospace;flex:none}.deb-drag-handle{cursor:grab;color:#7d8a9c;transition:color .15s;flex:none}.deb-drag-handle:hover{color:var(--deb-accent-ink)}.deb-field-type{color:var(--deb-accent-ink);flex:none}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#dc2626;font-weight:700;flex:none}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview.deb-field-row{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent, #6366f1);background:#fff}.cdk-drag-placeholder.deb-field-row{opacity:.35}.cdk-drag-animating.deb-field-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}@media(prefers-reduced-motion:reduce){.deb-field-row,.deb-field-row__actions,.cdk-drag-animating.deb-field-row,.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:none}.deb-field-row:hover{transform:none}}.deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__section{border:1px solid var(--deb-border);border-radius:10px;overflow:hidden;background:var(--deb-surface)}.deb-inspector__summary{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;cursor:pointer;list-style:none;font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted);background:#f8fafc;-webkit-user-select:none;user-select:none}.deb-inspector__summary::-webkit-details-marker{display:none}.deb-inspector__summary:hover{color:#0f172a}.deb-inspector__summary:focus-visible{outline:2px solid var(--deb-accent);outline-offset:-2px}.deb-inspector__chevron{margin-left:auto;transition:transform .18s ease;color:#7d8a9c;font-size:20px;width:20px;height:20px}.deb-inspector__section[open]>.deb-inspector__summary>.deb-inspector__chevron{transform:rotate(180deg)}.deb-inspector__count{padding:1px 7px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:10px;font-weight:700;letter-spacing:0}.deb-inspector__body{display:flex;flex-direction:column;gap:10px;padding:12px;border-top:1px solid var(--deb-border)}@media(prefers-reduced-motion:reduce){.deb-inspector__chevron{transition:none}}.deb-span-picker{display:flex;gap:4px;flex-wrap:wrap}.deb-span-picker__btn{appearance:none;cursor:pointer;flex:1;min-width:46px;padding:7px 4px;border:1px solid var(--deb-border);border-radius:8px;background:var(--deb-surface);color:var(--deb-muted);font:inherit;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease}.deb-span-picker__btn:hover{border-color:#a5b4fc;color:#0f172a}.deb-span-picker__btn:focus-visible{outline:2px solid var(--deb-accent);outline-offset:2px}.deb-span-picker__btn--active{border-color:var(--deb-accent);background:var(--deb-accent-soft);color:var(--deb-accent-hover)}.deb-option-row{display:flex;align-items:center;gap:8px}.deb-option-key{flex:0 0 8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 8px;border-radius:4px;background:var(--deb-surface-2, rgba(0, 0, 0, .05));color:var(--deb-muted);font-family:var(--font-mono, ui-monospace, monospace);font-size:12px}.deb-row__actions{display:flex;gap:8px;align-items:center}.deb-flags-row{display:flex;gap:16px;flex-wrap:wrap;padding:2px 0 6px}.deb-param-validators-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-toggles{display:flex;flex-direction:column;gap:6px}.deb-toggles mat-slide-toggle{display:flex;justify-content:space-between;width:100%;padding:5px 8px;border-radius:8px;background:#f8fafc;border:1px solid #f1f5f9;transition:all .15s ease}.deb-toggles mat-slide-toggle:hover{background:#f1f5f9;border-color:#e2e8f0}@media(prefers-reduced-motion:reduce){.deb-span-picker__btn{transition:none}}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i11.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FieldPaletteComponent, selector: "ngx-field-palette", outputs: ["pick"] }, { kind: "component", type: TabManagerComponent, selector: "ngx-tab-manager" }, { kind: "component", type: FieldInspectorComponent, selector: "ngx-field-inspector" }, { kind: "component", type: EntityBuilderCanvasComponent, selector: "ngx-entity-builder-canvas", outputs: ["collapse"] }, { kind: "component", type: RuleDependencyGraphComponent, selector: "ngx-rule-dependency-graph", outputs: ["dismiss", "selectField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, rules: { classPropertyName: "rules", publicName: "rules", isSignal: false, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: false, isRequired: false, transformFunction: null }, uiLanguage: { classPropertyName: "uiLanguage", publicName: "uiLanguage", isSignal: false, isRequired: false, transformFunction: null }, availableRoles: { classPropertyName: "availableRoles", publicName: "availableRoles", isSignal: false, isRequired: false, transformFunction: null }, userRoles: { classPropertyName: "userRoles", publicName: "userRoles", isSignal: false, isRequired: false, transformFunction: null }, commonModules: { classPropertyName: "commonModules", publicName: "commonModules", isSignal: false, isRequired: false, transformFunction: null }, leftSidebarOpen: { classPropertyName: "leftSidebarOpen", publicName: "leftSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarOpen: { classPropertyName: "rightSidebarOpen", publicName: "rightSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, fieldsOpen: { classPropertyName: "fieldsOpen", publicName: "fieldsOpen", isSignal: true, isRequired: false, transformFunction: null }, previewOpen: { classPropertyName: "previewOpen", publicName: "previewOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", rulesChange: "rulesChange", save: "save", leftSidebarOpen: "leftSidebarOpenChange", rightSidebarOpen: "rightSidebarOpenChange", fieldsOpen: "fieldsOpenChange", previewOpen: "previewOpenChange" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-left-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"leftSidebarOpen()\"\n    [attr.aria-expanded]=\"leftSidebarOpen()\"\n    aria-controls=\"deb-left-sidebar\"\n    (click)=\"toggleLeftSidebar()\"\n    [matTooltip]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n    [attr.aria-label]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n  >\n    <mat-icon>{{ leftSidebarOpen() ? 'menu_open' : 'menu' }}</mat-icon>\n  </button>\n\n  <mat-icon class=\"deb-toolbar__mark\">dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-toolbar__entity\" data-testid=\"builder-toolbar-entity\">{{ store.config().entity || '\u2014' }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  <!--\n    The issue count, and the issues.\n    It used to be a button labelled \"0 / 1\" whose tooltip said to hover the items in the list\n    \u2014 a list that did not exist anywhere in the builder. The count now opens the problems\n    themselves, and an entry that names a field selects it, which is the action the person\n    reading the message wants to take next.\n  -->\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      data-testid=\"builder-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matMenuTriggerFor]=\"problemsMenu\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ ui.text('issuesCount', { errors: store.errors().length, total: store.problems().length }) }}\n    </button>\n    <mat-menu #problemsMenu=\"matMenu\" class=\"deb-problems-menu\">\n      @for (problem of store.problems(); track $index) {\n        <button\n          mat-menu-item\n          type=\"button\"\n          data-testid=\"builder-problem\"\n          [disabled]=\"!problem.fieldId\"\n          (click)=\"selectProblemField(problem)\"\n        >\n          <mat-icon [class.deb-problems--error]=\"problem.level === 'error'\">{{\n            problem.level === 'error' ? 'error' : 'warning'\n          }}</mat-icon>\n          <span class=\"deb-problems-menu__text\">{{ problem.message }}</span>\n        </button>\n      }\n    </mat-menu>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    (click)=\"copyJson()\"\n    [matTooltip]=\"ui.text('copyJson')\"\n    [attr.aria-label]=\"ui.text('copyJson')\"\n  >\n    <mat-icon>content_copy</mat-icon>\n    <!-- The label goes on a narrow screen; the tooltip and aria-label above carry the name. -->\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('copyJson') }}</span>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    data-testid=\"builder-rule-graph\"\n    (click)=\"openRuleGraph()\"\n    [matTooltip]=\"ui.text('ruleGraph')\"\n    [attr.aria-label]=\"ui.text('ruleGraph')\"\n  >\n    <mat-icon>hub</mat-icon>\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('ruleGraph') }}</span>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-fields\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"fieldsOpen()\"\n    [attr.aria-expanded]=\"fieldsOpen()\"\n    aria-controls=\"deb-fields-section\"\n    (click)=\"toggleFields()\"\n    [matTooltip]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n    [attr.aria-label]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n  >\n    <mat-icon>{{ fieldsOpen() ? 'view_agenda' : 'table_rows' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-preview\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"previewOpen()\"\n    [attr.aria-expanded]=\"previewOpen()\"\n    aria-controls=\"deb-preview-section\"\n    (click)=\"togglePreview()\"\n    [matTooltip]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n    [attr.aria-label]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n  >\n    <mat-icon>{{ previewOpen() ? 'visibility' : 'visibility_off' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-right-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"rightSidebarOpen()\"\n    [attr.aria-expanded]=\"rightSidebarOpen()\"\n    aria-controls=\"deb-right-sidebar\"\n    (click)=\"toggleRightSidebar()\"\n    [matTooltip]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n    [attr.aria-label]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n  >\n    <mat-icon>{{ rightSidebarOpen() ? 'vertical_split' : 'tune' }}</mat-icon>\n  </button>\n\n  <!--\n    The tooltip sits on a wrapper, not on the button.\n\n    A disabled button receives no pointer events, so a tooltip bound to it never fires \u2014 which\n    is the one state where the explanation is worth having. Saving stays disabled here (unlike\n    the renderer's Save, which refuses instead): an invalid *schema* is not something the\n    author can be shown their way out of one field at a time, and the issue list beside this\n    button is where that conversation happens.\n  -->\n  <span [matTooltip]=\"store.isValid() ? '' : ui.text('saveBlockedTooltip')\" [matTooltipDisabled]=\"store.isValid()\">\n    <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n    <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n      <mat-icon>save</mat-icon> {{ ui.text('save') }}\n    </button>\n  </span>\n</mat-toolbar>\n\n<div\n  class=\"deb-body\"\n  [class.deb-body--left-collapsed]=\"!leftSidebarOpen()\"\n  [class.deb-body--right-collapsed]=\"!rightSidebarOpen()\"\n>\n  <!-- Collapsed left sidebar: the rail that brings it back. -->\n  @if (!leftSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--left\"\n      data-testid=\"expand-left-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-left-sidebar\"\n      (click)=\"expandLeft()\"\n      [matTooltip]=\"ui.text('expandPalette')\"\n      [attr.aria-label]=\"ui.text('expandPalette')\"\n    >\n      <!--\n        The card's own icon, not its name turned on its side. A 44px rail can only hold a\n        label by rotating it, and a rotated word is one you have to tilt your head to read \u2014\n        worse in German, where \"Eigenschaften\" is half a screen tall. The tooltip and the\n        accessible name carry the words; the label below returns when the rail lies flat.\n      -->\n      <mat-icon class=\"deb-dock-btn__icon\">add_circle_outline</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('paletteRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_right</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-left-sidebar\"\n    class=\"deb-col deb-col--left\"\n    data-testid=\"builder-left-sidebar\"\n    [hidden]=\"!leftSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--palette\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">add_circle_outline</mat-icon>\n          {{ ui.text('addField') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-left-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-left-sidebar\"\n          (click)=\"collapseLeft()\"\n          [matTooltip]=\"ui.text('collapsePalette')\"\n          [attr.aria-label]=\"ui.text('collapsePalette')\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--settings\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ store.config().entity || ui.text('entityName') }}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <div class=\"deb-settings-grid\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('entityName') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"store.config().entity\"\n              (ngModelChange)=\"store.setEntityName($event)\"\n              [placeholder]=\"ui.text('entityNamePlaceholder')\"\n            />\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <div class=\"deb-mask-row\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"store.config().maskData ?? false\"\n            (ngModelChange)=\"store.setMaskData($event)\"\n            >{{ ui.text('maskEntity') }}</mat-slide-toggle\n          >\n        </div>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--tabs\">\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas, then what it renders as \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\" data-testid=\"builder-canvas-column\">\n    <!-- Collapsed fields canvas dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--fields\"\n      [class.deb-dock-pane--open]=\"!fieldsOpen()\"\n      [attr.aria-hidden]=\"fieldsOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--fields\"\n          data-testid=\"expand-fields\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-fields-section\"\n          (click)=\"expandFields()\"\n          [matTooltip]=\"ui.text('expandFields')\"\n          [attr.aria-label]=\"ui.text('expandFields')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">format_list_bulleted</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('fieldsRailLabel') }} ({{ store.fields().length }})</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Fields canvas section -->\n    <div\n      id=\"deb-fields-section\"\n      class=\"deb-toggle-pane deb-section--fields\"\n      [class.deb-toggle-pane--collapsed]=\"!fieldsOpen()\"\n      data-testid=\"builder-fields-section\"\n      [attr.aria-hidden]=\"!fieldsOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <ngx-entity-builder-canvas (collapse)=\"collapseFields()\" />\n      </div>\n    </div>\n\n    <!-- Collapsed preview dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--preview\"\n      [class.deb-dock-pane--open]=\"!previewOpen()\"\n      [attr.aria-hidden]=\"previewOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--preview\"\n          data-testid=\"expand-preview\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-preview-section\"\n          (click)=\"expandPreview()\"\n          [matTooltip]=\"ui.text('expandPreview')\"\n          [attr.aria-label]=\"ui.text('expandPreview')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">visibility</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('previewRailLabel') }}</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_up</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!--\n      The live preview, moved up from the footer.\n      Directly under the field list is where a change and its effect can be seen in the same glance.\n    -->\n    <div\n      id=\"deb-preview-section\"\n      class=\"deb-toggle-pane deb-preview-slot\"\n      [class.deb-toggle-pane--collapsed]=\"!previewOpen()\"\n      data-testid=\"builder-preview-section\"\n      [attr.aria-hidden]=\"!previewOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <mat-card class=\"deb-card deb-card--preview\">\n          <mat-card-header>\n            <mat-card-title class=\"deb-card__title\">\n              <mat-icon class=\"deb-card__icon\">visibility</mat-icon>\n              {{ ui.text('previewHeading') }}\n            </mat-card-title>\n            <button\n              mat-icon-button\n              type=\"button\"\n              class=\"deb-card__collapse-btn\"\n              data-testid=\"collapse-preview\"\n              aria-expanded=\"true\"\n              aria-controls=\"deb-preview-section\"\n              (click)=\"collapsePreview()\"\n              [matTooltip]=\"ui.text('collapsePreview')\"\n              [attr.aria-label]=\"ui.text('collapsePreview')\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          </mat-card-header>\n          <mat-card-content>\n            <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapsed right sidebar: the rail that brings it back. -->\n  @if (!rightSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--right\"\n      data-testid=\"expand-right-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-right-sidebar\"\n      (click)=\"expandRight()\"\n      [matTooltip]=\"ui.text('expandInspector')\"\n      [attr.aria-label]=\"ui.text('expandInspector')\"\n    >\n      <mat-icon class=\"deb-dock-btn__icon\">tune</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('inspectorRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_left</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-right-sidebar\"\n    class=\"deb-col deb-col--right\"\n    data-testid=\"builder-right-sidebar\"\n    [hidden]=\"!rightSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--inspector\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ ui.text('fieldProperties') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-right-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-right-sidebar\"\n          (click)=\"collapseRight()\"\n          [matTooltip]=\"ui.text('collapseInspector')\"\n          [attr.aria-label]=\"ui.text('collapseInspector')\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: the exported JSON \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n</div>\n\n@if (ruleGraphOpen()) {\n  <ngx-rule-dependency-graph\n    (dismiss)=\"closeRuleGraph()\"\n    (selectField)=\"onSelectFieldFromGraph($event)\"\n  />\n}\n", styles: ["ngx-entity-builder{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-ink: #4f46e5;--deb-accent-soft: #eef2ff;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;--deb-rail: 44px;--deb-left: clamp(320px, 26vw, 460px);--deb-right: 380px;--deb-left-wide: calc(var(--deb-left) + var(--deb-right) - var(--deb-rail));--deb-toolbar-h: 56px;--deb-sticky-top: calc(var(--deb-toolbar-h) + 20px);display:block}.deb-toolbar{background:var(--deb-surface);color:#0f172a;border-bottom:1px solid var(--deb-border);gap:4px;height:var(--deb-toolbar-h);position:sticky;top:0;z-index:20;flex-wrap:wrap;padding-block:4px}mat-toolbar.deb-toolbar{height:auto;min-height:var(--deb-toolbar-h)}.deb-toolbar__mark{color:var(--deb-accent-ink)}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:15px;font-weight:700;color:#0f172a}.deb-toolbar__entity{margin-left:10px;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deb-spacer{flex:1 1 auto}.deb-problems{font-weight:600}.deb-problems--error{color:#ef4444;font-weight:600}.deb-problems-menu__text{white-space:normal;line-height:1.35;padding:6px 0}.deb-problems-menu .mat-mdc-menu-item{height:auto;min-height:40px}.deb-problems-menu{max-width:460px}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-right);gap:24px;padding:24px;align-items:start;transition:grid-template-columns .25s cubic-bezier(.16,1,.3,1)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-right)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left-wide) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col{display:flex;flex-direction:column;gap:18px;min-width:0}.deb-col[hidden],.deb-section--fields[hidden],.deb-preview-slot[hidden]{display:none!important}.deb-col>.deb-card{flex:0 0 auto}@keyframes debDockFadeIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes debDockSlideInY{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debSectionExpand{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debColLeftExpand{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes debColRightExpand{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.deb-toggle-pane{display:grid;grid-template-rows:1fr;opacity:1;transform:translateY(0);transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-toggle-pane--collapsed{grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden}.deb-toggle-pane__inner,.deb-dock-pane__inner{overflow:hidden;min-height:0;padding:4px 2px;margin:-4px -2px}.deb-dock-pane{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-dock-pane--open{grid-template-rows:1fr;opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}.deb-col--left:not([hidden]){animation:debColLeftExpand .24s cubic-bezier(.16,1,.3,1) forwards}.deb-col--right:not([hidden]){animation:debColRightExpand .24s cubic-bezier(.16,1,.3,1) forwards}@media(prefers-reduced-motion:reduce){.deb-body,.deb-col--left,.deb-col--right,.deb-col--center,.deb-section--fields,.deb-preview-slot,.deb-dock-btn,.deb-card,.deb-sidebar-toggle-btn{transition:none!important;animation:none!important}}.deb-col--left,.deb-col--right{position:sticky;top:var(--deb-sticky-top);max-height:calc(100vh - var(--deb-sticky-top) - 20px);overflow-y:auto;padding-right:4px;transition:opacity .2s ease}.deb-card{border-radius:12px!important;border:1px solid var(--deb-border, #e2e8f0)!important;background:var(--deb-surface, #ffffff)!important;box-shadow:0 1px 3px #00000008,0 1px 2px #00000005!important;transition:box-shadow .2s ease,border-color .2s ease!important;overflow:hidden}.deb-card:hover{border-color:#cbd5e1!important;box-shadow:0 4px 12px #0f172a0d!important}.deb-card mat-card-header{padding:14px 16px 10px!important;display:flex!important;align-items:center!important}.deb-card mat-card-content{padding:0 16px 16px!important}.deb-card__title{display:flex!important;align-items:center!important;gap:8px!important;font-family:var(--font-heading, sans-serif)!important;font-size:13.5px!important;font-weight:700!important;color:#0f172a!important;margin:0!important}.deb-card__icon{color:var(--deb-accent-ink, #4f46e5)!important;font-size:18px!important;width:18px!important;height:18px!important;flex:none!important}.deb-card__collapse-btn{margin-left:auto!important;width:32px!important;height:32px!important;color:var(--deb-muted, #64748b)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.deb-card__collapse-btn:hover{color:#0f172a!important;background:#f1f5f9!important}.deb-sidebar-toggle-btn{color:var(--deb-muted, #64748b);transition:all .15s ease}.deb-sidebar-toggle-btn:hover{color:#0f172a;background:#f1f5f9}.deb-sidebar-toggle-btn--active{color:var(--deb-accent-ink, #4f46e5)!important;background:var(--deb-accent-soft, #eef2ff)!important}.deb-dock-btn{position:sticky;top:var(--deb-sticky-top);align-self:start;justify-self:center;z-index:10;display:inline-flex;flex-direction:column;align-items:center;gap:10px;width:36px;padding:12px 0;border-radius:9999px;border:1px solid #c7d2fe;background:#fff;color:var(--deb-accent-hover, #4f46e5);font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;box-shadow:0 4px 14px #6366f126;cursor:pointer;animation:debDockFadeIn .22s cubic-bezier(.16,1,.3,1) forwards;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.deb-dock-btn:hover{background:var(--deb-accent-soft, #eef2ff);border-color:var(--deb-accent, #6366f1);box-shadow:0 6px 20px #6366f140}.deb-dock-btn mat-icon{flex:none}.deb-dock-btn__icon{font-size:20px;width:20px;height:20px;color:var(--deb-accent-ink, #4f46e5)}.deb-dock-btn__chevron{font-size:16px;width:16px;height:16px;opacity:.75}.deb-dock-btn__label{display:none;letter-spacing:.04em;white-space:nowrap}.deb-dock-btn--horizontal{flex-direction:row;justify-content:center;width:100%;padding:10px 18px;border-radius:12px;gap:12px;position:static;animation:debDockSlideInY .22s cubic-bezier(.16,1,.3,1) forwards}.deb-dock-btn--horizontal .deb-dock-btn__label{display:inline}.deb-card--preview mat-card-content{padding:0 16px 16px!important}.deb-settings-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:6px}.deb-mask-row{padding:4px 0 8px}.deb-preview-slot:empty{display:none}@media(max-width:1300px){ngx-entity-builder{--deb-left: clamp(280px, 28vw, 340px)}.deb-body{grid-template-columns:var(--deb-left) minmax(0,1fr)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col--right{grid-column:2;position:static;max-height:none;overflow:visible}}@media(max-width:900px){ngx-entity-builder{--deb-rail: 36px}.deb-body{gap:12px;padding:12px;grid-template-columns:minmax(0,1fr)}.deb-body.deb-body--left-collapsed,.deb-body.deb-body--right-collapsed,.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:minmax(0,1fr)}.deb-col--left,.deb-col--right,.deb-dock-btn--left,.deb-dock-btn--right{grid-column:1;position:static;max-height:none;overflow:visible}.deb-dock-btn--left,.deb-dock-btn--right{flex-direction:row;justify-content:center;width:auto;justify-self:stretch;padding:10px 16px}.deb-dock-btn__label{display:inline}}@media(max-width:900px){.deb-toolbar__title,.deb-toolbar__mark{display:none}}@media(max-width:560px){.deb-toolbar__btn-label{display:none}}.deb-canvas__group{margin:14px 0 6px;font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-canvas__group:first-of-type{margin-top:0}.deb-field-list{display:flex;flex-direction:column;gap:8px}.deb-field-list:empty{min-height:44px;border:1px dashed var(--deb-border);border-radius:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-field-row__actions{display:flex;align-items:center;margin-left:auto;opacity:0;transition:opacity .15s ease}.deb-field-row:hover .deb-field-row__actions,.deb-field-row:focus-within .deb-field-row__actions,.deb-field-row--active .deb-field-row__actions{opacity:1}@media(hover:none){.deb-field-row__actions{opacity:1}}@media(max-width:560px){.deb-field-row{flex-wrap:wrap;row-gap:4px}.deb-field-row__actions{margin-left:auto}}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca;flex:none}.deb-span-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f1f5f9;color:#475569;font-family:ui-monospace,SFMono-Regular,monospace;flex:none}.deb-drag-handle{cursor:grab;color:#7d8a9c;transition:color .15s;flex:none}.deb-drag-handle:hover{color:var(--deb-accent-ink)}.deb-field-type{color:var(--deb-accent-ink);flex:none}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#dc2626;font-weight:700;flex:none}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:var(--deb-muted)}.cdk-drag-preview.deb-field-row{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent, #6366f1);background:#fff}.cdk-drag-placeholder.deb-field-row{opacity:.35}.cdk-drag-animating.deb-field-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}@media(prefers-reduced-motion:reduce){.deb-field-row,.deb-field-row__actions,.cdk-drag-animating.deb-field-row,.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:none}.deb-field-row:hover{transform:none}}.deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__section{border:1px solid var(--deb-border);border-radius:10px;overflow:hidden;background:var(--deb-surface)}.deb-inspector__summary{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;cursor:pointer;list-style:none;font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted);background:#f8fafc;-webkit-user-select:none;user-select:none}.deb-inspector__summary::-webkit-details-marker{display:none}.deb-inspector__summary:hover{color:#0f172a}.deb-inspector__summary:focus-visible{outline:2px solid var(--deb-accent);outline-offset:-2px}.deb-inspector__chevron{margin-left:auto;transition:transform .18s ease;color:#7d8a9c;font-size:20px;width:20px;height:20px}.deb-inspector__section[open]>.deb-inspector__summary>.deb-inspector__chevron{transform:rotate(180deg)}.deb-inspector__count{padding:1px 7px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:10px;font-weight:700;letter-spacing:0}.deb-inspector__body{display:flex;flex-direction:column;gap:10px;padding:12px;border-top:1px solid var(--deb-border)}@media(prefers-reduced-motion:reduce){.deb-inspector__chevron{transition:none}}.deb-span-picker{display:flex;gap:4px;flex-wrap:wrap}.deb-span-picker__btn{appearance:none;cursor:pointer;flex:1;min-width:46px;padding:7px 4px;border:1px solid var(--deb-border);border-radius:8px;background:var(--deb-surface);color:var(--deb-muted);font:inherit;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease}.deb-span-picker__btn:hover{border-color:#a5b4fc;color:#0f172a}.deb-span-picker__btn:focus-visible{outline:2px solid var(--deb-accent);outline-offset:2px}.deb-span-picker__btn--active{border-color:var(--deb-accent);background:var(--deb-accent-soft);color:var(--deb-accent-hover)}.deb-option-row{display:flex;align-items:center;gap:8px}.deb-option-key{flex:0 0 8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 8px;border-radius:4px;background:var(--deb-surface-2, rgba(0, 0, 0, .05));color:var(--deb-muted);font-family:var(--font-mono, ui-monospace, monospace);font-size:12px}.deb-row__actions{display:flex;gap:8px;align-items:center}.deb-flags-row{display:flex;gap:16px;flex-wrap:wrap;padding:2px 0 6px}.deb-param-validators-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-toggles{display:flex;flex-direction:column;gap:6px}.deb-toggles mat-slide-toggle{display:flex;justify-content:space-between;width:100%;padding:5px 8px;border-radius:8px;background:#f8fafc;border:1px solid #f1f5f9;transition:all .15s ease}.deb-toggles mat-slide-toggle:hover{background:#f1f5f9;border-color:#e2e8f0}@media(prefers-reduced-motion:reduce){.deb-span-picker__btn{transition:none}}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i11.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FieldPaletteComponent, selector: "ngx-field-palette", outputs: ["pick"] }, { kind: "component", type: TabManagerComponent, selector: "ngx-tab-manager" }, { kind: "component", type: FieldInspectorComponent, selector: "ngx-field-inspector" }, { kind: "component", type: EntityBuilderCanvasComponent, selector: "ngx-entity-builder-canvas", outputs: ["collapse"] }, { kind: "component", type: RuleDependencyGraphComponent, selector: "ngx-rule-dependency-graph", outputs: ["dismiss", "selectField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityBuilderComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-entity-builder', standalone: true, providers: [BuilderStore], imports: [
                         FormsModule,
@@ -5195,7 +5212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         FieldInspectorComponent,
                         EntityBuilderCanvasComponent,
                         RuleDependencyGraphComponent,
-                    ], encapsulation: ViewEncapsulation.None, template: "<mat-toolbar class=\"deb-toolbar\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-left-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"leftSidebarOpen()\"\n    [attr.aria-expanded]=\"leftSidebarOpen()\"\n    aria-controls=\"deb-left-sidebar\"\n    (click)=\"toggleLeftSidebar()\"\n    [matTooltip]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n    [attr.aria-label]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n  >\n    <mat-icon>{{ leftSidebarOpen() ? 'menu_open' : 'menu' }}</mat-icon>\n  </button>\n\n  <mat-icon class=\"deb-toolbar__mark\">dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-toolbar__entity\" data-testid=\"builder-toolbar-entity\">{{ store.config().entity || '\u2014' }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  <!--\n    The issue count, and the issues.\n    It used to be a button labelled \"0 / 1\" whose tooltip said to hover the items in the list\n    \u2014 a list that did not exist anywhere in the builder. The count now opens the problems\n    themselves, and an entry that names a field selects it, which is the action the person\n    reading the message wants to take next.\n  -->\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      data-testid=\"builder-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matMenuTriggerFor]=\"problemsMenu\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ ui.text('issuesCount', { errors: store.errors().length, total: store.problems().length }) }}\n    </button>\n    <mat-menu #problemsMenu=\"matMenu\" class=\"deb-problems-menu\">\n      @for (problem of store.problems(); track $index) {\n        <button\n          mat-menu-item\n          type=\"button\"\n          data-testid=\"builder-problem\"\n          [disabled]=\"!problem.fieldId\"\n          (click)=\"selectProblemField(problem)\"\n        >\n          <mat-icon [class.deb-problems--error]=\"problem.level === 'error'\">{{\n            problem.level === 'error' ? 'error' : 'warning'\n          }}</mat-icon>\n          <span class=\"deb-problems-menu__text\">{{ problem.message }}</span>\n        </button>\n      }\n    </mat-menu>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    (click)=\"copyJson()\"\n    [matTooltip]=\"ui.text('copyJson')\"\n    [attr.aria-label]=\"ui.text('copyJson')\"\n  >\n    <mat-icon>content_copy</mat-icon>\n    <!-- The label goes on a narrow screen; the tooltip and aria-label above carry the name. -->\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('copyJson') }}</span>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    data-testid=\"builder-rule-graph\"\n    (click)=\"openRuleGraph()\"\n    [matTooltip]=\"ui.text('ruleGraph')\"\n    [attr.aria-label]=\"ui.text('ruleGraph')\"\n  >\n    <mat-icon>hub</mat-icon>\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('ruleGraph') }}</span>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-fields\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"fieldsOpen()\"\n    [attr.aria-expanded]=\"fieldsOpen()\"\n    aria-controls=\"deb-fields-section\"\n    (click)=\"toggleFields()\"\n    [matTooltip]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n    [attr.aria-label]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n  >\n    <mat-icon>{{ fieldsOpen() ? 'view_agenda' : 'table_rows' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-preview\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"previewOpen()\"\n    [attr.aria-expanded]=\"previewOpen()\"\n    aria-controls=\"deb-preview-section\"\n    (click)=\"togglePreview()\"\n    [matTooltip]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n    [attr.aria-label]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n  >\n    <mat-icon>{{ previewOpen() ? 'visibility' : 'visibility_off' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-right-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"rightSidebarOpen()\"\n    [attr.aria-expanded]=\"rightSidebarOpen()\"\n    aria-controls=\"deb-right-sidebar\"\n    (click)=\"toggleRightSidebar()\"\n    [matTooltip]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n    [attr.aria-label]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n  >\n    <mat-icon>{{ rightSidebarOpen() ? 'vertical_split' : 'tune' }}</mat-icon>\n  </button>\n\n  <!--\n    The tooltip sits on a wrapper, not on the button.\n\n    A disabled button receives no pointer events, so a tooltip bound to it never fires \u2014 which\n    is the one state where the explanation is worth having. Saving stays disabled here (unlike\n    the renderer's Save, which refuses instead): an invalid *schema* is not something the\n    author can be shown their way out of one field at a time, and the issue list beside this\n    button is where that conversation happens.\n  -->\n  <span [matTooltip]=\"store.isValid() ? '' : ui.text('saveBlockedTooltip')\" [matTooltipDisabled]=\"store.isValid()\">\n    <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n    <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n      <mat-icon>save</mat-icon> {{ ui.text('save') }}\n    </button>\n  </span>\n</mat-toolbar>\n\n<div\n  class=\"deb-body\"\n  [class.deb-body--left-collapsed]=\"!leftSidebarOpen()\"\n  [class.deb-body--right-collapsed]=\"!rightSidebarOpen()\"\n>\n  <!-- Collapsed left sidebar: the rail that brings it back. -->\n  @if (!leftSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--left\"\n      data-testid=\"expand-left-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-left-sidebar\"\n      (click)=\"expandLeft()\"\n      [matTooltip]=\"ui.text('expandPalette')\"\n      [attr.aria-label]=\"ui.text('expandPalette')\"\n    >\n      <!--\n        The card's own icon, not its name turned on its side. A 44px rail can only hold a\n        label by rotating it, and a rotated word is one you have to tilt your head to read \u2014\n        worse in German, where \"Eigenschaften\" is half a screen tall. The tooltip and the\n        accessible name carry the words; the label below returns when the rail lies flat.\n      -->\n      <mat-icon class=\"deb-dock-btn__icon\">add_circle_outline</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('paletteRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_right</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-left-sidebar\"\n    class=\"deb-col deb-col--left\"\n    data-testid=\"builder-left-sidebar\"\n    [hidden]=\"!leftSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--palette\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">add_circle_outline</mat-icon>\n          {{ ui.text('addField') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-left-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-left-sidebar\"\n          (click)=\"collapseLeft()\"\n          [matTooltip]=\"ui.text('collapsePalette')\"\n          [attr.aria-label]=\"ui.text('collapsePalette')\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--settings\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ store.config().entity || ui.text('entityName') }}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <div class=\"deb-settings-grid\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('entityName') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"store.config().entity\"\n              (ngModelChange)=\"store.setEntityName($event)\"\n              [placeholder]=\"ui.text('entityNamePlaceholder')\"\n            />\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <div class=\"deb-mask-row\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"store.config().maskData ?? false\"\n            (ngModelChange)=\"store.setMaskData($event)\"\n            >{{ ui.text('maskEntity') }}</mat-slide-toggle\n          >\n        </div>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--tabs\">\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas, then what it renders as \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\" data-testid=\"builder-canvas-column\">\n    <!-- Collapsed fields canvas dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--fields\"\n      [class.deb-dock-pane--open]=\"!fieldsOpen()\"\n      [attr.aria-hidden]=\"fieldsOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--fields\"\n          data-testid=\"expand-fields\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-fields-section\"\n          (click)=\"expandFields()\"\n          [matTooltip]=\"ui.text('expandFields')\"\n          [attr.aria-label]=\"ui.text('expandFields')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">format_list_bulleted</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('fieldsRailLabel') }} ({{ store.fields().length }})</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Fields canvas section -->\n    <div\n      id=\"deb-fields-section\"\n      class=\"deb-toggle-pane deb-section--fields\"\n      [class.deb-toggle-pane--collapsed]=\"!fieldsOpen()\"\n      data-testid=\"builder-fields-section\"\n      [attr.aria-hidden]=\"!fieldsOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <ngx-entity-builder-canvas (collapse)=\"collapseFields()\" />\n      </div>\n    </div>\n\n    <!-- Collapsed preview dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--preview\"\n      [class.deb-dock-pane--open]=\"!previewOpen()\"\n      [attr.aria-hidden]=\"previewOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--preview\"\n          data-testid=\"expand-preview\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-preview-section\"\n          (click)=\"expandPreview()\"\n          [matTooltip]=\"ui.text('expandPreview')\"\n          [attr.aria-label]=\"ui.text('expandPreview')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">visibility</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('previewRailLabel') }}</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_up</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!--\n      The live preview, moved up from the footer.\n      Directly under the field list is where a change and its effect can be seen in the same glance.\n    -->\n    <div\n      id=\"deb-preview-section\"\n      class=\"deb-toggle-pane deb-preview-slot\"\n      [class.deb-toggle-pane--collapsed]=\"!previewOpen()\"\n      data-testid=\"builder-preview-section\"\n      [attr.aria-hidden]=\"!previewOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <mat-card class=\"deb-card deb-card--preview\">\n          <mat-card-header>\n            <mat-card-title class=\"deb-card__title\">\n              <mat-icon class=\"deb-card__icon\">visibility</mat-icon>\n              {{ ui.text('previewHeading') }}\n            </mat-card-title>\n            <button\n              mat-icon-button\n              type=\"button\"\n              class=\"deb-card__collapse-btn\"\n              data-testid=\"collapse-preview\"\n              aria-expanded=\"true\"\n              aria-controls=\"deb-preview-section\"\n              (click)=\"collapsePreview()\"\n              [matTooltip]=\"ui.text('collapsePreview')\"\n              [attr.aria-label]=\"ui.text('collapsePreview')\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          </mat-card-header>\n          <mat-card-content>\n            <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapsed right sidebar: the rail that brings it back. -->\n  @if (!rightSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--right\"\n      data-testid=\"expand-right-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-right-sidebar\"\n      (click)=\"expandRight()\"\n      [matTooltip]=\"ui.text('expandInspector')\"\n      [attr.aria-label]=\"ui.text('expandInspector')\"\n    >\n      <mat-icon class=\"deb-dock-btn__icon\">tune</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('inspectorRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_left</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-right-sidebar\"\n    class=\"deb-col deb-col--right\"\n    data-testid=\"builder-right-sidebar\"\n    [hidden]=\"!rightSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--inspector\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ ui.text('fieldProperties') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-right-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-right-sidebar\"\n          (click)=\"collapseRight()\"\n          [matTooltip]=\"ui.text('collapseInspector')\"\n          [attr.aria-label]=\"ui.text('collapseInspector')\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: the exported JSON \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n</div>\n\n@if (ruleGraphOpen()) {\n  <ngx-rule-dependency-graph\n    (dismiss)=\"closeRuleGraph()\"\n    (selectField)=\"onSelectFieldFromGraph($event)\"\n  />\n}\n", styles: ["ngx-entity-builder{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-ink: #4f46e5;--deb-accent-soft: #eef2ff;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;--deb-rail: 44px;--deb-left: clamp(320px, 26vw, 460px);--deb-right: 380px;--deb-left-wide: calc(var(--deb-left) + var(--deb-right) - var(--deb-rail));--deb-toolbar-h: 56px;--deb-sticky-top: calc(var(--deb-toolbar-h) + 20px);display:block}.deb-toolbar{background:var(--deb-surface);color:#0f172a;border-bottom:1px solid var(--deb-border);gap:4px;height:var(--deb-toolbar-h);position:sticky;top:0;z-index:20;flex-wrap:wrap;padding-block:4px}mat-toolbar.deb-toolbar{height:auto;min-height:var(--deb-toolbar-h)}.deb-toolbar__mark{color:var(--deb-accent-ink)}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:15px;font-weight:700;color:#0f172a}.deb-toolbar__entity{margin-left:10px;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deb-spacer{flex:1 1 auto}.deb-problems{font-weight:600}.deb-problems--error{color:#ef4444;font-weight:600}.deb-problems-menu__text{white-space:normal;line-height:1.35;padding:6px 0}.deb-problems-menu .mat-mdc-menu-item{height:auto;min-height:40px}.deb-problems-menu{max-width:460px}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-right);gap:24px;padding:24px;align-items:start;transition:grid-template-columns .25s cubic-bezier(.16,1,.3,1)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-right)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left-wide) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col{display:flex;flex-direction:column;gap:18px;min-width:0}.deb-col[hidden],.deb-section--fields[hidden],.deb-preview-slot[hidden]{display:none!important}.deb-col>.deb-card{flex:0 0 auto}@keyframes debDockFadeIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes debDockSlideInY{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debSectionExpand{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debColLeftExpand{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes debColRightExpand{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.deb-toggle-pane{display:grid;grid-template-rows:1fr;opacity:1;transform:translateY(0);transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-toggle-pane--collapsed{grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden}.deb-toggle-pane__inner,.deb-dock-pane__inner{overflow:hidden;min-height:0;padding:4px 2px;margin:-4px -2px}.deb-dock-pane{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-dock-pane--open{grid-template-rows:1fr;opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}.deb-col--left:not([hidden]){animation:debColLeftExpand .24s cubic-bezier(.16,1,.3,1) forwards}.deb-col--right:not([hidden]){animation:debColRightExpand .24s cubic-bezier(.16,1,.3,1) forwards}@media(prefers-reduced-motion:reduce){.deb-body,.deb-col--left,.deb-col--right,.deb-col--center,.deb-section--fields,.deb-preview-slot,.deb-dock-btn,.deb-card,.deb-sidebar-toggle-btn{transition:none!important;animation:none!important}}.deb-col--left,.deb-col--right{position:sticky;top:var(--deb-sticky-top);max-height:calc(100vh - var(--deb-sticky-top) - 20px);overflow-y:auto;padding-right:4px;transition:opacity .2s ease}.deb-card{border-radius:12px!important;border:1px solid var(--deb-border, #e2e8f0)!important;background:var(--deb-surface, #ffffff)!important;box-shadow:0 1px 3px #00000008,0 1px 2px #00000005!important;transition:box-shadow .2s ease,border-color .2s ease!important;overflow:hidden}.deb-card:hover{border-color:#cbd5e1!important;box-shadow:0 4px 12px #0f172a0d!important}.deb-card mat-card-header{padding:14px 16px 10px!important;display:flex!important;align-items:center!important}.deb-card mat-card-content{padding:0 16px 16px!important}.deb-card__title{display:flex!important;align-items:center!important;gap:8px!important;font-family:var(--font-heading, sans-serif)!important;font-size:13.5px!important;font-weight:700!important;color:#0f172a!important;margin:0!important}.deb-card__icon{color:var(--deb-accent-ink, #4f46e5)!important;font-size:18px!important;width:18px!important;height:18px!important;flex:none!important}.deb-card__collapse-btn{margin-left:auto!important;width:32px!important;height:32px!important;color:var(--deb-muted, #64748b)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.deb-card__collapse-btn:hover{color:#0f172a!important;background:#f1f5f9!important}.deb-sidebar-toggle-btn{color:var(--deb-muted, #64748b);transition:all .15s ease}.deb-sidebar-toggle-btn:hover{color:#0f172a;background:#f1f5f9}.deb-sidebar-toggle-btn--active{color:var(--deb-accent-ink, #4f46e5)!important;background:var(--deb-accent-soft, #eef2ff)!important}.deb-dock-btn{position:sticky;top:var(--deb-sticky-top);align-self:start;justify-self:center;z-index:10;display:inline-flex;flex-direction:column;align-items:center;gap:10px;width:36px;padding:12px 0;border-radius:9999px;border:1px solid #c7d2fe;background:#fff;color:var(--deb-accent-hover, #4f46e5);font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;box-shadow:0 4px 14px #6366f126;cursor:pointer;animation:debDockFadeIn .22s cubic-bezier(.16,1,.3,1) forwards;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.deb-dock-btn:hover{background:var(--deb-accent-soft, #eef2ff);border-color:var(--deb-accent, #6366f1);box-shadow:0 6px 20px #6366f140}.deb-dock-btn mat-icon{flex:none}.deb-dock-btn__icon{font-size:20px;width:20px;height:20px;color:var(--deb-accent-ink, #4f46e5)}.deb-dock-btn__chevron{font-size:16px;width:16px;height:16px;opacity:.75}.deb-dock-btn__label{display:none;letter-spacing:.04em;white-space:nowrap}.deb-dock-btn--horizontal{flex-direction:row;justify-content:center;width:100%;padding:10px 18px;border-radius:12px;gap:12px;position:static;animation:debDockSlideInY .22s cubic-bezier(.16,1,.3,1) forwards}.deb-dock-btn--horizontal .deb-dock-btn__label{display:inline}.deb-card--preview mat-card-content{padding:0 16px 16px!important}.deb-settings-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:6px}.deb-mask-row{padding:4px 0 8px}.deb-preview-slot:empty{display:none}@media(max-width:1300px){ngx-entity-builder{--deb-left: clamp(280px, 28vw, 340px)}.deb-body{grid-template-columns:var(--deb-left) minmax(0,1fr)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col--right{grid-column:2;position:static;max-height:none;overflow:visible}}@media(max-width:900px){ngx-entity-builder{--deb-rail: 36px}.deb-body{gap:12px;padding:12px;grid-template-columns:minmax(0,1fr)}.deb-body.deb-body--left-collapsed,.deb-body.deb-body--right-collapsed,.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:minmax(0,1fr)}.deb-col--left,.deb-col--right,.deb-dock-btn--left,.deb-dock-btn--right{grid-column:1;position:static;max-height:none;overflow:visible}.deb-dock-btn--left,.deb-dock-btn--right{flex-direction:row;justify-content:center;width:auto;justify-self:stretch;padding:10px 16px}.deb-dock-btn__label{display:inline}}@media(max-width:900px){.deb-toolbar__title,.deb-toolbar__mark{display:none}}@media(max-width:560px){.deb-toolbar__btn-label{display:none}}.deb-canvas__group{margin:14px 0 6px;font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-canvas__group:first-of-type{margin-top:0}.deb-field-list{display:flex;flex-direction:column;gap:8px}.deb-field-list:empty{min-height:44px;border:1px dashed var(--deb-border);border-radius:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-field-row__actions{display:flex;align-items:center;margin-left:auto;opacity:0;transition:opacity .15s ease}.deb-field-row:hover .deb-field-row__actions,.deb-field-row:focus-within .deb-field-row__actions,.deb-field-row--active .deb-field-row__actions{opacity:1}@media(hover:none){.deb-field-row__actions{opacity:1}}@media(max-width:560px){.deb-field-row{flex-wrap:wrap;row-gap:4px}.deb-field-row__actions{margin-left:auto}}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca;flex:none}.deb-span-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f1f5f9;color:#475569;font-family:ui-monospace,SFMono-Regular,monospace;flex:none}.deb-drag-handle{cursor:grab;color:#7d8a9c;transition:color .15s;flex:none}.deb-drag-handle:hover{color:var(--deb-accent-ink)}.deb-field-type{color:var(--deb-accent-ink);flex:none}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#dc2626;font-weight:700;flex:none}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview.deb-field-row{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent, #6366f1);background:#fff}.cdk-drag-placeholder.deb-field-row{opacity:.35}.cdk-drag-animating.deb-field-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}@media(prefers-reduced-motion:reduce){.deb-field-row,.deb-field-row__actions,.cdk-drag-animating.deb-field-row,.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:none}.deb-field-row:hover{transform:none}}.deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__section{border:1px solid var(--deb-border);border-radius:10px;overflow:hidden;background:var(--deb-surface)}.deb-inspector__summary{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;cursor:pointer;list-style:none;font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted);background:#f8fafc;-webkit-user-select:none;user-select:none}.deb-inspector__summary::-webkit-details-marker{display:none}.deb-inspector__summary:hover{color:#0f172a}.deb-inspector__summary:focus-visible{outline:2px solid var(--deb-accent);outline-offset:-2px}.deb-inspector__chevron{margin-left:auto;transition:transform .18s ease;color:#7d8a9c;font-size:20px;width:20px;height:20px}.deb-inspector__section[open]>.deb-inspector__summary>.deb-inspector__chevron{transform:rotate(180deg)}.deb-inspector__count{padding:1px 7px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:10px;font-weight:700;letter-spacing:0}.deb-inspector__body{display:flex;flex-direction:column;gap:10px;padding:12px;border-top:1px solid var(--deb-border)}@media(prefers-reduced-motion:reduce){.deb-inspector__chevron{transition:none}}.deb-span-picker{display:flex;gap:4px;flex-wrap:wrap}.deb-span-picker__btn{appearance:none;cursor:pointer;flex:1;min-width:46px;padding:7px 4px;border:1px solid var(--deb-border);border-radius:8px;background:var(--deb-surface);color:var(--deb-muted);font:inherit;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease}.deb-span-picker__btn:hover{border-color:#a5b4fc;color:#0f172a}.deb-span-picker__btn:focus-visible{outline:2px solid var(--deb-accent);outline-offset:2px}.deb-span-picker__btn--active{border-color:var(--deb-accent);background:var(--deb-accent-soft);color:var(--deb-accent-hover)}.deb-option-row{display:flex;align-items:center;gap:8px}.deb-option-key{flex:0 0 8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 8px;border-radius:4px;background:var(--deb-surface-2, rgba(0, 0, 0, .05));color:var(--deb-muted);font-family:var(--font-mono, ui-monospace, monospace);font-size:12px}.deb-row__actions{display:flex;gap:8px;align-items:center}.deb-flags-row{display:flex;gap:16px;flex-wrap:wrap;padding:2px 0 6px}.deb-param-validators-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-toggles{display:flex;flex-direction:column;gap:6px}.deb-toggles mat-slide-toggle{display:flex;justify-content:space-between;width:100%;padding:5px 8px;border-radius:8px;background:#f8fafc;border:1px solid #f1f5f9;transition:all .15s ease}.deb-toggles mat-slide-toggle:hover{background:#f1f5f9;border-color:#e2e8f0}@media(prefers-reduced-motion:reduce){.deb-span-picker__btn{transition:none}}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<mat-toolbar class=\"deb-toolbar\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-left-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"leftSidebarOpen()\"\n    [attr.aria-expanded]=\"leftSidebarOpen()\"\n    aria-controls=\"deb-left-sidebar\"\n    (click)=\"toggleLeftSidebar()\"\n    [matTooltip]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n    [attr.aria-label]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n  >\n    <mat-icon>{{ leftSidebarOpen() ? 'menu_open' : 'menu' }}</mat-icon>\n  </button>\n\n  <mat-icon class=\"deb-toolbar__mark\">dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-toolbar__entity\" data-testid=\"builder-toolbar-entity\">{{ store.config().entity || '\u2014' }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  <!--\n    The issue count, and the issues.\n    It used to be a button labelled \"0 / 1\" whose tooltip said to hover the items in the list\n    \u2014 a list that did not exist anywhere in the builder. The count now opens the problems\n    themselves, and an entry that names a field selects it, which is the action the person\n    reading the message wants to take next.\n  -->\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      data-testid=\"builder-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matMenuTriggerFor]=\"problemsMenu\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ ui.text('issuesCount', { errors: store.errors().length, total: store.problems().length }) }}\n    </button>\n    <mat-menu #problemsMenu=\"matMenu\" class=\"deb-problems-menu\">\n      @for (problem of store.problems(); track $index) {\n        <button\n          mat-menu-item\n          type=\"button\"\n          data-testid=\"builder-problem\"\n          [disabled]=\"!problem.fieldId\"\n          (click)=\"selectProblemField(problem)\"\n        >\n          <mat-icon [class.deb-problems--error]=\"problem.level === 'error'\">{{\n            problem.level === 'error' ? 'error' : 'warning'\n          }}</mat-icon>\n          <span class=\"deb-problems-menu__text\">{{ problem.message }}</span>\n        </button>\n      }\n    </mat-menu>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    (click)=\"copyJson()\"\n    [matTooltip]=\"ui.text('copyJson')\"\n    [attr.aria-label]=\"ui.text('copyJson')\"\n  >\n    <mat-icon>content_copy</mat-icon>\n    <!-- The label goes on a narrow screen; the tooltip and aria-label above carry the name. -->\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('copyJson') }}</span>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    data-testid=\"builder-rule-graph\"\n    (click)=\"openRuleGraph()\"\n    [matTooltip]=\"ui.text('ruleGraph')\"\n    [attr.aria-label]=\"ui.text('ruleGraph')\"\n  >\n    <mat-icon>hub</mat-icon>\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('ruleGraph') }}</span>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-fields\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"fieldsOpen()\"\n    [attr.aria-expanded]=\"fieldsOpen()\"\n    aria-controls=\"deb-fields-section\"\n    (click)=\"toggleFields()\"\n    [matTooltip]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n    [attr.aria-label]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n  >\n    <mat-icon>{{ fieldsOpen() ? 'view_agenda' : 'table_rows' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-preview\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"previewOpen()\"\n    [attr.aria-expanded]=\"previewOpen()\"\n    aria-controls=\"deb-preview-section\"\n    (click)=\"togglePreview()\"\n    [matTooltip]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n    [attr.aria-label]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n  >\n    <mat-icon>{{ previewOpen() ? 'visibility' : 'visibility_off' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-right-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"rightSidebarOpen()\"\n    [attr.aria-expanded]=\"rightSidebarOpen()\"\n    aria-controls=\"deb-right-sidebar\"\n    (click)=\"toggleRightSidebar()\"\n    [matTooltip]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n    [attr.aria-label]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n  >\n    <mat-icon>{{ rightSidebarOpen() ? 'vertical_split' : 'tune' }}</mat-icon>\n  </button>\n\n  <!--\n    The tooltip sits on a wrapper, not on the button.\n\n    A disabled button receives no pointer events, so a tooltip bound to it never fires \u2014 which\n    is the one state where the explanation is worth having. Saving stays disabled here (unlike\n    the renderer's Save, which refuses instead): an invalid *schema* is not something the\n    author can be shown their way out of one field at a time, and the issue list beside this\n    button is where that conversation happens.\n  -->\n  <span [matTooltip]=\"store.isValid() ? '' : ui.text('saveBlockedTooltip')\" [matTooltipDisabled]=\"store.isValid()\">\n    <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n    <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n      <mat-icon>save</mat-icon> {{ ui.text('save') }}\n    </button>\n  </span>\n</mat-toolbar>\n\n<div\n  class=\"deb-body\"\n  [class.deb-body--left-collapsed]=\"!leftSidebarOpen()\"\n  [class.deb-body--right-collapsed]=\"!rightSidebarOpen()\"\n>\n  <!-- Collapsed left sidebar: the rail that brings it back. -->\n  @if (!leftSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--left\"\n      data-testid=\"expand-left-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-left-sidebar\"\n      (click)=\"expandLeft()\"\n      [matTooltip]=\"ui.text('expandPalette')\"\n      [attr.aria-label]=\"ui.text('expandPalette')\"\n    >\n      <!--\n        The card's own icon, not its name turned on its side. A 44px rail can only hold a\n        label by rotating it, and a rotated word is one you have to tilt your head to read \u2014\n        worse in German, where \"Eigenschaften\" is half a screen tall. The tooltip and the\n        accessible name carry the words; the label below returns when the rail lies flat.\n      -->\n      <mat-icon class=\"deb-dock-btn__icon\">add_circle_outline</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('paletteRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_right</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-left-sidebar\"\n    class=\"deb-col deb-col--left\"\n    data-testid=\"builder-left-sidebar\"\n    [hidden]=\"!leftSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--palette\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">add_circle_outline</mat-icon>\n          {{ ui.text('addField') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-left-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-left-sidebar\"\n          (click)=\"collapseLeft()\"\n          [matTooltip]=\"ui.text('collapsePalette')\"\n          [attr.aria-label]=\"ui.text('collapsePalette')\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--settings\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ store.config().entity || ui.text('entityName') }}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <div class=\"deb-settings-grid\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('entityName') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"store.config().entity\"\n              (ngModelChange)=\"store.setEntityName($event)\"\n              [placeholder]=\"ui.text('entityNamePlaceholder')\"\n            />\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <div class=\"deb-mask-row\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"store.config().maskData ?? false\"\n            (ngModelChange)=\"store.setMaskData($event)\"\n            >{{ ui.text('maskEntity') }}</mat-slide-toggle\n          >\n        </div>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--tabs\">\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas, then what it renders as \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\" data-testid=\"builder-canvas-column\">\n    <!-- Collapsed fields canvas dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--fields\"\n      [class.deb-dock-pane--open]=\"!fieldsOpen()\"\n      [attr.aria-hidden]=\"fieldsOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--fields\"\n          data-testid=\"expand-fields\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-fields-section\"\n          (click)=\"expandFields()\"\n          [matTooltip]=\"ui.text('expandFields')\"\n          [attr.aria-label]=\"ui.text('expandFields')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">format_list_bulleted</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('fieldsRailLabel') }} ({{ store.fields().length }})</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Fields canvas section -->\n    <div\n      id=\"deb-fields-section\"\n      class=\"deb-toggle-pane deb-section--fields\"\n      [class.deb-toggle-pane--collapsed]=\"!fieldsOpen()\"\n      data-testid=\"builder-fields-section\"\n      [attr.aria-hidden]=\"!fieldsOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <ngx-entity-builder-canvas (collapse)=\"collapseFields()\" />\n      </div>\n    </div>\n\n    <!-- Collapsed preview dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--preview\"\n      [class.deb-dock-pane--open]=\"!previewOpen()\"\n      [attr.aria-hidden]=\"previewOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--preview\"\n          data-testid=\"expand-preview\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-preview-section\"\n          (click)=\"expandPreview()\"\n          [matTooltip]=\"ui.text('expandPreview')\"\n          [attr.aria-label]=\"ui.text('expandPreview')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">visibility</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('previewRailLabel') }}</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_up</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!--\n      The live preview, moved up from the footer.\n      Directly under the field list is where a change and its effect can be seen in the same glance.\n    -->\n    <div\n      id=\"deb-preview-section\"\n      class=\"deb-toggle-pane deb-preview-slot\"\n      [class.deb-toggle-pane--collapsed]=\"!previewOpen()\"\n      data-testid=\"builder-preview-section\"\n      [attr.aria-hidden]=\"!previewOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <mat-card class=\"deb-card deb-card--preview\">\n          <mat-card-header>\n            <mat-card-title class=\"deb-card__title\">\n              <mat-icon class=\"deb-card__icon\">visibility</mat-icon>\n              {{ ui.text('previewHeading') }}\n            </mat-card-title>\n            <button\n              mat-icon-button\n              type=\"button\"\n              class=\"deb-card__collapse-btn\"\n              data-testid=\"collapse-preview\"\n              aria-expanded=\"true\"\n              aria-controls=\"deb-preview-section\"\n              (click)=\"collapsePreview()\"\n              [matTooltip]=\"ui.text('collapsePreview')\"\n              [attr.aria-label]=\"ui.text('collapsePreview')\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          </mat-card-header>\n          <mat-card-content>\n            <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapsed right sidebar: the rail that brings it back. -->\n  @if (!rightSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--right\"\n      data-testid=\"expand-right-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-right-sidebar\"\n      (click)=\"expandRight()\"\n      [matTooltip]=\"ui.text('expandInspector')\"\n      [attr.aria-label]=\"ui.text('expandInspector')\"\n    >\n      <mat-icon class=\"deb-dock-btn__icon\">tune</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('inspectorRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_left</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-right-sidebar\"\n    class=\"deb-col deb-col--right\"\n    data-testid=\"builder-right-sidebar\"\n    [hidden]=\"!rightSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--inspector\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ ui.text('fieldProperties') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-right-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-right-sidebar\"\n          (click)=\"collapseRight()\"\n          [matTooltip]=\"ui.text('collapseInspector')\"\n          [attr.aria-label]=\"ui.text('collapseInspector')\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: the exported JSON \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n</div>\n\n@if (ruleGraphOpen()) {\n  <ngx-rule-dependency-graph\n    (dismiss)=\"closeRuleGraph()\"\n    (selectField)=\"onSelectFieldFromGraph($event)\"\n  />\n}\n", styles: ["ngx-entity-builder{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-ink: #4f46e5;--deb-accent-soft: #eef2ff;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;--deb-rail: 44px;--deb-left: clamp(320px, 26vw, 460px);--deb-right: 380px;--deb-left-wide: calc(var(--deb-left) + var(--deb-right) - var(--deb-rail));--deb-toolbar-h: 56px;--deb-sticky-top: calc(var(--deb-toolbar-h) + 20px);display:block}.deb-toolbar{background:var(--deb-surface);color:#0f172a;border-bottom:1px solid var(--deb-border);gap:4px;height:var(--deb-toolbar-h);position:sticky;top:0;z-index:20;flex-wrap:wrap;padding-block:4px}mat-toolbar.deb-toolbar{height:auto;min-height:var(--deb-toolbar-h)}.deb-toolbar__mark{color:var(--deb-accent-ink)}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:15px;font-weight:700;color:#0f172a}.deb-toolbar__entity{margin-left:10px;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deb-spacer{flex:1 1 auto}.deb-problems{font-weight:600}.deb-problems--error{color:#ef4444;font-weight:600}.deb-problems-menu__text{white-space:normal;line-height:1.35;padding:6px 0}.deb-problems-menu .mat-mdc-menu-item{height:auto;min-height:40px}.deb-problems-menu{max-width:460px}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-right);gap:24px;padding:24px;align-items:start;transition:grid-template-columns .25s cubic-bezier(.16,1,.3,1)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-right)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left-wide) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col{display:flex;flex-direction:column;gap:18px;min-width:0}.deb-col[hidden],.deb-section--fields[hidden],.deb-preview-slot[hidden]{display:none!important}.deb-col>.deb-card{flex:0 0 auto}@keyframes debDockFadeIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes debDockSlideInY{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debSectionExpand{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debColLeftExpand{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes debColRightExpand{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.deb-toggle-pane{display:grid;grid-template-rows:1fr;opacity:1;transform:translateY(0);transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-toggle-pane--collapsed{grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden}.deb-toggle-pane__inner,.deb-dock-pane__inner{overflow:hidden;min-height:0;padding:4px 2px;margin:-4px -2px}.deb-dock-pane{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-dock-pane--open{grid-template-rows:1fr;opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}.deb-col--left:not([hidden]){animation:debColLeftExpand .24s cubic-bezier(.16,1,.3,1) forwards}.deb-col--right:not([hidden]){animation:debColRightExpand .24s cubic-bezier(.16,1,.3,1) forwards}@media(prefers-reduced-motion:reduce){.deb-body,.deb-col--left,.deb-col--right,.deb-col--center,.deb-section--fields,.deb-preview-slot,.deb-dock-btn,.deb-card,.deb-sidebar-toggle-btn{transition:none!important;animation:none!important}}.deb-col--left,.deb-col--right{position:sticky;top:var(--deb-sticky-top);max-height:calc(100vh - var(--deb-sticky-top) - 20px);overflow-y:auto;padding-right:4px;transition:opacity .2s ease}.deb-card{border-radius:12px!important;border:1px solid var(--deb-border, #e2e8f0)!important;background:var(--deb-surface, #ffffff)!important;box-shadow:0 1px 3px #00000008,0 1px 2px #00000005!important;transition:box-shadow .2s ease,border-color .2s ease!important;overflow:hidden}.deb-card:hover{border-color:#cbd5e1!important;box-shadow:0 4px 12px #0f172a0d!important}.deb-card mat-card-header{padding:14px 16px 10px!important;display:flex!important;align-items:center!important}.deb-card mat-card-content{padding:0 16px 16px!important}.deb-card__title{display:flex!important;align-items:center!important;gap:8px!important;font-family:var(--font-heading, sans-serif)!important;font-size:13.5px!important;font-weight:700!important;color:#0f172a!important;margin:0!important}.deb-card__icon{color:var(--deb-accent-ink, #4f46e5)!important;font-size:18px!important;width:18px!important;height:18px!important;flex:none!important}.deb-card__collapse-btn{margin-left:auto!important;width:32px!important;height:32px!important;color:var(--deb-muted, #64748b)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.deb-card__collapse-btn:hover{color:#0f172a!important;background:#f1f5f9!important}.deb-sidebar-toggle-btn{color:var(--deb-muted, #64748b);transition:all .15s ease}.deb-sidebar-toggle-btn:hover{color:#0f172a;background:#f1f5f9}.deb-sidebar-toggle-btn--active{color:var(--deb-accent-ink, #4f46e5)!important;background:var(--deb-accent-soft, #eef2ff)!important}.deb-dock-btn{position:sticky;top:var(--deb-sticky-top);align-self:start;justify-self:center;z-index:10;display:inline-flex;flex-direction:column;align-items:center;gap:10px;width:36px;padding:12px 0;border-radius:9999px;border:1px solid #c7d2fe;background:#fff;color:var(--deb-accent-hover, #4f46e5);font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;box-shadow:0 4px 14px #6366f126;cursor:pointer;animation:debDockFadeIn .22s cubic-bezier(.16,1,.3,1) forwards;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.deb-dock-btn:hover{background:var(--deb-accent-soft, #eef2ff);border-color:var(--deb-accent, #6366f1);box-shadow:0 6px 20px #6366f140}.deb-dock-btn mat-icon{flex:none}.deb-dock-btn__icon{font-size:20px;width:20px;height:20px;color:var(--deb-accent-ink, #4f46e5)}.deb-dock-btn__chevron{font-size:16px;width:16px;height:16px;opacity:.75}.deb-dock-btn__label{display:none;letter-spacing:.04em;white-space:nowrap}.deb-dock-btn--horizontal{flex-direction:row;justify-content:center;width:100%;padding:10px 18px;border-radius:12px;gap:12px;position:static;animation:debDockSlideInY .22s cubic-bezier(.16,1,.3,1) forwards}.deb-dock-btn--horizontal .deb-dock-btn__label{display:inline}.deb-card--preview mat-card-content{padding:0 16px 16px!important}.deb-settings-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:6px}.deb-mask-row{padding:4px 0 8px}.deb-preview-slot:empty{display:none}@media(max-width:1300px){ngx-entity-builder{--deb-left: clamp(280px, 28vw, 340px)}.deb-body{grid-template-columns:var(--deb-left) minmax(0,1fr)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col--right{grid-column:2;position:static;max-height:none;overflow:visible}}@media(max-width:900px){ngx-entity-builder{--deb-rail: 36px}.deb-body{gap:12px;padding:12px;grid-template-columns:minmax(0,1fr)}.deb-body.deb-body--left-collapsed,.deb-body.deb-body--right-collapsed,.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:minmax(0,1fr)}.deb-col--left,.deb-col--right,.deb-dock-btn--left,.deb-dock-btn--right{grid-column:1;position:static;max-height:none;overflow:visible}.deb-dock-btn--left,.deb-dock-btn--right{flex-direction:row;justify-content:center;width:auto;justify-self:stretch;padding:10px 16px}.deb-dock-btn__label{display:inline}}@media(max-width:900px){.deb-toolbar__title,.deb-toolbar__mark{display:none}}@media(max-width:560px){.deb-toolbar__btn-label{display:none}}.deb-canvas__group{margin:14px 0 6px;font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-canvas__group:first-of-type{margin-top:0}.deb-field-list{display:flex;flex-direction:column;gap:8px}.deb-field-list:empty{min-height:44px;border:1px dashed var(--deb-border);border-radius:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-field-row__actions{display:flex;align-items:center;margin-left:auto;opacity:0;transition:opacity .15s ease}.deb-field-row:hover .deb-field-row__actions,.deb-field-row:focus-within .deb-field-row__actions,.deb-field-row--active .deb-field-row__actions{opacity:1}@media(hover:none){.deb-field-row__actions{opacity:1}}@media(max-width:560px){.deb-field-row{flex-wrap:wrap;row-gap:4px}.deb-field-row__actions{margin-left:auto}}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca;flex:none}.deb-span-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f1f5f9;color:#475569;font-family:ui-monospace,SFMono-Regular,monospace;flex:none}.deb-drag-handle{cursor:grab;color:#7d8a9c;transition:color .15s;flex:none}.deb-drag-handle:hover{color:var(--deb-accent-ink)}.deb-field-type{color:var(--deb-accent-ink);flex:none}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#dc2626;font-weight:700;flex:none}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:var(--deb-muted)}.cdk-drag-preview.deb-field-row{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent, #6366f1);background:#fff}.cdk-drag-placeholder.deb-field-row{opacity:.35}.cdk-drag-animating.deb-field-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}@media(prefers-reduced-motion:reduce){.deb-field-row,.deb-field-row__actions,.cdk-drag-animating.deb-field-row,.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:none}.deb-field-row:hover{transform:none}}.deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__section{border:1px solid var(--deb-border);border-radius:10px;overflow:hidden;background:var(--deb-surface)}.deb-inspector__summary{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;cursor:pointer;list-style:none;font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted);background:#f8fafc;-webkit-user-select:none;user-select:none}.deb-inspector__summary::-webkit-details-marker{display:none}.deb-inspector__summary:hover{color:#0f172a}.deb-inspector__summary:focus-visible{outline:2px solid var(--deb-accent);outline-offset:-2px}.deb-inspector__chevron{margin-left:auto;transition:transform .18s ease;color:#7d8a9c;font-size:20px;width:20px;height:20px}.deb-inspector__section[open]>.deb-inspector__summary>.deb-inspector__chevron{transform:rotate(180deg)}.deb-inspector__count{padding:1px 7px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:10px;font-weight:700;letter-spacing:0}.deb-inspector__body{display:flex;flex-direction:column;gap:10px;padding:12px;border-top:1px solid var(--deb-border)}@media(prefers-reduced-motion:reduce){.deb-inspector__chevron{transition:none}}.deb-span-picker{display:flex;gap:4px;flex-wrap:wrap}.deb-span-picker__btn{appearance:none;cursor:pointer;flex:1;min-width:46px;padding:7px 4px;border:1px solid var(--deb-border);border-radius:8px;background:var(--deb-surface);color:var(--deb-muted);font:inherit;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease}.deb-span-picker__btn:hover{border-color:#a5b4fc;color:#0f172a}.deb-span-picker__btn:focus-visible{outline:2px solid var(--deb-accent);outline-offset:2px}.deb-span-picker__btn--active{border-color:var(--deb-accent);background:var(--deb-accent-soft);color:var(--deb-accent-hover)}.deb-option-row{display:flex;align-items:center;gap:8px}.deb-option-key{flex:0 0 8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 8px;border-radius:4px;background:var(--deb-surface-2, rgba(0, 0, 0, .05));color:var(--deb-muted);font-family:var(--font-mono, ui-monospace, monospace);font-size:12px}.deb-row__actions{display:flex;gap:8px;align-items:center}.deb-flags-row{display:flex;gap:16px;flex-wrap:wrap;padding:2px 0 6px}.deb-param-validators-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-toggles{display:flex;flex-direction:column;gap:6px}.deb-toggles mat-slide-toggle{display:flex;justify-content:space-between;width:100%;padding:5px 8px;border-radius:8px;background:#f8fafc;border:1px solid #f1f5f9;transition:all .15s ease}.deb-toggles mat-slide-toggle:hover{background:#f1f5f9;border-color:#e2e8f0}@media(prefers-reduced-motion:reduce){.deb-span-picker__btn{transition:none}}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], rules: [{