legalesign-document-viewer 0.10.2 → 0.10.4

package/dist/components/{p-j1rAIT-X.js → p-BQ7lEZmO.js}

@@ -1,24 +1,28 @@
-import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CLbfAJ0X.js';
-import { d as dvI18n } from './p-B8VmBxFg.js';
-import { f as findDimensions, r as recalculateCoordinates, h as findIn, d as defineCustomElement$3, o as oob } from './p-MG59mYF3.js';
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-DffaAVW4.js';
+import { d as dvI18n } from './p-Bp8hmhrC.js';
+import { f as findDimensions, r as recalculateCoordinates, h as findIn, d as defineCustomElement$3, o as oob } from './p-C6Wto5hV.js';
 import { D as DEFAULT_FONT_SIZE, F as FIELD_DEFAULTS, a as DEFAULT_FONT_NAME } from './p-B3gB_457.js';
 import { d as defaultRolePalette } from './p-BKrsDBDB.js';
-import { d as defineCustomElement$2 } from './p-CB9tEjJy.js';
-import { d as defineCustomElement$1 } from './p-BsreOXdY.js';
+import { d as defineCustomElement$2 } from './p-BT5rCW3w.js';
+import { d as defineCustomElement$1 } from './p-DZP-fvPJ.js';
 
 const SNAP_THRESHOLD = 8; // pixels proximity to trigger snap
 /**
  * Calculate snap positions for a dragging field against existing fields.
- * Snaps any outer edge (left/right/top/bottom) of the moving field to any
- * outer edge of every other field on the same page.
+ * Snaps edges and centers. Shows guides for ALL aligned edges at the snapped position.
  * All values are in zoomed pixel coordinates relative to the document frame.
  */
 function calculateSnap(dragLeft, dragTop, dragWidth, dragHeight, fields, currentPage, excludeIds) {
     const result = { x: null, y: null, guides: [] };
     const dragRight = dragLeft + dragWidth;
     const dragBottom = dragTop + dragHeight;
+    const dragCenterX = dragLeft + dragWidth / 2;
+    const dragCenterY = dragTop + dragHeight / 2;
     let closestDx = SNAP_THRESHOLD + 1;
     let closestDy = SNAP_THRESHOLD + 1;
+    let snappedX = dragLeft;
+    let snappedY = dragTop;
+    // First pass: find the closest snap distance per axis
     for (const field of fields) {
         if (field.dataItem?.page !== currentPage)
             continue;
@@ -28,50 +32,98 @@ function calculateSnap(dragLeft, dragTop, dragWidth, dragHeight, fields, current
         const fTop = field.offsetTop;
         const fRight = fLeft + field.offsetWidth;
         const fBottom = fTop + field.offsetHeight;
-        // X-axis: any dragged edge to any target edge
+        const fCenterX = fLeft + field.offsetWidth / 2;
+        const fCenterY = fTop + field.offsetHeight / 2;
         const xPairs = [
             { dragEdge: dragLeft, targetEdge: fLeft },
             { dragEdge: dragLeft, targetEdge: fRight },
             { dragEdge: dragRight, targetEdge: fLeft },
             { dragEdge: dragRight, targetEdge: fRight },
+            { dragEdge: dragCenterX, targetEdge: fCenterX },
         ];
         for (const { dragEdge, targetEdge } of xPairs) {
             const dist = Math.abs(dragEdge - targetEdge);
             if (dist < closestDx) {
                 closestDx = dist;
-                result.x = dragLeft + (targetEdge - dragEdge);
-                result.guides = result.guides.filter(g => g.orientation !== 'v');
-                result.guides.push({ orientation: 'v', position: targetEdge });
+                snappedX = dragLeft + (targetEdge - dragEdge);
             }
         }
-        // Y-axis: any dragged edge to any target edge
         const yPairs = [
             { dragEdge: dragTop, targetEdge: fTop },
             { dragEdge: dragTop, targetEdge: fBottom },
             { dragEdge: dragBottom, targetEdge: fTop },
             { dragEdge: dragBottom, targetEdge: fBottom },
+            { dragEdge: dragCenterY, targetEdge: fCenterY },
         ];
         for (const { dragEdge, targetEdge } of yPairs) {
             const dist = Math.abs(dragEdge - targetEdge);
             if (dist < closestDy) {
                 closestDy = dist;
-                result.y = dragTop + (targetEdge - dragEdge);
-                result.guides = result.guides.filter(g => g.orientation !== 'h');
-                result.guides.push({ orientation: 'h', position: targetEdge });
+                snappedY = dragTop + (targetEdge - dragEdge);
             }
         }
     }
-    if (closestDx > SNAP_THRESHOLD) {
-        result.x = null;
-        result.guides = result.guides.filter(g => g.orientation !== 'v');
+    if (closestDx > SNAP_THRESHOLD)
+        snappedX = dragLeft;
+    if (closestDy > SNAP_THRESHOLD)
+        snappedY = dragTop;
+    // Second pass: collect ALL guides that align at the snapped position
+    if (closestDx <= SNAP_THRESHOLD) {
+        result.x = snappedX;
+        const snappedRight = snappedX + dragWidth;
+        const snappedCenterX = snappedX + dragWidth / 2;
+        const guideSet = new Set();
+        for (const field of fields) {
+            if (field.dataItem?.page !== currentPage)
+                continue;
+            if (excludeIds && excludeIds.includes(field.dataItem?.id))
+                continue;
+            const fLeft = field.offsetLeft;
+            const fRight = fLeft + field.offsetWidth;
+            const fCenterX = fLeft + field.offsetWidth / 2;
+            for (const target of [fLeft, fRight, fCenterX]) {
+                if (Math.abs(snappedX - target) < 1 || Math.abs(snappedRight - target) < 1 || Math.abs(snappedCenterX - target) < 1) {
+                    guideSet.add(target);
+                }
+            }
+        }
+        guideSet.forEach(pos => result.guides.push({ orientation: 'v', position: pos }));
     }
-    if (closestDy > SNAP_THRESHOLD) {
-        result.y = null;
-        result.guides = result.guides.filter(g => g.orientation !== 'h');
+    if (closestDy <= SNAP_THRESHOLD) {
+        result.y = snappedY;
+        const snappedBottom = snappedY + dragHeight;
+        const snappedCenterY = snappedY + dragHeight / 2;
+        const guideSet = new Set();
+        for (const field of fields) {
+            if (field.dataItem?.page !== currentPage)
+                continue;
+            if (excludeIds && excludeIds.includes(field.dataItem?.id))
+                continue;
+            const fTop = field.offsetTop;
+            const fBottom = fTop + field.offsetHeight;
+            const fCenterY = fTop + field.offsetHeight / 2;
+            for (const target of [fTop, fBottom, fCenterY]) {
+                if (Math.abs(snappedY - target) < 1 || Math.abs(snappedBottom - target) < 1 || Math.abs(snappedCenterY - target) < 1) {
+                    guideSet.add(target);
+                }
+            }
+        }
+        guideSet.forEach(pos => result.guides.push({ orientation: 'h', position: pos }));
     }
     return result;
 }
 
+const preventSelect = (e) => e.preventDefault();
+function disableSelection() {
+    document.body.style.userSelect = 'none';
+    document.body.style.webkitUserSelect = 'none';
+    document.addEventListener('selectstart', preventSelect);
+}
+function enableSelection() {
+    document.body.style.userSelect = '';
+    document.body.style.webkitUserSelect = '';
+    document.removeEventListener('selectstart', preventSelect);
+}
 function updateSelectionBox() {
     var box = this.component.shadowRoot.getElementById('ls-box-selector');
     if (!this.selected || this.selected.length < 2) {
@@ -250,100 +302,189 @@ function mouseMove(event) {
     }
     // We have the mouse held down on a field edge to resize it.
     if (this.hitField && this.edgeSide && this.startMouse && event.buttons === 1) {
+        disableSelection();
         const movedX = event.screenX - this.startMouse.x;
         const movedY = event.screenY - this.startMouse.y;
-        var width = this.hitField.dataItem.width;
-        var height = this.hitField.dataItem.height;
         var scale = this.hitField.dataItem.formElementType === 'signature' && this._template.fixSignatureScale;
         switch (this.edgeSide) {
             case 'n':
-                if (outOfBounds({ ...this.hitField.dataItem, top: (this.startMouse.top + movedY) / this.zoom, height: (this.startMouse.height - movedY) / this.zoom }))
-                    break;
-                this.hitField.style.top = this.startMouse.top + movedY + 'px';
-                this.hitField.style.height = this.startMouse.height - movedY + 'px';
                 if (scale) {
-                    width = (this.startMouse.height - movedY) * 3.8;
-                    this.hitField.style.width = width + 'px';
+                    const newHeight = this.startMouse.height - movedY;
+                    const aspectRatio = this.startMouse.width / this.startMouse.height;
+                    const newWidth = newHeight * aspectRatio;
+                    if (outOfBounds({ ...this.hitField.dataItem, top: (this.startMouse.top + movedY) / this.zoom, height: newHeight / this.zoom, width: newWidth / this.zoom }))
+                        break;
+                    this.hitField.style.top = this.startMouse.top + movedY + 'px';
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, top: (this.startMouse.top + movedY) / this.zoom, height: newHeight / this.zoom, width: newWidth / this.zoom };
+                }
+                else {
+                    if (outOfBounds({ ...this.hitField.dataItem, top: (this.startMouse.top + movedY) / this.zoom, height: (this.startMouse.height - movedY) / this.zoom }))
+                        break;
+                    this.hitField.style.top = this.startMouse.top + movedY + 'px';
+                    this.hitField.style.height = this.startMouse.height - movedY + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, top: (this.startMouse.top + movedY) / this.zoom, height: (this.startMouse.height - movedY) / this.zoom };
                 }
-                this.hitField.dataItem = { ...this.hitField.dataItem, top: (this.startMouse.top + movedY) / this.zoom, height: (this.startMouse.height - movedY) / this.zoom, width };
                 break;
             case 's':
-                if (outOfBounds({ ...this.hitField.dataItem, height: (this.startMouse.height + movedY) / this.zoom }))
-                    break;
-                this.hitField.style.height = this.startMouse.height + movedY + 'px';
                 if (scale) {
-                    width = (this.startMouse.height + movedY) * 3.8;
-                    this.hitField.style.width = width + 'px';
+                    const newHeight = this.startMouse.height + movedY;
+                    const aspectRatio = this.startMouse.width / this.startMouse.height;
+                    const newWidth = newHeight * aspectRatio;
+                    if (outOfBounds({ ...this.hitField.dataItem, height: newHeight / this.zoom, width: newWidth / this.zoom }))
+                        break;
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, height: newHeight / this.zoom, width: newWidth / this.zoom };
+                }
+                else {
+                    if (outOfBounds({ ...this.hitField.dataItem, height: (this.startMouse.height + movedY) / this.zoom }))
+                        break;
+                    this.hitField.style.height = this.startMouse.height + movedY + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, height: (this.startMouse.height + movedY) / this.zoom };
                 }
-                this.hitField.dataItem = { ...this.hitField.dataItem, height: (this.startMouse.height + movedY) / this.zoom, width };
                 break;
             case 'e':
-                if (outOfBounds({ ...this.hitField.dataItem, width: (this.startMouse.width + movedX) / this.zoom }))
-                    break;
-                this.hitField.style.width = this.startMouse.width + movedX + 'px';
                 if (scale) {
-                    height = Math.round((this.startMouse.width + movedX) / 3.8);
-                    this.hitField.style.height = height + 'px';
+                    const newWidth = this.startMouse.width + movedX;
+                    const aspectRatio = this.startMouse.height / this.startMouse.width;
+                    const newHeight = newWidth * aspectRatio;
+                    if (outOfBounds({ ...this.hitField.dataItem, width: newWidth / this.zoom, height: newHeight / this.zoom }))
+                        break;
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, width: newWidth / this.zoom, height: newHeight / this.zoom };
+                }
+                else {
+                    if (outOfBounds({ ...this.hitField.dataItem, width: (this.startMouse.width + movedX) / this.zoom }))
+                        break;
+                    this.hitField.style.width = this.startMouse.width + movedX + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, width: (this.startMouse.width + movedX) / this.zoom };
                 }
-                this.hitField.dataItem = { ...this.hitField.dataItem, width: (this.startMouse.width + movedX) / this.zoom, height };
                 break;
             case 'w':
-                if (outOfBounds({ ...this.hitField.dataItem, left: (this.startMouse.left + movedX) / this.zoom, width: (this.startMouse.width - movedX) / this.zoom }))
-                    break;
-                this.hitField.style.left = this.startMouse.left + movedX + 'px';
-                this.hitField.style.width = this.startMouse.width - movedX + 'px';
                 if (scale) {
-                    height = Math.round((this.startMouse.width - movedX) / 3.8);
-                    this.hitField.style.height = height + 'px';
+                    const newWidth = this.startMouse.width - movedX;
+                    const aspectRatio = this.startMouse.height / this.startMouse.width;
+                    const newHeight = newWidth * aspectRatio;
+                    if (outOfBounds({ ...this.hitField.dataItem, left: (this.startMouse.left + movedX) / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom }))
+                        break;
+                    this.hitField.style.left = this.startMouse.left + movedX + 'px';
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, left: (this.startMouse.left + movedX) / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom };
+                }
+                else {
+                    if (outOfBounds({ ...this.hitField.dataItem, left: (this.startMouse.left + movedX) / this.zoom, width: (this.startMouse.width - movedX) / this.zoom }))
+                        break;
+                    this.hitField.style.left = this.startMouse.left + movedX + 'px';
+                    this.hitField.style.width = this.startMouse.width - movedX + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, left: (this.startMouse.left + movedX) / this.zoom, width: (this.startMouse.width - movedX) / this.zoom };
                 }
-                this.hitField.dataItem = { ...this.hitField.dataItem, left: (this.startMouse.left + movedX) / this.zoom, width: (this.startMouse.width - movedX) / this.zoom, height };
                 break;
             case 'se': {
-                const newWidth = (this.startMouse.width + movedX) / this.zoom;
-                const newHeight = (this.startMouse.height + movedY) / this.zoom;
-                if (outOfBounds({ ...this.hitField.dataItem, width: newWidth, height: newHeight }))
-                    break;
-                this.hitField.style.width = this.startMouse.width + movedX + 'px';
-                this.hitField.style.height = this.startMouse.height + movedY + 'px';
-                this.hitField.dataItem = { ...this.hitField.dataItem, width: newWidth, height: newHeight };
+                if (scale) {
+                    const aspectRatio = this.startMouse.width / this.startMouse.height;
+                    const newWidth = this.startMouse.width + movedX;
+                    const newHeight = newWidth / aspectRatio;
+                    if (outOfBounds({ ...this.hitField.dataItem, width: newWidth / this.zoom, height: newHeight / this.zoom }))
+                        break;
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, width: newWidth / this.zoom, height: newHeight / this.zoom };
+                }
+                else {
+                    const newWidth = (this.startMouse.width + movedX) / this.zoom;
+                    const newHeight = (this.startMouse.height + movedY) / this.zoom;
+                    if (outOfBounds({ ...this.hitField.dataItem, width: newWidth, height: newHeight }))
+                        break;
+                    this.hitField.style.width = this.startMouse.width + movedX + 'px';
+                    this.hitField.style.height = this.startMouse.height + movedY + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, width: newWidth, height: newHeight };
+                }
                 break;
             }
             case 'nw': {
-                const newLeft = (this.startMouse.left + movedX) / this.zoom;
-                const newTop = (this.startMouse.top + movedY) / this.zoom;
-                const newWidth = (this.startMouse.width - movedX) / this.zoom;
-                const newHeight = (this.startMouse.height - movedY) / this.zoom;
-                if (outOfBounds({ ...this.hitField.dataItem, left: newLeft, top: newTop, width: newWidth, height: newHeight }))
-                    break;
-                this.hitField.style.left = this.startMouse.left + movedX + 'px';
-                this.hitField.style.top = this.startMouse.top + movedY + 'px';
-                this.hitField.style.width = this.startMouse.width - movedX + 'px';
-                this.hitField.style.height = this.startMouse.height - movedY + 'px';
-                this.hitField.dataItem = { ...this.hitField.dataItem, left: newLeft, top: newTop, width: newWidth, height: newHeight };
+                if (scale) {
+                    const aspectRatio = this.startMouse.width / this.startMouse.height;
+                    const newWidth = this.startMouse.width - movedX;
+                    const newHeight = newWidth / aspectRatio;
+                    const newLeft = this.startMouse.left + movedX;
+                    const newTop = this.startMouse.top + (this.startMouse.height - newHeight);
+                    if (outOfBounds({ ...this.hitField.dataItem, left: newLeft / this.zoom, top: newTop / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom }))
+                        break;
+                    this.hitField.style.left = newLeft + 'px';
+                    this.hitField.style.top = newTop + 'px';
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, left: newLeft / this.zoom, top: newTop / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom };
+                }
+                else {
+                    const newLeft = (this.startMouse.left + movedX) / this.zoom;
+                    const newTop = (this.startMouse.top + movedY) / this.zoom;
+                    const newWidth = (this.startMouse.width - movedX) / this.zoom;
+                    const newHeight = (this.startMouse.height - movedY) / this.zoom;
+                    if (outOfBounds({ ...this.hitField.dataItem, left: newLeft, top: newTop, width: newWidth, height: newHeight }))
+                        break;
+                    this.hitField.style.left = this.startMouse.left + movedX + 'px';
+                    this.hitField.style.top = this.startMouse.top + movedY + 'px';
+                    this.hitField.style.width = this.startMouse.width - movedX + 'px';
+                    this.hitField.style.height = this.startMouse.height - movedY + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, left: newLeft, top: newTop, width: newWidth, height: newHeight };
+                }
                 break;
             }
             case 'ne': {
-                const newWidth = (this.startMouse.width + movedX) / this.zoom;
-                const newTop = (this.startMouse.top + movedY) / this.zoom;
-                const newHeight = (this.startMouse.height - movedY) / this.zoom;
-                if (outOfBounds({ ...this.hitField.dataItem, top: newTop, width: newWidth, height: newHeight }))
-                    break;
-                this.hitField.style.width = this.startMouse.width + movedX + 'px';
-                this.hitField.style.top = this.startMouse.top + movedY + 'px';
-                this.hitField.style.height = this.startMouse.height - movedY + 'px';
-                this.hitField.dataItem = { ...this.hitField.dataItem, top: newTop, width: newWidth, height: newHeight };
+                if (scale) {
+                    const aspectRatio = this.startMouse.width / this.startMouse.height;
+                    const newWidth = this.startMouse.width + movedX;
+                    const newHeight = newWidth / aspectRatio;
+                    const newTop = this.startMouse.top + (this.startMouse.height - newHeight);
+                    if (outOfBounds({ ...this.hitField.dataItem, top: newTop / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom }))
+                        break;
+                    this.hitField.style.top = newTop + 'px';
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, top: newTop / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom };
+                }
+                else {
+                    const newWidth = (this.startMouse.width + movedX) / this.zoom;
+                    const newTop = (this.startMouse.top + movedY) / this.zoom;
+                    const newHeight = (this.startMouse.height - movedY) / this.zoom;
+                    if (outOfBounds({ ...this.hitField.dataItem, top: newTop, width: newWidth, height: newHeight }))
+                        break;
+                    this.hitField.style.width = this.startMouse.width + movedX + 'px';
+                    this.hitField.style.top = this.startMouse.top + movedY + 'px';
+                    this.hitField.style.height = this.startMouse.height - movedY + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, top: newTop, width: newWidth, height: newHeight };
+                }
                 break;
             }
             case 'sw': {
-                const newLeft = (this.startMouse.left + movedX) / this.zoom;
-                const newWidth = (this.startMouse.width - movedX) / this.zoom;
-                const newHeight = (this.startMouse.height + movedY) / this.zoom;
-                if (outOfBounds({ ...this.hitField.dataItem, left: newLeft, width: newWidth, height: newHeight }))
-                    break;
-                this.hitField.style.left = this.startMouse.left + movedX + 'px';
-                this.hitField.style.width = this.startMouse.width - movedX + 'px';
-                this.hitField.style.height = this.startMouse.height + movedY + 'px';
-                this.hitField.dataItem = { ...this.hitField.dataItem, left: newLeft, width: newWidth, height: newHeight };
+                if (scale) {
+                    const aspectRatio = this.startMouse.width / this.startMouse.height;
+                    const newWidth = this.startMouse.width - movedX;
+                    const newHeight = newWidth / aspectRatio;
+                    const newLeft = this.startMouse.left + movedX;
+                    if (outOfBounds({ ...this.hitField.dataItem, left: newLeft / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom }))
+                        break;
+                    this.hitField.style.left = newLeft + 'px';
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, left: newLeft / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom };
+                }
+                else {
+                    const newLeft = (this.startMouse.left + movedX) / this.zoom;
+                    const newWidth = (this.startMouse.width - movedX) / this.zoom;
+                    const newHeight = (this.startMouse.height + movedY) / this.zoom;
+                    if (outOfBounds({ ...this.hitField.dataItem, left: newLeft, width: newWidth, height: newHeight }))
+                        break;
+                    this.hitField.style.left = this.startMouse.left + movedX + 'px';
+                    this.hitField.style.width = this.startMouse.width - movedX + 'px';
+                    this.hitField.style.height = this.startMouse.height + movedY + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, left: newLeft, width: newWidth, height: newHeight };
+                }
                 break;
             }
         }
@@ -368,7 +509,7 @@ function mouseMove(event) {
     }
     else if (this.startLocations && !this.edgeSide && this.startMouse && event.buttons === 1) {
         this.isMoving = true;
-        document.body.style.userSelect = 'none';
+        disableSelection();
         var box = this.component.shadowRoot.getElementById('ls-box-selector');
         box.style.visibility = 'hidden';
         // Dismiss any open date picker when moving fields
@@ -414,7 +555,7 @@ function mouseUp(event) {
     this.edgeSide = null;
     this.startMouse = null;
     this.component.style.cursor = 'auto';
-    document.body.style.userSelect = '';
+    enableSelection();
     clearSnapGuides.bind(this)();
     // find what was inside the selection box emit the select event and change their style
     if (this.selectionBox && this.isBoxing) {
@@ -533,12 +674,8 @@ function toolboxDragStart(fieldData) {
     const zoom = this.zoom;
     this._isToolboxDragging = true;
     let hasMoved = false;
-    // Prevent text selection during drag and set grabbing cursor
-    document.body.style.userSelect = 'none';
-    const cursorStyle = document.createElement('style');
-    cursorStyle.id = 'ls-drag-cursor';
-    cursorStyle.textContent = '* { cursor: grabbing !important; }';
-    document.head.appendChild(cursorStyle);
+    // Prevent text selection during drag
+    disableSelection();
     // Add dragging class to toolbox fields (shadow DOM cursor override)
     this.component.shadowRoot.querySelectorAll('ls-left-bar, ls-compose-loader').forEach(bar => {
         bar.shadowRoot?.querySelectorAll('ls-toolbox-field').forEach(el => el.classList.add('ls-dv-dragging'));
@@ -549,7 +686,7 @@ function toolboxDragStart(fieldData) {
     ghost.style.position = 'fixed';
     ghost.style.width = fieldData.defaultWidth * zoom + 'px';
     ghost.style.height = fieldData.defaultHeight * zoom + 'px';
-    ghost.style.border = `2px dashed ${defaultRolePalette[this.signer % 100].s60}`;
+    ghost.style.border = `1px dashed ${defaultRolePalette[this.signer % 100].s60}`;
     const s20 = defaultRolePalette[this.signer % 100].s20.replace('#', '');
     const r = parseInt(s20.substring(0, 2), 16);
     const g = parseInt(s20.substring(2, 4), 16);
@@ -559,16 +696,40 @@ function toolboxDragStart(fieldData) {
     ghost.style.pointerEvents = 'none';
     ghost.style.zIndex = '10000';
     ghost.style.visibility = 'hidden';
-    ghost.style.boxSizing = 'border-box';
+    ghost.style.boxSizing = 'content-box';
     ghost.style.fontFamily = 'var(--font-family, IBM Plex Sans, sans-serif)';
     ghost.style.fontSize = Math.round(DEFAULT_FONT_SIZE * zoom) + 'px';
     ghost.style.color = defaultRolePalette[this.signer % 100].s100;
-    ghost.style.overflow = 'hidden';
+    ghost.style.overflow = 'visible';
     ghost.style.whiteSpace = 'nowrap';
     ghost.style.display = 'flex';
     ghost.style.alignItems = 'center';
     ghost.style.textTransform = 'capitalize';
     ghost.innerHTML = fieldData.formElementType;
+    // Assignee label below ghost
+    const assignee = this.mode === 'compose'
+        ? this._recipients?.find(r => r.signerIndex === this.signer)
+        : this._template.roles.find(r => r.signerIndex === this.signer);
+    const assigneeName = this.mode === 'compose' && assignee?.previousRecipientDecides
+        ? 'To Be Decided'
+        : this.mode === 'compose'
+            ? `${assignee?.firstName} ${assignee?.lastName}`
+            : assignee?.name || (this.signer === 0 ? 'Sender' : `Participant ${this.signer}`);
+    const assigneeLabel = document.createElement('p');
+    assigneeLabel.style.position = 'absolute';
+    assigneeLabel.style.color = 'var(--gray-80, #3a3a3a)';
+    assigneeLabel.style.bottom = `-${1 * zoom}rem`;
+    assigneeLabel.style.left = '0';
+    assigneeLabel.style.margin = '0';
+    assigneeLabel.style.padding = '0';
+    assigneeLabel.style.lineHeight = '1';
+    assigneeLabel.style.fontSize = `${0.625 * zoom}rem`;
+    assigneeLabel.style.whiteSpace = 'nowrap';
+    assigneeLabel.style.fontFamily = 'sans-serif';
+    assigneeLabel.style.textTransform = 'none';
+    assigneeLabel.style.pointerEvents = 'none';
+    assigneeLabel.textContent = `${dvI18n.t('fieldproperties.assignedto')} ${assigneeName}`;
+    ghost.appendChild(assigneeLabel);
     this.component.shadowRoot.appendChild(ghost);
     // Info chip at bottom of screen
     const chip = document.createElement('div');
@@ -593,11 +754,25 @@ function toolboxDragStart(fieldData) {
         hasMoved = true;
         const dragWidth = fieldData.defaultWidth * zoom;
         const dragHeight = fieldData.defaultHeight * zoom;
-        ghost.style.visibility = 'visible';
         const frameRect = frame.getBoundingClientRect();
         const isOverFrame = e.clientX >= frameRect.left && e.clientX <= frameRect.right &&
             e.clientY >= frameRect.top && e.clientY <= frameRect.bottom;
+        const isDragging = e.buttons === 1;
+        // Only show grabbing cursor when ghost is visible
+        let cursorStyle = document.getElementById('ls-drag-cursor');
+        if ((isOverFrame || isDragging) && !cursorStyle) {
+            cursorStyle = document.createElement('style');
+            cursorStyle.id = 'ls-drag-cursor';
+            cursorStyle.textContent = '* { cursor: grabbing !important; }';
+            document.head.appendChild(cursorStyle);
+        }
+        else if (!isOverFrame && !isDragging && cursorStyle) {
+            cursorStyle.remove();
+        }
+        // When dragging (mouse held): show ghost over wrapper area
+        // When click-to-place (mouse not held): only show over document frame
         if (isOverFrame) {
+            ghost.style.visibility = 'visible';
             ghost.style.opacity = '1';
             const x = e.clientX - frameRect.left + frame.scrollLeft;
             const y = e.clientY - frameRect.top + frame.scrollTop;
@@ -609,12 +784,17 @@ function toolboxDragStart(fieldData) {
             ghost.style.top = (snap.y !== null ? snap.y + frameRect.top - frame.scrollTop : e.clientY - dragHeight / 2) + 'px';
             showSnapGuides.bind(this)(snap.guides);
         }
-        else {
+        else if (isDragging) {
+            ghost.style.visibility = 'visible';
             ghost.style.opacity = '0.5';
             ghost.style.left = (e.clientX - dragWidth / 2) + 'px';
             ghost.style.top = (e.clientY - dragHeight / 2) + 'px';
             clearSnapGuides.bind(this)();
         }
+        else {
+            ghost.style.visibility = 'hidden';
+            clearSnapGuides.bind(this)();
+        }
     };
     const cleanup = () => {
         document.removeEventListener('mousemove', onMouseMove);
@@ -623,7 +803,7 @@ function toolboxDragStart(fieldData) {
         ghost.remove();
         chip.remove();
         clearSnapGuides.bind(this)();
-        document.body.style.userSelect = '';
+        enableSelection();
         const cursorStyle = document.getElementById('ls-drag-cursor');
         if (cursorStyle)
             cursorStyle.remove();
@@ -809,10 +989,10 @@ const LsFieldDistribute = /*@__PURE__*/ proxyCustomElement(class LsFieldDistribu
         this.mutate.emit(diffs);
     }
     distributeHorizontal() {
+        if (!this.dataItem || this.dataItem.length < 3)
+            return;
         var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space');
         const sorted = this.dataItem.sort((a, b) => a.left - b.left);
-        if (sorted.length < 3)
-            return;
         var avgspace = 0;
         const leftmost = sorted[0].left + sorted[0].width / 2;
         const rightmost = sorted.reduce((acc, cur) => {
@@ -844,6 +1024,8 @@ const LsFieldDistribute = /*@__PURE__*/ proxyCustomElement(class LsFieldDistribu
         this.mutate.emit(diffs);
     }
     gapVertical(spacing) {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return;
         const sorted = this.dataItem.sort((a, b) => a.top - b.top);
         var buffer = sorted[0].top;
         const diffs = sorted.map(c => {
@@ -867,6 +1049,8 @@ const LsFieldDistribute = /*@__PURE__*/ proxyCustomElement(class LsFieldDistribu
         this.mutate.emit(diffs);
     }
     gapHorizontal(spacing) {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return;
         const sorted = this.dataItem.sort((a, b) => a.top - b.top);
         var buffer = sorted[0].left;
         const diffs = sorted.map(c => {
@@ -891,32 +1075,24 @@ const LsFieldDistribute = /*@__PURE__*/ proxyCustomElement(class LsFieldDistribu
         this.mutate.emit(diffs);
     }
     distributeVertical() {
-        var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space');
-        var avgspace = 0;
+        if (!this.dataItem || this.dataItem.length < 3)
+            return;
         const sorted = this.dataItem.sort((a, b) => a.top - b.top);
-        const topmost = sorted[0].top + sorted[0].height / 2;
-        const bottommost = sorted.reduce((acc, cur) => {
-            return cur.top + (cur.height / 2) > acc ? cur.top + (cur.height / 2) : acc;
-        }, topmost);
-        // find total width between centre first and centre last
-        const totalHeight = bottommost - topmost;
-        if (spacing.value !== '') {
-            avgspace = parseInt(spacing.value);
-        }
-        else {
-            avgspace = Math.floor(totalHeight / (sorted.length - 1));
-        }
-        const filtered = sorted.filter((c, index) => {
-            return outOfBounds({ ...c, left: Math.floor(topmost - (c.height / 2) + avgspace * index) }) === false
-                && index !== 0
-                && index !== sorted.length - 1;
-        });
-        const diffs = filtered.map((c, index) => {
+        const firstBottom = sorted[0].top + sorted[0].height;
+        const lastTop = sorted[sorted.length - 1].top;
+        const availableSpace = lastTop - firstBottom;
+        const middleFieldsHeight = sorted.slice(1, -1).reduce((sum, field) => sum + field.height, 0);
+        const numGaps = sorted.length - 1;
+        const gap = Math.max(0, (availableSpace - middleFieldsHeight) / numGaps);
+        let currentTop = sorted[0].top + sorted[0].height + gap;
+        const diffs = sorted.slice(1, -1).map((c) => {
+            const newTop = Math.floor(currentTop);
+            currentTop += c.height + gap;
             return {
                 action: 'update',
                 data: {
                     ...c,
-                    top: Math.floor(topmost - (c.height / 2) + (avgspace * (index + 1))),
+                    top: newTop,
                 },
             };
         });
@@ -926,15 +1102,15 @@ const LsFieldDistribute = /*@__PURE__*/ proxyCustomElement(class LsFieldDistribu
     componentDidLoad() {
     }
     render() {
-        return (h(Host, { key: '56f966a535e8f922b26c8cb54cf6665d44910f5e' }, h("div", { key: 'f070810aa48fdc91969557ed530df85a9e348a69', class: 'ls-dv-field-properties-section' }, h("div", { key: 'e1a26c95992928568d2ee15698271a5dc64c4451', class: 'ls-dv-field-properties-section-text' }, h("p", { key: '0bcf794aa4354342aafa27c445da23a5137fec24', class: 'ls-dv-field-properties-section-title' }, dvI18n.t('placement.distribution')), h("p", { key: 'c8954ef063c9b9621a9b936c24e5a66f1a43e34b', class: 'ls-dv-field-properties-section-description' }, dvI18n.t('placement.distributiondescription'))), h("div", { key: 'aea726ed81c4f338ba062483a8817187c8c9b057', class: 'ls-dv-button-group' }, h("button", { key: 'dc82813a701f5cade56af5a7c40f7db80dd9dc3a', onClick: () => {
+        return (h(Host, { key: '57be31baf13ebcc0f22a87fb357c1e909a2f2f92' }, h("div", { key: '913ccc6218e4b1f5a62209efce83071d4ff9fafc', class: 'ls-dv-field-properties-section' }, h("div", { key: '7f102602755314f06e1c3b47e14e84231a735eef', class: 'ls-dv-field-properties-section-text' }, h("p", { key: '187c445e9f1e48614584346318feb52e2fff8556', class: 'ls-dv-field-properties-section-title' }, dvI18n.t('placement.distribution')), h("p", { key: '6a6383b9df8541c41d862f68c9f6c78013a0b73c', class: 'ls-dv-field-properties-section-description' }, dvI18n.t('placement.distributiondescription'))), h("div", { key: 'a5d0e949746bae9ab910c80f2a6e8c9dce75dbd5', class: 'ls-dv-button-group' }, h("button", { key: 'a3726734b194b794bb977a4efd309f7143d9bb69', onClick: () => {
                 this.distributeVertical();
-            }, "aria-label": dvI18n.t('alignment.distributevertically'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.distributevertically'), disabled: this.readonly }, h("ls-icon", { key: '0227863069afb084f820aaccfd9bd1984e79f10d', name: "field-distribute-vertically-icon" })), h("button", { key: '820d383d045d4a719ce8ef23e1fa12b16aed265f', onClick: () => {
+            }, "aria-label": dvI18n.t('alignment.distributevertically'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.distributevertically'), disabled: this.readonly }, h("ls-icon", { key: '96c4ce2b7b5352a99ed26787c85f0505ae4fcc6b', name: "field-distribute-vertically-icon" })), h("button", { key: 'b9a96c6b3289ddd237179063e085c23bc6eb3663', onClick: () => {
                 this.distributeHorizontal();
-            }, "aria-label": dvI18n.t('alignment.distributehorizontally'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.distributehorizontally'), disabled: this.readonly }, h("ls-icon", { key: '1cbc62ba1ea65c63d6ff2cffb8b8b8f616e823ca', name: "field-distribute-horizontally-icon" })))), h("div", { key: '862a48f72f56cfad6edfc08ccc9df8566245c948', class: 'ls-dv-field-properties-section' }, h("div", { key: '85f6591763a0c8bbc2ac0774f81e1372029bdc53', class: 'ls-dv-field-properties-section-text' }, h("p", { key: '8fff6072497b1fac6f903eb4b7d9b4ede6601ef6', class: 'ls-dv-field-properties-section-title' }, dvI18n.t('placement.gap')), h("p", { key: '73e6b2a00c9b391fd35ec468b02909601fdd3a25', class: 'ls-dv-field-properties-section-description' }, dvI18n.t('placement.gapdescription'))), h("div", { key: '656418e594632ab5ffa29b46f5b6539c6dbdd981', class: 'ls-dv-input-row' }, h("div", { key: 'c7a10c323f60861b30a26f03606e0f7aa92d51ef', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('placement.setverticalgap') }, h("ls-icon", { key: 'cdbbcb89ab6d3cd7b74e2395ff25cc602326e34d', id: "selectLeadingIcon", name: "field-distribute-vertically-icon" }), h("input", { key: '2e45e83bbe4d7ac4f68d94eb9e70944cef07dbd9', type: "number", class: 'ls-dv-has-leading-icon', id: "ls-fix-vertical-space", onChange: e => {
+            }, "aria-label": dvI18n.t('alignment.distributehorizontally'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.distributehorizontally'), disabled: this.readonly }, h("ls-icon", { key: '27a9f65617e16a07d601de53e5570e2d9831960c', name: "field-distribute-horizontally-icon" })))), h("div", { key: '3cfec98f4de47bd4f7f106aabaea219b40482564', class: 'ls-dv-field-properties-section' }, h("div", { key: '31c5bd2ed10f7c7e5203d1cece96a9aecd6a59f0', class: 'ls-dv-field-properties-section-text' }, h("p", { key: '5fe76aabfdfae6f4c0251ed2d23a472ba6b9daee', class: 'ls-dv-field-properties-section-title' }, dvI18n.t('placement.gap')), h("p", { key: '87cc8c0961ede86283d413813e96d42ffb41765f', class: 'ls-dv-field-properties-section-description' }, dvI18n.t('placement.gapdescription'))), h("div", { key: 'dc033f1b292825bf64b06e3c0c8f09d3fa78830c', class: 'ls-dv-input-row' }, h("div", { key: 'cafaa3f295fb0c24f6d67cfd4ee8a743a9f73cb1', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('placement.setverticalgap') }, h("ls-icon", { key: '889436667ef89ad9e9d0fca9a8e3666720036783', id: "selectLeadingIcon", name: "field-distribute-vertically-icon" }), h("input", { key: 'f753f53b100450b872581d2bbc7fd66b6062d479', type: "number", class: 'ls-dv-has-leading-icon', id: "ls-fix-vertical-space", onChange: e => {
                 this.gapVertical(parseInt(e.target.value));
-            }, min: 0, max: 9999, value: '', size: 4, disabled: this.readonly })), h("div", { key: '9c3b3c812a0146f28da6147962875a692752d1aa', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('placement.sethorizontalgap') }, h("ls-icon", { key: 'dcc63604c1281b6aef939007d3c37cac039532a7', id: "selectLeadingIcon", name: "field-distribute-horizontally-icon" }), h("input", { key: '7de0252c577005ecbb09848d4490db90b1f7aa36', type: "number", class: 'ls-dv-has-leading-icon', id: "ls-fix-horizontal-space", onChange: e => {
+            }, min: 0, max: 9999, value: '', size: 4, disabled: this.readonly })), h("div", { key: '191371a18ff9ddb71e800220c50af942d83e4630', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('placement.sethorizontalgap') }, h("ls-icon", { key: 'f860ecf1213034604e410a43febb7f95f675d387', id: "selectLeadingIcon", name: "field-distribute-horizontally-icon" }), h("input", { key: '56f64b5e2548de9772831d925b1f99f1038e8514', type: "number", class: 'ls-dv-has-leading-icon', id: "ls-fix-horizontal-space", onChange: e => {
                 this.gapHorizontal(parseInt(e.target.value));
-            }, min: 0, max: 9999, value: '', size: 4, disabled: this.readonly })))), h("ls-tooltip", { key: 'dd415c0c2c8eb33ca5425fbccf6554f8a5bf5244', tooltipId: "ls-dv-tooltip" }), h("slot", { key: '5e830d31e15e188f9260e52d099f84192486afca' })));
+            }, min: 0, max: 9999, value: '', size: 4, disabled: this.readonly })))), h("ls-tooltip", { key: 'c75fba59ca3fb9e50a108f153ecd2353cfefb8fe', tooltipId: "ls-dv-tooltip" }), h("slot", { key: '987d6eb4a9990f7ce0a8ba7b9a1a8b489bd4c5a1' })));
     }
     static get style() { return lsFieldDistributeCss(); }
 }, [769, "ls-field-distribute", {
@@ -972,6 +1148,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldDistribute as L, mouseDown as a, mouseMove as b, mouseUp as c, defineCustomElement as d, mouseDoubleClick as e, mouseClick as m, toolboxDragStart as t, updateSelectionBox as u };
-//# sourceMappingURL=p-j1rAIT-X.js.map
+//# sourceMappingURL=p-BQ7lEZmO.js.map
 
-//# sourceMappingURL=p-j1rAIT-X.js.map
+//# sourceMappingURL=p-BQ7lEZmO.js.map