feat: convert AI field placement to server-side processing

.env.example

@@ -135,6 +135,14 @@ NEXT_PUBLIC_FEATURE_BILLING_ENABLED=
 # OPTIONAL: Leave blank to allow users to signup through /signup page.
 NEXT_PUBLIC_DISABLE_SIGNUP=
 
+# [[AI]]
+# AI Gateway
+AI_GATEWAY_API_KEY=""
+# OPTIONAL: API key for Google Generative AI (Gemini). Get your key from https://ai.google.dev
+GOOGLE_GENERATIVE_AI_API_KEY=""
+# OPTIONAL: Enable AI field detection debug mode to save preview images with bounding boxes
+NEXT_PUBLIC_AI_DEBUG_PREVIEW=
+
 # [[E2E Tests]]
 E2E_TEST_AUTHENTICATE_USERNAME="Test User"
 E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"

.gitignore

@@ -60,3 +60,6 @@ CLAUDE.md
 
 # agents
 .specs
+
+# ai debug previews
+packages/assets/ai-previews/

apps/remix/app/components/dialogs/document-duplicate-dialog.tsx

@@ -19,15 +19,13 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { useCurrentTeam } from '~/providers/team';
 
 type DocumentDuplicateDialogProps = {
-  id: string;
-  token?: string;
+  id: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
 };
 
 export const DocumentDuplicateDialog = ({
   id,
-  token,
   open,
   onOpenChange,
 }: DocumentDuplicateDialogProps) => {
@@ -38,38 +36,42 @@ export const DocumentDuplicateDialog = ({
 
   const team = useCurrentTeam();
 
-  const { data: envelopeItemsPayload, isLoading: isLoadingEnvelopeItems } =
-    trpcReact.envelope.item.getManyByToken.useQuery(
-      {
-        envelopeId: id,
-        access: token ? { type: 'recipient', token } : { type: 'user' },
-      },
-      {
-        enabled: open,
-      },
-    );
+  const { data: document, isLoading } = trpcReact.document.get.useQuery(
+    {
+      documentId: id,
+    },
+    {
+      queryHash: `document-duplicate-dialog-${id}`,
+      enabled: open === true,
+    },
+  );
 
-  const envelopeItems = envelopeItemsPayload?.envelopeItems || [];
+  const documentData = document?.documentData
+    ? {
+        ...document.documentData,
+        data: document.documentData.initialData,
+      }
+    : undefined;
 
   const documentsPath = formatDocumentsPath(team.url);
 
-  const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
-    trpcReact.envelope.duplicate.useMutation({
-      onSuccess: async ({ duplicatedEnvelopeId }) => {
+  const { mutateAsync: duplicateDocument, isPending: isDuplicateLoading } =
+    trpcReact.document.duplicate.useMutation({
+      onSuccess: async ({ id }) => {
         toast({
           title: _(msg`Document Duplicated`),
           description: _(msg`Your document has been successfully duplicated.`),
           duration: 5000,
         });
 
-        await navigate(`${documentsPath}/${duplicatedEnvelopeId}/edit`);
+        await navigate(`${documentsPath}/${id}/edit`);
         onOpenChange(false);
       },
     });
 
   const onDuplicate = async () => {
     try {
-      await duplicateEnvelope({ envelopeId: id });
+      await duplicateDocument({ documentId: id });
     } catch {
       toast({
         title: _(msg`Something went wrong`),
@@ -81,14 +83,14 @@ export const DocumentDuplicateDialog = ({
   };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isDuplicating && onOpenChange(value)}>
+    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
             <Trans>Duplicate</Trans>
           </DialogTitle>
         </DialogHeader>
-        {isLoadingEnvelopeItems || !envelopeItems || envelopeItems.length === 0 ? (
+        {!documentData || isLoading ? (
           <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
             <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
               <Trans>Loading Document...</Trans>
@@ -96,12 +98,7 @@ export const DocumentDuplicateDialog = ({
           </div>
         ) : (
           <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll">
-            <PDFViewer
-              key={envelopeItems[0].id}
-              envelopeItem={envelopeItems[0]}
-              token={undefined}
-              version="original"
-            />
+            <PDFViewer key={document?.id} documentData={documentData} />
           </div>
         )}
 
@@ -118,8 +115,8 @@ export const DocumentDuplicateDialog = ({
 
             <Button
               type="button"
-              disabled={isDuplicating}
-              loading={isDuplicating}
+              disabled={isDuplicateLoading || isLoading}
+              loading={isDuplicateLoading}
               onClick={onDuplicate}
               className="flex-1"
             >

apps/remix/app/components/dialogs/envelope-download-dialog.tsx

@@ -2,10 +2,11 @@ import { useState } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
-import { DocumentStatus, type EnvelopeItem } from '@prisma/client';
+import { type DocumentData, DocumentStatus, type EnvelopeItem } from '@prisma/client';
 import { DownloadIcon, FileTextIcon } from 'lucide-react';
 
-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
+import { downloadFile } from '@documenso/lib/client-only/download-file';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -19,7 +20,9 @@ import {
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-type EnvelopeItemToDownload = Pick<EnvelopeItem, 'id' | 'envelopeId' | 'title' | 'order'>;
+type EnvelopeItemToDownload = Pick<EnvelopeItem, 'id' | 'title' | 'order'> & {
+  documentData: DocumentData;
+};
 
 type EnvelopeDownloadDialogProps = {
   envelopeId: string;
@@ -84,11 +87,25 @@ export const EnvelopeDownloadDialog = ({
     }));
 
     try {
-      await downloadPDF({
-        envelopeItem,
-        token,
-        fileName: envelopeItem.title,
-        version,
+      const data = await getFile({
+        type: envelopeItem.documentData.type,
+        data:
+          version === 'signed'
+            ? envelopeItem.documentData.data
+            : envelopeItem.documentData.initialData,
+      });
+
+      const blob = new Blob([data], {
+        type: 'application/pdf',
+      });
+
+      const baseTitle = envelopeItem.title.replace(/\.pdf$/, '');
+      const suffix = version === 'signed' ? '_signed.pdf' : '.pdf';
+      const filename = `${baseTitle}${suffix}`;
+
+      downloadFile({
+        filename,
+        data: blob,
       });
 
       setIsDownloadingState((prev) => ({
@@ -129,7 +146,7 @@ export const EnvelopeDownloadDialog = ({
         <div className="flex flex-col gap-4">
           {isLoadingEnvelopeItems ? (
             <>
-              {Array.from({ length: 1 }).map((_, index) => (
+              {Array.from({ length: 2 }).map((_, index) => (
                 <div
                   key={index}
                   className="border-border bg-card flex items-center gap-2 rounded-lg border p-4"
@@ -158,7 +175,6 @@ export const EnvelopeDownloadDialog = ({
                 </div>
 
                 <div className="min-w-0 flex-1">
-                  {/* Todo: Envelopes - Fix overflow */}
                   <h4 className="text-foreground truncate text-sm font-medium">{item.title}</h4>
                   <p className="text-muted-foreground mt-0.5 text-xs">
                     <Trans>PDF Document</Trans>

apps/remix/app/components/dialogs/template-create-dialog.tsx

@@ -7,9 +7,9 @@ import { FilePlus, Loader } from 'lucide-react';
 import { useNavigate } from 'react-router';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
-import type { TCreateTemplatePayloadSchema } from '@documenso/trpc/server/template-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -54,17 +54,13 @@ export const TemplateCreateDialog = ({ folderId }: TemplateCreateDialogProps) =>
     setIsUploadingFile(true);
 
     try {
-      const payload = {
+      const response = await putPdfFile(file);
+
+      const { legacyTemplateId: id } = await createTemplate({
         title: file.name,
+        templateDocumentDataId: response.id,
         folderId: folderId,
-      } satisfies TCreateTemplatePayloadSchema;
-
-      const formData = new FormData();
-
-      formData.append('payload', JSON.stringify(payload));
-      formData.append('file', file);
-
-      const { envelopeId: id } = await createTemplate(formData);
+      });
 
       toast({
         title: _(msg`Template document uploaded`),

apps/remix/app/components/embed/authoring/configure-fields-view.tsx

@@ -4,7 +4,6 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { DocumentData, FieldType } from '@prisma/client';
 import { ReadStatus, type Recipient, SendStatus, SigningStatus } from '@prisma/client';
-import { base64 } from '@scure/base';
 import { ChevronsUpDown } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -13,6 +12,7 @@ import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-c
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import { base64 } from '@documenso/lib/universal/base64';
 import { nanoid } from '@documenso/lib/universal/id';
 import { ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING } from '@documenso/lib/utils/advanced-fields-helpers';
 import { useRecipientColors } from '@documenso/ui/lib/recipient-colors';
@@ -83,14 +83,21 @@ export const ConfigureFieldsView = ({
 
   const normalizedDocumentData = useMemo(() => {
     if (documentData) {
-      return documentData.data;
+      return documentData;
     }
 
     if (!configData.documentData) {
       return null;
     }
 
-    return base64.encode(configData.documentData.data);
+    const data = base64.encode(configData.documentData?.data);
+
+    return {
+      id: 'preview',
+      type: 'BYTES_64',
+      data,
+      initialData: data,
+    } satisfies DocumentData;
   }, [configData.documentData]);
 
   const recipients = useMemo(() => {
@@ -534,15 +541,7 @@ export const ConfigureFieldsView = ({
             <Form {...form}>
               {normalizedDocumentData && (
                 <div>
-                  <PDFViewer
-                    overrideData={normalizedDocumentData}
-                    envelopeItem={{
-                      id: '',
-                      envelopeId: '',
-                    }}
-                    token={undefined}
-                    version="signed"
-                  />
+                  <PDFViewer documentData={normalizedDocumentData} />
 
                   <ElementVisible
                     target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}

apps/remix/app/components/embed/embed-direct-template-client-page.tsx

@@ -3,8 +3,8 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta, EnvelopeItem, Recipient, Signature } from '@prisma/client';
-import { type Field, FieldType } from '@prisma/client';
+import type { DocumentMeta, Recipient, Signature } from '@prisma/client';
+import { type DocumentData, type Field, FieldType } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { useSearchParams } from 'react-router';
@@ -47,7 +47,7 @@ export type EmbedDirectTemplateClientPageProps = {
   token: string;
   envelopeId: string;
   updatedAt: Date;
-  envelopeItems: Pick<EnvelopeItem, 'id' | 'envelopeId'>[];
+  documentData: DocumentData;
   recipient: Recipient;
   fields: Field[];
   metadata?: DocumentMeta | null;
@@ -59,7 +59,7 @@ export const EmbedDirectTemplateClientPage = ({
   token,
   envelopeId,
   updatedAt,
-  envelopeItems,
+  documentData,
   recipient,
   fields,
   metadata,
@@ -335,9 +335,7 @@ export const EmbedDirectTemplateClientPage = ({
         {/* Viewer */}
         <div className="flex-1">
           <PDFViewer
-            envelopeItem={envelopeItems[0]}
-            token={token}
-            version="signed"
+            documentData={documentData}
             onDocumentLoad={() => setHasDocumentLoaded(true)}
           />
         </div>

apps/remix/app/components/embed/embed-document-signing-page.tsx

@@ -3,8 +3,14 @@ import { useEffect, useId, useLayoutEffect, useMemo, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta, EnvelopeItem } from '@prisma/client';
-import { type Field, FieldType, RecipientRole, SigningStatus } from '@prisma/client';
+import type { DocumentMeta } from '@prisma/client';
+import {
+  type DocumentData,
+  type Field,
+  FieldType,
+  RecipientRole,
+  SigningStatus,
+} from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
@@ -44,7 +50,7 @@ export type EmbedSignDocumentClientPageProps = {
   token: string;
   documentId: number;
   envelopeId: string;
-  envelopeItems: Pick<EnvelopeItem, 'id' | 'envelopeId'>[];
+  documentData: DocumentData;
   recipient: RecipientWithFields;
   fields: Field[];
   completedFields: DocumentField[];
@@ -59,7 +65,7 @@ export const EmbedSignDocumentClientPage = ({
   token,
   documentId,
   envelopeId,
-  envelopeItems,
+  documentData,
   recipient,
   fields,
   completedFields,
@@ -287,9 +293,7 @@ export const EmbedSignDocumentClientPage = ({
           {/* Viewer */}
           <div className="embed--DocumentViewer flex-1">
             <PDFViewer
-              envelopeItem={envelopeItems[0]}
-              token={token}
-              version="signed"
+              documentData={documentData}
               onDocumentLoad={() => setHasDocumentLoaded(true)}
             />
           </div>

apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx

@@ -226,9 +226,7 @@ export const MultiSignDocumentSigningView = ({
                   })}
                 >
                   <PDFViewer
-                    envelopeItem={document.envelopeItems[0]}
-                    token={token}
-                    version="signed"
+                    documentData={document.documentData}
                     onDocumentLoad={() => {
                       setHasDocumentLoaded(true);
                       onDocumentReady?.();

apps/remix/app/components/forms/branding-preferences-form.tsx

@@ -1,14 +1,14 @@
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, useLingui } from '@lingui/react/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
 import type { TeamGlobalSettings } from '@prisma/client';
 import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -29,8 +29,6 @@ import {
 } from '@documenso/ui/primitives/select';
 import { Textarea } from '@documenso/ui/primitives/textarea';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
-
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 const ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
 
@@ -70,9 +68,6 @@ export function BrandingPreferencesForm({
 }: BrandingPreferencesFormProps) {
   const { t } = useLingui();
 
-  const team = useOptionalCurrentTeam();
-  const organisation = useCurrentOrganisation();
-
   const [previewUrl, setPreviewUrl] = useState<string>('');
   const [hasLoadedPreview, setHasLoadedPreview] = useState(false);
 
@@ -93,13 +88,14 @@ export function BrandingPreferencesForm({
       const file = JSON.parse(settings.brandingLogo);
 
       if ('type' in file && 'data' in file) {
-        const logoUrl =
-          context === 'Team'
-            ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/team/${team?.id}`
-            : `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/organisation/${organisation?.id}`;
+        void getFile(file).then((binaryData) => {
+          const objectUrl = URL.createObjectURL(new Blob([binaryData]));
 
-        setPreviewUrl(logoUrl);
-        setHasLoadedPreview(true);
+          setPreviewUrl(objectUrl);
+          setHasLoadedPreview(true);
+        });
+
+        return;
       }
     }
 

apps/remix/app/components/forms/editor/editor-field-text-form.tsx

@@ -152,18 +152,6 @@ export const EditorFieldTextForm = ({
                     className="h-auto"
                     placeholder={t`Add text to the field`}
                     {...field}
-                    onChange={(e) => {
-                      const values = form.getValues();
-                      const characterLimit = values.characterLimit || 0;
-                      let textValue = e.target.value;
-
-                      if (characterLimit > 0 && textValue.length > characterLimit) {
-                        textValue = textValue.slice(0, characterLimit);
-                      }
-
-                      e.target.value = textValue;
-                      field.onChange(e);
-                    }}
                     rows={1}
                   />
                 </FormControl>
@@ -187,18 +175,6 @@ export const EditorFieldTextForm = ({
                     className="bg-background"
                     placeholder={t`Field character limit`}
                     {...field}
-                    onChange={(e) => {
-                      field.onChange(e);
-
-                      const values = form.getValues();
-                      const characterLimit = parseInt(e.target.value, 10) || 0;
-
-                      const textValue = values.text || '';
-
-                      if (characterLimit > 0 && textValue.length > characterLimit) {
-                        form.setValue('text', textValue.slice(0, characterLimit));
-                      }
-                    }}
                   />
                 </FormControl>
                 <FormMessage />

apps/remix/app/components/general/direct-template/direct-template-page.tsx

@@ -89,10 +89,7 @@ export const DirectTemplatePageView = ({
     setStep('sign');
   };
 
-  const onSignDirectTemplateSubmit = async (
-    fields: DirectTemplateLocalField[],
-    nextSigner?: { name: string; email: string },
-  ) => {
+  const onSignDirectTemplateSubmit = async (fields: DirectTemplateLocalField[]) => {
     try {
       let directTemplateExternalId = searchParams?.get('externalId') || undefined;
 
@@ -101,7 +98,6 @@ export const DirectTemplatePageView = ({
       }
 
       const { token } = await createDocumentFromDirectTemplate({
-        nextSigner,
         directTemplateToken,
         directTemplateExternalId,
         directRecipientName: fullName,
@@ -153,9 +149,7 @@ export const DirectTemplatePageView = ({
         <CardContent className="p-2">
           <PDFViewer
             key={template.id}
-            envelopeItem={template.envelopeItems[0]}
-            token={directTemplateRecipient.token}
-            version="signed"
+            documentData={template.templateDocumentData}
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx

@@ -55,13 +55,10 @@ import { DocumentSigningRecipientProvider } from '../document-signing/document-s
 
 export type DirectTemplateSigningFormProps = {
   flowStep: DocumentFlowStep;
-  directRecipient: Pick<Recipient, 'authOptions' | 'email' | 'role' | 'name' | 'token' | 'id'>;
+  directRecipient: Pick<Recipient, 'authOptions' | 'email' | 'role' | 'name' | 'token'>;
   directRecipientFields: Field[];
   template: Omit<TTemplate, 'user'>;
-  onSubmit: (
-    _data: DirectTemplateLocalField[],
-    _nextSigner?: { name: string; email: string },
-  ) => Promise<void>;
+  onSubmit: (_data: DirectTemplateLocalField[]) => Promise<void>;
 };
 
 export type DirectTemplateLocalField = Field & {
@@ -152,7 +149,7 @@ export const DirectTemplateSigningForm = ({
     validateFieldsInserted(fieldsRequiringValidation);
   };
 
-  const handleSubmit = async (nextSigner?: { name: string; email: string }) => {
+  const handleSubmit = async () => {
     setValidateUninsertedFields(true);
 
     const isFieldsValid = validateFieldsInserted(fieldsRequiringValidation);
@@ -164,7 +161,7 @@ export const DirectTemplateSigningForm = ({
     setIsSubmitting(true);
 
     try {
-      await onSubmit(localFields, nextSigner);
+      await onSubmit(localFields);
     } catch {
       setIsSubmitting(false);
     }
@@ -221,30 +218,6 @@ export const DirectTemplateSigningForm = ({
     setLocalFields(updatedFields);
   }, []);
 
-  const nextRecipient = useMemo(() => {
-    if (
-      !template.templateMeta?.signingOrder ||
-      template.templateMeta.signingOrder !== 'SEQUENTIAL' ||
-      !template.templateMeta.allowDictateNextSigner
-    ) {
-      return undefined;
-    }
-
-    const sortedRecipients = template.recipients.sort((a, b) => {
-      // Sort by signingOrder first (nulls last), then by id
-      if (a.signingOrder === null && b.signingOrder === null) return a.id - b.id;
-      if (a.signingOrder === null) return 1;
-      if (b.signingOrder === null) return -1;
-      if (a.signingOrder === b.signingOrder) return a.id - b.id;
-      return a.signingOrder - b.signingOrder;
-    });
-
-    const currentIndex = sortedRecipients.findIndex((r) => r.id === directRecipient.id);
-    return currentIndex !== -1 && currentIndex < sortedRecipients.length - 1
-      ? sortedRecipients[currentIndex + 1]
-      : undefined;
-  }, [template.templateMeta?.signingOrder, template.recipients, directRecipient.id]);
-
   return (
     <DocumentSigningRecipientProvider recipient={directRecipient}>
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
@@ -444,15 +417,11 @@ export const DirectTemplateSigningForm = ({
 
           <DocumentSigningCompleteDialog
             isSubmitting={isSubmitting}
-            onSignatureComplete={async (nextSigner) => handleSubmit(nextSigner)}
+            onSignatureComplete={async () => handleSubmit()}
             documentTitle={template.title}
             fields={localFields}
             fieldsValidated={fieldsValidated}
             recipient={directRecipient}
-            allowDictateNextSigner={nextRecipient && template.templateMeta?.allowDictateNextSigner}
-            defaultNextSigner={
-              nextRecipient ? { name: nextRecipient.name, email: nextRecipient.email } : undefined
-            }
           />
         </div>
       </DocumentFlowFormContainerFooter>

apps/remix/app/components/general/document-signing/document-signing-auth-page.tsx

@@ -9,7 +9,7 @@ import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentSigningAuthPageViewProps = {
-  email?: string;
+  email: string;
   emailHasAccount?: boolean;
 };
 
@@ -22,18 +22,12 @@ export const DocumentSigningAuthPageView = ({
 
   const [isSigningOut, setIsSigningOut] = useState(false);
 
-  const handleChangeAccount = async (email?: string) => {
+  const handleChangeAccount = async (email: string) => {
     try {
       setIsSigningOut(true);
 
-      let redirectPath = '/signin';
-
-      if (email) {
-        redirectPath = emailHasAccount ? `/signin#email=${email}` : `/signup#email=${email}`;
-      }
-
       await authClient.signOut({
-        redirectPath,
+        redirectPath: emailHasAccount ? `/signin#email=${email}` : `/signup#email=${email}`,
       });
     } catch {
       toast({
@@ -55,13 +49,9 @@ export const DocumentSigningAuthPageView = ({
         </h1>
 
         <p className="text-muted-foreground mt-2 text-sm">
-          {email ? (
-            <Trans>
-              You need to be logged in as <strong>{email}</strong> to view this page.
-            </Trans>
-          ) : (
-            <Trans>You need to be logged in to view this page.</Trans>
-          )}
+          <Trans>
+            You need to be logged in as <strong>{email}</strong> to view this page.
+          </Trans>
         </p>
 
         <Button

apps/remix/app/components/general/document-signing/document-signing-auth-provider.tsx

@@ -24,10 +24,7 @@ type PasskeyData = {
   isError: boolean;
 };
 
-type SigningAuthRecipient = Pick<
-  Recipient,
-  'authOptions' | 'email' | 'role' | 'name' | 'token' | 'id'
->;
+type SigningAuthRecipient = Pick<Recipient, 'authOptions' | 'email' | 'role' | 'name' | 'token'>;
 
 export type DocumentSigningAuthContextValue = {
   executeActionAuthProcedure: (_value: ExecuteActionAuthProcedureOptions) => Promise<void>;

apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx

@@ -304,6 +304,7 @@ export const DocumentSigningCompleteDialog = ({
                 <form onSubmit={form.handleSubmit(onFormSubmit)}>
                   {allowDictateNextSigner && defaultNextSigner && (
                     <div className="mb-4 flex flex-col gap-4">
+                      {/* Todo: Envelopes - Should we say "The next recipient to sign this document will be"? */}
                       <div className="flex flex-col gap-4 md:flex-row">
                         <FormField
                           control={form.control}

apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx

@@ -245,12 +245,7 @@ export const DocumentSigningPageViewV1 = ({
           <div className="flex-1">
             <Card className="rounded-xl before:rounded-xl" gradient>
               <CardContent className="p-2">
-                <PDFViewer
-                  key={document.envelopeItems[0].id}
-                  envelopeItem={document.envelopeItems[0]}
-                  token={recipient.token}
-                  version="signed"
-                />
+                <PDFViewer key={documentData.id} documentData={documentData} document={document} />
               </CardContent>
             </Card>
           </div>

apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx

@@ -205,8 +205,8 @@ export const DocumentSigningPageViewV2 = () => {
             <div className="flex flex-col items-center justify-center p-2 sm:mt-4 sm:p-4">
               {currentEnvelopeItem ? (
                 <PDFViewerKonvaLazy
-                  renderer="signing"
                   key={currentEnvelopeItem.id}
+                  documentDataId={currentEnvelopeItem.documentDataId}
                   customPageRenderer={EnvelopeSignerPageRenderer}
                 />
               ) : (

apps/remix/app/components/general/document-signing/envelope-signing-provider.tsx

@@ -13,7 +13,6 @@ import { prop, sortBy } from 'remeda';
 import { isBase64Image } from '@documenso/lib/constants/signatures';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import type { EnvelopeForSigningResponse } from '@documenso/lib/server-only/envelope/get-envelope-for-recipient-signing';
-import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import {
   isFieldUnsignedAndRequired,
   isRequiredField,
@@ -52,11 +51,7 @@ export type EnvelopeSigningContextValue = {
   setSelectedAssistantRecipientId: (_value: number | null) => void;
   selectedAssistantRecipient: EnvelopeForSigningResponse['envelope']['recipients'][number] | null;
 
-  signField: (
-    _fieldId: number,
-    _value: TSignEnvelopeFieldValue,
-    authOptions?: TRecipientActionAuth,
-  ) => Promise<void>;
+  signField: (_fieldId: number, _value: TSignEnvelopeFieldValue) => Promise<void>;
 };
 
 const EnvelopeSigningContext = createContext<EnvelopeSigningContextValue | null>(null);
@@ -289,11 +284,9 @@ export const EnvelopeSigningProvider = ({
       : null;
   }, [envelope.documentMeta?.signingOrder, envelope.recipients, recipient.id]);
 
-  const signField = async (
-    fieldId: number,
-    fieldValue: TSignEnvelopeFieldValue,
-    authOptions?: TRecipientActionAuth,
-  ) => {
+  const signField = async (fieldId: number, fieldValue: TSignEnvelopeFieldValue) => {
+    console.log('insertField', fieldId, fieldValue);
+
     // Set the field locally for direct templates.
     if (isDirectTemplate) {
       handleDirectTemplateFieldInsertion(fieldId, fieldValue);
@@ -304,7 +297,7 @@ export const EnvelopeSigningProvider = ({
       token: envelopeData.recipient.token,
       fieldId,
       fieldValue,
-      authOptions,
+      authOptions: undefined,
     });
   };
 

apps/remix/app/components/general/document/document-certificate-qr-view.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import { type DocumentData, DocumentStatus, type EnvelopeItem } from '@prisma/client';
-import { DownloadIcon } from 'lucide-react';
+import type { DocumentData, EnvelopeItem } from '@prisma/client';
 import { DateTime } from 'luxon';
 
 import {
@@ -23,10 +22,9 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 
-import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
-
 import { EnvelopeRendererFileSelector } from '../envelope-editor/envelope-file-selector';
 import EnvelopeGenericPageRenderer from '../envelope-editor/envelope-generic-page-renderer';
+import { ShareDocumentDownloadButton } from '../share-document-download-button';
 
 export type DocumentCertificateQRViewProps = {
   documentId: number;
@@ -36,7 +34,6 @@ export type DocumentCertificateQRViewProps = {
   documentTeamUrl: string;
   recipientCount?: number;
   completedDate?: Date;
-  token: string;
 };
 
 export const DocumentCertificateQRView = ({
@@ -47,7 +44,6 @@ export const DocumentCertificateQRView = ({
   documentTeamUrl,
   recipientCount = 0,
   completedDate,
-  token,
 }: DocumentCertificateQRViewProps) => {
   const { data: documentViaUser } = trpc.document.get.useQuery({
     documentId,
@@ -100,12 +96,11 @@ export const DocumentCertificateQRView = ({
       )}
 
       {internalVersion === 2 ? (
-        <EnvelopeRenderProvider envelope={{ envelopeItems }} token={token}>
+        <EnvelopeRenderProvider envelope={{ envelopeItems }}>
           <DocumentCertificateQrV2
             title={title}
             recipientCount={recipientCount}
             formattedDate={formattedDate}
-            token={token}
           />
         </EnvelopeRenderProvider>
       ) : (
@@ -124,27 +119,14 @@ export const DocumentCertificateQRView = ({
               </div>
             </div>
 
-            <EnvelopeDownloadDialog
-              envelopeId={envelopeItems[0].envelopeId}
-              envelopeStatus={DocumentStatus.COMPLETED}
-              envelopeItems={envelopeItems}
-              token={token}
-              trigger={
-                <Button type="button" variant="outline" className="flex-1">
-                  <DownloadIcon className="mr-2 h-5 w-5" />
-                  <Trans>Download</Trans>
-                </Button>
-              }
+            <ShareDocumentDownloadButton
+              title={title}
+              documentData={envelopeItems[0].documentData}
             />
           </div>
 
           <div className="mt-12 w-full">
-            <PDFViewer
-              key={envelopeItems[0].id}
-              envelopeItem={envelopeItems[0]}
-              token={token}
-              version="signed"
-            />
+            <PDFViewer key={envelopeItems[0].id} documentData={envelopeItems[0].documentData} />
           </div>
         </>
       )}
@@ -156,16 +138,14 @@ type DocumentCertificateQrV2Props = {
   title: string;
   recipientCount: number;
   formattedDate: string;
-  token: string;
 };
 
 const DocumentCertificateQrV2 = ({
   title,
   recipientCount,
   formattedDate,
-  token,
 }: DocumentCertificateQrV2Props) => {
-  const { currentEnvelopeItem, envelopeItems } = useCurrentEnvelopeRender();
+  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
 
   return (
     <div className="flex min-h-screen flex-col items-start">
@@ -183,24 +163,18 @@ const DocumentCertificateQrV2 = ({
           </div>
         </div>
 
-        <EnvelopeDownloadDialog
-          envelopeId={envelopeItems[0].envelopeId}
-          envelopeStatus={DocumentStatus.COMPLETED}
-          envelopeItems={envelopeItems}
-          token={token}
-          trigger={
-            <Button type="button" variant="outline" className="flex-1">
-              <DownloadIcon className="mr-2 h-5 w-5" />
-              <Trans>Download</Trans>
-            </Button>
-          }
-        />
+        {currentEnvelopeItem && (
+          <ShareDocumentDownloadButton
+            title={title}
+            documentData={currentEnvelopeItem.documentData}
+          />
+        )}
       </div>
 
       <div className="mt-12 w-full">
         <EnvelopeRendererFileSelector className="mb-4 p-0" fields={[]} secondaryOverride={''} />
 
-        <PDFViewerKonvaLazy renderer="preview" customPageRenderer={EnvelopeGenericPageRenderer} />
+        <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
       </div>
     </div>
   );

apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx

@@ -16,9 +16,9 @@ import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/l
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
-import type { TCreateDocumentPayloadSchema } from '@documenso/trpc/server/document-router/create-document.types';
 import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -62,18 +62,14 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon
     try {
       setIsLoading(true);
 
-      const payload = {
+      const response = await putPdfFile(file);
+
+      const { legacyDocumentId: id } = await createDocument({
         title: file.name,
-        timezone: userTimezone,
+        documentDataId: response.id,
+        timezone: userTimezone, // Note: When migrating to v2 document upload remember to pass this through as a 'userTimezone' field.
         folderId: folderId ?? undefined,
-      } satisfies TCreateDocumentPayloadSchema;
-
-      const formData = new FormData();
-
-      formData.append('payload', JSON.stringify(payload));
-      formData.append('file', file);
-
-      const { envelopeId: id } = await createDocument(formData);
+      });
 
       void refreshLimits();
 

apps/remix/app/components/general/document/document-edit-form.tsx

@@ -441,10 +441,9 @@ export const DocumentEditForm = ({
       >
         <CardContent className="p-2">
           <PDFViewer
-            key={document.envelopeItems[0].id}
-            envelopeItem={document.envelopeItems[0]}
-            token={undefined}
-            version="signed"
+            key={document.documentData.id}
+            documentData={document.documentData}
+            document={document}
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

apps/remix/app/components/general/document/document-page-view-button.tsx

@@ -1,14 +1,18 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
 import { CheckCircle, Download, EyeIcon, Pencil } from 'lucide-react';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 
@@ -19,6 +23,9 @@ export type DocumentPageViewButtonProps = {
 export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps) => {
   const { user } = useSession();
 
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
   const recipient = envelope.recipients.find((recipient) => recipient.email === user.email);
 
   const isRecipient = !!recipient;
@@ -30,6 +37,25 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
   const documentsPath = formatDocumentsPath(envelope.team.url);
   const formatPath = `${documentsPath}/${envelope.id}/edit`;
 
+  const onDownloadClick = async () => {
+    try {
+      // Todo; Envelopes - Support multiple items
+      const envelopeItem = envelope.envelopeItems[0];
+
+      if (!envelopeItem.documentData) {
+        throw new Error('No document available');
+      }
+
+      await downloadPDF({ documentData: envelopeItem.documentData, fileName: envelopeItem.title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
   return match({
     isRecipient,
     isPending,
@@ -69,7 +95,7 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
         </Link>
       </Button>
     ))
-    .with({ isComplete: true }, () => (
+    .with({ isComplete: true, internalVersion: 2 }, () => (
       <EnvelopeDownloadDialog
         envelopeId={envelope.id}
         envelopeStatus={envelope.status}
@@ -83,5 +109,11 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
         }
       />
     ))
+    .with({ isComplete: true }, () => (
+      <Button className="w-full" onClick={onDownloadClick}>
+        <Download className="-ml-1 mr-2 inline h-4 w-4" />
+        <Trans>Download</Trans>
+      </Button>
+    ))
     .otherwise(() => null);
 };

apps/remix/app/components/general/document/document-page-view-dropdown.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus } from '@prisma/client';
@@ -15,11 +16,13 @@ import {
 } from 'lucide-react';
 import { Link, useNavigate } from 'react-router';
 
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
   DropdownMenu,
@@ -64,6 +67,64 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
 
   const documentsPath = formatDocumentsPath(team.url);
 
+  const onDownloadClick = async () => {
+    try {
+      const documentWithData = await trpcClient.document.get.query(
+        {
+          documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+        },
+        {
+          context: {
+            teamId: team?.id?.toString(),
+          },
+        },
+      );
+
+      const documentData = documentWithData?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: envelope.title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onDownloadOriginalClick = async () => {
+    try {
+      const documentWithData = await trpcClient.document.get.query(
+        {
+          documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+        },
+        {
+          context: {
+            teamId: team?.id?.toString(),
+          },
+        },
+      );
+
+      const documentData = documentWithData?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: envelope.title, version: 'original' });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
   const nonSignedRecipients = envelope.recipients.filter((item) => item.signingStatus !== 'SIGNED');
 
   return (
@@ -86,20 +147,36 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
           </DropdownMenuItem>
         )}
 
-        <EnvelopeDownloadDialog
-          envelopeId={envelope.id}
-          envelopeStatus={envelope.status}
-          token={recipient?.token}
-          envelopeItems={envelope.envelopeItems}
-          trigger={
-            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
-              <div>
+        {envelope.internalVersion === 2 ? (
+          <EnvelopeDownloadDialog
+            envelopeId={envelope.id}
+            envelopeStatus={envelope.status}
+            token={recipient?.token}
+            envelopeItems={envelope.envelopeItems}
+            trigger={
+              <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+                <div>
+                  <Download className="mr-2 h-4 w-4" />
+                  <Trans>Download</Trans>
+                </div>
+              </DropdownMenuItem>
+            }
+          />
+        ) : (
+          <>
+            {isComplete && (
+              <DropdownMenuItem onClick={onDownloadClick}>
                 <Download className="mr-2 h-4 w-4" />
                 <Trans>Download</Trans>
-              </div>
+              </DropdownMenuItem>
+            )}
+
+            <DropdownMenuItem onClick={onDownloadOriginalClick}>
+              <Download className="mr-2 h-4 w-4" />
+              <Trans>Download Original</Trans>
             </DropdownMenuItem>
-          }
-        />
+          </>
+        )}
 
         <DropdownMenuItem asChild>
           <Link to={`${documentsPath}/${envelope.id}/logs`}>
@@ -173,8 +250,7 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
 
       {isDuplicateDialogOpen && (
         <DocumentDuplicateDialog
-          id={envelope.id}
-          token={recipient?.token}
+          id={mapSecondaryIdToDocumentId(envelope.secondaryId)}
           open={isDuplicateDialogOpen}
           onOpenChange={setDuplicateDialogOpen}
         />

apps/remix/app/components/general/document/document-upload-button.tsx

@@ -13,9 +13,9 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
-import type { TCreateDocumentPayloadSchema } from '@documenso/trpc/server/document-router/create-document.types';
 import { cn } from '@documenso/ui/lib/utils';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-upload';
 import {
@@ -73,18 +73,14 @@ export const DocumentUploadButton = ({ className }: DocumentUploadButtonProps) =
     try {
       setIsLoading(true);
 
-      const payload = {
+      const response = await putPdfFile(file);
+
+      const { legacyDocumentId: id } = await createDocument({
         title: file.name,
+        documentDataId: response.id,
         timezone: userTimezone,
         folderId: folderId ?? undefined,
-      } satisfies TCreateDocumentPayloadSchema;
-
-      const formData = new FormData();
-
-      formData.append('payload', JSON.stringify(payload));
-      formData.append('file', file);
-
-      const { envelopeId: id } = await createDocument(formData);
+      });
 
       void refreshLimits();
 

apps/remix/app/components/general/document/envelope-upload-button.tsx

@@ -14,9 +14,9 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
-import type { TCreateEnvelopePayload } from '@documenso/trpc/server/envelope-router/create-envelope.types';
 import { cn } from '@documenso/ui/lib/utils';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-upload';
 import {
@@ -78,24 +78,35 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
     try {
       setIsLoading(true);
 
-      const payload = {
+      const result = await Promise.all(
+        files.map(async (file) => {
+          try {
+            const response = await putPdfFile(file);
+
+            return {
+              title: file.name,
+              documentDataId: response.id,
+            };
+          } catch (err) {
+            console.error(err);
+            throw new Error('Failed to upload document');
+          }
+        }),
+      );
+
+      const envelopeItemsToCreate = result.filter(
+        (item): item is { title: string; documentDataId: string } => item !== undefined,
+      );
+
+      const { id } = await createEnvelope({
         folderId,
         type,
         title: files[0].name,
+        items: envelopeItemsToCreate,
         meta: {
           timezone: userTimezone,
         },
-      } satisfies TCreateEnvelopePayload;
-
-      const formData = new FormData();
-
-      formData.append('payload', JSON.stringify(payload));
-
-      for (const file of files) {
-        formData.append('files', file);
-      }
-
-      const { id } = await createEnvelope(formData).catch((error) => {
+      }).catch((error) => {
         console.error(error);
 
         throw error;

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx

@@ -11,6 +11,10 @@ import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fi
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import {
+  registerPageCanvas,
+  unregisterPageCanvas,
+} from '@documenso/lib/client-only/utils/page-canvas-registry';
 import { FIELD_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
 import {
   MIN_FIELD_HEIGHT_PX,
@@ -26,7 +30,7 @@ import { fieldButtonList } from './envelope-editor-fields-drag-drop';
 export default function EnvelopeEditorFieldsPageRenderer() {
   const { t, i18n } = useLingui();
   const { envelope, editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
-  const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
+  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
 
   const interactiveTransformer = useRef<Transformer | null>(null);
 
@@ -56,6 +60,15 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     [editorFields.localFields, pageContext.pageNumber],
   );
 
+  /**
+   * Cleanup: Unregister canvas when component unmounts
+   */
+  useEffect(() => {
+    return () => {
+      unregisterPageCanvas(pageContext.pageNumber);
+    };
+  }, [pageContext.pageNumber]);
+
   const handleResizeOrMove = (event: KonvaEventObject<Event>) => {
     const { current: container } = canvasElement;
 
@@ -103,6 +116,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       fieldUpdates.height = fieldPageHeight;
     }
 
+    // Todo: envelopes Use id
     editorFields.updateFieldByFormId(fieldFormId, fieldUpdates);
 
     // Select the field if it is not already selected.
@@ -113,7 +127,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     pageLayer.current?.batchDraw();
   };
 
-  const unsafeRenderFieldOnLayer = (field: TLocalField) => {
+  const renderFieldOnLayer = (field: TLocalField) => {
     if (!pageLayer.current) {
       return;
     }
@@ -159,15 +173,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     fieldGroup.on('dragend', handleResizeOrMove);
   };
 
-  const renderFieldOnLayer = (field: TLocalField) => {
-    try {
-      unsafeRenderFieldOnLayer(field);
-    } catch (err) {
-      console.error(err);
-      setRenderError(true);
-    }
-  };
-
   /**
    * Initialize the Konva page canvas and all fields and interactions.
    */
@@ -222,6 +227,15 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     currentStage.on('transformend', () => setIsFieldChanging(false));
 
     currentPageLayer.batchDraw();
+
+    // Register this page's canvas references now that everything is initialized
+    if (canvasElement.current && currentStage) {
+      registerPageCanvas({
+        pageNumber: pageContext.pageNumber,
+        pdfCanvas: canvasElement.current,
+        konvaStage: currentStage,
+      });
+    }
   };
 
   /**

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx

@@ -1,4 +1,4 @@
-import { lazy, useEffect, useMemo } from 'react';
+import { lazy, useEffect, useMemo, useState } from 'react';
 
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
@@ -11,6 +11,8 @@ import { match } from 'ts-pattern';
 
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { getPageCanvasRefs } from '@documenso/lib/client-only/utils/page-canvas-registry';
+import type { TDetectedFormField } from '@documenso/lib/types/ai';
 import type {
   TCheckboxFieldMeta,
   TDateFieldMeta,
@@ -24,13 +26,15 @@ import type {
   TSignatureFieldMeta,
   TTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
+import { FIELD_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
 import { Separator } from '@documenso/ui/primitives/separator';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { EditorFieldCheckboxForm } from '~/components/forms/editor/editor-field-checkbox-form';
 import { EditorFieldDateForm } from '~/components/forms/editor/editor-field-date-form';
@@ -50,6 +54,136 @@ const EnvelopeEditorFieldsPageRenderer = lazy(
   async () => import('./envelope-editor-fields-page-renderer'),
 );
 
+/**
+ * Enforces minimum field dimensions and centers the field when expanding to meet minimums.
+ *
+ * AI often detects form lines as very thin fields (0.2-0.5% height). This function ensures
+ * fields meet minimum usability requirements by expanding them to at least 30px height and
+ * 36px width, while keeping them centered on their original position.
+ *
+ * @param params - Field dimensions and page size
+ * @param params.positionX - Field X position as percentage (0-100)
+ * @param params.positionY - Field Y position as percentage (0-100)
+ * @param params.width - Field width as percentage (0-100)
+ * @param params.height - Field height as percentage (0-100)
+ * @param params.pageWidth - Page width in pixels
+ * @param params.pageHeight - Page height in pixels
+ * @returns Adjusted field dimensions with minimums enforced and centered
+ *
+ * @example
+ * // AI detected a thin line: 0.3% height
+ * const adjusted = enforceMinimumFieldDimensions({
+ *   positionX: 20, positionY: 50, width: 30, height: 0.3,
+ *   pageWidth: 800, pageHeight: 1100
+ * });
+ * // Result: height expanded to ~2.7% (30px), centered on original position
+ */
+const enforceMinimumFieldDimensions = (params: {
+  positionX: number;
+  positionY: number;
+  width: number;
+  height: number;
+  pageWidth: number;
+  pageHeight: number;
+}): {
+  positionX: number;
+  positionY: number;
+  width: number;
+  height: number;
+} => {
+  const MIN_HEIGHT_PX = 30;
+  const MIN_WIDTH_PX = 36;
+
+  // Convert percentage to pixels to check against minimums
+  const widthPx = (params.width / 100) * params.pageWidth;
+  const heightPx = (params.height / 100) * params.pageHeight;
+
+  let adjustedWidth = params.width;
+  let adjustedHeight = params.height;
+  let adjustedPositionX = params.positionX;
+  let adjustedPositionY = params.positionY;
+
+  if (widthPx < MIN_WIDTH_PX) {
+    const centerXPx = (params.positionX / 100) * params.pageWidth + widthPx / 2;
+    adjustedWidth = (MIN_WIDTH_PX / params.pageWidth) * 100;
+    adjustedPositionX = ((centerXPx - MIN_WIDTH_PX / 2) / params.pageWidth) * 100;
+
+    if (adjustedPositionX < 0) {
+      adjustedPositionX = 0;
+    } else if (adjustedPositionX + adjustedWidth > 100) {
+      adjustedPositionX = 100 - adjustedWidth;
+    }
+  }
+
+  if (heightPx < MIN_HEIGHT_PX) {
+    const centerYPx = (params.positionY / 100) * params.pageHeight + heightPx / 2;
+    adjustedHeight = (MIN_HEIGHT_PX / params.pageHeight) * 100;
+
+    adjustedPositionY = ((centerYPx - MIN_HEIGHT_PX / 2) / params.pageHeight) * 100;
+
+    if (adjustedPositionY < 0) {
+      adjustedPositionY = 0;
+    } else if (adjustedPositionY + adjustedHeight > 100) {
+      adjustedPositionY = 100 - adjustedHeight;
+    }
+  }
+
+  return {
+    positionX: adjustedPositionX,
+    positionY: adjustedPositionY,
+    width: adjustedWidth,
+    height: adjustedHeight,
+  };
+};
+
+const processAllPagesWithAI = async (params: {
+  documentDataId: string;
+  onProgress: (current: number, total: number) => void;
+}): Promise<{
+  fieldsPerPage: Map<number, TDetectedFormField[]>;
+  errors: Map<number, Error>;
+}> => {
+  const { documentDataId, onProgress } = params;
+  const fieldsPerPage = new Map<number, TDetectedFormField[]>();
+  const errors = new Map<number, Error>();
+
+  try {
+    // Make single API call to process all pages server-side
+    onProgress(0, 1);
+
+    const response = await fetch('/api/ai/detect-form-fields', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ documentId: documentDataId }),
+      credentials: 'include',
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`AI detection failed: ${response.statusText} - ${errorText}`);
+    }
+
+    const detectedFields: TDetectedFormField[] = await response.json();
+
+    // Group fields by page number
+    for (const field of detectedFields) {
+      if (!fieldsPerPage.has(field.pageNumber)) {
+        fieldsPerPage.set(field.pageNumber, []);
+      }
+      fieldsPerPage.get(field.pageNumber)!.push(field);
+    }
+
+    onProgress(1, 1);
+  } catch (error) {
+    // If request fails, treat it as error for all pages
+    errors.set(0, error instanceof Error ? error : new Error(String(error)));
+  }
+
+  return { fieldsPerPage, errors };
+};
+
 const FieldSettingsTypeTranslations: Record<FieldType, MessageDescriptor> = {
   [FieldType.SIGNATURE]: msg`Signature Settings`,
   [FieldType.FREE_SIGNATURE]: msg`Free Signature Settings`,
@@ -70,6 +204,13 @@ export const EnvelopeEditorFieldsPage = () => {
   const { currentEnvelopeItem } = useCurrentEnvelopeRender();
 
   const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [isAutoAddingFields, setIsAutoAddingFields] = useState(false);
+  const [processingProgress, setProcessingProgress] = useState<{
+    current: number;
+    total: number;
+  } | null>(null);
 
   const selectedField = useMemo(
     () => structuredClone(editorFields.selectedField),
@@ -108,39 +249,23 @@ export const EnvelopeEditorFieldsPage = () => {
 
   return (
     <div className="relative flex h-full">
-      <div className="flex w-full flex-col overflow-y-auto">
+      <div className="relative flex w-full flex-col overflow-y-auto">
         {/* Horizontal envelope item selector */}
+        {isAutoAddingFields && (
+          <>
+            <div className="edge-glow edge-glow-top pointer-events-none fixed left-0 right-0 top-0 z-20 h-16" />
+            <div className="edge-glow edge-glow-right pointer-events-none fixed bottom-0 right-0 top-0 z-20 w-16" />
+            <div className="edge-glow edge-glow-bottom pointer-events-none fixed bottom-0 left-0 right-0 z-20 h-16" />
+            <div className="edge-glow edge-glow-left pointer-events-none fixed bottom-0 left-0 top-0 z-20 w-16" />
+          </>
+        )}
+
         <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
         {/* Document View */}
-        <div className="mt-4 flex flex-col items-center justify-center">
-          {envelope.recipients.length === 0 && (
-            <Alert
-              variant="neutral"
-              className="border-border bg-background mb-4 flex max-w-[800px] flex-row items-center justify-between space-y-0 rounded-sm border"
-            >
-              <div className="flex flex-col gap-1">
-                <AlertTitle>
-                  <Trans>Missing Recipients</Trans>
-                </AlertTitle>
-                <AlertDescription>
-                  <Trans>You need at least one recipient to add fields</Trans>
-                </AlertDescription>
-              </div>
-
-              <Button asChild variant="outline">
-                <Link to={`${relativePath.editorPath}`}>
-                  <Trans>Add Recipients</Trans>
-                </Link>
-              </Button>
-            </Alert>
-          )}
-
+        <div className="mt-4 flex h-full justify-center p-4">
           {currentEnvelopeItem !== null ? (
-            <PDFViewerKonvaLazy
-              renderer="editor"
-              customPageRenderer={EnvelopeEditorFieldsPageRenderer}
-            />
+            <PDFViewerKonvaLazy customPageRenderer={EnvelopeEditorFieldsPageRenderer} />
           ) : (
             <div className="flex flex-col items-center justify-center py-32">
               <FileTextIcon className="text-muted-foreground h-10 w-10" />
@@ -156,7 +281,7 @@ export const EnvelopeEditorFieldsPage = () => {
       </div>
 
       {/* Right Section - Form Fields Panel */}
-      {currentEnvelopeItem && envelope.recipients.length > 0 && (
+      {currentEnvelopeItem && (
         <div className="bg-background border-border sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l py-4">
           {/* Recipient selector section. */}
           <section className="px-4">
@@ -164,15 +289,29 @@ export const EnvelopeEditorFieldsPage = () => {
               <Trans>Selected Recipient</Trans>
             </h3>
 
-            <RecipientSelector
-              selectedRecipient={editorFields.selectedRecipient}
-              onSelectedRecipientChange={(recipient) =>
-                editorFields.setSelectedRecipient(recipient.id)
-              }
-              recipients={envelope.recipients}
-              className="w-full"
-              align="end"
-            />
+            {envelope.recipients.length === 0 ? (
+              <Alert variant="warning">
+                <AlertDescription className="flex flex-col gap-2">
+                  <Trans>You need at least one recipient to add fields</Trans>
+
+                  <Link to={`${relativePath.editorPath}`} className="text-sm">
+                    <p>
+                      <Trans>Click here to add a recipient</Trans>
+                    </p>
+                  </Link>
+                </AlertDescription>
+              </Alert>
+            ) : (
+              <RecipientSelector
+                selectedRecipient={editorFields.selectedRecipient}
+                onSelectedRecipientChange={(recipient) =>
+                  editorFields.setSelectedRecipient(recipient.id)
+                }
+                recipients={envelope.recipients}
+                className="w-full"
+                align="end"
+              />
+            )}
 
             {editorFields.selectedRecipient &&
               !canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields) && (
@@ -199,6 +338,141 @@ export const EnvelopeEditorFieldsPage = () => {
               selectedRecipientId={editorFields.selectedRecipient?.id ?? null}
               selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null}
             />
+
+            <Button
+              className="mt-4 w-full"
+              variant="outline"
+              disabled={isAutoAddingFields}
+              onClick={async () => {
+                setIsAutoAddingFields(true);
+                setProcessingProgress(null);
+
+                try {
+                  if (!editorFields.selectedRecipient || !currentEnvelopeItem) {
+                    toast({
+                      title: t`Warning`,
+                      description: t`Please select a recipient before adding fields.`,
+                      variant: 'destructive',
+                    });
+                    return;
+                  }
+
+                  if (!currentEnvelopeItem.documentDataId) {
+                    toast({
+                      title: t`Error`,
+                      description: t`Document data not found. Please try reloading the page.`,
+                      variant: 'destructive',
+                    });
+                    return;
+                  }
+
+                  const { fieldsPerPage, errors } = await processAllPagesWithAI({
+                    documentDataId: currentEnvelopeItem.documentDataId,
+                    onProgress: (current, total) => {
+                      setProcessingProgress({ current, total });
+                    },
+                  });
+
+                  let totalAdded = 0;
+                  for (const [pageNumber, detectedFields] of fieldsPerPage.entries()) {
+                    const pageCanvasRefs = getPageCanvasRefs(pageNumber);
+
+                    for (const detected of detectedFields) {
+                      const [ymin, xmin, ymax, xmax] = detected.boundingBox;
+                      let positionX = (xmin / 1000) * 100;
+                      let positionY = (ymin / 1000) * 100;
+                      let width = ((xmax - xmin) / 1000) * 100;
+                      let height = ((ymax - ymin) / 1000) * 100;
+
+                      if (pageCanvasRefs) {
+                        const adjusted = enforceMinimumFieldDimensions({
+                          positionX,
+                          positionY,
+                          width,
+                          height,
+                          pageWidth: pageCanvasRefs.pdfCanvas.width,
+                          pageHeight: pageCanvasRefs.pdfCanvas.height,
+                        });
+
+                        positionX = adjusted.positionX;
+                        positionY = adjusted.positionY;
+                        width = adjusted.width;
+                        height = adjusted.height;
+                      }
+
+                      const fieldType = detected.label as FieldType;
+
+                      try {
+                        editorFields.addField({
+                          envelopeItemId: currentEnvelopeItem.id,
+                          page: pageNumber,
+                          type: fieldType,
+                          positionX,
+                          positionY,
+                          width,
+                          height,
+                          recipientId: editorFields.selectedRecipient.id,
+                          fieldMeta: structuredClone(FIELD_META_DEFAULT_VALUES[fieldType]),
+                        });
+                        totalAdded++;
+                      } catch (error) {
+                        console.error(`Failed to add field on page ${pageNumber}:`, error);
+                      }
+                    }
+                  }
+
+                  const successfulPages = fieldsPerPage.size;
+                  const failedPages = errors.size;
+
+                  if (totalAdded > 0) {
+                    let description = t`Added ${totalAdded} fields`;
+                    if (fieldsPerPage.size > 1) {
+                      description = t`Added ${totalAdded} fields across ${successfulPages} pages`;
+                    }
+                    if (failedPages > 0) {
+                      description = t`Added ${totalAdded} fields across ${successfulPages} pages. ${failedPages} pages failed.`;
+                    }
+
+                    toast({
+                      title: t`Success`,
+                      description,
+                    });
+                  } else if (failedPages > 0) {
+                    toast({
+                      title: t`Error`,
+                      description: t`Failed to detect fields on ${failedPages} pages. Please try again.`,
+                      variant: 'destructive',
+                    });
+                  } else {
+                    toast({
+                      title: t`Info`,
+                      description: t`No fields were detected in the document`,
+                    });
+                  }
+                } catch (error) {
+                  toast({
+                    title: t`Error`,
+                    description: t`An unexpected error occurred while processing pages.`,
+                    variant: 'destructive',
+                  });
+                } finally {
+                  setIsAutoAddingFields(false);
+                  setProcessingProgress(null);
+                }
+              }}
+            >
+              {isAutoAddingFields ? (
+                processingProgress ? (
+                  <Trans>
+                    Processing page {processingProgress.current} of {processingProgress.total}...
+                  </Trans>
+                ) : (
+                  <Trans>Processing...</Trans>
+                )
+              ) : (
+                <Trans>Auto add fields</Trans>
+              )}
+            </Button>
           </section>
 
           {/* Field details section. */}

apps/remix/app/components/general/envelope-editor/envelope-editor-preview-page.tsx

@@ -1,20 +1,10 @@
-import { lazy, useEffect, useMemo, useState } from 'react';
+import { lazy, useEffect, useState } from 'react';
 
-import { faker } from '@faker-js/faker/locale/en';
 import { Trans } from '@lingui/react/macro';
-import { FieldType } from '@prisma/client';
-import { FileTextIcon } from 'lucide-react';
-import { match } from 'ts-pattern';
+import { ConstructionIcon, FileTextIcon } from 'lucide-react';
 
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import {
-  EnvelopeRenderProvider,
-  useCurrentEnvelopeRender,
-} from '@documenso/lib/client-only/providers/envelope-render-provider';
-import { ZFieldAndMetaSchema } from '@documenso/lib/types/field-meta';
-import { extractFieldInsertionValues } from '@documenso/lib/utils/envelope-signing';
-import { toCheckboxCustomText } from '@documenso/lib/utils/fields';
-import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
@@ -25,169 +15,15 @@ import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 
 const EnvelopeGenericPageRenderer = lazy(async () => import('./envelope-generic-page-renderer'));
 
-// Todo: Envelopes - Dynamically import faker
 export const EnvelopeEditorPreviewPage = () => {
   const { envelope, editorFields } = useCurrentEnvelopeEditor();
 
-  const { currentEnvelopeItem, fields } = useCurrentEnvelopeRender();
+  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
 
   const [selectedPreviewMode, setSelectedPreviewMode] = useState<'recipient' | 'signed'>(
     'recipient',
   );
 
-  const fieldsWithPlaceholders = useMemo(() => {
-    return fields.map((field) => {
-      const fieldMeta = ZFieldAndMetaSchema.parse(field);
-
-      const recipient = envelope.recipients.find((recipient) => recipient.id === field.recipientId);
-
-      if (!recipient) {
-        throw new Error('Recipient not found');
-      }
-
-      faker.seed(recipient.id);
-
-      const recipientName = recipient.name || faker.person.fullName();
-      const recipientEmail = recipient.email || faker.internet.email();
-
-      faker.seed(recipient.id + field.id);
-
-      return {
-        ...field,
-        inserted: true,
-        ...match(fieldMeta)
-          .with({ type: FieldType.TEXT }, ({ fieldMeta }) => {
-            let text = fieldMeta?.text || faker.lorem.words(5);
-
-            if (fieldMeta?.characterLimit) {
-              text = text.slice(0, fieldMeta?.characterLimit);
-            }
-
-            return {
-              customText: text,
-            };
-          })
-          .with({ type: FieldType.NUMBER }, ({ fieldMeta }) => {
-            let number = fieldMeta?.value ?? '';
-
-            if (number === '') {
-              number = faker.number
-                .int({
-                  min: fieldMeta?.minValue ?? 0,
-                  max: fieldMeta?.maxValue ?? 1000,
-                })
-                .toString();
-            }
-
-            return {
-              customText: number,
-            };
-          })
-          .with({ type: FieldType.DATE }, () => {
-            const date = extractFieldInsertionValues({
-              fieldValue: {
-                type: FieldType.DATE,
-                value: true,
-              },
-              field,
-              documentMeta: envelope.documentMeta,
-            });
-
-            return {
-              customText: date.customText,
-            };
-          })
-          .with({ type: FieldType.EMAIL }, () => {
-            return {
-              customText: recipientEmail,
-            };
-          })
-          .with({ type: FieldType.NAME }, () => {
-            return {
-              customText: recipientName,
-            };
-          })
-          .with({ type: FieldType.INITIALS }, () => {
-            return {
-              customText: extractInitials(recipientName),
-            };
-          })
-          .with({ type: FieldType.RADIO }, ({ fieldMeta }) => {
-            const values = fieldMeta?.values ?? [];
-
-            if (values.length === 0) {
-              return '';
-            }
-
-            let customText = '';
-
-            const preselectedValue = values.findIndex((value) => value.checked);
-
-            if (preselectedValue !== -1) {
-              customText = preselectedValue.toString();
-            } else {
-              const randomIndex = faker.number.int({ min: 0, max: values.length - 1 });
-              customText = randomIndex.toString();
-            }
-
-            return {
-              customText,
-            };
-          })
-          .with({ type: FieldType.CHECKBOX }, ({ fieldMeta }) => {
-            let checkedValues: number[] = [];
-
-            const values = fieldMeta?.values ?? [];
-
-            values.forEach((value, index) => {
-              if (value.checked) {
-                checkedValues.push(index);
-              }
-            });
-
-            if (checkedValues.length === 0 && values.length > 0) {
-              const numberOfValues = fieldMeta?.validationLength || 1;
-
-              checkedValues = Array.from({ length: numberOfValues }, (_, index) => index);
-            }
-
-            return {
-              customText: toCheckboxCustomText(checkedValues),
-            };
-          })
-          .with({ type: FieldType.DROPDOWN }, ({ fieldMeta }) => {
-            const values = fieldMeta?.values ?? [];
-
-            let customText = fieldMeta?.defaultValue || '';
-
-            if (!customText && values.length > 0) {
-              const randomIndex = faker.number.int({ min: 0, max: values.length - 1 });
-              customText = values[randomIndex].value;
-            }
-
-            return {
-              customText,
-            };
-          })
-          .with({ type: FieldType.SIGNATURE }, () => {
-            return {
-              customText: '',
-              signature: {
-                signatureImageAsBase64: '',
-                typedSignature: recipientName,
-              },
-            };
-          })
-          .with({ type: FieldType.FREE_SIGNATURE }, () => {
-            return {
-              customText: '',
-            };
-          })
-          .exhaustive(),
-      };
-    });
-  }, [fields, envelope, envelope.recipients, envelope.documentMeta]);
-
   /**
    * Set the selected recipient to the first recipient in the envelope.
    */
@@ -195,38 +31,40 @@ export const EnvelopeEditorPreviewPage = () => {
     editorFields.setSelectedRecipient(envelope.recipients[0]?.id ?? null);
   }, []);
 
-  // Override the parent renderer provider so we can inject custom fields.
   return (
-    <EnvelopeRenderProvider
-      envelope={envelope}
-      token={undefined}
-      fields={fieldsWithPlaceholders}
-      recipientIds={envelope.recipients.map((recipient) => recipient.id)}
-      overrideSettings={{
-        mode: 'export',
-      }}
-    >
-      <div className="relative flex h-full">
-        <div className="flex w-full flex-col overflow-y-auto">
-          {/* Horizontal envelope item selector */}
-          <EnvelopeRendererFileSelector fields={editorFields.localFields} />
+    <div className="relative flex h-full">
+      <div className="flex w-full flex-col overflow-y-auto">
+        {/* Horizontal envelope item selector */}
+        <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
-          {/* Document View */}
-          <div className="mt-4 flex flex-col items-center justify-center">
-            <Alert variant="warning" className="mb-4 max-w-[800px]">
-              <AlertTitle>
-                <Trans>Preview Mode</Trans>
-              </AlertTitle>
-              <AlertDescription>
-                <Trans>Preview what the signed document will look like with placeholder data</Trans>
-              </AlertDescription>
-            </Alert>
+        {/* Document View */}
+        <div className="mt-4 flex flex-col items-center justify-center">
+          <Alert variant="warning" className="mb-4 max-w-[800px]">
+            <AlertTitle>
+              <Trans>Preview Mode</Trans>
+            </AlertTitle>
+            <AlertDescription>
+              <Trans>Preview what the signed document will look like with placeholder data</Trans>
+            </AlertDescription>
+          </Alert>
 
+          {/* Coming soon section */}
+          <div className="border-border bg-card hover:bg-accent/10 flex w-full max-w-[800px] items-center gap-4 rounded-lg border p-4 transition-colors">
+            <div className="flex w-full flex-col items-center justify-center gap-2 py-32">
+              <ConstructionIcon className="text-muted-foreground h-10 w-10" />
+              <h3 className="text-foreground text-sm font-semibold">
+                <Trans>Coming soon</Trans>
+              </h3>
+              <p className="text-muted-foreground text-sm">
+                <Trans>This feature is coming soon</Trans>
+              </p>
+            </div>
+          </div>
+
+          {/* Todo: Envelopes - Remove div after preview mode is implemented */}
+          <div className="hidden">
             {currentEnvelopeItem !== null ? (
-              <PDFViewerKonvaLazy
-                renderer="editor"
-                customPageRenderer={EnvelopeGenericPageRenderer}
-              />
+              <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
             ) : (
               <div className="flex flex-col items-center justify-center py-32">
                 <FileTextIcon className="text-muted-foreground h-10 w-10" />
@@ -240,28 +78,27 @@ export const EnvelopeEditorPreviewPage = () => {
             )}
           </div>
         </div>
+      </div>
 
-        {/* Right Section - Form Fields Panel */}
-        {currentEnvelopeItem && false && (
-          <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l border-gray-200 bg-white py-4">
-            {/* Add fields section. */}
-            <section className="px-4">
-              {/* <h3 className="mb-2 text-sm font-semibold text-gray-900">
+      {/* Right Section - Form Fields Panel */}
+      {currentEnvelopeItem && false && (
+        <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l border-gray-200 bg-white py-4">
+          {/* Add fields section. */}
+          <section className="px-4">
+            {/* <h3 className="mb-2 text-sm font-semibold text-gray-900">
               <Trans>Preivew Mode</Trans>
             </h3> */}
 
-              <Alert variant="neutral">
-                <AlertTitle>
-                  <Trans>Preview Mode</Trans>
-                </AlertTitle>
-                <AlertDescription>
-                  <Trans>
-                    Preview what the signed document will look like with placeholder data
-                  </Trans>
-                </AlertDescription>
-              </Alert>
+            <Alert variant="neutral">
+              <AlertTitle>
+                <Trans>Preview Mode</Trans>
+              </AlertTitle>
+              <AlertDescription>
+                <Trans>Preview what the signed document will look like with placeholder data</Trans>
+              </AlertDescription>
+            </Alert>
 
-              {/* <Alert variant="neutral">
+            {/* <Alert variant="neutral">
               <RadioGroup
                 className="gap-y-1"
                 value={selectedPreviewMode}
@@ -300,37 +137,36 @@ export const EnvelopeEditorPreviewPage = () => {
             <div>Preview what a recipient will see</div>
 
             <div>Preview the signed document</div> */}
-            </section>
+          </section>
 
-            {false && (
-              <AnimateGenericFadeInOut key={selectedPreviewMode}>
-                {selectedPreviewMode === 'recipient' && (
-                  <>
-                    <Separator className="my-4" />
+          {false && (
+            <AnimateGenericFadeInOut key={selectedPreviewMode}>
+              {selectedPreviewMode === 'recipient' && (
+                <>
+                  <Separator className="my-4" />
 
-                    {/* Recipient selector section. */}
-                    <section className="px-4">
-                      <h3 className="mb-2 text-sm font-semibold text-gray-900">
-                        <Trans>Selected Recipient</Trans>
-                      </h3>
+                  {/* Recipient selector section. */}
+                  <section className="px-4">
+                    <h3 className="mb-2 text-sm font-semibold text-gray-900">
+                      <Trans>Selected Recipient</Trans>
+                    </h3>
 
-                      <RecipientSelector
-                        selectedRecipient={editorFields.selectedRecipient}
-                        onSelectedRecipientChange={(recipient) =>
-                          editorFields.setSelectedRecipient(recipient.id)
-                        }
-                        recipients={envelope.recipients}
-                        className="w-full"
-                        align="end"
-                      />
-                    </section>
-                  </>
-                )}
-              </AnimateGenericFadeInOut>
-            )}
-          </div>
-        )}
-      </div>
-    </EnvelopeRenderProvider>
+                    <RecipientSelector
+                      selectedRecipient={editorFields.selectedRecipient}
+                      onSelectedRecipientChange={(recipient) =>
+                        editorFields.setSelectedRecipient(recipient.id)
+                      }
+                      recipients={envelope.recipients}
+                      className="w-full"
+                      align="end"
+                    />
+                  </section>
+                </>
+              )}
+            </AnimateGenericFadeInOut>
+          )}
+        </div>
+      )}
+    </div>
   );
 };

apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx

@@ -482,46 +482,30 @@ export const EnvelopeEditorRecipientForm = () => {
 
     const { data } = validatedFormValues;
 
-    // Weird edge case where the whole envelope is created via API
-    // with no signing order. If they come to this page it will show an error
-    // since they aren't equal and the recipient is no longer editable.
-    const envelopeRecipients = data.signers.map((recipient) => {
-      if (!canRecipientBeModified(recipient.id)) {
-        return {
-          ...recipient,
-          signingOrder: recipient.signingOrder,
-        };
-      }
-      return recipient;
-    });
-
     const hasSigningOrderChanged = envelope.documentMeta.signingOrder !== data.signingOrder;
     const hasAllowDictateNextSignerChanged =
       envelope.documentMeta.allowDictateNextSigner !== data.allowDictateNextSigner;
 
     const hasSignersChanged =
-      envelopeRecipients.length !== recipients.length ||
-      envelopeRecipients.some((signer) => {
+      data.signers.length !== recipients.length ||
+      data.signers.some((signer) => {
         const recipient = recipients.find((recipient) => recipient.id === signer.id);
 
         if (!recipient) {
           return true;
         }
 
-        const signerActionAuth = signer.actionAuth;
-        const recipientActionAuth = recipient.authOptions?.actionAuth || [];
-
         return (
           signer.email !== recipient.email ||
           signer.name !== recipient.name ||
           signer.role !== recipient.role ||
           signer.signingOrder !== recipient.signingOrder ||
-          !isDeepEqual(signerActionAuth, recipientActionAuth)
+          !isDeepEqual(signer.actionAuth, recipient.authOptions?.actionAuth)
         );
       });
 
     if (hasSignersChanged) {
-      setRecipientsDebounced(envelopeRecipients);
+      setRecipientsDebounced(validatedFormValues.data.signers);
     }
 
     if (hasSigningOrderChanged || hasAllowDictateNextSignerChanged) {

apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx

@@ -174,7 +174,7 @@ export const EnvelopeEditorSettingsDialog = ({
   const { t, i18n } = useLingui();
   const { toast } = useToast();
 
-  const { envelope, updateEnvelopeAsync } = useCurrentEnvelopeEditor();
+  const { envelope } = useCurrentEnvelopeEditor();
 
   const team = useCurrentTeam();
   const organisation = useCurrentOrganisation();
@@ -186,12 +186,14 @@ export const EnvelopeEditorSettingsDialog = ({
     documentAuth: envelope.authOptions,
   });
 
-  const createDefaultValues = () => {
-    return {
-      externalId: envelope.externalId || '',
+  const form = useForm<TAddSettingsFormSchema>({
+    resolver: zodResolver(ZAddSettingsFormSchema),
+    defaultValues: {
+      externalId: envelope.externalId || '', // Todo: String or undefined?
       visibility: envelope.visibility || '',
       globalAccessAuth: documentAuthOption?.globalAccessAuth || [],
       globalActionAuth: documentAuthOption?.globalActionAuth || [],
+
       meta: {
         subject: envelope.documentMeta.subject ?? '',
         message: envelope.documentMeta.message ?? '',
@@ -208,14 +210,11 @@ export const EnvelopeEditorSettingsDialog = ({
         emailSettings: ZDocumentEmailSettingsSchema.parse(envelope.documentMeta.emailSettings),
         signatureTypes: extractTeamSignatureSettings(envelope.documentMeta),
       },
-    };
-  };
-
-  const form = useForm<TAddSettingsFormSchema>({
-    resolver: zodResolver(ZAddSettingsFormSchema),
-    defaultValues: createDefaultValues(),
+    },
   });
 
+  const { mutateAsync: updateEnvelope } = trpc.envelope.update.useMutation();
+
   const envelopeHasBeenSent =
     envelope.type === EnvelopeType.DOCUMENT &&
     envelope.recipients.some((recipient) => recipient.sendStatus === SendStatus.SENT);
@@ -230,6 +229,7 @@ export const EnvelopeEditorSettingsDialog = ({
 
   const emails = emailData?.data || [];
 
+  // Todo: Envelopes this doesn't make sense (look at previous)
   const canUpdateVisibility = canAccessTeamDocument(team.currentTeamRole, envelope.visibility);
 
   const onFormSubmit = async (data: TAddSettingsFormSchema) => {
@@ -240,7 +240,9 @@ export const EnvelopeEditorSettingsDialog = ({
       .safeParse(data.globalAccessAuth);
 
     try {
-      await updateEnvelopeAsync({
+      await updateEnvelope({
+        envelopeId: envelope.id,
+        envelopeType: envelope.type,
         data: {
           externalId: data.externalId || null,
           visibility: data.visibility,
@@ -295,7 +297,7 @@ export const EnvelopeEditorSettingsDialog = ({
   ]);
 
   useEffect(() => {
-    form.reset(createDefaultValues());
+    form.reset();
     setActiveTab('general');
   }, [open, form]);
 
@@ -321,7 +323,7 @@ export const EnvelopeEditorSettingsDialog = ({
 
       <DialogContent className="flex w-full !max-w-5xl flex-row gap-0 p-0">
         {/* Sidebar. */}
-        <div className="bg-accent/20 flex w-80 flex-col border-r">
+        <div className="flex w-80 flex-col border-r bg-gray-50">
           <DialogHeader className="p-6 pb-4">
             <DialogTitle>Document Settings</DialogTitle>
           </DialogHeader>

apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx

@@ -1,12 +1,11 @@
 import { useMemo, useState } from 'react';
 
-import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import type { DropResult } from '@hello-pangea/dnd';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { DocumentStatus } from '@prisma/client';
-import { FileWarningIcon, GripVerticalIcon, Loader2 } from 'lucide-react';
-import { X } from 'lucide-react';
+import { FileWarningIcon, GripVerticalIcon, Loader2, X } from 'lucide-react';
 import { ErrorCode as DropzoneErrorCode, type FileRejection } from 'react-dropzone';
 import { Link } from 'react-router';
 
@@ -18,9 +17,9 @@ import {
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { nanoid } from '@documenso/lib/universal/id';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { canEnvelopeItemsBeModified } from '@documenso/lib/utils/envelope';
 import { trpc } from '@documenso/trpc/react';
-import type { TCreateEnvelopeItemsPayload } from '@documenso/trpc/server/envelope-router/create-envelope-items.types';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Card,
@@ -114,19 +113,36 @@ export const EnvelopeEditorUploadPage = () => {
 
     setLocalFiles((prev) => [...prev, ...newUploadingFiles]);
 
-    const payload = {
+    const result = await Promise.all(
+      files.map(async (file, index) => {
+        try {
+          const response = await putPdfFile(file);
+
+          // Mark as uploaded (remove from uploading state)
+          return {
+            title: file.name,
+            documentDataId: response.id,
+          };
+        } catch (_error) {
+          setLocalFiles((prev) =>
+            prev.map((uploadingFile) =>
+              uploadingFile.id === newUploadingFiles[index].id
+                ? { ...uploadingFile, isError: true, isUploading: false }
+                : uploadingFile,
+            ),
+          );
+        }
+      }),
+    );
+
+    const envelopeItemsToCreate = result.filter(
+      (item): item is { title: string; documentDataId: string } => item !== undefined,
+    );
+
+    const { createdEnvelopeItems } = await createEnvelopeItems({
       envelopeId: envelope.id,
-    } satisfies TCreateEnvelopeItemsPayload;
-
-    const formData = new FormData();
-
-    formData.append('payload', JSON.stringify(payload));
-
-    for (const file of files) {
-      formData.append('files', file);
-    }
-
-    const { createdEnvelopeItems } = await createEnvelopeItems(formData).catch((error) => {
+      items: envelopeItemsToCreate,
+    }).catch((error) => {
       console.error(error);
 
       // Set error state on files in batch upload.
@@ -186,6 +202,7 @@ export const EnvelopeEditorUploadPage = () => {
     debouncedUpdateEnvelopeItems(items);
   };
 
+  // Todo: Envelopes - Sync into envelopes data
   const debouncedUpdateEnvelopeItems = useDebounceFunction((files: LocalFile[]) => {
     void updateEnvelopeItems({
       envelopeId: envelope.id,

apps/remix/app/components/general/envelope-editor/envelope-generic-page-renderer.tsx

@@ -12,8 +12,7 @@ import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 export default function EnvelopeGenericPageRenderer() {
   const { i18n } = useLingui();
 
-  const { currentEnvelopeItem, fields, getRecipientColorKey, setRenderError, overrideSettings } =
-    useCurrentEnvelopeRender();
+  const { currentEnvelopeItem, fields, getRecipientColorKey } = useCurrentEnvelopeRender();
 
   const {
     stage,
@@ -38,7 +37,7 @@ export default function EnvelopeGenericPageRenderer() {
     [fields, pageContext.pageNumber],
   );
 
-  const unsafeRenderFieldOnLayer = (field: TEnvelope['fields'][number]) => {
+  const renderFieldOnLayer = (field: TEnvelope['fields'][number]) => {
     if (!pageLayer.current) {
       console.error('Layer not loaded yet');
       return;
@@ -50,11 +49,12 @@ export default function EnvelopeGenericPageRenderer() {
       field: {
         renderId: field.id.toString(),
         ...field,
+        customText: '',
         width: Number(field.width),
         height: Number(field.height),
         positionX: Number(field.positionX),
         positionY: Number(field.positionY),
-        customText: field.inserted ? field.customText : '',
+        inserted: false,
         fieldMeta: field.fieldMeta,
       },
       translations: getClientSideFieldTranslations(i18n),
@@ -62,19 +62,10 @@ export default function EnvelopeGenericPageRenderer() {
       pageHeight: unscaledViewport.height,
       color: getRecipientColorKey(field.recipientId),
       editable: false,
-      mode: overrideSettings?.mode ?? 'sign',
+      mode: 'sign',
     });
   };
 
-  const renderFieldOnLayer = (field: TEnvelope['fields'][number]) => {
-    try {
-      unsafeRenderFieldOnLayer(field);
-    } catch (err) {
-      console.error(err);
-      setRenderError(true);
-    }
-  };
-
   /**
    * Initialize the Konva page canvas and all fields and interactions.
    */

apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx

@@ -10,17 +10,14 @@ import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-rende
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
-import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZFullFieldSchema } from '@documenso/lib/types/field';
 import { createSpinner } from '@documenso/lib/universal/field-renderer/field-generic-items';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import type { TSignEnvelopeFieldValue } from '@documenso/trpc/server/envelope-router/sign-envelope-field.types';
 import { EnvelopeFieldToolTip } from '@documenso/ui/components/field/envelope-field-tooltip';
 import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { handleCheckboxFieldClick } from '~/utils/field-signing/checkbox-field';
 import { handleDropdownFieldClick } from '~/utils/field-signing/dropdown-field';
@@ -31,24 +28,20 @@ import { handleNumberFieldClick } from '~/utils/field-signing/number-field';
 import { handleSignatureFieldClick } from '~/utils/field-signing/signature-field';
 import { handleTextFieldClick } from '~/utils/field-signing/text-field';
 
-import { useRequiredDocumentSigningAuthContext } from '../document-signing/document-signing-auth-provider';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
 
 export default function EnvelopeSignerPageRenderer() {
-  const { t, i18n } = useLingui();
-  const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
+  const { i18n } = useLingui();
+  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
   const { sessionData } = useOptionalSession();
 
-  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
-  const { toast } = useToast();
-
   const {
     envelopeData,
     recipient,
     recipientFields,
     recipientFieldsRemaining,
     showPendingFieldTooltip,
-    signField: signFieldInternal,
+    signField,
     email,
     setEmail,
     fullName,
@@ -87,7 +80,7 @@ export default function EnvelopeSignerPageRenderer() {
     );
   }, [recipientFields, selectedAssistantRecipientFields, pageContext.pageNumber]);
 
-  const unsafeRenderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
+  const renderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
     if (!pageLayer.current) {
       console.error('Layer not loaded yet');
       return;
@@ -244,7 +237,7 @@ export default function EnvelopeSignerPageRenderer() {
             .then(async (payload) => {
               if (payload) {
                 fieldGroup.add(loadingSpinnerGroup);
-                await signField(field.id, payload);
+                await signField(field.id, payload); // Todo: Envelopes - Handle errors
               }
 
               if (payload?.value) {
@@ -325,6 +318,7 @@ export default function EnvelopeSignerPageRenderer() {
          * SIGNATURE FIELD.
          */
         .with({ type: FieldType.SIGNATURE }, (field) => {
+          // Todo: Envelopes - Reauth
           handleSignatureFieldClick({
             field,
             signature,
@@ -335,21 +329,11 @@ export default function EnvelopeSignerPageRenderer() {
             .then(async (payload) => {
               if (payload) {
                 fieldGroup.add(loadingSpinnerGroup);
+                await signField(field.id, payload);
+              }
 
-                if (payload.value) {
-                  void executeActionAuthProcedure({
-                    onReauthFormSubmit: async (authOptions) => {
-                      await signField(field.id, payload, authOptions);
-
-                      loadingSpinnerGroup.destroy();
-                    },
-                    actionTarget: field.type,
-                  });
-
-                  setSignature(payload.value);
-                } else {
-                  await signField(field.id, payload);
-                }
+              if (payload?.value) {
+                setSignature(payload.value);
               }
             })
             .finally(() => {
@@ -363,42 +347,13 @@ export default function EnvelopeSignerPageRenderer() {
     fieldGroup.on('pointerdown', handleFieldGroupClick);
   };
 
-  const renderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
-    try {
-      unsafeRenderFieldOnLayer(unparsedField);
-    } catch (err) {
-      console.error(err);
-      setRenderError(true);
-    }
-  };
-
-  const signField = async (
-    fieldId: number,
-    payload: TSignEnvelopeFieldValue,
-    authOptions?: TRecipientActionAuth,
-  ) => {
-    try {
-      await signFieldInternal(fieldId, payload, authOptions);
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: t`Error`,
-        description: t`An error occurred while signing the field.`,
-        variant: 'destructive',
-      });
-
-      throw err;
-    }
-  };
-
   /**
    * Initialize the Konva page canvas and all fields and interactions.
    */
   const createPageCanvas = (currentStage: Konva.Stage, currentPageLayer: Konva.Layer) => {
     // Render the fields.
     for (const field of localPageFields) {
-      renderFieldOnLayer(field);
+      renderFieldOnLayer(field); // Todo: Envelopes - [CRITICAL] Handle errors which prevent rendering
     }
 
     currentPageLayer.batchDraw();
@@ -414,7 +369,7 @@ export default function EnvelopeSignerPageRenderer() {
 
     localPageFields.forEach((field) => {
       console.log('Field changed/inserted, rendering on canvas');
-      renderFieldOnLayer(field);
+      renderFieldOnLayer(field); // Todo: Envelopes - [CRITICAL] Handle errors which prevent rendering
     });
 
     pageLayer.current.batchDraw();
@@ -432,7 +387,7 @@ export default function EnvelopeSignerPageRenderer() {
     pageLayer.current.destroyChildren();
 
     localPageFields.forEach((field) => {
-      renderFieldOnLayer(field);
+      renderFieldOnLayer(field); // Todo: Envelopes - [CRITICAL] Handle errors which prevent rendering
     });
 
     pageLayer.current.batchDraw();

apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx

@@ -127,7 +127,6 @@ export const EnvelopeSignerCompleteDialog = () => {
             isBase64,
           };
         }),
-        nextSigner,
       });
 
       const redirectUrl = envelope.documentMeta.redirectUrl;

apps/remix/app/components/general/share-document-download-button.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Download } from 'lucide-react';
+
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
+import type { DocumentData } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type ShareDocumentDownloadButtonProps = {
+  title: string;
+  documentData: DocumentData;
+};
+
+export const ShareDocumentDownloadButton = ({
+  title,
+  documentData,
+}: ShareDocumentDownloadButtonProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const onDownloadClick = async () => {
+    try {
+      setIsDownloading(true);
+
+      await downloadPDF({ documentData, fileName: title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return (
+    <Button loading={isDownloading} onClick={onDownloadClick}>
+      {!isDownloading && <Download className="mr-2 h-4 w-4" />}
+      <Trans>Download</Trans>
+    </Button>
+  );
+};

apps/remix/app/components/general/template/template-drop-zone-wrapper.tsx

@@ -10,9 +10,9 @@ import { match } from 'ts-pattern';
 
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
-import type { TCreateTemplatePayloadSchema } from '@documenso/trpc/server/template-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -40,17 +40,13 @@ export const TemplateDropZoneWrapper = ({ children, className }: TemplateDropZon
     try {
       setIsLoading(true);
 
-      const payload = {
+      const documentData = await putPdfFile(file);
+
+      const { legacyTemplateId: id } = await createTemplate({
         title: file.name,
+        templateDocumentDataId: documentData.id,
         folderId: folderId ?? undefined,
-      } satisfies TCreateTemplatePayloadSchema;
-
-      const formData = new FormData();
-
-      formData.append('payload', JSON.stringify(payload));
-      formData.append('file', file);
-
-      const { envelopeId: id } = await createTemplate(formData);
+      });
 
       toast({
         title: _(msg`Template uploaded`),

apps/remix/app/components/general/template/template-edit-form.tsx

@@ -313,10 +313,8 @@ export const TemplateEditForm = ({
       >
         <CardContent className="p-2">
           <PDFViewer
-            key={template.envelopeItems[0].id}
-            envelopeItem={template.envelopeItems[0]}
-            token={undefined}
-            version="signed"
+            key={templateDocumentData.id}
+            documentData={templateDocumentData}
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

apps/remix/app/components/tables/documents-table-action-button.tsx

@@ -1,14 +1,19 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
 import { CheckCircle, Download, Edit, EyeIcon, Pencil } from 'lucide-react';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useCurrentTeam } from '~/providers/team';
 
@@ -20,6 +25,8 @@ export type DocumentsTableActionButtonProps = {
 
 export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonProps) => {
   const { user } = useSession();
+  const { toast } = useToast();
+  const { _ } = useLingui();
 
   const team = useCurrentTeam();
 
@@ -37,6 +44,39 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
   const documentsPath = formatDocumentsPath(team.url);
   const formatPath = `${documentsPath}/${row.envelopeId}/edit`;
 
+  const onDownloadClick = async () => {
+    try {
+      const document = !recipient
+        ? await trpcClient.document.get.query(
+            {
+              documentId: row.id,
+            },
+            {
+              context: {
+                teamId: team?.id?.toString(),
+              },
+            },
+          )
+        : await trpcClient.document.getDocumentByToken.query({
+            token: recipient.token,
+          });
+
+      const documentData = document?.documentData;
+
+      if (!documentData) {
+        throw Error('No document available');
+      }
+
+      await downloadPDF({ documentData, fileName: row.title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
   // TODO: Consider if want to keep this logic for hiding viewing for CC'ers
   if (recipient?.role === RecipientRole.CC && isComplete === false) {
     return null;
@@ -94,7 +134,7 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
         <Trans>View</Trans>
       </Button>
     ))
-    .with({ isComplete: true }, () => (
+    .with({ isComplete: true, internalVersion: 2 }, () => (
       <EnvelopeDownloadDialog
         envelopeId={row.envelopeId}
         envelopeStatus={row.status}
@@ -107,5 +147,11 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
         }
       />
     ))
+    .with({ isComplete: true }, () => (
+      <Button className="w-32" onClick={onDownloadClick}>
+        <Download className="-ml-1 mr-2 inline h-4 w-4" />
+        <Trans>Download</Trans>
+      </Button>
+    ))
     .otherwise(() => <div></div>);
 };

apps/remix/app/components/tables/documents-table-action-dropdown.tsx

@@ -10,6 +10,7 @@ import {
   Download,
   Edit,
   EyeIcon,
+  FileDown,
   FolderInput,
   Loader,
   MoreHorizontal,
@@ -19,10 +20,12 @@ import {
 } from 'lucide-react';
 import { Link } from 'react-router';
 
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
   DropdownMenu,
@@ -31,6 +34,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
@@ -52,6 +56,7 @@ export const DocumentsTableActionDropdown = ({
   const { user } = useSession();
   const team = useCurrentTeam();
 
+  const { toast } = useToast();
   const { _ } = useLingui();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -71,6 +76,58 @@ export const DocumentsTableActionDropdown = ({
   const documentsPath = formatDocumentsPath(team.url);
   const formatPath = `${documentsPath}/${row.envelopeId}/edit`;
 
+  const onDownloadClick = async () => {
+    try {
+      const document = !recipient
+        ? await trpcClient.document.get.query({
+            documentId: row.id,
+          })
+        : await trpcClient.document.getDocumentByToken.query({
+            token: recipient.token,
+          });
+
+      const documentData = document?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: row.title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onDownloadOriginalClick = async () => {
+    try {
+      const document = !recipient
+        ? await trpcClient.document.get.query({
+            documentId: row.id,
+          })
+        : await trpcClient.document.getDocumentByToken.query({
+            token: recipient.token,
+          });
+
+      const documentData = document?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: row.title, version: 'original' });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
   const nonSignedRecipients = row.recipients.filter((item) => item.signingStatus !== 'SIGNED');
 
   return (
@@ -121,19 +178,33 @@ export const DocumentsTableActionDropdown = ({
           </Link>
         </DropdownMenuItem>
 
-        <EnvelopeDownloadDialog
-          envelopeId={row.envelopeId}
-          envelopeStatus={row.status}
-          token={recipient?.token}
-          trigger={
-            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
-              <div>
-                <Download className="mr-2 h-4 w-4" />
-                <Trans>Download</Trans>
-              </div>
+        {row.internalVersion === 2 ? (
+          <EnvelopeDownloadDialog
+            envelopeId={row.envelopeId}
+            envelopeStatus={row.status}
+            token={recipient?.token}
+            trigger={
+              <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+                <div>
+                  <Download className="mr-2 h-4 w-4" />
+                  <Trans>Download</Trans>
+                </div>
+              </DropdownMenuItem>
+            }
+          />
+        ) : (
+          <>
+            <DropdownMenuItem disabled={!isComplete} onClick={onDownloadClick}>
+              <Download className="mr-2 h-4 w-4" />
+              <Trans>Download</Trans>
             </DropdownMenuItem>
-          }
-        />
+
+            <DropdownMenuItem onClick={onDownloadOriginalClick}>
+              <FileDown className="mr-2 h-4 w-4" />
+              <Trans>Download Original</Trans>
+            </DropdownMenuItem>
+          </>
+        )}
 
         <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
@@ -202,8 +273,7 @@ export const DocumentsTableActionDropdown = ({
       />
 
       <DocumentDuplicateDialog
-        id={row.envelopeId}
-        token={recipient?.token}
+        id={row.id}
         open={isDuplicateDialogOpen}
         onOpenChange={setDuplicateDialogOpen}
       />

apps/remix/app/components/tables/inbox-table.tsx

@@ -10,9 +10,11 @@ import { DateTime } from 'luxon';
 import { Link, useSearchParams } from 'react-router';
 import { match } from 'ts-pattern';
 
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
+import { trpc as trpcClient } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import type { TFindInboxResponse } from '@documenso/trpc/server/document-router/find-inbox.types';
 import { Button } from '@documenso/ui/primitives/button';
@@ -26,7 +28,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { DocumentStatus } from '~/components/general/document/document-status';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
-import { EnvelopeDownloadDialog } from '../dialogs/envelope-download-dialog';
 import { StackAvatarsWithTooltip } from '../general/stack-avatars-with-tooltip';
 
 export type DocumentsTableProps = {
@@ -198,6 +199,28 @@ export const InboxTableActionButton = ({ row }: InboxTableActionButtonProps) =>
     return null;
   }
 
+  const onDownloadClick = async () => {
+    try {
+      const document = await trpcClient.document.getDocumentByToken.query({
+        token: recipient.token,
+      });
+
+      const documentData = document?.documentData;
+
+      if (!documentData) {
+        throw Error('No document available');
+      }
+
+      await downloadPDF({ documentData, fileName: row.title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
   // TODO: Consider if want to keep this logic for hiding viewing for CC'ers
   if (recipient?.role === RecipientRole.CC && isComplete === false) {
     return null;
@@ -207,7 +230,6 @@ export const InboxTableActionButton = ({ row }: InboxTableActionButtonProps) =>
     isPending,
     isComplete,
     isSigned,
-    internalVersion: row.internalVersion,
   })
     .with({ isPending: true, isSigned: false }, () => (
       <Button className="w-32" asChild>
@@ -241,17 +263,10 @@ export const InboxTableActionButton = ({ row }: InboxTableActionButtonProps) =>
       </Button>
     ))
     .with({ isComplete: true }, () => (
-      <EnvelopeDownloadDialog
-        envelopeId={row.envelopeId}
-        envelopeStatus={row.status}
-        token={recipient?.token}
-        trigger={
-          <Button className="w-32">
-            <DownloadIcon className="-ml-1 mr-2 inline h-4 w-4" />
-            <Trans>Download</Trans>
-          </Button>
-        }
-      />
+      <Button className="w-32" onClick={onDownloadClick}>
+        <DownloadIcon className="-ml-1 mr-2 inline h-4 w-4" />
+        <Trans>Download</Trans>
+      </Button>
     ))
     .otherwise(() => <div></div>);
 };

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id._index.tsx

@@ -147,7 +147,6 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
           <div className="relative col-span-12 lg:col-span-6 xl:col-span-7">
             <EnvelopeRenderProvider
               envelope={envelope}
-              token={undefined}
               fields={envelope.status == DocumentStatus.COMPLETED ? [] : envelope.fields}
               recipientIds={envelope.recipients.map((recipient) => recipient.id)}
             >
@@ -157,10 +156,7 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
 
               <Card className="rounded-xl before:rounded-xl" gradient>
                 <CardContent className="p-2">
-                  <PDFViewerKonvaLazy
-                    renderer="preview"
-                    customPageRenderer={EnvelopeGenericPageRenderer}
-                  />
+                  <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
                 </CardContent>
               </Card>
             </EnvelopeRenderProvider>
@@ -182,10 +178,9 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
               )}
 
               <PDFViewer
-                envelopeItem={envelope.envelopeItems[0]}
-                token={undefined}
+                document={envelope}
                 key={envelope.envelopeItems[0].id}
-                version="signed"
+                documentData={envelope.envelopeItems[0].documentData}
               />
             </CardContent>
           </Card>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.edit.tsx

@@ -101,7 +101,6 @@ export default function EnvelopeEditorPage({ params }: Route.ComponentProps) {
     <EnvelopeEditorProvider initialEnvelope={envelope}>
       <EnvelopeRenderProvider
         envelope={envelope}
-        token={undefined}
         fields={envelope.fields}
         recipientIds={envelope.recipients.map((recipient) => recipient.id)}
       >

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id._index.tsx

@@ -170,7 +170,6 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
           <div className="relative col-span-12 lg:col-span-6 xl:col-span-7">
             <EnvelopeRenderProvider
               envelope={envelope}
-              token={undefined}
               fields={envelope.fields}
               recipientIds={envelope.recipients.map((recipient) => recipient.id)}
             >
@@ -180,10 +179,7 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
 
               <Card className="rounded-xl before:rounded-xl" gradient>
                 <CardContent className="p-2">
-                  <PDFViewerKonvaLazy
-                    renderer="preview"
-                    customPageRenderer={EnvelopeGenericPageRenderer}
-                  />
+                  <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
                 </CardContent>
               </Card>
             </EnvelopeRenderProvider>
@@ -204,10 +200,9 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
               />
 
               <PDFViewer
-                envelopeItem={envelope.envelopeItems[0]}
-                token={undefined}
-                version="signed"
+                document={envelope}
                 key={envelope.envelopeItems[0].id}
+                documentData={envelope.envelopeItems[0].documentData}
               />
             </CardContent>
           </Card>

apps/remix/app/routes/_recipient+/d.$token+/_index.tsx

@@ -8,6 +8,7 @@ import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/env
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getEnvelopeForDirectTemplateSigning } from '@documenso/lib/server-only/envelope/get-envelope-for-direct-template-signing';
+import { getEnvelopeRequiredAccessData } from '@documenso/lib/server-only/envelope/get-envelope-required-access-data';
 import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
 import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
@@ -97,12 +98,15 @@ const handleV2Loader = async ({ params, request }: Route.LoaderArgs) => {
         envelopeForSigning,
       } as const;
     })
-    .catch((e) => {
+    .catch(async (e) => {
       const error = AppError.parseError(e);
 
       if (error.code === AppErrorCode.UNAUTHORIZED) {
+        const requiredAccessData = await getEnvelopeRequiredAccessData({ token });
+
         return {
           isDocumentAccessValid: false,
+          ...requiredAccessData,
         } as const;
       }
 
@@ -222,21 +226,20 @@ const DirectSigningPageV2 = ({ data }: { data: Awaited<ReturnType<typeof handleV
   const user = sessionData?.user;
 
   if (!data.isDocumentAccessValid) {
-    return <DocumentSigningAuthPageView email={''} emailHasAccount={true} />;
+    return (
+      <DocumentSigningAuthPageView
+        email={data.recipientEmail}
+        emailHasAccount={!!data.recipientHasAccount}
+      />
+    );
   }
 
   const { envelope, recipient } = data.envelopeForSigning;
 
-  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
-    documentAuth: envelope.authOptions,
-  });
-
-  const isEmailForced = derivedRecipientAccessAuth.includes(DocumentAccessAuth.ACCOUNT);
-
   return (
     <EnvelopeSigningProvider
       envelopeData={data.envelopeForSigning}
-      email={isEmailForced ? user?.email || '' : ''} // Doing this allows us to let users change the email if they want to for non-auth templates.
+      email={''} // Doing this allows us to let users change the email if they want to.
       fullName={user?.name}
       signature={user?.signature}
     >
@@ -245,7 +248,7 @@ const DirectSigningPageV2 = ({ data }: { data: Awaited<ReturnType<typeof handleV
         recipient={recipient}
         user={user}
       >
-        <EnvelopeRenderProvider envelope={envelope} token={recipient.token}>
+        <EnvelopeRenderProvider envelope={envelope}>
           <DocumentSigningPageViewV2 />
         </EnvelopeRenderProvider>
       </DocumentSigningAuthProvider>

apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx

@@ -492,7 +492,7 @@ const SigningPageV2 = ({ data }: { data: Awaited<ReturnType<typeof handleV2Loade
         recipient={recipient}
         user={user}
       >
-        <EnvelopeRenderProvider envelope={envelope} token={recipient.token}>
+        <EnvelopeRenderProvider envelope={envelope}>
           <DocumentSigningPageViewV2 />
         </EnvelopeRenderProvider>
       </DocumentSigningAuthProvider>

apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx

@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
 
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
-import { CheckCircle2, Clock8, DownloadIcon } from 'lucide-react';
+import { CheckCircle2, Clock8, FileSearch } from 'lucide-react';
 import { Link, useRevalidator } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -19,13 +20,14 @@ import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-emai
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { env } from '@documenso/lib/utils/env';
 import type { Document } from '@documenso/prisma/types/document-legacy-schema';
+import DocumentDialog from '@documenso/ui/components/document/document-dialog';
+import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 import { cn } from '@documenso/ui/lib/utils';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 import { ClaimAccount } from '~/components/general/claim-account';
 import { DocumentSigningAuthPageView } from '~/components/general/document-signing/document-signing-auth-page';
 
@@ -205,16 +207,24 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
           <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
             <DocumentShareButton documentId={document.id} token={recipient.token} />
 
-            {isDocumentCompleted(document.status) && (
-              <EnvelopeDownloadDialog
-                envelopeId={document.envelopeId}
-                envelopeStatus={document.status}
-                envelopeItems={document.envelopeItems}
-                token={recipient?.token}
+            {isDocumentCompleted(document.status) ? (
+              <DocumentDownloadButton
+                className="flex-1"
+                fileName={document.title}
+                documentData={document.documentData}
+                disabled={!isDocumentCompleted(document.status)}
+              />
+            ) : (
+              <DocumentDialog
+                documentData={document.documentData}
                 trigger={
-                  <Button type="button" variant="outline" className="flex-1">
-                    <DownloadIcon className="mr-2 h-5 w-5" />
-                    <Trans>Download</Trans>
+                  <Button
+                    className="text-[11px]"
+                    title={_(msg`Signatures will appear once the document has been completed`)}
+                    variant="outline"
+                  >
+                    <FileSearch className="mr-2 h-5 w-5" strokeWidth={1.7} />
+                    <Trans>View Original Document</Trans>
                   </Button>
                 }
               />

apps/remix/app/routes/_share+/share.$slug.tsx

@@ -60,7 +60,6 @@ export const loader = async ({ request, params: { slug } }: Route.LoaderArgs) =>
 
     return {
       document,
-      token: slug,
     };
   }
 
@@ -75,7 +74,7 @@ export const loader = async ({ request, params: { slug } }: Route.LoaderArgs) =>
 };
 
 export default function SharePage() {
-  const { document, token } = useLoaderData<typeof loader>();
+  const { document } = useLoaderData<typeof loader>();
 
   if (document) {
     return (
@@ -87,7 +86,6 @@ export default function SharePage() {
         envelopeItems={document.envelopeItems}
         recipientCount={document.recipientCount}
         completedDate={document.completedAt ?? undefined}
-        token={token}
       />
     );
   }

apps/remix/app/routes/embed+/_v0+/direct.$url.tsx

@@ -124,7 +124,7 @@ export default function EmbedDirectTemplatePage() {
             token={token}
             envelopeId={template.envelopeId}
             updatedAt={template.updatedAt}
-            envelopeItems={template.envelopeItems}
+            documentData={template.templateDocumentData}
             recipient={recipient}
             fields={fields}
             metadata={template.templateMeta}

apps/remix/app/routes/embed+/_v0+/sign.$url.tsx

@@ -165,7 +165,7 @@ export default function EmbedSignDocumentPage() {
           token={token}
           documentId={document.id}
           envelopeId={document.envelopeId}
-          envelopeItems={document.envelopeItems}
+          documentData={document.documentData}
           recipient={recipient}
           fields={fields}
           completedFields={completedFields}

apps/remix/app/utils/field-signing/checkbox-field.ts

@@ -1,6 +1,5 @@
 import { FieldType } from '@prisma/client';
 
-import { validateCheckboxLength } from '@documenso/lib/advanced-fields-validation/validate-checkbox';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TFieldCheckbox } from '@documenso/lib/types/field';
 import { parseCheckboxCustomText } from '@documenso/lib/utils/fields';
@@ -45,13 +44,6 @@ export const handleCheckboxFieldClick = async (
 
   let checkedValues: number[] | null = newValues.filter((v) => v.isChecked).map((v) => v.index);
 
-  if (checkedValues.length === 0) {
-    return {
-      type: FieldType.CHECKBOX,
-      value: [],
-    };
-  }
-
   if (validationRule && validationLength) {
     const checkboxValidationRule = checkboxValidationSigns.find(
       (sign) => sign.label === validationRule,
@@ -63,33 +55,12 @@ export const handleCheckboxFieldClick = async (
       });
     }
 
-    // Custom logic to make it flow better.
-    // If "at most" OR "exactly" 1 value then just return the new selected value if exists.
-    if (
-      (checkboxValidationRule.value === '=' || checkboxValidationRule.value === '<=') &&
-      validationLength === 1
-    ) {
-      return {
-        type: FieldType.CHECKBOX,
-        value: [clickedCheckboxIndex],
-      };
-    }
-
-    const isValid = validateCheckboxLength(
-      checkedValues.length,
-      checkboxValidationRule.value,
+    checkedValues = await SignFieldCheckboxDialog.call({
+      fieldMeta: field.fieldMeta,
+      validationRule: checkboxValidationRule.value,
       validationLength,
-    );
-
-    // Only render validation dialog if validation is invalid.
-    if (!isValid) {
-      checkedValues = await SignFieldCheckboxDialog.call({
-        fieldMeta: field.fieldMeta,
-        validationRule: checkboxValidationRule.value,
-        validationLength,
-        preselectedIndices: checkedValues,
-      });
-    }
+      preselectedIndices: currentCheckedIndices,
+    });
   }
 
   if (!checkedValues) {

apps/remix/package.json

@@ -14,6 +14,8 @@
     "with:env": "dotenv -e ../../.env -e ../../.env.local --"
   },
   "dependencies": {
+    "@ai-sdk/google": "^2.0.25",
+    "@ai-sdk/react": "^2.0.82",
     "@cantoo/pdf-lib": "^2.5.2",
     "@documenso/api": "*",
     "@documenso/assets": "*",
@@ -25,7 +27,6 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@epic-web/remember": "^1.1.0",
-    "@faker-js/faker": "^10.1.0",
     "@hono/node-server": "^1.13.7",
     "@hono/trpc-server": "^0.3.4",
     "@hookform/resolvers": "^3.1.0",
@@ -39,6 +40,7 @@
     "@react-router/serve": "^7.6.0",
     "@simplewebauthn/browser": "^9.0.1",
     "@simplewebauthn/server": "^9.0.3",
+    "ai": "^5.0.82",
     "autoprefixer": "^10.4.13",
     "colord": "^2.9.3",
     "framer-motion": "^10.12.8",
@@ -69,6 +71,7 @@
     "remix-themes": "^2.0.4",
     "satori": "^0.12.1",
     "sharp": "0.32.6",
+    "skia-canvas": "^3.0.8",
     "tailwindcss": "^3.4.15",
     "ts-pattern": "^5.0.5",
     "ua-parser-js": "^1.0.37",

apps/remix/server/api/ai.ts

@@ -0,0 +1,420 @@
+// sort-imports-ignore
+
+// ---- PATCH pdfjs-dist's canvas require BEFORE importing it ----
+import { createRequire } from 'module';
+import { fileURLToPath } from 'url';
+import { Canvas, Image } from 'skia-canvas';
+
+const require = createRequire(import.meta.url || fileURLToPath(new URL('.', import.meta.url)));
+const Module = require('module');
+
+const originalRequire = Module.prototype.require;
+Module.prototype.require = function (path: string) {
+  if (path === 'canvas') {
+    return {
+      createCanvas: (width: number, height: number) => new Canvas(width, height),
+      Image, // needed by pdfjs-dist
+    };
+  }
+  // eslint-disable-next-line prefer-rest-params, @typescript-eslint/consistent-type-assertions
+  return originalRequire.apply(this, arguments as unknown as [string]);
+};
+
+// Use dynamic require to bypass Vite SSR transformation
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const pdfjsLib = require('pdfjs-dist/legacy/build/pdf.js');
+
+import { generateObject } from 'ai';
+import { mkdir, writeFile } from 'fs/promises';
+import { Hono } from 'hono';
+import { join } from 'path';
+import sharp from 'sharp';
+
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import { getFileServerSide } from '@documenso/lib/universal/upload/get-file.server';
+import { env } from '@documenso/lib/utils/env';
+import { prisma } from '@documenso/prisma';
+
+import type { HonoEnv } from '../router';
+import {
+  type TDetectFormFieldsResponse,
+  ZDetectFormFieldsRequestSchema,
+  ZDetectedFormFieldSchema,
+} from './ai.types';
+
+const renderPdfToImage = async (pdfBytes: Uint8Array) => {
+  const loadingTask = pdfjsLib.getDocument({ data: pdfBytes });
+  const pdf = await loadingTask.promise;
+
+  try {
+    const scale = 4;
+
+    const pages = await Promise.all(
+      Array.from({ length: pdf.numPages }, async (_, index) => {
+        const pageNumber = index + 1;
+        const page = await pdf.getPage(pageNumber);
+
+        try {
+          const viewport = page.getViewport({ scale });
+
+          const virtualCanvas = new Canvas(viewport.width, viewport.height);
+          const context = virtualCanvas.getContext('2d');
+          context.imageSmoothingEnabled = false;
+
+          await page.render({ canvasContext: context, viewport }).promise;
+
+          return {
+            image: await virtualCanvas.toBuffer('png'),
+            pageNumber,
+            width: Math.floor(viewport.width),
+            height: Math.floor(viewport.height),
+          };
+        } finally {
+          page.cleanup();
+        }
+      }),
+    );
+
+    return pages;
+  } finally {
+    await pdf.destroy();
+  }
+};
+
+const resizeAndCompressImage = async (imageBuffer: Buffer): Promise<Buffer> => {
+  const metadata = await sharp(imageBuffer).metadata();
+  const originalWidth = metadata.width || 0;
+
+  if (originalWidth > 1000) {
+    return await sharp(imageBuffer)
+      .resize({ width: 1000, withoutEnlargement: true })
+      .jpeg({ quality: 70 })
+      .toBuffer();
+  }
+
+  return await sharp(imageBuffer).jpeg({ quality: 70 }).toBuffer();
+};
+
+const detectObjectsPrompt = `You are analyzing a form document image to detect fillable fields for the Documenso document signing platform.
+
+IMPORTANT RULES:
+1. Only detect EMPTY/UNFILLED fields (ignore boxes that already contain text or data)
+2. Analyze nearby text labels to determine the field type
+3. Return bounding boxes for the fillable area only, NOT the label text
+4. Each boundingBox must be in the format [ymin, xmin, ymax, xmax] where all coordinates are NORMALIZED to a 0-1000 scale
+
+CRITICAL: UNDERSTANDING FILLABLE AREAS
+The "fillable area" is ONLY the empty space where a user will write, type, sign, or check.
+- ✓ CORRECT: The blank underscore where someone writes their name: "Name: _________" → box ONLY the underscores
+- ✓ CORRECT: The empty white rectangle inside a box outline → box ONLY the empty space, not any printed text
+- ✓ CORRECT: The blank space to the right of a label: "Email: [ empty box ]" → box ONLY the empty box, exclude "Email:"
+- ✗ INCORRECT: Including the word "Signature:" that appears to the left of a signature line
+- ✗ INCORRECT: Including printed labels, instructions, or descriptive text near the field
+- ✗ INCORRECT: Extending the box to include text just because it's close to the fillable area
+
+VISUALIZING THE DISTINCTION:
+- If there's text (printed words/labels) near an empty box or line, they are SEPARATE elements
+- The text is a LABEL telling the user what to fill
+- The empty space is the FILLABLE AREA where they actually write/sign
+- Your bounding box should capture ONLY the empty space, even if the label is immediately adjacent
+
+FIELD TYPES TO DETECT:
+• SIGNATURE - Signature lines, boxes labeled 'Signature', 'Sign here', 'Authorized signature', 'X____'
+• INITIALS - Small boxes labeled 'Initials', 'Initial here', typically smaller than signature fields
+• NAME - Boxes labeled 'Name', 'Full name', 'Your name', 'Print name', 'Printed name'
+• EMAIL - Boxes labeled 'Email', 'Email address', 'E-mail', 'Email:'
+• DATE - Boxes labeled 'Date', 'Date signed', "Today's date", or showing date format placeholders like 'MM/DD/YYYY', '__/__/____'
+• CHECKBOX - Empty checkbox squares (☐) with or without labels, typically small square boxes
+• RADIO - Empty radio button circles (○) in groups, typically circular selection options
+• NUMBER - Boxes labeled with numeric context: 'Amount', 'Quantity', 'Phone', 'Phone number', 'ZIP', 'ZIP code', 'Age', 'Price', '#'
+• DROPDOWN - Boxes with dropdown indicators (▼, ↓) or labeled 'Select', 'Choose', 'Please select'
+• TEXT - Any other empty text input boxes, general input fields, unlabeled boxes, or when field type is uncertain
+
+DETECTION GUIDELINES:
+- Read text located near the box (above, to the left, or inside the box boundary) to infer the field type
+- IMPORTANT: Use the nearby text to CLASSIFY the field type, but DO NOT include that text in the bounding box
+- If you're uncertain which type fits best, default to TEXT
+- For checkboxes and radio buttons: Detect each individual box/circle separately, not the label
+- Signature fields are often longer horizontal lines or larger boxes
+- Date fields often show format hints or date separators (slashes, dashes)
+- Look for visual patterns: underscores (____), horizontal lines, box outlines
+
+BOUNDING BOX PLACEMENT (CRITICAL):
+- Your coordinates must capture ONLY the empty fillable space (the blank area where input goes)
+- EXCLUDE all printed text labels, even if they are:
+  · Directly to the left of the field (e.g., "Name: _____")
+  · Directly above the field (e.g., "Signature" printed above a line)
+  · Very close to the field with minimal spacing
+  · Inside the same outlined box as the fillable area
+- The label text helps you IDENTIFY the field type, but must be EXCLUDED from the bounding box
+- If you detect a label "Email:" followed by a blank box, draw the box around ONLY the blank box, not the word "Email:"
+
+COORDINATE SYSTEM:
+- [ymin, xmin, ymax, xmax] normalized to 0-1000 scale
+- Top-left corner: ymin and xmin close to 0
+- Bottom-right corner: ymax and xmax close to 1000
+- Coordinates represent positions on a 1000x1000 grid overlaid on the image
+
+FIELD SIZING STRATEGY FOR LINE-BASED FIELDS:
+When detecting thin horizontal lines for SIGNATURE, INITIALS, NAME, EMAIL, DATE, TEXT, or NUMBER fields:
+1. Analyze the visual context around the detected line:
+   - Look at the empty space ABOVE the detected line
+   - Observe the spacing to any text labels, headers, or other form elements above
+   - Assess what would be a reasonable field height to make the field clearly visible when filled
+2. Expand UPWARD from the detected line to create a usable field:
+   - Keep ymax (bottom) at the detected line position (the line becomes the bottom edge)
+   - Extend ymin (top) upward into the available whitespace
+   - Aim to use 60-80% of the clear whitespace above the line, while being reasonable
+   - The expanded field should provide comfortable space for signing/writing (minimum 30 units tall)
+3. Apply minimum dimensions: height at least 30 units (3% of 1000-scale), width at least 36 units
+4. Ensure ymin >= 0 (do not go off-page). If ymin would be negative, clamp to 0
+5. Do NOT apply this expansion to CHECKBOX, RADIO, or DROPDOWN fields - use detected dimensions for those
+6. Example: If you detect a signature line at ymax=500 with clear whitespace extending up to y=400:
+   - Available whitespace: 100 units
+   - Use 60-80% of that: 60-80 units
+   - Expanded field: [ymin=420, xmin=200, ymax=500, xmax=600] (creates 80-unit tall field)
+   - This gives comfortable signing space while respecting the form layout`;
+
+const runFormFieldDetection = async (
+  imageBuffer: Buffer,
+  pageNumber: number,
+): Promise<TDetectFormFieldsResponse> => {
+  const compressedImageBuffer = await resizeAndCompressImage(imageBuffer);
+  const base64Image = compressedImageBuffer.toString('base64');
+
+  const result = await generateObject({
+    model: 'google/gemini-2.5-pro',
+    output: 'array',
+    schema: ZDetectedFormFieldSchema,
+    messages: [
+      {
+        role: 'user',
+        content: [
+          {
+            type: 'image',
+            image: `data:image/jpeg;base64,${base64Image}`,
+          },
+          {
+            type: 'text',
+            text: detectObjectsPrompt,
+          },
+        ],
+      },
+    ],
+  });
+
+  return result.object.map((field) => ({
+    ...field,
+    pageNumber,
+  }));
+};
+
+export const aiRoute = new Hono<HonoEnv>().post('/detect-form-fields', async (c) => {
+  try {
+    const { user } = await getSession(c.req.raw);
+
+    const body = await c.req.json();
+    const parsed = ZDetectFormFieldsRequestSchema.safeParse(body);
+
+    if (!parsed.success) {
+      throw new AppError(AppErrorCode.INVALID_REQUEST, {
+        message: 'Document ID is required',
+        userMessage: 'Please provide a valid document ID.',
+      });
+    }
+
+    const { documentId } = parsed.data;
+
+    const documentData = await prisma.documentData.findUnique({
+      where: { id: documentId },
+      include: {
+        envelopeItem: {
+          include: {
+            envelope: {
+              select: {
+                userId: true,
+                teamId: true,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    if (!documentData || !documentData.envelopeItem) {
+      throw new AppError(AppErrorCode.NOT_FOUND, {
+        message: `Document data not found: ${documentId}`,
+        userMessage: 'The requested document does not exist.',
+      });
+    }
+
+    const envelope = documentData.envelopeItem.envelope;
+
+    const isDirectOwner = envelope.userId === user.id;
+
+    let hasTeamAccess = false;
+    if (envelope.teamId) {
+      try {
+        await getTeamById({ teamId: envelope.teamId, userId: user.id });
+        hasTeamAccess = true;
+      } catch (error) {
+        hasTeamAccess = false;
+      }
+    }
+
+    if (!isDirectOwner && !hasTeamAccess) {
+      throw new AppError(AppErrorCode.UNAUTHORIZED, {
+        message: `User ${user.id} does not have access to document ${documentId}`,
+        userMessage: 'You do not have permission to access this document.',
+      });
+    }
+
+    const pdfBytes = await getFileServerSide({
+      type: documentData.type,
+      data: documentData.initialData || documentData.data,
+    });
+
+    const renderedPages = await renderPdfToImage(pdfBytes);
+
+    const results = await Promise.allSettled(
+      renderedPages.map(async (page) => {
+        return await runFormFieldDetection(page.image, page.pageNumber);
+      }),
+    );
+
+    const detectedFields: TDetectFormFieldsResponse = [];
+    for (const [index, result] of results.entries()) {
+      if (result.status === 'fulfilled') {
+        detectedFields.push(...result.value);
+      } else {
+        const pageNumber = renderedPages[index]?.pageNumber ?? index + 1;
+        console.error(`Failed to detect fields on page ${pageNumber}:`, result.reason);
+      }
+    }
+
+    if (env('NEXT_PUBLIC_AI_DEBUG_PREVIEW') === 'true') {
+      const debugDir = join(process.cwd(), '..', '..', 'packages', 'assets', 'ai-previews');
+      await mkdir(debugDir, { recursive: true });
+
+      const now = new Date();
+      const timestamp = now
+        .toISOString()
+        .replace(/[-:]/g, '')
+        .replace(/\..+/, '')
+        .replace('T', '_');
+
+      for (const page of renderedPages) {
+        const padding = { left: 80, top: 20, right: 20, bottom: 40 };
+        const canvas = new Canvas(
+          page.width + padding.left + padding.right,
+          page.height + padding.top + padding.bottom,
+        );
+        const ctx = canvas.getContext('2d');
+
+        const img = new Image();
+        img.src = page.image;
+        ctx.drawImage(img, padding.left, padding.top);
+
+        ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+        ctx.lineWidth = 1;
+
+        for (let i = 0; i <= 1000; i += 100) {
+          const x = padding.left + (i / 1000) * page.width;
+          ctx.beginPath();
+          ctx.moveTo(x, padding.top);
+          ctx.lineTo(x, page.height + padding.top);
+          ctx.stroke();
+        }
+
+        for (let i = 0; i <= 1000; i += 100) {
+          const y = padding.top + (i / 1000) * page.height;
+          ctx.beginPath();
+          ctx.moveTo(padding.left, y);
+          ctx.lineTo(page.width + padding.left, y);
+          ctx.stroke();
+        }
+
+        const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];
+
+        const pageFields = detectedFields.filter((f) => f.pageNumber === page.pageNumber);
+        pageFields.forEach((field, index) => {
+          const [ymin, xmin, ymax, xmax] = field.boundingBox.map((coord) => coord / 1000);
+
+          const x = xmin * page.width + padding.left;
+          const y = ymin * page.height + padding.top;
+          const width = (xmax - xmin) * page.width;
+          const height = (ymax - ymin) * page.height;
+
+          ctx.strokeStyle = colors[index % colors.length];
+          ctx.lineWidth = 5;
+          ctx.strokeRect(x, y, width, height);
+
+          ctx.fillStyle = colors[index % colors.length];
+          ctx.font = '20px Arial';
+          ctx.fillText(field.label, x, y - 5);
+        });
+
+        ctx.strokeStyle = '#000000';
+        ctx.lineWidth = 1;
+        ctx.font = '26px Arial';
+
+        ctx.beginPath();
+        ctx.moveTo(padding.left, padding.top);
+        ctx.lineTo(padding.left, page.height + padding.top);
+        ctx.stroke();
+
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+        for (let i = 0; i <= 1000; i += 100) {
+          const y = padding.top + (i / 1000) * page.height;
+          ctx.fillStyle = '#000000';
+          ctx.fillText(i.toString(), padding.left - 5, y);
+
+          ctx.beginPath();
+          ctx.moveTo(padding.left - 5, y);
+          ctx.lineTo(padding.left, y);
+          ctx.stroke();
+        }
+
+        ctx.beginPath();
+        ctx.moveTo(padding.left, page.height + padding.top);
+        ctx.lineTo(page.width + padding.left, page.height + padding.top);
+        ctx.stroke();
+
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+        for (let i = 0; i <= 1000; i += 100) {
+          const x = padding.left + (i / 1000) * page.width;
+          ctx.fillStyle = '#000000';
+          ctx.fillText(i.toString(), x, page.height + padding.top + 5);
+
+          ctx.beginPath();
+          ctx.moveTo(x, page.height + padding.top);
+          ctx.lineTo(x, page.height + padding.top + 5);
+          ctx.stroke();
+        }
+
+        const outputFilename = `detected_form_fields_${timestamp}_page_${page.pageNumber}.png`;
+        const outputPath = join(debugDir, outputFilename);
+
+        const pngBuffer = await canvas.toBuffer('png');
+        await writeFile(outputPath, new Uint8Array(pngBuffer));
+      }
+    }
+
+    return c.json<TDetectFormFieldsResponse>(detectedFields);
+  } catch (error) {
+    if (error instanceof AppError) {
+      throw error;
+    }
+
+    console.error('Failed to detect form fields from PDF:', error);
+
+    throw new AppError(AppErrorCode.UNKNOWN_ERROR, {
+      message: `Failed to detect form fields from PDF: ${error instanceof Error ? error.message : String(error)}`,
+      userMessage: 'An error occurred while detecting form fields. Please try again.',
+    });
+  }
+});

apps/remix/server/api/ai.types.ts

@@ -0,0 +1,50 @@
+import { z } from 'zod';
+
+import type { TDetectedFormField } from '@documenso/lib/types/ai';
+
+export const ZGenerateTextRequestSchema = z.object({
+  prompt: z.string().min(1, 'Prompt is required').max(5000, 'Prompt is too long'),
+});
+
+export const ZGenerateTextResponseSchema = z.object({
+  text: z.string(),
+});
+
+export type TGenerateTextRequest = z.infer<typeof ZGenerateTextRequestSchema>;
+export type TGenerateTextResponse = z.infer<typeof ZGenerateTextResponseSchema>;
+
+export const ZDetectedFormFieldSchema = z.object({
+  boundingBox: z
+    .array(z.number())
+    .length(4)
+    .describe('Bounding box [ymin, xmin, ymax, xmax] in normalized 0-1000 range'),
+  label: z
+    .enum([
+      'SIGNATURE',
+      'INITIALS',
+      'NAME',
+      'EMAIL',
+      'DATE',
+      'TEXT',
+      'NUMBER',
+      'RADIO',
+      'CHECKBOX',
+      'DROPDOWN',
+    ])
+    .describe('Documenso field type inferred from nearby label text or visual characteristics'),
+  pageNumber: z
+    .number()
+    .int()
+    .positive()
+    .describe('1-indexed page number where field was detected'),
+});
+
+export const ZDetectFormFieldsRequestSchema = z.object({
+  documentId: z.string().min(1, { message: 'Document ID is required' }),
+});
+
+export const ZDetectFormFieldsResponseSchema = z.array(ZDetectedFormFieldSchema);
+
+export type TDetectFormFieldsRequest = z.infer<typeof ZDetectFormFieldsRequestSchema>;
+export type TDetectFormFieldsResponse = z.infer<typeof ZDetectFormFieldsResponseSchema>;
+export type { TDetectedFormField };

apps/remix/server/api/files.helpers.ts

@@ -1,82 +0,0 @@
-import { type DocumentDataType, DocumentStatus } from '@prisma/client';
-import { type Context } from 'hono';
-
-import { sha256 } from '@documenso/lib/universal/crypto';
-import { getFileServerSide } from '@documenso/lib/universal/upload/get-file.server';
-
-import type { HonoEnv } from '../router';
-
-type HandleEnvelopeItemFileRequestOptions = {
-  title: string;
-  status: DocumentStatus;
-  documentData: {
-    type: DocumentDataType;
-    data: string;
-    initialData: string;
-  };
-  version: 'signed' | 'original';
-  isDownload: boolean;
-  context: Context<HonoEnv>;
-};
-
-/**
- * Helper function to handle envelope item file requests (both view and download)
- */
-export const handleEnvelopeItemFileRequest = async ({
-  title,
-  status,
-  documentData,
-  version,
-  isDownload,
-  context: c,
-}: HandleEnvelopeItemFileRequestOptions) => {
-  const documentDataToUse = version === 'signed' ? documentData.data : documentData.initialData;
-
-  const etag = Buffer.from(sha256(documentDataToUse)).toString('hex');
-
-  if (c.req.header('If-None-Match') === etag) {
-    return c.body(null, 304);
-  }
-
-  const file = await getFileServerSide({
-    type: documentData.type,
-    data: documentDataToUse,
-  }).catch((error) => {
-    console.error(error);
-
-    return null;
-  });
-
-  if (!file) {
-    return c.json({ error: 'File not found' }, 404);
-  }
-
-  c.header('Content-Type', 'application/pdf');
-  c.header('Content-Length', file.length.toString());
-  c.header('ETag', etag);
-
-  if (!isDownload) {
-    if (status === DocumentStatus.COMPLETED) {
-      c.header('Cache-Control', 'public, max-age=31536000, immutable');
-    } else {
-      // Set a tiny 1 minute cache, with must-revalidate to ensure the client always checks for updates.
-      c.header('Cache-Control', 'public, max-age=60, must-revalidate');
-    }
-  }
-
-  if (isDownload) {
-    // Generate filename following the pattern from envelope-download-dialog.tsx
-    const baseTitle = title.replace(/\.pdf$/, '');
-    const suffix = version === 'signed' ? '_signed.pdf' : '.pdf';
-    const filename = `${baseTitle}${suffix}`;
-
-    c.header('Content-Disposition', `attachment; filename="${filename}"`);
-
-    // For downloads, prevent caching to ensure fresh data
-    c.header('Cache-Control', 'no-cache, no-store, must-revalidate');
-    c.header('Pragma', 'no-cache');
-    c.header('Expires', '0');
-  }
-
-  return c.body(file);
-};

apps/remix/server/api/files.ts

@@ -1,23 +1,21 @@
+import { PDFDocument } from '@cantoo/pdf-lib';
 import { sValidator } from '@hono/standard-validator';
-import type { Prisma } from '@prisma/client';
 import { Hono } from 'hono';
 
-import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { getTeamById } from '@documenso/lib/server-only/team/get-team';
-import { putNormalizedPdfFileServerSide } from '@documenso/lib/universal/upload/put-file.server';
-import { getPresignPostUrl } from '@documenso/lib/universal/upload/server-actions';
-import { prisma } from '@documenso/prisma';
+import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
+import { putFileServerSide } from '@documenso/lib/universal/upload/put-file.server';
+import {
+  getPresignGetUrl,
+  getPresignPostUrl,
+} from '@documenso/lib/universal/upload/server-actions';
 
 import type { HonoEnv } from '../router';
-import { handleEnvelopeItemFileRequest } from './files.helpers';
 import {
+  type TGetPresignedGetUrlResponse,
   type TGetPresignedPostUrlResponse,
-  ZGetEnvelopeItemFileDownloadRequestParamsSchema,
-  ZGetEnvelopeItemFileRequestParamsSchema,
-  ZGetEnvelopeItemFileTokenDownloadRequestParamsSchema,
-  ZGetEnvelopeItemFileTokenRequestParamsSchema,
+  ZGetPresignedGetUrlRequestSchema,
   ZGetPresignedPostUrlRequestSchema,
   ZUploadPdfRequestSchema,
 } from './files.types';
@@ -44,7 +42,29 @@ export const filesRoute = new Hono<HonoEnv>()
         return c.json({ error: 'File too large' }, 400);
       }
 
-      const result = await putNormalizedPdfFileServerSide(file);
+      const arrayBuffer = await file.arrayBuffer();
+
+      const pdf = await PDFDocument.load(arrayBuffer).catch((e) => {
+        console.error(`PDF upload parse error: ${e.message}`);
+
+        throw new AppError('INVALID_DOCUMENT_FILE');
+      });
+
+      if (pdf.isEncrypted) {
+        throw new AppError('INVALID_DOCUMENT_FILE');
+      }
+
+      // Todo: (RR7) Test this.
+      if (!file.name.endsWith('.pdf')) {
+        Object.defineProperty(file, 'name', {
+          writable: true,
+          value: `${file.name}.pdf`,
+        });
+      }
+
+      const { type, data } = await putFileServerSide(file);
+
+      const result = await createDocumentData({ type, data });
 
       return c.json(result);
     } catch (error) {
@@ -52,6 +72,19 @@ export const filesRoute = new Hono<HonoEnv>()
       return c.json({ error: 'Upload failed' }, 500);
     }
   })
+  .post('/presigned-get-url', sValidator('json', ZGetPresignedGetUrlRequestSchema), async (c) => {
+    const { key } = await c.req.json();
+
+    try {
+      const { url } = await getPresignGetUrl(key || '');
+
+      return c.json({ url } satisfies TGetPresignedGetUrlResponse);
+    } catch (err) {
+      console.error(err);
+
+      throw new AppError(AppErrorCode.UNKNOWN_ERROR);
+    }
+  })
   .post('/presigned-post-url', sValidator('json', ZGetPresignedPostUrlRequestSchema), async (c) => {
     const { fileName, contentType } = c.req.valid('json');
 
@@ -64,244 +97,4 @@ export const filesRoute = new Hono<HonoEnv>()
 
       throw new AppError(AppErrorCode.UNKNOWN_ERROR);
     }
-  })
-  .get(
-    '/envelope/:envelopeId/envelopeItem/:envelopeItemId',
-    sValidator('param', ZGetEnvelopeItemFileRequestParamsSchema),
-    async (c) => {
-      const { envelopeId, envelopeItemId } = c.req.valid('param');
-
-      const session = await getOptionalSession(c);
-
-      if (!session.user) {
-        return c.json({ error: 'Unauthorized' }, 401);
-      }
-
-      const envelope = await prisma.envelope.findFirst({
-        where: {
-          id: envelopeId,
-        },
-        include: {
-          envelopeItems: {
-            where: {
-              id: envelopeItemId,
-            },
-            include: {
-              documentData: true,
-            },
-          },
-        },
-      });
-
-      if (!envelope) {
-        return c.json({ error: 'Envelope not found' }, 404);
-      }
-
-      const [envelopeItem] = envelope.envelopeItems;
-
-      if (!envelopeItem) {
-        return c.json({ error: 'Envelope item not found' }, 404);
-      }
-
-      const team = await getTeamById({
-        userId: session.user.id,
-        teamId: envelope.teamId,
-      }).catch((error) => {
-        console.error(error);
-
-        return null;
-      });
-
-      if (!team) {
-        return c.json(
-          { error: 'User does not have access to the team that this envelope is associated with' },
-          403,
-        );
-      }
-
-      if (!envelopeItem.documentData) {
-        return c.json({ error: 'Document data not found' }, 404);
-      }
-
-      return await handleEnvelopeItemFileRequest({
-        title: envelopeItem.title,
-        status: envelope.status,
-        documentData: envelopeItem.documentData,
-        version: 'signed',
-        isDownload: false,
-        context: c,
-      });
-    },
-  )
-  .get(
-    '/envelope/:envelopeId/envelopeItem/:envelopeItemId/download/:version?',
-    sValidator('param', ZGetEnvelopeItemFileDownloadRequestParamsSchema),
-    async (c) => {
-      const { envelopeId, envelopeItemId, version } = c.req.valid('param');
-
-      const session = await getOptionalSession(c);
-
-      if (!session.user) {
-        return c.json({ error: 'Unauthorized' }, 401);
-      }
-
-      const envelope = await prisma.envelope.findFirst({
-        where: {
-          id: envelopeId,
-        },
-        include: {
-          envelopeItems: {
-            where: {
-              id: envelopeItemId,
-            },
-            include: {
-              documentData: true,
-            },
-          },
-        },
-      });
-
-      if (!envelope) {
-        return c.json({ error: 'Envelope not found' }, 404);
-      }
-
-      const [envelopeItem] = envelope.envelopeItems;
-
-      if (!envelopeItem) {
-        return c.json({ error: 'Envelope item not found' }, 404);
-      }
-
-      const team = await getTeamById({
-        userId: session.user.id,
-        teamId: envelope.teamId,
-      }).catch((error) => {
-        console.error(error);
-
-        return null;
-      });
-
-      if (!team) {
-        return c.json(
-          { error: 'User does not have access to the team that this envelope is associated with' },
-          403,
-        );
-      }
-
-      if (!envelopeItem.documentData) {
-        return c.json({ error: 'Document data not found' }, 404);
-      }
-
-      return await handleEnvelopeItemFileRequest({
-        title: envelopeItem.title,
-        status: envelope.status,
-        documentData: envelopeItem.documentData,
-        version,
-        isDownload: true,
-        context: c,
-      });
-    },
-  )
-  .get(
-    '/token/:token/envelopeItem/:envelopeItemId',
-    sValidator('param', ZGetEnvelopeItemFileTokenRequestParamsSchema),
-    async (c) => {
-      const { token, envelopeItemId } = c.req.valid('param');
-
-      let envelopeWhereQuery: Prisma.EnvelopeItemWhereUniqueInput = {
-        id: envelopeItemId,
-        envelope: {
-          recipients: {
-            some: {
-              token,
-            },
-          },
-        },
-      };
-
-      if (token.startsWith('qr_')) {
-        envelopeWhereQuery = {
-          id: envelopeItemId,
-          envelope: {
-            qrToken: token,
-          },
-        };
-      }
-
-      const envelopeItem = await prisma.envelopeItem.findUnique({
-        where: envelopeWhereQuery,
-        include: {
-          envelope: true,
-          documentData: true,
-        },
-      });
-
-      if (!envelopeItem) {
-        return c.json({ error: 'Envelope item not found' }, 404);
-      }
-
-      if (!envelopeItem.documentData) {
-        return c.json({ error: 'Document data not found' }, 404);
-      }
-
-      return await handleEnvelopeItemFileRequest({
-        title: envelopeItem.title,
-        status: envelopeItem.envelope.status,
-        documentData: envelopeItem.documentData,
-        version: 'signed',
-        isDownload: false,
-        context: c,
-      });
-    },
-  )
-  .get(
-    '/token/:token/envelopeItem/:envelopeItemId/download/:version?',
-    sValidator('param', ZGetEnvelopeItemFileTokenDownloadRequestParamsSchema),
-    async (c) => {
-      const { token, envelopeItemId, version } = c.req.valid('param');
-
-      let envelopeWhereQuery: Prisma.EnvelopeItemWhereUniqueInput = {
-        id: envelopeItemId,
-        envelope: {
-          recipients: {
-            some: {
-              token,
-            },
-          },
-        },
-      };
-
-      if (token.startsWith('qr_')) {
-        envelopeWhereQuery = {
-          id: envelopeItemId,
-          envelope: {
-            qrToken: token,
-          },
-        };
-      }
-
-      const envelopeItem = await prisma.envelopeItem.findUnique({
-        where: envelopeWhereQuery,
-        include: {
-          envelope: true,
-          documentData: true,
-        },
-      });
-
-      if (!envelopeItem) {
-        return c.json({ error: 'Envelope item not found' }, 404);
-      }
-
-      if (!envelopeItem.documentData) {
-        return c.json({ error: 'Document data not found' }, 404);
-      }
-
-      return await handleEnvelopeItemFileRequest({
-        title: envelopeItem.title,
-        status: envelopeItem.envelope.status,
-        documentData: envelopeItem.documentData,
-        version,
-        isDownload: true,
-        context: c,
-      });
-    },
-  );
+  });

apps/remix/server/api/files.types.ts

@@ -24,43 +24,15 @@ export const ZGetPresignedPostUrlResponseSchema = z.object({
   url: z.string().min(1),
 });
 
+export const ZGetPresignedGetUrlRequestSchema = z.object({
+  key: z.string().min(1),
+});
+
+export const ZGetPresignedGetUrlResponseSchema = z.object({
+  url: z.string().min(1),
+});
+
 export type TGetPresignedPostUrlRequest = z.infer<typeof ZGetPresignedPostUrlRequestSchema>;
 export type TGetPresignedPostUrlResponse = z.infer<typeof ZGetPresignedPostUrlResponseSchema>;
-
-export const ZGetEnvelopeItemFileRequestParamsSchema = z.object({
-  envelopeId: z.string().min(1),
-  envelopeItemId: z.string().min(1),
-});
-
-export type TGetEnvelopeItemFileRequestParams = z.infer<
-  typeof ZGetEnvelopeItemFileRequestParamsSchema
->;
-
-export const ZGetEnvelopeItemFileTokenRequestParamsSchema = z.object({
-  token: z.string().min(1),
-  envelopeItemId: z.string().min(1),
-});
-
-export type TGetEnvelopeItemFileTokenRequestParams = z.infer<
-  typeof ZGetEnvelopeItemFileTokenRequestParamsSchema
->;
-
-export const ZGetEnvelopeItemFileDownloadRequestParamsSchema = z.object({
-  envelopeId: z.string().min(1),
-  envelopeItemId: z.string().min(1),
-  version: z.enum(['signed', 'original']).default('signed'),
-});
-
-export type TGetEnvelopeItemFileDownloadRequestParams = z.infer<
-  typeof ZGetEnvelopeItemFileDownloadRequestParamsSchema
->;
-
-export const ZGetEnvelopeItemFileTokenDownloadRequestParamsSchema = z.object({
-  token: z.string().min(1),
-  envelopeItemId: z.string().min(1),
-  version: z.enum(['signed', 'original']).default('signed'),
-});
-
-export type TGetEnvelopeItemFileTokenDownloadRequestParams = z.infer<
-  typeof ZGetEnvelopeItemFileTokenDownloadRequestParamsSchema
->;
+export type TGetPresignedGetUrlRequest = z.infer<typeof ZGetPresignedGetUrlRequestSchema>;
+export type TGetPresignedGetUrlResponse = z.infer<typeof ZGetPresignedGetUrlResponseSchema>;

apps/remix/server/router.ts

@@ -8,12 +8,13 @@ import type { Logger } from 'pino';
 
 import { tsRestHonoApp } from '@documenso/api/hono';
 import { auth } from '@documenso/auth/server';
-import { API_V2_BETA_URL, API_V2_URL } from '@documenso/lib/constants/app';
+import { API_V2_BETA_URL } from '@documenso/lib/constants/app';
 import { jobsClient } from '@documenso/lib/jobs/client';
 import { getIpAddress } from '@documenso/lib/universal/get-ip-address';
 import { logger } from '@documenso/lib/utils/logger';
 import { openApiDocument } from '@documenso/trpc/server/open-api';
 
+import { aiRoute } from './api/ai';
 import { filesRoute } from './api/files';
 import { type AppContext, appContext } from './context';
 import { appMiddleware } from './middleware';
@@ -83,28 +84,18 @@ app.route('/api/auth', auth);
 // Files route.
 app.route('/api/files', filesRoute);
 
+// AI route.
+app.route('/api/ai', aiRoute);
+
 // API servers.
 app.use(`/api/v1/*`, cors());
 app.route('/api/v1', tsRestHonoApp);
 app.use('/api/jobs/*', jobsClient.getApiHandler());
 app.use('/api/trpc/*', reactRouterTrpcServer);
 
-// Unstable API server routes. Order matters for these two.
-app.get(`${API_V2_URL}/openapi.json`, (c) => c.json(openApiDocument));
-app.use(`${API_V2_URL}/*`, cors());
-app.use(`${API_V2_URL}/*`, async (c) =>
-  openApiTrpcServerHandler(c, {
-    isBeta: false,
-  }),
-);
-
 // Unstable API server routes. Order matters for these two.
 app.get(`${API_V2_BETA_URL}/openapi.json`, (c) => c.json(openApiDocument));
 app.use(`${API_V2_BETA_URL}/*`, cors());
-app.use(`${API_V2_BETA_URL}/*`, async (c) =>
-  openApiTrpcServerHandler(c, {
-    isBeta: true,
-  }),
-);
+app.use(`${API_V2_BETA_URL}/*`, async (c) => openApiTrpcServerHandler(c));
 
 export default app;

apps/remix/server/trpc/hono-trpc-open-api.ts

@@ -1,22 +1,15 @@
 import type { Context } from 'hono';
+import { createOpenApiFetchHandler } from 'trpc-to-openapi';
 
-import { API_V2_BETA_URL, API_V2_URL } from '@documenso/lib/constants/app';
+import { API_V2_BETA_URL } from '@documenso/lib/constants/app';
 import { AppError, genericErrorCodeToTrpcErrorCodeMap } from '@documenso/lib/errors/app-error';
 import { createTrpcContext } from '@documenso/trpc/server/context';
 import { appRouter } from '@documenso/trpc/server/router';
-import { createOpenApiFetchHandler } from '@documenso/trpc/utils/openapi-fetch-handler';
 import { handleTrpcRouterError } from '@documenso/trpc/utils/trpc-error-handler';
 
-type OpenApiTrpcServerHandlerOptions = {
-  isBeta: boolean;
-};
-
-export const openApiTrpcServerHandler = async (
-  c: Context,
-  { isBeta }: OpenApiTrpcServerHandlerOptions,
-) => {
+export const openApiTrpcServerHandler = async (c: Context) => {
   return createOpenApiFetchHandler<typeof appRouter>({
-    endpoint: isBeta ? API_V2_BETA_URL : API_V2_URL,
+    endpoint: API_V2_BETA_URL,
     router: appRouter,
     createContext: async () => createTrpcContext({ c, requestSource: 'apiV2' }),
     req: c.req.raw,

package.json

@@ -44,7 +44,7 @@
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "@lingui/cli": "^5.2.0",
-    "@prisma/client": "^6.18.0",
+    "@prisma/client": "^6.8.2",
     "dotenv": "^16.5.0",
     "dotenv-cli": "^8.0.0",
     "eslint": "^8.40.0",
@@ -54,22 +54,11 @@
     "nodemailer": "^6.10.1",
     "playwright": "1.52.0",
     "prettier": "^3.3.3",
-    "prisma": "^6.18.0",
+    "prisma": "^6.8.2",
     "prisma-extension-kysely": "^3.0.0",
-    "prisma-json-types-generator": "^3.6.2",
     "prisma-kysely": "^1.8.0",
     "rimraf": "^5.0.1",
     "turbo": "^1.9.3",
-    "@trpc/client": "11.7.0",
-    "@trpc/react-query": "11.7.0",
-    "@trpc/server": "11.7.0",
-    "superjson": "^2.2.5",
-    "trpc-to-openapi": "2.4.0",
-    "zod-openapi": "^4.2.4",
-    "@ts-rest/core": "^3.52.1",
-    "@ts-rest/open-api": "^3.52.1",
-    "@ts-rest/serverless": "^3.52.1",
-    "zod-prisma-types": "3.3.5",
     "vite": "^6.3.5"
   },
   "name": "@documenso/root",
@@ -82,17 +71,15 @@
     "@documenso/prisma": "^0.0.0",
     "@lingui/conf": "^5.2.0",
     "@lingui/core": "^5.2.0",
+    "ai": "^5.0.82",
     "inngest-cli": "^0.29.1",
     "luxon": "^3.5.0",
     "mupdf": "^1.0.0",
     "react": "^18",
     "typescript": "5.6.2",
-    "zod": "^3.25.76"
-  },
-  "overrides": {
-    "zod": "^3.25.76"
+    "zod": "3.25.76"
   },
   "trigger.dev": {
     "endpointId": "documenso-app"
   }
-}
+}

packages/api/package.json

@@ -17,14 +17,14 @@
   "dependencies": {
     "@documenso/lib": "*",
     "@documenso/prisma": "*",
-    "@ts-rest/core": "^3.52.0",
-    "@ts-rest/open-api": "^3.52.0",
-    "@ts-rest/serverless": "^3.52.0",
+    "@ts-rest/core": "^3.30.5",
+    "@ts-rest/open-api": "^3.33.0",
+    "@ts-rest/serverless": "^3.30.5",
     "@types/swagger-ui-react": "^5.18.0",
     "luxon": "^3.4.0",
-    "superjson": "^2.2.5",
+    "superjson": "^1.13.1",
     "swagger-ui-react": "^5.21.0",
     "ts-pattern": "^5.0.5",
-    "zod": "^3.25.76"
+    "zod": "3.25.76"
   }
 }

packages/api/v1/implementation.ts

@@ -20,12 +20,12 @@ import {
   getEnvelopeWhereInput,
 } from '@documenso/lib/server-only/envelope/get-envelope-by-id';
 import { deleteDocumentField } from '@documenso/lib/server-only/field/delete-document-field';
-import { updateEnvelopeFields } from '@documenso/lib/server-only/field/update-envelope-fields';
+import { updateDocumentFields } from '@documenso/lib/server-only/field/update-document-fields';
 import { insertFormValuesInPdf } from '@documenso/lib/server-only/pdf/insert-form-values-in-pdf';
-import { deleteEnvelopeRecipient } from '@documenso/lib/server-only/recipient/delete-envelope-recipient';
+import { deleteDocumentRecipient } from '@documenso/lib/server-only/recipient/delete-document-recipient';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { setDocumentRecipients } from '@documenso/lib/server-only/recipient/set-document-recipients';
-import { updateEnvelopeRecipients } from '@documenso/lib/server-only/recipient/update-envelope-recipients';
+import { updateDocumentRecipients } from '@documenso/lib/server-only/recipient/update-document-recipients';
 import { createDocumentFromTemplate } from '@documenso/lib/server-only/template/create-document-from-template';
 import { deleteTemplate } from '@documenso/lib/server-only/template/delete-template';
 import { findTemplates } from '@documenso/lib/server-only/template/find-templates';
@@ -1285,7 +1285,7 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
       };
     }
 
-    const updatedRecipient = await updateEnvelopeRecipients({
+    const updatedRecipient = await updateDocumentRecipients({
       userId: user.id,
       teamId: team.id,
       id: {
@@ -1336,7 +1336,7 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
       },
     });
 
-    const deletedRecipient = await deleteEnvelopeRecipient({
+    const deletedRecipient = await deleteDocumentRecipient({
       userId: user.id,
       teamId: team.id,
       recipientId: Number(recipientId),
@@ -1634,13 +1634,10 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
       };
     }
 
-    const { fields } = await updateEnvelopeFields({
+    const { fields } = await updateDocumentFields({
       userId: user.id,
       teamId: team.id,
-      id: {
-        type: 'documentId',
-        id: legacyDocumentId,
-      },
+      documentId: legacyDocumentId,
       fields: [
         {
           id: Number(fieldId),

packages/app-tests/constants/field-alignment-pdf.ts

@@ -1,498 +0,0 @@
-import { FieldType } from '@prisma/client';
-
-import type { TFieldAndMeta } from '@documenso/lib/types/field-meta';
-import { toCheckboxCustomText } from '@documenso/lib/utils/fields';
-
-export type FieldTestData = TFieldAndMeta & {
-  page: number;
-  positionX: number;
-  positionY: number;
-  width: number;
-  height: number;
-  customText: string;
-  signature?: string;
-};
-
-const columnWidth = 19.125;
-const rowHeight = 6.7;
-
-const alignmentGridStartX = 31;
-const alignmentGridStartY = 19.02;
-
-export const ALIGNMENT_TEST_FIELDS: FieldTestData[] = [
-  /**
-   * Row 1 EMAIL
-   */
-  {
-    type: FieldType.EMAIL,
-    fieldMeta: {
-      fontSize: 10,
-      textAlign: 'left',
-      type: 'email',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: 'admin@documenso.com',
-  },
-  {
-    type: FieldType.EMAIL,
-    fieldMeta: {
-      textAlign: 'center',
-      type: 'email',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: 'admin@documenso.com',
-  },
-  {
-    type: FieldType.EMAIL,
-    fieldMeta: {
-      fontSize: 20,
-      textAlign: 'right',
-      type: 'email',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: 'admin@documenso.com',
-  },
-  /**
-   * Row 2 NAME
-   */
-  {
-    type: FieldType.NAME,
-    fieldMeta: {
-      fontSize: 10,
-      textAlign: 'left',
-      type: 'name',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: 'John Doe',
-  },
-  {
-    type: FieldType.NAME,
-    fieldMeta: {
-      textAlign: 'center',
-      type: 'name',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: 'John Doe',
-  },
-  {
-    type: FieldType.NAME,
-    fieldMeta: {
-      fontSize: 20,
-      textAlign: 'right',
-      type: 'name',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: 'John Doe',
-  },
-  /**
-   * Row 3 DATE
-   */
-  {
-    type: FieldType.DATE,
-    fieldMeta: {
-      fontSize: 10,
-      textAlign: 'left',
-      type: 'date',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '123456789',
-  },
-  {
-    type: FieldType.DATE,
-    fieldMeta: {
-      textAlign: 'center',
-      type: 'date',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '123456789',
-  },
-  {
-    type: FieldType.DATE,
-    fieldMeta: {
-      fontSize: 20,
-      textAlign: 'right',
-      type: 'date',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '123456789',
-  },
-  /**
-   * Row 4 TEXT
-   */
-  {
-    type: FieldType.TEXT,
-    fieldMeta: {
-      fontSize: 10,
-      textAlign: 'left',
-      type: 'text',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '123456789',
-  },
-  {
-    type: FieldType.TEXT,
-    fieldMeta: {
-      textAlign: 'center',
-      type: 'text',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '123456789',
-  },
-  {
-    type: FieldType.TEXT,
-    fieldMeta: {
-      fontSize: 20,
-      textAlign: 'right',
-      type: 'text',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '123456789',
-  },
-  /**
-   * Row 5 NUMBER
-   */
-  {
-    type: FieldType.NUMBER,
-    fieldMeta: {
-      fontSize: 10,
-      textAlign: 'left',
-      type: 'number',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '123456789',
-  },
-  {
-    type: FieldType.NUMBER,
-    fieldMeta: {
-      textAlign: 'center',
-      type: 'number',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '123456789',
-  },
-  {
-    type: FieldType.NUMBER,
-    fieldMeta: {
-      fontSize: 20,
-      textAlign: 'right',
-      type: 'number',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '123456789',
-  },
-  /**
-   * Row 6 Initials
-   */
-  {
-    type: FieldType.INITIALS,
-    fieldMeta: {
-      fontSize: 10,
-      textAlign: 'left',
-      type: 'initials',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: 'JD',
-  },
-  {
-    type: FieldType.INITIALS,
-    fieldMeta: {
-      textAlign: 'center',
-      type: 'initials',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: 'JD',
-  },
-  {
-    type: FieldType.INITIALS,
-    fieldMeta: {
-      fontSize: 20,
-      textAlign: 'right',
-      type: 'initials',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: 'JD',
-  },
-  /**
-   * Row 7 Radio
-   */
-  {
-    type: FieldType.RADIO,
-    fieldMeta: {
-      fontSize: 10,
-      direction: 'vertical',
-      type: 'radio',
-      values: [
-        { id: 1, checked: true, value: 'Option 1' },
-        { id: 2, checked: false, value: 'Option 2' },
-      ],
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '0',
-  },
-  {
-    type: FieldType.RADIO,
-    fieldMeta: {
-      direction: 'vertical',
-      type: 'radio',
-      values: [
-        { id: 1, checked: false, value: 'Option 1' },
-        { id: 2, checked: true, value: 'Option 2' },
-      ],
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '2',
-  },
-  {
-    type: FieldType.RADIO,
-    fieldMeta: {
-      fontSize: 20,
-      direction: 'horizontal',
-      type: 'radio',
-      values: [
-        { id: 1, checked: false, value: 'Option 1' },
-        { id: 2, checked: false, value: 'Option 2' },
-      ],
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '',
-  },
-  /**
-   * Row 8 Checkbox
-   */
-  {
-    type: FieldType.CHECKBOX,
-    fieldMeta: {
-      fontSize: 10,
-      direction: 'vertical',
-      type: 'checkbox',
-      values: [
-        { id: 1, checked: true, value: 'Option 1' },
-        { id: 2, checked: false, value: 'Option 2' },
-      ],
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: toCheckboxCustomText([0]),
-  },
-  {
-    type: FieldType.CHECKBOX,
-    fieldMeta: {
-      direction: 'vertical',
-      type: 'checkbox',
-      values: [
-        { id: 1, checked: false, value: 'Option 1' },
-        { id: 2, checked: true, value: 'Option 2' },
-      ],
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: toCheckboxCustomText([1]),
-  },
-  {
-    type: FieldType.CHECKBOX,
-    fieldMeta: {
-      fontSize: 20,
-      direction: 'horizontal',
-      type: 'checkbox',
-      values: [
-        { id: 1, checked: false, value: 'Option 1' },
-        { id: 2, checked: false, value: 'Option 2' },
-      ],
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '',
-  },
-  /**
-   * Row 8 Dropdown
-   */
-  {
-    type: FieldType.DROPDOWN,
-    fieldMeta: {
-      fontSize: 10,
-      values: [{ value: 'Option 1' }, { value: 'Option 2' }],
-      type: 'dropdown',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: 'Option 1',
-  },
-  {
-    type: FieldType.DROPDOWN,
-    fieldMeta: {
-      values: [{ value: 'Option 1' }, { value: 'Option 2' }],
-      type: 'dropdown',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: 'Option 1',
-  },
-  {
-    type: FieldType.DROPDOWN,
-    fieldMeta: {
-      fontSize: 20,
-      values: [{ value: 'Option 1' }, { value: 'Option 2' }, { value: 'Option 3' }],
-      type: 'dropdown',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: 'Option 1',
-  },
-  /**
-   * Row 9 Signature
-   */
-  {
-    type: FieldType.SIGNATURE,
-    fieldMeta: {
-      fontSize: 10,
-      type: 'signature',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '',
-    signature: 'My Signature',
-  },
-  {
-    type: FieldType.SIGNATURE,
-    fieldMeta: {
-      type: 'signature',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '',
-    signature: 'My Signature',
-  },
-  {
-    type: FieldType.SIGNATURE,
-    fieldMeta: {
-      fontSize: 20,
-      type: 'signature',
-    },
-    page: 1,
-    height: rowHeight,
-    width: columnWidth,
-    positionX: 0,
-    positionY: 0,
-    customText: '',
-    signature: 'My Signature',
-  },
-] as const;
-
-export const formatAlignmentTestFields = ALIGNMENT_TEST_FIELDS.map((field, index) => {
-  const row = Math.floor(index / 3);
-  const column = index % 3;
-
-  return {
-    ...field,
-    positionX: alignmentGridStartX + column * columnWidth,
-    positionY: alignmentGridStartY + row * rowHeight,
-  };
-});

packages/app-tests/constants/field-meta-pdf.ts

@@ -1,482 +0,0 @@
-import { FieldType } from '@prisma/client';
-
-import { toCheckboxCustomText } from '@documenso/lib/utils/fields';
-import {
-  CheckboxValidationRules,
-  numberFormatValues,
-} from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
-
-import type { FieldTestData } from './field-alignment-pdf';
-
-const columnWidth = 20.1;
-const fullColumnWidth = 75.8;
-const rowHeight = 9.8;
-const rowPadding = 1.8;
-
-const alignmentGridStartX = 11.85;
-const alignmentGridStartY = 15.07;
-
-const calculatePosition = (row: number, column: number, width: 'full' | 'column' = 'column') => {
-  return {
-    height: rowHeight,
-    width: width === 'full' ? fullColumnWidth : columnWidth,
-    positionX: alignmentGridStartX + (column ?? 0) * columnWidth,
-    positionY: alignmentGridStartY + row * (rowHeight + rowPadding),
-  };
-};
-
-export const FIELD_META_TEST_FIELDS: FieldTestData[] = [
-  /**
-   * PAGE 2 Signature
-   */
-  {
-    type: FieldType.SIGNATURE,
-    fieldMeta: {
-      type: 'signature',
-    },
-    page: 2,
-    ...calculatePosition(0, 0),
-    customText: '',
-    signature: 'My Signature',
-  },
-  {
-    type: FieldType.SIGNATURE,
-    fieldMeta: {
-      type: 'signature',
-    },
-    page: 2,
-    ...calculatePosition(1, 0),
-    customText: '',
-    signature: 'My Signature',
-  },
-  {
-    type: FieldType.SIGNATURE,
-    fieldMeta: {
-      type: 'signature',
-    },
-    page: 2,
-    ...calculatePosition(2, 0),
-    customText: '',
-    signature: 'My Signature',
-  },
-  {
-    type: FieldType.SIGNATURE,
-    fieldMeta: {
-      type: 'signature',
-    },
-    page: 2,
-    ...calculatePosition(3, 0),
-    customText: '',
-    signature: 'My Signature',
-  },
-
-  /**
-   * PAGE 3 TEXT
-   */
-  {
-    type: FieldType.TEXT,
-    fieldMeta: {
-      type: 'text',
-    },
-    page: 3,
-    ...calculatePosition(0, 0, 'full'),
-    customText: '123456789',
-  },
-  {
-    type: FieldType.TEXT,
-    fieldMeta: {
-      type: 'text',
-    },
-    page: 3,
-    ...calculatePosition(1, 0),
-    customText: '123456789123456789123456789123456789',
-  },
-  {
-    type: FieldType.TEXT,
-    fieldMeta: {
-      type: 'text',
-      characterLimit: 5,
-    },
-    page: 3,
-    ...calculatePosition(2, 0),
-    customText: '12345',
-  },
-  {
-    type: FieldType.TEXT,
-    fieldMeta: {
-      type: 'text',
-      placeholder: 'Demo Placeholder',
-    },
-    page: 3,
-    ...calculatePosition(3, 0),
-    customText: '123456789',
-  },
-  {
-    type: FieldType.TEXT,
-    fieldMeta: {
-      type: 'text',
-      label: 'Demo Label',
-    },
-    page: 3,
-    ...calculatePosition(3, 1),
-    customText: '123456789',
-  },
-  {
-    type: FieldType.TEXT,
-    fieldMeta: {
-      type: 'text',
-      text: 'Prefilled text',
-    },
-    page: 3,
-    ...calculatePosition(3, 2),
-    customText: '123456789',
-  },
-  {
-    type: FieldType.TEXT,
-    fieldMeta: {
-      type: 'text',
-      required: true,
-    },
-    page: 3,
-    ...calculatePosition(4, 0),
-    customText: '123456789',
-  },
-  {
-    type: FieldType.TEXT,
-    fieldMeta: {
-      type: 'text',
-      readOnly: true,
-      text: 'Readonly Value',
-    },
-    page: 3,
-    ...calculatePosition(4, 1),
-    customText: 'Readonly Value',
-  },
-
-  /**
-   * PAGE 4 NUMBER
-   */
-  {
-    type: FieldType.NUMBER,
-    fieldMeta: {
-      type: 'number',
-    },
-    page: 4,
-    ...calculatePosition(0, 0, 'full'),
-    customText: '123456789',
-  },
-  {
-    type: FieldType.NUMBER,
-    fieldMeta: {
-      type: 'number',
-    },
-    page: 4,
-    ...calculatePosition(1, 0),
-    customText: '123456789123456789123456789123456789',
-  },
-  {
-    type: FieldType.NUMBER,
-    fieldMeta: {
-      type: 'number',
-      minValue: 0,
-      maxValue: 100,
-    },
-    page: 4,
-    ...calculatePosition(2, 0),
-    customText: '50',
-  },
-  {
-    type: FieldType.NUMBER,
-    fieldMeta: {
-      type: 'number',
-      numberFormat: numberFormatValues[0].value, // Todo: Envelopes - Check this.
-      value: '123,456,789.00',
-    },
-    page: 4,
-    ...calculatePosition(2, 1),
-    customText: '123,456,789.00',
-  },
-  {
-    type: FieldType.NUMBER,
-    fieldMeta: {
-      type: 'number',
-      placeholder: 'Demo Placeholder',
-    },
-    page: 4,
-    ...calculatePosition(3, 0),
-    customText: '123456789',
-  },
-  {
-    type: FieldType.NUMBER,
-    fieldMeta: {
-      type: 'number',
-      label: 'Demo Label',
-    },
-    page: 4,
-    ...calculatePosition(3, 1),
-    customText: '123456789',
-  },
-  {
-    type: FieldType.NUMBER,
-    fieldMeta: {
-      type: 'number',
-      value: '123',
-    },
-    page: 4,
-    ...calculatePosition(3, 2),
-    customText: '123456789',
-  },
-  {
-    type: FieldType.NUMBER,
-    fieldMeta: {
-      type: 'number',
-      required: true,
-    },
-    page: 4,
-    ...calculatePosition(4, 0),
-    customText: '123456789',
-  },
-  {
-    type: FieldType.NUMBER,
-    fieldMeta: {
-      type: 'number',
-      readOnly: true,
-    },
-    page: 4,
-    ...calculatePosition(4, 1),
-    customText: '123456789',
-  },
-
-  /**
-   * PAGE 5 RADIO
-   */
-  {
-    type: FieldType.RADIO,
-    fieldMeta: {
-      direction: 'horizontal',
-      type: 'radio',
-      values: [
-        { id: 1, checked: true, value: 'Option 1' },
-        { id: 2, checked: false, value: 'Option 2' },
-        { id: 3, checked: false, value: 'Option 3' },
-      ],
-    },
-    page: 5,
-    ...calculatePosition(0, 0, 'full'),
-    customText: '0',
-  },
-  {
-    type: FieldType.RADIO,
-    fieldMeta: {
-      direction: 'vertical',
-      type: 'radio',
-      values: [
-        { id: 1, checked: false, value: 'Option 1' },
-        { id: 2, checked: true, value: 'Option 2' },
-        { id: 3, checked: false, value: 'Option 3' },
-      ],
-    },
-    page: 5,
-    ...calculatePosition(1, 0),
-    customText: '2',
-  },
-  {
-    type: FieldType.RADIO,
-    fieldMeta: {
-      direction: 'vertical',
-      type: 'radio',
-      values: [
-        { id: 1, checked: false, value: 'Option 1' },
-        { id: 2, checked: false, value: 'Option 2' },
-        { id: 3, checked: false, value: 'Option 3' },
-      ],
-    },
-    page: 5,
-    ...calculatePosition(2, 0),
-    customText: '',
-  },
-  {
-    type: FieldType.RADIO,
-    fieldMeta: {
-      direction: 'vertical',
-      type: 'radio',
-      values: [
-        { id: 1, checked: false, value: 'Option 1' },
-        { id: 2, checked: false, value: 'Option 2' },
-        { id: 3, checked: false, value: 'Option 3' },
-      ],
-    },
-    page: 5,
-    ...calculatePosition(2, 1),
-    customText: '',
-  },
-
-  /**
-   * PAGE 6 CHECKBOX
-   */
-  {
-    type: FieldType.CHECKBOX,
-    fieldMeta: {
-      direction: 'horizontal',
-      type: 'checkbox',
-      values: [
-        { id: 1, checked: true, value: 'Option 1' },
-        { id: 2, checked: false, value: 'Option 2' },
-        { id: 2, checked: false, value: 'Option 3' },
-        { id: 2, checked: false, value: 'Option 4' },
-      ],
-    },
-    page: 6,
-    ...calculatePosition(0, 0, 'full'),
-    customText: toCheckboxCustomText([0]),
-  },
-  {
-    type: FieldType.CHECKBOX,
-    fieldMeta: {
-      direction: 'vertical',
-      type: 'checkbox',
-      values: [
-        { id: 1, checked: false, value: 'Option 1' },
-        { id: 2, checked: true, value: 'Option 2' },
-        { id: 2, checked: true, value: 'Option 3' },
-      ],
-    },
-    page: 6,
-    ...calculatePosition(1, 0),
-    customText: toCheckboxCustomText([1]),
-  },
-  {
-    type: FieldType.CHECKBOX,
-    fieldMeta: {
-      direction: 'vertical',
-      type: 'checkbox',
-      required: true,
-      values: [
-        { id: 1, checked: false, value: 'Option 1' },
-        { id: 2, checked: false, value: 'Option 2' },
-      ],
-    },
-    page: 6,
-    ...calculatePosition(2, 0),
-    customText: '',
-  },
-  {
-    type: FieldType.CHECKBOX,
-    fieldMeta: {
-      direction: 'vertical',
-      type: 'checkbox',
-      readOnly: true,
-      values: [
-        { id: 1, checked: false, value: 'Option 1' },
-        { id: 2, checked: false, value: 'Option 2' },
-      ],
-    },
-    page: 6,
-    ...calculatePosition(2, 1),
-    customText: '',
-  },
-  {
-    type: FieldType.CHECKBOX,
-    fieldMeta: {
-      direction: 'vertical',
-      type: 'checkbox',
-      validationRule: CheckboxValidationRules.SELECT_AT_LEAST,
-      validationLength: 2,
-      values: [
-        { id: 1, checked: false, value: 'Option 1' },
-        { id: 2, checked: false, value: 'Option 2' },
-        { id: 3, checked: false, value: 'Option 3' },
-      ],
-    },
-    page: 6,
-    ...calculatePosition(3, 0),
-    customText: '',
-  },
-  {
-    type: FieldType.CHECKBOX,
-    fieldMeta: {
-      direction: 'vertical',
-      type: 'checkbox',
-      validationRule: CheckboxValidationRules.SELECT_EXACTLY,
-      validationLength: 2,
-      values: [
-        { id: 1, checked: false, value: 'Option 1' },
-        { id: 2, checked: false, value: 'Option 2' },
-        { id: 3, checked: false, value: 'Option 3' },
-      ],
-    },
-    page: 6,
-    ...calculatePosition(3, 1),
-    customText: '',
-  },
-  {
-    type: FieldType.CHECKBOX,
-    fieldMeta: {
-      direction: 'vertical',
-      type: 'checkbox',
-      validationRule: CheckboxValidationRules.SELECT_AT_MOST,
-      validationLength: 2,
-      values: [
-        { id: 1, checked: false, value: 'Option 1' },
-        { id: 2, checked: false, value: 'Option 2' },
-        { id: 3, checked: false, value: 'Option 3' },
-      ],
-    },
-    page: 6,
-    ...calculatePosition(3, 2),
-    customText: '',
-  },
-
-  /**
-   * PAGE 7 DROPDOWN
-   */
-  {
-    type: FieldType.DROPDOWN,
-    fieldMeta: {
-      values: [{ value: 'Option 1' }, { value: 'Option 2' }],
-      type: 'dropdown',
-    },
-    page: 7,
-    ...calculatePosition(0, 0, 'full'),
-    customText: 'Option 1',
-  },
-  {
-    type: FieldType.DROPDOWN,
-    fieldMeta: {
-      values: [{ value: 'Option 1' }, { value: 'Option 2' }],
-      type: 'dropdown',
-      defaultValue: 'Option 1',
-    },
-    page: 7,
-    ...calculatePosition(1, 0),
-    customText: 'Option 1',
-  },
-  {
-    type: FieldType.DROPDOWN,
-    fieldMeta: {
-      values: [{ value: 'Option 1' }, { value: 'Option 2' }, { value: 'Option 3' }],
-      type: 'dropdown',
-      required: true,
-    },
-    page: 7,
-    ...calculatePosition(2, 0),
-    customText: 'Option 1',
-  },
-  {
-    type: FieldType.DROPDOWN,
-    fieldMeta: {
-      values: [{ value: 'Option 1' }, { value: 'Option 2' }, { value: 'Option 3' }],
-      type: 'dropdown',
-      readOnly: true,
-    },
-    page: 7,
-    ...calculatePosition(2, 1),
-    customText: 'Option 1',
-  },
-] as const;
-
-export const formatFieldMetaTestFields = FIELD_META_TEST_FIELDS.map((field, index) => {
-  return {
-    ...field,
-  };
-});

packages/app-tests/e2e/api/v2/envelopes-api.spec.ts

@@ -1,560 +0,0 @@
-import { expect, test } from '@playwright/test';
-import type { Team, User } from '@prisma/client';
-import fs from 'node:fs';
-import path from 'node:path';
-import { pick } from 'remeda';
-
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import { createApiToken } from '@documenso/lib/server-only/public-api/create-api-token';
-import { prisma } from '@documenso/prisma';
-import {
-  DocumentDistributionMethod,
-  DocumentSigningOrder,
-  DocumentStatus,
-  DocumentVisibility,
-  EnvelopeType,
-  FieldType,
-  FolderType,
-  RecipientRole,
-} from '@documenso/prisma/client';
-import { seedUser } from '@documenso/prisma/seed/users';
-import type { TCreateEnvelopeItemsPayload } from '@documenso/trpc/server/envelope-router/create-envelope-items.types';
-import type {
-  TCreateEnvelopePayload,
-  TCreateEnvelopeResponse,
-} from '@documenso/trpc/server/envelope-router/create-envelope.types';
-import type { TCreateEnvelopeRecipientsRequest } from '@documenso/trpc/server/envelope-router/envelope-recipients/create-envelope-recipients.types';
-import type { TGetEnvelopeResponse } from '@documenso/trpc/server/envelope-router/get-envelope.types';
-import type { TUpdateEnvelopeRequest } from '@documenso/trpc/server/envelope-router/update-envelope.types';
-
-import { formatAlignmentTestFields } from '../../../constants/field-alignment-pdf';
-import { FIELD_META_TEST_FIELDS } from '../../../constants/field-meta-pdf';
-
-const WEBAPP_BASE_URL = NEXT_PUBLIC_WEBAPP_URL();
-const baseUrl = `${WEBAPP_BASE_URL}/api/v2-beta`;
-
-test.describe.configure({
-  mode: 'parallel',
-});
-
-test.describe('API V2 Envelopes', () => {
-  let userA: User, teamA: Team, userB: User, teamB: Team, tokenA: string, tokenB: string;
-
-  test.beforeEach(async () => {
-    ({ user: userA, team: teamA } = await seedUser());
-    ({ token: tokenA } = await createApiToken({
-      userId: userA.id,
-      teamId: teamA.id,
-      tokenName: 'userA',
-      expiresIn: null,
-    }));
-
-    ({ user: userB, team: teamB } = await seedUser());
-    ({ token: tokenB } = await createApiToken({
-      userId: userB.id,
-      teamId: teamB.id,
-      tokenName: 'userB',
-      expiresIn: null,
-    }));
-  });
-
-  test.describe('Envelope create endpoint', () => {
-    test('should fail on invalid form', async ({ request }) => {
-      const payload = {
-        type: 'Invalid Type',
-        title: 'Test Envelope',
-      };
-
-      const formData = new FormData();
-      formData.append('payload', JSON.stringify(payload));
-
-      const res = await request.post(`${baseUrl}/envelope/create`, {
-        headers: { Authorization: `Bearer ${tokenB}` },
-        multipart: formData,
-      });
-
-      expect(res.ok()).toBeFalsy();
-      expect(res.status()).toBe(400);
-    });
-
-    test('should create envelope with single file', async ({ request }) => {
-      const payload = {
-        type: EnvelopeType.TEMPLATE,
-        title: 'Test Envelope',
-      } satisfies TCreateEnvelopePayload;
-
-      const formData = new FormData();
-
-      formData.append('payload', JSON.stringify(payload));
-
-      const files = [
-        {
-          name: 'field-font-alignment.pdf',
-          data: fs.readFileSync(
-            path.join(__dirname, '../../../../../assets/field-font-alignment.pdf'),
-          ),
-        },
-      ];
-
-      for (const file of files) {
-        formData.append('files', new File([file.data], file.name, { type: 'application/pdf' }));
-      }
-
-      const res = await request.post(`${baseUrl}/envelope/create`, {
-        headers: { Authorization: `Bearer ${tokenB}` },
-        multipart: formData,
-      });
-
-      expect(res.ok()).toBeTruthy();
-      expect(res.status()).toBe(200);
-
-      const response = (await res.json()) as TCreateEnvelopeResponse;
-
-      const envelope = await prisma.envelope.findUnique({
-        where: {
-          id: response.id,
-        },
-        include: {
-          envelopeItems: true,
-        },
-      });
-
-      expect(envelope).toBeDefined();
-      expect(envelope?.title).toBe('Test Envelope');
-      expect(envelope?.type).toBe(EnvelopeType.TEMPLATE);
-      expect(envelope?.status).toBe(DocumentStatus.DRAFT);
-      expect(envelope?.envelopeItems.length).toBe(1);
-      expect(envelope?.envelopeItems[0].title).toBe('field-font-alignment.pdf');
-      expect(envelope?.envelopeItems[0].documentDataId).toBeDefined();
-    });
-
-    test('should create envelope with multiple file', async ({ request }) => {
-      const folder = await prisma.folder.create({
-        data: {
-          name: 'Test Folder',
-          teamId: teamA.id,
-          userId: userA.id,
-          type: FolderType.DOCUMENT,
-        },
-      });
-
-      const payload = {
-        title: 'Envelope Title',
-        type: EnvelopeType.DOCUMENT,
-        externalId: 'externalId',
-        visibility: DocumentVisibility.MANAGER_AND_ABOVE,
-        globalAccessAuth: ['ACCOUNT'],
-        formValues: {
-          hello: 'world',
-        },
-        folderId: folder.id,
-        recipients: [
-          {
-            email: userA.email,
-            name: 'Name',
-            role: RecipientRole.SIGNER,
-            accessAuth: ['TWO_FACTOR_AUTH'],
-            signingOrder: 1,
-            fields: [
-              {
-                type: FieldType.SIGNATURE,
-                identifier: 'field-font-alignment.pdf',
-                page: 1,
-                positionX: 0,
-                positionY: 0,
-                width: 0,
-                height: 0,
-              },
-              {
-                type: FieldType.SIGNATURE,
-                identifier: 0,
-                page: 1,
-                positionX: 0,
-                positionY: 0,
-                width: 0,
-                height: 0,
-              },
-            ],
-          },
-        ],
-        meta: {
-          subject: 'Subject',
-          message: 'Message',
-          timezone: 'Europe/Berlin',
-          dateFormat: 'dd.MM.yyyy',
-          distributionMethod: DocumentDistributionMethod.NONE,
-          signingOrder: DocumentSigningOrder.SEQUENTIAL,
-          allowDictateNextSigner: true,
-          redirectUrl: 'https://documenso.com',
-          language: 'de',
-          typedSignatureEnabled: true,
-          uploadSignatureEnabled: false,
-          drawSignatureEnabled: false,
-          emailReplyTo: userA.email,
-          emailSettings: {
-            recipientSigningRequest: false,
-            recipientRemoved: false,
-            recipientSigned: false,
-            documentPending: false,
-            documentCompleted: false,
-            documentDeleted: false,
-            ownerDocumentCompleted: true,
-          },
-        },
-        attachments: [
-          {
-            label: 'Test Attachment',
-            data: 'https://documenso.com',
-            type: 'link',
-          },
-        ],
-      } satisfies TCreateEnvelopePayload;
-
-      const formData = new FormData();
-
-      formData.append('payload', JSON.stringify(payload));
-
-      const files = [
-        {
-          name: 'field-meta.pdf',
-          data: fs.readFileSync(path.join(__dirname, '../../../../../assets/field-meta.pdf')),
-        },
-        {
-          name: 'field-font-alignment.pdf',
-          data: fs.readFileSync(
-            path.join(__dirname, '../../../../../assets/field-font-alignment.pdf'),
-          ),
-        },
-      ];
-
-      for (const file of files) {
-        formData.append('files', new File([file.data], file.name, { type: 'application/pdf' }));
-      }
-
-      // Should error since folder is not owned by the user.
-      const invalidRes = await request.post(`${baseUrl}/envelope/create`, {
-        headers: { Authorization: `Bearer ${tokenB}` },
-        multipart: formData,
-      });
-
-      expect(invalidRes.ok()).toBeFalsy();
-
-      const res = await request.post(`${baseUrl}/envelope/create`, {
-        headers: { Authorization: `Bearer ${tokenA}` },
-        multipart: formData,
-      });
-
-      expect(res.ok()).toBeTruthy();
-      expect(res.status()).toBe(200);
-
-      const response = (await res.json()) as TCreateEnvelopeResponse;
-
-      const envelope = await prisma.envelope.findUniqueOrThrow({
-        where: {
-          id: response.id,
-        },
-        include: {
-          documentMeta: true,
-          envelopeItems: true,
-          recipients: true,
-          fields: true,
-          envelopeAttachments: true,
-        },
-      });
-
-      console.log(userB.email);
-
-      expect(envelope.envelopeItems.length).toBe(2);
-      expect(envelope.envelopeItems[0].title).toBe('field-meta.pdf');
-      expect(envelope.envelopeItems[1].title).toBe('field-font-alignment.pdf');
-
-      expect(envelope.title).toBe(payload.title);
-      expect(envelope.type).toBe(payload.type);
-      expect(envelope.externalId).toBe(payload.externalId);
-      expect(envelope.visibility).toBe(payload.visibility);
-      expect(envelope.authOptions).toEqual({
-        globalAccessAuth: payload.globalAccessAuth,
-        globalActionAuth: [],
-      });
-      expect(envelope.formValues).toEqual(payload.formValues);
-      expect(envelope.folderId).toBe(payload.folderId);
-
-      expect(envelope.documentMeta.subject).toBe(payload.meta.subject);
-      expect(envelope.documentMeta.message).toBe(payload.meta.message);
-      expect(envelope.documentMeta.timezone).toBe(payload.meta.timezone);
-      expect(envelope.documentMeta.dateFormat).toBe(payload.meta.dateFormat);
-      expect(envelope.documentMeta.distributionMethod).toBe(payload.meta.distributionMethod);
-      expect(envelope.documentMeta.signingOrder).toBe(payload.meta.signingOrder);
-      expect(envelope.documentMeta.allowDictateNextSigner).toBe(
-        payload.meta.allowDictateNextSigner,
-      );
-      expect(envelope.documentMeta.redirectUrl).toBe(payload.meta.redirectUrl);
-      expect(envelope.documentMeta.language).toBe(payload.meta.language);
-      expect(envelope.documentMeta.typedSignatureEnabled).toBe(payload.meta.typedSignatureEnabled);
-      expect(envelope.documentMeta.uploadSignatureEnabled).toBe(
-        payload.meta.uploadSignatureEnabled,
-      );
-      expect(envelope.documentMeta.drawSignatureEnabled).toBe(payload.meta.drawSignatureEnabled);
-      expect(envelope.documentMeta.emailReplyTo).toBe(payload.meta.emailReplyTo);
-      expect(envelope.documentMeta.emailSettings).toEqual(payload.meta.emailSettings);
-
-      expect([
-        {
-          label: envelope.envelopeAttachments[0].label,
-          data: envelope.envelopeAttachments[0].data,
-          type: envelope.envelopeAttachments[0].type,
-        },
-      ]).toEqual(payload.attachments);
-
-      const field = envelope.fields[0];
-      const recipient = envelope.recipients[0];
-
-      expect({
-        email: recipient.email,
-        name: recipient.name,
-        role: recipient.role,
-        signingOrder: recipient.signingOrder,
-        accessAuth: recipient.authOptions?.accessAuth,
-      }).toEqual(
-        pick(payload.recipients[0], ['email', 'name', 'role', 'signingOrder', 'accessAuth']),
-      );
-
-      expect({
-        type: field.type,
-        page: field.page,
-        positionX: field.positionX.toNumber(),
-        positionY: field.positionY.toNumber(),
-        width: field.width.toNumber(),
-        height: field.height.toNumber(),
-      }).toEqual(
-        pick(payload.recipients[0].fields[0], [
-          'type',
-          'page',
-          'positionX',
-          'positionY',
-          'width',
-          'height',
-        ]),
-      );
-
-      // Expect string based ID to work.
-      expect(field.envelopeItemId).toBe(
-        envelope.envelopeItems.find((item) => item.title === 'field-font-alignment.pdf')?.id,
-      );
-
-      // Expect index based ID to work.
-      expect(envelope.fields[1].envelopeItemId).toBe(
-        envelope.envelopeItems.find((item) => item.title === 'field-meta.pdf')?.id,
-      );
-    });
-  });
-
-  /**
-   * Creates envelopes with the two field test PDFs.
-   */
-  test('Envelope full test', async ({ request }) => {
-    // Step 1: Create initial envelope with Prisma (with first envelope item)
-    const alignmentPdf = fs.readFileSync(
-      path.join(__dirname, '../../../../../assets/field-font-alignment.pdf'),
-    );
-
-    const fieldMetaPdf = fs.readFileSync(
-      path.join(__dirname, '../../../../../assets/field-meta.pdf'),
-    );
-
-    const formData = new FormData();
-
-    formData.append(
-      'payload',
-      JSON.stringify({
-        type: EnvelopeType.DOCUMENT,
-        title: 'Envelope Full Field Test',
-      } satisfies TCreateEnvelopePayload),
-    );
-
-    // Only add one file for now.
-    formData.append(
-      'files',
-      new File([alignmentPdf], 'field-font-alignment.pdf', { type: 'application/pdf' }),
-    );
-
-    const createEnvelopeRequest = await request.post(`${baseUrl}/envelope/create`, {
-      headers: { Authorization: `Bearer ${tokenA}` },
-      multipart: formData,
-    });
-
-    expect(createEnvelopeRequest.ok()).toBeTruthy();
-    expect(createEnvelopeRequest.status()).toBe(200);
-
-    const { id: createdEnvelopeId }: TCreateEnvelopeResponse = await createEnvelopeRequest.json();
-
-    const getEnvelopeRequest = await request.get(`${baseUrl}/envelope/${createdEnvelopeId}`, {
-      headers: { Authorization: `Bearer ${tokenA}` },
-    });
-
-    const createdEnvelope: TGetEnvelopeResponse = await getEnvelopeRequest.json();
-
-    // Might as well testing access control here as well.
-    const unauthRequest = await request.get(`${baseUrl}/envelope/${createdEnvelopeId}`, {
-      headers: { Authorization: `Bearer ${tokenB}` },
-    });
-
-    expect(unauthRequest.ok()).toBeFalsy();
-    expect(unauthRequest.status()).toBe(404);
-
-    // Step 2: Create second envelope item via API
-    const createEnvelopeItemsPayload: TCreateEnvelopeItemsPayload = {
-      envelopeId: createdEnvelope.id,
-    };
-
-    const createEnvelopeItemFormData = new FormData();
-    createEnvelopeItemFormData.append('payload', JSON.stringify(createEnvelopeItemsPayload));
-    createEnvelopeItemFormData.append(
-      'files',
-      new File([fieldMetaPdf], 'field-meta.pdf', { type: 'application/pdf' }),
-    );
-
-    const createItemsRes = await request.post(`${baseUrl}/envelope/item/create-many`, {
-      headers: { Authorization: `Bearer ${tokenA}` },
-      multipart: createEnvelopeItemFormData,
-    });
-
-    expect(createItemsRes.ok()).toBeTruthy();
-    expect(createItemsRes.status()).toBe(200);
-
-    // Step 3: Update envelope via API
-    const updateEnvelopeRequest: TUpdateEnvelopeRequest = {
-      envelopeId: createdEnvelope.id,
-      data: {
-        title: 'Envelope Full Field Test',
-        visibility: DocumentVisibility.MANAGER_AND_ABOVE,
-      },
-    };
-
-    const updateRes = await request.post(`${baseUrl}/envelope/update`, {
-      headers: { Authorization: `Bearer ${tokenA}` },
-      data: updateEnvelopeRequest,
-    });
-
-    expect(updateRes.ok()).toBeTruthy();
-    expect(updateRes.status()).toBe(200);
-
-    // Step 4: Create recipient via API
-    const createRecipientsRequest: TCreateEnvelopeRecipientsRequest = {
-      envelopeId: createdEnvelope.id,
-      data: [
-        {
-          email: userA.email,
-          name: userA.name || '',
-          role: RecipientRole.SIGNER,
-          accessAuth: [],
-          actionAuth: [],
-        },
-      ],
-    };
-
-    const createRecipientsRes = await request.post(`${baseUrl}/envelope/recipient/create-many`, {
-      headers: { Authorization: `Bearer ${tokenA}` },
-      data: createRecipientsRequest,
-    });
-
-    expect(createRecipientsRes.ok()).toBeTruthy();
-    expect(createRecipientsRes.status()).toBe(200);
-
-    // Step 5: Get envelope to retrieve recipients and envelope items
-    const getRes = await request.get(`${baseUrl}/envelope/${createdEnvelope.id}`, {
-      headers: { Authorization: `Bearer ${tokenA}` },
-    });
-
-    expect(getRes.ok()).toBeTruthy();
-    expect(getRes.status()).toBe(200);
-
-    const envelopeResponse = (await getRes.json()) as TGetEnvelopeResponse;
-
-    const recipientId = envelopeResponse.recipients[0].id;
-    const alignmentItem = envelopeResponse.envelopeItems.find(
-      (item: { order: number }) => item.order === 1,
-    );
-    const fieldMetaItem = envelopeResponse.envelopeItems.find(
-      (item: { order: number }) => item.order === 2,
-    );
-
-    expect(recipientId).toBeDefined();
-    expect(alignmentItem).toBeDefined();
-    expect(fieldMetaItem).toBeDefined();
-
-    if (!alignmentItem || !fieldMetaItem) {
-      throw new Error('Envelope items not found');
-    }
-
-    // Step 6: Create fields for first PDF (alignment fields)
-    const alignmentFieldsRequest = {
-      envelopeId: createdEnvelope.id,
-      data: formatAlignmentTestFields.map((field) => ({
-        recipientId,
-        envelopeItemId: alignmentItem.id,
-        type: field.type,
-        page: field.page,
-        positionX: field.positionX,
-        positionY: field.positionY,
-        width: field.width,
-        height: field.height,
-        fieldMeta: field.fieldMeta,
-      })),
-    };
-
-    const createAlignmentFieldsRes = await request.post(`${baseUrl}/envelope/field/create-many`, {
-      headers: { Authorization: `Bearer ${tokenA}` },
-      data: alignmentFieldsRequest,
-    });
-
-    expect(createAlignmentFieldsRes.ok()).toBeTruthy();
-    expect(createAlignmentFieldsRes.status()).toBe(200);
-
-    // Step 7: Create fields for second PDF (field-meta fields)
-    const fieldMetaFieldsRequest = {
-      envelopeId: createdEnvelope.id,
-      data: FIELD_META_TEST_FIELDS.map((field) => ({
-        recipientId,
-        envelopeItemId: fieldMetaItem.id,
-        type: field.type,
-        page: field.page,
-        positionX: field.positionX,
-        positionY: field.positionY,
-        width: field.width,
-        height: field.height,
-        fieldMeta: field.fieldMeta,
-      })),
-    };
-
-    const createFieldMetaFieldsRes = await request.post(`${baseUrl}/envelope/field/create-many`, {
-      headers: { Authorization: `Bearer ${tokenA}` },
-      data: fieldMetaFieldsRequest,
-    });
-
-    expect(createFieldMetaFieldsRes.ok()).toBeTruthy();
-    expect(createFieldMetaFieldsRes.status()).toBe(200);
-
-    // Step 8: Verify final envelope structure
-    const finalGetRes = await request.get(`${baseUrl}/envelope/${createdEnvelope.id}`, {
-      headers: { Authorization: `Bearer ${tokenA}` },
-    });
-
-    expect(finalGetRes.ok()).toBeTruthy();
-    const finalEnvelope = (await finalGetRes.json()) as TGetEnvelopeResponse;
-
-    // Verify structure
-    expect(finalEnvelope.envelopeItems.length).toBe(2);
-    expect(finalEnvelope.recipients.length).toBe(1);
-    expect(finalEnvelope.fields.length).toBe(
-      formatAlignmentTestFields.length + FIELD_META_TEST_FIELDS.length,
-    );
-    expect(finalEnvelope.title).toBe('Envelope Full Field Test');
-    expect(finalEnvelope.type).toBe(EnvelopeType.DOCUMENT);
-
-    console.log({
-      createdEnvelopeId: finalEnvelope.id,
-      userEmail: userA.email,
-    });
-  });
-});

packages/app-tests/e2e/envelopes/envelope-alignment.spec.ts

@@ -1,293 +0,0 @@
-// sort-imports-ignore
-
-// ---- PATCH pdfjs-dist's canvas require BEFORE importing it ----
-import Module from 'module';
-import { Canvas, Image } from 'skia-canvas';
-
-// Intercept require('canvas') and return skia-canvas equivalents
-const originalRequire = Module.prototype.require;
-Module.prototype.require = function (path: string) {
-  if (path === 'canvas') {
-    return {
-      createCanvas: (width: number, height: number) => new Canvas(width, height),
-      Image, // needed by pdfjs-dist
-    };
-  }
-  // eslint-disable-next-line prefer-rest-params, @typescript-eslint/consistent-type-assertions
-  return originalRequire.apply(this, arguments as unknown as [string]);
-};
-
-import pixelMatch from 'pixelmatch';
-import { PNG } from 'pngjs';
-import type { TestInfo } from '@playwright/test';
-import { expect, test } from '@playwright/test';
-import { DocumentStatus } from '@prisma/client';
-import fs from 'node:fs';
-import path from 'node:path';
-import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.js';
-import { getEnvelopeDownloadUrl } from '@documenso/lib/utils/envelope-download';
-import { prisma } from '@documenso/prisma';
-import { seedAlignmentTestDocument } from '@documenso/prisma/seed/initial-seed';
-import { seedUser } from '@documenso/prisma/seed/users';
-
-import { apiSignin } from '../fixtures/authentication';
-
-test.describe.configure({ mode: 'parallel', timeout: 60000 });
-
-test('field placement visual regression', async ({ page }, testInfo) => {
-  const { user, team } = await seedUser();
-
-  const envelope = await seedAlignmentTestDocument({
-    userId: user.id,
-    teamId: team.id,
-    recipientName: user.name || '',
-    recipientEmail: user.email,
-    insertFields: true,
-    status: DocumentStatus.PENDING,
-  });
-
-  const token = envelope.recipients[0].token;
-
-  const signUrl = `/sign/${token}`;
-
-  await apiSignin({
-    page,
-    email: user.email,
-    redirectPath: signUrl,
-  });
-
-  await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
-
-  await page.getByRole('button', { name: 'Complete' }).click();
-  await page.getByRole('button', { name: 'Sign' }).click();
-  await page.waitForURL(`${signUrl}/complete`);
-
-  await expect(async () => {
-    const { status } = await prisma.envelope.findFirstOrThrow({
-      where: {
-        id: envelope.id,
-      },
-    });
-
-    expect(status).toBe(DocumentStatus.COMPLETED);
-  }).toPass({
-    timeout: 10000,
-  });
-
-  const completedDocument = await prisma.envelope.findFirstOrThrow({
-    where: {
-      id: envelope.id,
-    },
-    include: {
-      envelopeItems: {
-        orderBy: {
-          order: 'asc',
-        },
-        include: {
-          documentData: true,
-        },
-      },
-    },
-  });
-
-  const storedImages = fs.readdirSync(path.join(__dirname, '../../visual-regression'));
-
-  await Promise.all(
-    completedDocument.envelopeItems.map(async (item) => {
-      const documentUrl = getEnvelopeDownloadUrl({
-        envelopeItem: item,
-        token,
-        version: 'signed',
-      });
-
-      const pdfData = await fetch(documentUrl).then(async (res) => await res.arrayBuffer());
-
-      const loadedImages = storedImages
-        .filter((image) => image.includes(item.title))
-        .map((image) => fs.readFileSync(path.join(__dirname, '../../visual-regression', image)));
-
-      await compareSignedPdfWithImages({
-        id: item.title.replaceAll(' ', '-').toLowerCase(),
-        pdfData: new Uint8Array(pdfData),
-        images: loadedImages,
-        testInfo,
-      });
-    }),
-  );
-});
-
-/**
- * Used to download the envelope images when updating the visual regression test.
- *
- * DON'T COMMIT THIS WITHOUT THE "SKIP" COMMAND.
- */
-test.skip('download envelope images', async ({ page }) => {
-  const { user, team } = await seedUser();
-
-  const envelope = await seedAlignmentTestDocument({
-    userId: user.id,
-    teamId: team.id,
-    recipientName: user.name || '',
-    recipientEmail: user.email,
-    insertFields: true,
-    status: DocumentStatus.PENDING,
-  });
-
-  const token = envelope.recipients[0].token;
-
-  const signUrl = `/sign/${token}`;
-
-  await apiSignin({
-    page,
-    email: user.email,
-    redirectPath: signUrl,
-  });
-
-  await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
-
-  await page.getByRole('button', { name: 'Complete' }).click();
-  await page.getByRole('button', { name: 'Sign' }).click();
-  await page.waitForURL(`${signUrl}/complete`);
-
-  await expect(async () => {
-    const { status } = await prisma.envelope.findFirstOrThrow({
-      where: {
-        id: envelope.id,
-      },
-    });
-
-    expect(status).toBe(DocumentStatus.COMPLETED);
-  }).toPass({
-    timeout: 10000,
-  });
-
-  const completedDocument = await prisma.envelope.findFirstOrThrow({
-    where: {
-      id: envelope.id,
-    },
-    include: {
-      envelopeItems: {
-        orderBy: {
-          order: 'asc',
-        },
-        include: {
-          documentData: true,
-        },
-      },
-    },
-  });
-
-  await Promise.all(
-    completedDocument.envelopeItems.map(async (item) => {
-      const documentUrl = getEnvelopeDownloadUrl({
-        envelopeItem: item,
-        token,
-        version: 'signed',
-      });
-
-      const pdfData = await fetch(documentUrl).then(async (res) => await res.arrayBuffer());
-
-      const pdfImages = await renderPdfToImage(new Uint8Array(pdfData));
-
-      for (const [index, { image }] of pdfImages.entries()) {
-        fs.writeFileSync(
-          path.join(__dirname, '../../visual-regression', `${item.title}-${index}.png`),
-          new Uint8Array(image),
-        );
-      }
-    }),
-  );
-});
-
-async function renderPdfToImage(pdfBytes: Uint8Array) {
-  const loadingTask = pdfjsLib.getDocument({ data: pdfBytes });
-  const pdf = await loadingTask.promise;
-
-  // Increase for higher resolution
-  const scale = 4;
-
-  return await Promise.all(
-    Array.from({ length: pdf.numPages }, async (_, index) => {
-      const page = await pdf.getPage(index + 1);
-
-      const viewport = page.getViewport({ scale });
-
-      const virtualCanvas = new Canvas(viewport.width, viewport.height);
-      const context = virtualCanvas.getContext('2d');
-      context.imageSmoothingEnabled = false;
-
-      // @ts-expect-error skia-canvas context satisfies runtime requirements for pdfjs
-      await page.render({ canvasContext: context, viewport }).promise;
-
-      return {
-        image: await virtualCanvas.toBuffer('png'),
-
-        // Rounded down because the certificate page somehow gives dimensions with decimals
-        width: Math.floor(viewport.width),
-        height: Math.floor(viewport.height),
-      };
-    }),
-  );
-}
-
-type CompareSignedPdfWithImagesOptions = {
-  id: string;
-  pdfData: Uint8Array;
-  images: Buffer[];
-  testInfo: TestInfo;
-};
-
-const compareSignedPdfWithImages = async ({
-  id,
-  pdfData,
-  images,
-  testInfo,
-}: CompareSignedPdfWithImagesOptions) => {
-  const renderedImages = await renderPdfToImage(pdfData);
-
-  const blankCertificateFile = fs.readFileSync(
-    path.join(__dirname, '../../visual-regression/blank-certificate.png'),
-  );
-  const blankCertificateImage = PNG.sync.read(blankCertificateFile).data;
-
-  for (const [index, { image, width, height }] of renderedImages.entries()) {
-    const isCertificate = index === renderedImages.length - 1;
-
-    const diff = new PNG({ width, height });
-
-    const storedImage = PNG.sync.read(images[index]).data;
-
-    const newImage = PNG.sync.read(image).data;
-
-    const oldImage = isCertificate ? blankCertificateImage : storedImage;
-
-    const comparison = pixelMatch(
-      new Uint8Array(oldImage),
-      new Uint8Array(newImage),
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      diff.data as unknown as Uint8Array,
-      width,
-      height,
-      {
-        threshold: 0.25,
-        // includeAA: true, // This allows stricter testing.
-      },
-    );
-    console.log(`${id}-${index}: ${comparison}`);
-
-    const diffFilePath = path.join(testInfo.outputPath(), `${id}-${index}-diff.png`);
-    const oldFilePath = path.join(testInfo.outputPath(), `${id}-${index}-old.png`);
-    const newFilePath = path.join(testInfo.outputPath(), `${id}-${index}-new.png`);
-
-    fs.writeFileSync(diffFilePath, new Uint8Array(PNG.sync.write(diff)));
-    fs.writeFileSync(oldFilePath, new Uint8Array(images[index]));
-    fs.writeFileSync(newFilePath, new Uint8Array(image));
-
-    if (isCertificate) {
-      // Expect the certificate to NOT be blank. Since the storedImage is blank.
-      expect.soft(comparison).toBeGreaterThan(20000);
-    } else {
-      expect.soft(comparison).toEqual(0);
-    }
-  }
-};

packages/app-tests/e2e/features/include-document-certificate.spec.ts

@@ -3,7 +3,7 @@ import { expect, test } from '@playwright/test';
 import { DocumentStatus, FieldType } from '@prisma/client';
 
 import { getDocumentByToken } from '@documenso/lib/server-only/document/get-document-by-token';
-import { getEnvelopeDownloadUrl } from '@documenso/lib/utils/envelope-download';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { prisma } from '@documenso/prisma';
 import { seedPendingDocumentWithFullFields } from '@documenso/prisma/seed/documents';
 import { seedTeam } from '@documenso/prisma/seed/teams';
@@ -25,25 +25,20 @@ test.describe('Signing Certificate Tests', () => {
       teamId: team.id,
     });
 
-    const recipient = recipients[0];
-
-    const documentData = await prisma.envelopeItem
+    const documentData = await prisma.documentData
       .findFirstOrThrow({
         where: {
-          envelopeId: document.id,
+          envelopeItem: {
+            envelopeId: document.id,
+          },
         },
       })
-      .then(async (data) => {
-        const documentUrl = getEnvelopeDownloadUrl({
-          envelopeItem: data,
-          token: recipient.token,
-          version: 'signed',
-        });
-        return fetch(documentUrl).then(async (res) => await res.arrayBuffer());
-      });
+      .then(async (data) => getFile(data));
 
     const originalPdf = await PDFDocument.load(documentData);
 
+    const recipient = recipients[0];
+
     // Sign the document
     await page.goto(`/sign/${recipient.token}`);
 
@@ -83,17 +78,10 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
-    const firstDocumentData = completedDocument.envelopeItems[0];
+    // Todo: Envelopes
+    const firstDocumentData = completedDocument.envelopeItems[0].documentData;
 
-    const documentUrl = getEnvelopeDownloadUrl({
-      envelopeItem: firstDocumentData,
-      token: recipient.token,
-      version: 'signed',
-    });
-
-    const pdfData = await fetch(documentUrl).then(async (res) => await res.arrayBuffer());
-
-    const completedDocumentData = new Uint8Array(pdfData);
+    const completedDocumentData = await getFile(firstDocumentData);
 
     // Load the PDF and check number of pages
     const pdfDoc = await PDFDocument.load(completedDocumentData);
@@ -130,25 +118,20 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
-    const recipient = recipients[0];
-
-    const documentData = await prisma.envelopeItem
+    const documentData = await prisma.documentData
       .findFirstOrThrow({
         where: {
-          envelopeId: document.id,
+          envelopeItem: {
+            envelopeId: document.id,
+          },
         },
       })
-      .then(async (data) => {
-        const documentUrl = getEnvelopeDownloadUrl({
-          envelopeItem: data,
-          token: recipient.token,
-          version: 'signed',
-        });
-        return fetch(documentUrl).then(async (res) => await res.arrayBuffer());
-      });
+      .then(async (data) => getFile(data));
 
     const originalPdf = await PDFDocument.load(documentData);
 
+    const recipient = recipients[0];
+
     // Sign the document
     await page.goto(`/sign/${recipient.token}`);
 
@@ -186,17 +169,10 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
-    const firstDocumentData = completedDocument.envelopeItems[0];
+    // Todo: Envelopes
+    const firstDocumentData = completedDocument.envelopeItems[0].documentData;
 
-    const documentUrl = getEnvelopeDownloadUrl({
-      envelopeItem: firstDocumentData,
-      token: recipient.token,
-      version: 'signed',
-    });
-
-    const pdfData = await fetch(documentUrl).then(async (res) => await res.arrayBuffer());
-
-    const completedDocumentData = new Uint8Array(pdfData);
+    const completedDocumentData = await getFile(firstDocumentData);
 
     // Load the PDF and check number of pages
     const completedPdf = await PDFDocument.load(completedDocumentData);
@@ -233,24 +209,19 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
-    const recipient = recipients[0];
-
-    const documentData = await prisma.envelopeItem
+    const documentData = await prisma.documentData
       .findFirstOrThrow({
         where: {
-          envelopeId: document.id,
+          envelopeItem: {
+            envelopeId: document.id,
+          },
         },
       })
-      .then(async (data) => {
-        const documentUrl = getEnvelopeDownloadUrl({
-          envelopeItem: data,
-          token: recipient.token,
-          version: 'signed',
-        });
-        return fetch(documentUrl).then(async (res) => await res.arrayBuffer());
-      });
+      .then(async (data) => getFile(data));
 
-    const originalPdf = await PDFDocument.load(new Uint8Array(documentData));
+    const originalPdf = await PDFDocument.load(documentData);
+
+    const recipient = recipients[0];
 
     // Sign the document
     await page.goto(`/sign/${recipient.token}`);
@@ -289,15 +260,7 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
-    const documentUrl = getEnvelopeDownloadUrl({
-      envelopeItem: completedDocument.envelopeItems[0],
-      token: recipient.token,
-      version: 'signed',
-    });
-
-    const completedDocumentData = await fetch(documentUrl).then(
-      async (res) => await res.arrayBuffer(),
-    );
+    const completedDocumentData = await getFile(completedDocument.envelopeItems[0].documentData);
 
     // Load the PDF and check number of pages
     const completedPdf = await PDFDocument.load(completedDocumentData);

packages/app-tests/e2e/templates/direct-templates.spec.ts

@@ -1,12 +1,9 @@
 import { expect, test } from '@playwright/test';
-import { DocumentSigningOrder, RecipientRole } from '@prisma/client';
 import { customAlphabet } from 'nanoid';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { createDocumentAuthOptions } from '@documenso/lib/utils/document-auth';
-import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
 import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
-import { prisma } from '@documenso/prisma';
 import { seedTeam } from '@documenso/prisma/seed/teams';
 import { seedDirectTemplate, seedTemplate } from '@documenso/prisma/seed/templates';
 import { seedTestEmail, seedUser } from '@documenso/prisma/seed/users';
@@ -124,7 +121,7 @@ test('[DIRECT_TEMPLATES]: delete direct template link', async ({ page }) => {
   await expect(page.getByText('404 not found')).toBeVisible();
 });
 
-test('[DIRECT_TEMPLATES]: V1 direct template link auth access', async ({ page }) => {
+test('[DIRECT_TEMPLATES]: direct template link auth access', async ({ page }) => {
   const { user, team } = await seedUser();
 
   const directTemplateWithAuth = await seedDirectTemplate({
@@ -156,53 +153,6 @@ test('[DIRECT_TEMPLATES]: V1 direct template link auth access', async ({ page })
 
   await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
   await expect(page.getByLabel('Email')).toBeDisabled();
-
-  await page.getByRole('button', { name: 'Continue' }).click();
-  await page.getByRole('button', { name: 'Complete' }).click();
-
-  await page.getByRole('button', { name: 'Sign' }).click();
-  await page.waitForURL(/\/sign/);
-  await expect(page.getByRole('heading', { name: 'Document Signed' })).toBeVisible();
-});
-
-test('[DIRECT_TEMPLATES]: V2 direct template link auth access', async ({ page }) => {
-  const { user, team } = await seedUser();
-
-  const directTemplateWithAuth = await seedDirectTemplate({
-    title: 'Personal direct template link',
-    userId: user.id,
-    teamId: team.id,
-    internalVersion: 2,
-    createTemplateOptions: {
-      authOptions: createDocumentAuthOptions({
-        globalAccessAuth: ['ACCOUNT'],
-        globalActionAuth: [],
-      }),
-    },
-  });
-
-  const directTemplatePath = formatDirectTemplatePath(
-    directTemplateWithAuth.directLink?.token || '',
-  );
-
-  await page.goto(directTemplatePath);
-
-  await expect(page.getByText('Authentication required')).toBeVisible();
-
-  await apiSignin({
-    page,
-    email: user.email,
-  });
-
-  await page.goto(directTemplatePath);
-
-  await expect(page.getByRole('heading', { name: 'Personal direct template link' })).toBeVisible();
-  await page.getByRole('button', { name: 'Complete' }).click();
-  await expect(page.getByLabel('Your Email')).not.toBeVisible();
-
-  await page.getByRole('button', { name: 'Sign' }).click();
-  await page.waitForURL(/\/sign/);
-  await expect(page.getByRole('heading', { name: 'Document Signed' })).toBeVisible();
 });
 
 test('[DIRECT_TEMPLATES]: use direct template link with 1 recipient', async ({ page }) => {
@@ -225,9 +175,6 @@ test('[DIRECT_TEMPLATES]: use direct template link with 1 recipient', async ({ p
   await page.getByPlaceholder('recipient@documenso.com').fill(seedTestEmail());
 
   await page.getByRole('button', { name: 'Continue' }).click();
-
-  await expect(page.getByText('Next Recipient Name')).not.toBeVisible();
-
   await page.getByRole('button', { name: 'Complete' }).click();
   await page.getByRole('button', { name: 'Sign' }).click();
   await page.waitForURL(/\/sign/);
@@ -236,173 +183,3 @@ test('[DIRECT_TEMPLATES]: use direct template link with 1 recipient', async ({ p
   // Add a longer waiting period to ensure document status is updated
   await page.waitForTimeout(3000);
 });
-
-test('[DIRECT_TEMPLATES]: V1 use direct template link with 2 recipients with next signer dictation', async ({
-  page,
-}) => {
-  const { team, owner, organisation } = await seedTeam({
-    createTeamMembers: 1,
-  });
-
-  // Should be visible to team members.
-  const template = await seedDirectTemplate({
-    title: 'Team direct template link 1',
-    userId: owner.id,
-    teamId: team.id,
-  });
-
-  await prisma.documentMeta.update({
-    where: {
-      id: template.documentMetaId,
-    },
-    data: {
-      allowDictateNextSigner: true,
-      signingOrder: DocumentSigningOrder.SEQUENTIAL,
-    },
-  });
-
-  const originalName = 'Signer 2';
-  const originalSecondSignerEmail = seedTestEmail();
-
-  // Add another signer
-  await prisma.recipient.create({
-    data: {
-      signingOrder: 2,
-      envelopeId: template.id,
-      email: originalSecondSignerEmail,
-      name: originalName,
-      token: Math.random().toString().slice(2, 7),
-      role: RecipientRole.SIGNER,
-    },
-  });
-
-  // Check that the direct template link is accessible.
-  await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
-  await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
-
-  await page.waitForTimeout(100);
-  await page.getByPlaceholder('recipient@documenso.com').fill(seedTestEmail());
-
-  await page.getByRole('button', { name: 'Continue' }).click();
-  await page.getByRole('button', { name: 'Complete' }).click();
-
-  await expect(page.getByText('Next Recipient Name')).toBeVisible();
-
-  const nextRecipientNameInputValue = await page.getByLabel('Next Recipient Name').inputValue();
-  expect(nextRecipientNameInputValue).toBe(originalName);
-
-  const nextRecipientEmailInputValue = await page.getByLabel('Next Recipient Email').inputValue();
-  expect(nextRecipientEmailInputValue).toBe(originalSecondSignerEmail);
-
-  const newName = 'Hello';
-  const newSecondSignerEmail = seedTestEmail();
-
-  await page.getByLabel('Next Recipient Email').fill(newSecondSignerEmail);
-  await page.getByLabel('Next Recipient Name').fill(newName);
-
-  await page.getByRole('button', { name: 'Sign' }).click();
-  await page.waitForURL(/\/sign/);
-  await expect(page.getByRole('heading', { name: 'Document Signed' })).toBeVisible();
-
-  const createdEnvelopeRecipients = await prisma.recipient.findMany({
-    where: {
-      envelope: {
-        templateId: mapSecondaryIdToTemplateId(template.secondaryId),
-      },
-    },
-  });
-
-  const updatedSecondRecipient = createdEnvelopeRecipients.find(
-    (recipient) => recipient.signingOrder === 2,
-  );
-
-  expect(updatedSecondRecipient?.name).toBe(newName);
-  expect(updatedSecondRecipient?.email).toBe(newSecondSignerEmail);
-});
-
-test('[DIRECT_TEMPLATES]: V2 use direct template link with 2 recipients with next signer dictation', async ({
-  page,
-}) => {
-  const { team, owner, organisation } = await seedTeam({
-    createTeamMembers: 1,
-  });
-
-  // Should be visible to team members.
-  const template = await seedDirectTemplate({
-    title: 'Team direct template link 1',
-    userId: owner.id,
-    teamId: team.id,
-    internalVersion: 2,
-  });
-
-  await prisma.documentMeta.update({
-    where: {
-      id: template.documentMetaId,
-    },
-    data: {
-      allowDictateNextSigner: true,
-      signingOrder: DocumentSigningOrder.SEQUENTIAL,
-    },
-  });
-
-  const originalName = 'Signer 2';
-  const originalSecondSignerEmail = seedTestEmail();
-
-  // Add another signer
-  await prisma.recipient.create({
-    data: {
-      signingOrder: 2,
-      envelopeId: template.id,
-      email: originalSecondSignerEmail,
-      name: originalName,
-      token: Math.random().toString().slice(2, 7),
-      role: RecipientRole.SIGNER,
-    },
-  });
-
-  // Check that the direct template link is accessible.
-  await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
-  await expect(page.getByRole('heading', { name: 'Team direct template link 1' })).toBeVisible();
-  await page.waitForTimeout(100);
-
-  await page.getByRole('button', { name: 'Complete' }).click();
-
-  const currentName = 'John Doe';
-  const currentEmail = seedTestEmail();
-
-  await page.getByPlaceholder('Enter Your Name').fill(currentName);
-  await page.getByPlaceholder('Enter Your Email').fill(currentEmail);
-
-  await expect(page.getByText('Next Recipient Name')).toBeVisible();
-
-  const nextRecipientNameInputValue = await page.getByLabel('Next Recipient Name').inputValue();
-  expect(nextRecipientNameInputValue).toBe(originalName);
-
-  const nextRecipientEmailInputValue = await page.getByLabel('Next Recipient Email').inputValue();
-  expect(nextRecipientEmailInputValue).toBe(originalSecondSignerEmail);
-
-  const newName = 'Hello';
-  const newSecondSignerEmail = seedTestEmail();
-
-  await page.getByLabel('Next Recipient Email').fill(newSecondSignerEmail);
-  await page.getByLabel('Next Recipient Name').fill(newName);
-
-  await page.getByRole('button', { name: 'Sign' }).click();
-  await page.waitForURL(/\/sign/);
-  await expect(page.getByRole('heading', { name: 'Document Signed' })).toBeVisible();
-
-  const createdEnvelopeRecipients = await prisma.recipient.findMany({
-    where: {
-      envelope: {
-        templateId: mapSecondaryIdToTemplateId(template.secondaryId),
-      },
-    },
-  });
-
-  const updatedSecondRecipient = createdEnvelopeRecipients.find(
-    (recipient) => recipient.signingOrder === 2,
-  );
-
-  expect(updatedSecondRecipient?.name).toBe(newName);
-  expect(updatedSecondRecipient?.email).toBe(newSecondSignerEmail);
-});

packages/app-tests/package.json

@@ -15,10 +15,7 @@
     "@documenso/lib": "*",
     "@documenso/prisma": "*",
     "@playwright/test": "1.52.0",
-    "@types/node": "^20",
-    "@types/pngjs": "^6.0.5",
-    "pixelmatch": "^7.1.0",
-    "pngjs": "^7.0.0"
+    "@types/node": "^20"
   },
   "dependencies": {
     "start-server-and-test": "^2.0.12"

packages/auth/package.json

@@ -20,6 +20,6 @@
     "luxon": "^3.5.0",
     "nanoid": "^5.1.5",
     "ts-pattern": "^5.0.5",
-    "zod": "^3.25.76"
+    "zod": "3.25.76"
   }
 }

packages/ee/package.json

@@ -19,6 +19,6 @@
     "micro": "^10.0.1",
     "react": "^18",
     "ts-pattern": "^5.0.5",
-    "zod": "^3.25.76"
+    "zod": "3.25.76"
   }
 }

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

@@ -1,14 +1,12 @@
-import type { EnvelopeItem } from '@prisma/client';
+import type { DocumentData } from '@prisma/client';
 
-import { getEnvelopeDownloadUrl } from '../utils/envelope-download';
+import { getFile } from '../universal/upload/get-file';
 import { downloadFile } from './download-file';
 
 type DocumentVersion = 'original' | 'signed';
 
 type DownloadPDFProps = {
-  envelopeItem: Pick<EnvelopeItem, 'id' | 'envelopeId'>;
-  token: string | undefined;
-
+  documentData: DocumentData;
   fileName?: string;
   /**
    * Specifies which version of the document to download.
@@ -19,18 +17,18 @@ type DownloadPDFProps = {
 };
 
 export const downloadPDF = async ({
-  envelopeItem,
-  token,
+  documentData,
   fileName,
   version = 'signed',
 }: DownloadPDFProps) => {
-  const downloadUrl = getEnvelopeDownloadUrl({
-    envelopeItem: envelopeItem,
-    token,
-    version,
+  const bytes = await getFile({
+    type: documentData.type,
+    data: version === 'signed' ? documentData.data : documentData.initialData,
   });
 
-  const blob = await fetch(downloadUrl).then(async (res) => await res.blob());
+  const blob = new Blob([bytes], {
+    type: 'application/pdf',
+  });
 
   const baseTitle = (fileName ?? 'document').replace(/\.pdf$/, '');
   const suffix = version === 'signed' ? '_signed.pdf' : '.pdf';

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

@@ -165,7 +165,10 @@ export const useEditorFields = ({
     const index = localFields.findIndex((field) => field.formId === formId);
 
     if (index !== -1) {
-      form.setValue(`fields.${index}.id`, id);
+      update(index, {
+        ...localFields[index],
+        id,
+      });
     }
   };
 

packages/lib/client-only/hooks/use-page-renderer.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
 import Konva from 'konva';
 import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
@@ -25,8 +25,6 @@ export function usePageRenderer(renderFunction: RenderFunction) {
   const stage = useRef<Konva.Stage | null>(null);
   const pageLayer = useRef<Konva.Layer | null>(null);
 
-  const [renderError, setRenderError] = useState<boolean>(false);
-
   /**
    * The raw viewport with no scaling. Basically the actual PDF size.
    */
@@ -124,7 +122,5 @@ export function usePageRenderer(renderFunction: RenderFunction) {
     unscaledViewport,
     scaledViewport,
     pageContext,
-    renderError,
-    setRenderError,
   };
 }

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

@@ -46,7 +46,6 @@ type EnvelopeEditorProviderValue = {
   setLocalEnvelope: (localEnvelope: Partial<TEnvelope>) => void;
 
   updateEnvelope: (envelopeUpdates: UpdateEnvelopePayload) => void;
-  updateEnvelopeAsync: (envelopeUpdates: UpdateEnvelopePayload) => Promise<void>;
   setRecipientsDebounced: (recipients: TSetEnvelopeRecipientsRequest['recipients']) => void;
   setRecipientsAsync: (recipients: TSetEnvelopeRecipientsRequest['recipients']) => Promise<void>;
 
@@ -67,6 +66,8 @@ type EnvelopeEditorProviderValue = {
   };
 
   syncEnvelope: () => Promise<void>;
+  // refetchEnvelope: () => Promise<void>;
+  // updateEnvelope: (envelope: TEnvelope) => Promise<void>;
 };
 
 interface EnvelopeEditorProviderProps {
@@ -214,6 +215,7 @@ export const EnvelopeEditorProvider = ({
   } = useEnvelopeAutosave(async (envelopeUpdates: UpdateEnvelopePayload) => {
     await envelopeUpdateMutationQuery.mutateAsync({
       envelopeId: envelope.id,
+      envelopeType: envelope.type,
       data: envelopeUpdates.data,
       meta: envelopeUpdates.meta,
     });
@@ -235,13 +237,6 @@ export const EnvelopeEditorProvider = ({
     setEnvelopeDebounced(envelopeUpdates);
   };
 
-  const updateEnvelopeAsync = async (envelopeUpdates: UpdateEnvelopePayload) => {
-    await envelopeUpdateMutationQuery.mutateAsync({
-      envelopeId: envelope.id,
-      ...envelopeUpdates,
-    });
-  };
-
   const getRecipientColorKey = useCallback(
     (recipientId: number) => {
       const recipientIndex = envelope.recipients.findIndex(
@@ -329,7 +324,6 @@ export const EnvelopeEditorProvider = ({
         setLocalEnvelope,
         getRecipientColorKey,
         updateEnvelope,
-        updateEnvelopeAsync,
         setRecipientsDebounced,
         setRecipientsAsync,
         editorFields,

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

@@ -1,11 +1,13 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import React from 'react';
 
+import type { DocumentData } from '@prisma/client';
+
 import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
 import { AVAILABLE_RECIPIENT_COLORS } from '@documenso/ui/lib/recipient-colors';
 
 import type { TEnvelope } from '../../types/envelope';
-import { getEnvelopeDownloadUrl } from '../../utils/envelope-download';
+import { getFile } from '../../universal/upload/get-file';
 
 type FileData =
   | {
@@ -16,28 +18,19 @@ type FileData =
       status: 'loaded';
     };
 
-type EnvelopeRenderOverrideSettings = {
-  mode: 'edit' | 'sign' | 'export';
-};
-
 type EnvelopeRenderItem = TEnvelope['envelopeItems'][number];
 
 type EnvelopeRenderProviderValue = {
-  getPdfBuffer: (envelopeItemId: string) => FileData | null;
+  getPdfBuffer: (documentDataId: string) => FileData | null;
   envelopeItems: EnvelopeRenderItem[];
   currentEnvelopeItem: EnvelopeRenderItem | null;
   setCurrentEnvelopeItem: (envelopeItemId: string) => void;
   fields: TEnvelope['fields'];
   getRecipientColorKey: (recipientId: number) => TRecipientColor;
-
-  renderError: boolean;
-  setRenderError: (renderError: boolean) => void;
-  overrideSettings?: EnvelopeRenderOverrideSettings;
 };
 
 interface EnvelopeRenderProviderProps {
   children: React.ReactNode;
-
   envelope: Pick<TEnvelope, 'envelopeItems'>;
 
   /**
@@ -53,18 +46,6 @@ interface EnvelopeRenderProviderProps {
    * Only required for generic page renderers.
    */
   recipientIds?: number[];
-
-  /**
-   * The token to access the envelope.
-   *
-   * If not provided, it will be assumed that the current user can access the document.
-   */
-  token: string | undefined;
-
-  /**
-   * Custom override settings for generic page renderers.
-   */
-  overrideSettings?: EnvelopeRenderOverrideSettings;
 }
 
 const EnvelopeRenderContext = createContext<EnvelopeRenderProviderValue | null>(null);
@@ -86,51 +67,39 @@ export const EnvelopeRenderProvider = ({
   children,
   envelope,
   fields,
-  token,
   recipientIds = [],
-  overrideSettings,
 }: EnvelopeRenderProviderProps) => {
   // Indexed by documentDataId.
   const [files, setFiles] = useState<Record<string, FileData>>({});
 
   const [currentItem, setItem] = useState<EnvelopeRenderItem | null>(null);
 
-  const [renderError, setRenderError] = useState<boolean>(false);
-
   const envelopeItems = useMemo(
     () => envelope.envelopeItems.sort((a, b) => a.order - b.order),
     [envelope.envelopeItems],
   );
 
-  const loadEnvelopeItemPdfFile = async (envelopeItem: EnvelopeRenderItem) => {
-    if (files[envelopeItem.id]?.status === 'loading') {
+  const loadEnvelopeItemPdfFile = async (documentData: DocumentData) => {
+    if (files[documentData.id]?.status === 'loading') {
       return;
     }
 
-    if (!files[envelopeItem.id]) {
+    if (!files[documentData.id]) {
       setFiles((prev) => ({
         ...prev,
-        [envelopeItem.id]: {
+        [documentData.id]: {
           status: 'loading',
         },
       }));
     }
 
     try {
-      const downloadUrl = getEnvelopeDownloadUrl({
-        envelopeItem: envelopeItem,
-        token,
-        version: 'signed',
-      });
-
-      const blob = await fetch(downloadUrl).then(async (res) => await res.blob());
-
-      const file = await blob.arrayBuffer();
+      const file = await getFile(documentData);
 
       setFiles((prev) => ({
         ...prev,
-        [envelopeItem.id]: {
-          file: new Uint8Array(file),
+        [documentData.id]: {
+          file,
           status: 'loaded',
         },
       }));
@@ -139,7 +108,7 @@ export const EnvelopeRenderProvider = ({
 
       setFiles((prev) => ({
         ...prev,
-        [envelopeItem.id]: {
+        [documentData.id]: {
           status: 'error',
         },
       }));
@@ -147,8 +116,8 @@ export const EnvelopeRenderProvider = ({
   };
 
   const getPdfBuffer = useCallback(
-    (envelopeItemId: string) => {
-      return files[envelopeItemId] || null;
+    (documentDataId: string) => {
+      return files[documentDataId] || null;
     },
     [files],
   );
@@ -168,10 +137,10 @@ export const EnvelopeRenderProvider = ({
 
   // Look for any missing pdf files and load them.
   useEffect(() => {
-    const missingFiles = envelope.envelopeItems.filter((item) => !files[item.id]);
+    const missingFiles = envelope.envelopeItems.filter((item) => !files[item.documentDataId]);
 
     for (const item of missingFiles) {
-      void loadEnvelopeItemPdfFile(item);
+      void loadEnvelopeItemPdfFile(item.documentData);
     }
   }, [envelope.envelopeItems]);
 
@@ -195,9 +164,6 @@ export const EnvelopeRenderProvider = ({
         setCurrentEnvelopeItem,
         fields: fields ?? [],
         getRecipientColorKey,
-        renderError,
-        setRenderError,
-        overrideSettings,
       }}
     >
       {children}

packages/lib/client-only/utils/page-canvas-registry.ts

@@ -0,0 +1,110 @@
+import type Konva from 'konva';
+
+/**
+ * Represents canvas references for a specific PDF page.
+ */
+export interface PageCanvasRefs {
+  /** The page number (1-indexed) */
+  pageNumber: number;
+  /** The canvas element containing the rendered PDF */
+  pdfCanvas: HTMLCanvasElement;
+  /** The Konva stage containing field overlays */
+  konvaStage: Konva.Stage;
+}
+
+/**
+ * Module-level registry to store canvas references by page number.
+ * This allows any component to access page canvases without prop drilling.
+ */
+const pageCanvasRegistry = new Map<number, PageCanvasRefs>();
+
+/**
+ * Register a page's canvas references.
+ * Call this when a page renderer mounts and has valid canvas refs.
+ *
+ * @param refs - The canvas references to register
+ */
+export const registerPageCanvas = (refs: PageCanvasRefs): void => {
+  pageCanvasRegistry.set(refs.pageNumber, refs);
+};
+
+/**
+ * Unregister a page's canvas references.
+ * Call this when a page renderer unmounts to prevent memory leaks.
+ *
+ * @param pageNumber - The page number to unregister
+ */
+export const unregisterPageCanvas = (pageNumber: number): void => {
+  pageCanvasRegistry.delete(pageNumber);
+};
+
+/**
+ * Get canvas references for a specific page.
+ *
+ * @param pageNumber - The page number to retrieve
+ * @returns The canvas references, or undefined if not registered
+ */
+export const getPageCanvasRefs = (pageNumber: number): PageCanvasRefs | undefined => {
+  return pageCanvasRegistry.get(pageNumber);
+};
+
+/**
+ * Get all registered page numbers.
+ *
+ * @returns Array of page numbers currently registered
+ */
+export const getRegisteredPageNumbers = (): number[] => {
+  return Array.from(pageCanvasRegistry.keys()).sort((a, b) => a - b);
+};
+
+/**
+ * Composite a PDF page with its field overlays into a single PNG Blob.
+ * This creates a temporary canvas, draws the PDF canvas first (background),
+ * then draws the Konva canvas on top (field overlays).
+ *
+ * @param pageNumber - The page number to composite (1-indexed)
+ * @returns Promise that resolves to a PNG Blob, or null if page not found or compositing fails
+ */
+export const compositePageToBlob = async (pageNumber: number): Promise<Blob | null> => {
+  const refs = getPageCanvasRefs(pageNumber);
+
+  if (!refs) {
+    console.warn(`Page ${pageNumber} is not registered for canvas capture`);
+    return null;
+  }
+
+  try {
+    // Create temporary canvas with same dimensions as PDF canvas
+    const tempCanvas = document.createElement('canvas');
+    tempCanvas.width = refs.pdfCanvas.width;
+    tempCanvas.height = refs.pdfCanvas.height;
+
+    const ctx = tempCanvas.getContext('2d');
+    if (!ctx) {
+      console.error('Failed to get 2D context for temporary canvas');
+      return null;
+    }
+
+    // Draw PDF canvas first (background layer)
+    ctx.drawImage(refs.pdfCanvas, 0, 0);
+
+    // Get Konva canvas and draw on top (field overlays)
+    // Note: Konva's toCanvas() returns a new canvas with all layers rendered
+    const konvaCanvas = refs.konvaStage.toCanvas();
+    ctx.drawImage(konvaCanvas, 0, 0);
+
+    // Convert to PNG Blob
+    return new Promise((resolve, reject) => {
+      tempCanvas.toBlob((blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error('Failed to convert canvas to blob'));
+        }
+      }, 'image/png');
+    });
+  } catch (error) {
+    console.error(`Error compositing page ${pageNumber}:`, error);
+    return null;
+  }
+};

packages/lib/constants/app.ts

@@ -12,7 +12,6 @@ export const NEXT_PRIVATE_INTERNAL_WEBAPP_URL =
 export const IS_BILLING_ENABLED = () => env('NEXT_PUBLIC_FEATURE_BILLING_ENABLED') === 'true';
 
 export const API_V2_BETA_URL = '/api/v2-beta';
-export const API_V2_URL = '/api/v2';
 
 export const SUPPORT_EMAIL = env('NEXT_PUBLIC_SUPPORT_EMAIL') ?? 'support@documenso.com';
 

packages/lib/package.json

@@ -43,6 +43,7 @@
     "micro": "^10.0.1",
     "nanoid": "^5.1.5",
     "oslo": "^0.17.0",
+    "pdfjs-dist": "3.11.174",
     "pg": "^8.11.3",
     "pino": "^9.7.0",
     "pino-pretty": "^13.0.0",
@@ -55,11 +56,11 @@
     "skia-canvas": "^3.0.8",
     "stripe": "^12.7.0",
     "ts-pattern": "^5.0.5",
-    "zod": "^3.25.76"
+    "zod": "3.25.76"
   },
   "devDependencies": {
     "@playwright/browser-chromium": "1.52.0",
     "@types/luxon": "^3.3.1",
     "@types/pg": "^8.11.4"
   }
-}
+}

packages/lib/server-only/admin/admin-find-documents.ts

@@ -78,14 +78,6 @@ export const adminFindDocuments = async ({
             url: true,
           },
         },
-        envelopeItems: {
-          select: {
-            id: true,
-            envelopeId: true,
-            title: true,
-            order: true,
-          },
-        },
       },
     }),
     prisma.envelope.count({

packages/lib/server-only/document/find-documents.ts

@@ -248,14 +248,6 @@ export const findDocuments = async ({
             url: true,
           },
         },
-        envelopeItems: {
-          select: {
-            id: true,
-            envelopeId: true,
-            title: true,
-            order: true,
-          },
-        },
       },
     }),
     prisma.envelope.count({

packages/lib/server-only/document/get-document-by-token.ts

@@ -91,7 +91,7 @@ export const getDocumentAndSenderByToken = async ({
         },
       },
       envelopeItems: {
-        include: {
+        select: {
           documentData: true,
         },
       },

packages/lib/server-only/document/get-document-with-details-by-id.ts

@@ -63,8 +63,5 @@ export const getDocumentWithDetailsById = async ({
       documentId: legacyDocumentId,
       password: null,
     },
-    envelopeItems: envelope.envelopeItems.map((envelopeItem) => ({
-      ...envelopeItem,
-    })),
   };
 };

packages/lib/server-only/document/send-document.ts

@@ -20,12 +20,7 @@ import { validateCheckboxLength } from '../../advanced-fields-validation/validat
 import { AppError, AppErrorCode } from '../../errors/app-error';
 import { jobs } from '../../jobs/client';
 import { extractDerivedDocumentEmailSettings } from '../../types/document-email';
-import {
-  ZCheckboxFieldMeta,
-  ZDropdownFieldMeta,
-  ZFieldAndMetaSchema,
-  ZRadioFieldMeta,
-} from '../../types/field-meta';
+import { ZCheckboxFieldMeta, ZDropdownFieldMeta, ZRadioFieldMeta } from '../../types/field-meta';
 import {
   ZWebhookDocumentSchema,
   mapEnvelopeToWebhookDocumentPayload,
@@ -179,20 +174,9 @@ export const sendDocument = async ({
 
   const fieldsToAutoInsert: { fieldId: number; customText: string }[] = [];
 
-  // Validate and autoinsert fields for V2 envelopes.
+  // Auto insert radio and checkboxes that have default values.
   if (envelope.internalVersion === 2) {
-    for (const unknownField of envelope.fields) {
-      const parsedField = ZFieldAndMetaSchema.safeParse(unknownField);
-
-      if (parsedField.error) {
-        throw new AppError(AppErrorCode.INVALID_REQUEST, {
-          message: 'One or more fields have invalid metadata. Error: ' + parsedField.error.message,
-        });
-      }
-
-      const field = parsedField.data;
-      const fieldId = unknownField.id;
-
+    for (const field of envelope.fields) {
       if (field.type === FieldType.RADIO) {
         const { values = [] } = ZRadioFieldMeta.parse(field.fieldMeta);
 
@@ -200,7 +184,7 @@ export const sendDocument = async ({
 
         if (checkedItemIndex !== -1) {
           fieldsToAutoInsert.push({
-            fieldId,
+            fieldId: field.id,
             customText: toRadioCustomText(checkedItemIndex),
           });
         }
@@ -211,7 +195,7 @@ export const sendDocument = async ({
 
         if (defaultValue && values.some((value) => value.value === defaultValue)) {
           fieldsToAutoInsert.push({
-            fieldId,
+            fieldId: field.id,
             customText: defaultValue,
           });
         }
@@ -250,9 +234,9 @@ export const sendDocument = async ({
           );
         }
 
-        if (isValid && checkedIndices.length > 0) {
+        if (isValid) {
           fieldsToAutoInsert.push({
-            fieldId,
+            fieldId: field.id,
             customText: toCheckboxCustomText(checkedIndices),
           });
         }

packages/lib/server-only/envelope/create-envelope.ts

@@ -16,16 +16,11 @@ import type { ApiRequestMetadata } from '@documenso/lib/universal/extract-reques
 import { nanoid, prefixedId } from '@documenso/lib/universal/id';
 import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
+import type { TCreateEnvelopeRequest } from '@documenso/trpc/server/envelope-router/create-envelope.types';
 
-import type {
-  TDocumentAccessAuthTypes,
-  TDocumentActionAuthTypes,
-  TRecipientAccessAuthTypes,
-  TRecipientActionAuthTypes,
-} from '../../types/document-auth';
+import type { TDocumentAccessAuthTypes, TDocumentActionAuthTypes } from '../../types/document-auth';
 import type { TDocumentFormValues } from '../../types/document-form-values';
 import type { TEnvelopeAttachmentType } from '../../types/envelope-attachment';
-import type { TFieldAndMeta } from '../../types/field-meta';
 import {
   ZWebhookDocumentSchema,
   mapEnvelopeToWebhookDocumentPayload,
@@ -39,25 +34,6 @@ import { incrementDocumentId, incrementTemplateId } from '../envelope/increment-
 import { getTeamSettings } from '../team/get-team-settings';
 import { triggerWebhook } from '../webhooks/trigger/trigger-webhook';
 
-type CreateEnvelopeRecipientFieldOptions = TFieldAndMeta & {
-  documentDataId: string;
-  page: number;
-  positionX: number;
-  positionY: number;
-  width: number;
-  height: number;
-};
-
-type CreateEnvelopeRecipientOptions = {
-  email: string;
-  name: string;
-  role: RecipientRole;
-  signingOrder?: number;
-  accessAuth?: TRecipientAccessAuthTypes[];
-  actionAuth?: TRecipientActionAuthTypes[];
-  fields?: CreateEnvelopeRecipientFieldOptions[];
-};
-
 export type CreateEnvelopeOptions = {
   userId: number;
   teamId: number;
@@ -70,6 +46,7 @@ export type CreateEnvelopeOptions = {
     envelopeItems: { title?: string; documentDataId: string; order?: number }[];
     formValues?: TDocumentFormValues;
 
+    timezone?: string;
     userTimezone?: string;
 
     templateType?: TemplateType;
@@ -79,7 +56,7 @@ export type CreateEnvelopeOptions = {
     visibility?: DocumentVisibility;
     globalAccessAuth?: TDocumentAccessAuthTypes[];
     globalActionAuth?: TDocumentActionAuthTypes[];
-    recipients?: CreateEnvelopeRecipientOptions[];
+    recipients?: TCreateEnvelopeRequest['recipients'];
     folderId?: string;
   };
   attachments?: Array<{
@@ -106,6 +83,7 @@ export const createEnvelope = async ({
     title,
     externalId,
     formValues,
+    timezone,
     userTimezone,
     folderId,
     templateType,
@@ -164,7 +142,6 @@ export const createEnvelope = async ({
   let envelopeItems: { title?: string; documentDataId: string; order?: number }[] =
     data.envelopeItems;
 
-  // Todo: Envelopes - Remove
   if (normalizePdf) {
     envelopeItems = await Promise.all(
       data.envelopeItems.map(async (item) => {
@@ -242,7 +219,7 @@ export const createEnvelope = async ({
 
   // userTimezone is last because it's always passed in regardless of the organisation/team settings
   // for uploads from the frontend
-  const timezoneToUse = meta?.timezone || settings.documentTimezone || userTimezone;
+  const timezoneToUse = timezone || settings.documentTimezone || userTimezone;
 
   const documentMeta = await prisma.documentMeta.create({
     data: extractDerivedDocumentMeta(settings, {