ngx-dynamic-entity-builder 1.0.0

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

@@ -0,0 +1,2910 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, inject, Component, EventEmitter, Output, Input, InjectionToken, effect } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2$1 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i3$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4$3 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i8 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i10 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i11 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i4$2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { normalizeConfigOptions, getFieldTypeMeta, createFieldConfig, labelToId, createFieldSnapshot, computeFieldDrift, humanizeId, findTab, resolveLabel, resolveOptionLabel, FIELD_TYPE_CATALOG, COMMON_MODULES } from '@dynamic-entity/core';
+export { FIELD_TYPE_CATALOG, createFieldConfig, getFieldTypeMeta, humanizeId } from '@dynamic-entity/core';
+import * as i3 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i9 from '@angular/material/core';
+import { CommonModule } from '@angular/common';
+import { ConfigSourceService } from 'ngx-dynamic-entity';
+
+/**
+ * field-catalog.ts — re-exports shared field catalog from @dynamic-entity/core.
+ * Single source of truth shared by both visual builder and renderer.
+ */
+
+/**
+ * Deep clone with a JSON fallback.
+ *
+ * `structuredClone` is not universally available (older browsers, and jsdom before v22),
+ * so it must never be called unguarded — an unguarded call throws a ReferenceError and the
+ * caller silently does nothing. Config and rule objects are JSON-safe, so the fallback is
+ * lossless here.
+ */
+function deepClone(value) {
+    if (typeof structuredClone === 'function')
+        return structuredClone(value);
+    return JSON.parse(JSON.stringify(value));
+}
+
+const clone = deepClone;
+const ID_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
+class BuilderStore {
+    _config = signal(this.emptyConfig());
+    _selectedFieldId = signal(null);
+    _activeLanguage = signal('en');
+    /** Rules live beside the config: they are persisted per form, not inside `EntityFormConfig`. */
+    _rules = signal([]);
+    /**
+     * Field ids the author owns — set by an explicit rename, or by loading a saved config
+     * whose ids are already live data keys. Ids outside this set are still derived from the
+     * field's label. Builder-session state, deliberately not part of the exported config.
+     */
+    manualIds = new Set();
+    _isDirty = signal(false);
+    config = this._config.asReadonly();
+    selectedFieldId = this._selectedFieldId.asReadonly();
+    activeLanguage = this._activeLanguage.asReadonly();
+    rules = this._rules.asReadonly();
+    isDirty = this._isDirty.asReadonly();
+    tabs = computed(() => this._config().tabs ?? []);
+    fields = computed(() => {
+        return (this._config().tabs ?? []).flatMap(t => t.fields ?? []);
+    });
+    selectedField = computed(() => {
+        const id = this._selectedFieldId();
+        if (!id)
+            return null;
+        return this.findFieldInTabs(this._config().tabs, id);
+    });
+    problems = computed(() => this.validate(this._config()));
+    errors = computed(() => this.problems().filter(p => p.level === 'error'));
+    isValid = computed(() => this.errors().length === 0);
+    // ─── Initialisation ─────────────────────────────────────────────────────────
+    load(config) {
+        // Check if any fields carry both inline options and listName before normalizing options
+        const fieldsWithBoth = this.getAllFields(config.tabs ?? []).filter(f => Array.isArray(f.options) && f.options.length > 0 && typeof f.listName === 'string' && f.listName.trim() !== '');
+        for (const f of fieldsWithBoth) {
+            console.warn(`[BuilderStore] Field "${f.id}" carries both inline options and listName "${f.listName}". ` +
+                `Inline options win; listName was dropped.`);
+        }
+        // The other boundary where a config enters the library (the renderer's ngOnChanges is
+        // the first). Authoring must start from the canonical option shape, or the builder
+        // would round-trip a legacy config straight back out unchanged.
+        const next = clone(normalizeConfigOptions(config));
+        next.tabs = next.tabs ?? [];
+        if (next.tabs.length === 0) {
+            next.tabs = [{ id: 'default', label: { en: 'Default' }, fields: [] }];
+        }
+        this._config.set(next);
+        const firstField = this.getAllFields(next.tabs)[0];
+        this._selectedFieldId.set(firstField?.id ?? null);
+        this._activeLanguage.set(next.defaultLanguage ?? 'en');
+        // Ids in a saved config are live data keys — records are already stored under them.
+        // Editing a label must never rewrite one, so freeze every id the config arrived with.
+        this.manualIds.clear();
+        for (const field of this.getAllFields(next.tabs))
+            this.manualIds.add(field.id);
+        this._isDirty.set(false);
+    }
+    reset(entity = '') {
+        this._config.set(this.emptyConfig(entity));
+        this._selectedFieldId.set(null);
+        this._rules.set([]);
+        this.manualIds.clear();
+        this._isDirty.set(false);
+    }
+    resetDirty() {
+        this._isDirty.set(false);
+    }
+    emptyConfig(entity = '') {
+        return {
+            entity,
+            version: 1,
+            defaultLanguage: 'en',
+            tabs: [],
+        };
+    }
+    // ─── Entity-level settings ──────────────────────────────────────────────────
+    setEntityName(entity) {
+        this.mutate(draft => {
+            draft.entity = entity.trim();
+        });
+    }
+    setDefaultLanguage(language) {
+        this.mutate(draft => {
+            draft.defaultLanguage = language;
+        });
+    }
+    setMaskData(mask) {
+        this.mutate(draft => {
+            draft.maskData = mask;
+        });
+    }
+    setPermission(action, roles) {
+        this.mutate(draft => {
+            const permissions = { ...(draft.permissions ?? {}) };
+            permissions[action] = roles;
+            draft.permissions = permissions;
+        });
+    }
+    setActiveLanguage(language) {
+        this._activeLanguage.set(language);
+    }
+    // ─── Helper Traversal ───────────────────────────────────────────────────────
+    getAllFields(tabs = []) {
+        const list = [];
+        for (const t of tabs) {
+            if (t.fields)
+                list.push(...t.fields);
+            if (t.children)
+                list.push(...this.getAllFields(t.children));
+        }
+        return list;
+    }
+    findFieldInTabs(tabs = [], id) {
+        for (const t of tabs) {
+            if (t.fields) {
+                const found = t.fields.find(f => f.id === id);
+                if (found)
+                    return found;
+            }
+            if (t.children) {
+                const found = this.findFieldInTabs(t.children, id);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    // ─── Field CRUD ─────────────────────────────────────────────────────────────
+    addField(type, targetTabId) {
+        const meta = getFieldTypeMeta(type);
+        const prefix = meta?.idPrefix ?? 'field';
+        const allFields = this.fields();
+        const id = this.uniqueId(prefix, allFields);
+        this.mutate(draft => {
+            const field = createFieldConfig(type, id, draft.defaultLanguage ?? 'en');
+            const targetTab = targetTabId
+                ? draft.tabs.find(t => t.id === targetTabId)
+                : draft.tabs[0];
+            if (targetTab) {
+                targetTab.fields = targetTab.fields ?? [];
+                targetTab.fields.push(field);
+            }
+            else {
+                draft.tabs.push({ id: 'main', label: { en: 'Main' }, fields: [field] });
+            }
+        });
+        this._selectedFieldId.set(id);
+        return id;
+    }
+    updateField(id, patch) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, id);
+            if (field)
+                Object.assign(field, patch);
+        });
+    }
+    /**
+     * Rename a field explicitly, pinning the id so it is no longer derived from the label.
+     *
+     * Not reachable from the inspector — the id input is read-only by design. This exists for
+     * programmatic callers that must match an id to an existing data key.
+     */
+    renameField(oldId, newId) {
+        const trimmed = newId.trim();
+        if (!trimmed || trimmed === oldId)
+            return;
+        if (this.fields().some(f => f.id === trimmed))
+            return;
+        if (!this.findFieldInTabs(this._config().tabs, oldId))
+            return;
+        this.applyRename(oldId, trimmed);
+        this.manualIds.delete(oldId);
+        this.manualIds.add(trimmed);
+    }
+    /** Whether this field's id is pinned (loaded from storage or explicitly renamed). */
+    hasManualId(id) {
+        return this.manualIds.has(id);
+    }
+    /**
+     * Move a field to a new id and repoint every id-based reference in the config at it.
+     *
+     * Ids are the wiring between fields — rules, cascades, patches and `showWhen` all address
+     * fields by id — so a rename that only touches `field.id` silently breaks that wiring.
+     * That was survivable while renaming was a rare manual act; label-derived ids make it
+     * routine, so the references move with it.
+     */
+    applyRename(oldId, newId) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, oldId);
+            if (!field)
+                return;
+            field.id = newId;
+            const walkFields = (fields) => {
+                for (const f of fields ?? []) {
+                    if (f.showWhen && oldId in f.showWhen) {
+                        const next = {};
+                        // Rebuild in place so condition order survives the rename.
+                        for (const [key, value] of Object.entries(f.showWhen)) {
+                            next[key === oldId ? newId : key] = value;
+                        }
+                        f.showWhen = next;
+                    }
+                    if (f.entityReference?.parentField === oldId) {
+                        f.entityReference = { ...f.entityReference, parentField: newId };
+                    }
+                    if (f.autoPatch) {
+                        // `source` names a field on the *linked* record, not this config — leave it.
+                        f.autoPatch = {
+                            ...f.autoPatch,
+                            mappings: f.autoPatch.mappings.map(m => m.target === oldId ? { ...m, target: newId } : m),
+                        };
+                    }
+                    if (f.patchOnTrue) {
+                        f.patchOnTrue = f.patchOnTrue.map(m => ({
+                            from: m.from === oldId ? newId : m.from,
+                            to: m.to === oldId ? newId : m.to,
+                        }));
+                    }
+                    if (f.children?.length)
+                        walkFields(f.children);
+                }
+            };
+            const walkTabs = (tabs) => {
+                for (const tab of tabs ?? []) {
+                    walkFields(tab.fields);
+                    walkTabs(tab.children);
+                }
+            };
+            walkTabs(draft.tabs);
+        });
+        this._rules.update(rules => rules.map(rule => ({
+            ...rule,
+            fieldId: rule.fieldId === oldId ? newId : rule.fieldId,
+            targets: rule.targets.map(t => t.type === 'field' && t.id === oldId ? { ...t, id: newId } : t),
+        })));
+        if (this._selectedFieldId() === oldId)
+            this._selectedFieldId.set(newId);
+    }
+    removeField(id) {
+        this.mutate(draft => {
+            for (const tab of draft.tabs) {
+                if (tab.fields) {
+                    tab.fields = tab.fields.filter(f => f.id !== id);
+                }
+            }
+        });
+        this.manualIds.delete(id);
+        if (this._selectedFieldId() === id)
+            this._selectedFieldId.set(null);
+    }
+    duplicateField(id) {
+        // Look the source up by id — not by current selection. The insert below searches by id
+        // too, so falling back to the selected field could report a new id while inserting
+        // nothing, or duplicate a field the caller never named.
+        const source = this.findFieldInTabs(this._config().tabs, id);
+        if (!source)
+            return null;
+        const meta = getFieldTypeMeta(source.type);
+        const prefix = meta?.idPrefix ?? 'field';
+        const newId = this.uniqueId(prefix, this.fields());
+        this.mutate(draft => {
+            for (const tab of draft.tabs) {
+                const index = (tab.fields ?? []).findIndex(f => f.id === id);
+                if (index !== -1) {
+                    const copy = clone(source);
+                    copy.id = newId;
+                    tab.fields.splice(index + 1, 0, copy);
+                    break;
+                }
+            }
+        });
+        this._selectedFieldId.set(newId);
+        return newId;
+    }
+    moveField(id, direction) {
+        this.mutate(draft => {
+            for (const tab of draft.tabs) {
+                const fields = tab.fields ?? [];
+                const from = fields.findIndex(f => f.id === id);
+                if (from !== -1) {
+                    const to = from + direction;
+                    if (to < 0 || to >= fields.length)
+                        return;
+                    const [item] = fields.splice(from, 1);
+                    fields.splice(to, 0, item);
+                    return;
+                }
+            }
+        });
+    }
+    /** Safe reorder for drag & drop within active tab or flat list */
+    reorderField(fromIndex, toIndex, tabId) {
+        this.mutate(draft => {
+            const targetTab = tabId
+                ? draft.tabs.find(t => t.id === tabId)
+                : draft.tabs[0];
+            const fields = targetTab?.fields ?? [];
+            if (fromIndex < 0 ||
+                toIndex < 0 ||
+                fromIndex >= fields.length ||
+                toIndex >= fields.length) {
+                return;
+            }
+            const [item] = fields.splice(fromIndex, 1);
+            fields.splice(toIndex, 0, item);
+        });
+    }
+    selectField(id) {
+        this._selectedFieldId.set(id);
+    }
+    // ─── Localised text ─────────────────────────────────────────────────────────
+    /**
+     * Set a field's label, and derive the field's id from it: type "Employee Count", get
+     * `employeeCount`. The inspector renders the id read-only, so this is the only way a
+     * new field's id is set.
+     *
+     * Two things stop derivation: a config loaded from storage (its ids are live data keys
+     * that records are already stored under — see `load`), and an explicit `renameField`
+     * call, which remains available to programmatic callers.
+     *
+     * Only the config's default language drives the id; translating a label must not rename
+     * anything.
+     */
+    setFieldLabel(id, language, value) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, id);
+            if (field)
+                field.label = { ...field.label, [language]: value };
+        });
+        if (language !== (this._config().defaultLanguage ?? 'en'))
+            return;
+        if (this.manualIds.has(id))
+            return;
+        const derived = labelToId(value);
+        if (!derived || derived === id)
+            return;
+        this.applyRename(id, this.availableId(derived, id));
+    }
+    /** `derived`, or `derived_2`, `derived_3`… if another field already holds it. */
+    availableId(derived, currentId) {
+        const taken = new Set(this.fields().map(f => f.id).filter(fid => fid !== currentId));
+        if (!taken.has(derived))
+            return derived;
+        let n = 2;
+        while (taken.has(`${derived}_${n}`))
+            n += 1;
+        return `${derived}_${n}`;
+    }
+    setFieldPlaceholder(id, language, value) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, id);
+            if (!field)
+                return;
+            field.placeholder = { ...(field.placeholder ?? {}), [language]: value };
+        });
+    }
+    // ─── Validators ─────────────────────────────────────────────────────────────
+    toggleFlagValidator(id, validator, on) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, id);
+            if (!field)
+                return;
+            field.validators = field.validators ?? {};
+            if (validator === 'required') {
+                if (on)
+                    field.validators.required = true;
+                else
+                    delete field.validators.required;
+            }
+            else if (validator === 'email') {
+                if (on)
+                    field.validators.pattern = '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$';
+                else
+                    delete field.validators.pattern;
+            }
+        });
+    }
+    setParamValidator(id, validator, value) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, id);
+            if (!field)
+                return;
+            field.validators = field.validators ?? {};
+            if (value === null || value === undefined || Number.isNaN(value)) {
+                delete field.validators[validator];
+            }
+            else {
+                field.validators[validator] = value;
+            }
+        });
+    }
+    getParamValidator(field, validator) {
+        const val = field.validators?.[validator];
+        return typeof val === 'number' ? val : null;
+    }
+    hasFlagValidator(field, validator) {
+        if (validator === 'required')
+            return !!field.validators?.required;
+        if (validator === 'email')
+            return !!field.validators?.pattern;
+        return false;
+    }
+    // ─── Options (dropdown / multiSelect / radio) ────────────────────────────────
+    /**
+     * Where a choice field's options come from.
+     *
+     * `entity` is absent on purpose: in this model an entity reference is a field *type*
+     * (`entity-ref`), not a data source a dropdown can switch to, so offering it here would mean
+     * mutating the field's type — and rebuilding its control — from a source picker. The
+     * exclusion that matters within a choice field is inline `options` vs `listName`.
+     */
+    fieldDataSource(field) {
+        if (!field)
+            return 'none';
+        // Presence, not emptiness: a source the author has picked but not filled in yet — no
+        // options authored, no list name typed — must still read as that source, or the editor
+        // for it disappears the moment they select it.
+        if (Array.isArray(field.options))
+            return 'manual';
+        if (typeof field.listName === 'string')
+            return 'lookup';
+        return 'none';
+    }
+    /**
+     * Switch a choice field's data source, clearing the one it is leaving.
+     *
+     * The reference makes these mutually exclusive (doc §4.4) and it has to stay that way here:
+     * `optionsFor` resolves inline options first, so a field left holding both would silently
+     * ignore its list.
+     */
+    setFieldDataSource(fieldId, source) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field)
+                return;
+            if (source === 'manual') {
+                delete field.listName;
+                field.options = field.options?.length ? field.options : [];
+            }
+            else if (source === 'lookup') {
+                delete field.options;
+                field.listName = field.listName ?? '';
+            }
+            else {
+                delete field.options;
+                delete field.listName;
+            }
+        });
+    }
+    /** Set the named list a choice field reads its options from. */
+    setListName(fieldId, listName) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field)
+                return;
+            const trimmed = listName.trim();
+            if (trimmed) {
+                field.listName = trimmed;
+                // Belt and braces: inline options would win over the list at render time.
+                delete field.options;
+            }
+            else {
+                field.listName = '';
+            }
+        });
+    }
+    /** Link a field to a field defined in another entity configuration (Phase 8). */
+    linkReferencedField(fieldId, sourceEntityKey, sourceField) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field)
+                return;
+            field.isReferenced = true;
+            field.referencedEntityKey = sourceEntityKey;
+            field.referencedFieldId = sourceField.id;
+            field.referencedSnapshot = createFieldSnapshot(sourceField);
+            field.hasDrift = false;
+            // Copy label, type, validators, options from source
+            if (sourceField.label)
+                field.label = clone(sourceField.label);
+            if (sourceField.type)
+                field.type = sourceField.type;
+            if (sourceField.validators)
+                field.validators = clone(sourceField.validators);
+            if (sourceField.options)
+                field.options = clone(sourceField.options);
+        });
+    }
+    /** Unlink a referenced field back to an independent field. */
+    unlinkReferencedField(fieldId) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field)
+                return;
+            delete field.isReferenced;
+            delete field.referencedEntityKey;
+            delete field.referencedFieldId;
+            delete field.referencedSnapshot;
+            delete field.hasDrift;
+        });
+    }
+    /** Sync a drifted referenced field with the updated source field definition. */
+    syncReferencedField(fieldId, currentSourceField) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field || !field.isReferenced)
+                return;
+            field.referencedSnapshot = createFieldSnapshot(currentSourceField);
+            field.hasDrift = false;
+            if (currentSourceField.label)
+                field.label = clone(currentSourceField.label);
+            if (currentSourceField.type)
+                field.type = currentSourceField.type;
+            if (currentSourceField.validators)
+                field.validators = clone(currentSourceField.validators);
+            if (currentSourceField.options)
+                field.options = clone(currentSourceField.options);
+        });
+    }
+    /** Scan all referenced fields in the config and update their hasDrift state against current source configs. */
+    checkDrift(sourceConfigs) {
+        this.mutate(draft => {
+            const scanFields = (fields) => {
+                for (const f of fields) {
+                    if (f.isReferenced && f.referencedEntityKey && f.referencedFieldId) {
+                        const sourceConfig = sourceConfigs[f.referencedEntityKey];
+                        const sourceField = sourceConfig
+                            ? this.findFieldInTabs(sourceConfig.tabs ?? [], f.referencedFieldId)
+                            : undefined;
+                        f.hasDrift = computeFieldDrift(f, sourceField ?? undefined);
+                    }
+                    if (f.children?.length)
+                        scanFields(f.children);
+                }
+            };
+            for (const tab of draft.tabs ?? []) {
+                if (tab.fields?.length)
+                    scanFields(tab.fields);
+            }
+        });
+    }
+    addOption(fieldId) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field)
+                return;
+            const options = field.options ?? [];
+            const n = options.length + 1;
+            const lang = draft.defaultLanguage ?? 'en';
+            options.push({ [lang]: `Option ${n}` });
+            field.options = options;
+            // Authoring an inline option makes this a manual field — see `setFieldDataSource`.
+            delete field.listName;
+        });
+    }
+    /** Merge language keys into an option. `setOptionLabel` is the usual single-language path. */
+    updateOption(fieldId, index, patch) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            const option = field?.options?.[index];
+            if (!option)
+                return;
+            field.options[index] = { ...option, ...patch };
+        });
+    }
+    /**
+     * Set an option's text for one language.
+     *
+     * An option is a language-keyed object and the displayed text **is** the stored value,
+     * so this is the only way to edit one — there is no separate value to set.
+     */
+    setOptionLabel(fieldId, index, language, value) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            const option = field?.options?.[index];
+            if (!option)
+                return;
+            field.options[index] = { ...option, [language]: value };
+        });
+    }
+    removeOption(fieldId, index) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field?.options)
+                return;
+            field.options = field.options.filter((_, i) => i !== index);
+        });
+    }
+    // ─── Entity reference / cascade ─────────────────────────────────────────────
+    /** Merge a patch into a field's `entityReference` block, keeping it enabled. */
+    updateEntityReference(fieldId, patch) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field)
+                return;
+            const next = {
+                ...(field.entityReference ?? { enabled: true }),
+                ...patch,
+                enabled: true,
+            };
+            // Drop keys explicitly cleared to `undefined` so exported configs stay clean.
+            for (const key of Object.keys(patch)) {
+                if (patch[key] === undefined)
+                    delete next[key];
+            }
+            field.entityReference = next;
+        });
+    }
+    // ─── autoPatch ──────────────────────────────────────────────────────────────
+    addAutoPatchMapping(fieldId) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field)
+                return;
+            const targetTab = field.autoPatch?.targetTab ?? draft.tabs[0]?.id ?? '';
+            const mappings = [...(field.autoPatch?.mappings ?? []), { source: '', target: '' }];
+            field.autoPatch = { targetTab, mappings };
+        });
+    }
+    setAutoPatchTargetTab(fieldId, targetTab) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field?.autoPatch)
+                return;
+            field.autoPatch = { ...field.autoPatch, targetTab };
+        });
+    }
+    updateAutoPatchMapping(fieldId, index, patch) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field?.autoPatch?.mappings?.[index])
+                return;
+            field.autoPatch = {
+                ...field.autoPatch,
+                mappings: field.autoPatch.mappings.map((m, i) => (i === index ? { ...m, ...patch } : m)),
+            };
+        });
+    }
+    /** Removing the last mapping drops `autoPatch` entirely — no empty config in the export. */
+    removeAutoPatchMapping(fieldId, index) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field?.autoPatch)
+                return;
+            const mappings = field.autoPatch.mappings.filter((_, i) => i !== index);
+            if (mappings.length === 0)
+                delete field.autoPatch;
+            else
+                field.autoPatch = { ...field.autoPatch, mappings };
+        });
+    }
+    // ─── patchOnTrue ────────────────────────────────────────────────────────────
+    addPatchOnTrueMapping(fieldId) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field)
+                return;
+            field.patchOnTrue = [...(field.patchOnTrue ?? []), { from: '', to: '' }];
+        });
+    }
+    updatePatchOnTrueMapping(fieldId, index, patch) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field?.patchOnTrue?.[index])
+                return;
+            field.patchOnTrue = field.patchOnTrue.map((m, i) => (i === index ? { ...m, ...patch } : m));
+        });
+    }
+    removePatchOnTrueMapping(fieldId, index) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field?.patchOnTrue)
+                return;
+            const mappings = field.patchOnTrue.filter((_, i) => i !== index);
+            if (mappings.length === 0)
+                delete field.patchOnTrue;
+            else
+                field.patchOnTrue = mappings;
+        });
+    }
+    // ─── showWhen (static conditional visibility) ───────────────────────────────
+    /** Replace a field's `showWhen` map; an empty map removes the condition. */
+    setShowWhen(fieldId, showWhen) {
+        this.mutate(draft => {
+            const field = this.findFieldInTabs(draft.tabs, fieldId);
+            if (!field)
+                return;
+            if (!showWhen || Object.keys(showWhen).length === 0)
+                delete field.showWhen;
+            else
+                field.showWhen = showWhen;
+        });
+    }
+    // ─── Rules ──────────────────────────────────────────────────────────────────
+    /** Rules for the field currently selected in the inspector. */
+    rulesForSelectedField = computed(() => {
+        const id = this._selectedFieldId();
+        if (!id)
+            return [];
+        return this._rules().filter(r => r.fieldId === id || r.targets.some(t => t.id === id));
+    });
+    loadRules(rules) {
+        this._rules.set(clone(rules));
+    }
+    addRule(rule) {
+        const id = rule.id?.trim() || this.uniqueId('rule', this._rules().map(r => ({ id: r.id ?? '' })));
+        this._rules.update(rules => [...rules, { ...clone(rule), id }]);
+        return id;
+    }
+    updateRule(id, patch) {
+        this._rules.update(rules => rules.map(r => (r.id === id ? { ...r, ...clone(patch), id } : r)));
+    }
+    removeRule(id) {
+        this._rules.update(rules => rules.filter(r => r.id !== id));
+    }
+    toggleRule(id, enabled) {
+        this.updateRule(id, { enabled });
+    }
+    /** Move a rule in priority order. Priorities are renumbered 1..n so they stay contiguous. */
+    moveRule(id, direction) {
+        this._rules.update(rules => {
+            const next = [...rules];
+            const from = next.findIndex(r => r.id === id);
+            if (from === -1)
+                return rules;
+            const to = from + direction;
+            if (to < 0 || to >= next.length)
+                return rules;
+            const [item] = next.splice(from, 1);
+            next.splice(to, 0, item);
+            return next.map((r, i) => ({ ...r, priority: i + 1 }));
+        });
+    }
+    exportRules() {
+        return clone(this._rules());
+    }
+    // ─── Tabs ───────────────────────────────────────────────────────────────────
+    addTab() {
+        // Must be unique across the whole tree, not just the top level: a tab id is the record
+        // storage path, so a new top-level tab colliding with an existing sub-tab would make two
+        // tabs write to the same key and break findTab/getTabPath.
+        const id = this.uniqueId('tab', this.allTabIds().map(tid => ({ id: tid })));
+        this.mutate(draft => {
+            const tabs = draft.tabs ?? (draft.tabs = []);
+            const lang = draft.defaultLanguage ?? 'en';
+            tabs.push({ id, label: { [lang]: humanizeId(id) }, fields: [] });
+        });
+        return id;
+    }
+    /** Every tab id in the tree, at any depth. Tab ids must be globally unique — they are paths. */
+    allTabIds() {
+        const ids = [];
+        const collect = (tabs) => {
+            for (const t of tabs ?? []) {
+                ids.push(t.id);
+                collect(t.children);
+            }
+        };
+        collect(this._config().tabs);
+        return ids;
+    }
+    addSubTab(parentId) {
+        const id = this.uniqueId('tab', this.allTabIds().map(tid => ({ id: tid })));
+        this.mutate(draft => {
+            const parent = findTab(draft.tabs, parentId);
+            if (parent) {
+                parent.children = parent.children ?? [];
+                const lang = draft.defaultLanguage ?? 'en';
+                parent.children.push({ id, label: { [lang]: humanizeId(id) }, fields: [] });
+            }
+        });
+        return id;
+    }
+    setPrimaryTab(tabId) {
+        this.mutate(draft => {
+            const markPrimary = (tabs) => {
+                for (const t of tabs) {
+                    t.isPrimaryTab = t.id === tabId;
+                    if (t.children)
+                        markPrimary(t.children);
+                }
+            };
+            markPrimary(draft.tabs ?? []);
+        });
+    }
+    updateTab(id, patch) {
+        this.mutate(draft => {
+            const tab = findTab(draft.tabs, id);
+            if (tab)
+                Object.assign(tab, patch);
+        });
+    }
+    setTabLabel(id, language, value) {
+        this.mutate(draft => {
+            const tab = findTab(draft.tabs, id);
+            if (tab)
+                tab.label = { ...tab.label, [language]: value };
+        });
+    }
+    removeTab(id) {
+        this.mutate(draft => {
+            const removeRecursive = (tabs) => {
+                return tabs
+                    .filter(t => t.id !== id)
+                    .map(t => ({
+                    ...t,
+                    children: t.children ? removeRecursive(t.children) : undefined,
+                }));
+            };
+            draft.tabs = removeRecursive(draft.tabs ?? []);
+        });
+    }
+    moveTab(id, direction) {
+        this.mutate(draft => {
+            const tabs = draft.tabs ?? [];
+            const from = tabs.findIndex(t => t.id === id);
+            if (from === -1)
+                return;
+            const to = from + direction;
+            if (to < 0 || to >= tabs.length)
+                return;
+            const [item] = tabs.splice(from, 1);
+            tabs.splice(to, 0, item);
+        });
+    }
+    // ─── Export ─────────────────────────────────────────────────────────────────
+    exportConfig() {
+        return clone(this._config());
+    }
+    // ─── Internals ──────────────────────────────────────────────────────────────
+    mutate(fn) {
+        const draft = clone(this._config());
+        draft.tabs = draft.tabs ?? [];
+        fn(draft);
+        this._config.set(draft);
+        this._isDirty.set(true);
+    }
+    uniqueId(prefix, existing) {
+        const taken = new Set(existing.map(e => e.id));
+        let n = 1;
+        let candidate = `${prefix}_${n}`;
+        while (taken.has(candidate)) {
+            n += 1;
+            candidate = `${prefix}_${n}`;
+        }
+        return candidate;
+    }
+    validate(config) {
+        const problems = [];
+        if (!config.entity || !config.entity.trim()) {
+            problems.push({ level: 'error', message: 'Entity name is required.' });
+        }
+        else if (!ID_PATTERN.test(config.entity)) {
+            problems.push({
+                level: 'error',
+                message: 'Entity name must start with a letter or underscore and contain only letters, digits, and underscores.',
+            });
+        }
+        const allFields = this.getAllFields(config.tabs);
+        if (allFields.length === 0) {
+            problems.push({ level: 'warning', message: 'This entity has no fields yet.' });
+        }
+        const seen = new Map();
+        for (const field of allFields) {
+            seen.set(field.id, (seen.get(field.id) ?? 0) + 1);
+            if (!field.id || !ID_PATTERN.test(field.id)) {
+                problems.push({
+                    level: 'error',
+                    message: `Field id "${field.id}" is not a valid identifier.`,
+                    fieldId: field.id,
+                });
+            }
+            const labels = field.label ?? {};
+            const hasLabel = Object.values(labels).some(v => typeof v === 'string' && v.trim());
+            if (!hasLabel) {
+                problems.push({
+                    level: 'warning',
+                    message: `Field "${field.id}" has no label.`,
+                    fieldId: field.id,
+                });
+            }
+            const meta = getFieldTypeMeta(field.type);
+            // A field on the lookup source has no inline options by design — its options arrive from
+            // the registry at runtime. Warn only about the missing list name.
+            if (meta?.hasOptions && typeof field.listName === 'string') {
+                if (!field.listName.trim()) {
+                    problems.push({
+                        level: 'warning',
+                        message: `Field "${field.id}" reads options from a named list but has no list name.`,
+                        fieldId: field.id,
+                    });
+                }
+            }
+            else if (meta?.hasOptions && (!field.options || field.options.length === 0)) {
+                problems.push({
+                    level: 'warning',
+                    message: `Field "${field.id}" is a ${field.type} but has no options.`,
+                    fieldId: field.id,
+                });
+            }
+        }
+        for (const [id, count] of seen) {
+            if (count > 1) {
+                problems.push({ level: 'error', message: `Duplicate field id "${id}" (${count}×).`, fieldId: id });
+            }
+        }
+        return problems;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BuilderStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BuilderStore });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BuilderStore, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * EntityReferenceConfigComponent — authors the `entityReference` block of an entity-ref field:
+ * registry key, display fields, static filters, and the parent→child cascade.
+ *
+ * Also authors `autoPatch`, since the mappings only make sense against the record the
+ * selected reference returns.
+ */
+class EntityReferenceConfigComponent {
+    store = inject(BuilderStore);
+    field = this.store.selectedField;
+    /** Sibling fields that can drive a cascade — anything but this field itself. */
+    parentCandidates = computed(() => {
+        const current = this.field();
+        return this.store.fields().filter(f => f.id !== current?.id);
+    });
+    filtersParseError = signal(null);
+    filtersError = this.filtersParseError.asReadonly();
+    ref(field) {
+        return field.entityReference ?? { enabled: true };
+    }
+    patchRef(field, patch) {
+        this.store.updateEntityReference(field.id, patch);
+    }
+    fieldLabel(field) {
+        return resolveLabel(field.label, this.store.activeLanguage());
+    }
+    tabLabel(tabId) {
+        const tab = this.store.tabs().find(t => t.id === tabId);
+        return tab ? resolveLabel(tab.label, this.store.activeLanguage()) : tabId;
+    }
+    displayFieldsText(field) {
+        return (this.ref(field).displayFields ?? []).join(', ');
+    }
+    setDisplayFields(field, value) {
+        const parts = value
+            .split(',')
+            .map(s => s.trim())
+            .filter(Boolean);
+        this.patchRef(field, { displayFields: parts.length ? parts : undefined });
+    }
+    filtersText(field) {
+        const filters = this.ref(field).filters;
+        return filters ? JSON.stringify(filters) : '';
+    }
+    /** Invalid JSON is reported inline and left unapplied rather than silently dropped. */
+    setFilters(field, value) {
+        const trimmed = value.trim();
+        if (!trimmed) {
+            this.filtersParseError.set(null);
+            this.patchRef(field, { filters: undefined });
+            return;
+        }
+        try {
+            const parsed = JSON.parse(trimmed);
+            if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+                this.filtersParseError.set('Filters must be a JSON object.');
+                return;
+            }
+            this.filtersParseError.set(null);
+            this.patchRef(field, { filters: parsed });
+        }
+        catch {
+            this.filtersParseError.set('Invalid JSON.');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityReferenceConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EntityReferenceConfigComponent, isStandalone: true, selector: "ngx-entity-reference-config", ngImport: i0, template: `
+    @if (field(); as f) {
+      <div class="deb-entity-ref">
+        <span class="deb-section-title">Entity reference</span>
+
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Registry key</mat-label>
+          <input
+            matInput
+            data-testid="entity-ref-key"
+            [ngModel]="ref(f).linkedEntityKey ?? ''"
+            (ngModelChange)="patchRef(f, { linkedEntityKey: $event || undefined })"
+          />
+          <mat-hint>Key the consumer registered a loader under. Defaults to the field id.</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Display fields</mat-label>
+          <input
+            matInput
+            data-testid="entity-ref-display-fields"
+            [ngModel]="displayFieldsText(f)"
+            (ngModelChange)="setDisplayFields(f, $event)"
+          />
+          <mat-hint>Comma-separated record paths used to build each option label.</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Static filters (JSON)</mat-label>
+          <input
+            matInput
+            data-testid="entity-ref-filters"
+            [ngModel]="filtersText(f)"
+            (ngModelChange)="setFilters(f, $event)"
+          />
+          @if (filtersError()) {
+            <mat-hint class="deb-error-hint">{{ filtersError() }}</mat-hint>
+          } @else {
+            <mat-hint>Passed to the loader, e.g. &#123;"isEmployee": false&#125;.</mat-hint>
+          }
+        </mat-form-field>
+
+        <mat-divider></mat-divider>
+
+        <!-- Cascade -->
+        <span class="deb-section-title">Cascade</span>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Parent field</mat-label>
+          <mat-select
+            data-testid="entity-ref-parent"
+            [ngModel]="ref(f).parentField ?? ''"
+            (ngModelChange)="patchRef(f, { parentField: $event || undefined })"
+          >
+            <mat-option value="">None — load all options</mat-option>
+            @for (candidate of parentCandidates(); track candidate.id) {
+              <mat-option [value]="candidate.id">{{ fieldLabel(candidate) }} ({{ candidate.id }})</mat-option>
+            }
+          </mat-select>
+          <mat-hint>This field's options reload whenever the parent changes.</mat-hint>
+        </mat-form-field>
+
+        @if (ref(f).parentField) {
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+            <mat-label>Lookup filter path</mat-label>
+            <input
+              matInput
+              data-testid="entity-ref-lookup-filter"
+              [ngModel]="ref(f).lookupFilter ?? ''"
+              (ngModelChange)="patchRef(f, { lookupFilter: $event || undefined })"
+            />
+            <mat-hint>Keep options whose record matches the parent value at this path.</mat-hint>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+            <mat-label>Lookup path (nested options)</mat-label>
+            <input
+              matInput
+              data-testid="entity-ref-lookup-path"
+              [ngModel]="ref(f).lookupPath ?? ''"
+              (ngModelChange)="patchRef(f, { lookupPath: $event || undefined })"
+            />
+            <mat-hint>Take options from this array on the selected parent's record instead.</mat-hint>
+          </mat-form-field>
+        }
+
+        <mat-divider></mat-divider>
+
+        <!-- autoPatch -->
+        <div class="deb-row deb-row--split">
+          <span class="deb-section-title">Auto-patch on select</span>
+          <button
+            mat-stroked-button
+            type="button"
+            data-testid="add-auto-patch"
+            (click)="store.addAutoPatchMapping(f.id)"
+          >
+            <mat-icon>add</mat-icon> Mapping
+          </button>
+        </div>
+
+        @if (f.autoPatch) {
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+            <mat-label>Target tab</mat-label>
+            <mat-select
+              data-testid="auto-patch-tab"
+              [ngModel]="f.autoPatch.targetTab"
+              (ngModelChange)="store.setAutoPatchTargetTab(f.id, $event)"
+            >
+              @for (tab of store.tabs(); track tab.id) {
+                <mat-option [value]="tab.id">{{ tabLabel(tab.id) }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+
+          @for (mapping of f.autoPatch.mappings; track $index) {
+            <div class="deb-option-row">
+              <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-label>Source (linked record)</mat-label>
+                <input
+                  matInput
+                  [ngModel]="mapping.source"
+                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { source: $event })"
+                />
+              </mat-form-field>
+              <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-label>Target field</mat-label>
+                <input
+                  matInput
+                  [ngModel]="mapping.target"
+                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { target: $event })"
+                />
+              </mat-form-field>
+              <button
+                mat-icon-button
+                type="button"
+                color="warn"
+                matTooltip="Remove mapping"
+                (click)="store.removeAutoPatchMapping(f.id, $index)"
+              >
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          }
+        } @else {
+          <p class="deb-hint">
+            No auto-patch configured — selecting a reference will not copy any values.
+          </p>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [".deb-entity-ref{display:flex;flex-direction:column;gap:12px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-option-row>mat-form-field{flex:1}.deb-error-hint{color:#b91c1c}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityReferenceConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-entity-reference-config', standalone: true, imports: [
+                        FormsModule,
+                        MatButtonModule,
+                        MatDividerModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatSlideToggleModule,
+                        MatTooltipModule,
+                    ], template: `
+    @if (field(); as f) {
+      <div class="deb-entity-ref">
+        <span class="deb-section-title">Entity reference</span>
+
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Registry key</mat-label>
+          <input
+            matInput
+            data-testid="entity-ref-key"
+            [ngModel]="ref(f).linkedEntityKey ?? ''"
+            (ngModelChange)="patchRef(f, { linkedEntityKey: $event || undefined })"
+          />
+          <mat-hint>Key the consumer registered a loader under. Defaults to the field id.</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Display fields</mat-label>
+          <input
+            matInput
+            data-testid="entity-ref-display-fields"
+            [ngModel]="displayFieldsText(f)"
+            (ngModelChange)="setDisplayFields(f, $event)"
+          />
+          <mat-hint>Comma-separated record paths used to build each option label.</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Static filters (JSON)</mat-label>
+          <input
+            matInput
+            data-testid="entity-ref-filters"
+            [ngModel]="filtersText(f)"
+            (ngModelChange)="setFilters(f, $event)"
+          />
+          @if (filtersError()) {
+            <mat-hint class="deb-error-hint">{{ filtersError() }}</mat-hint>
+          } @else {
+            <mat-hint>Passed to the loader, e.g. &#123;"isEmployee": false&#125;.</mat-hint>
+          }
+        </mat-form-field>
+
+        <mat-divider></mat-divider>
+
+        <!-- Cascade -->
+        <span class="deb-section-title">Cascade</span>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Parent field</mat-label>
+          <mat-select
+            data-testid="entity-ref-parent"
+            [ngModel]="ref(f).parentField ?? ''"
+            (ngModelChange)="patchRef(f, { parentField: $event || undefined })"
+          >
+            <mat-option value="">None — load all options</mat-option>
+            @for (candidate of parentCandidates(); track candidate.id) {
+              <mat-option [value]="candidate.id">{{ fieldLabel(candidate) }} ({{ candidate.id }})</mat-option>
+            }
+          </mat-select>
+          <mat-hint>This field's options reload whenever the parent changes.</mat-hint>
+        </mat-form-field>
+
+        @if (ref(f).parentField) {
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+            <mat-label>Lookup filter path</mat-label>
+            <input
+              matInput
+              data-testid="entity-ref-lookup-filter"
+              [ngModel]="ref(f).lookupFilter ?? ''"
+              (ngModelChange)="patchRef(f, { lookupFilter: $event || undefined })"
+            />
+            <mat-hint>Keep options whose record matches the parent value at this path.</mat-hint>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+            <mat-label>Lookup path (nested options)</mat-label>
+            <input
+              matInput
+              data-testid="entity-ref-lookup-path"
+              [ngModel]="ref(f).lookupPath ?? ''"
+              (ngModelChange)="patchRef(f, { lookupPath: $event || undefined })"
+            />
+            <mat-hint>Take options from this array on the selected parent's record instead.</mat-hint>
+          </mat-form-field>
+        }
+
+        <mat-divider></mat-divider>
+
+        <!-- autoPatch -->
+        <div class="deb-row deb-row--split">
+          <span class="deb-section-title">Auto-patch on select</span>
+          <button
+            mat-stroked-button
+            type="button"
+            data-testid="add-auto-patch"
+            (click)="store.addAutoPatchMapping(f.id)"
+          >
+            <mat-icon>add</mat-icon> Mapping
+          </button>
+        </div>
+
+        @if (f.autoPatch) {
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+            <mat-label>Target tab</mat-label>
+            <mat-select
+              data-testid="auto-patch-tab"
+              [ngModel]="f.autoPatch.targetTab"
+              (ngModelChange)="store.setAutoPatchTargetTab(f.id, $event)"
+            >
+              @for (tab of store.tabs(); track tab.id) {
+                <mat-option [value]="tab.id">{{ tabLabel(tab.id) }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+
+          @for (mapping of f.autoPatch.mappings; track $index) {
+            <div class="deb-option-row">
+              <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-label>Source (linked record)</mat-label>
+                <input
+                  matInput
+                  [ngModel]="mapping.source"
+                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { source: $event })"
+                />
+              </mat-form-field>
+              <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-label>Target field</mat-label>
+                <input
+                  matInput
+                  [ngModel]="mapping.target"
+                  (ngModelChange)="store.updateAutoPatchMapping(f.id, $index, { target: $event })"
+                />
+              </mat-form-field>
+              <button
+                mat-icon-button
+                type="button"
+                color="warn"
+                matTooltip="Remove mapping"
+                (click)="store.removeAutoPatchMapping(f.id, $index)"
+              >
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          }
+        } @else {
+          <p class="deb-hint">
+            No auto-patch configured — selecting a reference will not copy any values.
+          </p>
+        }
+      </div>
+    }
+  `, styles: [".deb-entity-ref{display:flex;flex-direction:column;gap:12px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row--split{justify-content:space-between}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-option-row>mat-form-field{flex:1}.deb-error-hint{color:#b91c1c}\n"] }]
+        }] });
+
+/**
+ * RuleFormComponent — dialog/panel form for creating or editing a FormRule.
+ */
+class RuleFormComponent {
+    rule = {
+        formConfigId: 'form-1',
+        fieldId: '',
+        conditions: [{ operator: 'EQUAL', compareType: 'value', value: '' }],
+        action: { type: 'visibility', value: false },
+        targets: [],
+        enabled: true,
+        priority: 1,
+    };
+    save = new EventEmitter();
+    cancel = new EventEmitter();
+    operators = [
+        'EQUAL',
+        'NOT_EQUAL',
+        'CONTAINS',
+        'NOT_CONTAINS',
+        'STARTS_WITH',
+        'ENDS_WITH',
+        'IS_EMPTY',
+        'IS_NOT_EMPTY',
+        'LESS_THAN',
+        'MORE_THAN',
+        'LESS_THAN_EQUAL',
+        'MORE_THAN_EQUAL',
+        'DATE_BEFORE',
+        'DATE_AFTER',
+        'IN',
+        'NOT_IN',
+        'HAS_ITEMS',
+        'VALUE_CHANGED',
+    ];
+    addCondition() {
+        this.rule.conditions.push({ operator: 'EQUAL', compareType: 'value', value: '' });
+    }
+    removeCondition(index) {
+        this.rule.conditions.splice(index, 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RuleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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>
+
+      <!-- Trigger Field -->
+      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+        <mat-label>Trigger Field ID</mat-label>
+        <input matInput [(ngModel)]="rule.fieldId" placeholder="e.g. status" />
+      </mat-form-field>
+
+      <!-- Conditions -->
+      <div class="deb-rule-section">
+        <h4>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-select [(ngModel)]="cond.operator">
+                @for (op of operators; track op) {
+                  <mat-option [value]="op">{{ op }}</mat-option>
+                }
+              </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-form-field>
+            <button mat-icon-button color="warn" type="button" (click)="removeCondition($index)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        }
+        <button mat-stroked-button type="button" (click)="addCondition()">
+          <mat-icon>add</mat-icon> Add Condition
+        </button>
+      </div>
+
+      <!-- Action -->
+      <div class="deb-rule-section">
+        <h4>Action</h4>
+        <div class="deb-rule-row">
+          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+            <mat-label>Action Type</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-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-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>
+      </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-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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RuleFormComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+
+      <!-- Trigger Field -->
+      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+        <mat-label>Trigger Field ID</mat-label>
+        <input matInput [(ngModel)]="rule.fieldId" placeholder="e.g. status" />
+      </mat-form-field>
+
+      <!-- Conditions -->
+      <div class="deb-rule-section">
+        <h4>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-select [(ngModel)]="cond.operator">
+                @for (op of operators; track op) {
+                  <mat-option [value]="op">{{ op }}</mat-option>
+                }
+              </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-form-field>
+            <button mat-icon-button color="warn" type="button" (click)="removeCondition($index)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        }
+        <button mat-stroked-button type="button" (click)="addCondition()">
+          <mat-icon>add</mat-icon> Add Condition
+        </button>
+      </div>
+
+      <!-- Action -->
+      <div class="deb-rule-section">
+        <h4>Action</h4>
+        <div class="deb-rule-row">
+          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+            <mat-label>Action Type</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-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-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>
+      </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-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"] }]
+        }], propDecorators: { rule: [{
+                type: Input
+            }], save: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }] } });
+
+/**
+ * FieldRulesListComponent — the rules attached to the selected field: view, reorder,
+ * enable/disable, edit, delete. `RuleFormComponent` authors one rule; this owns the set.
+ */
+class FieldRulesListComponent {
+    store = inject(BuilderStore);
+    /** The rule currently open in the editor — a new draft or a copy of an existing rule. */
+    editing = signal(null);
+    startCreate() {
+        const fieldId = this.store.selectedFieldId();
+        if (!fieldId)
+            return;
+        this.editing.set({
+            formConfigId: this.store.config().entity || 'form-1',
+            fieldId,
+            conditions: [{ operator: 'EQUAL', compareType: 'value', value: '' }],
+            action: { type: 'visibility', value: false },
+            targets: [{ id: fieldId, type: 'field' }],
+            enabled: true,
+            priority: this.store.rules().length + 1,
+        });
+    }
+    startEdit(rule) {
+        this.editing.set(deepClone(rule));
+    }
+    commit(rule) {
+        if (rule.id)
+            this.store.updateRule(rule.id, rule);
+        else
+            this.store.addRule(rule);
+        this.editing.set(null);
+    }
+    /** One-line human summary: `status EQUAL "archived" → hide`. */
+    summarize(rule) {
+        const cond = rule.conditions
+            .map(c => {
+            const rhs = c.compareType === 'field' ? c.compareToField : JSON.stringify(c.value ?? '');
+            return `${c.operator} ${rhs ?? ''}`.trim();
+        })
+            .join(' AND ');
+        const action = rule.action.type === 'visibility'
+            ? rule.action.value === false || rule.action.value === 'false'
+                ? 'hide'
+                : 'show'
+            : `${rule.action.type}: ${rule.action.value}`;
+        return `${rule.fieldId} ${cond} → ${action}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldRulesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FieldRulesListComponent, isStandalone: true, selector: "ngx-field-rules-list", ngImport: i0, template: `
+    <div class="deb-rules">
+      <div class="deb-rules__head">
+        <span class="deb-section-title">Rules</span>
+        <button
+          mat-stroked-button
+          type="button"
+          data-testid="add-rule"
+          [disabled]="!store.selectedFieldId()"
+          (click)="startCreate()"
+        >
+          <mat-icon>add</mat-icon> Rule
+        </button>
+      </div>
+
+      @if (editing(); as draft) {
+        <ngx-rule-form [rule]="draft" (save)="commit($event)" (cancel)="editing.set(null)" />
+      }
+
+      @if (store.rulesForSelectedField().length === 0 && !editing()) {
+        <p class="deb-hint" data-testid="rules-empty">No rules on this field.</p>
+      }
+
+      @for (rule of store.rulesForSelectedField(); track rule.id) {
+        <div class="deb-rule-item" [class.deb-rule-item--off]="!rule.enabled" data-testid="rule-item">
+          <div class="deb-rule-item__body">
+            <span class="deb-rule-item__summary">{{ summarize(rule) }}</span>
+            <span class="deb-rule-item__meta">
+              priority {{ rule.priority }} · {{ rule.targets.length }} target(s)
+            </span>
+          </div>
+          <div class="deb-rule-item__actions">
+            <mat-slide-toggle
+              [checked]="rule.enabled"
+              matTooltip="Enable / disable"
+              (change)="store.toggleRule(rule.id!, $event.checked)"
+            />
+            <button
+              mat-icon-button
+              type="button"
+              matTooltip="Move up"
+              [attr.data-testid]="'rule-up-' + rule.id"
+              (click)="store.moveRule(rule.id!, -1)"
+            >
+              <mat-icon>arrow_upward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              matTooltip="Move down"
+              [attr.data-testid]="'rule-down-' + rule.id"
+              (click)="store.moveRule(rule.id!, 1)"
+            >
+              <mat-icon>arrow_downward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              matTooltip="Edit rule"
+              [attr.data-testid]="'rule-edit-' + rule.id"
+              (click)="startEdit(rule)"
+            >
+              <mat-icon>edit</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              color="warn"
+              matTooltip="Delete rule"
+              [attr.data-testid]="'rule-delete-' + rule.id"
+              (click)="store.removeRule(rule.id!)"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".deb-rules{display:flex;flex-direction:column;gap:8px}.deb-rules__head{display:flex;align-items:center;justify-content:space-between}.deb-rule-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px}.deb-rule-item--off{opacity:.55}.deb-rule-item__body{display:flex;flex-direction:column;min-width:0}.deb-rule-item__summary{font-size:13px;font-weight:600;overflow-wrap:anywhere}.deb-rule-item__meta{font-size:11px;color:#6b7280}.deb-rule-item__actions{display:flex;align-items:center;flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i10.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: RuleFormComponent, selector: "ngx-rule-form", inputs: ["rule"], outputs: ["save", "cancel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldRulesListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-field-rules-list', standalone: true, imports: [MatButtonModule, MatIconModule, MatSlideToggleModule, MatTooltipModule, RuleFormComponent], template: `
+    <div class="deb-rules">
+      <div class="deb-rules__head">
+        <span class="deb-section-title">Rules</span>
+        <button
+          mat-stroked-button
+          type="button"
+          data-testid="add-rule"
+          [disabled]="!store.selectedFieldId()"
+          (click)="startCreate()"
+        >
+          <mat-icon>add</mat-icon> Rule
+        </button>
+      </div>
+
+      @if (editing(); as draft) {
+        <ngx-rule-form [rule]="draft" (save)="commit($event)" (cancel)="editing.set(null)" />
+      }
+
+      @if (store.rulesForSelectedField().length === 0 && !editing()) {
+        <p class="deb-hint" data-testid="rules-empty">No rules on this field.</p>
+      }
+
+      @for (rule of store.rulesForSelectedField(); track rule.id) {
+        <div class="deb-rule-item" [class.deb-rule-item--off]="!rule.enabled" data-testid="rule-item">
+          <div class="deb-rule-item__body">
+            <span class="deb-rule-item__summary">{{ summarize(rule) }}</span>
+            <span class="deb-rule-item__meta">
+              priority {{ rule.priority }} · {{ rule.targets.length }} target(s)
+            </span>
+          </div>
+          <div class="deb-rule-item__actions">
+            <mat-slide-toggle
+              [checked]="rule.enabled"
+              matTooltip="Enable / disable"
+              (change)="store.toggleRule(rule.id!, $event.checked)"
+            />
+            <button
+              mat-icon-button
+              type="button"
+              matTooltip="Move up"
+              [attr.data-testid]="'rule-up-' + rule.id"
+              (click)="store.moveRule(rule.id!, -1)"
+            >
+              <mat-icon>arrow_upward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              matTooltip="Move down"
+              [attr.data-testid]="'rule-down-' + rule.id"
+              (click)="store.moveRule(rule.id!, 1)"
+            >
+              <mat-icon>arrow_downward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              matTooltip="Edit rule"
+              [attr.data-testid]="'rule-edit-' + rule.id"
+              (click)="startEdit(rule)"
+            >
+              <mat-icon>edit</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              color="warn"
+              matTooltip="Delete rule"
+              [attr.data-testid]="'rule-delete-' + rule.id"
+              (click)="store.removeRule(rule.id!)"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        </div>
+      }
+    </div>
+  `, styles: [".deb-rules{display:flex;flex-direction:column;gap:8px}.deb-rules__head{display:flex;align-items:center;justify-content:space-between}.deb-rule-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px}.deb-rule-item--off{opacity:.55}.deb-rule-item__body{display:flex;flex-direction:column;min-width:0}.deb-rule-item__summary{font-size:13px;font-weight:600;overflow-wrap:anywhere}.deb-rule-item__meta{font-size:11px;color:#6b7280}.deb-rule-item__actions{display:flex;align-items:center;flex:0 0 auto}\n"] }]
+        }] });
+
+class ReferencedFieldConfigComponent {
+    store = inject(BuilderStore);
+    configSource = inject(ConfigSourceService, { optional: true });
+    field = computed(() => this.store.selectedField());
+    toggleReferenced(field, enabled) {
+        if (enabled) {
+            this.store.updateField(field.id, { isReferenced: true });
+        }
+        else {
+            this.store.unlinkReferencedField(field.id);
+        }
+    }
+    updateEntityKey(field, key) {
+        const trimmed = key.trim();
+        this.store.updateField(field.id, { referencedEntityKey: trimmed || undefined });
+        this.checkDriftForField(field.id);
+    }
+    updateFieldId(field, fieldId) {
+        const trimmed = fieldId.trim();
+        this.store.updateField(field.id, { referencedFieldId: trimmed || undefined });
+        this.checkDriftForField(field.id);
+    }
+    async syncWithSource(field) {
+        if (!field.referencedEntityKey || !field.referencedFieldId || !this.configSource)
+            return;
+        const sourceConfig = await this.configSource.getConfig(field.referencedEntityKey);
+        if (!sourceConfig)
+            return;
+        const sourceField = this.findField(sourceConfig.tabs ?? [], field.referencedFieldId);
+        if (sourceField) {
+            this.store.syncReferencedField(field.id, sourceField);
+        }
+    }
+    async checkDriftForField(fieldId) {
+        const f = this.store.selectedField();
+        if (!f || !f.isReferenced || !f.referencedEntityKey || !f.referencedFieldId || !this.configSource)
+            return;
+        const sourceConfig = await this.configSource.getConfig(f.referencedEntityKey);
+        if (sourceConfig) {
+            this.store.checkDrift({ [f.referencedEntityKey]: sourceConfig });
+        }
+    }
+    findField(tabs, id) {
+        for (const t of tabs) {
+            for (const f of t.fields ?? []) {
+                if (f.id === id)
+                    return f;
+                if (f.children?.length) {
+                    const res = this.findFieldInList(f.children, id);
+                    if (res)
+                        return res;
+                }
+            }
+        }
+        return undefined;
+    }
+    findFieldInList(fields, id) {
+        for (const f of fields) {
+            if (f.id === id)
+                return f;
+            if (f.children?.length) {
+                const res = this.findFieldInList(f.children, id);
+                if (res)
+                    return res;
+            }
+        }
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReferencedFieldConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ReferencedFieldConfigComponent, isStandalone: true, selector: "ngx-referenced-field-config", ngImport: i0, template: `
+    @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>
+          <mat-slide-toggle
+            data-testid="toggle-referenced"
+            [ngModel]="f.isReferenced ?? false"
+            (ngModelChange)="toggleReferenced(f, $event)"
+          >
+            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>
+            <input
+              matInput
+              data-testid="referenced-entity-key"
+              [ngModel]="f.referencedEntityKey ?? ''"
+              (ngModelChange)="updateEntityKey(f, $event)"
+              placeholder="e.g. individuals"
+            />
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full" style="margin-bottom: 8px;">
+            <mat-label>Source Field ID</mat-label>
+            <input
+              matInput
+              data-testid="referenced-field-id"
+              [ngModel]="f.referencedFieldId ?? ''"
+              (ngModelChange)="updateFieldId(f, $event)"
+              placeholder="e.g. firstName"
+            />
+          </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-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>
+              </div>
+              <p style="margin: 4px 0 8px 0; font-size: 12px; color: #666;">
+                The upstream field configuration in "{{ f.referencedEntityKey }}" has evolved.
+              </p>
+              <button
+                mat-flat-button
+                color="warn"
+                type="button"
+                data-testid="sync-source-btn"
+                (click)="syncWithSource(f)"
+              >
+                Sync with Source
+              </button>
+            </div>
+          }
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i10.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReferencedFieldConfigComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-referenced-field-config',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatDividerModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatSlideToggleModule,
+                    ],
+                    template: `
+    @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>
+          <mat-slide-toggle
+            data-testid="toggle-referenced"
+            [ngModel]="f.isReferenced ?? false"
+            (ngModelChange)="toggleReferenced(f, $event)"
+          >
+            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>
+            <input
+              matInput
+              data-testid="referenced-entity-key"
+              [ngModel]="f.referencedEntityKey ?? ''"
+              (ngModelChange)="updateEntityKey(f, $event)"
+              placeholder="e.g. individuals"
+            />
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full" style="margin-bottom: 8px;">
+            <mat-label>Source Field ID</mat-label>
+            <input
+              matInput
+              data-testid="referenced-field-id"
+              [ngModel]="f.referencedFieldId ?? ''"
+              (ngModelChange)="updateFieldId(f, $event)"
+              placeholder="e.g. firstName"
+            />
+          </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-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>
+              </div>
+              <p style="margin: 4px 0 8px 0; font-size: 12px; color: #666;">
+                The upstream field configuration in "{{ f.referencedEntityKey }}" has evolved.
+              </p>
+              <button
+                mat-flat-button
+                color="warn"
+                type="button"
+                data-testid="sync-source-btn"
+                (click)="syncWithSource(f)"
+              >
+                Sync with Source
+              </button>
+            </div>
+          }
+        }
+      </div>
+    }
+  `,
+                }]
+        }] });
+
+/**
+ * FieldInspectorComponent — edits every property of the currently selected field.
+ */
+class FieldInspectorComponent {
+    store = inject(BuilderStore);
+    field = this.store.selectedField;
+    meta = computed(() => {
+        const f = this.field();
+        return f ? getFieldTypeMeta(f.type) : undefined;
+    });
+    lang() {
+        return this.store.activeLanguage();
+    }
+    toNum(value) {
+        if (value === '' || value === null || value === undefined)
+            return null;
+        const n = Number(value);
+        return Number.isNaN(n) ? null : n;
+    }
+    labelValue(field) {
+        return resolveLabel(field.label, this.lang());
+    }
+    placeholderValue(field) {
+        return resolveLabel(field.placeholder, this.lang());
+    }
+    optionLabel(option) {
+        return resolveOptionLabel(option, this.lang());
+    }
+    // ─── showWhen editing ───────────────────────────────────────────────────────
+    showWhenEntries(field) {
+        return Object.entries(field.showWhen ?? {}).map(([key, value]) => ({
+            key,
+            display: this.stringifyShowWhen(value),
+        }));
+    }
+    addShowWhen(field) {
+        const next = { ...(field.showWhen ?? {}) };
+        let key = 'field';
+        let n = 1;
+        while (key in next)
+            key = `field_${++n}`;
+        next[key] = true;
+        this.store.setShowWhen(field.id, next);
+    }
+    renameShowWhen(field, oldKey, newKey) {
+        const trimmed = newKey.trim();
+        if (!trimmed || trimmed === oldKey)
+            return;
+        const current = field.showWhen ?? {};
+        if (trimmed in current)
+            return;
+        const next = {};
+        // Rebuild in order so the row does not jump while the user is typing.
+        for (const [k, v] of Object.entries(current))
+            next[k === oldKey ? trimmed : k] = v;
+        this.store.setShowWhen(field.id, next);
+    }
+    setShowWhenValue(field, key, raw) {
+        this.store.setShowWhen(field.id, { ...(field.showWhen ?? {}), [key]: this.parseShowWhen(raw) });
+    }
+    removeShowWhen(field, key) {
+        const next = { ...(field.showWhen ?? {}) };
+        delete next[key];
+        this.store.setShowWhen(field.id, next);
+    }
+    /**
+     * `showWhen` compares with `!==`, so the authored type has to survive the round trip:
+     * "true"/"false" become booleans and numeric text becomes a number.
+     */
+    parseShowWhen(raw) {
+        const trimmed = raw.trim();
+        if (trimmed === 'true')
+            return true;
+        if (trimmed === 'false')
+            return false;
+        if (trimmed === 'null')
+            return null;
+        if (trimmed !== '' && !Number.isNaN(Number(trimmed)))
+            return Number(trimmed);
+        return raw;
+    }
+    stringifyShowWhen(value) {
+        if (value === null)
+            return 'null';
+        if (typeof value === 'object')
+            return JSON.stringify(value);
+        return String(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FieldInspectorComponent, isStandalone: true, selector: "ngx-field-inspector", ngImport: i0, template: "@if (field(); as f) {\r\n  <div class=\"deb-inspector\">\r\n    <!-- Identity -->\r\n    <div class=\"deb-row\">\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n        <mat-label>Field id</mat-label>\r\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\r\n        @if (store.hasManualId(f.id)) {\r\n          <mat-hint>The stored data key for this saved field \u2014 fixed.</mat-hint>\r\n        } @else {\r\n          <mat-hint>Derived from the label. Used as the data key.</mat-hint>\r\n        }\r\n      </mat-form-field>\r\n      <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\r\n    </div>\r\n\r\n    <!-- Localised text (active language) -->\r\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n      <mat-label>Label ({{ lang() }})</mat-label>\r\n      <input\r\n        matInput\r\n        [ngModel]=\"labelValue(f)\"\r\n        (ngModelChange)=\"store.setFieldLabel(f.id, lang(), $event)\"\r\n      />\r\n    </mat-form-field>\r\n\r\n    @if (meta()?.supportsPlaceholder) {\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>Placeholder ({{ lang() }})</mat-label>\r\n        <input\r\n          matInput\r\n          [ngModel]=\"placeholderValue(f)\"\r\n          (ngModelChange)=\"store.setFieldPlaceholder(f.id, lang(), $event)\"\r\n        />\r\n      </mat-form-field>\r\n    }\r\n\r\n    @if (meta()?.supportsDefaultValue) {\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>Default value</mat-label>\r\n        <input\r\n          matInput\r\n          [ngModel]=\"f.defaultValue ?? ''\"\r\n          (ngModelChange)=\"store.updateField(f.id, { defaultValue: $event })\"\r\n        />\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- Entity reference, cascade, and autoPatch -->\r\n    @if (meta()?.isEntityRef) {\r\n      <mat-divider></mat-divider>\r\n      <ngx-entity-reference-config />\r\n    }\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Validators -->\r\n    @if (meta(); as m) {\r\n      @if (m.flagValidators.length || m.paramValidators.length) {\r\n        <span class=\"deb-section-title\">Validation</span>\r\n        <div class=\"deb-toggles\">\r\n          @for (v of m.flagValidators; track v) {\r\n            <mat-checkbox\r\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\r\n              (ngModelChange)=\"store.toggleFlagValidator(f.id, v, $event)\"\r\n            >{{ v }}</mat-checkbox>\r\n          }\r\n        </div>\r\n        @for (v of m.paramValidators; track v) {\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n            <mat-label>{{ v }}</mat-label>\r\n            <input\r\n              matInput\r\n              type=\"number\"\r\n              [ngModel]=\"store.getParamValidator(f, v)\"\r\n              (ngModelChange)=\"store.setParamValidator(f.id, v, toNum($event))\"\r\n            />\r\n          </mat-form-field>\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Options (dropdown / radio / multiSelect) -->\r\n    @if (meta()?.hasOptions) {\r\n      <mat-divider></mat-divider>\r\n      <span class=\"deb-section-title\">Data source</span>\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>Options come from</mat-label>\r\n        <mat-select\r\n          data-testid=\"data-source\"\r\n          [ngModel]=\"store.fieldDataSource(f)\"\r\n          (ngModelChange)=\"store.setFieldDataSource(f.id, $event)\"\r\n        >\r\n          <mat-option value=\"none\">Nothing yet</mat-option>\r\n          <mat-option value=\"manual\">Options authored here</mat-option>\r\n          <mat-option value=\"lookup\">A named list</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- Named lookup list -->\r\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>List name</mat-label>\r\n        <input\r\n          matInput\r\n          data-testid=\"list-name\"\r\n          [ngModel]=\"f.listName ?? ''\"\r\n          (ngModelChange)=\"store.setListName(f.id, $event)\"\r\n        />\r\n      </mat-form-field>\r\n      <p class=\"deb-hint\">\r\n        The consuming app resolves this name through its lookup registry. Options are not\r\n        authored here.\r\n      </p>\r\n    }\r\n\r\n    <!-- Inline options -->\r\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\r\n      <div class=\"deb-row\" style=\"justify-content: space-between;\">\r\n        <span class=\"deb-section-title\">Options</span>\r\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(f.id)\">\r\n          <mat-icon>add</mat-icon> Option\r\n        </button>\r\n      </div>\r\n      @for (opt of f.options ?? []; track $index) {\r\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\r\n          <!-- One input: the displayed text is the stored value. -->\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n            <mat-label>Option ({{ lang() }})</mat-label>\r\n            <input\r\n              matInput\r\n              [attr.data-testid]=\"'option-' + $index\"\r\n              [ngModel]=\"optionLabel(opt)\"\r\n              (ngModelChange)=\"store.setOptionLabel(f.id, $index, lang(), $event)\"\r\n            />\r\n          </mat-form-field>\r\n          <button mat-icon-button type=\"button\" color=\"warn\"\r\n            (click)=\"store.removeOption(f.id, $index)\" matTooltip=\"Remove option\">\r\n            <mat-icon>delete</mat-icon>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (!(f.options ?? []).length) {\r\n        <p class=\"deb-hint\">No options yet \u2014 add at least one.</p>\r\n      }\r\n    }\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Flags -->\r\n    <span class=\"deb-section-title\">Display</span>\r\n    <div class=\"deb-toggles\">\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.visibility ?? true\"\r\n        (ngModelChange)=\"store.updateField(f.id, { visibility: $event })\"\r\n      >Visible</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.table?.visible ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { table: { visible: $event } })\"\r\n      >Table column</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.readonly ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { readonly: $event })\"\r\n      >Read-only</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.disabled ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { disabled: $event })\"\r\n      >Disabled</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.maskData ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { maskData: $event })\"\r\n      >Mask data (RBAC)</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        data-testid=\"toggle-critical\"\r\n        [ngModel]=\"f.criticalField ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { criticalField: $event })\"\r\n        matTooltip=\"Renders locked; editing it announces a change against the session baseline.\"\r\n      >Critical field</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.showOnMinimize ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { showOnMinimize: $event })\"\r\n        matTooltip=\"Shown in the record editor's summary panel.\"\r\n      >Show in summary</mat-slide-toggle>\r\n    </div>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Conditional visibility (static showWhen) -->\r\n    <div class=\"deb-row deb-row--split\">\r\n      <span class=\"deb-section-title\">Show when</span>\r\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\r\n        <mat-icon>add</mat-icon> Condition\r\n      </button>\r\n    </div>\r\n    @for (entry of showWhenEntries(f); track entry.key) {\r\n      <div class=\"deb-option-row\" data-testid=\"option-row\">\r\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n          <mat-label>Field id</mat-label>\r\n          <input matInput [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\" />\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n          <mat-label>Equals</mat-label>\r\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\r\n        </mat-form-field>\r\n        <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove condition\"\r\n          (click)=\"removeShowWhen(f, entry.key)\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    @if (!showWhenEntries(f).length) {\r\n      <p class=\"deb-hint\">Always visible. Add a condition to show this field only for certain values.</p>\r\n    }\r\n\r\n    <!-- patchOnTrue (boolean/checkbox only) -->\r\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\r\n      <mat-divider></mat-divider>\r\n      <div class=\"deb-row deb-row--split\">\r\n        <span class=\"deb-section-title\">Copy on true</span>\r\n        <button mat-stroked-button type=\"button\" data-testid=\"add-patch-on-true\"\r\n          (click)=\"store.addPatchOnTrueMapping(f.id)\">\r\n          <mat-icon>add</mat-icon> Mapping\r\n        </button>\r\n      </div>\r\n      @for (mapping of f.patchOnTrue ?? []; track $index) {\r\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n            <mat-label>From field</mat-label>\r\n            <input matInput [ngModel]=\"mapping.from\"\r\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { from: $event })\" />\r\n          </mat-form-field>\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n            <mat-label>To field</mat-label>\r\n            <input matInput [ngModel]=\"mapping.to\"\r\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { to: $event })\" />\r\n          </mat-form-field>\r\n          <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove mapping\"\r\n            (click)=\"store.removePatchOnTrueMapping(f.id, $index)\">\r\n            <mat-icon>delete</mat-icon>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (!(f.patchOnTrue ?? []).length) {\r\n        <p class=\"deb-hint\">When this flips to true, copy one field's value into another.</p>\r\n      }\r\n    }\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Rules attached to this field -->\r\n    <ngx-field-rules-list />\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\r\n    <ngx-referenced-field-config />\r\n  </div>\r\n} @else {\r\n  <div class=\"deb-inspector__empty\">\r\n    <mat-icon>touch_app</mat-icon>\r\n    <p>Select a field to edit its properties.</p>\r\n  </div>\r\n}\r\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i10.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityReferenceConfigComponent, selector: "ngx-entity-reference-config" }, { kind: "component", type: FieldRulesListComponent, selector: "ngx-field-rules-list" }, { kind: "component", type: ReferencedFieldConfigComponent, selector: "ngx-referenced-field-config" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldInspectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-field-inspector', standalone: true, imports: [
+                        FormsModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatDividerModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatSlideToggleModule,
+                        MatTooltipModule,
+                        EntityReferenceConfigComponent,
+                        FieldRulesListComponent,
+                        ReferencedFieldConfigComponent,
+                    ], template: "@if (field(); as f) {\r\n  <div class=\"deb-inspector\">\r\n    <!-- Identity -->\r\n    <div class=\"deb-row\">\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n        <mat-label>Field id</mat-label>\r\n        <input matInput data-testid=\"field-id\" [value]=\"f.id\" disabled />\r\n        @if (store.hasManualId(f.id)) {\r\n          <mat-hint>The stored data key for this saved field \u2014 fixed.</mat-hint>\r\n        } @else {\r\n          <mat-hint>Derived from the label. Used as the data key.</mat-hint>\r\n        }\r\n      </mat-form-field>\r\n      <span class=\"deb-chip\">{{ meta()?.label || f.type }}</span>\r\n    </div>\r\n\r\n    <!-- Localised text (active language) -->\r\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n      <mat-label>Label ({{ lang() }})</mat-label>\r\n      <input\r\n        matInput\r\n        [ngModel]=\"labelValue(f)\"\r\n        (ngModelChange)=\"store.setFieldLabel(f.id, lang(), $event)\"\r\n      />\r\n    </mat-form-field>\r\n\r\n    @if (meta()?.supportsPlaceholder) {\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>Placeholder ({{ lang() }})</mat-label>\r\n        <input\r\n          matInput\r\n          [ngModel]=\"placeholderValue(f)\"\r\n          (ngModelChange)=\"store.setFieldPlaceholder(f.id, lang(), $event)\"\r\n        />\r\n      </mat-form-field>\r\n    }\r\n\r\n    @if (meta()?.supportsDefaultValue) {\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>Default value</mat-label>\r\n        <input\r\n          matInput\r\n          [ngModel]=\"f.defaultValue ?? ''\"\r\n          (ngModelChange)=\"store.updateField(f.id, { defaultValue: $event })\"\r\n        />\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- Entity reference, cascade, and autoPatch -->\r\n    @if (meta()?.isEntityRef) {\r\n      <mat-divider></mat-divider>\r\n      <ngx-entity-reference-config />\r\n    }\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Validators -->\r\n    @if (meta(); as m) {\r\n      @if (m.flagValidators.length || m.paramValidators.length) {\r\n        <span class=\"deb-section-title\">Validation</span>\r\n        <div class=\"deb-toggles\">\r\n          @for (v of m.flagValidators; track v) {\r\n            <mat-checkbox\r\n              [ngModel]=\"store.hasFlagValidator(f, v)\"\r\n              (ngModelChange)=\"store.toggleFlagValidator(f.id, v, $event)\"\r\n            >{{ v }}</mat-checkbox>\r\n          }\r\n        </div>\r\n        @for (v of m.paramValidators; track v) {\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n            <mat-label>{{ v }}</mat-label>\r\n            <input\r\n              matInput\r\n              type=\"number\"\r\n              [ngModel]=\"store.getParamValidator(f, v)\"\r\n              (ngModelChange)=\"store.setParamValidator(f.id, v, toNum($event))\"\r\n            />\r\n          </mat-form-field>\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Options (dropdown / radio / multiSelect) -->\r\n    @if (meta()?.hasOptions) {\r\n      <mat-divider></mat-divider>\r\n      <span class=\"deb-section-title\">Data source</span>\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>Options come from</mat-label>\r\n        <mat-select\r\n          data-testid=\"data-source\"\r\n          [ngModel]=\"store.fieldDataSource(f)\"\r\n          (ngModelChange)=\"store.setFieldDataSource(f.id, $event)\"\r\n        >\r\n          <mat-option value=\"none\">Nothing yet</mat-option>\r\n          <mat-option value=\"manual\">Options authored here</mat-option>\r\n          <mat-option value=\"lookup\">A named list</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- Named lookup list -->\r\n    @if (meta()?.hasOptions && store.fieldDataSource(f) === 'lookup') {\r\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n        <mat-label>List name</mat-label>\r\n        <input\r\n          matInput\r\n          data-testid=\"list-name\"\r\n          [ngModel]=\"f.listName ?? ''\"\r\n          (ngModelChange)=\"store.setListName(f.id, $event)\"\r\n        />\r\n      </mat-form-field>\r\n      <p class=\"deb-hint\">\r\n        The consuming app resolves this name through its lookup registry. Options are not\r\n        authored here.\r\n      </p>\r\n    }\r\n\r\n    <!-- Inline options -->\r\n    @if (meta()?.hasOptions && store.fieldDataSource(f) !== 'lookup') {\r\n      <div class=\"deb-row\" style=\"justify-content: space-between;\">\r\n        <span class=\"deb-section-title\">Options</span>\r\n        <button mat-stroked-button type=\"button\" (click)=\"store.addOption(f.id)\">\r\n          <mat-icon>add</mat-icon> Option\r\n        </button>\r\n      </div>\r\n      @for (opt of f.options ?? []; track $index) {\r\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\r\n          <!-- One input: the displayed text is the stored value. -->\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n            <mat-label>Option ({{ lang() }})</mat-label>\r\n            <input\r\n              matInput\r\n              [attr.data-testid]=\"'option-' + $index\"\r\n              [ngModel]=\"optionLabel(opt)\"\r\n              (ngModelChange)=\"store.setOptionLabel(f.id, $index, lang(), $event)\"\r\n            />\r\n          </mat-form-field>\r\n          <button mat-icon-button type=\"button\" color=\"warn\"\r\n            (click)=\"store.removeOption(f.id, $index)\" matTooltip=\"Remove option\">\r\n            <mat-icon>delete</mat-icon>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (!(f.options ?? []).length) {\r\n        <p class=\"deb-hint\">No options yet \u2014 add at least one.</p>\r\n      }\r\n    }\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Flags -->\r\n    <span class=\"deb-section-title\">Display</span>\r\n    <div class=\"deb-toggles\">\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.visibility ?? true\"\r\n        (ngModelChange)=\"store.updateField(f.id, { visibility: $event })\"\r\n      >Visible</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.table?.visible ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { table: { visible: $event } })\"\r\n      >Table column</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.readonly ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { readonly: $event })\"\r\n      >Read-only</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.disabled ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { disabled: $event })\"\r\n      >Disabled</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.maskData ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { maskData: $event })\"\r\n      >Mask data (RBAC)</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        data-testid=\"toggle-critical\"\r\n        [ngModel]=\"f.criticalField ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { criticalField: $event })\"\r\n        matTooltip=\"Renders locked; editing it announces a change against the session baseline.\"\r\n      >Critical field</mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        [ngModel]=\"f.showOnMinimize ?? false\"\r\n        (ngModelChange)=\"store.updateField(f.id, { showOnMinimize: $event })\"\r\n        matTooltip=\"Shown in the record editor's summary panel.\"\r\n      >Show in summary</mat-slide-toggle>\r\n    </div>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Conditional visibility (static showWhen) -->\r\n    <div class=\"deb-row deb-row--split\">\r\n      <span class=\"deb-section-title\">Show when</span>\r\n      <button mat-stroked-button type=\"button\" data-testid=\"add-show-when\" (click)=\"addShowWhen(f)\">\r\n        <mat-icon>add</mat-icon> Condition\r\n      </button>\r\n    </div>\r\n    @for (entry of showWhenEntries(f); track entry.key) {\r\n      <div class=\"deb-option-row\" data-testid=\"option-row\">\r\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n          <mat-label>Field id</mat-label>\r\n          <input matInput [ngModel]=\"entry.key\" (ngModelChange)=\"renameShowWhen(f, entry.key, $event)\" />\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n          <mat-label>Equals</mat-label>\r\n          <input matInput [ngModel]=\"entry.display\" (ngModelChange)=\"setShowWhenValue(f, entry.key, $event)\" />\r\n        </mat-form-field>\r\n        <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove condition\"\r\n          (click)=\"removeShowWhen(f, entry.key)\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    @if (!showWhenEntries(f).length) {\r\n      <p class=\"deb-hint\">Always visible. Add a condition to show this field only for certain values.</p>\r\n    }\r\n\r\n    <!-- patchOnTrue (boolean/checkbox only) -->\r\n    @if (f.type === 'boolean' || f.type === 'checkbox') {\r\n      <mat-divider></mat-divider>\r\n      <div class=\"deb-row deb-row--split\">\r\n        <span class=\"deb-section-title\">Copy on true</span>\r\n        <button mat-stroked-button type=\"button\" data-testid=\"add-patch-on-true\"\r\n          (click)=\"store.addPatchOnTrueMapping(f.id)\">\r\n          <mat-icon>add</mat-icon> Mapping\r\n        </button>\r\n      </div>\r\n      @for (mapping of f.patchOnTrue ?? []; track $index) {\r\n        <div class=\"deb-option-row\" data-testid=\"option-row\">\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n            <mat-label>From field</mat-label>\r\n            <input matInput [ngModel]=\"mapping.from\"\r\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { from: $event })\" />\r\n          </mat-form-field>\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n            <mat-label>To field</mat-label>\r\n            <input matInput [ngModel]=\"mapping.to\"\r\n              (ngModelChange)=\"store.updatePatchOnTrueMapping(f.id, $index, { to: $event })\" />\r\n          </mat-form-field>\r\n          <button mat-icon-button type=\"button\" color=\"warn\" matTooltip=\"Remove mapping\"\r\n            (click)=\"store.removePatchOnTrueMapping(f.id, $index)\">\r\n            <mat-icon>delete</mat-icon>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (!(f.patchOnTrue ?? []).length) {\r\n        <p class=\"deb-hint\">When this flips to true, copy one field's value into another.</p>\r\n      }\r\n    }\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Rules attached to this field -->\r\n    <ngx-field-rules-list />\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <!-- Cross-entity field reference & drift management (Phase 8) -->\r\n    <ngx-referenced-field-config />\r\n  </div>\r\n} @else {\r\n  <div class=\"deb-inspector__empty\">\r\n    <mat-icon>touch_app</mat-icon>\r\n    <p>Select a field to edit its properties.</p>\r\n  </div>\r\n}\r\n", styles: [".deb-inspector{display:flex;flex-direction:column;gap:12px}.deb-inspector__empty{color:var(--deb-muted, #6b7280);text-align:center;padding:24px 8px}.deb-full{width:100%}.deb-row{display:flex;gap:8px;align-items:center}.deb-row>*{flex:1}.deb-row--split{justify-content:space-between}.deb-row--split>*{flex:0 0 auto}.deb-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.deb-option-row{display:flex;gap:6px;align-items:center}.deb-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--deb-accent-soft, #eef2ff);color:var(--deb-accent, #6366f1);font-size:12px;font-weight:600}\n"] }]
+        }] });
+
+/**
+ * FieldPaletteComponent — the list of buildable field types (Angular Material).
+ */
+class FieldPaletteComponent {
+    catalog = FIELD_TYPE_CATALOG;
+    pick = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FieldPaletteComponent, isStandalone: true, selector: "ngx-field-palette", outputs: { pick: "pick" }, ngImport: i0, template: `
+    <div class="deb-palette">
+      @for (meta of catalog; track meta.type) {
+        <button
+          mat-stroked-button
+          type="button"
+          class="deb-palette__item"
+          [attr.data-testid]="'palette-' + meta.type"
+          [matTooltip]="meta.description"
+          (click)="pick.emit(meta.type)"
+        >
+          <mat-icon>{{ meta.icon }}</mat-icon>
+          <span>{{ meta.label }}</span>
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [".deb-palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-palette__item{justify-content:flex-start;overflow:hidden;border-radius:8px!important;border:1px solid var(--border, #e2e8f0)!important;padding:8px 12px!important;font-family:var(--font-heading, inherit)!important;font-weight:600!important;font-size:13px!important;transition:all .18s cubic-bezier(.16,1,.3,1)!important;background:#fff!important}.deb-palette__item:hover{border-color:#6366f1!important;background:#f5f3ff!important;color:#4f46e5!important;transform:translateY(-1px);box-shadow:0 4px 12px #6366f126!important}.deb-palette__item mat-icon{color:#6366f1;margin-right:6px;font-size:18px;width:18px;height:18px}.deb-palette__item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldPaletteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-field-palette', standalone: true, imports: [MatButtonModule, MatIconModule, MatTooltipModule], template: `
+    <div class="deb-palette">
+      @for (meta of catalog; track meta.type) {
+        <button
+          mat-stroked-button
+          type="button"
+          class="deb-palette__item"
+          [attr.data-testid]="'palette-' + meta.type"
+          [matTooltip]="meta.description"
+          (click)="pick.emit(meta.type)"
+        >
+          <mat-icon>{{ meta.icon }}</mat-icon>
+          <span>{{ meta.label }}</span>
+        </button>
+      }
+    </div>
+  `, styles: [".deb-palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deb-palette__item{justify-content:flex-start;overflow:hidden;border-radius:8px!important;border:1px solid var(--border, #e2e8f0)!important;padding:8px 12px!important;font-family:var(--font-heading, inherit)!important;font-weight:600!important;font-size:13px!important;transition:all .18s cubic-bezier(.16,1,.3,1)!important;background:#fff!important}.deb-palette__item:hover{border-color:#6366f1!important;background:#f5f3ff!important;color:#4f46e5!important;transform:translateY(-1px);box-shadow:0 4px 12px #6366f126!important}.deb-palette__item mat-icon{color:#6366f1;margin-right:6px;font-size:18px;width:18px;height:18px}.deb-palette__item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], propDecorators: { pick: [{
+                type: Output
+            }] } });
+
+const SYSTEM_DEFAULT_CAN_EDIT = new InjectionToken('SYSTEM_DEFAULT_CAN_EDIT');
+/**
+ * TabManagerComponent — add / rename / reorder / remove tabs & sub-tabs with systemDefault protection.
+ */
+class TabManagerComponent {
+    store = inject(BuilderStore);
+    canEditSystemDefaultsFn = inject(SYSTEM_DEFAULT_CAN_EDIT, { optional: true });
+    lang() {
+        return this.store.activeLanguage();
+    }
+    tabLabel(tab) {
+        return resolveLabel(tab.label, this.lang());
+    }
+    canEditTab(tab) {
+        if (!tab.systemDefault)
+            return true;
+        if (this.canEditSystemDefaultsFn) {
+            return this.canEditSystemDefaultsFn([]);
+        }
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TabManagerComponent, isStandalone: true, selector: "ngx-tab-manager", ngImport: i0, template: `
+    <div class="deb-tabs">
+      <div class="deb-tabs__head">
+        <span class="deb-section-title">Tabs Manager</span>
+        <button mat-stroked-button type="button" (click)="store.addTab()">
+          <mat-icon>add</mat-icon> Add Tab
+        </button>
+      </div>
+
+      @if (store.tabs().length === 0) {
+        <p class="deb-hint">No tabs — all fields render in a single section.</p>
+      }
+
+      @for (tab of store.tabs(); track tab.id; let i = $index, count = $count) {
+        <div class="deb-tab-card" [class.deb-tab-card--system]="tab.systemDefault">
+          <div class="deb-tabs__row" [attr.data-testid]="'tab-row-' + tab.id">
+            <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
+              <mat-label>{{ tab.id }} {{ tab.systemDefault ? '(System)' : '' }}</mat-label>
+              <input
+                matInput
+                [disabled]="!canEditTab(tab)"
+                [ngModel]="tabLabel(tab)"
+                (ngModelChange)="store.setTabLabel(tab.id, lang(), $event)"
+              />
+            </mat-form-field>
+            <button
+              mat-icon-button
+              type="button"
+              [disabled]="i === 0 || !canEditTab(tab)"
+              (click)="store.moveTab(tab.id, -1)"
+              matTooltip="Move up"
+            >
+              <mat-icon>arrow_upward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              [disabled]="i === count - 1 || !canEditTab(tab)"
+              (click)="store.moveTab(tab.id, 1)"
+              matTooltip="Move down"
+            >
+              <mat-icon>arrow_downward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              color="warn"
+              [disabled]="!canEditTab(tab)"
+              (click)="store.removeTab(tab.id)"
+              matTooltip="Remove tab"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+
+          <!-- Tab settings row -->
+          <div class="deb-tab-settings">
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.flatData"
+              (ngModelChange)="store.updateTab(tab.id, { flatData: $event })"
+            >
+              Flat Data
+            </mat-checkbox>
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.isPrimaryTab"
+              (ngModelChange)="$event ? store.setPrimaryTab(tab.id) : store.updateTab(tab.id, { isPrimaryTab: false })"
+            >
+              Primary Tab
+            </mat-checkbox>
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.maskData"
+              (ngModelChange)="store.updateTab(tab.id, { maskData: $event })"
+            >
+              Mask Tab Data
+            </mat-checkbox>
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.systemDefault"
+              (ngModelChange)="store.updateTab(tab.id, { systemDefault: $event })"
+            >
+              System Default
+            </mat-checkbox>
+            <button
+              mat-button
+              type="button"
+              color="primary"
+              [disabled]="!canEditTab(tab)"
+              (click)="store.addSubTab(tab.id)"
+            >
+              + Sub-tab
+            </button>
+          </div>
+
+          <!-- Module tab configuration -->
+          <div class="deb-tab-module">
+            <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
+              <mat-label>Consumer Module Name (Optional)</mat-label>
+              <input
+                matInput
+                placeholder="e.g. documents-view"
+                [disabled]="!canEditTab(tab)"
+                [ngModel]="tab.moduleName"
+                (ngModelChange)="store.updateTab(tab.id, { moduleName: $event || undefined })"
+              />
+            </mat-form-field>
+          </div>
+
+          <!-- Sub-tabs recursive render (Level 2) -->
+          @if (tab.children && tab.children.length > 0) {
+            <div class="deb-subtabs">
+              <span class="deb-subtabs__title">Sub-tabs:</span>
+              @for (sub of tab.children; track sub.id) {
+                <div class="deb-tabs__row deb-subtab-row" [attr.data-testid]="'subtab-row-' + sub.id">
+                  <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
+                    <mat-label>{{ sub.id }}</mat-label>
+                    <input
+                      matInput
+                      [disabled]="!canEditTab(sub)"
+                      [ngModel]="tabLabel(sub)"
+                      (ngModelChange)="store.setTabLabel(sub.id, lang(), $event)"
+                    />
+                  </mat-form-field>
+                  <button
+                    mat-icon-button
+                    type="button"
+                    color="warn"
+                    [disabled]="!canEditTab(sub)"
+                    (click)="store.removeTab(sub.id)"
+                    matTooltip="Remove sub-tab"
+                  >
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                </div>
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".deb-tabs__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.deb-tab-card{border:1px solid var(--deb-border, #e5e7eb);border-radius:8px;padding:10px;margin-bottom:10px;background:var(--deb-bg-surface, #ffffff)}.deb-tab-card--system{border-left:4px solid var(--deb-accent, #6366f1)}.deb-tabs__row{display:flex;align-items:center;gap:4px}.deb-tab-settings{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:8px;font-size:13px}.deb-tab-module{margin-top:8px}.deb-subtabs{margin-top:8px;padding-left:16px;border-left:2px dashed var(--deb-border, #e5e7eb)}.deb-subtabs__title{font-size:12px;font-weight:600;color:var(--deb-muted, #6b7280)}.deb-subtab-row{margin-top:6px}.deb-grow{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabManagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-tab-manager', standalone: true, imports: [
+                        FormsModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatSlideToggleModule,
+                        MatTooltipModule,
+                    ], template: `
+    <div class="deb-tabs">
+      <div class="deb-tabs__head">
+        <span class="deb-section-title">Tabs Manager</span>
+        <button mat-stroked-button type="button" (click)="store.addTab()">
+          <mat-icon>add</mat-icon> Add Tab
+        </button>
+      </div>
+
+      @if (store.tabs().length === 0) {
+        <p class="deb-hint">No tabs — all fields render in a single section.</p>
+      }
+
+      @for (tab of store.tabs(); track tab.id; let i = $index, count = $count) {
+        <div class="deb-tab-card" [class.deb-tab-card--system]="tab.systemDefault">
+          <div class="deb-tabs__row" [attr.data-testid]="'tab-row-' + tab.id">
+            <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
+              <mat-label>{{ tab.id }} {{ tab.systemDefault ? '(System)' : '' }}</mat-label>
+              <input
+                matInput
+                [disabled]="!canEditTab(tab)"
+                [ngModel]="tabLabel(tab)"
+                (ngModelChange)="store.setTabLabel(tab.id, lang(), $event)"
+              />
+            </mat-form-field>
+            <button
+              mat-icon-button
+              type="button"
+              [disabled]="i === 0 || !canEditTab(tab)"
+              (click)="store.moveTab(tab.id, -1)"
+              matTooltip="Move up"
+            >
+              <mat-icon>arrow_upward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              [disabled]="i === count - 1 || !canEditTab(tab)"
+              (click)="store.moveTab(tab.id, 1)"
+              matTooltip="Move down"
+            >
+              <mat-icon>arrow_downward</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              type="button"
+              color="warn"
+              [disabled]="!canEditTab(tab)"
+              (click)="store.removeTab(tab.id)"
+              matTooltip="Remove tab"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+
+          <!-- Tab settings row -->
+          <div class="deb-tab-settings">
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.flatData"
+              (ngModelChange)="store.updateTab(tab.id, { flatData: $event })"
+            >
+              Flat Data
+            </mat-checkbox>
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.isPrimaryTab"
+              (ngModelChange)="$event ? store.setPrimaryTab(tab.id) : store.updateTab(tab.id, { isPrimaryTab: false })"
+            >
+              Primary Tab
+            </mat-checkbox>
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.maskData"
+              (ngModelChange)="store.updateTab(tab.id, { maskData: $event })"
+            >
+              Mask Tab Data
+            </mat-checkbox>
+            <mat-checkbox
+              [disabled]="!canEditTab(tab)"
+              [ngModel]="tab.systemDefault"
+              (ngModelChange)="store.updateTab(tab.id, { systemDefault: $event })"
+            >
+              System Default
+            </mat-checkbox>
+            <button
+              mat-button
+              type="button"
+              color="primary"
+              [disabled]="!canEditTab(tab)"
+              (click)="store.addSubTab(tab.id)"
+            >
+              + Sub-tab
+            </button>
+          </div>
+
+          <!-- Module tab configuration -->
+          <div class="deb-tab-module">
+            <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
+              <mat-label>Consumer Module Name (Optional)</mat-label>
+              <input
+                matInput
+                placeholder="e.g. documents-view"
+                [disabled]="!canEditTab(tab)"
+                [ngModel]="tab.moduleName"
+                (ngModelChange)="store.updateTab(tab.id, { moduleName: $event || undefined })"
+              />
+            </mat-form-field>
+          </div>
+
+          <!-- Sub-tabs recursive render (Level 2) -->
+          @if (tab.children && tab.children.length > 0) {
+            <div class="deb-subtabs">
+              <span class="deb-subtabs__title">Sub-tabs:</span>
+              @for (sub of tab.children; track sub.id) {
+                <div class="deb-tabs__row deb-subtab-row" [attr.data-testid]="'subtab-row-' + sub.id">
+                  <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-grow">
+                    <mat-label>{{ sub.id }}</mat-label>
+                    <input
+                      matInput
+                      [disabled]="!canEditTab(sub)"
+                      [ngModel]="tabLabel(sub)"
+                      (ngModelChange)="store.setTabLabel(sub.id, lang(), $event)"
+                    />
+                  </mat-form-field>
+                  <button
+                    mat-icon-button
+                    type="button"
+                    color="warn"
+                    [disabled]="!canEditTab(sub)"
+                    (click)="store.removeTab(sub.id)"
+                    matTooltip="Remove sub-tab"
+                  >
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                </div>
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [".deb-tabs__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.deb-tab-card{border:1px solid var(--deb-border, #e5e7eb);border-radius:8px;padding:10px;margin-bottom:10px;background:var(--deb-bg-surface, #ffffff)}.deb-tab-card--system{border-left:4px solid var(--deb-accent, #6366f1)}.deb-tabs__row{display:flex;align-items:center;gap:4px}.deb-tab-settings{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:8px;font-size:13px}.deb-tab-module{margin-top:8px}.deb-subtabs{margin-top:8px;padding-left:16px;border-left:2px dashed var(--deb-border, #e5e7eb)}.deb-subtabs__title{font-size:12px;font-weight:600;color:var(--deb-muted, #6b7280)}.deb-subtab-row{margin-top:6px}.deb-grow{flex:1}\n"] }]
+        }] });
+
+class EntityBuilderTreeNodeComponent {
+    store = inject(BuilderStore);
+    field;
+    index;
+    totalCount;
+    fieldTypeLabel(type) {
+        return getFieldTypeMeta(type)?.label ?? type;
+    }
+    fieldTypeIcon(type) {
+        return getFieldTypeMeta(type)?.icon ?? 'help_outline';
+    }
+    fieldLabel(field) {
+        const lang = this.store.activeLanguage();
+        return resolveLabel(field.label, lang) || field.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityBuilderTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EntityBuilderTreeNodeComponent, isStandalone: true, selector: "ngx-entity-builder-tree-node", inputs: { field: "field", index: "index", totalCount: "totalCount" }, ngImport: i0, template: `
+    <div
+      cdkDrag
+      class="deb-field-row"
+      data-testid="builder-field-row"
+      [class.deb-field-row--active]="store.selectedFieldId() === field.id"
+      (click)="store.selectField(field.id)"
+    >
+      <mat-icon class="deb-drag-handle" cdkDragHandle title="Drag to reorder">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>
+          }
+          @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>
+          }
+        </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> }
+
+      <button mat-icon-button type="button" [disabled]="index === 0"
+        [attr.data-testid]="'row-up-' + field.id"
+        (click)="store.moveField(field.id, -1); $event.stopPropagation()" matTooltip="Move up">
+        <mat-icon>arrow_upward</mat-icon>
+      </button>
+      <button mat-icon-button type="button" [disabled]="index === totalCount - 1"
+        [attr.data-testid]="'row-down-' + field.id"
+        (click)="store.moveField(field.id, 1); $event.stopPropagation()" matTooltip="Move down">
+        <mat-icon>arrow_downward</mat-icon>
+      </button>
+      <button mat-icon-button type="button"
+        [attr.data-testid]="'row-duplicate-' + field.id"
+        (click)="store.duplicateField(field.id); $event.stopPropagation()" matTooltip="Duplicate">
+        <mat-icon>content_copy</mat-icon>
+      </button>
+      <button mat-icon-button type="button" color="warn"
+        [attr.data-testid]="'row-delete-' + field.id"
+        (click)="store.removeField(field.id); $event.stopPropagation()" matTooltip="Delete">
+        <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;">
+        @for (child of field.children; track child.id; let ci = $index, cCount = $count) {
+          <ngx-entity-builder-tree-node
+            [field]="child"
+            [index]="ci"
+            [totalCount]="cCount"
+          />
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: EntityBuilderTreeNodeComponent, selector: "ngx-entity-builder-tree-node", inputs: ["field", "index", "totalCount"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityBuilderTreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-entity-builder-tree-node',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        DragDropModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                    ],
+                    template: `
+    <div
+      cdkDrag
+      class="deb-field-row"
+      data-testid="builder-field-row"
+      [class.deb-field-row--active]="store.selectedFieldId() === field.id"
+      (click)="store.selectField(field.id)"
+    >
+      <mat-icon class="deb-drag-handle" cdkDragHandle title="Drag to reorder">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>
+          }
+          @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>
+          }
+        </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> }
+
+      <button mat-icon-button type="button" [disabled]="index === 0"
+        [attr.data-testid]="'row-up-' + field.id"
+        (click)="store.moveField(field.id, -1); $event.stopPropagation()" matTooltip="Move up">
+        <mat-icon>arrow_upward</mat-icon>
+      </button>
+      <button mat-icon-button type="button" [disabled]="index === totalCount - 1"
+        [attr.data-testid]="'row-down-' + field.id"
+        (click)="store.moveField(field.id, 1); $event.stopPropagation()" matTooltip="Move down">
+        <mat-icon>arrow_downward</mat-icon>
+      </button>
+      <button mat-icon-button type="button"
+        [attr.data-testid]="'row-duplicate-' + field.id"
+        (click)="store.duplicateField(field.id); $event.stopPropagation()" matTooltip="Duplicate">
+        <mat-icon>content_copy</mat-icon>
+      </button>
+      <button mat-icon-button type="button" color="warn"
+        [attr.data-testid]="'row-delete-' + field.id"
+        (click)="store.removeField(field.id); $event.stopPropagation()" matTooltip="Delete">
+        <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;">
+        @for (child of field.children; track child.id; let ci = $index, cCount = $count) {
+          <ngx-entity-builder-tree-node
+            [field]="child"
+            [index]="ci"
+            [totalCount]="cCount"
+          />
+        }
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input,
+                args: [{ required: true }]
+            }], index: [{
+                type: Input,
+                args: [{ required: true }]
+            }], totalCount: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class EntityBuilderCanvasComponent {
+    store = inject(BuilderStore);
+    onDrop(event) {
+        this.store.reorderField(event.previousIndex, event.currentIndex);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityBuilderCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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-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>
+          </div>
+        }
+
+        <div cdkDropList class="deb-field-list" data-testid="builder-field-list" (cdkDropListDropped)="onDrop($event)">
+          @for (f of store.fields(); track f.id; let i = $index, count = $count) {
+            <ngx-entity-builder-tree-node
+              [field]="f"
+              [index]="i"
+              [totalCount]="count"
+            />
+          }
+        </div>
+      </mat-card-content>
+    </mat-card>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EntityBuilderTreeNodeComponent, selector: "ngx-entity-builder-tree-node", inputs: ["field", "index", "totalCount"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityBuilderCanvasComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-entity-builder-canvas',
+                    standalone: true,
+                    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-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>
+          </div>
+        }
+
+        <div cdkDropList class="deb-field-list" data-testid="builder-field-list" (cdkDropListDropped)="onDrop($event)">
+          @for (f of store.fields(); track f.id; let i = $index, count = $count) {
+            <ngx-entity-builder-tree-node
+              [field]="f"
+              [index]="i"
+              [totalCount]="count"
+            />
+          }
+        </div>
+      </mat-card-content>
+    </mat-card>
+  `,
+                }]
+        }] });
+
+/** RBAC actions surfaced in the settings panel. */
+const RBAC_ACTIONS = ['view', 'edit', 'delete'];
+/** Shared stable empty array — never allocate a fresh [] per change-detection (mat-select loops). */
+const EMPTY_ROLES = Object.freeze([]);
+/**
+ * EntityBuilderComponent — the top-level visual builder for an EntityFormConfig.
+ */
+class EntityBuilderComponent {
+    store = inject(BuilderStore);
+    /** Existing config to edit. When omitted, the builder starts blank. */
+    config;
+    /** Languages available for label/placeholder editing. First entry is the default. */
+    languages = ['en'];
+    /** Optional role list — enables multi-select role pickers for RBAC instead of free text. */
+    availableRoles = [];
+    /** Optional common-module definitions for module tabs; defaults to the built-in list from core. */
+    commonModules = COMMON_MODULES;
+    /** Emitted on every change to the working config. */
+    configChange = new EventEmitter();
+    /** Emitted when the user clicks Save. Carries a clean, deep-cloned config. */
+    save = new EventEmitter();
+    rbacActions = RBAC_ACTIONS;
+    constructor() {
+        effect(() => this.configChange.emit(this.store.config()), { allowSignalWrites: true });
+    }
+    ngOnChanges(changes) {
+        if (changes['config'] && changes['config'].currentValue !== changes['config'].previousValue) {
+            if (this.config)
+                this.store.load(this.config);
+            else if (changes['config'].isFirstChange())
+                this.store.reset();
+        }
+        if (changes['languages'] && this.languages.length) {
+            const active = this.store.activeLanguage();
+            if (!this.languages.includes(active))
+                this.store.setActiveLanguage(this.languages[0]);
+        }
+    }
+    // ─── Field canvas ─────────────────────────────────────────────────────────
+    onDrop(event) {
+        this.store.reorderField(event.previousIndex, event.currentIndex);
+    }
+    fieldTypeLabel(type) {
+        return getFieldTypeMeta(type)?.label ?? type;
+    }
+    fieldTypeIcon(type) {
+        return getFieldTypeMeta(type)?.icon ?? 'help_outline';
+    }
+    fieldLabel(field) {
+        const lang = this.store.activeLanguage();
+        return resolveLabel(field.label, lang) || field.id;
+    }
+    // ─── Toolbar actions ──────────────────────────────────────────────────────
+    doSave() {
+        this.save.emit(this.store.exportConfig());
+    }
+    get json() {
+        return JSON.stringify(this.store.exportConfig(), null, 2);
+    }
+    copyJson() {
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+            void navigator.clipboard.writeText(this.json);
+        }
+    }
+    // ─── RBAC settings ────────────────────────────────────────────────────────
+    rolesFor(action) {
+        // Return the stored array (stable ref between mutations) or a shared empty — NOT a fresh [],
+        // which would make the bound mat-select re-evaluate every CD and loop forever.
+        return this.store.config().permissions?.[action] ?? EMPTY_ROLES;
+    }
+    setRoles(action, roles) {
+        this.store.setPermission(action, roles);
+    }
+    /** Parse a comma-separated role string into a trimmed, de-duplicated array. */
+    setRolesFromText(action, text) {
+        const roles = Array.from(new Set(text
+            .split(',')
+            .map(r => r.trim())
+            .filter(Boolean)));
+        this.store.setPermission(action, roles);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EntityBuilderComponent, isStandalone: true, selector: "ngx-entity-builder", inputs: { config: "config", languages: "languages", availableRoles: "availableRoles", commonModules: "commonModules" }, outputs: { configChange: "configChange", save: "save" }, providers: [BuilderStore], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\r\n  <mat-icon>dashboard_customize</mat-icon>\r\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\r\n  <span class=\"deb-spacer\"></span>\r\n\r\n  @if (store.problems().length) {\r\n    <button\r\n      mat-button\r\n      type=\"button\"\r\n      class=\"deb-problems\"\r\n      [class.deb-problems--error]=\"!store.isValid()\"\r\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\r\n    >\r\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\r\n      {{ store.errors().length }} / {{ store.problems().length }}\r\n    </button>\r\n  }\r\n\r\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\r\n    <mat-icon>content_copy</mat-icon> Copy JSON\r\n  </button>\r\n  <button mat-flat-button color=\"accent\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\r\n    <mat-icon>save</mat-icon> Save\r\n  </button>\r\n</mat-toolbar>\r\n\r\n<div class=\"deb-body\">\r\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\r\n  <div class=\"deb-col deb-col--left\">\r\n    <mat-card>\r\n      <mat-card-content>\r\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n          <mat-label>Entity name</mat-label>\r\n          <input\r\n            matInput\r\n            [ngModel]=\"store.config().entity\"\r\n            (ngModelChange)=\"store.setEntityName($event)\"\r\n            placeholder=\"e.g. clients\"\r\n          />\r\n        </mat-form-field>\r\n\r\n        <div class=\"deb-row\">\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\r\n            <mat-label>Editing language</mat-label>\r\n            <mat-select\r\n              [ngModel]=\"store.activeLanguage()\"\r\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\r\n            >\r\n              @for (l of languages; track l) {\r\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\r\n              }\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <mat-slide-toggle\r\n          [ngModel]=\"store.config().maskData ?? false\"\r\n          (ngModelChange)=\"store.setMaskData($event)\"\r\n        >Mask this entity (RBAC)</mat-slide-toggle>\r\n\r\n        <mat-expansion-panel class=\"deb-rbac\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>Permissions</mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          @for (action of rbacActions; track action) {\r\n            @if (availableRoles.length) {\r\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n                <mat-label>{{ action }} roles</mat-label>\r\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\r\n                  @for (role of availableRoles; track role) {\r\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\r\n                  }\r\n                </mat-select>\r\n              </mat-form-field>\r\n            } @else {\r\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n                <mat-label>{{ action }} roles (comma-separated)</mat-label>\r\n                <input\r\n                  matInput\r\n                  [ngModel]=\"rolesFor(action).join(', ')\"\r\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\r\n                />\r\n              </mat-form-field>\r\n            }\r\n          }\r\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\r\n        </mat-expansion-panel>\r\n      </mat-card-content>\r\n    </mat-card>\r\n\r\n    <mat-card>\r\n      <mat-card-header><mat-card-title>Add field</mat-card-title></mat-card-header>\r\n      <mat-card-content>\r\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\r\n      </mat-card-content>\r\n    </mat-card>\r\n\r\n    <mat-card>\r\n      <mat-card-content>\r\n        <ngx-tab-manager></ngx-tab-manager>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </div>\r\n\r\n  <!-- \u2500\u2500\u2500 Center: field canvas \u2500\u2500\u2500 -->\r\n  <div class=\"deb-col deb-col--center\">\r\n    <ngx-entity-builder-canvas />\r\n  </div>\r\n\r\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\r\n  <div class=\"deb-col deb-col--right\">\r\n    <mat-card>\r\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></mat-card-header>\r\n      <mat-card-content>\r\n        <ngx-field-inspector></ngx-field-inspector>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Footer: JSON + optional live preview \u2500\u2500\u2500 -->\r\n<div class=\"deb-footer\">\r\n  <mat-expansion-panel>\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;Config JSON</mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    <pre class=\"deb-json\">{{ json }}</pre>\r\n  </mat-expansion-panel>\r\n\r\n  <div class=\"deb-preview-slot\">\r\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#0f172a}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px}@media (max-width: 1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i10.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i11.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FieldPaletteComponent, selector: "ngx-field-palette", outputs: ["pick"] }, { kind: "component", type: TabManagerComponent, selector: "ngx-tab-manager" }, { kind: "component", type: FieldInspectorComponent, selector: "ngx-field-inspector" }, { kind: "component", type: EntityBuilderCanvasComponent, selector: "ngx-entity-builder-canvas" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-entity-builder', standalone: true, providers: [BuilderStore], imports: [
+                        FormsModule,
+                        DragDropModule,
+                        MatButtonModule,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatExpansionModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatSlideToggleModule,
+                        MatToolbarModule,
+                        MatTooltipModule,
+                        FieldPaletteComponent,
+                        TabManagerComponent,
+                        FieldInspectorComponent,
+                        EntityBuilderCanvasComponent,
+                    ], template: "<mat-toolbar class=\"deb-toolbar\" color=\"primary\">\r\n  <mat-icon>dashboard_customize</mat-icon>\r\n  <span class=\"deb-toolbar__title\">Entity Builder</span>\r\n  <span class=\"deb-spacer\"></span>\r\n\r\n  @if (store.problems().length) {\r\n    <button\r\n      mat-button\r\n      type=\"button\"\r\n      class=\"deb-problems\"\r\n      [class.deb-problems--error]=\"!store.isValid()\"\r\n      [matTooltip]=\"store.problems().length + ' issue(s) \u2014 hover items in the list'\"\r\n    >\r\n      <mat-icon>{{ store.isValid() ? 'warning' : 'error' }}</mat-icon>\r\n      {{ store.errors().length }} / {{ store.problems().length }}\r\n    </button>\r\n  }\r\n\r\n  <button mat-button type=\"button\" (click)=\"copyJson()\">\r\n    <mat-icon>content_copy</mat-icon> Copy JSON\r\n  </button>\r\n  <button mat-flat-button color=\"accent\" type=\"button\" [disabled]=\"!store.isValid()\" (click)=\"doSave()\">\r\n    <mat-icon>save</mat-icon> Save\r\n  </button>\r\n</mat-toolbar>\r\n\r\n<div class=\"deb-body\">\r\n  <!-- \u2500\u2500\u2500 Left: settings, palette, tabs \u2500\u2500\u2500 -->\r\n  <div class=\"deb-col deb-col--left\">\r\n    <mat-card>\r\n      <mat-card-content>\r\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n          <mat-label>Entity name</mat-label>\r\n          <input\r\n            matInput\r\n            [ngModel]=\"store.config().entity\"\r\n            (ngModelChange)=\"store.setEntityName($event)\"\r\n            placeholder=\"e.g. clients\"\r\n          />\r\n        </mat-form-field>\r\n\r\n        <div class=\"deb-row\">\r\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-grow\">\r\n            <mat-label>Editing language</mat-label>\r\n            <mat-select\r\n              [ngModel]=\"store.activeLanguage()\"\r\n              (ngModelChange)=\"store.setActiveLanguage($event)\"\r\n            >\r\n              @for (l of languages; track l) {\r\n                <mat-option [value]=\"l\">{{ l }}</mat-option>\r\n              }\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <mat-slide-toggle\r\n          [ngModel]=\"store.config().maskData ?? false\"\r\n          (ngModelChange)=\"store.setMaskData($event)\"\r\n        >Mask this entity (RBAC)</mat-slide-toggle>\r\n\r\n        <mat-expansion-panel class=\"deb-rbac\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>Permissions</mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          @for (action of rbacActions; track action) {\r\n            @if (availableRoles.length) {\r\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n                <mat-label>{{ action }} roles</mat-label>\r\n                <mat-select multiple [ngModel]=\"rolesFor(action)\" (ngModelChange)=\"setRoles(action, $event)\">\r\n                  @for (role of availableRoles; track role) {\r\n                    <mat-option [value]=\"role\">{{ role }}</mat-option>\r\n                  }\r\n                </mat-select>\r\n              </mat-form-field>\r\n            } @else {\r\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"deb-full\">\r\n                <mat-label>{{ action }} roles (comma-separated)</mat-label>\r\n                <input\r\n                  matInput\r\n                  [ngModel]=\"rolesFor(action).join(', ')\"\r\n                  (ngModelChange)=\"setRolesFromText(action, $event)\"\r\n                />\r\n              </mat-form-field>\r\n            }\r\n          }\r\n          <p class=\"deb-hint\">Empty = no restriction for that action.</p>\r\n        </mat-expansion-panel>\r\n      </mat-card-content>\r\n    </mat-card>\r\n\r\n    <mat-card>\r\n      <mat-card-header><mat-card-title>Add field</mat-card-title></mat-card-header>\r\n      <mat-card-content>\r\n        <ngx-field-palette (pick)=\"store.addField($event)\"></ngx-field-palette>\r\n      </mat-card-content>\r\n    </mat-card>\r\n\r\n    <mat-card>\r\n      <mat-card-content>\r\n        <ngx-tab-manager></ngx-tab-manager>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </div>\r\n\r\n  <!-- \u2500\u2500\u2500 Center: field canvas \u2500\u2500\u2500 -->\r\n  <div class=\"deb-col deb-col--center\">\r\n    <ngx-entity-builder-canvas />\r\n  </div>\r\n\r\n  <!-- \u2500\u2500\u2500 Right: inspector \u2500\u2500\u2500 -->\r\n  <div class=\"deb-col deb-col--right\">\r\n    <mat-card>\r\n      <mat-card-header><mat-card-title>Field properties</mat-card-title></mat-card-header>\r\n      <mat-card-content>\r\n        <ngx-field-inspector></ngx-field-inspector>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Footer: JSON + optional live preview \u2500\u2500\u2500 -->\r\n<div class=\"deb-footer\">\r\n  <mat-expansion-panel>\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title><mat-icon>data_object</mat-icon>&nbsp;Config JSON</mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    <pre class=\"deb-json\">{{ json }}</pre>\r\n  </mat-expansion-panel>\r\n\r\n  <div class=\"deb-preview-slot\">\r\n    <ng-content select=\"[ngxBuilderPreview]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{--deb-accent: #6366f1;--deb-accent-hover: #4f46e5;--deb-accent-soft: #eeef2;--deb-border: #e2e8f0;--deb-muted: #64748b;--deb-surface: #ffffff;display:block}.deb-toolbar__title{margin-left:8px;font-family:var(--font-heading, sans-serif);font-size:16px;font-weight:700;color:#0f172a}.deb-spacer{flex:1 1 auto}.deb-problems--error{color:#ef4444;font-weight:600}.deb-full{width:100%}.deb-grow{flex:1}.deb-row{display:flex;gap:8px;align-items:center}.deb-section-title{font-family:var(--font-heading, sans-serif);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--deb-muted)}.deb-hint{margin:4px 0 0;font-size:12px;color:var(--deb-muted)}.deb-chip{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--deb-accent-soft);color:var(--deb-accent-hover);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.deb-chip--muted{background:#f1f5f9;color:var(--deb-muted)}.deb-body{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:20px;padding:20px;align-items:start}.deb-col{display:flex;flex-direction:column;gap:16px;min-width:0}.deb-col--right{position:sticky;top:20px}@media (max-width: 1100px){.deb-body{grid-template-columns:1fr}.deb-col--right{position:static}}.deb-field-list{display:flex;flex-direction:column;gap:10px}.deb-field-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--deb-border);border-radius:10px;background:var(--deb-surface);cursor:pointer;box-shadow:0 1px 3px #00000008;transition:all .18s cubic-bezier(.16,1,.3,1)}.deb-field-row:hover{border-color:#a5b4fc;background:#fcfaff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f114}.deb-field-row--active{border-color:var(--deb-accent);border-left:4px solid var(--deb-accent);background:#f5f3ff;box-shadow:0 4px 16px #6366f12e}.deb-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:#e0e7ff;color:#4338ca}.deb-drag-handle{cursor:grab;color:#94a3b8;transition:color .15s}.deb-drag-handle:hover,.deb-field-type{color:var(--deb-accent)}.deb-field-meta{display:flex;flex-direction:column;min-width:0;flex:1}.deb-field-label{font-family:var(--font-heading, sans-serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a;font-size:14px}.deb-field-id{font-size:11px;color:var(--deb-muted);font-family:ui-monospace,SFMono-Regular,monospace}.deb-req{color:#ef4444;font-weight:700}.deb-empty,.deb-inspector__empty{text-align:center;color:var(--deb-muted);padding:40px 16px}.deb-empty mat-icon{transform:scale(1.8);margin-bottom:16px;color:#cbd5e1}.cdk-drag-preview{box-shadow:0 12px 28px #4f46e538;border-radius:10px;border:1px solid var(--deb-accent);background:#fff}.cdk-drag-placeholder{opacity:.35}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-field-list.cdk-drop-list-dragging .deb-field-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.deb-footer{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.deb-json{margin:0;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.5;padding:14px;background:#0f172a;color:#e2e8f0;border-radius:10px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
+                type: Input
+            }], languages: [{
+                type: Input
+            }], availableRoles: [{
+                type: Input
+            }], commonModules: [{
+                type: Input
+            }], configChange: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }] } });
+
+/**
+ * ConnectionSourceConfigComponent — allows configuring connection source settings
+ * for an entity or field (Phase 7.2).
+ */
+class ConnectionSourceConfigComponent {
+    store = inject(BuilderStore);
+    field = computed(() => this.store.selectedField());
+    connectionSourceEntity(field) {
+        return field.connectionSource?.entity ?? '';
+    }
+    setConnectionSourceEntity(field, entity) {
+        const trimmed = entity.trim();
+        const existing = field.connectionSource ?? {};
+        if (!trimmed && !existing.targetField) {
+            this.store.updateField(field.id, { connectionSource: undefined });
+        }
+        else {
+            this.store.updateField(field.id, {
+                connectionSource: { ...existing, entity: trimmed },
+            });
+        }
+    }
+    connectionTargetField(field) {
+        return field.connectionSource?.targetField ?? '';
+    }
+    setConnectionTargetField(field, targetField) {
+        const trimmed = targetField.trim();
+        const existing = field.connectionSource ?? {};
+        if (!trimmed && !existing.entity) {
+            this.store.updateField(field.id, { connectionSource: undefined });
+        }
+        else {
+            this.store.updateField(field.id, {
+                connectionSource: { ...existing, targetField: trimmed },
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionSourceConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ConnectionSourceConfigComponent, isStandalone: true, selector: "ngx-connection-source-config", ngImport: i0, template: `
+    @if (field(); as f) {
+      <div class="deb-connection-source">
+        <span class="deb-section-title">Connection Source</span>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Source Entity</mat-label>
+          <input
+            matInput
+            data-testid="connection-source-entity"
+            [ngModel]="connectionSourceEntity(f)"
+            (ngModelChange)="setConnectionSourceEntity(f, $event)"
+            placeholder="e.g. organizations"
+          />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Target Field ID</mat-label>
+          <input
+            matInput
+            data-testid="connection-target-field"
+            [ngModel]="connectionTargetField(f)"
+            (ngModelChange)="setConnectionTargetField(f, $event)"
+            placeholder="e.g. companyId"
+          />
+        </mat-form-field>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionSourceConfigComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-connection-source-config',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                    ],
+                    template: `
+    @if (field(); as f) {
+      <div class="deb-connection-source">
+        <span class="deb-section-title">Connection Source</span>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Source Entity</mat-label>
+          <input
+            matInput
+            data-testid="connection-source-entity"
+            [ngModel]="connectionSourceEntity(f)"
+            (ngModelChange)="setConnectionSourceEntity(f, $event)"
+            placeholder="e.g. organizations"
+          />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="deb-full">
+          <mat-label>Target Field ID</mat-label>
+          <input
+            matInput
+            data-testid="connection-target-field"
+            [ngModel]="connectionTargetField(f)"
+            (ngModelChange)="setConnectionTargetField(f, $event)"
+            placeholder="e.g. companyId"
+          />
+        </mat-form-field>
+      </div>
+    }
+  `,
+                }]
+        }] });
+
+// Main component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BuilderStore, ConnectionSourceConfigComponent, EntityBuilderCanvasComponent, EntityBuilderComponent, EntityBuilderTreeNodeComponent, EntityReferenceConfigComponent, FieldInspectorComponent, FieldPaletteComponent, FieldRulesListComponent, RuleFormComponent, SYSTEM_DEFAULT_CAN_EDIT, TabManagerComponent };
+//# sourceMappingURL=ngx-dynamic-entity-builder.mjs.map