ngx-dynamic-entity-builder 2.0.2 → 2.1.0

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

@@ -8,11 +8,11 @@ import * as i3$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i3$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4$2 from '@angular/material/expansion';
+import * as i4$3 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 i5 from '@angular/material/icon';
+import * as i4$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
@@ -24,7 +24,7 @@ import * as i3$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i11 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i4$1 from '@angular/material/tooltip';
+import * as i4$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { parseFieldRef, toRefToken, collectFieldScopes, assignFieldRefs, normalizeConfigOptions, getFieldTypeMeta, createFieldConfig, labelToId, createFieldSnapshot, computeFieldDrift, OPTION_KEY, optionKeyOf, resolveLabel, humanizeId, findTab, fieldRefFor, refOf, resolveOptionLabel, FIELD_TYPE_CATALOG, COMMON_MODULES } from '@dynamic-entity/core';
 export { FIELD_TYPE_CATALOG, createFieldConfig, getFieldTypeMeta, humanizeId } from '@dynamic-entity/core';
@@ -35,6 +35,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { MatChipsModule } from '@angular/material/chips';
 
 /**
  * field-catalog.ts — re-exports shared field catalog from @dynamic-entity/core.
@@ -846,6 +847,21 @@ class BuilderStore {
             }
         });
     }
+    setPatternValidator(id, pattern) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, id);
+            if (!field)
+                return;
+            field.validators = field.validators ?? {};
+            const trimmed = pattern?.trim();
+            if (!trimmed) {
+                delete field.validators.pattern;
+            }
+            else {
+                field.validators.pattern = trimmed;
+            }
+        });
+    }
     getParamValidator(field, validator) {
         const val = field.validators?.[validator];
         return typeof val === 'number' ? val : null;
@@ -1699,6 +1715,177 @@ function withExistingOptions(options, current) {
     return [...options, ...extra];
 }
 
+/**
+ * Computes all dependency edges (rules, showWhen, cascades, patchOnTrue, autoPatch)
+ * across an EntityFormConfig and its rules.
+ */
+function computeRuleDependencies(config, rules = [], language = 'en') {
+    const edges = [];
+    let edgeIdSeq = 0;
+    const scopes = collectFieldScopes(config);
+    const byKey = new Map();
+    const byId = new Map();
+    const byToken = new Map();
+    for (const entry of scopes) {
+        const key = refOf(entry.field, entry.scope);
+        const token = toRefToken(key);
+        const label = resolveLabel(entry.field.label, language) || entry.field.id;
+        const meta = { key, id: entry.field.id, label, field: entry.field };
+        byKey.set(key, meta);
+        byId.set(entry.field.id, meta);
+        byToken.set(token, meta);
+    }
+    function resolveRef(refStr) {
+        if (!refStr)
+            return { key: '', label: '—', valid: false };
+        const parsed = parseFieldRef(refStr);
+        const val = parsed.value;
+        const meta = byKey.get(refStr) ??
+            byKey.get(val) ??
+            byId.get(val) ??
+            byToken.get(refStr) ??
+            byToken.get(toRefToken(val));
+        if (meta) {
+            return { key: meta.key, label: meta.label, valid: true };
+        }
+        return { key: val || refStr, label: val || refStr, valid: false };
+    }
+    let totalRules = 0;
+    let totalShowWhen = 0;
+    let totalCascades = 0;
+    let totalPatches = 0;
+    // 1. Form Rules
+    for (const rule of rules) {
+        if (!rule.fieldId)
+            continue;
+        totalRules++;
+        const source = resolveRef(rule.fieldId);
+        const targets = rule.targets ?? [];
+        const actionType = rule.action?.type ?? 'action';
+        let actionSummary = actionType;
+        if (actionType === 'visibility') {
+            actionSummary = rule.action?.value === false || rule.action?.value === 'false' ? 'hide' : 'show';
+        }
+        else if (actionType === 'validation' || actionType === 'validationMessage') {
+            actionSummary = 'validate';
+        }
+        else if (actionType === 'info' || actionType === 'infoBanner') {
+            actionSummary = 'info';
+        }
+        const conditionsText = rule.conditions && rule.conditions.length > 0
+            ? rule.conditions.map(c => `${c.operator ?? 'EQUAL'} ${c.value ?? ''}`.trim()).join(' & ')
+            : 'always';
+        for (const target of targets) {
+            const targetResolved = resolveRef(target.id);
+            edges.push({
+                id: `rule-${++edgeIdSeq}`,
+                sourceKey: source.key,
+                sourceLabel: source.label,
+                targetKey: targetResolved.key,
+                targetLabel: targetResolved.label,
+                type: 'rule',
+                actionSummary,
+                description: `${actionSummary.toUpperCase()} when ${conditionsText}`,
+                sourceValid: source.valid,
+                targetValid: targetResolved.valid,
+            });
+        }
+    }
+    // 2. Field-level features: showWhen, cascade, patchOnTrue, autoPatch
+    for (const entry of scopes) {
+        const field = entry.field;
+        const fieldKey = refOf(field, entry.scope);
+        const fieldResolved = resolveRef(fieldKey);
+        // showWhen
+        if (field.showWhen && typeof field.showWhen === 'object') {
+            for (const [watchedRef, expectedVal] of Object.entries(field.showWhen)) {
+                totalShowWhen++;
+                const source = resolveRef(watchedRef);
+                const valStr = typeof expectedVal === 'object' ? JSON.stringify(expectedVal) : String(expectedVal);
+                edges.push({
+                    id: `showWhen-${++edgeIdSeq}`,
+                    sourceKey: source.key,
+                    sourceLabel: source.label,
+                    targetKey: fieldResolved.key,
+                    targetLabel: fieldResolved.label,
+                    type: 'showWhen',
+                    actionSummary: `= ${valStr}`,
+                    description: `Visible when ${source.label} = ${valStr}`,
+                    sourceValid: source.valid,
+                    targetValid: fieldResolved.valid,
+                });
+            }
+        }
+        // cascade parentField
+        if (field.entityReference?.parentField) {
+            totalCascades++;
+            const source = resolveRef(field.entityReference.parentField);
+            edges.push({
+                id: `cascade-${++edgeIdSeq}`,
+                sourceKey: source.key,
+                sourceLabel: source.label,
+                targetKey: fieldResolved.key,
+                targetLabel: fieldResolved.label,
+                type: 'cascade',
+                actionSummary: 'filters options',
+                description: `Reloads options when ${source.label} changes`,
+                sourceValid: source.valid,
+                targetValid: fieldResolved.valid,
+            });
+        }
+        // patchOnTrue
+        if (Array.isArray(field.patchOnTrue)) {
+            for (const mapping of field.patchOnTrue) {
+                if (!mapping.to)
+                    continue;
+                totalPatches++;
+                const toResolved = resolveRef(mapping.to);
+                const fromResolved = resolveRef(mapping.from);
+                edges.push({
+                    id: `patch-${++edgeIdSeq}`,
+                    sourceKey: fieldResolved.key,
+                    sourceLabel: fieldResolved.label,
+                    targetKey: toResolved.key,
+                    targetLabel: toResolved.label,
+                    type: 'patchOnTrue',
+                    actionSummary: `copy ${fromResolved.label} → ${toResolved.label}`,
+                    description: `When true, copies ${fromResolved.label} to ${toResolved.label}`,
+                    sourceValid: fieldResolved.valid,
+                    targetValid: toResolved.valid,
+                });
+            }
+        }
+        // autoPatch
+        if (field.autoPatch && Array.isArray(field.autoPatch.mappings)) {
+            for (const mapping of field.autoPatch.mappings) {
+                if (!mapping.target)
+                    continue;
+                totalPatches++;
+                const targetResolved = resolveRef(mapping.target);
+                edges.push({
+                    id: `autopatch-${++edgeIdSeq}`,
+                    sourceKey: fieldResolved.key,
+                    sourceLabel: fieldResolved.label,
+                    targetKey: targetResolved.key,
+                    targetLabel: targetResolved.label,
+                    type: 'autoPatch',
+                    actionSummary: `patch → ${targetResolved.label}`,
+                    description: `Selection copies ${mapping.source} to ${targetResolved.label}`,
+                    sourceValid: fieldResolved.valid,
+                    targetValid: targetResolved.valid,
+                });
+            }
+        }
+    }
+    return {
+        edges,
+        totalRules,
+        totalShowWhen,
+        totalCascades,
+        totalPatches,
+    };
+}
+
 /**
  * Every word the builder puts on screen that is not part of the config being authored.
  *
@@ -1801,6 +1988,7 @@ const DEFAULT_BUILDER_TEXT = {
     sectionAutomation: 'Automation',
     sectionRules: 'Rules',
     sectionReference: 'Reference',
+    sectionDependencies: 'Dependencies',
     width: 'Width',
     widthQuarter: '¼',
     widthThird: '⅓',
@@ -1927,6 +2115,33 @@ const DEFAULT_BUILDER_TEXT = {
     driftHeading: 'Source field definition has drifted!',
     driftBody: 'The upstream field configuration in "{entity}" has evolved.',
     syncWithSource: 'Sync with Source',
+    // Validation pattern playground
+    pattern: 'Validation Pattern (Regex)',
+    patternHint: 'Regular expression for format validation.',
+    testPattern: 'Test Pattern',
+    testPatternPlaceholder: 'Type sample input to test…',
+    patternMatch: 'Pattern matches',
+    patternNoMatch: 'Pattern does not match',
+    patternInvalid: 'Invalid regex syntax',
+    patternEmptyPrompt: 'Enter regex above to test sample input',
+    quickPresets: 'Presets',
+    // Field dependencies
+    dependsOn: 'Depends on',
+    affects: 'Affects',
+    noDependencies: 'No active rule or field dependencies for this field.',
+    // Rule graph
+    ruleGraph: 'Rule Graph',
+    ruleGraphTitle: 'Rule & Dependency Graph',
+    ruleGraphSubtitle: 'Schema-wide rule triggers, conditional visibility, and cascades',
+    filterDependencies: 'Filter dependencies…',
+    noDependenciesFound: 'No dependencies matching current filter.',
+    jumpToField: 'Select {field}',
+    closeDialog: 'Close',
+    dependencyTypeRule: 'Rule',
+    dependencyTypeShowWhen: 'Show When',
+    dependencyTypeCascade: 'Cascade',
+    dependencyTypePatch: 'Copy on True',
+    totalDependencies: '{count} dependencies',
 };
 /**
  * Overrides for the builder's own chrome.
@@ -2212,7 +2427,7 @@ class EntityReferenceConfigComponent {
         }
       </div>
     }
-  `, 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 });
+  `, isInline: true, styles: [".deb-entity-ref{display:flex;flex-direction:column;gap:12px}.deb-option-row>mat-form-field{flex:1}.deb-error-hint{color:#b91c1c}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityReferenceConfigComponent, decorators: [{
             type: Component,
@@ -2549,7 +2764,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: 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 });
+  `, isInline: true, styles: [".deb-rule-form{display:flex;flex-direction:column;gap:12px;background:#fafafa;border:1px solid #e0e0e0;border-radius:8px;padding:16px}.deb-rule-form__title{margin:0 0 8px;font-size:16px;font-weight:600}.deb-full{width:100%}.deb-rule-path{color:#888;font-size:11px;margin-left:6px}.deb-rule-section{display:flex;flex-direction:column;gap:8px}.deb-rule-section h4{margin:0;font-size:13px;font-weight:600;color:#555}.deb-rule-row{display:flex;gap:8px;align-items:center}.deb-rule-row>*{flex:1}.deb-rule-form__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RuleFormComponent, decorators: [{
             type: Component,
@@ -2777,7 +2992,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: 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 });
+  `, isInline: true, styles: [".deb-rules{display:flex;flex-direction:column;gap:8px}.deb-rules__head{display:flex;align-items:center;justify-content:space-between}.deb-rule-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px}.deb-rule-item--off{opacity:.55}.deb-rule-item__body{display:flex;flex-direction:column;min-width:0}.deb-rule-item__summary{font-size:13px;font-weight:600;overflow-wrap:anywhere}.deb-rule-item__meta{font-size:11px;color:#6b7280}.deb-rule-item__actions{display:flex;align-items:center;flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: RuleFormComponent, selector: "ngx-rule-form", inputs: ["rule"], outputs: ["save", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldRulesListComponent, decorators: [{
             type: Component,
@@ -3017,7 +3232,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: 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 });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ReferencedFieldConfigComponent, decorators: [{
             type: Component,
@@ -3290,8 +3505,63 @@ class FieldInspectorComponent {
             return JSON.stringify(value);
         return String(value);
     }
+    // ─── Pattern Playground ────────────────────────────────────────────────────
+    testSample = signal('', ...(ngDevMode ? [{ debugName: "testSample" }] : /* istanbul ignore next */ []));
+    regexEvaluation = computed(() => {
+        const f = this.field();
+        const pattern = f?.validators?.pattern?.trim();
+        if (!pattern)
+            return { status: 'empty' };
+        let regex;
+        try {
+            regex = new RegExp(pattern);
+        }
+        catch (e) {
+            return { status: 'invalid', error: e.message };
+        }
+        const sample = this.testSample();
+        if (!sample)
+            return { status: 'idle' };
+        return { status: regex.test(sample) ? 'match' : 'no-match' };
+    }, ...(ngDevMode ? [{ debugName: "regexEvaluation" }] : /* istanbul ignore next */ []));
+    patternPresets = [
+        { label: 'Alpha', pattern: '^[a-zA-Z]+$' },
+        { label: 'Alphanumeric', pattern: '^[a-zA-Z0-9]+$' },
+        { label: 'Digits', pattern: '^\\d+$' },
+        { label: 'Postal Code', pattern: '^\\d{5}(-\\d{4})?$' },
+        { label: 'Phone', pattern: '^\\+?[1-9]\\d{1,14}$' },
+        { label: 'Slug', pattern: '^[a-z0-9]+(?:-[a-z0-9]+)*$' },
+    ];
+    supportsPattern(type) {
+        return ['text', 'textarea', 'markdown', 'email', 'password'].includes(type);
+    }
+    applyPreset(field, pattern) {
+        this.store.setPatternValidator(this.store.keyOf(field), pattern);
+    }
+    // ─── Dependencies ──────────────────────────────────────────────────────────
+    allDependencies = computed(() => computeRuleDependencies(this.store.config(), this.store.rules(), this.lang()), ...(ngDevMode ? [{ debugName: "allDependencies" }] : /* istanbul ignore next */ []));
+    incomingDependencies = computed(() => {
+        const f = this.field();
+        if (!f)
+            return [];
+        const key = this.store.keyOf(f);
+        const id = f.id;
+        return this.allDependencies().edges.filter(e => e.targetKey === key || e.targetKey === id);
+    }, ...(ngDevMode ? [{ debugName: "incomingDependencies" }] : /* istanbul ignore next */ []));
+    outgoingDependencies = computed(() => {
+        const f = this.field();
+        if (!f)
+            return [];
+        const key = this.store.keyOf(f);
+        const id = f.id;
+        return this.allDependencies().edges.filter(e => e.sourceKey === key || e.sourceKey === id);
+    }, ...(ngDevMode ? [{ debugName: "outgoingDependencies" }] : /* istanbul ignore next */ []));
+    selectField(key) {
+        if (key)
+            this.store.selectField(key);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FieldInspectorComponent, isStandalone: true, selector: "ngx-field-inspector", ngImport: i0, template: "@if (field(); as f) {\n  <!--\n    The inspector, in collapsible sections.\n\n    It used to be one flat scroll of fifteen divider-separated blocks, so renaming a field\n    meant scrolling past every advanced setting a field has, and finding the rules list meant\n    scrolling past all of them.\n\n    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        <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            @if (m.flagValidators.length) {\n              <div class=\"deb-flags-row\">\n                @for (v of m.flagValidators; track v) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [ngModel]=\"store.hasFlagValidator(f, v)\"\n                    (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n                    >{{ v }}</mat-checkbox\n                  >\n                }\n              </div>\n            }\n            @if (m.paramValidators.length) {\n              <div class=\"deb-param-validators-grid\">\n                @for (v of m.paramValidators; track v) {\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                    <mat-label>{{ v }}</mat-label>\n                    <input\n                      matInput\n                      type=\"number\"\n                      [ngModel]=\"store.getParamValidator(f, v)\"\n                      (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n                    />\n                  </mat-form-field>\n                }\n              </div>\n            }\n          </div>\n        </details>\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionOptions') }}\n          @if ((f.options ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"options-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n            <mat-select\n              data-testid=\"data-source\"\n              [ngModel]=\"store.fieldDataSource(f)\"\n              (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n            >\n              <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n              <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n              <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Named lookup list -->\n          @if (store.fieldDataSource(f) === 'lookup') {\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n              <mat-label>{{ ui.text('listName') }}</mat-label>\n              <input\n                matInput\n                data-testid=\"list-name\"\n                [ngModel]=\"f.listName ?? ''\"\n                (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n              />\n            </mat-form-field>\n            <p class=\"deb-hint\">\n              {{ ui.text('listNameHint') }}\n            </p>\n          }\n\n          <!-- Inline options -->\n          @if (store.fieldDataSource(f) !== 'lookup') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n              <span class=\"deb-row__actions\">\n                @if (store.hasUnkeyedOptions()) {\n                  <button\n                    mat-stroked-button\n                    type=\"button\"\n                    data-testid=\"assign-option-keys\"\n                    (click)=\"store.assignOptionKeys()\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                  >\n                    <mat-icon>key</mat-icon> {{ ui.text('assignOptionKeys') }}\n                  </button>\n                }\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"add-option\"\n                  (click)=\"store.addOption(store.keyOf(f))\"\n                >\n                  <mat-icon>add</mat-icon> {{ ui.text('option') }}\n                </button>\n              </span>\n            </div>\n            @for (opt of f.options ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <!-- One input: the displayed text is the stored value. -->\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n                  <input\n                    matInput\n                    [attr.data-testid]=\"'option-' + $index\"\n                    [ngModel]=\"optionLabel(opt)\"\n                    (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n                  />\n                </mat-form-field>\n                <!--\n                  Not a control. A key is the option's identity and every record already\n                  holding it matches on it, so a text box here \u2014 even a read-only one \u2014\n                  would be a data migration disguised as a field. It is shown because an\n                  author needs to be able to read it, and for no other reason.\n                -->\n                @if (store.optionKey(opt); as key) {\n                  <code\n                    class=\"deb-option-key\"\n                    [attr.data-testid]=\"'option-key-' + $index\"\n                    [attr.aria-label]=\"ui.text('optionKey')\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                    >{{ key }}</code\n                  >\n                }\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  (click)=\"store.removeOption(store.keyOf(f), $index)\"\n                  [matTooltip]=\"ui.text('removeOption')\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.options ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Flags -->\n    <details class=\"deb-inspector__section\" [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        <div class=\"deb-toggles\" role=\"group\" [attr.aria-label]=\"ui.text('display')\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.visibility ?? true\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n            >{{ ui.text('visible') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.table?.visible ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n            >{{ ui.text('tableColumn') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.readonly ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n            >{{ ui.text('readOnly') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.disabled ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n            >{{ ui.text('disabled') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.maskData ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n            >{{ ui.text('maskData') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            data-testid=\"toggle-critical\"\n            [ngModel]=\"f.criticalField ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n            [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n            >{{ ui.text('criticalField') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.showOnMinimize ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n            [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n            >{{ ui.text('showInSummary') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </details>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <details class=\"deb-inspector__section\" [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}\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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FieldInspectorComponent, isStandalone: true, selector: "ngx-field-inspector", ngImport: i0, template: "@if (field(); as f) {\n  <!--\n    The inspector, in collapsible sections.\n\n    It used to be one flat scroll of fifteen divider-separated blocks, so renaming a field\n    meant scrolling past every advanced setting a field has, and finding the rules list meant\n    scrolling past all of them.\n\n    All inspector sections start expanded by default so authors have immediate access to\n    validation, automation, visibility conditions, rules, dependencies, and reference settings\n    without needing to manually unfold each section. Sections can still be collapsed as desired.\n\n    `<details>` rather than mat-expansion-panel: the inspector already sits inside a card in a\n    scrolling rail, and a third level of Material elevation inside that read as noise.\n  -->\n  <div class=\"deb-inspector\">\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionBasics') }}\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <!-- Identity -->\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fieldId') }}</mat-label>\n            <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n            @if (store.hasManualId(f.id)) {\n              <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n            } @else {\n              <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</mat-hint>\n            }\n          </mat-form-field>\n          <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n        </div>\n\n        @if (tabOptions().length > 1) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('tab') }}</mat-label>\n            <mat-select data-testid=\"field-tab\" [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n              @for (tab of tabOptions(); track tab.id) {\n                <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n              }\n            </mat-select>\n            <mat-hint>{{ ui.text('tabMoveHint') }}</mat-hint>\n          </mat-form-field>\n        }\n\n        <!-- Localised text (active language) -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-label\"\n            [ngModel]=\"labelValue(f)\"\n            (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), lang(), $event)\"\n          />\n        </mat-form-field>\n\n        @if (meta()?.supportsPlaceholder) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"placeholderValue(f)\"\n              (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n            />\n          </mat-form-field>\n        }\n\n        <!--\n          Help text, offered on every field type \u2014 including the ones with no placeholder,\n          which are exactly the ones most likely to need explaining. Its hint says what it is\n          *for*, because the box above it is the one authors reach for by habit and a\n          placeholder is gone the moment somebody types.\n        -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('hintInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-hint\"\n            [ngModel]=\"hintValue(f)\"\n            (ngModelChange)=\"store.setFieldHint(store.keyOf(f), lang(), $event)\"\n          />\n          <mat-hint>{{ ui.text('hintHint') }}</mat-hint>\n        </mat-form-field>\n\n        @if (meta()?.supportsDefaultValue) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"f.defaultValue ?? ''\"\n              (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n            />\n          </mat-form-field>\n        }\n      </div>\n    </details>\n\n    <!--\n      Width.\n\n      `colSpan` has been in the schema and honoured by the renderer since the 12-column grid\n      existed, and the builder had no control for it \u2014 so every form authored here came out a\n      single-column ladder, and the only way to put two fields on one row was to hand-edit the\n      JSON. This is that control.\n    -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionLayout') }}\n        <span class=\"deb-inspector__count\" data-testid=\"layout-count\">{{ f.colSpan ?? 12 }}/12</span>\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-span-picker\" role=\"group\" [attr.aria-label]=\"ui.text('width')\">\n          @for (choice of spanChoices; track choice.span) {\n            <button\n              type=\"button\"\n              class=\"deb-span-picker__btn\"\n              [class.deb-span-picker__btn--active]=\"(f.colSpan ?? 12) === choice.span\"\n              [attr.data-testid]=\"'field-span-' + choice.span\"\n              [attr.aria-pressed]=\"(f.colSpan ?? 12) === choice.span\"\n              [matTooltip]=\"ui.text('widthOf', { span: choice.span })\"\n              (click)=\"store.updateField(store.keyOf(f), { colSpan: choice.span })\"\n            >\n              {{ ui.text(choice.textKey) }}\n            </button>\n          }\n        </div>\n        <p class=\"deb-hint\">{{ ui.text('widthHint') }}</p>\n      </div>\n    </details>\n\n    <!-- Validators -->\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length || supportsPattern(f.type) || f.validators?.pattern) {\n        <details class=\"deb-inspector__section\" open>\n          <summary class=\"deb-inspector__summary\">\n            {{ ui.text('sectionValidation') }}\n            @if (validatorCount(f); as count) {\n              <span class=\"deb-inspector__count\" data-testid=\"validation-count\">{{ count }}</span>\n            }\n            <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n          </summary>\n          <div class=\"deb-inspector__body\">\n            @if (m.flagValidators.length) {\n              <div class=\"deb-flags-row\">\n                @for (v of m.flagValidators; track v) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [ngModel]=\"store.hasFlagValidator(f, v)\"\n                    (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n                    >{{ v }}</mat-checkbox\n                  >\n                }\n              </div>\n            }\n            @if (m.paramValidators.length) {\n              <div class=\"deb-param-validators-grid\">\n                @for (v of m.paramValidators; track v) {\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                    <mat-label>{{ v }}</mat-label>\n                    <input\n                      matInput\n                      type=\"number\"\n                      [ngModel]=\"store.getParamValidator(f, v)\"\n                      (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n                    />\n                  </mat-form-field>\n                }\n              </div>\n            }\n\n            @if (supportsPattern(f.type) || f.validators?.pattern) {\n              <div class=\"deb-pattern-box\" data-testid=\"pattern-playground\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('pattern') }}</mat-label>\n                  <input\n                    matInput\n                    data-testid=\"field-pattern-input\"\n                    [ngModel]=\"f.validators?.pattern ?? ''\"\n                    (ngModelChange)=\"store.setPatternValidator(store.keyOf(f), $event)\"\n                  />\n                  <mat-hint>{{ ui.text('patternHint') }}</mat-hint>\n                </mat-form-field>\n\n                <div class=\"deb-pattern-presets\">\n                  <span class=\"deb-section-title\">{{ ui.text('quickPresets') }}:</span>\n                  @for (preset of patternPresets; track preset.label) {\n                    <button\n                      type=\"button\"\n                      class=\"deb-preset-btn\"\n                      [attr.data-testid]=\"'preset-' + preset.label.toLowerCase()\"\n                      (click)=\"applyPreset(f, preset.pattern)\"\n                    >\n                      {{ preset.label }}\n                    </button>\n                  }\n                </div>\n\n                <div class=\"deb-row deb-row--split\">\n                  <span class=\"deb-section-title\">{{ ui.text('testPattern') }}</span>\n                  <div\n                    class=\"deb-pattern-status\"\n                    [class.deb-pattern-status--match]=\"regexEvaluation().status === 'match'\"\n                    [class.deb-pattern-status--no-match]=\"regexEvaluation().status === 'no-match'\"\n                    [class.deb-pattern-status--invalid]=\"regexEvaluation().status === 'invalid'\"\n                    [class.deb-pattern-status--idle]=\"regexEvaluation().status === 'idle'\"\n                    [class.deb-pattern-status--empty]=\"regexEvaluation().status === 'empty'\"\n                    data-testid=\"regex-test-status\"\n                  >\n                    @switch (regexEvaluation().status) {\n                      @case ('match') {\n                        <mat-icon>check_circle</mat-icon> {{ ui.text('patternMatch') }}\n                      }\n                      @case ('no-match') {\n                        <mat-icon>cancel</mat-icon> {{ ui.text('patternNoMatch') }}\n                      }\n                      @case ('invalid') {\n                        <mat-icon>error</mat-icon> {{ ui.text('patternInvalid') }}\n                      }\n                      @case ('idle') {\n                        <mat-icon>edit_note</mat-icon> {{ ui.text('testPatternPlaceholder') }}\n                      }\n                      @case ('empty') {\n                        <mat-icon>info</mat-icon> {{ ui.text('patternEmptyPrompt') }}\n                      }\n                    }\n                  </div>\n                </div>\n\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <input\n                    matInput\n                    data-testid=\"regex-test-input\"\n                    [placeholder]=\"ui.text('testPatternPlaceholder')\"\n                    [ngModel]=\"testSample()\"\n                    (ngModelChange)=\"testSample.set($event)\"\n                  />\n                </mat-form-field>\n              </div>\n            }\n          </div>\n        </details>\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionOptions') }}\n          @if ((f.options ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"options-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n            <mat-select\n              data-testid=\"data-source\"\n              [ngModel]=\"store.fieldDataSource(f)\"\n              (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n            >\n              <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n              <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n              <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Named lookup list -->\n          @if (store.fieldDataSource(f) === 'lookup') {\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n              <mat-label>{{ ui.text('listName') }}</mat-label>\n              <input\n                matInput\n                data-testid=\"list-name\"\n                [ngModel]=\"f.listName ?? ''\"\n                (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n              />\n            </mat-form-field>\n            <p class=\"deb-hint\">\n              {{ ui.text('listNameHint') }}\n            </p>\n          }\n\n          <!-- Inline options -->\n          @if (store.fieldDataSource(f) !== 'lookup') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n              <span class=\"deb-row__actions\">\n                @if (store.hasUnkeyedOptions()) {\n                  <button\n                    mat-stroked-button\n                    type=\"button\"\n                    data-testid=\"assign-option-keys\"\n                    (click)=\"store.assignOptionKeys()\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                  >\n                    <mat-icon>key</mat-icon> {{ ui.text('assignOptionKeys') }}\n                  </button>\n                }\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"add-option\"\n                  (click)=\"store.addOption(store.keyOf(f))\"\n                >\n                  <mat-icon>add</mat-icon> {{ ui.text('option') }}\n                </button>\n              </span>\n            </div>\n            @for (opt of f.options ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <!-- One input: the displayed text is the stored value. -->\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n                  <input\n                    matInput\n                    [attr.data-testid]=\"'option-' + $index\"\n                    [ngModel]=\"optionLabel(opt)\"\n                    (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n                  />\n                </mat-form-field>\n                <!--\n                  Not a control. A key is the option's identity and every record already\n                  holding it matches on it, so a text box here \u2014 even a read-only one \u2014\n                  would be a data migration disguised as a field. It is shown because an\n                  author needs to be able to read it, and for no other reason.\n                -->\n                @if (store.optionKey(opt); as key) {\n                  <code\n                    class=\"deb-option-key\"\n                    [attr.data-testid]=\"'option-key-' + $index\"\n                    [attr.aria-label]=\"ui.text('optionKey')\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                    >{{ key }}</code\n                  >\n                }\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  (click)=\"store.removeOption(store.keyOf(f), $index)\"\n                  [matTooltip]=\"ui.text('removeOption')\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.options ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Flags -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDisplay') }}\n        @if (displayFlagCount(f); as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"display-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-toggles\" role=\"group\" [attr.aria-label]=\"ui.text('display')\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.visibility ?? true\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n            >{{ ui.text('visible') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.table?.visible ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n            >{{ ui.text('tableColumn') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.readonly ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n            >{{ ui.text('readOnly') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.disabled ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n            >{{ ui.text('disabled') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.maskData ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n            >{{ ui.text('maskData') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            data-testid=\"toggle-critical\"\n            [ngModel]=\"f.criticalField ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n            [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n            >{{ ui.text('criticalField') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.showOnMinimize ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n            [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n            >{{ ui.text('showInSummary') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </details>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionVisibility') }}\n        @if (showWhenEntries(f).length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"visibility-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-row deb-row--split\">\n          <span class=\"deb-section-title\">{{ ui.text('showWhen') }}</span>\n          <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n            <mat-icon>add</mat-icon> {{ ui.text('condition') }}\n          </button>\n        </div>\n        @for (entry of showWhenEntries(f); track entry.key) {\n          <div class=\"deb-option-row\" data-testid=\"option-row\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('watchedField') }}</mat-label>\n              <mat-select\n                data-testid=\"show-when-field\"\n                [ngModel]=\"entry.key\"\n                (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n              >\n                @for (option of optionsWith(entry.key); track option.value) {\n                  <mat-option [value]=\"option.value\">\n                    {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('equals') }}</mat-label>\n              <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n            </mat-form-field>\n            <button\n              mat-icon-button\n              type=\"button\"\n              color=\"warn\"\n              [matTooltip]=\"ui.text('removeCondition')\"\n              (click)=\"removeShowWhen(f, entry.key)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        }\n        @if (!showWhenEntries(f).length) {\n          <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Entity reference, cascade, autoPatch, and patchOnTrue -->\n    @if (meta()?.isEntityRef || f.type === 'boolean' || f.type === 'checkbox') {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionAutomation') }}\n          @if ((f.patchOnTrue ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"automation-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          @if (meta()?.isEntityRef) {\n            <ngx-entity-reference-config />\n          }\n\n          <!-- patchOnTrue (boolean/checkbox only) -->\n          @if (f.type === 'boolean' || f.type === 'checkbox') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('copyOnTrue') }}</span>\n              <button\n                mat-stroked-button\n                type=\"button\"\n                data-testid=\"add-patch-on-true\"\n                (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n              >\n                <mat-icon>add</mat-icon> {{ ui.text('mapping') }}\n              </button>\n            </div>\n            @for (mapping of f.patchOnTrue ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('fromField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-from\"\n                    [ngModel]=\"mapping.from\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.from); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('toField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-to\"\n                    [ngModel]=\"mapping.to\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.to); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  [matTooltip]=\"ui.text('removeMapping')\"\n                  (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.patchOnTrue ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Rules attached to this field -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionRules') }}\n        @if (store.rulesForSelectedField().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"rules-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-field-rules-list />\n      </div>\n    </details>\n\n    <!-- Field Dependencies Visualizer -->\n    <details\n      class=\"deb-inspector__section\"\n      open\n      data-testid=\"section-dependencies\"\n    >\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDependencies') }}\n        @if (incomingDependencies().length + outgoingDependencies().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"dependencies-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        @if (incomingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('dependsOn') }} ({{ incomingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"incoming-dependencies\">\n            @for (dep of incomingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.sourceLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.sourceLabel })\"\n                  (click)=\"selectField(dep.sourceKey)\"\n                >\n                  <mat-icon>arrow_back</mat-icon> {{ ui.text('jumpToField', { field: dep.sourceLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (outgoingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('affects') }} ({{ outgoingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"outgoing-dependencies\">\n            @for (dep of outgoingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.targetLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.targetLabel })\"\n                  (click)=\"selectField(dep.targetKey)\"\n                >\n                  <mat-icon>arrow_forward</mat-icon> {{ ui.text('jumpToField', { field: dep.targetLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (!incomingDependencies().length && !outgoingDependencies().length) {\n          <p class=\"deb-hint\" data-testid=\"no-field-dependencies\">{{ ui.text('noDependencies') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Cross-entity field reference & drift management -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionReference') }}\n        @if (f.isReferenced) {\n          <span class=\"deb-inspector__count\" data-testid=\"reference-count\">{{ f.referencedEntityKey }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-referenced-field-config />\n      </div>\n    </details>\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>{{ ui.text('inspectorEmpty') }}</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row>*{flex:1}.deb-row>.deb-chip{flex:0 0 auto}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-pattern-box{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.deb-pattern-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.deb-pattern-status--match{background:#dcfce7;color:#166534}.deb-pattern-status--no-match{background:#fee2e2;color:#991b1b}.deb-pattern-status--invalid{background:#fef3c7;color:#92400e}.deb-pattern-status--idle,.deb-pattern-status--empty{background:#f1f5f9;color:#334155}.deb-pattern-presets{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.deb-preset-btn{padding:2px 8px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;font-size:11px;color:#334155;cursor:pointer;transition:background .1s ease}.deb-preset-btn:hover{background:#e2e8f0}.deb-dep-list{display:flex;flex-direction:column;gap:6px;margin-top:4px;margin-bottom:12px}.deb-dep-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px}.deb-dep-info{display:flex;flex-direction:column;min-width:0}.deb-dep-name{font-size:12px;font-weight:600;color:#0f172a}.deb-dep-detail{font-size:11px;color:#64748b}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityReferenceConfigComponent, selector: "ngx-entity-reference-config" }, { kind: "component", type: FieldRulesListComponent, selector: "ngx-field-rules-list" }, { kind: "component", type: ReferencedFieldConfigComponent, selector: "ngx-referenced-field-config" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldInspectorComponent, decorators: [{
             type: Component,
@@ -3309,7 +3579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         EntityReferenceConfigComponent,
                         FieldRulesListComponent,
                         ReferencedFieldConfigComponent,
-                    ], template: "@if (field(); as f) {\n  <!--\n    The inspector, in collapsible sections.\n\n    It used to be one flat scroll of fifteen divider-separated blocks, so renaming a field\n    meant scrolling past every advanced setting a field has, and finding the rules list meant\n    scrolling past all of them.\n\n    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        <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            @if (m.flagValidators.length) {\n              <div class=\"deb-flags-row\">\n                @for (v of m.flagValidators; track v) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [ngModel]=\"store.hasFlagValidator(f, v)\"\n                    (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n                    >{{ v }}</mat-checkbox\n                  >\n                }\n              </div>\n            }\n            @if (m.paramValidators.length) {\n              <div class=\"deb-param-validators-grid\">\n                @for (v of m.paramValidators; track v) {\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                    <mat-label>{{ v }}</mat-label>\n                    <input\n                      matInput\n                      type=\"number\"\n                      [ngModel]=\"store.getParamValidator(f, v)\"\n                      (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n                    />\n                  </mat-form-field>\n                }\n              </div>\n            }\n          </div>\n        </details>\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionOptions') }}\n          @if ((f.options ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"options-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n            <mat-select\n              data-testid=\"data-source\"\n              [ngModel]=\"store.fieldDataSource(f)\"\n              (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n            >\n              <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n              <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n              <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Named lookup list -->\n          @if (store.fieldDataSource(f) === 'lookup') {\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n              <mat-label>{{ ui.text('listName') }}</mat-label>\n              <input\n                matInput\n                data-testid=\"list-name\"\n                [ngModel]=\"f.listName ?? ''\"\n                (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n              />\n            </mat-form-field>\n            <p class=\"deb-hint\">\n              {{ ui.text('listNameHint') }}\n            </p>\n          }\n\n          <!-- Inline options -->\n          @if (store.fieldDataSource(f) !== 'lookup') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n              <span class=\"deb-row__actions\">\n                @if (store.hasUnkeyedOptions()) {\n                  <button\n                    mat-stroked-button\n                    type=\"button\"\n                    data-testid=\"assign-option-keys\"\n                    (click)=\"store.assignOptionKeys()\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                  >\n                    <mat-icon>key</mat-icon> {{ ui.text('assignOptionKeys') }}\n                  </button>\n                }\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"add-option\"\n                  (click)=\"store.addOption(store.keyOf(f))\"\n                >\n                  <mat-icon>add</mat-icon> {{ ui.text('option') }}\n                </button>\n              </span>\n            </div>\n            @for (opt of f.options ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <!-- One input: the displayed text is the stored value. -->\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n                  <input\n                    matInput\n                    [attr.data-testid]=\"'option-' + $index\"\n                    [ngModel]=\"optionLabel(opt)\"\n                    (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n                  />\n                </mat-form-field>\n                <!--\n                  Not a control. A key is the option's identity and every record already\n                  holding it matches on it, so a text box here \u2014 even a read-only one \u2014\n                  would be a data migration disguised as a field. It is shown because an\n                  author needs to be able to read it, and for no other reason.\n                -->\n                @if (store.optionKey(opt); as key) {\n                  <code\n                    class=\"deb-option-key\"\n                    [attr.data-testid]=\"'option-key-' + $index\"\n                    [attr.aria-label]=\"ui.text('optionKey')\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                    >{{ key }}</code\n                  >\n                }\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  (click)=\"store.removeOption(store.keyOf(f), $index)\"\n                  [matTooltip]=\"ui.text('removeOption')\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.options ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Flags -->\n    <details class=\"deb-inspector__section\" [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        <div class=\"deb-toggles\" role=\"group\" [attr.aria-label]=\"ui.text('display')\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.visibility ?? true\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n            >{{ ui.text('visible') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.table?.visible ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n            >{{ ui.text('tableColumn') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.readonly ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n            >{{ ui.text('readOnly') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.disabled ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n            >{{ ui.text('disabled') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.maskData ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n            >{{ ui.text('maskData') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            data-testid=\"toggle-critical\"\n            [ngModel]=\"f.criticalField ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n            [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n            >{{ ui.text('criticalField') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.showOnMinimize ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n            [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n            >{{ ui.text('showInSummary') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </details>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <details class=\"deb-inspector__section\" [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}\n"] }]
+                    ], template: "@if (field(); as f) {\n  <!--\n    The inspector, in collapsible sections.\n\n    It used to be one flat scroll of fifteen divider-separated blocks, so renaming a field\n    meant scrolling past every advanced setting a field has, and finding the rules list meant\n    scrolling past all of them.\n\n    All inspector sections start expanded by default so authors have immediate access to\n    validation, automation, visibility conditions, rules, dependencies, and reference settings\n    without needing to manually unfold each section. Sections can still be collapsed as desired.\n\n    `<details>` rather than mat-expansion-panel: the inspector already sits inside a card in a\n    scrolling rail, and a third level of Material elevation inside that read as noise.\n  -->\n  <div class=\"deb-inspector\">\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionBasics') }}\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <!-- Identity -->\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fieldId') }}</mat-label>\n            <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n            @if (store.hasManualId(f.id)) {\n              <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n            } @else {\n              <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</mat-hint>\n            }\n          </mat-form-field>\n          <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n        </div>\n\n        @if (tabOptions().length > 1) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('tab') }}</mat-label>\n            <mat-select data-testid=\"field-tab\" [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n              @for (tab of tabOptions(); track tab.id) {\n                <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n              }\n            </mat-select>\n            <mat-hint>{{ ui.text('tabMoveHint') }}</mat-hint>\n          </mat-form-field>\n        }\n\n        <!-- Localised text (active language) -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-label\"\n            [ngModel]=\"labelValue(f)\"\n            (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), lang(), $event)\"\n          />\n        </mat-form-field>\n\n        @if (meta()?.supportsPlaceholder) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"placeholderValue(f)\"\n              (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n            />\n          </mat-form-field>\n        }\n\n        <!--\n          Help text, offered on every field type \u2014 including the ones with no placeholder,\n          which are exactly the ones most likely to need explaining. Its hint says what it is\n          *for*, because the box above it is the one authors reach for by habit and a\n          placeholder is gone the moment somebody types.\n        -->\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('hintInLanguage', { language: lang() }) }}</mat-label>\n          <input\n            matInput\n            data-testid=\"field-hint\"\n            [ngModel]=\"hintValue(f)\"\n            (ngModelChange)=\"store.setFieldHint(store.keyOf(f), lang(), $event)\"\n          />\n          <mat-hint>{{ ui.text('hintHint') }}</mat-hint>\n        </mat-form-field>\n\n        @if (meta()?.supportsDefaultValue) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"f.defaultValue ?? ''\"\n              (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n            />\n          </mat-form-field>\n        }\n      </div>\n    </details>\n\n    <!--\n      Width.\n\n      `colSpan` has been in the schema and honoured by the renderer since the 12-column grid\n      existed, and the builder had no control for it \u2014 so every form authored here came out a\n      single-column ladder, and the only way to put two fields on one row was to hand-edit the\n      JSON. This is that control.\n    -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionLayout') }}\n        <span class=\"deb-inspector__count\" data-testid=\"layout-count\">{{ f.colSpan ?? 12 }}/12</span>\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-span-picker\" role=\"group\" [attr.aria-label]=\"ui.text('width')\">\n          @for (choice of spanChoices; track choice.span) {\n            <button\n              type=\"button\"\n              class=\"deb-span-picker__btn\"\n              [class.deb-span-picker__btn--active]=\"(f.colSpan ?? 12) === choice.span\"\n              [attr.data-testid]=\"'field-span-' + choice.span\"\n              [attr.aria-pressed]=\"(f.colSpan ?? 12) === choice.span\"\n              [matTooltip]=\"ui.text('widthOf', { span: choice.span })\"\n              (click)=\"store.updateField(store.keyOf(f), { colSpan: choice.span })\"\n            >\n              {{ ui.text(choice.textKey) }}\n            </button>\n          }\n        </div>\n        <p class=\"deb-hint\">{{ ui.text('widthHint') }}</p>\n      </div>\n    </details>\n\n    <!-- Validators -->\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length || supportsPattern(f.type) || f.validators?.pattern) {\n        <details class=\"deb-inspector__section\" open>\n          <summary class=\"deb-inspector__summary\">\n            {{ ui.text('sectionValidation') }}\n            @if (validatorCount(f); as count) {\n              <span class=\"deb-inspector__count\" data-testid=\"validation-count\">{{ count }}</span>\n            }\n            <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n          </summary>\n          <div class=\"deb-inspector__body\">\n            @if (m.flagValidators.length) {\n              <div class=\"deb-flags-row\">\n                @for (v of m.flagValidators; track v) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [ngModel]=\"store.hasFlagValidator(f, v)\"\n                    (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n                    >{{ v }}</mat-checkbox\n                  >\n                }\n              </div>\n            }\n            @if (m.paramValidators.length) {\n              <div class=\"deb-param-validators-grid\">\n                @for (v of m.paramValidators; track v) {\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                    <mat-label>{{ v }}</mat-label>\n                    <input\n                      matInput\n                      type=\"number\"\n                      [ngModel]=\"store.getParamValidator(f, v)\"\n                      (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n                    />\n                  </mat-form-field>\n                }\n              </div>\n            }\n\n            @if (supportsPattern(f.type) || f.validators?.pattern) {\n              <div class=\"deb-pattern-box\" data-testid=\"pattern-playground\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('pattern') }}</mat-label>\n                  <input\n                    matInput\n                    data-testid=\"field-pattern-input\"\n                    [ngModel]=\"f.validators?.pattern ?? ''\"\n                    (ngModelChange)=\"store.setPatternValidator(store.keyOf(f), $event)\"\n                  />\n                  <mat-hint>{{ ui.text('patternHint') }}</mat-hint>\n                </mat-form-field>\n\n                <div class=\"deb-pattern-presets\">\n                  <span class=\"deb-section-title\">{{ ui.text('quickPresets') }}:</span>\n                  @for (preset of patternPresets; track preset.label) {\n                    <button\n                      type=\"button\"\n                      class=\"deb-preset-btn\"\n                      [attr.data-testid]=\"'preset-' + preset.label.toLowerCase()\"\n                      (click)=\"applyPreset(f, preset.pattern)\"\n                    >\n                      {{ preset.label }}\n                    </button>\n                  }\n                </div>\n\n                <div class=\"deb-row deb-row--split\">\n                  <span class=\"deb-section-title\">{{ ui.text('testPattern') }}</span>\n                  <div\n                    class=\"deb-pattern-status\"\n                    [class.deb-pattern-status--match]=\"regexEvaluation().status === 'match'\"\n                    [class.deb-pattern-status--no-match]=\"regexEvaluation().status === 'no-match'\"\n                    [class.deb-pattern-status--invalid]=\"regexEvaluation().status === 'invalid'\"\n                    [class.deb-pattern-status--idle]=\"regexEvaluation().status === 'idle'\"\n                    [class.deb-pattern-status--empty]=\"regexEvaluation().status === 'empty'\"\n                    data-testid=\"regex-test-status\"\n                  >\n                    @switch (regexEvaluation().status) {\n                      @case ('match') {\n                        <mat-icon>check_circle</mat-icon> {{ ui.text('patternMatch') }}\n                      }\n                      @case ('no-match') {\n                        <mat-icon>cancel</mat-icon> {{ ui.text('patternNoMatch') }}\n                      }\n                      @case ('invalid') {\n                        <mat-icon>error</mat-icon> {{ ui.text('patternInvalid') }}\n                      }\n                      @case ('idle') {\n                        <mat-icon>edit_note</mat-icon> {{ ui.text('testPatternPlaceholder') }}\n                      }\n                      @case ('empty') {\n                        <mat-icon>info</mat-icon> {{ ui.text('patternEmptyPrompt') }}\n                      }\n                    }\n                  </div>\n                </div>\n\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <input\n                    matInput\n                    data-testid=\"regex-test-input\"\n                    [placeholder]=\"ui.text('testPatternPlaceholder')\"\n                    [ngModel]=\"testSample()\"\n                    (ngModelChange)=\"testSample.set($event)\"\n                  />\n                </mat-form-field>\n              </div>\n            }\n          </div>\n        </details>\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionOptions') }}\n          @if ((f.options ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"options-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n            <mat-select\n              data-testid=\"data-source\"\n              [ngModel]=\"store.fieldDataSource(f)\"\n              (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n            >\n              <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n              <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n              <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Named lookup list -->\n          @if (store.fieldDataSource(f) === 'lookup') {\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n              <mat-label>{{ ui.text('listName') }}</mat-label>\n              <input\n                matInput\n                data-testid=\"list-name\"\n                [ngModel]=\"f.listName ?? ''\"\n                (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n              />\n            </mat-form-field>\n            <p class=\"deb-hint\">\n              {{ ui.text('listNameHint') }}\n            </p>\n          }\n\n          <!-- Inline options -->\n          @if (store.fieldDataSource(f) !== 'lookup') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n              <span class=\"deb-row__actions\">\n                @if (store.hasUnkeyedOptions()) {\n                  <button\n                    mat-stroked-button\n                    type=\"button\"\n                    data-testid=\"assign-option-keys\"\n                    (click)=\"store.assignOptionKeys()\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                  >\n                    <mat-icon>key</mat-icon> {{ ui.text('assignOptionKeys') }}\n                  </button>\n                }\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"add-option\"\n                  (click)=\"store.addOption(store.keyOf(f))\"\n                >\n                  <mat-icon>add</mat-icon> {{ ui.text('option') }}\n                </button>\n              </span>\n            </div>\n            @for (opt of f.options ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <!-- One input: the displayed text is the stored value. -->\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                  <mat-label>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n                  <input\n                    matInput\n                    [attr.data-testid]=\"'option-' + $index\"\n                    [ngModel]=\"optionLabel(opt)\"\n                    (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n                  />\n                </mat-form-field>\n                <!--\n                  Not a control. A key is the option's identity and every record already\n                  holding it matches on it, so a text box here \u2014 even a read-only one \u2014\n                  would be a data migration disguised as a field. It is shown because an\n                  author needs to be able to read it, and for no other reason.\n                -->\n                @if (store.optionKey(opt); as key) {\n                  <code\n                    class=\"deb-option-key\"\n                    [attr.data-testid]=\"'option-key-' + $index\"\n                    [attr.aria-label]=\"ui.text('optionKey')\"\n                    [matTooltip]=\"ui.text('optionKeyHint')\"\n                    >{{ key }}</code\n                  >\n                }\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  (click)=\"store.removeOption(store.keyOf(f), $index)\"\n                  [matTooltip]=\"ui.text('removeOption')\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.options ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Flags -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDisplay') }}\n        @if (displayFlagCount(f); as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"display-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-toggles\" role=\"group\" [attr.aria-label]=\"ui.text('display')\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.visibility ?? true\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n            >{{ ui.text('visible') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.table?.visible ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n            >{{ ui.text('tableColumn') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.readonly ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n            >{{ ui.text('readOnly') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.disabled ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n            >{{ ui.text('disabled') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.maskData ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n            >{{ ui.text('maskData') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            data-testid=\"toggle-critical\"\n            [ngModel]=\"f.criticalField ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n            [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n            >{{ ui.text('criticalField') }}</mat-slide-toggle\n          >\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"f.showOnMinimize ?? false\"\n            (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n            [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n            >{{ ui.text('showInSummary') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </details>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionVisibility') }}\n        @if (showWhenEntries(f).length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"visibility-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <div class=\"deb-row deb-row--split\">\n          <span class=\"deb-section-title\">{{ ui.text('showWhen') }}</span>\n          <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n            <mat-icon>add</mat-icon> {{ ui.text('condition') }}\n          </button>\n        </div>\n        @for (entry of showWhenEntries(f); track entry.key) {\n          <div class=\"deb-option-row\" data-testid=\"option-row\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('watchedField') }}</mat-label>\n              <mat-select\n                data-testid=\"show-when-field\"\n                [ngModel]=\"entry.key\"\n                (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n              >\n                @for (option of optionsWith(entry.key); track option.value) {\n                  <mat-option [value]=\"option.value\">\n                    {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n              <mat-label>{{ ui.text('equals') }}</mat-label>\n              <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n            </mat-form-field>\n            <button\n              mat-icon-button\n              type=\"button\"\n              color=\"warn\"\n              [matTooltip]=\"ui.text('removeCondition')\"\n              (click)=\"removeShowWhen(f, entry.key)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        }\n        @if (!showWhenEntries(f).length) {\n          <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Entity reference, cascade, autoPatch, and patchOnTrue -->\n    @if (meta()?.isEntityRef || f.type === 'boolean' || f.type === 'checkbox') {\n      <details class=\"deb-inspector__section\" open>\n        <summary class=\"deb-inspector__summary\">\n          {{ ui.text('sectionAutomation') }}\n          @if ((f.patchOnTrue ?? []).length; as count) {\n            <span class=\"deb-inspector__count\" data-testid=\"automation-count\">{{ count }}</span>\n          }\n          <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n        </summary>\n        <div class=\"deb-inspector__body\">\n          @if (meta()?.isEntityRef) {\n            <ngx-entity-reference-config />\n          }\n\n          <!-- patchOnTrue (boolean/checkbox only) -->\n          @if (f.type === 'boolean' || f.type === 'checkbox') {\n            <div class=\"deb-row deb-row--split\">\n              <span class=\"deb-section-title\">{{ ui.text('copyOnTrue') }}</span>\n              <button\n                mat-stroked-button\n                type=\"button\"\n                data-testid=\"add-patch-on-true\"\n                (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n              >\n                <mat-icon>add</mat-icon> {{ ui.text('mapping') }}\n              </button>\n            </div>\n            @for (mapping of f.patchOnTrue ?? []; track $index) {\n              <div class=\"deb-option-row\" data-testid=\"option-row\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('fromField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-from\"\n                    [ngModel]=\"mapping.from\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.from); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                  <mat-label>{{ ui.text('toField') }}</mat-label>\n                  <mat-select\n                    data-testid=\"patch-on-true-to\"\n                    [ngModel]=\"mapping.to\"\n                    (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n                  >\n                    @for (option of optionsWith(mapping.to); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  color=\"warn\"\n                  [matTooltip]=\"ui.text('removeMapping')\"\n                  (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            }\n            @if (!(f.patchOnTrue ?? []).length) {\n              <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n            }\n          }\n        </div>\n      </details>\n    }\n\n    <!-- Rules attached to this field -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionRules') }}\n        @if (store.rulesForSelectedField().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"rules-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-field-rules-list />\n      </div>\n    </details>\n\n    <!-- Field Dependencies Visualizer -->\n    <details\n      class=\"deb-inspector__section\"\n      open\n      data-testid=\"section-dependencies\"\n    >\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionDependencies') }}\n        @if (incomingDependencies().length + outgoingDependencies().length; as count) {\n          <span class=\"deb-inspector__count\" data-testid=\"dependencies-count\">{{ count }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        @if (incomingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('dependsOn') }} ({{ incomingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"incoming-dependencies\">\n            @for (dep of incomingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.sourceLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.sourceLabel })\"\n                  (click)=\"selectField(dep.sourceKey)\"\n                >\n                  <mat-icon>arrow_back</mat-icon> {{ ui.text('jumpToField', { field: dep.sourceLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (outgoingDependencies().length) {\n          <span class=\"deb-section-title\">{{ ui.text('affects') }} ({{ outgoingDependencies().length }})</span>\n          <div class=\"deb-dep-list\" data-testid=\"outgoing-dependencies\">\n            @for (dep of outgoingDependencies(); track dep.id) {\n              <div class=\"deb-dep-row\">\n                <div class=\"deb-dep-info\">\n                  <span class=\"deb-dep-name\">{{ dep.targetLabel }}</span>\n                  <span class=\"deb-dep-detail\">{{ dep.description }}</span>\n                </div>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  [matTooltip]=\"ui.text('jumpToField', { field: dep.targetLabel })\"\n                  (click)=\"selectField(dep.targetKey)\"\n                >\n                  <mat-icon>arrow_forward</mat-icon> {{ ui.text('jumpToField', { field: dep.targetLabel }) }}\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        @if (!incomingDependencies().length && !outgoingDependencies().length) {\n          <p class=\"deb-hint\" data-testid=\"no-field-dependencies\">{{ ui.text('noDependencies') }}</p>\n        }\n      </div>\n    </details>\n\n    <!-- Cross-entity field reference & drift management -->\n    <details class=\"deb-inspector__section\" open>\n      <summary class=\"deb-inspector__summary\">\n        {{ ui.text('sectionReference') }}\n        @if (f.isReferenced) {\n          <span class=\"deb-inspector__count\" data-testid=\"reference-count\">{{ f.referencedEntityKey }}</span>\n        }\n        <mat-icon class=\"deb-inspector__chevron\">expand_more</mat-icon>\n      </summary>\n      <div class=\"deb-inspector__body\">\n        <ngx-referenced-field-config />\n      </div>\n    </details>\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>{{ ui.text('inspectorEmpty') }}</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row>*{flex:1}.deb-row>.deb-chip{flex:0 0 auto}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-pattern-box{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.deb-pattern-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.deb-pattern-status--match{background:#dcfce7;color:#166534}.deb-pattern-status--no-match{background:#fee2e2;color:#991b1b}.deb-pattern-status--invalid{background:#fef3c7;color:#92400e}.deb-pattern-status--idle,.deb-pattern-status--empty{background:#f1f5f9;color:#334155}.deb-pattern-presets{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.deb-preset-btn{padding:2px 8px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;font-size:11px;color:#334155;cursor:pointer;transition:background .1s ease}.deb-preset-btn:hover{background:#e2e8f0}.deb-dep-list{display:flex;flex-direction:column;gap:6px;margin-top:4px;margin-bottom:12px}.deb-dep-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px}.deb-dep-info{display:flex;flex-direction:column;min-width:0}.deb-dep-name{font-size:12px;font-weight:600;color:#0f172a}.deb-dep-detail{font-size:11px;color:#64748b}\n"] }]
         }] });
 
 /**
@@ -3438,7 +3708,7 @@ class FieldPaletteComponent {
         <p class="deb-hint" data-testid="palette-no-match">{{ ui.text('paletteNoMatch', { query: query() }) }}</p>
       }
     </div>
-  `, isInline: true, styles: [".deb-palette{display:flex;flex-direction:column;gap:14px}.deb-palette__search{display:flex;align-items:center;gap:8px;padding:0 10px;height:36px;border:1px solid var(--deb-border, #e2e8f0);border-radius:8px;background:#f8fafc}.deb-palette__search:focus-within{border-color:var(--deb-accent, #6366f1);background:#fff;box-shadow:0 0 0 3px #6366f129}.deb-palette__search mat-icon{font-size:17px;width:17px;height:17px;color:var(--deb-muted, #64748b);flex:none}.deb-palette__search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:inherit}.deb-palette__search input::-webkit-search-cancel-button{display:none}.deb-palette__clear{appearance:none;border:0;background:none;padding:0;cursor:pointer;display:flex;color:var(--deb-muted, #64748b)}.deb-palette__clear:hover{color:#0f172a}.deb-palette__section{display:flex;flex-direction:column;gap:6px}.deb-palette__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.deb-palette__item{justify-content:flex-start!important;height:auto!important;min-height:38px;line-height:1.25!important;border-radius:8px!important;border:1px solid var(--deb-border, #e2e8f0)!important;padding:7px 10px!important;font-family:var(--font-heading, inherit)!important;font-weight:600!important;font-size:12.5px!important;transition:all .18s cubic-bezier(.16,1,.3,1)!important;background:#fff!important;text-align:left!important}.deb-palette__item:hover{border-color:#6366f1!important;background:#f5f3ff!important;color:#4f46e5!important;transform:translateY(-1px);box-shadow:0 4px 12px #6366f126!important}.deb-palette__item mat-icon{color:#4338ca;margin-right:7px;font-size:17px;width:17px;height:17px;flex:none}.deb-palette__item span{white-space:normal;overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){.deb-palette__item{transition:none!important}.deb-palette__item:hover{transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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 });
+  `, isInline: true, styles: [".deb-palette{display:flex;flex-direction:column;gap:14px}.deb-palette__search{display:flex;align-items:center;gap:8px;padding:0 10px;height:36px;border:1px solid var(--deb-border, #e2e8f0);border-radius:8px;background:#f8fafc}.deb-palette__search:focus-within{border-color:var(--deb-accent, #6366f1);background:#fff;box-shadow:0 0 0 3px #6366f129}.deb-palette__search mat-icon{font-size:17px;width:17px;height:17px;color:var(--deb-muted, #64748b);flex:none}.deb-palette__search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:inherit}.deb-palette__search input::-webkit-search-cancel-button{display:none}.deb-palette__clear{appearance:none;border:0;background:none;padding:0;cursor:pointer;display:flex;color:var(--deb-muted, #64748b)}.deb-palette__clear:hover{color:#0f172a}.deb-palette__section{display:flex;flex-direction:column;gap:6px}.deb-palette__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.deb-palette__item{justify-content:flex-start!important;height:auto!important;min-height:38px;line-height:1.25!important;border-radius:8px!important;border:1px solid var(--deb-border, #e2e8f0)!important;padding:7px 10px!important;font-family:var(--font-heading, inherit)!important;font-weight:600!important;font-size:12.5px!important;transition:all .18s cubic-bezier(.16,1,.3,1)!important;background:#fff!important;text-align:left!important}.deb-palette__item:hover{border-color:#6366f1!important;background:#f5f3ff!important;color:#4f46e5!important;transform:translateY(-1px);box-shadow:0 4px 12px #6366f126!important}.deb-palette__item mat-icon{color:#4338ca;margin-right:7px;font-size:17px;width:17px;height:17px;flex:none}.deb-palette__item span{white-space:normal;overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){.deb-palette__item{transition:none!important}.deb-palette__item:hover{transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldPaletteComponent, decorators: [{
             type: Component,
@@ -3667,7 +3937,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$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 });
+  `, isInline: true, styles: [".deb-tabs__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.deb-tab-card{border:1px solid var(--deb-border, #e5e7eb);border-radius:8px;padding:10px;margin-bottom:10px;background:var(--deb-bg-surface, #ffffff)}.deb-tab-card--system{border-left:4px solid var(--deb-accent, #6366f1)}.deb-tabs__row{display:flex;align-items:center;gap:4px}.deb-tab-settings{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:8px;font-size:13px}.deb-tab-module{margin-top:8px}.deb-subtabs{margin-top:8px;padding-left:16px;border-left:2px dashed var(--deb-border, #e5e7eb)}.deb-subtabs__title{font-size:12px;font-weight:600;color:var(--deb-muted, #6b7280)}.deb-subtab-row{margin-top:6px}.deb-grow{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TabManagerComponent, decorators: [{
             type: Component,
@@ -3959,7 +4229,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: 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 });
+  `, isInline: true, dependencies: [{ kind: "component", type: EntityBuilderTreeNodeComponent, selector: "ngx-entity-builder-tree-node", inputs: ["field", "index", "totalCount"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderTreeNodeComponent, decorators: [{
             type: Component,
@@ -4173,7 +4443,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: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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"] }, { 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: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityBuilderTreeNodeComponent, selector: "ngx-entity-builder-tree-node", inputs: ["field", "index", "totalCount"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderCanvasComponent, decorators: [{
             type: Component,
@@ -4255,6 +4525,408 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Output
             }] } });
 
+class RuleDependencyGraphComponent {
+    ui = inject(BuilderTextService);
+    store = inject(BuilderStore);
+    dismiss = new EventEmitter();
+    selectField = new EventEmitter();
+    filterQuery = signal('', ...(ngDevMode ? [{ debugName: "filterQuery" }] : /* istanbul ignore next */ []));
+    selectedType = signal('all', ...(ngDevMode ? [{ debugName: "selectedType" }] : /* istanbul ignore next */ []));
+    graphData = computed(() => computeRuleDependencies(this.store.config(), this.store.rules(), this.ui.language()), ...(ngDevMode ? [{ debugName: "graphData" }] : /* istanbul ignore next */ []));
+    filteredEdges = computed(() => {
+        const q = this.filterQuery().trim().toLowerCase();
+        const type = this.selectedType();
+        return this.graphData().edges.filter(edge => {
+            if (type !== 'all' && edge.type !== type)
+                return false;
+            if (!q)
+                return true;
+            return (edge.sourceLabel.toLowerCase().includes(q) ||
+                edge.sourceKey.toLowerCase().includes(q) ||
+                edge.targetLabel.toLowerCase().includes(q) ||
+                edge.targetKey.toLowerCase().includes(q) ||
+                edge.actionSummary.toLowerCase().includes(q) ||
+                edge.description.toLowerCase().includes(q));
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredEdges" }] : /* istanbul ignore next */ []));
+    typeName(type) {
+        switch (type) {
+            case 'rule':
+                return this.ui.text('dependencyTypeRule');
+            case 'showWhen':
+                return this.ui.text('dependencyTypeShowWhen');
+            case 'cascade':
+                return this.ui.text('dependencyTypeCascade');
+            case 'patchOnTrue':
+            case 'autoPatch':
+                return this.ui.text('dependencyTypePatch');
+        }
+    }
+    onNodeClick(key) {
+        if (!key)
+            return;
+        this.selectField.emit(key);
+        this.dismiss.emit();
+    }
+    onBackdropClick(event) {
+        if (event.target.classList.contains('deb-graph-backdrop')) {
+            this.dismiss.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RuleDependencyGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: RuleDependencyGraphComponent, isStandalone: true, selector: "ngx-rule-dependency-graph", outputs: { dismiss: "dismiss", selectField: "selectField" }, ngImport: i0, template: `
+    <div class="deb-graph-backdrop" (click)="onBackdropClick($event)">
+      <div class="deb-graph-dialog" role="dialog" aria-modal="true" data-testid="rule-graph-dialog">
+        <div class="deb-graph-header">
+          <div class="deb-graph-header__titles">
+            <div class="deb-graph-header__title-row">
+              <mat-icon class="deb-graph-icon">hub</mat-icon>
+              <h2 class="deb-graph-title">{{ ui.text('ruleGraphTitle') }}</h2>
+            </div>
+            <p class="deb-graph-subtitle">{{ ui.text('ruleGraphSubtitle') }}</p>
+          </div>
+          <button
+            mat-icon-button
+            type="button"
+            data-testid="close-rule-graph"
+            [matTooltip]="ui.text('closeDialog')"
+            (click)="dismiss.emit()"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        </div>
+
+        <div class="deb-graph-metrics">
+          <span class="deb-metric-pill deb-metric-pill--rule">
+            <mat-icon>rule</mat-icon>
+            {{ graphData().totalRules }} {{ ui.text('dependencyTypeRule') }}
+          </span>
+          <span class="deb-metric-pill deb-metric-pill--show-when">
+            <mat-icon>visibility</mat-icon>
+            {{ graphData().totalShowWhen }} {{ ui.text('dependencyTypeShowWhen') }}
+          </span>
+          <span class="deb-metric-pill deb-metric-pill--cascade">
+            <mat-icon>account_tree</mat-icon>
+            {{ graphData().totalCascades }} {{ ui.text('dependencyTypeCascade') }}
+          </span>
+          <span class="deb-metric-pill deb-metric-pill--patch">
+            <mat-icon>content_copy</mat-icon>
+            {{ graphData().totalPatches }} {{ ui.text('dependencyTypePatch') }}
+          </span>
+        </div>
+
+        <div class="deb-graph-controls">
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-graph-search">
+            <mat-icon matPrefix>search</mat-icon>
+            <input
+              matInput
+              data-testid="filter-dependencies-input"
+              [placeholder]="ui.text('filterDependencies')"
+              [ngModel]="filterQuery()"
+              (ngModelChange)="filterQuery.set($event)"
+            />
+            @if (filterQuery()) {
+              <button mat-icon-button matSuffix type="button" (click)="filterQuery.set('')">
+                <mat-icon>clear</mat-icon>
+              </button>
+            }
+          </mat-form-field>
+
+          <div class="deb-graph-filter-types">
+            <button
+              type="button"
+              class="deb-filter-btn"
+              [class.deb-filter-btn--active]="selectedType() === 'all'"
+              (click)="selectedType.set('all')"
+            >
+              All ({{ graphData().edges.length }})
+            </button>
+            <button
+              type="button"
+              class="deb-filter-btn"
+              [class.deb-filter-btn--active]="selectedType() === 'rule'"
+              (click)="selectedType.set('rule')"
+            >
+              {{ ui.text('dependencyTypeRule') }}
+            </button>
+            <button
+              type="button"
+              class="deb-filter-btn"
+              [class.deb-filter-btn--active]="selectedType() === 'showWhen'"
+              (click)="selectedType.set('showWhen')"
+            >
+              {{ ui.text('dependencyTypeShowWhen') }}
+            </button>
+            <button
+              type="button"
+              class="deb-filter-btn"
+              [class.deb-filter-btn--active]="selectedType() === 'cascade'"
+              (click)="selectedType.set('cascade')"
+            >
+              {{ ui.text('dependencyTypeCascade') }}
+            </button>
+            <button
+              type="button"
+              class="deb-filter-btn"
+              [class.deb-filter-btn--active]="selectedType() === 'patchOnTrue'"
+              (click)="selectedType.set('patchOnTrue')"
+            >
+              {{ ui.text('dependencyTypePatch') }}
+            </button>
+          </div>
+        </div>
+
+        <div class="deb-graph-body" data-testid="rule-graph-edges">
+          @if (filteredEdges().length === 0) {
+            <div class="deb-graph-empty" data-testid="no-dependencies-found">
+              <mat-icon>search_off</mat-icon>
+              <p>{{ ui.text('noDependenciesFound') }}</p>
+            </div>
+          }
+
+          @for (edge of filteredEdges(); track edge.id) {
+            <div class="deb-edge-card" [attr.data-testid]="'edge-card-' + edge.id">
+              <!-- Source -->
+              <button
+                type="button"
+                class="deb-node-chip deb-node-chip--source"
+                [matTooltip]="ui.text('jumpToField', { field: edge.sourceLabel })"
+                (click)="onNodeClick(edge.sourceKey)"
+              >
+                <mat-icon class="deb-node-chip__icon">tune</mat-icon>
+                <span class="deb-node-chip__label">{{ edge.sourceLabel }}</span>
+                <span class="deb-node-chip__key">{{ edge.sourceKey }}</span>
+              </button>
+
+              <!-- Connection details -->
+              <div class="deb-edge-flow">
+                <span
+                  class="deb-edge-badge"
+                  [class.deb-edge-badge--rule]="edge.type === 'rule'"
+                  [class.deb-edge-badge--show-when]="edge.type === 'showWhen'"
+                  [class.deb-edge-badge--cascade]="edge.type === 'cascade'"
+                  [class.deb-edge-badge--patch]="edge.type === 'patchOnTrue' || edge.type === 'autoPatch'"
+                >
+                  {{ typeName(edge.type) }}
+                </span>
+                <span class="deb-edge-arrow">
+                  <span class="deb-edge-summary">{{ edge.actionSummary }}</span>
+                  <mat-icon class="deb-edge-arrow-icon">arrow_forward</mat-icon>
+                </span>
+                <span class="deb-edge-desc">{{ edge.description }}</span>
+              </div>
+
+              <!-- Target -->
+              <button
+                type="button"
+                class="deb-node-chip deb-node-chip--target"
+                [matTooltip]="ui.text('jumpToField', { field: edge.targetLabel })"
+                (click)="onNodeClick(edge.targetKey)"
+              >
+                <mat-icon class="deb-node-chip__icon">output</mat-icon>
+                <span class="deb-node-chip__label">{{ edge.targetLabel }}</span>
+                <span class="deb-node-chip__key">{{ edge.targetKey }}</span>
+              </button>
+            </div>
+          }
+        </div>
+
+        <div class="deb-graph-footer">
+          <span class="deb-graph-count">
+            {{ ui.text('totalDependencies', { count: filteredEdges().length }) }}
+          </span>
+          <button mat-flat-button color="primary" type="button" (click)="dismiss.emit()">
+            {{ ui.text('closeDialog') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".deb-graph-backdrop{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;animation:debFadeIn .15s ease-out}@keyframes debFadeIn{0%{opacity:0}to{opacity:1}}.deb-graph-dialog{background:var(--deb-surface, #ffffff);border:1px solid var(--deb-border, #e2e8f0);border-radius:14px;width:100%;max-width:960px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px #00000040;overflow:hidden}.deb-graph-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--deb-border, #e2e8f0)}.deb-graph-header__title-row{display:flex;align-items:center;gap:10px}.deb-graph-icon{color:var(--deb-accent, #6366f1);font-size:26px;width:26px;height:26px}.deb-graph-title{font-size:18px;font-weight:700;color:#0f172a;margin:0}.deb-graph-subtitle{font-size:13px;color:var(--deb-muted, #64748b);margin:4px 0 0}.deb-graph-metrics{display:flex;gap:12px;padding:12px 24px;background:#f8fafc;border-bottom:1px solid var(--deb-border, #e2e8f0);flex-wrap:wrap}.deb-metric-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:9999px;font-size:12px;font-weight:600;border:1px solid transparent}.deb-metric-pill mat-icon{font-size:16px;width:16px;height:16px}.deb-metric-pill--rule{background:#eef2ff;color:#4f46e5;border-color:#c7d2fe}.deb-metric-pill--show-when{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0}.deb-metric-pill--cascade{background:#fefce8;color:#ca8a04;border-color:#fef08a}.deb-metric-pill--patch{background:#fdf2f8;color:#db2777;border-color:#fbcfe8}.deb-graph-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;border-bottom:1px solid var(--deb-border, #e2e8f0);flex-wrap:wrap}.deb-graph-search{flex:1;min-width:240px}.deb-graph-filter-types{display:flex;gap:6px;flex-wrap:wrap}.deb-filter-btn{padding:5px 12px;border-radius:6px;border:1px solid var(--deb-border, #e2e8f0);background:#fff;font-size:12px;font-weight:500;color:#475569;cursor:pointer;transition:all .15s ease}.deb-filter-btn:hover{background:#f1f5f9;color:#0f172a}.deb-filter-btn--active{background:var(--deb-accent, #6366f1);color:#fff;border-color:var(--deb-accent, #6366f1)}.deb-filter-btn--active:hover{background:var(--deb-accent-hover, #4f46e5)}.deb-graph-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:12px}.deb-graph-empty{text-align:center;padding:48px 16px;color:var(--deb-muted, #64748b)}.deb-graph-empty mat-icon{font-size:40px;width:40px;height:40px;margin-bottom:8px;opacity:.5}.deb-edge-card{display:grid;grid-template-columns:220px 1fr 220px;align-items:center;gap:16px;padding:12px 16px;background:#fff;border:1px solid var(--deb-border, #e2e8f0);border-radius:10px;transition:box-shadow .15s ease,border-color .15s ease}.deb-edge-card:hover{border-color:#cbd5e1;box-shadow:0 4px 6px -1px #0000000d}.deb-node-chip{display:flex;flex-direction:column;align-items:flex-start;padding:8px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer;text-align:left;width:100%;transition:background .15s ease,border-color .15s ease}.deb-node-chip:hover{background:#f1f5f9;border-color:var(--deb-accent, #6366f1)}.deb-node-chip__icon{font-size:16px;width:16px;height:16px;color:var(--deb-accent, #6366f1);margin-bottom:2px}.deb-node-chip__label{font-size:13px;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}.deb-node-chip__key{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;color:var(--deb-muted, #64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}.deb-edge-flow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}.deb-edge-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px}.deb-edge-badge--rule{background:#eef2ff;color:#4f46e5}.deb-edge-badge--show-when{background:#f0fdf4;color:#16a34a}.deb-edge-badge--cascade{background:#fefce8;color:#a16207}.deb-edge-badge--patch{background:#fdf2f8;color:#be185d}.deb-edge-arrow{display:inline-flex;align-items:center;gap:6px;color:#475569}.deb-edge-summary{font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;background:#f1f5f9;padding:2px 8px;border-radius:4px}.deb-edge-arrow-icon{font-size:16px;width:16px;height:16px;color:var(--deb-muted, #64748b)}.deb-edge-desc{font-size:11px;color:var(--deb-muted, #64748b)}.deb-graph-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-top:1px solid var(--deb-border, #e2e8f0);background:#f8fafc}.deb-graph-count{font-size:13px;color:var(--deb-muted, #64748b)}@media(max-width:768px){.deb-edge-card{grid-template-columns:1fr;gap:8px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RuleDependencyGraphComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-rule-dependency-graph', standalone: true, imports: [
+                        FormsModule,
+                        MatButtonModule,
+                        MatChipsModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatTooltipModule,
+                    ], template: `
+    <div class="deb-graph-backdrop" (click)="onBackdropClick($event)">
+      <div class="deb-graph-dialog" role="dialog" aria-modal="true" data-testid="rule-graph-dialog">
+        <div class="deb-graph-header">
+          <div class="deb-graph-header__titles">
+            <div class="deb-graph-header__title-row">
+              <mat-icon class="deb-graph-icon">hub</mat-icon>
+              <h2 class="deb-graph-title">{{ ui.text('ruleGraphTitle') }}</h2>
+            </div>
+            <p class="deb-graph-subtitle">{{ ui.text('ruleGraphSubtitle') }}</p>
+          </div>
+          <button
+            mat-icon-button
+            type="button"
+            data-testid="close-rule-graph"
+            [matTooltip]="ui.text('closeDialog')"
+            (click)="dismiss.emit()"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        </div>
+
+        <div class="deb-graph-metrics">
+          <span class="deb-metric-pill deb-metric-pill--rule">
+            <mat-icon>rule</mat-icon>
+            {{ graphData().totalRules }} {{ ui.text('dependencyTypeRule') }}
+          </span>
+          <span class="deb-metric-pill deb-metric-pill--show-when">
+            <mat-icon>visibility</mat-icon>
+            {{ graphData().totalShowWhen }} {{ ui.text('dependencyTypeShowWhen') }}
+          </span>
+          <span class="deb-metric-pill deb-metric-pill--cascade">
+            <mat-icon>account_tree</mat-icon>
+            {{ graphData().totalCascades }} {{ ui.text('dependencyTypeCascade') }}
+          </span>
+          <span class="deb-metric-pill deb-metric-pill--patch">
+            <mat-icon>content_copy</mat-icon>
+            {{ graphData().totalPatches }} {{ ui.text('dependencyTypePatch') }}
+          </span>
+        </div>
+
+        <div class="deb-graph-controls">
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-graph-search">
+            <mat-icon matPrefix>search</mat-icon>
+            <input
+              matInput
+              data-testid="filter-dependencies-input"
+              [placeholder]="ui.text('filterDependencies')"
+              [ngModel]="filterQuery()"
+              (ngModelChange)="filterQuery.set($event)"
+            />
+            @if (filterQuery()) {
+              <button mat-icon-button matSuffix type="button" (click)="filterQuery.set('')">
+                <mat-icon>clear</mat-icon>
+              </button>
+            }
+          </mat-form-field>
+
+          <div class="deb-graph-filter-types">
+            <button
+              type="button"
+              class="deb-filter-btn"
+              [class.deb-filter-btn--active]="selectedType() === 'all'"
+              (click)="selectedType.set('all')"
+            >
+              All ({{ graphData().edges.length }})
+            </button>
+            <button
+              type="button"
+              class="deb-filter-btn"
+              [class.deb-filter-btn--active]="selectedType() === 'rule'"
+              (click)="selectedType.set('rule')"
+            >
+              {{ ui.text('dependencyTypeRule') }}
+            </button>
+            <button
+              type="button"
+              class="deb-filter-btn"
+              [class.deb-filter-btn--active]="selectedType() === 'showWhen'"
+              (click)="selectedType.set('showWhen')"
+            >
+              {{ ui.text('dependencyTypeShowWhen') }}
+            </button>
+            <button
+              type="button"
+              class="deb-filter-btn"
+              [class.deb-filter-btn--active]="selectedType() === 'cascade'"
+              (click)="selectedType.set('cascade')"
+            >
+              {{ ui.text('dependencyTypeCascade') }}
+            </button>
+            <button
+              type="button"
+              class="deb-filter-btn"
+              [class.deb-filter-btn--active]="selectedType() === 'patchOnTrue'"
+              (click)="selectedType.set('patchOnTrue')"
+            >
+              {{ ui.text('dependencyTypePatch') }}
+            </button>
+          </div>
+        </div>
+
+        <div class="deb-graph-body" data-testid="rule-graph-edges">
+          @if (filteredEdges().length === 0) {
+            <div class="deb-graph-empty" data-testid="no-dependencies-found">
+              <mat-icon>search_off</mat-icon>
+              <p>{{ ui.text('noDependenciesFound') }}</p>
+            </div>
+          }
+
+          @for (edge of filteredEdges(); track edge.id) {
+            <div class="deb-edge-card" [attr.data-testid]="'edge-card-' + edge.id">
+              <!-- Source -->
+              <button
+                type="button"
+                class="deb-node-chip deb-node-chip--source"
+                [matTooltip]="ui.text('jumpToField', { field: edge.sourceLabel })"
+                (click)="onNodeClick(edge.sourceKey)"
+              >
+                <mat-icon class="deb-node-chip__icon">tune</mat-icon>
+                <span class="deb-node-chip__label">{{ edge.sourceLabel }}</span>
+                <span class="deb-node-chip__key">{{ edge.sourceKey }}</span>
+              </button>
+
+              <!-- Connection details -->
+              <div class="deb-edge-flow">
+                <span
+                  class="deb-edge-badge"
+                  [class.deb-edge-badge--rule]="edge.type === 'rule'"
+                  [class.deb-edge-badge--show-when]="edge.type === 'showWhen'"
+                  [class.deb-edge-badge--cascade]="edge.type === 'cascade'"
+                  [class.deb-edge-badge--patch]="edge.type === 'patchOnTrue' || edge.type === 'autoPatch'"
+                >
+                  {{ typeName(edge.type) }}
+                </span>
+                <span class="deb-edge-arrow">
+                  <span class="deb-edge-summary">{{ edge.actionSummary }}</span>
+                  <mat-icon class="deb-edge-arrow-icon">arrow_forward</mat-icon>
+                </span>
+                <span class="deb-edge-desc">{{ edge.description }}</span>
+              </div>
+
+              <!-- Target -->
+              <button
+                type="button"
+                class="deb-node-chip deb-node-chip--target"
+                [matTooltip]="ui.text('jumpToField', { field: edge.targetLabel })"
+                (click)="onNodeClick(edge.targetKey)"
+              >
+                <mat-icon class="deb-node-chip__icon">output</mat-icon>
+                <span class="deb-node-chip__label">{{ edge.targetLabel }}</span>
+                <span class="deb-node-chip__key">{{ edge.targetKey }}</span>
+              </button>
+            </div>
+          }
+        </div>
+
+        <div class="deb-graph-footer">
+          <span class="deb-graph-count">
+            {{ ui.text('totalDependencies', { count: filteredEdges().length }) }}
+          </span>
+          <button mat-flat-button color="primary" type="button" (click)="dismiss.emit()">
+            {{ ui.text('closeDialog') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  `, styles: [".deb-graph-backdrop{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;animation:debFadeIn .15s ease-out}@keyframes debFadeIn{0%{opacity:0}to{opacity:1}}.deb-graph-dialog{background:var(--deb-surface, #ffffff);border:1px solid var(--deb-border, #e2e8f0);border-radius:14px;width:100%;max-width:960px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px #00000040;overflow:hidden}.deb-graph-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--deb-border, #e2e8f0)}.deb-graph-header__title-row{display:flex;align-items:center;gap:10px}.deb-graph-icon{color:var(--deb-accent, #6366f1);font-size:26px;width:26px;height:26px}.deb-graph-title{font-size:18px;font-weight:700;color:#0f172a;margin:0}.deb-graph-subtitle{font-size:13px;color:var(--deb-muted, #64748b);margin:4px 0 0}.deb-graph-metrics{display:flex;gap:12px;padding:12px 24px;background:#f8fafc;border-bottom:1px solid var(--deb-border, #e2e8f0);flex-wrap:wrap}.deb-metric-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:9999px;font-size:12px;font-weight:600;border:1px solid transparent}.deb-metric-pill mat-icon{font-size:16px;width:16px;height:16px}.deb-metric-pill--rule{background:#eef2ff;color:#4f46e5;border-color:#c7d2fe}.deb-metric-pill--show-when{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0}.deb-metric-pill--cascade{background:#fefce8;color:#ca8a04;border-color:#fef08a}.deb-metric-pill--patch{background:#fdf2f8;color:#db2777;border-color:#fbcfe8}.deb-graph-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;border-bottom:1px solid var(--deb-border, #e2e8f0);flex-wrap:wrap}.deb-graph-search{flex:1;min-width:240px}.deb-graph-filter-types{display:flex;gap:6px;flex-wrap:wrap}.deb-filter-btn{padding:5px 12px;border-radius:6px;border:1px solid var(--deb-border, #e2e8f0);background:#fff;font-size:12px;font-weight:500;color:#475569;cursor:pointer;transition:all .15s ease}.deb-filter-btn:hover{background:#f1f5f9;color:#0f172a}.deb-filter-btn--active{background:var(--deb-accent, #6366f1);color:#fff;border-color:var(--deb-accent, #6366f1)}.deb-filter-btn--active:hover{background:var(--deb-accent-hover, #4f46e5)}.deb-graph-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:12px}.deb-graph-empty{text-align:center;padding:48px 16px;color:var(--deb-muted, #64748b)}.deb-graph-empty mat-icon{font-size:40px;width:40px;height:40px;margin-bottom:8px;opacity:.5}.deb-edge-card{display:grid;grid-template-columns:220px 1fr 220px;align-items:center;gap:16px;padding:12px 16px;background:#fff;border:1px solid var(--deb-border, #e2e8f0);border-radius:10px;transition:box-shadow .15s ease,border-color .15s ease}.deb-edge-card:hover{border-color:#cbd5e1;box-shadow:0 4px 6px -1px #0000000d}.deb-node-chip{display:flex;flex-direction:column;align-items:flex-start;padding:8px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer;text-align:left;width:100%;transition:background .15s ease,border-color .15s ease}.deb-node-chip:hover{background:#f1f5f9;border-color:var(--deb-accent, #6366f1)}.deb-node-chip__icon{font-size:16px;width:16px;height:16px;color:var(--deb-accent, #6366f1);margin-bottom:2px}.deb-node-chip__label{font-size:13px;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}.deb-node-chip__key{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;color:var(--deb-muted, #64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}.deb-edge-flow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}.deb-edge-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px}.deb-edge-badge--rule{background:#eef2ff;color:#4f46e5}.deb-edge-badge--show-when{background:#f0fdf4;color:#16a34a}.deb-edge-badge--cascade{background:#fefce8;color:#a16207}.deb-edge-badge--patch{background:#fdf2f8;color:#be185d}.deb-edge-arrow{display:inline-flex;align-items:center;gap:6px;color:#475569}.deb-edge-summary{font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;background:#f1f5f9;padding:2px 8px;border-radius:4px}.deb-edge-arrow-icon{font-size:16px;width:16px;height:16px;color:var(--deb-muted, #64748b)}.deb-edge-desc{font-size:11px;color:var(--deb-muted, #64748b)}.deb-graph-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-top:1px solid var(--deb-border, #e2e8f0);background:#f8fafc}.deb-graph-count{font-size:13px;color:var(--deb-muted, #64748b)}@media(max-width:768px){.deb-edge-card{grid-template-columns:1fr;gap:8px}}\n"] }]
+        }], propDecorators: { dismiss: [{
+                type: Output
+            }], selectField: [{
+                type: Output
+            }] } });
+
 /** RBAC actions surfaced in the settings panel. */
 const RBAC_ACTIONS = ['view', 'edit', 'delete'];
 /** Shared stable empty array — never allocate a fresh [] per change-detection (mat-select loops). */
@@ -4351,6 +5023,17 @@ class EntityBuilderComponent {
     togglePreview() {
         this.previewOpen.update(open => !open);
     }
+    ruleGraphOpen = signal(false, ...(ngDevMode ? [{ debugName: "ruleGraphOpen" }] : /* istanbul ignore next */ []));
+    openRuleGraph() {
+        this.ruleGraphOpen.set(true);
+    }
+    closeRuleGraph() {
+        this.ruleGraphOpen.set(false);
+    }
+    onSelectFieldFromGraph(key) {
+        this.store.selectField(key);
+        this.ruleGraphOpen.set(false);
+    }
     /*
      * Collapsing from inside a panel destroys the button that was just pressed, and expanding
      * from a rail destroys the rail. Either way the browser drops focus onto `<body>`, which
@@ -4489,7 +5172,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: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, rules: { classPropertyName: "rules", publicName: "rules", isSignal: false, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: false, isRequired: false, transformFunction: null }, uiLanguage: { classPropertyName: "uiLanguage", publicName: "uiLanguage", isSignal: false, isRequired: false, transformFunction: null }, availableRoles: { classPropertyName: "availableRoles", publicName: "availableRoles", isSignal: false, isRequired: false, transformFunction: null }, userRoles: { classPropertyName: "userRoles", publicName: "userRoles", isSignal: false, isRequired: false, transformFunction: null }, commonModules: { classPropertyName: "commonModules", publicName: "commonModules", isSignal: false, isRequired: false, transformFunction: null }, leftSidebarOpen: { classPropertyName: "leftSidebarOpen", publicName: "leftSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarOpen: { classPropertyName: "rightSidebarOpen", publicName: "rightSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, fieldsOpen: { classPropertyName: "fieldsOpen", publicName: "fieldsOpen", isSignal: true, isRequired: false, transformFunction: null }, previewOpen: { classPropertyName: "previewOpen", publicName: "previewOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", rulesChange: "rulesChange", save: "save", leftSidebarOpen: "leftSidebarOpenChange", rightSidebarOpen: "rightSidebarOpenChange", fieldsOpen: "fieldsOpenChange", previewOpen: "previewOpenChange" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-left-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"leftSidebarOpen()\"\n    [attr.aria-expanded]=\"leftSidebarOpen()\"\n    aria-controls=\"deb-left-sidebar\"\n    (click)=\"toggleLeftSidebar()\"\n    [matTooltip]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n    [attr.aria-label]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n  >\n    <mat-icon>{{ leftSidebarOpen() ? 'menu_open' : 'menu' }}</mat-icon>\n  </button>\n\n  <mat-icon class=\"deb-toolbar__mark\">dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-toolbar__entity\" data-testid=\"builder-toolbar-entity\">{{ store.config().entity || '\u2014' }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  <!--\n    The issue count, and the issues.\n    It used to be a button labelled \"0 / 1\" whose tooltip said to hover the items in the list\n    \u2014 a list that did not exist anywhere in the builder. The count now opens the problems\n    themselves, and an entry that names a field selects it, which is the action the person\n    reading the message wants to take next.\n  -->\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      data-testid=\"builder-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matMenuTriggerFor]=\"problemsMenu\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ ui.text('issuesCount', { errors: store.errors().length, total: store.problems().length }) }}\n    </button>\n    <mat-menu #problemsMenu=\"matMenu\" class=\"deb-problems-menu\">\n      @for (problem of store.problems(); track $index) {\n        <button\n          mat-menu-item\n          type=\"button\"\n          data-testid=\"builder-problem\"\n          [disabled]=\"!problem.fieldId\"\n          (click)=\"selectProblemField(problem)\"\n        >\n          <mat-icon [class.deb-problems--error]=\"problem.level === 'error'\">{{\n            problem.level === 'error' ? 'error' : 'warning'\n          }}</mat-icon>\n          <span class=\"deb-problems-menu__text\">{{ problem.message }}</span>\n        </button>\n      }\n    </mat-menu>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    (click)=\"copyJson()\"\n    [matTooltip]=\"ui.text('copyJson')\"\n    [attr.aria-label]=\"ui.text('copyJson')\"\n  >\n    <mat-icon>content_copy</mat-icon>\n    <!-- The label goes on a narrow screen; the tooltip and aria-label above carry the name. -->\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('copyJson') }}</span>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-fields\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"fieldsOpen()\"\n    [attr.aria-expanded]=\"fieldsOpen()\"\n    aria-controls=\"deb-fields-section\"\n    (click)=\"toggleFields()\"\n    [matTooltip]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n    [attr.aria-label]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n  >\n    <mat-icon>{{ fieldsOpen() ? 'view_agenda' : 'table_rows' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-preview\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"previewOpen()\"\n    [attr.aria-expanded]=\"previewOpen()\"\n    aria-controls=\"deb-preview-section\"\n    (click)=\"togglePreview()\"\n    [matTooltip]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n    [attr.aria-label]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n  >\n    <mat-icon>{{ previewOpen() ? 'visibility' : 'visibility_off' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-right-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"rightSidebarOpen()\"\n    [attr.aria-expanded]=\"rightSidebarOpen()\"\n    aria-controls=\"deb-right-sidebar\"\n    (click)=\"toggleRightSidebar()\"\n    [matTooltip]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n    [attr.aria-label]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n  >\n    <mat-icon>{{ rightSidebarOpen() ? 'vertical_split' : 'tune' }}</mat-icon>\n  </button>\n\n  <!--\n    The tooltip sits on a wrapper, not on the button.\n\n    A disabled button receives no pointer events, so a tooltip bound to it never fires \u2014 which\n    is the one state where the explanation is worth having. Saving stays disabled here (unlike\n    the renderer's Save, which refuses instead): an invalid *schema* is not something the\n    author can be shown their way out of one field at a time, and the issue list beside this\n    button is where that conversation happens.\n  -->\n  <span [matTooltip]=\"store.isValid() ? '' : ui.text('saveBlockedTooltip')\" [matTooltipDisabled]=\"store.isValid()\">\n    <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n    <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n      <mat-icon>save</mat-icon> {{ ui.text('save') }}\n    </button>\n  </span>\n</mat-toolbar>\n\n<div\n  class=\"deb-body\"\n  [class.deb-body--left-collapsed]=\"!leftSidebarOpen()\"\n  [class.deb-body--right-collapsed]=\"!rightSidebarOpen()\"\n>\n  <!-- Collapsed left sidebar: the rail that brings it back. -->\n  @if (!leftSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--left\"\n      data-testid=\"expand-left-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-left-sidebar\"\n      (click)=\"expandLeft()\"\n      [matTooltip]=\"ui.text('expandPalette')\"\n      [attr.aria-label]=\"ui.text('expandPalette')\"\n    >\n      <!--\n        The card's own icon, not its name turned on its side. A 44px rail can only hold a\n        label by rotating it, and a rotated word is one you have to tilt your head to read \u2014\n        worse in German, where \"Eigenschaften\" is half a screen tall. The tooltip and the\n        accessible name carry the words; the label below returns when the rail lies flat.\n      -->\n      <mat-icon class=\"deb-dock-btn__icon\">add_circle_outline</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('paletteRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_right</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-left-sidebar\"\n    class=\"deb-col deb-col--left\"\n    data-testid=\"builder-left-sidebar\"\n    [hidden]=\"!leftSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--palette\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">add_circle_outline</mat-icon>\n          {{ ui.text('addField') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-left-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-left-sidebar\"\n          (click)=\"collapseLeft()\"\n          [matTooltip]=\"ui.text('collapsePalette')\"\n          [attr.aria-label]=\"ui.text('collapsePalette')\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--settings\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ store.config().entity || ui.text('entityName') }}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <div class=\"deb-settings-grid\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('entityName') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"store.config().entity\"\n              (ngModelChange)=\"store.setEntityName($event)\"\n              [placeholder]=\"ui.text('entityNamePlaceholder')\"\n            />\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <div class=\"deb-mask-row\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"store.config().maskData ?? false\"\n            (ngModelChange)=\"store.setMaskData($event)\"\n            >{{ ui.text('maskEntity') }}</mat-slide-toggle\n          >\n        </div>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--tabs\">\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas, then what it renders as \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\" data-testid=\"builder-canvas-column\">\n    <!-- Collapsed fields canvas dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--fields\"\n      [class.deb-dock-pane--open]=\"!fieldsOpen()\"\n      [attr.aria-hidden]=\"fieldsOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--fields\"\n          data-testid=\"expand-fields\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-fields-section\"\n          (click)=\"expandFields()\"\n          [matTooltip]=\"ui.text('expandFields')\"\n          [attr.aria-label]=\"ui.text('expandFields')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">format_list_bulleted</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('fieldsRailLabel') }} ({{ store.fields().length }})</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Fields canvas section -->\n    <div\n      id=\"deb-fields-section\"\n      class=\"deb-toggle-pane deb-section--fields\"\n      [class.deb-toggle-pane--collapsed]=\"!fieldsOpen()\"\n      data-testid=\"builder-fields-section\"\n      [attr.aria-hidden]=\"!fieldsOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <ngx-entity-builder-canvas (collapse)=\"collapseFields()\" />\n      </div>\n    </div>\n\n    <!-- Collapsed preview dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--preview\"\n      [class.deb-dock-pane--open]=\"!previewOpen()\"\n      [attr.aria-hidden]=\"previewOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--preview\"\n          data-testid=\"expand-preview\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-preview-section\"\n          (click)=\"expandPreview()\"\n          [matTooltip]=\"ui.text('expandPreview')\"\n          [attr.aria-label]=\"ui.text('expandPreview')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">visibility</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('previewRailLabel') }}</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_up</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!--\n      The live preview, moved up from the footer.\n      Directly under the field list is where a change and its effect can be seen in the same glance.\n    -->\n    <div\n      id=\"deb-preview-section\"\n      class=\"deb-toggle-pane deb-preview-slot\"\n      [class.deb-toggle-pane--collapsed]=\"!previewOpen()\"\n      data-testid=\"builder-preview-section\"\n      [attr.aria-hidden]=\"!previewOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <mat-card class=\"deb-card deb-card--preview\">\n          <mat-card-header>\n            <mat-card-title class=\"deb-card__title\">\n              <mat-icon class=\"deb-card__icon\">visibility</mat-icon>\n              {{ ui.text('previewHeading') }}\n            </mat-card-title>\n            <button\n              mat-icon-button\n              type=\"button\"\n              class=\"deb-card__collapse-btn\"\n              data-testid=\"collapse-preview\"\n              aria-expanded=\"true\"\n              aria-controls=\"deb-preview-section\"\n              (click)=\"collapsePreview()\"\n              [matTooltip]=\"ui.text('collapsePreview')\"\n              [attr.aria-label]=\"ui.text('collapsePreview')\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          </mat-card-header>\n          <mat-card-content>\n            <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapsed right sidebar: the rail that brings it back. -->\n  @if (!rightSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--right\"\n      data-testid=\"expand-right-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-right-sidebar\"\n      (click)=\"expandRight()\"\n      [matTooltip]=\"ui.text('expandInspector')\"\n      [attr.aria-label]=\"ui.text('expandInspector')\"\n    >\n      <mat-icon class=\"deb-dock-btn__icon\">tune</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('inspectorRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_left</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-right-sidebar\"\n    class=\"deb-col deb-col--right\"\n    data-testid=\"builder-right-sidebar\"\n    [hidden]=\"!rightSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--inspector\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ ui.text('fieldProperties') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-right-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-right-sidebar\"\n          (click)=\"collapseRight()\"\n          [matTooltip]=\"ui.text('collapseInspector')\"\n          [attr.aria-label]=\"ui.text('collapseInspector')\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: the exported JSON \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n</div>\n", styles: ["ngx-entity-builder{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-ink: #4f46e5;--deb-accent-soft: #eef2ff;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;--deb-rail: 44px;--deb-left: clamp(320px, 26vw, 460px);--deb-right: 380px;--deb-left-wide: calc(var(--deb-left) + var(--deb-right) - var(--deb-rail));--deb-toolbar-h: 56px;--deb-sticky-top: calc(var(--deb-toolbar-h) + 20px);display:block}.deb-toolbar{background:var(--deb-surface);color:#0f172a;border-bottom:1px solid var(--deb-border);gap:4px;height:var(--deb-toolbar-h);position:sticky;top:0;z-index:20;flex-wrap:wrap;padding-block:4px}mat-toolbar.deb-toolbar{height:auto;min-height:var(--deb-toolbar-h)}.deb-toolbar__mark{color:var(--deb-accent-ink)}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:15px;font-weight:700;color:#0f172a}.deb-toolbar__entity{margin-left:10px;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deb-spacer{flex:1 1 auto}.deb-problems{font-weight:600}.deb-problems--error{color:#ef4444;font-weight:600}.deb-problems-menu__text{white-space:normal;line-height:1.35;padding:6px 0}.deb-problems-menu .mat-mdc-menu-item{height:auto;min-height:40px}.deb-problems-menu{max-width:460px}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-right);gap:24px;padding:24px;align-items:start;transition:grid-template-columns .25s cubic-bezier(.16,1,.3,1)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-right)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left-wide) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col{display:flex;flex-direction:column;gap:18px;min-width:0}.deb-col[hidden],.deb-section--fields[hidden],.deb-preview-slot[hidden]{display:none!important}.deb-col>.deb-card{flex:0 0 auto}@keyframes debDockFadeIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes debDockSlideInY{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debSectionExpand{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debColLeftExpand{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes debColRightExpand{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.deb-toggle-pane{display:grid;grid-template-rows:1fr;opacity:1;transform:translateY(0);transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-toggle-pane--collapsed{grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden}.deb-toggle-pane__inner,.deb-dock-pane__inner{overflow:hidden;min-height:0;padding:4px 2px;margin:-4px -2px}.deb-dock-pane{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-dock-pane--open{grid-template-rows:1fr;opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}.deb-col--left:not([hidden]){animation:debColLeftExpand .24s cubic-bezier(.16,1,.3,1) forwards}.deb-col--right:not([hidden]){animation:debColRightExpand .24s cubic-bezier(.16,1,.3,1) forwards}@media(prefers-reduced-motion:reduce){.deb-body,.deb-col--left,.deb-col--right,.deb-col--center,.deb-section--fields,.deb-preview-slot,.deb-dock-btn,.deb-card,.deb-sidebar-toggle-btn{transition:none!important;animation:none!important}}.deb-col--left,.deb-col--right{position:sticky;top:var(--deb-sticky-top);max-height:calc(100vh - var(--deb-sticky-top) - 20px);overflow-y:auto;padding-right:4px;transition:opacity .2s ease}.deb-card{border-radius:12px!important;border:1px solid var(--deb-border, #e2e8f0)!important;background:var(--deb-surface, #ffffff)!important;box-shadow:0 1px 3px #00000008,0 1px 2px #00000005!important;transition:box-shadow .2s ease,border-color .2s ease!important;overflow:hidden}.deb-card:hover{border-color:#cbd5e1!important;box-shadow:0 4px 12px #0f172a0d!important}.deb-card mat-card-header{padding:14px 16px 10px!important;display:flex!important;align-items:center!important}.deb-card mat-card-content{padding:0 16px 16px!important}.deb-card__title{display:flex!important;align-items:center!important;gap:8px!important;font-family:var(--font-heading, sans-serif)!important;font-size:13.5px!important;font-weight:700!important;color:#0f172a!important;margin:0!important}.deb-card__icon{color:var(--deb-accent-ink, #4f46e5)!important;font-size:18px!important;width:18px!important;height:18px!important;flex:none!important}.deb-card__collapse-btn{margin-left:auto!important;width:32px!important;height:32px!important;color:var(--deb-muted, #64748b)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.deb-card__collapse-btn:hover{color:#0f172a!important;background:#f1f5f9!important}.deb-sidebar-toggle-btn{color:var(--deb-muted, #64748b);transition:all .15s ease}.deb-sidebar-toggle-btn:hover{color:#0f172a;background:#f1f5f9}.deb-sidebar-toggle-btn--active{color:var(--deb-accent-ink, #4f46e5)!important;background:var(--deb-accent-soft, #eef2ff)!important}.deb-dock-btn{position:sticky;top:var(--deb-sticky-top);align-self:start;justify-self:center;z-index:10;display:inline-flex;flex-direction:column;align-items:center;gap:10px;width:36px;padding:12px 0;border-radius:9999px;border:1px solid #c7d2fe;background:#fff;color:var(--deb-accent-hover, #4f46e5);font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;box-shadow:0 4px 14px #6366f126;cursor:pointer;animation:debDockFadeIn .22s cubic-bezier(.16,1,.3,1) forwards;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.deb-dock-btn:hover{background:var(--deb-accent-soft, #eef2ff);border-color:var(--deb-accent, #6366f1);box-shadow:0 6px 20px #6366f140}.deb-dock-btn mat-icon{flex:none}.deb-dock-btn__icon{font-size:20px;width:20px;height:20px;color:var(--deb-accent-ink, #4f46e5)}.deb-dock-btn__chevron{font-size:16px;width:16px;height:16px;opacity:.75}.deb-dock-btn__label{display:none;letter-spacing:.04em;white-space:nowrap}.deb-dock-btn--horizontal{flex-direction:row;justify-content:center;width:100%;padding:10px 18px;border-radius:12px;gap:12px;position:static;animation:debDockSlideInY .22s cubic-bezier(.16,1,.3,1) forwards}.deb-dock-btn--horizontal .deb-dock-btn__label{display:inline}.deb-card--preview mat-card-content{padding:0 16px 16px!important}.deb-settings-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:6px}.deb-mask-row{padding:4px 0 8px}.deb-preview-slot:empty{display:none}@media(max-width:1300px){ngx-entity-builder{--deb-left: clamp(280px, 28vw, 340px)}.deb-body{grid-template-columns:var(--deb-left) minmax(0,1fr)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col--right{grid-column:2;position:static;max-height:none;overflow:visible}}@media(max-width:900px){ngx-entity-builder{--deb-rail: 36px}.deb-body{gap:12px;padding:12px;grid-template-columns:minmax(0,1fr)}.deb-body.deb-body--left-collapsed,.deb-body.deb-body--right-collapsed,.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:minmax(0,1fr)}.deb-col--left,.deb-col--right,.deb-dock-btn--left,.deb-dock-btn--right{grid-column:1;position:static;max-height:none;overflow:visible}.deb-dock-btn--left,.deb-dock-btn--right{flex-direction:row;justify-content:center;width:auto;justify-self:stretch;padding:10px 16px}.deb-dock-btn__label{display:inline}}@media(max-width:900px){.deb-toolbar__title,.deb-toolbar__mark{display:none}}@media(max-width:560px){.deb-toolbar__btn-label{display:none}}.deb-canvas__group{margin:14px 0 6px;font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-canvas__group:first-of-type{margin-top:0}.deb-field-list{display:flex;flex-direction:column;gap:8px}.deb-field-list:empty{min-height:44px;border:1px dashed var(--deb-border);border-radius:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-field-row__actions{display:flex;align-items:center;margin-left:auto;opacity:0;transition:opacity .15s ease}.deb-field-row:hover .deb-field-row__actions,.deb-field-row:focus-within .deb-field-row__actions,.deb-field-row--active .deb-field-row__actions{opacity:1}@media(hover:none){.deb-field-row__actions{opacity:1}}@media(max-width:560px){.deb-field-row{flex-wrap:wrap;row-gap:4px}.deb-field-row__actions{margin-left:auto}}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca;flex:none}.deb-span-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f1f5f9;color:#475569;font-family:ui-monospace,SFMono-Regular,monospace;flex:none}.deb-drag-handle{cursor:grab;color:#7d8a9c;transition:color .15s;flex:none}.deb-drag-handle:hover{color:var(--deb-accent-ink)}.deb-field-type{color:var(--deb-accent-ink);flex:none}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#dc2626;font-weight:700;flex:none}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview.deb-field-row{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent, #6366f1);background:#fff}.cdk-drag-placeholder.deb-field-row{opacity:.35}.cdk-drag-animating.deb-field-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}@media(prefers-reduced-motion:reduce){.deb-field-row,.deb-field-row__actions,.cdk-drag-animating.deb-field-row,.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:none}.deb-field-row:hover{transform:none}}.deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__section{border:1px solid var(--deb-border);border-radius:10px;overflow:hidden;background:var(--deb-surface)}.deb-inspector__summary{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;cursor:pointer;list-style:none;font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted);background:#f8fafc;-webkit-user-select:none;user-select:none}.deb-inspector__summary::-webkit-details-marker{display:none}.deb-inspector__summary:hover{color:#0f172a}.deb-inspector__summary:focus-visible{outline:2px solid var(--deb-accent);outline-offset:-2px}.deb-inspector__chevron{margin-left:auto;transition:transform .18s ease;color:#7d8a9c;font-size:20px;width:20px;height:20px}.deb-inspector__section[open]>.deb-inspector__summary>.deb-inspector__chevron{transform:rotate(180deg)}.deb-inspector__count{padding:1px 7px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:10px;font-weight:700;letter-spacing:0}.deb-inspector__body{display:flex;flex-direction:column;gap:10px;padding:12px;border-top:1px solid var(--deb-border)}@media(prefers-reduced-motion:reduce){.deb-inspector__chevron{transition:none}}.deb-span-picker{display:flex;gap:4px;flex-wrap:wrap}.deb-span-picker__btn{appearance:none;cursor:pointer;flex:1;min-width:46px;padding:7px 4px;border:1px solid var(--deb-border);border-radius:8px;background:var(--deb-surface);color:var(--deb-muted);font:inherit;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease}.deb-span-picker__btn:hover{border-color:#a5b4fc;color:#0f172a}.deb-span-picker__btn:focus-visible{outline:2px solid var(--deb-accent);outline-offset:2px}.deb-span-picker__btn--active{border-color:var(--deb-accent);background:var(--deb-accent-soft);color:var(--deb-accent-hover)}.deb-option-row{display:flex;align-items:center;gap:8px}.deb-option-key{flex:0 0 8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 8px;border-radius:4px;background:var(--deb-surface-2, rgba(0, 0, 0, .05));color:var(--deb-muted);font-family:var(--font-mono, ui-monospace, monospace);font-size:12px}.deb-row__actions{display:flex;gap:8px;align-items:center}.deb-flags-row{display:flex;gap:16px;flex-wrap:wrap;padding:2px 0 6px}.deb-param-validators-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-toggles{display:flex;flex-direction:column;gap:6px}.deb-toggles mat-slide-toggle{display:flex;justify-content:space-between;width:100%;padding:5px 8px;border-radius:8px;background:#f8fafc;border:1px solid #f1f5f9;transition:all .15s ease}.deb-toggles mat-slide-toggle:hover{background:#f1f5f9;border-color:#e2e8f0}@media(prefers-reduced-motion:reduce){.deb-span-picker__btn{transition:none}}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$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", outputs: ["collapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, rules: { classPropertyName: "rules", publicName: "rules", isSignal: false, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: false, isRequired: false, transformFunction: null }, uiLanguage: { classPropertyName: "uiLanguage", publicName: "uiLanguage", isSignal: false, isRequired: false, transformFunction: null }, availableRoles: { classPropertyName: "availableRoles", publicName: "availableRoles", isSignal: false, isRequired: false, transformFunction: null }, userRoles: { classPropertyName: "userRoles", publicName: "userRoles", isSignal: false, isRequired: false, transformFunction: null }, commonModules: { classPropertyName: "commonModules", publicName: "commonModules", isSignal: false, isRequired: false, transformFunction: null }, leftSidebarOpen: { classPropertyName: "leftSidebarOpen", publicName: "leftSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarOpen: { classPropertyName: "rightSidebarOpen", publicName: "rightSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, fieldsOpen: { classPropertyName: "fieldsOpen", publicName: "fieldsOpen", isSignal: true, isRequired: false, transformFunction: null }, previewOpen: { classPropertyName: "previewOpen", publicName: "previewOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", rulesChange: "rulesChange", save: "save", leftSidebarOpen: "leftSidebarOpenChange", rightSidebarOpen: "rightSidebarOpenChange", fieldsOpen: "fieldsOpenChange", previewOpen: "previewOpenChange" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-left-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"leftSidebarOpen()\"\n    [attr.aria-expanded]=\"leftSidebarOpen()\"\n    aria-controls=\"deb-left-sidebar\"\n    (click)=\"toggleLeftSidebar()\"\n    [matTooltip]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n    [attr.aria-label]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n  >\n    <mat-icon>{{ leftSidebarOpen() ? 'menu_open' : 'menu' }}</mat-icon>\n  </button>\n\n  <mat-icon class=\"deb-toolbar__mark\">dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-toolbar__entity\" data-testid=\"builder-toolbar-entity\">{{ store.config().entity || '\u2014' }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  <!--\n    The issue count, and the issues.\n    It used to be a button labelled \"0 / 1\" whose tooltip said to hover the items in the list\n    \u2014 a list that did not exist anywhere in the builder. The count now opens the problems\n    themselves, and an entry that names a field selects it, which is the action the person\n    reading the message wants to take next.\n  -->\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      data-testid=\"builder-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matMenuTriggerFor]=\"problemsMenu\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ ui.text('issuesCount', { errors: store.errors().length, total: store.problems().length }) }}\n    </button>\n    <mat-menu #problemsMenu=\"matMenu\" class=\"deb-problems-menu\">\n      @for (problem of store.problems(); track $index) {\n        <button\n          mat-menu-item\n          type=\"button\"\n          data-testid=\"builder-problem\"\n          [disabled]=\"!problem.fieldId\"\n          (click)=\"selectProblemField(problem)\"\n        >\n          <mat-icon [class.deb-problems--error]=\"problem.level === 'error'\">{{\n            problem.level === 'error' ? 'error' : 'warning'\n          }}</mat-icon>\n          <span class=\"deb-problems-menu__text\">{{ problem.message }}</span>\n        </button>\n      }\n    </mat-menu>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    (click)=\"copyJson()\"\n    [matTooltip]=\"ui.text('copyJson')\"\n    [attr.aria-label]=\"ui.text('copyJson')\"\n  >\n    <mat-icon>content_copy</mat-icon>\n    <!-- The label goes on a narrow screen; the tooltip and aria-label above carry the name. -->\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('copyJson') }}</span>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    data-testid=\"builder-rule-graph\"\n    (click)=\"openRuleGraph()\"\n    [matTooltip]=\"ui.text('ruleGraph')\"\n    [attr.aria-label]=\"ui.text('ruleGraph')\"\n  >\n    <mat-icon>hub</mat-icon>\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('ruleGraph') }}</span>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-fields\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"fieldsOpen()\"\n    [attr.aria-expanded]=\"fieldsOpen()\"\n    aria-controls=\"deb-fields-section\"\n    (click)=\"toggleFields()\"\n    [matTooltip]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n    [attr.aria-label]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n  >\n    <mat-icon>{{ fieldsOpen() ? 'view_agenda' : 'table_rows' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-preview\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"previewOpen()\"\n    [attr.aria-expanded]=\"previewOpen()\"\n    aria-controls=\"deb-preview-section\"\n    (click)=\"togglePreview()\"\n    [matTooltip]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n    [attr.aria-label]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n  >\n    <mat-icon>{{ previewOpen() ? 'visibility' : 'visibility_off' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-right-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"rightSidebarOpen()\"\n    [attr.aria-expanded]=\"rightSidebarOpen()\"\n    aria-controls=\"deb-right-sidebar\"\n    (click)=\"toggleRightSidebar()\"\n    [matTooltip]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n    [attr.aria-label]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n  >\n    <mat-icon>{{ rightSidebarOpen() ? 'vertical_split' : 'tune' }}</mat-icon>\n  </button>\n\n  <!--\n    The tooltip sits on a wrapper, not on the button.\n\n    A disabled button receives no pointer events, so a tooltip bound to it never fires \u2014 which\n    is the one state where the explanation is worth having. Saving stays disabled here (unlike\n    the renderer's Save, which refuses instead): an invalid *schema* is not something the\n    author can be shown their way out of one field at a time, and the issue list beside this\n    button is where that conversation happens.\n  -->\n  <span [matTooltip]=\"store.isValid() ? '' : ui.text('saveBlockedTooltip')\" [matTooltipDisabled]=\"store.isValid()\">\n    <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n    <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n      <mat-icon>save</mat-icon> {{ ui.text('save') }}\n    </button>\n  </span>\n</mat-toolbar>\n\n<div\n  class=\"deb-body\"\n  [class.deb-body--left-collapsed]=\"!leftSidebarOpen()\"\n  [class.deb-body--right-collapsed]=\"!rightSidebarOpen()\"\n>\n  <!-- Collapsed left sidebar: the rail that brings it back. -->\n  @if (!leftSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--left\"\n      data-testid=\"expand-left-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-left-sidebar\"\n      (click)=\"expandLeft()\"\n      [matTooltip]=\"ui.text('expandPalette')\"\n      [attr.aria-label]=\"ui.text('expandPalette')\"\n    >\n      <!--\n        The card's own icon, not its name turned on its side. A 44px rail can only hold a\n        label by rotating it, and a rotated word is one you have to tilt your head to read \u2014\n        worse in German, where \"Eigenschaften\" is half a screen tall. The tooltip and the\n        accessible name carry the words; the label below returns when the rail lies flat.\n      -->\n      <mat-icon class=\"deb-dock-btn__icon\">add_circle_outline</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('paletteRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_right</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-left-sidebar\"\n    class=\"deb-col deb-col--left\"\n    data-testid=\"builder-left-sidebar\"\n    [hidden]=\"!leftSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--palette\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">add_circle_outline</mat-icon>\n          {{ ui.text('addField') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-left-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-left-sidebar\"\n          (click)=\"collapseLeft()\"\n          [matTooltip]=\"ui.text('collapsePalette')\"\n          [attr.aria-label]=\"ui.text('collapsePalette')\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--settings\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ store.config().entity || ui.text('entityName') }}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <div class=\"deb-settings-grid\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('entityName') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"store.config().entity\"\n              (ngModelChange)=\"store.setEntityName($event)\"\n              [placeholder]=\"ui.text('entityNamePlaceholder')\"\n            />\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <div class=\"deb-mask-row\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"store.config().maskData ?? false\"\n            (ngModelChange)=\"store.setMaskData($event)\"\n            >{{ ui.text('maskEntity') }}</mat-slide-toggle\n          >\n        </div>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--tabs\">\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas, then what it renders as \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\" data-testid=\"builder-canvas-column\">\n    <!-- Collapsed fields canvas dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--fields\"\n      [class.deb-dock-pane--open]=\"!fieldsOpen()\"\n      [attr.aria-hidden]=\"fieldsOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--fields\"\n          data-testid=\"expand-fields\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-fields-section\"\n          (click)=\"expandFields()\"\n          [matTooltip]=\"ui.text('expandFields')\"\n          [attr.aria-label]=\"ui.text('expandFields')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">format_list_bulleted</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('fieldsRailLabel') }} ({{ store.fields().length }})</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Fields canvas section -->\n    <div\n      id=\"deb-fields-section\"\n      class=\"deb-toggle-pane deb-section--fields\"\n      [class.deb-toggle-pane--collapsed]=\"!fieldsOpen()\"\n      data-testid=\"builder-fields-section\"\n      [attr.aria-hidden]=\"!fieldsOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <ngx-entity-builder-canvas (collapse)=\"collapseFields()\" />\n      </div>\n    </div>\n\n    <!-- Collapsed preview dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--preview\"\n      [class.deb-dock-pane--open]=\"!previewOpen()\"\n      [attr.aria-hidden]=\"previewOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--preview\"\n          data-testid=\"expand-preview\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-preview-section\"\n          (click)=\"expandPreview()\"\n          [matTooltip]=\"ui.text('expandPreview')\"\n          [attr.aria-label]=\"ui.text('expandPreview')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">visibility</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('previewRailLabel') }}</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_up</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!--\n      The live preview, moved up from the footer.\n      Directly under the field list is where a change and its effect can be seen in the same glance.\n    -->\n    <div\n      id=\"deb-preview-section\"\n      class=\"deb-toggle-pane deb-preview-slot\"\n      [class.deb-toggle-pane--collapsed]=\"!previewOpen()\"\n      data-testid=\"builder-preview-section\"\n      [attr.aria-hidden]=\"!previewOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <mat-card class=\"deb-card deb-card--preview\">\n          <mat-card-header>\n            <mat-card-title class=\"deb-card__title\">\n              <mat-icon class=\"deb-card__icon\">visibility</mat-icon>\n              {{ ui.text('previewHeading') }}\n            </mat-card-title>\n            <button\n              mat-icon-button\n              type=\"button\"\n              class=\"deb-card__collapse-btn\"\n              data-testid=\"collapse-preview\"\n              aria-expanded=\"true\"\n              aria-controls=\"deb-preview-section\"\n              (click)=\"collapsePreview()\"\n              [matTooltip]=\"ui.text('collapsePreview')\"\n              [attr.aria-label]=\"ui.text('collapsePreview')\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          </mat-card-header>\n          <mat-card-content>\n            <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapsed right sidebar: the rail that brings it back. -->\n  @if (!rightSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--right\"\n      data-testid=\"expand-right-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-right-sidebar\"\n      (click)=\"expandRight()\"\n      [matTooltip]=\"ui.text('expandInspector')\"\n      [attr.aria-label]=\"ui.text('expandInspector')\"\n    >\n      <mat-icon class=\"deb-dock-btn__icon\">tune</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('inspectorRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_left</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-right-sidebar\"\n    class=\"deb-col deb-col--right\"\n    data-testid=\"builder-right-sidebar\"\n    [hidden]=\"!rightSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--inspector\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ ui.text('fieldProperties') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-right-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-right-sidebar\"\n          (click)=\"collapseRight()\"\n          [matTooltip]=\"ui.text('collapseInspector')\"\n          [attr.aria-label]=\"ui.text('collapseInspector')\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: the exported JSON \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n</div>\n\n@if (ruleGraphOpen()) {\n  <ngx-rule-dependency-graph\n    (dismiss)=\"closeRuleGraph()\"\n    (selectField)=\"onSelectFieldFromGraph($event)\"\n  />\n}\n", styles: ["ngx-entity-builder{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-ink: #4f46e5;--deb-accent-soft: #eef2ff;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;--deb-rail: 44px;--deb-left: clamp(320px, 26vw, 460px);--deb-right: 380px;--deb-left-wide: calc(var(--deb-left) + var(--deb-right) - var(--deb-rail));--deb-toolbar-h: 56px;--deb-sticky-top: calc(var(--deb-toolbar-h) + 20px);display:block}.deb-toolbar{background:var(--deb-surface);color:#0f172a;border-bottom:1px solid var(--deb-border);gap:4px;height:var(--deb-toolbar-h);position:sticky;top:0;z-index:20;flex-wrap:wrap;padding-block:4px}mat-toolbar.deb-toolbar{height:auto;min-height:var(--deb-toolbar-h)}.deb-toolbar__mark{color:var(--deb-accent-ink)}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:15px;font-weight:700;color:#0f172a}.deb-toolbar__entity{margin-left:10px;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deb-spacer{flex:1 1 auto}.deb-problems{font-weight:600}.deb-problems--error{color:#ef4444;font-weight:600}.deb-problems-menu__text{white-space:normal;line-height:1.35;padding:6px 0}.deb-problems-menu .mat-mdc-menu-item{height:auto;min-height:40px}.deb-problems-menu{max-width:460px}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-right);gap:24px;padding:24px;align-items:start;transition:grid-template-columns .25s cubic-bezier(.16,1,.3,1)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-right)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left-wide) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col{display:flex;flex-direction:column;gap:18px;min-width:0}.deb-col[hidden],.deb-section--fields[hidden],.deb-preview-slot[hidden]{display:none!important}.deb-col>.deb-card{flex:0 0 auto}@keyframes debDockFadeIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes debDockSlideInY{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debSectionExpand{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debColLeftExpand{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes debColRightExpand{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.deb-toggle-pane{display:grid;grid-template-rows:1fr;opacity:1;transform:translateY(0);transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-toggle-pane--collapsed{grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden}.deb-toggle-pane__inner,.deb-dock-pane__inner{overflow:hidden;min-height:0;padding:4px 2px;margin:-4px -2px}.deb-dock-pane{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-dock-pane--open{grid-template-rows:1fr;opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}.deb-col--left:not([hidden]){animation:debColLeftExpand .24s cubic-bezier(.16,1,.3,1) forwards}.deb-col--right:not([hidden]){animation:debColRightExpand .24s cubic-bezier(.16,1,.3,1) forwards}@media(prefers-reduced-motion:reduce){.deb-body,.deb-col--left,.deb-col--right,.deb-col--center,.deb-section--fields,.deb-preview-slot,.deb-dock-btn,.deb-card,.deb-sidebar-toggle-btn{transition:none!important;animation:none!important}}.deb-col--left,.deb-col--right{position:sticky;top:var(--deb-sticky-top);max-height:calc(100vh - var(--deb-sticky-top) - 20px);overflow-y:auto;padding-right:4px;transition:opacity .2s ease}.deb-card{border-radius:12px!important;border:1px solid var(--deb-border, #e2e8f0)!important;background:var(--deb-surface, #ffffff)!important;box-shadow:0 1px 3px #00000008,0 1px 2px #00000005!important;transition:box-shadow .2s ease,border-color .2s ease!important;overflow:hidden}.deb-card:hover{border-color:#cbd5e1!important;box-shadow:0 4px 12px #0f172a0d!important}.deb-card mat-card-header{padding:14px 16px 10px!important;display:flex!important;align-items:center!important}.deb-card mat-card-content{padding:0 16px 16px!important}.deb-card__title{display:flex!important;align-items:center!important;gap:8px!important;font-family:var(--font-heading, sans-serif)!important;font-size:13.5px!important;font-weight:700!important;color:#0f172a!important;margin:0!important}.deb-card__icon{color:var(--deb-accent-ink, #4f46e5)!important;font-size:18px!important;width:18px!important;height:18px!important;flex:none!important}.deb-card__collapse-btn{margin-left:auto!important;width:32px!important;height:32px!important;color:var(--deb-muted, #64748b)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.deb-card__collapse-btn:hover{color:#0f172a!important;background:#f1f5f9!important}.deb-sidebar-toggle-btn{color:var(--deb-muted, #64748b);transition:all .15s ease}.deb-sidebar-toggle-btn:hover{color:#0f172a;background:#f1f5f9}.deb-sidebar-toggle-btn--active{color:var(--deb-accent-ink, #4f46e5)!important;background:var(--deb-accent-soft, #eef2ff)!important}.deb-dock-btn{position:sticky;top:var(--deb-sticky-top);align-self:start;justify-self:center;z-index:10;display:inline-flex;flex-direction:column;align-items:center;gap:10px;width:36px;padding:12px 0;border-radius:9999px;border:1px solid #c7d2fe;background:#fff;color:var(--deb-accent-hover, #4f46e5);font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;box-shadow:0 4px 14px #6366f126;cursor:pointer;animation:debDockFadeIn .22s cubic-bezier(.16,1,.3,1) forwards;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.deb-dock-btn:hover{background:var(--deb-accent-soft, #eef2ff);border-color:var(--deb-accent, #6366f1);box-shadow:0 6px 20px #6366f140}.deb-dock-btn mat-icon{flex:none}.deb-dock-btn__icon{font-size:20px;width:20px;height:20px;color:var(--deb-accent-ink, #4f46e5)}.deb-dock-btn__chevron{font-size:16px;width:16px;height:16px;opacity:.75}.deb-dock-btn__label{display:none;letter-spacing:.04em;white-space:nowrap}.deb-dock-btn--horizontal{flex-direction:row;justify-content:center;width:100%;padding:10px 18px;border-radius:12px;gap:12px;position:static;animation:debDockSlideInY .22s cubic-bezier(.16,1,.3,1) forwards}.deb-dock-btn--horizontal .deb-dock-btn__label{display:inline}.deb-card--preview mat-card-content{padding:0 16px 16px!important}.deb-settings-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:6px}.deb-mask-row{padding:4px 0 8px}.deb-preview-slot:empty{display:none}@media(max-width:1300px){ngx-entity-builder{--deb-left: clamp(280px, 28vw, 340px)}.deb-body{grid-template-columns:var(--deb-left) minmax(0,1fr)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col--right{grid-column:2;position:static;max-height:none;overflow:visible}}@media(max-width:900px){ngx-entity-builder{--deb-rail: 36px}.deb-body{gap:12px;padding:12px;grid-template-columns:minmax(0,1fr)}.deb-body.deb-body--left-collapsed,.deb-body.deb-body--right-collapsed,.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:minmax(0,1fr)}.deb-col--left,.deb-col--right,.deb-dock-btn--left,.deb-dock-btn--right{grid-column:1;position:static;max-height:none;overflow:visible}.deb-dock-btn--left,.deb-dock-btn--right{flex-direction:row;justify-content:center;width:auto;justify-self:stretch;padding:10px 16px}.deb-dock-btn__label{display:inline}}@media(max-width:900px){.deb-toolbar__title,.deb-toolbar__mark{display:none}}@media(max-width:560px){.deb-toolbar__btn-label{display:none}}.deb-canvas__group{margin:14px 0 6px;font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-canvas__group:first-of-type{margin-top:0}.deb-field-list{display:flex;flex-direction:column;gap:8px}.deb-field-list:empty{min-height:44px;border:1px dashed var(--deb-border);border-radius:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-field-row__actions{display:flex;align-items:center;margin-left:auto;opacity:0;transition:opacity .15s ease}.deb-field-row:hover .deb-field-row__actions,.deb-field-row:focus-within .deb-field-row__actions,.deb-field-row--active .deb-field-row__actions{opacity:1}@media(hover:none){.deb-field-row__actions{opacity:1}}@media(max-width:560px){.deb-field-row{flex-wrap:wrap;row-gap:4px}.deb-field-row__actions{margin-left:auto}}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca;flex:none}.deb-span-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f1f5f9;color:#475569;font-family:ui-monospace,SFMono-Regular,monospace;flex:none}.deb-drag-handle{cursor:grab;color:#7d8a9c;transition:color .15s;flex:none}.deb-drag-handle:hover{color:var(--deb-accent-ink)}.deb-field-type{color:var(--deb-accent-ink);flex:none}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#dc2626;font-weight:700;flex:none}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview.deb-field-row{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent, #6366f1);background:#fff}.cdk-drag-placeholder.deb-field-row{opacity:.35}.cdk-drag-animating.deb-field-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}@media(prefers-reduced-motion:reduce){.deb-field-row,.deb-field-row__actions,.cdk-drag-animating.deb-field-row,.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:none}.deb-field-row:hover{transform:none}}.deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__section{border:1px solid var(--deb-border);border-radius:10px;overflow:hidden;background:var(--deb-surface)}.deb-inspector__summary{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;cursor:pointer;list-style:none;font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted);background:#f8fafc;-webkit-user-select:none;user-select:none}.deb-inspector__summary::-webkit-details-marker{display:none}.deb-inspector__summary:hover{color:#0f172a}.deb-inspector__summary:focus-visible{outline:2px solid var(--deb-accent);outline-offset:-2px}.deb-inspector__chevron{margin-left:auto;transition:transform .18s ease;color:#7d8a9c;font-size:20px;width:20px;height:20px}.deb-inspector__section[open]>.deb-inspector__summary>.deb-inspector__chevron{transform:rotate(180deg)}.deb-inspector__count{padding:1px 7px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:10px;font-weight:700;letter-spacing:0}.deb-inspector__body{display:flex;flex-direction:column;gap:10px;padding:12px;border-top:1px solid var(--deb-border)}@media(prefers-reduced-motion:reduce){.deb-inspector__chevron{transition:none}}.deb-span-picker{display:flex;gap:4px;flex-wrap:wrap}.deb-span-picker__btn{appearance:none;cursor:pointer;flex:1;min-width:46px;padding:7px 4px;border:1px solid var(--deb-border);border-radius:8px;background:var(--deb-surface);color:var(--deb-muted);font:inherit;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease}.deb-span-picker__btn:hover{border-color:#a5b4fc;color:#0f172a}.deb-span-picker__btn:focus-visible{outline:2px solid var(--deb-accent);outline-offset:2px}.deb-span-picker__btn--active{border-color:var(--deb-accent);background:var(--deb-accent-soft);color:var(--deb-accent-hover)}.deb-option-row{display:flex;align-items:center;gap:8px}.deb-option-key{flex:0 0 8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 8px;border-radius:4px;background:var(--deb-surface-2, rgba(0, 0, 0, .05));color:var(--deb-muted);font-family:var(--font-mono, ui-monospace, monospace);font-size:12px}.deb-row__actions{display:flex;gap:8px;align-items:center}.deb-flags-row{display:flex;gap:16px;flex-wrap:wrap;padding:2px 0 6px}.deb-param-validators-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-toggles{display:flex;flex-direction:column;gap:6px}.deb-toggles mat-slide-toggle{display:flex;justify-content:space-between;width:100%;padding:5px 8px;border-radius:8px;background:#f8fafc;border:1px solid #f1f5f9;transition:all .15s ease}.deb-toggles mat-slide-toggle:hover{background:#f1f5f9;border-color:#e2e8f0}@media(prefers-reduced-motion:reduce){.deb-span-picker__btn{transition:none}}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i11.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FieldPaletteComponent, selector: "ngx-field-palette", outputs: ["pick"] }, { kind: "component", type: TabManagerComponent, selector: "ngx-tab-manager" }, { kind: "component", type: FieldInspectorComponent, selector: "ngx-field-inspector" }, { kind: "component", type: EntityBuilderCanvasComponent, selector: "ngx-entity-builder-canvas", outputs: ["collapse"] }, { kind: "component", type: RuleDependencyGraphComponent, selector: "ngx-rule-dependency-graph", outputs: ["dismiss", "selectField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderComponent, decorators: [{
             type: Component,
@@ -4511,7 +5194,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         TabManagerComponent,
                         FieldInspectorComponent,
                         EntityBuilderCanvasComponent,
-                    ], encapsulation: ViewEncapsulation.None, template: "<mat-toolbar class=\"deb-toolbar\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-left-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"leftSidebarOpen()\"\n    [attr.aria-expanded]=\"leftSidebarOpen()\"\n    aria-controls=\"deb-left-sidebar\"\n    (click)=\"toggleLeftSidebar()\"\n    [matTooltip]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n    [attr.aria-label]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n  >\n    <mat-icon>{{ leftSidebarOpen() ? 'menu_open' : 'menu' }}</mat-icon>\n  </button>\n\n  <mat-icon class=\"deb-toolbar__mark\">dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-toolbar__entity\" data-testid=\"builder-toolbar-entity\">{{ store.config().entity || '\u2014' }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  <!--\n    The issue count, and the issues.\n    It used to be a button labelled \"0 / 1\" whose tooltip said to hover the items in the list\n    \u2014 a list that did not exist anywhere in the builder. The count now opens the problems\n    themselves, and an entry that names a field selects it, which is the action the person\n    reading the message wants to take next.\n  -->\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      data-testid=\"builder-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matMenuTriggerFor]=\"problemsMenu\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ ui.text('issuesCount', { errors: store.errors().length, total: store.problems().length }) }}\n    </button>\n    <mat-menu #problemsMenu=\"matMenu\" class=\"deb-problems-menu\">\n      @for (problem of store.problems(); track $index) {\n        <button\n          mat-menu-item\n          type=\"button\"\n          data-testid=\"builder-problem\"\n          [disabled]=\"!problem.fieldId\"\n          (click)=\"selectProblemField(problem)\"\n        >\n          <mat-icon [class.deb-problems--error]=\"problem.level === 'error'\">{{\n            problem.level === 'error' ? 'error' : 'warning'\n          }}</mat-icon>\n          <span class=\"deb-problems-menu__text\">{{ problem.message }}</span>\n        </button>\n      }\n    </mat-menu>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    (click)=\"copyJson()\"\n    [matTooltip]=\"ui.text('copyJson')\"\n    [attr.aria-label]=\"ui.text('copyJson')\"\n  >\n    <mat-icon>content_copy</mat-icon>\n    <!-- The label goes on a narrow screen; the tooltip and aria-label above carry the name. -->\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('copyJson') }}</span>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-fields\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"fieldsOpen()\"\n    [attr.aria-expanded]=\"fieldsOpen()\"\n    aria-controls=\"deb-fields-section\"\n    (click)=\"toggleFields()\"\n    [matTooltip]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n    [attr.aria-label]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n  >\n    <mat-icon>{{ fieldsOpen() ? 'view_agenda' : 'table_rows' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-preview\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"previewOpen()\"\n    [attr.aria-expanded]=\"previewOpen()\"\n    aria-controls=\"deb-preview-section\"\n    (click)=\"togglePreview()\"\n    [matTooltip]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n    [attr.aria-label]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n  >\n    <mat-icon>{{ previewOpen() ? 'visibility' : 'visibility_off' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-right-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"rightSidebarOpen()\"\n    [attr.aria-expanded]=\"rightSidebarOpen()\"\n    aria-controls=\"deb-right-sidebar\"\n    (click)=\"toggleRightSidebar()\"\n    [matTooltip]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n    [attr.aria-label]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n  >\n    <mat-icon>{{ rightSidebarOpen() ? 'vertical_split' : 'tune' }}</mat-icon>\n  </button>\n\n  <!--\n    The tooltip sits on a wrapper, not on the button.\n\n    A disabled button receives no pointer events, so a tooltip bound to it never fires \u2014 which\n    is the one state where the explanation is worth having. Saving stays disabled here (unlike\n    the renderer's Save, which refuses instead): an invalid *schema* is not something the\n    author can be shown their way out of one field at a time, and the issue list beside this\n    button is where that conversation happens.\n  -->\n  <span [matTooltip]=\"store.isValid() ? '' : ui.text('saveBlockedTooltip')\" [matTooltipDisabled]=\"store.isValid()\">\n    <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n    <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n      <mat-icon>save</mat-icon> {{ ui.text('save') }}\n    </button>\n  </span>\n</mat-toolbar>\n\n<div\n  class=\"deb-body\"\n  [class.deb-body--left-collapsed]=\"!leftSidebarOpen()\"\n  [class.deb-body--right-collapsed]=\"!rightSidebarOpen()\"\n>\n  <!-- Collapsed left sidebar: the rail that brings it back. -->\n  @if (!leftSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--left\"\n      data-testid=\"expand-left-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-left-sidebar\"\n      (click)=\"expandLeft()\"\n      [matTooltip]=\"ui.text('expandPalette')\"\n      [attr.aria-label]=\"ui.text('expandPalette')\"\n    >\n      <!--\n        The card's own icon, not its name turned on its side. A 44px rail can only hold a\n        label by rotating it, and a rotated word is one you have to tilt your head to read \u2014\n        worse in German, where \"Eigenschaften\" is half a screen tall. The tooltip and the\n        accessible name carry the words; the label below returns when the rail lies flat.\n      -->\n      <mat-icon class=\"deb-dock-btn__icon\">add_circle_outline</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('paletteRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_right</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-left-sidebar\"\n    class=\"deb-col deb-col--left\"\n    data-testid=\"builder-left-sidebar\"\n    [hidden]=\"!leftSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--palette\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">add_circle_outline</mat-icon>\n          {{ ui.text('addField') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-left-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-left-sidebar\"\n          (click)=\"collapseLeft()\"\n          [matTooltip]=\"ui.text('collapsePalette')\"\n          [attr.aria-label]=\"ui.text('collapsePalette')\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--settings\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ store.config().entity || ui.text('entityName') }}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <div class=\"deb-settings-grid\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('entityName') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"store.config().entity\"\n              (ngModelChange)=\"store.setEntityName($event)\"\n              [placeholder]=\"ui.text('entityNamePlaceholder')\"\n            />\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <div class=\"deb-mask-row\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"store.config().maskData ?? false\"\n            (ngModelChange)=\"store.setMaskData($event)\"\n            >{{ ui.text('maskEntity') }}</mat-slide-toggle\n          >\n        </div>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--tabs\">\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas, then what it renders as \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\" data-testid=\"builder-canvas-column\">\n    <!-- Collapsed fields canvas dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--fields\"\n      [class.deb-dock-pane--open]=\"!fieldsOpen()\"\n      [attr.aria-hidden]=\"fieldsOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--fields\"\n          data-testid=\"expand-fields\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-fields-section\"\n          (click)=\"expandFields()\"\n          [matTooltip]=\"ui.text('expandFields')\"\n          [attr.aria-label]=\"ui.text('expandFields')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">format_list_bulleted</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('fieldsRailLabel') }} ({{ store.fields().length }})</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Fields canvas section -->\n    <div\n      id=\"deb-fields-section\"\n      class=\"deb-toggle-pane deb-section--fields\"\n      [class.deb-toggle-pane--collapsed]=\"!fieldsOpen()\"\n      data-testid=\"builder-fields-section\"\n      [attr.aria-hidden]=\"!fieldsOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <ngx-entity-builder-canvas (collapse)=\"collapseFields()\" />\n      </div>\n    </div>\n\n    <!-- Collapsed preview dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--preview\"\n      [class.deb-dock-pane--open]=\"!previewOpen()\"\n      [attr.aria-hidden]=\"previewOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--preview\"\n          data-testid=\"expand-preview\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-preview-section\"\n          (click)=\"expandPreview()\"\n          [matTooltip]=\"ui.text('expandPreview')\"\n          [attr.aria-label]=\"ui.text('expandPreview')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">visibility</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('previewRailLabel') }}</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_up</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!--\n      The live preview, moved up from the footer.\n      Directly under the field list is where a change and its effect can be seen in the same glance.\n    -->\n    <div\n      id=\"deb-preview-section\"\n      class=\"deb-toggle-pane deb-preview-slot\"\n      [class.deb-toggle-pane--collapsed]=\"!previewOpen()\"\n      data-testid=\"builder-preview-section\"\n      [attr.aria-hidden]=\"!previewOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <mat-card class=\"deb-card deb-card--preview\">\n          <mat-card-header>\n            <mat-card-title class=\"deb-card__title\">\n              <mat-icon class=\"deb-card__icon\">visibility</mat-icon>\n              {{ ui.text('previewHeading') }}\n            </mat-card-title>\n            <button\n              mat-icon-button\n              type=\"button\"\n              class=\"deb-card__collapse-btn\"\n              data-testid=\"collapse-preview\"\n              aria-expanded=\"true\"\n              aria-controls=\"deb-preview-section\"\n              (click)=\"collapsePreview()\"\n              [matTooltip]=\"ui.text('collapsePreview')\"\n              [attr.aria-label]=\"ui.text('collapsePreview')\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          </mat-card-header>\n          <mat-card-content>\n            <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapsed right sidebar: the rail that brings it back. -->\n  @if (!rightSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--right\"\n      data-testid=\"expand-right-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-right-sidebar\"\n      (click)=\"expandRight()\"\n      [matTooltip]=\"ui.text('expandInspector')\"\n      [attr.aria-label]=\"ui.text('expandInspector')\"\n    >\n      <mat-icon class=\"deb-dock-btn__icon\">tune</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('inspectorRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_left</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-right-sidebar\"\n    class=\"deb-col deb-col--right\"\n    data-testid=\"builder-right-sidebar\"\n    [hidden]=\"!rightSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--inspector\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ ui.text('fieldProperties') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-right-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-right-sidebar\"\n          (click)=\"collapseRight()\"\n          [matTooltip]=\"ui.text('collapseInspector')\"\n          [attr.aria-label]=\"ui.text('collapseInspector')\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: the exported JSON \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n</div>\n", styles: ["ngx-entity-builder{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-ink: #4f46e5;--deb-accent-soft: #eef2ff;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;--deb-rail: 44px;--deb-left: clamp(320px, 26vw, 460px);--deb-right: 380px;--deb-left-wide: calc(var(--deb-left) + var(--deb-right) - var(--deb-rail));--deb-toolbar-h: 56px;--deb-sticky-top: calc(var(--deb-toolbar-h) + 20px);display:block}.deb-toolbar{background:var(--deb-surface);color:#0f172a;border-bottom:1px solid var(--deb-border);gap:4px;height:var(--deb-toolbar-h);position:sticky;top:0;z-index:20;flex-wrap:wrap;padding-block:4px}mat-toolbar.deb-toolbar{height:auto;min-height:var(--deb-toolbar-h)}.deb-toolbar__mark{color:var(--deb-accent-ink)}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:15px;font-weight:700;color:#0f172a}.deb-toolbar__entity{margin-left:10px;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deb-spacer{flex:1 1 auto}.deb-problems{font-weight:600}.deb-problems--error{color:#ef4444;font-weight:600}.deb-problems-menu__text{white-space:normal;line-height:1.35;padding:6px 0}.deb-problems-menu .mat-mdc-menu-item{height:auto;min-height:40px}.deb-problems-menu{max-width:460px}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-right);gap:24px;padding:24px;align-items:start;transition:grid-template-columns .25s cubic-bezier(.16,1,.3,1)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-right)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left-wide) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col{display:flex;flex-direction:column;gap:18px;min-width:0}.deb-col[hidden],.deb-section--fields[hidden],.deb-preview-slot[hidden]{display:none!important}.deb-col>.deb-card{flex:0 0 auto}@keyframes debDockFadeIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes debDockSlideInY{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debSectionExpand{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debColLeftExpand{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes debColRightExpand{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.deb-toggle-pane{display:grid;grid-template-rows:1fr;opacity:1;transform:translateY(0);transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-toggle-pane--collapsed{grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden}.deb-toggle-pane__inner,.deb-dock-pane__inner{overflow:hidden;min-height:0;padding:4px 2px;margin:-4px -2px}.deb-dock-pane{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-dock-pane--open{grid-template-rows:1fr;opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}.deb-col--left:not([hidden]){animation:debColLeftExpand .24s cubic-bezier(.16,1,.3,1) forwards}.deb-col--right:not([hidden]){animation:debColRightExpand .24s cubic-bezier(.16,1,.3,1) forwards}@media(prefers-reduced-motion:reduce){.deb-body,.deb-col--left,.deb-col--right,.deb-col--center,.deb-section--fields,.deb-preview-slot,.deb-dock-btn,.deb-card,.deb-sidebar-toggle-btn{transition:none!important;animation:none!important}}.deb-col--left,.deb-col--right{position:sticky;top:var(--deb-sticky-top);max-height:calc(100vh - var(--deb-sticky-top) - 20px);overflow-y:auto;padding-right:4px;transition:opacity .2s ease}.deb-card{border-radius:12px!important;border:1px solid var(--deb-border, #e2e8f0)!important;background:var(--deb-surface, #ffffff)!important;box-shadow:0 1px 3px #00000008,0 1px 2px #00000005!important;transition:box-shadow .2s ease,border-color .2s ease!important;overflow:hidden}.deb-card:hover{border-color:#cbd5e1!important;box-shadow:0 4px 12px #0f172a0d!important}.deb-card mat-card-header{padding:14px 16px 10px!important;display:flex!important;align-items:center!important}.deb-card mat-card-content{padding:0 16px 16px!important}.deb-card__title{display:flex!important;align-items:center!important;gap:8px!important;font-family:var(--font-heading, sans-serif)!important;font-size:13.5px!important;font-weight:700!important;color:#0f172a!important;margin:0!important}.deb-card__icon{color:var(--deb-accent-ink, #4f46e5)!important;font-size:18px!important;width:18px!important;height:18px!important;flex:none!important}.deb-card__collapse-btn{margin-left:auto!important;width:32px!important;height:32px!important;color:var(--deb-muted, #64748b)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.deb-card__collapse-btn:hover{color:#0f172a!important;background:#f1f5f9!important}.deb-sidebar-toggle-btn{color:var(--deb-muted, #64748b);transition:all .15s ease}.deb-sidebar-toggle-btn:hover{color:#0f172a;background:#f1f5f9}.deb-sidebar-toggle-btn--active{color:var(--deb-accent-ink, #4f46e5)!important;background:var(--deb-accent-soft, #eef2ff)!important}.deb-dock-btn{position:sticky;top:var(--deb-sticky-top);align-self:start;justify-self:center;z-index:10;display:inline-flex;flex-direction:column;align-items:center;gap:10px;width:36px;padding:12px 0;border-radius:9999px;border:1px solid #c7d2fe;background:#fff;color:var(--deb-accent-hover, #4f46e5);font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;box-shadow:0 4px 14px #6366f126;cursor:pointer;animation:debDockFadeIn .22s cubic-bezier(.16,1,.3,1) forwards;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.deb-dock-btn:hover{background:var(--deb-accent-soft, #eef2ff);border-color:var(--deb-accent, #6366f1);box-shadow:0 6px 20px #6366f140}.deb-dock-btn mat-icon{flex:none}.deb-dock-btn__icon{font-size:20px;width:20px;height:20px;color:var(--deb-accent-ink, #4f46e5)}.deb-dock-btn__chevron{font-size:16px;width:16px;height:16px;opacity:.75}.deb-dock-btn__label{display:none;letter-spacing:.04em;white-space:nowrap}.deb-dock-btn--horizontal{flex-direction:row;justify-content:center;width:100%;padding:10px 18px;border-radius:12px;gap:12px;position:static;animation:debDockSlideInY .22s cubic-bezier(.16,1,.3,1) forwards}.deb-dock-btn--horizontal .deb-dock-btn__label{display:inline}.deb-card--preview mat-card-content{padding:0 16px 16px!important}.deb-settings-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:6px}.deb-mask-row{padding:4px 0 8px}.deb-preview-slot:empty{display:none}@media(max-width:1300px){ngx-entity-builder{--deb-left: clamp(280px, 28vw, 340px)}.deb-body{grid-template-columns:var(--deb-left) minmax(0,1fr)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col--right{grid-column:2;position:static;max-height:none;overflow:visible}}@media(max-width:900px){ngx-entity-builder{--deb-rail: 36px}.deb-body{gap:12px;padding:12px;grid-template-columns:minmax(0,1fr)}.deb-body.deb-body--left-collapsed,.deb-body.deb-body--right-collapsed,.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:minmax(0,1fr)}.deb-col--left,.deb-col--right,.deb-dock-btn--left,.deb-dock-btn--right{grid-column:1;position:static;max-height:none;overflow:visible}.deb-dock-btn--left,.deb-dock-btn--right{flex-direction:row;justify-content:center;width:auto;justify-self:stretch;padding:10px 16px}.deb-dock-btn__label{display:inline}}@media(max-width:900px){.deb-toolbar__title,.deb-toolbar__mark{display:none}}@media(max-width:560px){.deb-toolbar__btn-label{display:none}}.deb-canvas__group{margin:14px 0 6px;font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-canvas__group:first-of-type{margin-top:0}.deb-field-list{display:flex;flex-direction:column;gap:8px}.deb-field-list:empty{min-height:44px;border:1px dashed var(--deb-border);border-radius:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-field-row__actions{display:flex;align-items:center;margin-left:auto;opacity:0;transition:opacity .15s ease}.deb-field-row:hover .deb-field-row__actions,.deb-field-row:focus-within .deb-field-row__actions,.deb-field-row--active .deb-field-row__actions{opacity:1}@media(hover:none){.deb-field-row__actions{opacity:1}}@media(max-width:560px){.deb-field-row{flex-wrap:wrap;row-gap:4px}.deb-field-row__actions{margin-left:auto}}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca;flex:none}.deb-span-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f1f5f9;color:#475569;font-family:ui-monospace,SFMono-Regular,monospace;flex:none}.deb-drag-handle{cursor:grab;color:#7d8a9c;transition:color .15s;flex:none}.deb-drag-handle:hover{color:var(--deb-accent-ink)}.deb-field-type{color:var(--deb-accent-ink);flex:none}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#dc2626;font-weight:700;flex:none}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview.deb-field-row{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent, #6366f1);background:#fff}.cdk-drag-placeholder.deb-field-row{opacity:.35}.cdk-drag-animating.deb-field-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}@media(prefers-reduced-motion:reduce){.deb-field-row,.deb-field-row__actions,.cdk-drag-animating.deb-field-row,.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:none}.deb-field-row:hover{transform:none}}.deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__section{border:1px solid var(--deb-border);border-radius:10px;overflow:hidden;background:var(--deb-surface)}.deb-inspector__summary{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;cursor:pointer;list-style:none;font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted);background:#f8fafc;-webkit-user-select:none;user-select:none}.deb-inspector__summary::-webkit-details-marker{display:none}.deb-inspector__summary:hover{color:#0f172a}.deb-inspector__summary:focus-visible{outline:2px solid var(--deb-accent);outline-offset:-2px}.deb-inspector__chevron{margin-left:auto;transition:transform .18s ease;color:#7d8a9c;font-size:20px;width:20px;height:20px}.deb-inspector__section[open]>.deb-inspector__summary>.deb-inspector__chevron{transform:rotate(180deg)}.deb-inspector__count{padding:1px 7px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:10px;font-weight:700;letter-spacing:0}.deb-inspector__body{display:flex;flex-direction:column;gap:10px;padding:12px;border-top:1px solid var(--deb-border)}@media(prefers-reduced-motion:reduce){.deb-inspector__chevron{transition:none}}.deb-span-picker{display:flex;gap:4px;flex-wrap:wrap}.deb-span-picker__btn{appearance:none;cursor:pointer;flex:1;min-width:46px;padding:7px 4px;border:1px solid var(--deb-border);border-radius:8px;background:var(--deb-surface);color:var(--deb-muted);font:inherit;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease}.deb-span-picker__btn:hover{border-color:#a5b4fc;color:#0f172a}.deb-span-picker__btn:focus-visible{outline:2px solid var(--deb-accent);outline-offset:2px}.deb-span-picker__btn--active{border-color:var(--deb-accent);background:var(--deb-accent-soft);color:var(--deb-accent-hover)}.deb-option-row{display:flex;align-items:center;gap:8px}.deb-option-key{flex:0 0 8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 8px;border-radius:4px;background:var(--deb-surface-2, rgba(0, 0, 0, .05));color:var(--deb-muted);font-family:var(--font-mono, ui-monospace, monospace);font-size:12px}.deb-row__actions{display:flex;gap:8px;align-items:center}.deb-flags-row{display:flex;gap:16px;flex-wrap:wrap;padding:2px 0 6px}.deb-param-validators-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-toggles{display:flex;flex-direction:column;gap:6px}.deb-toggles mat-slide-toggle{display:flex;justify-content:space-between;width:100%;padding:5px 8px;border-radius:8px;background:#f8fafc;border:1px solid #f1f5f9;transition:all .15s ease}.deb-toggles mat-slide-toggle:hover{background:#f1f5f9;border-color:#e2e8f0}@media(prefers-reduced-motion:reduce){.deb-span-picker__btn{transition:none}}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"] }]
+                        RuleDependencyGraphComponent,
+                    ], encapsulation: ViewEncapsulation.None, template: "<mat-toolbar class=\"deb-toolbar\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-left-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"leftSidebarOpen()\"\n    [attr.aria-expanded]=\"leftSidebarOpen()\"\n    aria-controls=\"deb-left-sidebar\"\n    (click)=\"toggleLeftSidebar()\"\n    [matTooltip]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n    [attr.aria-label]=\"leftSidebarOpen() ? ui.text('collapsePalette') : ui.text('expandPalette')\"\n  >\n    <mat-icon>{{ leftSidebarOpen() ? 'menu_open' : 'menu' }}</mat-icon>\n  </button>\n\n  <mat-icon class=\"deb-toolbar__mark\">dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-toolbar__entity\" data-testid=\"builder-toolbar-entity\">{{ store.config().entity || '\u2014' }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  <!--\n    The issue count, and the issues.\n    It used to be a button labelled \"0 / 1\" whose tooltip said to hover the items in the list\n    \u2014 a list that did not exist anywhere in the builder. The count now opens the problems\n    themselves, and an entry that names a field selects it, which is the action the person\n    reading the message wants to take next.\n  -->\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      data-testid=\"builder-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matMenuTriggerFor]=\"problemsMenu\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ ui.text('issuesCount', { errors: store.errors().length, total: store.problems().length }) }}\n    </button>\n    <mat-menu #problemsMenu=\"matMenu\" class=\"deb-problems-menu\">\n      @for (problem of store.problems(); track $index) {\n        <button\n          mat-menu-item\n          type=\"button\"\n          data-testid=\"builder-problem\"\n          [disabled]=\"!problem.fieldId\"\n          (click)=\"selectProblemField(problem)\"\n        >\n          <mat-icon [class.deb-problems--error]=\"problem.level === 'error'\">{{\n            problem.level === 'error' ? 'error' : 'warning'\n          }}</mat-icon>\n          <span class=\"deb-problems-menu__text\">{{ problem.message }}</span>\n        </button>\n      }\n    </mat-menu>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    (click)=\"copyJson()\"\n    [matTooltip]=\"ui.text('copyJson')\"\n    [attr.aria-label]=\"ui.text('copyJson')\"\n  >\n    <mat-icon>content_copy</mat-icon>\n    <!-- The label goes on a narrow screen; the tooltip and aria-label above carry the name. -->\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('copyJson') }}</span>\n  </button>\n\n  <button\n    mat-button\n    type=\"button\"\n    data-testid=\"builder-rule-graph\"\n    (click)=\"openRuleGraph()\"\n    [matTooltip]=\"ui.text('ruleGraph')\"\n    [attr.aria-label]=\"ui.text('ruleGraph')\"\n  >\n    <mat-icon>hub</mat-icon>\n    <span class=\"deb-toolbar__btn-label\">{{ ui.text('ruleGraph') }}</span>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-fields\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"fieldsOpen()\"\n    [attr.aria-expanded]=\"fieldsOpen()\"\n    aria-controls=\"deb-fields-section\"\n    (click)=\"toggleFields()\"\n    [matTooltip]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n    [attr.aria-label]=\"fieldsOpen() ? ui.text('collapseFields') : ui.text('expandFields')\"\n  >\n    <mat-icon>{{ fieldsOpen() ? 'view_agenda' : 'table_rows' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-preview\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"previewOpen()\"\n    [attr.aria-expanded]=\"previewOpen()\"\n    aria-controls=\"deb-preview-section\"\n    (click)=\"togglePreview()\"\n    [matTooltip]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n    [attr.aria-label]=\"previewOpen() ? ui.text('collapsePreview') : ui.text('expandPreview')\"\n  >\n    <mat-icon>{{ previewOpen() ? 'visibility' : 'visibility_off' }}</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"toggle-right-sidebar\"\n    class=\"deb-sidebar-toggle-btn\"\n    [class.deb-sidebar-toggle-btn--active]=\"rightSidebarOpen()\"\n    [attr.aria-expanded]=\"rightSidebarOpen()\"\n    aria-controls=\"deb-right-sidebar\"\n    (click)=\"toggleRightSidebar()\"\n    [matTooltip]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n    [attr.aria-label]=\"rightSidebarOpen() ? ui.text('collapseInspector') : ui.text('expandInspector')\"\n  >\n    <mat-icon>{{ rightSidebarOpen() ? 'vertical_split' : 'tune' }}</mat-icon>\n  </button>\n\n  <!--\n    The tooltip sits on a wrapper, not on the button.\n\n    A disabled button receives no pointer events, so a tooltip bound to it never fires \u2014 which\n    is the one state where the explanation is worth having. Saving stays disabled here (unlike\n    the renderer's Save, which refuses instead): an invalid *schema* is not something the\n    author can be shown their way out of one field at a time, and the issue list beside this\n    button is where that conversation happens.\n  -->\n  <span [matTooltip]=\"store.isValid() ? '' : ui.text('saveBlockedTooltip')\" [matTooltipDisabled]=\"store.isValid()\">\n    <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n    <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n      <mat-icon>save</mat-icon> {{ ui.text('save') }}\n    </button>\n  </span>\n</mat-toolbar>\n\n<div\n  class=\"deb-body\"\n  [class.deb-body--left-collapsed]=\"!leftSidebarOpen()\"\n  [class.deb-body--right-collapsed]=\"!rightSidebarOpen()\"\n>\n  <!-- Collapsed left sidebar: the rail that brings it back. -->\n  @if (!leftSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--left\"\n      data-testid=\"expand-left-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-left-sidebar\"\n      (click)=\"expandLeft()\"\n      [matTooltip]=\"ui.text('expandPalette')\"\n      [attr.aria-label]=\"ui.text('expandPalette')\"\n    >\n      <!--\n        The card's own icon, not its name turned on its side. A 44px rail can only hold a\n        label by rotating it, and a rotated word is one you have to tilt your head to read \u2014\n        worse in German, where \"Eigenschaften\" is half a screen tall. The tooltip and the\n        accessible name carry the words; the label below returns when the rail lies flat.\n      -->\n      <mat-icon class=\"deb-dock-btn__icon\">add_circle_outline</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('paletteRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_right</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-left-sidebar\"\n    class=\"deb-col deb-col--left\"\n    data-testid=\"builder-left-sidebar\"\n    [hidden]=\"!leftSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--palette\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">add_circle_outline</mat-icon>\n          {{ ui.text('addField') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-left-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-left-sidebar\"\n          (click)=\"collapseLeft()\"\n          [matTooltip]=\"ui.text('collapsePalette')\"\n          [attr.aria-label]=\"ui.text('collapsePalette')\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--settings\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ store.config().entity || ui.text('entityName') }}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <div class=\"deb-settings-grid\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('entityName') }}</mat-label>\n            <input\n              matInput\n              [ngModel]=\"store.config().entity\"\n              (ngModelChange)=\"store.setEntityName($event)\"\n              [placeholder]=\"ui.text('entityNamePlaceholder')\"\n            />\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <div class=\"deb-mask-row\">\n          <mat-slide-toggle\n            color=\"primary\"\n            [ngModel]=\"store.config().maskData ?? false\"\n            (ngModelChange)=\"store.setMaskData($event)\"\n            >{{ ui.text('maskEntity') }}</mat-slide-toggle\n          >\n        </div>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card class=\"deb-card deb-card--tabs\">\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas, then what it renders as \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\" data-testid=\"builder-canvas-column\">\n    <!-- Collapsed fields canvas dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--fields\"\n      [class.deb-dock-pane--open]=\"!fieldsOpen()\"\n      [attr.aria-hidden]=\"fieldsOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--fields\"\n          data-testid=\"expand-fields\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-fields-section\"\n          (click)=\"expandFields()\"\n          [matTooltip]=\"ui.text('expandFields')\"\n          [attr.aria-label]=\"ui.text('expandFields')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">format_list_bulleted</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('fieldsRailLabel') }} ({{ store.fields().length }})</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Fields canvas section -->\n    <div\n      id=\"deb-fields-section\"\n      class=\"deb-toggle-pane deb-section--fields\"\n      [class.deb-toggle-pane--collapsed]=\"!fieldsOpen()\"\n      data-testid=\"builder-fields-section\"\n      [attr.aria-hidden]=\"!fieldsOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <ngx-entity-builder-canvas (collapse)=\"collapseFields()\" />\n      </div>\n    </div>\n\n    <!-- Collapsed preview dock bar -->\n    <div\n      class=\"deb-dock-pane deb-dock-pane--preview\"\n      [class.deb-dock-pane--open]=\"!previewOpen()\"\n      [attr.aria-hidden]=\"previewOpen()\"\n    >\n      <div class=\"deb-dock-pane__inner\">\n        <button\n          type=\"button\"\n          class=\"deb-dock-btn deb-dock-btn--horizontal deb-dock-btn--preview\"\n          data-testid=\"expand-preview\"\n          aria-expanded=\"false\"\n          aria-controls=\"deb-preview-section\"\n          (click)=\"expandPreview()\"\n          [matTooltip]=\"ui.text('expandPreview')\"\n          [attr.aria-label]=\"ui.text('expandPreview')\"\n        >\n          <mat-icon class=\"deb-dock-btn__icon\">visibility</mat-icon>\n          <span class=\"deb-dock-btn__label\">{{ ui.text('previewRailLabel') }}</span>\n          <mat-icon class=\"deb-dock-btn__chevron\">keyboard_arrow_up</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!--\n      The live preview, moved up from the footer.\n      Directly under the field list is where a change and its effect can be seen in the same glance.\n    -->\n    <div\n      id=\"deb-preview-section\"\n      class=\"deb-toggle-pane deb-preview-slot\"\n      [class.deb-toggle-pane--collapsed]=\"!previewOpen()\"\n      data-testid=\"builder-preview-section\"\n      [attr.aria-hidden]=\"!previewOpen()\"\n    >\n      <div class=\"deb-toggle-pane__inner\">\n        <mat-card class=\"deb-card deb-card--preview\">\n          <mat-card-header>\n            <mat-card-title class=\"deb-card__title\">\n              <mat-icon class=\"deb-card__icon\">visibility</mat-icon>\n              {{ ui.text('previewHeading') }}\n            </mat-card-title>\n            <button\n              mat-icon-button\n              type=\"button\"\n              class=\"deb-card__collapse-btn\"\n              data-testid=\"collapse-preview\"\n              aria-expanded=\"true\"\n              aria-controls=\"deb-preview-section\"\n              (click)=\"collapsePreview()\"\n              [matTooltip]=\"ui.text('collapsePreview')\"\n              [attr.aria-label]=\"ui.text('collapsePreview')\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          </mat-card-header>\n          <mat-card-content>\n            <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapsed right sidebar: the rail that brings it back. -->\n  @if (!rightSidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"deb-dock-btn deb-dock-btn--right\"\n      data-testid=\"expand-right-sidebar\"\n      aria-expanded=\"false\"\n      aria-controls=\"deb-right-sidebar\"\n      (click)=\"expandRight()\"\n      [matTooltip]=\"ui.text('expandInspector')\"\n      [attr.aria-label]=\"ui.text('expandInspector')\"\n    >\n      <mat-icon class=\"deb-dock-btn__icon\">tune</mat-icon>\n      <span class=\"deb-dock-btn__label\">{{ ui.text('inspectorRailLabel') }}</span>\n      <mat-icon class=\"deb-dock-btn__chevron\">chevron_left</mat-icon>\n    </button>\n  }\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div\n    id=\"deb-right-sidebar\"\n    class=\"deb-col deb-col--right\"\n    data-testid=\"builder-right-sidebar\"\n    [hidden]=\"!rightSidebarOpen()\"\n  >\n    <mat-card class=\"deb-card deb-card--inspector\">\n      <mat-card-header>\n        <mat-card-title class=\"deb-card__title\">\n          <mat-icon class=\"deb-card__icon\">tune</mat-icon>\n          {{ ui.text('fieldProperties') }}\n        </mat-card-title>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"deb-card__collapse-btn\"\n          data-testid=\"collapse-right-sidebar\"\n          aria-expanded=\"true\"\n          aria-controls=\"deb-right-sidebar\"\n          (click)=\"collapseRight()\"\n          [matTooltip]=\"ui.text('collapseInspector')\"\n          [attr.aria-label]=\"ui.text('collapseInspector')\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: the exported JSON \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n</div>\n\n@if (ruleGraphOpen()) {\n  <ngx-rule-dependency-graph\n    (dismiss)=\"closeRuleGraph()\"\n    (selectField)=\"onSelectFieldFromGraph($event)\"\n  />\n}\n", styles: ["ngx-entity-builder{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-ink: #4f46e5;--deb-accent-soft: #eef2ff;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;--deb-rail: 44px;--deb-left: clamp(320px, 26vw, 460px);--deb-right: 380px;--deb-left-wide: calc(var(--deb-left) + var(--deb-right) - var(--deb-rail));--deb-toolbar-h: 56px;--deb-sticky-top: calc(var(--deb-toolbar-h) + 20px);display:block}.deb-toolbar{background:var(--deb-surface);color:#0f172a;border-bottom:1px solid var(--deb-border);gap:4px;height:var(--deb-toolbar-h);position:sticky;top:0;z-index:20;flex-wrap:wrap;padding-block:4px}mat-toolbar.deb-toolbar{height:auto;min-height:var(--deb-toolbar-h)}.deb-toolbar__mark{color:var(--deb-accent-ink)}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:15px;font-weight:700;color:#0f172a}.deb-toolbar__entity{margin-left:10px;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deb-spacer{flex:1 1 auto}.deb-problems{font-weight:600}.deb-problems--error{color:#ef4444;font-weight:600}.deb-problems-menu__text{white-space:normal;line-height:1.35;padding:6px 0}.deb-problems-menu .mat-mdc-menu-item{height:auto;min-height:40px}.deb-problems-menu{max-width:460px}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-right);gap:24px;padding:24px;align-items:start;transition:grid-template-columns .25s cubic-bezier(.16,1,.3,1)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-right)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left-wide) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col{display:flex;flex-direction:column;gap:18px;min-width:0}.deb-col[hidden],.deb-section--fields[hidden],.deb-preview-slot[hidden]{display:none!important}.deb-col>.deb-card{flex:0 0 auto}@keyframes debDockFadeIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes debDockSlideInY{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debSectionExpand{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes debColLeftExpand{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes debColRightExpand{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.deb-toggle-pane{display:grid;grid-template-rows:1fr;opacity:1;transform:translateY(0);transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-toggle-pane--collapsed{grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden}.deb-toggle-pane__inner,.deb-dock-pane__inner{overflow:hidden;min-height:0;padding:4px 2px;margin:-4px -2px}.deb-dock-pane{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1)}.deb-dock-pane--open{grid-template-rows:1fr;opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}.deb-col--left:not([hidden]){animation:debColLeftExpand .24s cubic-bezier(.16,1,.3,1) forwards}.deb-col--right:not([hidden]){animation:debColRightExpand .24s cubic-bezier(.16,1,.3,1) forwards}@media(prefers-reduced-motion:reduce){.deb-body,.deb-col--left,.deb-col--right,.deb-col--center,.deb-section--fields,.deb-preview-slot,.deb-dock-btn,.deb-card,.deb-sidebar-toggle-btn{transition:none!important;animation:none!important}}.deb-col--left,.deb-col--right{position:sticky;top:var(--deb-sticky-top);max-height:calc(100vh - var(--deb-sticky-top) - 20px);overflow-y:auto;padding-right:4px;transition:opacity .2s ease}.deb-card{border-radius:12px!important;border:1px solid var(--deb-border, #e2e8f0)!important;background:var(--deb-surface, #ffffff)!important;box-shadow:0 1px 3px #00000008,0 1px 2px #00000005!important;transition:box-shadow .2s ease,border-color .2s ease!important;overflow:hidden}.deb-card:hover{border-color:#cbd5e1!important;box-shadow:0 4px 12px #0f172a0d!important}.deb-card mat-card-header{padding:14px 16px 10px!important;display:flex!important;align-items:center!important}.deb-card mat-card-content{padding:0 16px 16px!important}.deb-card__title{display:flex!important;align-items:center!important;gap:8px!important;font-family:var(--font-heading, sans-serif)!important;font-size:13.5px!important;font-weight:700!important;color:#0f172a!important;margin:0!important}.deb-card__icon{color:var(--deb-accent-ink, #4f46e5)!important;font-size:18px!important;width:18px!important;height:18px!important;flex:none!important}.deb-card__collapse-btn{margin-left:auto!important;width:32px!important;height:32px!important;color:var(--deb-muted, #64748b)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.deb-card__collapse-btn:hover{color:#0f172a!important;background:#f1f5f9!important}.deb-sidebar-toggle-btn{color:var(--deb-muted, #64748b);transition:all .15s ease}.deb-sidebar-toggle-btn:hover{color:#0f172a;background:#f1f5f9}.deb-sidebar-toggle-btn--active{color:var(--deb-accent-ink, #4f46e5)!important;background:var(--deb-accent-soft, #eef2ff)!important}.deb-dock-btn{position:sticky;top:var(--deb-sticky-top);align-self:start;justify-self:center;z-index:10;display:inline-flex;flex-direction:column;align-items:center;gap:10px;width:36px;padding:12px 0;border-radius:9999px;border:1px solid #c7d2fe;background:#fff;color:var(--deb-accent-hover, #4f46e5);font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;box-shadow:0 4px 14px #6366f126;cursor:pointer;animation:debDockFadeIn .22s cubic-bezier(.16,1,.3,1) forwards;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.deb-dock-btn:hover{background:var(--deb-accent-soft, #eef2ff);border-color:var(--deb-accent, #6366f1);box-shadow:0 6px 20px #6366f140}.deb-dock-btn mat-icon{flex:none}.deb-dock-btn__icon{font-size:20px;width:20px;height:20px;color:var(--deb-accent-ink, #4f46e5)}.deb-dock-btn__chevron{font-size:16px;width:16px;height:16px;opacity:.75}.deb-dock-btn__label{display:none;letter-spacing:.04em;white-space:nowrap}.deb-dock-btn--horizontal{flex-direction:row;justify-content:center;width:100%;padding:10px 18px;border-radius:12px;gap:12px;position:static;animation:debDockSlideInY .22s cubic-bezier(.16,1,.3,1) forwards}.deb-dock-btn--horizontal .deb-dock-btn__label{display:inline}.deb-card--preview mat-card-content{padding:0 16px 16px!important}.deb-settings-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:6px}.deb-mask-row{padding:4px 0 8px}.deb-preview-slot:empty{display:none}@media(max-width:1300px){ngx-entity-builder{--deb-left: clamp(280px, 28vw, 340px)}.deb-body{grid-template-columns:var(--deb-left) minmax(0,1fr)}.deb-body.deb-body--right-collapsed{grid-template-columns:var(--deb-left) minmax(0,1fr) var(--deb-rail)}.deb-body.deb-body--left-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr)}.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:var(--deb-rail) minmax(0,1fr) var(--deb-rail)}.deb-col--right{grid-column:2;position:static;max-height:none;overflow:visible}}@media(max-width:900px){ngx-entity-builder{--deb-rail: 36px}.deb-body{gap:12px;padding:12px;grid-template-columns:minmax(0,1fr)}.deb-body.deb-body--left-collapsed,.deb-body.deb-body--right-collapsed,.deb-body.deb-body--left-collapsed.deb-body--right-collapsed{grid-template-columns:minmax(0,1fr)}.deb-col--left,.deb-col--right,.deb-dock-btn--left,.deb-dock-btn--right{grid-column:1;position:static;max-height:none;overflow:visible}.deb-dock-btn--left,.deb-dock-btn--right{flex-direction:row;justify-content:center;width:auto;justify-self:stretch;padding:10px 16px}.deb-dock-btn__label{display:inline}}@media(max-width:900px){.deb-toolbar__title,.deb-toolbar__mark{display:none}}@media(max-width:560px){.deb-toolbar__btn-label{display:none}}.deb-canvas__group{margin:14px 0 6px;font-family:var(--font-heading, sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--deb-muted)}.deb-canvas__group:first-of-type{margin-top:0}.deb-field-list{display:flex;flex-direction:column;gap:8px}.deb-field-list:empty{min-height:44px;border:1px dashed var(--deb-border);border-radius:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-field-row__actions{display:flex;align-items:center;margin-left:auto;opacity:0;transition:opacity .15s ease}.deb-field-row:hover .deb-field-row__actions,.deb-field-row:focus-within .deb-field-row__actions,.deb-field-row--active .deb-field-row__actions{opacity:1}@media(hover:none){.deb-field-row__actions{opacity:1}}@media(max-width:560px){.deb-field-row{flex-wrap:wrap;row-gap:4px}.deb-field-row__actions{margin-left:auto}}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca;flex:none}.deb-span-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f1f5f9;color:#475569;font-family:ui-monospace,SFMono-Regular,monospace;flex:none}.deb-drag-handle{cursor:grab;color:#7d8a9c;transition:color .15s;flex:none}.deb-drag-handle:hover{color:var(--deb-accent-ink)}.deb-field-type{color:var(--deb-accent-ink);flex:none}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#dc2626;font-weight:700;flex:none}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview.deb-field-row{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent, #6366f1);background:#fff}.cdk-drag-placeholder.deb-field-row{opacity:.35}.cdk-drag-animating.deb-field-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}@media(prefers-reduced-motion:reduce){.deb-field-row,.deb-field-row__actions,.cdk-drag-animating.deb-field-row,.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:none}.deb-field-row:hover{transform:none}}.deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__section{border:1px solid var(--deb-border);border-radius:10px;overflow:hidden;background:var(--deb-surface)}.deb-inspector__summary{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;cursor:pointer;list-style:none;font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted);background:#f8fafc;-webkit-user-select:none;user-select:none}.deb-inspector__summary::-webkit-details-marker{display:none}.deb-inspector__summary:hover{color:#0f172a}.deb-inspector__summary:focus-visible{outline:2px solid var(--deb-accent);outline-offset:-2px}.deb-inspector__chevron{margin-left:auto;transition:transform .18s ease;color:#7d8a9c;font-size:20px;width:20px;height:20px}.deb-inspector__section[open]>.deb-inspector__summary>.deb-inspector__chevron{transform:rotate(180deg)}.deb-inspector__count{padding:1px 7px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:10px;font-weight:700;letter-spacing:0}.deb-inspector__body{display:flex;flex-direction:column;gap:10px;padding:12px;border-top:1px solid var(--deb-border)}@media(prefers-reduced-motion:reduce){.deb-inspector__chevron{transition:none}}.deb-span-picker{display:flex;gap:4px;flex-wrap:wrap}.deb-span-picker__btn{appearance:none;cursor:pointer;flex:1;min-width:46px;padding:7px 4px;border:1px solid var(--deb-border);border-radius:8px;background:var(--deb-surface);color:var(--deb-muted);font:inherit;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease}.deb-span-picker__btn:hover{border-color:#a5b4fc;color:#0f172a}.deb-span-picker__btn:focus-visible{outline:2px solid var(--deb-accent);outline-offset:2px}.deb-span-picker__btn--active{border-color:var(--deb-accent);background:var(--deb-accent-soft);color:var(--deb-accent-hover)}.deb-option-row{display:flex;align-items:center;gap:8px}.deb-option-key{flex:0 0 8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 8px;border-radius:4px;background:var(--deb-surface-2, rgba(0, 0, 0, .05));color:var(--deb-muted);font-family:var(--font-mono, ui-monospace, monospace);font-size:12px}.deb-row__actions{display:flex;gap:8px;align-items:center}.deb-flags-row{display:flex;gap:16px;flex-wrap:wrap;padding:2px 0 6px}.deb-param-validators-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-toggles{display:flex;flex-direction:column;gap:6px}.deb-toggles mat-slide-toggle{display:flex;justify-content:space-between;width:100%;padding:5px 8px;border-radius:8px;background:#f8fafc;border:1px solid #f1f5f9;transition:all .15s ease}.deb-toggles mat-slide-toggle:hover{background:#f1f5f9;border-color:#e2e8f0}@media(prefers-reduced-motion:reduce){.deb-span-picker__btn{transition:none}}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], rules: [{
@@ -4543,5 +5227,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BUILDER_TEXT, BuilderStore, BuilderTextService, DEFAULT_BUILDER_TEXT, EntityBuilderCanvasComponent, EntityBuilderComponent, EntityBuilderTreeNodeComponent, EntityReferenceConfigComponent, FieldInspectorComponent, FieldPaletteComponent, FieldRulesListComponent, RuleFormComponent, TabManagerComponent, fieldPathOptions, withExistingOptions };
+export { BUILDER_TEXT, BuilderStore, BuilderTextService, DEFAULT_BUILDER_TEXT, EntityBuilderCanvasComponent, EntityBuilderComponent, EntityBuilderTreeNodeComponent, EntityReferenceConfigComponent, FieldInspectorComponent, FieldPaletteComponent, FieldRulesListComponent, RuleDependencyGraphComponent, RuleFormComponent, TabManagerComponent, computeRuleDependencies, fieldPathOptions, withExistingOptions };
 //# sourceMappingURL=ngx-dynamic-entity-builder.mjs.map