@unlev/exeq 0.2.2 → 0.3.0

package/dist/index.js

@@ -56,7 +56,7 @@ __export(lib_exports, {
 module.exports = __toCommonJS(lib_exports);
 
 // src/components/pdf-builder/DesignerView.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/types/pdf-builder.ts
@@ -196,11 +196,14 @@ async function renderPdfPages(source, scale = 2) {
     canvas.height = viewport.height;
     const ctx = canvas.getContext("2d");
     await page.render({ canvasContext: ctx, viewport }).promise;
+    const unscaledViewport = page.getViewport({ scale: 1 });
     pages.push({
       pageNumber: i,
       dataUrl: canvas.toDataURL("image/png"),
       width: viewport.width,
-      height: viewport.height
+      height: viewport.height,
+      pdfWidth: unscaledViewport.width,
+      pdfHeight: unscaledViewport.height
     });
   }
   return pages;
@@ -219,23 +222,69 @@ function PdfViewer({
   onPageClick,
   onDropField,
   onGroupMove,
+  onMoveEnd,
   mode,
   currentSigner,
-  renderFieldContent
+  renderFieldContent,
+  zoom = 1,
+  onMarqueeSelect
 }) {
   const containerRef = (0, import_react.useRef)(null);
-  const handlePageClick = (0, import_react.useCallback)((e, pageIndex) => {
+  const [guides, setGuides] = (0, import_react.useState)([]);
+  const [marquee, setMarquee] = (0, import_react.useState)(null);
+  const marqueeRef = (0, import_react.useRef)(null);
+  const handlePageMouseDown = (0, import_react.useCallback)((e, pageIndex) => {
     const target = e.target;
     if (target.closest(".field-overlay")) return;
-    if (onPageClick) {
-      const rect = e.currentTarget.getBoundingClientRect();
-      const x = (e.clientX - rect.left) / rect.width * 100;
-      const y = (e.clientY - rect.top) / rect.height * 100;
-      onPageClick(pageIndex, x, y);
-    } else {
-      onSelectField(null);
-    }
-  }, [onPageClick, onSelectField]);
+    if (mode !== "designer") return;
+    e.preventDefault();
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = (e.clientX - rect.left) / rect.width * 100;
+    const y = (e.clientY - rect.top) / rect.height * 100;
+    marqueeRef.current = { startX: x, startY: y, page: pageIndex, didDrag: false };
+    const handleMouseMove = (ev) => {
+      if (!marqueeRef.current) return;
+      const mx = (ev.clientX - rect.left) / rect.width * 100;
+      const my = (ev.clientY - rect.top) / rect.height * 100;
+      const dx = Math.abs(mx - marqueeRef.current.startX);
+      const dy = Math.abs(my - marqueeRef.current.startY);
+      if (dx > 1 || dy > 1) {
+        marqueeRef.current.didDrag = true;
+        setMarquee({
+          page: pageIndex,
+          x1: Math.min(marqueeRef.current.startX, mx),
+          y1: Math.min(marqueeRef.current.startY, my),
+          x2: Math.max(marqueeRef.current.startX, mx),
+          y2: Math.max(marqueeRef.current.startY, my)
+        });
+      }
+    };
+    const handleMouseUp = (ev) => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      if (marqueeRef.current?.didDrag && onMarqueeSelect) {
+        const mx1 = Math.min(marqueeRef.current.startX, (ev.clientX - rect.left) / rect.width * 100);
+        const my1 = Math.min(marqueeRef.current.startY, (ev.clientY - rect.top) / rect.height * 100);
+        const mx2 = Math.max(marqueeRef.current.startX, (ev.clientX - rect.left) / rect.width * 100);
+        const my2 = Math.max(marqueeRef.current.startY, (ev.clientY - rect.top) / rect.height * 100);
+        const pageFields = fields.filter((f) => f.page === pageIndex);
+        const hits = pageFields.filter((f) => {
+          return f.x < mx2 && f.x + f.width > mx1 && f.y < my2 && f.y + f.height > my1;
+        }).map((f) => f.id);
+        onMarqueeSelect(hits);
+      } else if (!marqueeRef.current?.didDrag) {
+        if (onPageClick) {
+          onPageClick(pageIndex, x, y);
+        } else {
+          onSelectField(null);
+        }
+      }
+      marqueeRef.current = null;
+      setMarquee(null);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  }, [mode, fields, onPageClick, onSelectField, onMarqueeSelect]);
   const handleDragOver = (0, import_react.useCallback)((e) => {
     if (e.dataTransfer.types.includes("application/exeq-field-type")) {
       e.preventDefault();
@@ -251,14 +300,14 @@ function PdfViewer({
     const y = (e.clientY - rect.top) / rect.height * 100;
     onDropField(pageIndex, x, y, fieldType);
   }, [onDropField]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pdf-viewer", ref: containerRef, children: pages.map((page, pageIndex) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pdf-viewer-zoom-wrapper", ref: containerRef, style: zoom !== 1 ? { width: `${zoom * 100}%`, minHeight: "min-content" } : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pdf-viewer", style: zoom !== 1 ? { transform: `scale(${zoom})`, transformOrigin: "top left", width: `${100 / zoom}%` } : void 0, children: pages.map((page, pageIndex) => {
     const pageFields = fields.filter((f) => f.page === pageIndex);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
         className: "pdf-page",
         style: { aspectRatio: `${page.width} / ${page.height}` },
-        onClick: (e) => handlePageClick(e, pageIndex),
+        onMouseDown: (e) => handlePageMouseDown(e, pageIndex),
         onDragOver: handleDragOver,
         onDrop: (e) => handleDrop(e, pageIndex),
         "data-page": pageIndex,
@@ -282,18 +331,86 @@ function PdfViewer({
               onMove: onFieldMove,
               onResize: onFieldResize,
               onGroupMove: selectedFieldIds.size > 1 && selectedFieldIds.has(field.id) ? onGroupMove : void 0,
+              onMoveEnd,
+              otherFields: mode === "designer" ? pageFields.filter((f) => f.id !== field.id && !selectedFieldIds.has(f.id)) : void 0,
+              setGuides: mode === "designer" ? setGuides : void 0,
+              pageIndex,
               selectedIds: selectedFieldIds,
               mode,
               currentSigner,
               renderContent: renderFieldContent
             },
             field.id
-          ))
+          )),
+          guides.filter((g) => g.page === pageIndex).map((g, i) => g.x !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "snap-guide snap-guide-v", style: { left: `${g.x}%` } }, `gx${i}`) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "snap-guide snap-guide-h", style: { top: `${g.y}%` } }, `gy${i}`)),
+          marquee && marquee.page === pageIndex && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "marquee-rect", style: {
+            left: `${marquee.x1}%`,
+            top: `${marquee.y1}%`,
+            width: `${marquee.x2 - marquee.x1}%`,
+            height: `${marquee.y2 - marquee.y1}%`
+          } })
         ]
       },
       pageIndex
     );
-  }) });
+  }) }) });
+}
+var SNAP_THRESHOLD = 1.2;
+function snapAndGuide(field, others, page) {
+  const fx = field.x, fy = field.y, fw = field.width, fh = field.height;
+  const fcx = fx + fw / 2, fcy = fy + fh / 2;
+  let bestSnapX = null;
+  let bestSnapY = null;
+  for (const o of others) {
+    const ox = o.x, oy = o.y, ow = o.width, oh = o.height;
+    const ocx = ox + ow / 2, ocy = oy + oh / 2;
+    const xCandidates = [
+      [fx, ox, ox],
+      // left ↔ left
+      [fx + fw, ox + ow, ox + ow],
+      // right ↔ right
+      [fcx, ocx, ocx],
+      // center ↔ center
+      [fx, ox + ow, ox + ow],
+      // left ↔ right
+      [fx + fw, ox, ox]
+      // right ↔ left
+    ];
+    for (const [fe, te, gx] of xCandidates) {
+      const d = Math.abs(fe - te);
+      if (d < SNAP_THRESHOLD && (!bestSnapX || d < bestSnapX.dist)) {
+        bestSnapX = { offset: te - fe, guideX: gx, dist: d };
+      }
+    }
+    const yCandidates = [
+      [fy, oy, oy],
+      // top ↔ top
+      [fy + fh, oy + oh, oy + oh],
+      // bottom ↔ bottom
+      [fcy, ocy, ocy],
+      // center ↔ center
+      [fy, oy + oh, oy + oh],
+      // top ↔ bottom
+      [fy + fh, oy, oy]
+      // bottom ↔ top
+    ];
+    for (const [fe, te, gy] of yCandidates) {
+      const d = Math.abs(fe - te);
+      if (d < SNAP_THRESHOLD && (!bestSnapY || d < bestSnapY.dist)) {
+        bestSnapY = { offset: te - fe, guideY: gy, dist: d };
+      }
+    }
+  }
+  const snappedX = bestSnapX ? fx + bestSnapX.offset : fx;
+  const snappedY = bestSnapY ? fy + bestSnapY.offset : fy;
+  const guides = [];
+  if (bestSnapX) guides.push({ page, x: bestSnapX.guideX });
+  if (bestSnapY) guides.push({ page, y: bestSnapY.guideY });
+  return {
+    x: Math.max(0, Math.min(100 - fw, snappedX)),
+    y: Math.max(0, Math.min(100 - fh, snappedY)),
+    guides
+  };
 }
 function FieldOverlayItem({
   field,
@@ -303,6 +420,10 @@ function FieldOverlayItem({
   onMove,
   onResize,
   onGroupMove,
+  onMoveEnd,
+  otherFields,
+  setGuides,
+  pageIndex,
   selectedIds,
   mode,
   currentSigner,
@@ -310,19 +431,27 @@ function FieldOverlayItem({
 }) {
   const overlayRef = (0, import_react.useRef)(null);
   const dragStartRef = (0, import_react.useRef)(null);
+  const dragPosRef = (0, import_react.useRef)({ x: field.x, y: field.y });
+  const didDragRef = (0, import_react.useRef)(false);
   const resizeStartRef = (0, import_react.useRef)(null);
   const isRedact = field.type === "blackout" || field.type === "whiteout";
   const isEditable = mode === "designer" || mode === "signer" && field.assignee === currentSigner;
   const isInactiveSigner = mode === "signer" && !isRedact && field.assignee !== currentSigner;
-  const color = isInactiveSigner ? "#cccccc" : getSignerColor(field.assignee);
+  const isFilled = mode === "signer" && isEditable && !isRedact && (field.type === "checkbox" ? true : field.formula ? true : !!field.value);
+  const color = isInactiveSigner ? "#cccccc" : isFilled ? "#22c55e" : getSignerColor(field.assignee);
   const isPreFilled = !isEditable && !!field.value;
   const handleMouseDown = (0, import_react.useCallback)((e) => {
     if (mode !== "designer" || !onMove) return;
     e.preventDefault();
     e.stopPropagation();
-    onSelect(e);
+    const alreadyInSelection = selectedIds.has(field.id) && selectedIds.size > 1;
+    if (!alreadyInSelection) {
+      onSelect(e);
+    }
+    if (field.locked) return;
     const pageEl = overlayRef.current?.closest(".pdf-page");
     if (!pageEl) return;
+    didDragRef.current = false;
     dragStartRef.current = {
       startX: e.clientX,
       startY: e.clientY,
@@ -331,6 +460,7 @@ function FieldOverlayItem({
     };
     const handleMouseMove = (ev) => {
       if (!dragStartRef.current) return;
+      didDragRef.current = true;
       const rect = pageEl.getBoundingClientRect();
       const dx = (ev.clientX - dragStartRef.current.startX) / rect.width * 100;
       const dy = (ev.clientY - dragStartRef.current.startY) / rect.height * 100;
@@ -341,19 +471,35 @@ function FieldOverlayItem({
       } else {
         const newX = Math.max(0, Math.min(100 - field.width, dragStartRef.current.fieldX + dx));
         const newY = Math.max(0, Math.min(100 - field.height, dragStartRef.current.fieldY + dy));
+        dragPosRef.current = { x: newX, y: newY };
         onMove(field.id, field.page, newX, newY);
+        if (ev.shiftKey && otherFields && setGuides && pageIndex !== void 0) {
+          const { guides: g } = snapAndGuide({ x: newX, y: newY, width: field.width, height: field.height }, otherFields, pageIndex);
+          setGuides(g);
+        } else {
+          setGuides?.([]);
+        }
       }
     };
-    const handleMouseUp = () => {
+    const handleMouseUp = (ev) => {
+      if (ev.shiftKey && didDragRef.current && otherFields && onMove && pageIndex !== void 0 && !isMultiSelected) {
+        const pos = dragPosRef.current;
+        const snap = snapAndGuide({ x: pos.x, y: pos.y, width: field.width, height: field.height }, otherFields, pageIndex);
+        if (snap.x !== pos.x || snap.y !== pos.y) {
+          onMove(field.id, field.page, snap.x, snap.y);
+        }
+      }
       dragStartRef.current = null;
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
+      setGuides?.([]);
+      onMoveEnd?.();
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
-  }, [field, mode, onMove, onSelect, isMultiSelected, onGroupMove, selectedIds]);
+  }, [field, mode, onMove, onSelect, isMultiSelected, onGroupMove, onMoveEnd, selectedIds, otherFields, setGuides, pageIndex]);
   const handleResizeMouseDown = (0, import_react.useCallback)((e) => {
-    if (mode !== "designer" || !onResize) return;
+    if (mode !== "designer" || !onResize || field.locked) return;
     e.preventDefault();
     e.stopPropagation();
     const pageEl = overlayRef.current?.closest(".pdf-page");
@@ -377,15 +523,16 @@ function FieldOverlayItem({
       resizeStartRef.current = null;
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
+      onMoveEnd?.();
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
-  }, [field, mode, onResize]);
+  }, [field, mode, onResize, onMoveEnd]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ref: overlayRef,
-      className: `field-overlay ${isSelected ? "selected" : ""} ${isEditable ? "editable" : "readonly"} ${isPreFilled ? "prefilled" : ""} ${isRedact ? "redact" : ""} ${isInactiveSigner ? "inactive-signer" : ""}`,
+      className: `field-overlay ${isSelected ? "selected" : ""} ${isEditable ? "editable" : "readonly"} ${isPreFilled ? "prefilled" : ""} ${isRedact ? "redact" : ""} ${isInactiveSigner ? "inactive-signer" : ""} ${field.locked ? "locked" : ""}`,
       style: {
         left: `${field.x}%`,
         top: `${field.y}%`,
@@ -394,18 +541,18 @@ function FieldOverlayItem({
         borderColor: isRedact ? field.type === "blackout" ? "#666" : "#bbb" : color,
         borderStyle: isRedact ? "dashed" : "solid",
         backgroundColor: isRedact ? field.type === "blackout" ? "#000000" : "#ffffff" : isInactiveSigner ? "#f5f5f5" : isSelected ? `${color}22` : `${color}11`,
-        cursor: mode === "designer" ? "move" : isInactiveSigner ? "default" : "default",
+        cursor: mode === "designer" ? field.locked ? "not-allowed" : "move" : "default",
         pointerEvents: mode === "signer" && (isRedact || isInactiveSigner) ? "none" : void 0
       },
       onClick: (e) => {
         e.stopPropagation();
-        onSelect(e);
+        if (!didDragRef.current) onSelect(e);
       },
       onMouseDown: handleMouseDown,
       children: [
         mode === "designer" && !isRedact && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "field-overlay-label", style: { backgroundColor: color }, children: field.label }),
         renderContent ? renderContent(field) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "field-overlay-placeholder", children: field.value || field.placeholder }),
-        mode === "designer" && isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        mode === "designer" && isSelected && !field.locked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
             className: "field-resize-handle",
@@ -424,7 +571,7 @@ var INK_COLORS = [
   { value: "#000000", label: "Black" },
   { value: "#1a56db", label: "Blue" }
 ];
-function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
+function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete, prefillContent, pageSize }) {
   const color = getSignerColor(field.assignee);
   const isRedactField = field.type === "blackout" || field.type === "whiteout";
   const isTextField = field.type === "text" || field.type === "signed-date" || field.type === "dropdown";
@@ -432,113 +579,306 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
   const [newOption, setNewOption] = (0, import_react2.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "field-property-panel", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { color }, children: field.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => onDelete(field.id), className: "panel-delete-btn", children: "Delete" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Label" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "input",
         {
-          type: "text",
+          className: "panel-header-label",
+          style: { color },
           value: field.label,
           onChange: (e) => onUpdate(field.id, { label: e.target.value })
         }
-      )
-    ] }),
-    !isRedactField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Field Type" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        "select",
-        {
-          value: field.type,
-          onChange: (e) => onUpdate(field.id, { type: e.target.value }),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "text", children: "Text" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "dropdown", children: "Dropdown" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "signature", children: "Signature" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "signed-date", children: "Signed Date" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "checkbox", children: "Checkbox" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "initials", children: "Initials" })
-          ]
-        }
-      )
-    ] }),
-    field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Text Type" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        "select",
-        {
-          value: field.textSubtype || "freeform",
-          onChange: (e) => onUpdate(field.id, { textSubtype: e.target.value }),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "freeform", children: "Freeform" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "number", children: "Number" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "date", children: "Date" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "email", children: "Email" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "phone", children: "Phone" })
-          ]
-        }
-      )
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-header-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            onClick: () => onUpdate(field.id, { locked: !field.locked }),
+            className: `panel-icon-btn ${field.locked ? "active" : ""}`,
+            title: field.locked ? "Unlock" : "Lock",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "currentColor", children: field.locked ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "2", y: "6", width: "10", height: "7", rx: "1.5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4.5 6V4.5a2.5 2.5 0 015 0V6", fill: "none", stroke: "currentColor", strokeWidth: "1.5" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "2", y: "6", width: "10", height: "7", rx: "1.5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4.5 6V4.5a2.5 2.5 0 015 0", fill: "none", stroke: "currentColor", strokeWidth: "1.5" })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => onDelete(field.id), className: "panel-icon-btn panel-icon-btn-danger", title: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5 1h4v1H5V1zM2 3v1h1v8.5A1.5 1.5 0 004.5 14h5a1.5 1.5 0 001.5-1.5V4h1V3H2zm2 1h6v8.5a.5.5 0 01-.5.5h-5a.5.5 0 01-.5-.5V4z" }) }) })
+      ] })
     ] }),
-    !isRedactField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Assigned To" }),
+    !isRedactField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "panel-section-heading", children: "Assigned To" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "select",
         {
+          className: "panel-assignee-select",
           value: field.assignee,
           onChange: (e) => onUpdate(field.id, { assignee: e.target.value }),
+          style: { borderColor: color, color },
           children: signerRoles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: role, style: { color: getSignerColor(role) }, children: role }, role))
         }
       )
     ] }),
-    !isRedactField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Placeholder" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "input",
-        {
-          type: "text",
-          value: field.placeholder,
-          onChange: (e) => onUpdate(field.id, { placeholder: e.target.value })
-        }
-      )
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "panel-section-heading", children: "Content" }),
+      !isRedactField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Field Type" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("select", { value: field.type, onChange: (e) => onUpdate(field.id, { type: e.target.value }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "text", children: "Text" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "dropdown", children: "Dropdown" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "signature", children: "Signature" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "signed-date", children: "Signed Date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "checkbox", children: "Checkbox" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "initials", children: "Initials" })
+        ] })
+      ] }),
+      field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Text Type" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("select", { value: field.textSubtype || "freeform", onChange: (e) => onUpdate(field.id, { textSubtype: e.target.value }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "freeform", children: "Freeform" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "number", children: "Number" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "date", children: "Date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "email", children: "Email" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "phone", children: "Phone" })
+        ] })
+      ] }),
+      !isRedactField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Placeholder" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "text", value: field.placeholder, onChange: (e) => onUpdate(field.id, { placeholder: e.target.value }) })
+      ] }),
+      !isRedactField && field.type !== "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "panel-field", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "panel-checkbox-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "checkbox", checked: field.required, onChange: (e) => onUpdate(field.id, { required: e.target.checked }) }),
+        "Required"
+      ] }) }),
+      isTextField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Formula" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "text", value: field.formula || "", onChange: (e) => onUpdate(field.id, { formula: e.target.value || void 0 }), placeholder: "e.g. {{Date Field | month}}" }),
+        field.formula && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "panel-hint", children: "Auto-computed. Signer cannot edit." })
+      ] }),
+      field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field panel-field-half", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Min Chars" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "number", min: "0", max: "9999", value: field.minLength || 0, onChange: (e) => onUpdate(field.id, { minLength: Number(e.target.value) }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field panel-field-half", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Max Chars" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "number", min: "0", max: "9999", value: field.maxLength || 0, onChange: (e) => onUpdate(field.id, { maxLength: Number(e.target.value) }) })
+        ] })
+      ] }),
+      (field.type === "text" || field.type === "dropdown") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: field.type === "dropdown" ? "Options" : "Predefined Options" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-options-list", children: [
+          (field.options || []).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-option-item", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: opt }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "panel-option-remove", onClick: () => {
+              const updated = (field.options || []).filter((_, j) => j !== i);
+              onUpdate(field.id, { options: updated.length > 0 ? updated : void 0 });
+            }, children: "\xD7" })
+          ] }, i)),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-option-add", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "text", value: newOption, onChange: (e) => setNewOption(e.target.value), onKeyDown: (e) => {
+              if (e.key === "Enter" && newOption.trim()) {
+                onUpdate(field.id, { options: [...field.options || [], newOption.trim()] });
+                setNewOption("");
+              }
+            }, placeholder: "Add option..." }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => {
+              if (newOption.trim()) {
+                onUpdate(field.id, { options: [...field.options || [], newOption.trim()] });
+                setNewOption("");
+              }
+            }, children: "+" })
+          ] })
+        ] }),
+        field.type === "dropdown" && (field.options?.length ?? 0) === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "panel-hint", style: { color: "#c44" }, children: "Add at least one option" }),
+        field.type === "text" && (field.options?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "panel-hint", children: "Signer will choose from these options via dropdown" })
+      ] }),
+      prefillContent
     ] }),
-    isTextField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Formula" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "input",
+    (isTextField || showInkColor) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "panel-section-heading", children: "Style" }),
+      isTextField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Font" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("select", { value: field.fontFamily || "Helvetica", onChange: (e) => onUpdate(field.id, { fontFamily: e.target.value }), children: FONT_FAMILIES.map((f) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: f.value, children: f.label }, f.value)) })
+      ] }),
+      isTextField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Font Size (pt)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "number", min: "6", max: "72", value: field.fontSize, onChange: (e) => onUpdate(field.id, { fontSize: Number(e.target.value) }) })
+      ] }),
+      isTextField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field panel-field-half", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Letter Spacing" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "number", min: "0", max: "20", step: "0.5", value: field.letterSpacing || 0, onChange: (e) => onUpdate(field.id, { letterSpacing: Number(e.target.value) }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field panel-field-half", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Line Height" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "number", min: "0.8", max: "3", step: "0.1", value: field.lineHeight || 1.2, onChange: (e) => onUpdate(field.id, { lineHeight: Number(e.target.value) }) })
+        ] })
+      ] }),
+      showInkColor && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Ink Color" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "ink-color-picker", children: INK_COLORS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: `ink-color-swatch ${(field.inkColor || "#000000") === c.value ? "active" : ""}`, style: { backgroundColor: c.value }, onClick: () => onUpdate(field.id, { inkColor: c.value }), title: c.label }, c.value)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "panel-section-heading", children: "Position & Size" }),
+      (() => {
+        const pw = pageSize?.width || 612;
+        const ph = pageSize?.height || 792;
+        const toPt = (pct, dim) => Math.round(pct / 100 * dim * 10) / 10;
+        const fromPt = (pt, dim) => pt / dim * 100;
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field panel-field-half", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "X (pt)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "number", min: "0", step: "0.5", value: toPt(field.x, pw), onChange: (e) => onUpdate(field.id, { x: fromPt(Number(e.target.value), pw) }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field panel-field-half", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Y (pt)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "number", min: "0", step: "0.5", value: toPt(field.y, ph), onChange: (e) => onUpdate(field.id, { y: fromPt(Number(e.target.value), ph) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field panel-field-half", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Width (pt)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "number", min: "1", step: "0.5", value: toPt(field.width, pw), onChange: (e) => onUpdate(field.id, { width: fromPt(Number(e.target.value), pw) }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field panel-field-half", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Height (pt)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "number", min: "1", step: "0.5", value: toPt(field.height, ph), onChange: (e) => onUpdate(field.id, { height: fromPt(Number(e.target.value), ph) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-hint", children: [
+            pw,
+            " \xD7 ",
+            ph,
+            " pt \xB7 Page ",
+            field.page + 1,
+            " \xB7 ",
+            field.id.slice(0, 8)
+          ] })
+        ] });
+      })()
+    ] })
+  ] });
+}
+function sharedValue(items) {
+  if (items.length === 0) return void 0;
+  return items.every((v) => v === items[0]) ? items[0] : void 0;
+}
+function BulkPropertyPanel({ fields, signerRoles, onUpdate, onAlign, onDelete }) {
+  const count = fields.length;
+  const hasText = fields.some((f) => f.type === "text" || f.type === "dropdown" || f.type === "signed-date");
+  const allNonRedact = fields.every((f) => f.type !== "blackout" && f.type !== "whiteout");
+  const sharedAssignee = sharedValue(fields.map((f) => f.assignee));
+  const sharedRequired = sharedValue(fields.map((f) => f.required));
+  const sharedFontSize = sharedValue(fields.map((f) => f.fontSize));
+  const sharedFontFamily = sharedValue(fields.map((f) => f.fontFamily || "Helvetica"));
+  const sharedInkColor = sharedValue(fields.map((f) => f.inkColor || "#000000"));
+  const sharedLetterSpacing = sharedValue(fields.map((f) => f.letterSpacing || 0));
+  const sharedLineHeight = sharedValue(fields.map((f) => f.lineHeight || 1.2));
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "field-property-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h3", { children: [
+        count,
+        " fields selected"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: onDelete, className: "panel-delete-btn", children: "Delete All" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Align" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "align-buttons", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => onAlign("left"), title: "Align left edges", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "1", y: "0", width: "1.5", height: "14", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "4", y: "2", width: "8", height: "3", fill: "currentColor", opacity: "0.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "4", y: "7", width: "5", height: "3", fill: "currentColor", opacity: "0.5" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => onAlign("center-h"), title: "Align centers horizontally", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "6.25", y: "0", width: "1.5", height: "14", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "2", y: "2", width: "10", height: "3", fill: "currentColor", opacity: "0.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "3.5", y: "7", width: "7", height: "3", fill: "currentColor", opacity: "0.5" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => onAlign("right"), title: "Align right edges", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "11.5", y: "0", width: "1.5", height: "14", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "2", y: "2", width: "8", height: "3", fill: "currentColor", opacity: "0.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "5", y: "7", width: "5", height: "3", fill: "currentColor", opacity: "0.5" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => onAlign("top"), title: "Align top edges", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "0", y: "1", width: "14", height: "1.5", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "2", y: "4", width: "3", height: "8", fill: "currentColor", opacity: "0.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "7", y: "4", width: "3", height: "5", fill: "currentColor", opacity: "0.5" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => onAlign("center-v"), title: "Align centers vertically", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "0", y: "6.25", width: "14", height: "1.5", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "2", y: "1", width: "3", height: "12", fill: "currentColor", opacity: "0.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "7", y: "3", width: "3", height: "8", fill: "currentColor", opacity: "0.5" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => onAlign("bottom"), title: "Align bottom edges", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "0", y: "11.5", width: "14", height: "1.5", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "2", y: "2", width: "3", height: "8", fill: "currentColor", opacity: "0.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "7", y: "5", width: "3", height: "5", fill: "currentColor", opacity: "0.5" })
+        ] }) })
+      ] }),
+      count > 2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: { marginTop: "0.4rem" }, children: "Distribute" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "align-buttons", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => onAlign("distribute-h"), title: "Distribute horizontally", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "0", y: "0", width: "1.5", height: "14", fill: "currentColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "12.5", y: "0", width: "1.5", height: "14", fill: "currentColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "5", y: "3", width: "4", height: "8", fill: "currentColor", opacity: "0.5" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => onAlign("distribute-v"), title: "Distribute vertically", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "0", y: "0", width: "14", height: "1.5", fill: "currentColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "0", y: "12.5", width: "14", height: "1.5", fill: "currentColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "3", y: "5", width: "8", height: "4", fill: "currentColor", opacity: "0.5" })
+          ] }) })
+        ] })
+      ] })
+    ] }),
+    allNonRedact && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Assigned To" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "select",
         {
-          type: "text",
-          value: field.formula || "",
-          onChange: (e) => onUpdate(field.id, { formula: e.target.value || void 0 }),
-          placeholder: "e.g. {{Date Field | month}}"
+          value: sharedAssignee || "",
+          onChange: (e) => onUpdate({ assignee: e.target.value }),
+          children: [
+            !sharedAssignee && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", disabled: true, children: "Mixed" }),
+            signerRoles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: role, style: { color: getSignerColor(role) }, children: role }, role))
+          ]
         }
-      ),
-      field.formula && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "panel-hint", children: "This field auto-computes from other fields. Signer cannot edit it." })
+      )
     ] }),
-    !isRedactField && field.type !== "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "panel-field", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "panel-checkbox-label", children: [
+    allNonRedact && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "panel-field", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "panel-checkbox-label", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "input",
         {
           type: "checkbox",
-          checked: field.required,
-          onChange: (e) => onUpdate(field.id, { required: e.target.checked })
+          checked: sharedRequired ?? false,
+          ref: (el) => {
+            if (el) el.indeterminate = sharedRequired === void 0;
+          },
+          onChange: (e) => onUpdate({ required: e.target.checked })
         }
       ),
       "Required"
     ] }) }),
-    isTextField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+    hasText && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Font" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "select",
         {
-          value: field.fontFamily || "Helvetica",
-          onChange: (e) => onUpdate(field.id, { fontFamily: e.target.value }),
-          children: FONT_FAMILIES.map((f) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: f.value, children: f.label }, f.value))
+          value: sharedFontFamily || "",
+          onChange: (e) => onUpdate({ fontFamily: e.target.value }),
+          children: [
+            !sharedFontFamily && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", disabled: true, children: "Mixed" }),
+            FONT_FAMILIES.map((f) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: f.value, children: f.label }, f.value))
+          ]
         }
       )
     ] }),
-    isTextField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+    hasText && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Font Size (pt)" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "input",
@@ -546,12 +886,13 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
           type: "number",
           min: "6",
           max: "72",
-          value: field.fontSize,
-          onChange: (e) => onUpdate(field.id, { fontSize: Number(e.target.value) })
+          value: sharedFontSize ?? "",
+          placeholder: "Mixed",
+          onChange: (e) => onUpdate({ fontSize: Number(e.target.value) })
         }
       )
     ] }),
-    isTextField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field-row", children: [
+    hasText && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field panel-field-half", children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Letter Spacing" }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -561,8 +902,9 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
             min: "0",
             max: "20",
             step: "0.5",
-            value: field.letterSpacing || 0,
-            onChange: (e) => onUpdate(field.id, { letterSpacing: Number(e.target.value) })
+            value: sharedLetterSpacing ?? "",
+            placeholder: "Mixed",
+            onChange: (e) => onUpdate({ letterSpacing: Number(e.target.value) })
           }
         )
       ] }),
@@ -575,87 +917,25 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
             min: "0.8",
             max: "3",
             step: "0.1",
-            value: field.lineHeight || 1.2,
-            onChange: (e) => onUpdate(field.id, { lineHeight: Number(e.target.value) })
+            value: sharedLineHeight ?? "",
+            placeholder: "Mixed",
+            onChange: (e) => onUpdate({ lineHeight: Number(e.target.value) })
           }
         )
       ] })
     ] }),
-    field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Max Characters (0 = unlimited)" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "input",
-        {
-          type: "number",
-          min: "0",
-          max: "9999",
-          value: field.maxLength || 0,
-          onChange: (e) => onUpdate(field.id, { maxLength: Number(e.target.value) })
-        }
-      )
-    ] }),
-    showInkColor && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+    allNonRedact && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Ink Color" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "ink-color-picker", children: INK_COLORS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "button",
         {
-          className: `ink-color-swatch ${(field.inkColor || "#000000") === c.value ? "active" : ""}`,
+          className: `ink-color-swatch ${sharedInkColor === c.value ? "active" : ""}`,
           style: { backgroundColor: c.value },
-          onClick: () => onUpdate(field.id, { inkColor: c.value }),
+          onClick: () => onUpdate({ inkColor: c.value }),
           title: c.label
         },
         c.value
       )) })
-    ] }),
-    (field.type === "text" || field.type === "dropdown") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: field.type === "dropdown" ? "Options" : "Predefined Options" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-options-list", children: [
-        (field.options || []).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-option-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: opt }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "button",
-            {
-              className: "panel-option-remove",
-              onClick: () => {
-                const updated = (field.options || []).filter((_, j) => j !== i);
-                onUpdate(field.id, { options: updated.length > 0 ? updated : void 0 });
-              },
-              children: "\xD7"
-            }
-          )
-        ] }, i)),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-option-add", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "input",
-            {
-              type: "text",
-              value: newOption,
-              onChange: (e) => setNewOption(e.target.value),
-              onKeyDown: (e) => {
-                if (e.key === "Enter" && newOption.trim()) {
-                  onUpdate(field.id, { options: [...field.options || [], newOption.trim()] });
-                  setNewOption("");
-                }
-              },
-              placeholder: "Add option..."
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "button",
-            {
-              onClick: () => {
-                if (newOption.trim()) {
-                  onUpdate(field.id, { options: [...field.options || [], newOption.trim()] });
-                  setNewOption("");
-                }
-              },
-              children: "+"
-            }
-          )
-        ] })
-      ] }),
-      field.type === "dropdown" && (field.options?.length ?? 0) === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "panel-hint", style: { color: "#c44" }, children: "Add at least one option" }),
-      field.type === "text" && (field.options?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "panel-hint", children: "Signer will choose from these options via dropdown" })
     ] })
   ] });
 }
@@ -800,6 +1080,75 @@ function isValidApiKey(key) {
   return VALID_KEYS.has(key);
 }
 
+// src/hooks/useHistory.ts
+var import_react4 = require("react");
+function useHistory(initialState, maxHistory = 50) {
+  const [state, setState] = (0, import_react4.useState)({
+    past: [],
+    present: initialState,
+    future: []
+  });
+  const skipRef = (0, import_react4.useRef)(false);
+  const set = (0, import_react4.useCallback)((updater) => {
+    setState((prev) => {
+      const newPresent = typeof updater === "function" ? updater(prev.present) : updater;
+      if (newPresent === prev.present) return prev;
+      if (skipRef.current) {
+        skipRef.current = false;
+        return { ...prev, present: newPresent };
+      }
+      return {
+        past: [...prev.past.slice(-maxHistory), prev.present],
+        present: newPresent,
+        future: []
+      };
+    });
+  }, [maxHistory]);
+  const setWithoutHistory = (0, import_react4.useCallback)((updater) => {
+    skipRef.current = true;
+    set(updater);
+  }, [set]);
+  const snapshot = (0, import_react4.useCallback)(() => {
+    setState((prev) => ({
+      past: [...prev.past.slice(-maxHistory), prev.present],
+      present: prev.present,
+      future: []
+    }));
+  }, [maxHistory]);
+  const undo = (0, import_react4.useCallback)(() => {
+    setState((prev) => {
+      if (prev.past.length === 0) return prev;
+      const previous = prev.past[prev.past.length - 1];
+      return {
+        past: prev.past.slice(0, -1),
+        present: previous,
+        future: [prev.present, ...prev.future]
+      };
+    });
+  }, []);
+  const redo = (0, import_react4.useCallback)(() => {
+    setState((prev) => {
+      if (prev.future.length === 0) return prev;
+      const next = prev.future[0];
+      return {
+        past: [...prev.past, prev.present],
+        present: next,
+        future: prev.future.slice(1)
+      };
+    });
+  }, []);
+  return {
+    state: state.present,
+    set,
+    setWithoutHistory,
+    snapshot,
+    undo,
+    redo,
+    canUndo: state.past.length > 0,
+    canRedo: state.future.length > 0
+  };
+}
+
 // src/components/pdf-builder/DesignerView.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var FIELD_TYPE_META = [
@@ -830,24 +1179,28 @@ function DesignerView({
       ] })
     ] }) });
   }
-  const [pages, setPages] = (0, import_react4.useState)([]);
-  const [fields, setFields] = (0, import_react4.useState)(initialTemplate?.fields ?? []);
-  const [selectedFieldIds, setSelectedFieldIds] = (0, import_react4.useState)(/* @__PURE__ */ new Set());
-  const [signerRoles, setSignerRoles] = (0, import_react4.useState)(initialTemplate?.signerRoles ?? [...DEFAULT_SIGNER_ROLES]);
-  const [activeRole, setActiveRole] = (0, import_react4.useState)("Sender");
-  const [activeFieldType, setActiveFieldType] = (0, import_react4.useState)("text");
-  const [loading, setLoading] = (0, import_react4.useState)(false);
-  const [pdfSource, setPdfSource] = (0, import_react4.useState)(null);
-  const [rightTab, setRightTab] = (0, import_react4.useState)("properties");
-  const [isAddingRole, setIsAddingRole] = (0, import_react4.useState)(false);
-  const [newRoleName, setNewRoleName] = (0, import_react4.useState)("");
-  const [draggingFieldType, setDraggingFieldType] = (0, import_react4.useState)(null);
-  const [panelWidth, setPanelWidth] = (0, import_react4.useState)(380);
-  const [clipboardFields, setClipboardFields] = (0, import_react4.useState)([]);
-  const dragGhostRef = (0, import_react4.useRef)(null);
-  const resizingRef = (0, import_react4.useRef)(false);
-  const lastStylesRef = (0, import_react4.useRef)({});
-  (0, import_react4.useEffect)(() => {
+  const [pages, setPages] = (0, import_react5.useState)([]);
+  const { state: fields, set: setFields, setWithoutHistory: setFieldsSilent, snapshot: snapshotFields, undo: undoFields, redo: redoFields, canUndo, canRedo } = useHistory(initialTemplate?.fields ?? []);
+  const [selectedFieldIds, setSelectedFieldIds] = (0, import_react5.useState)(/* @__PURE__ */ new Set());
+  const [signerRoles, setSignerRoles] = (0, import_react5.useState)(initialTemplate?.signerRoles ?? [...DEFAULT_SIGNER_ROLES]);
+  const [activeRole, setActiveRole] = (0, import_react5.useState)("Sender");
+  const [activeFieldType, setActiveFieldType] = (0, import_react5.useState)("text");
+  const [loading, setLoading] = (0, import_react5.useState)(false);
+  const [pdfSource, setPdfSource] = (0, import_react5.useState)(null);
+  const [rightTab, setRightTab] = (0, import_react5.useState)("properties");
+  const [isAddingRole, setIsAddingRole] = (0, import_react5.useState)(false);
+  const [newRoleName, setNewRoleName] = (0, import_react5.useState)("");
+  const [draggingFieldType, setDraggingFieldType] = (0, import_react5.useState)(null);
+  const [panelWidth, setPanelWidth] = (0, import_react5.useState)(380);
+  const [zoom, setZoom] = (0, import_react5.useState)(1);
+  const [isPanning, setIsPanning] = (0, import_react5.useState)(false);
+  const panRef = (0, import_react5.useRef)(null);
+  const pdfAreaRef = (0, import_react5.useRef)(null);
+  const [clipboardFields, setClipboardFields] = (0, import_react5.useState)([]);
+  const dragGhostRef = (0, import_react5.useRef)(null);
+  const resizingRef = (0, import_react5.useRef)(false);
+  const lastStylesRef = (0, import_react5.useRef)({});
+  (0, import_react5.useEffect)(() => {
     const pdfUrl = initialPdfUrl || initialTemplate?.pdfUrl;
     if (pdfUrl) {
       loadPdf(pdfUrl);
@@ -871,7 +1224,7 @@ function DesignerView({
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, [initialPdfUrl, initialTemplate]);
-  const loadPdf = (0, import_react4.useCallback)(async (source) => {
+  const loadPdf = (0, import_react5.useCallback)(async (source) => {
     setLoading(true);
     try {
       const rendered = await renderPdfPages(source);
@@ -883,7 +1236,7 @@ function DesignerView({
       setLoading(false);
     }
   }, []);
-  const handleFileUpload = (0, import_react4.useCallback)((e) => {
+  const handleFileUpload = (0, import_react5.useCallback)((e) => {
     const file = e.target.files?.[0];
     if (!file) return;
     const reader = new FileReader();
@@ -892,7 +1245,7 @@ function DesignerView({
     };
     reader.readAsArrayBuffer(file);
   }, [loadPdf]);
-  const handlePageClick = (0, import_react4.useCallback)((page, x, y) => {
+  const handlePageClick = (0, import_react5.useCallback)((page, x, y) => {
     const field = createField(activeFieldType, activeRole, page, x, y, fields);
     const sticky = lastStylesRef.current[activeFieldType];
     const styledField = sticky ? { ...field, ...sticky } : field;
@@ -900,11 +1253,14 @@ function DesignerView({
     setSelectedFieldIds(/* @__PURE__ */ new Set([styledField.id]));
     setRightTab("properties");
   }, [activeFieldType, activeRole, fields]);
-  const handleFieldMove = (0, import_react4.useCallback)((id, page, x, y) => {
-    setFields((prev) => prev.map((f) => f.id === id ? { ...f, page, x, y } : f));
-  }, []);
-  const handleFieldResize = (0, import_react4.useCallback)((id, width, height) => {
-    setFields((prev) => {
+  const handleFieldMove = (0, import_react5.useCallback)((id, page, x, y) => {
+    setFieldsSilent((prev) => prev.map((f) => {
+      if (f.id !== id || f.locked) return f;
+      return { ...f, page, x, y };
+    }));
+  }, [setFieldsSilent]);
+  const handleFieldResize = (0, import_react5.useCallback)((id, width, height) => {
+    setFieldsSilent((prev) => {
       const field = prev.find((f) => f.id === id);
       if (field) {
         const existing = lastStylesRef.current[field.type] || {};
@@ -912,8 +1268,8 @@ function DesignerView({
       }
       return prev.map((f) => f.id === id ? { ...f, width, height } : f);
     });
-  }, []);
-  const handleFieldUpdate = (0, import_react4.useCallback)((id, updates) => {
+  }, [setFieldsSilent]);
+  const handleFieldUpdate = (0, import_react5.useCallback)((id, updates) => {
     setFields((prev) => {
       if (updates.label !== void 0) {
         const otherLabels = prev.filter((f) => f.id !== id).map((f) => f.label);
@@ -933,7 +1289,75 @@ function DesignerView({
       return updated;
     });
   }, []);
-  const handleFieldDelete = (0, import_react4.useCallback)((id) => {
+  const handleBulkUpdate = (0, import_react5.useCallback)((updates) => {
+    setFields((prev) => prev.map((f) => selectedFieldIds.has(f.id) ? { ...f, ...updates } : f));
+  }, [selectedFieldIds]);
+  const handleAlign = (0, import_react5.useCallback)((type) => {
+    setFields((prev) => {
+      const selected = prev.filter((f) => selectedFieldIds.has(f.id));
+      if (selected.length < 2) return prev;
+      let updates = {};
+      if (type === "left") {
+        const minX = Math.min(...selected.map((f) => f.x));
+        selected.forEach((f) => {
+          updates[f.id] = { x: minX };
+        });
+      } else if (type === "right") {
+        const maxRight = Math.max(...selected.map((f) => f.x + f.width));
+        selected.forEach((f) => {
+          updates[f.id] = { x: maxRight - f.width };
+        });
+      } else if (type === "top") {
+        const minY = Math.min(...selected.map((f) => f.y));
+        selected.forEach((f) => {
+          updates[f.id] = { y: minY };
+        });
+      } else if (type === "bottom") {
+        const maxBottom = Math.max(...selected.map((f) => f.y + f.height));
+        selected.forEach((f) => {
+          updates[f.id] = { y: maxBottom - f.height };
+        });
+      } else if (type === "center-h") {
+        const centers = selected.map((f) => f.x + f.width / 2);
+        const avgCenter = centers.reduce((a, b) => a + b, 0) / centers.length;
+        selected.forEach((f) => {
+          updates[f.id] = { x: avgCenter - f.width / 2 };
+        });
+      } else if (type === "center-v") {
+        const centers = selected.map((f) => f.y + f.height / 2);
+        const avgCenter = centers.reduce((a, b) => a + b, 0) / centers.length;
+        selected.forEach((f) => {
+          updates[f.id] = { y: avgCenter - f.height / 2 };
+        });
+      } else if (type === "distribute-h") {
+        const sorted = [...selected].sort((a, b) => a.x - b.x);
+        const first = sorted[0], last = sorted[sorted.length - 1];
+        const totalSpan = last.x + last.width - first.x;
+        const totalFieldWidth = sorted.reduce((s, f) => s + f.width, 0);
+        const gap = (totalSpan - totalFieldWidth) / (sorted.length - 1);
+        let cx = first.x;
+        sorted.forEach((f) => {
+          updates[f.id] = { x: cx };
+          cx += f.width + gap;
+        });
+      } else if (type === "distribute-v") {
+        const sorted = [...selected].sort((a, b) => a.y - b.y);
+        const first = sorted[0], last = sorted[sorted.length - 1];
+        const totalSpan = last.y + last.height - first.y;
+        const totalFieldHeight = sorted.reduce((s, f) => s + f.height, 0);
+        const gap = (totalSpan - totalFieldHeight) / (sorted.length - 1);
+        let cy = first.y;
+        sorted.forEach((f) => {
+          updates[f.id] = { y: cy };
+          cy += f.height + gap;
+        });
+      }
+      return prev.map((f) => updates[f.id] ? { ...f, ...updates[f.id] } : f);
+    });
+  }, [selectedFieldIds]);
+  const handleFieldDelete = (0, import_react5.useCallback)((id) => {
+    const field = fields.find((f) => f.id === id);
+    if (field?.locked) return;
     setFields((prev) => prev.filter((f) => f.id !== id));
     setSelectedFieldIds((prev) => {
       const next = new Set(prev);
@@ -941,7 +1365,7 @@ function DesignerView({
       return next;
     });
   }, []);
-  const handleSelectField = (0, import_react4.useCallback)((id, e) => {
+  const handleSelectField = (0, import_react5.useCallback)((id, e) => {
     if (!id) {
       setSelectedFieldIds(/* @__PURE__ */ new Set());
       return;
@@ -975,15 +1399,15 @@ function DesignerView({
     }
     setRightTab("properties");
   }, [selectedFieldIds]);
-  const handleGroupMove = (0, import_react4.useCallback)((ids, dx, dy) => {
-    setFields((prev) => prev.map((f) => {
-      if (!ids.includes(f.id)) return f;
+  const handleGroupMove = (0, import_react5.useCallback)((ids, dx, dy) => {
+    setFieldsSilent((prev) => prev.map((f) => {
+      if (!ids.includes(f.id) || f.locked) return f;
       const newX = Math.max(0, Math.min(100 - f.width, f.x + dx));
       const newY = Math.max(0, Math.min(100 - f.height, f.y + dy));
       return { ...f, x: newX, y: newY };
     }));
-  }, []);
-  const handleAddRole = (0, import_react4.useCallback)(() => {
+  }, [setFieldsSilent]);
+  const handleAddRole = (0, import_react5.useCallback)(() => {
     const name = newRoleName.trim();
     if (name && !signerRoles.includes(name)) {
       setSignerRoles((prev) => [...prev, name]);
@@ -991,12 +1415,12 @@ function DesignerView({
     setNewRoleName("");
     setIsAddingRole(false);
   }, [newRoleName, signerRoles]);
-  const handleRemoveRole = (0, import_react4.useCallback)((role) => {
+  const handleRemoveRole = (0, import_react5.useCallback)((role) => {
     setSignerRoles((prev) => prev.filter((r) => r !== role));
     setFields((prev) => prev.map((f) => f.assignee === role ? { ...f, assignee: signerRoles[0] } : f));
     if (activeRole === role) setActiveRole(signerRoles[0]);
   }, [signerRoles, activeRole]);
-  const handleExport = (0, import_react4.useCallback)(() => {
+  const handleExport = (0, import_react5.useCallback)(() => {
     const template = {
       fields,
       signerRoles,
@@ -1016,7 +1440,7 @@ function DesignerView({
     }
     window.parent?.postMessage({ type: "template-saved", template }, "*");
   }, [fields, signerRoles, pdfSource, onSave]);
-  const handlePaletteDragStart = (0, import_react4.useCallback)((e, type) => {
+  const handlePaletteDragStart = (0, import_react5.useCallback)((e, type) => {
     setDraggingFieldType(type);
     e.dataTransfer.setData("application/exeq-field-type", type);
     e.dataTransfer.effectAllowed = "copy";
@@ -1033,14 +1457,14 @@ function DesignerView({
     e.dataTransfer.setDragImage(ghost, 40, 16);
     dragGhostRef.current = ghost;
   }, [activeRole]);
-  const handlePaletteDragEnd = (0, import_react4.useCallback)(() => {
+  const handlePaletteDragEnd = (0, import_react5.useCallback)(() => {
     setDraggingFieldType(null);
     if (dragGhostRef.current) {
       document.body.removeChild(dragGhostRef.current);
       dragGhostRef.current = null;
     }
   }, []);
-  const handleDropOnPage = (0, import_react4.useCallback)((page, x, y, fieldType) => {
+  const handleDropOnPage = (0, import_react5.useCallback)((page, x, y, fieldType) => {
     const field = createField(fieldType, activeRole, page, x, y, fields);
     const sticky = lastStylesRef.current[fieldType];
     const styledField = sticky ? { ...field, ...sticky } : field;
@@ -1048,7 +1472,7 @@ function DesignerView({
     setSelectedFieldIds(/* @__PURE__ */ new Set([styledField.id]));
     setRightTab("properties");
   }, [activeRole, fields]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.key !== "Delete" && e.key !== "Backspace") return;
       if (selectedFieldIds.size === 0) return;
@@ -1056,21 +1480,39 @@ function DesignerView({
       if (tag === "input" || tag === "textarea" || tag === "select") return;
       if (document.activeElement?.isContentEditable) return;
       e.preventDefault();
-      const count = selectedFieldIds.size;
-      if (window.confirm(`Delete ${count > 1 ? `${count} fields` : "this field"}?`)) {
-        setFields((prev) => prev.filter((f) => !selectedFieldIds.has(f.id)));
-        setSelectedFieldIds(/* @__PURE__ */ new Set());
-      }
+      setFields((prev) => prev.filter((f) => !selectedFieldIds.has(f.id) || f.locked));
+      setSelectedFieldIds((prev) => {
+        const remaining = /* @__PURE__ */ new Set();
+        fields.forEach((f) => {
+          if (selectedFieldIds.has(f.id) && f.locked) remaining.add(f.id);
+        });
+        return remaining;
+      });
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [selectedFieldIds]);
-  (0, import_react4.useEffect)(() => {
+  }, [selectedFieldIds, fields]);
+  (0, import_react5.useEffect)(() => {
     const handleKeyDown = (e) => {
       const tag = (document.activeElement?.tagName || "").toLowerCase();
       if (tag === "input" || tag === "textarea" || tag === "select") return;
       if (document.activeElement?.isContentEditable) return;
       const isMod = e.metaKey || e.ctrlKey;
+      if (isMod && e.key === "a") {
+        e.preventDefault();
+        setSelectedFieldIds(new Set(fields.map((f) => f.id)));
+        return;
+      }
+      if (isMod && e.key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        undoFields();
+        return;
+      }
+      if (isMod && (e.key === "y" || e.key === "z" && e.shiftKey)) {
+        e.preventDefault();
+        redoFields();
+        return;
+      }
       if (isMod && e.key === "c" && selectedFieldIds.size > 0) {
         const selected = fields.filter((f) => selectedFieldIds.has(f.id));
         if (selected.length > 0) {
@@ -1097,7 +1539,75 @@ function DesignerView({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [selectedFieldIds, fields, clipboardFields]);
-  const handleResizeStart = (0, import_react4.useCallback)((e) => {
+  (0, import_react5.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      const isMod = e.metaKey || e.ctrlKey;
+      if (isMod && (e.key === "=" || e.key === "+")) {
+        e.preventDefault();
+        setZoom((z) => Math.min(3, z + 0.25));
+      }
+      if (isMod && e.key === "-") {
+        e.preventDefault();
+        setZoom((z) => Math.max(0.75, z - 0.25));
+      }
+      if (isMod && e.key === "0") {
+        e.preventDefault();
+        setZoom(1);
+      }
+      if (e.key === " ") {
+        const tag = (document.activeElement?.tagName || "").toLowerCase();
+        if (tag === "input" || tag === "textarea" || tag === "select") return;
+        e.preventDefault();
+        e.stopPropagation();
+        setIsPanning(true);
+      }
+    };
+    const handleKeyUp = (e) => {
+      if (e.key === " ") {
+        e.preventDefault();
+        setIsPanning(false);
+        panRef.current = null;
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
+    window.addEventListener("keyup", handleKeyUp, { capture: true });
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, { capture: true });
+      window.removeEventListener("keyup", handleKeyUp, { capture: true });
+    };
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    const el = pdfAreaRef.current;
+    if (!el) return;
+    const handleWheel = (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? -0.1 : 0.1;
+        setZoom((z) => Math.max(0.75, Math.min(3, z + delta)));
+      }
+    };
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => el.removeEventListener("wheel", handleWheel);
+  }, [pages.length]);
+  const handlePanMouseDown = (0, import_react5.useCallback)((e) => {
+    if (!isPanning || !pdfAreaRef.current) return;
+    e.preventDefault();
+    panRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      scrollLeft: pdfAreaRef.current.scrollLeft,
+      scrollTop: pdfAreaRef.current.scrollTop
+    };
+  }, [isPanning]);
+  const handlePanMouseMove = (0, import_react5.useCallback)((e) => {
+    if (!panRef.current || !pdfAreaRef.current) return;
+    pdfAreaRef.current.scrollLeft = panRef.current.scrollLeft - (e.clientX - panRef.current.startX);
+    pdfAreaRef.current.scrollTop = panRef.current.scrollTop - (e.clientY - panRef.current.startY);
+  }, []);
+  const handlePanMouseUp = (0, import_react5.useCallback)(() => {
+    panRef.current = null;
+  }, []);
+  const handleResizeStart = (0, import_react5.useCallback)((e) => {
     e.preventDefault();
     resizingRef.current = true;
     const startX = e.clientX;
@@ -1122,7 +1632,7 @@ function DesignerView({
     return a.x - b.x;
   });
   const selectedField = selectedFieldIds.size === 1 ? fields.find((f) => f.id === Array.from(selectedFieldIds)[0]) || null : null;
-  const renderFieldContent = (0, import_react4.useCallback)((field) => {
+  const renderFieldContent = (0, import_react5.useCallback)((field) => {
     if (field.type === "blackout" || field.type === "whiteout") {
       return null;
     }
@@ -1226,39 +1736,91 @@ function DesignerView({
           type
         ))
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "designer-pdf-area", children: [
-        loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "loading-indicator", children: "Loading PDF..." }),
-        !pages.length && !loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "empty-state", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { children: "Open a PDF to get started" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Select a PDF from your device to begin. Your file stays on your computer \u2014 nothing is uploaded." }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "upload-btn upload-btn-large", children: [
-            "Select PDF",
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "file", accept: ".pdf", onChange: handleFileUpload, hidden: true })
-          ] })
-        ] }),
-        pages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          PdfViewer,
-          {
-            pages,
-            fields,
-            selectedFieldIds,
-            onSelectField: handleSelectField,
-            onFieldMove: handleFieldMove,
-            onFieldResize: handleFieldResize,
-            onGroupMove: handleGroupMove,
-            onPageClick: handlePageClick,
-            onDropField: handleDropOnPage,
-            mode: "designer",
-            renderFieldContent
-          }
-        )
-      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          className: `designer-pdf-area ${isPanning ? "panning" : ""}`,
+          ref: pdfAreaRef,
+          onMouseDown: isPanning ? handlePanMouseDown : void 0,
+          onMouseMove: isPanning ? handlePanMouseMove : void 0,
+          onMouseUp: isPanning ? handlePanMouseUp : void 0,
+          onMouseLeave: isPanning ? handlePanMouseUp : void 0,
+          children: [
+            loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "loading-indicator", children: "Loading PDF..." }),
+            !pages.length && !loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "empty-state", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { children: "Open a PDF to get started" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Select a PDF from your device to begin. Your file stays on your computer \u2014 nothing is uploaded." }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "upload-btn upload-btn-large", children: [
+                "Select PDF",
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "file", accept: ".pdf", onChange: handleFileUpload, hidden: true })
+              ] })
+            ] }),
+            pages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              PdfViewer,
+              {
+                pages,
+                fields,
+                selectedFieldIds,
+                onSelectField: handleSelectField,
+                onFieldMove: handleFieldMove,
+                onFieldResize: handleFieldResize,
+                onGroupMove: handleGroupMove,
+                onMoveEnd: snapshotFields,
+                onPageClick: handlePageClick,
+                onDropField: handleDropOnPage,
+                onMarqueeSelect: (ids) => setSelectedFieldIds(new Set(ids)),
+                mode: "designer",
+                renderFieldContent,
+                zoom
+              }
+            )
+          ]
+        }
+      ),
       pages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "panel-resize-handle", onMouseDown: handleResizeStart }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "designer-panel", style: { width: panelWidth }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "signer-role-indicator", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "signer-role-indicator-label", children: "Editing as" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: activeRole })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "designer-panel-header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "signer-role-indicator", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "signer-role-indicator-label", children: "Editing as" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: activeRole })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "zoom-slider", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: () => setZoom((z) => Math.max(0.75, z - 0.25)), disabled: zoom <= 0.75, children: "\u2212" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "input",
+                {
+                  type: "range",
+                  min: "75",
+                  max: "300",
+                  step: "25",
+                  value: Math.round(zoom * 100),
+                  onChange: (e) => setZoom(Number(e.target.value) / 100)
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: () => setZoom((z) => Math.min(3, z + 0.25)), disabled: zoom >= 3, children: "+" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "zoom-dropdown-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "select",
+                {
+                  className: "zoom-dropdown",
+                  value: Math.round(zoom * 100),
+                  onChange: (e) => setZoom(Number(e.target.value) / 100),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "75", children: "75%" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "100", children: "100%" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "125", children: "125%" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "150", children: "150%" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "200", children: "200%" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "250", children: "250%" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "300", children: "300%" }),
+                    ![75, 100, 125, 150, 200, 250, 300].includes(Math.round(zoom * 100)) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: Math.round(zoom * 100), children: [
+                      Math.round(zoom * 100),
+                      "%"
+                    ] })
+                  ]
+                }
+              ) })
+            ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "panel-tabs", children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1282,82 +1844,163 @@ function DesignerView({
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "panel-tab-content", children: [
-            rightTab === "properties" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: selectedFieldIds.size > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "panel-empty", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("strong", { children: [
-                selectedFieldIds.size,
-                " fields selected"
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Drag to move as a group. Press Delete to remove all. Cmd/Ctrl+C to copy." })
-            ] }) : selectedField ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                FieldPropertyPanel,
-                {
-                  field: selectedField,
-                  signerRoles,
-                  onUpdate: handleFieldUpdate,
-                  onDelete: handleFieldDelete
+            rightTab === "properties" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: selectedFieldIds.size > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              BulkPropertyPanel,
+              {
+                fields: fields.filter((f) => selectedFieldIds.has(f.id)),
+                signerRoles,
+                onUpdate: handleBulkUpdate,
+                onAlign: handleAlign,
+                onDelete: () => {
+                  setFields((prev) => prev.filter((f) => !selectedFieldIds.has(f.id) || f.locked));
+                  setSelectedFieldIds((prev) => {
+                    const remaining = /* @__PURE__ */ new Set();
+                    fields.forEach((f) => {
+                      if (prev.has(f.id) && f.locked) remaining.add(f.id);
+                    });
+                    return remaining;
+                  });
                 }
-              ),
-              selectedField.type !== "blackout" && selectedField.type !== "whiteout" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "prefill-section", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h4", { children: "Pre-fill Value" }),
-                selectedField.type === "signature" || selectedField.type === "initials" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  SignatureCanvas,
-                  {
-                    width: panelWidth - 40,
-                    height: selectedField.type === "initials" ? 100 : 150,
-                    onSign: (dataUrl) => handleFieldUpdate(selectedField.id, { value: dataUrl }),
-                    initialValue: selectedField.value,
-                    inkColor: selectedField.inkColor
-                  }
-                ) : selectedField.type === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "panel-checkbox-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    "input",
+              }
+            ) : selectedField ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              FieldPropertyPanel,
+              {
+                field: selectedField,
+                signerRoles,
+                onUpdate: handleFieldUpdate,
+                onDelete: handleFieldDelete,
+                pageSize: pages[selectedField.page] ? { width: pages[selectedField.page].pdfWidth, height: pages[selectedField.page].pdfHeight } : void 0,
+                prefillContent: selectedField.type !== "blackout" && selectedField.type !== "whiteout" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "prefill-section", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { children: "Pre-fill Value" }),
+                  selectedField.type === "signature" || selectedField.type === "initials" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    SignatureCanvas,
                     {
-                      type: "checkbox",
-                      checked: selectedField.value === "true",
-                      onChange: (e) => handleFieldUpdate(selectedField.id, { value: e.target.checked ? "true" : "" })
+                      width: panelWidth - 40,
+                      height: selectedField.type === "initials" ? 100 : 150,
+                      onSign: (dataUrl) => handleFieldUpdate(selectedField.id, { value: dataUrl }),
+                      initialValue: selectedField.value,
+                      inkColor: selectedField.inkColor
                     }
-                  ),
-                  "Checked"
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "input",
-                  {
-                    type: selectedField.textSubtype === "email" ? "email" : selectedField.textSubtype === "number" ? "number" : selectedField.textSubtype === "phone" ? "tel" : selectedField.textSubtype === "date" ? "date" : "text",
-                    value: selectedField.value,
-                    onChange: (e) => handleFieldUpdate(selectedField.id, { value: e.target.value }),
-                    placeholder: `Pre-fill ${selectedField.label}`,
-                    className: "prefill-input",
-                    style: { color: selectedField.inkColor || "#000000" }
-                  }
-                )
-              ] })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "panel-empty", children: "Click on the PDF to place a field, or select an existing field to edit its properties." }) }),
-            rightTab === "fields" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "panel-empty", children: "No fields yet. Drag a field from the left palette onto the PDF, or click on the PDF to place one." }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "field-list", children: sortedFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-              "div",
-              {
-                className: `field-list-item ${selectedFieldIds.has(f.id) ? "active" : ""}`,
-                onClick: () => {
-                  setSelectedFieldIds(/* @__PURE__ */ new Set([f.id]));
-                  setRightTab("properties");
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    "span",
+                  ) : selectedField.type === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "panel-checkbox-label", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: selectedField.value === "true",
+                        onChange: (e) => handleFieldUpdate(selectedField.id, { value: e.target.checked ? "true" : "" })
+                      }
+                    ),
+                    "Checked"
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "input",
                     {
-                      className: "field-list-dot",
-                      style: { backgroundColor: getSignerColor(f.assignee) }
+                      type: selectedField.textSubtype === "email" ? "email" : selectedField.textSubtype === "number" ? "number" : selectedField.textSubtype === "phone" ? "tel" : selectedField.textSubtype === "date" ? "date" : "text",
+                      value: selectedField.value,
+                      onChange: (e) => handleFieldUpdate(selectedField.id, { value: e.target.value }),
+                      placeholder: `Pre-fill ${selectedField.label}`,
+                      className: "prefill-input",
+                      style: { color: selectedField.inkColor || "#000000" }
                     }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "field-list-name", children: f.label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "field-list-page", children: [
-                    "p",
-                    f.page + 1
-                  ] }),
-                  f.required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "field-list-required", children: "*" })
-                ]
-              },
-              f.id
-            )) }) })
+                  )
+                ] }) : void 0
+              }
+            ) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "panel-empty", children: "Click on the PDF to place a field, or select an existing field to edit its properties." }) }),
+            rightTab === "fields" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "panel-empty", children: "No fields yet. Drag a field from the left palette onto the PDF, or click on the PDF to place one." }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "field-list", children: sortedFields.map((f, idx) => {
+              const isSel = selectedFieldIds.has(f.id);
+              const isSingleSel = isSel && selectedFieldIds.size === 1;
+              const isTextLike = f.type === "text" || f.type === "dropdown" || f.type === "signed-date";
+              return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "div",
+                {
+                  className: `field-list-item ${isSel ? "active" : ""}`,
+                  onClick: (e) => {
+                    if (e.target.tagName === "INPUT") return;
+                    if (e.metaKey || e.ctrlKey) {
+                      setSelectedFieldIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(f.id)) next.delete(f.id);
+                        else next.add(f.id);
+                        return next;
+                      });
+                    } else if (e.shiftKey && selectedFieldIds.size > 0) {
+                      const ids = sortedFields.map((sf) => sf.id);
+                      const lastId = Array.from(selectedFieldIds).pop();
+                      const a = ids.indexOf(lastId);
+                      const b = ids.indexOf(f.id);
+                      if (a >= 0 && b >= 0) {
+                        const start = Math.min(a, b);
+                        const end = Math.max(a, b);
+                        setSelectedFieldIds((prev) => {
+                          const next = new Set(prev);
+                          ids.slice(start, end + 1).forEach((id) => next.add(id));
+                          return next;
+                        });
+                      }
+                    } else {
+                      setSelectedFieldIds(/* @__PURE__ */ new Set([f.id]));
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "span",
+                      {
+                        className: "field-list-dot",
+                        style: { backgroundColor: getSignerColor(f.assignee) }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "field-list-name", children: f.label }),
+                    f.locked && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "field-list-lock", title: "Locked", children: "\u{1F512}" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "field-list-page", children: [
+                      "p",
+                      f.page + 1
+                    ] }),
+                    f.required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "field-list-required", children: "*" }),
+                    isSingleSel && isTextLike && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "input",
+                      {
+                        className: "field-list-input",
+                        type: "text",
+                        value: f.value,
+                        placeholder: f.placeholder,
+                        maxLength: f.maxLength || void 0,
+                        autoFocus: true,
+                        onChange: (e) => handleFieldUpdate(f.id, { value: e.target.value }),
+                        onKeyDown: (e) => {
+                          if (e.key === "Tab") {
+                            e.preventDefault();
+                            const dir = e.shiftKey ? -1 : 1;
+                            const nextIdx = idx + dir;
+                            if (nextIdx >= 0 && nextIdx < sortedFields.length) {
+                              setSelectedFieldIds(/* @__PURE__ */ new Set([sortedFields[nextIdx].id]));
+                            }
+                          }
+                        },
+                        onClick: (e) => e.stopPropagation()
+                      }
+                    ),
+                    isSingleSel && f.type === "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "field-list-checkbox", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: f.value === "true",
+                        onChange: (e) => handleFieldUpdate(f.id, { value: e.target.checked ? "true" : "" }),
+                        onKeyDown: (e) => {
+                          if (e.key === "Tab") {
+                            e.preventDefault();
+                            const dir = e.shiftKey ? -1 : 1;
+                            const nextIdx = idx + dir;
+                            if (nextIdx >= 0 && nextIdx < sortedFields.length) {
+                              setSelectedFieldIds(/* @__PURE__ */ new Set([sortedFields[nextIdx].id]));
+                            }
+                          }
+                        }
+                      }
+                    ) })
+                  ]
+                },
+                f.id
+              );
+            }) }) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "powered-by", children: [
             "Powered by ",
@@ -1370,7 +2013,7 @@ function DesignerView({
 }
 
 // src/components/pdf-builder/SignerView.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/utils/pdfFiller.ts
 var import_pdf_lib = require("pdf-lib");
@@ -1507,7 +2150,7 @@ async function postPdfToCallback(bytes, callbackUrl, filename) {
 }
 
 // src/components/pdf-builder/FieldNavigator.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function isFieldFilled(f) {
   if (!f.required) return true;
@@ -1522,7 +2165,7 @@ function FieldNavigator({
   onComplete,
   completeLabel = "Complete"
 }) {
-  const [showIncomplete, setShowIncomplete] = (0, import_react5.useState)(false);
+  const [showIncomplete, setShowIncomplete] = (0, import_react6.useState)(false);
   const currentIndex = fields.findIndex((f) => f.id === currentFieldId);
   const hasPrev = currentIndex > 0;
   const hasNext = currentIndex < fields.length - 1;
@@ -1698,7 +2341,12 @@ function SignerView({
   initialValues,
   submitLabel,
   signerOrder: signerOrderProp,
-  transforms
+  transforms,
+  onChange,
+  onSignerComplete,
+  includeAuditTrail,
+  exportFormat,
+  onExport
 } = {}) {
   if (!isValidApiKey(apiKey)) {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "signer-layout", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "empty-state", children: [
@@ -1710,28 +2358,29 @@ function SignerView({
       ] })
     ] }) });
   }
-  const [pages, setPages] = (0, import_react6.useState)([]);
-  const [fields, setFields] = (0, import_react6.useState)([]);
-  const [selectedFieldId, setSelectedFieldId] = (0, import_react6.useState)(null);
-  const [signerRoles, setSignerRoles] = (0, import_react6.useState)([]);
-  const [currentSignerIndex, setCurrentSignerIndex] = (0, import_react6.useState)(() => {
+  const [pages, setPages] = (0, import_react7.useState)([]);
+  const [fields, setFields] = (0, import_react7.useState)([]);
+  const [selectedFieldId, setSelectedFieldId] = (0, import_react7.useState)(null);
+  const [signerRoles, setSignerRoles] = (0, import_react7.useState)([]);
+  const [currentSignerIndex, setCurrentSignerIndex] = (0, import_react7.useState)(() => {
     if (initialSigner && signerOrderProp) {
       const idx = signerOrderProp.indexOf(initialSigner);
       return idx >= 0 ? idx : 0;
     }
     return 0;
   });
-  const initializedRef = (0, import_react6.useRef)(false);
-  const [loading, setLoading] = (0, import_react6.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react6.useState)(false);
-  const [pdfSource, setPdfSource] = (0, import_react6.useState)(null);
-  const [callbackUrl, setCallbackUrl] = (0, import_react6.useState)(initialCallbackUrl || "");
-  const containerRef = (0, import_react6.useRef)(null);
+  const initializedRef = (0, import_react7.useRef)(false);
+  const auditLogRef = (0, import_react7.useRef)([]);
+  const [loading, setLoading] = (0, import_react7.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react7.useState)(false);
+  const [pdfSource, setPdfSource] = (0, import_react7.useState)(null);
+  const [callbackUrl, setCallbackUrl] = (0, import_react7.useState)(initialCallbackUrl || "");
+  const containerRef = (0, import_react7.useRef)(null);
   const signerOrder = signerOrderProp || (signerRoles.length > 0 ? [...signerRoles.filter((r) => r !== "Sender"), ...signerRoles.filter((r) => r === "Sender")] : [initialSigner || "Signer 1"]);
   const signer = signerOrder[currentSignerIndex] || signerOrder[0] || "Signer 1";
   const isLastSigner = currentSignerIndex >= signerOrder.length - 1;
   const isMultiSigner = signerOrder.length > 1;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (fields.length === 0 || !isMultiSigner) return;
     const signerFields = fields.filter(
       (f) => f.assignee === signer && f.type !== "blackout" && f.type !== "whiteout"
@@ -1746,7 +2395,7 @@ function SignerView({
       setSelectedFieldId(null);
     }
   }, [currentSignerIndex, fields, signer, isLastSigner, isMultiSigner]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (initialTemplate) {
       let templateFields = initialTemplate.fields;
       if (initialTemplate.signerRoles) setSignerRoles(initialTemplate.signerRoles);
@@ -1816,7 +2465,7 @@ function SignerView({
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, [initialTemplate, initialPdfUrl]);
-  const loadPdf = (0, import_react6.useCallback)(async (source) => {
+  const loadPdf = (0, import_react7.useCallback)(async (source) => {
     setLoading(true);
     try {
       const rendered = await renderPdfPages(source);
@@ -1836,13 +2485,22 @@ function SignerView({
   });
   const selectedField = fields.find((f) => f.id === selectedFieldId) || null;
   const isFieldEditable = selectedField ? selectedField.assignee === signer && selectedField.type !== "blackout" && selectedField.type !== "whiteout" && !selectedField.formula : false;
-  const handleFieldUpdate = (0, import_react6.useCallback)((id, value) => {
+  const handleFieldUpdate = (0, import_react7.useCallback)((id, value) => {
     setFields((prev) => prev.map((f) => f.id === id ? { ...f, value } : f));
   }, []);
-  const handleFieldPropertyUpdate = (0, import_react6.useCallback)((id, updates) => {
+  const handleFieldPropertyUpdate = (0, import_react7.useCallback)((id, updates) => {
     setFields((prev) => prev.map((f) => f.id === id ? { ...f, ...updates } : f));
   }, []);
-  const handleNavigate = (0, import_react6.useCallback)((fieldId) => {
+  const fieldValuesKey = fields.map((f) => `${f.id}:${f.value}`).join("|");
+  (0, import_react7.useEffect)(() => {
+    if (!onChange) return;
+    const values = {};
+    fields.forEach((f) => {
+      if (f.type !== "blackout" && f.type !== "whiteout") values[f.label] = f.value || "";
+    });
+    onChange(values);
+  }, [fieldValuesKey]);
+  const handleNavigate = (0, import_react7.useCallback)((fieldId) => {
     setSelectedFieldId(fieldId);
     const field = fields.find((f) => f.id === fieldId);
     if (field && containerRef.current) {
@@ -1855,10 +2513,23 @@ function SignerView({
   const allRequiredFilled = editableFields.every((f) => {
     if (!f.required) return true;
     if (f.type === "checkbox") return true;
-    return !!f.value;
+    if (!f.value) return false;
+    if (f.minLength && f.value.length < f.minLength) return false;
+    return true;
   });
-  const handleAdvanceOrSubmit = (0, import_react6.useCallback)(async () => {
+  const getFieldValues = (0, import_react7.useCallback)(() => {
+    const values = {};
+    fields.forEach((f) => {
+      if (f.type !== "blackout" && f.type !== "whiteout") values[f.label] = f.value || "";
+    });
+    return values;
+  }, [fields]);
+  const handleAdvanceOrSubmit = (0, import_react7.useCallback)(async () => {
     if (!allRequiredFilled) return;
+    auditLogRef.current.push({ signer, completedAt: (/* @__PURE__ */ new Date()).toISOString() });
+    if (onSignerComplete) {
+      onSignerComplete(signer, getFieldValues());
+    }
     if (!isLastSigner) {
       setCurrentSignerIndex((prev) => prev + 1);
       setSelectedFieldId(null);
@@ -1872,8 +2543,40 @@ function SignerView({
     setSubmitting(true);
     try {
       const finalFields = resolveAllFormulas(fields, transforms);
-      const pdfBytes = await generateFilledPdf(pdfSource, finalFields);
+      let pdfBytes;
+      if (includeAuditTrail) {
+        const { PDFDocument: PDFDocument2, StandardFonts: StandardFonts2, rgb: rgb2 } = await import("pdf-lib");
+        const basePdf = await generateFilledPdf(pdfSource, finalFields);
+        const pdfDoc = await PDFDocument2.load(basePdf);
+        const font = await pdfDoc.embedFont(StandardFonts2.Helvetica);
+        const boldFont = await pdfDoc.embedFont(StandardFonts2.HelveticaBold);
+        const auditPage = pdfDoc.addPage([612, 792]);
+        let cy = 742;
+        auditPage.drawText("Signing Audit Trail", { x: 50, y: cy, size: 18, font: boldFont, color: rgb2(0, 0, 0) });
+        cy -= 30;
+        auditPage.drawText(`Document completed: ${(/* @__PURE__ */ new Date()).toLocaleString()}`, { x: 50, y: cy, size: 10, font, color: rgb2(0.4, 0.4, 0.4) });
+        cy -= 30;
+        for (const entry of auditLogRef.current) {
+          auditPage.drawText(`${entry.signer}`, { x: 50, y: cy, size: 12, font: boldFont, color: rgb2(0, 0, 0) });
+          auditPage.drawText(`Completed: ${new Date(entry.completedAt).toLocaleString()}`, { x: 200, y: cy, size: 10, font, color: rgb2(0.3, 0.3, 0.3) });
+          cy -= 22;
+        }
+        pdfBytes = await pdfDoc.save();
+      } else {
+        pdfBytes = await generateFilledPdf(pdfSource, finalFields);
+      }
       const blob = new Blob([pdfBytes.slice().buffer], { type: "application/pdf" });
+      if (onExport && exportFormat) {
+        const values = getFieldValues();
+        if (exportFormat === "json") {
+          onExport(JSON.stringify(values, null, 2), "json");
+        } else {
+          const headers = Object.keys(values);
+          const row = headers.map((h) => `"${(values[h] || "").replace(/"/g, '""')}"`);
+          onExport(`${headers.join(",")}
+${row.join(",")}`, "csv");
+        }
+      }
       if (callbackUrl) {
         await postPdfToCallback(pdfBytes, callbackUrl, "signed-document.pdf");
       }
@@ -1889,8 +2592,8 @@ function SignerView({
     } finally {
       setSubmitting(false);
     }
-  }, [pdfSource, fields, callbackUrl, allRequiredFilled, onComplete, isLastSigner]);
-  const renderFieldContent = (0, import_react6.useCallback)((field) => {
+  }, [pdfSource, fields, callbackUrl, allRequiredFilled, onComplete, isLastSigner, signer, onSignerComplete, includeAuditTrail, exportFormat, onExport, getFieldValues, transforms]);
+  const renderFieldContent = (0, import_react7.useCallback)((field) => {
     if (field.type === "blackout" || field.type === "whiteout") {
       return null;
     }
@@ -1967,7 +2670,7 @@ function SignerView({
       }
     );
   }, [signer, handleFieldUpdate, setSelectedFieldId]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const sigFields = fields.filter((f) => f.assignee === signer && f.type === "signature" && f.value);
     if (sigFields.length > 0) {
       const dateStr = (/* @__PURE__ */ new Date()).toLocaleDateString();
@@ -1979,7 +2682,7 @@ function SignerView({
       }));
     }
   }, [fields.filter((f) => f.type === "signature" && f.value).length]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const hasFormulas = fields.some((f) => f.formula);
     if (!hasFormulas) return;
     const resolved = resolveAllFormulas(fields, transforms);
@@ -2108,7 +2811,7 @@ function SignerView({
 }
 
 // src/components/pdf-builder/SignerRoleSelector.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function SignerRoleSelector({
   roles,
@@ -2117,8 +2820,8 @@ function SignerRoleSelector({
   onAddRole,
   onRemoveRole
 }) {
-  const [isAdding, setIsAdding] = (0, import_react7.useState)(false);
-  const [newRoleName, setNewRoleName] = (0, import_react7.useState)("");
+  const [isAdding, setIsAdding] = (0, import_react8.useState)(false);
+  const [newRoleName, setNewRoleName] = (0, import_react8.useState)("");
   const handleAdd = () => {
     if (newRoleName.trim()) {
       onAddRole(newRoleName.trim());