@arbidocs/blocks 0.4.101 → 0.4.102

package/dist/document-tools/viewer/index.js

@@ -1,13 +1,15 @@
 "use client";
+import { TYPED_SIGNATURE_STYLE, AdoptSignatureDialog } from '../../chunk-EQB3WELX.js';
+import { ModalScaffold } from '../../chunk-TX2ZICS7.js';
 import '../../chunk-VUNV25KB.js';
 import { useRef, useMemo, useEffect, useState, useCallback } from 'react';
 import { useAnnotationLayer, redactionLogCsv, AnnotationPageOverlay, AnnotationToolbar, FreezeDialog, createMemoryStore } from '@arbidocs/react/annotations';
 import { freezePdfInBrowser } from '@arbidocs/react/annotations/freeze';
-import { useDocumentTools, useIsOnline, createMarkupStore, fetchMarkupPdf, uploadFrozenCopy, redactionLogName, SIGNED_LOCKED_REASON, isLegibleSignatureBox, toAppearance } from '@arbidocs/react/document-tools';
+import { useDocumentTools, useIsOnline, createMarkupStore, fetchMarkupPdf, uploadFrozenCopy, redactionLogName, SIGNED_LOCKED_REASON, isLegibleSignatureBox, toAppearance, FIELD_TYPE_LABELS, useSignSignatureRequest, useDeclineSignatureRequest, fieldsInSigningOrder, MARK_FIELD_TYPES, intentText, useSignerCandidates, useSaveSignatureRequest, sendBlocker, newFieldId, SIGNATURE_FIELD_TYPES, SigningError, DEFAULT_FIELD_SIZE, suggestSignatureFields, fieldsFromSuggestions } from '@arbidocs/react/document-tools';
 import { PdfViewer } from '@arbidocs/react/viewers';
-import { Download } from 'lucide-react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Button } from '@arbidocs/react/ui';
+import { Download, X, ArrowRight, ArrowLeft, Check, UserPlus, ScanSearch, Send, PenLine } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Button, cn, Progress, Label, Input, Checkbox } from '@arbidocs/react/ui';
 
 var MARKUP_AUTOSAVE_MS = 2500;
 var MARKUP_PULL_MS = 2e4;
@@ -262,7 +264,983 @@ function SignaturePlacementViewer({
     /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(PdfViewer$1, { ...viewerProps, file, renderPageOverlay }) })
   ] });
 }
+var SIGNER_COLORS = ["#1c7ed6", "#e8590c", "#2f9e44", "#9c36b5", "#c2255c", "#0c8599"];
+var MIN_DRAG = 0.01;
+var clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+var round = (v) => Math.round(v * 1e4) / 1e4;
+function fit(box) {
+  const width = clamp(box.width, 0.02, 1);
+  const height = clamp(box.height, 0.015, 1);
+  return {
+    x: round(clamp(box.x, 0, 1 - width)),
+    y: round(clamp(box.y, 0, 1 - height)),
+    width: round(width),
+    height: round(height)
+  };
+}
+function SignatureFieldsOverlay({
+  page,
+  fields,
+  colorOf,
+  labelOf = (f) => FIELD_TYPE_LABELS[f.type],
+  editable = false,
+  placing = null,
+  selectedId = null,
+  onSelect,
+  onCreate,
+  onChange,
+  onRemove,
+  activeId = null,
+  onActivate,
+  renderContent
+}) {
+  const ref = useRef(null);
+  const [drag, setDrag] = useState(null);
+  const [preview, setPreview] = useState(null);
+  const onPage = fields.filter((f) => f.page === page);
+  const point = (e) => {
+    const r = ref.current.getBoundingClientRect();
+    return { x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height };
+  };
+  const startCreate = (e) => {
+    if (!editable || e.target !== e.currentTarget || e.button !== 0) return;
+    if (!placing) {
+      onSelect?.(null);
+      return;
+    }
+    const p = point(e);
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    setDrag({ kind: "create", startX: p.x, startY: p.y, box: { ...p, width: 0, height: 0 } });
+  };
+  const startField = (e, field, kind) => {
+    if (!editable || e.button !== 0) return;
+    e.stopPropagation();
+    onSelect?.(field.id);
+    const p = point(e);
+    ref.current?.setPointerCapture?.(e.pointerId);
+    setDrag({
+      kind,
+      id: field.id,
+      startX: p.x,
+      startY: p.y,
+      origin: { x: field.x, y: field.y, width: field.width, height: field.height }
+    });
+  };
+  const onMove = (e) => {
+    if (!drag) return;
+    const p = point(e);
+    const dx = p.x - drag.startX;
+    const dy = p.y - drag.startY;
+    if (drag.kind === "create") {
+      setPreview({
+        x: Math.min(p.x, drag.startX),
+        y: Math.min(p.y, drag.startY),
+        width: Math.abs(dx),
+        height: Math.abs(dy)
+      });
+    } else if (drag.kind === "move") {
+      setPreview(fit({ ...drag.origin, x: drag.origin.x + dx, y: drag.origin.y + dy }));
+    } else {
+      setPreview(
+        fit({ ...drag.origin, width: drag.origin.width + dx, height: drag.origin.height + dy })
+      );
+    }
+  };
+  const onUp = (e) => {
+    if (!drag) return;
+    const p = point(e);
+    if (drag.kind === "create" && placing) {
+      const drawn = Math.abs(p.x - drag.startX) > MIN_DRAG && Math.abs(p.y - drag.startY) > MIN_DRAG;
+      const size = DEFAULT_FIELD_SIZE[placing];
+      onCreate?.(
+        fit(
+          drawn && preview ? preview : { x: drag.startX - size.width / 2, y: drag.startY - size.height / 2, ...size }
+        )
+      );
+    } else if (drag.kind !== "create" && preview) {
+      onChange?.(drag.id, preview);
+    }
+    setDrag(null);
+    setPreview(null);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "absolute inset-0",
+        editable && placing && "cursor-crosshair",
+        !editable && "pointer-events-none"
+      ),
+      onPointerDown: startCreate,
+      onPointerMove: onMove,
+      onPointerUp: onUp,
+      onPointerCancel: () => {
+        setDrag(null);
+        setPreview(null);
+      },
+      "data-testid": `signature-fields-page-${page}`,
+      children: [
+        onPage.map((field) => {
+          const dragging = drag && drag.kind !== "create" && drag.id === field.id && preview;
+          const box = dragging ? preview : field;
+          const color = colorOf(field.signer);
+          const selected = editable && selectedId === field.id;
+          const active = !editable && activeId === field.id;
+          const content = renderContent?.(field);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: editable ? void 0 : "button",
+              tabIndex: editable ? void 0 : 0,
+              "aria-label": editable ? void 0 : `${labelOf(field)}${content ? " (done)" : ""}`,
+              className: cn(
+                "pointer-events-auto absolute flex items-center justify-center overflow-visible rounded-sm border-2 text-[11px] font-medium select-none",
+                editable ? "cursor-move" : "cursor-pointer",
+                active && "ring-4 ring-offset-1 motion-safe:animate-pulse",
+                selected && "ring-2 ring-offset-1"
+              ),
+              style: {
+                left: `${box.x * 100}%`,
+                top: `${box.y * 100}%`,
+                width: `${box.width * 100}%`,
+                height: `${box.height * 100}%`,
+                borderColor: color,
+                borderStyle: content ? "solid" : "dashed",
+                backgroundColor: content ? "transparent" : `${color}22`,
+                color,
+                ["--tw-ring-color"]: color
+              },
+              onPointerDown: (e) => startField(e, field, "move"),
+              onClick: () => !editable && onActivate?.(field.id),
+              onKeyDown: (e) => {
+                if (!editable && (e.key === "Enter" || e.key === " ")) {
+                  e.preventDefault();
+                  onActivate?.(field.id);
+                }
+                if (editable && selected && (e.key === "Delete" || e.key === "Backspace")) {
+                  onRemove?.(field.id);
+                }
+              },
+              "data-testid": `signature-field-${field.id}`,
+              "data-field-type": field.type,
+              "data-field-done": content ? "true" : void 0,
+              children: [
+                content ?? /* @__PURE__ */ jsxs("span", { className: "truncate px-1", children: [
+                  labelOf(field),
+                  field.required ? "" : " (optional)"
+                ] }),
+                selected && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Remove field",
+                      className: "absolute -top-2.5 -right-2.5 flex size-5 items-center justify-center rounded-full border bg-background text-foreground shadow",
+                      onPointerDown: (e) => e.stopPropagation(),
+                      onClick: () => onRemove?.(field.id),
+                      "data-testid": "signature-field-remove",
+                      children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: "absolute -right-1.5 -bottom-1.5 size-3 cursor-nwse-resize rounded-sm border bg-background",
+                      style: { borderColor: color },
+                      onPointerDown: (e) => startField(e, field, "resize"),
+                      "data-testid": "signature-field-resize"
+                    }
+                  )
+                ] })
+              ]
+            },
+            field.id
+          );
+        }),
+        drag?.kind === "create" && preview && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute rounded-sm border-2 border-dashed",
+            style: {
+              left: `${preview.x * 100}%`,
+              top: `${preview.y * 100}%`,
+              width: `${preview.width * 100}%`,
+              height: `${preview.height * 100}%`,
+              borderColor: "#868e96"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+var INK = "#1c7ed6";
+function signingDate(date = /* @__PURE__ */ new Date()) {
+  return `${date.getDate()} ${date.toLocaleString("en-GB", { month: "long" })} ${date.getFullYear()}`;
+}
+function GuidedSigningViewer({
+  file,
+  request,
+  signer,
+  onClose,
+  onSigned,
+  viewer: PdfViewer$1 = PdfViewer,
+  ...viewerProps
+}) {
+  const { user, notify } = useDocumentTools();
+  const sign = useSignSignatureRequest();
+  const decline = useDeclineSignatureRequest();
+  const mine = useMemo(() => fieldsInSigningOrder(request.fields, signer), [request.fields, signer]);
+  const [mark, setMark] = useState(null);
+  const [applied, setApplied] = useState(/* @__PURE__ */ new Set());
+  const [index, setIndex] = useState(-1);
+  const [page, setPage] = useState(1);
+  const [trigger, setTrigger] = useState(0);
+  const [adoptFor, setAdoptFor] = useState(null);
+  const [finishing, setFinishing] = useState(false);
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState(null);
+  const [declining, setDeclining] = useState(false);
+  const [declineReason, setDeclineReason] = useState("");
+  const scrollTimer = useRef(void 0);
+  const required = mine.filter((f) => f.required);
+  const done = mine.filter((f) => applied.has(f.id)).length;
+  const ready = required.every((f) => applied.has(f.id));
+  const current = index >= 0 ? mine[index] : void 0;
+  useEffect(() => () => window.clearTimeout(scrollTimer.current), []);
+  const goTo = useCallback(
+    (i) => {
+      const field = mine[i];
+      if (!field) return;
+      setIndex(i);
+      setPage(field.page + 1);
+      setTrigger((t) => t + 1);
+      window.clearTimeout(scrollTimer.current);
+      scrollTimer.current = window.setTimeout(() => {
+        document.querySelector(`[data-testid="signature-field-${field.id}"]`)?.scrollIntoView({ block: "center", behavior: "smooth" });
+      }, 300);
+    },
+    [mine]
+  );
+  const nextOpen = (from, filled) => {
+    for (let k = 1; k <= mine.length; k++) {
+      const i = (from + k) % mine.length;
+      if (!filled.has(mine[i].id)) return i;
+    }
+    return -1;
+  };
+  const apply = (field, base = applied) => {
+    const next = new Set(base);
+    next.add(field.id);
+    setApplied(next);
+    const i = nextOpen(mine.indexOf(field), next);
+    if (i >= 0) goTo(i);
+    else setIndex(mine.indexOf(field));
+  };
+  const activate = (id) => {
+    const field = mine.find((f) => f.id === id);
+    if (!field) return;
+    setIndex(mine.indexOf(field));
+    if (applied.has(id)) {
+      setApplied((a) => {
+        const next = new Set(a);
+        next.delete(id);
+        return next;
+      });
+      return;
+    }
+    if (!mark) {
+      setAdoptFor(field);
+      return;
+    }
+    apply(field);
+  };
+  const onAdopt = (adopted) => {
+    setMark(adopted);
+    const field = adoptFor;
+    setAdoptFor(null);
+    const filled = new Set(applied);
+    for (const f of mine)
+      if (f.required && (f.type === "date" || f.type === "name")) filled.add(f.id);
+    if (field) apply(field, filled);
+    else setApplied(filled);
+  };
+  const renderContent = useCallback(
+    (field) => {
+      if (!applied.has(field.id) || !mark) return null;
+      const { adopted, signatureUrl } = mark;
+      if (field.type === "signature" && signatureUrl) {
+        return /* @__PURE__ */ jsx("img", { src: signatureUrl, alt: "Your signature", className: "h-full w-full object-contain" });
+      }
+      const text = field.type === "signature" ? adopted.name : field.type === "initials" ? adopted.initials : field.type === "date" ? signingDate() : adopted.name;
+      const typed = MARK_FIELD_TYPES.includes(field.type);
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "flex h-full w-full items-center px-1 whitespace-nowrap [container-type:size]",
+          style: typed ? TYPED_SIGNATURE_STYLE : { color: "#1a1a26" },
+          children: /* @__PURE__ */ jsx("span", { style: { fontSize: typed ? "70cqh" : "62cqh", lineHeight: 1 }, children: text })
+        }
+      );
+    },
+    [applied, mark]
+  );
+  const renderPageOverlay = useCallback(
+    ({ pageNumber }) => /* @__PURE__ */ jsx(
+      SignatureFieldsOverlay,
+      {
+        page: pageNumber - 1,
+        fields: mine,
+        colorOf: () => INK,
+        labelOf: (f) => MARK_FIELD_TYPES.includes(f.type) ? `Sign: ${FIELD_TYPE_LABELS[f.type]}` : FIELD_TYPE_LABELS[f.type],
+        activeId: current?.id ?? null,
+        onActivate: activate,
+        renderContent
+      }
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- activate reads the latest state
+    [mine, current?.id, renderContent, mark, applied]
+  );
+  const submit = async (e) => {
+    e.preventDefault();
+    if (!mark || !user?.email) return;
+    setError(null);
+    try {
+      const result = await sign.mutateAsync({
+        request,
+        pdfBlob: file,
+        email: user.email,
+        password,
+        adopted: mark.adopted,
+        fields: mine.filter((f) => applied.has(f.id)).map((f) => f.id)
+      });
+      setPassword("");
+      setFinishing(false);
+      notify(
+        result.completed ? `Signed. Everyone has signed: the signed copy is version ${result.signed_version}.` : "Signed. The others are still to sign; you will see the signed copy when they have.",
+        "success"
+      );
+      onSigned?.(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Signing failed");
+      if (err instanceof SigningError && err.reason === "stale") setFinishing(false);
+    }
+  };
+  const onDecline = async (e) => {
+    e.preventDefault();
+    try {
+      await decline.mutateAsync({ requestId: request.external_id, reason: declineReason.trim() });
+      setDeclining(false);
+      notify("You declined to sign. The sender has been told.", "info");
+      onClose();
+    } catch (err) {
+      notify(err instanceof Error ? err.message : "Could not decline", "error");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "guided-signing-viewer", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-b border-border px-3 py-2 text-sm", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        index < 0 ? /* @__PURE__ */ jsxs("span", { className: "mr-auto", "data-testid": "guided-signing-intro", children: [
+          "You are asked to complete ",
+          mine.length,
+          " field",
+          mine.length === 1 ? "" : "s",
+          ".",
+          request.message ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            " \u201C",
+            request.message,
+            "\u201D"
+          ] }) : null
+        ] }) : /* @__PURE__ */ jsxs("span", { className: "mr-auto font-medium", "data-testid": "guided-signing-position", children: [
+          "Field ",
+          index + 1,
+          " of ",
+          mine.length,
+          ": ",
+          current ? FIELD_TYPE_LABELS[current.type] : "",
+          current && !current.required ? " (optional)" : "",
+          /* @__PURE__ */ jsxs("span", { className: "ml-2 font-normal text-muted-foreground", children: [
+            "Page ",
+            current ? current.page + 1 : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => setDeclining(true),
+            "data-testid": "guided-signing-decline",
+            children: "Decline"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClose, children: "Close" }),
+        index < 0 ? /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            onClick: () => goTo(0),
+            "data-testid": "guided-signing-start",
+            children: [
+              "Start",
+              /* @__PURE__ */ jsx(ArrowRight, { className: "ml-1 size-4", "aria-hidden": true })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              onClick: () => goTo(Math.max(0, index - 1)),
+              disabled: index === 0,
+              "aria-label": "Previous field",
+              children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4", "aria-hidden": true })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              onClick: () => goTo(Math.min(mine.length - 1, index + 1)),
+              disabled: index >= mine.length - 1,
+              "aria-label": "Next field",
+              "data-testid": "guided-signing-next",
+              children: /* @__PURE__ */ jsx(ArrowRight, { className: "size-4", "aria-hidden": true })
+            }
+          ),
+          current && !applied.has(current.id) && /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              onClick: () => activate(current.id),
+              "data-testid": "guided-signing-apply",
+              children: MARK_FIELD_TYPES.includes(current.type) ? "Sign here" : "Fill in"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: ready ? "default" : "outline",
+            disabled: !ready || !mark,
+            onClick: () => setFinishing(true),
+            "data-testid": "guided-signing-finish",
+            children: [
+              /* @__PURE__ */ jsx(Check, { className: "mr-1 size-4", "aria-hidden": true }),
+              "Finish"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            value: mine.length ? done / mine.length * 100 : 0,
+            className: "h-1.5 max-w-xs"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", "data-testid": "guided-signing-progress", children: [
+          done,
+          " of ",
+          mine.length,
+          " done"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
+      PdfViewer$1,
+      {
+        ...viewerProps,
+        file,
+        currentPage: page,
+        scrollTrigger: trigger,
+        renderPageOverlay
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      AdoptSignatureDialog,
+      {
+        open: !!adoptFor,
+        onOpenChange: (open) => !open && setAdoptFor(null),
+        defaultName: user?.name ?? "",
+        onAdopt
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ModalScaffold,
+      {
+        open: declining,
+        onOpenChange: (open) => !decline.isPending && setDeclining(open),
+        title: "Decline to sign",
+        description: "The request ends for everyone and the sender is told. The document is unchanged.",
+        showDescription: true,
+        testId: "guided-signing-decline-dialog",
+        children: /* @__PURE__ */ jsxs("form", { onSubmit: onDecline, children: [
+          /* @__PURE__ */ jsx(ModalScaffold.Body, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "guided-decline-reason", children: "Reason (optional)" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "guided-decline-reason",
+                value: declineReason,
+                maxLength: 1e3,
+                onChange: (e) => setDeclineReason(e.target.value)
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs(ModalScaffold.Footer, { children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setDeclining(false), children: "Cancel" }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", variant: "destructive", disabled: decline.isPending, children: "Decline" })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ModalScaffold,
+      {
+        open: finishing,
+        onOpenChange: (open) => !sign.isPending && setFinishing(open),
+        title: "Sign the document",
+        description: "Confirm with your password. Your signature is applied to every field you completed.",
+        showDescription: true,
+        testId: "guided-signing-confirm",
+        children: /* @__PURE__ */ jsxs("form", { onSubmit: submit, children: [
+          /* @__PURE__ */ jsxs(ModalScaffold.Body, { children: [
+            mark && /* @__PURE__ */ jsx("blockquote", { className: "border-l-2 border-border pl-3 text-sm text-muted-foreground", children: intentText({ name: mark.adopted.name }) }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "guided-sign-password", children: "Password" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "guided-sign-password",
+                  type: "password",
+                  autoComplete: "current-password",
+                  value: password,
+                  onChange: (e) => setPassword(e.target.value),
+                  "data-testid": "guided-signing-password",
+                  required: true
+                }
+              )
+            ] }),
+            error && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-text", role: "alert", "data-testid": "guided-signing-error", children: error })
+          ] }),
+          /* @__PURE__ */ jsxs(ModalScaffold.Footer, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                onClick: () => setFinishing(false),
+                disabled: sign.isPending,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                disabled: sign.isPending || !password,
+                "data-testid": "guided-signing-submit",
+                children: sign.isPending ? "Signing\u2026" : "Sign"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+var selectClass = "h-8 rounded-md border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+function SignatureRequestEditor({
+  file,
+  documentId,
+  version,
+  draft,
+  onCancel,
+  onSaved,
+  viewer: PdfViewer$1 = PdfViewer,
+  ...viewerProps
+}) {
+  const { client, notify } = useDocumentTools();
+  const candidates = useSignerCandidates();
+  const save = useSaveSignatureRequest();
+  const [fields, setFields] = useState(() => draft?.fields ?? []);
+  const [signers, setSigners] = useState(() => [
+    ...new Set((draft?.fields ?? []).map((f) => f.signer))
+  ]);
+  const [current, setCurrent] = useState(signers[0] ?? null);
+  const [placing, setPlacing] = useState(null);
+  const [selectedId, setSelectedId] = useState(null);
+  const [message, setMessage] = useState(draft?.message ?? "");
+  const [suggestions, setSuggestions] = useState(null);
+  const [assign, setAssign] = useState({});
+  const [finding, setFinding] = useState(false);
+  const [error, setError] = useState(null);
+  const people = useMemo(() => candidates.data ?? [], [candidates.data]);
+  const nameOf = useCallback(
+    (ext) => people.find((p) => p.externalId === ext)?.name ?? ext,
+    [people]
+  );
+  const colorOf = useCallback(
+    (ext) => {
+      const i = signers.indexOf(ext);
+      return SIGNER_COLORS[(i < 0 ? 0 : i) % SIGNER_COLORS.length];
+    },
+    [signers]
+  );
+  const selected = fields.find((f) => f.id === selectedId) ?? null;
+  const blocker = signers.length === 0 ? "Add a signer." : sendBlocker(fields);
+  const addSigner = (ext) => {
+    if (!ext || signers.includes(ext)) return;
+    setSigners((s) => [...s, ext]);
+    setCurrent(ext);
+    setPlacing((p) => p ?? "signature");
+  };
+  const removeSigner = (ext) => {
+    setSigners((s) => s.filter((x) => x !== ext));
+    setFields((fs) => fs.filter((f) => f.signer !== ext));
+    if (current === ext) setCurrent(signers.find((x) => x !== ext) ?? null);
+  };
+  const updateField = (id, patch) => setFields((fs) => fs.map((f) => f.id === id ? { ...f, ...patch } : f));
+  const findBlocks = async () => {
+    setFinding(true);
+    setError(null);
+    try {
+      const found = await suggestSignatureFields(client, documentId, version);
+      setSuggestions(found);
+      const groups2 = [...new Set(found.map((s) => s.group))];
+      setAssign(Object.fromEntries(groups2.map((g, i) => [g, signers[i]])));
+      if (found.length === 0) notify("No signature blocks were found in this document.", "info");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Signature blocks could not be read");
+    } finally {
+      setFinding(false);
+    }
+  };
+  const applySuggestions = () => {
+    if (!suggestions) return;
+    const added = fieldsFromSuggestions(suggestions, assign);
+    setFields((fs) => [...fs, ...added]);
+    const assigned = [...new Set(added.map((f) => f.signer))];
+    setSigners((s) => [...s, ...assigned.filter((ext) => !s.includes(ext))]);
+    if (!current && assigned[0]) setCurrent(assigned[0]);
+    setSuggestions(null);
+    notify(`${added.length} field${added.length === 1 ? "" : "s"} added.`, "success");
+  };
+  const submit = async (send) => {
+    setError(null);
+    try {
+      const request = await save.mutateAsync({
+        documentId,
+        version,
+        fields,
+        message: message.trim() || void 0,
+        requestId: draft?.status === "draft" ? draft.external_id : void 0,
+        send
+      });
+      notify(
+        send ? `Sent for signature to ${request.signers.length} signer${request.signers.length === 1 ? "" : "s"}.` : "Draft saved.",
+        "success"
+      );
+      onSaved(request);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "The request could not be saved");
+    }
+  };
+  const renderPageOverlay = useCallback(
+    ({ pageNumber }) => /* @__PURE__ */ jsx(
+      SignatureFieldsOverlay,
+      {
+        page: pageNumber - 1,
+        fields,
+        colorOf,
+        labelOf: (f) => `${FIELD_TYPE_LABELS[f.type]} \xB7 ${nameOf(f.signer).split(" ")[0]}`,
+        editable: true,
+        placing: current ? placing : null,
+        selectedId,
+        onSelect: setSelectedId,
+        onCreate: (box) => {
+          if (!current || !placing) return;
+          const field = {
+            id: newFieldId(),
+            type: placing,
+            page: pageNumber - 1,
+            signer: current,
+            required: true,
+            ...box
+          };
+          setFields((fs) => [...fs, field]);
+          setSelectedId(field.id);
+        },
+        onChange: (id, box) => updateField(id, box),
+        onRemove: (id) => {
+          setFields((fs) => fs.filter((f) => f.id !== id));
+          setSelectedId(null);
+        }
+      }
+    ),
+    [fields, colorOf, nameOf, current, placing, selectedId]
+  );
+  const groups = suggestions ? [...new Set(suggestions.map((s) => s.group))] : [];
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "signature-request-editor", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-b border-border px-3 py-2 text-sm", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Signers" }),
+        signers.map((ext) => /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center gap-1.5 rounded-full border py-0.5 pr-1 pl-2",
+              current === ext && "bg-muted"
+            ),
+            style: { borderColor: colorOf(ext) },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "inline-flex items-center gap-1.5",
+                  onClick: () => setCurrent(ext),
+                  "aria-pressed": current === ext,
+                  "data-testid": `signer-chip-${ext}`,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full", style: { background: colorOf(ext) } }),
+                    nameOf(ext)
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Remove ${nameOf(ext)}`,
+                  className: "rounded-full p-0.5 hover:bg-accent",
+                  onClick: () => removeSigner(ext),
+                  children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+                }
+              )
+            ]
+          },
+          ext
+        )),
+        /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-1 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(UserPlus, { className: "size-4", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add a signer" }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: selectClass,
+              value: "",
+              onChange: (e) => addSigner(e.target.value),
+              disabled: candidates.isLoading,
+              "data-testid": "signature-add-signer",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: candidates.isLoading ? "Loading members\u2026" : "Add a signer\u2026" }),
+                people.filter((p) => !signers.includes(p.externalId)).map((p) => /* @__PURE__ */ jsxs("option", { value: p.externalId, children: [
+                  p.name,
+                  " (",
+                  p.email,
+                  ")"
+                ] }, p.externalId))
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: current ? `Place for ${nameOf(current)}:` : "Add a signer, then place their fields." }),
+        SIGNATURE_FIELD_TYPES.map((type) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: placing === type && current ? "default" : "outline",
+            disabled: !current,
+            onClick: () => setPlacing(placing === type ? null : type),
+            "data-testid": `signature-place-${type}`,
+            children: FIELD_TYPE_LABELS[type]
+          },
+          type
+        )),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "ghost",
+            onClick: findBlocks,
+            disabled: finding,
+            "data-testid": "signature-find-blocks",
+            children: [
+              /* @__PURE__ */ jsx(ScanSearch, { className: "mr-1 size-4", "aria-hidden": true }),
+              finding ? "Looking\u2026" : "Find signature blocks"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "ml-auto flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              onClick: () => submit(false),
+              disabled: save.isPending || fields.length === 0,
+              "data-testid": "signature-save-draft",
+              children: "Save draft"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              onClick: () => submit(true),
+              disabled: save.isPending || !!blocker,
+              title: blocker ?? void 0,
+              "data-testid": "signature-send",
+              children: [
+                /* @__PURE__ */ jsx(Send, { className: "mr-1 size-4", "aria-hidden": true }),
+                save.isPending ? "Sending\u2026" : "Send for signature"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: message,
+            onChange: (e) => setMessage(e.target.value),
+            maxLength: 2e3,
+            placeholder: "Message to the signers (optional)",
+            className: "h-8 max-w-md",
+            "data-testid": "signature-message"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", "data-testid": "signature-editor-summary", children: [
+          fields.length,
+          " field",
+          fields.length === 1 ? "" : "s",
+          blocker ? ` \xB7 ${blocker}` : " \xB7 ready to send"
+        ] })
+      ] }),
+      selected && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-wrap items-center gap-3 rounded-md bg-muted px-2 py-1.5",
+          "data-testid": "signature-field-details",
+          children: [
+            /* @__PURE__ */ jsx(PenLine, { className: "size-4", "aria-hidden": true }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: selectClass,
+                value: selected.type,
+                "aria-label": "Field type",
+                onChange: (e) => updateField(selected.id, { type: e.target.value }),
+                children: SIGNATURE_FIELD_TYPES.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: FIELD_TYPE_LABELS[t] }, t))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: selectClass,
+                value: selected.signer,
+                "aria-label": "Signer",
+                onChange: (e) => updateField(selected.id, { signer: e.target.value }),
+                "data-testid": "signature-field-signer",
+                children: signers.map((ext) => /* @__PURE__ */ jsx("option", { value: ext, children: nameOf(ext) }, ext))
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  id: "signature-field-required",
+                  checked: selected.required,
+                  onCheckedChange: (c) => updateField(selected.id, { required: c === true })
+                }
+              ),
+              /* @__PURE__ */ jsx(Label, { htmlFor: "signature-field-required", className: "font-normal", children: "Required" })
+            ] })
+          ]
+        }
+      ),
+      suggestions && suggestions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 rounded-md border p-2", "data-testid": "signature-suggestions", children: [
+        /* @__PURE__ */ jsxs("div", { className: "font-medium", children: [
+          "Found ",
+          groups.length,
+          " signature block",
+          groups.length === 1 ? "" : "s",
+          ". Choose who signs each."
+        ] }),
+        groups.map((g) => {
+          const inBlock = suggestions.filter((s) => s.group === g);
+          const role = inBlock.find((s) => s.role)?.role;
+          return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("span", { className: "min-w-40", children: [
+              role ?? `Block ${g + 1}`,
+              " ",
+              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                "(p. ",
+                inBlock[0].page + 1,
+                ":",
+                " ",
+                inBlock.map((s) => FIELD_TYPE_LABELS[s.type]).join(", "),
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                className: selectClass,
+                value: assign[g] ?? "",
+                onChange: (e) => setAssign((a) => ({ ...a, [g]: e.target.value || void 0 })),
+                "data-testid": `signature-suggestion-signer-${g}`,
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: "Skip" }),
+                  people.map((p) => /* @__PURE__ */ jsx("option", { value: p.externalId, children: p.name }, p.externalId))
+                ]
+              }
+            )
+          ] }, g);
+        }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              onClick: applySuggestions,
+              disabled: !Object.values(assign).some(Boolean),
+              "data-testid": "signature-suggestions-apply",
+              children: "Add fields"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => setSuggestions(null), children: "Dismiss" })
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-text", role: "alert", "data-testid": "signature-editor-error", children: error })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(PdfViewer$1, { ...viewerProps, file, renderPageOverlay }) })
+  ] });
+}
 
-export { AnnotatedPdfViewer, MARKUP_AUTOSAVE_MS, MARKUP_PULL_MS, SignaturePlacementViewer };
+export { AnnotatedPdfViewer, GuidedSigningViewer, MARKUP_AUTOSAVE_MS, MARKUP_PULL_MS, SIGNER_COLORS, SignatureFieldsOverlay, SignaturePlacementViewer, SignatureRequestEditor, signingDate };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map