ngx-dynamic-entity-builder 1.0.0 → 1.1.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, Component, EventEmitter, Output, Input, InjectionToken, effect } from '@angular/core';
+import { signal, computed, Injectable, inject, Component, EventEmitter, Output, Input, effect } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/cdk/drag-drop';
@@ -32,7 +32,8 @@ import * as i3 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i9 from '@angular/material/core';
 import { CommonModule } from '@angular/common';
-import { ConfigSourceService } from 'ngx-dynamic-entity';
+import { ConfigSourceService, SYSTEM_DEFAULT_CAN_EDIT } from 'ngx-dynamic-entity';
+export { SYSTEM_DEFAULT_CAN_EDIT } from 'ngx-dynamic-entity';
 
 /**
  * field-catalog.ts — re-exports shared field catalog from @dynamic-entity/core.
@@ -55,6 +56,14 @@ function deepClone(value) {
 
 const clone = deepClone;
 const ID_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
+/**
+ * The regex the builder used to write into `pattern` to mean "email".
+ *
+ * Retained only to recognise configs authored before `FieldValidators.email` existed, so
+ * they still show Email as ticked and do not leave a stray pattern behind when it is
+ * un-ticked. Nothing writes it any more.
+ */
+const LEGACY_EMAIL_PATTERN = '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$';
 class BuilderStore {
     _config = signal(this.emptyConfig());
     _selectedFieldId = signal(null);
@@ -68,11 +77,19 @@ class BuilderStore {
      */
     manualIds = new Set();
     _isDirty = signal(false);
+    /**
+     * Roles of the person using the builder — distinct from `availableRoles`, which is the
+     * vocabulary a schema may reference. Needed so the SYSTEM_DEFAULT_CAN_EDIT predicate can
+     * be asked a real question; it was previously called with a hardcoded empty array, which
+     * made any role-checking predicate answer false for everyone.
+     */
+    _userRoles = signal([]);
     config = this._config.asReadonly();
     selectedFieldId = this._selectedFieldId.asReadonly();
     activeLanguage = this._activeLanguage.asReadonly();
     rules = this._rules.asReadonly();
     isDirty = this._isDirty.asReadonly();
+    userRoles = this._userRoles.asReadonly();
     tabs = computed(() => this._config().tabs ?? []);
     fields = computed(() => {
         return (this._config().tabs ?? []).flatMap(t => t.fields ?? []);
@@ -157,6 +174,10 @@ class BuilderStore {
     setActiveLanguage(language) {
         this._activeLanguage.set(language);
     }
+    /** Roles of the person using the builder, for SYSTEM_DEFAULT_CAN_EDIT. */
+    setUserRoles(roles) {
+        this._userRoles.set(roles ?? []);
+    }
     // ─── Helper Traversal ───────────────────────────────────────────────────────
     getAllFields(tabs = []) {
         const list = [];
@@ -168,6 +189,44 @@ class BuilderStore {
         }
         return list;
     }
+    /**
+     * Every tab in the tree, flattened.
+     *
+     * The structural operations below used to iterate `draft.tabs` directly, which is only
+     * the top level. A field on a sub-tab could be selected and edited but never removed,
+     * duplicated, moved or reordered — the builder could author nested configs it was then
+     * unable to restructure, which is the worst possible state for an authoring tool.
+     */
+    flattenTabs(tabs = []) {
+        const list = [];
+        for (const t of tabs) {
+            list.push(t);
+            if (t.children)
+                list.push(...this.flattenTabs(t.children));
+        }
+        return list;
+    }
+    /**
+     * Every field id in the config, including `group`/`array` children.
+     *
+     * Id uniqueness is a whole-config invariant, not a per-tab one: rules, `showWhen`
+     * conditions and `autoPatch` mappings all address fields by bare id, so two fields
+     * sharing an id anywhere in the tree interfere with each other. Uniqueness checks must
+     * therefore see deeper than `fields()`, which stops at a tab's own fields.
+     */
+    allFieldIds(tabs = []) {
+        const ids = new Set();
+        const walkFields = (fields) => {
+            for (const f of fields ?? []) {
+                ids.add(f.id);
+                if (f.children?.length)
+                    walkFields(f.children);
+            }
+        };
+        for (const tab of this.flattenTabs(tabs))
+            walkFields(tab.fields);
+        return ids;
+    }
     findFieldInTabs(tabs = [], id) {
         for (const t of tabs) {
             if (t.fields) {
@@ -187,12 +246,11 @@ class BuilderStore {
     addField(type, targetTabId) {
         const meta = getFieldTypeMeta(type);
         const prefix = meta?.idPrefix ?? 'field';
-        const allFields = this.fields();
-        const id = this.uniqueId(prefix, allFields);
+        const id = this.uniqueId(prefix, this.allFieldIds(this._config().tabs));
         this.mutate(draft => {
             const field = createFieldConfig(type, id, draft.defaultLanguage ?? 'en');
             const targetTab = targetTabId
-                ? draft.tabs.find(t => t.id === targetTabId)
+                ? this.flattenTabs(draft.tabs).find(t => t.id === targetTabId)
                 : draft.tabs[0];
             if (targetTab) {
                 targetTab.fields = targetTab.fields ?? [];
@@ -222,7 +280,7 @@ class BuilderStore {
         const trimmed = newId.trim();
         if (!trimmed || trimmed === oldId)
             return;
-        if (this.fields().some(f => f.id === trimmed))
+        if (this.allFieldIds(this._config().tabs).has(trimmed))
             return;
         if (!this.findFieldInTabs(this._config().tabs, oldId))
             return;
@@ -296,7 +354,7 @@ class BuilderStore {
     }
     removeField(id) {
         this.mutate(draft => {
-            for (const tab of draft.tabs) {
+            for (const tab of this.flattenTabs(draft.tabs)) {
                 if (tab.fields) {
                     tab.fields = tab.fields.filter(f => f.id !== id);
                 }
@@ -315,9 +373,9 @@ class BuilderStore {
             return null;
         const meta = getFieldTypeMeta(source.type);
         const prefix = meta?.idPrefix ?? 'field';
-        const newId = this.uniqueId(prefix, this.fields());
+        const newId = this.uniqueId(prefix, this.allFieldIds(this._config().tabs));
         this.mutate(draft => {
-            for (const tab of draft.tabs) {
+            for (const tab of this.flattenTabs(draft.tabs)) {
                 const index = (tab.fields ?? []).findIndex(f => f.id === id);
                 if (index !== -1) {
                     const copy = clone(source);
@@ -332,7 +390,7 @@ class BuilderStore {
     }
     moveField(id, direction) {
         this.mutate(draft => {
-            for (const tab of draft.tabs) {
+            for (const tab of this.flattenTabs(draft.tabs)) {
                 const fields = tab.fields ?? [];
                 const from = fields.findIndex(f => f.id === id);
                 if (from !== -1) {
@@ -350,7 +408,7 @@ class BuilderStore {
     reorderField(fromIndex, toIndex, tabId) {
         this.mutate(draft => {
             const targetTab = tabId
-                ? draft.tabs.find(t => t.id === tabId)
+                ? this.flattenTabs(draft.tabs).find(t => t.id === tabId)
                 : draft.tabs[0];
             const fields = targetTab?.fields ?? [];
             if (fromIndex < 0 ||
@@ -396,7 +454,7 @@ class BuilderStore {
     }
     /** `derived`, or `derived_2`, `derived_3`… if another field already holds it. */
     availableId(derived, currentId) {
-        const taken = new Set(this.fields().map(f => f.id).filter(fid => fid !== currentId));
+        const taken = new Set([...this.allFieldIds(this._config().tabs)].filter(fid => fid !== currentId));
         if (!taken.has(derived))
             return derived;
         let n = 2;
@@ -426,9 +484,15 @@ class BuilderStore {
                     delete field.validators.required;
             }
             else if (validator === 'email') {
+                // Writes its own flag, not `pattern`. Sharing `pattern` meant a field could not have
+                // both an email check and a custom regex, setting a custom pattern made the Email box
+                // appear ticked, and un-ticking Email deleted whatever pattern the author had written.
                 if (on)
-                    field.validators.pattern = '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$';
+                    field.validators.email = true;
                 else
+                    delete field.validators.email;
+                // Clear the legacy encoding either way, so a config touched here stops carrying both.
+                if (field.validators.pattern === LEGACY_EMAIL_PATTERN)
                     delete field.validators.pattern;
             }
         });
@@ -454,8 +518,12 @@ class BuilderStore {
     hasFlagValidator(field, validator) {
         if (validator === 'required')
             return !!field.validators?.required;
-        if (validator === 'email')
-            return !!field.validators?.pattern;
+        if (validator === 'email') {
+            // This used to report *any* pattern as email, so writing a custom regex silently
+            // ticked the box. The legacy encoding is still recognised so a config authored by the
+            // old builder keeps showing Email as ticked.
+            return !!field.validators?.email || field.validators?.pattern === LEGACY_EMAIL_PATTERN;
+        }
         return false;
     }
     // ─── Options (dropdown / multiSelect / radio) ────────────────────────────────
@@ -761,7 +829,7 @@ class BuilderStore {
         this._rules.set(clone(rules));
     }
     addRule(rule) {
-        const id = rule.id?.trim() || this.uniqueId('rule', this._rules().map(r => ({ id: r.id ?? '' })));
+        const id = rule.id?.trim() || this.uniqueId('rule', new Set(this._rules().map(r => r.id ?? '')));
         this._rules.update(rules => [...rules, { ...clone(rule), id }]);
         return id;
     }
@@ -797,7 +865,7 @@ class BuilderStore {
         // Must be unique across the whole tree, not just the top level: a tab id is the record
         // storage path, so a new top-level tab colliding with an existing sub-tab would make two
         // tabs write to the same key and break findTab/getTabPath.
-        const id = this.uniqueId('tab', this.allTabIds().map(tid => ({ id: tid })));
+        const id = this.uniqueId('tab', new Set(this.allTabIds()));
         this.mutate(draft => {
             const tabs = draft.tabs ?? (draft.tabs = []);
             const lang = draft.defaultLanguage ?? 'en';
@@ -818,7 +886,7 @@ class BuilderStore {
         return ids;
     }
     addSubTab(parentId) {
-        const id = this.uniqueId('tab', this.allTabIds().map(tid => ({ id: tid })));
+        const id = this.uniqueId('tab', new Set(this.allTabIds()));
         this.mutate(draft => {
             const parent = findTab(draft.tabs, parentId);
             if (parent) {
@@ -893,8 +961,7 @@ class BuilderStore {
         this._config.set(draft);
         this._isDirty.set(true);
     }
-    uniqueId(prefix, existing) {
-        const taken = new Set(existing.map(e => e.id));
+    uniqueId(prefix, taken) {
         let n = 1;
         let candidate = `${prefix}_${n}`;
         while (taken.has(candidate)) {
@@ -918,9 +985,7 @@ class BuilderStore {
         if (allFields.length === 0) {
             problems.push({ level: 'warning', message: 'This entity has no fields yet.' });
         }
-        const seen = new Map();
         for (const field of allFields) {
-            seen.set(field.id, (seen.get(field.id) ?? 0) + 1);
             if (!field.id || !ID_PATTERN.test(field.id)) {
                 problems.push({
                     level: 'error',
@@ -957,7 +1022,22 @@ class BuilderStore {
                 });
             }
         }
-        for (const [id, count] of seen) {
+        // 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) {
             if (count > 1) {
                 problems.push({ level: 'error', message: `Duplicate field id "${id}" (${count}×).`, fieldId: id });
             }
@@ -1037,156 +1117,156 @@ class EntityReferenceConfigComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityReferenceConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EntityReferenceConfigComponent, isStandalone: true, selector: "ngx-entity-reference-config", ngImport: i0, template: `
-    @if (field(); as f) {
-      <div class="deb-entity-ref">
-        <span class="deb-section-title">Entity reference</span>
-
-        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Registry key</mat-label>
-          <input
-            matInput
-            data-testid="entity-ref-key"
-            [ngModel]="ref(f).linkedEntityKey ?? ''"
-            (ngModelChange)="patchRef(f, { linkedEntityKey: $event || undefined })"
-          />
-          <mat-hint>Key the consumer registered a loader under. Defaults to the field id.</mat-hint>
-        </mat-form-field>
-
-        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Display fields</mat-label>
-          <input
-            matInput
-            data-testid="entity-ref-display-fields"
-            [ngModel]="displayFieldsText(f)"
-            (ngModelChange)="setDisplayFields(f, $event)"
-          />
-          <mat-hint>Comma-separated record paths used to build each option label.</mat-hint>
-        </mat-form-field>
-
-        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Static filters (JSON)</mat-label>
-          <input
-            matInput
-            data-testid="entity-ref-filters"
-            [ngModel]="filtersText(f)"
-            (ngModelChange)="setFilters(f, $event)"
-          />
-          @if (filtersError()) {
-            <mat-hint class="deb-error-hint">{{ filtersError() }}</mat-hint>
-          } @else {
-            <mat-hint>Passed to the loader, e.g. &#123;"isEmployee": false&#125;.</mat-hint>
-          }
-        </mat-form-field>
-
-        <mat-divider></mat-divider>
-
-        <!-- Cascade -->
-        <span class="deb-section-title">Cascade</span>
-        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Parent field</mat-label>
-          <mat-select
-            data-testid="entity-ref-parent"
-            [ngModel]="ref(f).parentField ?? ''"
-            (ngModelChange)="patchRef(f, { parentField: $event || undefined })"
-          >
-            <mat-option value="">None — load all options</mat-option>
-            @for (candidate of parentCandidates(); track candidate.id) {
-              <mat-option [value]="candidate.id">{{ fieldLabel(candidate) }} ({{ candidate.id }})</mat-option>
-            }
-          </mat-select>
-          <mat-hint>This field's options reload whenever the parent changes.</mat-hint>
-        </mat-form-field>
-
-        @if (ref(f).parentField) {
-          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-            <mat-label>Lookup filter path</mat-label>
-            <input
-              matInput
-              data-testid="entity-ref-lookup-filter"
-              [ngModel]="ref(f).lookupFilter ?? ''"
-              (ngModelChange)="patchRef(f, { lookupFilter: $event || undefined })"
-            />
-            <mat-hint>Keep options whose record matches the parent value at this path.</mat-hint>
-          </mat-form-field>
-
-          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-            <mat-label>Lookup path (nested options)</mat-label>
-            <input
-              matInput
-              data-testid="entity-ref-lookup-path"
-              [ngModel]="ref(f).lookupPath ?? ''"
-              (ngModelChange)="patchRef(f, { lookupPath: $event || undefined })"
-            />
-            <mat-hint>Take options from this array on the selected parent's record instead.</mat-hint>
-          </mat-form-field>
-        }
-
-        <mat-divider></mat-divider>
-
-        <!-- autoPatch -->
-        <div class="deb-row deb-row--split">
-          <span class="deb-section-title">Auto-patch on select</span>
-          <button
-            mat-stroked-button
-            type="button"
-            data-testid="add-auto-patch"
-            (click)="store.addAutoPatchMapping(f.id)"
-          >
-            <mat-icon>add</mat-icon> Mapping
-          </button>
-        </div>
-
-        @if (f.autoPatch) {
-          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-            <mat-label>Target tab</mat-label>
-            <mat-select
-              data-testid="auto-patch-tab"
-              [ngModel]="f.autoPatch.targetTab"
-              (ngModelChange)="store.setAutoPatchTargetTab(f.id, $event)"
-            >
-              @for (tab of store.tabs(); track tab.id) {
-                <mat-option [value]="tab.id">{{ tabLabel(tab.id) }}</mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
-
-          @for (mapping of f.autoPatch.mappings; track $index) {
-            <div class="deb-option-row">
-              <mat-form-field appearance="outline" subscriptSizing="dynamic">
-                <mat-label>Source (linked record)</mat-label>
-                <input
-                  matInput
-                  [ngModel]="mapping.source"
-                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { source: $event })"
-                />
-              </mat-form-field>
-              <mat-form-field appearance="outline" subscriptSizing="dynamic">
-                <mat-label>Target field</mat-label>
-                <input
-                  matInput
-                  [ngModel]="mapping.target"
-                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { target: $event })"
-                />
-              </mat-form-field>
-              <button
-                mat-icon-button
-                type="button"
-                color="warn"
-                matTooltip="Remove mapping"
-                (click)="store.removeAutoPatchMapping(f.id, $index)"
-              >
-                <mat-icon>delete</mat-icon>
-              </button>
-            </div>
-          }
-        } @else {
-          <p class="deb-hint">
-            No auto-patch configured — selecting a reference will not copy any values.
-          </p>
-        }
-      </div>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EntityReferenceConfigComponent, isStandalone: true, selector: "ngx-entity-reference-config", ngImport: i0, template: `
+    @if (field(); as f) {
+      <div class="deb-entity-ref">
+        <span class="deb-section-title">Entity reference</span>
+
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Registry key</mat-label>
+          <input
+            matInput
+            data-testid="entity-ref-key"
+            [ngModel]="ref(f).linkedEntityKey ?? ''"
+            (ngModelChange)="patchRef(f, { linkedEntityKey: $event || undefined })"
+          />
+          <mat-hint>Key the consumer registered a loader under. Defaults to the field id.</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Display fields</mat-label>
+          <input
+            matInput
+            data-testid="entity-ref-display-fields"
+            [ngModel]="displayFieldsText(f)"
+            (ngModelChange)="setDisplayFields(f, $event)"
+          />
+          <mat-hint>Comma-separated record paths used to build each option label.</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Static filters (JSON)</mat-label>
+          <input
+            matInput
+            data-testid="entity-ref-filters"
+            [ngModel]="filtersText(f)"
+            (ngModelChange)="setFilters(f, $event)"
+          />
+          @if (filtersError()) {
+            <mat-hint class="deb-error-hint">{{ filtersError() }}</mat-hint>
+          } @else {
+            <mat-hint>Passed to the loader, e.g. &#123;"isEmployee": false&#125;.</mat-hint>
+          }
+        </mat-form-field>
+
+        <mat-divider></mat-divider>
+
+        <!-- Cascade -->
+        <span class="deb-section-title">Cascade</span>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Parent field</mat-label>
+          <mat-select
+            data-testid="entity-ref-parent"
+            [ngModel]="ref(f).parentField ?? ''"
+            (ngModelChange)="patchRef(f, { parentField: $event || undefined })"
+          >
+            <mat-option value="">None — load all options</mat-option>
+            @for (candidate of parentCandidates(); track candidate.id) {
+              <mat-option [value]="candidate.id">{{ fieldLabel(candidate) }} ({{ candidate.id }})</mat-option>
+            }
+          </mat-select>
+          <mat-hint>This field's options reload whenever the parent changes.</mat-hint>
+        </mat-form-field>
+
+        @if (ref(f).parentField) {
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+            <mat-label>Lookup filter path</mat-label>
+            <input
+              matInput
+              data-testid="entity-ref-lookup-filter"
+              [ngModel]="ref(f).lookupFilter ?? ''"
+              (ngModelChange)="patchRef(f, { lookupFilter: $event || undefined })"
+            />
+            <mat-hint>Keep options whose record matches the parent value at this path.</mat-hint>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+            <mat-label>Lookup path (nested options)</mat-label>
+            <input
+              matInput
+              data-testid="entity-ref-lookup-path"
+              [ngModel]="ref(f).lookupPath ?? ''"
+              (ngModelChange)="patchRef(f, { lookupPath: $event || undefined })"
+            />
+            <mat-hint>Take options from this array on the selected parent's record instead.</mat-hint>
+          </mat-form-field>
+        }
+
+        <mat-divider></mat-divider>
+
+        <!-- autoPatch -->
+        <div class="deb-row deb-row--split">
+          <span class="deb-section-title">Auto-patch on select</span>
+          <button
+            mat-stroked-button
+            type="button"
+            data-testid="add-auto-patch"
+            (click)="store.addAutoPatchMapping(f.id)"
+          >
+            <mat-icon>add</mat-icon> Mapping
+          </button>
+        </div>
+
+        @if (f.autoPatch) {
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+            <mat-label>Target tab</mat-label>
+            <mat-select
+              data-testid="auto-patch-tab"
+              [ngModel]="f.autoPatch.targetTab"
+              (ngModelChange)="store.setAutoPatchTargetTab(f.id, $event)"
+            >
+              @for (tab of store.tabs(); track tab.id) {
+                <mat-option [value]="tab.id">{{ tabLabel(tab.id) }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+
+          @for (mapping of f.autoPatch.mappings; track $index) {
+            <div class="deb-option-row">
+              <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-label>Source (linked record)</mat-label>
+                <input
+                  matInput
+                  [ngModel]="mapping.source"
+                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { source: $event })"
+                />
+              </mat-form-field>
+              <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-label>Target field</mat-label>
+                <input
+                  matInput
+                  [ngModel]="mapping.target"
+                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { target: $event })"
+                />
+              </mat-form-field>
+              <button
+                mat-icon-button
+                type="button"
+                color="warn"
+                matTooltip="Remove mapping"
+                (click)="store.removeAutoPatchMapping(f.id, $index)"
+              >
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          }
+        } @else {
+          <p class="deb-hint">
+            No auto-patch configured — selecting a reference will not copy any values.
+          </p>
+        }
+      </div>
+    }
   `, isInline: true, styles: [".deb-entity-ref{display:flex;flex-direction:column;gap:12px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-option-row>mat-form-field{flex:1}.deb-error-hint{color:#b91c1c}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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"], 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityReferenceConfigComponent, decorators: [{
@@ -1201,156 +1281,156 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatSelectModule,
                         MatSlideToggleModule,
                         MatTooltipModule,
-                    ], template: `
-    @if (field(); as f) {
-      <div class="deb-entity-ref">
-        <span class="deb-section-title">Entity reference</span>
-
-        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Registry key</mat-label>
-          <input
-            matInput
-            data-testid="entity-ref-key"
-            [ngModel]="ref(f).linkedEntityKey ?? ''"
-            (ngModelChange)="patchRef(f, { linkedEntityKey: $event || undefined })"
-          />
-          <mat-hint>Key the consumer registered a loader under. Defaults to the field id.</mat-hint>
-        </mat-form-field>
-
-        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Display fields</mat-label>
-          <input
-            matInput
-            data-testid="entity-ref-display-fields"
-            [ngModel]="displayFieldsText(f)"
-            (ngModelChange)="setDisplayFields(f, $event)"
-          />
-          <mat-hint>Comma-separated record paths used to build each option label.</mat-hint>
-        </mat-form-field>
-
-        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Static filters (JSON)</mat-label>
-          <input
-            matInput
-            data-testid="entity-ref-filters"
-            [ngModel]="filtersText(f)"
-            (ngModelChange)="setFilters(f, $event)"
-          />
-          @if (filtersError()) {
-            <mat-hint class="deb-error-hint">{{ filtersError() }}</mat-hint>
-          } @else {
-            <mat-hint>Passed to the loader, e.g. &#123;"isEmployee": false&#125;.</mat-hint>
-          }
-        </mat-form-field>
-
-        <mat-divider></mat-divider>
-
-        <!-- Cascade -->
-        <span class="deb-section-title">Cascade</span>
-        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Parent field</mat-label>
-          <mat-select
-            data-testid="entity-ref-parent"
-            [ngModel]="ref(f).parentField ?? ''"
-            (ngModelChange)="patchRef(f, { parentField: $event || undefined })"
-          >
-            <mat-option value="">None — load all options</mat-option>
-            @for (candidate of parentCandidates(); track candidate.id) {
-              <mat-option [value]="candidate.id">{{ fieldLabel(candidate) }} ({{ candidate.id }})</mat-option>
-            }
-          </mat-select>
-          <mat-hint>This field's options reload whenever the parent changes.</mat-hint>
-        </mat-form-field>
-
-        @if (ref(f).parentField) {
-          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-            <mat-label>Lookup filter path</mat-label>
-            <input
-              matInput
-              data-testid="entity-ref-lookup-filter"
-              [ngModel]="ref(f).lookupFilter ?? ''"
-              (ngModelChange)="patchRef(f, { lookupFilter: $event || undefined })"
-            />
-            <mat-hint>Keep options whose record matches the parent value at this path.</mat-hint>
-          </mat-form-field>
-
-          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-            <mat-label>Lookup path (nested options)</mat-label>
-            <input
-              matInput
-              data-testid="entity-ref-lookup-path"
-              [ngModel]="ref(f).lookupPath ?? ''"
-              (ngModelChange)="patchRef(f, { lookupPath: $event || undefined })"
-            />
-            <mat-hint>Take options from this array on the selected parent's record instead.</mat-hint>
-          </mat-form-field>
-        }
-
-        <mat-divider></mat-divider>
-
-        <!-- autoPatch -->
-        <div class="deb-row deb-row--split">
-          <span class="deb-section-title">Auto-patch on select</span>
-          <button
-            mat-stroked-button
-            type="button"
-            data-testid="add-auto-patch"
-            (click)="store.addAutoPatchMapping(f.id)"
-          >
-            <mat-icon>add</mat-icon> Mapping
-          </button>
-        </div>
-
-        @if (f.autoPatch) {
-          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-            <mat-label>Target tab</mat-label>
-            <mat-select
-              data-testid="auto-patch-tab"
-              [ngModel]="f.autoPatch.targetTab"
-              (ngModelChange)="store.setAutoPatchTargetTab(f.id, $event)"
-            >
-              @for (tab of store.tabs(); track tab.id) {
-                <mat-option [value]="tab.id">{{ tabLabel(tab.id) }}</mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
-
-          @for (mapping of f.autoPatch.mappings; track $index) {
-            <div class="deb-option-row">
-              <mat-form-field appearance="outline" subscriptSizing="dynamic">
-                <mat-label>Source (linked record)</mat-label>
-                <input
-                  matInput
-                  [ngModel]="mapping.source"
-                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { source: $event })"
-                />
-              </mat-form-field>
-              <mat-form-field appearance="outline" subscriptSizing="dynamic">
-                <mat-label>Target field</mat-label>
-                <input
-                  matInput
-                  [ngModel]="mapping.target"
-                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { target: $event })"
-                />
-              </mat-form-field>
-              <button
-                mat-icon-button
-                type="button"
-                color="warn"
-                matTooltip="Remove mapping"
-                (click)="store.removeAutoPatchMapping(f.id, $index)"
-              >
-                <mat-icon>delete</mat-icon>
-              </button>
-            </div>
-          }
-        } @else {
-          <p class="deb-hint">
-            No auto-patch configured — selecting a reference will not copy any values.
-          </p>
-        }
-      </div>
-    }
+                    ], template: `
+    @if (field(); as f) {
+      <div class="deb-entity-ref">
+        <span class="deb-section-title">Entity reference</span>
+
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Registry key</mat-label>
+          <input
+            matInput
+            data-testid="entity-ref-key"
+            [ngModel]="ref(f).linkedEntityKey ?? ''"
+            (ngModelChange)="patchRef(f, { linkedEntityKey: $event || undefined })"
+          />
+          <mat-hint>Key the consumer registered a loader under. Defaults to the field id.</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Display fields</mat-label>
+          <input
+            matInput
+            data-testid="entity-ref-display-fields"
+            [ngModel]="displayFieldsText(f)"
+            (ngModelChange)="setDisplayFields(f, $event)"
+          />
+          <mat-hint>Comma-separated record paths used to build each option label.</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Static filters (JSON)</mat-label>
+          <input
+            matInput
+            data-testid="entity-ref-filters"
+            [ngModel]="filtersText(f)"
+            (ngModelChange)="setFilters(f, $event)"
+          />
+          @if (filtersError()) {
+            <mat-hint class="deb-error-hint">{{ filtersError() }}</mat-hint>
+          } @else {
+            <mat-hint>Passed to the loader, e.g. &#123;"isEmployee": false&#125;.</mat-hint>
+          }
+        </mat-form-field>
+
+        <mat-divider></mat-divider>
+
+        <!-- Cascade -->
+        <span class="deb-section-title">Cascade</span>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Parent field</mat-label>
+          <mat-select
+            data-testid="entity-ref-parent"
+            [ngModel]="ref(f).parentField ?? ''"
+            (ngModelChange)="patchRef(f, { parentField: $event || undefined })"
+          >
+            <mat-option value="">None — load all options</mat-option>
+            @for (candidate of parentCandidates(); track candidate.id) {
+              <mat-option [value]="candidate.id">{{ fieldLabel(candidate) }} ({{ candidate.id }})</mat-option>
+            }
+          </mat-select>
+          <mat-hint>This field's options reload whenever the parent changes.</mat-hint>
+        </mat-form-field>
+
+        @if (ref(f).parentField) {
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+            <mat-label>Lookup filter path</mat-label>
+            <input
+              matInput
+              data-testid="entity-ref-lookup-filter"
+              [ngModel]="ref(f).lookupFilter ?? ''"
+              (ngModelChange)="patchRef(f, { lookupFilter: $event || undefined })"
+            />
+            <mat-hint>Keep options whose record matches the parent value at this path.</mat-hint>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+            <mat-label>Lookup path (nested options)</mat-label>
+            <input
+              matInput
+              data-testid="entity-ref-lookup-path"
+              [ngModel]="ref(f).lookupPath ?? ''"
+              (ngModelChange)="patchRef(f, { lookupPath: $event || undefined })"
+            />
+            <mat-hint>Take options from this array on the selected parent's record instead.</mat-hint>
+          </mat-form-field>
+        }
+
+        <mat-divider></mat-divider>
+
+        <!-- autoPatch -->
+        <div class="deb-row deb-row--split">
+          <span class="deb-section-title">Auto-patch on select</span>
+          <button
+            mat-stroked-button
+            type="button"
+            data-testid="add-auto-patch"
+            (click)="store.addAutoPatchMapping(f.id)"
+          >
+            <mat-icon>add</mat-icon> Mapping
+          </button>
+        </div>
+
+        @if (f.autoPatch) {
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+            <mat-label>Target tab</mat-label>
+            <mat-select
+              data-testid="auto-patch-tab"
+              [ngModel]="f.autoPatch.targetTab"
+              (ngModelChange)="store.setAutoPatchTargetTab(f.id, $event)"
+            >
+              @for (tab of store.tabs(); track tab.id) {
+                <mat-option [value]="tab.id">{{ tabLabel(tab.id) }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+
+          @for (mapping of f.autoPatch.mappings; track $index) {
+            <div class="deb-option-row">
+              <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-label>Source (linked record)</mat-label>
+                <input
+                  matInput
+                  [ngModel]="mapping.source"
+                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { source: $event })"
+                />
+              </mat-form-field>
+              <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-label>Target field</mat-label>
+                <input
+                  matInput
+                  [ngModel]="mapping.target"
+                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { target: $event })"
+                />
+              </mat-form-field>
+              <button
+                mat-icon-button
+                type="button"
+                color="warn"
+                matTooltip="Remove mapping"
+                (click)="store.removeAutoPatchMapping(f.id, $index)"
+              >
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          }
+        } @else {
+          <p class="deb-hint">
+            No auto-patch configured — selecting a reference will not copy any values.
+          </p>
+        }
+      </div>
+    }
   `, styles: [".deb-entity-ref{display:flex;flex-direction:column;gap:12px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-option-row>mat-form-field{flex:1}.deb-error-hint{color:#b91c1c}\n"] }]
         }] });
 
@@ -1587,166 +1667,166 @@ class FieldRulesListComponent {
         return `${rule.fieldId} ${cond} → ${action}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldRulesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FieldRulesListComponent, isStandalone: true, selector: "ngx-field-rules-list", ngImport: i0, template: `
-    <div class="deb-rules">
-      <div class="deb-rules__head">
-        <span class="deb-section-title">Rules</span>
-        <button
-          mat-stroked-button
-          type="button"
-          data-testid="add-rule"
-          [disabled]="!store.selectedFieldId()"
-          (click)="startCreate()"
-        >
-          <mat-icon>add</mat-icon> Rule
-        </button>
-      </div>
-
-      @if (editing(); as draft) {
-        <ngx-rule-form [rule]="draft" (save)="commit($event)" (cancel)="editing.set(null)" />
-      }
-
-      @if (store.rulesForSelectedField().length === 0 && !editing()) {
-        <p class="deb-hint" data-testid="rules-empty">No rules on this field.</p>
-      }
-
-      @for (rule of store.rulesForSelectedField(); track rule.id) {
-        <div class="deb-rule-item" [class.deb-rule-item--off]="!rule.enabled" data-testid="rule-item">
-          <div class="deb-rule-item__body">
-            <span class="deb-rule-item__summary">{{ summarize(rule) }}</span>
-            <span class="deb-rule-item__meta">
-              priority {{ rule.priority }} · {{ rule.targets.length }} target(s)
-            </span>
-          </div>
-          <div class="deb-rule-item__actions">
-            <mat-slide-toggle
-              [checked]="rule.enabled"
-              matTooltip="Enable / disable"
-              (change)="store.toggleRule(rule.id!, $event.checked)"
-            />
-            <button
-              mat-icon-button
-              type="button"
-              matTooltip="Move up"
-              [attr.data-testid]="'rule-up-' + rule.id"
-              (click)="store.moveRule(rule.id!, -1)"
-            >
-              <mat-icon>arrow_upward</mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              type="button"
-              matTooltip="Move down"
-              [attr.data-testid]="'rule-down-' + rule.id"
-              (click)="store.moveRule(rule.id!, 1)"
-            >
-              <mat-icon>arrow_downward</mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              type="button"
-              matTooltip="Edit rule"
-              [attr.data-testid]="'rule-edit-' + rule.id"
-              (click)="startEdit(rule)"
-            >
-              <mat-icon>edit</mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              type="button"
-              color="warn"
-              matTooltip="Delete rule"
-              [attr.data-testid]="'rule-delete-' + rule.id"
-              (click)="store.removeRule(rule.id!)"
-            >
-              <mat-icon>delete</mat-icon>
-            </button>
-          </div>
-        </div>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FieldRulesListComponent, isStandalone: true, selector: "ngx-field-rules-list", ngImport: i0, template: `
+    <div class="deb-rules">
+      <div class="deb-rules__head">
+        <span class="deb-section-title">Rules</span>
+        <button
+          mat-stroked-button
+          type="button"
+          data-testid="add-rule"
+          [disabled]="!store.selectedFieldId()"
+          (click)="startCreate()"
+        >
+          <mat-icon>add</mat-icon> Rule
+        </button>
+      </div>
+
+      @if (editing(); as draft) {
+        <ngx-rule-form [rule]="draft" (save)="commit($event)" (cancel)="editing.set(null)" />
+      }
+
+      @if (store.rulesForSelectedField().length === 0 && !editing()) {
+        <p class="deb-hint" data-testid="rules-empty">No rules on this field.</p>
+      }
+
+      @for (rule of store.rulesForSelectedField(); track rule.id) {
+        <div class="deb-rule-item" [class.deb-rule-item--off]="!rule.enabled" data-testid="rule-item">
+          <div class="deb-rule-item__body">
+            <span class="deb-rule-item__summary">{{ summarize(rule) }}</span>
+            <span class="deb-rule-item__meta">
+              priority {{ rule.priority }} · {{ rule.targets.length }} target(s)
+            </span>
+          </div>
+          <div class="deb-rule-item__actions">
+            <mat-slide-toggle
+              [checked]="rule.enabled"
+              matTooltip="Enable / disable"
+              (change)="store.toggleRule(rule.id!, $event.checked)"
+            />
+            <button
+              mat-icon-button
+              type="button"
+              matTooltip="Move up"
+              [attr.data-testid]="'rule-up-' + rule.id"
+              (click)="store.moveRule(rule.id!, -1)"
+            >
+              <mat-icon>arrow_upward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              matTooltip="Move down"
+              [attr.data-testid]="'rule-down-' + rule.id"
+              (click)="store.moveRule(rule.id!, 1)"
+            >
+              <mat-icon>arrow_downward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              matTooltip="Edit rule"
+              [attr.data-testid]="'rule-edit-' + rule.id"
+              (click)="startEdit(rule)"
+            >
+              <mat-icon>edit</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              color="warn"
+              matTooltip="Delete rule"
+              [attr.data-testid]="'rule-delete-' + rule.id"
+              (click)="store.removeRule(rule.id!)"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        </div>
+      }
+    </div>
   `, isInline: true, styles: [".deb-rules{display:flex;flex-direction:column;gap:8px}.deb-rules__head{display:flex;align-items:center;justify-content:space-between}.deb-rule-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px}.deb-rule-item--off{opacity:.55}.deb-rule-item__body{display:flex;flex-direction:column;min-width:0}.deb-rule-item__summary{font-size:13px;font-weight:600;overflow-wrap:anywhere}.deb-rule-item__meta{font-size:11px;color:#6b7280}.deb-rule-item__actions{display:flex;align-items:center;flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i10.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: RuleFormComponent, selector: "ngx-rule-form", inputs: ["rule"], outputs: ["save", "cancel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldRulesListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-field-rules-list', standalone: true, imports: [MatButtonModule, MatIconModule, MatSlideToggleModule, MatTooltipModule, RuleFormComponent], template: `
-    <div class="deb-rules">
-      <div class="deb-rules__head">
-        <span class="deb-section-title">Rules</span>
-        <button
-          mat-stroked-button
-          type="button"
-          data-testid="add-rule"
-          [disabled]="!store.selectedFieldId()"
-          (click)="startCreate()"
-        >
-          <mat-icon>add</mat-icon> Rule
-        </button>
-      </div>
-
-      @if (editing(); as draft) {
-        <ngx-rule-form [rule]="draft" (save)="commit($event)" (cancel)="editing.set(null)" />
-      }
-
-      @if (store.rulesForSelectedField().length === 0 && !editing()) {
-        <p class="deb-hint" data-testid="rules-empty">No rules on this field.</p>
-      }
-
-      @for (rule of store.rulesForSelectedField(); track rule.id) {
-        <div class="deb-rule-item" [class.deb-rule-item--off]="!rule.enabled" data-testid="rule-item">
-          <div class="deb-rule-item__body">
-            <span class="deb-rule-item__summary">{{ summarize(rule) }}</span>
-            <span class="deb-rule-item__meta">
-              priority {{ rule.priority }} · {{ rule.targets.length }} target(s)
-            </span>
-          </div>
-          <div class="deb-rule-item__actions">
-            <mat-slide-toggle
-              [checked]="rule.enabled"
-              matTooltip="Enable / disable"
-              (change)="store.toggleRule(rule.id!, $event.checked)"
-            />
-            <button
-              mat-icon-button
-              type="button"
-              matTooltip="Move up"
-              [attr.data-testid]="'rule-up-' + rule.id"
-              (click)="store.moveRule(rule.id!, -1)"
-            >
-              <mat-icon>arrow_upward</mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              type="button"
-              matTooltip="Move down"
-              [attr.data-testid]="'rule-down-' + rule.id"
-              (click)="store.moveRule(rule.id!, 1)"
-            >
-              <mat-icon>arrow_downward</mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              type="button"
-              matTooltip="Edit rule"
-              [attr.data-testid]="'rule-edit-' + rule.id"
-              (click)="startEdit(rule)"
-            >
-              <mat-icon>edit</mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              type="button"
-              color="warn"
-              matTooltip="Delete rule"
-              [attr.data-testid]="'rule-delete-' + rule.id"
-              (click)="store.removeRule(rule.id!)"
-            >
-              <mat-icon>delete</mat-icon>
-            </button>
-          </div>
-        </div>
-      }
-    </div>
+            args: [{ selector: 'ngx-field-rules-list', standalone: true, imports: [MatButtonModule, MatIconModule, MatSlideToggleModule, MatTooltipModule, RuleFormComponent], template: `
+    <div class="deb-rules">
+      <div class="deb-rules__head">
+        <span class="deb-section-title">Rules</span>
+        <button
+          mat-stroked-button
+          type="button"
+          data-testid="add-rule"
+          [disabled]="!store.selectedFieldId()"
+          (click)="startCreate()"
+        >
+          <mat-icon>add</mat-icon> Rule
+        </button>
+      </div>
+
+      @if (editing(); as draft) {
+        <ngx-rule-form [rule]="draft" (save)="commit($event)" (cancel)="editing.set(null)" />
+      }
+
+      @if (store.rulesForSelectedField().length === 0 && !editing()) {
+        <p class="deb-hint" data-testid="rules-empty">No rules on this field.</p>
+      }
+
+      @for (rule of store.rulesForSelectedField(); track rule.id) {
+        <div class="deb-rule-item" [class.deb-rule-item--off]="!rule.enabled" data-testid="rule-item">
+          <div class="deb-rule-item__body">
+            <span class="deb-rule-item__summary">{{ summarize(rule) }}</span>
+            <span class="deb-rule-item__meta">
+              priority {{ rule.priority }} · {{ rule.targets.length }} target(s)
+            </span>
+          </div>
+          <div class="deb-rule-item__actions">
+            <mat-slide-toggle
+              [checked]="rule.enabled"
+              matTooltip="Enable / disable"
+              (change)="store.toggleRule(rule.id!, $event.checked)"
+            />
+            <button
+              mat-icon-button
+              type="button"
+              matTooltip="Move up"
+              [attr.data-testid]="'rule-up-' + rule.id"
+              (click)="store.moveRule(rule.id!, -1)"
+            >
+              <mat-icon>arrow_upward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              matTooltip="Move down"
+              [attr.data-testid]="'rule-down-' + rule.id"
+              (click)="store.moveRule(rule.id!, 1)"
+            >
+              <mat-icon>arrow_downward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              matTooltip="Edit rule"
+              [attr.data-testid]="'rule-edit-' + rule.id"
+              (click)="startEdit(rule)"
+            >
+              <mat-icon>edit</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              color="warn"
+              matTooltip="Delete rule"
+              [attr.data-testid]="'rule-delete-' + rule.id"
+              (click)="store.removeRule(rule.id!)"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        </div>
+      }
+    </div>
   `, styles: [".deb-rules{display:flex;flex-direction:column;gap:8px}.deb-rules__head{display:flex;align-items:center;justify-content:space-between}.deb-rule-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px}.deb-rule-item--off{opacity:.55}.deb-rule-item__body{display:flex;flex-direction:column;min-width:0}.deb-rule-item__summary{font-size:13px;font-weight:600;overflow-wrap:anywhere}.deb-rule-item__meta{font-size:11px;color:#6b7280}.deb-rule-item__actions{display:flex;align-items:center;flex:0 0 auto}\n"] }]
         }] });
 
@@ -1783,8 +1863,14 @@ class ReferencedFieldConfigComponent {
             this.store.syncReferencedField(field.id, sourceField);
         }
     }
+    /**
+     * Both callers pass the id of the field they just edited. This used to ignore that
+     * argument and read `store.selectedField()` instead, so whenever the edited field was not
+     * the selected one it checked drift against the wrong field's source entity — or bailed
+     * out entirely if nothing was selected.
+     */
     async checkDriftForField(fieldId) {
-        const f = this.store.selectedField();
+        const f = this.store.fields().find(field => field.id === fieldId);
         if (!f || !f.isReferenced || !f.referencedEntityKey || !f.referencedFieldId || !this.configSource)
             return;
         const sourceConfig = await this.configSource.getConfig(f.referencedEntityKey);
@@ -2049,7 +2135,7 @@ class FieldInspectorComponent {
         return String(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FieldInspectorComponent, isStandalone: true, selector: "ngx-field-inspector", ngImport: i0, template: "@if (field(); as f) {\r\n  <div class=\"deb-inspector\">\r\n    <!-- Identity -->\r\n    <div class=\"deb-row\">\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n        <mat-label>Field id</mat-label>\r\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\r\n        @if (store.hasManualId(f.id)) {\r\n          <mat-hint>The stored data key for this saved field \u2014 fixed.</mat-hint>\r\n        } @else {\r\n          <mat-hint>Derived from the label. Used as the data key.</mat-hint>\r\n        }\r\n      </mat-form-field>\r\n      <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\r\n    </div>\r\n\r\n    <!-- Localised text (active language) -->\r\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n      <mat-label>Label ({{ lang() }})</mat-label>\r\n      <input\r\n        matInput\r\n        [ngModel]=\"labelValue(f)\"\r\n        (ngModelChange)=\"store.setFieldLabel(f.id, lang(), $event)\"\r\n      />\r\n    </mat-form-field>\r\n\r\n    @if (meta()?.supportsPlaceholder) {\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>Placeholder ({{ lang() }})</mat-label>\r\n        <input\r\n          matInput\r\n          [ngModel]=\"placeholderValue(f)\"\r\n          (ngModelChange)=\"store.setFieldPlaceholder(f.id, lang(), $event)\"\r\n        />\r\n      </mat-form-field>\r\n    }\r\n\r\n    @if (meta()?.supportsDefaultValue) {\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>Default value</mat-label>\r\n        <input\r\n          matInput\r\n          [ngModel]=\"f.defaultValue ?? ''\"\r\n          (ngModelChange)=\"store.updateField(f.id, { defaultValue: $event })\"\r\n        />\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- Entity reference, cascade, and autoPatch -->\r\n    @if (meta()?.isEntityRef) {\r\n      <mat-divider></mat-divider>\r\n      <ngx-entity-reference-config />\r\n    }\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Validators -->\r\n    @if (meta(); as m) {\r\n      @if (m.flagValidators.length || m.paramValidators.length) {\r\n        <span class=\"deb-section-title\">Validation</span>\r\n        <div class=\"deb-toggles\">\r\n          @for (v of m.flagValidators; track v) {\r\n            <mat-checkbox\r\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\r\n              (ngModelChange)=\"store.toggleFlagValidator(f.id, v, $event)\"\r\n            >{{ v }}</mat-checkbox>\r\n          }\r\n        </div>\r\n        @for (v of m.paramValidators; track v) {\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n            <mat-label>{{ v }}</mat-label>\r\n            <input\r\n              matInput\r\n              type=\"number\"\r\n              [ngModel]=\"store.getParamValidator(f, v)\"\r\n              (ngModelChange)=\"store.setParamValidator(f.id, v, toNum($event))\"\r\n            />\r\n          </mat-form-field>\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Options (dropdown / radio / multiSelect) -->\r\n    @if (meta()?.hasOptions) {\r\n      <mat-divider></mat-divider>\r\n      <span class=\"deb-section-title\">Data source</span>\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>Options come from</mat-label>\r\n        <mat-select\r\n          data-testid=\"data-source\"\r\n          [ngModel]=\"store.fieldDataSource(f)\"\r\n          (ngModelChange)=\"store.setFieldDataSource(f.id, $event)\"\r\n        >\r\n          <mat-option value=\"none\">Nothing yet</mat-option>\r\n          <mat-option value=\"manual\">Options authored here</mat-option>\r\n          <mat-option value=\"lookup\">A named list</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- Named lookup list -->\r\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>List name</mat-label>\r\n        <input\r\n          matInput\r\n          data-testid=\"list-name\"\r\n          [ngModel]=\"f.listName ?? ''\"\r\n          (ngModelChange)=\"store.setListName(f.id, $event)\"\r\n        />\r\n      </mat-form-field>\r\n      <p class=\"deb-hint\">\r\n        The consuming app resolves this name through its lookup registry. Options are not\r\n        authored here.\r\n      </p>\r\n    }\r\n\r\n    <!-- Inline options -->\r\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\r\n      <div class=\"deb-row\" style=\"justify-content: space-between;\">\r\n        <span class=\"deb-section-title\">Options</span>\r\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(f.id)\">\r\n          <mat-icon>add</mat-icon> Option\r\n        </button>\r\n      </div>\r\n      @for (opt of f.options ?? []; track $index) {\r\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\r\n          <!-- One input: the displayed text is the stored value. -->\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n            <mat-label>Option ({{ lang() }})</mat-label>\r\n            <input\r\n              matInput\r\n              [attr.data-testid]=\"'option-' + $index\"\r\n              [ngModel]=\"optionLabel(opt)\"\r\n              (ngModelChange)=\"store.setOptionLabel(f.id, $index, lang(), $event)\"\r\n            />\r\n          </mat-form-field>\r\n          <button mat-icon-button type=\"button\" color=\"warn\"\r\n            (click)=\"store.removeOption(f.id, $index)\" matTooltip=\"Remove option\">\r\n            <mat-icon>delete</mat-icon>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (!(f.options ?? []).length) {\r\n        <p class=\"deb-hint\">No options yet \u2014 add at least one.</p>\r\n      }\r\n    }\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Flags -->\r\n    <span class=\"deb-section-title\">Display</span>\r\n    <div class=\"deb-toggles\">\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.visibility ?? true\"\r\n        (ngModelChange)=\"store.updateField(f.id, { visibility: $event })\"\r\n      >Visible</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.table?.visible ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { table: { visible: $event } })\"\r\n      >Table column</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.readonly ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { readonly: $event })\"\r\n      >Read-only</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.disabled ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { disabled: $event })\"\r\n      >Disabled</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.maskData ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { maskData: $event })\"\r\n      >Mask data (RBAC)</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        data-testid=\"toggle-critical\"\r\n        [ngModel]=\"f.criticalField ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { criticalField: $event })\"\r\n        matTooltip=\"Renders locked; editing it announces a change against the session baseline.\"\r\n      >Critical field</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.showOnMinimize ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { showOnMinimize: $event })\"\r\n        matTooltip=\"Shown in the record editor's summary panel.\"\r\n      >Show in summary</mat-slide-toggle>\r\n    </div>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Conditional visibility (static showWhen) -->\r\n    <div class=\"deb-row deb-row--split\">\r\n      <span class=\"deb-section-title\">Show when</span>\r\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\r\n        <mat-icon>add</mat-icon> Condition\r\n      </button>\r\n    </div>\r\n    @for (entry of showWhenEntries(f); track entry.key) {\r\n      <div class=\"deb-option-row\" data-testid=\"option-row\">\r\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n          <mat-label>Field id</mat-label>\r\n          <input matInput [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\" />\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n          <mat-label>Equals</mat-label>\r\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\r\n        </mat-form-field>\r\n        <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove condition\"\r\n          (click)=\"removeShowWhen(f, entry.key)\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    @if (!showWhenEntries(f).length) {\r\n      <p class=\"deb-hint\">Always visible. Add a condition to show this field only for certain values.</p>\r\n    }\r\n\r\n    <!-- patchOnTrue (boolean/checkbox only) -->\r\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\r\n      <mat-divider></mat-divider>\r\n      <div class=\"deb-row deb-row--split\">\r\n        <span class=\"deb-section-title\">Copy on true</span>\r\n        <button mat-stroked-button type=\"button\" data-testid=\"add-patch-on-true\"\r\n          (click)=\"store.addPatchOnTrueMapping(f.id)\">\r\n          <mat-icon>add</mat-icon> Mapping\r\n        </button>\r\n      </div>\r\n      @for (mapping of f.patchOnTrue ?? []; track $index) {\r\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n            <mat-label>From field</mat-label>\r\n            <input matInput [ngModel]=\"mapping.from\"\r\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { from: $event })\" />\r\n          </mat-form-field>\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n            <mat-label>To field</mat-label>\r\n            <input matInput [ngModel]=\"mapping.to\"\r\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { to: $event })\" />\r\n          </mat-form-field>\r\n          <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove mapping\"\r\n            (click)=\"store.removePatchOnTrueMapping(f.id, $index)\">\r\n            <mat-icon>delete</mat-icon>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (!(f.patchOnTrue ?? []).length) {\r\n        <p class=\"deb-hint\">When this flips to true, copy one field's value into another.</p>\r\n      }\r\n    }\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Rules attached to this field -->\r\n    <ngx-field-rules-list />\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\r\n    <ngx-referenced-field-config />\r\n  </div>\r\n} @else {\r\n  <div class=\"deb-inspector__empty\">\r\n    <mat-icon>touch_app</mat-icon>\r\n    <p>Select a field to edit its properties.</p>\r\n  </div>\r\n}\r\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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "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"], 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i10.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], 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: "17.3.12", 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    <!-- 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        [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>Field id</mat-label>\n          <input matInput [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\" />\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            <input matInput [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { from: $event })\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>To field</mat-label>\n            <input matInput [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { to: $event })\" />\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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "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"], 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i10.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], 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: "17.3.12", ngImport: i0, type: FieldInspectorComponent, decorators: [{
             type: Component,
@@ -2067,7 +2153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         EntityReferenceConfigComponent,
                         FieldRulesListComponent,
                         ReferencedFieldConfigComponent,
-                    ], template: "@if (field(); as f) {\r\n  <div class=\"deb-inspector\">\r\n    <!-- Identity -->\r\n    <div class=\"deb-row\">\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n        <mat-label>Field id</mat-label>\r\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\r\n        @if (store.hasManualId(f.id)) {\r\n          <mat-hint>The stored data key for this saved field \u2014 fixed.</mat-hint>\r\n        } @else {\r\n          <mat-hint>Derived from the label. Used as the data key.</mat-hint>\r\n        }\r\n      </mat-form-field>\r\n      <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\r\n    </div>\r\n\r\n    <!-- Localised text (active language) -->\r\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n      <mat-label>Label ({{ lang() }})</mat-label>\r\n      <input\r\n        matInput\r\n        [ngModel]=\"labelValue(f)\"\r\n        (ngModelChange)=\"store.setFieldLabel(f.id, lang(), $event)\"\r\n      />\r\n    </mat-form-field>\r\n\r\n    @if (meta()?.supportsPlaceholder) {\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>Placeholder ({{ lang() }})</mat-label>\r\n        <input\r\n          matInput\r\n          [ngModel]=\"placeholderValue(f)\"\r\n          (ngModelChange)=\"store.setFieldPlaceholder(f.id, lang(), $event)\"\r\n        />\r\n      </mat-form-field>\r\n    }\r\n\r\n    @if (meta()?.supportsDefaultValue) {\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>Default value</mat-label>\r\n        <input\r\n          matInput\r\n          [ngModel]=\"f.defaultValue ?? ''\"\r\n          (ngModelChange)=\"store.updateField(f.id, { defaultValue: $event })\"\r\n        />\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- Entity reference, cascade, and autoPatch -->\r\n    @if (meta()?.isEntityRef) {\r\n      <mat-divider></mat-divider>\r\n      <ngx-entity-reference-config />\r\n    }\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Validators -->\r\n    @if (meta(); as m) {\r\n      @if (m.flagValidators.length || m.paramValidators.length) {\r\n        <span class=\"deb-section-title\">Validation</span>\r\n        <div class=\"deb-toggles\">\r\n          @for (v of m.flagValidators; track v) {\r\n            <mat-checkbox\r\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\r\n              (ngModelChange)=\"store.toggleFlagValidator(f.id, v, $event)\"\r\n            >{{ v }}</mat-checkbox>\r\n          }\r\n        </div>\r\n        @for (v of m.paramValidators; track v) {\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n            <mat-label>{{ v }}</mat-label>\r\n            <input\r\n              matInput\r\n              type=\"number\"\r\n              [ngModel]=\"store.getParamValidator(f, v)\"\r\n              (ngModelChange)=\"store.setParamValidator(f.id, v, toNum($event))\"\r\n            />\r\n          </mat-form-field>\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Options (dropdown / radio / multiSelect) -->\r\n    @if (meta()?.hasOptions) {\r\n      <mat-divider></mat-divider>\r\n      <span class=\"deb-section-title\">Data source</span>\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>Options come from</mat-label>\r\n        <mat-select\r\n          data-testid=\"data-source\"\r\n          [ngModel]=\"store.fieldDataSource(f)\"\r\n          (ngModelChange)=\"store.setFieldDataSource(f.id, $event)\"\r\n        >\r\n          <mat-option value=\"none\">Nothing yet</mat-option>\r\n          <mat-option value=\"manual\">Options authored here</mat-option>\r\n          <mat-option value=\"lookup\">A named list</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- Named lookup list -->\r\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>List name</mat-label>\r\n        <input\r\n          matInput\r\n          data-testid=\"list-name\"\r\n          [ngModel]=\"f.listName ?? ''\"\r\n          (ngModelChange)=\"store.setListName(f.id, $event)\"\r\n        />\r\n      </mat-form-field>\r\n      <p class=\"deb-hint\">\r\n        The consuming app resolves this name through its lookup registry. Options are not\r\n        authored here.\r\n      </p>\r\n    }\r\n\r\n    <!-- Inline options -->\r\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\r\n      <div class=\"deb-row\" style=\"justify-content: space-between;\">\r\n        <span class=\"deb-section-title\">Options</span>\r\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(f.id)\">\r\n          <mat-icon>add</mat-icon> Option\r\n        </button>\r\n      </div>\r\n      @for (opt of f.options ?? []; track $index) {\r\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\r\n          <!-- One input: the displayed text is the stored value. -->\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n            <mat-label>Option ({{ lang() }})</mat-label>\r\n            <input\r\n              matInput\r\n              [attr.data-testid]=\"'option-' + $index\"\r\n              [ngModel]=\"optionLabel(opt)\"\r\n              (ngModelChange)=\"store.setOptionLabel(f.id, $index, lang(), $event)\"\r\n            />\r\n          </mat-form-field>\r\n          <button mat-icon-button type=\"button\" color=\"warn\"\r\n            (click)=\"store.removeOption(f.id, $index)\" matTooltip=\"Remove option\">\r\n            <mat-icon>delete</mat-icon>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (!(f.options ?? []).length) {\r\n        <p class=\"deb-hint\">No options yet \u2014 add at least one.</p>\r\n      }\r\n    }\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Flags -->\r\n    <span class=\"deb-section-title\">Display</span>\r\n    <div class=\"deb-toggles\">\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.visibility ?? true\"\r\n        (ngModelChange)=\"store.updateField(f.id, { visibility: $event })\"\r\n      >Visible</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.table?.visible ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { table: { visible: $event } })\"\r\n      >Table column</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.readonly ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { readonly: $event })\"\r\n      >Read-only</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.disabled ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { disabled: $event })\"\r\n      >Disabled</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.maskData ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { maskData: $event })\"\r\n      >Mask data (RBAC)</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        data-testid=\"toggle-critical\"\r\n        [ngModel]=\"f.criticalField ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { criticalField: $event })\"\r\n        matTooltip=\"Renders locked; editing it announces a change against the session baseline.\"\r\n      >Critical field</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.showOnMinimize ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { showOnMinimize: $event })\"\r\n        matTooltip=\"Shown in the record editor's summary panel.\"\r\n      >Show in summary</mat-slide-toggle>\r\n    </div>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Conditional visibility (static showWhen) -->\r\n    <div class=\"deb-row deb-row--split\">\r\n      <span class=\"deb-section-title\">Show when</span>\r\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\r\n        <mat-icon>add</mat-icon> Condition\r\n      </button>\r\n    </div>\r\n    @for (entry of showWhenEntries(f); track entry.key) {\r\n      <div class=\"deb-option-row\" data-testid=\"option-row\">\r\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n          <mat-label>Field id</mat-label>\r\n          <input matInput [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\" />\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n          <mat-label>Equals</mat-label>\r\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\r\n        </mat-form-field>\r\n        <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove condition\"\r\n          (click)=\"removeShowWhen(f, entry.key)\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    @if (!showWhenEntries(f).length) {\r\n      <p class=\"deb-hint\">Always visible. Add a condition to show this field only for certain values.</p>\r\n    }\r\n\r\n    <!-- patchOnTrue (boolean/checkbox only) -->\r\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\r\n      <mat-divider></mat-divider>\r\n      <div class=\"deb-row deb-row--split\">\r\n        <span class=\"deb-section-title\">Copy on true</span>\r\n        <button mat-stroked-button type=\"button\" data-testid=\"add-patch-on-true\"\r\n          (click)=\"store.addPatchOnTrueMapping(f.id)\">\r\n          <mat-icon>add</mat-icon> Mapping\r\n        </button>\r\n      </div>\r\n      @for (mapping of f.patchOnTrue ?? []; track $index) {\r\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n            <mat-label>From field</mat-label>\r\n            <input matInput [ngModel]=\"mapping.from\"\r\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { from: $event })\" />\r\n          </mat-form-field>\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n            <mat-label>To field</mat-label>\r\n            <input matInput [ngModel]=\"mapping.to\"\r\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { to: $event })\" />\r\n          </mat-form-field>\r\n          <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove mapping\"\r\n            (click)=\"store.removePatchOnTrueMapping(f.id, $index)\">\r\n            <mat-icon>delete</mat-icon>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (!(f.patchOnTrue ?? []).length) {\r\n        <p class=\"deb-hint\">When this flips to true, copy one field's value into another.</p>\r\n      }\r\n    }\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Rules attached to this field -->\r\n    <ngx-field-rules-list />\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\r\n    <ngx-referenced-field-config />\r\n  </div>\r\n} @else {\r\n  <div class=\"deb-inspector__empty\">\r\n    <mat-icon>touch_app</mat-icon>\r\n    <p>Select a field to edit its properties.</p>\r\n  </div>\r\n}\r\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    <!-- 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        [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>Field id</mat-label>\n          <input matInput [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\" />\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            <input matInput [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { from: $event })\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>To field</mat-label>\n            <input matInput [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { to: $event })\" />\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"] }]
         }] });
 
 /**
@@ -2077,48 +2163,47 @@ class FieldPaletteComponent {
     catalog = FIELD_TYPE_CATALOG;
     pick = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FieldPaletteComponent, isStandalone: true, selector: "ngx-field-palette", outputs: { pick: "pick" }, ngImport: i0, template: `
-    <div class="deb-palette">
-      @for (meta of catalog; track meta.type) {
-        <button
-          mat-stroked-button
-          type="button"
-          class="deb-palette__item"
-          [attr.data-testid]="'palette-' + meta.type"
-          [matTooltip]="meta.description"
-          (click)="pick.emit(meta.type)"
-        >
-          <mat-icon>{{ meta.icon }}</mat-icon>
-          <span>{{ meta.label }}</span>
-        </button>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FieldPaletteComponent, isStandalone: true, selector: "ngx-field-palette", outputs: { pick: "pick" }, ngImport: i0, template: `
+    <div class="deb-palette">
+      @for (meta of catalog; track meta.type) {
+        <button
+          mat-stroked-button
+          type="button"
+          class="deb-palette__item"
+          [attr.data-testid]="'palette-' + meta.type"
+          [matTooltip]="meta.description"
+          (click)="pick.emit(meta.type)"
+        >
+          <mat-icon>{{ meta.icon }}</mat-icon>
+          <span>{{ meta.label }}</span>
+        </button>
+      }
+    </div>
   `, isInline: true, styles: [".deb-palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-palette__item{justify-content:flex-start;overflow:hidden;border-radius:8px!important;border:1px solid var(--border, #e2e8f0)!important;padding:8px 12px!important;font-family:var(--font-heading, inherit)!important;font-weight:600!important;font-size:13px!important;transition:all .18s cubic-bezier(.16,1,.3,1)!important;background:#fff!important}.deb-palette__item:hover{border-color:#6366f1!important;background:#f5f3ff!important;color:#4f46e5!important;transform:translateY(-1px);box-shadow:0 4px 12px #6366f126!important}.deb-palette__item mat-icon{color:#6366f1;margin-right:6px;font-size:18px;width:18px;height:18px}.deb-palette__item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldPaletteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-field-palette', standalone: true, imports: [MatButtonModule, MatIconModule, MatTooltipModule], template: `
-    <div class="deb-palette">
-      @for (meta of catalog; track meta.type) {
-        <button
-          mat-stroked-button
-          type="button"
-          class="deb-palette__item"
-          [attr.data-testid]="'palette-' + meta.type"
-          [matTooltip]="meta.description"
-          (click)="pick.emit(meta.type)"
-        >
-          <mat-icon>{{ meta.icon }}</mat-icon>
-          <span>{{ meta.label }}</span>
-        </button>
-      }
-    </div>
+            args: [{ selector: 'ngx-field-palette', standalone: true, imports: [MatButtonModule, MatIconModule, MatTooltipModule], template: `
+    <div class="deb-palette">
+      @for (meta of catalog; track meta.type) {
+        <button
+          mat-stroked-button
+          type="button"
+          class="deb-palette__item"
+          [attr.data-testid]="'palette-' + meta.type"
+          [matTooltip]="meta.description"
+          (click)="pick.emit(meta.type)"
+        >
+          <mat-icon>{{ meta.icon }}</mat-icon>
+          <span>{{ meta.label }}</span>
+        </button>
+      }
+    </div>
   `, styles: [".deb-palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-palette__item{justify-content:flex-start;overflow:hidden;border-radius:8px!important;border:1px solid var(--border, #e2e8f0)!important;padding:8px 12px!important;font-family:var(--font-heading, inherit)!important;font-weight:600!important;font-size:13px!important;transition:all .18s cubic-bezier(.16,1,.3,1)!important;background:#fff!important}.deb-palette__item:hover{border-color:#6366f1!important;background:#f5f3ff!important;color:#4f46e5!important;transform:translateY(-1px);box-shadow:0 4px 12px #6366f126!important}.deb-palette__item mat-icon{color:#6366f1;margin-right:6px;font-size:18px;width:18px;height:18px}.deb-palette__item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], propDecorators: { pick: [{
                 type: Output
             }] } });
 
-const SYSTEM_DEFAULT_CAN_EDIT = new InjectionToken('SYSTEM_DEFAULT_CAN_EDIT');
 /**
  * TabManagerComponent — add / rename / reorder / remove tabs & sub-tabs with systemDefault protection.
  */
@@ -2135,153 +2220,156 @@ class TabManagerComponent {
         if (!tab.systemDefault)
             return true;
         if (this.canEditSystemDefaultsFn) {
-            return this.canEditSystemDefaultsFn([]);
+            // The predicate's entire contract is (roles) => boolean. This passed a hardcoded []
+            // regardless of who was using the builder, so any predicate that actually inspected
+            // roles answered false for everyone and locked every system-default tab.
+            return this.canEditSystemDefaultsFn(this.store.userRoles());
         }
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TabManagerComponent, isStandalone: true, selector: "ngx-tab-manager", ngImport: i0, template: `
-    <div class="deb-tabs">
-      <div class="deb-tabs__head">
-        <span class="deb-section-title">Tabs Manager</span>
-        <button mat-stroked-button type="button" (click)="store.addTab()">
-          <mat-icon>add</mat-icon> Add Tab
-        </button>
-      </div>
-
-      @if (store.tabs().length === 0) {
-        <p class="deb-hint">No tabs — all fields render in a single section.</p>
-      }
-
-      @for (tab of store.tabs(); track tab.id; let i = $index, count = $count) {
-        <div class="deb-tab-card" [class.deb-tab-card--system]="tab.systemDefault">
-          <div class="deb-tabs__row" [attr.data-testid]="'tab-row-' + tab.id">
-            <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
-              <mat-label>{{ tab.id }} {{ tab.systemDefault ? '(System)' : '' }}</mat-label>
-              <input
-                matInput
-                [disabled]="!canEditTab(tab)"
-                [ngModel]="tabLabel(tab)"
-                (ngModelChange)="store.setTabLabel(tab.id, lang(), $event)"
-              />
-            </mat-form-field>
-            <button
-              mat-icon-button
-              type="button"
-              [disabled]="i === 0 || !canEditTab(tab)"
-              (click)="store.moveTab(tab.id, -1)"
-              matTooltip="Move up"
-            >
-              <mat-icon>arrow_upward</mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              type="button"
-              [disabled]="i === count - 1 || !canEditTab(tab)"
-              (click)="store.moveTab(tab.id, 1)"
-              matTooltip="Move down"
-            >
-              <mat-icon>arrow_downward</mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              type="button"
-              color="warn"
-              [disabled]="!canEditTab(tab)"
-              (click)="store.removeTab(tab.id)"
-              matTooltip="Remove tab"
-            >
-              <mat-icon>delete</mat-icon>
-            </button>
-          </div>
-
-          <!-- Tab settings row -->
-          <div class="deb-tab-settings">
-            <mat-checkbox
-              [disabled]="!canEditTab(tab)"
-              [ngModel]="tab.flatData"
-              (ngModelChange)="store.updateTab(tab.id, { flatData: $event })"
-            >
-              Flat Data
-            </mat-checkbox>
-            <mat-checkbox
-              [disabled]="!canEditTab(tab)"
-              [ngModel]="tab.isPrimaryTab"
-              (ngModelChange)="$event ? store.setPrimaryTab(tab.id) : store.updateTab(tab.id, { isPrimaryTab: false })"
-            >
-              Primary Tab
-            </mat-checkbox>
-            <mat-checkbox
-              [disabled]="!canEditTab(tab)"
-              [ngModel]="tab.maskData"
-              (ngModelChange)="store.updateTab(tab.id, { maskData: $event })"
-            >
-              Mask Tab Data
-            </mat-checkbox>
-            <mat-checkbox
-              [disabled]="!canEditTab(tab)"
-              [ngModel]="tab.systemDefault"
-              (ngModelChange)="store.updateTab(tab.id, { systemDefault: $event })"
-            >
-              System Default
-            </mat-checkbox>
-            <button
-              mat-button
-              type="button"
-              color="primary"
-              [disabled]="!canEditTab(tab)"
-              (click)="store.addSubTab(tab.id)"
-            >
-              + Sub-tab
-            </button>
-          </div>
-
-          <!-- Module tab configuration -->
-          <div class="deb-tab-module">
-            <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
-              <mat-label>Consumer Module Name (Optional)</mat-label>
-              <input
-                matInput
-                placeholder="e.g. documents-view"
-                [disabled]="!canEditTab(tab)"
-                [ngModel]="tab.moduleName"
-                (ngModelChange)="store.updateTab(tab.id, { moduleName: $event || undefined })"
-              />
-            </mat-form-field>
-          </div>
-
-          <!-- Sub-tabs recursive render (Level 2) -->
-          @if (tab.children && tab.children.length > 0) {
-            <div class="deb-subtabs">
-              <span class="deb-subtabs__title">Sub-tabs:</span>
-              @for (sub of tab.children; track sub.id) {
-                <div class="deb-tabs__row deb-subtab-row" [attr.data-testid]="'subtab-row-' + sub.id">
-                  <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
-                    <mat-label>{{ sub.id }}</mat-label>
-                    <input
-                      matInput
-                      [disabled]="!canEditTab(sub)"
-                      [ngModel]="tabLabel(sub)"
-                      (ngModelChange)="store.setTabLabel(sub.id, lang(), $event)"
-                    />
-                  </mat-form-field>
-                  <button
-                    mat-icon-button
-                    type="button"
-                    color="warn"
-                    [disabled]="!canEditTab(sub)"
-                    (click)="store.removeTab(sub.id)"
-                    matTooltip="Remove sub-tab"
-                  >
-                    <mat-icon>delete</mat-icon>
-                  </button>
-                </div>
-              }
-            </div>
-          }
-        </div>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TabManagerComponent, isStandalone: true, selector: "ngx-tab-manager", ngImport: i0, template: `
+    <div class="deb-tabs">
+      <div class="deb-tabs__head">
+        <span class="deb-section-title">Tabs Manager</span>
+        <button mat-stroked-button type="button" (click)="store.addTab()">
+          <mat-icon>add</mat-icon> Add Tab
+        </button>
+      </div>
+
+      @if (store.tabs().length === 0) {
+        <p class="deb-hint">No tabs — all fields render in a single section.</p>
+      }
+
+      @for (tab of store.tabs(); track tab.id; let i = $index, count = $count) {
+        <div class="deb-tab-card" [class.deb-tab-card--system]="tab.systemDefault">
+          <div class="deb-tabs__row" [attr.data-testid]="'tab-row-' + tab.id">
+            <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
+              <mat-label>{{ tab.id }} {{ tab.systemDefault ? '(System)' : '' }}</mat-label>
+              <input
+                matInput
+                [disabled]="!canEditTab(tab)"
+                [ngModel]="tabLabel(tab)"
+                (ngModelChange)="store.setTabLabel(tab.id, lang(), $event)"
+              />
+            </mat-form-field>
+            <button
+              mat-icon-button
+              type="button"
+              [disabled]="i === 0 || !canEditTab(tab)"
+              (click)="store.moveTab(tab.id, -1)"
+              matTooltip="Move up"
+            >
+              <mat-icon>arrow_upward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              [disabled]="i === count - 1 || !canEditTab(tab)"
+              (click)="store.moveTab(tab.id, 1)"
+              matTooltip="Move down"
+            >
+              <mat-icon>arrow_downward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              color="warn"
+              [disabled]="!canEditTab(tab)"
+              (click)="store.removeTab(tab.id)"
+              matTooltip="Remove tab"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+
+          <!-- Tab settings row -->
+          <div class="deb-tab-settings">
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.flatData"
+              (ngModelChange)="store.updateTab(tab.id, { flatData: $event })"
+            >
+              Flat Data
+            </mat-checkbox>
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.isPrimaryTab"
+              (ngModelChange)="$event ? store.setPrimaryTab(tab.id) : store.updateTab(tab.id, { isPrimaryTab: false })"
+            >
+              Primary Tab
+            </mat-checkbox>
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.maskData"
+              (ngModelChange)="store.updateTab(tab.id, { maskData: $event })"
+            >
+              Mask Tab Data
+            </mat-checkbox>
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.systemDefault"
+              (ngModelChange)="store.updateTab(tab.id, { systemDefault: $event })"
+            >
+              System Default
+            </mat-checkbox>
+            <button
+              mat-button
+              type="button"
+              color="primary"
+              [disabled]="!canEditTab(tab)"
+              (click)="store.addSubTab(tab.id)"
+            >
+              + Sub-tab
+            </button>
+          </div>
+
+          <!-- Module tab configuration -->
+          <div class="deb-tab-module">
+            <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
+              <mat-label>Consumer Module Name (Optional)</mat-label>
+              <input
+                matInput
+                placeholder="e.g. documents-view"
+                [disabled]="!canEditTab(tab)"
+                [ngModel]="tab.moduleName"
+                (ngModelChange)="store.updateTab(tab.id, { moduleName: $event || undefined })"
+              />
+            </mat-form-field>
+          </div>
+
+          <!-- Sub-tabs recursive render (Level 2) -->
+          @if (tab.children && tab.children.length > 0) {
+            <div class="deb-subtabs">
+              <span class="deb-subtabs__title">Sub-tabs:</span>
+              @for (sub of tab.children; track sub.id) {
+                <div class="deb-tabs__row deb-subtab-row" [attr.data-testid]="'subtab-row-' + sub.id">
+                  <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
+                    <mat-label>{{ sub.id }}</mat-label>
+                    <input
+                      matInput
+                      [disabled]="!canEditTab(sub)"
+                      [ngModel]="tabLabel(sub)"
+                      (ngModelChange)="store.setTabLabel(sub.id, lang(), $event)"
+                    />
+                  </mat-form-field>
+                  <button
+                    mat-icon-button
+                    type="button"
+                    color="warn"
+                    [disabled]="!canEditTab(sub)"
+                    (click)="store.removeTab(sub.id)"
+                    matTooltip="Remove sub-tab"
+                  >
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                </div>
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
   `, isInline: true, styles: [".deb-tabs__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.deb-tab-card{border:1px solid var(--deb-border, #e5e7eb);border-radius:8px;padding:10px;margin-bottom:10px;background:var(--deb-bg-surface, #ffffff)}.deb-tab-card--system{border-left:4px solid var(--deb-accent, #6366f1)}.deb-tabs__row{display:flex;align-items:center;gap:4px}.deb-tab-settings{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:8px;font-size:13px}.deb-tab-module{margin-top:8px}.deb-subtabs{margin-top:8px;padding-left:16px;border-left:2px dashed var(--deb-border, #e5e7eb)}.deb-subtabs__title{font-size:12px;font-weight:600;color:var(--deb-muted, #6b7280)}.deb-subtab-row{margin-top:6px}.deb-grow{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: 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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabManagerComponent, decorators: [{
@@ -2295,148 +2383,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatInputModule,
                         MatSlideToggleModule,
                         MatTooltipModule,
-                    ], template: `
-    <div class="deb-tabs">
-      <div class="deb-tabs__head">
-        <span class="deb-section-title">Tabs Manager</span>
-        <button mat-stroked-button type="button" (click)="store.addTab()">
-          <mat-icon>add</mat-icon> Add Tab
-        </button>
-      </div>
-
-      @if (store.tabs().length === 0) {
-        <p class="deb-hint">No tabs — all fields render in a single section.</p>
-      }
-
-      @for (tab of store.tabs(); track tab.id; let i = $index, count = $count) {
-        <div class="deb-tab-card" [class.deb-tab-card--system]="tab.systemDefault">
-          <div class="deb-tabs__row" [attr.data-testid]="'tab-row-' + tab.id">
-            <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
-              <mat-label>{{ tab.id }} {{ tab.systemDefault ? '(System)' : '' }}</mat-label>
-              <input
-                matInput
-                [disabled]="!canEditTab(tab)"
-                [ngModel]="tabLabel(tab)"
-                (ngModelChange)="store.setTabLabel(tab.id, lang(), $event)"
-              />
-            </mat-form-field>
-            <button
-              mat-icon-button
-              type="button"
-              [disabled]="i === 0 || !canEditTab(tab)"
-              (click)="store.moveTab(tab.id, -1)"
-              matTooltip="Move up"
-            >
-              <mat-icon>arrow_upward</mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              type="button"
-              [disabled]="i === count - 1 || !canEditTab(tab)"
-              (click)="store.moveTab(tab.id, 1)"
-              matTooltip="Move down"
-            >
-              <mat-icon>arrow_downward</mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              type="button"
-              color="warn"
-              [disabled]="!canEditTab(tab)"
-              (click)="store.removeTab(tab.id)"
-              matTooltip="Remove tab"
-            >
-              <mat-icon>delete</mat-icon>
-            </button>
-          </div>
-
-          <!-- Tab settings row -->
-          <div class="deb-tab-settings">
-            <mat-checkbox
-              [disabled]="!canEditTab(tab)"
-              [ngModel]="tab.flatData"
-              (ngModelChange)="store.updateTab(tab.id, { flatData: $event })"
-            >
-              Flat Data
-            </mat-checkbox>
-            <mat-checkbox
-              [disabled]="!canEditTab(tab)"
-              [ngModel]="tab.isPrimaryTab"
-              (ngModelChange)="$event ? store.setPrimaryTab(tab.id) : store.updateTab(tab.id, { isPrimaryTab: false })"
-            >
-              Primary Tab
-            </mat-checkbox>
-            <mat-checkbox
-              [disabled]="!canEditTab(tab)"
-              [ngModel]="tab.maskData"
-              (ngModelChange)="store.updateTab(tab.id, { maskData: $event })"
-            >
-              Mask Tab Data
-            </mat-checkbox>
-            <mat-checkbox
-              [disabled]="!canEditTab(tab)"
-              [ngModel]="tab.systemDefault"
-              (ngModelChange)="store.updateTab(tab.id, { systemDefault: $event })"
-            >
-              System Default
-            </mat-checkbox>
-            <button
-              mat-button
-              type="button"
-              color="primary"
-              [disabled]="!canEditTab(tab)"
-              (click)="store.addSubTab(tab.id)"
-            >
-              + Sub-tab
-            </button>
-          </div>
-
-          <!-- Module tab configuration -->
-          <div class="deb-tab-module">
-            <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
-              <mat-label>Consumer Module Name (Optional)</mat-label>
-              <input
-                matInput
-                placeholder="e.g. documents-view"
-                [disabled]="!canEditTab(tab)"
-                [ngModel]="tab.moduleName"
-                (ngModelChange)="store.updateTab(tab.id, { moduleName: $event || undefined })"
-              />
-            </mat-form-field>
-          </div>
-
-          <!-- Sub-tabs recursive render (Level 2) -->
-          @if (tab.children && tab.children.length > 0) {
-            <div class="deb-subtabs">
-              <span class="deb-subtabs__title">Sub-tabs:</span>
-              @for (sub of tab.children; track sub.id) {
-                <div class="deb-tabs__row deb-subtab-row" [attr.data-testid]="'subtab-row-' + sub.id">
-                  <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
-                    <mat-label>{{ sub.id }}</mat-label>
-                    <input
-                      matInput
-                      [disabled]="!canEditTab(sub)"
-                      [ngModel]="tabLabel(sub)"
-                      (ngModelChange)="store.setTabLabel(sub.id, lang(), $event)"
-                    />
-                  </mat-form-field>
-                  <button
-                    mat-icon-button
-                    type="button"
-                    color="warn"
-                    [disabled]="!canEditTab(sub)"
-                    (click)="store.removeTab(sub.id)"
-                    matTooltip="Remove sub-tab"
-                  >
-                    <mat-icon>delete</mat-icon>
-                  </button>
-                </div>
-              }
-            </div>
-          }
-        </div>
-      }
-    </div>
+                    ], template: `
+    <div class="deb-tabs">
+      <div class="deb-tabs__head">
+        <span class="deb-section-title">Tabs Manager</span>
+        <button mat-stroked-button type="button" (click)="store.addTab()">
+          <mat-icon>add</mat-icon> Add Tab
+        </button>
+      </div>
+
+      @if (store.tabs().length === 0) {
+        <p class="deb-hint">No tabs — all fields render in a single section.</p>
+      }
+
+      @for (tab of store.tabs(); track tab.id; let i = $index, count = $count) {
+        <div class="deb-tab-card" [class.deb-tab-card--system]="tab.systemDefault">
+          <div class="deb-tabs__row" [attr.data-testid]="'tab-row-' + tab.id">
+            <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
+              <mat-label>{{ tab.id }} {{ tab.systemDefault ? '(System)' : '' }}</mat-label>
+              <input
+                matInput
+                [disabled]="!canEditTab(tab)"
+                [ngModel]="tabLabel(tab)"
+                (ngModelChange)="store.setTabLabel(tab.id, lang(), $event)"
+              />
+            </mat-form-field>
+            <button
+              mat-icon-button
+              type="button"
+              [disabled]="i === 0 || !canEditTab(tab)"
+              (click)="store.moveTab(tab.id, -1)"
+              matTooltip="Move up"
+            >
+              <mat-icon>arrow_upward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              [disabled]="i === count - 1 || !canEditTab(tab)"
+              (click)="store.moveTab(tab.id, 1)"
+              matTooltip="Move down"
+            >
+              <mat-icon>arrow_downward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              color="warn"
+              [disabled]="!canEditTab(tab)"
+              (click)="store.removeTab(tab.id)"
+              matTooltip="Remove tab"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+
+          <!-- Tab settings row -->
+          <div class="deb-tab-settings">
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.flatData"
+              (ngModelChange)="store.updateTab(tab.id, { flatData: $event })"
+            >
+              Flat Data
+            </mat-checkbox>
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.isPrimaryTab"
+              (ngModelChange)="$event ? store.setPrimaryTab(tab.id) : store.updateTab(tab.id, { isPrimaryTab: false })"
+            >
+              Primary Tab
+            </mat-checkbox>
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.maskData"
+              (ngModelChange)="store.updateTab(tab.id, { maskData: $event })"
+            >
+              Mask Tab Data
+            </mat-checkbox>
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.systemDefault"
+              (ngModelChange)="store.updateTab(tab.id, { systemDefault: $event })"
+            >
+              System Default
+            </mat-checkbox>
+            <button
+              mat-button
+              type="button"
+              color="primary"
+              [disabled]="!canEditTab(tab)"
+              (click)="store.addSubTab(tab.id)"
+            >
+              + Sub-tab
+            </button>
+          </div>
+
+          <!-- Module tab configuration -->
+          <div class="deb-tab-module">
+            <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
+              <mat-label>Consumer Module Name (Optional)</mat-label>
+              <input
+                matInput
+                placeholder="e.g. documents-view"
+                [disabled]="!canEditTab(tab)"
+                [ngModel]="tab.moduleName"
+                (ngModelChange)="store.updateTab(tab.id, { moduleName: $event || undefined })"
+              />
+            </mat-form-field>
+          </div>
+
+          <!-- Sub-tabs recursive render (Level 2) -->
+          @if (tab.children && tab.children.length > 0) {
+            <div class="deb-subtabs">
+              <span class="deb-subtabs__title">Sub-tabs:</span>
+              @for (sub of tab.children; track sub.id) {
+                <div class="deb-tabs__row deb-subtab-row" [attr.data-testid]="'subtab-row-' + sub.id">
+                  <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
+                    <mat-label>{{ sub.id }}</mat-label>
+                    <input
+                      matInput
+                      [disabled]="!canEditTab(sub)"
+                      [ngModel]="tabLabel(sub)"
+                      (ngModelChange)="store.setTabLabel(sub.id, lang(), $event)"
+                    />
+                  </mat-form-field>
+                  <button
+                    mat-icon-button
+                    type="button"
+                    color="warn"
+                    [disabled]="!canEditTab(sub)"
+                    (click)="store.removeTab(sub.id)"
+                    matTooltip="Remove sub-tab"
+                  >
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                </div>
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
   `, styles: [".deb-tabs__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.deb-tab-card{border:1px solid var(--deb-border, #e5e7eb);border-radius:8px;padding:10px;margin-bottom:10px;background:var(--deb-bg-surface, #ffffff)}.deb-tab-card--system{border-left:4px solid var(--deb-accent, #6366f1)}.deb-tabs__row{display:flex;align-items:center;gap:4px}.deb-tab-settings{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:8px;font-size:13px}.deb-tab-module{margin-top:8px}.deb-subtabs{margin-top:8px;padding-left:16px;border-left:2px dashed var(--deb-border, #e5e7eb)}.deb-subtabs__title{font-size:12px;font-weight:600;color:var(--deb-muted, #6b7280)}.deb-subtab-row{margin-top:6px}.deb-grow{flex:1}\n"] }]
         }] });
 
@@ -2686,6 +2774,12 @@ class EntityBuilderComponent {
     languages = ['en'];
     /** Optional role list — enables multi-select role pickers for RBAC instead of free text. */
     availableRoles = [];
+    /**
+     * Roles of the person using the builder. Distinct from `availableRoles`, which is the
+     * vocabulary a schema may reference. Passed to the `SYSTEM_DEFAULT_CAN_EDIT` predicate so
+     * it can decide whether this user may edit system-default tabs.
+     */
+    userRoles = [];
     /** Optional common-module definitions for module tabs; defaults to the built-in list from core. */
     commonModules = COMMON_MODULES;
     /** Emitted on every change to the working config. */
@@ -2708,6 +2802,9 @@ class EntityBuilderComponent {
             if (!this.languages.includes(active))
                 this.store.setActiveLanguage(this.languages[0]);
         }
+        if (changes['userRoles']) {
+            this.store.setUserRoles(this.userRoles);
+        }
     }
     // ─── Field canvas ─────────────────────────────────────────────────────────
     onDrop(event) {
@@ -2753,7 +2850,7 @@ class EntityBuilderComponent {
         this.store.setPermission(action, roles);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: "config", languages: "languages", availableRoles: "availableRoles", commonModules: "commonModules" }, outputs: { configChange: "configChange", save: "save" }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\r\n  <mat-icon>dashboard_customize</mat-icon>\r\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\r\n  <span class=\"deb-spacer\"></span>\r\n\r\n  @if (store.problems().length) {\r\n    <button\r\n      mat-button\r\n      type=\"button\"\r\n      class=\"deb-problems\"\r\n      [class.deb-problems--error]=\"!store.isValid()\"\r\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\r\n    >\r\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\r\n      {{ store.errors().length }} / {{ store.problems().length }}\r\n    </button>\r\n  }\r\n\r\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\r\n    <mat-icon>content_copy</mat-icon> Copy JSON\r\n  </button>\r\n  <button mat-flat-button color=\"accent\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\r\n    <mat-icon>save</mat-icon> Save\r\n  </button>\r\n</mat-toolbar>\r\n\r\n<div class=\"deb-body\">\r\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\r\n  <div class=\"deb-col deb-col--left\">\r\n    <mat-card>\r\n      <mat-card-content>\r\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n          <mat-label>Entity name</mat-label>\r\n          <input\r\n            matInput\r\n            [ngModel]=\"store.config().entity\"\r\n            (ngModelChange)=\"store.setEntityName($event)\"\r\n            placeholder=\"e.g. clients\"\r\n          />\r\n        </mat-form-field>\r\n\r\n        <div class=\"deb-row\">\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\r\n            <mat-label>Editing language</mat-label>\r\n            <mat-select\r\n              [ngModel]=\"store.activeLanguage()\"\r\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\r\n            >\r\n              @for (l of languages; track l) {\r\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\r\n              }\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <mat-slide-toggle\r\n          [ngModel]=\"store.config().maskData ?? false\"\r\n          (ngModelChange)=\"store.setMaskData($event)\"\r\n        >Mask this entity (RBAC)</mat-slide-toggle>\r\n\r\n        <mat-expansion-panel class=\"deb-rbac\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>Permissions</mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          @for (action of rbacActions; track action) {\r\n            @if (availableRoles.length) {\r\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n                <mat-label>{{ action }} roles</mat-label>\r\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\r\n                  @for (role of availableRoles; track role) {\r\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\r\n                  }\r\n                </mat-select>\r\n              </mat-form-field>\r\n            } @else {\r\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n                <mat-label>{{ action }} roles (comma-separated)</mat-label>\r\n                <input\r\n                  matInput\r\n                  [ngModel]=\"rolesFor(action).join(', ')\"\r\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\r\n                />\r\n              </mat-form-field>\r\n            }\r\n          }\r\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\r\n        </mat-expansion-panel>\r\n      </mat-card-content>\r\n    </mat-card>\r\n\r\n    <mat-card>\r\n      <mat-card-header><mat-card-title>Add field</mat-card-title></mat-card-header>\r\n      <mat-card-content>\r\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\r\n      </mat-card-content>\r\n    </mat-card>\r\n\r\n    <mat-card>\r\n      <mat-card-content>\r\n        <ngx-tab-manager></ngx-tab-manager>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </div>\r\n\r\n  <!-- \u2500\u2500\u2500 Center: field canvas \u2500\u2500\u2500 -->\r\n  <div class=\"deb-col deb-col--center\">\r\n    <ngx-entity-builder-canvas />\r\n  </div>\r\n\r\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\r\n  <div class=\"deb-col deb-col--right\">\r\n    <mat-card>\r\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></mat-card-header>\r\n      <mat-card-content>\r\n        <ngx-field-inspector></ngx-field-inspector>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Footer: JSON + optional live preview \u2500\u2500\u2500 -->\r\n<div class=\"deb-footer\">\r\n  <mat-expansion-panel>\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;Config JSON</mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    <pre class=\"deb-json\">{{ json }}</pre>\r\n  </mat-expansion-panel>\r\n\r\n  <div class=\"deb-preview-slot\">\r\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#0f172a}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px}@media (max-width: 1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i10.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i11.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FieldPaletteComponent, selector: "ngx-field-palette", outputs: ["pick"] }, { kind: "component", type: TabManagerComponent, selector: "ngx-tab-manager" }, { kind: "component", type: FieldInspectorComponent, selector: "ngx-field-inspector" }, { kind: "component", type: EntityBuilderCanvasComponent, selector: "ngx-entity-builder-canvas" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: "config", languages: "languages", availableRoles: "availableRoles", userRoles: "userRoles", commonModules: "commonModules" }, outputs: { configChange: "configChange", save: "save" }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\n  <span class=\"deb-spacer\"></span>\n\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\n  }\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\n    <mat-icon>content_copy</mat-icon> Copy JSON\n  </button>\n  <button mat-flat-button color=\"accent\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n    <mat-icon>save</mat-icon> Save\n  </button>\n</mat-toolbar>\n\n<div class=\"deb-body\">\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--left\">\n    <mat-card>\n      <mat-card-content>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>Entity name</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            placeholder=\"e.g. clients\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>Editing language</mat-label>\n            <mat-select\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <mat-slide-toggle\n          [ngModel]=\"store.config().maskData ?? false\"\n          (ngModelChange)=\"store.setMaskData($event)\"\n        >Mask this entity (RBAC)</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>Permissions</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles (comma-separated)</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"rolesFor(action).join(', ')\"\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\n                />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header><mat-card-title>Add field</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n  </div>\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--right\">\n    <mat-card>\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: JSON + optional live preview \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;Config JSON</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#0f172a}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px}@media (max-width: 1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i10.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i11.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FieldPaletteComponent, selector: "ngx-field-palette", outputs: ["pick"] }, { kind: "component", type: TabManagerComponent, selector: "ngx-tab-manager" }, { kind: "component", type: FieldInspectorComponent, selector: "ngx-field-inspector" }, { kind: "component", type: EntityBuilderCanvasComponent, selector: "ngx-entity-builder-canvas" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityBuilderComponent, decorators: [{
             type: Component,
@@ -2775,13 +2872,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         TabManagerComponent,
                         FieldInspectorComponent,
                         EntityBuilderCanvasComponent,
-                    ], template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\r\n  <mat-icon>dashboard_customize</mat-icon>\r\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\r\n  <span class=\"deb-spacer\"></span>\r\n\r\n  @if (store.problems().length) {\r\n    <button\r\n      mat-button\r\n      type=\"button\"\r\n      class=\"deb-problems\"\r\n      [class.deb-problems--error]=\"!store.isValid()\"\r\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\r\n    >\r\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\r\n      {{ store.errors().length }} / {{ store.problems().length }}\r\n    </button>\r\n  }\r\n\r\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\r\n    <mat-icon>content_copy</mat-icon> Copy JSON\r\n  </button>\r\n  <button mat-flat-button color=\"accent\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\r\n    <mat-icon>save</mat-icon> Save\r\n  </button>\r\n</mat-toolbar>\r\n\r\n<div class=\"deb-body\">\r\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\r\n  <div class=\"deb-col deb-col--left\">\r\n    <mat-card>\r\n      <mat-card-content>\r\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n          <mat-label>Entity name</mat-label>\r\n          <input\r\n            matInput\r\n            [ngModel]=\"store.config().entity\"\r\n            (ngModelChange)=\"store.setEntityName($event)\"\r\n            placeholder=\"e.g. clients\"\r\n          />\r\n        </mat-form-field>\r\n\r\n        <div class=\"deb-row\">\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\r\n            <mat-label>Editing language</mat-label>\r\n            <mat-select\r\n              [ngModel]=\"store.activeLanguage()\"\r\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\r\n            >\r\n              @for (l of languages; track l) {\r\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\r\n              }\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <mat-slide-toggle\r\n          [ngModel]=\"store.config().maskData ?? false\"\r\n          (ngModelChange)=\"store.setMaskData($event)\"\r\n        >Mask this entity (RBAC)</mat-slide-toggle>\r\n\r\n        <mat-expansion-panel class=\"deb-rbac\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>Permissions</mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          @for (action of rbacActions; track action) {\r\n            @if (availableRoles.length) {\r\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n                <mat-label>{{ action }} roles</mat-label>\r\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\r\n                  @for (role of availableRoles; track role) {\r\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\r\n                  }\r\n                </mat-select>\r\n              </mat-form-field>\r\n            } @else {\r\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n                <mat-label>{{ action }} roles (comma-separated)</mat-label>\r\n                <input\r\n                  matInput\r\n                  [ngModel]=\"rolesFor(action).join(', ')\"\r\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\r\n                />\r\n              </mat-form-field>\r\n            }\r\n          }\r\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\r\n        </mat-expansion-panel>\r\n      </mat-card-content>\r\n    </mat-card>\r\n\r\n    <mat-card>\r\n      <mat-card-header><mat-card-title>Add field</mat-card-title></mat-card-header>\r\n      <mat-card-content>\r\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\r\n      </mat-card-content>\r\n    </mat-card>\r\n\r\n    <mat-card>\r\n      <mat-card-content>\r\n        <ngx-tab-manager></ngx-tab-manager>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </div>\r\n\r\n  <!-- \u2500\u2500\u2500 Center: field canvas \u2500\u2500\u2500 -->\r\n  <div class=\"deb-col deb-col--center\">\r\n    <ngx-entity-builder-canvas />\r\n  </div>\r\n\r\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\r\n  <div class=\"deb-col deb-col--right\">\r\n    <mat-card>\r\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></mat-card-header>\r\n      <mat-card-content>\r\n        <ngx-field-inspector></ngx-field-inspector>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Footer: JSON + optional live preview \u2500\u2500\u2500 -->\r\n<div class=\"deb-footer\">\r\n  <mat-expansion-panel>\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;Config JSON</mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    <pre class=\"deb-json\">{{ json }}</pre>\r\n  </mat-expansion-panel>\r\n\r\n  <div class=\"deb-preview-slot\">\r\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#0f172a}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px}@media (max-width: 1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}\n"] }]
+                    ], template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\n  <span class=\"deb-spacer\"></span>\n\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\n  }\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\n    <mat-icon>content_copy</mat-icon> Copy JSON\n  </button>\n  <button mat-flat-button color=\"accent\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n    <mat-icon>save</mat-icon> Save\n  </button>\n</mat-toolbar>\n\n<div class=\"deb-body\">\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--left\">\n    <mat-card>\n      <mat-card-content>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>Entity name</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            placeholder=\"e.g. clients\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>Editing language</mat-label>\n            <mat-select\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <mat-slide-toggle\n          [ngModel]=\"store.config().maskData ?? false\"\n          (ngModelChange)=\"store.setMaskData($event)\"\n        >Mask this entity (RBAC)</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>Permissions</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles (comma-separated)</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"rolesFor(action).join(', ')\"\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\n                />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header><mat-card-title>Add field</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n  </div>\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--right\">\n    <mat-card>\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: JSON + optional live preview \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;Config JSON</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#0f172a}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px}@media (max-width: 1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], languages: [{
                 type: Input
             }], availableRoles: [{
                 type: Input
+            }], userRoles: [{
+                type: Input
             }], commonModules: [{
                 type: Input
             }], configChange: [{
@@ -2790,121 +2889,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-/**
- * ConnectionSourceConfigComponent — allows configuring connection source settings
- * for an entity or field (Phase 7.2).
- */
-class ConnectionSourceConfigComponent {
-    store = inject(BuilderStore);
-    field = computed(() => this.store.selectedField());
-    connectionSourceEntity(field) {
-        return field.connectionSource?.entity ?? '';
-    }
-    setConnectionSourceEntity(field, entity) {
-        const trimmed = entity.trim();
-        const existing = field.connectionSource ?? {};
-        if (!trimmed && !existing.targetField) {
-            this.store.updateField(field.id, { connectionSource: undefined });
-        }
-        else {
-            this.store.updateField(field.id, {
-                connectionSource: { ...existing, entity: trimmed },
-            });
-        }
-    }
-    connectionTargetField(field) {
-        return field.connectionSource?.targetField ?? '';
-    }
-    setConnectionTargetField(field, targetField) {
-        const trimmed = targetField.trim();
-        const existing = field.connectionSource ?? {};
-        if (!trimmed && !existing.entity) {
-            this.store.updateField(field.id, { connectionSource: undefined });
-        }
-        else {
-            this.store.updateField(field.id, {
-                connectionSource: { ...existing, targetField: trimmed },
-            });
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionSourceConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ConnectionSourceConfigComponent, isStandalone: true, selector: "ngx-connection-source-config", ngImport: i0, template: `
-    @if (field(); as f) {
-      <div class="deb-connection-source">
-        <span class="deb-section-title">Connection Source</span>
-        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Source Entity</mat-label>
-          <input
-            matInput
-            data-testid="connection-source-entity"
-            [ngModel]="connectionSourceEntity(f)"
-            (ngModelChange)="setConnectionSourceEntity(f, $event)"
-            placeholder="e.g. organizations"
-          />
-        </mat-form-field>
-
-        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Target Field ID</mat-label>
-          <input
-            matInput
-            data-testid="connection-target-field"
-            [ngModel]="connectionTargetField(f)"
-            (ngModelChange)="setConnectionTargetField(f, $event)"
-            placeholder="e.g. companyId"
-          />
-        </mat-form-field>
-      </div>
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: 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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionSourceConfigComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngx-connection-source-config',
-                    standalone: true,
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule,
-                    ],
-                    template: `
-    @if (field(); as f) {
-      <div class="deb-connection-source">
-        <span class="deb-section-title">Connection Source</span>
-        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Source Entity</mat-label>
-          <input
-            matInput
-            data-testid="connection-source-entity"
-            [ngModel]="connectionSourceEntity(f)"
-            (ngModelChange)="setConnectionSourceEntity(f, $event)"
-            placeholder="e.g. organizations"
-          />
-        </mat-form-field>
-
-        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Target Field ID</mat-label>
-          <input
-            matInput
-            data-testid="connection-target-field"
-            [ngModel]="connectionTargetField(f)"
-            (ngModelChange)="setConnectionTargetField(f, $event)"
-            placeholder="e.g. companyId"
-          />
-        </mat-form-field>
-      </div>
-    }
-  `,
-                }]
-        }] });
-
 // Main component
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BuilderStore, ConnectionSourceConfigComponent, EntityBuilderCanvasComponent, EntityBuilderComponent, EntityBuilderTreeNodeComponent, EntityReferenceConfigComponent, FieldInspectorComponent, FieldPaletteComponent, FieldRulesListComponent, RuleFormComponent, SYSTEM_DEFAULT_CAN_EDIT, TabManagerComponent };
+export { BuilderStore, EntityBuilderCanvasComponent, EntityBuilderComponent, EntityBuilderTreeNodeComponent, EntityReferenceConfigComponent, FieldInspectorComponent, FieldPaletteComponent, FieldRulesListComponent, RuleFormComponent, TabManagerComponent };
 //# sourceMappingURL=ngx-dynamic-entity-builder.mjs.map