@unlev/exeq 0.2.1 → 0.2.2

package/dist/index.d.mts

@@ -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

@@ -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

@@ -212,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
@@ -275,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
@@ -294,9 +298,12 @@ function PdfViewer({
 function FieldOverlayItem({
   field,
   isSelected,
+  isMultiSelected,
   onSelect,
   onMove,
   onResize,
+  onGroupMove,
+  selectedIds,
   mode,
   currentSigner,
   renderContent
@@ -313,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 = {
@@ -322,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;
@@ -338,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();
@@ -386,7 +399,7 @@ function FieldOverlayItem({
       },
       onClick: (e) => {
         e.stopPropagation();
-        onSelect();
+        onSelect(e);
       },
       onMouseDown: handleMouseDown,
       children: [
@@ -819,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");
@@ -830,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)({});
@@ -884,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) => {
@@ -922,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)) {
@@ -986,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;
@@ -1060,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;
@@ -1180,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",
@@ -1223,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,
                 {
@@ -1270,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: [
@@ -1929,8 +1994,8 @@ function SignerView({
         {
           pages,
           fields,
-          selectedFieldId,
-          onSelectField: setSelectedFieldId,
+          selectedFieldIds: new Set(selectedFieldId ? [selectedFieldId] : []),
+          onSelectField: (id) => setSelectedFieldId(id),
           mode: "signer",
           currentSigner: signer,
           renderFieldContent