Merge branch 'main' into feat/acroform-field-import

packages/lib/client-only/cookies.ts

@@ -0,0 +1,17 @@
+/**
+ * Read a cookie value from `document.cookie`.
+ *
+ * Client-side counterpart of `extractCookieFromHeaders`. Only works for cookies that
+ * are not `HttpOnly`, such as the preferred team URL cookie.
+ */
+export const extractCookieFromDocument = (cookieName: string): string | null => {
+  const cookiePairs = document.cookie.split(';');
+
+  const cookie = cookiePairs.find((pair) => pair.trim().startsWith(`${cookieName}=`));
+
+  if (!cookie) {
+    return null;
+  }
+
+  return cookie.split('=')[1].trim();
+};

packages/lib/client-only/create-zip-writer.ts

@@ -0,0 +1,178 @@
+import { Zip, ZipPassThrough } from 'fflate';
+
+export type ZipFileEntry = {
+  /**
+   * The path of the file within the archive. Forward slashes create folders.
+   * Individual path segments should be sanitized with
+   * {@link sanitizeZipPathSegment} when derived from user-controlled values.
+   */
+  filename: string;
+  data: Blob;
+};
+
+/**
+ * Sanitizes a single path segment (folder or file name) for use inside a zip
+ * archive, replacing characters that are path separators or invalid on
+ * Windows extraction.
+ */
+export const sanitizeZipPathSegment = (segment: string): string => {
+  const sanitized = segment
+    .replace(/[\\/:*?"<>|\p{Cc}]/gu, '-')
+    .trim()
+    // Windows cannot extract folders or files ending with a dot.
+    .replace(/\.+$/, '');
+
+  return sanitized || 'untitled';
+};
+
+export type ZipWriter = {
+  /**
+   * Adds a file to the zip stream. Files are written incrementally so the
+   * input blob can be garbage collected once this resolves.
+   */
+  addFile: (entry: ZipFileEntry) => Promise<void>;
+
+  /**
+   * Finishes the zip stream and returns the archive as a blob.
+   */
+  finalize: () => Blob;
+
+  /**
+   * Discards the zip stream and any buffered output.
+   */
+  abort: () => void;
+};
+
+/**
+ * How many bytes of a blob to materialise into the JS heap per read. Blobs
+ * (e.g. fetch responses) can be disk-backed by the browser, it is only
+ * `arrayBuffer()` that forces them into memory, so we read in slices.
+ */
+const READ_SLICE_BYTES = 4 * 1024 * 1024;
+
+/**
+ * Once this many bytes of zip output have accumulated in the JS heap they are
+ * coalesced into an intermediate blob. Browsers can page blob storage to disk
+ * under memory pressure, and the final `new Blob(parts)` composes parts by
+ * reference, so this keeps the heap bounded regardless of archive size.
+ */
+const OUTPUT_COALESCE_BYTES = 16 * 1024 * 1024;
+
+/**
+ * Creates an incremental client-side zip writer.
+ *
+ * Files are stored without compression (PDFs are already internally
+ * compressed) and streamed through the archive as they are added, so peak JS
+ * heap usage is bounded by roughly one read slice plus one output buffer
+ * rather than the total size of the archive.
+ */
+export const createZipWriter = (): ZipWriter => {
+  const usedNames = new Set<string>();
+
+  const outputParts: Blob[] = [];
+  let pendingChunks: Uint8Array[] = [];
+  let pendingSize = 0;
+
+  let zipError: Error | null = null;
+
+  const flushPendingChunks = () => {
+    if (pendingChunks.length === 0) {
+      return;
+    }
+
+    outputParts.push(new Blob(pendingChunks));
+    pendingChunks = [];
+    pendingSize = 0;
+  };
+
+  // ZipPassThrough is synchronous (no workers), so output callbacks have
+  // always fired by the time `push`/`end` return.
+  const zipStream = new Zip((error, chunk, isFinal) => {
+    if (error) {
+      zipError = error;
+      return;
+    }
+
+    pendingChunks.push(chunk);
+    pendingSize += chunk.length;
+
+    if (pendingSize >= OUTPUT_COALESCE_BYTES || isFinal) {
+      flushPendingChunks();
+    }
+  });
+
+  /**
+   * Deduplicates filenames case-insensitively (Windows extraction is
+   * case-insensitive) by appending " (n)" before the extension.
+   */
+  const deduplicateFilename = (filename: string) => {
+    const match = filename.match(/^(.*?)(\.[^./]+)?$/);
+
+    const baseName = match?.[1] ?? filename;
+    const extension = match?.[2] ?? '';
+
+    let candidate = filename;
+    let counter = 1;
+
+    while (usedNames.has(candidate.toLowerCase())) {
+      candidate = `${baseName} (${counter})${extension}`;
+      counter += 1;
+    }
+
+    usedNames.add(candidate.toLowerCase());
+
+    return candidate;
+  };
+
+  const addFile = async ({ filename, data }: ZipFileEntry) => {
+    if (zipError) {
+      throw zipError;
+    }
+
+    const file = new ZipPassThrough(deduplicateFilename(filename));
+
+    zipStream.add(file);
+
+    for (let offset = 0; offset < data.size; offset += READ_SLICE_BYTES) {
+      const slice = data.slice(offset, offset + READ_SLICE_BYTES);
+
+      file.push(new Uint8Array(await slice.arrayBuffer()));
+
+      if (zipError) {
+        throw zipError;
+      }
+    }
+
+    file.push(new Uint8Array(0), true);
+
+    if (zipError) {
+      throw zipError;
+    }
+  };
+
+  const finalize = () => {
+    zipStream.end();
+
+    if (zipError) {
+      throw zipError;
+    }
+
+    flushPendingChunks();
+
+    return new Blob(outputParts, { type: 'application/zip' });
+  };
+
+  const abort = () => {
+    zipStream.terminate();
+
+    pendingChunks = [];
+    pendingSize = 0;
+    outputParts.length = 0;
+  };
+
+  return {
+    addFile,
+    finalize,
+    abort,
+  };
+};

packages/lib/client-only/download-pdf.ts

@@ -32,7 +32,11 @@ const versionToFilenameSuffix = (version: DocumentVersion): string => {
   }
 };
 
-export const downloadPDF = async ({ envelopeItem, token, fileName, version = 'signed' }: DownloadPDFProps) => {
+/**
+ * Fetches a PDF for an envelope item and returns it as a blob alongside the
+ * filename it should be saved as. Throws on non-OK responses.
+ */
+export const fetchPDF = async ({ envelopeItem, token, fileName, version = 'signed' }: DownloadPDFProps) => {
   const downloadUrl = getEnvelopeItemPdfUrl({
     type: 'download',
     envelopeItem: envelopeItem,
@@ -40,12 +44,27 @@ export const downloadPDF = async ({ envelopeItem, token, fileName, version = 'si
     version,
   });
 
-  const blob = await fetch(downloadUrl).then(async (res) => await res.blob());
+  const response = await fetch(downloadUrl);
+
+  if (!response.ok) {
+    throw new Error(`Failed to download PDF: ${response.status}`);
+  }
+
+  const blob = await response.blob();
 
   const baseTitle = (fileName ?? 'document').replace(/\.pdf$/, '');
 
-  downloadFile({
+  return {
     filename: `${baseTitle}${versionToFilenameSuffix(version)}`,
+    blob,
+  };
+};
+
+export const downloadPDF = async (options: DownloadPDFProps) => {
+  const { filename, blob } = await fetchPDF(options);
+
+  downloadFile({
+    filename,
     data: blob,
   });
 };

packages/lib/client-only/hooks/use-autosave.ts

@@ -8,7 +8,7 @@ type SaveRequest<T, R> = {
 export const useAutoSave = <T, R = void>(onSave: (data: T) => Promise<R>, options: { delay?: number } = {}) => {
   const { delay = 2000 } = options;
 
-  const saveTimeoutRef = useRef<NodeJS.Timeout>();
+  const saveTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const saveQueueRef = useRef<SaveRequest<T, R>[]>([]);
   const isProcessingRef = useRef(false);
 

packages/lib/client-only/hooks/use-child-route-flags.ts

@@ -0,0 +1,55 @@
+import { useMatches } from 'react-router';
+
+/**
+ * The layout treatment a route wants from its parent layout(s).
+ *
+ * - `'settings'` — the full-height unified settings layout: no centered page
+ *   container, a full-width app header, and a viewport-height flex column so the
+ *   settings shell can fill the available space and scroll internally.
+ * - `null` — the default layout (centered `<PageContainer />`, normal flow).
+ */
+export type LayoutMode = 'settings' | null;
+
+/**
+ * Typed route `handle` export. Controls layout rendering.
+ *
+ * - `hideAppHeader` — tells the parent layout to skip rendering `<AppHeader />`.
+ * - `layoutMode` — selects the layout treatment the parent layout(s) apply. See
+ *   {@link LayoutMode}.
+ */
+export type RouteHandle = {
+  hideAppHeader?: boolean;
+  layoutMode?: LayoutMode;
+};
+
+/**
+ * Returns layout flags from the deepest matching route that sets any.
+ * Layouts call this to decide whether to render certain elements.
+ */
+export function useChildRouteFlags(): { hideAppHeader: boolean; layoutMode: LayoutMode } {
+  const matches = useMatches();
+
+  let hideAppHeader = false;
+  let layoutMode: LayoutMode = null;
+
+  // Walk from deepest match backward so the leaf route wins per flag.
+  for (let i = matches.length - 1; i >= 0; i--) {
+    const handle = matches[i].handle;
+
+    if (handle == null || typeof handle !== 'object') {
+      continue;
+    }
+
+    const h = handle as RouteHandle;
+
+    if (layoutMode === null && h.layoutMode) {
+      layoutMode = h.layoutMode;
+    }
+
+    if (!hideAppHeader && h.hideAppHeader) {
+      hideAppHeader = true;
+    }
+  }
+
+  return { hideAppHeader, layoutMode };
+}

packages/lib/client-only/hooks/use-editor-recipients.ts

@@ -7,9 +7,10 @@ import { DocumentSigningOrder, RecipientRole } from '@prisma/client';
 import { useId } from 'react';
 import type { UseFormReturn } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
-import { prop, sortBy } from 'remeda';
 import { z } from 'zod';
 
+import { isCcRecipient, normalizeRecipientSigningOrders, sortRecipientsForSigningOrder } from '../../utils/recipients';
+
 const LocalRecipientSchema = z.object({
   formId: z.string().min(1),
   id: z.number().optional(),
@@ -94,13 +95,13 @@ export const useEditorRecipients = ({ envelope }: EditorRecipientsProps): UseEdi
       name: recipient.name,
       email: recipient.email,
       role: recipient.role,
-      signingOrder: recipient.signingOrder ?? index + 1,
+      signingOrder: isCcRecipient(recipient) ? undefined : (recipient.signingOrder ?? index + 1),
       actionAuth: ZRecipientAuthOptionsSchema.parse(recipient.authOptions)?.actionAuth ?? undefined,
     }));
 
     const signers: TLocalRecipient[] =
       formRecipients.length > 0
-        ? sortBy(formRecipients, [prop('signingOrder'), 'asc'], [prop('id'), 'asc'])
+        ? normalizeRecipientSigningOrders(sortRecipientsForSigningOrder(formRecipients))
         : [
             {
               formId: initialId,

packages/lib/client-only/hooks/use-envelope-autosave.ts

@@ -1,84 +1,100 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
+/**
+ * Debounced autosave for the envelope editor (recipients, fields, settings).
+ *
+ * Only one save runs at a time and the latest edit always wins. If the user
+ * keeps editing while a save is on the wire, their newest changes get saved
+ * right after, never dropped.
+ */
 export function useEnvelopeAutosave<T>(saveFn: (data: T) => Promise<void>, delay = 1000) {
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const lastArgsRef = useRef<T | null>(null);
-  const pendingPromiseRef = useRef<Promise<void> | null>(null);
+
+  // The edit waiting to be saved. Wrapped in an object so null always means "nothing queued".
+  const pendingRef = useRef<{ value: T } | null>(null);
+
+  // The save currently running, if any. Shared so we never kick off two at once.
+  const commitPromiseRef = useRef<Promise<void> | null>(null);
+
+  // saveFn closes over editor state, so keep the latest one around without
+  // making triggerSave/flush depend on it.
+  const saveFnRef = useRef(saveFn);
+  saveFnRef.current = saveFn;
 
   const [isPending, setIsPending] = useState(false);
   const [isCommiting, setIsCommiting] = useState(false);
 
+  /**
+   * Runs saves one at a time until the queue is empty. Anything queued
+   * mid-save gets picked up on the next loop.
+   */
+  const commit = useCallback((): Promise<void> => {
+    if (commitPromiseRef.current) {
+      return commitPromiseRef.current;
+    }
+
+    if (!pendingRef.current) {
+      return Promise.resolve();
+    }
+
+    const pump = (async () => {
+      try {
+        setIsCommiting(true);
+
+        while (pendingRef.current) {
+          const { value } = pendingRef.current;
+          pendingRef.current = null;
+
+          await saveFnRef.current(value);
+        }
+      } finally {
+        // eslint-disable-next-line require-atomic-updates
+        commitPromiseRef.current = null;
+        setIsCommiting(false);
+        setIsPending(false);
+      }
+    })();
+
+    commitPromiseRef.current = pump;
+
+    return pump;
+  }, []);
+
   const triggerSave = useCallback(
     (data: T) => {
-      lastArgsRef.current = data;
+      pendingRef.current = { value: data };
 
-      // A debounce or promise means something is pending
       setIsPending(true);
 
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
 
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      timeoutRef.current = setTimeout(async () => {
-        if (!lastArgsRef.current) {
-          return;
-        }
-
-        const args = lastArgsRef.current;
-        lastArgsRef.current = null;
+      timeoutRef.current = setTimeout(() => {
         timeoutRef.current = null;
-
-        setIsCommiting(true);
-        pendingPromiseRef.current = saveFn(args);
-
-        try {
-          await pendingPromiseRef.current;
-        } finally {
-          // eslint-disable-next-line require-atomic-updates
-          pendingPromiseRef.current = null;
-          setIsCommiting(false);
-          setIsPending(false);
-        }
+        void commit();
       }, delay);
     },
-    [saveFn, delay],
+    [commit, delay],
   );
 
+  /**
+   * Skip the debounce and save now. The editor calls this when it needs
+   * everything persisted, e.g. before sending or switching steps.
+   */
   const flush = useCallback(async () => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
 
-    if (pendingPromiseRef.current) {
-      // Already running → wait for it
-      await pendingPromiseRef.current;
-      return;
-    }
-
-    if (lastArgsRef.current) {
-      const args = lastArgsRef.current;
-      lastArgsRef.current = null;
-
-      setIsCommiting(true);
-      setIsPending(true);
-
-      pendingPromiseRef.current = saveFn(args);
-      try {
-        await pendingPromiseRef.current;
-      } finally {
-        // eslint-disable-next-line require-atomic-updates
-        pendingPromiseRef.current = null;
-        setIsCommiting(false);
-        setIsPending(false);
-      }
-    }
-  }, [saveFn]);
+    await commit();
+  }, [commit]);
 
+  // Last-ditch attempt to save if the tab closes with unsaved edits.
   useEffect(() => {
     const handleBeforeUnload = () => {
-      if (timeoutRef.current || pendingPromiseRef.current) {
+      if (timeoutRef.current || pendingRef.current || commitPromiseRef.current) {
         void flush();
       }
     };

packages/lib/client-only/providers/envelope-editor-provider.tsx

@@ -15,7 +15,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { useLingui } from '@lingui/react/macro';
 import { EnvelopeType, Prisma, ReadStatus, SendStatus, SigningStatus } from '@prisma/client';
 import type React from 'react';
-import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { createContext, useCallback, useContext, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { useSearchParams } from 'react-router';
 
 import type { TDocumentEmailSettings } from '../../types/document-email';
@@ -107,7 +107,39 @@ export const EnvelopeEditorProvider = ({
 
   const [_searchParams, setSearchParams] = useSearchParams();
 
-  const [envelope, _setEnvelope] = useState(initialEnvelope);
+  /**
+   * The envelope is kept in a ref-backed external store instead of useState so
+   * that async consumers (debounced autosave callbacks, flushAutosave, resetForms)
+   * can synchronously read the latest value via `getEnvelope`.
+   *
+   * React subscribes to the store through useSyncExternalStore, keeping renders in
+   * sync without maintaining a separate copy of the state.
+   */
+  const envelopeStoreRef = useRef(initialEnvelope);
+  const envelopeStoreSubscribersRef = useRef(new Set<() => void>());
+
+  const subscribeToEnvelopeStore = useCallback((onStoreChange: () => void) => {
+    envelopeStoreSubscribersRef.current.add(onStoreChange);
+
+    return () => {
+      envelopeStoreSubscribersRef.current.delete(onStoreChange);
+    };
+  }, []);
+
+  const getEnvelope = useCallback(() => envelopeStoreRef.current, []);
+
+  const setEnvelope = useCallback((action: React.SetStateAction<TEditorEnvelope>) => {
+    const next = typeof action === 'function' ? action(envelopeStoreRef.current) : action;
+
+    envelopeStoreRef.current = next;
+
+    for (const onStoreChange of envelopeStoreSubscribersRef.current) {
+      onStoreChange();
+    }
+  }, []);
+
+  const envelope = useSyncExternalStore(subscribeToEnvelopeStore, getEnvelope, getEnvelope);
+
   const [autosaveError, setAutosaveError] = useState<boolean>(false);
 
   const isCscMode = IS_INSTANCE_CSC_MODE();
@@ -135,8 +167,6 @@ export const EnvelopeEditorProvider = ({
     };
   }, [isCscMode, providedEditorConfig]);
 
-  const envelopeRef = useRef(initialEnvelope);
-
   const externalFlushCallbacksRef = useRef<Map<string, () => Promise<void>>>(new Map());
   const pendingMutationsRef = useRef<Set<Promise<unknown>>>(new Set());
 
@@ -156,14 +186,6 @@ export const EnvelopeEditorProvider = ({
     });
   }, []);
 
-  const setEnvelope: typeof _setEnvelope = (action) => {
-    _setEnvelope((prev) => {
-      const next = typeof action === 'function' ? action(prev) : action;
-      envelopeRef.current = next;
-      return next;
-    });
-  };
-
   const isEmbedded = editorConfig.embedded !== undefined;
 
   const editorFields = useEditorFields({
@@ -192,16 +214,18 @@ export const EnvelopeEditorProvider = ({
     try {
       let recipients: TEditorEnvelope['recipients'] = [];
 
+      const currentEnvelope = getEnvelope();
+
       if (!isEmbedded) {
         const response = await setRecipientsMutation.mutateAsync({
-          envelopeId: envelope.id,
-          envelopeType: envelope.type,
+          envelopeId: currentEnvelope.id,
+          envelopeType: currentEnvelope.type,
           recipients: localRecipients,
         });
 
         recipients = response.data;
       } else {
-        recipients = mapLocalRecipientsToRecipients({ envelope, localRecipients });
+        recipients = mapLocalRecipientsToRecipients({ envelope: currentEnvelope, localRecipients });
       }
 
       setEnvelope((prev) => ({
@@ -211,9 +235,7 @@ export const EnvelopeEditorProvider = ({
       }));
 
       // Reset the local fields to ensure deleted recipient fields are removed.
-      editorFields.resetForm(
-        envelope.fields.filter((field) => recipients.some((recipient) => recipient.id === field.recipientId)),
-      );
+      editorFields.resetForm(getEnvelope().fields);
 
       setAutosaveError(false);
     } catch (err) {
@@ -248,16 +270,18 @@ export const EnvelopeEditorProvider = ({
     try {
       let fields: TSetEnvelopeFieldsResponse['data'] = [];
 
+      const currentEnvelope = getEnvelope();
+
       if (!isEmbedded) {
         const response = await setFieldsMutation.mutateAsync({
-          envelopeId: envelope.id,
-          envelopeType: envelope.type,
+          envelopeId: currentEnvelope.id,
+          envelopeType: currentEnvelope.type,
           fields: localFields,
         });
 
         fields = response.data;
       } else {
-        fields = mapLocalFieldsToFields({ envelope, localFields });
+        fields = mapLocalFieldsToFields({ envelope: currentEnvelope, localFields });
       }
 
       setEnvelope((prev) => ({
@@ -309,7 +333,7 @@ export const EnvelopeEditorProvider = ({
     try {
       const response = !isEmbedded
         ? await updateEnvelopeMutation.mutateAsync({
-            envelopeId: envelope.id,
+            envelopeId: getEnvelope().id,
             data,
             meta,
           })
@@ -467,12 +491,14 @@ export const EnvelopeEditorProvider = ({
   };
 
   const resetForms = () => {
+    const currentEnvelope = getEnvelope();
+
     editorRecipients.resetForm({
-      recipients: envelopeRef.current.recipients,
-      documentMeta: envelopeRef.current.documentMeta,
+      recipients: currentEnvelope.recipients,
+      documentMeta: currentEnvelope.documentMeta,
     });
 
-    editorFields.resetForm(envelopeRef.current.fields);
+    editorFields.resetForm(currentEnvelope.fields);
   };
 
   const flushAutosave = async (): Promise<TEditorEnvelope> => {
@@ -488,7 +514,7 @@ export const EnvelopeEditorProvider = ({
       await Promise.allSettled(Array.from(pendingMutationsRef.current));
     }
 
-    return envelopeRef.current;
+    return getEnvelope();
   };
 
   return (