ngx-dynamic-entity-builder 1.8.0 → 1.9.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ChangeDetectionStrategy, Component, EventEmitter, Output, Input, effect, HostListener } from '@angular/core';
+import { signal, computed, Injectable, InjectionToken, inject, ChangeDetectionStrategy, Component, EventEmitter, Output, Input, effect, HostListener } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@angular/material/button';
@@ -26,7 +26,7 @@ import * as i4$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { collectFieldScopes, assignFieldRefs, normalizeConfigOptions, getFieldTypeMeta, createFieldConfig, labelToId, createFieldSnapshot, computeFieldDrift, toRefToken, humanizeId, findTab, fieldRefFor, parseFieldRef, refOf, resolveLabel, resolveOptionLabel, FIELD_TYPE_CATALOG, COMMON_MODULES } from '@dynamic-entity/core';
 export { FIELD_TYPE_CATALOG, createFieldConfig, getFieldTypeMeta, humanizeId } from '@dynamic-entity/core';
-import { ConfigSourceService, SYSTEM_DEFAULT_CAN_EDIT } from 'ngx-dynamic-entity';
+import { resolveUiText, ConfigSourceService, SYSTEM_DEFAULT_CAN_EDIT } from 'ngx-dynamic-entity';
 export { SYSTEM_DEFAULT_CAN_EDIT } from 'ngx-dynamic-entity';
 import * as i3 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
@@ -1415,6 +1415,14 @@ class BuilderStore {
     }
     validate(config) {
         const problems = [];
+        // Core calls a config with no tabs an error — nothing can render — and the builder used
+        // to report only a warning and leave Save enabled. That let the builder save a config
+        // `dynamic-entity validate` then rejected in CI: the mirror of the bug where it refused
+        // one core accepted. The builder defers to core here, as it already does for the scope
+        // rule, and the message is core's so the two read the same in both places.
+        if (!config.tabs?.length) {
+            problems.push({ level: 'error', message: 'At least one tab is required.' });
+        }
         if (!config.entity || !config.entity.trim()) {
             problems.push({ level: 'error', message: 'Entity name is required.' });
         }
@@ -1545,6 +1553,221 @@ function withExistingOptions(options, current) {
     return [...options, ...extra];
 }
 
+/**
+ * Every word the builder puts on screen that is not part of the config being authored.
+ *
+ * The renderer has its own list (`DEFAULT_UI_TEXT`) and the two are deliberately separate:
+ * an application that ships only the renderer should not see a hundred and fifty builder
+ * keys in completion, and the two vocabularies share no strings worth deduplicating. What
+ * they do share is the resolution rule, which comes from `resolveUiText`.
+ *
+ * Keys are grouped by panel, because a translator works screen by screen.
+ */
+const DEFAULT_BUILDER_TEXT = {
+    // Toolbar and page chrome
+    builderTitle: 'Entity Builder',
+    undo: 'Undo',
+    undoTooltip: 'Undo (Ctrl+Z)',
+    redo: 'Redo',
+    redoTooltip: 'Redo (Ctrl+Shift+Z)',
+    issuesTooltip: '{count} issue(s) — hover items in the list',
+    copyJson: 'Copy JSON',
+    save: 'Save',
+    // Entity settings panel
+    entityName: 'Entity name',
+    entityNamePlaceholder: 'e.g. clients',
+    editingLanguage: 'Editing language',
+    maskEntity: 'Mask this entity (RBAC)',
+    permissions: 'Permissions',
+    actionRoles: '{action} roles',
+    actionRolesPlaceholder: '{action} roles (comma-separated)',
+    permissionsHint: 'Empty = no restriction for that action.',
+    addField: 'Add field',
+    fieldProperties: 'Field properties',
+    configJson: 'Config JSON',
+    // Canvas
+    fieldsHeading: 'Fields ({count})',
+    canvasEmpty: 'No fields yet. Pick a type from Add field to get started.',
+    // Field rows in the tree
+    selectField: 'Select field {field}',
+    dragToReorder: 'Drag to reorder (or use the move buttons)',
+    referencedFieldTooltip: 'Referenced field (linked to {entity})',
+    driftDetected: 'Drift detected: source field has evolved',
+    required: 'Required',
+    moveUp: 'Move up',
+    moveDown: 'Move down',
+    duplicate: 'Duplicate',
+    delete: 'Delete',
+    moveFieldUp: 'Move {field} up',
+    moveFieldDown: 'Move {field} down',
+    duplicateField: 'Duplicate {field}',
+    // Field inspector — identity
+    inspectorEmpty: 'Select a field to edit its properties.',
+    fieldId: 'Field id',
+    fieldIdFixedHint: 'The stored data key for this saved field — fixed.',
+    fieldIdDerivedHint: 'Derived from the label. Used as the data key.',
+    tab: 'Tab',
+    tabMoveHint: 'Moving the field rewrites its path and repoints the rules that named it.',
+    labelInLanguage: 'Label ({language})',
+    placeholderInLanguage: 'Placeholder ({language})',
+    defaultValue: 'Default value',
+    validation: 'Validation',
+    // Field inspector — options
+    dataSource: 'Data source',
+    optionsComeFrom: 'Options come from',
+    optionsSourceNone: 'Nothing yet',
+    optionsSourceInline: 'Options authored here',
+    optionsSourceList: 'A named list',
+    listName: 'List name',
+    listNameHint: 'The consuming app resolves this name through its lookup registry. Options are not authored here.',
+    options: 'Options',
+    option: 'Option',
+    optionInLanguage: 'Option ({language})',
+    removeOption: 'Remove option',
+    noOptionsYet: 'No options yet — add at least one.',
+    // Field inspector — display flags
+    display: 'Display',
+    visible: 'Visible',
+    tableColumn: 'Table column',
+    readOnly: 'Read-only',
+    disabled: 'Disabled',
+    maskData: 'Mask data (RBAC)',
+    criticalField: 'Critical field',
+    criticalFieldTooltip: 'Renders locked; editing it announces a change against the session baseline.',
+    showInSummary: 'Show in summary',
+    showInSummaryTooltip: "Shown in the record editor's summary panel.",
+    // Field inspector — conditional visibility
+    showWhen: 'Show when',
+    condition: 'Condition',
+    watchedField: 'Watched field',
+    equals: 'Equals',
+    removeCondition: 'Remove condition',
+    alwaysVisibleHint: 'Always visible. Add a condition to show this field only for certain values.',
+    // Field inspector — copy on true
+    copyOnTrue: 'Copy on true',
+    mapping: 'Mapping',
+    fromField: 'From field',
+    toField: 'To field',
+    removeMapping: 'Remove mapping',
+    copyOnTrueHint: "When this flips to true, copy one field's value into another.",
+    // Rules list
+    rules: 'Rules',
+    rule: 'Rule',
+    noRulesOnField: 'No rules on this field.',
+    rulePriority: 'priority {priority} · {targets} target(s)',
+    toggleRule: 'Enable / disable',
+    moveRuleUp: 'Move rule up',
+    moveRuleDown: 'Move rule down',
+    editRule: 'Edit rule',
+    deleteRule: 'Delete rule',
+    // Rule form
+    newRuleTitle: 'New Form Rule',
+    editRuleTitle: 'Edit Rule',
+    triggerField: 'Trigger Field',
+    applyToFields: 'Apply to fields',
+    conditions: 'Conditions',
+    operator: 'Operator',
+    value: 'Value',
+    conditionValuePlaceholder: 'Condition value',
+    addCondition: 'Add Condition',
+    action: 'Action',
+    actionType: 'Action Type',
+    actionVisibility: 'Visibility (Show/Hide)',
+    actionValidationMessage: 'Validation Message',
+    actionInfoBanner: 'Info Banner',
+    valueOrMessage: 'Value / Message',
+    valueOrMessagePlaceholder: 'false to hide, or message text',
+    cancel: 'Cancel',
+    saveRule: 'Save Rule',
+    // Tab manager
+    tabsManager: 'Tabs Manager',
+    systemTag: '(System)',
+    addTab: 'Add Tab',
+    noTabs: 'No tabs — all fields render in a single section.',
+    flatData: 'Flat Data',
+    primaryTab: 'Primary Tab',
+    maskTabData: 'Mask Tab Data',
+    systemDefault: 'System Default',
+    addSubTab: '+ Sub-tab',
+    consumerModuleName: 'Consumer Module Name (Optional)',
+    consumerModulePlaceholder: 'e.g. documents-view',
+    subTabs: 'Sub-tabs:',
+    moveTabUp: 'Move tab up',
+    moveTabDown: 'Move tab down',
+    removeTab: 'Remove tab',
+    removeSubTab: 'Remove sub-tab',
+    // Entity reference panel
+    entityReference: 'Entity reference',
+    registryKey: 'Registry key',
+    registryKeyHint: 'Key the consumer registered a loader under. Defaults to the field id.',
+    displayFields: 'Display fields',
+    displayFieldsHint: 'Comma-separated record paths used to build each option label.',
+    staticFilters: 'Static filters (JSON)',
+    staticFiltersHint: 'Passed to the loader, e.g. {"isEmployee": false}.',
+    cascade: 'Cascade',
+    parentField: 'Parent field',
+    parentFieldNone: 'None — load all options',
+    cascadeHint: "This field's options reload whenever the parent changes.",
+    lookupFilterPath: 'Lookup filter path',
+    lookupFilterPathHint: 'Keep options whose record matches the parent value at this path.',
+    lookupPath: 'Lookup path (nested options)',
+    lookupPathHint: "Take options from this array on the selected parent's record instead.",
+    autoPatchOnSelect: 'Auto-patch on select',
+    targetTab: 'Target tab',
+    sourceLinkedRecord: 'Source (linked record)',
+    targetField: 'Target field',
+    noAutoPatch: 'No auto-patch configured — selecting a reference will not copy any values.',
+    // Referenced-field panel
+    referencedField: 'Referenced Field',
+    link: 'Link',
+    sourceEntityKey: 'Source Entity Key',
+    sourceEntityKeyPlaceholder: 'e.g. individuals',
+    sourceFieldId: 'Source Field ID',
+    sourceFieldIdPlaceholder: 'e.g. firstName',
+    driftHeading: 'Source field definition has drifted!',
+    driftBody: 'The upstream field configuration in "{entity}" has evolved.',
+    syncWithSource: 'Sync with Source',
+};
+/**
+ * Overrides for the builder's own chrome.
+ *
+ * Accepts what `UI_TEXT` accepts: a partial map whose values are strings or `LocalizedText`
+ * (`{ en, de }`), or a resolver `(key, defaultText, language) => string` for a host with an
+ * existing i18n layer. `DEFAULT_BUILDER_TEXT` is the full key list with its English source
+ * strings; anything left out keeps its default.
+ *
+ * @example
+ * { provide: BUILDER_TEXT, useValue: { save: { en: 'Save', de: 'Speichern' } } }
+ */
+const BUILDER_TEXT = new InjectionToken('BUILDER_TEXT');
+/**
+ * Resolves the builder's own UI text.
+ *
+ * The language lives on the service rather than travelling through every template call,
+ * because the builder already has a *different* language on screen: `activeLanguage()`
+ * selects the `LocalizedText` entry being **authored**. Passing that one to the chrome
+ * would flip the builder's own interface every time an author switched the label language
+ * they were editing, which is the opposite of what it means.
+ *
+ * Root-provided and therefore shared: two builders mounted at once show one chrome
+ * language. `EntityBuilderComponent`'s `uiLanguage` input is what sets it.
+ */
+class BuilderTextService {
+    overrides = inject(BUILDER_TEXT, { optional: true });
+    /** The chrome language. Not the authoring language — see the class comment. */
+    language = signal('en', ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    /** One label by key. `params` fill the `{placeholder}` slots. */
+    text(key, params) {
+        return resolveUiText(this.overrides, DEFAULT_BUILDER_TEXT, key, this.language(), params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BuilderTextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BuilderTextService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BuilderTextService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * EntityReferenceConfigComponent — authors the `entityReference` block of an entity-ref field:
  * registry key, display fields, static filters, and the parent→child cascade.
@@ -1553,6 +1776,8 @@ function withExistingOptions(options, current) {
  * selected reference returns.
  */
 class EntityReferenceConfigComponent {
+    /** Builder chrome, overridable via BUILDER_TEXT. */
+    ui = inject(BuilderTextService);
     store = inject(BuilderStore);
     field = this.store.selectedField;
     /** Sibling fields that can drive a cascade — anything but this field itself. */
@@ -1632,32 +1857,32 @@ class EntityReferenceConfigComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityReferenceConfigComponent, isStandalone: true, selector: "ngx-entity-reference-config", ngImport: i0, template: `
     @if (field(); as f) {
       <div class="deb-entity-ref">
-        <span class="deb-section-title">Entity reference</span>
+        <span class="deb-section-title">{{ ui.text('entityReference') }}</span>
 
         <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Registry key</mat-label>
+          <mat-label>{{ ui.text('registryKey') }}</mat-label>
           <input
             matInput
             data-testid="entity-ref-key"
             [ngModel]="ref(f).linkedEntityKey ?? ''"
             (ngModelChange)="patchRef(f, { linkedEntityKey: $event || undefined })"
           />
-          <mat-hint>Key the consumer registered a loader under. Defaults to the field id.</mat-hint>
+          <mat-hint>{{ ui.text('registryKeyHint') }}</mat-hint>
         </mat-form-field>
 
         <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Display fields</mat-label>
+          <mat-label>{{ ui.text('displayFields') }}</mat-label>
           <input
             matInput
             data-testid="entity-ref-display-fields"
             [ngModel]="displayFieldsText(f)"
             (ngModelChange)="setDisplayFields(f, $event)"
           />
-          <mat-hint>Comma-separated record paths used to build each option label.</mat-hint>
+          <mat-hint>{{ ui.text('displayFieldsHint') }}</mat-hint>
         </mat-form-field>
 
         <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Static filters (JSON)</mat-label>
+          <mat-label>{{ ui.text('staticFilters') }}</mat-label>
           <input
             matInput
             data-testid="entity-ref-filters"
@@ -1667,52 +1892,52 @@ class EntityReferenceConfigComponent {
           @if (filtersError()) {
             <mat-hint class="deb-error-hint">{{ filtersError() }}</mat-hint>
           } @else {
-            <mat-hint>Passed to the loader, e.g. &#123;"isEmployee": false&#125;.</mat-hint>
+            <mat-hint>{{ ui.text('staticFiltersHint') }}</mat-hint>
           }
         </mat-form-field>
 
         <mat-divider></mat-divider>
 
         <!-- Cascade -->
-        <span class="deb-section-title">Cascade</span>
+        <span class="deb-section-title">{{ ui.text('cascade') }}</span>
         <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Parent field</mat-label>
+          <mat-label>{{ ui.text('parentField') }}</mat-label>
           <mat-select
             data-testid="entity-ref-parent"
             [ngModel]="ref(f).parentField ?? ''"
             (ngModelChange)="patchRef(f, { parentField: $event || undefined })"
           >
-            <mat-option value="">None — load all options</mat-option>
+            <mat-option value="">{{ ui.text('parentFieldNone') }}</mat-option>
             @for (option of parentOptions(); track option.value) {
               <mat-option [value]="option.value">
                 {{ option.label }} <span class="deb-path-hint">{{ option.path }}</span>
               </mat-option>
             }
           </mat-select>
-          <mat-hint>This field's options reload whenever the parent changes.</mat-hint>
+          <mat-hint>{{ ui.text('cascadeHint') }}</mat-hint>
         </mat-form-field>
 
         @if (ref(f).parentField) {
           <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-            <mat-label>Lookup filter path</mat-label>
+            <mat-label>{{ ui.text('lookupFilterPath') }}</mat-label>
             <input
               matInput
               data-testid="entity-ref-lookup-filter"
               [ngModel]="ref(f).lookupFilter ?? ''"
               (ngModelChange)="patchRef(f, { lookupFilter: $event || undefined })"
             />
-            <mat-hint>Keep options whose record matches the parent value at this path.</mat-hint>
+            <mat-hint>{{ ui.text('lookupFilterPathHint') }}</mat-hint>
           </mat-form-field>
 
           <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-            <mat-label>Lookup path (nested options)</mat-label>
+            <mat-label>{{ ui.text('lookupPath') }}</mat-label>
             <input
               matInput
               data-testid="entity-ref-lookup-path"
               [ngModel]="ref(f).lookupPath ?? ''"
               (ngModelChange)="patchRef(f, { lookupPath: $event || undefined })"
             />
-            <mat-hint>Take options from this array on the selected parent's record instead.</mat-hint>
+            <mat-hint>{{ ui.text('lookupPathHint') }}</mat-hint>
           </mat-form-field>
         }
 
@@ -1720,20 +1945,20 @@ class EntityReferenceConfigComponent {
 
         <!-- autoPatch -->
         <div class="deb-row deb-row--split">
-          <span class="deb-section-title">Auto-patch on select</span>
+          <span class="deb-section-title">{{ ui.text('autoPatchOnSelect') }}</span>
           <button
             mat-stroked-button
             type="button"
             data-testid="add-auto-patch"
             (click)="store.addAutoPatchMapping(store.keyOf(f))"
           >
-            <mat-icon>add</mat-icon> Mapping
+            <mat-icon>add</mat-icon> {{ ui.text('mapping') }}
           </button>
         </div>
 
         @if (f.autoPatch) {
           <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-            <mat-label>Target tab</mat-label>
+            <mat-label>{{ ui.text('targetTab') }}</mat-label>
             <mat-select
               data-testid="auto-patch-tab"
               [ngModel]="f.autoPatch.targetTab"
@@ -1748,7 +1973,7 @@ class EntityReferenceConfigComponent {
           @for (mapping of f.autoPatch.mappings; track $index) {
             <div class="deb-option-row">
               <mat-form-field appearance="outline" subscriptSizing="dynamic">
-                <mat-label>Source (linked record)</mat-label>
+                <mat-label>{{ ui.text('sourceLinkedRecord') }}</mat-label>
                 <input
                   matInput
                   [ngModel]="mapping.source"
@@ -1756,7 +1981,7 @@ class EntityReferenceConfigComponent {
                 />
               </mat-form-field>
               <mat-form-field appearance="outline" subscriptSizing="dynamic">
-                <mat-label>Target field</mat-label>
+                <mat-label>{{ ui.text('targetField') }}</mat-label>
                 <mat-select
                   data-testid="auto-patch-target"
                   [ngModel]="mapping.target"
@@ -1773,7 +1998,7 @@ class EntityReferenceConfigComponent {
                 mat-icon-button
                 type="button"
                 color="warn"
-                matTooltip="Remove mapping"
+                [matTooltip]="ui.text('removeMapping')"
                 (click)="store.removeAutoPatchMapping(store.keyOf(f), $index)"
               >
                 <mat-icon>delete</mat-icon>
@@ -1782,7 +2007,7 @@ class EntityReferenceConfigComponent {
           }
         } @else {
           <p class="deb-hint">
-            No auto-patch configured — selecting a reference will not copy any values.
+            {{ ui.text('noAutoPatch') }}
           </p>
         }
       </div>
@@ -1804,32 +2029,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     ], template: `
     @if (field(); as f) {
       <div class="deb-entity-ref">
-        <span class="deb-section-title">Entity reference</span>
+        <span class="deb-section-title">{{ ui.text('entityReference') }}</span>
 
         <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Registry key</mat-label>
+          <mat-label>{{ ui.text('registryKey') }}</mat-label>
           <input
             matInput
             data-testid="entity-ref-key"
             [ngModel]="ref(f).linkedEntityKey ?? ''"
             (ngModelChange)="patchRef(f, { linkedEntityKey: $event || undefined })"
           />
-          <mat-hint>Key the consumer registered a loader under. Defaults to the field id.</mat-hint>
+          <mat-hint>{{ ui.text('registryKeyHint') }}</mat-hint>
         </mat-form-field>
 
         <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Display fields</mat-label>
+          <mat-label>{{ ui.text('displayFields') }}</mat-label>
           <input
             matInput
             data-testid="entity-ref-display-fields"
             [ngModel]="displayFieldsText(f)"
             (ngModelChange)="setDisplayFields(f, $event)"
           />
-          <mat-hint>Comma-separated record paths used to build each option label.</mat-hint>
+          <mat-hint>{{ ui.text('displayFieldsHint') }}</mat-hint>
         </mat-form-field>
 
         <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Static filters (JSON)</mat-label>
+          <mat-label>{{ ui.text('staticFilters') }}</mat-label>
           <input
             matInput
             data-testid="entity-ref-filters"
@@ -1839,52 +2064,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           @if (filtersError()) {
             <mat-hint class="deb-error-hint">{{ filtersError() }}</mat-hint>
           } @else {
-            <mat-hint>Passed to the loader, e.g. &#123;"isEmployee": false&#125;.</mat-hint>
+            <mat-hint>{{ ui.text('staticFiltersHint') }}</mat-hint>
           }
         </mat-form-field>
 
         <mat-divider></mat-divider>
 
         <!-- Cascade -->
-        <span class="deb-section-title">Cascade</span>
+        <span class="deb-section-title">{{ ui.text('cascade') }}</span>
         <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-          <mat-label>Parent field</mat-label>
+          <mat-label>{{ ui.text('parentField') }}</mat-label>
           <mat-select
             data-testid="entity-ref-parent"
             [ngModel]="ref(f).parentField ?? ''"
             (ngModelChange)="patchRef(f, { parentField: $event || undefined })"
           >
-            <mat-option value="">None — load all options</mat-option>
+            <mat-option value="">{{ ui.text('parentFieldNone') }}</mat-option>
             @for (option of parentOptions(); track option.value) {
               <mat-option [value]="option.value">
                 {{ option.label }} <span class="deb-path-hint">{{ option.path }}</span>
               </mat-option>
             }
           </mat-select>
-          <mat-hint>This field's options reload whenever the parent changes.</mat-hint>
+          <mat-hint>{{ ui.text('cascadeHint') }}</mat-hint>
         </mat-form-field>
 
         @if (ref(f).parentField) {
           <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-            <mat-label>Lookup filter path</mat-label>
+            <mat-label>{{ ui.text('lookupFilterPath') }}</mat-label>
             <input
               matInput
               data-testid="entity-ref-lookup-filter"
               [ngModel]="ref(f).lookupFilter ?? ''"
               (ngModelChange)="patchRef(f, { lookupFilter: $event || undefined })"
             />
-            <mat-hint>Keep options whose record matches the parent value at this path.</mat-hint>
+            <mat-hint>{{ ui.text('lookupFilterPathHint') }}</mat-hint>
           </mat-form-field>
 
           <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-            <mat-label>Lookup path (nested options)</mat-label>
+            <mat-label>{{ ui.text('lookupPath') }}</mat-label>
             <input
               matInput
               data-testid="entity-ref-lookup-path"
               [ngModel]="ref(f).lookupPath ?? ''"
               (ngModelChange)="patchRef(f, { lookupPath: $event || undefined })"
             />
-            <mat-hint>Take options from this array on the selected parent's record instead.</mat-hint>
+            <mat-hint>{{ ui.text('lookupPathHint') }}</mat-hint>
           </mat-form-field>
         }
 
@@ -1892,20 +2117,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 
         <!-- autoPatch -->
         <div class="deb-row deb-row--split">
-          <span class="deb-section-title">Auto-patch on select</span>
+          <span class="deb-section-title">{{ ui.text('autoPatchOnSelect') }}</span>
           <button
             mat-stroked-button
             type="button"
             data-testid="add-auto-patch"
             (click)="store.addAutoPatchMapping(store.keyOf(f))"
           >
-            <mat-icon>add</mat-icon> Mapping
+            <mat-icon>add</mat-icon> {{ ui.text('mapping') }}
           </button>
         </div>
 
         @if (f.autoPatch) {
           <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-            <mat-label>Target tab</mat-label>
+            <mat-label>{{ ui.text('targetTab') }}</mat-label>
             <mat-select
               data-testid="auto-patch-tab"
               [ngModel]="f.autoPatch.targetTab"
@@ -1920,7 +2145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           @for (mapping of f.autoPatch.mappings; track $index) {
             <div class="deb-option-row">
               <mat-form-field appearance="outline" subscriptSizing="dynamic">
-                <mat-label>Source (linked record)</mat-label>
+                <mat-label>{{ ui.text('sourceLinkedRecord') }}</mat-label>
                 <input
                   matInput
                   [ngModel]="mapping.source"
@@ -1928,7 +2153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 />
               </mat-form-field>
               <mat-form-field appearance="outline" subscriptSizing="dynamic">
-                <mat-label>Target field</mat-label>
+                <mat-label>{{ ui.text('targetField') }}</mat-label>
                 <mat-select
                   data-testid="auto-patch-target"
                   [ngModel]="mapping.target"
@@ -1945,7 +2170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 mat-icon-button
                 type="button"
                 color="warn"
-                matTooltip="Remove mapping"
+                [matTooltip]="ui.text('removeMapping')"
                 (click)="store.removeAutoPatchMapping(store.keyOf(f), $index)"
               >
                 <mat-icon>delete</mat-icon>
@@ -1954,7 +2179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           }
         } @else {
           <p class="deb-hint">
-            No auto-patch configured — selecting a reference will not copy any values.
+            {{ ui.text('noAutoPatch') }}
           </p>
         }
       </div>
@@ -1966,6 +2191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * RuleFormComponent — dialog/panel form for creating or editing a FormRule.
  */
 class RuleFormComponent {
+    /** Builder chrome, overridable via BUILDER_TEXT. */
+    ui = inject(BuilderTextService);
     store = inject(BuilderStore);
     rule = {
         formConfigId: 'form-1',
@@ -2021,8 +2248,7 @@ class RuleFormComponent {
      */
     targetValues() {
         const ids = this.rule.targets.filter(t => t.type === 'field').map(t => t.id);
-        const unchanged = ids.length === this.cachedTargets.length &&
-            ids.every((id, i) => id === this.cachedTargets[i]);
+        const unchanged = ids.length === this.cachedTargets.length && ids.every((id, i) => id === this.cachedTargets[i]);
         if (!unchanged)
             this.cachedTargets = ids;
         return this.cachedTargets;
@@ -2046,11 +2272,11 @@ class RuleFormComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RuleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: RuleFormComponent, isStandalone: true, selector: "ngx-rule-form", inputs: { rule: "rule" }, outputs: { save: "save", cancel: "cancel" }, ngImport: i0, template: `
     <div class="deb-rule-form">
-      <h3 class="deb-rule-form__title">{{ rule.id ? 'Edit Rule' : 'New Form Rule' }}</h3>
+      <h3 class="deb-rule-form__title">{{ ui.text(rule.id ? 'editRuleTitle' : 'newRuleTitle') }}</h3>
 
       <!-- Trigger Field -->
       <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-        <mat-label>Trigger Field</mat-label>
+        <mat-label>{{ ui.text('triggerField') }}</mat-label>
         <mat-select [(ngModel)]="rule.fieldId" data-testid="rule-trigger">
           @for (option of triggerOptions(); track option.value) {
             <mat-option [value]="option.value">
@@ -2062,13 +2288,8 @@ class RuleFormComponent {
 
       <!-- Targets: the fields this rule acts on -->
       <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-        <mat-label>Apply to fields</mat-label>
-        <mat-select
-          multiple
-          data-testid="rule-targets"
-          [ngModel]="targetValues()"
-          (ngModelChange)="setTargets($event)"
-        >
+        <mat-label>{{ ui.text('applyToFields') }}</mat-label>
+        <mat-select multiple data-testid="rule-targets" [ngModel]="targetValues()" (ngModelChange)="setTargets($event)">
           @for (option of targetOptions(); track option.value) {
             <mat-option [value]="option.value">
               {{ option.label }} <span class="deb-rule-path">{{ option.path }}</span>
@@ -2079,11 +2300,11 @@ class RuleFormComponent {
 
       <!-- Conditions -->
       <div class="deb-rule-section">
-        <h4>Conditions</h4>
+        <h4>{{ ui.text('conditions') }}</h4>
         @for (cond of rule.conditions; track $index) {
           <div class="deb-rule-row">
             <mat-form-field appearance="outline" subscriptSizing="dynamic">
-              <mat-label>Operator</mat-label>
+              <mat-label>{{ ui.text('operator') }}</mat-label>
               <mat-select [(ngModel)]="cond.operator">
                 @for (op of operators; track op) {
                   <mat-option [value]="op">{{ op }}</mat-option>
@@ -2091,8 +2312,8 @@ class RuleFormComponent {
               </mat-select>
             </mat-form-field>
             <mat-form-field appearance="outline" subscriptSizing="dynamic">
-              <mat-label>Value</mat-label>
-              <input matInput [(ngModel)]="cond.value" placeholder="Condition value" />
+              <mat-label>{{ ui.text('value') }}</mat-label>
+              <input matInput [(ngModel)]="cond.value" [placeholder]="ui.text('conditionValuePlaceholder')" />
             </mat-form-field>
             <button mat-icon-button color="warn" type="button" (click)="removeCondition($index)">
               <mat-icon>delete</mat-icon>
@@ -2100,53 +2321,45 @@ class RuleFormComponent {
           </div>
         }
         <button mat-stroked-button type="button" (click)="addCondition()">
-          <mat-icon>add</mat-icon> Add Condition
+          <mat-icon>add</mat-icon> {{ ui.text('addCondition') }}
         </button>
       </div>
 
       <!-- Action -->
       <div class="deb-rule-section">
-        <h4>Action</h4>
+        <h4>{{ ui.text('action') }}</h4>
         <div class="deb-rule-row">
           <mat-form-field appearance="outline" subscriptSizing="dynamic">
-            <mat-label>Action Type</mat-label>
+            <mat-label>{{ ui.text('actionType') }}</mat-label>
             <mat-select [(ngModel)]="rule.action.type">
-              <mat-option value="visibility">Visibility (Show/Hide)</mat-option>
-              <mat-option value="validation">Validation Message</mat-option>
-              <mat-option value="info">Info Banner</mat-option>
+              <mat-option value="visibility">{{ ui.text('actionVisibility') }}</mat-option>
+              <mat-option value="validation">{{ ui.text('actionValidationMessage') }}</mat-option>
+              <mat-option value="info">{{ ui.text('actionInfoBanner') }}</mat-option>
             </mat-select>
           </mat-form-field>
           <mat-form-field appearance="outline" subscriptSizing="dynamic">
-            <mat-label>Value / Message</mat-label>
-            <input matInput [(ngModel)]="rule.action.value" placeholder="false to hide, or message text" />
+            <mat-label>{{ ui.text('valueOrMessage') }}</mat-label>
+            <input matInput [(ngModel)]="rule.action.value" [placeholder]="ui.text('valueOrMessagePlaceholder')" />
           </mat-form-field>
         </div>
       </div>
 
       <div class="deb-rule-form__actions">
-        <button mat-button type="button" (click)="cancel.emit()">Cancel</button>
-        <button mat-raised-button color="primary" type="button" (click)="save.emit(rule)">Save Rule</button>
+        <button mat-button type="button" (click)="cancel.emit()">{{ ui.text('cancel') }}</button>
+        <button mat-raised-button color="primary" type="button" (click)="save.emit(rule)">{{ ui.text('saveRule') }}</button>
       </div>
     </div>
   `, isInline: true, styles: [".deb-rule-form{display:flex;flex-direction:column;gap:12px;background:#fafafa;border:1px solid #e0e0e0;border-radius:8px;padding:16px}.deb-rule-form__title{margin:0 0 8px;font-size:16px;font-weight:600}.deb-full{width:100%}.deb-rule-path{color:#888;font-size:11px;margin-left:6px}.deb-rule-section{display:flex;flex-direction:column;gap:8px}.deb-rule-section h4{margin:0;font-size:13px;font-weight:600;color:#555}.deb-rule-row{display:flex;gap:8px;align-items:center}.deb-rule-row>*{flex:1}.deb-rule-form__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RuleFormComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-rule-form', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatSelectModule,
-                    ], template: `
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-rule-form', standalone: true, imports: [CommonModule, FormsModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule], template: `
     <div class="deb-rule-form">
-      <h3 class="deb-rule-form__title">{{ rule.id ? 'Edit Rule' : 'New Form Rule' }}</h3>
+      <h3 class="deb-rule-form__title">{{ ui.text(rule.id ? 'editRuleTitle' : 'newRuleTitle') }}</h3>
 
       <!-- Trigger Field -->
       <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-        <mat-label>Trigger Field</mat-label>
+        <mat-label>{{ ui.text('triggerField') }}</mat-label>
         <mat-select [(ngModel)]="rule.fieldId" data-testid="rule-trigger">
           @for (option of triggerOptions(); track option.value) {
             <mat-option [value]="option.value">
@@ -2158,13 +2371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 
       <!-- Targets: the fields this rule acts on -->
       <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
-        <mat-label>Apply to fields</mat-label>
-        <mat-select
-          multiple
-          data-testid="rule-targets"
-          [ngModel]="targetValues()"
-          (ngModelChange)="setTargets($event)"
-        >
+        <mat-label>{{ ui.text('applyToFields') }}</mat-label>
+        <mat-select multiple data-testid="rule-targets" [ngModel]="targetValues()" (ngModelChange)="setTargets($event)">
           @for (option of targetOptions(); track option.value) {
             <mat-option [value]="option.value">
               {{ option.label }} <span class="deb-rule-path">{{ option.path }}</span>
@@ -2175,11 +2383,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 
       <!-- Conditions -->
       <div class="deb-rule-section">
-        <h4>Conditions</h4>
+        <h4>{{ ui.text('conditions') }}</h4>
         @for (cond of rule.conditions; track $index) {
           <div class="deb-rule-row">
             <mat-form-field appearance="outline" subscriptSizing="dynamic">
-              <mat-label>Operator</mat-label>
+              <mat-label>{{ ui.text('operator') }}</mat-label>
               <mat-select [(ngModel)]="cond.operator">
                 @for (op of operators; track op) {
                   <mat-option [value]="op">{{ op }}</mat-option>
@@ -2187,8 +2395,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
               </mat-select>
             </mat-form-field>
             <mat-form-field appearance="outline" subscriptSizing="dynamic">
-              <mat-label>Value</mat-label>
-              <input matInput [(ngModel)]="cond.value" placeholder="Condition value" />
+              <mat-label>{{ ui.text('value') }}</mat-label>
+              <input matInput [(ngModel)]="cond.value" [placeholder]="ui.text('conditionValuePlaceholder')" />
             </mat-form-field>
             <button mat-icon-button color="warn" type="button" (click)="removeCondition($index)">
               <mat-icon>delete</mat-icon>
@@ -2196,32 +2404,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           </div>
         }
         <button mat-stroked-button type="button" (click)="addCondition()">
-          <mat-icon>add</mat-icon> Add Condition
+          <mat-icon>add</mat-icon> {{ ui.text('addCondition') }}
         </button>
       </div>
 
       <!-- Action -->
       <div class="deb-rule-section">
-        <h4>Action</h4>
+        <h4>{{ ui.text('action') }}</h4>
         <div class="deb-rule-row">
           <mat-form-field appearance="outline" subscriptSizing="dynamic">
-            <mat-label>Action Type</mat-label>
+            <mat-label>{{ ui.text('actionType') }}</mat-label>
             <mat-select [(ngModel)]="rule.action.type">
-              <mat-option value="visibility">Visibility (Show/Hide)</mat-option>
-              <mat-option value="validation">Validation Message</mat-option>
-              <mat-option value="info">Info Banner</mat-option>
+              <mat-option value="visibility">{{ ui.text('actionVisibility') }}</mat-option>
+              <mat-option value="validation">{{ ui.text('actionValidationMessage') }}</mat-option>
+              <mat-option value="info">{{ ui.text('actionInfoBanner') }}</mat-option>
             </mat-select>
           </mat-form-field>
           <mat-form-field appearance="outline" subscriptSizing="dynamic">
-            <mat-label>Value / Message</mat-label>
-            <input matInput [(ngModel)]="rule.action.value" placeholder="false to hide, or message text" />
+            <mat-label>{{ ui.text('valueOrMessage') }}</mat-label>
+            <input matInput [(ngModel)]="rule.action.value" [placeholder]="ui.text('valueOrMessagePlaceholder')" />
           </mat-form-field>
         </div>
       </div>
 
       <div class="deb-rule-form__actions">
-        <button mat-button type="button" (click)="cancel.emit()">Cancel</button>
-        <button mat-raised-button color="primary" type="button" (click)="save.emit(rule)">Save Rule</button>
+        <button mat-button type="button" (click)="cancel.emit()">{{ ui.text('cancel') }}</button>
+        <button mat-raised-button color="primary" type="button" (click)="save.emit(rule)">{{ ui.text('saveRule') }}</button>
       </div>
     </div>
   `, 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"] }]
@@ -2238,6 +2446,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * enable/disable, edit, delete. `RuleFormComponent` authors one rule; this owns the set.
  */
 class FieldRulesListComponent {
+    /** Builder chrome, overridable via BUILDER_TEXT. */
+    ui = inject(BuilderTextService);
     store = inject(BuilderStore);
     /** The rule currently open in the editor — a new draft or a copy of an existing rule. */
     editing = signal(null, ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
@@ -2289,7 +2499,7 @@ class FieldRulesListComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FieldRulesListComponent, isStandalone: true, selector: "ngx-field-rules-list", ngImport: i0, template: `
     <div class="deb-rules">
       <div class="deb-rules__head">
-        <span class="deb-section-title">Rules</span>
+        <span class="deb-section-title">{{ ui.text('rules') }}</span>
         <button
           mat-stroked-button
           type="button"
@@ -2297,7 +2507,7 @@ class FieldRulesListComponent {
           [disabled]="!store.selectedFieldId()"
           (click)="startCreate()"
         >
-          <mat-icon>add</mat-icon> Rule
+          <mat-icon>add</mat-icon> {{ ui.text('rule') }}
         </button>
       </div>
 
@@ -2306,7 +2516,7 @@ class FieldRulesListComponent {
       }
 
       @if (store.rulesForSelectedField().length === 0 && !editing()) {
-        <p class="deb-hint" data-testid="rules-empty">No rules on this field.</p>
+        <p class="deb-hint" data-testid="rules-empty">{{ ui.text('noRulesOnField') }}</p>
       }
 
       @for (rule of store.rulesForSelectedField(); track rule.id) {
@@ -2314,19 +2524,20 @@ class FieldRulesListComponent {
           <div class="deb-rule-item__body">
             <span class="deb-rule-item__summary">{{ summarize(rule) }}</span>
             <span class="deb-rule-item__meta">
-              priority {{ rule.priority }} · {{ rule.targets.length }} target(s)
+              {{ ui.text('rulePriority', { priority: rule.priority, targets: rule.targets.length }) }}
             </span>
           </div>
           <div class="deb-rule-item__actions">
             <mat-slide-toggle
               [checked]="rule.enabled"
-              matTooltip="Enable / disable"
+              [matTooltip]="ui.text('toggleRule')"
               (change)="store.toggleRule(rule.id!, $event.checked)"
             />
             <button
               mat-icon-button
               type="button"
-              matTooltip="Move up" aria-label="Move rule up"
+              [matTooltip]="ui.text('moveUp')"
+              [attr.aria-label]="ui.text('moveRuleUp')"
               [attr.data-testid]="'rule-up-' + rule.id"
               (click)="store.moveRule(rule.id!, -1)"
             >
@@ -2335,7 +2546,8 @@ class FieldRulesListComponent {
             <button
               mat-icon-button
               type="button"
-              matTooltip="Move down" aria-label="Move rule down"
+              [matTooltip]="ui.text('moveDown')"
+              [attr.aria-label]="ui.text('moveRuleDown')"
               [attr.data-testid]="'rule-down-' + rule.id"
               (click)="store.moveRule(rule.id!, 1)"
             >
@@ -2344,7 +2556,7 @@ class FieldRulesListComponent {
             <button
               mat-icon-button
               type="button"
-              matTooltip="Edit rule"
+              [matTooltip]="ui.text('editRule')"
               [attr.data-testid]="'rule-edit-' + rule.id"
               (click)="startEdit(rule)"
             >
@@ -2354,7 +2566,7 @@ class FieldRulesListComponent {
               mat-icon-button
               type="button"
               color="warn"
-              matTooltip="Delete rule"
+              [matTooltip]="ui.text('deleteRule')"
               [attr.data-testid]="'rule-delete-' + rule.id"
               (click)="store.removeRule(rule.id!)"
             >
@@ -2371,7 +2583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-field-rules-list', standalone: true, imports: [MatButtonModule, MatIconModule, MatSlideToggleModule, MatTooltipModule, RuleFormComponent], template: `
     <div class="deb-rules">
       <div class="deb-rules__head">
-        <span class="deb-section-title">Rules</span>
+        <span class="deb-section-title">{{ ui.text('rules') }}</span>
         <button
           mat-stroked-button
           type="button"
@@ -2379,7 +2591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           [disabled]="!store.selectedFieldId()"
           (click)="startCreate()"
         >
-          <mat-icon>add</mat-icon> Rule
+          <mat-icon>add</mat-icon> {{ ui.text('rule') }}
         </button>
       </div>
 
@@ -2388,7 +2600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       }
 
       @if (store.rulesForSelectedField().length === 0 && !editing()) {
-        <p class="deb-hint" data-testid="rules-empty">No rules on this field.</p>
+        <p class="deb-hint" data-testid="rules-empty">{{ ui.text('noRulesOnField') }}</p>
       }
 
       @for (rule of store.rulesForSelectedField(); track rule.id) {
@@ -2396,19 +2608,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           <div class="deb-rule-item__body">
             <span class="deb-rule-item__summary">{{ summarize(rule) }}</span>
             <span class="deb-rule-item__meta">
-              priority {{ rule.priority }} · {{ rule.targets.length }} target(s)
+              {{ ui.text('rulePriority', { priority: rule.priority, targets: rule.targets.length }) }}
             </span>
           </div>
           <div class="deb-rule-item__actions">
             <mat-slide-toggle
               [checked]="rule.enabled"
-              matTooltip="Enable / disable"
+              [matTooltip]="ui.text('toggleRule')"
               (change)="store.toggleRule(rule.id!, $event.checked)"
             />
             <button
               mat-icon-button
               type="button"
-              matTooltip="Move up" aria-label="Move rule up"
+              [matTooltip]="ui.text('moveUp')"
+              [attr.aria-label]="ui.text('moveRuleUp')"
               [attr.data-testid]="'rule-up-' + rule.id"
               (click)="store.moveRule(rule.id!, -1)"
             >
@@ -2417,7 +2630,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             <button
               mat-icon-button
               type="button"
-              matTooltip="Move down" aria-label="Move rule down"
+              [matTooltip]="ui.text('moveDown')"
+              [attr.aria-label]="ui.text('moveRuleDown')"
               [attr.data-testid]="'rule-down-' + rule.id"
               (click)="store.moveRule(rule.id!, 1)"
             >
@@ -2426,7 +2640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             <button
               mat-icon-button
               type="button"
-              matTooltip="Edit rule"
+              [matTooltip]="ui.text('editRule')"
               [attr.data-testid]="'rule-edit-' + rule.id"
               (click)="startEdit(rule)"
             >
@@ -2436,7 +2650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
               mat-icon-button
               type="button"
               color="warn"
-              matTooltip="Delete rule"
+              [matTooltip]="ui.text('deleteRule')"
               [attr.data-testid]="'rule-delete-' + rule.id"
               (click)="store.removeRule(rule.id!)"
             >
@@ -2450,6 +2664,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         }] });
 
 class ReferencedFieldConfigComponent {
+    /** Builder chrome, overridable via BUILDER_TEXT. */
+    ui = inject(BuilderTextService);
     store = inject(BuilderStore);
     configSource = inject(ConfigSourceService, { optional: true });
     field = computed(() => this.store.selectedField(), ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
@@ -2528,56 +2744,54 @@ class ReferencedFieldConfigComponent {
     @if (field(); as f) {
       <div class="deb-referenced-field" style="margin-top: 16px;">
         <div class="deb-row" style="justify-content: space-between; align-items: center; margin-bottom: 8px;">
-          <span class="deb-section-title" style="margin:0;">Referenced Field</span>
+          <span class="deb-section-title" style="margin:0;">{{ ui.text('referencedField') }}</span>
           <mat-slide-toggle
             data-testid="toggle-referenced"
             [ngModel]="f.isReferenced ?? false"
             (ngModelChange)="toggleReferenced(f, $event)"
           >
-            Link
+            {{ ui.text('link') }}
           </mat-slide-toggle>
         </div>
 
         @if (f.isReferenced) {
           <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full" style="margin-bottom: 8px;">
-            <mat-label>Source Entity Key</mat-label>
+            <mat-label>{{ ui.text('sourceEntityKey') }}</mat-label>
             <input
               matInput
               data-testid="referenced-entity-key"
               [ngModel]="f.referencedEntityKey ?? ''"
               (ngModelChange)="updateEntityKey(f, $event)"
-              placeholder="e.g. individuals"
+              [placeholder]="ui.text('sourceEntityKeyPlaceholder')"
             />
           </mat-form-field>
 
           <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full" style="margin-bottom: 8px;">
-            <mat-label>Source Field ID</mat-label>
+            <mat-label>{{ ui.text('sourceFieldId') }}</mat-label>
             <input
               matInput
               data-testid="referenced-field-id"
               [ngModel]="f.referencedFieldId ?? ''"
               (ngModelChange)="updateFieldId(f, $event)"
-              placeholder="e.g. firstName"
+              [placeholder]="ui.text('sourceFieldIdPlaceholder')"
             />
           </mat-form-field>
 
           @if (f.hasDrift) {
-            <div class="deb-drift-banner" data-testid="drift-banner" style="background: #fff3e0; border: 1px solid #ffe0b2; padding: 8px 12px; border-radius: 4px; margin-top: 8px;">
+            <div
+              class="deb-drift-banner"
+              data-testid="drift-banner"
+              style="background: #fff3e0; border: 1px solid #ffe0b2; padding: 8px 12px; border-radius: 4px; margin-top: 8px;"
+            >
               <div class="deb-row" style="gap: 8px; align-items: center; color: #e65100; font-weight: 500;">
                 <mat-icon style="font-size: 18px; width:18px; height:18px;">warning</mat-icon>
-                <span>Source field definition has drifted!</span>
+                <span>{{ ui.text('driftHeading') }}</span>
               </div>
               <p style="margin: 4px 0 8px 0; font-size: 12px; color: #666;">
-                The upstream field configuration in "{{ f.referencedEntityKey }}" has evolved.
+                {{ ui.text('driftBody', { entity: f.referencedEntityKey ?? '' }) }}
               </p>
-              <button
-                mat-flat-button
-                color="warn"
-                type="button"
-                data-testid="sync-source-btn"
-                (click)="syncWithSource(f)"
-              >
-                Sync with Source
+              <button mat-flat-button color="warn" type="button" data-testid="sync-source-btn" (click)="syncWithSource(f)">
+                {{ ui.text('syncWithSource') }}
               </button>
             </div>
           }
@@ -2606,56 +2820,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
     @if (field(); as f) {
       <div class="deb-referenced-field" style="margin-top: 16px;">
         <div class="deb-row" style="justify-content: space-between; align-items: center; margin-bottom: 8px;">
-          <span class="deb-section-title" style="margin:0;">Referenced Field</span>
+          <span class="deb-section-title" style="margin:0;">{{ ui.text('referencedField') }}</span>
           <mat-slide-toggle
             data-testid="toggle-referenced"
             [ngModel]="f.isReferenced ?? false"
             (ngModelChange)="toggleReferenced(f, $event)"
           >
-            Link
+            {{ ui.text('link') }}
           </mat-slide-toggle>
         </div>
 
         @if (f.isReferenced) {
           <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full" style="margin-bottom: 8px;">
-            <mat-label>Source Entity Key</mat-label>
+            <mat-label>{{ ui.text('sourceEntityKey') }}</mat-label>
             <input
               matInput
               data-testid="referenced-entity-key"
               [ngModel]="f.referencedEntityKey ?? ''"
               (ngModelChange)="updateEntityKey(f, $event)"
-              placeholder="e.g. individuals"
+              [placeholder]="ui.text('sourceEntityKeyPlaceholder')"
             />
           </mat-form-field>
 
           <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full" style="margin-bottom: 8px;">
-            <mat-label>Source Field ID</mat-label>
+            <mat-label>{{ ui.text('sourceFieldId') }}</mat-label>
             <input
               matInput
               data-testid="referenced-field-id"
               [ngModel]="f.referencedFieldId ?? ''"
               (ngModelChange)="updateFieldId(f, $event)"
-              placeholder="e.g. firstName"
+              [placeholder]="ui.text('sourceFieldIdPlaceholder')"
             />
           </mat-form-field>
 
           @if (f.hasDrift) {
-            <div class="deb-drift-banner" data-testid="drift-banner" style="background: #fff3e0; border: 1px solid #ffe0b2; padding: 8px 12px; border-radius: 4px; margin-top: 8px;">
+            <div
+              class="deb-drift-banner"
+              data-testid="drift-banner"
+              style="background: #fff3e0; border: 1px solid #ffe0b2; padding: 8px 12px; border-radius: 4px; margin-top: 8px;"
+            >
               <div class="deb-row" style="gap: 8px; align-items: center; color: #e65100; font-weight: 500;">
                 <mat-icon style="font-size: 18px; width:18px; height:18px;">warning</mat-icon>
-                <span>Source field definition has drifted!</span>
+                <span>{{ ui.text('driftHeading') }}</span>
               </div>
               <p style="margin: 4px 0 8px 0; font-size: 12px; color: #666;">
-                The upstream field configuration in "{{ f.referencedEntityKey }}" has evolved.
+                {{ ui.text('driftBody', { entity: f.referencedEntityKey ?? '' }) }}
               </p>
-              <button
-                mat-flat-button
-                color="warn"
-                type="button"
-                data-testid="sync-source-btn"
-                (click)="syncWithSource(f)"
-              >
-                Sync with Source
+              <button mat-flat-button color="warn" type="button" data-testid="sync-source-btn" (click)="syncWithSource(f)">
+                {{ ui.text('syncWithSource') }}
               </button>
             </div>
           }
@@ -2670,6 +2882,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * FieldInspectorComponent — edits every property of the currently selected field.
  */
 class FieldInspectorComponent {
+    /** Builder chrome, overridable via BUILDER_TEXT. */
+    ui = inject(BuilderTextService);
     store = inject(BuilderStore);
     field = this.store.selectedField;
     meta = computed(() => {
@@ -2806,7 +3020,7 @@ class FieldInspectorComponent {
         return String(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FieldInspectorComponent, isStandalone: true, selector: "ngx-field-inspector", ngImport: i0, template: "@if (field(); as f) {\n  <div class=\"deb-inspector\">\n    <!-- Identity -->\n    <div class=\"deb-row\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-label>Field id</mat-label>\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n        @if (store.hasManualId(f.id)) {\n          <mat-hint>The stored data key for this saved field \u2014 fixed.</mat-hint>\n        } @else {\n          <mat-hint>Derived from the label. Used as the data key.</mat-hint>\n        }\n      </mat-form-field>\n      <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n    </div>\n\n    @if (tabOptions().length > 1) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Tab</mat-label>\n        <mat-select data-testid=\"field-tab\"\n          [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n          @for (tab of tabOptions(); track tab.id) {\n            <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n          }\n        </mat-select>\n        <mat-hint>Moving the field rewrites its path and repoints the rules that named it.</mat-hint>\n      </mat-form-field>\n    }\n\n\n    <!-- Localised text (active language) -->\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n      <mat-label>Label ({{ lang() }})</mat-label>\n      <input\n        matInput\n        data-testid=\"field-label\"\n        [ngModel]=\"labelValue(f)\"\n        (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), lang(), $event)\"\n      />\n    </mat-form-field>\n\n    @if (meta()?.supportsPlaceholder) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Placeholder ({{ lang() }})</mat-label>\n        <input\n          matInput\n          [ngModel]=\"placeholderValue(f)\"\n          (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n        />\n      </mat-form-field>\n    }\n\n    @if (meta()?.supportsDefaultValue) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Default value</mat-label>\n        <input\n          matInput\n          [ngModel]=\"f.defaultValue ?? ''\"\n          (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n        />\n      </mat-form-field>\n    }\n\n    <!-- Entity reference, cascade, and autoPatch -->\n    @if (meta()?.isEntityRef) {\n      <mat-divider></mat-divider>\n      <ngx-entity-reference-config />\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length) {\n        <span class=\"deb-section-title\">Validation</span>\n        <div class=\"deb-toggles\">\n          @for (v of m.flagValidators; track v) {\n            <mat-checkbox\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\n              (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n            >{{ v }}</mat-checkbox>\n          }\n        </div>\n        @for (v of m.paramValidators; track v) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ v }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [ngModel]=\"store.getParamValidator(f, v)\"\n              (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n            />\n          </mat-form-field>\n        }\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <mat-divider></mat-divider>\n      <span class=\"deb-section-title\">Data source</span>\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Options come from</mat-label>\n        <mat-select\n          data-testid=\"data-source\"\n          [ngModel]=\"store.fieldDataSource(f)\"\n          (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n        >\n          <mat-option value=\"none\">Nothing yet</mat-option>\n          <mat-option value=\"manual\">Options authored here</mat-option>\n          <mat-option value=\"lookup\">A named list</mat-option>\n        </mat-select>\n      </mat-form-field>\n    }\n\n    <!-- Named lookup list -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>List name</mat-label>\n        <input\n          matInput\n          data-testid=\"list-name\"\n          [ngModel]=\"f.listName ?? ''\"\n          (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n        />\n      </mat-form-field>\n      <p class=\"deb-hint\">\n        The consuming app resolves this name through its lookup registry. Options are not\n        authored here.\n      </p>\n    }\n\n    <!-- Inline options -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\n      <div class=\"deb-row\" style=\"justify-content: space-between;\">\n        <span class=\"deb-section-title\">Options</span>\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(store.keyOf(f))\">\n          <mat-icon>add</mat-icon> Option\n        </button>\n      </div>\n      @for (opt of f.options ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <!-- One input: the displayed text is the stored value. -->\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>Option ({{ lang() }})</mat-label>\n            <input\n              matInput\n              [attr.data-testid]=\"'option-' + $index\"\n              [ngModel]=\"optionLabel(opt)\"\n              (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n            />\n          </mat-form-field>\n          <button mat-icon-button type=\"button\" color=\"warn\"\n            (click)=\"store.removeOption(store.keyOf(f), $index)\" matTooltip=\"Remove option\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.options ?? []).length) {\n        <p class=\"deb-hint\">No options yet \u2014 add at least one.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Flags -->\n    <span class=\"deb-section-title\">Display</span>\n    <div class=\"deb-toggles\">\n      <mat-slide-toggle\n        [ngModel]=\"f.visibility ?? true\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n      >Visible</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.table?.visible ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n      >Table column</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.readonly ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n      >Read-only</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.disabled ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n      >Disabled</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.maskData ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n      >Mask data (RBAC)</mat-slide-toggle>\n      <mat-slide-toggle\n        data-testid=\"toggle-critical\"\n        [ngModel]=\"f.criticalField ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n        matTooltip=\"Renders locked; editing it announces a change against the session baseline.\"\n      >Critical field</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.showOnMinimize ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n        matTooltip=\"Shown in the record editor's summary panel.\"\n      >Show in summary</mat-slide-toggle>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <div class=\"deb-row deb-row--split\">\n      <span class=\"deb-section-title\">Show when</span>\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n        <mat-icon>add</mat-icon> Condition\n      </button>\n    </div>\n    @for (entry of showWhenEntries(f); track entry.key) {\n      <div class=\"deb-option-row\" data-testid=\"option-row\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>Watched field</mat-label>\n          <mat-select data-testid=\"show-when-field\"\n            [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\">\n            @for (option of optionsWith(entry.key); track option.value) {\n              <mat-option [value]=\"option.value\">\n                {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>Equals</mat-label>\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n        </mat-form-field>\n        <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove condition\"\n          (click)=\"removeShowWhen(f, entry.key)\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    }\n    @if (!showWhenEntries(f).length) {\n      <p class=\"deb-hint\">Always visible. Add a condition to show this field only for certain values.</p>\n    }\n\n    <!-- patchOnTrue (boolean/checkbox only) -->\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\n      <mat-divider></mat-divider>\n      <div class=\"deb-row deb-row--split\">\n        <span class=\"deb-section-title\">Copy on true</span>\n        <button mat-stroked-button type=\"button\" data-testid=\"add-patch-on-true\"\n          (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\">\n          <mat-icon>add</mat-icon> Mapping\n        </button>\n      </div>\n      @for (mapping of f.patchOnTrue ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>From field</mat-label>\n            <mat-select data-testid=\"patch-on-true-from\"\n              [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\">\n              @for (option of optionsWith(mapping.from); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>To field</mat-label>\n            <mat-select data-testid=\"patch-on-true-to\"\n              [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\">\n              @for (option of optionsWith(mapping.to); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove mapping\"\n            (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.patchOnTrue ?? []).length) {\n        <p class=\"deb-hint\">When this flips to true, copy one field's value into another.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Rules attached to this field -->\n    <ngx-field-rules-list />\n\n    <mat-divider></mat-divider>\n\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\n    <ngx-referenced-field-config />\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>Select a field to edit its properties.</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityReferenceConfigComponent, selector: "ngx-entity-reference-config" }, { kind: "component", type: FieldRulesListComponent, selector: "ngx-field-rules-list" }, { kind: "component", type: ReferencedFieldConfigComponent, selector: "ngx-referenced-field-config" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FieldInspectorComponent, isStandalone: true, selector: "ngx-field-inspector", ngImport: i0, template: "@if (field(); as f) {\n  <div class=\"deb-inspector\">\n    <!-- Identity -->\n    <div class=\"deb-row\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ ui.text('fieldId') }}</mat-label>\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n        @if (store.hasManualId(f.id)) {\n          <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n        } @else {\n          <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</mat-hint>\n        }\n      </mat-form-field>\n      <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n    </div>\n\n    @if (tabOptions().length > 1) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('tab') }}</mat-label>\n        <mat-select data-testid=\"field-tab\" [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n          @for (tab of tabOptions(); track tab.id) {\n            <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n          }\n        </mat-select>\n        <mat-hint>{{ ui.text('tabMoveHint') }}</mat-hint>\n      </mat-form-field>\n    }\n\n    <!-- Localised text (active language) -->\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n      <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n      <input\n        matInput\n        data-testid=\"field-label\"\n        [ngModel]=\"labelValue(f)\"\n        (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), lang(), $event)\"\n      />\n    </mat-form-field>\n\n    @if (meta()?.supportsPlaceholder) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n        <input\n          matInput\n          [ngModel]=\"placeholderValue(f)\"\n          (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n        />\n      </mat-form-field>\n    }\n\n    @if (meta()?.supportsDefaultValue) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n        <input\n          matInput\n          [ngModel]=\"f.defaultValue ?? ''\"\n          (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n        />\n      </mat-form-field>\n    }\n\n    <!-- Entity reference, cascade, and autoPatch -->\n    @if (meta()?.isEntityRef) {\n      <mat-divider></mat-divider>\n      <ngx-entity-reference-config />\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length) {\n        <span class=\"deb-section-title\">{{ ui.text('validation') }}</span>\n        <div class=\"deb-toggles\">\n          @for (v of m.flagValidators; track v) {\n            <mat-checkbox\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\n              (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n              >{{ v }}</mat-checkbox\n            >\n          }\n        </div>\n        @for (v of m.paramValidators; track v) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ v }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [ngModel]=\"store.getParamValidator(f, v)\"\n              (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n            />\n          </mat-form-field>\n        }\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <mat-divider></mat-divider>\n      <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n        <mat-select\n          data-testid=\"data-source\"\n          [ngModel]=\"store.fieldDataSource(f)\"\n          (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n        >\n          <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n          <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n          <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    }\n\n    <!-- Named lookup list -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('listName') }}</mat-label>\n        <input\n          matInput\n          data-testid=\"list-name\"\n          [ngModel]=\"f.listName ?? ''\"\n          (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n        />\n      </mat-form-field>\n      <p class=\"deb-hint\">\n        {{ ui.text('listNameHint') }}\n      </p>\n    }\n\n    <!-- Inline options -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\n      <div class=\"deb-row\" style=\"justify-content: space-between\">\n        <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(store.keyOf(f))\">\n          <mat-icon>add</mat-icon> {{ ui.text('option') }}\n        </button>\n      </div>\n      @for (opt of f.options ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <!-- One input: the displayed text is the stored value. -->\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [attr.data-testid]=\"'option-' + $index\"\n              [ngModel]=\"optionLabel(opt)\"\n              (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n            />\n          </mat-form-field>\n          <button\n            mat-icon-button\n            type=\"button\"\n            color=\"warn\"\n            (click)=\"store.removeOption(store.keyOf(f), $index)\"\n            [matTooltip]=\"ui.text('removeOption')\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.options ?? []).length) {\n        <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Flags -->\n    <span class=\"deb-section-title\">{{ ui.text('display') }}</span>\n    <div class=\"deb-toggles\">\n      <mat-slide-toggle\n        [ngModel]=\"f.visibility ?? true\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n        >{{ ui.text('visible') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.table?.visible ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n        >{{ ui.text('tableColumn') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.readonly ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n        >{{ ui.text('readOnly') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.disabled ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n        >{{ ui.text('disabled') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.maskData ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n        >{{ ui.text('maskData') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        data-testid=\"toggle-critical\"\n        [ngModel]=\"f.criticalField ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n        [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n        >{{ ui.text('criticalField') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.showOnMinimize ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n        [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n        >{{ ui.text('showInSummary') }}</mat-slide-toggle\n      >\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <div class=\"deb-row deb-row--split\">\n      <span class=\"deb-section-title\">{{ ui.text('showWhen') }}</span>\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n        <mat-icon>add</mat-icon> {{ ui.text('condition') }}\n      </button>\n    </div>\n    @for (entry of showWhenEntries(f); track entry.key) {\n      <div class=\"deb-option-row\" data-testid=\"option-row\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>{{ ui.text('watchedField') }}</mat-label>\n          <mat-select\n            data-testid=\"show-when-field\"\n            [ngModel]=\"entry.key\"\n            (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n          >\n            @for (option of optionsWith(entry.key); track option.value) {\n              <mat-option [value]=\"option.value\">\n                {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>{{ ui.text('equals') }}</mat-label>\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n        </mat-form-field>\n        <button\n          mat-icon-button\n          type=\"button\"\n          color=\"warn\"\n          [matTooltip]=\"ui.text('removeCondition')\"\n          (click)=\"removeShowWhen(f, entry.key)\"\n        >\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    }\n    @if (!showWhenEntries(f).length) {\n      <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n    }\n\n    <!-- patchOnTrue (boolean/checkbox only) -->\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\n      <mat-divider></mat-divider>\n      <div class=\"deb-row deb-row--split\">\n        <span class=\"deb-section-title\">{{ ui.text('copyOnTrue') }}</span>\n        <button\n          mat-stroked-button\n          type=\"button\"\n          data-testid=\"add-patch-on-true\"\n          (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n        >\n          <mat-icon>add</mat-icon> {{ ui.text('mapping') }}\n        </button>\n      </div>\n      @for (mapping of f.patchOnTrue ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fromField') }}</mat-label>\n            <mat-select\n              data-testid=\"patch-on-true-from\"\n              [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n            >\n              @for (option of optionsWith(mapping.from); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('toField') }}</mat-label>\n            <mat-select\n              data-testid=\"patch-on-true-to\"\n              [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n            >\n              @for (option of optionsWith(mapping.to); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <button\n            mat-icon-button\n            type=\"button\"\n            color=\"warn\"\n            [matTooltip]=\"ui.text('removeMapping')\"\n            (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.patchOnTrue ?? []).length) {\n        <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Rules attached to this field -->\n    <ngx-field-rules-list />\n\n    <mat-divider></mat-divider>\n\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\n    <ngx-referenced-field-config />\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>{{ ui.text('inspectorEmpty') }}</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityReferenceConfigComponent, selector: "ngx-entity-reference-config" }, { kind: "component", type: FieldRulesListComponent, selector: "ngx-field-rules-list" }, { kind: "component", type: ReferencedFieldConfigComponent, selector: "ngx-referenced-field-config" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldInspectorComponent, decorators: [{
             type: Component,
@@ -2824,7 +3038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         EntityReferenceConfigComponent,
                         FieldRulesListComponent,
                         ReferencedFieldConfigComponent,
-                    ], template: "@if (field(); as f) {\n  <div class=\"deb-inspector\">\n    <!-- Identity -->\n    <div class=\"deb-row\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-label>Field id</mat-label>\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n        @if (store.hasManualId(f.id)) {\n          <mat-hint>The stored data key for this saved field \u2014 fixed.</mat-hint>\n        } @else {\n          <mat-hint>Derived from the label. Used as the data key.</mat-hint>\n        }\n      </mat-form-field>\n      <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n    </div>\n\n    @if (tabOptions().length > 1) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Tab</mat-label>\n        <mat-select data-testid=\"field-tab\"\n          [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n          @for (tab of tabOptions(); track tab.id) {\n            <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n          }\n        </mat-select>\n        <mat-hint>Moving the field rewrites its path and repoints the rules that named it.</mat-hint>\n      </mat-form-field>\n    }\n\n\n    <!-- Localised text (active language) -->\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n      <mat-label>Label ({{ lang() }})</mat-label>\n      <input\n        matInput\n        data-testid=\"field-label\"\n        [ngModel]=\"labelValue(f)\"\n        (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), lang(), $event)\"\n      />\n    </mat-form-field>\n\n    @if (meta()?.supportsPlaceholder) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Placeholder ({{ lang() }})</mat-label>\n        <input\n          matInput\n          [ngModel]=\"placeholderValue(f)\"\n          (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n        />\n      </mat-form-field>\n    }\n\n    @if (meta()?.supportsDefaultValue) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Default value</mat-label>\n        <input\n          matInput\n          [ngModel]=\"f.defaultValue ?? ''\"\n          (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n        />\n      </mat-form-field>\n    }\n\n    <!-- Entity reference, cascade, and autoPatch -->\n    @if (meta()?.isEntityRef) {\n      <mat-divider></mat-divider>\n      <ngx-entity-reference-config />\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length) {\n        <span class=\"deb-section-title\">Validation</span>\n        <div class=\"deb-toggles\">\n          @for (v of m.flagValidators; track v) {\n            <mat-checkbox\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\n              (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n            >{{ v }}</mat-checkbox>\n          }\n        </div>\n        @for (v of m.paramValidators; track v) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ v }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [ngModel]=\"store.getParamValidator(f, v)\"\n              (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n            />\n          </mat-form-field>\n        }\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <mat-divider></mat-divider>\n      <span class=\"deb-section-title\">Data source</span>\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>Options come from</mat-label>\n        <mat-select\n          data-testid=\"data-source\"\n          [ngModel]=\"store.fieldDataSource(f)\"\n          (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n        >\n          <mat-option value=\"none\">Nothing yet</mat-option>\n          <mat-option value=\"manual\">Options authored here</mat-option>\n          <mat-option value=\"lookup\">A named list</mat-option>\n        </mat-select>\n      </mat-form-field>\n    }\n\n    <!-- Named lookup list -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>List name</mat-label>\n        <input\n          matInput\n          data-testid=\"list-name\"\n          [ngModel]=\"f.listName ?? ''\"\n          (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n        />\n      </mat-form-field>\n      <p class=\"deb-hint\">\n        The consuming app resolves this name through its lookup registry. Options are not\n        authored here.\n      </p>\n    }\n\n    <!-- Inline options -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\n      <div class=\"deb-row\" style=\"justify-content: space-between;\">\n        <span class=\"deb-section-title\">Options</span>\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(store.keyOf(f))\">\n          <mat-icon>add</mat-icon> Option\n        </button>\n      </div>\n      @for (opt of f.options ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <!-- One input: the displayed text is the stored value. -->\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>Option ({{ lang() }})</mat-label>\n            <input\n              matInput\n              [attr.data-testid]=\"'option-' + $index\"\n              [ngModel]=\"optionLabel(opt)\"\n              (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n            />\n          </mat-form-field>\n          <button mat-icon-button type=\"button\" color=\"warn\"\n            (click)=\"store.removeOption(store.keyOf(f), $index)\" matTooltip=\"Remove option\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.options ?? []).length) {\n        <p class=\"deb-hint\">No options yet \u2014 add at least one.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Flags -->\n    <span class=\"deb-section-title\">Display</span>\n    <div class=\"deb-toggles\">\n      <mat-slide-toggle\n        [ngModel]=\"f.visibility ?? true\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n      >Visible</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.table?.visible ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n      >Table column</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.readonly ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n      >Read-only</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.disabled ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n      >Disabled</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.maskData ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n      >Mask data (RBAC)</mat-slide-toggle>\n      <mat-slide-toggle\n        data-testid=\"toggle-critical\"\n        [ngModel]=\"f.criticalField ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n        matTooltip=\"Renders locked; editing it announces a change against the session baseline.\"\n      >Critical field</mat-slide-toggle>\n      <mat-slide-toggle\n        [ngModel]=\"f.showOnMinimize ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n        matTooltip=\"Shown in the record editor's summary panel.\"\n      >Show in summary</mat-slide-toggle>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <div class=\"deb-row deb-row--split\">\n      <span class=\"deb-section-title\">Show when</span>\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n        <mat-icon>add</mat-icon> Condition\n      </button>\n    </div>\n    @for (entry of showWhenEntries(f); track entry.key) {\n      <div class=\"deb-option-row\" data-testid=\"option-row\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>Watched field</mat-label>\n          <mat-select data-testid=\"show-when-field\"\n            [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\">\n            @for (option of optionsWith(entry.key); track option.value) {\n              <mat-option [value]=\"option.value\">\n                {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>Equals</mat-label>\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n        </mat-form-field>\n        <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove condition\"\n          (click)=\"removeShowWhen(f, entry.key)\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    }\n    @if (!showWhenEntries(f).length) {\n      <p class=\"deb-hint\">Always visible. Add a condition to show this field only for certain values.</p>\n    }\n\n    <!-- patchOnTrue (boolean/checkbox only) -->\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\n      <mat-divider></mat-divider>\n      <div class=\"deb-row deb-row--split\">\n        <span class=\"deb-section-title\">Copy on true</span>\n        <button mat-stroked-button type=\"button\" data-testid=\"add-patch-on-true\"\n          (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\">\n          <mat-icon>add</mat-icon> Mapping\n        </button>\n      </div>\n      @for (mapping of f.patchOnTrue ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>From field</mat-label>\n            <mat-select data-testid=\"patch-on-true-from\"\n              [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\">\n              @for (option of optionsWith(mapping.from); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>To field</mat-label>\n            <mat-select data-testid=\"patch-on-true-to\"\n              [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\">\n              @for (option of optionsWith(mapping.to); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove mapping\"\n            (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.patchOnTrue ?? []).length) {\n        <p class=\"deb-hint\">When this flips to true, copy one field's value into another.</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Rules attached to this field -->\n    <ngx-field-rules-list />\n\n    <mat-divider></mat-divider>\n\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\n    <ngx-referenced-field-config />\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>Select a field to edit its properties.</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\n"] }]
+                    ], template: "@if (field(); as f) {\n  <div class=\"deb-inspector\">\n    <!-- Identity -->\n    <div class=\"deb-row\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ ui.text('fieldId') }}</mat-label>\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\n        @if (store.hasManualId(f.id)) {\n          <mat-hint>{{ ui.text('fieldIdFixedHint') }}</mat-hint>\n        } @else {\n          <mat-hint>{{ ui.text('fieldIdDerivedHint') }}</mat-hint>\n        }\n      </mat-form-field>\n      <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\n    </div>\n\n    @if (tabOptions().length > 1) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('tab') }}</mat-label>\n        <mat-select data-testid=\"field-tab\" [ngModel]=\"currentTabId(f)\" (ngModelChange)=\"moveToTab(f, $event)\">\n          @for (tab of tabOptions(); track tab.id) {\n            <mat-option [value]=\"tab.id\">{{ tab.label }}</mat-option>\n          }\n        </mat-select>\n        <mat-hint>{{ ui.text('tabMoveHint') }}</mat-hint>\n      </mat-form-field>\n    }\n\n    <!-- Localised text (active language) -->\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n      <mat-label>{{ ui.text('labelInLanguage', { language: lang() }) }}</mat-label>\n      <input\n        matInput\n        data-testid=\"field-label\"\n        [ngModel]=\"labelValue(f)\"\n        (ngModelChange)=\"store.setFieldLabel(store.keyOf(f), lang(), $event)\"\n      />\n    </mat-form-field>\n\n    @if (meta()?.supportsPlaceholder) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('placeholderInLanguage', { language: lang() }) }}</mat-label>\n        <input\n          matInput\n          [ngModel]=\"placeholderValue(f)\"\n          (ngModelChange)=\"store.setFieldPlaceholder(store.keyOf(f), lang(), $event)\"\n        />\n      </mat-form-field>\n    }\n\n    @if (meta()?.supportsDefaultValue) {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('defaultValue') }}</mat-label>\n        <input\n          matInput\n          [ngModel]=\"f.defaultValue ?? ''\"\n          (ngModelChange)=\"store.updateField(store.keyOf(f), { defaultValue: $event })\"\n        />\n      </mat-form-field>\n    }\n\n    <!-- Entity reference, cascade, and autoPatch -->\n    @if (meta()?.isEntityRef) {\n      <mat-divider></mat-divider>\n      <ngx-entity-reference-config />\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Validators -->\n    @if (meta(); as m) {\n      @if (m.flagValidators.length || m.paramValidators.length) {\n        <span class=\"deb-section-title\">{{ ui.text('validation') }}</span>\n        <div class=\"deb-toggles\">\n          @for (v of m.flagValidators; track v) {\n            <mat-checkbox\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\n              (ngModelChange)=\"store.toggleFlagValidator(store.keyOf(f), v, $event)\"\n              >{{ v }}</mat-checkbox\n            >\n          }\n        </div>\n        @for (v of m.paramValidators; track v) {\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ v }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [ngModel]=\"store.getParamValidator(f, v)\"\n              (ngModelChange)=\"store.setParamValidator(store.keyOf(f), v, toNum($event))\"\n            />\n          </mat-form-field>\n        }\n      }\n    }\n\n    <!-- Options (dropdown / radio / multiSelect) -->\n    @if (meta()?.hasOptions) {\n      <mat-divider></mat-divider>\n      <span class=\"deb-section-title\">{{ ui.text('dataSource') }}</span>\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('optionsComeFrom') }}</mat-label>\n        <mat-select\n          data-testid=\"data-source\"\n          [ngModel]=\"store.fieldDataSource(f)\"\n          (ngModelChange)=\"store.setFieldDataSource(store.keyOf(f), $event)\"\n        >\n          <mat-option value=\"none\">{{ ui.text('optionsSourceNone') }}</mat-option>\n          <mat-option value=\"manual\">{{ ui.text('optionsSourceInline') }}</mat-option>\n          <mat-option value=\"lookup\">{{ ui.text('optionsSourceList') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    }\n\n    <!-- Named lookup list -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n        <mat-label>{{ ui.text('listName') }}</mat-label>\n        <input\n          matInput\n          data-testid=\"list-name\"\n          [ngModel]=\"f.listName ?? ''\"\n          (ngModelChange)=\"store.setListName(store.keyOf(f), $event)\"\n        />\n      </mat-form-field>\n      <p class=\"deb-hint\">\n        {{ ui.text('listNameHint') }}\n      </p>\n    }\n\n    <!-- Inline options -->\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\n      <div class=\"deb-row\" style=\"justify-content: space-between\">\n        <span class=\"deb-section-title\">{{ ui.text('options') }}</span>\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(store.keyOf(f))\">\n          <mat-icon>add</mat-icon> {{ ui.text('option') }}\n        </button>\n      </div>\n      @for (opt of f.options ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <!-- One input: the displayed text is the stored value. -->\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n            <mat-label>{{ ui.text('optionInLanguage', { language: lang() }) }}</mat-label>\n            <input\n              matInput\n              [attr.data-testid]=\"'option-' + $index\"\n              [ngModel]=\"optionLabel(opt)\"\n              (ngModelChange)=\"store.setOptionLabel(store.keyOf(f), $index, lang(), $event)\"\n            />\n          </mat-form-field>\n          <button\n            mat-icon-button\n            type=\"button\"\n            color=\"warn\"\n            (click)=\"store.removeOption(store.keyOf(f), $index)\"\n            [matTooltip]=\"ui.text('removeOption')\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.options ?? []).length) {\n        <p class=\"deb-hint\">{{ ui.text('noOptionsYet') }}</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Flags -->\n    <span class=\"deb-section-title\">{{ ui.text('display') }}</span>\n    <div class=\"deb-toggles\">\n      <mat-slide-toggle\n        [ngModel]=\"f.visibility ?? true\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { visibility: $event })\"\n        >{{ ui.text('visible') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.table?.visible ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { table: { visible: $event } })\"\n        >{{ ui.text('tableColumn') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.readonly ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { readonly: $event })\"\n        >{{ ui.text('readOnly') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.disabled ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { disabled: $event })\"\n        >{{ ui.text('disabled') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.maskData ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { maskData: $event })\"\n        >{{ ui.text('maskData') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        data-testid=\"toggle-critical\"\n        [ngModel]=\"f.criticalField ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { criticalField: $event })\"\n        [matTooltip]=\"ui.text('criticalFieldTooltip')\"\n        >{{ ui.text('criticalField') }}</mat-slide-toggle\n      >\n      <mat-slide-toggle\n        [ngModel]=\"f.showOnMinimize ?? false\"\n        (ngModelChange)=\"store.updateField(store.keyOf(f), { showOnMinimize: $event })\"\n        [matTooltip]=\"ui.text('showInSummaryTooltip')\"\n        >{{ ui.text('showInSummary') }}</mat-slide-toggle\n      >\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <!-- Conditional visibility (static showWhen) -->\n    <div class=\"deb-row deb-row--split\">\n      <span class=\"deb-section-title\">{{ ui.text('showWhen') }}</span>\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\n        <mat-icon>add</mat-icon> {{ ui.text('condition') }}\n      </button>\n    </div>\n    @for (entry of showWhenEntries(f); track entry.key) {\n      <div class=\"deb-option-row\" data-testid=\"option-row\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>{{ ui.text('watchedField') }}</mat-label>\n          <mat-select\n            data-testid=\"show-when-field\"\n            [ngModel]=\"entry.key\"\n            (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\"\n          >\n            @for (option of optionsWith(entry.key); track option.value) {\n              <mat-option [value]=\"option.value\">\n                {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-label>{{ ui.text('equals') }}</mat-label>\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\n        </mat-form-field>\n        <button\n          mat-icon-button\n          type=\"button\"\n          color=\"warn\"\n          [matTooltip]=\"ui.text('removeCondition')\"\n          (click)=\"removeShowWhen(f, entry.key)\"\n        >\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    }\n    @if (!showWhenEntries(f).length) {\n      <p class=\"deb-hint\">{{ ui.text('alwaysVisibleHint') }}</p>\n    }\n\n    <!-- patchOnTrue (boolean/checkbox only) -->\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\n      <mat-divider></mat-divider>\n      <div class=\"deb-row deb-row--split\">\n        <span class=\"deb-section-title\">{{ ui.text('copyOnTrue') }}</span>\n        <button\n          mat-stroked-button\n          type=\"button\"\n          data-testid=\"add-patch-on-true\"\n          (click)=\"store.addPatchOnTrueMapping(store.keyOf(f))\"\n        >\n          <mat-icon>add</mat-icon> {{ ui.text('mapping') }}\n        </button>\n      </div>\n      @for (mapping of f.patchOnTrue ?? []; track $index) {\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('fromField') }}</mat-label>\n            <mat-select\n              data-testid=\"patch-on-true-from\"\n              [ngModel]=\"mapping.from\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { from: $event })\"\n            >\n              @for (option of optionsWith(mapping.from); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ ui.text('toField') }}</mat-label>\n            <mat-select\n              data-testid=\"patch-on-true-to\"\n              [ngModel]=\"mapping.to\"\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(store.keyOf(f), $index, { to: $event })\"\n            >\n              @for (option of optionsWith(mapping.to); track option.value) {\n                <mat-option [value]=\"option.value\">\n                  {{ option.label }} <span class=\"deb-path-hint\">{{ option.path }}</span>\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <button\n            mat-icon-button\n            type=\"button\"\n            color=\"warn\"\n            [matTooltip]=\"ui.text('removeMapping')\"\n            (click)=\"store.removePatchOnTrueMapping(store.keyOf(f), $index)\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      }\n      @if (!(f.patchOnTrue ?? []).length) {\n        <p class=\"deb-hint\">{{ ui.text('copyOnTrueHint') }}</p>\n      }\n    }\n\n    <mat-divider></mat-divider>\n\n    <!-- Rules attached to this field -->\n    <ngx-field-rules-list />\n\n    <mat-divider></mat-divider>\n\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\n    <ngx-referenced-field-config />\n  </div>\n} @else {\n  <div class=\"deb-inspector__empty\">\n    <mat-icon>touch_app</mat-icon>\n    <p>{{ ui.text('inspectorEmpty') }}</p>\n  </div>\n}\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\n"] }]
         }] });
 
 /**
@@ -2879,8 +3093,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * TabManagerComponent — add / rename / reorder / remove tabs & sub-tabs with systemDefault protection.
  */
 class TabManagerComponent {
+    /** Builder chrome, overridable via BUILDER_TEXT. */
+    ui = inject(BuilderTextService);
     store = inject(BuilderStore);
-    canEditSystemDefaultsFn = inject(SYSTEM_DEFAULT_CAN_EDIT, { optional: true });
+    canEditSystemDefaultsFn = inject(SYSTEM_DEFAULT_CAN_EDIT, {
+        optional: true,
+    });
     lang() {
         return this.store.activeLanguage();
     }
@@ -2902,21 +3120,21 @@ class TabManagerComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: TabManagerComponent, isStandalone: true, selector: "ngx-tab-manager", ngImport: i0, template: `
     <div class="deb-tabs">
       <div class="deb-tabs__head">
-        <span class="deb-section-title">Tabs Manager</span>
+        <span class="deb-section-title">{{ ui.text('tabsManager') }}</span>
         <button mat-stroked-button type="button" (click)="store.addTab()">
-          <mat-icon>add</mat-icon> Add Tab
+          <mat-icon>add</mat-icon> {{ ui.text('addTab') }}
         </button>
       </div>
 
       @if (store.tabs().length === 0) {
-        <p class="deb-hint">No tabs — all fields render in a single section.</p>
+        <p class="deb-hint">{{ ui.text('noTabs') }}</p>
       }
 
       @for (tab of store.tabs(); track tab.id; let i = $index, count = $count) {
         <div class="deb-tab-card" [class.deb-tab-card--system]="tab.systemDefault">
           <div class="deb-tabs__row" [attr.data-testid]="'tab-row-' + tab.id">
             <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
-              <mat-label>{{ tab.id }} {{ tab.systemDefault ? '(System)' : '' }}</mat-label>
+              <mat-label>{{ tab.id }} {{ tab.systemDefault ? ui.text('systemTag') : '' }}</mat-label>
               <input
                 matInput
                 [disabled]="!canEditTab(tab)"
@@ -2929,7 +3147,8 @@ class TabManagerComponent {
               type="button"
               [disabled]="i === 0 || !canEditTab(tab)"
               (click)="store.moveTab(tab.id, -1)"
-              matTooltip="Move up" aria-label="Move tab up"
+              [matTooltip]="ui.text('moveUp')"
+              [attr.aria-label]="ui.text('moveTabUp')"
             >
               <mat-icon>arrow_upward</mat-icon>
             </button>
@@ -2938,7 +3157,8 @@ class TabManagerComponent {
               type="button"
               [disabled]="i === count - 1 || !canEditTab(tab)"
               (click)="store.moveTab(tab.id, 1)"
-              matTooltip="Move down" aria-label="Move tab down"
+              [matTooltip]="ui.text('moveDown')"
+              [attr.aria-label]="ui.text('moveTabDown')"
             >
               <mat-icon>arrow_downward</mat-icon>
             </button>
@@ -2948,7 +3168,8 @@ class TabManagerComponent {
               color="warn"
               [disabled]="!canEditTab(tab)"
               (click)="store.removeTab(tab.id)"
-              matTooltip="Remove tab" aria-label="Remove tab"
+              [matTooltip]="ui.text('removeTab')"
+              [attr.aria-label]="ui.text('removeTab')"
             >
               <mat-icon>delete</mat-icon>
             </button>
@@ -2961,47 +3182,41 @@ class TabManagerComponent {
               [ngModel]="tab.flatData"
               (ngModelChange)="store.updateTab(tab.id, { flatData: $event })"
             >
-              Flat Data
+              {{ ui.text('flatData') }}
             </mat-checkbox>
             <mat-checkbox
               [disabled]="!canEditTab(tab)"
               [ngModel]="tab.isPrimaryTab"
               (ngModelChange)="$event ? store.setPrimaryTab(tab.id) : store.updateTab(tab.id, { isPrimaryTab: false })"
             >
-              Primary Tab
+              {{ ui.text('primaryTab') }}
             </mat-checkbox>
             <mat-checkbox
               [disabled]="!canEditTab(tab)"
               [ngModel]="tab.maskData"
               (ngModelChange)="store.updateTab(tab.id, { maskData: $event })"
             >
-              Mask Tab Data
+              {{ ui.text('maskTabData') }}
             </mat-checkbox>
             <mat-checkbox
               [disabled]="!canEditTab(tab)"
               [ngModel]="tab.systemDefault"
               (ngModelChange)="store.updateTab(tab.id, { systemDefault: $event })"
             >
-              System Default
+              {{ ui.text('systemDefault') }}
             </mat-checkbox>
-            <button
-              mat-button
-              type="button"
-              color="primary"
-              [disabled]="!canEditTab(tab)"
-              (click)="store.addSubTab(tab.id)"
-            >
-              + Sub-tab
+            <button mat-button type="button" color="primary" [disabled]="!canEditTab(tab)" (click)="store.addSubTab(tab.id)">
+              {{ ui.text('addSubTab') }}
             </button>
           </div>
 
           <!-- Module tab configuration -->
           <div class="deb-tab-module">
             <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
-              <mat-label>Consumer Module Name (Optional)</mat-label>
+              <mat-label>{{ ui.text('consumerModuleName') }}</mat-label>
               <input
                 matInput
-                placeholder="e.g. documents-view"
+                [placeholder]="ui.text('consumerModulePlaceholder')"
                 [disabled]="!canEditTab(tab)"
                 [ngModel]="tab.moduleName"
                 (ngModelChange)="store.updateTab(tab.id, { moduleName: $event || undefined })"
@@ -3012,7 +3227,7 @@ class TabManagerComponent {
           <!-- Sub-tabs recursive render (Level 2) -->
           @if (tab.children && tab.children.length > 0) {
             <div class="deb-subtabs">
-              <span class="deb-subtabs__title">Sub-tabs:</span>
+              <span class="deb-subtabs__title">{{ ui.text('subTabs') }}</span>
               @for (sub of tab.children; track sub.id) {
                 <div class="deb-tabs__row deb-subtab-row" [attr.data-testid]="'subtab-row-' + sub.id">
                   <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
@@ -3030,7 +3245,8 @@ class TabManagerComponent {
                     color="warn"
                     [disabled]="!canEditTab(sub)"
                     (click)="store.removeTab(sub.id)"
-                    matTooltip="Remove sub-tab" aria-label="Remove sub-tab"
+                    [matTooltip]="ui.text('removeSubTab')"
+                    [attr.aria-label]="ui.text('removeSubTab')"
                   >
                     <mat-icon>delete</mat-icon>
                   </button>
@@ -3057,21 +3273,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     ], template: `
     <div class="deb-tabs">
       <div class="deb-tabs__head">
-        <span class="deb-section-title">Tabs Manager</span>
+        <span class="deb-section-title">{{ ui.text('tabsManager') }}</span>
         <button mat-stroked-button type="button" (click)="store.addTab()">
-          <mat-icon>add</mat-icon> Add Tab
+          <mat-icon>add</mat-icon> {{ ui.text('addTab') }}
         </button>
       </div>
 
       @if (store.tabs().length === 0) {
-        <p class="deb-hint">No tabs — all fields render in a single section.</p>
+        <p class="deb-hint">{{ ui.text('noTabs') }}</p>
       }
 
       @for (tab of store.tabs(); track tab.id; let i = $index, count = $count) {
         <div class="deb-tab-card" [class.deb-tab-card--system]="tab.systemDefault">
           <div class="deb-tabs__row" [attr.data-testid]="'tab-row-' + tab.id">
             <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
-              <mat-label>{{ tab.id }} {{ tab.systemDefault ? '(System)' : '' }}</mat-label>
+              <mat-label>{{ tab.id }} {{ tab.systemDefault ? ui.text('systemTag') : '' }}</mat-label>
               <input
                 matInput
                 [disabled]="!canEditTab(tab)"
@@ -3084,7 +3300,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
               type="button"
               [disabled]="i === 0 || !canEditTab(tab)"
               (click)="store.moveTab(tab.id, -1)"
-              matTooltip="Move up" aria-label="Move tab up"
+              [matTooltip]="ui.text('moveUp')"
+              [attr.aria-label]="ui.text('moveTabUp')"
             >
               <mat-icon>arrow_upward</mat-icon>
             </button>
@@ -3093,7 +3310,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
               type="button"
               [disabled]="i === count - 1 || !canEditTab(tab)"
               (click)="store.moveTab(tab.id, 1)"
-              matTooltip="Move down" aria-label="Move tab down"
+              [matTooltip]="ui.text('moveDown')"
+              [attr.aria-label]="ui.text('moveTabDown')"
             >
               <mat-icon>arrow_downward</mat-icon>
             </button>
@@ -3103,7 +3321,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
               color="warn"
               [disabled]="!canEditTab(tab)"
               (click)="store.removeTab(tab.id)"
-              matTooltip="Remove tab" aria-label="Remove tab"
+              [matTooltip]="ui.text('removeTab')"
+              [attr.aria-label]="ui.text('removeTab')"
             >
               <mat-icon>delete</mat-icon>
             </button>
@@ -3116,47 +3335,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
               [ngModel]="tab.flatData"
               (ngModelChange)="store.updateTab(tab.id, { flatData: $event })"
             >
-              Flat Data
+              {{ ui.text('flatData') }}
             </mat-checkbox>
             <mat-checkbox
               [disabled]="!canEditTab(tab)"
               [ngModel]="tab.isPrimaryTab"
               (ngModelChange)="$event ? store.setPrimaryTab(tab.id) : store.updateTab(tab.id, { isPrimaryTab: false })"
             >
-              Primary Tab
+              {{ ui.text('primaryTab') }}
             </mat-checkbox>
             <mat-checkbox
               [disabled]="!canEditTab(tab)"
               [ngModel]="tab.maskData"
               (ngModelChange)="store.updateTab(tab.id, { maskData: $event })"
             >
-              Mask Tab Data
+              {{ ui.text('maskTabData') }}
             </mat-checkbox>
             <mat-checkbox
               [disabled]="!canEditTab(tab)"
               [ngModel]="tab.systemDefault"
               (ngModelChange)="store.updateTab(tab.id, { systemDefault: $event })"
             >
-              System Default
+              {{ ui.text('systemDefault') }}
             </mat-checkbox>
-            <button
-              mat-button
-              type="button"
-              color="primary"
-              [disabled]="!canEditTab(tab)"
-              (click)="store.addSubTab(tab.id)"
-            >
-              + Sub-tab
+            <button mat-button type="button" color="primary" [disabled]="!canEditTab(tab)" (click)="store.addSubTab(tab.id)">
+              {{ ui.text('addSubTab') }}
             </button>
           </div>
 
           <!-- Module tab configuration -->
           <div class="deb-tab-module">
             <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
-              <mat-label>Consumer Module Name (Optional)</mat-label>
+              <mat-label>{{ ui.text('consumerModuleName') }}</mat-label>
               <input
                 matInput
-                placeholder="e.g. documents-view"
+                [placeholder]="ui.text('consumerModulePlaceholder')"
                 [disabled]="!canEditTab(tab)"
                 [ngModel]="tab.moduleName"
                 (ngModelChange)="store.updateTab(tab.id, { moduleName: $event || undefined })"
@@ -3167,7 +3380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           <!-- Sub-tabs recursive render (Level 2) -->
           @if (tab.children && tab.children.length > 0) {
             <div class="deb-subtabs">
-              <span class="deb-subtabs__title">Sub-tabs:</span>
+              <span class="deb-subtabs__title">{{ ui.text('subTabs') }}</span>
               @for (sub of tab.children; track sub.id) {
                 <div class="deb-tabs__row deb-subtab-row" [attr.data-testid]="'subtab-row-' + sub.id">
                   <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
@@ -3185,7 +3398,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     color="warn"
                     [disabled]="!canEditTab(sub)"
                     (click)="store.removeTab(sub.id)"
-                    matTooltip="Remove sub-tab" aria-label="Remove sub-tab"
+                    [matTooltip]="ui.text('removeSubTab')"
+                    [attr.aria-label]="ui.text('removeSubTab')"
                   >
                     <mat-icon>delete</mat-icon>
                   </button>
@@ -3200,6 +3414,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         }] });
 
 class EntityBuilderTreeNodeComponent {
+    /** Builder chrome, overridable via BUILDER_TEXT. */
+    ui = inject(BuilderTextService);
     store = inject(BuilderStore);
     field;
     index;
@@ -3227,58 +3443,89 @@ class EntityBuilderTreeNodeComponent {
       role="button"
       tabindex="0"
       [attr.aria-pressed]="store.isSelected(field)"
-      [attr.aria-label]="'Select field ' + fieldLabel(field)"
+      [attr.aria-label]="ui.text('selectField', { field: fieldLabel(field) })"
     >
-      <mat-icon class="deb-drag-handle" cdkDragHandle aria-hidden="true" title="Drag to reorder (or use the move buttons)">drag_indicator</mat-icon>
+      <mat-icon class="deb-drag-handle" cdkDragHandle aria-hidden="true" [title]="ui.text('dragToReorder')"
+        >drag_indicator</mat-icon
+      >
       <mat-icon class="deb-field-type" [matTooltip]="fieldTypeLabel(field.type)">{{ fieldTypeIcon(field.type) }}</mat-icon>
       <div class="deb-field-meta">
         <div class="deb-row" style="gap:6px">
           <span class="deb-field-label" [attr.data-testid]="'row-label-' + field.id">{{ fieldLabel(field) }}</span>
           <span class="deb-type-badge">{{ field.type }}</span>
           @if (field.isReferenced) {
-            <mat-icon style="font-size: 16px; width: 16px; height: 16px; color: #1976d2;" matTooltip="Referenced field (linked to {{ field.referencedEntityKey }})">link</mat-icon>
+            <mat-icon
+              style="font-size: 16px; width: 16px; height: 16px; color: #1976d2;"
+              [matTooltip]="ui.text('referencedFieldTooltip', { entity: field.referencedEntityKey ?? '' })"
+              >link</mat-icon
+            >
           }
           @if (field.hasDrift) {
-            <mat-icon style="font-size: 16px; width: 16px; height: 16px; color: #d32f2f;" data-testid="drift-warning-icon" matTooltip="Drift detected: source field has evolved">sync_problem</mat-icon>
+            <mat-icon
+              style="font-size: 16px; width: 16px; height: 16px; color: #d32f2f;"
+              data-testid="drift-warning-icon"
+              [matTooltip]="ui.text('driftDetected')"
+              >sync_problem</mat-icon
+            >
           }
         </div>
         <span class="deb-field-id" [attr.data-testid]="'row-id-' + field.id">{{ field.id }}</span>
       </div>
-      @if (field.validators?.required) { <span class="deb-req" title="Required">*</span> }
+      @if (field.validators?.required) {
+        <span class="deb-req" [title]="ui.text('required')">*</span>
+      }
 
-      <button mat-icon-button type="button" [disabled]="index === 0"
+      <button
+        mat-icon-button
+        type="button"
+        [disabled]="index === 0"
         [attr.data-testid]="'row-up-' + field.id"
-        [attr.aria-label]="'Move ' + fieldLabel(field) + ' up'"
-        (click)="store.moveField(store.keyOf(field), -1); $event.stopPropagation()" matTooltip="Move up">
+        [attr.aria-label]="ui.text('moveFieldUp', { field: fieldLabel(field) })"
+        (click)="store.moveField(store.keyOf(field), -1); $event.stopPropagation()"
+        [matTooltip]="ui.text('moveUp')"
+      >
         <mat-icon>arrow_upward</mat-icon>
       </button>
-      <button mat-icon-button type="button" [disabled]="index === totalCount - 1"
+      <button
+        mat-icon-button
+        type="button"
+        [disabled]="index === totalCount - 1"
         [attr.data-testid]="'row-down-' + field.id"
-        [attr.aria-label]="'Move ' + fieldLabel(field) + ' down'"
-        (click)="store.moveField(store.keyOf(field), 1); $event.stopPropagation()" matTooltip="Move down">
+        [attr.aria-label]="ui.text('moveFieldDown', { field: fieldLabel(field) })"
+        (click)="store.moveField(store.keyOf(field), 1); $event.stopPropagation()"
+        [matTooltip]="ui.text('moveDown')"
+      >
         <mat-icon>arrow_downward</mat-icon>
       </button>
-      <button mat-icon-button type="button"
+      <button
+        mat-icon-button
+        type="button"
         [attr.data-testid]="'row-duplicate-' + field.id"
-        [attr.aria-label]="'Duplicate ' + fieldLabel(field)"
-        (click)="store.duplicateField(store.keyOf(field)); $event.stopPropagation()" matTooltip="Duplicate">
+        [attr.aria-label]="ui.text('duplicateField', { field: fieldLabel(field) })"
+        (click)="store.duplicateField(store.keyOf(field)); $event.stopPropagation()"
+        [matTooltip]="ui.text('duplicate')"
+      >
         <mat-icon>content_copy</mat-icon>
       </button>
-      <button mat-icon-button type="button" color="warn"
+      <button
+        mat-icon-button
+        type="button"
+        color="warn"
         [attr.data-testid]="'row-delete-' + field.id"
-        (click)="store.removeField(store.keyOf(field)); $event.stopPropagation()" matTooltip="Delete">
+        (click)="store.removeField(store.keyOf(field)); $event.stopPropagation()"
+        [matTooltip]="ui.text('delete')"
+      >
         <mat-icon>delete</mat-icon>
       </button>
     </div>
 
     @if (field.children && field.children.length > 0) {
-      <div class="deb-tree-children" style="padding-left: 20px; border-left: 2px solid rgba(0,0,0,0.08); margin-left: 12px; margin-top: 4px;">
+      <div
+        class="deb-tree-children"
+        style="padding-left: 20px; border-left: 2px solid rgba(0,0,0,0.08); margin-left: 12px; margin-top: 4px;"
+      >
         @for (child of field.children; track child.id; let ci = $index, cCount = $count) {
-          <ngx-entity-builder-tree-node
-            [field]="child"
-            [index]="ci"
-            [totalCount]="cCount"
-          />
+          <ngx-entity-builder-tree-node [field]="child" [index]="ci" [totalCount]="cCount" />
         }
       </div>
     }
@@ -3290,13 +3537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'ngx-entity-builder-tree-node',
                     standalone: true,
-                    imports: [
-                        CommonModule,
-                        DragDropModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatTooltipModule,
-                    ],
+                    imports: [CommonModule, DragDropModule, MatButtonModule, MatIconModule, MatTooltipModule],
                     template: `
     <div
       cdkDrag
@@ -3309,58 +3550,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       role="button"
       tabindex="0"
       [attr.aria-pressed]="store.isSelected(field)"
-      [attr.aria-label]="'Select field ' + fieldLabel(field)"
+      [attr.aria-label]="ui.text('selectField', { field: fieldLabel(field) })"
     >
-      <mat-icon class="deb-drag-handle" cdkDragHandle aria-hidden="true" title="Drag to reorder (or use the move buttons)">drag_indicator</mat-icon>
+      <mat-icon class="deb-drag-handle" cdkDragHandle aria-hidden="true" [title]="ui.text('dragToReorder')"
+        >drag_indicator</mat-icon
+      >
       <mat-icon class="deb-field-type" [matTooltip]="fieldTypeLabel(field.type)">{{ fieldTypeIcon(field.type) }}</mat-icon>
       <div class="deb-field-meta">
         <div class="deb-row" style="gap:6px">
           <span class="deb-field-label" [attr.data-testid]="'row-label-' + field.id">{{ fieldLabel(field) }}</span>
           <span class="deb-type-badge">{{ field.type }}</span>
           @if (field.isReferenced) {
-            <mat-icon style="font-size: 16px; width: 16px; height: 16px; color: #1976d2;" matTooltip="Referenced field (linked to {{ field.referencedEntityKey }})">link</mat-icon>
+            <mat-icon
+              style="font-size: 16px; width: 16px; height: 16px; color: #1976d2;"
+              [matTooltip]="ui.text('referencedFieldTooltip', { entity: field.referencedEntityKey ?? '' })"
+              >link</mat-icon
+            >
           }
           @if (field.hasDrift) {
-            <mat-icon style="font-size: 16px; width: 16px; height: 16px; color: #d32f2f;" data-testid="drift-warning-icon" matTooltip="Drift detected: source field has evolved">sync_problem</mat-icon>
+            <mat-icon
+              style="font-size: 16px; width: 16px; height: 16px; color: #d32f2f;"
+              data-testid="drift-warning-icon"
+              [matTooltip]="ui.text('driftDetected')"
+              >sync_problem</mat-icon
+            >
           }
         </div>
         <span class="deb-field-id" [attr.data-testid]="'row-id-' + field.id">{{ field.id }}</span>
       </div>
-      @if (field.validators?.required) { <span class="deb-req" title="Required">*</span> }
+      @if (field.validators?.required) {
+        <span class="deb-req" [title]="ui.text('required')">*</span>
+      }
 
-      <button mat-icon-button type="button" [disabled]="index === 0"
+      <button
+        mat-icon-button
+        type="button"
+        [disabled]="index === 0"
         [attr.data-testid]="'row-up-' + field.id"
-        [attr.aria-label]="'Move ' + fieldLabel(field) + ' up'"
-        (click)="store.moveField(store.keyOf(field), -1); $event.stopPropagation()" matTooltip="Move up">
+        [attr.aria-label]="ui.text('moveFieldUp', { field: fieldLabel(field) })"
+        (click)="store.moveField(store.keyOf(field), -1); $event.stopPropagation()"
+        [matTooltip]="ui.text('moveUp')"
+      >
         <mat-icon>arrow_upward</mat-icon>
       </button>
-      <button mat-icon-button type="button" [disabled]="index === totalCount - 1"
+      <button
+        mat-icon-button
+        type="button"
+        [disabled]="index === totalCount - 1"
         [attr.data-testid]="'row-down-' + field.id"
-        [attr.aria-label]="'Move ' + fieldLabel(field) + ' down'"
-        (click)="store.moveField(store.keyOf(field), 1); $event.stopPropagation()" matTooltip="Move down">
+        [attr.aria-label]="ui.text('moveFieldDown', { field: fieldLabel(field) })"
+        (click)="store.moveField(store.keyOf(field), 1); $event.stopPropagation()"
+        [matTooltip]="ui.text('moveDown')"
+      >
         <mat-icon>arrow_downward</mat-icon>
       </button>
-      <button mat-icon-button type="button"
+      <button
+        mat-icon-button
+        type="button"
         [attr.data-testid]="'row-duplicate-' + field.id"
-        [attr.aria-label]="'Duplicate ' + fieldLabel(field)"
-        (click)="store.duplicateField(store.keyOf(field)); $event.stopPropagation()" matTooltip="Duplicate">
+        [attr.aria-label]="ui.text('duplicateField', { field: fieldLabel(field) })"
+        (click)="store.duplicateField(store.keyOf(field)); $event.stopPropagation()"
+        [matTooltip]="ui.text('duplicate')"
+      >
         <mat-icon>content_copy</mat-icon>
       </button>
-      <button mat-icon-button type="button" color="warn"
+      <button
+        mat-icon-button
+        type="button"
+        color="warn"
         [attr.data-testid]="'row-delete-' + field.id"
-        (click)="store.removeField(store.keyOf(field)); $event.stopPropagation()" matTooltip="Delete">
+        (click)="store.removeField(store.keyOf(field)); $event.stopPropagation()"
+        [matTooltip]="ui.text('delete')"
+      >
         <mat-icon>delete</mat-icon>
       </button>
     </div>
 
     @if (field.children && field.children.length > 0) {
-      <div class="deb-tree-children" style="padding-left: 20px; border-left: 2px solid rgba(0,0,0,0.08); margin-left: 12px; margin-top: 4px;">
+      <div
+        class="deb-tree-children"
+        style="padding-left: 20px; border-left: 2px solid rgba(0,0,0,0.08); margin-left: 12px; margin-top: 4px;"
+      >
         @for (child of field.children; track child.id; let ci = $index, cCount = $count) {
-          <ngx-entity-builder-tree-node
-            [field]="child"
-            [index]="ci"
-            [totalCount]="cCount"
-          />
+          <ngx-entity-builder-tree-node [field]="child" [index]="ci" [totalCount]="cCount" />
         }
       </div>
     }
@@ -3378,6 +3650,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }] } });
 
 class EntityBuilderCanvasComponent {
+    /** Builder chrome, overridable via BUILDER_TEXT. */
+    ui = inject(BuilderTextService);
     store = inject(BuilderStore);
     /**
      * Headings only earn their space once the fields are actually split across tabs. A
@@ -3396,13 +3670,13 @@ class EntityBuilderCanvasComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderCanvasComponent, isStandalone: true, selector: "ngx-entity-builder-canvas", ngImport: i0, template: `
     <mat-card class="deb-canvas">
       <mat-card-header>
-        <mat-card-title>Fields ({{ store.fields().length }})</mat-card-title>
+        <mat-card-title>{{ ui.text('fieldsHeading', { count: store.fields().length }) }}</mat-card-title>
       </mat-card-header>
       <mat-card-content>
         @if (store.fields().length === 0) {
           <div class="deb-empty">
             <mat-icon>widgets</mat-icon>
-            <p>No fields yet. Pick a type from <strong>Add field</strong> to get started.</p>
+            <p>{{ ui.text('canvasEmpty') }}</p>
           </div>
         }
 
@@ -3424,11 +3698,7 @@ class EntityBuilderCanvasComponent {
             (cdkDropListDropped)="onDrop(group.tabId, $event)"
           >
             @for (f of group.fields; track f.id; let i = $index, count = $count) {
-              <ngx-entity-builder-tree-node
-                [field]="f"
-                [index]="i"
-                [totalCount]="count"
-              />
+              <ngx-entity-builder-tree-node [field]="f" [index]="i" [totalCount]="count" />
             }
           </div>
         }
@@ -3442,23 +3712,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'ngx-entity-builder-canvas',
                     standalone: true,
-                    imports: [
-                        CommonModule,
-                        DragDropModule,
-                        MatCardModule,
-                        MatIconModule,
-                        EntityBuilderTreeNodeComponent,
-                    ],
+                    imports: [CommonModule, DragDropModule, MatCardModule, MatIconModule, EntityBuilderTreeNodeComponent],
                     template: `
     <mat-card class="deb-canvas">
       <mat-card-header>
-        <mat-card-title>Fields ({{ store.fields().length }})</mat-card-title>
+        <mat-card-title>{{ ui.text('fieldsHeading', { count: store.fields().length }) }}</mat-card-title>
       </mat-card-header>
       <mat-card-content>
         @if (store.fields().length === 0) {
           <div class="deb-empty">
             <mat-icon>widgets</mat-icon>
-            <p>No fields yet. Pick a type from <strong>Add field</strong> to get started.</p>
+            <p>{{ ui.text('canvasEmpty') }}</p>
           </div>
         }
 
@@ -3480,11 +3744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             (cdkDropListDropped)="onDrop(group.tabId, $event)"
           >
             @for (f of group.fields; track f.id; let i = $index, count = $count) {
-              <ngx-entity-builder-tree-node
-                [field]="f"
-                [index]="i"
-                [totalCount]="count"
-              />
+              <ngx-entity-builder-tree-node [field]="f" [index]="i" [totalCount]="count" />
             }
           </div>
         }
@@ -3502,6 +3762,8 @@ const EMPTY_ROLES = Object.freeze([]);
  * EntityBuilderComponent — the top-level visual builder for an EntityFormConfig.
  */
 class EntityBuilderComponent {
+    /** Builder chrome, overridable via BUILDER_TEXT. */
+    ui = inject(BuilderTextService);
     store = inject(BuilderStore);
     /**
      * Optional: only apps that registered a CONFIG_SOURCE have one. Used to drop the cached
@@ -3512,6 +3774,16 @@ class EntityBuilderComponent {
     config;
     /** Languages available for label/placeholder editing. First entry is the default. */
     languages = ['en'];
+    /**
+     * Language for the builder's **own** chrome, resolved through `BUILDER_TEXT`.
+     *
+     * Deliberately separate from `languages` and `store.activeLanguage()`, which choose the
+     * `LocalizedText` entry being authored: switching the label language you are editing
+     * should not translate the interface around it.
+     */
+    set uiLanguage(value) {
+        this.ui.language.set(value || 'en');
+    }
     /** Optional role list — enables multi-select role pickers for RBAC instead of free text. */
     availableRoles = [];
     /**
@@ -3601,7 +3873,7 @@ class EntityBuilderComponent {
         this.store.setPermission(action, roles);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: "config", languages: "languages", availableRoles: "availableRoles", userRoles: "userRoles", commonModules: "commonModules" }, outputs: { configChange: "configChange", save: "save" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\n  <span class=\"deb-spacer\"></span>\n\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    matTooltip=\"Undo (Ctrl+Z)\"\n    aria-label=\"Undo\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    matTooltip=\"Redo (Ctrl+Shift+Z)\"\n    aria-label=\"Redo\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\n    <mat-icon>content_copy</mat-icon> Copy JSON\n  </button>\n  <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n  <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n    <mat-icon>save</mat-icon> Save\n  </button>\n</mat-toolbar>\n\n<div class=\"deb-body\">\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--left\">\n    <mat-card>\n      <mat-card-content>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>Entity name</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            placeholder=\"e.g. clients\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>Editing language</mat-label>\n            <mat-select\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <mat-slide-toggle\n          [ngModel]=\"store.config().maskData ?? false\"\n          (ngModelChange)=\"store.setMaskData($event)\"\n        >Mask this entity (RBAC)</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>Permissions</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles (comma-separated)</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"rolesFor(action).join(', ')\"\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\n                />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header><mat-card-title>Add field</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n  </div>\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--right\">\n    <mat-card>\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: JSON + optional live preview \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;Config JSON</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#fff}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}@media(max-width:1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FieldPaletteComponent, selector: "ngx-field-palette", outputs: ["pick"] }, { kind: "component", type: TabManagerComponent, selector: "ngx-tab-manager" }, { kind: "component", type: FieldInspectorComponent, selector: "ngx-field-inspector" }, { kind: "component", type: EntityBuilderCanvasComponent, selector: "ngx-entity-builder-canvas" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: "config", languages: "languages", uiLanguage: "uiLanguage", availableRoles: "availableRoles", userRoles: "userRoles", commonModules: "commonModules" }, outputs: { configChange: "configChange", save: "save" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\"><mat-icon>content_copy</mat-icon> {{ ui.text('copyJson') }}</button>\n  <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n  <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n    <mat-icon>save</mat-icon> {{ ui.text('save') }}\n  </button>\n</mat-toolbar>\n\n<div class=\"deb-body\">\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--left\">\n    <mat-card>\n      <mat-card-content>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('entityName') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            [placeholder]=\"ui.text('entityNamePlaceholder')\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <mat-slide-toggle [ngModel]=\"store.config().maskData ?? false\" (ngModelChange)=\"store.setMaskData($event)\">{{\n          ui.text('maskEntity')\n        }}</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header\n        ><mat-card-title>{{ ui.text('addField') }}</mat-card-title></mat-card-header\n      >\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n  </div>\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--right\">\n    <mat-card>\n      <mat-card-header\n        ><mat-card-title>{{ ui.text('fieldProperties') }}</mat-card-title></mat-card-header\n      >\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: JSON + optional live preview \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#fff}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}@media(max-width:1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FieldPaletteComponent, selector: "ngx-field-palette", outputs: ["pick"] }, { kind: "component", type: TabManagerComponent, selector: "ngx-tab-manager" }, { kind: "component", type: FieldInspectorComponent, selector: "ngx-field-inspector" }, { kind: "component", type: EntityBuilderCanvasComponent, selector: "ngx-entity-builder-canvas" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityBuilderComponent, decorators: [{
             type: Component,
@@ -3622,11 +3894,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         TabManagerComponent,
                         FieldInspectorComponent,
                         EntityBuilderCanvasComponent,
-                    ], template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\n  <span class=\"deb-spacer\"></span>\n\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    matTooltip=\"Undo (Ctrl+Z)\"\n    aria-label=\"Undo\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    matTooltip=\"Redo (Ctrl+Shift+Z)\"\n    aria-label=\"Redo\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\n    <mat-icon>content_copy</mat-icon> Copy JSON\n  </button>\n  <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n  <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n    <mat-icon>save</mat-icon> Save\n  </button>\n</mat-toolbar>\n\n<div class=\"deb-body\">\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--left\">\n    <mat-card>\n      <mat-card-content>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>Entity name</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            placeholder=\"e.g. clients\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>Editing language</mat-label>\n            <mat-select\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <mat-slide-toggle\n          [ngModel]=\"store.config().maskData ?? false\"\n          (ngModelChange)=\"store.setMaskData($event)\"\n        >Mask this entity (RBAC)</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>Permissions</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ action }} roles (comma-separated)</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"rolesFor(action).join(', ')\"\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\n                />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header><mat-card-title>Add field</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n  </div>\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--right\">\n    <mat-card>\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></mat-card-header>\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: JSON + optional live preview \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;Config JSON</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#fff}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}@media(max-width:1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"] }]
+                    ], template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\n  <mat-icon>dashboard_customize</mat-icon>\n  <span class=\"deb-toolbar__title\">{{ ui.text('builderTitle') }}</span>\n  <span class=\"deb-spacer\"></span>\n\n  @if (store.problems().length) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"deb-problems\"\n      [class.deb-problems--error]=\"!store.isValid()\"\n      [matTooltip]=\"ui.text('issuesTooltip', { count: store.problems().length })\"\n    >\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\n      {{ store.errors().length }} / {{ store.problems().length }}\n    </button>\n  }\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-undo\"\n    [disabled]=\"!store.canUndo()\"\n    (click)=\"store.undo()\"\n    [matTooltip]=\"ui.text('undoTooltip')\"\n    [attr.aria-label]=\"ui.text('undo')\"\n  >\n    <mat-icon>undo</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    data-testid=\"builder-redo\"\n    [disabled]=\"!store.canRedo()\"\n    (click)=\"store.redo()\"\n    [matTooltip]=\"ui.text('redoTooltip')\"\n    [attr.aria-label]=\"ui.text('redo')\"\n  >\n    <mat-icon>redo</mat-icon>\n  </button>\n\n  <button mat-button type=\"button\" (click)=\"copyJson()\"><mat-icon>content_copy</mat-icon> {{ ui.text('copyJson') }}</button>\n  <!-- primary, not accent: white on Material's default pink accent is 3.33:1, below AA. -->\n  <button mat-flat-button color=\"primary\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\n    <mat-icon>save</mat-icon> {{ ui.text('save') }}\n  </button>\n</mat-toolbar>\n\n<div class=\"deb-body\">\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--left\">\n    <mat-card>\n      <mat-card-content>\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n          <mat-label>{{ ui.text('entityName') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"store.config().entity\"\n            (ngModelChange)=\"store.setEntityName($event)\"\n            [placeholder]=\"ui.text('entityNamePlaceholder')\"\n          />\n        </mat-form-field>\n\n        <div class=\"deb-row\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\n            <mat-label>{{ ui.text('editingLanguage') }}</mat-label>\n            <mat-select\n              data-testid=\"builder-editing-language\"\n              [ngModel]=\"store.activeLanguage()\"\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\n            >\n              @for (l of languages; track l) {\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n        <mat-slide-toggle [ngModel]=\"store.config().maskData ?? false\" (ngModelChange)=\"store.setMaskData($event)\">{{\n          ui.text('maskEntity')\n        }}</mat-slide-toggle>\n\n        <mat-expansion-panel class=\"deb-rbac\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ ui.text('permissions') }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (action of rbacActions; track action) {\n            @if (availableRoles.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRoles', { action }) }}</mat-label>\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\n                  @for (role of availableRoles; track role) {\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            } @else {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\n                <mat-label>{{ ui.text('actionRolesPlaceholder', { action }) }}</mat-label>\n                <input matInput [ngModel]=\"rolesFor(action).join(', ')\" (ngModelChange)=\"setRolesFromText(action, $event)\" />\n              </mat-form-field>\n            }\n          }\n          <p class=\"deb-hint\">{{ ui.text('permissionsHint') }}</p>\n        </mat-expansion-panel>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-header\n        ><mat-card-title>{{ ui.text('addField') }}</mat-card-title></mat-card-header\n      >\n      <mat-card-content>\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n      <mat-card-content>\n        <ngx-tab-manager></ngx-tab-manager>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <!-- \u2500\u2500\u2500 Center: field canvas \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--center\">\n    <ngx-entity-builder-canvas />\n  </div>\n\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\n  <div class=\"deb-col deb-col--right\">\n    <mat-card>\n      <mat-card-header\n        ><mat-card-title>{{ ui.text('fieldProperties') }}</mat-card-title></mat-card-header\n      >\n      <mat-card-content>\n        <ngx-field-inspector></ngx-field-inspector>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Footer: JSON + optional live preview \u2500\u2500\u2500 -->\n<div class=\"deb-footer\">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;{{ ui.text('configJson') }}</mat-panel-title>\n    </mat-expansion-panel-header>\n    <pre class=\"deb-json\">{{ json }}</pre>\n  </mat-expansion-panel>\n\n  <div class=\"deb-preview-slot\">\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#fff}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}@media(max-width:1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}.deb-path-hint{color:#0000008c;font-size:11px;margin-left:6px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], languages: [{
                 type: Input
+            }], uiLanguage: [{
+                type: Input
             }], availableRoles: [{
                 type: Input
             }], userRoles: [{
@@ -3648,5 +3922,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BuilderStore, 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, RuleFormComponent, TabManagerComponent, fieldPathOptions, withExistingOptions };
 //# sourceMappingURL=ngx-dynamic-entity-builder.mjs.map