@josephomills/esign 0.3.0 → 0.5.0

package/dist/ui/index.d.cts

@@ -38,8 +38,8 @@ interface ViewerPlacement {
 interface PdfViewerProps {
     /** Token-gated source PDF URL. */
     url: string;
-    /** Optional signature-box hint, drawn on its page at normalized coords. */
-    placement?: ViewerPlacement;
+    /** Signature-box hints, each drawn on its page at normalized coords. */
+    placements?: ViewerPlacement[];
     /** Override the pdf.js worker (defaults to the unpkg .mjs for the bundled version). */
     workerSrc?: string;
     primaryColor?: string;
@@ -49,7 +49,32 @@ interface PdfViewerProps {
  * box overlaid where the manager placed it. Falls back to an <iframe> + download
  * link if pdf.js fails to load — so the document is always readable.
  */
-declare function PdfViewer({ url, placement, workerSrc, primaryColor }: PdfViewerProps): react.JSX.Element;
+declare function PdfViewer({ url, placements, workerSrc, primaryColor }: PdfViewerProps): react.JSX.Element;
+
+interface DesignerPlacement {
+    id: string;
+    label: string;
+    page: number;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+interface FieldDesignerProps {
+    /** The chosen PDF's bytes (read client-side before upload). */
+    pdfData: Uint8Array;
+    value: DesignerPlacement[];
+    onChange: (fields: DesignerPlacement[]) => void;
+    workerSrc?: string;
+    primaryColor?: string;
+}
+/**
+ * Place + edit one or more named signature fields on a pdf.js-rendered page.
+ * Touch + mouse (Pointer Events): drag empty space to add a field, drag a field
+ * to move, drag a corner to resize, × to remove. Fields are listed and renameable
+ * on the side (and wrap below on narrow screens). Each box shows its name.
+ */
+declare function FieldDesigner({ pdfData, value, onChange, workerSrc, primaryColor, }: FieldDesignerProps): react.JSX.Element;
 
 interface SigningBranding {
     appName?: string;
@@ -62,7 +87,7 @@ interface SigningExperienceProps {
     /** Submit endpoint (POST /sign/<token>/submit). */
     submitUrl: string;
     documentTitle: string;
-    placement?: ViewerPlacement;
+    placements?: ViewerPlacement[];
     branding?: SigningBranding;
     /** Called after a successful signature submit (host navigates to /done). */
     onSigned?: () => void;
@@ -75,4 +100,4 @@ interface SigningExperienceProps {
  */
 declare function SigningExperience(props: SigningExperienceProps): react.JSX.Element;
 
-export { ConsentBlock, type ConsentBlockProps, type ConsentValue, PdfViewer, type PdfViewerProps, SignaturePad, type SignaturePadProps, type SigningBranding, SigningExperience, type SigningExperienceProps, type ViewerPlacement };
+export { ConsentBlock, type ConsentBlockProps, type ConsentValue, type DesignerPlacement, FieldDesigner, type FieldDesignerProps, PdfViewer, type PdfViewerProps, SignaturePad, type SignaturePadProps, type SigningBranding, SigningExperience, type SigningExperienceProps, type ViewerPlacement };

package/dist/ui/index.d.ts

@@ -38,8 +38,8 @@ interface ViewerPlacement {
 interface PdfViewerProps {
     /** Token-gated source PDF URL. */
     url: string;
-    /** Optional signature-box hint, drawn on its page at normalized coords. */
-    placement?: ViewerPlacement;
+    /** Signature-box hints, each drawn on its page at normalized coords. */
+    placements?: ViewerPlacement[];
     /** Override the pdf.js worker (defaults to the unpkg .mjs for the bundled version). */
     workerSrc?: string;
     primaryColor?: string;
@@ -49,7 +49,32 @@ interface PdfViewerProps {
  * box overlaid where the manager placed it. Falls back to an <iframe> + download
  * link if pdf.js fails to load — so the document is always readable.
  */
-declare function PdfViewer({ url, placement, workerSrc, primaryColor }: PdfViewerProps): react.JSX.Element;
+declare function PdfViewer({ url, placements, workerSrc, primaryColor }: PdfViewerProps): react.JSX.Element;
+
+interface DesignerPlacement {
+    id: string;
+    label: string;
+    page: number;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+interface FieldDesignerProps {
+    /** The chosen PDF's bytes (read client-side before upload). */
+    pdfData: Uint8Array;
+    value: DesignerPlacement[];
+    onChange: (fields: DesignerPlacement[]) => void;
+    workerSrc?: string;
+    primaryColor?: string;
+}
+/**
+ * Place + edit one or more named signature fields on a pdf.js-rendered page.
+ * Touch + mouse (Pointer Events): drag empty space to add a field, drag a field
+ * to move, drag a corner to resize, × to remove. Fields are listed and renameable
+ * on the side (and wrap below on narrow screens). Each box shows its name.
+ */
+declare function FieldDesigner({ pdfData, value, onChange, workerSrc, primaryColor, }: FieldDesignerProps): react.JSX.Element;
 
 interface SigningBranding {
     appName?: string;
@@ -62,7 +87,7 @@ interface SigningExperienceProps {
     /** Submit endpoint (POST /sign/<token>/submit). */
     submitUrl: string;
     documentTitle: string;
-    placement?: ViewerPlacement;
+    placements?: ViewerPlacement[];
     branding?: SigningBranding;
     /** Called after a successful signature submit (host navigates to /done). */
     onSigned?: () => void;
@@ -75,4 +100,4 @@ interface SigningExperienceProps {
  */
 declare function SigningExperience(props: SigningExperienceProps): react.JSX.Element;
 
-export { ConsentBlock, type ConsentBlockProps, type ConsentValue, PdfViewer, type PdfViewerProps, SignaturePad, type SignaturePadProps, type SigningBranding, SigningExperience, type SigningExperienceProps, type ViewerPlacement };
+export { ConsentBlock, type ConsentBlockProps, type ConsentValue, type DesignerPlacement, FieldDesigner, type FieldDesignerProps, PdfViewer, type PdfViewerProps, SignaturePad, type SignaturePadProps, type SigningBranding, SigningExperience, type SigningExperienceProps, type ViewerPlacement };

package/dist/ui/index.js

@@ -1,7 +1,7 @@
 "use client";
 import SignaturePadLib from 'signature_pad';
 import { useState, useRef, useEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/ui/SignaturePad.tsx
 function SignaturePad({ primaryColor = "#4f46e5", onChange }) {
@@ -165,7 +165,7 @@ function ConsentBlock({ value, onChange, primaryColor = "#4f46e5" }) {
     ] })
   ] });
 }
-function PdfViewer({ url, placement, workerSrc, primaryColor = "#4f46e5" }) {
+function PdfViewer({ url, placements, workerSrc, primaryColor = "#4f46e5" }) {
   const containerRef = useRef(null);
   const [failed, setFailed] = useState(false);
   useEffect(() => {
@@ -196,12 +196,13 @@ function PdfViewer({ url, placement, workerSrc, primaryColor = "#4f46e5" }) {
           wrap.style.marginBottom = "14px";
           wrap.style.boxShadow = "0 1px 4px rgba(0,0,0,0.12)";
           wrap.appendChild(canvas);
-          if (placement && placement.page === p) {
+          for (const pl of placements ?? []) {
+            if (pl.page !== p) continue;
             const box = document.createElement("div");
-            box.style.cssText = `position:absolute;left:${placement.x * 100}%;top:${placement.y * 100}%;width:${placement.w * 100}%;height:${placement.h * 100}%;border:2px dashed ${primaryColor};background:${primaryColor}1a;border-radius:4px;pointer-events:none;`;
+            box.style.cssText = `position:absolute;left:${pl.x * 100}%;top:${pl.y * 100}%;width:${pl.w * 100}%;height:${pl.h * 100}%;border:2px dashed ${primaryColor};background:${primaryColor}1a;border-radius:4px;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden;`;
             const label = document.createElement("span");
-            label.textContent = "Signature";
-            label.style.cssText = `position:absolute;top:-18px;left:0;font-size:11px;font-weight:600;color:${primaryColor};`;
+            label.textContent = "\u270D Sign here";
+            label.style.cssText = `font-size:11px;font-weight:600;color:${primaryColor};opacity:0.85;white-space:nowrap;`;
             box.appendChild(label);
             wrap.appendChild(box);
           }
@@ -218,7 +219,7 @@ function PdfViewer({ url, placement, workerSrc, primaryColor = "#4f46e5" }) {
     return () => {
       cancelled = true;
     };
-  }, [url, placement, workerSrc, primaryColor]);
+  }, [url, placements, workerSrc, primaryColor]);
   if (failed) {
     return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
       /* @__PURE__ */ jsx(
@@ -234,6 +235,374 @@ function PdfViewer({ url, placement, workerSrc, primaryColor = "#4f46e5" }) {
   }
   return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width: "100%" } });
 }
+var clamp = (v, min, max) => Math.min(Math.max(v, min), max);
+var MIN_W = 0.04;
+var MIN_H = 0.02;
+var newId = () => typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+function FieldDesigner({
+  pdfData,
+  value,
+  onChange,
+  workerSrc,
+  primaryColor = "#4f46e5"
+}) {
+  const [numPages, setNumPages] = useState(0);
+  const [page, setPage] = useState(value[0]?.page ?? 1);
+  const [failed, setFailed] = useState(false);
+  const [selectedId, setSelectedId] = useState(value[0]?.id ?? null);
+  const [drag, setDrag] = useState(null);
+  const [live, setLive] = useState(null);
+  const stageRef = useRef(null);
+  const canvasRef = useRef(null);
+  const docRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const pdfjs = await import('pdfjs-dist');
+        pdfjs.GlobalWorkerOptions.workerSrc = workerSrc ?? `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+        const doc = await pdfjs.getDocument({ data: pdfData.slice() }).promise;
+        if (cancelled) return;
+        docRef.current = doc;
+        setNumPages(doc.numPages);
+        setPage((p) => Math.min(p, doc.numPages));
+      } catch {
+        if (!cancelled) setFailed(true);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [pdfData, workerSrc]);
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      const doc = docRef.current;
+      const canvas = canvasRef.current;
+      if (!doc || !canvas) return;
+      const pageObj = await doc.getPage(page);
+      if (cancelled) return;
+      const width = stageRef.current?.clientWidth || 480;
+      const base = pageObj.getViewport({ scale: 1 });
+      const viewport = pageObj.getViewport({ scale: width / base.width });
+      const ratio = Math.max(window.devicePixelRatio || 1, 1);
+      canvas.width = Math.floor(viewport.width * ratio);
+      canvas.height = Math.floor(viewport.height * ratio);
+      canvas.style.width = "100%";
+      canvas.style.display = "block";
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      ctx.scale(ratio, ratio);
+      await pageObj.render({ canvasContext: ctx, viewport, canvas }).promise;
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [page, numPages]);
+  function rel(e) {
+    const r = stageRef.current.getBoundingClientRect();
+    return {
+      x: clamp((e.clientX - r.left) / r.width, 0, 1),
+      y: clamp((e.clientY - r.top) / r.height, 0, 1)
+    };
+  }
+  function onPointerMove(e) {
+    if (!drag) return;
+    const p = rel(e);
+    let b;
+    if (drag.mode === "new") {
+      b = {
+        x: Math.min(drag.start.x, p.x),
+        y: Math.min(drag.start.y, p.y),
+        w: Math.abs(p.x - drag.start.x),
+        h: Math.abs(p.y - drag.start.y)
+      };
+    } else if (drag.mode === "move") {
+      const dx = p.x - drag.start.x;
+      const dy = p.y - drag.start.y;
+      b = {
+        x: clamp(drag.orig.x + dx, 0, 1 - drag.orig.w),
+        y: clamp(drag.orig.y + dy, 0, 1 - drag.orig.h),
+        w: drag.orig.w,
+        h: drag.orig.h
+      };
+    } else {
+      let x1 = drag.orig.x;
+      let y1 = drag.orig.y;
+      let x2 = drag.orig.x + drag.orig.w;
+      let y2 = drag.orig.y + drag.orig.h;
+      if (drag.handle[0] === "n") y1 = p.y;
+      else y2 = p.y;
+      if (drag.handle[1] === "w") x1 = p.x;
+      else x2 = p.x;
+      b = { x: Math.min(x1, x2), y: Math.min(y1, y2), w: Math.abs(x2 - x1), h: Math.abs(y2 - y1) };
+    }
+    setLive(b);
+  }
+  function onPointerUp() {
+    if (drag && live && live.w >= MIN_W && live.h >= MIN_H) {
+      if (drag.mode === "new") {
+        const f = {
+          id: newId(),
+          label: value.length === 0 ? "Signature" : `Signature ${value.length + 1}`,
+          page,
+          ...live
+        };
+        onChange([...value, f]);
+        setSelectedId(f.id);
+      } else {
+        onChange(value.map((x) => x.id === drag.id ? { ...x, ...live } : x));
+      }
+    }
+    setDrag(null);
+    setLive(null);
+  }
+  function removeField(id) {
+    onChange(value.filter((f) => f.id !== id));
+    if (selectedId === id) setSelectedId(null);
+  }
+  function rename(id, label) {
+    onChange(value.map((f) => f.id === id ? { ...f, label } : f));
+  }
+  const handle = (id, geom, c) => {
+    const cx = c[1] === "w" ? geom.x : geom.x + geom.w;
+    const cy = c[0] === "n" ? geom.y : geom.y + geom.h;
+    const cursor = c === "nw" || c === "se" ? "nwse-resize" : "nesw-resize";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        onPointerDown: (e) => {
+          e.stopPropagation();
+          setDrag({ mode: "resize", id, handle: c, orig: geom });
+        },
+        style: {
+          position: "absolute",
+          left: `${cx * 100}%`,
+          top: `${cy * 100}%`,
+          width: 13,
+          height: 13,
+          marginLeft: -7,
+          marginTop: -7,
+          background: "#fff",
+          border: `2px solid ${primaryColor}`,
+          borderRadius: 2,
+          cursor,
+          touchAction: "none"
+        }
+      },
+      c
+    );
+  };
+  if (failed) {
+    return /* @__PURE__ */ jsx("div", { style: { color: "#b91c1c", fontSize: 14 }, children: "Could not render this PDF for placement. Please check the file is a valid, unencrypted PDF." });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 16, alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { flex: "1 1 340px", minWidth: 260 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "#6b7280" }, children: "Drag a box where a signature goes." }),
+        numPages > 1 ? /* @__PURE__ */ jsxs("label", { style: { marginLeft: "auto", fontSize: 13, color: "#374151" }, children: [
+          "Page",
+          " ",
+          /* @__PURE__ */ jsx("select", { value: page, onChange: (e) => setPage(Number(e.target.value)), children: Array.from({ length: numPages }, (_, i) => /* @__PURE__ */ jsx("option", { value: i + 1, children: i + 1 }, i)) })
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: stageRef,
+          onPointerDown: (e) => setDrag({ mode: "new", start: rel(e) }),
+          onPointerMove,
+          onPointerUp,
+          onPointerLeave: onPointerUp,
+          style: {
+            position: "relative",
+            cursor: "crosshair",
+            userSelect: "none",
+            touchAction: "none",
+            border: "1px solid #e5e7eb",
+            borderRadius: 6,
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ jsx("canvas", { ref: canvasRef }),
+            value.filter((f) => f.page === page).map((f) => {
+              const dragging = drag && drag.mode !== "new" && drag.id === f.id;
+              const geom = dragging && live ? live : f;
+              const isSel = f.id === selectedId;
+              return /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    onPointerDown: (e) => {
+                      e.stopPropagation();
+                      setSelectedId(f.id);
+                      setDrag({ mode: "move", id: f.id, start: rel(e), orig: geom });
+                    },
+                    style: {
+                      position: "absolute",
+                      left: `${geom.x * 100}%`,
+                      top: `${geom.y * 100}%`,
+                      width: `${geom.w * 100}%`,
+                      height: `${geom.h * 100}%`,
+                      border: `2px ${isSel ? "solid" : "dashed"} ${primaryColor}`,
+                      background: `${primaryColor}${isSel ? "22" : "14"}`,
+                      borderRadius: 3,
+                      cursor: "move",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      overflow: "hidden",
+                      touchAction: "none"
+                    },
+                    children: /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        style: {
+                          fontSize: 12,
+                          fontWeight: 600,
+                          color: primaryColor,
+                          opacity: 0.85,
+                          whiteSpace: "nowrap",
+                          padding: "0 4px"
+                        },
+                        children: [
+                          "\u270D ",
+                          f.label || "Signature"
+                        ]
+                      }
+                    )
+                  }
+                ),
+                isSel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  ["nw", "ne", "sw", "se"].map((c) => handle(f.id, geom, c)),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Remove ${f.label}`,
+                      onPointerDown: (e) => e.stopPropagation(),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        removeField(f.id);
+                      },
+                      style: {
+                        position: "absolute",
+                        left: `${(geom.x + geom.w) * 100}%`,
+                        top: `${geom.y * 100}%`,
+                        transform: "translate(-50%, -50%)",
+                        marginTop: -18,
+                        width: 22,
+                        height: 22,
+                        borderRadius: "50%",
+                        background: primaryColor,
+                        color: "#fff",
+                        border: "2px solid #fff",
+                        boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
+                        fontSize: 14,
+                        lineHeight: "16px",
+                        cursor: "pointer",
+                        padding: 0,
+                        touchAction: "none"
+                      },
+                      children: "\xD7"
+                    }
+                  )
+                ] }) : null
+              ] }, f.id);
+            }),
+            drag?.mode === "new" && live ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: `${live.x * 100}%`,
+                  top: `${live.y * 100}%`,
+                  width: `${live.w * 100}%`,
+                  height: `${live.h * 100}%`,
+                  border: `2px dashed ${primaryColor}`,
+                  background: `${primaryColor}22`,
+                  borderRadius: 3,
+                  pointerEvents: "none"
+                }
+              }
+            ) : null
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { flex: "1 1 200px", minWidth: 180, maxWidth: 300 }, children: [
+      /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, fontWeight: 600, color: "#374151", margin: "0 0 8px" }, children: [
+        "Signature fields (",
+        value.length,
+        ")"
+      ] }),
+      value.length === 0 ? /* @__PURE__ */ jsx("p", { style: { fontSize: 13, color: "#6b7280" }, children: "Draw a box on the page to add a field. Add as many as you need." }) : /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: value.map((f) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: () => {
+            setSelectedId(f.id);
+            setPage(f.page);
+          },
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "6px 8px",
+            borderRadius: 8,
+            border: `1px solid ${f.id === selectedId ? primaryColor : "#e5e7eb"}`,
+            background: f.id === selectedId ? `${primaryColor}0f` : "#fff",
+            cursor: "pointer"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: f.label,
+                onClick: (e) => e.stopPropagation(),
+                onChange: (e) => rename(f.id, e.target.value),
+                placeholder: "Field name",
+                style: {
+                  flex: 1,
+                  minWidth: 0,
+                  border: "none",
+                  outline: "none",
+                  background: "transparent",
+                  fontSize: 13
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: "#9ca3af" }, children: [
+              "p",
+              f.page
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Remove ${f.label}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  removeField(f.id);
+                },
+                style: {
+                  border: "none",
+                  background: "transparent",
+                  color: "#9ca3af",
+                  cursor: "pointer",
+                  fontSize: 16,
+                  lineHeight: 1,
+                  padding: 0
+                },
+                children: "\xD7"
+              }
+            )
+          ]
+        },
+        f.id
+      )) })
+    ] })
+  ] });
+}
 function SigningExperience(props) {
   const primary = props.branding?.primaryColor ?? "#4f46e5";
   const [signaturePng, setSignaturePng] = useState(null);
@@ -287,7 +656,7 @@ function SigningExperience(props) {
           PdfViewer,
           {
             url: props.sourceUrl,
-            placement: props.placement,
+            placements: props.placements,
             workerSrc: props.workerSrc,
             primaryColor: primary
           }
@@ -337,6 +706,6 @@ function SigningExperience(props) {
   );
 }
 
-export { ConsentBlock, PdfViewer, SignaturePad, SigningExperience };
+export { ConsentBlock, FieldDesigner, PdfViewer, SignaturePad, SigningExperience };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map