@unlev/exeq 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -38,6 +38,12 @@ var FIELD_DEFAULTS = {
     placeholder: "Enter text",
     textSubtype: "freeform"
   },
+  dropdown: {
+    width: 20,
+    height: 3,
+    fontSize: 12,
+    placeholder: "Select..."
+  },
   signature: {
     width: 20,
     height: 6,
@@ -77,6 +83,7 @@ var FIELD_DEFAULTS = {
 };
 var TYPE_LABELS = {
   text: "Text Field",
+  dropdown: "Dropdown",
   signature: "Signature",
   "signed-date": "Signed Date",
   checkbox: "Checkbox",
@@ -148,12 +155,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function PdfViewer({
   pages,
   fields,
-  selectedFieldId,
+  selectedFieldIds,
   onSelectField,
   onFieldMove,
   onFieldResize,
   onPageClick,
   onDropField,
+  onGroupMove,
   mode,
   currentSigner,
   renderFieldContent
@@ -211,10 +219,13 @@ function PdfViewer({
             FieldOverlayItem,
             {
               field,
-              isSelected: field.id === selectedFieldId,
-              onSelect: () => onSelectField(field.id),
+              isSelected: selectedFieldIds.has(field.id),
+              isMultiSelected: selectedFieldIds.size > 1 && selectedFieldIds.has(field.id),
+              onSelect: (e) => onSelectField(field.id, e),
               onMove: onFieldMove,
               onResize: onFieldResize,
+              onGroupMove: selectedFieldIds.size > 1 && selectedFieldIds.has(field.id) ? onGroupMove : void 0,
+              selectedIds: selectedFieldIds,
               mode,
               currentSigner,
               renderContent: renderFieldContent
@@ -230,9 +241,12 @@ function PdfViewer({
 function FieldOverlayItem({
   field,
   isSelected,
+  isMultiSelected,
   onSelect,
   onMove,
   onResize,
+  onGroupMove,
+  selectedIds,
   mode,
   currentSigner,
   renderContent
@@ -249,7 +263,7 @@ function FieldOverlayItem({
     if (mode !== "designer" || !onMove) return;
     e.preventDefault();
     e.stopPropagation();
-    onSelect();
+    onSelect(e);
     const pageEl = overlayRef.current?.closest(".pdf-page");
     if (!pageEl) return;
     dragStartRef.current = {
@@ -258,14 +272,20 @@ function FieldOverlayItem({
       fieldX: field.x,
       fieldY: field.y
     };
-    const handleMouseMove = (e2) => {
+    const handleMouseMove = (ev) => {
       if (!dragStartRef.current) return;
       const rect = pageEl.getBoundingClientRect();
-      const dx = (e2.clientX - dragStartRef.current.startX) / rect.width * 100;
-      const dy = (e2.clientY - dragStartRef.current.startY) / rect.height * 100;
-      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));
-      onMove(field.id, field.page, newX, newY);
+      const dx = (ev.clientX - dragStartRef.current.startX) / rect.width * 100;
+      const dy = (ev.clientY - dragStartRef.current.startY) / rect.height * 100;
+      if (isMultiSelected && onGroupMove) {
+        onGroupMove(Array.from(selectedIds), dx, dy);
+        dragStartRef.current.startX = ev.clientX;
+        dragStartRef.current.startY = ev.clientY;
+      } 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));
+        onMove(field.id, field.page, newX, newY);
+      }
     };
     const handleMouseUp = () => {
       dragStartRef.current = null;
@@ -274,7 +294,7 @@ function FieldOverlayItem({
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
-  }, [field, mode, onMove, onSelect]);
+  }, [field, mode, onMove, onSelect, isMultiSelected, onGroupMove, selectedIds]);
   const handleResizeMouseDown = useCallback((e) => {
     if (mode !== "designer" || !onResize) return;
     e.preventDefault();
@@ -322,7 +342,7 @@ function FieldOverlayItem({
       },
       onClick: (e) => {
         e.stopPropagation();
-        onSelect();
+        onSelect(e);
       },
       onMouseDown: handleMouseDown,
       children: [
@@ -350,8 +370,8 @@ var INK_COLORS = [
 function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
   const color = getSignerColor(field.assignee);
   const isRedactField = field.type === "blackout" || field.type === "whiteout";
-  const isTextField = field.type === "text" || field.type === "signed-date";
-  const showInkColor = field.type === "text" || field.type === "signature" || field.type === "initials" || field.type === "signed-date";
+  const isTextField = field.type === "text" || field.type === "signed-date" || field.type === "dropdown";
+  const showInkColor = field.type === "text" || field.type === "dropdown" || field.type === "signature" || field.type === "initials" || field.type === "signed-date";
   const [newOption, setNewOption] = useState("");
   return /* @__PURE__ */ jsxs2("div", { className: "field-property-panel", children: [
     /* @__PURE__ */ jsxs2("div", { className: "panel-header", children: [
@@ -378,6 +398,7 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
           onChange: (e) => onUpdate(field.id, { type: e.target.value }),
           children: [
             /* @__PURE__ */ jsx2("option", { value: "text", children: "Text" }),
+            /* @__PURE__ */ jsx2("option", { value: "dropdown", children: "Dropdown" }),
             /* @__PURE__ */ jsx2("option", { value: "signature", children: "Signature" }),
             /* @__PURE__ */ jsx2("option", { value: "signed-date", children: "Signed Date" }),
             /* @__PURE__ */ jsx2("option", { value: "checkbox", children: "Checkbox" }),
@@ -529,8 +550,8 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         c.value
       )) })
     ] }),
-    field.type === "text" && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
-      /* @__PURE__ */ jsx2("label", { children: "Predefined Options" }),
+    (field.type === "text" || field.type === "dropdown") && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+      /* @__PURE__ */ jsx2("label", { children: field.type === "dropdown" ? "Options" : "Predefined Options" }),
       /* @__PURE__ */ jsxs2("div", { className: "panel-options-list", children: [
         (field.options || []).map((opt, i) => /* @__PURE__ */ jsxs2("div", { className: "panel-option-item", children: [
           /* @__PURE__ */ jsx2("span", { children: opt }),
@@ -576,7 +597,8 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
           )
         ] })
       ] }),
-      (field.options?.length ?? 0) > 0 && /* @__PURE__ */ jsx2("span", { className: "panel-hint", children: "Signer will choose from these options via dropdown" })
+      field.type === "dropdown" && (field.options?.length ?? 0) === 0 && /* @__PURE__ */ jsx2("span", { className: "panel-hint", style: { color: "#c44" }, children: "Add at least one option" }),
+      field.type === "text" && (field.options?.length ?? 0) > 0 && /* @__PURE__ */ jsx2("span", { className: "panel-hint", children: "Signer will choose from these options via dropdown" })
     ] })
   ] });
 }
@@ -725,6 +747,7 @@ function isValidApiKey(key) {
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var FIELD_TYPE_META = [
   { type: "text", label: "Text", icon: "T" },
+  { type: "dropdown", label: "Dropdown", icon: "\u25BE" },
   { type: "signature", label: "Signature", icon: "\u270D" },
   { type: "signed-date", label: "Date", icon: "\u{1F4C5}" },
   { type: "checkbox", label: "Checkbox", icon: "\u2611" },
@@ -752,7 +775,7 @@ function DesignerView({
   }
   const [pages, setPages] = useState3([]);
   const [fields, setFields] = useState3(initialTemplate?.fields ?? []);
-  const [selectedFieldId, setSelectedFieldId] = useState3(null);
+  const [selectedFieldIds, setSelectedFieldIds] = useState3(/* @__PURE__ */ new Set());
   const [signerRoles, setSignerRoles] = useState3(initialTemplate?.signerRoles ?? [...DEFAULT_SIGNER_ROLES]);
   const [activeRole, setActiveRole] = useState3("Sender");
   const [activeFieldType, setActiveFieldType] = useState3("text");
@@ -763,7 +786,7 @@ function DesignerView({
   const [newRoleName, setNewRoleName] = useState3("");
   const [draggingFieldType, setDraggingFieldType] = useState3(null);
   const [panelWidth, setPanelWidth] = useState3(380);
-  const [clipboardField, setClipboardField] = useState3(null);
+  const [clipboardFields, setClipboardFields] = useState3([]);
   const dragGhostRef = useRef3(null);
   const resizingRef = useRef3(false);
   const lastStylesRef = useRef3({});
@@ -817,7 +840,7 @@ function DesignerView({
     const sticky = lastStylesRef.current[activeFieldType];
     const styledField = sticky ? { ...field, ...sticky } : field;
     setFields((prev) => [...prev, styledField]);
-    setSelectedFieldId(styledField.id);
+    setSelectedFieldIds(/* @__PURE__ */ new Set([styledField.id]));
     setRightTab("properties");
   }, [activeFieldType, activeRole, fields]);
   const handleFieldMove = useCallback3((id, page, x, y) => {
@@ -855,8 +878,54 @@ function DesignerView({
   }, []);
   const handleFieldDelete = useCallback3((id) => {
     setFields((prev) => prev.filter((f) => f.id !== id));
-    if (selectedFieldId === id) setSelectedFieldId(null);
-  }, [selectedFieldId]);
+    setSelectedFieldIds((prev) => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  const handleSelectField = useCallback3((id, e) => {
+    if (!id) {
+      setSelectedFieldIds(/* @__PURE__ */ new Set());
+      return;
+    }
+    if (e && (e.metaKey || e.ctrlKey)) {
+      setSelectedFieldIds((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+    } else if (e && e.shiftKey && selectedFieldIds.size > 0) {
+      const lastId = Array.from(selectedFieldIds).pop();
+      const sorted = sortedFields.map((f) => f.id);
+      const a = sorted.indexOf(lastId);
+      const b = sorted.indexOf(id);
+      if (a >= 0 && b >= 0) {
+        const start = Math.min(a, b);
+        const end = Math.max(a, b);
+        const range = sorted.slice(start, end + 1);
+        setSelectedFieldIds((prev) => {
+          const next = new Set(prev);
+          range.forEach((fid) => next.add(fid));
+          return next;
+        });
+      } else {
+        setSelectedFieldIds(/* @__PURE__ */ new Set([id]));
+      }
+    } else {
+      setSelectedFieldIds(/* @__PURE__ */ new Set([id]));
+    }
+    setRightTab("properties");
+  }, [selectedFieldIds]);
+  const handleGroupMove = useCallback3((ids, dx, dy) => {
+    setFields((prev) => prev.map((f) => {
+      if (!ids.includes(f.id)) 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 = useCallback3(() => {
     const name = newRoleName.trim();
     if (name && !signerRoles.includes(name)) {
@@ -919,56 +988,58 @@ function DesignerView({
     const sticky = lastStylesRef.current[fieldType];
     const styledField = sticky ? { ...field, ...sticky } : field;
     setFields((prev) => [...prev, styledField]);
-    setSelectedFieldId(styledField.id);
+    setSelectedFieldIds(/* @__PURE__ */ new Set([styledField.id]));
     setRightTab("properties");
   }, [activeRole, fields]);
   useEffect2(() => {
     const handleKeyDown = (e) => {
       if (e.key !== "Delete" && e.key !== "Backspace") return;
-      if (!selectedFieldId) return;
+      if (selectedFieldIds.size === 0) return;
       const tag = (document.activeElement?.tagName || "").toLowerCase();
       if (tag === "input" || tag === "textarea" || tag === "select") return;
       if (document.activeElement?.isContentEditable) return;
       e.preventDefault();
-      if (window.confirm("Delete this field?")) {
-        handleFieldDelete(selectedFieldId);
+      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());
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [selectedFieldId, handleFieldDelete]);
+  }, [selectedFieldIds]);
   useEffect2(() => {
     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 === "c" && selectedFieldId) {
-        const field = fields.find((f) => f.id === selectedFieldId);
-        if (field) {
+      if (isMod && e.key === "c" && selectedFieldIds.size > 0) {
+        const selected = fields.filter((f) => selectedFieldIds.has(f.id));
+        if (selected.length > 0) {
           e.preventDefault();
-          setClipboardField(field);
+          setClipboardFields(selected);
         }
       }
-      if (isMod && e.key === "v" && clipboardField) {
+      if (isMod && e.key === "v" && clipboardFields.length > 0) {
         e.preventDefault();
-        const existingLabels = fields.map((f) => f.label);
-        const newField = {
-          ...clipboardField,
-          id: generateId(),
-          label: uniqueLabel(clipboardField.label, existingLabels),
-          x: clipboardField.x + 2,
-          y: clipboardField.y + 2,
-          value: ""
-        };
-        setFields((prev) => [...prev, newField]);
-        setSelectedFieldId(newField.id);
+        let existingLabels = fields.map((f) => f.label);
+        const newIds = /* @__PURE__ */ new Set();
+        const newFields = clipboardFields.map((cf) => {
+          const label = uniqueLabel(cf.label, existingLabels);
+          existingLabels.push(label);
+          const id = generateId();
+          newIds.add(id);
+          return { ...cf, id, label, x: cf.x + 2, y: cf.y + 2, value: "" };
+        });
+        setFields((prev) => [...prev, ...newFields]);
+        setSelectedFieldIds(newIds);
         setRightTab("properties");
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [selectedFieldId, fields, clipboardField]);
+  }, [selectedFieldIds, fields, clipboardFields]);
   const handleResizeStart = useCallback3((e) => {
     e.preventDefault();
     resizingRef.current = true;
@@ -993,7 +1064,7 @@ function DesignerView({
     if (Math.abs(a.y - b.y) > bandThreshold) return a.y - b.y;
     return a.x - b.x;
   });
-  const selectedField = fields.find((f) => f.id === selectedFieldId) || null;
+  const selectedField = selectedFieldIds.size === 1 ? fields.find((f) => f.id === Array.from(selectedFieldIds)[0]) || null : null;
   const renderFieldContent = useCallback3((field) => {
     if (field.type === "blackout" || field.type === "whiteout") {
       return null;
@@ -1004,15 +1075,22 @@ function DesignerView({
       }
     }
     const inkColor = field.inkColor || "#000000";
+    const cssFontFamily = field.fontFamily === "Courier" ? '"Courier New", Courier, monospace' : field.fontFamily === "TimesRoman" ? '"Times New Roman", Times, serif' : field.fontFamily === "Helvetica" ? "Helvetica, Arial, sans-serif" : void 0;
     return /* @__PURE__ */ jsx4(
       "div",
       {
         className: "field-overlay-placeholder",
-        style: { color: field.value ? inkColor : void 0, fontSize: `${field.fontSize * 0.6}px` },
+        style: {
+          color: field.value ? inkColor : void 0,
+          fontSize: `${field.fontSize * 0.6}px`,
+          fontFamily: cssFontFamily,
+          letterSpacing: field.letterSpacing ? `${field.letterSpacing * 0.6}px` : void 0,
+          lineHeight: field.lineHeight ? `${field.lineHeight}` : void 0
+        },
         children: field.value || field.placeholder
       }
     );
-  }, []);
+  }, [fields]);
   const headerButtons = pages.length > 0 ? /* @__PURE__ */ jsxs4(Fragment, { children: [
     /* @__PURE__ */ jsxs4("label", { className: "header-btn header-btn-outline", children: [
       "Change PDF",
@@ -1106,13 +1184,11 @@ function DesignerView({
           {
             pages,
             fields,
-            selectedFieldId,
-            onSelectField: (id) => {
-              setSelectedFieldId(id);
-              if (id) setRightTab("properties");
-            },
+            selectedFieldIds,
+            onSelectField: handleSelectField,
             onFieldMove: handleFieldMove,
             onFieldResize: handleFieldResize,
+            onGroupMove: handleGroupMove,
             onPageClick: handlePageClick,
             onDropField: handleDropOnPage,
             mode: "designer",
@@ -1149,7 +1225,13 @@ function DesignerView({
             )
           ] }),
           /* @__PURE__ */ jsxs4("div", { className: "panel-tab-content", children: [
-            rightTab === "properties" && /* @__PURE__ */ jsx4(Fragment, { children: selectedField ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+            rightTab === "properties" && /* @__PURE__ */ jsx4(Fragment, { children: selectedFieldIds.size > 1 ? /* @__PURE__ */ jsxs4("div", { className: "panel-empty", children: [
+              /* @__PURE__ */ jsxs4("strong", { children: [
+                selectedFieldIds.size,
+                " fields selected"
+              ] }),
+              /* @__PURE__ */ jsx4("p", { children: "Drag to move as a group. Press Delete to remove all. Cmd/Ctrl+C to copy." })
+            ] }) : selectedField ? /* @__PURE__ */ jsxs4(Fragment, { children: [
               /* @__PURE__ */ jsx4(
                 FieldPropertyPanel,
                 {
@@ -1196,9 +1278,9 @@ function DesignerView({
             rightTab === "fields" && /* @__PURE__ */ jsx4(Fragment, { children: fields.length === 0 ? /* @__PURE__ */ jsx4("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__ */ jsx4("div", { className: "field-list", children: sortedFields.map((f) => /* @__PURE__ */ jsxs4(
               "div",
               {
-                className: `field-list-item ${f.id === selectedFieldId ? "active" : ""}`,
+                className: `field-list-item ${selectedFieldIds.has(f.id) ? "active" : ""}`,
                 onClick: () => {
-                  setSelectedFieldId(f.id);
+                  setSelectedFieldIds(/* @__PURE__ */ new Set([f.id]));
                   setRightTab("properties");
                 },
                 children: [
@@ -1793,9 +1875,10 @@ function SignerView({
     const fontStyle = {
       fontSize: `${field.fontSize * 0.6}px`,
       letterSpacing: field.letterSpacing ? `${field.letterSpacing * 0.6}px` : void 0,
-      fontFamily: field.fontFamily === "Courier" ? "monospace" : field.fontFamily === "TimesRoman" ? "serif" : void 0
+      lineHeight: field.lineHeight ? `${field.lineHeight}` : void 0,
+      fontFamily: field.fontFamily === "Courier" ? '"Courier New", Courier, monospace' : field.fontFamily === "TimesRoman" ? '"Times New Roman", Times, serif' : field.fontFamily === "Helvetica" ? "Helvetica, Arial, sans-serif" : void 0
     };
-    if (field.options && field.options.length > 0) {
+    if (field.type === "dropdown" || field.options && field.options.length > 0) {
       return /* @__PURE__ */ jsxs6(
         "select",
         {
@@ -1807,7 +1890,7 @@ function SignerView({
           style: fontStyle,
           children: [
             /* @__PURE__ */ jsx6("option", { value: "", children: field.placeholder || "Select..." }),
-            field.options.map((opt) => /* @__PURE__ */ jsx6("option", { value: opt, children: opt }, opt))
+            (field.options || []).map((opt) => /* @__PURE__ */ jsx6("option", { value: opt, children: opt }, opt))
           ]
         }
       );
@@ -1854,8 +1937,8 @@ function SignerView({
         {
           pages,
           fields,
-          selectedFieldId,
-          onSelectField: setSelectedFieldId,
+          selectedFieldIds: new Set(selectedFieldId ? [selectedFieldId] : []),
+          onSelectField: (id) => setSelectedFieldId(id),
           mode: "signer",
           currentSigner: signer,
           renderFieldContent
@@ -1887,8 +1970,8 @@ function SignerView({
                 initialValue: selectedField.value
               }
             ),
-            selectedField.type === "text" && /* @__PURE__ */ jsxs6(Fragment2, { children: [
-              selectedField.options && selectedField.options.length > 0 ? /* @__PURE__ */ jsxs6(
+            (selectedField.type === "text" || selectedField.type === "dropdown") && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+              selectedField.type === "dropdown" || selectedField.options && selectedField.options.length > 0 ? /* @__PURE__ */ jsxs6(
                 "select",
                 {
                   value: selectedField.value,
@@ -1896,7 +1979,7 @@ function SignerView({
                   className: "signer-text-input",
                   children: [
                     /* @__PURE__ */ jsx6("option", { value: "", children: selectedField.placeholder || "Select..." }),
-                    selectedField.options.map((opt) => /* @__PURE__ */ jsx6("option", { value: opt, children: opt }, opt))
+                    (selectedField.options || []).map((opt) => /* @__PURE__ */ jsx6("option", { value: opt, children: opt }, opt))
                   ]
                 }
               ) : /* @__PURE__ */ jsx6(