ngx-dynamic-entity-builder 1.6.0 → 1.8.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ChangeDetectionStrategy, Component, EventEmitter, Output, Input, effect } from '@angular/core';
+import { signal, computed, Injectable, inject, ChangeDetectionStrategy, Component, EventEmitter, Output, Input, effect, HostListener } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@angular/material/button';
@@ -92,6 +92,125 @@ class BuilderStore {
      * made any role-checking predicate answer false for everyone.
      */
     _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.
+     */
+    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);
+        this.cursor.set(this.history.length - 1);
+        this.historyLength.set(this.history.length);
+        this.lastEditAt = now;
+    }
+    /** 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}`;
+    }
+    /** 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;
+    }
+    undo() {
+        if (!this.canUndo())
+            return;
+        this.applyHistory(this.cursor() - 1);
+    }
+    redo() {
+        if (!this.canRedo())
+            return;
+        this.applyHistory(this.cursor() + 1);
+    }
+    applyHistory(index) {
+        const snapshot = this.history[index];
+        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);
+        // The selected field may not exist in the state being restored.
+        const selected = this._selectedFieldId();
+        if (selected && !this.findFieldInTabs(snapshot.config.tabs, selected)) {
+            this._selectedFieldId.set(null);
+        }
+    }
     config = this._config.asReadonly();
     selectedFieldId = this._selectedFieldId.asReadonly();
     activeLanguage = this._activeLanguage.asReadonly();
@@ -166,6 +285,7 @@ class BuilderStore {
         for (const field of this.getAllFields(next.tabs))
             this.manualIds.add(field.id);
         this._isDirty.set(false);
+        this.resetHistory();
     }
     reset(entity = '') {
         this._config.set(this.emptyConfig(entity));
@@ -173,6 +293,7 @@ class BuilderStore {
         this._rules.set([]);
         this.manualIds.clear();
         this._isDirty.set(false);
+        this.resetHistory();
     }
     resetDirty() {
         this._isDirty.set(false);
@@ -264,21 +385,62 @@ class BuilderStore {
             walkFields(tab.fields);
         return ids;
     }
-    findFieldInTabs(tabs = [], id) {
+    /**
+     * Resolve a field by key, where a key is either its `refererField` path or a bare id.
+     *
+     * Every resolution in this store funnels through here, which is why a bare id was enough
+     * to edit the wrong field: with `personal.address` and `work.address` both present, the
+     * first match won, so selecting or editing the second one silently addressed the first.
+     *
+     * The path is tried across the whole tree before any bare id is, so an exact key never
+     * loses to a nearer-but-wrong match. Bare ids still resolve — every existing caller and
+     * spec passes one, and for an unambiguous id it is the same field either way.
+     */
+    findFieldInTabs(tabs = [], key) {
+        return this.findFieldBy(tabs, f => f.refererField === key) ?? this.findFieldBy(tabs, f => f.id === key);
+    }
+    findFieldBy(tabs = [], match) {
         for (const t of tabs) {
-            if (t.fields) {
-                const found = t.fields.find(f => f.id === id);
-                if (found)
-                    return found;
-            }
+            const found = t.fields?.find(match);
+            if (found)
+                return found;
             if (t.children) {
-                const found = this.findFieldInTabs(t.children, id);
-                if (found)
-                    return found;
+                const nested = this.findFieldBy(t.children, match);
+                if (nested)
+                    return nested;
             }
         }
         return null;
     }
+    /**
+     * The key a caller should hand back to address this exact field. Templates use it so a
+     * click on the second of two same-named fields selects that one.
+     */
+    keyOf(field) {
+        return field.refererField || field.id;
+    }
+    /**
+     * Whether this exact field is the selected one.
+     *
+     * Not `selectedFieldId() === field.id`: selection may hold a bare id or a path depending
+     * on who set it, and with two fields sharing an id a bare comparison lights up both rows
+     * — or neither, once the click starts storing a path. Resolving both sides answers for
+     * the field itself.
+     */
+    isSelected(field) {
+        const key = this._selectedFieldId();
+        if (!key)
+            return false;
+        // Same key, same field — and this is the path a row click takes, so it is the common
+        // case. It also covers a field handed in as an @Input that the store's own config has
+        // no object for, which identity alone cannot.
+        if (key === this.keyOf(field))
+            return true;
+        // Otherwise the selection is in the other form (a bare id against a field that carries a
+        // path, or vice versa), so let it resolve and compare the field it names.
+        const resolved = this.findFieldInTabs(this._config().tabs, key);
+        return !!resolved && resolved === field;
+    }
     // ─── Field CRUD ─────────────────────────────────────────────────────────────
     addField(type, targetTabId) {
         const meta = getFieldTypeMeta(type);
@@ -321,7 +483,7 @@ class BuilderStore {
             return;
         if (!this.findFieldInTabs(this._config().tabs, oldId))
             return;
-        this.applyRename(oldId, trimmed);
+        this.applyRename(oldId, oldId, trimmed);
         this.manualIds.delete(oldId);
         this.manualIds.add(trimmed);
     }
@@ -337,9 +499,23 @@ class BuilderStore {
      * That was survivable while renaming was a rare manual act; label-derived ids make it
      * routine, so the references move with it.
      */
-    applyRename(oldId, newId) {
+    /**
+     * `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.
+     */
+    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.
+        const selectedKey = this._selectedFieldId();
+        const tabsNow = this._config().tabs;
+        const wasSelected = !!selectedKey &&
+            this.findFieldInTabs(tabsNow, selectedKey) === this.findFieldInTabs(tabsNow, key);
         this.mutate(draft => {
-            const field = this.findFieldInTabs(draft.tabs, oldId);
+            const field = this.findFieldInTabs(draft.tabs, key);
             if (!field)
                 return;
             field.id = newId;
@@ -386,19 +562,41 @@ class BuilderStore {
             fieldId: rule.fieldId === oldId ? newId : rule.fieldId,
             targets: rule.targets.map(t => t.type === 'field' && t.id === oldId ? { ...t, id: newId } : t),
         })));
-        if (this._selectedFieldId() === oldId)
-            this._selectedFieldId.set(newId);
+        // `mutate` restamps `refererField`, so the key's last segment moves with the id. Without
+        // this the selection points at a path nothing resolves to any more, and the inspector
+        // empties itself mid-keystroke as soon as a typed label derives a new id.
+        this.record();
+        if (wasSelected) {
+            // Keep the shape the selection already had: a bare id stays bare, a path keeps its
+            // scope and moves only its last segment.
+            const cut = selectedKey.lastIndexOf('.');
+            this._selectedFieldId.set(cut === -1 ? newId : `${selectedKey.slice(0, cut + 1)}${newId}`);
+        }
     }
-    removeField(id) {
+    removeField(key) {
+        let removedId = null;
         this.mutate(draft => {
+            // Resolve inside the draft, then remove that one by identity. Filtering on
+            // `f.id !== id` deleted every field sharing the id, so removing `work.address` took
+            // `personal.address` with it.
+            const target = this.findFieldInTabs(draft.tabs, key);
+            if (!target)
+                return;
+            removedId = target.id;
             for (const tab of this.flattenTabs(draft.tabs)) {
                 if (tab.fields) {
-                    tab.fields = tab.fields.filter(f => f.id !== id);
+                    tab.fields = tab.fields.filter(f => f !== target);
                 }
             }
         });
-        this.manualIds.delete(id);
-        if (this._selectedFieldId() === id)
+        if (removedId === null)
+            return;
+        // `manualIds` is keyed by bare id and shared by every field carrying it, so it is only
+        // safe to forget once no field uses that id any more.
+        if (!this.getAllFields(this._config().tabs ?? []).some(f => f.id === removedId)) {
+            this.manualIds.delete(removedId);
+        }
+        if (this._selectedFieldId() === key)
             this._selectedFieldId.set(null);
     }
     duplicateField(id) {
@@ -425,11 +623,17 @@ class BuilderStore {
         this._selectedFieldId.set(newId);
         return newId;
     }
-    moveField(id, direction) {
+    moveField(key, direction) {
         this.mutate(draft => {
+            // Resolve by key, then locate that object — `f.id === id` moved whichever same-named
+            // field the walk reached first, which for two `address` fields was never the one the
+            // arrow button belonged to.
+            const wanted = this.findFieldInTabs(draft.tabs, key);
+            if (!wanted)
+                return;
             for (const tab of this.flattenTabs(draft.tabs)) {
                 const fields = tab.fields ?? [];
-                const from = fields.findIndex(f => f.id === id);
+                const from = fields.findIndex(f => f === wanted);
                 if (from !== -1) {
                     const to = from + direction;
                     if (to < 0 || to >= fields.length)
@@ -461,8 +665,13 @@ class BuilderStore {
             const targetTab = this.flattenTabs(draft.tabs).find(t => t.id === targetTabId);
             if (!targetTab)
                 return;
+            // Resolve by key first so a path names one field, then locate that object. Matching
+            // `f.id === id` moved whichever same-named field came first in the walk.
+            const wanted = this.findFieldInTabs(draft.tabs, id);
+            if (!wanted)
+                return;
             for (const tab of this.flattenTabs(draft.tabs)) {
-                const index = (tab.fields ?? []).findIndex(f => f.id === id);
+                const index = (tab.fields ?? []).findIndex(f => f === wanted);
                 if (index === -1)
                     continue;
                 if (tab.id === targetTabId)
@@ -509,17 +718,25 @@ class BuilderStore {
      * Only the config's default language drives the id; translating a label must not rename
      * anything.
      */
-    setFieldLabel(id, language, value) {
+    setFieldLabel(key, language, value) {
         // Bound to a keystroke event, so this uses the structural-sharing path.
-        this.mutateField(id, field => ({ ...field, label: { ...field.label, [language]: value } }));
+        this.mutateField(key, field => ({ ...field, label: { ...field.label, [language]: value } }));
         if (language !== (this._config().defaultLanguage ?? 'en'))
             return;
-        if (this.manualIds.has(id))
+        // The mutation is addressed by key, but everything below is about the *id*: `manualIds`
+        // records bare ids, `availableId` compares bare ids, and a rename replaces one. Reading
+        // the field's own id keeps the two straight — passing the path into `manualIds.has`
+        // would never match, so a pinned id would silently start following the label again.
+        const field = this.findFieldInTabs(this._config().tabs, key);
+        if (!field)
+            return;
+        const currentId = field.id;
+        if (this.manualIds.has(currentId))
             return;
         const derived = labelToId(value);
-        if (!derived || derived === id)
+        if (!derived || derived === currentId)
             return;
-        this.applyRename(id, this.availableId(derived, id));
+        this.applyRename(this.keyOf(field), currentId, this.availableId(derived, currentId));
     }
     /** `derived`, or `derived_2`, `derived_3`… if another field already holds it. */
     availableId(derived, currentId) {
@@ -909,17 +1126,21 @@ class BuilderStore {
     }, ...(ngDevMode ? [{ debugName: "rulesForSelectedField" }] : /* istanbul ignore next */ []));
     loadRules(rules) {
         this._rules.set(clone(rules));
+        this.record();
     }
     addRule(rule) {
         const id = rule.id?.trim() || this.uniqueId('rule', new Set(this._rules().map(r => r.id ?? '')));
         this._rules.update(rules => [...rules, { ...clone(rule), id }]);
+        this.record();
         return id;
     }
     updateRule(id, patch) {
         this._rules.update(rules => rules.map(r => (r.id === id ? { ...r, ...clone(patch), id } : r)));
+        this.record();
     }
     removeRule(id) {
         this._rules.update(rules => rules.filter(r => r.id !== id));
+        this.record();
     }
     toggleRule(id, enabled) {
         this.updateRule(id, { enabled });
@@ -1055,6 +1276,7 @@ class BuilderStore {
         this.repointRulesForMovedFields(before, this.refsById(draft));
         this._config.set(draft);
         this._isDirty.set(true);
+        this.record();
     }
     /**
      * Rewrites the address of every field the builder owns, leaving declared overrides alone.
@@ -1129,14 +1351,21 @@ class BuilderStore {
      *
      * Returns without touching anything when the field is not found.
      */
-    mutateField(id, update) {
+    mutateField(key, update) {
         let found = false;
+        // Resolve once, then match on object identity. Matching on `field.id === id` inside the
+        // walk updated *every* field carrying that id, so renaming `work.address` also rewrote
+        // `personal.address` — both rows changed, and the second write was silent. Identity
+        // cannot be ambiguous the way a bare id can.
+        const target = this.findFieldInTabs(this._config().tabs, key);
+        if (!target)
+            return;
         const visitFields = (fields) => {
             if (!fields)
                 return fields;
             let changed = false;
             const next = fields.map(field => {
-                if (field.id === id) {
+                if (field === target) {
                     found = true;
                     changed = true;
                     return update(field);
@@ -1173,6 +1402,7 @@ class BuilderStore {
             return;
         this._config.set({ ...current, tabs: tabs ?? [] });
         this._isDirty.set(true);
+        this.record();
     }
     uniqueId(prefix, taken) {
         let n = 1;
@@ -1235,24 +1465,37 @@ class BuilderStore {
                 });
             }
         }
-        // Id uniqueness is a whole-config invariant, and it is counted over the entire field
-        // tree rather than `allFields`, which stops at a tab's own fields. Two ids colliding
-        // inside a group or array went unreported even though rules, showWhen conditions and
-        // autoPatch mappings all address fields by bare id and would resolve to whichever one
-        // the lookup happened to reach first.
-        const idCounts = new Map();
-        const countIds = (fields) => {
-            for (const f of fields ?? []) {
-                idCounts.set(f.id, (idCounts.get(f.id) ?? 0) + 1);
-                if (f.children?.length)
-                    countIds(f.children);
-            }
-        };
-        for (const tab of this.flattenTabs(config.tabs))
-            countIds(tab.fields);
-        for (const [id, count] of idCounts) {
+        // Id uniqueness is a *per-scope* invariant, not a whole-config one — this counted into
+        // one flat map keyed by bare id, so it rejected `personal.address` alongside
+        // `work.address` and made every such config unopenable: Save is disabled while an error
+        // stands, so unrelated edits could not be saved either. The runtime, the record shape
+        // and `validateConfig` have all accepted per-scope ids since 1.4.0; this was the last
+        // component still enforcing the old rule, and it enforced it against configs the rest
+        // of the stack calls valid.
+        //
+        // The scope rule itself comes from core rather than being reimplemented here, so the
+        // builder and the validator cannot drift apart on what "same scope" means.
+        const scopeCounts = new Map();
+        for (const entry of collectFieldScopes(config)) {
+            if (!entry.field.id)
+                continue;
+            const key = `${entry.scope}::${entry.field.id}`;
+            const seen = scopeCounts.get(key);
+            if (seen)
+                seen.count += 1;
+            else
+                scopeCounts.set(key, { id: entry.field.id, count: 1 });
+        }
+        for (const [key, { id, count }] of scopeCounts) {
             if (count > 1) {
-                problems.push({ level: 'error', message: `Duplicate field id "${id}" (${count}×).`, fieldId: id });
+                // Still an error, and it must stay one: two fields in the same scope share a single
+                // control and a single record key, so the second silently overwrites the first.
+                const scope = key.slice(0, key.lastIndexOf('::'));
+                problems.push({
+                    level: 'error',
+                    message: `Duplicate field id "${id}" (${count}×) in ${scope}. Two fields in one scope share a control and a record key.`,
+                    fieldId: id,
+                });
             }
         }
         return problems;
@@ -1341,7 +1584,7 @@ class EntityReferenceConfigComponent {
         return field.entityReference ?? { enabled: true };
     }
     patchRef(field, patch) {
-        this.store.updateEntityReference(field.id, patch);
+        this.store.updateEntityReference(this.store.keyOf(field), patch);
     }
     fieldLabel(field) {
         return resolveLabel(field.label, this.store.activeLanguage());
@@ -1482,7 +1725,7 @@ class EntityReferenceConfigComponent {
             mat-stroked-button
             type="button"
             data-testid="add-auto-patch"
-            (click)="store.addAutoPatchMapping(f.id)"
+            (click)="store.addAutoPatchMapping(store.keyOf(f))"
           >
             <mat-icon>add</mat-icon> Mapping
           </button>
@@ -1494,7 +1737,7 @@ class EntityReferenceConfigComponent {
             <mat-select
               data-testid="auto-patch-tab"
               [ngModel]="f.autoPatch.targetTab"
-              (ngModelChange)="store.setAutoPatchTargetTab(f.id, $event)"
+              (ngModelChange)="store.setAutoPatchTargetTab(store.keyOf(f), $event)"
             >
               @for (tab of store.tabs(); track tab.id) {
                 <mat-option [value]="tab.id">{{ tabLabel(tab.id) }}</mat-option>
@@ -1509,7 +1752,7 @@ class EntityReferenceConfigComponent {
                 <input
                   matInput
                   [ngModel]="mapping.source"
-                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { source: $event })"
+                  (ngModelChange)="store.updateAutoPatchMapping(store.keyOf(f), $index, { source: $event })"
                 />
               </mat-form-field>
               <mat-form-field appearance="outline" subscriptSizing="dynamic">
@@ -1517,7 +1760,7 @@ class EntityReferenceConfigComponent {
                 <mat-select
                   data-testid="auto-patch-target"
                   [ngModel]="mapping.target"
-                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { target: $event })"
+                  (ngModelChange)="store.updateAutoPatchMapping(store.keyOf(f), $index, { target: $event })"
                 >
                   @for (option of optionsWith(mapping.target); track option.value) {
                     <mat-option [value]="option.value">
@@ -1531,7 +1774,7 @@ class EntityReferenceConfigComponent {
                 type="button"
                 color="warn"
                 matTooltip="Remove mapping"
-                (click)="store.removeAutoPatchMapping(f.id, $index)"
+                (click)="store.removeAutoPatchMapping(store.keyOf(f), $index)"
               >
                 <mat-icon>delete</mat-icon>
               </button>
@@ -1654,7 +1897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             mat-stroked-button
             type="button"
             data-testid="add-auto-patch"
-            (click)="store.addAutoPatchMapping(f.id)"
+            (click)="store.addAutoPatchMapping(store.keyOf(f))"
           >
             <mat-icon>add</mat-icon> Mapping
           </button>
@@ -1666,7 +1909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             <mat-select
               data-testid="auto-patch-tab"
               [ngModel]="f.autoPatch.targetTab"
-              (ngModelChange)="store.setAutoPatchTargetTab(f.id, $event)"
+              (ngModelChange)="store.setAutoPatchTargetTab(store.keyOf(f), $event)"
             >
               @for (tab of store.tabs(); track tab.id) {
                 <mat-option [value]="tab.id">{{ tabLabel(tab.id) }}</mat-option>
@@ -1681,7 +1924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 <input
                   matInput
                   [ngModel]="mapping.source"
-                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { source: $event })"
+                  (ngModelChange)="store.updateAutoPatchMapping(store.keyOf(f), $index, { source: $event })"
                 />
               </mat-form-field>
               <mat-form-field appearance="outline" subscriptSizing="dynamic">
@@ -1689,7 +1932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 <mat-select
                   data-testid="auto-patch-target"
                   [ngModel]="mapping.target"
-                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { target: $event })"
+                  (ngModelChange)="store.updateAutoPatchMapping(store.keyOf(f), $index, { target: $event })"
                 >
                   @for (option of optionsWith(mapping.target); track option.value) {
                     <mat-option [value]="option.value">
@@ -1703,7 +1946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type="button"
                 color="warn"
                 matTooltip="Remove mapping"
-                (click)="store.removeAutoPatchMapping(f.id, $index)"
+                (click)="store.removeAutoPatchMapping(store.keyOf(f), $index)"
               >
                 <mat-icon>delete</mat-icon>
               </button>
@@ -2212,20 +2455,20 @@ class ReferencedFieldConfigComponent {
     field = computed(() => this.store.selectedField(), ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
     toggleReferenced(field, enabled) {
         if (enabled) {
-            this.store.updateField(field.id, { isReferenced: true });
+            this.store.updateField(this.store.keyOf(field), { isReferenced: true });
         }
         else {
-            this.store.unlinkReferencedField(field.id);
+            this.store.unlinkReferencedField(this.store.keyOf(field));
         }
     }
     updateEntityKey(field, key) {
         const trimmed = key.trim();
-        this.store.updateField(field.id, { referencedEntityKey: trimmed || undefined });
+        this.store.updateField(this.store.keyOf(field), { referencedEntityKey: trimmed || undefined });
         this.checkDriftForField(field.id);
     }
     updateFieldId(field, fieldId) {
         const trimmed = fieldId.trim();
-        this.store.updateField(field.id, { referencedFieldId: trimmed || undefined });
+        this.store.updateField(this.store.keyOf(field), { referencedFieldId: trimmed || undefined });
         this.checkDriftForField(field.id);
     }
     async syncWithSource(field) {
@@ -2236,7 +2479,7 @@ class ReferencedFieldConfigComponent {
             return;
         const sourceField = this.findField(sourceConfig.tabs ?? [], field.referencedFieldId);
         if (sourceField) {
-            this.store.syncReferencedField(field.id, sourceField);
+            this.store.syncReferencedField(this.store.keyOf(field), sourceField);
         }
     }
     /**
@@ -2479,7 +2722,7 @@ class FieldInspectorComponent {
     }
     moveToTab(field, tabId) {
         if (tabId && tabId !== this.currentTabId(field))
-            this.store.moveFieldToTab(field.id, tabId);
+            this.store.moveFieldToTab(this.store.keyOf(field), tabId);
     }
     /**
      * Fields offered wherever this inspector names one — the `showWhen` key and both ends of a
@@ -2516,7 +2759,7 @@ class FieldInspectorComponent {
         while (key in next)
             key = `field_${++n}`;
         next[key] = true;
-        this.store.setShowWhen(field.id, next);
+        this.store.setShowWhen(this.store.keyOf(field), next);
     }
     renameShowWhen(field, oldKey, newKey) {
         const trimmed = newKey.trim();
@@ -2529,15 +2772,15 @@ class FieldInspectorComponent {
         // Rebuild in order so the row does not jump while the user is typing.
         for (const [k, v] of Object.entries(current))
             next[k === oldKey ? trimmed : k] = v;
-        this.store.setShowWhen(field.id, next);
+        this.store.setShowWhen(this.store.keyOf(field), next);
     }
     setShowWhenValue(field, key, raw) {
-        this.store.setShowWhen(field.id, { ...(field.showWhen ?? {}), [key]: this.parseShowWhen(raw) });
+        this.store.setShowWhen(this.store.keyOf(field), { ...(field.showWhen ?? {}), [key]: this.parseShowWhen(raw) });
     }
     removeShowWhen(field, key) {
         const next = { ...(field.showWhen ?? {}) };
         delete next[key];
-        this.store.setShowWhen(field.id, next);
+        this.store.setShowWhen(this.store.keyOf(field), next);
     }
     /**
      * `showWhen` compares with `!==`, so the authored type has to survive the round trip:
@@ -2563,7 +2806,7 @@ class FieldInspectorComponent {
         return String(value);
     }
     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  <div class=\"deb-inspector\">\n    <!-- Identity -->\n    <div class=\"deb-row\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-label>Field id</mat-label>\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n        @if (store.hasManualId(f.id)) {\n          <mat-hint>The stored data key for this saved field \u2014 fixed.</mat-hint>\n        } @else {\n          <mat-hint>Derived from the label. Used as the data key.</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>Tab</mat-label>\n        <mat-select data-testid=\"field-tab\"\n          [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>Moving the field rewrites its path and repoints the rules that named it.</mat-hint>\n      </mat-form-field>\n    }\n\n\n    <!-- Localised text (active language) -->\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n      <mat-label>Label ({{ lang() }})</mat-label>\n      <input\n        matInput\n        data-testid=\"field-label\"\n        [ngModel]=\"labelValue(f)\"\n        (ngModelChange)=\"store.setFieldLabel(f.id, 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>Placeholder ({{ lang() }})</mat-label>\n        <input\n          matInput\n          [ngModel]=\"placeholderValue(f)\"\n          (ngModelChange)=\"store.setFieldPlaceholder(f.id, lang(), $event)\"\n        />\n      </mat-form-field>\n    }\n\n    @if (meta()?.supportsDefaultValue) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Default value</mat-label>\n        <input\n          matInput\n          [ngModel]=\"f.defaultValue ?? ''\"\n          (ngModelChange)=\"store.updateField(f.id, { defaultValue: $event })\"\n        />\n      </mat-form-field>\n    }\n\n    <!-- Entity reference, cascade, and autoPatch -->\n    @if (meta()?.isEntityRef) {\n      <mat-divider></mat-divider>\n      <ngx-entity-reference-config />\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length) {\n        <span class=\"deb-section-title\">Validation</span>\n        <div class=\"deb-toggles\">\n          @for (v of m.flagValidators; track v) {\n            <mat-checkbox\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\n              (ngModelChange)=\"store.toggleFlagValidator(f.id, v, $event)\"\n            >{{ v }}</mat-checkbox>\n          }\n        </div>\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(f.id, v, toNum($event))\"\n            />\n          </mat-form-field>\n        }\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <mat-divider></mat-divider>\n      <span class=\"deb-section-title\">Data source</span>\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Options come from</mat-label>\n        <mat-select\n          data-testid=\"data-source\"\n          [ngModel]=\"store.fieldDataSource(f)\"\n          (ngModelChange)=\"store.setFieldDataSource(f.id, $event)\"\n        >\n          <mat-option value=\"none\">Nothing yet</mat-option>\n          <mat-option value=\"manual\">Options authored here</mat-option>\n          <mat-option value=\"lookup\">A named list</mat-option>\n        </mat-select>\n      </mat-form-field>\n    }\n\n    <!-- Named lookup list -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>List name</mat-label>\n        <input\n          matInput\n          data-testid=\"list-name\"\n          [ngModel]=\"f.listName ?? ''\"\n          (ngModelChange)=\"store.setListName(f.id, $event)\"\n        />\n      </mat-form-field>\n      <p class=\"deb-hint\">\n        The consuming app resolves this name through its lookup registry. Options are not\n        authored here.\n      </p>\n    }\n\n    <!-- Inline options -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\n      <div class=\"deb-row\" style=\"justify-content: space-between;\">\n        <span class=\"deb-section-title\">Options</span>\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(f.id)\">\n          <mat-icon>add</mat-icon> Option\n        </button>\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>Option ({{ lang() }})</mat-label>\n            <input\n              matInput\n              [attr.data-testid]=\"'option-' + $index\"\n              [ngModel]=\"optionLabel(opt)\"\n              (ngModelChange)=\"store.setOptionLabel(f.id, $index, lang(), $event)\"\n            />\n          </mat-form-field>\n          <button mat-icon-button type=\"button\" color=\"warn\"\n            (click)=\"store.removeOption(f.id, $index)\" matTooltip=\"Remove option\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.options ?? []).length) {\n        <p class=\"deb-hint\">No options yet \u2014 add at least one.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Flags -->\n    <span class=\"deb-section-title\">Display</span>\n    <div class=\"deb-toggles\">\n      <mat-slide-toggle\n        [ngModel]=\"f.visibility ?? true\"\n        (ngModelChange)=\"store.updateField(f.id, { visibility: $event })\"\n      >Visible</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.table?.visible ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { table: { visible: $event } })\"\n      >Table column</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.readonly ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { readonly: $event })\"\n      >Read-only</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.disabled ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { disabled: $event })\"\n      >Disabled</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.maskData ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { maskData: $event })\"\n      >Mask data (RBAC)</mat-slide-toggle>\n      <mat-slide-toggle\n        data-testid=\"toggle-critical\"\n        [ngModel]=\"f.criticalField ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { criticalField: $event })\"\n        matTooltip=\"Renders locked; editing it announces a change against the session baseline.\"\n      >Critical field</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.showOnMinimize ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { showOnMinimize: $event })\"\n        matTooltip=\"Shown in the record editor's summary panel.\"\n      >Show in summary</mat-slide-toggle>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <div class=\"deb-row deb-row--split\">\n      <span class=\"deb-section-title\">Show when</span>\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n        <mat-icon>add</mat-icon> 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>Watched field</mat-label>\n          <mat-select data-testid=\"show-when-field\"\n            [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\">\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>Equals</mat-label>\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n        </mat-form-field>\n        <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove condition\"\n          (click)=\"removeShowWhen(f, entry.key)\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    }\n    @if (!showWhenEntries(f).length) {\n      <p class=\"deb-hint\">Always visible. Add a condition to show this field only for certain values.</p>\n    }\n\n    <!-- patchOnTrue (boolean/checkbox only) -->\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\n      <mat-divider></mat-divider>\n      <div class=\"deb-row deb-row--split\">\n        <span class=\"deb-section-title\">Copy on true</span>\n        <button mat-stroked-button type=\"button\" data-testid=\"add-patch-on-true\"\n          (click)=\"store.addPatchOnTrueMapping(f.id)\">\n          <mat-icon>add</mat-icon> 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>From field</mat-label>\n            <mat-select data-testid=\"patch-on-true-from\"\n              [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { from: $event })\">\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>To field</mat-label>\n            <mat-select data-testid=\"patch-on-true-to\"\n              [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { to: $event })\">\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 mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove mapping\"\n            (click)=\"store.removePatchOnTrueMapping(f.id, $index)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.patchOnTrue ?? []).length) {\n        <p class=\"deb-hint\">When this flips to true, copy one field's value into another.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Rules attached to this field -->\n    <ngx-field-rules-list />\n\n    <mat-divider></mat-divider>\n\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\n    <ngx-referenced-field-config />\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>Select a field to edit its properties.</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{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.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-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\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$1.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: "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: i5.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: i8.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: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.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 ɵ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  <div class=\"deb-inspector\">\n    <!-- Identity -->\n    <div class=\"deb-row\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-label>Field id</mat-label>\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n        @if (store.hasManualId(f.id)) {\n          <mat-hint>The stored data key for this saved field \u2014 fixed.</mat-hint>\n        } @else {\n          <mat-hint>Derived from the label. Used as the data key.</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>Tab</mat-label>\n        <mat-select data-testid=\"field-tab\"\n          [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>Moving the field rewrites its path and repoints the rules that named it.</mat-hint>\n      </mat-form-field>\n    }\n\n\n    <!-- Localised text (active language) -->\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n      <mat-label>Label ({{ 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>Placeholder ({{ 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    @if (meta()?.supportsDefaultValue) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Default value</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\n    <!-- Entity reference, cascade, and autoPatch -->\n    @if (meta()?.isEntityRef) {\n      <mat-divider></mat-divider>\n      <ngx-entity-reference-config />\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length) {\n        <span class=\"deb-section-title\">Validation</span>\n        <div class=\"deb-toggles\">\n          @for (v of m.flagValidators; track v) {\n            <mat-checkbox\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\n              (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n            >{{ v }}</mat-checkbox>\n          }\n        </div>\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      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <mat-divider></mat-divider>\n      <span class=\"deb-section-title\">Data source</span>\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Options come from</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\">Nothing yet</mat-option>\n          <mat-option value=\"manual\">Options authored here</mat-option>\n          <mat-option value=\"lookup\">A named list</mat-option>\n        </mat-select>\n      </mat-form-field>\n    }\n\n    <!-- Named lookup list -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>List name</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        The consuming app resolves this name through its lookup registry. Options are not\n        authored here.\n      </p>\n    }\n\n    <!-- Inline options -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\n      <div class=\"deb-row\" style=\"justify-content: space-between;\">\n        <span class=\"deb-section-title\">Options</span>\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(store.keyOf(f))\">\n          <mat-icon>add</mat-icon> Option\n        </button>\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>Option ({{ 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          <button mat-icon-button type=\"button\" color=\"warn\"\n            (click)=\"store.removeOption(store.keyOf(f), $index)\" matTooltip=\"Remove option\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.options ?? []).length) {\n        <p class=\"deb-hint\">No options yet \u2014 add at least one.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Flags -->\n    <span class=\"deb-section-title\">Display</span>\n    <div class=\"deb-toggles\">\n      <mat-slide-toggle\n        [ngModel]=\"f.visibility ?? true\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n      >Visible</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.table?.visible ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n      >Table column</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.readonly ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n      >Read-only</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.disabled ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n      >Disabled</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.maskData ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n      >Mask data (RBAC)</mat-slide-toggle>\n      <mat-slide-toggle\n        data-testid=\"toggle-critical\"\n        [ngModel]=\"f.criticalField ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n        matTooltip=\"Renders locked; editing it announces a change against the session baseline.\"\n      >Critical field</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.showOnMinimize ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n        matTooltip=\"Shown in the record editor's summary panel.\"\n      >Show in summary</mat-slide-toggle>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <div class=\"deb-row deb-row--split\">\n      <span class=\"deb-section-title\">Show when</span>\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n        <mat-icon>add</mat-icon> 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>Watched field</mat-label>\n          <mat-select data-testid=\"show-when-field\"\n            [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\">\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>Equals</mat-label>\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n        </mat-form-field>\n        <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove condition\"\n          (click)=\"removeShowWhen(f, entry.key)\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    }\n    @if (!showWhenEntries(f).length) {\n      <p class=\"deb-hint\">Always visible. Add a condition to show this field only for certain values.</p>\n    }\n\n    <!-- patchOnTrue (boolean/checkbox only) -->\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\n      <mat-divider></mat-divider>\n      <div class=\"deb-row deb-row--split\">\n        <span class=\"deb-section-title\">Copy on true</span>\n        <button mat-stroked-button type=\"button\" data-testid=\"add-patch-on-true\"\n          (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\">\n          <mat-icon>add</mat-icon> 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>From field</mat-label>\n            <mat-select data-testid=\"patch-on-true-from\"\n              [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\">\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>To field</mat-label>\n            <mat-select data-testid=\"patch-on-true-to\"\n              [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\">\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 mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove mapping\"\n            (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.patchOnTrue ?? []).length) {\n        <p class=\"deb-hint\">When this flips to true, copy one field's value into another.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Rules attached to this field -->\n    <ngx-field-rules-list />\n\n    <mat-divider></mat-divider>\n\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\n    <ngx-referenced-field-config />\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>Select a field to edit its properties.</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{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.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-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\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$1.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: "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: i5.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: i8.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: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.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: [{
             type: Component,
@@ -2581,7 +2824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         EntityReferenceConfigComponent,
                         FieldRulesListComponent,
                         ReferencedFieldConfigComponent,
-                    ], template: "@if (field(); as f) {\n  <div class=\"deb-inspector\">\n    <!-- Identity -->\n    <div class=\"deb-row\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-label>Field id</mat-label>\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n        @if (store.hasManualId(f.id)) {\n          <mat-hint>The stored data key for this saved field \u2014 fixed.</mat-hint>\n        } @else {\n          <mat-hint>Derived from the label. Used as the data key.</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>Tab</mat-label>\n        <mat-select data-testid=\"field-tab\"\n          [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>Moving the field rewrites its path and repoints the rules that named it.</mat-hint>\n      </mat-form-field>\n    }\n\n\n    <!-- Localised text (active language) -->\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n      <mat-label>Label ({{ lang() }})</mat-label>\n      <input\n        matInput\n        data-testid=\"field-label\"\n        [ngModel]=\"labelValue(f)\"\n        (ngModelChange)=\"store.setFieldLabel(f.id, 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>Placeholder ({{ lang() }})</mat-label>\n        <input\n          matInput\n          [ngModel]=\"placeholderValue(f)\"\n          (ngModelChange)=\"store.setFieldPlaceholder(f.id, lang(), $event)\"\n        />\n      </mat-form-field>\n    }\n\n    @if (meta()?.supportsDefaultValue) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Default value</mat-label>\n        <input\n          matInput\n          [ngModel]=\"f.defaultValue ?? ''\"\n          (ngModelChange)=\"store.updateField(f.id, { defaultValue: $event })\"\n        />\n      </mat-form-field>\n    }\n\n    <!-- Entity reference, cascade, and autoPatch -->\n    @if (meta()?.isEntityRef) {\n      <mat-divider></mat-divider>\n      <ngx-entity-reference-config />\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length) {\n        <span class=\"deb-section-title\">Validation</span>\n        <div class=\"deb-toggles\">\n          @for (v of m.flagValidators; track v) {\n            <mat-checkbox\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\n              (ngModelChange)=\"store.toggleFlagValidator(f.id, v, $event)\"\n            >{{ v }}</mat-checkbox>\n          }\n        </div>\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(f.id, v, toNum($event))\"\n            />\n          </mat-form-field>\n        }\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <mat-divider></mat-divider>\n      <span class=\"deb-section-title\">Data source</span>\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Options come from</mat-label>\n        <mat-select\n          data-testid=\"data-source\"\n          [ngModel]=\"store.fieldDataSource(f)\"\n          (ngModelChange)=\"store.setFieldDataSource(f.id, $event)\"\n        >\n          <mat-option value=\"none\">Nothing yet</mat-option>\n          <mat-option value=\"manual\">Options authored here</mat-option>\n          <mat-option value=\"lookup\">A named list</mat-option>\n        </mat-select>\n      </mat-form-field>\n    }\n\n    <!-- Named lookup list -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>List name</mat-label>\n        <input\n          matInput\n          data-testid=\"list-name\"\n          [ngModel]=\"f.listName ?? ''\"\n          (ngModelChange)=\"store.setListName(f.id, $event)\"\n        />\n      </mat-form-field>\n      <p class=\"deb-hint\">\n        The consuming app resolves this name through its lookup registry. Options are not\n        authored here.\n      </p>\n    }\n\n    <!-- Inline options -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\n      <div class=\"deb-row\" style=\"justify-content: space-between;\">\n        <span class=\"deb-section-title\">Options</span>\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(f.id)\">\n          <mat-icon>add</mat-icon> Option\n        </button>\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>Option ({{ lang() }})</mat-label>\n            <input\n              matInput\n              [attr.data-testid]=\"'option-' + $index\"\n              [ngModel]=\"optionLabel(opt)\"\n              (ngModelChange)=\"store.setOptionLabel(f.id, $index, lang(), $event)\"\n            />\n          </mat-form-field>\n          <button mat-icon-button type=\"button\" color=\"warn\"\n            (click)=\"store.removeOption(f.id, $index)\" matTooltip=\"Remove option\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.options ?? []).length) {\n        <p class=\"deb-hint\">No options yet \u2014 add at least one.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Flags -->\n    <span class=\"deb-section-title\">Display</span>\n    <div class=\"deb-toggles\">\n      <mat-slide-toggle\n        [ngModel]=\"f.visibility ?? true\"\n        (ngModelChange)=\"store.updateField(f.id, { visibility: $event })\"\n      >Visible</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.table?.visible ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { table: { visible: $event } })\"\n      >Table column</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.readonly ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { readonly: $event })\"\n      >Read-only</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.disabled ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { disabled: $event })\"\n      >Disabled</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.maskData ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { maskData: $event })\"\n      >Mask data (RBAC)</mat-slide-toggle>\n      <mat-slide-toggle\n        data-testid=\"toggle-critical\"\n        [ngModel]=\"f.criticalField ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { criticalField: $event })\"\n        matTooltip=\"Renders locked; editing it announces a change against the session baseline.\"\n      >Critical field</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.showOnMinimize ?? false\"\n        (ngModelChange)=\"store.updateField(f.id, { showOnMinimize: $event })\"\n        matTooltip=\"Shown in the record editor's summary panel.\"\n      >Show in summary</mat-slide-toggle>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <div class=\"deb-row deb-row--split\">\n      <span class=\"deb-section-title\">Show when</span>\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n        <mat-icon>add</mat-icon> 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>Watched field</mat-label>\n          <mat-select data-testid=\"show-when-field\"\n            [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\">\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>Equals</mat-label>\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n        </mat-form-field>\n        <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove condition\"\n          (click)=\"removeShowWhen(f, entry.key)\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    }\n    @if (!showWhenEntries(f).length) {\n      <p class=\"deb-hint\">Always visible. Add a condition to show this field only for certain values.</p>\n    }\n\n    <!-- patchOnTrue (boolean/checkbox only) -->\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\n      <mat-divider></mat-divider>\n      <div class=\"deb-row deb-row--split\">\n        <span class=\"deb-section-title\">Copy on true</span>\n        <button mat-stroked-button type=\"button\" data-testid=\"add-patch-on-true\"\n          (click)=\"store.addPatchOnTrueMapping(f.id)\">\n          <mat-icon>add</mat-icon> 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>From field</mat-label>\n            <mat-select data-testid=\"patch-on-true-from\"\n              [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { from: $event })\">\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>To field</mat-label>\n            <mat-select data-testid=\"patch-on-true-to\"\n              [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { to: $event })\">\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 mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove mapping\"\n            (click)=\"store.removePatchOnTrueMapping(f.id, $index)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.patchOnTrue ?? []).length) {\n        <p class=\"deb-hint\">When this flips to true, copy one field's value into another.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Rules attached to this field -->\n    <ngx-field-rules-list />\n\n    <mat-divider></mat-divider>\n\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\n    <ngx-referenced-field-config />\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>Select a field to edit its properties.</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{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.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-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\n"] }]
+                    ], template: "@if (field(); as f) {\n  <div class=\"deb-inspector\">\n    <!-- Identity -->\n    <div class=\"deb-row\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-label>Field id</mat-label>\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n        @if (store.hasManualId(f.id)) {\n          <mat-hint>The stored data key for this saved field \u2014 fixed.</mat-hint>\n        } @else {\n          <mat-hint>Derived from the label. Used as the data key.</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>Tab</mat-label>\n        <mat-select data-testid=\"field-tab\"\n          [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>Moving the field rewrites its path and repoints the rules that named it.</mat-hint>\n      </mat-form-field>\n    }\n\n\n    <!-- Localised text (active language) -->\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n      <mat-label>Label ({{ 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>Placeholder ({{ 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    @if (meta()?.supportsDefaultValue) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Default value</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\n    <!-- Entity reference, cascade, and autoPatch -->\n    @if (meta()?.isEntityRef) {\n      <mat-divider></mat-divider>\n      <ngx-entity-reference-config />\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length) {\n        <span class=\"deb-section-title\">Validation</span>\n        <div class=\"deb-toggles\">\n          @for (v of m.flagValidators; track v) {\n            <mat-checkbox\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\n              (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n            >{{ v }}</mat-checkbox>\n          }\n        </div>\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      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <mat-divider></mat-divider>\n      <span class=\"deb-section-title\">Data source</span>\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Options come from</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\">Nothing yet</mat-option>\n          <mat-option value=\"manual\">Options authored here</mat-option>\n          <mat-option value=\"lookup\">A named list</mat-option>\n        </mat-select>\n      </mat-form-field>\n    }\n\n    <!-- Named lookup list -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>List name</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        The consuming app resolves this name through its lookup registry. Options are not\n        authored here.\n      </p>\n    }\n\n    <!-- Inline options -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\n      <div class=\"deb-row\" style=\"justify-content: space-between;\">\n        <span class=\"deb-section-title\">Options</span>\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(store.keyOf(f))\">\n          <mat-icon>add</mat-icon> Option\n        </button>\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>Option ({{ 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          <button mat-icon-button type=\"button\" color=\"warn\"\n            (click)=\"store.removeOption(store.keyOf(f), $index)\" matTooltip=\"Remove option\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.options ?? []).length) {\n        <p class=\"deb-hint\">No options yet \u2014 add at least one.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Flags -->\n    <span class=\"deb-section-title\">Display</span>\n    <div class=\"deb-toggles\">\n      <mat-slide-toggle\n        [ngModel]=\"f.visibility ?? true\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n      >Visible</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.table?.visible ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n      >Table column</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.readonly ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n      >Read-only</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.disabled ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n      >Disabled</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.maskData ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n      >Mask data (RBAC)</mat-slide-toggle>\n      <mat-slide-toggle\n        data-testid=\"toggle-critical\"\n        [ngModel]=\"f.criticalField ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n        matTooltip=\"Renders locked; editing it announces a change against the session baseline.\"\n      >Critical field</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.showOnMinimize ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n        matTooltip=\"Shown in the record editor's summary panel.\"\n      >Show in summary</mat-slide-toggle>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <div class=\"deb-row deb-row--split\">\n      <span class=\"deb-section-title\">Show when</span>\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n        <mat-icon>add</mat-icon> 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>Watched field</mat-label>\n          <mat-select data-testid=\"show-when-field\"\n            [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\">\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>Equals</mat-label>\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n        </mat-form-field>\n        <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove condition\"\n          (click)=\"removeShowWhen(f, entry.key)\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    }\n    @if (!showWhenEntries(f).length) {\n      <p class=\"deb-hint\">Always visible. Add a condition to show this field only for certain values.</p>\n    }\n\n    <!-- patchOnTrue (boolean/checkbox only) -->\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\n      <mat-divider></mat-divider>\n      <div class=\"deb-row deb-row--split\">\n        <span class=\"deb-section-title\">Copy on true</span>\n        <button mat-stroked-button type=\"button\" data-testid=\"add-patch-on-true\"\n          (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\">\n          <mat-icon>add</mat-icon> 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>From field</mat-label>\n            <mat-select data-testid=\"patch-on-true-from\"\n              [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\">\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>To field</mat-label>\n            <mat-select data-testid=\"patch-on-true-to\"\n              [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\">\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 mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove mapping\"\n            (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.patchOnTrue ?? []).length) {\n        <p class=\"deb-hint\">When this flips to true, copy one field's value into another.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Rules attached to this field -->\n    <ngx-field-rules-list />\n\n    <mat-divider></mat-divider>\n\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\n    <ngx-referenced-field-config />\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>Select a field to edit its properties.</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{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.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-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\n"] }]
         }] });
 
 /**
@@ -2977,13 +3220,13 @@ class EntityBuilderTreeNodeComponent {
       cdkDrag
       class="deb-field-row"
       data-testid="builder-field-row"
-      [class.deb-field-row--active]="store.selectedFieldId() === field.id"
-      (click)="store.selectField(field.id)"
-      (keydown.enter)="store.selectField(field.id)"
-      (keydown.space)="store.selectField(field.id); $event.preventDefault()"
+      [class.deb-field-row--active]="store.isSelected(field)"
+      (click)="store.selectField(store.keyOf(field))"
+      (keydown.enter)="store.selectField(store.keyOf(field))"
+      (keydown.space)="store.selectField(store.keyOf(field)); $event.preventDefault()"
       role="button"
       tabindex="0"
-      [attr.aria-pressed]="store.selectedFieldId() === field.id"
+      [attr.aria-pressed]="store.isSelected(field)"
       [attr.aria-label]="'Select field ' + fieldLabel(field)"
     >
       <mat-icon class="deb-drag-handle" cdkDragHandle aria-hidden="true" title="Drag to reorder (or use the move buttons)">drag_indicator</mat-icon>
@@ -3006,24 +3249,24 @@ class EntityBuilderTreeNodeComponent {
       <button mat-icon-button type="button" [disabled]="index === 0"
         [attr.data-testid]="'row-up-' + field.id"
         [attr.aria-label]="'Move ' + fieldLabel(field) + ' up'"
-        (click)="store.moveField(field.id, -1); $event.stopPropagation()" matTooltip="Move up">
+        (click)="store.moveField(store.keyOf(field), -1); $event.stopPropagation()" matTooltip="Move up">
         <mat-icon>arrow_upward</mat-icon>
       </button>
       <button mat-icon-button type="button" [disabled]="index === totalCount - 1"
         [attr.data-testid]="'row-down-' + field.id"
         [attr.aria-label]="'Move ' + fieldLabel(field) + ' down'"
-        (click)="store.moveField(field.id, 1); $event.stopPropagation()" matTooltip="Move down">
+        (click)="store.moveField(store.keyOf(field), 1); $event.stopPropagation()" matTooltip="Move down">
         <mat-icon>arrow_downward</mat-icon>
       </button>
       <button mat-icon-button type="button"
         [attr.data-testid]="'row-duplicate-' + field.id"
         [attr.aria-label]="'Duplicate ' + fieldLabel(field)"
-        (click)="store.duplicateField(field.id); $event.stopPropagation()" matTooltip="Duplicate">
+        (click)="store.duplicateField(store.keyOf(field)); $event.stopPropagation()" matTooltip="Duplicate">
         <mat-icon>content_copy</mat-icon>
       </button>
       <button mat-icon-button type="button" color="warn"
         [attr.data-testid]="'row-delete-' + field.id"
-        (click)="store.removeField(field.id); $event.stopPropagation()" matTooltip="Delete">
+        (click)="store.removeField(store.keyOf(field)); $event.stopPropagation()" matTooltip="Delete">
         <mat-icon>delete</mat-icon>
       </button>
     </div>
@@ -3059,13 +3302,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       cdkDrag
       class="deb-field-row"
       data-testid="builder-field-row"
-      [class.deb-field-row--active]="store.selectedFieldId() === field.id"
-      (click)="store.selectField(field.id)"
-      (keydown.enter)="store.selectField(field.id)"
-      (keydown.space)="store.selectField(field.id); $event.preventDefault()"
+      [class.deb-field-row--active]="store.isSelected(field)"
+      (click)="store.selectField(store.keyOf(field))"
+      (keydown.enter)="store.selectField(store.keyOf(field))"
+      (keydown.space)="store.selectField(store.keyOf(field)); $event.preventDefault()"
       role="button"
       tabindex="0"
-      [attr.aria-pressed]="store.selectedFieldId() === field.id"
+      [attr.aria-pressed]="store.isSelected(field)"
       [attr.aria-label]="'Select field ' + fieldLabel(field)"
     >
       <mat-icon class="deb-drag-handle" cdkDragHandle aria-hidden="true" title="Drag to reorder (or use the move buttons)">drag_indicator</mat-icon>
@@ -3088,24 +3331,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       <button mat-icon-button type="button" [disabled]="index === 0"
         [attr.data-testid]="'row-up-' + field.id"
         [attr.aria-label]="'Move ' + fieldLabel(field) + ' up'"
-        (click)="store.moveField(field.id, -1); $event.stopPropagation()" matTooltip="Move up">
+        (click)="store.moveField(store.keyOf(field), -1); $event.stopPropagation()" matTooltip="Move up">
         <mat-icon>arrow_upward</mat-icon>
       </button>
       <button mat-icon-button type="button" [disabled]="index === totalCount - 1"
         [attr.data-testid]="'row-down-' + field.id"
         [attr.aria-label]="'Move ' + fieldLabel(field) + ' down'"
-        (click)="store.moveField(field.id, 1); $event.stopPropagation()" matTooltip="Move down">
+        (click)="store.moveField(store.keyOf(field), 1); $event.stopPropagation()" matTooltip="Move down">
         <mat-icon>arrow_downward</mat-icon>
       </button>
       <button mat-icon-button type="button"
         [attr.data-testid]="'row-duplicate-' + field.id"
         [attr.aria-label]="'Duplicate ' + fieldLabel(field)"
-        (click)="store.duplicateField(field.id); $event.stopPropagation()" matTooltip="Duplicate">
+        (click)="store.duplicateField(store.keyOf(field)); $event.stopPropagation()" matTooltip="Duplicate">
         <mat-icon>content_copy</mat-icon>
       </button>
       <button mat-icon-button type="button" color="warn"
         [attr.data-testid]="'row-delete-' + field.id"
-        (click)="store.removeField(field.id); $event.stopPropagation()" matTooltip="Delete">
+        (click)="store.removeField(store.keyOf(field)); $event.stopPropagation()" matTooltip="Delete">
         <mat-icon>delete</mat-icon>
       </button>
     </div>
@@ -3287,6 +3530,25 @@ class EntityBuilderComponent {
     constructor() {
         effect(() => this.configChange.emit(this.store.config()), { allowSignalWrites: true });
     }
+    /**
+     * Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z, but only when the user is not typing.
+     *
+     * A textarea or input has its own undo stack, and hijacking it would make Ctrl+Z revert a
+     * whole structural edit when the author only wanted to take back a character.
+     */
+    onKeydown(event) {
+        if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== 'z')
+            return;
+        const target = event.target;
+        const tag = target?.tagName?.toLowerCase();
+        if (tag === 'input' || tag === 'textarea' || target?.isContentEditable)
+            return;
+        event.preventDefault();
+        if (event.shiftKey)
+            this.store.redo();
+        else
+            this.store.undo();
+    }
     ngOnChanges(changes) {
         if (changes['config'] && changes['config'].currentValue !== changes['config'].previousValue) {
             if (this.config)
@@ -3339,7 +3601,7 @@ class EntityBuilderComponent {
         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: "config", languages: "languages", availableRoles: "availableRoles", userRoles: "userRoles", commonModules: "commonModules" }, outputs: { configChange: "configChange", save: "save" }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\n  <span class=\"deb-spacer\"></span>\n\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\n  }\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\n    <mat-icon>content_copy</mat-icon> Copy JSON\n  </button>\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> Save\n  </button>\n</mat-toolbar>\n\n<div class=\"deb-body\">\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--left\">\n    <mat-card>\n      <mat-card-content>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>Entity name</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            placeholder=\"e.g. clients\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>Editing language</mat-label>\n            <mat-select\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        <mat-slide-toggle\n          [ngModel]=\"store.config().maskData ?? false\"\n          (ngModelChange)=\"store.setMaskData($event)\"\n        >Mask this entity (RBAC)</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>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>{{ action }} roles</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>{{ action }} roles (comma-separated)</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"rolesFor(action).join(', ')\"\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\n                />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header><mat-card-title>Add field</mat-card-title></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>\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 \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n  </div>\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--right\">\n    <mat-card>\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></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: JSON + optional live preview \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;Config JSON</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#fff}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;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:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}@media(max-width:1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;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-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.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:#ef4444;font-weight:700}.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{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{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)}.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: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.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: i5.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: i8.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: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.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: i10.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: "config", languages: "languages", availableRoles: "availableRoles", userRoles: "userRoles", commonModules: "commonModules" }, outputs: { configChange: "configChange", save: "save" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\n  <span class=\"deb-spacer\"></span>\n\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\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=\"Undo (Ctrl+Z)\"\n    aria-label=\"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=\"Redo (Ctrl+Shift+Z)\"\n    aria-label=\"Redo\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\n    <mat-icon>content_copy</mat-icon> Copy JSON\n  </button>\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> Save\n  </button>\n</mat-toolbar>\n\n<div class=\"deb-body\">\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--left\">\n    <mat-card>\n      <mat-card-content>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>Entity name</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            placeholder=\"e.g. clients\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>Editing language</mat-label>\n            <mat-select\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        <mat-slide-toggle\n          [ngModel]=\"store.config().maskData ?? false\"\n          (ngModelChange)=\"store.setMaskData($event)\"\n        >Mask this entity (RBAC)</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>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>{{ action }} roles</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>{{ action }} roles (comma-separated)</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"rolesFor(action).join(', ')\"\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\n                />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header><mat-card-title>Add field</mat-card-title></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>\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 \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n  </div>\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--right\">\n    <mat-card>\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></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: JSON + optional live preview \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;Config JSON</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#fff}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;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:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}@media(max-width:1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;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-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.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:#ef4444;font-weight:700}.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{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{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)}.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: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.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: i5.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: i8.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: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.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: i10.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderComponent, decorators: [{
             type: Component,
@@ -3360,7 +3622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         TabManagerComponent,
                         FieldInspectorComponent,
                         EntityBuilderCanvasComponent,
-                    ], template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\n  <span class=\"deb-spacer\"></span>\n\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\n  }\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\n    <mat-icon>content_copy</mat-icon> Copy JSON\n  </button>\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> Save\n  </button>\n</mat-toolbar>\n\n<div class=\"deb-body\">\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--left\">\n    <mat-card>\n      <mat-card-content>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>Entity name</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            placeholder=\"e.g. clients\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>Editing language</mat-label>\n            <mat-select\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        <mat-slide-toggle\n          [ngModel]=\"store.config().maskData ?? false\"\n          (ngModelChange)=\"store.setMaskData($event)\"\n        >Mask this entity (RBAC)</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>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>{{ action }} roles</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>{{ action }} roles (comma-separated)</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"rolesFor(action).join(', ')\"\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\n                />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header><mat-card-title>Add field</mat-card-title></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>\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 \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n  </div>\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--right\">\n    <mat-card>\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></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: JSON + optional live preview \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;Config JSON</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#fff}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;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:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}@media(max-width:1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;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-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.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:#ef4444;font-weight:700}.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{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{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)}.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"] }]
+                    ], template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\n  <span class=\"deb-spacer\"></span>\n\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\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=\"Undo (Ctrl+Z)\"\n    aria-label=\"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=\"Redo (Ctrl+Shift+Z)\"\n    aria-label=\"Redo\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\n    <mat-icon>content_copy</mat-icon> Copy JSON\n  </button>\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> Save\n  </button>\n</mat-toolbar>\n\n<div class=\"deb-body\">\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--left\">\n    <mat-card>\n      <mat-card-content>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>Entity name</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            placeholder=\"e.g. clients\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>Editing language</mat-label>\n            <mat-select\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        <mat-slide-toggle\n          [ngModel]=\"store.config().maskData ?? false\"\n          (ngModelChange)=\"store.setMaskData($event)\"\n        >Mask this entity (RBAC)</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>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>{{ action }} roles</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>{{ action }} roles (comma-separated)</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"rolesFor(action).join(', ')\"\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\n                />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header><mat-card-title>Add field</mat-card-title></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>\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 \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n  </div>\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--right\">\n    <mat-card>\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></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: JSON + optional live preview \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;Config JSON</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#fff}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;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:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}@media(max-width:1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;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-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.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:#ef4444;font-weight:700}.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{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{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)}.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
             }], languages: [{
@@ -3375,6 +3637,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Output
             }], save: [{
                 type: Output
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
             }] } });
 
 // Main component