@mosaicoo/form-angular 0.5.0 → 0.7.0

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

@@ -1,6 +1,6 @@
 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 { input as input$1, output, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, computed, effect, untracked } from '@angular/core';
+import { NgTemplateOutlet, 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';
@@ -403,6 +403,99 @@ class InspectorComponent {
         const mask = this.inputValue(event).trim();
         this.emitPatch({ format: mask === '' ? undefined : { mask } });
     }
+    patchMultiple(event) {
+        const checked = event.target.checked;
+        this.emitPatch({
+            multiple: checked ? true : undefined,
+            dataType: checked ? 'array' : 'string',
+        });
+    }
+    // -- options source -------------------------------------------------------
+    sourceKind() {
+        return this.field().optionsSource?.type ?? '';
+    }
+    providerName() {
+        const source = this.field().optionsSource;
+        return source?.type === 'provider' ? source.name : '';
+    }
+    remoteUrl() {
+        const source = this.field().optionsSource;
+        return source?.type === 'remote' ? source.url : '';
+    }
+    refreshOn() {
+        return this.field().optionsSource?.refreshOn ?? '';
+    }
+    patchSourceKind(event) {
+        const kind = this.inputValue(event);
+        if (kind === 'provider') {
+            this.emitPatch({
+                optionsSource: { type: 'provider', name: this.providerName() || this.field().key },
+            });
+        }
+        else if (kind === 'remote') {
+            this.emitPatch({
+                optionsSource: { type: 'remote', url: this.remoteUrl() },
+            });
+        }
+        else {
+            this.emitPatch({ optionsSource: undefined });
+        }
+    }
+    patchProviderName(event) {
+        const name = this.inputValue(event).trim();
+        if (name === '')
+            return;
+        this.emitPatch({
+            optionsSource: { ...this.field().optionsSource, type: 'provider', name },
+        });
+    }
+    patchRemoteUrl(event) {
+        const url = this.inputValue(event).trim();
+        this.emitPatch({
+            optionsSource: { ...this.field().optionsSource, type: 'remote', url },
+        });
+    }
+    patchRefreshOn(event) {
+        const source = this.field().optionsSource;
+        if (!source)
+            return;
+        const refreshOn = this.inputValue(event).trim();
+        const next = { ...source };
+        if (refreshOn === '')
+            delete next.refreshOn;
+        else
+            next.refreshOn = refreshOn;
+        this.emitPatch({ optionsSource: next });
+    }
+    // -- props (type-specific settings for custom components) -----------------
+    propsError = signal('', ...(ngDevMode ? [{ debugName: "propsError" }] : /* istanbul ignore next */ []));
+    hasProps() {
+        return Object.keys(this.node().props ?? {}).length > 0;
+    }
+    propsText() {
+        const props = this.node().props;
+        return props && Object.keys(props).length > 0 ? JSON.stringify(props, null, 2) : '';
+    }
+    patchProps(event) {
+        const raw = this.inputValue(event).trim();
+        if (raw === '') {
+            this.propsError.set('');
+            this.emitPatch({ props: undefined });
+            return;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+                this.propsError.set('Props must be a JSON object.');
+                return;
+            }
+            this.propsError.set('');
+            this.emitPatch({ props: parsed });
+        }
+        catch (error) {
+            this.propsError.set('Invalid JSON: ' + String(error instanceof Error ? error.message : error));
+        }
+    }
     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();
@@ -538,8 +631,60 @@ class InspectorComponent {
               (change)="patchMask($event)"
             />
           </label>
+          <label class="dz-check">
+            <input type="checkbox" [checked]="field().multiple === true" (change)="patchMultiple($event)" />
+            <span>Multiple values</span>
+          </label>
+        </details>
+
+        <details class="dz-section">
+          <summary>Options source</summary>
+          <label class="dz-prop">
+            <span>Source</span>
+            <select [value]="sourceKind()" (change)="patchSourceKind($event)">
+              <option value="">Static list</option>
+              <option value="provider" [selected]="sourceKind() === 'provider'">Host provider</option>
+              <option value="remote" [selected]="sourceKind() === 'remote'">Remote URL</option>
+            </select>
+          </label>
+          @if (sourceKind() === 'provider') {
+            <label class="dz-prop">
+              <span>Provider name</span>
+              <input type="text" [value]="providerName()" (change)="patchProviderName($event)" />
+            </label>
+          }
+          @if (sourceKind() === 'remote') {
+            <label class="dz-prop">
+              <span>URL</span>
+              <input type="text" [value]="remoteUrl()" (change)="patchRemoteUrl($event)" />
+            </label>
+          }
+          @if (sourceKind()) {
+            <label class="dz-prop">
+              <span>Refresh on (field path or "data")</span>
+              <input type="text" [value]="refreshOn()" (change)="patchRefreshOn($event)" />
+            </label>
+          }
         </details>
       }
+
+      <!-- Type-specific configuration for CUSTOM components: the host reads
+           these from field.props (e.g. a board's columns, a chart's series). -->
+      <details class="dz-section" [open]="hasProps()">
+        <summary>Type settings (props)</summary>
+        <label class="dz-prop">
+          <span>JSON passed to the field component</span>
+          <textarea
+            rows="5"
+            spellcheck="false"
+            [value]="propsText()"
+            (change)="patchProps($event)"
+          ></textarea>
+        </label>
+        @if (propsError()) {
+          <p class="dz-import-error" role="alert">{{ propsError() }}</p>
+        }
+      </details>
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -683,8 +828,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
               (change)="patchMask($event)"
             />
           </label>
+          <label class="dz-check">
+            <input type="checkbox" [checked]="field().multiple === true" (change)="patchMultiple($event)" />
+            <span>Multiple values</span>
+          </label>
+        </details>
+
+        <details class="dz-section">
+          <summary>Options source</summary>
+          <label class="dz-prop">
+            <span>Source</span>
+            <select [value]="sourceKind()" (change)="patchSourceKind($event)">
+              <option value="">Static list</option>
+              <option value="provider" [selected]="sourceKind() === 'provider'">Host provider</option>
+              <option value="remote" [selected]="sourceKind() === 'remote'">Remote URL</option>
+            </select>
+          </label>
+          @if (sourceKind() === 'provider') {
+            <label class="dz-prop">
+              <span>Provider name</span>
+              <input type="text" [value]="providerName()" (change)="patchProviderName($event)" />
+            </label>
+          }
+          @if (sourceKind() === 'remote') {
+            <label class="dz-prop">
+              <span>URL</span>
+              <input type="text" [value]="remoteUrl()" (change)="patchRemoteUrl($event)" />
+            </label>
+          }
+          @if (sourceKind()) {
+            <label class="dz-prop">
+              <span>Refresh on (field path or "data")</span>
+              <input type="text" [value]="refreshOn()" (change)="patchRefreshOn($event)" />
+            </label>
+          }
         </details>
       }
+
+      <!-- Type-specific configuration for CUSTOM components: the host reads
+           these from field.props (e.g. a board's columns, a chart's series). -->
+      <details class="dz-section" [open]="hasProps()">
+        <summary>Type settings (props)</summary>
+        <label class="dz-prop">
+          <span>JSON passed to the field component</span>
+          <textarea
+            rows="5"
+            spellcheck="false"
+            [value]="propsText()"
+            (change)="patchProps($event)"
+          ></textarea>
+        </label>
+        @if (propsError()) {
+          <p class="dz-import-error" role="alert">{{ propsError() }}</p>
+        }
+      </details>
     </div>
   `,
                 }]
@@ -779,6 +976,16 @@ const DEFAULT_CATALOG = [
                         ] };
                 },
             },
+            {
+                type: 'accordion', label: 'Accordion', icon: '☰',
+                create: (s) => {
+                    const key = generateKey(s, 'accordion');
+                    return { kind: 'container', key, type: 'accordion', dataScope: 'inherit', children: [
+                            { kind: 'container', key: `${key}-section-1`, type: 'panel', dataScope: 'inherit', label: 'Section 1', children: [] },
+                            { kind: 'container', key: `${key}-section-2`, type: 'panel', dataScope: 'inherit', label: 'Section 2', children: [] },
+                        ] };
+                },
+            },
             {
                 type: 'group', label: 'Data group', icon: '⧈',
                 create: (s) => ({ kind: 'container', key: generateKey(s, 'group'), type: 'group',
@@ -808,8 +1015,124 @@ const DEFAULT_CATALOG = [
     },
 ];
 
+const STORAGE_KEY$1 = 'mform-designer-blocks';
+function loadBlocks(storage) {
+    if (!storage)
+        return [];
+    try {
+        const raw = storage.getItem(STORAGE_KEY$1);
+        const parsed = raw ? JSON.parse(raw) : [];
+        return Array.isArray(parsed) ? parsed : [];
+    }
+    catch {
+        return [];
+    }
+}
+function saveBlocks(storage, blocks) {
+    try {
+        storage?.setItem(STORAGE_KEY$1, JSON.stringify(blocks));
+    }
+    catch {
+        /* storage unavailable — blocks stay in memory for this session */
+    }
+}
+
+/**
+ * Designer workspace layout.
+ *
+ * Panels are dockable like in professional tools: each one can sit on the
+ * left, on the right, or be hidden — the canvas always keeps the center. The
+ * arrangement is a plain serializable object so hosts can persist it per user
+ * (the designer also remembers it locally by default).
+ */
+const DEFAULT_LAYOUT = {
+    palette: 'left',
+    structure: 'left',
+    properties: 'right',
+    leftWidth: 240,
+    rightWidth: 280,
+};
+/** Ready-made arrangements offered in the workspace menu. */
+const WORKSPACE_PRESETS = [
+    { id: 'default', label: 'Default (fields left, properties right)', layout: DEFAULT_LAYOUT },
+    {
+        id: 'authoring',
+        label: 'Authoring (everything left)',
+        layout: { ...DEFAULT_LAYOUT, properties: 'left', leftWidth: 300 },
+    },
+    {
+        id: 'inspect',
+        label: 'Inspect (structure + properties right)',
+        layout: { ...DEFAULT_LAYOUT, structure: 'right', properties: 'right', rightWidth: 320 },
+    },
+    {
+        id: 'canvas',
+        label: 'Canvas only (panels hidden)',
+        layout: { ...DEFAULT_LAYOUT, palette: 'hidden', structure: 'hidden', properties: 'hidden' },
+    },
+];
+const PANEL_LABELS = {
+    palette: 'Fields',
+    structure: 'Structure',
+    properties: 'Properties',
+};
+const STORAGE_KEY = 'mform-designer-layout';
+function loadLayout(storage) {
+    if (!storage)
+        return DEFAULT_LAYOUT;
+    try {
+        const raw = storage.getItem(STORAGE_KEY);
+        if (!raw)
+            return DEFAULT_LAYOUT;
+        const parsed = JSON.parse(raw);
+        return { ...DEFAULT_LAYOUT, ...parsed };
+    }
+    catch {
+        return DEFAULT_LAYOUT;
+    }
+}
+function saveLayout(storage, layout) {
+    try {
+        storage?.setItem(STORAGE_KEY, JSON.stringify(layout));
+    }
+    catch {
+        /* storage unavailable (private mode, SSR) — layout stays in memory */
+    }
+}
+
 const EMPTY_SCHEMA = { version: 1, fields: [] };
 const HISTORY_LIMIT = 50;
+/** True when `target` is `from` itself or somewhere inside it. */
+function isSameOrInside(from, target) {
+    return from.every((segment, index) => target[index] === segment);
+}
+/**
+ * A move removes before it inserts: when the source sits before the target
+ * under the same parent, every index after it shifts down by one.
+ */
+function adjustAfterRemoval(from, target) {
+    const parentDepth = from.length - 1;
+    const sameParent = from.slice(0, parentDepth).every((s, i) => target[i] === s);
+    if (!sameParent || target.length < from.length)
+        return target;
+    const adjusted = [...target];
+    const fromIndex = from[parentDepth];
+    const targetIndex = adjusted[parentDepth];
+    if (targetIndex > fromIndex)
+        adjusted[parentDepth] = targetIndex - 1;
+    return adjusted;
+}
+/** Deep copy of a block with fresh keys, so it can be inserted repeatedly. */
+function rekeyBlock(node, schema) {
+    const copy = JSON.parse(JSON.stringify(node));
+    const assign = (target) => {
+        target.key = generateKey(schema, target.key);
+        if (target.kind === 'container')
+            target.children.forEach(assign);
+    };
+    assign(copy);
+    return copy;
+}
 /**
  * `<mform-designer>` — visual authoring of form schemas.
  *
@@ -835,7 +1158,93 @@ class FormDesignerComponent {
     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 */ []));
+    // -- workspace ------------------------------------------------------------
+    /** Panel arrangement; persisted locally unless the host controls it. */
+    layout = signal(DEFAULT_LAYOUT, ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    workspaceMenu = signal(false, ...(ngDevMode ? [{ debugName: "workspaceMenu" }] : /* istanbul ignore next */ []));
+    panelIds = ['palette', 'structure', 'properties'];
+    dockSides = ['left', 'right', 'hidden'];
+    panelLabels = PANEL_LABELS;
+    sideLabels = { left: '⇤', right: '⇥', hidden: '✕' };
+    presets = WORKSPACE_PRESETS;
+    /** Collapsed palette groups (only the first stays open by default). */
+    openGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "openGroups" }] : /* istanbul ignore next */ []));
+    storage = (() => {
+        try {
+            return typeof localStorage === 'undefined' ? null : localStorage;
+        }
+        catch {
+            return null;
+        }
+    })();
+    panelLabel(panel) {
+        return PANEL_LABELS[panel];
+    }
+    panelSide(panel) {
+        return this.layout()[panel];
+    }
+    dockedPanels(side) {
+        const layout = this.layout();
+        return this.panelIds.filter((panel) => layout[panel] === side);
+    }
+    bodyColumns() {
+        const layout = this.layout();
+        const left = this.dockedPanels('left').length > 0 ? `${layout.leftWidth}px ` : '';
+        const right = this.dockedPanels('right').length > 0 ? ` ${layout.rightWidth}px` : '';
+        return `${left}1fr${right}`;
+    }
+    dock(panel, side) {
+        this.layout.update((current) => ({ ...current, [panel]: side }));
+        saveLayout(this.storage, this.layout());
+    }
+    applyPreset(id) {
+        const preset = WORKSPACE_PRESETS.find((p) => p.id === id);
+        if (!preset)
+            return;
+        this.layout.set({ ...preset.layout });
+        saveLayout(this.storage, this.layout());
+        this.workspaceMenu.set(false);
+    }
+    resetLayout() {
+        this.layout.set({ ...DEFAULT_LAYOUT });
+        saveLayout(this.storage, this.layout());
+        this.workspaceMenu.set(false);
+    }
+    isGroupOpen(label) {
+        return this.openGroups().has(label);
+    }
+    toggleGroup(label) {
+        this.openGroups.update((open) => {
+            const next = new Set(open);
+            if (next.has(label))
+                next.delete(label);
+            else
+                next.add(label);
+            return next;
+        });
+    }
+    /** Saved blocks (host-controlled when `[blocks]` is bound). */
+    blocks = input$1(null, ...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
+    blocksChanged = output();
+    localBlocks = signal([], ...(ngDevMode ? [{ debugName: "localBlocks" }] : /* istanbul ignore next */ []));
+    effectiveBlocks = computed(() => this.blocks() ?? this.localBlocks(), ...(ngDevMode ? [{ debugName: "effectiveBlocks" }] : /* istanbul ignore next */ []));
+    /** Palette = built-ins + host extras + saved blocks as a group. */
+    catalog = computed(() => {
+        const groups = [...DEFAULT_CATALOG, ...this.extraCatalog()];
+        const blocks = this.effectiveBlocks();
+        if (blocks.length > 0) {
+            groups.push({
+                label: 'Blocks',
+                entries: blocks.map((block) => ({
+                    type: `block:${block.id}`,
+                    label: block.label,
+                    icon: '⊞',
+                    create: (schema) => rekeyBlock(block.node, schema),
+                })),
+            });
+        }
+        return groups;
+    }, ...(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). */
@@ -864,13 +1273,21 @@ class FormDesignerComponent {
         return items;
     }, ...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
     constructor() {
+        this.layout.set(loadLayout(this.storage));
+        this.localBlocks.set(loadBlocks(this.storage));
+        // First palette group starts expanded; the rest opens on demand.
+        const first = this.catalog()[0]?.label;
+        if (first)
+            this.openGroups.set(new Set([first]));
         // (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())
+            // `untracked` is essential: reading the draft as a dependency would make
+            // every edit re-run this effect and revert the document.
+            if (native && native === untracked(() => this.draft()))
                 return;
             let initial = EMPTY_SCHEMA;
             if (native) {
@@ -968,6 +1385,95 @@ class FormDesignerComponent {
             return;
         this.commit(updateNode(this.draft(), selected, event.patch));
     }
+    // -- reusable blocks ------------------------------------------------------
+    /** Saves the selected node (with its subtree) as a reusable block. */
+    saveAsBlock() {
+        const selected = this.selected();
+        const node = selected ? getNodeAt(this.draft(), selected) : null;
+        if (!node)
+            return;
+        const label = node.label ?? node.key;
+        const block = {
+            id: `${node.key}-${this.effectiveBlocks().length + 1}`,
+            label,
+            node: JSON.parse(JSON.stringify(node)),
+        };
+        const next = [...this.effectiveBlocks(), block];
+        if (this.blocks() === null) {
+            this.localBlocks.set(next);
+            saveBlocks(this.storage, next);
+        }
+        this.blocksChanged.emit(next);
+    }
+    removeBlock(id) {
+        const next = this.effectiveBlocks().filter((block) => block.id !== id);
+        if (this.blocks() === null) {
+            this.localBlocks.set(next);
+            saveBlocks(this.storage, next);
+        }
+        this.blocksChanged.emit(next);
+    }
+    isBlockEntry(entry) {
+        return entry.type.startsWith('block:');
+    }
+    blockIdOf(entry) {
+        return entry.type.slice('block:'.length);
+    }
+    // -- drag and drop --------------------------------------------------------
+    /** What is being dragged: a palette entry or an existing node. */
+    dragging = signal(null, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    /** Drop target highlighted while hovering. */
+    dropTarget = signal(null, ...(ngDevMode ? [{ debugName: "dropTarget" }] : /* istanbul ignore next */ []));
+    startEntryDrag(entry, event) {
+        this.dragging.set({ kind: 'entry', entry });
+        event.dataTransfer?.setData('text/plain', entry.type);
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'copy';
+    }
+    startNodeDrag(path, event) {
+        this.dragging.set({ kind: 'node', path });
+        event.dataTransfer?.setData('text/plain', path.join('.'));
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'move';
+    }
+    endDrag() {
+        this.dragging.set(null);
+        this.dropTarget.set(null);
+    }
+    allowDrop(target, event) {
+        if (!this.dragging())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.dropTarget.set(target.join('.'));
+    }
+    /** Drops onto `target`, the position the node should occupy. */
+    drop(target, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const dragging = this.dragging();
+        this.endDrag();
+        if (!dragging)
+            return;
+        if (dragging.kind === 'entry') {
+            const node = dragging.entry.create(this.draft());
+            this.commit(insertNode(this.draft(), target, node));
+            this.select(target);
+            return;
+        }
+        const from = dragging.path;
+        if (isSameOrInside(from, target))
+            return; // never drop a node into itself
+        const adjusted = adjustAfterRemoval(from, target);
+        this.commit(moveNode(this.draft(), from, adjusted));
+        this.select(adjusted);
+    }
+    isDropTarget(path) {
+        return this.dropTarget() === path.join('.');
+    }
+    isDragging() {
+        return this.dragging() !== null;
+    }
     // -- selection ------------------------------------------------------------
     select(path) {
         this.selected.set(path);
@@ -1016,7 +1522,7 @@ class FormDesignerComponent {
         }
     }
     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: `
+    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 }, blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schemaChanged: "schemaChanged", blocksChanged: "blocksChanged" }, ngImport: i0, template: `
     <div class="dz-shell" (keydown)="onKeydown($event)">
       <header class="dz-toolbar">
         <div class="dz-tools">
@@ -1027,6 +1533,7 @@ class FormDesignerComponent {
           <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>
+          <button type="button" (click)="saveAsBlock()" [disabled]="!selected()" title="Save as reusable block">⊞</button>
         </div>
         <div class="dz-tools">
           @if (diagnostics().length > 0) {
@@ -1034,6 +1541,37 @@ class FormDesignerComponent {
               ⚠ {{ diagnostics().length }}
             </button>
           }
+          <div class="dz-menu">
+            <button type="button" (click)="workspaceMenu.set(!workspaceMenu())" title="Workspace layout">
+              ▦ Workspace
+            </button>
+            @if (workspaceMenu()) {
+              <div class="dz-menu-panel" role="menu">
+                <span class="dz-menu-title">Panels</span>
+                @for (panel of panelIds; track panel) {
+                  <div class="dz-menu-row">
+                    <span>{{ panelLabel(panel) }}</span>
+                    <span class="dz-seg">
+                      @for (side of dockSides; track side) {
+                        <button
+                          type="button"
+                          [class.is-on]="layout()[panel] === side"
+                          (click)="dock(panel, side)"
+                        >{{ sideLabels[side] }}</button>
+                      }
+                    </span>
+                  </div>
+                }
+                <span class="dz-menu-title">Presets</span>
+                @for (preset of presets; track preset.id) {
+                  <button type="button" class="dz-menu-item" (click)="applyPreset(preset.id)">
+                    {{ preset.label }}
+                  </button>
+                }
+                <button type="button" class="dz-menu-item" (click)="resetLayout()">Reset layout</button>
+              </div>
+            }
+          </div>
           <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())">
@@ -1084,76 +1622,161 @@ class FormDesignerComponent {
           </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 class="dz-body" [style.grid-template-columns]="bodyColumns()">
+          @if (dockedPanels('left').length > 0) {
+            <aside class="dz-dock dz-dock-left">
+              @for (panel of dockedPanels('left'); track panel) {
+                <ng-container *ngTemplateOutlet="panelTemplate; context: { $implicit: panel }" />
               }
-            </div>
-          </aside>
+            </aside>
+          }
 
-          <main class="dz-canvas" (click)="select(null)">
+          <main class="dz-canvas" [class.is-dragging]="isDragging()" (click)="select(null)">
             @for (node of draft().fields; track node.key; let i = $index) {
+              <div
+                class="dz-dropzone"
+                [class.is-over]="isDropTarget([i])"
+                (dragover)="allowDrop([i], $event)"
+                (drop)="drop([i], $event)"
+              ></div>
               <mform-designer-node
                 [node]="node"
                 [path]="[i]"
                 [engine]="canvasEngine()"
                 [selected]="selected()"
                 (selectNode)="select($event)"
+                draggable="true"
+                (dragstart)="startNodeDrag([i], $event)"
+                (dragend)="endDrag()"
               />
             } @empty {
               <div class="dz-canvas-empty">
-                Click a field in the palette to start building.
+                Click a field in the palette — or drag it here — to start building.
               </div>
             }
+            <div
+              class="dz-dropzone is-last"
+              [class.is-over]="isDropTarget([draft().fields.length])"
+              (dragover)="allowDrop([draft().fields.length], $event)"
+              (drop)="drop([draft().fields.length], $event)"
+            ></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>
+          @if (dockedPanels('right').length > 0) {
+            <aside class="dz-dock dz-dock-right">
+              @for (panel of dockedPanels('right'); track panel) {
+                <ng-container *ngTemplateOutlet="panelTemplate; context: { $implicit: panel }" />
+              }
+            </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 });
+
+    <!-- One template per panel, rendered into whichever dock holds it. -->
+    <ng-template #panelTemplate let-panel>
+      <section class="dz-panel" [attr.data-panel]="panel">
+        <header class="dz-panel-head">
+          <span>{{ panelLabel(panel) }}</span>
+          <span class="dz-panel-actions">
+            <button
+              type="button"
+              [title]="panelSide(panel) === 'left' ? 'Move right' : 'Move left'"
+              (click)="dock(panel, panelSide(panel) === 'left' ? 'right' : 'left')"
+            >{{ panelSide(panel) === 'left' ? '⇥' : '⇤' }}</button>
+            <button type="button" title="Hide panel" (click)="dock(panel, 'hidden')">✕</button>
+          </span>
+        </header>
+        <div class="dz-panel-body">
+          @switch (panel) {
+            @case ('palette') {
+              @for (group of catalog(); track group.label) {
+                <div class="dz-group">
+                  <button
+                    type="button"
+                    class="dz-group-toggle"
+                    [class.is-open]="isGroupOpen(group.label)"
+                    [attr.aria-expanded]="isGroupOpen(group.label)"
+                    (click)="toggleGroup(group.label)"
+                  >
+                    <span class="dz-caret" aria-hidden="true">{{ isGroupOpen(group.label) ? '▾' : '▸' }}</span>
+                    {{ group.label }}
+                    <span class="dz-group-count">{{ group.entries.length }}</span>
+                  </button>
+                  @if (isGroupOpen(group.label)) {
+                    <div class="dz-group-entries">
+                      @for (entry of group.entries; track entry.type) {
+                        <div class="dz-palette-row">
+                          <button
+                            type="button"
+                            class="dz-palette-item"
+                            draggable="true"
+                            (dragstart)="startEntryDrag(entry, $event)"
+                            (dragend)="endDrag()"
+                            (click)="add(entry)"
+                            [title]="'Add ' + entry.label + ' (or drag onto the canvas)'"
+                          >
+                            <span class="dz-icon">{{ entry.icon }}</span>{{ entry.label }}
+                          </button>
+                          @if (isBlockEntry(entry)) {
+                            <button
+                              type="button"
+                              class="dz-block-remove"
+                              (click)="removeBlock(blockIdOf(entry))"
+                              [attr.aria-label]="'Remove block ' + entry.label"
+                            >✕</button>
+                          }
+                        </div>
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            }
+            @case ('structure') {
+              <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>
+            }
+            @case ('properties') {
+              @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>
+              }
+            }
+          }
+        </div>
+      </section>
+    </ng-template>
+  `, 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;flex:1;min-height:0}.dz-dock{display:flex;flex-direction:column;min-height:0;overflow-y:auto;background:var(--mform-surface, #fff)}.dz-dock-left{border-right:1px solid var(--mform-border, #d9d5e6)}.dz-dock-right{border-left:1px solid var(--mform-border, #d9d5e6)}.dz-panel{display:flex;flex-direction:column;border-bottom:1px solid var(--mform-border, #d9d5e6)}.dz-panel:last-child{border-bottom:none;flex:1}.dz-panel-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mform-muted, #6b6580);background:var(--mform-bg, #f6f5fa);position:sticky;top:0;z-index:1}.dz-panel-actions{display:flex;gap:2px;opacity:0;transition:opacity .12s}.dz-panel:hover .dz-panel-actions,.dz-panel:focus-within .dz-panel-actions{opacity:1}.dz-panel-actions button{border:none;background:none;color:inherit;cursor:pointer;font-size:11px;padding:2px 4px;border-radius:4px}.dz-panel-actions button:hover{background:var(--mform-surface, #fff)}.dz-panel-body{padding:10px}.dz-menu{position:relative}.dz-menu-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:260px;padding:8px;background:var(--mform-surface, #fff);border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);box-shadow:0 10px 30px #1f1b2e26}.dz-menu-title{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--mform-muted, #6b6580);padding:6px 6px 4px}.dz-menu-row{display:flex;align-items:center;justify-content:space-between;padding:4px 6px;font-size:13px}.dz-seg{display:flex;gap:2px}.dz-seg button{border:1px solid var(--mform-border, #d9d5e6);background:none;color:var(--mform-muted, #6b6580);border-radius:6px;font-size:11px;padding:3px 8px;cursor:pointer}.dz-seg button.is-on{background:var(--mform-primary, #6d4bd0);border-color:transparent;color:var(--mform-primary-contrast, #fff)}.dz-menu-item{display:block;width:100%;text-align:left;font:inherit;font-size:13px;padding:6px;border:none;border-radius:6px;background:none;color:inherit;cursor:pointer}.dz-menu-item:hover{background:var(--mform-bg, #f6f5fa)}.dz-group{margin-bottom:4px}.dz-group-toggle{display:flex;align-items:center;gap:6px;width:100%;font:inherit;font-size:12px;font-weight:600;text-align:left;padding:6px;border:none;border-radius:6px;background:none;color:inherit;cursor:pointer}.dz-group-toggle:hover{background:var(--mform-bg, #f6f5fa)}.dz-caret{font-size:10px;color:var(--mform-muted, #6b6580);width:10px}.dz-group-count{margin-left:auto;font-size:10px;font-weight:400;color:var(--mform-muted, #6b6580);background:var(--mform-bg, #f6f5fa);border-radius:999px;padding:1px 7px}.dz-group-entries{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 10px}.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-dropzone{height:4px;border-radius:999px;transition:height .1s,background .1s}.dz-canvas.is-dragging .dz-dropzone{height:14px;background:repeating-linear-gradient(90deg,var(--mform-border, #d9d5e6) 0 6px,transparent 6px 12px)}.dz-canvas.is-dragging .dz-dropzone.is-over{height:22px;background:var(--mform-primary, #6d4bd0)}.dz-palette-row{display:flex;align-items:center;gap:2px}.dz-palette-row .dz-palette-item{flex:1;cursor:grab}.dz-block-remove{border:none;background:none;color:var(--mform-muted, #6b6580);cursor:pointer;font-size:11px;padding:2px 4px;opacity:0}.dz-palette-row:hover .dz-block-remove{opacity:1}.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-empty{margin:4px 0}.dz-inspector{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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: `
+            args: [{ selector: 'mform-designer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        DesignerNodeComponent,
+                        InspectorComponent,
+                        FormRendererComponent,
+                        JsonPipe,
+                        NgTemplateOutlet,
+                    ], template: `
     <div class="dz-shell" (keydown)="onKeydown($event)">
       <header class="dz-toolbar">
         <div class="dz-tools">
@@ -1164,6 +1787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
           <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>
+          <button type="button" (click)="saveAsBlock()" [disabled]="!selected()" title="Save as reusable block">⊞</button>
         </div>
         <div class="dz-tools">
           @if (diagnostics().length > 0) {
@@ -1171,6 +1795,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
               ⚠ {{ diagnostics().length }}
             </button>
           }
+          <div class="dz-menu">
+            <button type="button" (click)="workspaceMenu.set(!workspaceMenu())" title="Workspace layout">
+              ▦ Workspace
+            </button>
+            @if (workspaceMenu()) {
+              <div class="dz-menu-panel" role="menu">
+                <span class="dz-menu-title">Panels</span>
+                @for (panel of panelIds; track panel) {
+                  <div class="dz-menu-row">
+                    <span>{{ panelLabel(panel) }}</span>
+                    <span class="dz-seg">
+                      @for (side of dockSides; track side) {
+                        <button
+                          type="button"
+                          [class.is-on]="layout()[panel] === side"
+                          (click)="dock(panel, side)"
+                        >{{ sideLabels[side] }}</button>
+                      }
+                    </span>
+                  </div>
+                }
+                <span class="dz-menu-title">Presets</span>
+                @for (preset of presets; track preset.id) {
+                  <button type="button" class="dz-menu-item" (click)="applyPreset(preset.id)">
+                    {{ preset.label }}
+                  </button>
+                }
+                <button type="button" class="dz-menu-item" (click)="resetLayout()">Reset layout</button>
+              </div>
+            }
+          </div>
           <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())">
@@ -1221,73 +1876,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
           </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 class="dz-body" [style.grid-template-columns]="bodyColumns()">
+          @if (dockedPanels('left').length > 0) {
+            <aside class="dz-dock dz-dock-left">
+              @for (panel of dockedPanels('left'); track panel) {
+                <ng-container *ngTemplateOutlet="panelTemplate; context: { $implicit: panel }" />
               }
-            </div>
-          </aside>
+            </aside>
+          }
 
-          <main class="dz-canvas" (click)="select(null)">
+          <main class="dz-canvas" [class.is-dragging]="isDragging()" (click)="select(null)">
             @for (node of draft().fields; track node.key; let i = $index) {
+              <div
+                class="dz-dropzone"
+                [class.is-over]="isDropTarget([i])"
+                (dragover)="allowDrop([i], $event)"
+                (drop)="drop([i], $event)"
+              ></div>
               <mform-designer-node
                 [node]="node"
                 [path]="[i]"
                 [engine]="canvasEngine()"
                 [selected]="selected()"
                 (selectNode)="select($event)"
+                draggable="true"
+                (dragstart)="startNodeDrag([i], $event)"
+                (dragend)="endDrag()"
               />
             } @empty {
               <div class="dz-canvas-empty">
-                Click a field in the palette to start building.
+                Click a field in the palette — or drag it here — to start building.
               </div>
             }
+            <div
+              class="dz-dropzone is-last"
+              [class.is-over]="isDropTarget([draft().fields.length])"
+              (dragover)="allowDrop([draft().fields.length], $event)"
+              (drop)="drop([draft().fields.length], $event)"
+            ></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>
+          @if (dockedPanels('right').length > 0) {
+            <aside class="dz-dock dz-dock-right">
+              @for (panel of dockedPanels('right'); track panel) {
+                <ng-container *ngTemplateOutlet="panelTemplate; context: { $implicit: panel }" />
+              }
+            </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"] }] } });
+
+    <!-- One template per panel, rendered into whichever dock holds it. -->
+    <ng-template #panelTemplate let-panel>
+      <section class="dz-panel" [attr.data-panel]="panel">
+        <header class="dz-panel-head">
+          <span>{{ panelLabel(panel) }}</span>
+          <span class="dz-panel-actions">
+            <button
+              type="button"
+              [title]="panelSide(panel) === 'left' ? 'Move right' : 'Move left'"
+              (click)="dock(panel, panelSide(panel) === 'left' ? 'right' : 'left')"
+            >{{ panelSide(panel) === 'left' ? '⇥' : '⇤' }}</button>
+            <button type="button" title="Hide panel" (click)="dock(panel, 'hidden')">✕</button>
+          </span>
+        </header>
+        <div class="dz-panel-body">
+          @switch (panel) {
+            @case ('palette') {
+              @for (group of catalog(); track group.label) {
+                <div class="dz-group">
+                  <button
+                    type="button"
+                    class="dz-group-toggle"
+                    [class.is-open]="isGroupOpen(group.label)"
+                    [attr.aria-expanded]="isGroupOpen(group.label)"
+                    (click)="toggleGroup(group.label)"
+                  >
+                    <span class="dz-caret" aria-hidden="true">{{ isGroupOpen(group.label) ? '▾' : '▸' }}</span>
+                    {{ group.label }}
+                    <span class="dz-group-count">{{ group.entries.length }}</span>
+                  </button>
+                  @if (isGroupOpen(group.label)) {
+                    <div class="dz-group-entries">
+                      @for (entry of group.entries; track entry.type) {
+                        <div class="dz-palette-row">
+                          <button
+                            type="button"
+                            class="dz-palette-item"
+                            draggable="true"
+                            (dragstart)="startEntryDrag(entry, $event)"
+                            (dragend)="endDrag()"
+                            (click)="add(entry)"
+                            [title]="'Add ' + entry.label + ' (or drag onto the canvas)'"
+                          >
+                            <span class="dz-icon">{{ entry.icon }}</span>{{ entry.label }}
+                          </button>
+                          @if (isBlockEntry(entry)) {
+                            <button
+                              type="button"
+                              class="dz-block-remove"
+                              (click)="removeBlock(blockIdOf(entry))"
+                              [attr.aria-label]="'Remove block ' + entry.label"
+                            >✕</button>
+                          }
+                        </div>
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            }
+            @case ('structure') {
+              <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>
+            }
+            @case ('properties') {
+              @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>
+              }
+            }
+          }
+        </div>
+      </section>
+    </ng-template>
+  `, 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;flex:1;min-height:0}.dz-dock{display:flex;flex-direction:column;min-height:0;overflow-y:auto;background:var(--mform-surface, #fff)}.dz-dock-left{border-right:1px solid var(--mform-border, #d9d5e6)}.dz-dock-right{border-left:1px solid var(--mform-border, #d9d5e6)}.dz-panel{display:flex;flex-direction:column;border-bottom:1px solid var(--mform-border, #d9d5e6)}.dz-panel:last-child{border-bottom:none;flex:1}.dz-panel-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mform-muted, #6b6580);background:var(--mform-bg, #f6f5fa);position:sticky;top:0;z-index:1}.dz-panel-actions{display:flex;gap:2px;opacity:0;transition:opacity .12s}.dz-panel:hover .dz-panel-actions,.dz-panel:focus-within .dz-panel-actions{opacity:1}.dz-panel-actions button{border:none;background:none;color:inherit;cursor:pointer;font-size:11px;padding:2px 4px;border-radius:4px}.dz-panel-actions button:hover{background:var(--mform-surface, #fff)}.dz-panel-body{padding:10px}.dz-menu{position:relative}.dz-menu-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:260px;padding:8px;background:var(--mform-surface, #fff);border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);box-shadow:0 10px 30px #1f1b2e26}.dz-menu-title{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--mform-muted, #6b6580);padding:6px 6px 4px}.dz-menu-row{display:flex;align-items:center;justify-content:space-between;padding:4px 6px;font-size:13px}.dz-seg{display:flex;gap:2px}.dz-seg button{border:1px solid var(--mform-border, #d9d5e6);background:none;color:var(--mform-muted, #6b6580);border-radius:6px;font-size:11px;padding:3px 8px;cursor:pointer}.dz-seg button.is-on{background:var(--mform-primary, #6d4bd0);border-color:transparent;color:var(--mform-primary-contrast, #fff)}.dz-menu-item{display:block;width:100%;text-align:left;font:inherit;font-size:13px;padding:6px;border:none;border-radius:6px;background:none;color:inherit;cursor:pointer}.dz-menu-item:hover{background:var(--mform-bg, #f6f5fa)}.dz-group{margin-bottom:4px}.dz-group-toggle{display:flex;align-items:center;gap:6px;width:100%;font:inherit;font-size:12px;font-weight:600;text-align:left;padding:6px;border:none;border-radius:6px;background:none;color:inherit;cursor:pointer}.dz-group-toggle:hover{background:var(--mform-bg, #f6f5fa)}.dz-caret{font-size:10px;color:var(--mform-muted, #6b6580);width:10px}.dz-group-count{margin-left:auto;font-size:10px;font-weight:400;color:var(--mform-muted, #6b6580);background:var(--mform-bg, #f6f5fa);border-radius:999px;padding:1px 7px}.dz-group-entries{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 10px}.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-dropzone{height:4px;border-radius:999px;transition:height .1s,background .1s}.dz-canvas.is-dragging .dz-dropzone{height:14px;background:repeating-linear-gradient(90deg,var(--mform-border, #d9d5e6) 0 6px,transparent 6px 12px)}.dz-canvas.is-dragging .dz-dropzone.is-over{height:22px;background:var(--mform-primary, #6d4bd0)}.dz-palette-row{display:flex;align-items:center;gap:2px}.dz-palette-row .dz-palette-item{flex:1;cursor:grab}.dz-block-remove{border:none;background:none;color:var(--mform-muted, #6b6580);cursor:pointer;font-size:11px;padding:2px 4px;opacity:0}.dz-palette-row:hover .dz-block-remove{opacity:1}.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-empty{margin:4px 0}.dz-inspector{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"] }], blocks: [{ type: i0.Input, args: [{ isSignal: true, alias: "blocks", required: false }] }], blocksChanged: [{ type: i0.Output, args: ["blocksChanged"] }] } });
 
 /*
  * Designer entry point (`@mosaicoo/form-angular/designer`).
@@ -1301,5 +2035,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_CATALOG, DesignerNodeComponent, FormDesignerComponent, InspectorComponent };
+export { DEFAULT_CATALOG, DEFAULT_LAYOUT, DesignerNodeComponent, FormDesignerComponent, InspectorComponent, PANEL_LABELS, WORKSPACE_PRESETS };
 //# sourceMappingURL=mosaicoo-form-angular-designer.mjs.map