@unlev/exeq 0.2.0 → 0.2.2

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function generateId(): string;
-type FieldType = 'text' | 'signature' | 'signed-date' | 'checkbox' | 'initials' | 'blackout' | 'whiteout';
+type FieldType = 'text' | 'dropdown' | 'signature' | 'signed-date' | 'checkbox' | 'initials' | 'blackout' | 'whiteout';
 type TextSubtype = 'freeform' | 'number' | 'date' | 'email' | 'phone';
 interface FormField {
     id: string;
@@ -112,17 +112,19 @@ declare function renderPdfPages(source: string | ArrayBuffer, scale?: number): P
 interface PdfViewerProps {
     pages: RenderedPage[];
     fields: FormField[];
-    selectedFieldId: string | null;
-    onSelectField: (id: string | null) => void;
+    selectedFieldIds: Set<string>;
+    onSelectField: (id: string | null, e?: React.MouseEvent) => void;
     onFieldMove?: (id: string, page: number, x: number, y: number) => void;
     onFieldResize?: (id: string, width: number, height: number) => void;
     onPageClick?: (page: number, x: number, y: number) => void;
     onDropField?: (page: number, x: number, y: number, fieldType: FieldType) => void;
+    /** Move multiple fields as a group. Called with dx/dy in percentage units. */
+    onGroupMove?: (ids: string[], dx: number, dy: number) => void;
     mode: 'designer' | 'signer';
     currentSigner?: string;
     renderFieldContent?: (field: FormField) => React.ReactNode;
 }
-declare function PdfViewer({ pages, fields, selectedFieldId, onSelectField, onFieldMove, onFieldResize, onPageClick, onDropField, mode, currentSigner, renderFieldContent, }: PdfViewerProps): react_jsx_runtime.JSX.Element;
+declare function PdfViewer({ pages, fields, selectedFieldIds, onSelectField, onFieldMove, onFieldResize, onPageClick, onDropField, onGroupMove, mode, currentSigner, renderFieldContent, }: PdfViewerProps): react_jsx_runtime.JSX.Element;
 
 interface SignatureCanvasProps {
     width?: number;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function generateId(): string;
-type FieldType = 'text' | 'signature' | 'signed-date' | 'checkbox' | 'initials' | 'blackout' | 'whiteout';
+type FieldType = 'text' | 'dropdown' | 'signature' | 'signed-date' | 'checkbox' | 'initials' | 'blackout' | 'whiteout';
 type TextSubtype = 'freeform' | 'number' | 'date' | 'email' | 'phone';
 interface FormField {
     id: string;
@@ -112,17 +112,19 @@ declare function renderPdfPages(source: string | ArrayBuffer, scale?: number): P
 interface PdfViewerProps {
     pages: RenderedPage[];
     fields: FormField[];
-    selectedFieldId: string | null;
-    onSelectField: (id: string | null) => void;
+    selectedFieldIds: Set<string>;
+    onSelectField: (id: string | null, e?: React.MouseEvent) => void;
     onFieldMove?: (id: string, page: number, x: number, y: number) => void;
     onFieldResize?: (id: string, width: number, height: number) => void;
     onPageClick?: (page: number, x: number, y: number) => void;
     onDropField?: (page: number, x: number, y: number, fieldType: FieldType) => void;
+    /** Move multiple fields as a group. Called with dx/dy in percentage units. */
+    onGroupMove?: (ids: string[], dx: number, dy: number) => void;
     mode: 'designer' | 'signer';
     currentSigner?: string;
     renderFieldContent?: (field: FormField) => React.ReactNode;
 }
-declare function PdfViewer({ pages, fields, selectedFieldId, onSelectField, onFieldMove, onFieldResize, onPageClick, onDropField, mode, currentSigner, renderFieldContent, }: PdfViewerProps): react_jsx_runtime.JSX.Element;
+declare function PdfViewer({ pages, fields, selectedFieldIds, onSelectField, onFieldMove, onFieldResize, onPageClick, onDropField, onGroupMove, mode, currentSigner, renderFieldContent, }: PdfViewerProps): react_jsx_runtime.JSX.Element;
 
 interface SignatureCanvasProps {
     width?: number;

package/dist/index.js

@@ -95,6 +95,12 @@ var FIELD_DEFAULTS = {
     placeholder: "Enter text",
     textSubtype: "freeform"
   },
+  dropdown: {
+    width: 20,
+    height: 3,
+    fontSize: 12,
+    placeholder: "Select..."
+  },
   signature: {
     width: 20,
     height: 6,
@@ -134,6 +140,7 @@ var FIELD_DEFAULTS = {
 };
 var TYPE_LABELS = {
   text: "Text Field",
+  dropdown: "Dropdown",
   signature: "Signature",
   "signed-date": "Signed Date",
   checkbox: "Checkbox",
@@ -205,12 +212,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function PdfViewer({
   pages,
   fields,
-  selectedFieldId,
+  selectedFieldIds,
   onSelectField,
   onFieldMove,
   onFieldResize,
   onPageClick,
   onDropField,
+  onGroupMove,
   mode,
   currentSigner,
   renderFieldContent
@@ -268,10 +276,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
@@ -287,9 +298,12 @@ function PdfViewer({
 function FieldOverlayItem({
   field,
   isSelected,
+  isMultiSelected,
   onSelect,
   onMove,
   onResize,
+  onGroupMove,
+  selectedIds,
   mode,
   currentSigner,
   renderContent
@@ -306,7 +320,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 = {
@@ -315,14 +329,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;
@@ -331,7 +351,7 @@ function FieldOverlayItem({
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
-  }, [field, mode, onMove, onSelect]);
+  }, [field, mode, onMove, onSelect, isMultiSelected, onGroupMove, selectedIds]);
   const handleResizeMouseDown = (0, import_react.useCallback)((e) => {
     if (mode !== "designer" || !onResize) return;
     e.preventDefault();
@@ -379,7 +399,7 @@ function FieldOverlayItem({
       },
       onClick: (e) => {
         e.stopPropagation();
-        onSelect();
+        onSelect(e);
       },
       onMouseDown: handleMouseDown,
       children: [
@@ -407,8 +427,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] = (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: [
@@ -435,6 +455,7 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
           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" }),
@@ -586,8 +607,8 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         c.value
       )) })
     ] }),
-    field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Predefined Options" }),
+    (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 }),
@@ -633,7 +654,8 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
           )
         ] })
       ] }),
-      (field.options?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "panel-hint", children: "Signer will choose from these options via dropdown" })
+      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" })
     ] })
   ] });
 }
@@ -782,6 +804,7 @@ function isValidApiKey(key) {
 var import_jsx_runtime4 = require("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" },
@@ -809,7 +832,7 @@ function DesignerView({
   }
   const [pages, setPages] = (0, import_react4.useState)([]);
   const [fields, setFields] = (0, import_react4.useState)(initialTemplate?.fields ?? []);
-  const [selectedFieldId, setSelectedFieldId] = (0, import_react4.useState)(null);
+  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");
@@ -820,7 +843,7 @@ function DesignerView({
   const [newRoleName, setNewRoleName] = (0, import_react4.useState)("");
   const [draggingFieldType, setDraggingFieldType] = (0, import_react4.useState)(null);
   const [panelWidth, setPanelWidth] = (0, import_react4.useState)(380);
-  const [clipboardField, setClipboardField] = (0, import_react4.useState)(null);
+  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)({});
@@ -874,7 +897,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 = (0, import_react4.useCallback)((id, page, x, y) => {
@@ -912,8 +935,54 @@ function DesignerView({
   }, []);
   const handleFieldDelete = (0, import_react4.useCallback)((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 = (0, import_react4.useCallback)((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 = (0, import_react4.useCallback)((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 = (0, import_react4.useCallback)(() => {
     const name = newRoleName.trim();
     if (name && !signerRoles.includes(name)) {
@@ -976,56 +1045,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]);
   (0, import_react4.useEffect)(() => {
     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]);
   (0, import_react4.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 === "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 = (0, import_react4.useCallback)((e) => {
     e.preventDefault();
     resizingRef.current = true;
@@ -1050,7 +1121,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 = (0, import_react4.useCallback)((field) => {
     if (field.type === "blackout" || field.type === "whiteout") {
       return null;
@@ -1061,15 +1132,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__ */ (0, import_jsx_runtime4.jsx)(
       "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__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "header-btn header-btn-outline", children: [
       "Change PDF",
@@ -1163,13 +1241,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",
@@ -1206,7 +1282,13 @@ 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: selectedField ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { 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,
                 {
@@ -1253,9 +1335,9 @@ function DesignerView({
             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 ${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: [
@@ -1850,9 +1932,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__ */ (0, import_jsx_runtime6.jsxs)(
         "select",
         {
@@ -1864,7 +1947,7 @@ function SignerView({
           style: fontStyle,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: field.placeholder || "Select..." }),
-            field.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: opt, children: opt }, opt))
+            (field.options || []).map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: opt, children: opt }, opt))
           ]
         }
       );
@@ -1911,8 +1994,8 @@ function SignerView({
         {
           pages,
           fields,
-          selectedFieldId,
-          onSelectField: setSelectedFieldId,
+          selectedFieldIds: new Set(selectedFieldId ? [selectedFieldId] : []),
+          onSelectField: (id) => setSelectedFieldId(id),
           mode: "signer",
           currentSigner: signer,
           renderFieldContent
@@ -1944,8 +2027,8 @@ function SignerView({
                 initialValue: selectedField.value
               }
             ),
-            selectedField.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-              selectedField.options && selectedField.options.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            (selectedField.type === "text" || selectedField.type === "dropdown") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+              selectedField.type === "dropdown" || selectedField.options && selectedField.options.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "select",
                 {
                   value: selectedField.value,
@@ -1953,7 +2036,7 @@ function SignerView({
                   className: "signer-text-input",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: selectedField.placeholder || "Select..." }),
-                    selectedField.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: opt, children: opt }, opt))
+                    (selectedField.options || []).map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: opt, children: opt }, opt))
                   ]
                 }
               ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(