@mosaicoo/form-angular 0.2.0 → 0.4.0

package/fesm2022/mosaicoo-form-angular-designer.mjs

@@ -0,0 +1,1305 @@
+import * as i0 from '@angular/core';
+import { input as input$1, output, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, computed, effect } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import { collectInputs, generateKey, validateSchema, createFormEngine, getNodeAt, insertNode, parentOf, removeNode, duplicateNode, moveNode, updateNode } from '@mosaicoo/form-core';
+import { importForm, createLegacyImporter } from '@mosaicoo/form-core/interop';
+import { FormNodeComponent, FormRendererComponent } from '@mosaicoo/form-angular';
+
+/**
+ * Canvas node: draws the selection frame and structure chrome, delegating
+ * leaf rendering to the RUNTIME `<mform-node>` so what you see is what the
+ * renderer will produce. Canvas controls are non-interactive — testing
+ * happens in Preview mode.
+ */
+class DesignerNodeComponent {
+    node = input$1.required(...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    path = input$1.required(...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    engine = input$1.required(...(ngDevMode ? [{ debugName: "engine" }] : /* istanbul ignore next */ []));
+    selected = input$1(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    selectNode = output();
+    activeTab = signal(0, ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    container() {
+        return this.node();
+    }
+    chip() {
+        const node = this.node();
+        const label = node.kind === 'container' || node.kind === 'static'
+            ? node.label ?? node.key
+            : node.label ?? node.key;
+        return `${label} · ${node.type}`;
+    }
+    isSelected() {
+        const selected = this.selected();
+        return selected !== null && selected.join('.') === this.path().join('.');
+    }
+    childPath(index) {
+        return [...this.path(), index];
+    }
+    columnsTemplate() {
+        const columns = this.container().columns ?? [];
+        const total = columns.reduce((sum, c) => sum + c.width, 0) || 12;
+        return columns.map((c) => `${((c.width / total) * 100).toFixed(3)}fr`).join(' ');
+    }
+    onSelect(event) {
+        event.stopPropagation();
+        this.selectNode.emit(this.path());
+    }
+    setTab(index, event) {
+        event.stopPropagation();
+        this.activeTab.set(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DesignerNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: DesignerNodeComponent, isStandalone: true, selector: "mform-designer-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null }, engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectNode: "selectNode" }, ngImport: i0, template: `
+    @let n = node();
+    <div
+      class="dz-node"
+      [class.is-selected]="isSelected()"
+      [class.is-container]="n.kind === 'container'"
+      (click)="onSelect($event)"
+      role="button"
+      tabindex="0"
+      (keydown.enter)="onSelect($event)"
+      [attr.aria-label]="chip() + (isSelected() ? ' (selected)' : '')"
+    >
+      <span class="dz-chip">{{ chip() }}</span>
+
+      @if (n.kind === 'container') {
+        @if (n.type === 'tabs') {
+          <div class="dz-tabbar">
+            @for (tab of container().children; track tab.key; let i = $index) {
+              <button
+                type="button"
+                class="dz-tab"
+                [class.is-active]="activeTab() === i"
+                (click)="setTab(i, $event)"
+              >
+                {{ tab.label || 'Tab ' + (i + 1) }}
+              </button>
+            }
+          </div>
+          @for (tab of container().children; track tab.key; let i = $index) {
+            @if (activeTab() === i) {
+              <div class="dz-children">
+                <mform-designer-node
+                  [node]="tab"
+                  [path]="childPath(i)"
+                  [engine]="engine()"
+                  [selected]="selected()"
+                  (selectNode)="selectNode.emit($event)"
+                />
+              </div>
+            }
+          }
+        } @else if (n.type === 'columns' && container().columns?.length) {
+          <div class="dz-columns" [style.grid-template-columns]="columnsTemplate()">
+            @for (column of container().columns; track $index) {
+              <div class="dz-column">
+                @for (childIndex of column.children; track childIndex) {
+                  <mform-designer-node
+                    [node]="container().children[childIndex]!"
+                    [path]="childPath(childIndex)"
+                    [engine]="engine()"
+                    [selected]="selected()"
+                    (selectNode)="selectNode.emit($event)"
+                  />
+                }
+                @if (column.children.length === 0) {
+                  <div class="dz-empty">empty column</div>
+                }
+              </div>
+            }
+          </div>
+        } @else {
+          <div class="dz-children">
+            @for (child of container().children; track child.key; let i = $index) {
+              <mform-designer-node
+                [node]="child"
+                [path]="childPath(i)"
+                [engine]="engine()"
+                [selected]="selected()"
+                (selectNode)="selectNode.emit($event)"
+              />
+            } @empty {
+              <div class="dz-empty">empty — select and add fields</div>
+            }
+          </div>
+        }
+      } @else {
+        <div class="dz-leaf" inert>
+          <mform-node [node]="n" [engine]="engine()" [tick]="0" />
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: DesignerNodeComponent, selector: "mform-designer-node", inputs: ["node", "path", "engine", "selected"], outputs: ["selectNode"] }, { kind: "component", type: FormNodeComponent, selector: "mform-node", inputs: ["node", "engine", "tick", "scope", "bare", "providers", "mode", "notify"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DesignerNodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mform-designer-node',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [FormNodeComponent],
+                    template: `
+    @let n = node();
+    <div
+      class="dz-node"
+      [class.is-selected]="isSelected()"
+      [class.is-container]="n.kind === 'container'"
+      (click)="onSelect($event)"
+      role="button"
+      tabindex="0"
+      (keydown.enter)="onSelect($event)"
+      [attr.aria-label]="chip() + (isSelected() ? ' (selected)' : '')"
+    >
+      <span class="dz-chip">{{ chip() }}</span>
+
+      @if (n.kind === 'container') {
+        @if (n.type === 'tabs') {
+          <div class="dz-tabbar">
+            @for (tab of container().children; track tab.key; let i = $index) {
+              <button
+                type="button"
+                class="dz-tab"
+                [class.is-active]="activeTab() === i"
+                (click)="setTab(i, $event)"
+              >
+                {{ tab.label || 'Tab ' + (i + 1) }}
+              </button>
+            }
+          </div>
+          @for (tab of container().children; track tab.key; let i = $index) {
+            @if (activeTab() === i) {
+              <div class="dz-children">
+                <mform-designer-node
+                  [node]="tab"
+                  [path]="childPath(i)"
+                  [engine]="engine()"
+                  [selected]="selected()"
+                  (selectNode)="selectNode.emit($event)"
+                />
+              </div>
+            }
+          }
+        } @else if (n.type === 'columns' && container().columns?.length) {
+          <div class="dz-columns" [style.grid-template-columns]="columnsTemplate()">
+            @for (column of container().columns; track $index) {
+              <div class="dz-column">
+                @for (childIndex of column.children; track childIndex) {
+                  <mform-designer-node
+                    [node]="container().children[childIndex]!"
+                    [path]="childPath(childIndex)"
+                    [engine]="engine()"
+                    [selected]="selected()"
+                    (selectNode)="selectNode.emit($event)"
+                  />
+                }
+                @if (column.children.length === 0) {
+                  <div class="dz-empty">empty column</div>
+                }
+              </div>
+            }
+          </div>
+        } @else {
+          <div class="dz-children">
+            @for (child of container().children; track child.key; let i = $index) {
+              <mform-designer-node
+                [node]="child"
+                [path]="childPath(i)"
+                [engine]="engine()"
+                [selected]="selected()"
+                (selectNode)="selectNode.emit($event)"
+              />
+            } @empty {
+              <div class="dz-empty">empty — select and add fields</div>
+            }
+          </div>
+        }
+      } @else {
+        <div class="dz-leaf" inert>
+          <mform-node [node]="n" [engine]="engine()" [tick]="0" />
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: true }] }], engine: [{ type: i0.Input, args: [{ isSignal: true, alias: "engine", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectNode: [{ type: i0.Output, args: ["selectNode"] }] } });
+
+/**
+ * Property panel of the selected node. Emits immutable patches — the shell
+ * owns the document, history and validation.
+ */
+class InspectorComponent {
+    node = input$1.required(...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    schema = input$1.required(...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
+    nodePatch = output();
+    field() {
+        return this.node();
+    }
+    static_() {
+        return this.node();
+    }
+    hasOptions() {
+        return ['select', 'radio', 'checkbox-group'].includes(this.node().type);
+    }
+    otherInputPaths = computed(() => collectInputs(this.schema())
+        .map((entry) => entry.path)
+        .filter((path) => !path.includes('*')), ...(ngDevMode ? [{ debugName: "otherInputPaths" }] : /* istanbul ignore next */ []));
+    emitPatch(patch) {
+        this.nodePatch.emit({ patch });
+    }
+    inputValue(event) {
+        return event.target.value;
+    }
+    patchText(member, event) {
+        const value = this.inputValue(event).trim();
+        if (member === 'key' && value === '')
+            return; // key can never be emptied
+        this.emitPatch({ [member]: value === '' ? undefined : value });
+    }
+    patchFlag(member, event) {
+        const checked = event.target.checked;
+        this.emitPatch({ [member]: checked ? true : undefined });
+    }
+    defaultValueText() {
+        const value = this.field().defaultValue;
+        return value === undefined || value === null ? '' : String(value);
+    }
+    patchDefault(event) {
+        const raw = this.inputValue(event);
+        if (raw === '') {
+            this.emitPatch({ defaultValue: undefined });
+            return;
+        }
+        const field = this.field();
+        let value = raw;
+        if (field.dataType === 'number')
+            value = Number(raw);
+        if (field.dataType === 'boolean')
+            value = raw === 'true';
+        this.emitPatch({ defaultValue: value });
+    }
+    // -- validators -----------------------------------------------------------
+    validators() {
+        return this.field().validators ?? [];
+    }
+    isRequired() {
+        return this.validators().some((v) => v.type === 'required');
+    }
+    toggleRequired(event) {
+        const checked = event.target.checked;
+        const rest = this.validators().filter((v) => v.type !== 'required');
+        this.emitValidators(checked ? [{ type: 'required' }, ...rest] : rest);
+    }
+    validatorValue(type) {
+        const spec = this.validators().find((v) => v.type === type);
+        return spec && 'value' in spec ? String(spec.value) : '';
+    }
+    patchValidator(type, event) {
+        const raw = this.inputValue(event);
+        const rest = this.validators().filter((v) => v.type !== type);
+        this.emitValidators(raw === '' ? rest : [...rest, { type, value: Number(raw) }]);
+    }
+    patternValue() {
+        const spec = this.validators().find((v) => v.type === 'pattern');
+        return spec && 'value' in spec ? String(spec.value) : '';
+    }
+    patchPattern(event) {
+        const raw = this.inputValue(event);
+        const rest = this.validators().filter((v) => v.type !== 'pattern');
+        this.emitValidators(raw === '' ? rest : [...rest, { type: 'pattern', value: raw }]);
+    }
+    emitValidators(validators) {
+        this.emitPatch({ validators: validators.length ? validators : undefined });
+    }
+    // -- options --------------------------------------------------------------
+    patchOption(index, member, event) {
+        const options = [...(this.field().options ?? [])];
+        options[index] = { ...options[index], [member]: this.inputValue(event) };
+        this.emitPatch({ options });
+    }
+    addOption() {
+        const options = [...(this.field().options ?? [])];
+        options.push({ label: `Option ${options.length + 1}`, value: `option${options.length + 1}` });
+        this.emitPatch({ options });
+    }
+    removeOption(index) {
+        const options = (this.field().options ?? []).filter((_, i) => i !== index);
+        this.emitPatch({ options: options.length ? options : undefined });
+    }
+    // -- columns --------------------------------------------------------------
+    columnWidths() {
+        return (this.node().columns ?? []).map((c) => c.width).join(', ');
+    }
+    patchColumnWidths(event) {
+        const container = this.node();
+        const widths = this.inputValue(event)
+            .split(',')
+            .map((part) => Number(part.trim()))
+            .filter((width) => Number.isFinite(width) && width > 0);
+        if (widths.length === 0)
+            return;
+        const existing = container.columns ?? [];
+        const columns = widths.map((width, i) => ({
+            width,
+            children: existing[i]?.children ?? [],
+        }));
+        // children in dropped columns are re-attached to the last remaining one
+        for (let i = widths.length; i < existing.length; i++) {
+            columns[columns.length - 1].children.push(...existing[i].children);
+        }
+        this.emitPatch({ columns });
+    }
+    // -- conditional ----------------------------------------------------------
+    simpleCondition() {
+        const condition = this.node().conditional;
+        return condition && 'field' in condition ? condition : null;
+    }
+    conditionExpression() {
+        const condition = this.node().conditional;
+        return condition && 'expression' in condition ? condition.expression : '';
+    }
+    conditionValueText() {
+        const value = this.simpleCondition()?.value;
+        return value === undefined || value === null ? '' : String(value);
+    }
+    patchConditionField(event) {
+        const field = this.inputValue(event);
+        if (field === '') {
+            this.emitPatch({ conditional: undefined });
+            return;
+        }
+        const current = this.simpleCondition();
+        const conditional = {
+            show: current?.show ?? true,
+            op: current?.op ?? 'eq',
+            field,
+            value: current?.value ?? '',
+        };
+        this.emitPatch({ conditional });
+    }
+    patchConditionValue(event) {
+        const current = this.simpleCondition();
+        if (!current)
+            return;
+        const raw = this.inputValue(event);
+        const value = raw === 'true' ? true : raw === 'false' ? false : raw;
+        this.emitPatch({ conditional: { ...current, value } });
+    }
+    patchConditionExpression(event) {
+        const expression = this.inputValue(event).trim();
+        if (expression === '') {
+            // clearing the expression keeps a simple condition, if one existed
+            this.emitPatch({ conditional: this.simpleCondition() ?? undefined });
+            return;
+        }
+        this.emitPatch({ conditional: { show: true, expression } });
+    }
+    // -- advanced (calculate / mask) ------------------------------------------
+    patchCalculate(event) {
+        const expression = this.inputValue(event).trim();
+        this.emitPatch({ calculate: expression === '' ? undefined : expression });
+    }
+    patchMask(event) {
+        const mask = this.inputValue(event).trim();
+        this.emitPatch({ format: mask === '' ? undefined : { mask } });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InspectorComponent, isStandalone: true, selector: "mform-inspector", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodePatch: "nodePatch" }, ngImport: i0, template: `
+    @let n = node();
+    <div class="dz-inspector">
+      <h3>{{ n.type }} <code>{{ n.key }}</code></h3>
+
+      <label class="dz-prop">
+        <span>Key</span>
+        <input type="text" [value]="n.key" (change)="patchText('key', $event)" />
+      </label>
+      <label class="dz-prop">
+        <span>Label</span>
+        <input type="text" [value]="n.label ?? ''" (change)="patchText('label', $event)" />
+      </label>
+      <label class="dz-prop">
+        <span>Description</span>
+        <input type="text" [value]="n.description ?? ''" (change)="patchText('description', $event)" />
+      </label>
+
+      @if (n.kind === 'input') {
+        <label class="dz-prop">
+          <span>Placeholder</span>
+          <input type="text" [value]="field().placeholder ?? ''" (change)="patchText('placeholder', $event)" />
+        </label>
+        <label class="dz-prop">
+          <span>Default value</span>
+          <input type="text" [value]="defaultValueText()" (change)="patchDefault($event)" />
+        </label>
+        <label class="dz-check">
+          <input type="checkbox" [checked]="isRequired()" (change)="toggleRequired($event)" />
+          <span>Required</span>
+        </label>
+
+        <details class="dz-section" open>
+          <summary>Validation</summary>
+          <label class="dz-prop"><span>Min length</span>
+            <input type="number" [value]="validatorValue('minLength')" (change)="patchValidator('minLength', $event)" /></label>
+          <label class="dz-prop"><span>Max length</span>
+            <input type="number" [value]="validatorValue('maxLength')" (change)="patchValidator('maxLength', $event)" /></label>
+          <label class="dz-prop"><span>Min</span>
+            <input type="number" [value]="validatorValue('min')" (change)="patchValidator('min', $event)" /></label>
+          <label class="dz-prop"><span>Max</span>
+            <input type="number" [value]="validatorValue('max')" (change)="patchValidator('max', $event)" /></label>
+          <label class="dz-prop"><span>Pattern (regex)</span>
+            <input type="text" [value]="patternValue()" (change)="patchPattern($event)" /></label>
+        </details>
+
+        @if (hasOptions()) {
+          <details class="dz-section" open>
+            <summary>Options</summary>
+            @for (option of field().options ?? []; track $index; let i = $index) {
+              <div class="dz-option-row">
+                <input type="text" placeholder="Label" [value]="option.label"
+                  (change)="patchOption(i, 'label', $event)" />
+                <input type="text" placeholder="Value" [value]="option.value"
+                  (change)="patchOption(i, 'value', $event)" />
+                <button type="button" (click)="removeOption(i)" aria-label="Remove option">✕</button>
+              </div>
+            }
+            <button type="button" class="dz-add" (click)="addOption()">+ Option</button>
+          </details>
+        }
+      }
+
+      @if (n.kind === 'static' && n.type === 'content') {
+        <label class="dz-prop">
+          <span>Content (HTML)</span>
+          <textarea rows="5" [value]="static_().content ?? ''" (change)="patchText('content', $event)"></textarea>
+        </label>
+      }
+
+      @if (n.kind === 'container' && n.type === 'columns') {
+        <label class="dz-prop">
+          <span>Column widths (of 12, comma-separated)</span>
+          <input type="text" [value]="columnWidths()" (change)="patchColumnWidths($event)" />
+        </label>
+      }
+
+      <details class="dz-section">
+        <summary>Visibility</summary>
+        <label class="dz-check">
+          <input type="checkbox" [checked]="n.hidden === true" (change)="patchFlag('hidden', $event)" />
+          <span>Hidden</span>
+        </label>
+        <label class="dz-check">
+          <input type="checkbox" [checked]="n.disabled === true" (change)="patchFlag('disabled', $event)" />
+          <span>Disabled</span>
+        </label>
+        <label class="dz-prop">
+          <span>Show when field…</span>
+          <select [value]="simpleCondition()?.field ?? ''" (change)="patchConditionField($event)">
+            <option value="">(always visible)</option>
+            @for (path of otherInputPaths(); track path) {
+              <option [value]="path" [selected]="simpleCondition()?.field === path">{{ path }}</option>
+            }
+          </select>
+        </label>
+        @if (simpleCondition()) {
+          <label class="dz-prop">
+            <span>…equals value</span>
+            <input type="text" [value]="conditionValueText()" (change)="patchConditionValue($event)" />
+          </label>
+        }
+        <label class="dz-prop">
+          <span>Show when expression (advanced)</span>
+          <input
+            type="text"
+            placeholder="ex.: total > 1000 && status == 'ok'"
+            [value]="conditionExpression()"
+            (change)="patchConditionExpression($event)"
+          />
+        </label>
+      </details>
+
+      @if (n.kind === 'input') {
+        <details class="dz-section">
+          <summary>Advanced</summary>
+          <label class="dz-prop">
+            <span>Calculated value (expression)</span>
+            <input
+              type="text"
+              placeholder="ex.: qty * price"
+              [value]="field().calculate ?? ''"
+              (change)="patchCalculate($event)"
+            />
+          </label>
+          <label class="dz-prop">
+            <span>Input mask (0=digit A=letter S=any)</span>
+            <input
+              type="text"
+              placeholder="ex.: 000.000.000-00"
+              [value]="field().format?.mask ?? ''"
+              (change)="patchMask($event)"
+            />
+          </label>
+        </details>
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InspectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mform-inspector',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+    @let n = node();
+    <div class="dz-inspector">
+      <h3>{{ n.type }} <code>{{ n.key }}</code></h3>
+
+      <label class="dz-prop">
+        <span>Key</span>
+        <input type="text" [value]="n.key" (change)="patchText('key', $event)" />
+      </label>
+      <label class="dz-prop">
+        <span>Label</span>
+        <input type="text" [value]="n.label ?? ''" (change)="patchText('label', $event)" />
+      </label>
+      <label class="dz-prop">
+        <span>Description</span>
+        <input type="text" [value]="n.description ?? ''" (change)="patchText('description', $event)" />
+      </label>
+
+      @if (n.kind === 'input') {
+        <label class="dz-prop">
+          <span>Placeholder</span>
+          <input type="text" [value]="field().placeholder ?? ''" (change)="patchText('placeholder', $event)" />
+        </label>
+        <label class="dz-prop">
+          <span>Default value</span>
+          <input type="text" [value]="defaultValueText()" (change)="patchDefault($event)" />
+        </label>
+        <label class="dz-check">
+          <input type="checkbox" [checked]="isRequired()" (change)="toggleRequired($event)" />
+          <span>Required</span>
+        </label>
+
+        <details class="dz-section" open>
+          <summary>Validation</summary>
+          <label class="dz-prop"><span>Min length</span>
+            <input type="number" [value]="validatorValue('minLength')" (change)="patchValidator('minLength', $event)" /></label>
+          <label class="dz-prop"><span>Max length</span>
+            <input type="number" [value]="validatorValue('maxLength')" (change)="patchValidator('maxLength', $event)" /></label>
+          <label class="dz-prop"><span>Min</span>
+            <input type="number" [value]="validatorValue('min')" (change)="patchValidator('min', $event)" /></label>
+          <label class="dz-prop"><span>Max</span>
+            <input type="number" [value]="validatorValue('max')" (change)="patchValidator('max', $event)" /></label>
+          <label class="dz-prop"><span>Pattern (regex)</span>
+            <input type="text" [value]="patternValue()" (change)="patchPattern($event)" /></label>
+        </details>
+
+        @if (hasOptions()) {
+          <details class="dz-section" open>
+            <summary>Options</summary>
+            @for (option of field().options ?? []; track $index; let i = $index) {
+              <div class="dz-option-row">
+                <input type="text" placeholder="Label" [value]="option.label"
+                  (change)="patchOption(i, 'label', $event)" />
+                <input type="text" placeholder="Value" [value]="option.value"
+                  (change)="patchOption(i, 'value', $event)" />
+                <button type="button" (click)="removeOption(i)" aria-label="Remove option">✕</button>
+              </div>
+            }
+            <button type="button" class="dz-add" (click)="addOption()">+ Option</button>
+          </details>
+        }
+      }
+
+      @if (n.kind === 'static' && n.type === 'content') {
+        <label class="dz-prop">
+          <span>Content (HTML)</span>
+          <textarea rows="5" [value]="static_().content ?? ''" (change)="patchText('content', $event)"></textarea>
+        </label>
+      }
+
+      @if (n.kind === 'container' && n.type === 'columns') {
+        <label class="dz-prop">
+          <span>Column widths (of 12, comma-separated)</span>
+          <input type="text" [value]="columnWidths()" (change)="patchColumnWidths($event)" />
+        </label>
+      }
+
+      <details class="dz-section">
+        <summary>Visibility</summary>
+        <label class="dz-check">
+          <input type="checkbox" [checked]="n.hidden === true" (change)="patchFlag('hidden', $event)" />
+          <span>Hidden</span>
+        </label>
+        <label class="dz-check">
+          <input type="checkbox" [checked]="n.disabled === true" (change)="patchFlag('disabled', $event)" />
+          <span>Disabled</span>
+        </label>
+        <label class="dz-prop">
+          <span>Show when field…</span>
+          <select [value]="simpleCondition()?.field ?? ''" (change)="patchConditionField($event)">
+            <option value="">(always visible)</option>
+            @for (path of otherInputPaths(); track path) {
+              <option [value]="path" [selected]="simpleCondition()?.field === path">{{ path }}</option>
+            }
+          </select>
+        </label>
+        @if (simpleCondition()) {
+          <label class="dz-prop">
+            <span>…equals value</span>
+            <input type="text" [value]="conditionValueText()" (change)="patchConditionValue($event)" />
+          </label>
+        }
+        <label class="dz-prop">
+          <span>Show when expression (advanced)</span>
+          <input
+            type="text"
+            placeholder="ex.: total > 1000 && status == 'ok'"
+            [value]="conditionExpression()"
+            (change)="patchConditionExpression($event)"
+          />
+        </label>
+      </details>
+
+      @if (n.kind === 'input') {
+        <details class="dz-section">
+          <summary>Advanced</summary>
+          <label class="dz-prop">
+            <span>Calculated value (expression)</span>
+            <input
+              type="text"
+              placeholder="ex.: qty * price"
+              [value]="field().calculate ?? ''"
+              (change)="patchCalculate($event)"
+            />
+          </label>
+          <label class="dz-prop">
+            <span>Input mask (0=digit A=letter S=any)</span>
+            <input
+              type="text"
+              placeholder="ex.: 000.000.000-00"
+              [value]="field().format?.mask ?? ''"
+              (change)="patchMask($event)"
+            />
+          </label>
+        </details>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], nodePatch: [{ type: i0.Output, args: ["nodePatch"] }] } });
+
+function input(type, dataType, label, extra) {
+    return (schema) => ({
+        kind: 'input',
+        key: generateKey(schema, type),
+        type,
+        label,
+        dataType,
+        ...extra,
+    });
+}
+const DEFAULT_CATALOG = [
+    {
+        label: 'Basic',
+        entries: [
+            { type: 'text', label: 'Text', icon: 'Aa', create: input('text', 'string', 'Text') },
+            { type: 'textarea', label: 'Text area', icon: '¶', create: input('textarea', 'string', 'Text area') },
+            { type: 'number', label: 'Number', icon: '#', create: input('number', 'number', 'Number') },
+            { type: 'currency', label: 'Currency', icon: '$', create: input('currency', 'number', 'Currency') },
+            { type: 'checkbox', label: 'Checkbox', icon: '☑', create: input('checkbox', 'boolean', 'Checkbox') },
+            { type: 'email', label: 'Email', icon: '@', create: input('email', 'string', 'Email', { validators: [{ type: 'email' }] }) },
+            { type: 'phone', label: 'Phone', icon: '☎', create: input('phone', 'string', 'Phone') },
+            { type: 'password', label: 'Password', icon: '••', create: input('password', 'string', 'Password') },
+        ],
+    },
+    {
+        label: 'Choices',
+        entries: [
+            {
+                type: 'select', label: 'Select', icon: '▾',
+                create: (s) => ({ ...input('select', 'string', 'Select')(s), options: [
+                        { label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' },
+                    ] }),
+            },
+            {
+                type: 'radio', label: 'Radio', icon: '◉',
+                create: (s) => ({ ...input('radio', 'string', 'Radio')(s), options: [
+                        { label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' },
+                    ] }),
+            },
+            {
+                type: 'checkbox-group', label: 'Checkbox group', icon: '☷',
+                create: (s) => ({ ...input('checkbox-group', 'object', 'Checkbox group')(s), options: [
+                        { label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' },
+                    ] }),
+            },
+            { type: 'tags', label: 'Tags', icon: '⌗', create: input('tags', 'array', 'Tags') },
+            {
+                type: 'reference', label: 'Reference', icon: '⌕',
+                create: (s) => ({
+                    ...input('reference', 'string', 'Reference')(s),
+                    optionsSource: { type: 'provider', name: 'reference' },
+                }),
+            },
+        ],
+    },
+    {
+        label: 'Date & files',
+        entries: [
+            { type: 'datetime', label: 'Date & time', icon: '📅', create: input('datetime', 'date', 'Date & time') },
+            { type: 'day', label: 'Date', icon: '▦', create: input('day', 'string', 'Date') },
+            { type: 'time', label: 'Time', icon: '◷', create: input('time', 'string', 'Time') },
+            { type: 'file', label: 'File', icon: '📎', create: input('file', 'array', 'File') },
+        ],
+    },
+    {
+        label: 'Layout',
+        entries: [
+            {
+                type: 'panel', label: 'Panel', icon: '▭',
+                create: (s) => ({ kind: 'container', key: generateKey(s, 'panel'), type: 'panel',
+                    dataScope: 'inherit', label: 'Panel', children: [] }),
+            },
+            {
+                type: 'columns', label: 'Columns', icon: '▥',
+                create: (s) => ({ kind: 'container', key: generateKey(s, 'columns'), type: 'columns',
+                    dataScope: 'inherit', children: [], columns: [
+                        { width: 6, children: [] }, { width: 6, children: [] },
+                    ] }),
+            },
+            {
+                type: 'tabs', label: 'Tabs', icon: '⧉',
+                create: (s) => {
+                    const key = generateKey(s, 'tabs');
+                    return { kind: 'container', key, type: 'tabs', dataScope: 'inherit', children: [
+                            { kind: 'container', key: `${key}-tab-1`, type: 'panel', dataScope: 'inherit', label: 'Tab 1', children: [] },
+                            { kind: 'container', key: `${key}-tab-2`, type: 'panel', dataScope: 'inherit', label: 'Tab 2', children: [] },
+                        ] };
+                },
+            },
+            {
+                type: 'group', label: 'Data group', icon: '⧈',
+                create: (s) => ({ kind: 'container', key: generateKey(s, 'group'), type: 'group',
+                    dataScope: 'nested', label: 'Group', children: [] }),
+            },
+            {
+                type: 'datagrid', label: 'Data grid', icon: '☰',
+                create: (s) => ({ kind: 'container', key: generateKey(s, 'datagrid'), type: 'datagrid',
+                    dataScope: 'array', label: 'Data grid', children: [] }),
+            },
+        ],
+    },
+    {
+        label: 'Static',
+        entries: [
+            {
+                type: 'content', label: 'Content', icon: '¶¶',
+                create: (s) => ({ kind: 'static', key: generateKey(s, 'content'), type: 'content',
+                    content: '<p>Content</p>' }),
+            },
+            {
+                type: 'button', label: 'Submit button', icon: '⏎',
+                create: (s) => ({ kind: 'static', key: generateKey(s, 'button'), type: 'button',
+                    label: 'Submit', props: { action: 'submit' } }),
+            },
+        ],
+    },
+];
+
+const EMPTY_SCHEMA = { version: 1, fields: [] };
+const HISTORY_LIMIT = 50;
+/**
+ * `<mform-designer>` — visual authoring of form schemas.
+ *
+ * The designer edits a DOCUMENT (the schema): every change goes through the
+ * core's immutable edit operations, feeding undo/redo and `schemaChanged`.
+ * Persistence, publishing and permissions belong to the host.
+ */
+class FormDesignerComponent {
+    /** Initial native schema to edit. */
+    schema = input$1(null, ...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
+    /** Initial foreign definition (converted through importers). */
+    source = input$1(null, ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+    /** Extra palette groups contributed by the host. */
+    extraCatalog = input$1([], ...(ngDevMode ? [{ debugName: "extraCatalog" }] : /* istanbul ignore next */ []));
+    /** Emitted after every committed edit (undo/redo included). */
+    schemaChanged = output();
+    draft = signal(EMPTY_SCHEMA, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    past = signal([], ...(ngDevMode ? [{ debugName: "past" }] : /* istanbul ignore next */ []));
+    future = signal([], ...(ngDevMode ? [{ debugName: "future" }] : /* istanbul ignore next */ []));
+    selected = signal(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    preview = signal(false, ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
+    previewData = signal({}, ...(ngDevMode ? [{ debugName: "previewData" }] : /* istanbul ignore next */ []));
+    dialog = signal(null, ...(ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []));
+    importError = signal('', ...(ngDevMode ? [{ debugName: "importError" }] : /* istanbul ignore next */ []));
+    showDiagnostics = signal(false, ...(ngDevMode ? [{ debugName: "showDiagnostics" }] : /* istanbul ignore next */ []));
+    catalog = computed(() => [...DEFAULT_CATALOG, ...this.extraCatalog()], ...(ngDevMode ? [{ debugName: "catalog" }] : /* istanbul ignore next */ []));
+    diagnostics = computed(() => validateSchema(this.draft()), ...(ngDevMode ? [{ debugName: "diagnostics" }] : /* istanbul ignore next */ []));
+    exportedJson = computed(() => JSON.stringify(this.draft(), null, 2), ...(ngDevMode ? [{ debugName: "exportedJson" }] : /* istanbul ignore next */ []));
+    /** Disposable engine driving the canvas leaves (defaults visible). */
+    canvasEngine = computed(() => createFormEngine(this.draft()), ...(ngDevMode ? [{ debugName: "canvasEngine" }] : /* istanbul ignore next */ []));
+    selectedNode = computed(() => {
+        const path = this.selected();
+        return path ? (getNodeAt(this.draft(), path) ?? null) : null;
+    }, ...(ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []));
+    /** Flat structure tree for navigation. */
+    tree = computed(() => {
+        const items = [];
+        const visit = (nodes, depth, prefix) => {
+            nodes.forEach((node, i) => {
+                const path = [...prefix, i];
+                items.push({
+                    id: path.join('.'),
+                    label: `${node.label ?? node.key} · ${node.type}`,
+                    depth,
+                    path,
+                });
+                if (node.kind === 'container')
+                    visit(node.children, depth + 1, path);
+            });
+        };
+        visit(this.draft().fields, 0, []);
+        return items;
+    }, ...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // (Re)load the document whenever the host hands a new definition in.
+        effect(() => {
+            const native = this.schema();
+            const source = this.source();
+            // Hosts often feed `schemaChanged` back into [schema] (controlled
+            // usage) — the echo of our own draft must not reset history/selection.
+            if (native && native === this.draft())
+                return;
+            let initial = EMPTY_SCHEMA;
+            if (native) {
+                initial = native;
+            }
+            else if (source !== null && source !== undefined) {
+                try {
+                    initial = importForm(source, [createLegacyImporter()]).schema;
+                }
+                catch {
+                    initial = EMPTY_SCHEMA;
+                }
+            }
+            this.draft.set(initial);
+            this.past.set([]);
+            this.future.set([]);
+            this.selected.set(null);
+        });
+    }
+    // -- document mutation ----------------------------------------------------
+    commit(next) {
+        this.past.update((stack) => [...stack.slice(-(HISTORY_LIMIT - 1)), this.draft()]);
+        this.future.set([]);
+        this.draft.set(next);
+        this.schemaChanged.emit(next);
+    }
+    undo() {
+        const past = this.past();
+        if (past.length === 0)
+            return;
+        this.future.update((stack) => [this.draft(), ...stack]);
+        this.past.set(past.slice(0, -1));
+        this.draft.set(past[past.length - 1]);
+        this.selected.set(null);
+        this.schemaChanged.emit(this.draft());
+    }
+    redo() {
+        const future = this.future();
+        if (future.length === 0)
+            return;
+        this.past.update((stack) => [...stack, this.draft()]);
+        this.future.set(future.slice(1));
+        this.draft.set(future[0]);
+        this.selected.set(null);
+        this.schemaChanged.emit(this.draft());
+    }
+    add(entry) {
+        const node = entry.create(this.draft());
+        const target = this.insertionPath();
+        this.commit(insertNode(this.draft(), target, node));
+        this.select(target);
+    }
+    /** New nodes land inside a selected container, after a selected leaf, or at the end. */
+    insertionPath() {
+        const selected = this.selected();
+        if (!selected)
+            return [this.draft().fields.length];
+        const node = getNodeAt(this.draft(), selected);
+        if (node?.kind === 'container' && node.type !== 'columns') {
+            return [...selected, node.children.length];
+        }
+        const { parent, index } = parentOf(selected);
+        return [...parent, index + 1];
+    }
+    removeSelected() {
+        const selected = this.selected();
+        if (!selected)
+            return;
+        this.commit(removeNode(this.draft(), selected));
+        this.selected.set(null);
+    }
+    duplicateSelected() {
+        const selected = this.selected();
+        if (!selected)
+            return;
+        this.commit(duplicateNode(this.draft(), selected));
+    }
+    moveSelected(delta) {
+        const selected = this.selected();
+        if (!selected)
+            return;
+        const { parent, index } = parentOf(selected);
+        const siblings = parent.length === 0
+            ? this.draft().fields
+            : getNodeAt(this.draft(), parent)?.children ?? [];
+        const target = index + delta;
+        if (target < 0 || target >= siblings.length)
+            return;
+        this.commit(moveNode(this.draft(), selected, [...parent, target]));
+        this.select([...parent, target]);
+    }
+    applyPatch(event) {
+        const selected = this.selected();
+        if (!selected)
+            return;
+        this.commit(updateNode(this.draft(), selected, event.patch));
+    }
+    // -- selection ------------------------------------------------------------
+    select(path) {
+        this.selected.set(path);
+    }
+    isSelectedPath(path) {
+        return this.selected()?.join('.') === path.join('.');
+    }
+    // -- import / export ------------------------------------------------------
+    openExport() {
+        this.dialog.set(this.dialog() === 'export' ? null : 'export');
+    }
+    doImport(raw) {
+        try {
+            const parsed = JSON.parse(raw);
+            const { schema } = importForm(parsed, [createLegacyImporter()]);
+            this.commit(schema);
+            this.selected.set(null);
+            this.dialog.set(null);
+            this.importError.set('');
+        }
+        catch (error) {
+            this.importError.set('Could not import: ' + String(error));
+        }
+    }
+    // -- keyboard -------------------------------------------------------------
+    onKeydown(event) {
+        const target = event.target;
+        if (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName))
+            return;
+        const key = event.key.toLowerCase();
+        if (event.ctrlKey && key === 'z' && !event.shiftKey) {
+            event.preventDefault();
+            this.undo();
+        }
+        else if ((event.ctrlKey && key === 'y') || (event.ctrlKey && event.shiftKey && key === 'z')) {
+            event.preventDefault();
+            this.redo();
+        }
+        else if (event.ctrlKey && key === 'd') {
+            event.preventDefault();
+            this.duplicateSelected();
+        }
+        else if (key === 'delete') {
+            event.preventDefault();
+            this.removeSelected();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FormDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FormDesignerComponent, isStandalone: true, selector: "mform-designer", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, extraCatalog: { classPropertyName: "extraCatalog", publicName: "extraCatalog", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schemaChanged: "schemaChanged" }, ngImport: i0, template: `
+    <div class="dz-shell" (keydown)="onKeydown($event)">
+      <header class="dz-toolbar">
+        <div class="dz-tools">
+          <button type="button" (click)="undo()" [disabled]="past().length === 0" title="Undo (Ctrl+Z)">↶</button>
+          <button type="button" (click)="redo()" [disabled]="future().length === 0" title="Redo (Ctrl+Y)">↷</button>
+          <span class="dz-sep"></span>
+          <button type="button" (click)="moveSelected(-1)" [disabled]="!selected()" title="Move up">↑</button>
+          <button type="button" (click)="moveSelected(1)" [disabled]="!selected()" title="Move down">↓</button>
+          <button type="button" (click)="duplicateSelected()" [disabled]="!selected()" title="Duplicate (Ctrl+D)">⧉</button>
+          <button type="button" (click)="removeSelected()" [disabled]="!selected()" title="Delete (Del)">🗑</button>
+        </div>
+        <div class="dz-tools">
+          @if (diagnostics().length > 0) {
+            <button type="button" class="dz-diag-badge" (click)="showDiagnostics.set(!showDiagnostics())">
+              ⚠ {{ diagnostics().length }}
+            </button>
+          }
+          <button type="button" (click)="dialog.set(dialog() === 'import' ? null : 'import')">Import</button>
+          <button type="button" (click)="openExport()">Export</button>
+          <button type="button" class="dz-primary" (click)="preview.set(!preview())">
+            {{ preview() ? 'Design' : 'Preview' }}
+          </button>
+        </div>
+      </header>
+
+      @if (showDiagnostics() && diagnostics().length > 0) {
+        <div class="dz-diagnostics" role="alert">
+          @for (diag of diagnostics(); track $index) {
+            <div class="dz-diag" [class.is-warning]="diag.severity === 'warning'">
+              <code>{{ diag.code }}</code> {{ diag.message }} <em>{{ diag.path }}</em>
+            </div>
+          }
+        </div>
+      }
+
+      @if (dialog() === 'export') {
+        <div class="dz-dialog">
+          <h4>Schema JSON</h4>
+          <textarea readonly rows="12">{{ exportedJson() }}</textarea>
+          <div class="dz-dialog-actions">
+            <button type="button" (click)="dialog.set(null)">Close</button>
+          </div>
+        </div>
+      }
+      @if (dialog() === 'import') {
+        <div class="dz-dialog">
+          <h4>Import definition (native schema or supported formats)</h4>
+          <textarea rows="12" #importArea placeholder='{"version":1,"fields":[…]} or a legacy definition'></textarea>
+          @if (importError()) {
+            <p class="dz-import-error" role="alert">{{ importError() }}</p>
+          }
+          <div class="dz-dialog-actions">
+            <button type="button" (click)="dialog.set(null)">Cancel</button>
+            <button type="button" class="dz-primary" (click)="doImport(importArea.value)">Import</button>
+          </div>
+        </div>
+      }
+
+      @if (preview()) {
+        <div class="dz-preview">
+          <mform-renderer [schema]="draft()" (valueChanged)="previewData.set($event)" />
+          <details class="dz-preview-data">
+            <summary>Test data</summary>
+            <pre>{{ previewData() | json }}</pre>
+          </details>
+        </div>
+      } @else {
+        <div class="dz-body">
+          <aside class="dz-palette">
+            <h4>Fields</h4>
+            @for (group of catalog(); track group.label) {
+              <div class="dz-group">
+                <span class="dz-group-label">{{ group.label }}</span>
+                <div class="dz-group-entries">
+                  @for (entry of group.entries; track entry.type) {
+                    <button type="button" class="dz-palette-item" (click)="add(entry)"
+                      [title]="'Add ' + entry.label">
+                      <span class="dz-icon">{{ entry.icon }}</span>{{ entry.label }}
+                    </button>
+                  }
+                </div>
+              </div>
+            }
+            <h4>Structure</h4>
+            <div class="dz-tree" role="tree">
+              @for (item of tree(); track item.id) {
+                <button
+                  type="button"
+                  role="treeitem"
+                  class="dz-tree-item"
+                  [class.is-selected]="isSelectedPath(item.path)"
+                  [style.padding-left.px]="8 + item.depth * 14"
+                  (click)="select(item.path)"
+                >
+                  {{ item.label }}
+                </button>
+              } @empty {
+                <span class="dz-empty">no fields yet</span>
+              }
+            </div>
+          </aside>
+
+          <main class="dz-canvas" (click)="select(null)">
+            @for (node of draft().fields; track node.key; let i = $index) {
+              <mform-designer-node
+                [node]="node"
+                [path]="[i]"
+                [engine]="canvasEngine()"
+                [selected]="selected()"
+                (selectNode)="select($event)"
+              />
+            } @empty {
+              <div class="dz-canvas-empty">
+                Click a field in the palette to start building.
+              </div>
+            }
+          </main>
+
+          <aside class="dz-props">
+            @if (selectedNode(); as node) {
+              <mform-inspector
+                [node]="node"
+                [schema]="draft()"
+                (nodePatch)="applyPatch($event)"
+              />
+            } @else {
+              <div class="dz-empty dz-props-empty">Select a field to edit its properties.</div>
+            }
+          </aside>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".dz-shell{display:flex;flex-direction:column;height:100%;min-height:480px;font-family:var(--mform-font, system-ui, \"Segoe UI\", sans-serif);color:var(--mform-text, #1f1b2e);background:var(--mform-bg, #f6f5fa);border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);overflow:hidden}.dz-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;background:var(--mform-surface, #fff);border-bottom:1px solid var(--mform-border, #d9d5e6)}.dz-tools{display:flex;align-items:center;gap:6px}.dz-toolbar button{font:inherit;font-size:13px;padding:6px 10px;border:1px solid transparent;border-radius:8px;background:none;color:inherit;cursor:pointer}.dz-toolbar button:hover:not(:disabled){background:var(--mform-bg, #f6f5fa)}.dz-toolbar button:disabled{opacity:.35;cursor:default}.dz-toolbar .dz-primary{background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff)}.dz-sep{width:1px;height:18px;background:var(--mform-border, #d9d5e6)}.dz-diag-badge{color:#b45309;font-weight:600}.dz-diagnostics{max-height:140px;overflow-y:auto;padding:8px 14px;background:#fdf5ef;border-bottom:1px solid var(--mform-border, #d9d5e6);font-size:12px}.dz-diag{padding:2px 0;color:#9a3412}.dz-diag.is-warning{color:#92400e}.dz-diag code{font-weight:600;margin-right:6px}.dz-diag em{color:var(--mform-muted, #6b6580);margin-left:6px}.dz-dialog{padding:14px;background:var(--mform-surface, #fff);border-bottom:1px solid var(--mform-border, #d9d5e6)}.dz-dialog h4{margin:0 0 8px;font-size:13px}.dz-dialog textarea{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:12px;border:1px solid var(--mform-border, #d9d5e6);border-radius:8px;padding:10px;box-sizing:border-box;resize:vertical}.dz-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.dz-dialog-actions button{font:inherit;font-size:13px;padding:7px 14px;border:1px solid var(--mform-border, #d9d5e6);border-radius:8px;background:none;cursor:pointer}.dz-dialog-actions .dz-primary{background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff);border-color:transparent}.dz-import-error{color:var(--mform-danger, #c62842);font-size:12px}.dz-body{display:grid;grid-template-columns:240px 1fr 280px;flex:1;min-height:0}.dz-palette{border-right:1px solid var(--mform-border, #d9d5e6);background:var(--mform-surface, #fff);padding:12px;overflow-y:auto}.dz-palette h4{margin:4px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mform-muted, #6b6580)}.dz-group{margin-bottom:10px}.dz-group-label{font-size:11px;color:var(--mform-muted, #6b6580)}.dz-group-entries{display:flex;flex-direction:column;gap:2px;margin-top:4px}.dz-palette-item{display:flex;align-items:center;gap:8px;font:inherit;font-size:13px;text-align:left;padding:6px 8px;border:none;border-radius:8px;background:none;color:inherit;cursor:pointer}.dz-palette-item:hover{background:var(--mform-bg, #f6f5fa)}.dz-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--mform-border, #d9d5e6);border-radius:6px;font-size:11px}.dz-tree{display:flex;flex-direction:column;gap:1px}.dz-tree-item{font:inherit;font-size:12px;text-align:left;padding:4px 8px;border:none;border-radius:6px;background:none;color:inherit;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dz-tree-item:hover{background:var(--mform-bg, #f6f5fa)}.dz-tree-item.is-selected{background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff)}.dz-canvas{padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.dz-canvas-empty,.dz-empty{color:var(--mform-muted, #6b6580);font-size:13px;border:1px dashed var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);padding:18px;text-align:center}.dz-node{position:relative;border:1px solid transparent;border-radius:var(--mform-radius, 10px);padding:20px 10px 10px;cursor:pointer;background:var(--mform-surface, #fff)}.dz-node:hover{border-color:var(--mform-border, #d9d5e6)}.dz-node.is-selected{border-color:var(--mform-primary, #6d4bd0);box-shadow:0 0 0 1px var(--mform-primary, #6d4bd0)}.dz-chip{position:absolute;top:2px;left:10px;font-size:10px;color:var(--mform-muted, #6b6580);pointer-events:none}.dz-node.is-selected>.dz-chip{color:var(--mform-primary, #6d4bd0);font-weight:600}.dz-children{display:flex;flex-direction:column;gap:8px}.dz-columns{display:grid;gap:10px}.dz-column{display:flex;flex-direction:column;gap:8px;border:1px dashed var(--mform-border, #d9d5e6);border-radius:8px;padding:8px;min-height:40px}.dz-tabbar{display:flex;gap:4px;margin-bottom:8px;border-bottom:2px solid var(--mform-border, #d9d5e6)}.dz-tab{font:inherit;font-size:12px;padding:5px 12px;border:none;background:none;color:var(--mform-muted, #6b6580);cursor:pointer}.dz-tab.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600;border-bottom:2px solid var(--mform-primary, #6d4bd0);margin-bottom:-2px}.dz-leaf{pointer-events:none}.dz-props{border-left:1px solid var(--mform-border, #d9d5e6);background:var(--mform-surface, #fff);overflow-y:auto}.dz-props-empty{margin:12px}.dz-inspector{padding:12px;display:flex;flex-direction:column;gap:10px}.dz-inspector h3{margin:0;font-size:13px}.dz-inspector h3 code{color:var(--mform-muted, #6b6580);font-weight:400}.dz-prop{display:flex;flex-direction:column;gap:4px;font-size:12px}.dz-prop span{color:var(--mform-muted, #6b6580)}.dz-prop input,.dz-prop select,.dz-prop textarea{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--mform-border, #d9d5e6);border-radius:8px;background:#fff;width:100%;box-sizing:border-box}.dz-check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}.dz-check input{accent-color:var(--mform-primary, #6d4bd0)}.dz-section{border-top:1px solid var(--mform-border, #d9d5e6);padding-top:8px}.dz-section summary{font-size:12px;font-weight:600;cursor:pointer;margin-bottom:8px}.dz-section .dz-prop{margin-bottom:8px}.dz-option-row{display:flex;gap:6px;margin-bottom:6px}.dz-option-row input{flex:1;min-width:0;font-size:12px;padding:6px 8px;border:1px solid var(--mform-border, #d9d5e6);border-radius:6px}.dz-option-row button{border:none;background:none;cursor:pointer;color:var(--mform-muted, #6b6580)}.dz-add{font:inherit;font-size:12px;border:1px dashed var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0);background:none;border-radius:8px;padding:6px 10px;cursor:pointer}.dz-preview{padding:20px;overflow-y:auto}.dz-preview-data{margin-top:16px;font-size:12px}.dz-preview-data pre{background:var(--mform-surface, #fff);border:1px solid var(--mform-border, #d9d5e6);border-radius:8px;padding:10px;overflow-x:auto}\n"], dependencies: [{ kind: "component", type: DesignerNodeComponent, selector: "mform-designer-node", inputs: ["node", "path", "engine", "selected"], outputs: ["selectNode"] }, { kind: "component", type: InspectorComponent, selector: "mform-inspector", inputs: ["node", "schema"], outputs: ["nodePatch"] }, { kind: "component", type: FormRendererComponent, selector: "mform-renderer", inputs: ["schema", "source", "initialData", "optionsProviders", "messages", "validators", "mode", "submitHandler", "labels"], outputs: ["submitted", "valueChanged"] }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FormDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mform-designer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [DesignerNodeComponent, InspectorComponent, FormRendererComponent, JsonPipe], template: `
+    <div class="dz-shell" (keydown)="onKeydown($event)">
+      <header class="dz-toolbar">
+        <div class="dz-tools">
+          <button type="button" (click)="undo()" [disabled]="past().length === 0" title="Undo (Ctrl+Z)">↶</button>
+          <button type="button" (click)="redo()" [disabled]="future().length === 0" title="Redo (Ctrl+Y)">↷</button>
+          <span class="dz-sep"></span>
+          <button type="button" (click)="moveSelected(-1)" [disabled]="!selected()" title="Move up">↑</button>
+          <button type="button" (click)="moveSelected(1)" [disabled]="!selected()" title="Move down">↓</button>
+          <button type="button" (click)="duplicateSelected()" [disabled]="!selected()" title="Duplicate (Ctrl+D)">⧉</button>
+          <button type="button" (click)="removeSelected()" [disabled]="!selected()" title="Delete (Del)">🗑</button>
+        </div>
+        <div class="dz-tools">
+          @if (diagnostics().length > 0) {
+            <button type="button" class="dz-diag-badge" (click)="showDiagnostics.set(!showDiagnostics())">
+              ⚠ {{ diagnostics().length }}
+            </button>
+          }
+          <button type="button" (click)="dialog.set(dialog() === 'import' ? null : 'import')">Import</button>
+          <button type="button" (click)="openExport()">Export</button>
+          <button type="button" class="dz-primary" (click)="preview.set(!preview())">
+            {{ preview() ? 'Design' : 'Preview' }}
+          </button>
+        </div>
+      </header>
+
+      @if (showDiagnostics() && diagnostics().length > 0) {
+        <div class="dz-diagnostics" role="alert">
+          @for (diag of diagnostics(); track $index) {
+            <div class="dz-diag" [class.is-warning]="diag.severity === 'warning'">
+              <code>{{ diag.code }}</code> {{ diag.message }} <em>{{ diag.path }}</em>
+            </div>
+          }
+        </div>
+      }
+
+      @if (dialog() === 'export') {
+        <div class="dz-dialog">
+          <h4>Schema JSON</h4>
+          <textarea readonly rows="12">{{ exportedJson() }}</textarea>
+          <div class="dz-dialog-actions">
+            <button type="button" (click)="dialog.set(null)">Close</button>
+          </div>
+        </div>
+      }
+      @if (dialog() === 'import') {
+        <div class="dz-dialog">
+          <h4>Import definition (native schema or supported formats)</h4>
+          <textarea rows="12" #importArea placeholder='{"version":1,"fields":[…]} or a legacy definition'></textarea>
+          @if (importError()) {
+            <p class="dz-import-error" role="alert">{{ importError() }}</p>
+          }
+          <div class="dz-dialog-actions">
+            <button type="button" (click)="dialog.set(null)">Cancel</button>
+            <button type="button" class="dz-primary" (click)="doImport(importArea.value)">Import</button>
+          </div>
+        </div>
+      }
+
+      @if (preview()) {
+        <div class="dz-preview">
+          <mform-renderer [schema]="draft()" (valueChanged)="previewData.set($event)" />
+          <details class="dz-preview-data">
+            <summary>Test data</summary>
+            <pre>{{ previewData() | json }}</pre>
+          </details>
+        </div>
+      } @else {
+        <div class="dz-body">
+          <aside class="dz-palette">
+            <h4>Fields</h4>
+            @for (group of catalog(); track group.label) {
+              <div class="dz-group">
+                <span class="dz-group-label">{{ group.label }}</span>
+                <div class="dz-group-entries">
+                  @for (entry of group.entries; track entry.type) {
+                    <button type="button" class="dz-palette-item" (click)="add(entry)"
+                      [title]="'Add ' + entry.label">
+                      <span class="dz-icon">{{ entry.icon }}</span>{{ entry.label }}
+                    </button>
+                  }
+                </div>
+              </div>
+            }
+            <h4>Structure</h4>
+            <div class="dz-tree" role="tree">
+              @for (item of tree(); track item.id) {
+                <button
+                  type="button"
+                  role="treeitem"
+                  class="dz-tree-item"
+                  [class.is-selected]="isSelectedPath(item.path)"
+                  [style.padding-left.px]="8 + item.depth * 14"
+                  (click)="select(item.path)"
+                >
+                  {{ item.label }}
+                </button>
+              } @empty {
+                <span class="dz-empty">no fields yet</span>
+              }
+            </div>
+          </aside>
+
+          <main class="dz-canvas" (click)="select(null)">
+            @for (node of draft().fields; track node.key; let i = $index) {
+              <mform-designer-node
+                [node]="node"
+                [path]="[i]"
+                [engine]="canvasEngine()"
+                [selected]="selected()"
+                (selectNode)="select($event)"
+              />
+            } @empty {
+              <div class="dz-canvas-empty">
+                Click a field in the palette to start building.
+              </div>
+            }
+          </main>
+
+          <aside class="dz-props">
+            @if (selectedNode(); as node) {
+              <mform-inspector
+                [node]="node"
+                [schema]="draft()"
+                (nodePatch)="applyPatch($event)"
+              />
+            } @else {
+              <div class="dz-empty dz-props-empty">Select a field to edit its properties.</div>
+            }
+          </aside>
+        </div>
+      }
+    </div>
+  `, styles: [".dz-shell{display:flex;flex-direction:column;height:100%;min-height:480px;font-family:var(--mform-font, system-ui, \"Segoe UI\", sans-serif);color:var(--mform-text, #1f1b2e);background:var(--mform-bg, #f6f5fa);border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);overflow:hidden}.dz-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;background:var(--mform-surface, #fff);border-bottom:1px solid var(--mform-border, #d9d5e6)}.dz-tools{display:flex;align-items:center;gap:6px}.dz-toolbar button{font:inherit;font-size:13px;padding:6px 10px;border:1px solid transparent;border-radius:8px;background:none;color:inherit;cursor:pointer}.dz-toolbar button:hover:not(:disabled){background:var(--mform-bg, #f6f5fa)}.dz-toolbar button:disabled{opacity:.35;cursor:default}.dz-toolbar .dz-primary{background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff)}.dz-sep{width:1px;height:18px;background:var(--mform-border, #d9d5e6)}.dz-diag-badge{color:#b45309;font-weight:600}.dz-diagnostics{max-height:140px;overflow-y:auto;padding:8px 14px;background:#fdf5ef;border-bottom:1px solid var(--mform-border, #d9d5e6);font-size:12px}.dz-diag{padding:2px 0;color:#9a3412}.dz-diag.is-warning{color:#92400e}.dz-diag code{font-weight:600;margin-right:6px}.dz-diag em{color:var(--mform-muted, #6b6580);margin-left:6px}.dz-dialog{padding:14px;background:var(--mform-surface, #fff);border-bottom:1px solid var(--mform-border, #d9d5e6)}.dz-dialog h4{margin:0 0 8px;font-size:13px}.dz-dialog textarea{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:12px;border:1px solid var(--mform-border, #d9d5e6);border-radius:8px;padding:10px;box-sizing:border-box;resize:vertical}.dz-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.dz-dialog-actions button{font:inherit;font-size:13px;padding:7px 14px;border:1px solid var(--mform-border, #d9d5e6);border-radius:8px;background:none;cursor:pointer}.dz-dialog-actions .dz-primary{background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff);border-color:transparent}.dz-import-error{color:var(--mform-danger, #c62842);font-size:12px}.dz-body{display:grid;grid-template-columns:240px 1fr 280px;flex:1;min-height:0}.dz-palette{border-right:1px solid var(--mform-border, #d9d5e6);background:var(--mform-surface, #fff);padding:12px;overflow-y:auto}.dz-palette h4{margin:4px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mform-muted, #6b6580)}.dz-group{margin-bottom:10px}.dz-group-label{font-size:11px;color:var(--mform-muted, #6b6580)}.dz-group-entries{display:flex;flex-direction:column;gap:2px;margin-top:4px}.dz-palette-item{display:flex;align-items:center;gap:8px;font:inherit;font-size:13px;text-align:left;padding:6px 8px;border:none;border-radius:8px;background:none;color:inherit;cursor:pointer}.dz-palette-item:hover{background:var(--mform-bg, #f6f5fa)}.dz-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--mform-border, #d9d5e6);border-radius:6px;font-size:11px}.dz-tree{display:flex;flex-direction:column;gap:1px}.dz-tree-item{font:inherit;font-size:12px;text-align:left;padding:4px 8px;border:none;border-radius:6px;background:none;color:inherit;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dz-tree-item:hover{background:var(--mform-bg, #f6f5fa)}.dz-tree-item.is-selected{background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff)}.dz-canvas{padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.dz-canvas-empty,.dz-empty{color:var(--mform-muted, #6b6580);font-size:13px;border:1px dashed var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);padding:18px;text-align:center}.dz-node{position:relative;border:1px solid transparent;border-radius:var(--mform-radius, 10px);padding:20px 10px 10px;cursor:pointer;background:var(--mform-surface, #fff)}.dz-node:hover{border-color:var(--mform-border, #d9d5e6)}.dz-node.is-selected{border-color:var(--mform-primary, #6d4bd0);box-shadow:0 0 0 1px var(--mform-primary, #6d4bd0)}.dz-chip{position:absolute;top:2px;left:10px;font-size:10px;color:var(--mform-muted, #6b6580);pointer-events:none}.dz-node.is-selected>.dz-chip{color:var(--mform-primary, #6d4bd0);font-weight:600}.dz-children{display:flex;flex-direction:column;gap:8px}.dz-columns{display:grid;gap:10px}.dz-column{display:flex;flex-direction:column;gap:8px;border:1px dashed var(--mform-border, #d9d5e6);border-radius:8px;padding:8px;min-height:40px}.dz-tabbar{display:flex;gap:4px;margin-bottom:8px;border-bottom:2px solid var(--mform-border, #d9d5e6)}.dz-tab{font:inherit;font-size:12px;padding:5px 12px;border:none;background:none;color:var(--mform-muted, #6b6580);cursor:pointer}.dz-tab.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600;border-bottom:2px solid var(--mform-primary, #6d4bd0);margin-bottom:-2px}.dz-leaf{pointer-events:none}.dz-props{border-left:1px solid var(--mform-border, #d9d5e6);background:var(--mform-surface, #fff);overflow-y:auto}.dz-props-empty{margin:12px}.dz-inspector{padding:12px;display:flex;flex-direction:column;gap:10px}.dz-inspector h3{margin:0;font-size:13px}.dz-inspector h3 code{color:var(--mform-muted, #6b6580);font-weight:400}.dz-prop{display:flex;flex-direction:column;gap:4px;font-size:12px}.dz-prop span{color:var(--mform-muted, #6b6580)}.dz-prop input,.dz-prop select,.dz-prop textarea{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--mform-border, #d9d5e6);border-radius:8px;background:#fff;width:100%;box-sizing:border-box}.dz-check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}.dz-check input{accent-color:var(--mform-primary, #6d4bd0)}.dz-section{border-top:1px solid var(--mform-border, #d9d5e6);padding-top:8px}.dz-section summary{font-size:12px;font-weight:600;cursor:pointer;margin-bottom:8px}.dz-section .dz-prop{margin-bottom:8px}.dz-option-row{display:flex;gap:6px;margin-bottom:6px}.dz-option-row input{flex:1;min-width:0;font-size:12px;padding:6px 8px;border:1px solid var(--mform-border, #d9d5e6);border-radius:6px}.dz-option-row button{border:none;background:none;cursor:pointer;color:var(--mform-muted, #6b6580)}.dz-add{font:inherit;font-size:12px;border:1px dashed var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0);background:none;border-radius:8px;padding:6px 10px;cursor:pointer}.dz-preview{padding:20px;overflow-y:auto}.dz-preview-data{margin-top:16px;font-size:12px}.dz-preview-data pre{background:var(--mform-surface, #fff);border:1px solid var(--mform-border, #d9d5e6);border-radius:8px;padding:10px;overflow-x:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], extraCatalog: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraCatalog", required: false }] }], schemaChanged: [{ type: i0.Output, args: ["schemaChanged"] }] } });
+
+/*
+ * Designer entry point (`@mosaicoo/form-angular/designer`).
+ *
+ * Authoring lives behind this secondary entry so applications that only
+ * RENDER forms never load designer code — required for federated hosts and
+ * lazy loading.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_CATALOG, DesignerNodeComponent, FormDesignerComponent, InspectorComponent };
+//# sourceMappingURL=mosaicoo-form-angular-designer.mjs.map