v2.16.0

Currently direct templates can be created without the required
signatures fields for signers.

This means that the document can be fully signed by everyone but will
ultimately fail the sealing step which leaves the document in an
unrecoverable state.

.npmrc

@@ -1,3 +1,3 @@
 legacy-peer-deps = true
 prefer-dedupe = true
-min-release-age = 7
+# min-release-age = 7

apps/docs/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "build": "next build",
+    "build": "NEXT_IGNORE_INCORRECT_LOCKFILE=true next build",
     "dev": "next dev",
     "start": "next start",
     "types:check": "fumadocs-mdx && next typegen && tsc --noEmit",
@@ -29,7 +29,7 @@
     "@types/node": "^25.1.0",
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.14",
+    "postcss": "^8.5.19",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3"
   }

apps/docs/src/app/global.css

@@ -83,7 +83,7 @@
   --accent: hsl(0 0% 27.8431%);
   --accent-foreground: hsl(95.0847 71.0843% 67.451%);
   --destructive: hsl(0 86.5979% 61.9608%);
-  --destructive-foreground: hsl(0 87.6289% 19.0196%);
+  --destructive-foreground: hsl(0 0% 98.0392%);
   --border: hsl(0 0% 27.8431%);
   --input: hsl(0 0% 27.8431%);
   --ring: hsl(95.0847 71.0843% 67.451%);

apps/remix/app/components/dialogs/branding-preferences-reset-dialog.tsx

@@ -0,0 +1,119 @@
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Trans } from '@lingui/react/macro';
+import { useState } from 'react';
+
+export type BrandingPreferencesResetDialogProps = {
+  hasAdvancedBranding: boolean;
+  isSubmitting: boolean;
+  onReset: () => Promise<void>;
+  trigger?: React.ReactNode;
+};
+
+export const BrandingPreferencesResetDialog = ({
+  hasAdvancedBranding,
+  isSubmitting,
+  onReset,
+  trigger,
+}: BrandingPreferencesResetDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [isResetting, setIsResetting] = useState(false);
+
+  const isLoading = isSubmitting || isResetting;
+
+  const handleResetToDefaults = async () => {
+    setIsResetting(true);
+
+    try {
+      await onReset();
+      setOpen(false);
+    } catch {
+      // The submit handler surfaces its own error toast. Keep the dialog open
+      // so the user can retry.
+    } finally {
+      setIsResetting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="destructive" type="button" size="sm" disabled={isLoading}>
+            <Trans>Reset to defaults</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Reset branding preferences</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              This will reset all branding preferences to their default values and save the changes immediately.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="warning">
+          <AlertDescription>
+            <p>
+              <Trans>Once confirmed, the following will be reset:</Trans>
+            </p>
+
+            <ul className="mt-0.5 list-inside list-disc">
+              <li>
+                <Trans>Custom branding enabled setting</Trans>
+              </li>
+              <li>
+                <Trans>Branding logo</Trans>
+              </li>
+              <li>
+                <Trans>Brand website and brand details</Trans>
+              </li>
+              <li>
+                <Trans>Brand colours, including background, foreground, primary, and border colours</Trans>
+              </li>
+
+              {hasAdvancedBranding && (
+                <>
+                  <li>
+                    <Trans>Border radius</Trans>
+                  </li>
+                  <li>
+                    <Trans>Custom CSS</Trans>
+                  </li>
+                </>
+              )}
+            </ul>
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isLoading}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button type="button" variant="destructive" loading={isLoading} onClick={() => void handleResetToDefaults()}>
+            <Trans>Reset to defaults</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/document-preferences-reset-dialog.tsx

@@ -0,0 +1,141 @@
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Trans } from '@lingui/react/macro';
+import { useState } from 'react';
+
+export type DocumentPreferencesResetDialogProps = {
+  isSubmitting: boolean;
+  onReset: () => Promise<void>;
+  showAiFeatures?: boolean;
+  showDocumentVisibility?: boolean;
+  showIncludeSenderDetails?: boolean;
+};
+
+export const DocumentPreferencesResetDialog = ({
+  isSubmitting,
+  onReset,
+  showAiFeatures = false,
+  showDocumentVisibility = false,
+  showIncludeSenderDetails = false,
+}: DocumentPreferencesResetDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [isResetting, setIsResetting] = useState(false);
+
+  const isLoading = isSubmitting || isResetting;
+
+  const handleResetToDefaults = async () => {
+    setIsResetting(true);
+
+    try {
+      await onReset();
+      setOpen(false);
+    } catch {
+      // The submit handler surfaces its own error toast. Keep the dialog open
+      // so the user can retry.
+    } finally {
+      setIsResetting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && setOpen(value)}>
+      <DialogTrigger asChild>
+        <Button variant="destructive" type="button" size="sm" disabled={isLoading}>
+          <Trans>Reset to defaults</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Reset document preferences</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              This will reset all document preferences to their default values and save the changes immediately.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="warning">
+          <AlertDescription>
+            <p>
+              <Trans>Once confirmed, the following will be reset:</Trans>
+            </p>
+
+            <ul className="mt-0.5 list-inside list-disc">
+              {showDocumentVisibility && (
+                <li>
+                  <Trans>Default document visibility</Trans>
+                </li>
+              )}
+              <li>
+                <Trans>Default document language</Trans>
+              </li>
+              <li>
+                <Trans>Default date format</Trans>
+              </li>
+              <li>
+                <Trans>Default time zone</Trans>
+              </li>
+              <li>
+                <Trans>Default signature settings</Trans>
+              </li>
+              {showIncludeSenderDetails && (
+                <li>
+                  <Trans>Send on behalf of team</Trans>
+                </li>
+              )}
+              <li>
+                <Trans>Include the signing certificate in the document</Trans>
+              </li>
+              <li>
+                <Trans>Include the audit logs in the document</Trans>
+              </li>
+              <li>
+                <Trans>Default recipients</Trans>
+              </li>
+              <li>
+                <Trans>Delegate document ownership</Trans>
+              </li>
+              <li>
+                <Trans>Default envelope expiration</Trans>
+              </li>
+              <li>
+                <Trans>Default signing reminders</Trans>
+              </li>
+              {showAiFeatures && (
+                <li>
+                  <Trans>AI features</Trans>
+                </li>
+              )}
+            </ul>
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isLoading}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button type="button" variant="destructive" loading={isLoading} onClick={() => void handleResetToDefaults()}>
+            <Trans>Reset to defaults</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,250 @@
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateApiTokenRequestSchema } from '@documenso/trpc/server/api-token-router/create-api-token.types';
+import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import type { z } from 'zod';
+
+import { useCurrentTeam } from '~/providers/team';
+
+const NEVER_EXPIRE = 'NEVER' as const;
+
+export const EXPIRATION_DATES = {
+  ONE_WEEK: msg`7 days`,
+  ONE_MONTH: msg`1 month`,
+  THREE_MONTHS: msg`3 months`,
+  SIX_MONTHS: msg`6 months`,
+  ONE_YEAR: msg`12 months`,
+  [NEVER_EXPIRE]: msg`Never`,
+} as const;
+
+const ZCreateTokenFormSchema = ZCreateApiTokenRequestSchema.pick({
+  tokenName: true,
+  expirationDate: true,
+});
+
+type TCreateTokenFormSchema = z.infer<typeof ZCreateTokenFormSchema>;
+
+export type TokenCreateDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const TokenCreateDialog = ({ trigger, ...props }: TokenCreateDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const team = useCurrentTeam();
+
+  const [open, setOpen] = useState(false);
+  const [createdToken, setCreatedToken] = useState<string | null>(null);
+
+  const form = useForm<TCreateTokenFormSchema>({
+    resolver: zodResolver(ZCreateTokenFormSchema),
+    defaultValues: {
+      tokenName: '',
+      expirationDate: 'THREE_MONTHS',
+    },
+  });
+
+  const { mutateAsync: createToken } = trpc.apiToken.create.useMutation();
+
+  const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenFormSchema) => {
+    try {
+      const { token } = await createToken({
+        teamId: team.id,
+        tokenName,
+        expirationDate: expirationDate === NEVER_EXPIRE ? null : expirationDate,
+      });
+
+      setCreatedToken(token);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(AppErrorCode.UNAUTHORIZED, () => msg`You do not have permission to create a token for this team.`)
+        .otherwise(() => msg`Something went wrong. Please try again later.`);
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+        duration: 5000,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      form.reset();
+      setCreatedToken(null);
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)} {...props}>
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button className="flex-shrink-0">
+            <Trans>Create token</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent
+        className="max-w-lg"
+        position="center"
+        onInteractOutside={(event) => {
+          // Prevent losing the created token by accidentally clicking outside the dialog.
+          if (createdToken) {
+            event.preventDefault();
+          }
+        }}
+      >
+        {createdToken ? (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Token created</Trans>
+              </DialogTitle>
+
+              <DialogDescription>
+                <Trans>Copy your token now. For security reasons you will not be able to see it again.</Trans>
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="relative">
+              <Input
+                className="pr-12 font-mono text-sm"
+                aria-label={_(msg`Your new API token`)}
+                name="createdToken"
+                readOnly
+                value={createdToken}
+              />
+              <div className="absolute top-0 right-2 bottom-0 flex items-center justify-center">
+                <CopyTextButton
+                  value={createdToken}
+                  onCopySuccess={() => toast({ title: _(msg`Token copied to clipboard`) })}
+                />
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button type="button" onClick={() => setOpen(false)}>
+                <Trans>Done</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        ) : (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Create API token</Trans>
+              </DialogTitle>
+
+              <DialogDescription>
+                <Trans>Use API tokens to authenticate with the Documenso API.</Trans>
+              </DialogDescription>
+            </DialogHeader>
+
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)}>
+                <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+                  <FormField
+                    control={form.control}
+                    name="tokenName"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel required>
+                          <Trans>Name</Trans>
+                        </FormLabel>
+
+                        <FormControl>
+                          <Input className="bg-background" {...field} />
+                        </FormControl>
+
+                        <FormDescription>
+                          <Trans>A name to help you identify this token later.</Trans>
+                        </FormDescription>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="expirationDate"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Expires in</Trans>
+                        </FormLabel>
+
+                        <FormControl>
+                          <Select value={field.value ?? NEVER_EXPIRE} onValueChange={field.onChange}>
+                            <SelectTrigger className="bg-background">
+                              <SelectValue />
+                            </SelectTrigger>
+
+                            <SelectContent>
+                              {Object.entries(EXPIRATION_DATES).map(([key, date]) => (
+                                <SelectItem key={key} value={key}>
+                                  {_(date)}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <DialogFooter>
+                    <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                      <Trans>Cancel</Trans>
+                    </Button>
+
+                    <Button type="submit" loading={form.formState.isSubmitting}>
+                      <Trans>Create token</Trans>
+                    </Button>
+                  </DialogFooter>
+                </fieldset>
+              </form>
+            </Form>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/token-delete-dialog.tsx

@@ -105,7 +105,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
-            <Trans>Are you sure you want to delete this token?</Trans>
+            <Trans>Delete token</Trans>
           </DialogTitle>
 
           <DialogDescription>
@@ -139,21 +139,18 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
               />
 
               <DialogFooter>
-                <div className="flex w-full flex-nowrap gap-4">
-                  <Button type="button" variant="secondary" className="flex-1" onClick={() => setIsOpen(false)}>
-                    <Trans>Cancel</Trans>
-                  </Button>
+                <Button type="button" variant="secondary" onClick={() => setIsOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
 
-                  <Button
-                    type="submit"
-                    variant="destructive"
-                    className="flex-1"
-                    disabled={!form.formState.isValid}
-                    loading={form.formState.isSubmitting}
-                  >
-                    <Trans>I'm sure! Delete it</Trans>
-                  </Button>
-                </div>
+                <Button
+                  type="submit"
+                  variant="destructive"
+                  disabled={!form.formState.isValid}
+                  loading={form.formState.isSubmitting}
+                >
+                  <Trans>Delete</Trans>
+                </Button>
               </DialogFooter>
             </fieldset>
           </form>

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

@@ -7,6 +7,7 @@ import {
 } from '@documenso/lib/constants/branding';
 import { DEFAULT_BRAND_COLORS, DEFAULT_BRAND_RADIUS } from '@documenso/lib/constants/theme';
 import { ZCssVarsSchema } from '@documenso/lib/types/css-vars';
+import { normalizeBrandingColors } from '@documenso/lib/utils/normalize-branding-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@documenso/ui/primitives/accordion';
 import { Button } from '@documenso/ui/primitives/button';
@@ -23,6 +24,7 @@ import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { BrandingPreferencesResetDialog } from '~/components/dialogs/branding-preferences-reset-dialog';
 import { useOptionalCurrentTeam } from '~/providers/team';
 import { useCspNonce } from '~/utils/nonce';
 
@@ -74,6 +76,7 @@ export function BrandingPreferencesForm({
 
   const [previewUrl, setPreviewUrl] = useState<string>('');
   const [hasLoadedPreview, setHasLoadedPreview] = useState(false);
+  const [colorPickerKey, setColorPickerKey] = useState(0);
 
   const parsedColors = ZCssVarsSchema.safeParse(settings.brandingColors);
   const initialColors = parsedColors.success ? parsedColors.data : {};
@@ -96,6 +99,42 @@ export function BrandingPreferencesForm({
 
   const isBrandingEnabled = form.watch('brandingEnabled');
 
+  const hasResetBrandingColors =
+    settings.brandingColors === null ||
+    settings.brandingColors === undefined ||
+    (parsedColors.success && normalizeBrandingColors(parsedColors.data) === null);
+
+  // Only show the reset action when the saved settings actually differ from the
+  // defaults, so it never renders as a pointless disabled button.
+  const isResetToDefaultsVisible =
+    settings.brandingEnabled !== (canInherit ? null : false) ||
+    !!settings.brandingLogo ||
+    !!settings.brandingUrl ||
+    !!settings.brandingCompanyDetails ||
+    !!settings.brandingCss ||
+    !hasResetBrandingColors;
+
+  const handleResetToDefaults = async () => {
+    const data: TBrandingPreferencesFormSchema = {
+      brandingEnabled: canInherit ? null : false,
+      brandingLogo: null,
+      brandingUrl: '',
+      brandingCompanyDetails: '',
+      brandingColors: {},
+      brandingCss: '',
+    };
+
+    await onFormSubmit(data);
+
+    if (previewUrl.startsWith('blob:')) {
+      URL.revokeObjectURL(previewUrl);
+    }
+
+    setPreviewUrl('');
+    setColorPickerKey((key) => key + 1);
+    form.reset(data);
+  };
+
   const getSavedLogoPreviewUrl = () => {
     if (!settings.brandingLogo) {
       return '';
@@ -397,6 +436,7 @@ export function BrandingPreferencesForm({
                         </FormDescription>
                         <FormControl>
                           <ColorPicker
+                            key={`background-${colorPickerKey}`}
                             nonce={nonce}
                             value={field.value ?? ''}
                             defaultValue={DEFAULT_BRAND_COLORS.background}
@@ -420,6 +460,7 @@ export function BrandingPreferencesForm({
                         </FormDescription>
                         <FormControl>
                           <ColorPicker
+                            key={`foreground-${colorPickerKey}`}
                             nonce={nonce}
                             value={field.value ?? ''}
                             defaultValue={DEFAULT_BRAND_COLORS.foreground}
@@ -443,6 +484,7 @@ export function BrandingPreferencesForm({
                         </FormDescription>
                         <FormControl>
                           <ColorPicker
+                            key={`primary-${colorPickerKey}`}
                             nonce={nonce}
                             value={field.value ?? ''}
                             defaultValue={DEFAULT_BRAND_COLORS.primary}
@@ -466,6 +508,7 @@ export function BrandingPreferencesForm({
                         </FormDescription>
                         <FormControl>
                           <ColorPicker
+                            key={`primary-foreground-${colorPickerKey}`}
                             nonce={nonce}
                             value={field.value ?? ''}
                             defaultValue={DEFAULT_BRAND_COLORS.primaryForeground}
@@ -489,6 +532,7 @@ export function BrandingPreferencesForm({
                         </FormDescription>
                         <FormControl>
                           <ColorPicker
+                            key={`border-${colorPickerKey}`}
                             nonce={nonce}
                             value={field.value ?? ''}
                             defaultValue={DEFAULT_BRAND_COLORS.border}
@@ -512,6 +556,7 @@ export function BrandingPreferencesForm({
                         </FormDescription>
                         <FormControl>
                           <ColorPicker
+                            key={`ring-${colorPickerKey}`}
                             nonce={nonce}
                             value={field.value ?? ''}
                             defaultValue={DEFAULT_BRAND_COLORS.ring}
@@ -593,6 +638,15 @@ export function BrandingPreferencesForm({
             isDirty={hasUnsavedChanges}
             isSubmitting={form.formState.isSubmitting}
             onReset={handleReset}
+            resetToDefaults={
+              isResetToDefaultsVisible ? (
+                <BrandingPreferencesResetDialog
+                  hasAdvancedBranding={hasAdvancedBranding}
+                  isSubmitting={form.formState.isSubmitting}
+                  onReset={handleResetToDefaults}
+                />
+              ) : undefined
+            }
           />
         </fieldset>
       </form>

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

@@ -11,10 +11,10 @@ import { isValidLanguageCode, SUPPORTED_LANGUAGE_CODES, SUPPORTED_LANGUAGES } fr
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import type { TDefaultRecipients } from '@documenso/lib/types/default-recipients';
 import { ZDefaultRecipientsSchema } from '@documenso/lib/types/default-recipients';
-import { type TDocumentMetaDateFormat, ZDocumentMetaTimezoneSchema } from '@documenso/lib/types/document-meta';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { type TDocumentMetaDateFormat, ZDocumentMetaDateFormatSchema } from '@documenso/lib/types/document-meta';
+import { generateDefaultOrganisationSettings, isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
-import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
+import { extractTeamSignatureSettings, generateDefaultTeamSettings } from '@documenso/lib/utils/teams';
 import { DocumentSignatureSettingsTooltip } from '@documenso/ui/components/document/document-signature-settings-tooltip';
 import { ExpirationPeriodPicker } from '@documenso/ui/components/document/expiration-period-picker';
 import { ReminderSettingsPicker } from '@documenso/ui/components/document/reminder-settings-picker';
@@ -37,11 +37,11 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg, t } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { TeamGlobalSettings } from '@prisma/client';
-import { DocumentVisibility, OrganisationType, type RecipientRole } from '@prisma/client';
+import { DocumentVisibility, OrganisationType, type RecipientRole, type TeamGlobalSettings } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { DocumentPreferencesResetDialog } from '~/components/dialogs/document-preferences-reset-dialog';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 import { DefaultRecipientsMultiSelectCombobox } from '../general/default-recipients-multiselect-combobox';
@@ -93,6 +93,26 @@ export type DocumentPreferencesFormProps = {
   onFormSubmit: (data: TDocumentPreferencesFormSchema) => Promise<void>;
 };
 
+const getDocumentPreferencesFormValues = (settings: SettingsSubset): TDocumentPreferencesFormSchema => {
+  const parsedDocumentDateFormat = ZDocumentMetaDateFormatSchema.safeParse(settings.documentDateFormat);
+
+  return {
+    documentVisibility: settings.documentVisibility,
+    documentLanguage: isValidLanguageCode(settings.documentLanguage) ? settings.documentLanguage : null,
+    documentTimezone: settings.documentTimezone,
+    documentDateFormat: parsedDocumentDateFormat.success ? parsedDocumentDateFormat.data : null,
+    includeSenderDetails: settings.includeSenderDetails,
+    includeSigningCertificate: settings.includeSigningCertificate,
+    includeAuditLog: settings.includeAuditLog,
+    signatureTypes: extractTeamSignatureSettings({ ...settings }),
+    defaultRecipients: settings.defaultRecipients ? ZDefaultRecipientsSchema.parse(settings.defaultRecipients) : null,
+    delegateDocumentOwnership: settings.delegateDocumentOwnership,
+    aiFeaturesEnabled: settings.aiFeaturesEnabled,
+    envelopeExpirationPeriod: settings.envelopeExpirationPeriod ?? null,
+    reminderSettings: settings.reminderSettings ?? null,
+  };
+};
+
 export const DocumentPreferencesForm = ({
   settings,
   onFormSubmit,
@@ -113,7 +133,7 @@ export const DocumentPreferencesForm = ({
     documentVisibility: z.nativeEnum(DocumentVisibility).nullable(),
     documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES).nullable(),
     documentTimezone: z.string().nullable(),
-    documentDateFormat: ZDocumentMetaTimezoneSchema.nullable(),
+    documentDateFormat: ZDocumentMetaDateFormatSchema.nullable(),
     includeSenderDetails: z.boolean().nullable(),
     includeSigningCertificate: z.boolean().nullable(),
     includeAuditLog: z.boolean().nullable(),
@@ -127,26 +147,33 @@ export const DocumentPreferencesForm = ({
     reminderSettings: ZEnvelopeReminderSettings.nullable(),
   });
 
+  const defaultValues = getDocumentPreferencesFormValues(settings);
+  const defaultSettings = canInherit ? generateDefaultTeamSettings() : generateDefaultOrganisationSettings();
+  const baseResetValues = getDocumentPreferencesFormValues(defaultSettings);
+  const resetValues = {
+    ...baseResetValues,
+    aiFeaturesEnabled: isAiFeaturesConfigured ? baseResetValues.aiFeaturesEnabled : defaultValues.aiFeaturesEnabled,
+  };
+
   const form = useForm<TDocumentPreferencesFormSchema>({
-    defaultValues: {
-      documentVisibility: settings.documentVisibility,
-      documentLanguage: isValidLanguageCode(settings.documentLanguage) ? settings.documentLanguage : null,
-      documentTimezone: settings.documentTimezone,
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      documentDateFormat: settings.documentDateFormat as TDocumentMetaDateFormat | null,
-      includeSenderDetails: settings.includeSenderDetails,
-      includeSigningCertificate: settings.includeSigningCertificate,
-      includeAuditLog: settings.includeAuditLog,
-      signatureTypes: extractTeamSignatureSettings({ ...settings }),
-      defaultRecipients: settings.defaultRecipients ? ZDefaultRecipientsSchema.parse(settings.defaultRecipients) : null,
-      delegateDocumentOwnership: settings.delegateDocumentOwnership,
-      aiFeaturesEnabled: settings.aiFeaturesEnabled,
-      envelopeExpirationPeriod: settings.envelopeExpirationPeriod ?? null,
-      reminderSettings: settings.reminderSettings ?? null,
-    },
+    defaultValues,
     resolver: zodResolver(ZDocumentPreferencesFormSchema),
   });
 
+  // Parse both sides through the schema so we compare canonical representations
+  const parsedCurrentValues = ZDocumentPreferencesFormSchema.safeParse(defaultValues);
+  const parsedResetValues = ZDocumentPreferencesFormSchema.safeParse(resetValues);
+
+  const isResetToDefaultsVisible =
+    !parsedCurrentValues.success ||
+    !parsedResetValues.success ||
+    JSON.stringify(parsedCurrentValues.data) !== JSON.stringify(parsedResetValues.data);
+
+  const handleResetToDefaults = async () => {
+    await onFormSubmit(resetValues);
+    form.reset(resetValues);
+  };
+
   const handleFormSubmit = form.handleSubmit(async (data) => {
     try {
       await onFormSubmit(data);
@@ -772,6 +799,17 @@ export const DocumentPreferencesForm = ({
             isDirty={form.formState.isDirty}
             isSubmitting={form.formState.isSubmitting}
             onReset={() => form.reset()}
+            resetToDefaults={
+              isResetToDefaultsVisible ? (
+                <DocumentPreferencesResetDialog
+                  isSubmitting={form.formState.isSubmitting}
+                  onReset={handleResetToDefaults}
+                  showAiFeatures={isAiFeaturesConfigured}
+                  showDocumentVisibility={!isPersonalLayoutMode}
+                  showIncludeSenderDetails={!isPersonalLayoutMode && !isPersonalOrganisation}
+                />
+              ) : undefined
+            }
           />
         </fieldset>
       </form>

apps/remix/app/components/forms/form-sticky-save-bar.tsx

@@ -3,12 +3,17 @@ import { Button } from '@documenso/ui/primitives/button';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { AnimatePresence, motion } from 'framer-motion';
 import { AlertTriangleIcon } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
 
 export type FormStickySaveBarProps = {
   isDirty: boolean;
   isSubmitting: boolean;
   onReset: () => void;
+  /**
+   * Slot for a "reset to defaults" action, rendered before the Undo button. Hidden while
+   * the bar is floating so it never appears in the unsaved-changes island.
+   */
+  resetToDefaults?: ReactNode;
 };
 
 /**
@@ -24,7 +29,7 @@ export type FormStickySaveBarProps = {
  * shared-layout morph). A 1px sentinel below it detects the stuck state so we can toggle
  * the pill chrome.
  */
-export const FormStickySaveBar = ({ isDirty, isSubmitting, onReset }: FormStickySaveBarProps) => {
+export const FormStickySaveBar = ({ isDirty, isSubmitting, onReset, resetToDefaults }: FormStickySaveBarProps) => {
   const { t } = useLingui();
 
   const sentinelRef = useRef<HTMLDivElement>(null);
@@ -100,6 +105,8 @@ export const FormStickySaveBar = ({ isDirty, isSubmitting, onReset }: FormSticky
         </AnimatePresence>
 
         <div className="ml-auto flex flex-shrink-0 items-center gap-x-2">
+          {!isFloating && resetToDefaults}
+
           {isDirty && (
             <Button type="button" variant="secondary" size="sm" onClick={onReset} disabled={isSubmitting}>
               <Trans>Undo</Trans>

apps/remix/app/components/forms/token.tsx

@@ -1,254 +0,0 @@
-import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { trpc } from '@documenso/trpc/react';
-import { ZCreateApiTokenRequestSchema } from '@documenso/trpc/server/api-token-router/create-api-token.types';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
-import { Switch } from '@documenso/ui/primitives/switch';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type { ApiToken } from '@prisma/client';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { match } from 'ts-pattern';
-import type { z } from 'zod';
-
-import { useCurrentTeam } from '~/providers/team';
-
-export const EXPIRATION_DATES = {
-  ONE_WEEK: msg`7 days`,
-  ONE_MONTH: msg`1 month`,
-  THREE_MONTHS: msg`3 months`,
-  SIX_MONTHS: msg`6 months`,
-  ONE_YEAR: msg`12 months`,
-} as const;
-
-const ZCreateTokenFormSchema = ZCreateApiTokenRequestSchema.pick({
-  tokenName: true,
-  expirationDate: true,
-});
-
-type TCreateTokenFormSchema = z.infer<typeof ZCreateTokenFormSchema>;
-
-type NewlyCreatedToken = {
-  id: number;
-  token: string;
-};
-
-export type ApiTokenFormProps = {
-  className?: string;
-  tokens?: Pick<ApiToken, 'id'>[];
-};
-
-export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
-  const [, copy] = useCopyToClipboard();
-
-  const team = useCurrentTeam();
-
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const [newlyCreatedToken, setNewlyCreatedToken] = useState<NewlyCreatedToken | null>();
-  const [noExpirationDate, setNoExpirationDate] = useState(false);
-
-  const { mutateAsync: createTokenMutation } = trpc.apiToken.create.useMutation({
-    onSuccess(data) {
-      setNewlyCreatedToken(data);
-    },
-  });
-
-  const form = useForm<TCreateTokenFormSchema>({
-    resolver: zodResolver(ZCreateTokenFormSchema),
-    defaultValues: {
-      tokenName: '',
-      expirationDate: '',
-    },
-  });
-
-  const copyToken = async (token: string) => {
-    try {
-      const copied = await copy(token);
-
-      if (!copied) {
-        throw new Error('Unable to copy the token');
-      }
-
-      toast({
-        title: _(msg`Token copied to clipboard`),
-        description: _(msg`The token was copied to your clipboard.`),
-      });
-    } catch (error) {
-      toast({
-        title: _(msg`Unable to copy token`),
-        description: _(msg`We were unable to copy the token to your clipboard. Please try again.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenFormSchema) => {
-    try {
-      await createTokenMutation({
-        teamId: team.id,
-        tokenName,
-        expirationDate: noExpirationDate ? null : expirationDate,
-      });
-
-      toast({
-        title: _(msg`Token created`),
-        description: _(msg`A new token was created successfully.`),
-        duration: 5000,
-      });
-
-      form.reset();
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      const errorMessage = match(error.code)
-        .with(AppErrorCode.UNAUTHORIZED, () => msg`You do not have permission to create a token for this team.`)
-        .otherwise(() => msg`Something went wrong. Please try again later.`);
-
-      toast({
-        title: _(msg`An error occurred`),
-        description: _(errorMessage),
-        variant: 'destructive',
-        duration: 5000,
-      });
-    }
-  };
-
-  return (
-    <div className={cn(className)}>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          <fieldset className="mt-6 flex w-full flex-col gap-4" disabled={form.formState.isSubmitting}>
-            <FormField
-              control={form.control}
-              name="tokenName"
-              render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormLabel className="text-muted-foreground">
-                    <Trans>Token name</Trans>
-                  </FormLabel>
-
-                  <div className="flex items-center gap-x-4">
-                    <FormControl className="flex-1">
-                      <Input type="text" {...field} />
-                    </FormControl>
-                  </div>
-
-                  <FormDescription className="text-xs italic">
-                    <Trans>Please enter a meaningful name for your token. This will help you identify it later.</Trans>
-                  </FormDescription>
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="flex flex-col gap-4 md:flex-row">
-              <FormField
-                control={form.control}
-                name="expirationDate"
-                render={({ field }) => (
-                  <FormItem className="flex-1">
-                    <FormLabel className="text-muted-foreground">
-                      <Trans>Token expiration date</Trans>
-                    </FormLabel>
-
-                    <div className="flex items-center gap-x-4">
-                      <FormControl className="flex-1">
-                        <Select onValueChange={field.onChange} disabled={noExpirationDate}>
-                          <SelectTrigger className="w-full">
-                            <SelectValue placeholder={_(msg`Choose...`)} />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {Object.entries(EXPIRATION_DATES).map(([key, date]) => (
-                              <SelectItem key={key} value={key}>
-                                {_(date)}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                      </FormControl>
-                    </div>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <div>
-                <FormLabel className="mt-2 text-muted-foreground">
-                  <Trans>Never expire</Trans>
-                </FormLabel>
-                <div className="block md:py-1.5">
-                  <Switch
-                    className="mt-2 bg-background"
-                    checked={noExpirationDate}
-                    onCheckedChange={setNoExpirationDate}
-                  />
-                </div>
-              </div>
-            </div>
-
-            <Button type="submit" className="hidden md:inline-flex" loading={form.formState.isSubmitting}>
-              <Trans>Create token</Trans>
-            </Button>
-
-            <div className="md:hidden">
-              <Button type="submit" loading={form.formState.isSubmitting}>
-                <Trans>Create token</Trans>
-              </Button>
-            </div>
-          </fieldset>
-        </form>
-      </Form>
-
-      <AnimatePresence>
-        {newlyCreatedToken && tokens && tokens.find((token) => token.id === newlyCreatedToken.id) && (
-          <motion.div
-            className="mt-8"
-            initial={{ opacity: 0, y: -40 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: 40 }}
-          >
-            <Card gradient>
-              <CardContent className="p-4">
-                <p className="mt-2 text-muted-foreground text-sm">
-                  <Trans>
-                    Your token was created successfully! Make sure to copy it because you won't be able to see it again!
-                  </Trans>
-                </p>
-
-                <p className="my-4 rounded-md bg-muted-foreground/10 px-2.5 py-1 font-mono text-sm">
-                  {newlyCreatedToken.token}
-                </p>
-
-                <Button variant="outline" onClick={() => void copyToken(newlyCreatedToken.token)}>
-                  <Trans>Copy token</Trans>
-                </Button>
-              </CardContent>
-            </Card>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};

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

@@ -0,0 +1,23 @@
+import { Trans } from '@lingui/react/macro';
+import { AlertTriangleIcon } from 'lucide-react';
+
+export const DirectTemplateInvalidPageView = () => {
+  return (
+    <div className="mx-auto flex h-[70vh] w-full max-w-md flex-col items-center justify-center">
+      <div>
+        <AlertTriangleIcon className="h-10 w-10 text-destructive" />
+
+        <h1 className="mt-4 font-semibold text-3xl">
+          <Trans>Invalid direct link template</Trans>
+        </h1>
+
+        <p className="mt-2 text-muted-foreground text-sm">
+          <Trans>
+            This direct link template cannot be used because one or more signers do not have a signature field assigned.
+            Please contact the sender to update the template.
+          </Trans>
+        </p>
+      </div>
+    </div>
+  );
+};

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

@@ -54,6 +54,7 @@ import { useCurrentTeam } from '~/providers/team';
 
 import { EnvelopeEditorFieldDragDrop } from './envelope-editor-fields-drag-drop';
 import { EnvelopeEditorFieldsPageRenderer } from './envelope-editor-fields-page-renderer';
+import { EnvelopeEditorInvalidDirectTemplateAlert } from './envelope-editor-invalid-direct-template-alert';
 import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 import { EnvelopeRecipientSelector } from './envelope-recipient-selector';
 
@@ -238,6 +239,8 @@ export const EnvelopeEditorFieldsPage = () => {
           }
         />
 
+        <EnvelopeEditorInvalidDirectTemplateAlert />
+
         {/* Document View */}
         <div className="mt-4 flex h-full flex-col items-center justify-center">
           {envelope.recipients.length === 0 && (

apps/remix/app/components/general/envelope-editor/envelope-editor-invalid-direct-template-alert.tsx

@@ -0,0 +1,55 @@
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { getRecipientsWithMissingFields } from '@documenso/lib/utils/recipients';
+import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Trans } from '@lingui/react/macro';
+import { useMemo } from 'react';
+
+export type EnvelopeEditorInvalidDirectTemplateAlertProps = {
+  className?: string;
+};
+
+/**
+ * Warns that a direct link template cannot be used because one or more signers
+ * are missing a signature field.
+ */
+export const EnvelopeEditorInvalidDirectTemplateAlert = ({
+  className,
+}: EnvelopeEditorInvalidDirectTemplateAlertProps) => {
+  const { envelope, isTemplate } = useCurrentEnvelopeEditor();
+
+  const signersMissingSignatureFields = useMemo(() => {
+    if (!isTemplate || !envelope.directLink?.enabled) {
+      return [];
+    }
+
+    return getRecipientsWithMissingFields(envelope.recipients, envelope.fields);
+  }, [isTemplate, envelope.directLink, envelope.recipients, envelope.fields]);
+
+  if (signersMissingSignatureFields.length === 0) {
+    return null;
+  }
+
+  return (
+    <Alert
+      variant="destructive"
+      className={cn('mx-auto w-full max-w-[800px] flex-row items-start gap-3 rounded-sm', className)}
+    >
+      <AlertTitle>
+        <Trans>Invalid direct link template</Trans>
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans>
+          Recipients cannot use this direct link template because the following signers are missing a signature field
+        </Trans>
+
+        <ul className="list-disc pl-5">
+          {signersMissingSignatureFields.map((recipient, i) => (
+            <li key={recipient.id}>{recipient.email || recipient.name || `Recipient ${i + 1}`}</li>
+          ))}
+        </ul>
+      </AlertDescription>
+    </Alert>
+  );
+};

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

@@ -22,6 +22,7 @@ import { match } from 'ts-pattern';
 import { EnvelopeGenericPageRenderer } from '~/components/general/envelope-editor/envelope-generic-page-renderer';
 import { EnvelopePdfViewer } from '~/components/general/pdf-viewer/envelope-pdf-viewer';
 
+import { EnvelopeEditorInvalidDirectTemplateAlert } from './envelope-editor-invalid-direct-template-alert';
 import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 
 export const EnvelopeEditorPreviewPage = () => {
@@ -228,6 +229,8 @@ export const EnvelopeEditorPreviewPage = () => {
           {/* Horizontal envelope item selector */}
           <EnvelopeRendererFileSelector className="px-0" fields={editorFields.localFields} />
 
+          <EnvelopeEditorInvalidDirectTemplateAlert className="mb-4" />
+
           <Alert variant="warning" className="mx-auto max-w-[800px]">
             <AlertTitle>
               <Trans>Preview Mode</Trans>

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

@@ -26,6 +26,7 @@ import { ErrorCode as DropzoneErrorCode, type FileRejection, useDropzone } from
 
 import { EnvelopeItemDeleteDialog } from '~/components/dialogs/envelope-item-delete-dialog';
 
+import { EnvelopeEditorInvalidDirectTemplateAlert } from './envelope-editor-invalid-direct-template-alert';
 import { EnvelopeEditorRecipientForm } from './envelope-editor-recipient-form';
 import { EnvelopeItemTitleInput } from './envelope-editor-title-input';
 
@@ -449,6 +450,9 @@ export const EnvelopeEditorUploadPage = () => {
   return (
     <div className="mx-auto max-w-4xl space-y-6 p-8">
       <input {...getReplaceInputProps()} />
+
+      <EnvelopeEditorInvalidDirectTemplateAlert className="max-w-none" />
+
       <Card backdropBlur={false} className="border">
         <CardHeader className="pb-3">
           <CardTitle>

apps/remix/app/entry.client.tsx

@@ -3,27 +3,32 @@ import { dynamicActivate } from '@documenso/lib/utils/i18n';
 import { i18n } from '@lingui/core';
 import { detect, fromHtmlTag } from '@lingui/detect-locale';
 import { I18nProvider } from '@lingui/react';
-import { StrictMode, startTransition, useEffect } from 'react';
+import { StrictMode, startTransition } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { HydratedRouter } from 'react-router/dom';
 
 import './utils/polyfills/promise-with-resolvers';
 
-function PosthogInit() {
+/**
+ * Initialised imperatively (not as a component inside `hydrateRoot`) because
+ * rendering extra client-only siblings changes the React tree structure
+ * relative to the server render in `entry.server.tsx`. That shifts every
+ * `useId` value (used by Radix for `id`/`htmlFor`/`aria-*`), causing hydration
+ * mismatches which can abort hydration entirely when the user interacts with
+ * the page early, leaving dead event handlers (broken dropdowns, native form
+ * submits).
+ */
+function initPosthog() {
   const postHogConfig = extractPostHogConfig();
 
-  useEffect(() => {
-    if (postHogConfig) {
-      void import('posthog-js').then(({ default: posthog }) => {
-        posthog.init(postHogConfig.key, {
-          api_host: postHogConfig.host,
-          capture_exceptions: true,
-        });
+  if (postHogConfig) {
+    void import('posthog-js').then(({ default: posthog }) => {
+      posthog.init(postHogConfig.key, {
+        api_host: postHogConfig.host,
+        capture_exceptions: true,
       });
-    }
-  }, []);
-
-  return null;
+    });
+  }
 }
 
 async function main() {
@@ -38,11 +43,11 @@ async function main() {
         <I18nProvider i18n={i18n}>
           <HydratedRouter />
         </I18nProvider>
-
-        <PosthogInit />
       </StrictMode>,
     );
   });
+
+  void initPosthog();
 }
 
 // eslint-disable-next-line @typescript-eslint/no-floating-promises

apps/remix/app/root.tsx

@@ -119,7 +119,11 @@ export function LayoutContent({ children }: { children: React.ReactNode }) {
   const isRecipientRoute = matches.some((m) => m.id?.startsWith('routes/_recipient+'));
 
   return (
-    <html translate="no" lang={lang} data-theme={theme} className={theme ?? ''}>
+    // `suppressHydrationWarning` because `remix-themes` intentionally mutates
+    // `data-theme`/`class` on <html> before hydration (PreventFlashOnWrongTheme),
+    // so the server-rendered attributes never match the client render when the
+    // theme is resolved from the system preference. Attribute-only, one level deep.
+    <html translate="no" lang={lang} data-theme={theme} className={theme ?? ''} suppressHydrationWarning>
       <head>
         <meta charSet="utf-8" />
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
@@ -173,7 +177,11 @@ export function LayoutContent({ children }: { children: React.ReactNode }) {
         <script
           nonce={nonce(cspNonce)}
           dangerouslySetInnerHTML={{
-            __html: `window.__ENV__ = ${JSON.stringify(publicEnv)}`,
+            // `__webpack_nonce__` is read by `get-nonce` (used by
+            // react-remove-scroll / react-style-singleton inside Radix menus and
+            // dialogs) to stamp runtime-injected <style> elements. Without it the
+            // strict `style-src-elem` CSP blocks the scroll-lock styles.
+            __html: `window.__ENV__ = ${JSON.stringify(publicEnv)}; window.__webpack_nonce__ = ${JSON.stringify(cspNonce ?? '')}`,
           }}
         />
 

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.document.tsx

@@ -88,7 +88,7 @@ export default function OrganisationSettingsDocumentPage() {
           typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
           uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
           drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
-          delegateDocumentOwnership: delegateDocumentOwnership,
+          delegateDocumentOwnership,
           aiFeaturesEnabled,
           envelopeExpirationPeriod: envelopeExpirationPeriod ?? undefined,
           reminderSettings: reminderSettings ?? undefined,

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.document.tsx

@@ -82,7 +82,7 @@ export default function TeamsSettingsPage() {
                 uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
                 drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
               }),
-          delegateDocumentOwnership: delegateDocumentOwnership,
+          delegateDocumentOwnership,
         },
       });
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.tokens.tsx

@@ -1,14 +1,18 @@
 import { trpc } from '@documenso/trpc/react';
+import type { TGetApiTokensResponse } from '@documenso/trpc/server/api-token-router/get-api-tokens.types';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
+import { DataTable, type DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
 import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { TeamMemberRole } from '@prisma/client';
-import { DateTime } from 'luxon';
+import { useMemo } from 'react';
 
+import { TokenCreateDialog } from '~/components/dialogs/token-create-dialog';
 import TokenDeleteDialog from '~/components/dialogs/token-delete-dialog';
-import { ApiTokenForm } from '~/components/forms/token';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { useOptionalCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -18,33 +22,88 @@ export function meta() {
 }
 
 export default function ApiTokensPage() {
-  const { i18n } = useLingui();
-
-  const { data: tokens } = trpc.apiToken.getMany.useQuery();
+  const { t, i18n } = useLingui();
 
   const team = useOptionalCurrentTeam();
 
+  const isUnauthorized = !!team && team.currentTeamRole !== TeamMemberRole.ADMIN;
+
+  const {
+    data: tokens,
+    isLoading,
+    isError,
+  } = trpc.apiToken.getMany.useQuery(undefined, {
+    enabled: !isUnauthorized,
+  });
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: t`Name`,
+        cell: ({ row }) => <span className="font-medium text-foreground">{row.original.name}</span>,
+      },
+      {
+        header: t`Created`,
+        cell: ({ row }) => i18n.date(row.original.createdAt),
+      },
+      {
+        header: t`Expires`,
+        cell: ({ row }) => {
+          if (!row.original.expires) {
+            return (
+              <span className="text-muted-foreground">
+                <Trans>Never</Trans>
+              </span>
+            );
+          }
+
+          if (row.original.expires < new Date()) {
+            return (
+              <Badge variant="destructive" size="small">
+                <Trans>Expired</Trans>
+              </Badge>
+            );
+          }
+
+          return i18n.date(row.original.expires);
+        },
+      },
+      {
+        header: t`Actions`,
+        cell: ({ row }) => (
+          <TokenDeleteDialog token={row.original}>
+            <Button variant="destructive">
+              <Trans>Delete</Trans>
+            </Button>
+          </TokenDeleteDialog>
+        ),
+      },
+    ] satisfies DataTableColumnDef<TGetApiTokensResponse[number]>[];
+  }, []);
+
   return (
     <div>
       <SettingsHeader
         title={<Trans>API Tokens</Trans>}
         subtitle={
           <Trans>
-            On this page, you can create and manage API tokens. See our{' '}
+            Create and manage API tokens. See our{' '}
             <a
               className="text-primary underline"
               href={'https://docs.documenso.com/developers/public-api'}
               target="_blank"
               rel="noopener"
             >
-              Documentation
+              documentation
             </a>{' '}
             for more information.
           </Trans>
         }
-      />
+      >
+        {!isUnauthorized && <TokenCreateDialog />}
+      </SettingsHeader>
 
-      {team && team?.currentTeamRole !== TeamMemberRole.ADMIN ? (
+      {isUnauthorized ? (
         <Alert className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row" variant="warning">
           <div>
             <AlertTitle>
@@ -56,58 +115,43 @@ export default function ApiTokensPage() {
           </div>
         </Alert>
       ) : (
-        <>
-          <ApiTokenForm className="max-w-xl" tokens={tokens} />
-
-          <hr className="mt-8 mb-4" />
-
-          <h4 className="font-medium text-xl">
-            <Trans>Your existing tokens</Trans>
-          </h4>
-
-          {tokens && tokens.length === 0 && (
-            <div className="mb-4">
-              <p className="mt-2 text-muted-foreground text-sm italic">
-                <Trans>Your tokens will be shown here once you create them.</Trans>
+        <DataTable
+          columns={columns}
+          data={tokens ?? []}
+          perPage={0}
+          currentPage={0}
+          totalPages={0}
+          error={{
+            enable: isError,
+          }}
+          emptyState={
+            <div className="flex h-60 flex-col items-center justify-center gap-y-4 text-muted-foreground/60">
+              <p>
+                <Trans>You have no API tokens yet. Your tokens will be shown here once you create them.</Trans>
               </p>
             </div>
-          )}
-
-          {tokens && tokens.length > 0 && (
-            <div className="mt-4 flex max-w-xl flex-col gap-y-4">
-              {tokens.map((token) => (
-                <div key={token.id} className="rounded-lg border border-border p-4">
-                  <div className="flex items-center justify-between gap-x-4">
-                    <div>
-                      <h5 className="text-base">{token.name}</h5>
-
-                      <p className="mt-2 text-muted-foreground text-xs">
-                        <Trans>Created on {i18n.date(token.createdAt, DateTime.DATETIME_FULL)}</Trans>
-                      </p>
-                      {token.expires ? (
-                        <p className="mt-1 text-muted-foreground text-xs">
-                          <Trans>Expires on {i18n.date(token.expires, DateTime.DATETIME_FULL)}</Trans>
-                        </p>
-                      ) : (
-                        <p className="mt-1 text-muted-foreground text-xs">
-                          <Trans>Token doesn't have an expiration date</Trans>
-                        </p>
-                      )}
-                    </div>
-
-                    <div>
-                      <TokenDeleteDialog token={token}>
-                        <Button variant="destructive">
-                          <Trans>Delete</Trans>
-                        </Button>
-                      </TokenDeleteDialog>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </>
+          }
+          skeleton={{
+            enable: isLoading,
+            rows: 3,
+            component: (
+              <>
+                <TableCell>
+                  <Skeleton className="h-4 w-24 rounded-full" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-16 rounded-full" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-16 rounded-full" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-12 rounded-full" />
+                </TableCell>
+              </>
+            ),
+          }}
+        />
       )}
     </div>
   );

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

@@ -7,6 +7,7 @@ import { getEnvelopeForDirectTemplateSigning } from '@documenso/lib/server-only/
 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';
+import { getRecipientsWithMissingFields } from '@documenso/lib/utils/recipients';
 import { prisma } from '@documenso/prisma';
 import { Plural } from '@lingui/react/macro';
 import { UsersIcon } from 'lucide-react';
@@ -14,6 +15,7 @@ import { redirect } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { Header as AuthenticatedHeader } from '~/components/general/app-header';
+import { DirectTemplateInvalidPageView } from '~/components/general/direct-template/direct-template-invalid-page';
 import { DirectTemplatePageView } from '~/components/general/direct-template/direct-template-page';
 import { DirectTemplateAuthPageView } from '~/components/general/direct-template/direct-template-signing-auth-page';
 import { DocumentSigningAuthPageView } from '~/components/general/document-signing/document-signing-auth-page';
@@ -70,8 +72,18 @@ const handleV1Loader = async ({ params, request }: Route.LoaderArgs) => {
     };
   }
 
+  const recipientsWithMissingFields = getRecipientsWithMissingFields(template.recipients, template.fields);
+
+  if (recipientsWithMissingFields.length > 0) {
+    return {
+      isAccessAuthValid: true,
+      isTemplateMissingSignatures: true,
+    } as const;
+  }
+
   return {
     isAccessAuthValid: true,
+    isTemplateMissingSignatures: false,
     template: {
       ...template,
       folder: null,
@@ -96,6 +108,7 @@ const handleV2Loader = async ({ params, request }: Route.LoaderArgs) => {
     .then((envelopeForSigning) => {
       return {
         isDocumentAccessValid: true,
+        isTemplateMissingSignatures: false,
         envelopeForSigning,
       } as const;
     })
@@ -108,6 +121,13 @@ const handleV2Loader = async ({ params, request }: Route.LoaderArgs) => {
         } as const;
       }
 
+      if (error.code === AppErrorCode.MISSING_SIGNATURE_FIELD) {
+        return {
+          isDocumentAccessValid: true,
+          isTemplateMissingSignatures: true,
+        } as const;
+      }
+
       throw new Response('Not Found', { status: 404 });
     });
 };
@@ -181,6 +201,10 @@ const DirectSigningPageV1 = ({ data }: { data: Awaited<ReturnType<typeof handleV
     return <DirectTemplateAuthPageView />;
   }
 
+  if (data.isTemplateMissingSignatures) {
+    return <DirectTemplateInvalidPageView />;
+  }
+
   const { template, directTemplateRecipient } = data;
 
   return (
@@ -235,6 +259,10 @@ const DirectSigningPageV2 = ({ data }: { data: Awaited<ReturnType<typeof handleV
     return <DocumentSigningAuthPageView email={''} emailHasAccount={true} />;
   }
 
+  if (data.isTemplateMissingSignatures) {
+    return <DirectTemplateInvalidPageView />;
+  }
+
   const { envelope, recipient } = data.envelopeForSigning;
 
   const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({

apps/remix/app/utils/toast-error-messages.ts

@@ -32,6 +32,10 @@ export const getDirectTemplateErrorMessage = (code: string): ToastMessageDescrip
   return match(code)
     .with('RECIPIENT_LIMIT_EXCEEDED', () => RECIPIENT_LIMIT_EXCEEDED_ERROR_MESSAGE)
     .with(AppErrorCode.TOO_MANY_REQUESTS, () => FAIR_USE_LIMIT_EXCEEDED_ERROR_MESSAGE)
+    .with(AppErrorCode.MISSING_SIGNATURE_FIELD, () => ({
+      title: msg`Missing signature fields`,
+      description: msg`This direct link template cannot be used because one or more signers do not have a signature field assigned.`,
+    }))
     .otherwise(() => ({
       title: msg`Something went wrong`,
       description: msg`We were unable to submit this document at this time. Please try again later.`,
@@ -77,6 +81,10 @@ export const getTemplateUseErrorMessage = (code: string): ToastMessageDescriptor
       title: msg`Error`,
       description: msg`The document was created but could not be sent to recipients.`,
     }))
+    .with(AppErrorCode.MISSING_SIGNATURE_FIELD, () => ({
+      title: msg`Missing signature fields`,
+      description: msg`The document could not be sent because some signers do not have a signature field. Please edit the template and add a signature field for each signer.`,
+    }))
     .with(AppErrorCode.INVALID_BODY, AppErrorCode.INVALID_REQUEST, () => ({
       title: msg`Error`,
       description: msg`The document could not be created because of missing or invalid information. Please review the template's recipients and fields.`,

apps/remix/package.json

@@ -100,11 +100,11 @@
     "esbuild": "^0.27.0",
     "remix-flat-routes": "^0.8.5",
     "rollup": "^4.53.3",
-    "tsx": "^4.20.6",
+    "tsx": "^4.23.1",
     "typescript": "5.6.2",
     "vite": "^7.2.4",
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   },
-  "version": "2.15.0"
+  "version": "2.16.0"
 }

docker/Dockerfile

@@ -19,7 +19,7 @@ WORKDIR /app
 
 COPY . .
 
-RUN npm install -g "turbo@^1.9.3"
+RUN npm install -g "turbo@^2.10.0"
 
 # Outputs to the /out folder
 # source: https://turbo.build/repo/docs/reference/command-line-reference/prune#--docker
@@ -79,7 +79,7 @@ COPY --from=builder /app/out/full/ .
 # Finally copy the turbo.json file so that we can run turbo commands
 COPY turbo.json turbo.json
 
-RUN npm install -g "turbo@^1.9.3"
+RUN npm install -g "turbo@^2.10.0"
 
 RUN turbo run build --filter=@documenso/remix...
 

package.json

@@ -5,7 +5,7 @@
     "apps/*",
     "packages/*"
   ],
-  "version": "2.15.0",
+  "version": "2.16.0",
   "scripts": {
     "postinstall": "patch-package",
     "build": "turbo run build",
@@ -61,12 +61,13 @@
     "@ts-rest/serverless": "^3.52.1",
     "dotenv": "^17.2.3",
     "dotenv-cli": "^11.0.0",
+    "esbuild": "^0.27.0",
     "husky": "^9.1.7",
     "inngest": "^3.54.0",
     "inngest-cli": "^1.17.9",
     "lint-staged": "^16.2.7",
     "nanoid": "^5.1.6",
-    "nodemailer": "^8.0.5",
+    "nodemailer": "^9.0.0",
     "pdfjs-dist": "5.4.296",
     "pino": "^9.14.0",
     "pino-pretty": "^13.1.2",
@@ -78,7 +79,7 @@
     "rimraf": "^6.1.2",
     "superjson": "^2.2.5",
     "syncpack": "^14.0.0-alpha.27",
-    "turbo": "^1.13.4",
+    "turbo": "^2.10.0",
     "vite": "^7.2.4",
     "vite-plugin-static-copy": "^3.1.4",
     "zod-openapi": "^4.2.4",
@@ -104,6 +105,7 @@
   "overrides": {
     "lodash": "4.18.1",
     "pdfjs-dist": "5.4.296",
+    "postcss": "^8.5.19",
     "typescript": "5.6.2",
     "zod": "$zod",
     "fumadocs-mdx": {

packages/app-tests/e2e/envelope-editor-v2/envelope-direct-template-validation.spec.ts

@@ -0,0 +1,76 @@
+import { seedDirectTemplate } from '@documenso/prisma/seed/templates';
+import { seedUser } from '@documenso/prisma/seed/users';
+import { expect, type Page, test } from '@playwright/test';
+
+import { apiSignin } from '../fixtures/authentication';
+import { clickEnvelopeEditorStep } from '../fixtures/envelope-editor';
+
+const INVALID_DIRECT_TEMPLATE_ALERT_TITLE = 'Invalid direct link template';
+
+/**
+ * Place a field on the PDF canvas in the envelope editor.
+ */
+const placeFieldOnPdf = async (root: Page, fieldName: 'Signature' | 'Text', position: { x: number; y: number }) => {
+  await root.getByRole('button', { name: fieldName, exact: true }).click();
+
+  const canvas = root.locator('.konva-container canvas').first();
+  await expect(canvas).toBeVisible();
+  await canvas.click({ position });
+};
+
+/**
+ * Seed a V2 direct template and open it in the native template editor.
+ *
+ * Only the native template editor is covered here: direct links only exist
+ * for templates and are not part of the embedded editor surfaces.
+ */
+const openDirectTemplateEditor = async (page: Page, options: { createDirectRecipientSignatureField: boolean }) => {
+  const { user, team } = await seedUser();
+
+  const template = await seedDirectTemplate({
+    title: `E2E Direct Template Validation ${Date.now()}`,
+    userId: user.id,
+    teamId: team.id,
+    internalVersion: 2,
+    createDirectRecipientSignatureField: options.createDirectRecipientSignatureField,
+  });
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: `/t/${team.url}/templates/${template.id}/edit`,
+  });
+
+  return { user, team, template };
+};
+
+test.describe('template editor', () => {
+  test('shows invalid direct template warning when a signer has no signature field', async ({ page }) => {
+    await openDirectTemplateEditor(page, { createDirectRecipientSignatureField: false });
+
+    await expect(page.getByText(INVALID_DIRECT_TEMPLATE_ALERT_TITLE)).toBeVisible();
+    await expect(page.getByText('are missing a signature field')).toBeVisible();
+  });
+
+  test('does not show the warning when all signers have signature fields', async ({ page }) => {
+    await openDirectTemplateEditor(page, { createDirectRecipientSignatureField: true });
+
+    // Wait for the editor to render before asserting the banner is absent.
+    await expect(page.getByTestId('envelope-editor-step-upload')).toBeVisible();
+    await expect(page.getByText(INVALID_DIRECT_TEMPLATE_ALERT_TITLE)).not.toBeVisible();
+  });
+
+  test('warning disappears after placing a signature field', async ({ page }) => {
+    await openDirectTemplateEditor(page, { createDirectRecipientSignatureField: false });
+
+    await expect(page.getByText(INVALID_DIRECT_TEMPLATE_ALERT_TITLE)).toBeVisible();
+
+    // Place a signature field for the direct recipient (auto-selected single recipient).
+    await clickEnvelopeEditorStep(page, 'addFields');
+    await expect(page.locator('.konva-container canvas').first()).toBeVisible();
+    await placeFieldOnPdf(page, 'Signature', { x: 120, y: 140 });
+
+    // The banner clears once the field is autosaved and the envelope state updates.
+    await expect(page.getByText(INVALID_DIRECT_TEMPLATE_ALERT_TITLE)).not.toBeVisible({ timeout: 15_000 });
+  });
+});

packages/app-tests/e2e/envelope-editor-v2/envelope-recipient-autosave-race.spec.ts

@@ -0,0 +1,199 @@
+import { prisma } from '@documenso/prisma';
+import { expect, type Page, test } from '@playwright/test';
+
+import {
+  clickAddSignerButton,
+  clickEnvelopeEditorStep,
+  getRecipientEmailInputs,
+  openDocumentEnvelopeEditor,
+  setRecipientEmail,
+  setRecipientName,
+  type TEnvelopeEditorSurface,
+} from '../fixtures/envelope-editor';
+
+/**
+ * Reproduction for the recipient autosave race condition.
+ *
+ * Symptom (production only, where there is real network lag):
+ *   1. The author adds a recipient and types its name/email.
+ *   2. They navigate to the "Add Fields" step.
+ *   3. The recipient selector shows the default "Recipient 1" placeholder
+ *      instead of the recipient they just typed, and the typed name/email is
+ *      silently lost.
+ *
+ * Theory (see packages/lib/client-only/hooks/use-envelope-autosave.ts):
+ *   When the author navigates, `flushAutosave()` is awaited before the Add
+ *   Fields page renders. If an *earlier* (empty) recipient save is still
+ *   in-flight at that moment, `flush()` awaits that in-flight save and returns
+ *   WITHOUT committing the newer typed data sitting in `lastArgsRef` (whose
+ *   debounce timer it just cleared). The typed data is dropped, the empty
+ *   recipient persists, and the selector renders "Recipient 1".
+ *
+ * This only happens when a save is still in-flight at navigation time, which is
+ * why it never reproduces locally (fast saves) but does on a laggy network.
+ *
+ * The test below simulates that lag by holding the first `envelope.recipient.set`
+ * request open. It asserts the CORRECT behaviour (typed recipient survives), so
+ * it is RED while the bug exists and GREEN once the autosave hook is fixed.
+ */
+
+const RECIPIENT_SET_PROCEDURE = 'envelope.recipient.set';
+
+// How long to hold the first recipient autosave "in-flight" to emulate prod lag.
+const SIMULATED_NETWORK_LAG_MS = 5000;
+
+const FIRST_RECIPIENT = {
+  name: 'Alice Author',
+  email: 'alice-autosave-race@example.com',
+};
+
+const SECOND_RECIPIENT = {
+  name: 'Bob Builder',
+  email: 'bob-autosave-race@example.com',
+};
+
+type RecipientSetLagHandle = {
+  /** Resolves the instant the first recipient.set request is in-flight on the client. */
+  firstRecipientSetInFlight: Promise<void>;
+  /** Raw request bodies of every recipient.set call we intercepted. */
+  recipientSetRequestBodies: string[];
+};
+
+/**
+ * Installs a fake "production network lag" on the recipient autosave mutation.
+ *
+ * Only the FIRST recipient.set request is held open for `lagMs` (this is the save
+ * that must still be in-flight at navigation time for the race to occur). It
+ * resolves `firstRecipientSetInFlight` the instant it is intercepted so the test
+ * can keep typing while that save is pending. Subsequent recipient.set requests
+ * (e.g. the follow-up save the fixed hook issues) are forwarded immediately so the
+ * test does not pay the lag twice.
+ */
+const installRecipientSetLag = async (page: Page, lagMs: number): Promise<RecipientSetLagHandle> => {
+  let markFirstInFlight: () => void = () => {};
+
+  const firstRecipientSetInFlight = new Promise<void>((resolve) => {
+    markFirstInFlight = resolve;
+  });
+
+  const recipientSetRequestBodies: string[] = [];
+
+  await page.route('**/api/trpc/**', async (route) => {
+    const request = route.request();
+
+    if (request.method() !== 'POST' || !request.url().includes(RECIPIENT_SET_PROCEDURE)) {
+      await route.continue();
+      return;
+    }
+
+    const callIndex = recipientSetRequestBodies.length + 1;
+    recipientSetRequestBodies.push(request.postData() ?? '');
+
+    if (callIndex === 1) {
+      // eslint-disable-next-line no-console
+      console.log(`[test] holding first ${RECIPIENT_SET_PROCEDURE} for ${lagMs}ms (simulated network lag)`);
+
+      // The empty save is now in-flight from the client's perspective.
+      markFirstInFlight();
+
+      await new Promise((resolve) => setTimeout(resolve, lagMs));
+    } else {
+      // eslint-disable-next-line no-console
+      console.log(`[test] forwarding ${RECIPIENT_SET_PROCEDURE} #${callIndex} (no lag)`);
+    }
+
+    await route.continue();
+  });
+
+  return { firstRecipientSetInFlight, recipientSetRequestBodies };
+};
+
+const assertEnvelopeRecipientsPersisted = async (surface: TEnvelopeEditorSurface) => {
+  if (!surface.envelopeId) {
+    throw new Error('Expected the document editor surface to have an envelopeId');
+  }
+
+  const envelope = await prisma.envelope.findFirstOrThrow({
+    where: { id: surface.envelopeId },
+    include: {
+      recipients: {
+        orderBy: { signingOrder: 'asc' },
+      },
+    },
+  });
+
+  const persistedEmails = envelope.recipients.map((recipient) => recipient.email).filter(Boolean);
+
+  // eslint-disable-next-line no-console
+  console.log(
+    '[test] persisted recipients:',
+    JSON.stringify(
+      envelope.recipients.map((recipient) => ({ name: recipient.name, email: recipient.email })),
+      null,
+      2,
+    ),
+  );
+
+  expect(persistedEmails).toContain(FIRST_RECIPIENT.email);
+  expect(persistedEmails).toContain(SECOND_RECIPIENT.email);
+};
+
+test.describe('envelope editor recipient autosave race (network lag)', () => {
+  test('document editor: typed recipient survives navigation to Add Fields', async ({ page }) => {
+    const surface = await openDocumentEnvelopeEditor(page);
+
+    const { firstRecipientSetInFlight, recipientSetRequestBodies } = await installRecipientSetLag(
+      page,
+      SIMULATED_NETWORK_LAG_MS,
+    );
+
+    // 1. Add a second signer row. A blank document already has one empty default
+    //    signer, so this schedules an autosave of TWO empty recipients
+    //    (name='' / email='') - this is the save that will be in-flight.
+    await clickAddSignerButton(surface.root);
+    await expect(getRecipientEmailInputs(surface.root)).toHaveCount(2);
+
+    // 2. Wait until that empty autosave is actually in-flight on the client. This
+    //    is the precondition the bug needs: a slow save holding the autosave lock.
+    await firstRecipientSetInFlight;
+
+    // 3. The author now fills in the recipients they are adding.
+    await setRecipientName(surface.root, 0, FIRST_RECIPIENT.name);
+    await setRecipientEmail(surface.root, 0, FIRST_RECIPIENT.email);
+    await setRecipientName(surface.root, 1, SECOND_RECIPIENT.name);
+    await setRecipientEmail(surface.root, 1, SECOND_RECIPIENT.email);
+
+    // 4. Immediately navigate to Add Fields (before the typed data's debounce
+    //    fires). flushAutosave() awaits the in-flight EMPTY save; with the bug
+    //    present it returns without ever committing the typed data.
+    await clickEnvelopeEditorStep(surface.root, 'addFields');
+
+    // 5. Wait for the Add Fields page to render (after the lagged flush resolves).
+    await expect(surface.root.getByText('Selected Recipient')).toBeVisible({
+      timeout: SIMULATED_NETWORK_LAG_MS + 15000,
+    });
+
+    // Diagnostics - the request bodies show what actually reached the server.
+    // Buggy: only the first (empty) save is ever sent. Fixed: a follow-up save
+    // carrying the typed recipients is sent too.
+    // eslint-disable-next-line no-console
+    console.log('\n===== AUTOSAVE RACE DIAGNOSTICS =====');
+    // eslint-disable-next-line no-console
+    console.log(`recipient.set requests sent to server: ${recipientSetRequestBodies.length}`);
+    // eslint-disable-next-line no-console
+    console.log(
+      `server ever received "${FIRST_RECIPIENT.email}": ${recipientSetRequestBodies.some((body) => body.includes(FIRST_RECIPIENT.email))}`,
+    );
+    // eslint-disable-next-line no-console
+    console.log('=====================================\n');
+
+    // 6. THE USER-VISIBLE BUG: the selected recipient must be the one we typed
+    //    (Alice), not the default "Recipient 1" placeholder.
+    const selectedRecipientSection = surface.root.locator('section').filter({ hasText: 'Selected Recipient' });
+
+    await expect(selectedRecipientSection.getByRole('combobox')).toContainText(FIRST_RECIPIENT.name);
+
+    // 7. THE DATA LOSS: the typed recipients must actually be persisted.
+    await assertEnvelopeRecipientsPersisted(surface);
+  });
+});

packages/app-tests/e2e/public-profiles/public-profiles.spec.ts

@@ -6,6 +6,7 @@ import { expect, test } from '@playwright/test';
 
 import { apiSignin } from '../fixtures/authentication';
 import { expectToastTextToBeVisible } from '../fixtures/generic';
+import { signSignaturePad } from '../fixtures/signature';
 
 test('[PUBLIC_PROFILE]: create team profile', async ({ page }) => {
   const { user, team } = await seedUser();
@@ -73,8 +74,19 @@ test('[PUBLIC_PROFILE]: create team profile', async ({ page }) => {
   await expect(page.locator('body')).toContainText('public-direct-template-title');
   await expect(page.locator('body')).toContainText('public-direct-template-description');
 
+  const directSignatureField = directTemplate.fields[0];
+
+  if (!directSignatureField) {
+    throw new Error('Expected seeded direct template signature field to exist');
+  }
+
   await page.getByRole('link', { name: 'Sign' }).click();
   await page.getByRole('button', { name: 'Continue' }).click();
+
+  await signSignaturePad(page);
+  await page.locator(`#field-${directSignatureField.id}`).getByRole('button').click();
+  await expect(page.locator(`#field-${directSignatureField.id}`)).toHaveAttribute('data-inserted', 'true');
+
   await page.getByRole('button', { name: 'Complete' }).click();
   await page.getByRole('button', { name: 'Sign' }).click();
 

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

@@ -197,7 +197,18 @@ 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();
 
+  const directSignatureField = directTemplateWithAuth.fields[0];
+
+  if (!directSignatureField) {
+    throw new Error('Expected seeded direct template signature field to exist');
+  }
+
   await page.getByRole('button', { name: 'Continue' }).click();
+
+  await signSignaturePad(page);
+  await page.locator(`#field-${directSignatureField.id}`).getByRole('button').click();
+  await expect(page.locator(`#field-${directSignatureField.id}`)).toHaveAttribute('data-inserted', 'true');
+
   await page.getByRole('button', { name: 'Complete' }).click();
 
   await page.getByRole('button', { name: 'Sign' }).click();
@@ -235,6 +246,37 @@ test('[DIRECT_TEMPLATES]: V2 direct template link auth access', async ({ page })
   await page.goto(directTemplatePath);
 
   await expect(page.getByRole('heading', { name: 'Personal direct template link' })).toBeVisible();
+
+  const directSignatureField = directTemplateWithAuth.fields[0];
+
+  if (!directSignatureField) {
+    throw new Error('Expected seeded direct template signature field to exist');
+  }
+
+  // Wait for the PDF and the Konva canvas overlay to be ready.
+  await expect(page.locator('img[data-page-number]').first()).toBeVisible({ timeout: 30_000 });
+  const canvas = page.locator('.konva-container canvas').first();
+  await expect(canvas).toBeVisible({ timeout: 30_000 });
+
+  // Sign the direct template recipient's signature field via the canvas-based V2 UI.
+  await signSignaturePad(page);
+
+  const canvasBox = await canvas.boundingBox();
+
+  if (!canvasBox) {
+    throw new Error('Canvas bounding box not found');
+  }
+
+  const x =
+    (Number(directSignatureField.positionX) / 100) * canvasBox.width +
+    ((Number(directSignatureField.width) / 100) * canvasBox.width) / 2;
+  const y =
+    (Number(directSignatureField.positionY) / 100) * canvasBox.height +
+    ((Number(directSignatureField.height) / 100) * canvasBox.height) / 2;
+
+  await canvas.click({ position: { x, y } });
+  await expect(page.getByText('0 Fields Remaining').first()).toBeVisible({ timeout: 10_000 });
+
   await page.getByRole('button', { name: 'Complete' }).click();
   await expect(page.getByLabel('Your Email')).not.toBeVisible();
 
@@ -266,6 +308,16 @@ test('[DIRECT_TEMPLATES]: use direct template link with 1 recipient', async ({ p
 
   await expect(page.getByText('Next Recipient Name')).not.toBeVisible();
 
+  const directSignatureField = template.fields[0];
+
+  if (!directSignatureField) {
+    throw new Error('Expected seeded direct template signature field to exist');
+  }
+
+  await signSignaturePad(page);
+  await page.locator(`#field-${directSignatureField.id}`).getByRole('button').click();
+  await expect(page.locator(`#field-${directSignatureField.id}`)).toHaveAttribute('data-inserted', 'true');
+
   await page.getByRole('button', { name: 'Complete' }).click();
   await page.getByRole('button', { name: 'Sign' }).click();
   await page.waitForURL(/\/sign/);
@@ -299,19 +351,13 @@ test('[DIRECT_TEMPLATES]: V1 use direct template link with 2 recipients with nex
     },
   });
 
-  const directTemplateRecipient = template.recipients[0];
+  // The seeded direct template already includes a signature field for the direct recipient.
+  const directSignatureField = template.fields[0];
 
-  if (!directTemplateRecipient) {
-    throw new Error('Expected direct template recipient to exist');
+  if (!directSignatureField) {
+    throw new Error('Expected seeded direct template signature field to exist');
   }
 
-  // All SIGNER recipients need a signature field for sendDocument to dispatch emails.
-  const directSignatureField = await seedSignatureFieldForRecipient({
-    envelopeId: template.id,
-    recipientId: directTemplateRecipient.id,
-    positionY: 10,
-  });
-
   const originalName = 'Signer 2';
   const originalSecondSignerEmail = seedTestEmail();
 
@@ -413,19 +459,13 @@ test('[DIRECT_TEMPLATES]: V2 use direct template link with 2 recipients with nex
     },
   });
 
-  const directTemplateRecipient = template.recipients[0];
+  // The seeded direct template already includes a signature field for the direct recipient.
+  const directSignatureField = template.fields[0];
 
-  if (!directTemplateRecipient) {
-    throw new Error('Expected direct template recipient to exist');
+  if (!directSignatureField) {
+    throw new Error('Expected seeded direct template signature field to exist');
   }
 
-  // All SIGNER recipients need a signature field for sendDocument to dispatch emails.
-  const directSignatureField = await seedSignatureFieldForRecipient({
-    envelopeId: template.id,
-    recipientId: directTemplateRecipient.id,
-    positionY: 10,
-  });
-
   const originalName = 'Signer 2';
   const originalSecondSignerEmail = seedTestEmail();
 
@@ -521,3 +561,48 @@ test('[DIRECT_TEMPLATES]: V2 use direct template link with 2 recipients with nex
   expect(updatedSecondRecipient.email).toBe(newSecondSignerEmail);
   await expectSigningRequestJobForRecipient(updatedSecondRecipient.id);
 });
+
+test('[DIRECT_TEMPLATES]: V1 direct template without signature fields shows invalid template page', async ({
+  page,
+}) => {
+  const { user, team } = await seedUser();
+
+  const template = await seedDirectTemplate({
+    title: 'V1 invalid direct template',
+    userId: user.id,
+    teamId: team.id,
+    createDirectRecipientSignatureField: false,
+  });
+
+  await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+
+  await expect(page.getByRole('heading', { name: 'Invalid direct link template' })).toBeVisible();
+  await expect(page.getByText('This direct link template cannot be used because one or more signers')).toBeVisible();
+
+  // The signing flow must not render.
+  await expect(page.getByRole('heading', { name: 'General' })).not.toBeVisible();
+  await expect(page.getByRole('button', { name: 'Continue' })).not.toBeVisible();
+});
+
+test('[DIRECT_TEMPLATES]: V2 direct template without signature fields shows invalid template page', async ({
+  page,
+}) => {
+  const { user, team } = await seedUser();
+
+  const template = await seedDirectTemplate({
+    title: 'V2 invalid direct template',
+    userId: user.id,
+    teamId: team.id,
+    internalVersion: 2,
+    createDirectRecipientSignatureField: false,
+  });
+
+  await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+
+  await expect(page.getByRole('heading', { name: 'Invalid direct link template' })).toBeVisible();
+  await expect(page.getByText('This direct link template cannot be used because one or more signers')).toBeVisible();
+
+  // The signing flow (PDF canvas) must not render.
+  await expect(page.locator('.konva-container canvas')).toHaveCount(0);
+  await expect(page.getByRole('button', { name: 'Complete' })).not.toBeVisible();
+});

packages/app-tests/e2e/templates/template-use-dialog.spec.ts

@@ -0,0 +1,101 @@
+import { FIELD_SIGNATURE_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
+import { prisma } from '@documenso/prisma';
+import { seedTemplate } from '@documenso/prisma/seed/templates';
+import { seedUser } from '@documenso/prisma/seed/users';
+import { expect, test } from '@playwright/test';
+import { DocumentStatus, FieldType } from '@prisma/client';
+
+import { apiSignin } from '../fixtures/authentication';
+import { expectToastTextToBeVisible } from '../fixtures/generic';
+
+const seedSignatureFieldForRecipient = async (options: { envelopeId: string; recipientId: number }) => {
+  const envelopeItem = await prisma.envelopeItem.findFirstOrThrow({
+    where: { envelopeId: options.envelopeId },
+  });
+
+  return await prisma.field.create({
+    data: {
+      envelopeId: options.envelopeId,
+      envelopeItemId: envelopeItem.id,
+      recipientId: options.recipientId,
+      type: FieldType.SIGNATURE,
+      page: 1,
+      positionX: 5,
+      positionY: 10,
+      width: 20,
+      height: 5,
+      customText: '',
+      inserted: false,
+      fieldMeta: FIELD_SIGNATURE_META_DEFAULT_VALUES,
+    },
+  });
+};
+
+test('[TEMPLATE_USE]: shows missing signature fields error when sending a template without signature fields', async ({
+  page,
+}) => {
+  const { user, team } = await seedUser();
+
+  // seedTemplate creates one SIGNER recipient and no fields.
+  await seedTemplate({
+    title: 'Template missing signature fields',
+    userId: user.id,
+    teamId: team.id,
+  });
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: `/t/${team.url}/templates`,
+  });
+
+  await page.getByRole('button', { name: 'Use Template' }).click();
+  await expect(page.getByRole('heading', { name: 'Create document from template' })).toBeVisible();
+
+  // Enable distribution so the document is sent on creation.
+  await page.locator('#distributeDocument').click();
+  await page.getByRole('button', { name: 'Create and send' }).click();
+
+  await expectToastTextToBeVisible(page, 'Missing signature fields');
+  await expectToastTextToBeVisible(
+    page,
+    'The document could not be sent because some signers do not have a signature field',
+  );
+});
+
+test('[TEMPLATE_USE]: creates and sends a document when signers have signature fields', async ({ page }) => {
+  const { user, team } = await seedUser();
+
+  const template = await seedTemplate({
+    title: 'Template with signature fields',
+    userId: user.id,
+    teamId: team.id,
+  });
+
+  await seedSignatureFieldForRecipient({
+    envelopeId: template.id,
+    recipientId: template.recipients[0].id,
+  });
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: `/t/${team.url}/templates`,
+  });
+
+  await page.getByRole('button', { name: 'Use Template' }).click();
+  await expect(page.getByRole('heading', { name: 'Create document from template' })).toBeVisible();
+
+  await page.locator('#distributeDocument').click();
+  await page.getByRole('button', { name: 'Create and send' }).click();
+
+  await page.waitForURL(new RegExp(`/t/${team.url}/documents/envelope_.*`));
+
+  const envelopeId = page.url().split('/').pop()?.split('?')[0];
+
+  const envelope = await prisma.envelope.findFirstOrThrow({
+    where: { id: envelopeId },
+  });
+
+  expect(envelope.status).toBe(DocumentStatus.PENDING);
+});

packages/app-tests/package.json

@@ -18,7 +18,7 @@
     "@playwright/test": "1.56.1",
     "@types/node": "^20",
     "@types/pngjs": "^6.0.5",
-    "tsx": "^4.20.6",
+    "tsx": "^4.23.1",
     "pixelmatch": "^7.1.0",
     "pngjs": "^7.0.0"
   },

packages/email/package.json

@@ -17,7 +17,7 @@
     "clean": "rimraf node_modules"
   },
   "dependencies": {
-    "@documenso/nodemailer-resend": "4.0.0",
+    "@documenso/nodemailer-resend": "5.0.0",
     "@documenso/tailwind-config": "*",
     "@react-email/body": "0.2.0",
     "@react-email/button": "0.2.0",
@@ -38,12 +38,12 @@
     "@react-email/section": "0.0.16",
     "@react-email/tailwind": "^2.0.1",
     "@react-email/text": "0.1.5",
-    "nodemailer": "^8.0.5",
+    "nodemailer": "^9.0.0",
     "react-email": "^5.0.6",
     "resend": "^6.5.2"
   },
   "devDependencies": {
     "@documenso/tsconfig": "*",
-    "@types/nodemailer": "^8.0.0"
+    "@types/nodemailer": "^8.0.1"
   }
 }

packages/email/transports/mailchannels.ts

@@ -3,6 +3,8 @@ import type { SentMessageInfo, Transport } from 'nodemailer';
 import type { Address } from 'nodemailer/lib/mailer';
 import type MailMessage from 'nodemailer/lib/mailer/mail-message';
 
+import { normalizeMailHeaders } from './normalize-headers';
+
 const VERSION = '1.0.0';
 
 type NodeMailerAddress = string | Address | Array<string | Address> | undefined;
@@ -54,6 +56,7 @@ export class MailChannelsTransport implements Transport<SentMessageInfo> {
     const mailBcc = this.toMailChannelsAddresses(mail.data.bcc);
 
     const [from] = this.toMailChannelsAddresses(mail.data.from);
+    const [replyTo] = this.toMailChannelsAddresses(mail.data.replyTo);
 
     if (!from) {
       return callback(new Error('Missing required field "from"'), null);
@@ -72,6 +75,8 @@ export class MailChannelsTransport implements Transport<SentMessageInfo> {
       headers: requestHeaders,
       body: JSON.stringify({
         from: from,
+        reply_to: replyTo,
+        headers: normalizeMailHeaders(mail.data.headers),
         subject: mail.data.subject,
         personalizations: [
           {

packages/email/transports/normalize-headers.ts

@@ -0,0 +1,55 @@
+import type Mail from 'nodemailer/lib/mailer';
+
+/**
+ * Normalizes nodemailer mail headers into the flat `Record<string, string>`
+ * shape accepted by HTTP email APIs such as Resend and MailChannels.
+ *
+ * Kept in sync with `toResendHeaders` in the `@documenso/nodemailer-resend`
+ * package, which applies the same normalization for the Resend transport.
+ */
+export const normalizeMailHeaders = (headers: Mail.Options['headers']): Record<string, string> | undefined => {
+  if (!headers) {
+    return undefined;
+  }
+
+  const normalized: Record<string, string> = {};
+
+  const appendHeader = (key: string, value: unknown) => {
+    if (value === null || value === undefined) {
+      return;
+    }
+
+    const stringValue = String(value);
+
+    normalized[key] = normalized[key] ? `${normalized[key]}, ${stringValue}` : stringValue;
+  };
+
+  if (Array.isArray(headers)) {
+    for (const { key, value } of headers) {
+      appendHeader(key, value);
+    }
+  } else {
+    for (const [key, value] of Object.entries(headers)) {
+      if (Array.isArray(value)) {
+        for (const item of value) {
+          appendHeader(key, item);
+        }
+
+        continue;
+      }
+
+      if (typeof value === 'object' && value !== null) {
+        appendHeader(key, value.value);
+        continue;
+      }
+
+      appendHeader(key, value);
+    }
+  }
+
+  if (Object.keys(normalized).length === 0) {
+    return undefined;
+  }
+
+  return normalized;
+};

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

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

packages/lib/errors/app-error.ts

@@ -36,6 +36,13 @@ export enum AppErrorCode {
    */
   ENVELOPE_TSP_LOCKED = 'ENVELOPE_TSP_LOCKED',
 
+  /**
+   * A signer recipient does not have a signature field assigned. Thrown when
+   * distributing an envelope or using a direct template where at least one
+   * signer has no signature field.
+   */
+  MISSING_SIGNATURE_FIELD = 'MISSING_SIGNATURE_FIELD',
+
   /**
    * CSC (Cloud Signature Consortium) error codes. See the CSC QES V1 spec
    * for the recovery taxonomy.
@@ -84,6 +91,7 @@ export const genericErrorCodeToTrpcErrorCodeMap: Record<string, { code: string;
   [AppErrorCode.ENVELOPE_CANCELLED]: { code: 'BAD_REQUEST', status: 400 },
   [AppErrorCode.ENVELOPE_LEGACY]: { code: 'BAD_REQUEST', status: 400 },
   [AppErrorCode.ENVELOPE_TSP_LOCKED]: { code: 'BAD_REQUEST', status: 400 },
+  [AppErrorCode.MISSING_SIGNATURE_FIELD]: { code: 'BAD_REQUEST', status: 400 },
   [AppErrorCode.CSC_INSTANCE_MODE_MISMATCH]: { code: 'BAD_REQUEST', status: 400 },
   [AppErrorCode.CSC_UNLICENSED]: { code: 'FORBIDDEN', status: 403 },
   [AppErrorCode.CSC_PROVIDER_INFO_FAILED]: { code: 'INTERNAL_SERVER_ERROR', status: 500 },
@@ -291,6 +299,7 @@ export class AppError extends Error {
         AppErrorCode.ENVELOPE_CANCELLED,
         AppErrorCode.ENVELOPE_LEGACY,
         AppErrorCode.ENVELOPE_TSP_LOCKED,
+        AppErrorCode.MISSING_SIGNATURE_FIELD,
         AppErrorCode.CSC_INSTANCE_MODE_MISMATCH,
         AppErrorCode.CSC_CREDENTIAL_LIST_EMPTY,
         AppErrorCode.CSC_CERT_INVALID,

packages/lib/package.json

@@ -60,8 +60,8 @@
     "pino": "^9.14.0",
     "pino-pretty": "^13.1.2",
     "playwright": "1.56.1",
-    "postcss": "^8.5.14",
-    "postcss-selector-parser": "^7.1.1",
+    "postcss": "^8.5.19",
+    "postcss-selector-parser": "^7.1.4",
     "posthog-js": "^1.297.2",
     "posthog-node": "4.18.0",
     "react": "^18",

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

@@ -194,7 +194,7 @@ export const sendDocument = async ({ id, userId, teamId, sendEmail, requestMetad
       .map((r) => (r.name ? `${r.name} (${r.email}, id: ${r.id})` : `${r.email} (id: ${r.id})`))
       .join(', ');
 
-    throw new AppError(AppErrorCode.INVALID_REQUEST, {
+    throw new AppError(AppErrorCode.MISSING_SIGNATURE_FIELD, {
       message: `The following recipients are missing required fields: ${missingRecipientDescriptions}. Signers must have at least one signature field.`,
     });
   }

packages/lib/server-only/envelope/get-envelope-for-direct-template-signing.ts

@@ -5,6 +5,7 @@ import { match } from 'ts-pattern';
 import { AppError, AppErrorCode } from '../../errors/app-error';
 import { DocumentAccessAuth, type TDocumentAuthMethods } from '../../types/document-auth';
 import { extractDocumentAuthMethods } from '../../utils/document-auth';
+import { getRecipientsWithMissingFields } from '../../utils/recipients';
 import { extractFieldAutoInsertValues } from '../document/send-document';
 import { getTeamSettings } from '../team/get-team-settings';
 import type { EnvelopeForSigningResponse } from './get-envelope-for-recipient-signing';
@@ -125,6 +126,17 @@ export const getEnvelopeForDirectTemplateSigning = async ({
     });
   }
 
+  const recipientsWithMissingFields = getRecipientsWithMissingFields(
+    envelope.recipients,
+    envelope.recipients.flatMap((envelopeRecipient) => envelopeRecipient.fields),
+  );
+
+  if (recipientsWithMissingFields.length > 0) {
+    throw new AppError(AppErrorCode.MISSING_SIGNATURE_FIELD, {
+      message: 'One or more signers on this direct template are missing a signature field',
+    });
+  }
+
   const settings = await getTeamSettings({ teamId: envelope.teamId });
 
   const sender = settings.includeSenderDetails

packages/lib/server-only/template/create-document-from-direct-template.ts

@@ -40,6 +40,7 @@ import {
   extractDocumentAuthMethods,
 } from '../../utils/document-auth';
 import { mapSecondaryIdToTemplateId } from '../../utils/envelope';
+import { getRecipientsWithMissingFields } from '../../utils/recipients';
 import { sendDocument } from '../document/send-document';
 import { validateFieldAuth } from '../document/validate-field-auth';
 import { incrementDocumentId } from '../envelope/increment-id';
@@ -172,6 +173,17 @@ export const createDocumentFromDirectTemplate = async ({
     });
   }
 
+  const recipientsWithMissingFields = getRecipientsWithMissingFields(
+    recipients,
+    recipients.flatMap((recipient) => recipient.fields),
+  );
+
+  if (recipientsWithMissingFields.length > 0) {
+    throw new AppError(AppErrorCode.MISSING_SIGNATURE_FIELD, {
+      message: 'One or more signers on this direct template are missing a signature field',
+    });
+  }
+
   if (directTemplateEnvelope.updatedAt.getTime() !== templateUpdatedAt.getTime()) {
     throw new AppError(AppErrorCode.INVALID_REQUEST, { message: 'Template no longer matches' });
   }

packages/prisma/package.json

@@ -35,7 +35,7 @@
   "devDependencies": {
     "dotenv": "^17.2.3",
     "dotenv-cli": "^11.0.0",
-    "tsx": "^4.20.6",
+    "tsx": "^4.23.1",
     "typescript": "5.6.2"
   }
 }

packages/prisma/seed/initial-seed.ts

@@ -361,9 +361,9 @@ export const seedAlignmentTestDocument = async ({
   const { id, recipients, envelopeItems } = createdEnvelope;
 
   if (isDirectTemplate) {
-    const directTemplateRecpient = recipients.find((recipient) => recipient.email === DIRECT_TEMPLATE_RECIPIENT_EMAIL);
+    const directTemplateRecipient = recipients.find((recipient) => recipient.email === DIRECT_TEMPLATE_RECIPIENT_EMAIL);
 
-    if (!directTemplateRecpient) {
+    if (!directTemplateRecipient) {
       throw new Error('Need to create a direct template recipient');
     }
 
@@ -372,7 +372,7 @@ export const seedAlignmentTestDocument = async ({
         envelopeId: id,
         enabled: true,
         token: directTemplateToken ?? Math.random().toString(),
-        directTemplateRecipientId: directTemplateRecpient.id,
+        directTemplateRecipientId: directTemplateRecipient.id,
       },
     });
   }

packages/prisma/seed/templates.ts

@@ -6,6 +6,7 @@ import {
   DIRECT_TEMPLATE_RECIPIENT_NAME,
 } from '@documenso/lib/constants/direct-templates';
 import { incrementTemplateId } from '@documenso/lib/server-only/envelope/increment-id';
+import { FIELD_SIGNATURE_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
 import { SignatureLevel } from '@documenso/lib/types/signature-level';
 import { prefixedId } from '@documenso/lib/universal/id';
 
@@ -15,6 +16,7 @@ import {
   DocumentDataType,
   DocumentSource,
   EnvelopeType,
+  FieldType,
   ReadStatus,
   RecipientRole,
   SendStatus,
@@ -29,6 +31,11 @@ type SeedTemplateOptions = {
   teamId: number;
   internalVersion?: 1 | 2;
   createTemplateOptions?: Partial<Prisma.EnvelopeUncheckedCreateInput>;
+  /**
+   * Only used by seedDirectTemplate. Creates a signature field for the direct
+   * recipient so the seeded direct template is valid. Defaults to true.
+   */
+  createDirectRecipientSignatureField?: boolean;
 };
 
 type CreateTemplateOptions = {
@@ -198,11 +205,11 @@ export const seedDirectTemplate = async (options: SeedTemplateOptions) => {
     },
   });
 
-  const directTemplateRecpient = template.recipients.find(
+  const directTemplateRecipient = template.recipients.find(
     (recipient) => recipient.email === DIRECT_TEMPLATE_RECIPIENT_EMAIL,
   );
 
-  if (!directTemplateRecpient) {
+  if (!directTemplateRecipient) {
     throw new Error('Need to create a direct template recipient');
   }
 
@@ -211,10 +218,35 @@ export const seedDirectTemplate = async (options: SeedTemplateOptions) => {
       envelopeId: template.id,
       enabled: true,
       token: Math.random().toString(),
-      directTemplateRecipientId: directTemplateRecpient.id,
+      directTemplateRecipientId: directTemplateRecipient.id,
     },
   });
 
+  const { createDirectRecipientSignatureField = true } = options;
+
+  if (createDirectRecipientSignatureField) {
+    const envelopeItem = await prisma.envelopeItem.findFirstOrThrow({
+      where: { envelopeId: template.id },
+    });
+
+    await prisma.field.create({
+      data: {
+        envelopeId: template.id,
+        envelopeItemId: envelopeItem.id,
+        recipientId: directTemplateRecipient.id,
+        type: FieldType.SIGNATURE,
+        page: 1,
+        positionX: 5,
+        positionY: 10,
+        width: 20,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: FIELD_SIGNATURE_META_DEFAULT_VALUES,
+      },
+    });
+  }
+
   return await prisma.envelope.findFirstOrThrow({
     where: {
       id: template.id,

packages/tailwind-config/package.json

@@ -11,7 +11,7 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.19",
     "autoprefixer": "^10.4.22",
-    "postcss": "^8.5.14",
+    "postcss": "^8.5.19",
     "tailwindcss": "^3.4.18",
     "tailwindcss-animate": "^1.0.7"
   },

packages/ui/primitives/alert-dialog.tsx

@@ -41,7 +41,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fade-in-90 slide-in-from-bottom-10 sm:zoom-in-90 sm:slide-in-from-bottom-0 fixed z-50 grid w-full max-w-lg scale-100 animate-in gap-4 border bg-background p-6 opacity-100 shadow-lg sm:rounded-lg md:w-full',
+        'fade-in-90 slide-in-from-bottom-10 sm:zoom-in-90 sm:slide-in-from-bottom-0 fixed z-50 grid w-full max-w-lg scale-100 animate-in gap-4 border bg-background p-6 opacity-100 shadow-lg focus:outline-none sm:rounded-lg md:w-full',
         className,
       )}
       {...props}

packages/ui/primitives/dialog.tsx

@@ -61,7 +61,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full animate-in gap-4 border bg-background p-6 shadow-lg sm:max-w-lg sm:rounded-lg',
+        'data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full animate-in gap-4 border bg-background p-6 shadow-lg focus:outline-none sm:max-w-lg sm:rounded-lg',
         {
           'rounded-b-xl': position === 'start',
           'rounded-t-xl': position === 'end',

packages/ui/primitives/sheet.tsx

@@ -49,90 +49,93 @@ const SheetOverlay = React.forwardRef<
 
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
-const sheetVariants = cva('fixed z-[61] scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border', {
-  variants: {
-    position: {
-      top: 'animate-in slide-in-from-top w-full duration-300',
-      bottom: 'animate-in slide-in-from-bottom w-full duration-300',
-      left: 'animate-in slide-in-from-left h-full duration-300',
-      right: 'animate-in slide-in-from-right h-full duration-300',
+const sheetVariants = cva(
+  'fixed z-[61] scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg focus:outline-none',
+  {
+    variants: {
+      position: {
+        top: 'animate-in slide-in-from-top w-full duration-300',
+        bottom: 'animate-in slide-in-from-bottom w-full duration-300',
+        left: 'animate-in slide-in-from-left h-full duration-300',
+        right: 'animate-in slide-in-from-right h-full duration-300',
+      },
+      size: {
+        content: '',
+        default: '',
+        sm: '',
+        lg: '',
+        xl: '',
+        full: '',
+      },
     },
-    size: {
-      content: '',
-      default: '',
-      sm: '',
-      lg: '',
-      xl: '',
-      full: '',
+    compoundVariants: [
+      {
+        position: ['top', 'bottom'],
+        size: 'content',
+        class: 'max-h-screen',
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'default',
+        class: 'h-1/3',
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'sm',
+        class: 'h-1/4',
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'lg',
+        class: 'h-1/2',
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'xl',
+        class: 'h-5/6',
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'full',
+        class: 'h-screen',
+      },
+      {
+        position: ['right', 'left'],
+        size: 'content',
+        class: 'max-w-screen',
+      },
+      {
+        position: ['right', 'left'],
+        size: 'default',
+        class: 'w-1/3',
+      },
+      {
+        position: ['right', 'left'],
+        size: 'sm',
+        class: 'w-1/4',
+      },
+      {
+        position: ['right', 'left'],
+        size: 'lg',
+        class: 'w-1/2',
+      },
+      {
+        position: ['right', 'left'],
+        size: 'xl',
+        class: 'w-5/6',
+      },
+      {
+        position: ['right', 'left'],
+        size: 'full',
+        class: 'w-screen',
+      },
+    ],
+    defaultVariants: {
+      position: 'right',
+      size: 'default',
     },
   },
-  compoundVariants: [
-    {
-      position: ['top', 'bottom'],
-      size: 'content',
-      class: 'max-h-screen',
-    },
-    {
-      position: ['top', 'bottom'],
-      size: 'default',
-      class: 'h-1/3',
-    },
-    {
-      position: ['top', 'bottom'],
-      size: 'sm',
-      class: 'h-1/4',
-    },
-    {
-      position: ['top', 'bottom'],
-      size: 'lg',
-      class: 'h-1/2',
-    },
-    {
-      position: ['top', 'bottom'],
-      size: 'xl',
-      class: 'h-5/6',
-    },
-    {
-      position: ['top', 'bottom'],
-      size: 'full',
-      class: 'h-screen',
-    },
-    {
-      position: ['right', 'left'],
-      size: 'content',
-      class: 'max-w-screen',
-    },
-    {
-      position: ['right', 'left'],
-      size: 'default',
-      class: 'w-1/3',
-    },
-    {
-      position: ['right', 'left'],
-      size: 'sm',
-      class: 'w-1/4',
-    },
-    {
-      position: ['right', 'left'],
-      size: 'lg',
-      class: 'w-1/2',
-    },
-    {
-      position: ['right', 'left'],
-      size: 'xl',
-      class: 'w-5/6',
-    },
-    {
-      position: ['right', 'left'],
-      size: 'full',
-      class: 'w-screen',
-    },
-  ],
-  defaultVariants: {
-    position: 'right',
-    size: 'default',
-  },
-});
+);
 
 export interface DialogContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,

packages/ui/styles/theme.css

@@ -174,7 +174,7 @@
     --accent-foreground: 95.08 71.08% 67.45%;
 
     --destructive: 0 87% 62%;
-    --destructive-foreground: 0 87% 19%;
+    --destructive-foreground: 0 0% 98%;
 
     --ring: 95.08 71.08% 67.45%;
 

turbo.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://turbo.build/schema.json",
-  "pipeline": {
+  "tasks": {
     "build": {
       "dependsOn": ["prebuild", "^build"],
       "outputs": [".next/**", "!.next/cache/**"]
@@ -143,6 +143,7 @@
     "GOOGLE_VERTEX_API_KEY",
     "CI",
     "NODE_ENV",
+    "NEXT_IGNORE_INCORRECT_LOCKFILE",
     "POSTGRES_URL",
     "DATABASE_URL",
     "DATABASE_URL_UNPOOLED",