@mosaicoo/form-angular 0.7.0 → 0.9.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
@@ -1037,6 +1168,43 @@ function saveBlocks(storage, blocks) {
     }
 }
 
+const DESIGNER_LABELS_EN = {
+    undo: 'Undo (Ctrl+Z)',
+    redo: 'Redo (Ctrl+Y)',
+    moveUp: 'Move up (Alt+↑)',
+    moveDown: 'Move down (Alt+↓)',
+    nest: 'Nest into the container above (Alt+→)',
+    unnest: 'Move out of the container (Alt+←)',
+    duplicate: 'Duplicate (Ctrl+D)',
+    delete: 'Delete (Del)',
+    saveBlock: 'Save as reusable block',
+    viewport: 'Preview width',
+    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.
  *
@@ -1147,6 +1315,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 */ []));
@@ -1155,6 +1327,16 @@ class FormDesignerComponent {
     selected = signal(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     preview = signal(false, ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
     previewData = signal({}, ...(ngDevMode ? [{ debugName: "previewData" }] : /* istanbul ignore next */ []));
+    /** Preview viewport: the frame drives the form's container queries. */
+    viewport = signal('desktop', ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+    viewports = [
+        { id: 'desktop', label: 'Desktop', icon: '🖥', width: null },
+        { id: 'tablet', label: 'Tablet', icon: '▭', width: 768 },
+        { id: 'mobile', label: 'Mobile', icon: '▯', width: 375 },
+    ];
+    viewportWidth() {
+        return this.viewports.find((option) => option.id === this.viewport())?.width ?? null;
+    }
     dialog = signal(null, ...(ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []));
     importError = signal('', ...(ngDevMode ? [{ debugName: "importError" }] : /* istanbul ignore next */ []));
     showDiagnostics = signal(false, ...(ngDevMode ? [{ debugName: "showDiagnostics" }] : /* istanbul ignore next */ []));
@@ -1178,7 +1360,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];
@@ -1210,6 +1397,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);
     }
@@ -1230,7 +1445,7 @@ class FormDesignerComponent {
     effectiveBlocks = computed(() => this.blocks() ?? this.localBlocks(), ...(ngDevMode ? [{ debugName: "effectiveBlocks" }] : /* istanbul ignore next */ []));
     /** Palette = built-ins + host extras + saved blocks as a group. */
     catalog = computed(() => {
-        const groups = [...DEFAULT_CATALOG, ...this.extraCatalog()];
+        const groups = [...(this.catalogOverride() ?? DEFAULT_CATALOG), ...this.extraCatalog()];
         const blocks = this.effectiveBlocks();
         if (blocks.length > 0) {
             groups.push({
@@ -1385,6 +1600,49 @@ class FormDesignerComponent {
             return;
         this.commit(updateNode(this.draft(), selected, event.patch));
     }
+    /** Whether the selection can be nested into the container above it. */
+    canNest() {
+        const selected = this.selected();
+        if (!selected)
+            return false;
+        const { parent, index } = parentOf(selected);
+        if (index === 0)
+            return false;
+        return getNodeAt(this.draft(), [...parent, index - 1])?.kind === 'container';
+    }
+    canUnnest() {
+        return (this.selected()?.length ?? 0) > 1;
+    }
+    /**
+     * Nests the selection into the container right above it (Alt+→) — the
+     * keyboard equivalent of dragging a field into a panel.
+     */
+    nestSelected() {
+        const selected = this.selected();
+        if (!selected)
+            return;
+        const { parent, index } = parentOf(selected);
+        if (index === 0)
+            return;
+        const previous = getNodeAt(this.draft(), [...parent, index - 1]);
+        if (!previous || previous.kind !== 'container')
+            return;
+        // after the removal the container keeps its position (it sits before)
+        const target = [...parent, index - 1, previous.children.length];
+        this.commit(moveNode(this.draft(), selected, target));
+        this.select(target);
+    }
+    /** Moves the selection out of its container, right after it (Alt+←). */
+    unnestSelected() {
+        const selected = this.selected();
+        if (!selected || selected.length < 2)
+            return;
+        const { parent } = parentOf(selected);
+        const { parent: grandparent, index: parentIndex } = parentOf(parent);
+        const target = [...grandparent, parentIndex + 1];
+        this.commit(moveNode(this.draft(), selected, target));
+        this.select(target);
+    }
     // -- reusable blocks ------------------------------------------------------
     /** Saves the selected node (with its subtree) as a reusable block. */
     saveAsBlock() {
@@ -1422,7 +1680,7 @@ class FormDesignerComponent {
     // -- drag and drop --------------------------------------------------------
     /** What is being dragged: a palette entry or an existing node. */
     dragging = signal(null, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
-    /** Drop target highlighted while hovering. */
+    /** 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 });
@@ -1432,8 +1690,8 @@ class FormDesignerComponent {
     }
     startNodeDrag(path, event) {
         this.dragging.set({ kind: 'node', path });
-        event.dataTransfer?.setData('text/plain', path.join('.'));
-        if (event.dataTransfer)
+        event?.dataTransfer?.setData('text/plain', path.join('.'));
+        if (event?.dataTransfer)
             event.dataTransfer.effectAllowed = 'move';
     }
     endDrag() {
@@ -1443,33 +1701,34 @@ class FormDesignerComponent {
     allowDrop(target, event) {
         if (!this.dragging())
             return;
-        event.preventDefault();
-        event.stopPropagation();
-        this.dropTarget.set(target.join('.'));
+        event?.preventDefault();
+        event?.stopPropagation();
+        this.dropTarget.set(dropId(target));
     }
-    /** Drops onto `target`, the position the node should occupy. */
+    /** Drops onto `target` — the position (and column) the node should occupy. */
     drop(target, event) {
-        event.preventDefault();
-        event.stopPropagation();
+        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, node));
-            this.select(target);
+            this.commit(insertNode(this.draft(), target.path, node, options));
+            this.select(target.path);
             return;
         }
         const from = dragging.path;
-        if (isSameOrInside(from, target))
+        if (isSameOrInside(from, target.path))
             return; // never drop a node into itself
-        const adjusted = adjustAfterRemoval(from, target);
-        this.commit(moveNode(this.draft(), from, adjusted));
+        const adjusted = adjustAfterRemoval(from, target.path);
+        this.commit(moveNode(this.draft(), from, adjusted, options));
         this.select(adjusted);
     }
-    isDropTarget(path) {
-        return this.dropTarget() === path.join('.');
+    isDropTarget(target) {
+        return this.dropTarget() === dropId(target);
     }
     isDragging() {
         return this.dragging() !== null;
@@ -1495,7 +1754,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 -------------------------------------------------------------
@@ -1520,20 +1779,44 @@ class FormDesignerComponent {
             event.preventDefault();
             this.removeSelected();
         }
+        else if (key === 'escape') {
+            event.preventDefault();
+            this.workspaceMenu.set(false);
+            this.dialog.set(null);
+            this.select(null);
+        }
+        else if (event.altKey && key === 'arrowup') {
+            event.preventDefault();
+            this.moveSelected(-1);
+        }
+        else if (event.altKey && key === 'arrowdown') {
+            event.preventDefault();
+            this.moveSelected(1);
+        }
+        else if (event.altKey && key === 'arrowright') {
+            event.preventDefault();
+            this.nestSelected();
+        }
+        else if (event.altKey && key === 'arrowleft') {
+            event.preventDefault();
+            this.unnestSelected();
+        }
     }
     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 }, blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schemaChanged: "schemaChanged", blocksChanged: "blocksChanged" }, 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)="saveAsBlock()" [disabled]="!selected()" title="Save as reusable block">⊞</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)="unnestSelected()" [disabled]="!canUnnest()" [title]="labels().unnest">⇤</button>
+          <button type="button" (click)="nestSelected()" [disabled]="!canNest()" [title]="labels().nest">⇥</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) {
@@ -1542,12 +1825,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>
@@ -1562,20 +1845,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>
@@ -1592,42 +1875,70 @@ 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>
       }
 
       @if (preview()) {
         <div class="dz-preview">
-          <mform-renderer [schema]="draft()" (valueChanged)="previewData.set($event)" />
+          <div class="dz-viewports" role="group" [attr.aria-label]="labels().viewport">
+            @for (option of viewports; track option.id) {
+              <button
+                type="button"
+                [class.is-on]="viewport() === option.id"
+                (click)="viewport.set(option.id)"
+                [title]="option.width ? option.label + ' · ' + option.width + 'px' : option.label"
+              >{{ option.icon }} {{ option.label }}</button>
+            }
+          </div>
+          <div
+            class="dz-preview-frame"
+            [class.is-constrained]="viewportWidth() !== null"
+            [style.max-width.px]="viewportWidth()"
+          >
+            <mform-renderer [schema]="draft()" (valueChanged)="previewData.set($event)" />
+          </div>
           <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>
           }
 
@@ -1635,35 +1946,47 @@ class FormDesignerComponent {
             @for (node of draft().fields; track node.key; let i = $index) {
               <div
                 class="dz-dropzone"
-                [class.is-over]="isDropTarget([i])"
-                (dragover)="allowDrop([i], $event)"
-                (drop)="drop([i], $event)"
+                [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()"
-                (selectNode)="select($event)"
+                [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 — or drag it here — to start building.
+                {{ labels().canvasEmpty }}
               </div>
             }
             <div
               class="dz-dropzone is-last"
-              [class.is-over]="isDropTarget([draft().fields.length])"
-              (dragover)="allowDrop([draft().fields.length], $event)"
-              (drop)="drop([draft().fields.length], $event)"
+              [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 }" />
               }
@@ -1681,10 +2004,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">
@@ -1747,7 +2070,7 @@ class FormDesignerComponent {
                     {{ item.label }}
                   </button>
                 } @empty {
-                  <span class="dz-empty">no fields yet</span>
+                  <span class="dz-empty">{{ labels().noFields }}</span>
                 }
               </div>
             }
@@ -1759,14 +2082,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-dropzone{height:4px;border-radius:999px;transition:height .1s,background .1s}.dz-canvas.is-dragging .dz-dropzone{height:14px;background:repeating-linear-gradient(90deg,var(--mform-border, #d9d5e6) 0 6px,transparent 6px 12px)}.dz-canvas.is-dragging .dz-dropzone.is-over{height:22px;background:var(--mform-primary, #6d4bd0)}.dz-palette-row{display:flex;align-items:center;gap:2px}.dz-palette-row .dz-palette-item{flex:1;cursor:grab}.dz-block-remove{border:none;background:none;color:var(--mform-muted, #6b6580);cursor:pointer;font-size:11px;padding:2px 4px;opacity:0}.dz-palette-row:hover .dz-block-remove{opacity:1}.dz-node{position:relative;border:1px solid transparent;border-radius:var(--mform-radius, 10px);padding:20px 10px 10px;cursor:pointer;background:var(--mform-surface, #fff)}.dz-node:hover{border-color:var(--mform-border, #d9d5e6)}.dz-node.is-selected{border-color:var(--mform-primary, #6d4bd0);box-shadow:0 0 0 1px var(--mform-primary, #6d4bd0)}.dz-chip{position:absolute;top:2px;left:10px;font-size:10px;color:var(--mform-muted, #6b6580);pointer-events:none}.dz-node.is-selected>.dz-chip{color:var(--mform-primary, #6d4bd0);font-weight:600}.dz-children{display:flex;flex-direction:column;gap:8px}.dz-columns{display:grid;gap:10px}.dz-column{display:flex;flex-direction:column;gap:8px;border:1px dashed var(--mform-border, #d9d5e6);border-radius:8px;padding:8px;min-height:40px}.dz-tabbar{display:flex;gap:4px;margin-bottom:8px;border-bottom:2px solid var(--mform-border, #d9d5e6)}.dz-tab{font:inherit;font-size:12px;padding:5px 12px;border:none;background:none;color:var(--mform-muted, #6b6580);cursor:pointer}.dz-tab.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600;border-bottom:2px solid var(--mform-primary, #6d4bd0);margin-bottom:-2px}.dz-leaf{pointer-events:none}.dz-props-empty{margin:4px 0}.dz-inspector{display:flex;flex-direction:column;gap:10px}.dz-inspector h3{margin:0;font-size:13px}.dz-inspector h3 code{color:var(--mform-muted, #6b6580);font-weight:400}.dz-prop{display:flex;flex-direction:column;gap:4px;font-size:12px}.dz-prop span{color:var(--mform-muted, #6b6580)}.dz-prop input,.dz-prop select,.dz-prop textarea{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--mform-border, #d9d5e6);border-radius:8px;background:#fff;width:100%;box-sizing:border-box}.dz-check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}.dz-check input{accent-color:var(--mform-primary, #6d4bd0)}.dz-section{border-top:1px solid var(--mform-border, #d9d5e6);padding-top:8px}.dz-section summary{font-size:12px;font-weight:600;cursor:pointer;margin-bottom:8px}.dz-section .dz-prop{margin-bottom:8px}.dz-option-row{display:flex;gap:6px;margin-bottom:6px}.dz-option-row input{flex:1;min-width:0;font-size:12px;padding:6px 8px;border:1px solid var(--mform-border, #d9d5e6);border-radius:6px}.dz-option-row button{border:none;background:none;cursor:pointer;color:var(--mform-muted, #6b6580)}.dz-add{font:inherit;font-size:12px;border:1px dashed var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0);background:none;border-radius:8px;padding:6px 10px;cursor:pointer}.dz-preview{padding:20px;overflow-y:auto}.dz-preview-data{margin-top:16px;font-size:12px}.dz-preview-data pre{background:var(--mform-surface, #fff);border:1px solid var(--mform-border, #d9d5e6);border-radius:8px;padding:10px;overflow-x:auto}\n"], dependencies: [{ kind: "component", type: DesignerNodeComponent, selector: "mform-designer-node", inputs: ["node", "path", "engine", "selected"], outputs: ["selectNode"] }, { kind: "component", type: InspectorComponent, selector: "mform-inspector", inputs: ["node", "schema"], outputs: ["nodePatch"] }, { kind: "component", type: FormRendererComponent, selector: "mform-renderer", inputs: ["schema", "source", "initialData", "optionsProviders", "messages", "validators", "mode", "submitHandler", "labels"], outputs: ["submitted", "valueChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, 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-viewports{display:flex;gap:4px;justify-content:center;margin-bottom:16px}.dz-viewports button{font:inherit;font-size:12px;padding:5px 12px;border:1px solid var(--mform-border, #d9d5e6);border-radius:999px;background:var(--mform-surface, #fff);color:var(--mform-muted, #6b6580);cursor:pointer}.dz-viewports button.is-on{background:var(--mform-primary, #6d4bd0);border-color:transparent;color:var(--mform-primary-contrast, #fff)}.dz-preview-frame{margin:0 auto;transition:max-width .16s}.dz-preview-frame.is-constrained{border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);padding:16px;background:var(--mform-surface, #fff);box-shadow:0 8px 28px #1f1b2e14}.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,
@@ -1780,14 +2103,16 @@ 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)="saveAsBlock()" [disabled]="!selected()" title="Save as reusable block">⊞</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)="unnestSelected()" [disabled]="!canUnnest()" [title]="labels().unnest">⇤</button>
+          <button type="button" (click)="nestSelected()" [disabled]="!canNest()" [title]="labels().nest">⇥</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) {
@@ -1796,12 +2121,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>
@@ -1816,20 +2141,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>
@@ -1846,42 +2171,70 @@ 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>
       }
 
       @if (preview()) {
         <div class="dz-preview">
-          <mform-renderer [schema]="draft()" (valueChanged)="previewData.set($event)" />
+          <div class="dz-viewports" role="group" [attr.aria-label]="labels().viewport">
+            @for (option of viewports; track option.id) {
+              <button
+                type="button"
+                [class.is-on]="viewport() === option.id"
+                (click)="viewport.set(option.id)"
+                [title]="option.width ? option.label + ' · ' + option.width + 'px' : option.label"
+              >{{ option.icon }} {{ option.label }}</button>
+            }
+          </div>
+          <div
+            class="dz-preview-frame"
+            [class.is-constrained]="viewportWidth() !== null"
+            [style.max-width.px]="viewportWidth()"
+          >
+            <mform-renderer [schema]="draft()" (valueChanged)="previewData.set($event)" />
+          </div>
           <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>
           }
 
@@ -1889,35 +2242,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             @for (node of draft().fields; track node.key; let i = $index) {
               <div
                 class="dz-dropzone"
-                [class.is-over]="isDropTarget([i])"
-                (dragover)="allowDrop([i], $event)"
-                (drop)="drop([i], $event)"
+                [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()"
-                (selectNode)="select($event)"
+                [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 — or drag it here — to start building.
+                {{ labels().canvasEmpty }}
               </div>
             }
             <div
               class="dz-dropzone is-last"
-              [class.is-over]="isDropTarget([draft().fields.length])"
-              (dragover)="allowDrop([draft().fields.length], $event)"
-              (drop)="drop([draft().fields.length], $event)"
+              [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 }" />
               }
@@ -1935,10 +2300,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">
@@ -2001,7 +2366,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>
             }
@@ -2013,15 +2378,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-dropzone{height:4px;border-radius:999px;transition:height .1s,background .1s}.dz-canvas.is-dragging .dz-dropzone{height:14px;background:repeating-linear-gradient(90deg,var(--mform-border, #d9d5e6) 0 6px,transparent 6px 12px)}.dz-canvas.is-dragging .dz-dropzone.is-over{height:22px;background:var(--mform-primary, #6d4bd0)}.dz-palette-row{display:flex;align-items:center;gap:2px}.dz-palette-row .dz-palette-item{flex:1;cursor:grab}.dz-block-remove{border:none;background:none;color:var(--mform-muted, #6b6580);cursor:pointer;font-size:11px;padding:2px 4px;opacity:0}.dz-palette-row:hover .dz-block-remove{opacity:1}.dz-node{position:relative;border:1px solid transparent;border-radius:var(--mform-radius, 10px);padding:20px 10px 10px;cursor:pointer;background:var(--mform-surface, #fff)}.dz-node:hover{border-color:var(--mform-border, #d9d5e6)}.dz-node.is-selected{border-color:var(--mform-primary, #6d4bd0);box-shadow:0 0 0 1px var(--mform-primary, #6d4bd0)}.dz-chip{position:absolute;top:2px;left:10px;font-size:10px;color:var(--mform-muted, #6b6580);pointer-events:none}.dz-node.is-selected>.dz-chip{color:var(--mform-primary, #6d4bd0);font-weight:600}.dz-children{display:flex;flex-direction:column;gap:8px}.dz-columns{display:grid;gap:10px}.dz-column{display:flex;flex-direction:column;gap:8px;border:1px dashed var(--mform-border, #d9d5e6);border-radius:8px;padding:8px;min-height:40px}.dz-tabbar{display:flex;gap:4px;margin-bottom:8px;border-bottom:2px solid var(--mform-border, #d9d5e6)}.dz-tab{font:inherit;font-size:12px;padding:5px 12px;border:none;background:none;color:var(--mform-muted, #6b6580);cursor:pointer}.dz-tab.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600;border-bottom:2px solid var(--mform-primary, #6d4bd0);margin-bottom:-2px}.dz-leaf{pointer-events:none}.dz-props-empty{margin:4px 0}.dz-inspector{display:flex;flex-direction:column;gap:10px}.dz-inspector h3{margin:0;font-size:13px}.dz-inspector h3 code{color:var(--mform-muted, #6b6580);font-weight:400}.dz-prop{display:flex;flex-direction:column;gap:4px;font-size:12px}.dz-prop span{color:var(--mform-muted, #6b6580)}.dz-prop input,.dz-prop select,.dz-prop textarea{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--mform-border, #d9d5e6);border-radius:8px;background:#fff;width:100%;box-sizing:border-box}.dz-check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}.dz-check input{accent-color:var(--mform-primary, #6d4bd0)}.dz-section{border-top:1px solid var(--mform-border, #d9d5e6);padding-top:8px}.dz-section summary{font-size:12px;font-weight:600;cursor:pointer;margin-bottom:8px}.dz-section .dz-prop{margin-bottom:8px}.dz-option-row{display:flex;gap:6px;margin-bottom:6px}.dz-option-row input{flex:1;min-width:0;font-size:12px;padding:6px 8px;border:1px solid var(--mform-border, #d9d5e6);border-radius:6px}.dz-option-row button{border:none;background:none;cursor:pointer;color:var(--mform-muted, #6b6580)}.dz-add{font:inherit;font-size:12px;border:1px dashed var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0);background:none;border-radius:8px;padding:6px 10px;cursor:pointer}.dz-preview{padding:20px;overflow-y:auto}.dz-preview-data{margin-top:16px;font-size:12px}.dz-preview-data pre{background:var(--mform-surface, #fff);border:1px solid var(--mform-border, #d9d5e6);border-radius:8px;padding:10px;overflow-x:auto}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], extraCatalog: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraCatalog", required: false }] }], schemaChanged: [{ type: i0.Output, args: ["schemaChanged"] }], blocks: [{ type: i0.Input, args: [{ isSignal: true, alias: "blocks", required: false }] }], blocksChanged: [{ type: i0.Output, args: ["blocksChanged"] }] } });
+  `, 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-viewports{display:flex;gap:4px;justify-content:center;margin-bottom:16px}.dz-viewports button{font:inherit;font-size:12px;padding:5px 12px;border:1px solid var(--mform-border, #d9d5e6);border-radius:999px;background:var(--mform-surface, #fff);color:var(--mform-muted, #6b6580);cursor:pointer}.dz-viewports button.is-on{background:var(--mform-primary, #6d4bd0);border-color:transparent;color:var(--mform-primary-contrast, #fff)}.dz-preview-frame{margin:0 auto;transition:max-width .16s}.dz-preview-frame.is-constrained{border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);padding:16px;background:var(--mform-surface, #fff);box-shadow:0 8px 28px #1f1b2e14}.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`).
@@ -2035,5 +2400,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