ngx-dynamic-entity-builder 1.9.1 → 1.11.0

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

@@ -1,28 +1,30 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, InjectionToken, inject, ChangeDetectionStrategy, Component, EventEmitter, Output, Input, effect, HostListener } from '@angular/core';
+import { signal, computed, Injectable, InjectionToken, inject, ChangeDetectionStrategy, Component, EventEmitter, Output, Input, effect, HostListener, ViewEncapsulation } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2$1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i3$1 from '@angular/material/checkbox';
+import * as i3$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4$3 from '@angular/material/expansion';
+import * as i4$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4$1 from '@angular/material/icon';
+import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/material/input';
+import * as i6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i8 from '@angular/material/select';
+import * as i8 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i7 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i9 from '@angular/material/slide-toggle';
+import * as i3$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i10 from '@angular/material/toolbar';
+import * as i11 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i4$2 from '@angular/material/tooltip';
+import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { collectFieldScopes, assignFieldRefs, normalizeConfigOptions, getFieldTypeMeta, createFieldConfig, labelToId, createFieldSnapshot, computeFieldDrift, toRefToken, humanizeId, findTab, fieldRefFor, parseFieldRef, refOf, resolveLabel, resolveOptionLabel, FIELD_TYPE_CATALOG, COMMON_MODULES } from '@dynamic-entity/core';
 export { FIELD_TYPE_CATALOG, createFieldConfig, getFieldTypeMeta, humanizeId } from '@dynamic-entity/core';
@@ -448,9 +450,7 @@ class BuilderStore {
         const id = this.uniqueId(prefix, this.allFieldIds(this._config().tabs));
         this.mutate(draft => {
             const field = createFieldConfig(type, id, draft.defaultLanguage ?? 'en');
-            const targetTab = targetTabId
-                ? this.flattenTabs(draft.tabs).find(t => t.id === targetTabId)
-                : draft.tabs[0];
+            const targetTab = targetTabId ? this.flattenTabs(draft.tabs).find(t => t.id === targetTabId) : draft.tabs[0];
             if (targetTab) {
                 targetTab.fields = targetTab.fields ?? [];
                 targetTab.fields.push(field);
@@ -512,8 +512,7 @@ class BuilderStore {
         // fields the two keys resolve to instead.
         const selectedKey = this._selectedFieldId();
         const tabsNow = this._config().tabs;
-        const wasSelected = !!selectedKey &&
-            this.findFieldInTabs(tabsNow, selectedKey) === this.findFieldInTabs(tabsNow, key);
+        const wasSelected = !!selectedKey && this.findFieldInTabs(tabsNow, selectedKey) === this.findFieldInTabs(tabsNow, key);
         this.mutate(draft => {
             const field = this.findFieldInTabs(draft.tabs, key);
             if (!field)
@@ -536,7 +535,7 @@ class BuilderStore {
                         // `source` names a field on the *linked* record, not this config — leave it.
                         f.autoPatch = {
                             ...f.autoPatch,
-                            mappings: f.autoPatch.mappings.map(m => m.target === oldId ? { ...m, target: newId } : m),
+                            mappings: f.autoPatch.mappings.map(m => (m.target === oldId ? { ...m, target: newId } : m)),
                         };
                     }
                     if (f.patchOnTrue) {
@@ -560,7 +559,7 @@ class BuilderStore {
         this._rules.update(rules => rules.map(rule => ({
             ...rule,
             fieldId: rule.fieldId === oldId ? newId : rule.fieldId,
-            targets: rule.targets.map(t => t.type === 'field' && t.id === oldId ? { ...t, id: newId } : t),
+            targets: rule.targets.map(t => (t.type === 'field' && t.id === oldId ? { ...t, id: newId } : t)),
         })));
         // `mutate` restamps `refererField`, so the key's last segment moves with the id. Without
         // this the selection points at a path nothing resolves to any more, and the inspector
@@ -688,14 +687,9 @@ class BuilderStore {
     /** Safe reorder for drag & drop within active tab or flat list */
     reorderField(fromIndex, toIndex, tabId) {
         this.mutate(draft => {
-            const targetTab = tabId
-                ? this.flattenTabs(draft.tabs).find(t => t.id === tabId)
-                : draft.tabs[0];
+            const targetTab = tabId ? this.flattenTabs(draft.tabs).find(t => t.id === tabId) : draft.tabs[0];
             const fields = targetTab?.fields ?? [];
-            if (fromIndex < 0 ||
-                toIndex < 0 ||
-                fromIndex >= fields.length ||
-                toIndex >= fields.length) {
+            if (fromIndex < 0 || toIndex < 0 || fromIndex >= fields.length || toIndex >= fields.length) {
                 return;
             }
             const [item] = fields.splice(fromIndex, 1);
@@ -756,6 +750,22 @@ class BuilderStore {
             field.placeholder = { ...(field.placeholder ?? {}), [language]: value };
         });
     }
+    /**
+     * Help text shown under the control, per language.
+     *
+     * Separate from the placeholder for the reason the schema keeps them separate: a
+     * placeholder vanishes the moment the user types, so anything they need *while* filling the
+     * field in cannot live there. An author with only a placeholder box to write in tends to
+     * put it there anyway.
+     */
+    setFieldHint(id, language, value) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, id);
+            if (!field)
+                return;
+            field.hint = { ...(field.hint ?? {}), [language]: value };
+        });
+    }
     // ─── Validators ─────────────────────────────────────────────────────────────
     toggleFlagValidator(id, validator, on) {
         this.mutate(draft => {
@@ -1335,7 +1345,7 @@ class BuilderStore {
         this._rules.update(rules => rules.map(rule => ({
             ...rule,
             fieldId: repoint(rule.fieldId) ?? rule.fieldId,
-            conditions: rule.conditions.map(c => c.compareToField ? { ...c, compareToField: repoint(c.compareToField) } : c),
+            conditions: rule.conditions.map(c => (c.compareToField ? { ...c, compareToField: repoint(c.compareToField) } : c)),
             targets: rule.targets.map(t => ({ ...t, id: repoint(t.id) ?? t.id })),
         })));
     }
@@ -1570,9 +1580,11 @@ const DEFAULT_BUILDER_TEXT = {
     undoTooltip: 'Undo (Ctrl+Z)',
     redo: 'Redo',
     redoTooltip: 'Redo (Ctrl+Shift+Z)',
-    issuesTooltip: '{count} issue(s) — hover items in the list',
+    issuesTooltip: '{count} issue(s) — open the list to see them',
+    issuesCount: '{errors} / {total}',
     copyJson: 'Copy JSON',
     save: 'Save',
+    saveBlockedTooltip: 'Fix the errors in the issue list before saving.',
     // Entity settings panel
     entityName: 'Entity name',
     entityNamePlaceholder: 'e.g. clients',
@@ -1585,6 +1597,17 @@ const DEFAULT_BUILDER_TEXT = {
     addField: 'Add field',
     fieldProperties: 'Field properties',
     configJson: 'Config JSON',
+    // Field palette
+    paletteSearchPlaceholder: 'Filter field types…',
+    paletteSearchLabel: 'Filter field types',
+    paletteSearchClear: 'Clear the filter',
+    paletteNoMatch: 'No field type matches "{query}".',
+    paletteGroupBasic: 'Basic',
+    paletteGroupChoice: 'Choice',
+    paletteGroupDateTime: 'Date & time',
+    paletteGroupRich: 'Rich & files',
+    paletteGroupStructure: 'Structure',
+    paletteGroupOther: 'Other',
     // Canvas
     fieldsHeading: 'Fields ({count})',
     canvasEmpty: 'No fields yet. Pick a type from Add field to get started.',
@@ -1610,8 +1633,29 @@ const DEFAULT_BUILDER_TEXT = {
     tabMoveHint: 'Moving the field rewrites its path and repoints the rules that named it.',
     labelInLanguage: 'Label ({language})',
     placeholderInLanguage: 'Placeholder ({language})',
+    hintInLanguage: 'Help text ({language})',
+    hintHint: 'An info icon beside the label, shown on hover and while the field has focus. Read out with the field.',
     defaultValue: 'Default value',
-    validation: 'Validation',
+    // Field inspector — section headings and the layout control.
+    // `validation` used to be the heading above the validator checkboxes; the inspector's
+    // sections now own their headings, so `sectionValidation` replaces it.
+    sectionBasics: 'Basics',
+    sectionLayout: 'Layout',
+    sectionValidation: 'Validation',
+    sectionOptions: 'Options',
+    sectionDisplay: 'Display',
+    sectionVisibility: 'Visibility',
+    sectionAutomation: 'Automation',
+    sectionRules: 'Rules',
+    sectionReference: 'Reference',
+    width: 'Width',
+    widthQuarter: '¼',
+    widthThird: '⅓',
+    widthHalf: '½',
+    widthTwoThirds: '⅔',
+    widthFull: 'Full',
+    widthHint: 'How much of the 12-column row this field takes. Fields sharing a row sit side by side.',
+    widthOf: '{span} of 12 columns',
     // Field inspector — options
     dataSource: 'Data source',
     optionsComeFrom: 'Options come from',
@@ -2012,7 +2056,7 @@ class EntityReferenceConfigComponent {
         }
       </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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".deb-entity-ref{display:flex;flex-direction:column;gap:12px}.deb-option-row>mat-form-field{flex:1}.deb-error-hint{color:#b91c1c}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityReferenceConfigComponent, decorators: [{
             type: Component,
@@ -2184,7 +2228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         }
       </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"] }]
+  `, styles: [".deb-entity-ref{display:flex;flex-direction:column;gap:12px}.deb-option-row>mat-form-field{flex:1}.deb-error-hint{color:#b91c1c}\n"] }]
         }] });
 
 /**
@@ -2349,7 +2393,7 @@ class RuleFormComponent {
         <button mat-raised-button color="primary" type="button" (click)="save.emit(rule)">{{ ui.text('saveRule') }}</button>
       </div>
     </div>
-  `, isInline: true, styles: [".deb-rule-form{display:flex;flex-direction:column;gap:12px;background:#fafafa;border:1px solid #e0e0e0;border-radius:8px;padding:16px}.deb-rule-form__title{margin:0 0 8px;font-size:16px;font-weight:600}.deb-full{width:100%}.deb-rule-path{color:#888;font-size:11px;margin-left:6px}.deb-rule-section{display:flex;flex-direction:column;gap:8px}.deb-rule-section h4{margin:0;font-size:13px;font-weight:600;color:#555}.deb-rule-row{display:flex;gap:8px;align-items:center}.deb-rule-row>*{flex:1}.deb-rule-form__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".deb-rule-form{display:flex;flex-direction:column;gap:12px;background:#fafafa;border:1px solid #e0e0e0;border-radius:8px;padding:16px}.deb-rule-form__title{margin:0 0 8px;font-size:16px;font-weight:600}.deb-full{width:100%}.deb-rule-path{color:#888;font-size:11px;margin-left:6px}.deb-rule-section{display:flex;flex-direction:column;gap:8px}.deb-rule-section h4{margin:0;font-size:13px;font-weight:600;color:#555}.deb-rule-row{display:flex;gap:8px;align-items:center}.deb-rule-row>*{flex:1}.deb-rule-form__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RuleFormComponent, decorators: [{
             type: Component,
@@ -2529,6 +2573,7 @@ class FieldRulesListComponent {
           </div>
           <div class="deb-rule-item__actions">
             <mat-slide-toggle
+              color="primary"
               [checked]="rule.enabled"
               [matTooltip]="ui.text('toggleRule')"
               (change)="store.toggleRule(rule.id!, $event.checked)"
@@ -2576,7 +2621,7 @@ class FieldRulesListComponent {
         </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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: RuleFormComponent, selector: "ngx-rule-form", inputs: ["rule"], outputs: ["save", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".deb-rules{display:flex;flex-direction:column;gap:8px}.deb-rules__head{display:flex;align-items:center;justify-content:space-between}.deb-rule-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px}.deb-rule-item--off{opacity:.55}.deb-rule-item__body{display:flex;flex-direction:column;min-width:0}.deb-rule-item__summary{font-size:13px;font-weight:600;overflow-wrap:anywhere}.deb-rule-item__meta{font-size:11px;color:#6b7280}.deb-rule-item__actions{display:flex;align-items:center;flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: RuleFormComponent, selector: "ngx-rule-form", inputs: ["rule"], outputs: ["save", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldRulesListComponent, decorators: [{
             type: Component,
@@ -2613,6 +2658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           </div>
           <div class="deb-rule-item__actions">
             <mat-slide-toggle
+              color="primary"
               [checked]="rule.enabled"
               [matTooltip]="ui.text('toggleRule')"
               (change)="store.toggleRule(rule.id!, $event.checked)"
@@ -2746,6 +2792,7 @@ class ReferencedFieldConfigComponent {
         <div class="deb-row" style="justify-content: space-between; align-items: center; margin-bottom: 8px;">
           <span class="deb-section-title" style="margin:0;">{{ ui.text('referencedField') }}</span>
           <mat-slide-toggle
+            color="primary"
             data-testid="toggle-referenced"
             [ngModel]="f.isReferenced ?? false"
             (ngModelChange)="toggleReferenced(f, $event)"
@@ -2798,7 +2845,7 @@ class ReferencedFieldConfigComponent {
         }
       </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: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ReferencedFieldConfigComponent, decorators: [{
             type: Component,
@@ -2822,6 +2869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         <div class="deb-row" style="justify-content: space-between; align-items: center; margin-bottom: 8px;">
           <span class="deb-section-title" style="margin:0;">{{ ui.text('referencedField') }}</span>
           <mat-slide-toggle
+            color="primary"
             data-testid="toggle-referenced"
             [ngModel]="f.isReferenced ?? false"
             (ngModelChange)="toggleReferenced(f, $event)"
@@ -2890,9 +2938,57 @@ class FieldInspectorComponent {
         const f = this.field();
         return f ? getFieldTypeMeta(f.type) : undefined;
     }, ...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
+    /**
+     * The offered widths, as fractions of the 12-column row.
+     *
+     * Five steps rather than all twelve: a free 1–12 spinner is a layout system, and what an
+     * author actually wants is "these two side by side" or "this one across the row". The
+     * fractions that divide twelve evenly cover that, and anything finer stays authorable in
+     * the JSON for the rare case that needs it.
+     */
+    spanChoices = [
+        { span: 3, textKey: 'widthQuarter' },
+        { span: 4, textKey: 'widthThird' },
+        { span: 6, textKey: 'widthHalf' },
+        { span: 8, textKey: 'widthTwoThirds' },
+        { span: 12, textKey: 'widthFull' },
+    ];
     lang() {
         return this.store.activeLanguage();
     }
+    /**
+     * How many validators this field actually has, for the section's badge.
+     *
+     * `false` and an empty `custom: []` are both "not set" written the long way — a toggle
+     * switched off leaves the key behind — so neither counts. `0` does: `minLength: 0` is a
+     * value somebody typed.
+     */
+    validatorCount(field) {
+        return Object.values(field.validators ?? {}).filter(value => {
+            if (value === undefined || value === null || value === false)
+                return false;
+            return Array.isArray(value) ? value.length > 0 : true;
+        }).length;
+    }
+    /**
+     * How many display flags are set away from their default.
+     *
+     * `visibility` counts when it is *false* and the rest when they are true, because the badge
+     * is meant to say "something here is not the default" — counting `visibility: true` would
+     * put a 1 on every field in the config and tell the author nothing.
+     */
+    displayFlagCount(field) {
+        const flags = [
+            field.visibility === false,
+            field.table?.visible === true,
+            field.readonly === true,
+            field.disabled === true,
+            field.maskData === true,
+            field.criticalField === true,
+            field.showOnMinimize === true,
+        ];
+        return flags.filter(Boolean).length;
+    }
     toNum(value) {
         if (value === '' || value === null || value === undefined)
             return null;
@@ -2905,6 +3001,9 @@ class FieldInspectorComponent {
     placeholderValue(field) {
         return resolveLabel(field.placeholder, this.lang());
     }
+    hintValue(field) {
+        return resolveLabel(field.hint, this.lang());
+    }
     optionLabel(option) {
         return resolveOptionLabel(option, this.lang());
     }
@@ -3020,7 +3119,7 @@ class FieldInspectorComponent {
         return String(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FieldInspectorComponent, isStandalone: true, selector: "ngx-field-inspector", ngImport: i0, template: "@if (field(); as f) {\n  <div class=\"deb-inspector\">\n    <!-- Identity -->\n    <div class=\"deb-row\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ ui.text('fieldId') }}</mat-label>\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n        @if (store.hasManualId(f.id)) {\n          <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n        } @else {\n          <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</mat-hint>\n        }\n      </mat-form-field>\n      <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n    </div>\n\n    @if (tabOptions().length > 1) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('tab') }}</mat-label>\n        <mat-select data-testid=\"field-tab\" [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n          @for (tab of tabOptions(); track tab.id) {\n            <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n          }\n        </mat-select>\n        <mat-hint>{{ ui.text('tabMoveHint') }}</mat-hint>\n      </mat-form-field>\n    }\n\n    <!-- Localised text (active language) -->\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n      <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n      <input\n        matInput\n        data-testid=\"field-label\"\n        [ngModel]=\"labelValue(f)\"\n        (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), lang(), $event)\"\n      />\n    </mat-form-field>\n\n    @if (meta()?.supportsPlaceholder) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n        <input\n          matInput\n          [ngModel]=\"placeholderValue(f)\"\n          (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n        />\n      </mat-form-field>\n    }\n\n    @if (meta()?.supportsDefaultValue) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n        <input\n          matInput\n          [ngModel]=\"f.defaultValue ?? ''\"\n          (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n        />\n      </mat-form-field>\n    }\n\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\">{{ ui.text('validation') }}</span>\n        <div class=\"deb-toggles\">\n          @for (v of m.flagValidators; track v) {\n            <mat-checkbox\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\n              (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n              >{{ v }}</mat-checkbox\n            >\n          }\n        </div>\n        @for (v of m.paramValidators; track v) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ v }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [ngModel]=\"store.getParamValidator(f, v)\"\n              (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n            />\n          </mat-form-field>\n        }\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <mat-divider></mat-divider>\n      <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n        <mat-select\n          data-testid=\"data-source\"\n          [ngModel]=\"store.fieldDataSource(f)\"\n          (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n        >\n          <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n          <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n          <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    }\n\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>{{ ui.text('listName') }}</mat-label>\n        <input\n          matInput\n          data-testid=\"list-name\"\n          [ngModel]=\"f.listName ?? ''\"\n          (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n        />\n      </mat-form-field>\n      <p class=\"deb-hint\">\n        {{ ui.text('listNameHint') }}\n      </p>\n    }\n\n    <!-- Inline options -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\n      <div class=\"deb-row\" style=\"justify-content: space-between\">\n        <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(store.keyOf(f))\">\n          <mat-icon>add</mat-icon> {{ ui.text('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>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [attr.data-testid]=\"'option-' + $index\"\n              [ngModel]=\"optionLabel(opt)\"\n              (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n            />\n          </mat-form-field>\n          <button\n            mat-icon-button\n            type=\"button\"\n            color=\"warn\"\n            (click)=\"store.removeOption(store.keyOf(f), $index)\"\n            [matTooltip]=\"ui.text('removeOption')\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.options ?? []).length) {\n        <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Flags -->\n    <span class=\"deb-section-title\">{{ ui.text('display') }}</span>\n    <div class=\"deb-toggles\">\n      <mat-slide-toggle\n        [ngModel]=\"f.visibility ?? true\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n        >{{ ui.text('visible') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.table?.visible ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n        >{{ ui.text('tableColumn') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.readonly ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n        >{{ ui.text('readOnly') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.disabled ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n        >{{ ui.text('disabled') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.maskData ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n        >{{ ui.text('maskData') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        data-testid=\"toggle-critical\"\n        [ngModel]=\"f.criticalField ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n        [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n        >{{ ui.text('criticalField') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.showOnMinimize ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n        [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n        >{{ ui.text('showInSummary') }}</mat-slide-toggle\n      >\n    </div>\n\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\">{{ ui.text('showWhen') }}</span>\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n        <mat-icon>add</mat-icon> {{ ui.text('condition') }}\n      </button>\n    </div>\n    @for (entry of showWhenEntries(f); track entry.key) {\n      <div class=\"deb-option-row\" data-testid=\"option-row\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>{{ ui.text('watchedField') }}</mat-label>\n          <mat-select\n            data-testid=\"show-when-field\"\n            [ngModel]=\"entry.key\"\n            (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n          >\n            @for (option of optionsWith(entry.key); track option.value) {\n              <mat-option [value]=\"option.value\">\n                {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>{{ ui.text('equals') }}</mat-label>\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n        </mat-form-field>\n        <button\n          mat-icon-button\n          type=\"button\"\n          color=\"warn\"\n          [matTooltip]=\"ui.text('removeCondition')\"\n          (click)=\"removeShowWhen(f, entry.key)\"\n        >\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    }\n    @if (!showWhenEntries(f).length) {\n      <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n    }\n\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\">{{ ui.text('copyOnTrue') }}</span>\n        <button\n          mat-stroked-button\n          type=\"button\"\n          data-testid=\"add-patch-on-true\"\n          (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n        >\n          <mat-icon>add</mat-icon> {{ ui.text('mapping') }}\n        </button>\n      </div>\n      @for (mapping of f.patchOnTrue ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fromField') }}</mat-label>\n            <mat-select\n              data-testid=\"patch-on-true-from\"\n              [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n            >\n              @for (option of optionsWith(mapping.from); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('toField') }}</mat-label>\n            <mat-select\n              data-testid=\"patch-on-true-to\"\n              [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n            >\n              @for (option of optionsWith(mapping.to); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <button\n            mat-icon-button\n            type=\"button\"\n            color=\"warn\"\n            [matTooltip]=\"ui.text('removeMapping')\"\n            (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.patchOnTrue ?? []).length) {\n        <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n      }\n    }\n\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>{{ ui.text('inspectorEmpty') }}</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityReferenceConfigComponent, selector: "ngx-entity-reference-config" }, { kind: "component", type: FieldRulesListComponent, selector: "ngx-field-rules-list" }, { kind: "component", type: ReferencedFieldConfigComponent, selector: "ngx-referenced-field-config" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FieldInspectorComponent, isStandalone: true, selector: "ngx-field-inspector", ngImport: i0, template: "@if (field(); as f) {\n  <!--\n    The inspector, in collapsible sections.\n\n    It used to be one flat scroll of fifteen divider-separated blocks, so renaming a field\n    meant scrolling past every advanced setting a field has, and finding the rules list meant\n    scrolling past all of them.\n\n    What is open by default is what an author sets when they add a field \u2014 name it, size it,\n    mark it required, give a choice field its options. The advanced half starts closed, but\n    opens itself as soon as *this* field uses it: a field with two rules is not a field whose\n    rules are advanced, and hiding what is already configured is how a setting gets forgotten\n    about. A closed section still reports itself through the count in its heading.\n\n    `<details>` rather than mat-expansion-panel: the inspector already sits inside a card in a\n    scrolling rail, and a third level of Material elevation inside that read as noise.\n  -->\n  <div class=\"deb-inspector\">\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionBasics') }}\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <!-- Identity -->\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fieldId') }}</mat-label>\n            <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n            @if (store.hasManualId(f.id)) {\n              <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n            } @else {\n              <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</mat-hint>\n            }\n          </mat-form-field>\n          <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n        </div>\n\n        @if (tabOptions().length > 1) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('tab') }}</mat-label>\n            <mat-select data-testid=\"field-tab\" [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n              @for (tab of tabOptions(); track tab.id) {\n                <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n              }\n            </mat-select>\n            <mat-hint>{{ ui.text('tabMoveHint') }}</mat-hint>\n          </mat-form-field>\n        }\n\n        <!-- Localised text (active language) -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-label\"\n            [ngModel]=\"labelValue(f)\"\n            (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), lang(), $event)\"\n          />\n        </mat-form-field>\n\n        @if (meta()?.supportsPlaceholder) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"placeholderValue(f)\"\n              (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n            />\n          </mat-form-field>\n        }\n\n        <!--\n          Help text, offered on every field type \u2014 including the ones with no placeholder,\n          which are exactly the ones most likely to need explaining. Its hint says what it is\n          *for*, because the box above it is the one authors reach for by habit and a\n          placeholder is gone the moment somebody types.\n        -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('hintInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-hint\"\n            [ngModel]=\"hintValue(f)\"\n            (ngModelChange)=\"store.setFieldHint(store.keyOf(f), lang(), $event)\"\n          />\n          <mat-hint>{{ ui.text('hintHint') }}</mat-hint>\n        </mat-form-field>\n\n        @if (meta()?.supportsDefaultValue) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"f.defaultValue ?? ''\"\n              (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n            />\n          </mat-form-field>\n        }\n      </div>\n    </details>\n\n    <!--\n      Width.\n\n      `colSpan` has been in the schema and honoured by the renderer since the 12-column grid\n      existed, and the builder had no control for it \u2014 so every form authored here came out a\n      single-column ladder, and the only way to put two fields on one row was to hand-edit the\n      JSON. This is that control.\n    -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionLayout') }}\n        <span class=\"deb-inspector__count\" data-testid=\"layout-count\">{{ f.colSpan ?? 12 }}/12</span>\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <span class=\"deb-section-title\">{{ ui.text('width') }}</span>\n        <div class=\"deb-span-picker\" role=\"group\" [attr.aria-label]=\"ui.text('width')\">\n          @for (choice of spanChoices; track choice.span) {\n            <button\n              type=\"button\"\n              class=\"deb-span-picker__btn\"\n              [class.deb-span-picker__btn--active]=\"(f.colSpan ?? 12) === choice.span\"\n              [attr.data-testid]=\"'field-span-' + choice.span\"\n              [attr.aria-pressed]=\"(f.colSpan ?? 12) === choice.span\"\n              [matTooltip]=\"ui.text('widthOf', { span: choice.span })\"\n              (click)=\"store.updateField(store.keyOf(f), { colSpan: choice.span })\"\n            >\n              {{ ui.text(choice.textKey) }}\n            </button>\n          }\n        </div>\n        <p class=\"deb-hint\">{{ ui.text('widthHint') }}</p>\n      </div>\n    </details>\n\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length) {\n        <details class=\"deb-inspector__section\" open>\n          <summary class=\"deb-inspector__summary\">\n            {{ ui.text('sectionValidation') }}\n            @if (validatorCount(f); as count) {\n              <span class=\"deb-inspector__count\" data-testid=\"validation-count\">{{ count }}</span>\n            }\n            <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n          </summary>\n          <div class=\"deb-inspector__body\">\n            <div class=\"deb-toggles\">\n              @for (v of m.flagValidators; track v) {\n                <mat-checkbox\n                  color=\"primary\"\n                  [ngModel]=\"store.hasFlagValidator(f, v)\"\n                  (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n                  >{{ v }}</mat-checkbox\n                >\n              }\n            </div>\n            @for (v of m.paramValidators; track v) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ v }}</mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  [ngModel]=\"store.getParamValidator(f, v)\"\n                  (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n                />\n              </mat-form-field>\n            }\n          </div>\n        </details>\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionOptions') }}\n          @if ((f.options ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"options-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n            <mat-select\n              data-testid=\"data-source\"\n              [ngModel]=\"store.fieldDataSource(f)\"\n              (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n            >\n              <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n              <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n              <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Named lookup list -->\n          @if (store.fieldDataSource(f) === 'lookup') {\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n              <mat-label>{{ ui.text('listName') }}</mat-label>\n              <input\n                matInput\n                data-testid=\"list-name\"\n                [ngModel]=\"f.listName ?? ''\"\n                (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n              />\n            </mat-form-field>\n            <p class=\"deb-hint\">\n              {{ ui.text('listNameHint') }}\n            </p>\n          }\n\n          <!-- Inline options -->\n          @if (store.fieldDataSource(f) !== 'lookup') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n              <button\n                mat-stroked-button\n                type=\"button\"\n                data-testid=\"add-option\"\n                (click)=\"store.addOption(store.keyOf(f))\"\n              >\n                <mat-icon>add</mat-icon> {{ ui.text('option') }}\n              </button>\n            </div>\n            @for (opt of f.options ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <!-- One input: the displayed text is the stored value. -->\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n                  <input\n                    matInput\n                    [attr.data-testid]=\"'option-' + $index\"\n                    [ngModel]=\"optionLabel(opt)\"\n                    (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n                  />\n                </mat-form-field>\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  (click)=\"store.removeOption(store.keyOf(f), $index)\"\n                  [matTooltip]=\"ui.text('removeOption')\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.options ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Flags -->\n    <details class=\"deb-inspector__section\" [attr.open]=\"displayFlagCount(f) ? '' : null\">\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDisplay') }}\n        @if (displayFlagCount(f); as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"display-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <span class=\"deb-section-title\">{{ ui.text('display') }}</span>\n        <div class=\"deb-toggles\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.visibility ?? true\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n            >{{ ui.text('visible') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.table?.visible ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n            >{{ ui.text('tableColumn') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.readonly ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n            >{{ ui.text('readOnly') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.disabled ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n            >{{ ui.text('disabled') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.maskData ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n            >{{ ui.text('maskData') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            data-testid=\"toggle-critical\"\n            [ngModel]=\"f.criticalField ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n            [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n            >{{ ui.text('criticalField') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.showOnMinimize ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n            [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n            >{{ ui.text('showInSummary') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </details>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <details class=\"deb-inspector__section\" [attr.open]=\"showWhenEntries(f).length ? '' : null\">\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionVisibility') }}\n        @if (showWhenEntries(f).length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"visibility-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-row deb-row--split\">\n          <span class=\"deb-section-title\">{{ ui.text('showWhen') }}</span>\n          <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n            <mat-icon>add</mat-icon> {{ ui.text('condition') }}\n          </button>\n        </div>\n        @for (entry of showWhenEntries(f); track entry.key) {\n          <div class=\"deb-option-row\" data-testid=\"option-row\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('watchedField') }}</mat-label>\n              <mat-select\n                data-testid=\"show-when-field\"\n                [ngModel]=\"entry.key\"\n                (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n              >\n                @for (option of optionsWith(entry.key); track option.value) {\n                  <mat-option [value]=\"option.value\">\n                    {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('equals') }}</mat-label>\n              <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n            </mat-form-field>\n            <button\n              mat-icon-button\n              type=\"button\"\n              color=\"warn\"\n              [matTooltip]=\"ui.text('removeCondition')\"\n              (click)=\"removeShowWhen(f, entry.key)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        }\n        @if (!showWhenEntries(f).length) {\n          <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Entity reference, cascade, autoPatch, and patchOnTrue -->\n    @if (meta()?.isEntityRef || f.type === 'boolean' || f.type === 'checkbox') {\n      <details class=\"deb-inspector__section\" [attr.open]=\"meta()?.isEntityRef || (f.patchOnTrue ?? []).length ? '' : null\">\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionAutomation') }}\n          @if ((f.patchOnTrue ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"automation-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          @if (meta()?.isEntityRef) {\n            <ngx-entity-reference-config />\n          }\n\n          <!-- patchOnTrue (boolean/checkbox only) -->\n          @if (f.type === 'boolean' || f.type === 'checkbox') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('copyOnTrue') }}</span>\n              <button\n                mat-stroked-button\n                type=\"button\"\n                data-testid=\"add-patch-on-true\"\n                (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n              >\n                <mat-icon>add</mat-icon> {{ ui.text('mapping') }}\n              </button>\n            </div>\n            @for (mapping of f.patchOnTrue ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('fromField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-from\"\n                    [ngModel]=\"mapping.from\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.from); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('toField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-to\"\n                    [ngModel]=\"mapping.to\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.to); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  [matTooltip]=\"ui.text('removeMapping')\"\n                  (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.patchOnTrue ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Rules attached to this field -->\n    <details class=\"deb-inspector__section\" [attr.open]=\"store.rulesForSelectedField().length ? '' : null\">\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionRules') }}\n        @if (store.rulesForSelectedField().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"rules-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-field-rules-list />\n      </div>\n    </details>\n\n    <!-- Cross-entity field reference & drift management -->\n    <details class=\"deb-inspector__section\" [attr.open]=\"f.isReferenced || f.hasDrift ? '' : null\">\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionReference') }}\n        @if (f.isReferenced) {\n          <span class=\"deb-inspector__count\" data-testid=\"reference-count\">{{ f.referencedEntityKey }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-referenced-field-config />\n      </div>\n    </details>\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>{{ ui.text('inspectorEmpty') }}</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row>*{flex:1}.deb-row>.deb-chip{flex:0 0 auto}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityReferenceConfigComponent, selector: "ngx-entity-reference-config" }, { kind: "component", type: FieldRulesListComponent, selector: "ngx-field-rules-list" }, { kind: "component", type: ReferencedFieldConfigComponent, selector: "ngx-referenced-field-config" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldInspectorComponent, decorators: [{
             type: Component,
@@ -3038,53 +3137,188 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         EntityReferenceConfigComponent,
                         FieldRulesListComponent,
                         ReferencedFieldConfigComponent,
-                    ], template: "@if (field(); as f) {\n  <div class=\"deb-inspector\">\n    <!-- Identity -->\n    <div class=\"deb-row\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ ui.text('fieldId') }}</mat-label>\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n        @if (store.hasManualId(f.id)) {\n          <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n        } @else {\n          <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</mat-hint>\n        }\n      </mat-form-field>\n      <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n    </div>\n\n    @if (tabOptions().length > 1) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('tab') }}</mat-label>\n        <mat-select data-testid=\"field-tab\" [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n          @for (tab of tabOptions(); track tab.id) {\n            <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n          }\n        </mat-select>\n        <mat-hint>{{ ui.text('tabMoveHint') }}</mat-hint>\n      </mat-form-field>\n    }\n\n    <!-- Localised text (active language) -->\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n      <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n      <input\n        matInput\n        data-testid=\"field-label\"\n        [ngModel]=\"labelValue(f)\"\n        (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), lang(), $event)\"\n      />\n    </mat-form-field>\n\n    @if (meta()?.supportsPlaceholder) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n        <input\n          matInput\n          [ngModel]=\"placeholderValue(f)\"\n          (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n        />\n      </mat-form-field>\n    }\n\n    @if (meta()?.supportsDefaultValue) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n        <input\n          matInput\n          [ngModel]=\"f.defaultValue ?? ''\"\n          (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n        />\n      </mat-form-field>\n    }\n\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\">{{ ui.text('validation') }}</span>\n        <div class=\"deb-toggles\">\n          @for (v of m.flagValidators; track v) {\n            <mat-checkbox\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\n              (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n              >{{ v }}</mat-checkbox\n            >\n          }\n        </div>\n        @for (v of m.paramValidators; track v) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ v }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [ngModel]=\"store.getParamValidator(f, v)\"\n              (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n            />\n          </mat-form-field>\n        }\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <mat-divider></mat-divider>\n      <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n        <mat-select\n          data-testid=\"data-source\"\n          [ngModel]=\"store.fieldDataSource(f)\"\n          (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n        >\n          <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n          <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n          <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    }\n\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>{{ ui.text('listName') }}</mat-label>\n        <input\n          matInput\n          data-testid=\"list-name\"\n          [ngModel]=\"f.listName ?? ''\"\n          (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n        />\n      </mat-form-field>\n      <p class=\"deb-hint\">\n        {{ ui.text('listNameHint') }}\n      </p>\n    }\n\n    <!-- Inline options -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\n      <div class=\"deb-row\" style=\"justify-content: space-between\">\n        <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(store.keyOf(f))\">\n          <mat-icon>add</mat-icon> {{ ui.text('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>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [attr.data-testid]=\"'option-' + $index\"\n              [ngModel]=\"optionLabel(opt)\"\n              (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n            />\n          </mat-form-field>\n          <button\n            mat-icon-button\n            type=\"button\"\n            color=\"warn\"\n            (click)=\"store.removeOption(store.keyOf(f), $index)\"\n            [matTooltip]=\"ui.text('removeOption')\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.options ?? []).length) {\n        <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Flags -->\n    <span class=\"deb-section-title\">{{ ui.text('display') }}</span>\n    <div class=\"deb-toggles\">\n      <mat-slide-toggle\n        [ngModel]=\"f.visibility ?? true\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n        >{{ ui.text('visible') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.table?.visible ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n        >{{ ui.text('tableColumn') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.readonly ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n        >{{ ui.text('readOnly') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.disabled ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n        >{{ ui.text('disabled') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.maskData ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n        >{{ ui.text('maskData') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        data-testid=\"toggle-critical\"\n        [ngModel]=\"f.criticalField ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n        [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n        >{{ ui.text('criticalField') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.showOnMinimize ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n        [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n        >{{ ui.text('showInSummary') }}</mat-slide-toggle\n      >\n    </div>\n\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\">{{ ui.text('showWhen') }}</span>\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n        <mat-icon>add</mat-icon> {{ ui.text('condition') }}\n      </button>\n    </div>\n    @for (entry of showWhenEntries(f); track entry.key) {\n      <div class=\"deb-option-row\" data-testid=\"option-row\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>{{ ui.text('watchedField') }}</mat-label>\n          <mat-select\n            data-testid=\"show-when-field\"\n            [ngModel]=\"entry.key\"\n            (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n          >\n            @for (option of optionsWith(entry.key); track option.value) {\n              <mat-option [value]=\"option.value\">\n                {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>{{ ui.text('equals') }}</mat-label>\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n        </mat-form-field>\n        <button\n          mat-icon-button\n          type=\"button\"\n          color=\"warn\"\n          [matTooltip]=\"ui.text('removeCondition')\"\n          (click)=\"removeShowWhen(f, entry.key)\"\n        >\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    }\n    @if (!showWhenEntries(f).length) {\n      <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n    }\n\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\">{{ ui.text('copyOnTrue') }}</span>\n        <button\n          mat-stroked-button\n          type=\"button\"\n          data-testid=\"add-patch-on-true\"\n          (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n        >\n          <mat-icon>add</mat-icon> {{ ui.text('mapping') }}\n        </button>\n      </div>\n      @for (mapping of f.patchOnTrue ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fromField') }}</mat-label>\n            <mat-select\n              data-testid=\"patch-on-true-from\"\n              [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n            >\n              @for (option of optionsWith(mapping.from); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('toField') }}</mat-label>\n            <mat-select\n              data-testid=\"patch-on-true-to\"\n              [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n            >\n              @for (option of optionsWith(mapping.to); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <button\n            mat-icon-button\n            type=\"button\"\n            color=\"warn\"\n            [matTooltip]=\"ui.text('removeMapping')\"\n            (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.patchOnTrue ?? []).length) {\n        <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n      }\n    }\n\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>{{ ui.text('inspectorEmpty') }}</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row{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  <!--\n    The inspector, in collapsible sections.\n\n    It used to be one flat scroll of fifteen divider-separated blocks, so renaming a field\n    meant scrolling past every advanced setting a field has, and finding the rules list meant\n    scrolling past all of them.\n\n    What is open by default is what an author sets when they add a field \u2014 name it, size it,\n    mark it required, give a choice field its options. The advanced half starts closed, but\n    opens itself as soon as *this* field uses it: a field with two rules is not a field whose\n    rules are advanced, and hiding what is already configured is how a setting gets forgotten\n    about. A closed section still reports itself through the count in its heading.\n\n    `<details>` rather than mat-expansion-panel: the inspector already sits inside a card in a\n    scrolling rail, and a third level of Material elevation inside that read as noise.\n  -->\n  <div class=\"deb-inspector\">\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionBasics') }}\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <!-- Identity -->\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fieldId') }}</mat-label>\n            <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n            @if (store.hasManualId(f.id)) {\n              <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n            } @else {\n              <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</mat-hint>\n            }\n          </mat-form-field>\n          <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n        </div>\n\n        @if (tabOptions().length > 1) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('tab') }}</mat-label>\n            <mat-select data-testid=\"field-tab\" [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n              @for (tab of tabOptions(); track tab.id) {\n                <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n              }\n            </mat-select>\n            <mat-hint>{{ ui.text('tabMoveHint') }}</mat-hint>\n          </mat-form-field>\n        }\n\n        <!-- Localised text (active language) -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-label\"\n            [ngModel]=\"labelValue(f)\"\n            (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), lang(), $event)\"\n          />\n        </mat-form-field>\n\n        @if (meta()?.supportsPlaceholder) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"placeholderValue(f)\"\n              (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n            />\n          </mat-form-field>\n        }\n\n        <!--\n          Help text, offered on every field type \u2014 including the ones with no placeholder,\n          which are exactly the ones most likely to need explaining. Its hint says what it is\n          *for*, because the box above it is the one authors reach for by habit and a\n          placeholder is gone the moment somebody types.\n        -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('hintInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-hint\"\n            [ngModel]=\"hintValue(f)\"\n            (ngModelChange)=\"store.setFieldHint(store.keyOf(f), lang(), $event)\"\n          />\n          <mat-hint>{{ ui.text('hintHint') }}</mat-hint>\n        </mat-form-field>\n\n        @if (meta()?.supportsDefaultValue) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"f.defaultValue ?? ''\"\n              (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n            />\n          </mat-form-field>\n        }\n      </div>\n    </details>\n\n    <!--\n      Width.\n\n      `colSpan` has been in the schema and honoured by the renderer since the 12-column grid\n      existed, and the builder had no control for it \u2014 so every form authored here came out a\n      single-column ladder, and the only way to put two fields on one row was to hand-edit the\n      JSON. This is that control.\n    -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionLayout') }}\n        <span class=\"deb-inspector__count\" data-testid=\"layout-count\">{{ f.colSpan ?? 12 }}/12</span>\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <span class=\"deb-section-title\">{{ ui.text('width') }}</span>\n        <div class=\"deb-span-picker\" role=\"group\" [attr.aria-label]=\"ui.text('width')\">\n          @for (choice of spanChoices; track choice.span) {\n            <button\n              type=\"button\"\n              class=\"deb-span-picker__btn\"\n              [class.deb-span-picker__btn--active]=\"(f.colSpan ?? 12) === choice.span\"\n              [attr.data-testid]=\"'field-span-' + choice.span\"\n              [attr.aria-pressed]=\"(f.colSpan ?? 12) === choice.span\"\n              [matTooltip]=\"ui.text('widthOf', { span: choice.span })\"\n              (click)=\"store.updateField(store.keyOf(f), { colSpan: choice.span })\"\n            >\n              {{ ui.text(choice.textKey) }}\n            </button>\n          }\n        </div>\n        <p class=\"deb-hint\">{{ ui.text('widthHint') }}</p>\n      </div>\n    </details>\n\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length) {\n        <details class=\"deb-inspector__section\" open>\n          <summary class=\"deb-inspector__summary\">\n            {{ ui.text('sectionValidation') }}\n            @if (validatorCount(f); as count) {\n              <span class=\"deb-inspector__count\" data-testid=\"validation-count\">{{ count }}</span>\n            }\n            <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n          </summary>\n          <div class=\"deb-inspector__body\">\n            <div class=\"deb-toggles\">\n              @for (v of m.flagValidators; track v) {\n                <mat-checkbox\n                  color=\"primary\"\n                  [ngModel]=\"store.hasFlagValidator(f, v)\"\n                  (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n                  >{{ v }}</mat-checkbox\n                >\n              }\n            </div>\n            @for (v of m.paramValidators; track v) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ v }}</mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  [ngModel]=\"store.getParamValidator(f, v)\"\n                  (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n                />\n              </mat-form-field>\n            }\n          </div>\n        </details>\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionOptions') }}\n          @if ((f.options ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"options-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n            <mat-select\n              data-testid=\"data-source\"\n              [ngModel]=\"store.fieldDataSource(f)\"\n              (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n            >\n              <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n              <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n              <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Named lookup list -->\n          @if (store.fieldDataSource(f) === 'lookup') {\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n              <mat-label>{{ ui.text('listName') }}</mat-label>\n              <input\n                matInput\n                data-testid=\"list-name\"\n                [ngModel]=\"f.listName ?? ''\"\n                (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n              />\n            </mat-form-field>\n            <p class=\"deb-hint\">\n              {{ ui.text('listNameHint') }}\n            </p>\n          }\n\n          <!-- Inline options -->\n          @if (store.fieldDataSource(f) !== 'lookup') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n              <button\n                mat-stroked-button\n                type=\"button\"\n                data-testid=\"add-option\"\n                (click)=\"store.addOption(store.keyOf(f))\"\n              >\n                <mat-icon>add</mat-icon> {{ ui.text('option') }}\n              </button>\n            </div>\n            @for (opt of f.options ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <!-- One input: the displayed text is the stored value. -->\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n                  <input\n                    matInput\n                    [attr.data-testid]=\"'option-' + $index\"\n                    [ngModel]=\"optionLabel(opt)\"\n                    (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n                  />\n                </mat-form-field>\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  (click)=\"store.removeOption(store.keyOf(f), $index)\"\n                  [matTooltip]=\"ui.text('removeOption')\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.options ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Flags -->\n    <details class=\"deb-inspector__section\" [attr.open]=\"displayFlagCount(f) ? '' : null\">\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDisplay') }}\n        @if (displayFlagCount(f); as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"display-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <span class=\"deb-section-title\">{{ ui.text('display') }}</span>\n        <div class=\"deb-toggles\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.visibility ?? true\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n            >{{ ui.text('visible') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.table?.visible ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n            >{{ ui.text('tableColumn') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.readonly ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n            >{{ ui.text('readOnly') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.disabled ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n            >{{ ui.text('disabled') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.maskData ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n            >{{ ui.text('maskData') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            data-testid=\"toggle-critical\"\n            [ngModel]=\"f.criticalField ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n            [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n            >{{ ui.text('criticalField') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.showOnMinimize ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n            [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n            >{{ ui.text('showInSummary') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </details>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <details class=\"deb-inspector__section\" [attr.open]=\"showWhenEntries(f).length ? '' : null\">\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionVisibility') }}\n        @if (showWhenEntries(f).length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"visibility-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-row deb-row--split\">\n          <span class=\"deb-section-title\">{{ ui.text('showWhen') }}</span>\n          <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n            <mat-icon>add</mat-icon> {{ ui.text('condition') }}\n          </button>\n        </div>\n        @for (entry of showWhenEntries(f); track entry.key) {\n          <div class=\"deb-option-row\" data-testid=\"option-row\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('watchedField') }}</mat-label>\n              <mat-select\n                data-testid=\"show-when-field\"\n                [ngModel]=\"entry.key\"\n                (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n              >\n                @for (option of optionsWith(entry.key); track option.value) {\n                  <mat-option [value]=\"option.value\">\n                    {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('equals') }}</mat-label>\n              <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n            </mat-form-field>\n            <button\n              mat-icon-button\n              type=\"button\"\n              color=\"warn\"\n              [matTooltip]=\"ui.text('removeCondition')\"\n              (click)=\"removeShowWhen(f, entry.key)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        }\n        @if (!showWhenEntries(f).length) {\n          <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Entity reference, cascade, autoPatch, and patchOnTrue -->\n    @if (meta()?.isEntityRef || f.type === 'boolean' || f.type === 'checkbox') {\n      <details class=\"deb-inspector__section\" [attr.open]=\"meta()?.isEntityRef || (f.patchOnTrue ?? []).length ? '' : null\">\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionAutomation') }}\n          @if ((f.patchOnTrue ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"automation-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          @if (meta()?.isEntityRef) {\n            <ngx-entity-reference-config />\n          }\n\n          <!-- patchOnTrue (boolean/checkbox only) -->\n          @if (f.type === 'boolean' || f.type === 'checkbox') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('copyOnTrue') }}</span>\n              <button\n                mat-stroked-button\n                type=\"button\"\n                data-testid=\"add-patch-on-true\"\n                (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n              >\n                <mat-icon>add</mat-icon> {{ ui.text('mapping') }}\n              </button>\n            </div>\n            @for (mapping of f.patchOnTrue ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('fromField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-from\"\n                    [ngModel]=\"mapping.from\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.from); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('toField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-to\"\n                    [ngModel]=\"mapping.to\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.to); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  [matTooltip]=\"ui.text('removeMapping')\"\n                  (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.patchOnTrue ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Rules attached to this field -->\n    <details class=\"deb-inspector__section\" [attr.open]=\"store.rulesForSelectedField().length ? '' : null\">\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionRules') }}\n        @if (store.rulesForSelectedField().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"rules-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-field-rules-list />\n      </div>\n    </details>\n\n    <!-- Cross-entity field reference & drift management -->\n    <details class=\"deb-inspector__section\" [attr.open]=\"f.isReferenced || f.hasDrift ? '' : null\">\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionReference') }}\n        @if (f.isReferenced) {\n          <span class=\"deb-inspector__count\" data-testid=\"reference-count\">{{ f.referencedEntityKey }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-referenced-field-config />\n      </div>\n    </details>\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>{{ ui.text('inspectorEmpty') }}</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row>*{flex:1}.deb-row>.deb-chip{flex:0 0 auto}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-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"] }]
         }] });
 
 /**
- * FieldPaletteComponent — the list of buildable field types (Angular Material).
+ * Which drawer of the palette a field type belongs in.
+ *
+ * Kept here rather than on `FieldTypeMeta` in core: the catalogue is a data model shared with
+ * the renderer, and how a picker arranges twenty-two buttons is a decision about this panel.
+ * A type absent from the map — a consumer's custom type, or one added to core later — falls
+ * into `other`, so the palette degrades to "listed, just not filed" rather than dropping it.
+ */
+const PALETTE_GROUPS = ['basic', 'choice', 'datetime', 'rich', 'structure', 'other'];
+const GROUP_OF = {
+    text: 'basic',
+    textarea: 'basic',
+    number: 'basic',
+    currency: 'basic',
+    email: 'basic',
+    password: 'basic',
+    dropdown: 'choice',
+    radio: 'choice',
+    multiSelect: 'choice',
+    checkbox: 'choice',
+    boolean: 'choice',
+    'entity-ref': 'choice',
+    date: 'datetime',
+    datetime: 'datetime',
+    time: 'datetime',
+    monthYear: 'datetime',
+    markdown: 'rich',
+    image: 'rich',
+    file: 'rich',
+    group: 'structure',
+    array: 'structure',
+};
+/** The heading text key for each group, so the labels translate with the rest of the chrome. */
+const GROUP_TEXT_KEY = {
+    basic: 'paletteGroupBasic',
+    choice: 'paletteGroupChoice',
+    datetime: 'paletteGroupDateTime',
+    rich: 'paletteGroupRich',
+    structure: 'paletteGroupStructure',
+    other: 'paletteGroupOther',
+};
+/**
+ * FieldPaletteComponent — the list of buildable field types.
+ *
+ * Two things changed the day this stopped being a flat grid of twenty-two buttons. The labels
+ * were clipped mid-word — "Boolean Toggl", "Entity Referen", "File Attachmen" — because the
+ * grid forced two equal columns and the button refused to wrap, so a third of the palette
+ * could not be read. And with no order to them, finding "Month & Year" meant scanning the
+ * whole list: the grouping and the filter are what make a palette this size navigable.
  */
 class FieldPaletteComponent {
+    /** Builder chrome, overridable via BUILDER_TEXT. */
+    ui = inject(BuilderTextService);
     catalog = FIELD_TYPE_CATALOG;
+    /** The filter text. Matched against the label, the type and the description. */
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    /**
+     * The catalogue, filtered and filed.
+     *
+     * Matching the description as well as the label is what makes the filter worth having: a
+     * person looking for a currency input types "money", which appears in no label but is
+     * exactly the sort of word a description carries. An empty group is dropped rather than
+     * rendered as a heading with nothing under it.
+     */
+    sections = computed(() => {
+        const needle = this.query().trim().toLowerCase();
+        const matches = (meta) => !needle ||
+            meta.label.toLowerCase().includes(needle) ||
+            meta.type.toLowerCase().includes(needle) ||
+            meta.description.toLowerCase().includes(needle);
+        return PALETTE_GROUPS.map(group => ({
+            group,
+            heading: this.ui.text(GROUP_TEXT_KEY[group]),
+            items: this.catalog.filter(meta => (GROUP_OF[meta.type] ?? 'other') === group && matches(meta)),
+        })).filter(section => section.items.length > 0);
+    }, ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
     pick = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FieldPaletteComponent, isStandalone: true, selector: "ngx-field-palette", outputs: { pick: "pick" }, ngImport: i0, template: `
     <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 class="deb-palette__search">
+        <mat-icon aria-hidden="true">search</mat-icon>
+        <input
+          type="search"
+          data-testid="palette-search"
+          [value]="query()"
+          (input)="query.set($any($event.target).value)"
+          [attr.placeholder]="ui.text('paletteSearchPlaceholder')"
+          [attr.aria-label]="ui.text('paletteSearchLabel')"
+        />
+        @if (query()) {
+          <button
+            type="button"
+            class="deb-palette__clear"
+            data-testid="palette-search-clear"
+            [attr.aria-label]="ui.text('paletteSearchClear')"
+            (click)="query.set('')"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        }
+      </div>
+
+      @for (section of sections(); track section.group) {
+        <div class="deb-palette__section">
+          <span class="deb-section-title">{{ section.heading }}</span>
+          <div class="deb-palette__grid">
+            @for (meta of section.items; 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>
+        </div>
+      } @empty {
+        <p class="deb-hint" data-testid="palette-no-match">{{ ui.text('paletteNoMatch', { query: query() }) }}</p>
       }
     </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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".deb-palette{display:flex;flex-direction:column;gap:14px}.deb-palette__search{display:flex;align-items:center;gap:8px;padding:0 10px;height:36px;border:1px solid var(--deb-border, #e2e8f0);border-radius:8px;background:#f8fafc}.deb-palette__search:focus-within{border-color:var(--deb-accent, #6366f1);background:#fff;box-shadow:0 0 0 3px #6366f129}.deb-palette__search mat-icon{font-size:17px;width:17px;height:17px;color:var(--deb-muted, #64748b);flex:none}.deb-palette__search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:inherit}.deb-palette__search input::-webkit-search-cancel-button{display:none}.deb-palette__clear{appearance:none;border:0;background:none;padding:0;cursor:pointer;display:flex;color:var(--deb-muted, #64748b)}.deb-palette__clear:hover{color:#0f172a}.deb-palette__section{display:flex;flex-direction:column;gap:6px}.deb-palette__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.deb-palette__item{justify-content:flex-start!important;height:auto!important;min-height:38px;line-height:1.25!important;border-radius:8px!important;border:1px solid var(--deb-border, #e2e8f0)!important;padding:7px 10px!important;font-family:var(--font-heading, inherit)!important;font-weight:600!important;font-size:12.5px!important;transition:all .18s cubic-bezier(.16,1,.3,1)!important;background:#fff!important;text-align:left!important}.deb-palette__item:hover{border-color:#6366f1!important;background:#f5f3ff!important;color:#4f46e5!important;transform:translateY(-1px);box-shadow:0 4px 12px #6366f126!important}.deb-palette__item mat-icon{color:#4338ca;margin-right:7px;font-size:17px;width:17px;height:17px;flex:none}.deb-palette__item span{white-space:normal;overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){.deb-palette__item{transition:none!important}.deb-palette__item:hover{transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldPaletteComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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 class="deb-palette__search">
+        <mat-icon aria-hidden="true">search</mat-icon>
+        <input
+          type="search"
+          data-testid="palette-search"
+          [value]="query()"
+          (input)="query.set($any($event.target).value)"
+          [attr.placeholder]="ui.text('paletteSearchPlaceholder')"
+          [attr.aria-label]="ui.text('paletteSearchLabel')"
+        />
+        @if (query()) {
+          <button
+            type="button"
+            class="deb-palette__clear"
+            data-testid="palette-search-clear"
+            [attr.aria-label]="ui.text('paletteSearchClear')"
+            (click)="query.set('')"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        }
+      </div>
+
+      @for (section of sections(); track section.group) {
+        <div class="deb-palette__section">
+          <span class="deb-section-title">{{ section.heading }}</span>
+          <div class="deb-palette__grid">
+            @for (meta of section.items; 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>
+        </div>
+      } @empty {
+        <p class="deb-hint" data-testid="palette-no-match">{{ ui.text('paletteNoMatch', { query: query() }) }}</p>
       }
     </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"] }]
+  `, styles: [".deb-palette{display:flex;flex-direction:column;gap:14px}.deb-palette__search{display:flex;align-items:center;gap:8px;padding:0 10px;height:36px;border:1px solid var(--deb-border, #e2e8f0);border-radius:8px;background:#f8fafc}.deb-palette__search:focus-within{border-color:var(--deb-accent, #6366f1);background:#fff;box-shadow:0 0 0 3px #6366f129}.deb-palette__search mat-icon{font-size:17px;width:17px;height:17px;color:var(--deb-muted, #64748b);flex:none}.deb-palette__search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:inherit}.deb-palette__search input::-webkit-search-cancel-button{display:none}.deb-palette__clear{appearance:none;border:0;background:none;padding:0;cursor:pointer;display:flex;color:var(--deb-muted, #64748b)}.deb-palette__clear:hover{color:#0f172a}.deb-palette__section{display:flex;flex-direction:column;gap:6px}.deb-palette__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.deb-palette__item{justify-content:flex-start!important;height:auto!important;min-height:38px;line-height:1.25!important;border-radius:8px!important;border:1px solid var(--deb-border, #e2e8f0)!important;padding:7px 10px!important;font-family:var(--font-heading, inherit)!important;font-weight:600!important;font-size:12.5px!important;transition:all .18s cubic-bezier(.16,1,.3,1)!important;background:#fff!important;text-align:left!important}.deb-palette__item:hover{border-color:#6366f1!important;background:#f5f3ff!important;color:#4f46e5!important;transform:translateY(-1px);box-shadow:0 4px 12px #6366f126!important}.deb-palette__item mat-icon{color:#4338ca;margin-right:7px;font-size:17px;width:17px;height:17px;flex:none}.deb-palette__item span{white-space:normal;overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){.deb-palette__item{transition:none!important}.deb-palette__item:hover{transform:none}}\n"] }]
         }], propDecorators: { pick: [{
                 type: Output
             }] } });
@@ -3178,6 +3412,7 @@ class TabManagerComponent {
           <!-- Tab settings row -->
           <div class="deb-tab-settings">
             <mat-checkbox
+              color="primary"
               [disabled]="!canEditTab(tab)"
               [ngModel]="tab.flatData"
               (ngModelChange)="store.updateTab(tab.id, { flatData: $event })"
@@ -3185,6 +3420,7 @@ class TabManagerComponent {
               {{ ui.text('flatData') }}
             </mat-checkbox>
             <mat-checkbox
+              color="primary"
               [disabled]="!canEditTab(tab)"
               [ngModel]="tab.isPrimaryTab"
               (ngModelChange)="$event ? store.setPrimaryTab(tab.id) : store.updateTab(tab.id, { isPrimaryTab: false })"
@@ -3192,6 +3428,7 @@ class TabManagerComponent {
               {{ ui.text('primaryTab') }}
             </mat-checkbox>
             <mat-checkbox
+              color="primary"
               [disabled]="!canEditTab(tab)"
               [ngModel]="tab.maskData"
               (ngModelChange)="store.updateTab(tab.id, { maskData: $event })"
@@ -3199,6 +3436,7 @@ class TabManagerComponent {
               {{ ui.text('maskTabData') }}
             </mat-checkbox>
             <mat-checkbox
+              color="primary"
               [disabled]="!canEditTab(tab)"
               [ngModel]="tab.systemDefault"
               (ngModelChange)="store.updateTab(tab.id, { systemDefault: $event })"
@@ -3257,7 +3495,7 @@ class TabManagerComponent {
         </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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".deb-tabs__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.deb-tab-card{border:1px solid var(--deb-border, #e5e7eb);border-radius:8px;padding:10px;margin-bottom:10px;background:var(--deb-bg-surface, #ffffff)}.deb-tab-card--system{border-left:4px solid var(--deb-accent, #6366f1)}.deb-tabs__row{display:flex;align-items:center;gap:4px}.deb-tab-settings{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:8px;font-size:13px}.deb-tab-module{margin-top:8px}.deb-subtabs{margin-top:8px;padding-left:16px;border-left:2px dashed var(--deb-border, #e5e7eb)}.deb-subtabs__title{font-size:12px;font-weight:600;color:var(--deb-muted, #6b7280)}.deb-subtab-row{margin-top:6px}.deb-grow{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TabManagerComponent, decorators: [{
             type: Component,
@@ -3331,6 +3569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           <!-- Tab settings row -->
           <div class="deb-tab-settings">
             <mat-checkbox
+              color="primary"
               [disabled]="!canEditTab(tab)"
               [ngModel]="tab.flatData"
               (ngModelChange)="store.updateTab(tab.id, { flatData: $event })"
@@ -3338,6 +3577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
               {{ ui.text('flatData') }}
             </mat-checkbox>
             <mat-checkbox
+              color="primary"
               [disabled]="!canEditTab(tab)"
               [ngModel]="tab.isPrimaryTab"
               (ngModelChange)="$event ? store.setPrimaryTab(tab.id) : store.updateTab(tab.id, { isPrimaryTab: false })"
@@ -3345,6 +3585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
               {{ ui.text('primaryTab') }}
             </mat-checkbox>
             <mat-checkbox
+              color="primary"
               [disabled]="!canEditTab(tab)"
               [ngModel]="tab.maskData"
               (ngModelChange)="store.updateTab(tab.id, { maskData: $event })"
@@ -3352,6 +3593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
               {{ ui.text('maskTabData') }}
             </mat-checkbox>
             <mat-checkbox
+              color="primary"
               [disabled]="!canEditTab(tab)"
               [ngModel]="tab.systemDefault"
               (ngModelChange)="store.updateTab(tab.id, { systemDefault: $event })"
@@ -3474,49 +3716,65 @@ class EntityBuilderTreeNodeComponent {
       @if (field.validators?.required) {
         <span class="deb-req" [title]="ui.text('required')">*</span>
       }
+      <!--
+        The grid width this field was given, when it is not the default.
+        Layout is now authored in the inspector, and a list that does not show it makes the
+        author open every field in turn to find the one that is half a row wide.
+      -->
+      @if (field.colSpan && field.colSpan !== 12) {
+        <span class="deb-span-badge" [attr.data-testid]="'row-span-' + field.id" [title]="ui.text('width')"
+          >{{ field.colSpan }}/12</span
+        >
+      }
 
-      <button
-        mat-icon-button
-        type="button"
-        [disabled]="index === 0"
-        [attr.data-testid]="'row-up-' + field.id"
-        [attr.aria-label]="ui.text('moveFieldUp', { field: fieldLabel(field) })"
-        (click)="store.moveField(store.keyOf(field), -1); $event.stopPropagation()"
-        [matTooltip]="ui.text('moveUp')"
-      >
-        <mat-icon>arrow_upward</mat-icon>
-      </button>
-      <button
-        mat-icon-button
-        type="button"
-        [disabled]="index === totalCount - 1"
-        [attr.data-testid]="'row-down-' + field.id"
-        [attr.aria-label]="ui.text('moveFieldDown', { field: fieldLabel(field) })"
-        (click)="store.moveField(store.keyOf(field), 1); $event.stopPropagation()"
-        [matTooltip]="ui.text('moveDown')"
-      >
-        <mat-icon>arrow_downward</mat-icon>
-      </button>
-      <button
-        mat-icon-button
-        type="button"
-        [attr.data-testid]="'row-duplicate-' + field.id"
-        [attr.aria-label]="ui.text('duplicateField', { field: fieldLabel(field) })"
-        (click)="store.duplicateField(store.keyOf(field)); $event.stopPropagation()"
-        [matTooltip]="ui.text('duplicate')"
-      >
-        <mat-icon>content_copy</mat-icon>
-      </button>
-      <button
-        mat-icon-button
-        type="button"
-        color="warn"
-        [attr.data-testid]="'row-delete-' + field.id"
-        (click)="store.removeField(store.keyOf(field)); $event.stopPropagation()"
-        [matTooltip]="ui.text('delete')"
-      >
-        <mat-icon>delete</mat-icon>
-      </button>
+      <!--
+        Grouped so the row can reveal them together on hover, focus and selection. Four icon
+        buttons on every row put more ink into the controls than into the field names.
+      -->
+      <div class="deb-field-row__actions">
+        <button
+          mat-icon-button
+          type="button"
+          [disabled]="index === 0"
+          [attr.data-testid]="'row-up-' + field.id"
+          [attr.aria-label]="ui.text('moveFieldUp', { field: fieldLabel(field) })"
+          (click)="store.moveField(store.keyOf(field), -1); $event.stopPropagation()"
+          [matTooltip]="ui.text('moveUp')"
+        >
+          <mat-icon>arrow_upward</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          type="button"
+          [disabled]="index === totalCount - 1"
+          [attr.data-testid]="'row-down-' + field.id"
+          [attr.aria-label]="ui.text('moveFieldDown', { field: fieldLabel(field) })"
+          (click)="store.moveField(store.keyOf(field), 1); $event.stopPropagation()"
+          [matTooltip]="ui.text('moveDown')"
+        >
+          <mat-icon>arrow_downward</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          type="button"
+          [attr.data-testid]="'row-duplicate-' + field.id"
+          [attr.aria-label]="ui.text('duplicateField', { field: fieldLabel(field) })"
+          (click)="store.duplicateField(store.keyOf(field)); $event.stopPropagation()"
+          [matTooltip]="ui.text('duplicate')"
+        >
+          <mat-icon>content_copy</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          type="button"
+          color="warn"
+          [attr.data-testid]="'row-delete-' + field.id"
+          (click)="store.removeField(store.keyOf(field)); $event.stopPropagation()"
+          [matTooltip]="ui.text('delete')"
+        >
+          <mat-icon>delete</mat-icon>
+        </button>
+      </div>
     </div>
 
     @if (field.children && field.children.length > 0) {
@@ -3529,7 +3787,7 @@ class EntityBuilderTreeNodeComponent {
         }
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: EntityBuilderTreeNodeComponent, selector: "ngx-entity-builder-tree-node", inputs: ["field", "index", "totalCount"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: EntityBuilderTreeNodeComponent, selector: "ngx-entity-builder-tree-node", inputs: ["field", "index", "totalCount"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderTreeNodeComponent, decorators: [{
             type: Component,
@@ -3581,49 +3839,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       @if (field.validators?.required) {
         <span class="deb-req" [title]="ui.text('required')">*</span>
       }
+      <!--
+        The grid width this field was given, when it is not the default.
+        Layout is now authored in the inspector, and a list that does not show it makes the
+        author open every field in turn to find the one that is half a row wide.
+      -->
+      @if (field.colSpan && field.colSpan !== 12) {
+        <span class="deb-span-badge" [attr.data-testid]="'row-span-' + field.id" [title]="ui.text('width')"
+          >{{ field.colSpan }}/12</span
+        >
+      }
 
-      <button
-        mat-icon-button
-        type="button"
-        [disabled]="index === 0"
-        [attr.data-testid]="'row-up-' + field.id"
-        [attr.aria-label]="ui.text('moveFieldUp', { field: fieldLabel(field) })"
-        (click)="store.moveField(store.keyOf(field), -1); $event.stopPropagation()"
-        [matTooltip]="ui.text('moveUp')"
-      >
-        <mat-icon>arrow_upward</mat-icon>
-      </button>
-      <button
-        mat-icon-button
-        type="button"
-        [disabled]="index === totalCount - 1"
-        [attr.data-testid]="'row-down-' + field.id"
-        [attr.aria-label]="ui.text('moveFieldDown', { field: fieldLabel(field) })"
-        (click)="store.moveField(store.keyOf(field), 1); $event.stopPropagation()"
-        [matTooltip]="ui.text('moveDown')"
-      >
-        <mat-icon>arrow_downward</mat-icon>
-      </button>
-      <button
-        mat-icon-button
-        type="button"
-        [attr.data-testid]="'row-duplicate-' + field.id"
-        [attr.aria-label]="ui.text('duplicateField', { field: fieldLabel(field) })"
-        (click)="store.duplicateField(store.keyOf(field)); $event.stopPropagation()"
-        [matTooltip]="ui.text('duplicate')"
-      >
-        <mat-icon>content_copy</mat-icon>
-      </button>
-      <button
-        mat-icon-button
-        type="button"
-        color="warn"
-        [attr.data-testid]="'row-delete-' + field.id"
-        (click)="store.removeField(store.keyOf(field)); $event.stopPropagation()"
-        [matTooltip]="ui.text('delete')"
-      >
-        <mat-icon>delete</mat-icon>
-      </button>
+      <!--
+        Grouped so the row can reveal them together on hover, focus and selection. Four icon
+        buttons on every row put more ink into the controls than into the field names.
+      -->
+      <div class="deb-field-row__actions">
+        <button
+          mat-icon-button
+          type="button"
+          [disabled]="index === 0"
+          [attr.data-testid]="'row-up-' + field.id"
+          [attr.aria-label]="ui.text('moveFieldUp', { field: fieldLabel(field) })"
+          (click)="store.moveField(store.keyOf(field), -1); $event.stopPropagation()"
+          [matTooltip]="ui.text('moveUp')"
+        >
+          <mat-icon>arrow_upward</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          type="button"
+          [disabled]="index === totalCount - 1"
+          [attr.data-testid]="'row-down-' + field.id"
+          [attr.aria-label]="ui.text('moveFieldDown', { field: fieldLabel(field) })"
+          (click)="store.moveField(store.keyOf(field), 1); $event.stopPropagation()"
+          [matTooltip]="ui.text('moveDown')"
+        >
+          <mat-icon>arrow_downward</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          type="button"
+          [attr.data-testid]="'row-duplicate-' + field.id"
+          [attr.aria-label]="ui.text('duplicateField', { field: fieldLabel(field) })"
+          (click)="store.duplicateField(store.keyOf(field)); $event.stopPropagation()"
+          [matTooltip]="ui.text('duplicate')"
+        >
+          <mat-icon>content_copy</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          type="button"
+          color="warn"
+          [attr.data-testid]="'row-delete-' + field.id"
+          (click)="store.removeField(store.keyOf(field)); $event.stopPropagation()"
+          [matTooltip]="ui.text('delete')"
+        >
+          <mat-icon>delete</mat-icon>
+        </button>
+      </div>
     </div>
 
     @if (field.children && field.children.length > 0) {
@@ -3704,7 +3978,7 @@ class EntityBuilderCanvasComponent {
         }
       </mat-card-content>
     </mat-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: 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: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EntityBuilderTreeNodeComponent, selector: "ngx-entity-builder-tree-node", inputs: ["field", "index", "totalCount"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: 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: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EntityBuilderTreeNodeComponent, selector: "ngx-entity-builder-tree-node", inputs: ["field", "index", "totalCount"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderCanvasComponent, decorators: [{
             type: Component,
@@ -3799,6 +4073,17 @@ class EntityBuilderComponent {
     /** Emitted when the user clicks Save. Carries a clean, deep-cloned config. */
     save = new EventEmitter();
     rbacActions = RBAC_ACTIONS;
+    /**
+     * Select the field an issue is about, so reading the message and acting on it are one step.
+     *
+     * A problem without a `fieldId` is about the entity itself — no tabs, a bad entity name —
+     * and there is nothing to select; the template disables those entries rather than silently
+     * doing nothing when one is clicked.
+     */
+    selectProblemField(problem) {
+        if (problem.fieldId)
+            this.store.selectField(problem.fieldId);
+    }
     constructor() {
         effect(() => this.configChange.emit(this.store.config()), { allowSignalWrites: true });
     }
@@ -3873,7 +4158,7 @@ class EntityBuilderComponent {
         this.store.setPermission(action, roles);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: "config", languages: "languages", uiLanguage: "uiLanguage", availableRoles: "availableRoles", userRoles: "userRoles", commonModules: "commonModules" }, outputs: { configChange: "configChange", save: "save" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</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]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\"><mat-icon>content_copy</mat-icon> {{ ui.text('copyJson') }}</button>\n  <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n  <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n    <mat-icon>save</mat-icon> {{ ui.text('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>{{ ui.text('entityName') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            [placeholder]=\"ui.text('entityNamePlaceholder')\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <mat-slide-toggle [ngModel]=\"store.config().maskData ?? false\" (ngModelChange)=\"store.setMaskData($event)\">{{\n          ui.text('maskEntity')\n        }}</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header\n        ><mat-card-title>{{ ui.text('addField') }}</mat-card-title></mat-card-header\n      >\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\n        ><mat-card-title>{{ ui.text('fieldProperties') }}</mat-card-title></mat-card-header\n      >\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;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#fff}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}@media(max-width:1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FieldPaletteComponent, selector: "ngx-field-palette", outputs: ["pick"] }, { kind: "component", type: TabManagerComponent, selector: "ngx-tab-manager" }, { kind: "component", type: FieldInspectorComponent, selector: "ngx-field-inspector" }, { kind: "component", type: EntityBuilderCanvasComponent, selector: "ngx-entity-builder-canvas" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: "config", languages: "languages", uiLanguage: "uiLanguage", availableRoles: "availableRoles", userRoles: "userRoles", commonModules: "commonModules" }, outputs: { configChange: "configChange", save: "save" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\">\n  <mat-icon class=\"deb-toolbar__mark\">dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-toolbar__entity\" data-testid=\"builder-toolbar-entity\">{{ store.config().entity || '\u2014' }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  <!--\n    The issue count, and the issues.\n    It used to be a button labelled \"0 / 1\" whose tooltip said to hover the items in the list\n    \u2014 a list that did not exist anywhere in the builder. The count now opens the problems\n    themselves, and an entry that names a field selects it, which is the action the person\n    reading the message wants to take next.\n  -->\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      data-testid=\"builder-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matMenuTriggerFor]=\"problemsMenu\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ ui.text('issuesCount', { errors: store.errors().length, total: store.problems().length }) }}\n    </button>\n    <mat-menu #problemsMenu=\"matMenu\" class=\"deb-problems-menu\">\n      @for (problem of store.problems(); track $index) {\n        <button\n          mat-menu-item\n          type=\"button\"\n          data-testid=\"builder-problem\"\n          [disabled]=\"!problem.fieldId\"\n          (click)=\"selectProblemField(problem)\"\n        >\n          <mat-icon [class.deb-problems--error]=\"problem.level === 'error'\">{{\n            problem.level === 'error' ? 'error' : 'warning'\n          }}</mat-icon>\n          <span class=\"deb-problems-menu__text\">{{ problem.message }}</span>\n        </button>\n      }\n    </mat-menu>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\"><mat-icon>content_copy</mat-icon> {{ ui.text('copyJson') }}</button>\n  <!--\n    The tooltip sits on a wrapper, not on the button.\n\n    A disabled button receives no pointer events, so a tooltip bound to it never fires \u2014 which\n    is the one state where the explanation is worth having. Saving stays disabled here (unlike\n    the renderer's Save, which refuses instead): an invalid *schema* is not something the\n    author can be shown their way out of one field at a time, and the issue list beside this\n    button is where that conversation happens.\n  -->\n  <span [matTooltip]=\"store.isValid() ? '' : ui.text('saveBlockedTooltip')\" [matTooltipDisabled]=\"store.isValid()\">\n    <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n    <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n      <mat-icon>save</mat-icon> {{ ui.text('save') }}\n    </button>\n  </span>\n</mat-toolbar>\n\n<div 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>{{ ui.text('entityName') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            [placeholder]=\"ui.text('entityNamePlaceholder')\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <mat-slide-toggle\n          color=\"primary\"\n          [ngModel]=\"store.config().maskData ?? false\"\n          (ngModelChange)=\"store.setMaskData($event)\"\n          >{{ ui.text('maskEntity') }}</mat-slide-toggle\n        >\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header\n        ><mat-card-title>{{ ui.text('addField') }}</mat-card-title></mat-card-header\n      >\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, then what it renders as \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n\n    <!--\n      The live preview, moved up from the footer.\n      It used to sit below a collapsed JSON accordion at the very bottom of the page \u2014 around\n      1500px under the canvas on a fresh builder \u2014 so the one thing that tells an author what\n      they are building was never on screen while they built it. Directly under the field list\n      is where a change and its effect can be seen in the same glance.\n    -->\n    <div class=\"deb-preview-slot\">\n      <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n    </div>\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\n        ><mat-card-title>{{ ui.text('fieldProperties') }}</mat-card-title></mat-card-header\n      >\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: the exported JSON \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n</div>\n", styles: ["ngx-entity-builder{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eef2ff;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar{background:var(--deb-surface);color:#0f172a;border-bottom:1px solid var(--deb-border);gap:4px;height:56px}.deb-toolbar__mark{color:var(--deb-accent)}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:15px;font-weight:700;color:#0f172a}.deb-toolbar__entity{margin-left:10px;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deb-spacer{flex:1 1 auto}.deb-problems{font-weight:600}.deb-problems--error{color:#ef4444;font-weight:600}.deb-problems-menu__text{white-space:normal;line-height:1.35;padding:6px 0}.deb-problems-menu .mat-mdc-menu-item{height:auto;min-height:40px}.deb-problems-menu{max-width:460px}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:300px minmax(0,1fr) 360px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--left,.deb-col--right{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;padding-right:4px}.deb-preview-slot:empty{display:none}@media(max-width:1240px){.deb-body{grid-template-columns:280px minmax(0,1fr)}.deb-col--right{grid-column:2;position:static;max-height:none;overflow:visible}}@media(max-width:900px){.deb-body{grid-template-columns:1fr}.deb-col--left,.deb-col--right{grid-column:1;position:static;max-height:none;overflow:visible}}.deb-canvas__group{margin:14px 0 6px;font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-canvas__group:first-of-type{margin-top:0}.deb-field-list{display:flex;flex-direction:column;gap:8px}.deb-field-list:empty{min-height:44px;border:1px dashed var(--deb-border);border-radius:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-field-row__actions{display:flex;align-items:center;margin-left:auto;opacity:0;transition:opacity .15s ease}.deb-field-row:hover .deb-field-row__actions,.deb-field-row:focus-within .deb-field-row__actions,.deb-field-row--active .deb-field-row__actions{opacity:1}@media(hover:none){.deb-field-row__actions{opacity:1}}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca;flex:none}.deb-span-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f1f5f9;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace;flex:none}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s;flex:none}.deb-drag-handle:hover{color:var(--deb-accent)}.deb-field-type{color:var(--deb-accent);flex:none}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700;flex:none}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview.deb-field-row{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent, #6366f1);background:#fff}.cdk-drag-placeholder.deb-field-row{opacity:.35}.cdk-drag-animating.deb-field-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}@media(prefers-reduced-motion:reduce){.deb-field-row,.deb-field-row__actions,.cdk-drag-animating.deb-field-row,.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:none}.deb-field-row:hover{transform:none}}.deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__section{border:1px solid var(--deb-border);border-radius:10px;overflow:hidden;background:var(--deb-surface)}.deb-inspector__summary{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;cursor:pointer;list-style:none;font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted);background:#f8fafc;-webkit-user-select:none;user-select:none}.deb-inspector__summary::-webkit-details-marker{display:none}.deb-inspector__summary:hover{color:#0f172a}.deb-inspector__summary:focus-visible{outline:2px solid var(--deb-accent);outline-offset:-2px}.deb-inspector__chevron{margin-left:auto;transition:transform .18s ease;color:#94a3b8;font-size:20px;width:20px;height:20px}.deb-inspector__section[open]>.deb-inspector__summary>.deb-inspector__chevron{transform:rotate(180deg)}.deb-inspector__count{padding:1px 7px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:10px;font-weight:700;letter-spacing:0}.deb-inspector__body{display:flex;flex-direction:column;gap:10px;padding:12px;border-top:1px solid var(--deb-border)}@media(prefers-reduced-motion:reduce){.deb-inspector__chevron{transition:none}}.deb-span-picker{display:flex;gap:4px;flex-wrap:wrap}.deb-span-picker__btn{appearance:none;cursor:pointer;flex:1;min-width:46px;padding:7px 4px;border:1px solid var(--deb-border);border-radius:8px;background:var(--deb-surface);color:var(--deb-muted);font:inherit;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease}.deb-span-picker__btn:hover{border-color:#a5b4fc;color:#0f172a}.deb-span-picker__btn:focus-visible{outline:2px solid var(--deb-accent);outline-offset:2px}.deb-span-picker__btn--active{border-color:var(--deb-accent);background:var(--deb-accent-soft);color:var(--deb-accent-hover)}.deb-option-row{display:flex;align-items:center;gap:8px}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}@media(prefers-reduced-motion:reduce){.deb-span-picker__btn{transition:none}}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: 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$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$2.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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i11.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FieldPaletteComponent, selector: "ngx-field-palette", outputs: ["pick"] }, { kind: "component", type: TabManagerComponent, selector: "ngx-tab-manager" }, { kind: "component", type: FieldInspectorComponent, selector: "ngx-field-inspector" }, { kind: "component", type: EntityBuilderCanvasComponent, selector: "ngx-entity-builder-canvas" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderComponent, decorators: [{
             type: Component,
@@ -3886,6 +4171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         MatFormFieldModule,
                         MatIconModule,
                         MatInputModule,
+                        MatMenuModule,
                         MatSelectModule,
                         MatSlideToggleModule,
                         MatToolbarModule,
@@ -3894,7 +4180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         TabManagerComponent,
                         FieldInspectorComponent,
                         EntityBuilderCanvasComponent,
-                    ], template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</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]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\"><mat-icon>content_copy</mat-icon> {{ ui.text('copyJson') }}</button>\n  <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n  <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n    <mat-icon>save</mat-icon> {{ ui.text('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>{{ ui.text('entityName') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            [placeholder]=\"ui.text('entityNamePlaceholder')\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <mat-slide-toggle [ngModel]=\"store.config().maskData ?? false\" (ngModelChange)=\"store.setMaskData($event)\">{{\n          ui.text('maskEntity')\n        }}</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header\n        ><mat-card-title>{{ ui.text('addField') }}</mat-card-title></mat-card-header\n      >\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\n        ><mat-card-title>{{ ui.text('fieldProperties') }}</mat-card-title></mat-card-header\n      >\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;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#fff}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}@media(max-width:1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<mat-toolbar class=\"deb-toolbar\">\n  <mat-icon class=\"deb-toolbar__mark\">dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-toolbar__entity\" data-testid=\"builder-toolbar-entity\">{{ store.config().entity || '\u2014' }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  <!--\n    The issue count, and the issues.\n    It used to be a button labelled \"0 / 1\" whose tooltip said to hover the items in the list\n    \u2014 a list that did not exist anywhere in the builder. The count now opens the problems\n    themselves, and an entry that names a field selects it, which is the action the person\n    reading the message wants to take next.\n  -->\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      data-testid=\"builder-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matMenuTriggerFor]=\"problemsMenu\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ ui.text('issuesCount', { errors: store.errors().length, total: store.problems().length }) }}\n    </button>\n    <mat-menu #problemsMenu=\"matMenu\" class=\"deb-problems-menu\">\n      @for (problem of store.problems(); track $index) {\n        <button\n          mat-menu-item\n          type=\"button\"\n          data-testid=\"builder-problem\"\n          [disabled]=\"!problem.fieldId\"\n          (click)=\"selectProblemField(problem)\"\n        >\n          <mat-icon [class.deb-problems--error]=\"problem.level === 'error'\">{{\n            problem.level === 'error' ? 'error' : 'warning'\n          }}</mat-icon>\n          <span class=\"deb-problems-menu__text\">{{ problem.message }}</span>\n        </button>\n      }\n    </mat-menu>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\"><mat-icon>content_copy</mat-icon> {{ ui.text('copyJson') }}</button>\n  <!--\n    The tooltip sits on a wrapper, not on the button.\n\n    A disabled button receives no pointer events, so a tooltip bound to it never fires \u2014 which\n    is the one state where the explanation is worth having. Saving stays disabled here (unlike\n    the renderer's Save, which refuses instead): an invalid *schema* is not something the\n    author can be shown their way out of one field at a time, and the issue list beside this\n    button is where that conversation happens.\n  -->\n  <span [matTooltip]=\"store.isValid() ? '' : ui.text('saveBlockedTooltip')\" [matTooltipDisabled]=\"store.isValid()\">\n    <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n    <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n      <mat-icon>save</mat-icon> {{ ui.text('save') }}\n    </button>\n  </span>\n</mat-toolbar>\n\n<div 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>{{ ui.text('entityName') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            [placeholder]=\"ui.text('entityNamePlaceholder')\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <mat-slide-toggle\n          color=\"primary\"\n          [ngModel]=\"store.config().maskData ?? false\"\n          (ngModelChange)=\"store.setMaskData($event)\"\n          >{{ ui.text('maskEntity') }}</mat-slide-toggle\n        >\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header\n        ><mat-card-title>{{ ui.text('addField') }}</mat-card-title></mat-card-header\n      >\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, then what it renders as \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n\n    <!--\n      The live preview, moved up from the footer.\n      It used to sit below a collapsed JSON accordion at the very bottom of the page \u2014 around\n      1500px under the canvas on a fresh builder \u2014 so the one thing that tells an author what\n      they are building was never on screen while they built it. Directly under the field list\n      is where a change and its effect can be seen in the same glance.\n    -->\n    <div class=\"deb-preview-slot\">\n      <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n    </div>\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\n        ><mat-card-title>{{ ui.text('fieldProperties') }}</mat-card-title></mat-card-header\n      >\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: the exported JSON \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n</div>\n", styles: ["ngx-entity-builder{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eef2ff;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar{background:var(--deb-surface);color:#0f172a;border-bottom:1px solid var(--deb-border);gap:4px;height:56px}.deb-toolbar__mark{color:var(--deb-accent)}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:15px;font-weight:700;color:#0f172a}.deb-toolbar__entity{margin-left:10px;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deb-spacer{flex:1 1 auto}.deb-problems{font-weight:600}.deb-problems--error{color:#ef4444;font-weight:600}.deb-problems-menu__text{white-space:normal;line-height:1.35;padding:6px 0}.deb-problems-menu .mat-mdc-menu-item{height:auto;min-height:40px}.deb-problems-menu{max-width:460px}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:300px minmax(0,1fr) 360px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--left,.deb-col--right{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;padding-right:4px}.deb-preview-slot:empty{display:none}@media(max-width:1240px){.deb-body{grid-template-columns:280px minmax(0,1fr)}.deb-col--right{grid-column:2;position:static;max-height:none;overflow:visible}}@media(max-width:900px){.deb-body{grid-template-columns:1fr}.deb-col--left,.deb-col--right{grid-column:1;position:static;max-height:none;overflow:visible}}.deb-canvas__group{margin:14px 0 6px;font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-canvas__group:first-of-type{margin-top:0}.deb-field-list{display:flex;flex-direction:column;gap:8px}.deb-field-list:empty{min-height:44px;border:1px dashed var(--deb-border);border-radius:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-field-row__actions{display:flex;align-items:center;margin-left:auto;opacity:0;transition:opacity .15s ease}.deb-field-row:hover .deb-field-row__actions,.deb-field-row:focus-within .deb-field-row__actions,.deb-field-row--active .deb-field-row__actions{opacity:1}@media(hover:none){.deb-field-row__actions{opacity:1}}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca;flex:none}.deb-span-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f1f5f9;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace;flex:none}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s;flex:none}.deb-drag-handle:hover{color:var(--deb-accent)}.deb-field-type{color:var(--deb-accent);flex:none}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700;flex:none}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview.deb-field-row{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent, #6366f1);background:#fff}.cdk-drag-placeholder.deb-field-row{opacity:.35}.cdk-drag-animating.deb-field-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}@media(prefers-reduced-motion:reduce){.deb-field-row,.deb-field-row__actions,.cdk-drag-animating.deb-field-row,.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:none}.deb-field-row:hover{transform:none}}.deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__section{border:1px solid var(--deb-border);border-radius:10px;overflow:hidden;background:var(--deb-surface)}.deb-inspector__summary{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;cursor:pointer;list-style:none;font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted);background:#f8fafc;-webkit-user-select:none;user-select:none}.deb-inspector__summary::-webkit-details-marker{display:none}.deb-inspector__summary:hover{color:#0f172a}.deb-inspector__summary:focus-visible{outline:2px solid var(--deb-accent);outline-offset:-2px}.deb-inspector__chevron{margin-left:auto;transition:transform .18s ease;color:#94a3b8;font-size:20px;width:20px;height:20px}.deb-inspector__section[open]>.deb-inspector__summary>.deb-inspector__chevron{transform:rotate(180deg)}.deb-inspector__count{padding:1px 7px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:10px;font-weight:700;letter-spacing:0}.deb-inspector__body{display:flex;flex-direction:column;gap:10px;padding:12px;border-top:1px solid var(--deb-border)}@media(prefers-reduced-motion:reduce){.deb-inspector__chevron{transition:none}}.deb-span-picker{display:flex;gap:4px;flex-wrap:wrap}.deb-span-picker__btn{appearance:none;cursor:pointer;flex:1;min-width:46px;padding:7px 4px;border:1px solid var(--deb-border);border-radius:8px;background:var(--deb-surface);color:var(--deb-muted);font:inherit;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease}.deb-span-picker__btn:hover{border-color:#a5b4fc;color:#0f172a}.deb-span-picker__btn:focus-visible{outline:2px solid var(--deb-accent);outline-offset:2px}.deb-span-picker__btn--active{border-color:var(--deb-accent);background:var(--deb-accent-soft);color:var(--deb-accent-hover)}.deb-option-row{display:flex;align-items:center;gap:8px}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}@media(prefers-reduced-motion:reduce){.deb-span-picker__btn{transition:none}}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], languages: [{