@arbidocs/blocks 0.4.158 → 0.4.159

package/dist/connection/viewer/ViewerPdfPane.d.ts

@@ -42,5 +42,11 @@ export interface ViewerPdfPaneProps {
     markup: ReturnType<typeof useDocumentMarkup>;
     pdfSnapshotNumber: number | undefined;
     isSigned: boolean;
+    /** One's saved signature or initials to place as a picture stamp (PDF tab › My signature). */
+    placeMark?: {
+        image: string;
+        label: string;
+        key: number;
+    } | null;
 }
-export declare function ViewerPdfPane({ documentId, doc, pdfBlob, isPdfLoading, pdfError, onDownload, viewerProps, signatureFlow, onSignatureFlow, currentUserId, placingSignature, onPlacingDone, annotating, markup, pdfSnapshotNumber, isSigned, }: ViewerPdfPaneProps): import("react").JSX.Element;
+export declare function ViewerPdfPane({ documentId, doc, pdfBlob, isPdfLoading, pdfError, onDownload, viewerProps, signatureFlow, onSignatureFlow, currentUserId, placingSignature, onPlacingDone, annotating, markup, pdfSnapshotNumber, isSigned, placeMark, }: ViewerPdfPaneProps): import("react").JSX.Element;

package/dist/document-tools/AdoptSignatureDialog.d.ts

@@ -1,20 +1,38 @@
 /**
  * Adopt a signature once, before applying it at each field: type it (the name in a signature
- * face, as the signed PDF draws it), draw it, or upload an image of it. Initials are typed. A drawn
- * or uploaded signature is handed on as a PNG (white made transparent); the server re-encodes it.
+ * face, as the signed PDF draws it), draw it, or upload an image of it; initials likewise typed or
+ * drawn. A drawn or uploaded mark is handed on as a PNG (white made transparent); the server
+ * re-encodes it.
+ *
+ * The drawing pad spans the screen's width on a phone and is a generous box on a tablet or desktop.
+ * Its canvas is backed at the device's pixel ratio (crisp strokes on a retina screen), and it takes
+ * every touch for itself (`touch-action: none`): drawing with a finger never scrolls or zooms the
+ * page. Strokes are kept as points, so a resize (turning the phone) redraws them at the new size.
+ *
+ * With `onSave`, the person may also tick "Save to my account for future use": the signature and
+ * initials are then sealed to their own key and kept for next time (`saved` prefills the dialog).
+ * In `mode="save"` (account settings) the dialog only saves.
  */
 import { type ReactElement } from 'react';
-import { type AdoptedSignature } from '@arbidocs/react/document-tools';
+import { type AdoptedSignature, type SavedSignature } from '@arbidocs/react/document-tools';
 export interface AdoptedMark {
     adopted: AdoptedSignature;
     /** A data URL of the drawn/uploaded signature, for showing it at each field; null when typed. */
     signatureUrl: string | null;
+    /** A data URL of the drawn initials; null when typed. */
+    initialsUrl?: string | null;
 }
 export interface AdoptSignatureDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     defaultName: string;
     onAdopt: (mark: AdoptedMark) => void;
+    /** The signature saved to the account: the dialog starts from it. */
+    saved?: SavedSignature | null;
+    /** Present: offer "Save to my account for future use" (and save when ticked). */
+    onSave?: (signature: SavedSignature) => Promise<void>;
+    /** `save`: account settings, the dialog only saves the signature (no signing). */
+    mode?: 'adopt' | 'save';
 }
 /** Typed signatures look like the PDF will: an italic serif in ink blue. */
 export declare const TYPED_SIGNATURE_STYLE: {
@@ -22,4 +40,21 @@ export declare const TYPED_SIGNATURE_STYLE: {
     readonly fontStyle: "italic";
     readonly color: "#0d1a59";
 };
-export declare function AdoptSignatureDialog({ open, onOpenChange, defaultName, onAdopt, }: AdoptSignatureDialogProps): ReactElement;
+export interface SignaturePadHandle {
+    isBlank: () => boolean;
+    toDataUrl: () => string | null;
+    clear: () => void;
+}
+/**
+ * A drawing pad: strokes in fractions of the pad, painted on a canvas at the device's pixel ratio.
+ * `onInk` fires when the first stroke lands or the pad is cleared.
+ */
+export declare const SignaturePad: import("react").ForwardRefExoticComponent<{
+    label: string;
+    className?: string;
+    onInk: (has: boolean) => void;
+    testId?: string;
+} & import("react").RefAttributes<SignaturePadHandle>>;
+/** A typed mark as a picture (transparent, ink blue, the signature face): what is saved for it. */
+export declare function typedPng(text: string, height?: number): string;
+export declare function AdoptSignatureDialog({ open, onOpenChange, defaultName, onAdopt, saved, onSave, mode, }: AdoptSignatureDialogProps): ReactElement;

package/dist/document-tools/PlaceMySignatureButton.d.ts

@@ -0,0 +1,16 @@
+/**
+ * PDF tab › My signature: place one's own saved signature or initials on the page as a picture stamp
+ * in the markup layer (then drag and resize it like any stamp). Nothing saved yet: the adopt dialog
+ * opens first and saves it. An informal signature; verified signing is Request signatures. Needs a
+ * `<DocumentToolsProvider>` inside a React Query `QueryClientProvider`.
+ */
+import { type ReactElement } from 'react';
+export type PlacedMark = {
+    image: string;
+    label: string;
+};
+export declare function PlaceMySignatureButton({ onPlace, compact, }: {
+    /** Arm the stamp tool with this picture: the next click on a page places it. */
+    onPlace: (mark: PlacedMark) => void;
+    compact?: boolean;
+}): ReactElement;

package/dist/document-tools/SavedSignatureSettings.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Account settings › Your signature: the signature and initials saved to the account (sealed with
+ * the user's own key), with Replace (the adopt dialog, saving over it) and Delete (removed from the
+ * account completely; what was already placed in documents or sealed in signed PDFs stays as it
+ * is). Needs a `<DocumentToolsProvider>` inside a React Query `QueryClientProvider`.
+ */
+import { type ReactElement } from 'react';
+export declare const DELETE_SAVED_SIGNATURE_TEXT: string;
+export declare function SavedSignatureSettings(): ReactElement;
+export default SavedSignatureSettings;

package/dist/document-tools/index.cjs

@@ -1,10 +1,13 @@
 "use client";
 'use strict';
 
-var chunkD3WFIFRY_cjs = require('../chunk-D3WFIFRY.cjs');
-var chunk6MG62I5B_cjs = require('../chunk-6MG62I5B.cjs');
-var chunkJH6JTI76_cjs = require('../chunk-JH6JTI76.cjs');
+var chunk3VW7ZXQ6_cjs = require('../chunk-3VW7ZXQ6.cjs');
 require('../chunk-UWIILWDI.cjs');
+var chunkJH6JTI76_cjs = require('../chunk-JH6JTI76.cjs');
+require('../chunk-NMZI3K6R.cjs');
+var chunkJPWPR6QU_cjs = require('../chunk-JPWPR6QU.cjs');
+require('../chunk-DWZXSPMB.cjs');
+require('../chunk-MHVNT4J3.cjs');
 require('../chunk-ULWRNGGE.cjs');
 require('../chunk-DES3K4SD.cjs');
 
@@ -12,71 +15,83 @@ require('../chunk-DES3K4SD.cjs');
 
 Object.defineProperty(exports, "AnnotateButton", {
   enumerable: true,
-  get: function () { return chunkD3WFIFRY_cjs.AnnotateButton; }
+  get: function () { return chunk3VW7ZXQ6_cjs.AnnotateButton; }
 });
 Object.defineProperty(exports, "DEFAULT_VERSION_SNAPSHOT_BAR_LABELS", {
   enumerable: true,
-  get: function () { return chunkD3WFIFRY_cjs.DEFAULT_VERSION_SNAPSHOT_BAR_LABELS; }
+  get: function () { return chunk3VW7ZXQ6_cjs.DEFAULT_VERSION_SNAPSHOT_BAR_LABELS; }
+});
+Object.defineProperty(exports, "DELETE_SAVED_SIGNATURE_TEXT", {
+  enumerable: true,
+  get: function () { return chunk3VW7ZXQ6_cjs.DELETE_SAVED_SIGNATURE_TEXT; }
 });
 Object.defineProperty(exports, "DownloadMarkupButton", {
   enumerable: true,
-  get: function () { return chunkD3WFIFRY_cjs.DownloadMarkupButton; }
+  get: function () { return chunk3VW7ZXQ6_cjs.DownloadMarkupButton; }
 });
 Object.defineProperty(exports, "MarkupNotices", {
   enumerable: true,
-  get: function () { return chunkD3WFIFRY_cjs.MarkupNotices; }
+  get: function () { return chunk3VW7ZXQ6_cjs.MarkupNotices; }
 });
 Object.defineProperty(exports, "MarkupViewNote", {
   enumerable: true,
-  get: function () { return chunkD3WFIFRY_cjs.MarkupViewNote; }
+  get: function () { return chunk3VW7ZXQ6_cjs.MarkupViewNote; }
+});
+Object.defineProperty(exports, "PlaceMySignatureButton", {
+  enumerable: true,
+  get: function () { return chunk3VW7ZXQ6_cjs.PlaceMySignatureButton; }
 });
 Object.defineProperty(exports, "RequestSignaturesButton", {
   enumerable: true,
-  get: function () { return chunkD3WFIFRY_cjs.RequestSignaturesButton; }
+  get: function () { return chunk3VW7ZXQ6_cjs.RequestSignaturesButton; }
+});
+Object.defineProperty(exports, "SavedSignatureSettings", {
+  enumerable: true,
+  get: function () { return chunk3VW7ZXQ6_cjs.SavedSignatureSettings; }
 });
 Object.defineProperty(exports, "ShowOriginalButton", {
   enumerable: true,
-  get: function () { return chunkD3WFIFRY_cjs.ShowOriginalButton; }
+  get: function () { return chunk3VW7ZXQ6_cjs.ShowOriginalButton; }
 });
 Object.defineProperty(exports, "SignButton", {
   enumerable: true,
-  get: function () { return chunkD3WFIFRY_cjs.SignButton; }
+  get: function () { return chunk3VW7ZXQ6_cjs.SignButton; }
 });
 Object.defineProperty(exports, "SignatureCertificate", {
   enumerable: true,
-  get: function () { return chunkD3WFIFRY_cjs.SignatureCertificate; }
+  get: function () { return chunk3VW7ZXQ6_cjs.SignatureCertificate; }
 });
 Object.defineProperty(exports, "SignatureRequestBanner", {
   enumerable: true,
-  get: function () { return chunkD3WFIFRY_cjs.SignatureRequestBanner; }
+  get: function () { return chunk3VW7ZXQ6_cjs.SignatureRequestBanner; }
 });
 Object.defineProperty(exports, "SignatureStatus", {
   enumerable: true,
-  get: function () { return chunkD3WFIFRY_cjs.SignatureStatus; }
+  get: function () { return chunk3VW7ZXQ6_cjs.SignatureStatus; }
 });
 Object.defineProperty(exports, "SignedEditNote", {
   enumerable: true,
-  get: function () { return chunkD3WFIFRY_cjs.SignedEditNote; }
+  get: function () { return chunk3VW7ZXQ6_cjs.SignedEditNote; }
 });
 Object.defineProperty(exports, "VersionSnapshotBar", {
   enumerable: true,
-  get: function () { return chunkD3WFIFRY_cjs.VersionSnapshotBar; }
+  get: function () { return chunk3VW7ZXQ6_cjs.VersionSnapshotBar; }
 });
 Object.defineProperty(exports, "formatSignedAt", {
   enumerable: true,
-  get: function () { return chunkD3WFIFRY_cjs.formatSignedAt; }
+  get: function () { return chunk3VW7ZXQ6_cjs.formatSignedAt; }
 });
-Object.defineProperty(exports, "AdoptSignatureDialog", {
+Object.defineProperty(exports, "SignDocumentDialog", {
   enumerable: true,
-  get: function () { return chunk6MG62I5B_cjs.AdoptSignatureDialog; }
+  get: function () { return chunkJH6JTI76_cjs.SignDocumentDialog; }
 });
-Object.defineProperty(exports, "TYPED_SIGNATURE_STYLE", {
+Object.defineProperty(exports, "AdoptSignatureDialog", {
   enumerable: true,
-  get: function () { return chunk6MG62I5B_cjs.TYPED_SIGNATURE_STYLE; }
+  get: function () { return chunkJPWPR6QU_cjs.AdoptSignatureDialog; }
 });
-Object.defineProperty(exports, "SignDocumentDialog", {
+Object.defineProperty(exports, "TYPED_SIGNATURE_STYLE", {
   enumerable: true,
-  get: function () { return chunkJH6JTI76_cjs.SignDocumentDialog; }
+  get: function () { return chunkJPWPR6QU_cjs.TYPED_SIGNATURE_STYLE; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/document-tools/index.d.ts

@@ -6,4 +6,6 @@ export { SignatureStatus, formatSignedAt, type SignatureStatusProps } from './Si
 export { SignatureCertificate, type SignatureCertificateProps } from './SignatureCertificate';
 export { DEFAULT_VERSION_SNAPSHOT_BAR_LABELS, VersionSnapshotBar, type VersionSnapshotBarLabels, type VersionSnapshotBarProps, } from './VersionSnapshotBar';
 export { AdoptSignatureDialog, TYPED_SIGNATURE_STYLE, type AdoptSignatureDialogProps, type AdoptedMark, } from './AdoptSignatureDialog';
+export { PlaceMySignatureButton, type PlacedMark } from './PlaceMySignatureButton';
+export { SavedSignatureSettings, DELETE_SAVED_SIGNATURE_TEXT } from './SavedSignatureSettings';
 export { SignatureRequestBanner, type SignatureRequestBannerProps } from './SignatureRequestBanner';

package/dist/document-tools/index.js

@@ -1,8 +1,11 @@
 "use client";
-export { AnnotateButton, DEFAULT_VERSION_SNAPSHOT_BAR_LABELS, DownloadMarkupButton, MarkupNotices, MarkupViewNote, RequestSignaturesButton, ShowOriginalButton, SignButton, SignatureCertificate, SignatureRequestBanner, SignatureStatus, SignedEditNote, VersionSnapshotBar, formatSignedAt } from '../chunk-KQYPP72K.js';
-export { AdoptSignatureDialog, TYPED_SIGNATURE_STYLE } from '../chunk-EQB3WELX.js';
-export { SignDocumentDialog } from '../chunk-2YOVK524.js';
+export { AnnotateButton, DEFAULT_VERSION_SNAPSHOT_BAR_LABELS, DELETE_SAVED_SIGNATURE_TEXT, DownloadMarkupButton, MarkupNotices, MarkupViewNote, PlaceMySignatureButton, RequestSignaturesButton, SavedSignatureSettings, ShowOriginalButton, SignButton, SignatureCertificate, SignatureRequestBanner, SignatureStatus, SignedEditNote, VersionSnapshotBar, formatSignedAt } from '../chunk-JTJCCL2E.js';
 import '../chunk-6HKLTYNN.js';
+export { SignDocumentDialog } from '../chunk-2YOVK524.js';
+import '../chunk-2R3GGNPA.js';
+export { AdoptSignatureDialog, TYPED_SIGNATURE_STYLE } from '../chunk-DAN7EJ4O.js';
+import '../chunk-VHJHY7TT.js';
+import '../chunk-7F6CBP3Z.js';
 import '../chunk-TX2ZICS7.js';
 import '../chunk-VUNV25KB.js';
 //# sourceMappingURL=index.js.map

package/dist/document-tools/viewer/AnnotatedPdfViewer.d.ts

@@ -49,6 +49,15 @@ export interface AnnotatedPdfViewerProps extends Omit<PdfViewerProps, 'file' | '
      * "Download with markup" (they are never written into its PDF).
      */
     signed?: boolean;
+    /**
+     * One's saved signature or initials to place (PDF tab › My signature): arms the stamp tool with
+     * the picture; the next click on a page places it. A new `key` arms it again.
+     */
+    placeStamp?: {
+        image: string;
+        label: string;
+        key: number;
+    } | null;
 }
-export declare function AnnotatedPdfViewer({ file, documentId, version, fileName, shared, folder, editing, onMarkupChange, store: storeOverride, viewer: PdfViewer, signed, ...viewerProps }: AnnotatedPdfViewerProps): import("react").JSX.Element;
+export declare function AnnotatedPdfViewer({ file, documentId, version, fileName, shared, folder, editing, onMarkupChange, store: storeOverride, viewer: PdfViewer, signed, placeStamp, ...viewerProps }: AnnotatedPdfViewerProps): import("react").JSX.Element;
 export default AnnotatedPdfViewer;

package/dist/document-tools/viewer/SignatureRequestEditor.d.ts

@@ -1,10 +1,13 @@
 /**
  * Prepare a document for signature: add the signers, then place each field (signature, initials,
  * date signed, name) where it goes on the PDF of the version shown, for the signer it is for.
- * "Find signature blocks" proposes fields from the document's execution blocks ("Director",
- * "Witness name", "[Signature]", "Date:"); the author assigns a signer per block. Save it as a draft
- * or send it: each signer is notified and walked through their fields. Needs a
- * `<DocumentToolsProvider>` inside a React Query `QueryClientProvider`.
+ * A Word document's own signature fields (Insert › Signature field) are placed on opening, each
+ * for the signer it names. "Find signature blocks" proposes fields from the document's execution
+ * blocks ("Director", "Witness name", "[Signature]", "Date:"); the author assigns a signer per
+ * block. A signer is a workspace member or anyone by email: someone not in the workspace is
+ * invited (as a guest) when it is sent, and signs once they join. Save it as a draft or send it:
+ * each signer is notified and walked through their fields. Needs a `<DocumentToolsProvider>`
+ * inside a React Query `QueryClientProvider`.
  */
 import { type ReactElement } from 'react';
 import { type SignatureRequest } from '@arbidocs/react/document-tools';

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

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunk6MG62I5B_cjs = require('../../chunk-6MG62I5B.cjs');
+var chunkJPWPR6QU_cjs = require('../../chunk-JPWPR6QU.cjs');
 var chunkULWRNGGE_cjs = require('../../chunk-ULWRNGGE.cjs');
 require('../../chunk-DES3K4SD.cjs');
 var react = require('react');
@@ -32,6 +32,7 @@ function AnnotatedPdfViewer({
   store: storeOverride,
   viewer: PdfViewer = viewers.PdfViewer,
   signed = false,
+  placeStamp = null,
   ...viewerProps
 }) {
   const { client, user, notify, saveFile, uploadDocument, openDocument, onDocumentsChanged } = documentTools.useDocumentTools();
@@ -63,6 +64,12 @@ function AnnotatedPdfViewer({
     () => editing && !controller.readOnly ? controller : viewOnly(controller),
     [editing, controller]
   );
+  const { setSettings, setTool } = controller;
+  react.useEffect(() => {
+    if (!placeStamp) return;
+    setSettings({ stampImage: { image: placeStamp.image, label: placeStamp.label } });
+    setTool("stamp");
+  }, [placeStamp?.key]);
   const { flush } = controller;
   react.useEffect(() => {
     if (!editing) void flush();
@@ -493,6 +500,8 @@ function GuidedSigningViewer({
 }) {
   const { user, notify } = documentTools.useDocumentTools();
   const sign = documentTools.useSignSignatureRequest();
+  const savedSignature = documentTools.useSavedSignature();
+  const storeSignature = documentTools.useStoreSavedSignature();
   const decline = documentTools.useDeclineSignatureRequest();
   const mine = react.useMemo(() => documentTools.fieldsInSigningOrder(request.fields, signer), [request.fields, signer]);
   const [mark, setMark] = react.useState(null);
@@ -572,9 +581,17 @@ function GuidedSigningViewer({
   const renderContent = react.useCallback(
     (field) => {
       if (!applied.has(field.id) || !mark) return null;
-      const { adopted, signatureUrl } = mark;
-      if (field.type === "signature" && signatureUrl) {
-        return /* @__PURE__ */ jsxRuntime.jsx("img", { src: signatureUrl, alt: "Your signature", className: "h-full w-full object-contain" });
+      const { adopted, signatureUrl, initialsUrl } = mark;
+      const image = field.type === "signature" ? signatureUrl : field.type === "initials" ? initialsUrl : null;
+      if (image) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: image,
+            alt: field.type === "signature" ? "Your signature" : "Your initials",
+            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 = documentTools.MARK_FIELD_TYPES.includes(field.type);
@@ -582,7 +599,7 @@ function GuidedSigningViewer({
         "span",
         {
           className: "flex h-full w-full items-center px-1 whitespace-nowrap [container-type:size]",
-          style: typed ? chunk6MG62I5B_cjs.TYPED_SIGNATURE_STYLE : { color: "#1a1a26" },
+          style: typed ? chunkJPWPR6QU_cjs.TYPED_SIGNATURE_STYLE : { color: "#1a1a26" },
           children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: typed ? "70cqh" : "62cqh", lineHeight: 1 }, children: text })
         }
       );
@@ -772,12 +789,14 @@ function GuidedSigningViewer({
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6MG62I5B_cjs.AdoptSignatureDialog,
+      chunkJPWPR6QU_cjs.AdoptSignatureDialog,
       {
         open: !!adoptFor,
         onOpenChange: (open) => !open && setAdoptFor(null),
         defaultName: user?.name ?? "",
-        onAdopt
+        onAdopt,
+        saved: savedSignature.data ?? null,
+        onSave: async (signature) => void await storeSignature.mutateAsync(signature)
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -875,9 +894,10 @@ function SignatureRequestEditor({
   viewer: PdfViewer = viewers.PdfViewer,
   ...viewerProps
 }) {
-  const { client, notify } = documentTools.useDocumentTools();
+  const { client, notify, user } = documentTools.useDocumentTools();
   const candidates = documentTools.useSignerCandidates();
   const save = documentTools.useSaveSignatureRequest();
+  const invite = documentTools.useInviteSigners();
   const [fields, setFields] = react.useState(() => draft?.fields ?? []);
   const [signers, setSigners] = react.useState(() => [
     ...new Set((draft?.fields ?? []).map((f) => f.signer))
@@ -890,11 +910,31 @@ function SignatureRequestEditor({
   const [assign, setAssign] = react.useState({});
   const [finding, setFinding] = react.useState(false);
   const [error, setError] = react.useState(null);
+  const [newEmail, setNewEmail] = react.useState("");
+  const [givenNames, setGivenNames] = react.useState({});
+  const [confirmInvite, setConfirmInvite] = react.useState(null);
   const people = react.useMemo(() => candidates.data ?? [], [candidates.data]);
-  const nameOf = react.useCallback(
-    (ext) => people.find((p) => p.externalId === ext)?.name ?? ext,
+  const members = react.useMemo(
+    () => new Map(people.map((p) => [p.email.toLowerCase(), p.externalId])),
     [people]
   );
+  const me = people.find((p) => p.email.toLowerCase() === user?.email?.toLowerCase());
+  const nameOf = react.useCallback(
+    (token) => {
+      const person = people.find((p) => p.externalId === token);
+      if (person) return person.name;
+      const invited = draft?.signers.find((s) => s.external_id === token);
+      if (invited) return invited.name || invited.email || token;
+      const email = token.toLowerCase();
+      const member = people.find((p) => p.email.toLowerCase() === email);
+      return member?.name ?? givenNames[email] ?? token;
+    },
+    [people, draft, givenNames]
+  );
+  const isInvitee = react.useCallback(
+    (token) => documentTools.isEmailSigner(token) && !members.has(token.toLowerCase()) || draft?.signers.find((s) => s.external_id === token)?.progress === "invited",
+    [members, draft]
+  );
   const colorOf = react.useCallback(
     (ext) => {
       const i = signers.indexOf(ext);
@@ -904,8 +944,10 @@ function SignatureRequestEditor({
   );
   const selected = fields.find((f) => f.id === selectedId) ?? null;
   const blocker = signers.length === 0 ? "Add a signer." : documentTools.sendBlocker(fields);
-  const addSigner = (ext) => {
-    if (!ext || signers.includes(ext)) return;
+  const addSigner = (token) => {
+    if (!token) return;
+    const ext = documentTools.isEmailSigner(token) ? members.get(token.trim().toLowerCase()) ?? token.trim().toLowerCase() : token;
+    if (signers.includes(ext)) return;
     setSigners((s) => [...s, ext]);
     setCurrent(ext);
     setPlacing((p) => p ?? "signature");
@@ -916,6 +958,41 @@ function SignatureRequestEditor({
     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 placedOnce = react.useRef(false);
+  react.useEffect(() => {
+    if (draft || placedOnce.current || candidates.isLoading) return;
+    placedOnce.current = true;
+    let live = true;
+    void documentTools.suggestSignatureFields(client, documentId, version).then((found) => {
+      if (!live) return;
+      const { placed, extras } = documentTools.splitSuggestions(found ?? []);
+      if (!placed.length) return;
+      const named = Object.fromEntries(
+        placed.flatMap(
+          (s) => s.signer_email && s.signer_name ? [[s.signer_email.toLowerCase(), s.signer_name]] : []
+        )
+      );
+      setGivenNames((n) => ({ ...n, ...named }));
+      const added = documentTools.fieldsFromSuggestions(placed, {}, members);
+      setFields((fs) => [...fs, ...added]);
+      const assigned = [...new Set(added.map((f) => f.signer))];
+      setSigners((s) => [...s, ...assigned.filter((t) => !s.includes(t))]);
+      setCurrent((c) => c ?? assigned[0] ?? null);
+      const open = placed.filter((s) => !s.signer_email);
+      if (open.length || extras.length) {
+        setSuggestions([...open, ...extras]);
+        setAssign({});
+      }
+      notify(
+        `${added.length} field${added.length === 1 ? "" : "s"} placed from the document.`,
+        "success"
+      );
+    }).catch(() => {
+    });
+    return () => {
+      live = false;
+    };
+  }, [draft, candidates.isLoading, client, documentId, version, members, notify]);
   const findBlocks = async () => {
     setFinding(true);
     setError(null);
@@ -933,7 +1010,7 @@ function SignatureRequestEditor({
   };
   const applySuggestions = () => {
     if (!suggestions) return;
-    const added = documentTools.fieldsFromSuggestions(suggestions, assign);
+    const added = documentTools.fieldsFromSuggestions(suggestions, assign, members);
     setFields((fs) => [...fs, ...added]);
     const assigned = [...new Set(added.map((f) => f.signer))];
     setSigners((s) => [...s, ...assigned.filter((ext) => !s.includes(ext))]);
@@ -941,9 +1018,17 @@ function SignatureRequestEditor({
     setSuggestions(null);
     notify(`${added.length} field${added.length === 1 ? "" : "s"} added.`, "success");
   };
-  const submit = async (send) => {
+  const submit = async (send, invited = false) => {
     setError(null);
+    const invitees = signers.filter((t) => documentTools.isEmailSigner(t) && !members.has(t.toLowerCase()));
+    if (send && invitees.length && !invited) {
+      setConfirmInvite(invitees);
+      return;
+    }
     try {
+      if (send && invitees.length && me?.role === "owner") {
+        await invite.mutateAsync({ documentId, emails: invitees });
+      }
       const request = await save.mutateAsync({
         documentId,
         version,
@@ -952,10 +1037,12 @@ function SignatureRequestEditor({
         requestId: draft?.status === "draft" ? draft.external_id : void 0,
         send
       });
+      const waiting = request.signers.filter((s) => s.progress === "invited").length;
       notify(
-        send ? `Sent for signature to ${request.signers.length} signer${request.signers.length === 1 ? "" : "s"}.` : "Draft saved.",
+        send ? `Sent for signature to ${request.signers.length} signer${request.signers.length === 1 ? "" : "s"}.` + (waiting ? ` ${waiting} ${waiting === 1 ? "is" : "are"} asked once they join the workspace.` : "") : "Draft saved.",
         "success"
       );
+      setConfirmInvite(null);
       onSaved(request);
     } catch (err) {
       setError(err instanceof Error ? err.message : "The request could not be saved");
@@ -1019,7 +1106,8 @@ function SignatureRequestEditor({
                   "data-testid": `signer-chip-${ext}`,
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2.5 rounded-full", style: { background: colorOf(ext) } }),
-                    nameOf(ext)
+                    nameOf(ext),
+                    isInvitee(ext) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", "data-testid": "signer-invited", children: "(to invite)" })
                   ]
                 }
               ),
@@ -1059,7 +1147,45 @@ function SignatureRequestEditor({
               ]
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "form",
+          {
+            className: "inline-flex items-center gap-1",
+            onSubmit: (e) => {
+              e.preventDefault();
+              if (!documentTools.isEmailSigner(newEmail)) return;
+              addSigner(newEmail);
+              setNewEmail("");
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Input,
+                {
+                  type: "email",
+                  value: newEmail,
+                  onChange: (e) => setNewEmail(e.target.value),
+                  placeholder: "Or anyone, by email",
+                  "aria-label": "Signer's email",
+                  className: "h-8 w-52",
+                  "data-testid": "signature-add-email"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  type: "submit",
+                  size: "sm",
+                  variant: "ghost",
+                  disabled: !documentTools.isEmailSigner(newEmail),
+                  "aria-label": "Add this signer",
+                  "data-testid": "signature-add-email-submit",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MailPlus, { className: "size-4", "aria-hidden": true })
+                }
+              )
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: current ? `Place for ${nameOf(current)}:` : "Add a signer, then place their fields." }),
@@ -1216,7 +1342,8 @@ function SignatureRequestEditor({
                 "data-testid": `signature-suggestion-signer-${g}`,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Skip" }),
-                  people.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.externalId, children: p.name }, p.externalId))
+                  people.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.externalId, children: p.name }, p.externalId)),
+                  signers.filter((t) => !people.some((p) => p.externalId === t)).map((t) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: t, children: nameOf(t) }, t))
                 ]
               }
             )
@@ -1237,6 +1364,45 @@ function SignatureRequestEditor({
           /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "button", size: "sm", variant: "ghost", onClick: () => setSuggestions(null), children: "Dismiss" })
         ] })
       ] }),
+      confirmInvite && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "space-y-1.5 rounded-md border border-amber-300 bg-amber-50 p-2 text-amber-950 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-100",
+          "data-testid": "signature-invite-confirm",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+              "Not in this workspace yet: ",
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: confirmInvite.map(nameOf).join(", ") }),
+              ".",
+              " ",
+              me?.role === "owner" ? "They are invited as guests and asked to sign when they join." : "Ask a workspace owner to invite them: they are asked to sign when they join."
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  onClick: () => submit(true, true),
+                  disabled: save.isPending || invite.isPending,
+                  "data-testid": "signature-invite-send",
+                  children: me?.role === "owner" ? "Invite and send" : "Send"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "ghost",
+                  onClick: () => setConfirmInvite(null),
+                  children: "Cancel"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
       error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-text", role: "alert", "data-testid": "signature-editor-error", children: error })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(PdfViewer, { ...viewerProps, file, renderPageOverlay }) })