ngx-dynamic-entity-builder 1.6.0 → 1.7.0

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

@@ -264,21 +264,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 +362,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 +378,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 +441,40 @@ 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.
+        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 +501,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 +543,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 +596,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) {
@@ -1129,14 +1224,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);
@@ -1235,24 +1337,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 +1456,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 +1597,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 +1609,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 +1624,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 +1632,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 +1646,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 +1769,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 +1781,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 +1796,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 +1804,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 +1818,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 +2327,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 +2351,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 +2594,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 +2631,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 +2644,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 +2678,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 +2696,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 +3092,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 +3121,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 +3174,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 +3203,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>