@mosaicoo/form-angular 0.6.0 → 0.8.0

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

@@ -5,27 +5,42 @@ import { collectInputs, generateKey, validateSchema, createFormEngine, getNodeAt
 import { importForm, createLegacyImporter } from '@mosaicoo/form-core/interop';
 import { FormNodeComponent, FormRendererComponent } from '@mosaicoo/form-angular';
 
+function dropId(target) {
+    return target.column === undefined
+        ? target.path.join('.')
+        : `${target.path.join('.')}@${target.column}`;
+}
+
 /**
  * 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.
+ *
+ * Drop zones sit between children (and inside each column), so fields can be
+ * dragged INTO containers, not just reordered at the root.
  */
 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 */ []));
+    /** True while something is being dragged (reveals the drop zones). */
+    dragging = input$1(false, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    /** Id of the drop zone currently hovered. */
+    activeDrop = input$1(null, ...(ngDevMode ? [{ debugName: "activeDrop" }] : /* istanbul ignore next */ []));
     selectNode = output();
+    nodeDragStart = output();
+    dragOverTarget = output();
+    dropOnTarget = output();
+    dragFinished = 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;
+        const label = node.label ?? node.key;
         return `${label} · ${node.type}`;
     }
     isSelected() {
@@ -48,8 +63,28 @@ class DesignerNodeComponent {
         event.stopPropagation();
         this.activeTab.set(index);
     }
+    // -- drag and drop --------------------------------------------------------
+    isOver(path, column) {
+        return this.activeDrop() === dropId({ path, column });
+    }
+    onDragStart(path, event) {
+        event.stopPropagation();
+        this.nodeDragStart.emit(path);
+    }
+    onDragOver(path, column, event) {
+        if (!this.dragging())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragOverTarget.emit({ path, column });
+    }
+    onDrop(path, column, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dropOnTarget.emit({ path, column });
+    }
     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: `
+    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 }, dragging: { classPropertyName: "dragging", publicName: "dragging", isSignal: true, isRequired: false, transformFunction: null }, activeDrop: { classPropertyName: "activeDrop", publicName: "activeDrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectNode: "selectNode", nodeDragStart: "nodeDragStart", dragOverTarget: "dragOverTarget", dropOnTarget: "dropOnTarget", dragFinished: "dragFinished" }, ngImport: i0, template: `
     @let n = node();
     <div
       class="dz-node"
@@ -85,24 +120,51 @@ class DesignerNodeComponent {
                   [path]="childPath(i)"
                   [engine]="engine()"
                   [selected]="selected()"
+                  [dragging]="dragging()"
+                  [activeDrop]="activeDrop()"
                   (selectNode)="selectNode.emit($event)"
+                  (nodeDragStart)="nodeDragStart.emit($event)"
+                  (dragOverTarget)="dragOverTarget.emit($event)"
+                  (dropOnTarget)="dropOnTarget.emit($event)"
+                  (dragFinished)="dragFinished.emit()"
                 />
               </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) {
+            @for (column of container().columns; track $index; let c = $index) {
               <div class="dz-column">
                 @for (childIndex of column.children; track childIndex) {
+                  <div
+                    class="dz-dropzone"
+                    [class.is-over]="isOver(childPath(childIndex), c)"
+                    (dragover)="onDragOver(childPath(childIndex), c, $event)"
+                    (drop)="onDrop(childPath(childIndex), c, $event)"
+                  ></div>
                   <mform-designer-node
                     [node]="container().children[childIndex]!"
                     [path]="childPath(childIndex)"
                     [engine]="engine()"
                     [selected]="selected()"
+                    [dragging]="dragging()"
+                    [activeDrop]="activeDrop()"
+                    draggable="true"
+                    (dragstart)="onDragStart(childPath(childIndex), $event)"
+                    (dragend)="dragFinished.emit()"
                     (selectNode)="selectNode.emit($event)"
+                    (nodeDragStart)="nodeDragStart.emit($event)"
+                    (dragOverTarget)="dragOverTarget.emit($event)"
+                    (dropOnTarget)="dropOnTarget.emit($event)"
+                    (dragFinished)="dragFinished.emit()"
                   />
                 }
+                <div
+                  class="dz-dropzone is-last"
+                  [class.is-over]="isOver(childPath(container().children.length), c)"
+                  (dragover)="onDragOver(childPath(container().children.length), c, $event)"
+                  (drop)="onDrop(childPath(container().children.length), c, $event)"
+                ></div>
                 @if (column.children.length === 0) {
                   <div class="dz-empty">empty column</div>
                 }
@@ -112,16 +174,37 @@ class DesignerNodeComponent {
         } @else {
           <div class="dz-children">
             @for (child of container().children; track child.key; let i = $index) {
+              <div
+                class="dz-dropzone"
+                [class.is-over]="isOver(childPath(i))"
+                (dragover)="onDragOver(childPath(i), undefined, $event)"
+                (drop)="onDrop(childPath(i), undefined, $event)"
+              ></div>
               <mform-designer-node
                 [node]="child"
                 [path]="childPath(i)"
                 [engine]="engine()"
                 [selected]="selected()"
+                [dragging]="dragging()"
+                [activeDrop]="activeDrop()"
+                draggable="true"
+                (dragstart)="onDragStart(childPath(i), $event)"
+                (dragend)="dragFinished.emit()"
                 (selectNode)="selectNode.emit($event)"
+                (nodeDragStart)="nodeDragStart.emit($event)"
+                (dragOverTarget)="dragOverTarget.emit($event)"
+                (dropOnTarget)="dropOnTarget.emit($event)"
+                (dragFinished)="dragFinished.emit()"
               />
             } @empty {
-              <div class="dz-empty">empty — select and add fields</div>
+              <div class="dz-empty">empty — drop fields here</div>
             }
+            <div
+              class="dz-dropzone is-last"
+              [class.is-over]="isOver(childPath(container().children.length))"
+              (dragover)="onDragOver(childPath(container().children.length), undefined, $event)"
+              (drop)="onDrop(childPath(container().children.length), undefined, $event)"
+            ></div>
           </div>
         }
       } @else {
@@ -130,7 +213,7 @@ class DesignerNodeComponent {
         </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 });
+  `, isInline: true, dependencies: [{ kind: "component", type: DesignerNodeComponent, selector: "mform-designer-node", inputs: ["node", "path", "engine", "selected", "dragging", "activeDrop"], outputs: ["selectNode", "nodeDragStart", "dragOverTarget", "dropOnTarget", "dragFinished"] }, { 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,
@@ -175,24 +258,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                   [path]="childPath(i)"
                   [engine]="engine()"
                   [selected]="selected()"
+                  [dragging]="dragging()"
+                  [activeDrop]="activeDrop()"
                   (selectNode)="selectNode.emit($event)"
+                  (nodeDragStart)="nodeDragStart.emit($event)"
+                  (dragOverTarget)="dragOverTarget.emit($event)"
+                  (dropOnTarget)="dropOnTarget.emit($event)"
+                  (dragFinished)="dragFinished.emit()"
                 />
               </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) {
+            @for (column of container().columns; track $index; let c = $index) {
               <div class="dz-column">
                 @for (childIndex of column.children; track childIndex) {
+                  <div
+                    class="dz-dropzone"
+                    [class.is-over]="isOver(childPath(childIndex), c)"
+                    (dragover)="onDragOver(childPath(childIndex), c, $event)"
+                    (drop)="onDrop(childPath(childIndex), c, $event)"
+                  ></div>
                   <mform-designer-node
                     [node]="container().children[childIndex]!"
                     [path]="childPath(childIndex)"
                     [engine]="engine()"
                     [selected]="selected()"
+                    [dragging]="dragging()"
+                    [activeDrop]="activeDrop()"
+                    draggable="true"
+                    (dragstart)="onDragStart(childPath(childIndex), $event)"
+                    (dragend)="dragFinished.emit()"
                     (selectNode)="selectNode.emit($event)"
+                    (nodeDragStart)="nodeDragStart.emit($event)"
+                    (dragOverTarget)="dragOverTarget.emit($event)"
+                    (dropOnTarget)="dropOnTarget.emit($event)"
+                    (dragFinished)="dragFinished.emit()"
                   />
                 }
+                <div
+                  class="dz-dropzone is-last"
+                  [class.is-over]="isOver(childPath(container().children.length), c)"
+                  (dragover)="onDragOver(childPath(container().children.length), c, $event)"
+                  (drop)="onDrop(childPath(container().children.length), c, $event)"
+                ></div>
                 @if (column.children.length === 0) {
                   <div class="dz-empty">empty column</div>
                 }
@@ -202,16 +312,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         } @else {
           <div class="dz-children">
             @for (child of container().children; track child.key; let i = $index) {
+              <div
+                class="dz-dropzone"
+                [class.is-over]="isOver(childPath(i))"
+                (dragover)="onDragOver(childPath(i), undefined, $event)"
+                (drop)="onDrop(childPath(i), undefined, $event)"
+              ></div>
               <mform-designer-node
                 [node]="child"
                 [path]="childPath(i)"
                 [engine]="engine()"
                 [selected]="selected()"
+                [dragging]="dragging()"
+                [activeDrop]="activeDrop()"
+                draggable="true"
+                (dragstart)="onDragStart(childPath(i), $event)"
+                (dragend)="dragFinished.emit()"
                 (selectNode)="selectNode.emit($event)"
+                (nodeDragStart)="nodeDragStart.emit($event)"
+                (dragOverTarget)="dragOverTarget.emit($event)"
+                (dropOnTarget)="dropOnTarget.emit($event)"
+                (dragFinished)="dragFinished.emit()"
               />
             } @empty {
-              <div class="dz-empty">empty — select and add fields</div>
+              <div class="dz-empty">empty — drop fields here</div>
             }
+            <div
+              class="dz-dropzone is-last"
+              [class.is-over]="isOver(childPath(container().children.length))"
+              (dragover)="onDragOver(childPath(container().children.length), undefined, $event)"
+              (drop)="onDrop(childPath(container().children.length), undefined, $event)"
+            ></div>
           </div>
         }
       } @else {
@@ -222,7 +353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
     </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"] }] } });
+        }], 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 }] }], dragging: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragging", required: false }] }], activeDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDrop", required: false }] }], selectNode: [{ type: i0.Output, args: ["selectNode"] }], nodeDragStart: [{ type: i0.Output, args: ["nodeDragStart"] }], dragOverTarget: [{ type: i0.Output, args: ["dragOverTarget"] }], dropOnTarget: [{ type: i0.Output, args: ["dropOnTarget"] }], dragFinished: [{ type: i0.Output, args: ["dragFinished"] }] } });
 
 /**
  * Property panel of the selected node. Emits immutable patches — the shell
@@ -976,6 +1107,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',
@@ -1005,6 +1146,62 @@ 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 */
+    }
+}
+
+const DESIGNER_LABELS_EN = {
+    undo: 'Undo (Ctrl+Z)',
+    redo: 'Redo (Ctrl+Y)',
+    moveUp: 'Move up',
+    moveDown: 'Move down',
+    duplicate: 'Duplicate (Ctrl+D)',
+    delete: 'Delete (Del)',
+    saveBlock: 'Save as reusable block',
+    workspace: 'Workspace',
+    panels: 'Panels',
+    presets: 'Presets',
+    resetLayout: 'Reset layout',
+    moveLeft: 'Move left',
+    moveRight: 'Move right',
+    hidePanel: 'Hide panel',
+    import: 'Import',
+    export: 'Export',
+    preview: 'Preview',
+    design: 'Design',
+    cancel: 'Cancel',
+    close: 'Close',
+    importTitle: 'Import definition (native schema or supported formats)',
+    importPlaceholder: '{"version":1,"fields":[…]} or a legacy definition',
+    importError: 'Could not import: ',
+    exportTitle: 'Schema JSON',
+    canvasEmpty: 'Click a field in the palette — or drag it here — to start building.',
+    selectField: 'Select a field to edit its properties.',
+    testData: 'Test data',
+    panelFields: 'Fields',
+    panelStructure: 'Structure',
+    panelProperties: 'Properties',
+    noFields: 'no fields yet',
+};
+
 /**
  * Designer workspace layout.
  *
@@ -1070,6 +1267,37 @@ function saveLayout(storage, layout) {
 
 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.
  *
@@ -1084,6 +1312,10 @@ class FormDesignerComponent {
     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 */ []));
+    /** Replaces the built-in palette (e.g. a translated DEFAULT_CATALOG). */
+    catalogOverride = input$1(null, { ...(ngDevMode ? { debugName: "catalogOverride" } : /* istanbul ignore next */ {}), alias: 'catalog' });
+    /** Designer texts; partial overrides fall back to English. */
+    labels = input$1(DESIGNER_LABELS_EN, { ...(ngDevMode ? { debugName: "labels" } : /* istanbul ignore next */ {}), transform: (value) => ({ ...DESIGNER_LABELS_EN, ...value }) });
     /** Emitted after every committed edit (undo/redo included). */
     schemaChanged = output();
     draft = signal(EMPTY_SCHEMA, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
@@ -1115,7 +1347,12 @@ class FormDesignerComponent {
         }
     })();
     panelLabel(panel) {
-        return PANEL_LABELS[panel];
+        const labels = this.labels();
+        if (panel === 'palette')
+            return labels.panelFields;
+        if (panel === 'structure')
+            return labels.panelStructure;
+        return labels.panelProperties;
     }
     panelSide(panel) {
         return this.layout()[panel];
@@ -1147,6 +1384,34 @@ class FormDesignerComponent {
         saveLayout(this.storage, this.layout());
         this.workspaceMenu.set(false);
     }
+    /** Live drag state of a dock splitter. */
+    resizing = null;
+    startResize(side, event) {
+        event.preventDefault();
+        const layout = this.layout();
+        this.resizing = {
+            side,
+            startX: event.clientX,
+            startWidth: side === 'left' ? layout.leftWidth : layout.rightWidth,
+        };
+        event.target.setPointerCapture?.(event.pointerId);
+    }
+    onResizeMove(event) {
+        const resizing = this.resizing;
+        if (!resizing)
+            return;
+        // dragging right widens a left dock and narrows a right one
+        const delta = event.clientX - resizing.startX;
+        const raw = resizing.startWidth + (resizing.side === 'left' ? delta : -delta);
+        const width = Math.max(160, Math.min(520, Math.round(raw)));
+        this.layout.update((current) => resizing.side === 'left' ? { ...current, leftWidth: width } : { ...current, rightWidth: width });
+    }
+    endResize() {
+        if (!this.resizing)
+            return;
+        this.resizing = null;
+        saveLayout(this.storage, this.layout());
+    }
     isGroupOpen(label) {
         return this.openGroups().has(label);
     }
@@ -1160,7 +1425,28 @@ class FormDesignerComponent {
             return next;
         });
     }
-    catalog = computed(() => [...DEFAULT_CATALOG, ...this.extraCatalog()], ...(ngDevMode ? [{ debugName: "catalog" }] : /* istanbul ignore 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 = [...(this.catalogOverride() ?? 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). */
@@ -1190,6 +1476,7 @@ class FormDesignerComponent {
     }, ...(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)
@@ -1300,6 +1587,96 @@ 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 zone highlighted while hovering (see `dropId`). */
+    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(dropId(target));
+    }
+    /** Drops onto `target` — the position (and column) the node should occupy. */
+    drop(target, event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        const dragging = this.dragging();
+        this.endDrag();
+        if (!dragging)
+            return;
+        const options = target.column === undefined ? undefined : { column: target.column };
+        if (dragging.kind === 'entry') {
+            const node = dragging.entry.create(this.draft());
+            this.commit(insertNode(this.draft(), target.path, node, options));
+            this.select(target.path);
+            return;
+        }
+        const from = dragging.path;
+        if (isSameOrInside(from, target.path))
+            return; // never drop a node into itself
+        const adjusted = adjustAfterRemoval(from, target.path);
+        this.commit(moveNode(this.draft(), from, adjusted, options));
+        this.select(adjusted);
+    }
+    isDropTarget(target) {
+        return this.dropTarget() === dropId(target);
+    }
+    isDragging() {
+        return this.dragging() !== null;
+    }
     // -- selection ------------------------------------------------------------
     select(path) {
         this.selected.set(path);
@@ -1321,7 +1698,7 @@ class FormDesignerComponent {
             this.importError.set('');
         }
         catch (error) {
-            this.importError.set('Could not import: ' + String(error));
+            this.importError.set(this.labels().importError + String(error));
         }
     }
     // -- keyboard -------------------------------------------------------------
@@ -1348,17 +1725,18 @@ 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 }, catalogOverride: { classPropertyName: "catalogOverride", publicName: "catalog", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", 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">
-          <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>
+          <button type="button" (click)="undo()" [disabled]="past().length === 0" [title]="labels().undo">↶</button>
+          <button type="button" (click)="redo()" [disabled]="future().length === 0" [title]="labels().redo">↷</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>
+          <button type="button" (click)="moveSelected(-1)" [disabled]="!selected()" [title]="labels().moveUp">↑</button>
+          <button type="button" (click)="moveSelected(1)" [disabled]="!selected()" [title]="labels().moveDown">↓</button>
+          <button type="button" (click)="duplicateSelected()" [disabled]="!selected()" [title]="labels().duplicate">⧉</button>
+          <button type="button" (click)="removeSelected()" [disabled]="!selected()" [title]="labels().delete">🗑</button>
+          <button type="button" (click)="saveAsBlock()" [disabled]="!selected()" [title]="labels().saveBlock">⊞</button>
         </div>
         <div class="dz-tools">
           @if (diagnostics().length > 0) {
@@ -1367,12 +1745,12 @@ class FormDesignerComponent {
             </button>
           }
           <div class="dz-menu">
-            <button type="button" (click)="workspaceMenu.set(!workspaceMenu())" title="Workspace layout">
-              ▦ Workspace
+            <button type="button" (click)="workspaceMenu.set(!workspaceMenu())" [title]="labels().workspace">
+              ▦ {{ labels().workspace }}
             </button>
             @if (workspaceMenu()) {
               <div class="dz-menu-panel" role="menu">
-                <span class="dz-menu-title">Panels</span>
+                <span class="dz-menu-title">{{ labels().panels }}</span>
                 @for (panel of panelIds; track panel) {
                   <div class="dz-menu-row">
                     <span>{{ panelLabel(panel) }}</span>
@@ -1387,20 +1765,20 @@ class FormDesignerComponent {
                     </span>
                   </div>
                 }
-                <span class="dz-menu-title">Presets</span>
+                <span class="dz-menu-title">{{ labels().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>
+                <button type="button" class="dz-menu-item" (click)="resetLayout()">{{ labels().resetLayout }}</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" (click)="dialog.set(dialog() === 'import' ? null : 'import')">{{ labels().import }}</button>
+          <button type="button" (click)="openExport()">{{ labels().export }}</button>
           <button type="button" class="dz-primary" (click)="preview.set(!preview())">
-            {{ preview() ? 'Design' : 'Preview' }}
+            {{ preview() ? labels().design : labels().preview }}
           </button>
         </div>
       </header>
@@ -1417,23 +1795,23 @@ class FormDesignerComponent {
 
       @if (dialog() === 'export') {
         <div class="dz-dialog">
-          <h4>Schema JSON</h4>
+          <h4>{{ labels().exportTitle }}</h4>
           <textarea readonly rows="12">{{ exportedJson() }}</textarea>
           <div class="dz-dialog-actions">
-            <button type="button" (click)="dialog.set(null)">Close</button>
+            <button type="button" (click)="dialog.set(null)">{{ labels().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>
+          <h4>{{ labels().importTitle }}</h4>
+          <textarea rows="12" #importArea [placeholder]="labels().importPlaceholder"></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>
+            <button type="button" (click)="dialog.set(null)">{{ labels().cancel }}</button>
+            <button type="button" class="dz-primary" (click)="doImport(importArea.value)">{{ labels().import }}</button>
           </div>
         </div>
       }
@@ -1442,38 +1820,77 @@ class FormDesignerComponent {
         <div class="dz-preview">
           <mform-renderer [schema]="draft()" (valueChanged)="previewData.set($event)" />
           <details class="dz-preview-data">
-            <summary>Test data</summary>
+            <summary>{{ labels().testData }}</summary>
             <pre>{{ previewData() | json }}</pre>
           </details>
         </div>
       } @else {
-        <div class="dz-body" [style.grid-template-columns]="bodyColumns()">
+        <div
+          class="dz-body"
+          [style.grid-template-columns]="bodyColumns()"
+          (pointermove)="onResizeMove($event)"
+          (pointerup)="endResize()"
+          (pointercancel)="endResize()"
+        >
           @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
+                class="dz-splitter dz-splitter-left"
+                role="separator"
+                aria-orientation="vertical"
+                (pointerdown)="startResize('left', $event)"
+              ></div>
             </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({ path: [i] })"
+                (dragover)="allowDrop({ path: [i] }, $event)"
+                (drop)="drop({ path: [i] }, $event)"
+              ></div>
               <mform-designer-node
                 [node]="node"
                 [path]="[i]"
                 [engine]="canvasEngine()"
                 [selected]="selected()"
+                [dragging]="isDragging()"
+                [activeDrop]="dropTarget()"
+                draggable="true"
+                (dragstart)="startNodeDrag([i], $event)"
+                (dragend)="endDrag()"
                 (selectNode)="select($event)"
+                (nodeDragStart)="startNodeDrag($event)"
+                (dragOverTarget)="allowDrop($event)"
+                (dropOnTarget)="drop($event)"
+                (dragFinished)="endDrag()"
               />
             } @empty {
               <div class="dz-canvas-empty">
-                Click a field in the palette to start building.
+                {{ labels().canvasEmpty }}
               </div>
             }
+            <div
+              class="dz-dropzone is-last"
+              [class.is-over]="isDropTarget({ path: [draft().fields.length] })"
+              (dragover)="allowDrop({ path: [draft().fields.length] }, $event)"
+              (drop)="drop({ path: [draft().fields.length] }, $event)"
+            ></div>
           </main>
 
           @if (dockedPanels('right').length > 0) {
             <aside class="dz-dock dz-dock-right">
+              <div
+                class="dz-splitter dz-splitter-right"
+                role="separator"
+                aria-orientation="vertical"
+                (pointerdown)="startResize('right', $event)"
+              ></div>
               @for (panel of dockedPanels('right'); track panel) {
                 <ng-container *ngTemplateOutlet="panelTemplate; context: { $implicit: panel }" />
               }
@@ -1491,10 +1908,10 @@ class FormDesignerComponent {
           <span class="dz-panel-actions">
             <button
               type="button"
-              [title]="panelSide(panel) === 'left' ? 'Move right' : 'Move left'"
+              [title]="panelSide(panel) === 'left' ? labels().moveRight : labels().moveLeft"
               (click)="dock(panel, panelSide(panel) === 'left' ? 'right' : 'left')"
             >{{ panelSide(panel) === 'left' ? '⇥' : '⇤' }}</button>
-            <button type="button" title="Hide panel" (click)="dock(panel, 'hidden')">✕</button>
+            <button type="button" [title]="labels().hidePanel" (click)="dock(panel, 'hidden')">✕</button>
           </span>
         </header>
         <div class="dz-panel-body">
@@ -1516,10 +1933,27 @@ class FormDesignerComponent {
                   @if (isGroupOpen(group.label)) {
                     <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 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>
                   }
@@ -1540,7 +1974,7 @@ class FormDesignerComponent {
                     {{ item.label }}
                   </button>
                 } @empty {
-                  <span class="dz-empty">no fields yet</span>
+                  <span class="dz-empty">{{ labels().noFields }}</span>
                 }
               </div>
             }
@@ -1552,14 +1986,14 @@ class FormDesignerComponent {
                   (nodePatch)="applyPatch($event)"
                 />
               } @else {
-                <div class="dz-empty dz-props-empty">Select a field to edit its properties.</div>
+                <div class="dz-empty dz-props-empty">{{ labels().selectField }}</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-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 });
+  `, 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);position:relative}.dz-dock-right{border-left:1px solid var(--mform-border, #d9d5e6);position:relative}.dz-splitter{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;touch-action:none;z-index:2}.dz-splitter-left{right:-3px}.dz-splitter-right{left:-3px}.dz-splitter:hover,.dz-splitter:active{background:var(--mform-primary, #6d4bd0);opacity:.35}.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", "dragging", "activeDrop"], outputs: ["selectNode", "nodeDragStart", "dragOverTarget", "dropOnTarget", "dragFinished"] }, { 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,
@@ -1573,13 +2007,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
     <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>
+          <button type="button" (click)="undo()" [disabled]="past().length === 0" [title]="labels().undo">↶</button>
+          <button type="button" (click)="redo()" [disabled]="future().length === 0" [title]="labels().redo">↷</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>
+          <button type="button" (click)="moveSelected(-1)" [disabled]="!selected()" [title]="labels().moveUp">↑</button>
+          <button type="button" (click)="moveSelected(1)" [disabled]="!selected()" [title]="labels().moveDown">↓</button>
+          <button type="button" (click)="duplicateSelected()" [disabled]="!selected()" [title]="labels().duplicate">⧉</button>
+          <button type="button" (click)="removeSelected()" [disabled]="!selected()" [title]="labels().delete">🗑</button>
+          <button type="button" (click)="saveAsBlock()" [disabled]="!selected()" [title]="labels().saveBlock">⊞</button>
         </div>
         <div class="dz-tools">
           @if (diagnostics().length > 0) {
@@ -1588,12 +2023,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             </button>
           }
           <div class="dz-menu">
-            <button type="button" (click)="workspaceMenu.set(!workspaceMenu())" title="Workspace layout">
-              ▦ Workspace
+            <button type="button" (click)="workspaceMenu.set(!workspaceMenu())" [title]="labels().workspace">
+              ▦ {{ labels().workspace }}
             </button>
             @if (workspaceMenu()) {
               <div class="dz-menu-panel" role="menu">
-                <span class="dz-menu-title">Panels</span>
+                <span class="dz-menu-title">{{ labels().panels }}</span>
                 @for (panel of panelIds; track panel) {
                   <div class="dz-menu-row">
                     <span>{{ panelLabel(panel) }}</span>
@@ -1608,20 +2043,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     </span>
                   </div>
                 }
-                <span class="dz-menu-title">Presets</span>
+                <span class="dz-menu-title">{{ labels().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>
+                <button type="button" class="dz-menu-item" (click)="resetLayout()">{{ labels().resetLayout }}</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" (click)="dialog.set(dialog() === 'import' ? null : 'import')">{{ labels().import }}</button>
+          <button type="button" (click)="openExport()">{{ labels().export }}</button>
           <button type="button" class="dz-primary" (click)="preview.set(!preview())">
-            {{ preview() ? 'Design' : 'Preview' }}
+            {{ preview() ? labels().design : labels().preview }}
           </button>
         </div>
       </header>
@@ -1638,23 +2073,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
 
       @if (dialog() === 'export') {
         <div class="dz-dialog">
-          <h4>Schema JSON</h4>
+          <h4>{{ labels().exportTitle }}</h4>
           <textarea readonly rows="12">{{ exportedJson() }}</textarea>
           <div class="dz-dialog-actions">
-            <button type="button" (click)="dialog.set(null)">Close</button>
+            <button type="button" (click)="dialog.set(null)">{{ labels().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>
+          <h4>{{ labels().importTitle }}</h4>
+          <textarea rows="12" #importArea [placeholder]="labels().importPlaceholder"></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>
+            <button type="button" (click)="dialog.set(null)">{{ labels().cancel }}</button>
+            <button type="button" class="dz-primary" (click)="doImport(importArea.value)">{{ labels().import }}</button>
           </div>
         </div>
       }
@@ -1663,38 +2098,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         <div class="dz-preview">
           <mform-renderer [schema]="draft()" (valueChanged)="previewData.set($event)" />
           <details class="dz-preview-data">
-            <summary>Test data</summary>
+            <summary>{{ labels().testData }}</summary>
             <pre>{{ previewData() | json }}</pre>
           </details>
         </div>
       } @else {
-        <div class="dz-body" [style.grid-template-columns]="bodyColumns()">
+        <div
+          class="dz-body"
+          [style.grid-template-columns]="bodyColumns()"
+          (pointermove)="onResizeMove($event)"
+          (pointerup)="endResize()"
+          (pointercancel)="endResize()"
+        >
           @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
+                class="dz-splitter dz-splitter-left"
+                role="separator"
+                aria-orientation="vertical"
+                (pointerdown)="startResize('left', $event)"
+              ></div>
             </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({ path: [i] })"
+                (dragover)="allowDrop({ path: [i] }, $event)"
+                (drop)="drop({ path: [i] }, $event)"
+              ></div>
               <mform-designer-node
                 [node]="node"
                 [path]="[i]"
                 [engine]="canvasEngine()"
                 [selected]="selected()"
+                [dragging]="isDragging()"
+                [activeDrop]="dropTarget()"
+                draggable="true"
+                (dragstart)="startNodeDrag([i], $event)"
+                (dragend)="endDrag()"
                 (selectNode)="select($event)"
+                (nodeDragStart)="startNodeDrag($event)"
+                (dragOverTarget)="allowDrop($event)"
+                (dropOnTarget)="drop($event)"
+                (dragFinished)="endDrag()"
               />
             } @empty {
               <div class="dz-canvas-empty">
-                Click a field in the palette to start building.
+                {{ labels().canvasEmpty }}
               </div>
             }
+            <div
+              class="dz-dropzone is-last"
+              [class.is-over]="isDropTarget({ path: [draft().fields.length] })"
+              (dragover)="allowDrop({ path: [draft().fields.length] }, $event)"
+              (drop)="drop({ path: [draft().fields.length] }, $event)"
+            ></div>
           </main>
 
           @if (dockedPanels('right').length > 0) {
             <aside class="dz-dock dz-dock-right">
+              <div
+                class="dz-splitter dz-splitter-right"
+                role="separator"
+                aria-orientation="vertical"
+                (pointerdown)="startResize('right', $event)"
+              ></div>
               @for (panel of dockedPanels('right'); track panel) {
                 <ng-container *ngTemplateOutlet="panelTemplate; context: { $implicit: panel }" />
               }
@@ -1712,10 +2186,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
           <span class="dz-panel-actions">
             <button
               type="button"
-              [title]="panelSide(panel) === 'left' ? 'Move right' : 'Move left'"
+              [title]="panelSide(panel) === 'left' ? labels().moveRight : labels().moveLeft"
               (click)="dock(panel, panelSide(panel) === 'left' ? 'right' : 'left')"
             >{{ panelSide(panel) === 'left' ? '⇥' : '⇤' }}</button>
-            <button type="button" title="Hide panel" (click)="dock(panel, 'hidden')">✕</button>
+            <button type="button" [title]="labels().hidePanel" (click)="dock(panel, 'hidden')">✕</button>
           </span>
         </header>
         <div class="dz-panel-body">
@@ -1737,10 +2211,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                   @if (isGroupOpen(group.label)) {
                     <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 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>
                   }
@@ -1761,7 +2252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     {{ item.label }}
                   </button>
                 } @empty {
-                  <span class="dz-empty">no fields yet</span>
+                  <span class="dz-empty">{{ labels().noFields }}</span>
                 }
               </div>
             }
@@ -1773,15 +2264,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                   (nodePatch)="applyPatch($event)"
                 />
               } @else {
-                <div class="dz-empty dz-props-empty">Select a field to edit its properties.</div>
+                <div class="dz-empty dz-props-empty">{{ labels().selectField }}</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-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"] }] } });
+  `, 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);position:relative}.dz-dock-right{border-left:1px solid var(--mform-border, #d9d5e6);position:relative}.dz-splitter{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;touch-action:none;z-index:2}.dz-splitter-left{right:-3px}.dz-splitter-right{left:-3px}.dz-splitter:hover,.dz-splitter:active{background:var(--mform-primary, #6d4bd0);opacity:.35}.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 }] }], catalogOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "catalog", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", 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`).
@@ -1795,5 +2286,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_CATALOG, DEFAULT_LAYOUT, DesignerNodeComponent, FormDesignerComponent, InspectorComponent, PANEL_LABELS, WORKSPACE_PRESETS };
+export { DEFAULT_CATALOG, DEFAULT_LAYOUT, DESIGNER_LABELS_EN, DesignerNodeComponent, FormDesignerComponent, InspectorComponent, PANEL_LABELS, WORKSPACE_PRESETS, dropId };
 //# sourceMappingURL=mosaicoo-form-angular-designer.mjs.map