fix: uncook the lock file

Co-authored-by: Crowdin Bot <support+bot@crowdin.com>

.env.example

@@ -23,6 +23,10 @@ NEXT_PRIVATE_OIDC_CLIENT_ID=""
 NEXT_PRIVATE_OIDC_CLIENT_SECRET=""
 NEXT_PRIVATE_OIDC_PROVIDER_LABEL="OIDC"
 NEXT_PRIVATE_OIDC_SKIP_VERIFY=""
+# Specifies the prompt to use for OIDC signin, explicitly setting
+# an empty string will omit the prompt parameter.
+# See: https://www.cerberauth.com/blog/openid-connect-oauth2-prompts/
+NEXT_PRIVATE_OIDC_PROMPT="login"
 
 # [[URLS]]
 NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
@@ -134,6 +138,22 @@ NEXT_PUBLIC_POSTHOG_KEY=""
 NEXT_PUBLIC_FEATURE_BILLING_ENABLED=
 # OPTIONAL: Leave blank to allow users to signup through /signup page.
 NEXT_PUBLIC_DISABLE_SIGNUP=
+# OPTIONAL: Set to true to use internal webapp url in browserless requests.
+NEXT_PUBLIC_USE_INTERNAL_URL_BROWSERLESS=false
+
+# [[TELEMETRY]]
+# OPTIONAL: Set to "true" to disable anonymous telemetry for self-hosted instances.
+# Telemetry helps us understand how Documenso is being used and improve the product.
+# We only collect: app version, installation ID, and node ID. No personal data is collected.
+DOCUMENSO_DISABLE_TELEMETRY=
+
+# [[AI]]
+# AI Gateway
+AI_GATEWAY_API_KEY=""
+# OPTIONAL: API key for Google Generative AI (Gemini). Get your key from https://ai.google.dev
+GOOGLE_GENERATIVE_AI_API_KEY=""
+# OPTIONAL: Enable AI field detection debug mode to save preview images with bounding boxes
+NEXT_PUBLIC_AI_DEBUG_PREVIEW=
 
 # [[E2E Tests]]
 E2E_TEST_AUTHENTICATE_USERNAME="Test User"
@@ -145,4 +165,4 @@ E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
 NEXT_PRIVATE_LOGGER_FILE_PATH=
 
 # [[PLAIN SUPPORT]]
-NEXT_PRIVATE_PLAIN_API_KEY=
+NEXT_PRIVATE_PLAIN_API_KEY=

.github/workflows/publish.yml

@@ -36,6 +36,8 @@ jobs:
       - name: Build the docker image
         env:
           BUILD_PLATFORM: ${{ matrix.os == 'warp-ubuntu-latest-arm64-4x' && 'arm64' || 'amd64' }}
+          NEXT_PRIVATE_TELEMETRY_KEY: ${{ secrets.NEXT_PRIVATE_TELEMETRY_KEY }}
+          NEXT_PRIVATE_TELEMETRY_HOST: ${{ secrets.NEXT_PRIVATE_TELEMETRY_HOST }}
         run: |
           APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
           GIT_SHA="$(git rev-parse HEAD)"
@@ -43,6 +45,8 @@ jobs:
           docker build \
             -f ./docker/Dockerfile \
             --progress=plain \
+            --build-arg NEXT_PRIVATE_TELEMETRY_KEY="${NEXT_PRIVATE_TELEMETRY_KEY:-}" \
+            --build-arg NEXT_PRIVATE_TELEMETRY_HOST="${NEXT_PRIVATE_TELEMETRY_HOST:-}" \
             -t "documenso/documenso-$BUILD_PLATFORM:latest" \
             -t "documenso/documenso-$BUILD_PLATFORM:$GIT_SHA" \
             -t "documenso/documenso-$BUILD_PLATFORM:$APP_VERSION" \

.gitignore

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

.npmrc

@@ -1,3 +1,2 @@
-auto-install-peers = true
 legacy-peer-deps = true
 prefer-dedupe = true

apps/documentation/next.config.ts

@@ -1,7 +1,8 @@
+import type { NextConfig } from 'next';
+
 import nextra from 'nextra';
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig: NextConfig = {
   transpilePackages: [
     '@documenso/assets',
     '@documenso/lib',

apps/documentation/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev -p 3002",
-    "build": "next build && next-sitemap",
+    "build": "next build",
     "start": "next start -p 3002",
     "lint:fix": "next lint --fix",
     "clean": "rimraf .next && rimraf node_modules"
@@ -15,18 +15,18 @@
     "@documenso/tailwind-config": "*",
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
-    "next": "14.2.28",
-    "next-plausible": "^3.12.0",
-    "nextra": "^2.13.4",
-    "nextra-theme-docs": "^2.13.4",
+    "next": "^15",
+    "next-plausible": "^3.12.5",
+    "nextra": "^3",
+    "nextra-theme-docs": "^3",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/react": "18.3.27",
     "@types/react-dom": "^18",
-    "next-sitemap": "^4.2.3",
+    "pagefind": "^1.2.0",
     "typescript": "5.6.2"
   }
-}
+}

apps/documentation/pages/_app.mdx

@@ -1,10 +0,0 @@
-import { PlausibleProvider } from '../providers/plausible.tsx';
-import '../styles.css';
-
-export default function App({ Component, pageProps }) {
-  return (
-    <PlausibleProvider>
-      <Component {...pageProps} />
-    </PlausibleProvider>
-  );
-}

apps/documentation/pages/_app.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+
+import { PlausibleProvider } from '../providers/plausible';
+import '../styles.css';
+
+export type AppProps = {
+  Component: React.ComponentType<any>;
+  pageProps: any;
+};
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <PlausibleProvider>
+      <Component {...pageProps} />
+    </PlausibleProvider>
+  );
+}

apps/documentation/pages/_meta.js

@@ -0,0 +1,34 @@
+export default {
+  index: {
+    type: 'page',
+    title: 'Home',
+    display: 'hidden',
+    theme: {
+      timestamp: false,
+    },
+  },
+  users: {
+    type: 'page',
+    title: 'Users',
+  },
+  developers: {
+    type: 'page',
+    title: 'Developers',
+  },
+  updates: {
+    title: "What's New",
+    type: 'menu',
+    items: {
+      changelog: {
+        title: 'Changelog',
+        href: 'https://documenso.com/changelog',
+        newWindow: true,
+      },
+      blog: {
+        title: 'Blog',
+        href: 'https://documenso.com/blog',
+        newWindow: true,
+      },
+    },
+  },
+};

apps/documentation/pages/_meta.json

@@ -1,34 +0,0 @@
-{
-  "index": {
-    "type": "page",
-    "title": "Home",
-    "display": "hidden",
-    "theme": {
-      "timestamp": false
-    }
-  },
-  "users": {
-    "type": "page",
-    "title": "Users"
-  },
-  "developers": {
-    "type": "page",
-    "title": "Developers"
-  },
-  "updates": {
-    "title": "What's New",
-    "type": "menu",
-    "items": {
-      "changelog": {
-        "title": "Changelog",
-        "href": "https://documenso.com/changelog",
-        "newWindow": true
-      },
-      "blog": {
-        "title": "Blog",
-        "href": "https://documenso.com/blog",
-        "newWindow": true
-      }
-    }
-  }
-}

apps/documentation/pages/developers/_meta.js

@@ -0,0 +1,18 @@
+export default {
+  index: 'Introduction',
+  '-- Development & Deployment': {
+    type: 'separator',
+    title: 'Development & Deployment',
+  },
+  'local-development': 'Local Development',
+  'developer-mode': 'Developer Mode',
+  'self-hosting': 'Self Hosting',
+  contributing: 'Contributing',
+  '-- API & Integration Guides': {
+    type: 'separator',
+    title: 'API & Integration Guides',
+  },
+  'public-api': 'Public API',
+  embedding: 'Embedding',
+  webhooks: 'Webhooks',
+};

apps/documentation/pages/developers/_meta.json

@@ -1,18 +0,0 @@
-{
-  "index": "Introduction",
-  "-- Development & Deployment": {
-    "type": "separator",
-    "title": "Development & Deployment"
-  },
-  "local-development": "Local Development",
-  "developer-mode": "Developer Mode",
-  "self-hosting": "Self Hosting",
-  "contributing": "Contributing",
-  "-- API & Integration Guides": {
-    "type": "separator",
-    "title": "API & Integration Guides"
-  },
-  "public-api": "Public API",
-  "embedding": "Embedding",
-  "webhooks": "Webhooks"
-}

apps/documentation/pages/developers/contributing/_meta.js

@@ -0,0 +1,4 @@
+export default {
+  index: 'Getting Started',
+  'contributing-translations': 'Contributing Translations',
+};

apps/documentation/pages/developers/contributing/_meta.json

@@ -1,4 +0,0 @@
-{
-  "index": "Getting Started",
-  "contributing-translations": "Contributing Translations"
-}

apps/documentation/pages/developers/embedding/_meta.js

@@ -0,0 +1,11 @@
+export default {
+  index: 'Get Started',
+  react: 'React Integration',
+  vue: 'Vue Integration',
+  svelte: 'Svelte Integration',
+  solid: 'Solid Integration',
+  preact: 'Preact Integration',
+  angular: 'Angular Integration',
+  'css-variables': 'CSS Variables',
+  authoring: 'Authoring',
+};

apps/documentation/pages/developers/embedding/_meta.json

@@ -1,11 +0,0 @@
-{
-  "index": "Get Started",
-  "react": "React Integration",
-  "vue": "Vue Integration",
-  "svelte": "Svelte Integration",
-  "solid": "Solid Integration",
-  "preact": "Preact Integration",
-  "angular": "Angular Integration",
-  "css-variables": "CSS Variables",
-  "authoring": "Authoring"
-}

apps/documentation/pages/developers/embedding/authoring.mdx

@@ -5,18 +5,38 @@ description: Learn how to use embedded authoring to create documents and templat
 
 # Embedded Authoring
 
-In addition to embedding signing experiences, Documenso now supports embedded authoring, allowing you to integrate document and template creation directly within your application.
+In addition to embedding signing experiences, Documenso now supports embedded authoring, allowing you to integrate document and template creation and editing directly within your application.
 
 ## How Embedded Authoring Works
 
-The embedded authoring feature enables your users to create new documents without leaving your application. This process works through secure presign tokens that authenticate the embedding session and manage permissions.
+The embedded authoring feature enables your users to create and edit documents and templates without leaving your application. This process works through secure presign tokens that authenticate the embedding session and manage permissions.
 
-## Creating Documents with Embedded Authoring
+## Available Components
 
-To implement document creation in your application, use the `EmbedCreateDocument` component from our SDK:
+The SDK provides four authoring components:
+
+- **`EmbedCreateDocumentV1`** - Create new documents
+- **`EmbedCreateTemplateV1`** - Create new templates
+- **`EmbedUpdateDocumentV1`** - Edit existing documents
+- **`EmbedUpdateTemplateV1`** - Edit existing templates
+
+React Example:
 
 ```jsx
-import { unstable_EmbedCreateDocument as EmbedCreateDocument } from '@documenso/embed-react';
+import {
+  EmbedCreateDocumentV1,
+  EmbedCreateTemplateV1,
+  EmbedUpdateDocumentV1,
+  EmbedUpdateTemplateV1,
+} from '@documenso/embed-react';
+```
+
+## Creating Documents
+
+To implement document creation in your application, use the `EmbedCreateDocumentV1` component:
+
+```jsx
+import { EmbedCreateDocumentV1 } from '@documenso/embed-react';
 
 const DocumentCreator = () => {
   // You'll need to obtain a presign token using your API key
@@ -37,9 +57,88 @@ const DocumentCreator = () => {
 };
 ```
 
+## Creating Templates
+
+To create templates, use the `EmbedCreateTemplateV1` component:
+
+```jsx
+import { EmbedCreateTemplateV1 } from '@documenso/embed-react';
+
+const TemplateCreator = () => {
+  const presignToken = 'YOUR_PRESIGN_TOKEN';
+
+  return (
+    <div style={{ height: '800px', width: '100%' }}>
+      <EmbedCreateTemplate
+        presignToken={presignToken}
+        externalId="template-12345"
+        onTemplateCreated={(data) => {
+          console.log('Template created with ID:', data.templateId);
+          console.log('External reference ID:', data.externalId);
+        }}
+      />
+    </div>
+  );
+};
+```
+
+## Updating Documents
+
+To edit existing documents, use the `EmbedUpdateDocumentV1` component:
+
+```jsx
+import { EmbedUpdateDocumentV1 } from '@documenso/embed-react';
+
+const DocumentEditor = () => {
+  const presignToken = 'YOUR_PRESIGN_TOKEN';
+  const documentId = 123; // The ID of the document to edit
+
+  return (
+    <div style={{ height: '800px', width: '100%' }}>
+      <EmbedUpdateDocument
+        presignToken={presignToken}
+        documentId={documentId}
+        externalId="order-12345"
+        onlyEditFields={false}
+        onDocumentUpdated={(data) => {
+          console.log('Document updated:', data.documentId);
+        }}
+      />
+    </div>
+  );
+};
+```
+
+## Updating Templates
+
+To edit existing templates, use the `EmbedUpdateTemplateV1` component:
+
+```jsx
+import { EmbedUpdateTemplateV1 } from '@documenso/embed-react';
+
+const TemplateEditor = () => {
+  const presignToken = 'YOUR_PRESIGN_TOKEN';
+  const templateId = 456; // The ID of the template to edit
+
+  return (
+    <div style={{ height: '800px', width: '100%' }}>
+      <EmbedUpdateTemplate
+        presignToken={presignToken}
+        templateId={templateId}
+        externalId="template-12345"
+        onlyEditFields={false}
+        onTemplateUpdated={(data) => {
+          console.log('Template updated:', data.templateId);
+        }}
+      />
+    </div>
+  );
+};
+```
+
 ## Obtaining a Presign Token
 
-Before using the `EmbedCreateDocument` component, you'll need to obtain a presign token from your backend. This token authorizes the embedding session.
+Before using any of the authoring components, you'll need to obtain a presign token from your backend. This token authorizes the embedding session.
 
 You can create a presign token by making a request to:
 
@@ -53,17 +152,29 @@ You can find more details on this request at our [API Documentation](https://ope
 
 ## Configuration Options
 
-The `EmbedCreateDocument` component accepts several configuration options:
+All authoring components accept the following configuration options:
 
-| Option             | Type    | Description                                                        |
-| ------------------ | ------- | ------------------------------------------------------------------ |
-| `presignToken`     | string  | **Required**. The authentication token for the embedding session.  |
-| `externalId`       | string  | Optional reference ID from your system to link with the document.  |
-| `host`             | string  | Optional custom host URL. Defaults to `https://app.documenso.com`. |
-| `css`              | string  | Optional custom CSS to style the embedded component.               |
-| `cssVars`          | object  | Optional CSS variables for colors, spacing, and more.              |
-| `darkModeDisabled` | boolean | Optional flag to disable dark mode.                                |
-| `className`        | string  | Optional CSS class name for the iframe.                            |
+| Option             | Type    | Description                                                                |
+| ------------------ | ------- | -------------------------------------------------------------------------- |
+| `presignToken`     | string  | **Required**. The authentication token for the embedding session.          |
+| `externalId`       | string  | Optional reference ID from your system to link with the document/template. |
+| `host`             | string  | Optional custom host URL. Defaults to `https://app.documenso.com`.         |
+| `css`              | string  | Optional custom CSS to style the embedded component.                       |
+| `cssVars`          | object  | Optional CSS variables for colors, spacing, and more.                      |
+| `darkModeDisabled` | boolean | Optional flag to disable dark mode.                                        |
+| `className`        | string  | Optional CSS class name for the iframe.                                    |
+| `additionalProps`  | object  | Optional additional props to pass to the iframe (for testing features).    |
+| `features`         | object  | Optional feature toggles to customize the authoring experience.            |
+
+### Update Component Specific Props
+
+The `EmbedUpdateDocument` and `EmbedUpdateTemplate` components also accept:
+
+| Option           | Type    | Description                                                                                                    |
+| ---------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `documentId`     | number  | **Required for EmbedUpdateDocument**. The ID of the document to edit.                                          |
+| `templateId`     | number  | **Required for EmbedUpdateTemplate**. The ID of the template to edit.                                          |
+| `onlyEditFields` | boolean | Optional flag to restrict editing to fields only skipping the recipient configuration step (default: `false`). |
 
 ## Feature Toggles
 
@@ -83,9 +194,11 @@ You can customize the authoring experience by enabling or disabling specific fea
 />
 ```
 
-## Handling Document Creation Events
+## Handling Events
 
-The `onDocumentCreated` callback is triggered when a document is successfully created, providing both the document ID and your external reference ID:
+Each component provides callbacks for handling completion events:
+
+### Document Events
 
 ```jsx
 <EmbedCreateDocument
@@ -99,11 +212,47 @@ The `onDocumentCreated` callback is triggered when a document is successfully cr
     updateOrderDocument(data.externalId, data.documentId);
   }}
 />
+
+<EmbedUpdateDocument
+  presignToken="YOUR_PRESIGN_TOKEN"
+  documentId={123}
+  onDocumentUpdated={(data) => {
+    console.log('Document updated:', data.documentId);
+    // Handle document update
+  }}
+/>
 ```
 
+### Template Events
+
+```jsx
+<EmbedCreateTemplate
+  presignToken="YOUR_PRESIGN_TOKEN"
+  externalId="template-12345"
+  onTemplateCreated={(data) => {
+    console.log('Template created:', data.templateId);
+    // Handle template creation
+  }}
+/>
+
+<EmbedUpdateTemplate
+  presignToken="YOUR_PRESIGN_TOKEN"
+  templateId={456}
+  onTemplateUpdated={(data) => {
+    console.log('Template updated:', data.templateId);
+    // Handle template update
+  }}
+/>
+```
+
+All event callbacks receive an object with:
+
+- `documentId` or `templateId` - The ID of the created/updated document or template
+- `externalId` - Your external reference ID (if provided)
+
 ## Styling the Embedded Component
 
-You can customize the appearance of the embedded component using standard CSS classes:
+You can customize the appearance of the embedded component using standard CSS classes, custom CSS, and CSS variables:
 
 ```jsx
 <EmbedCreateDocument
@@ -130,20 +279,48 @@ Here's a complete example of integrating document creation in a React applicatio
 ```tsx
 import { useState } from 'react';
 
-import { unstable_EmbedCreateDocument as EmbedCreateDocument } from '@documenso/embed-react';
+import { EmbedCreateDocumentV1, EmbedUpdateDocumentV1 } from '@documenso/embed-react';
 
-function DocumentCreator() {
+function DocumentManager() {
   // In a real application, you would fetch this token from your backend
   // using your API key at /api/v2/embedding/create-presign-token
   const presignToken = 'YOUR_PRESIGN_TOKEN';
   const [documentId, setDocumentId] = useState<number | null>(null);
+  const [mode, setMode] = useState<'create' | 'edit'>('create');
 
-  if (documentId) {
+  if (documentId && mode === 'create') {
     return (
       <div>
         <h2>Document Created Successfully!</h2>
         <p>Document ID: {documentId}</p>
-        <button onClick={() => setDocumentId(null)}>Create Another Document</button>
+        <div>
+          <button onClick={() => setMode('edit')}>Edit Document</button>
+          <button
+            onClick={() => {
+              setDocumentId(null);
+              setMode('create');
+            }}
+          >
+            Create Another Document
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (mode === 'edit' && documentId) {
+    return (
+      <div style={{ height: '800px', width: '100%' }}>
+        <button onClick={() => setMode('create')}>Back to Create</button>
+        <EmbedUpdateDocument
+          presignToken={presignToken}
+          documentId={documentId}
+          externalId="order-12345"
+          onDocumentUpdated={(data) => {
+            console.log('Document updated:', data.documentId);
+            setMode('create');
+          }}
+        />
       </div>
     );
   }
@@ -153,6 +330,14 @@ function DocumentCreator() {
       <EmbedCreateDocument
         presignToken={presignToken}
         externalId="order-12345"
+        features={{
+          allowConfigureSignatureTypes: true,
+          allowConfigureLanguage: true,
+          allowConfigureDateFormat: true,
+          allowConfigureTimezone: true,
+          allowConfigureRedirectUrl: true,
+          allowConfigureCommunication: true,
+        }}
         onDocumentCreated={(data) => {
           setDocumentId(data.documentId);
         }}
@@ -161,7 +346,38 @@ function DocumentCreator() {
   );
 }
 
-export default DocumentCreator;
+export default DocumentManager;
 ```
 
-With embedded authoring, your users can seamlessly create documents within your application, enhancing the overall user experience and streamlining document workflows.
+## Advanced Usage
+
+### Using Additional Props
+
+You can pass additional props to the iframe for testing features before they're officially supported:
+
+```jsx
+<EmbedCreateDocument
+  presignToken="YOUR_PRESIGN_TOKEN"
+  additionalProps={{
+    experimentalFeature: true,
+    customSetting: 'value',
+  }}
+/>
+```
+
+### Restricting To Only Field Editing
+
+When updating documents or templates, you can restrict editing to fields only skipping the recipient configuration step:
+
+```jsx
+<EmbedUpdateDocument
+  presignToken="YOUR_PRESIGN_TOKEN"
+  documentId={123}
+  onlyEditFields={true}
+  onDocumentUpdated={(data) => {
+    console.log('Fields updated:', data.documentId);
+  }}
+/>
+```
+
+With embedded authoring, your users can seamlessly create and edit documents and templates within your application, enhancing the overall user experience and streamlining document workflows.

apps/documentation/pages/developers/index.mdx

@@ -3,16 +3,16 @@ title: Developer Documentation
 description: Learn how to run Documenso locally, use our API, integrate webhooks, contribute to the project, and self-host Documenso.
 ---
 
-import { Card, Cards } from 'nextra/components';
+import { Cards } from 'nextra/components';
 
 # Developer Documentation
 
 The developer documentation is a comprehensive guide to help you:
 
 <Cards>
-  <Card title="Set up dev environment" href="/developers/local-development" />
-  <Card title="Use the API" href="/developers/public-api" />
-  <Card title="Integrate webhooks" href="/developers/webhooks" />
-  <Card title="Contribute to the project" href="/developers/contributing" />
-  <Card title="Self-host Documenso" href="/developers/self-hosting" />
+  <Cards.Card title="Set up dev environment" href="/developers/local-development" />
+  <Cards.Card title="Use the API" href="/developers/public-api" />
+  <Cards.Card title="Integrate webhooks" href="/developers/webhooks" />
+  <Cards.Card title="Contribute to the project" href="/developers/contributing" />
+  <Cards.Card title="Self-host Documenso" href="/developers/self-hosting" />
 </Cards>

apps/documentation/pages/developers/local-development/_meta.js

@@ -0,0 +1,8 @@
+export default {
+  index: 'Get Started',
+  quickstart: 'Developer Quickstart',
+  manual: 'Manual Setup',
+  gitpod: 'Gitpod',
+  'signing-certificate': 'Signing Certificate',
+  translations: 'Translations',
+};

apps/documentation/pages/developers/local-development/_meta.json

@@ -1,8 +0,0 @@
-{
-  "index": "Get Started",
-  "quickstart": "Developer Quickstart",
-  "manual": "Manual Setup",
-  "gitpod": "Gitpod",
-  "signing-certificate": "Signing Certificate",
-  "translations": "Translations"
-}

apps/documentation/pages/developers/public-api/_meta.js

@@ -0,0 +1,6 @@
+export default {
+  index: 'Get Started',
+  authentication: 'Authentication',
+  'rate-limits': 'Rate Limits',
+  versioning: 'Versioning',
+};

apps/documentation/pages/developers/public-api/_meta.json

@@ -1,6 +0,0 @@
-{
-  "index": "Get Started",
-  "authentication": "Authentication",
-  "rate-limits": "Rate Limits",
-  "versioning": "Versioning"
-}

apps/documentation/pages/developers/self-hosting/_meta.js

@@ -0,0 +1,7 @@
+export default {
+  index: 'Getting Started',
+  'signing-certificate': 'Signing Certificate',
+  'how-to': 'How To',
+  'setting-up-oauth-providers': 'Setting up OAuth Providers',
+  telemetry: 'Telemetry',
+};

apps/documentation/pages/developers/self-hosting/_meta.json

@@ -1,6 +0,0 @@
-{
-  "index": "Getting Started",
-  "signing-certificate": "Signing Certificate",
-  "how-to": "How To",
-  "setting-up-oauth-providers": "Setting up OAuth Providers"
-}

apps/documentation/pages/developers/self-hosting/how-to.mdx

@@ -275,7 +275,15 @@ The environment variables listed above are a subset of those available for confi
 | `NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY`      | The secondary encryption key for symmetric encryption and decryption (at least 32 characters).      |
 | `NEXT_PRIVATE_GOOGLE_CLIENT_ID`              | The Google client ID for Google authentication (optional).                                          |
 | `NEXT_PRIVATE_GOOGLE_CLIENT_SECRET`          | The Google client secret for Google authentication (optional).                                      |
+| `NEXT_PRIVATE_MICROSOFT_CLIENT_ID`           | The Microsoft client ID for Microsoft authentication (optional).                                    |
+| `NEXT_PRIVATE_MICROSOFT_CLIENT_SECRET`       | The Microsoft client secret for Microsoft authentication (optional).                                |
+| `NEXT_PRIVATE_OIDC_CLIENT_ID`                | The OIDC client ID for OIDC authentication (optional).                                              |
+| `NEXT_PRIVATE_OIDC_CLIENT_SECRET`            | The OIDC client secret for OIDC authentication (optional).                                          |
+| `NEXT_PRIVATE_OIDC_WELL_KNOWN`               | The well-known URL for the OIDC provider (optional).                                                |
+| `NEXT_PRIVATE_OIDC_PROVIDER_LABEL`           | The label to display for the OIDC provider button (optional).                                       |
+| `NEXT_PRIVATE_OIDC_SKIP_VERIFY`              | Whether to skip email verification for OIDC accounts (optional, default `false`).                   |
 | `NEXT_PUBLIC_WEBAPP_URL`                     | The URL for the web application.                                                                    |
+| `NEXT_PUBLIC_SUPPORT_EMAIL`                  | The support email address displayed to users (default `support@documenso.com`).                     |
 | `NEXT_PRIVATE_DATABASE_URL`                  | The URL for the primary database connection (with connection pooling).                              |
 | `NEXT_PRIVATE_DIRECT_DATABASE_URL`           | The URL for the direct database connection (without connection pooling).                            |
 | `NEXT_PRIVATE_SIGNING_TRANSPORT`             | The signing transport to use. Available options: local (default)                                    |
@@ -297,6 +305,7 @@ The environment variables listed above are a subset of those available for confi
 | `NEXT_PRIVATE_SMTP_APIKEY_USER`              | The API key user for the SMTP server for the `smtp-api` transport.                                  |
 | `NEXT_PRIVATE_SMTP_APIKEY`                   | The API key for the SMTP server for the `smtp-api` transport.                                       |
 | `NEXT_PRIVATE_SMTP_SECURE`                   | Whether to force the use of TLS for the SMTP server for SMTP transports.                            |
+| `NEXT_PRIVATE_SMTP_UNSAFE_IGNORE_TLS`        | Whether to ignore TLS errors for the SMTP server (useful for self-signed certificates).             |
 | `NEXT_PRIVATE_SMTP_FROM_ADDRESS`             | The email address for the "from" address.                                                           |
 | `NEXT_PRIVATE_SMTP_FROM_NAME`                | The sender name for the "from" address.                                                             |
 | `NEXT_PRIVATE_RESEND_API_KEY`                | The API key for Resend.com for the `resend` transport.                                              |
@@ -308,6 +317,37 @@ The environment variables listed above are a subset of those available for confi
 | `NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT`     | The maximum document upload limit displayed to the user (in MB).                                    |
 | `NEXT_PUBLIC_POSTHOG_KEY`                    | The optional PostHog key for analytics and feature flags.                                           |
 | `NEXT_PUBLIC_DISABLE_SIGNUP`                 | Whether to disable user signups through the /signup page.                                           |
+| `NEXT_PRIVATE_BROWSERLESS_URL`               | The URL for a Browserless.io instance to generate PDFs (optional).                                  |
+| `DOCUMENSO_DISABLE_TELEMETRY`                | Set to `true` to disable anonymous telemetry (see [Telemetry](#telemetry) section below).           |
+
+## Telemetry
+
+Documenso collects anonymous telemetry data to help us understand how the software is being used and improve the product. This telemetry is **enabled by default** for self-hosted instances.
+
+### What We Collect
+
+We collect minimal, privacy-preserving data:
+
+- **App Version**: The version of Documenso you are running
+- **Installation ID**: A unique identifier for your installation (stored in your database)
+- **Node ID**: A unique identifier for each server/container instance (stored in the OS temp directory)
+
+We do **not** collect any personal data, document contents, user information, or usage patterns.
+
+### Events
+
+- **Server Startup**: Captured once when the server starts
+- **Server Heartbeat**: Captured every hour while the server is running
+
+### Disabling Telemetry
+
+To disable telemetry, set the following environment variable:
+
+```bash
+DOCUMENSO_DISABLE_TELEMETRY=true
+```
+
+This will completely disable all telemetry data collection.
 
 ## Run as a Service
 

apps/documentation/pages/developers/self-hosting/telemetry.mdx

@@ -0,0 +1,85 @@
+# Telemetry
+
+Documenso collects anonymous telemetry data from self-hosted instances to help us understand how the software is being used and make improvements to the product. This telemetry is enabled by default, but you can easily disable it if you prefer.
+
+## What We Collect
+
+We collect minimal, privacy-preserving information that helps us understand the health and adoption of self-hosted installations:
+
+- **App Version**: The version of Documenso you are running. This helps us understand which versions are in use and prioritize support for older versions.
+
+- **Installation ID**: A unique identifier for your installation. This is stored in your database and helps us count distinct installations without knowing who you are.
+
+- **Node ID**: A unique identifier for each server or container instance. This is stored in your operating system's temporary directory and helps us understand deployment patterns (for example, how many instances are running in a cluster).
+
+### What We Don't Collect
+
+We do **not** collect any of the following:
+
+- Personal information about you or your users
+- Document contents or file names
+- User email addresses or names
+- Usage patterns or feature usage statistics
+- Server logs or error messages
+- Any data that could identify your organization or users
+
+## Why We Collect Telemetry
+
+The telemetry data we collect serves several important purposes:
+
+1. **Product Improvement**: Understanding which versions are in use helps us prioritize bug fixes and security updates for the versions that matter most.
+
+2. **Support Planning**: Knowing how many installations exist and their deployment patterns helps us plan support resources and documentation.
+
+3. **Feature Development**: Understanding deployment patterns (like cluster sizes) helps us make better architectural decisions for future features.
+
+4. **Community Health**: Tracking adoption helps us understand the growth of the self-hosted community and allocate resources accordingly.
+
+All of this is done anonymously and in aggregate. We cannot identify you, your organization, or your users from the telemetry data we collect.
+
+## Events We Track
+
+We track two simple events:
+
+- **Server Startup**: Captured once when your server starts. This tells us when installations are first set up or restarted.
+
+- **Server Heartbeat**: Captured every hour while your server is running. This helps us understand how many active installations exist and their uptime patterns.
+
+## How to Disable Telemetry
+
+If you prefer not to send telemetry data, you can disable it by setting an environment variable.
+
+### Using Environment Variables
+
+Add the following to your environment configuration:
+
+```bash
+DOCUMENSO_DISABLE_TELEMETRY=true
+```
+
+### Docker
+
+If you're using Docker, you can set this in your `docker-compose.yml`:
+
+```yaml
+services:
+  app:
+    environment:
+      - DOCUMENSO_DISABLE_TELEMETRY=true
+```
+
+Or pass it when running a container:
+
+```bash
+docker run -e DOCUMENSO_DISABLE_TELEMETRY=true ...
+```
+
+### After Disabling
+
+Once you set `DOCUMENSO_DISABLE_TELEMETRY=true` and restart your server, no telemetry data will be sent. The telemetry client will not initialize, and no network requests will be made to our telemetry servers.
+
+Note: If you previously had telemetry enabled, the installation ID stored in your database will remain, but it will no longer be used or sent anywhere.
+
+## Questions or Concerns
+
+If you have questions about our telemetry practices or concerns about privacy, please reach out to us. We're committed to transparency and respect your choice to disable telemetry if you prefer.

apps/documentation/pages/users/_meta.js

@@ -0,0 +1,23 @@
+export default {
+  index: 'Introduction',
+  support: 'Support',
+  '-- How To Use': {
+    type: 'separator',
+    title: 'How To Use',
+  },
+  'get-started': 'Get Started',
+  profile: 'Public Profile',
+  organisations: 'Organisations',
+  documents: 'Documents',
+  templates: 'Templates',
+  branding: 'Branding',
+  'email-domains': 'Email Domains',
+  'direct-links': 'Direct Signing Links',
+  '-- Legal Overview': {
+    type: 'separator',
+    title: 'Legal Overview',
+  },
+  'fair-use': 'Fair Use Policy',
+  licenses: 'Licenses',
+  compliance: 'Compliance',
+};

apps/documentation/pages/users/_meta.json

@@ -1,23 +0,0 @@
-{
-  "index": "Introduction",
-  "support": "Support",
-  "-- How To Use": {
-    "type": "separator",
-    "title": "How To Use"
-  },
-  "get-started": "Get Started",
-  "profile": "Public Profile",
-  "organisations": "Organisations",
-  "documents": "Documents",
-  "templates": "Templates",
-  "branding": "Branding",
-  "email-domains": "Email Domains",
-  "direct-links": "Direct Signing Links",
-  "-- Legal Overview": {
-    "type": "separator",
-    "title": "Legal Overview"
-  },
-  "fair-use": "Fair Use Policy",
-  "licenses": "Licenses",
-  "compliance": "Compliance"
-}

apps/documentation/pages/users/compliance/_meta.js

@@ -0,0 +1,4 @@
+export default {
+  'signature-levels': 'Signature Levels',
+  'standards-and-regulations': 'Standards and Regulations',
+};

apps/documentation/pages/users/compliance/_meta.json

@@ -1,4 +0,0 @@
-{
-  "signature-levels": "Signature Levels",
-  "standards-and-regulations": "Standards and Regulations"
-}

apps/documentation/pages/users/documents/_meta.js

@@ -0,0 +1,7 @@
+export default {
+  'sending-documents': 'Sending Documents',
+  'document-preferences': 'Document Preferences',
+  'document-visibility': 'Document Visibility',
+  fields: 'Document Fields',
+  'email-preferences': 'Email Preferences',
+};

apps/documentation/pages/users/documents/_meta.json

@@ -1,7 +0,0 @@
-{
-  "sending-documents": "Sending Documents",
-  "document-preferences": "Document Preferences",
-  "document-visibility": "Document Visibility",
-  "fields": "Document Fields",
-  "email-preferences": "Email Preferences"
-}

apps/documentation/pages/users/documents/fields.mdx

@@ -178,7 +178,7 @@ The dropdown/select field collects a single choice from a list of options.
 
 Place the dropdown/select field on the document where you want the signer to select a choice. The dropdown/select field comes with additional settings that can be configured.
 
-![The dropdown/select field in the Documenso document editor](/document-signing/dropdown-field-document-editor-view.webp)
+{/* ![The dropdown/select field in the Documenso document editor](/document-signing/dropdown-field-document-editor-view.webp) */}
 
 The dropdown/select field settings include:
 

apps/documentation/pages/users/licenses/_meta.js

@@ -0,0 +1,5 @@
+export default {
+  index: 'Overview',
+  'community-edition': 'Community Edition',
+  'enterprise-edition': 'Enterprise Edition',
+};

apps/documentation/pages/users/licenses/_meta.json

@@ -1,5 +0,0 @@
-{
-  "index": "Overview",
-  "community-edition": "Community Edition",
-  "enterprise-edition": "Enterprise Edition"
-}

apps/documentation/pages/users/organisations/_meta.js

@@ -0,0 +1,8 @@
+export default {
+  index: 'Introduction',
+  members: 'Members',
+  groups: 'Groups',
+  teams: 'Teams',
+  sso: 'SSO',
+  billing: 'Billing',
+};

apps/documentation/pages/users/organisations/_meta.json

@@ -1,8 +0,0 @@
-{
-  "index": "Introduction",
-  "members": "Members",
-  "groups": "Groups",
-  "teams": "Teams",
-  "sso": "SSO",
-  "billing": "Billing"
-}

apps/documentation/pages/users/organisations/sso/_meta.js

@@ -0,0 +1,4 @@
+export default {
+  index: 'Configuration',
+  'microsoft-entra-id': 'Microsoft Entra ID',
+};

apps/documentation/pages/users/organisations/sso/_meta.json

@@ -1,4 +0,0 @@
-{
-  "index": "Configuration",
-  "microsoft-entra-id": "Microsoft Entra ID"
-}

apps/documentation/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/documentation/styles.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+  scroll-behavior: smooth;
+}

apps/documentation/tailwind.config.cjs

@@ -8,7 +8,9 @@ module.exports = {
     ...baseConfig.content,
     `${path.join(require.resolve('@documenso/ui'), '..')}/**/*.{ts,tsx}`,
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './content/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     fontFamily: {

apps/documentation/theme.config.tsx

@@ -4,7 +4,7 @@ import { useConfig } from 'nextra-theme-docs';
 const themeConfig: DocsThemeConfig = {
   logo: <span>Documenso</span>,
   head: function useHead() {
-    const config = useConfig<{ title?: string; description?: string }>();
+    const config = useConfig();
 
     const title = `${config.frontMatter.title} | Documenso Docs` || 'Documenso Docs';
     const description = config.frontMatter.description || 'The official Documenso documentation';
@@ -12,6 +12,7 @@ const themeConfig: DocsThemeConfig = {
     return (
       <>
         <meta httpEquiv="Content-Language" content="en" />
+        <title>{title}</title>
         <meta name="title" content={title} />
         <meta name="og:title" content={title} />
         <meta name="description" content={description} />
@@ -46,7 +47,7 @@ const themeConfig: DocsThemeConfig = {
   },
   docsRepositoryBase: 'https://github.com/documenso/documenso/tree/main/apps/documentation',
   footer: {
-    text: (
+    content: (
       <span>
         {new Date().getFullYear()} ©{' '}
         <a href="https://documen.so" target="_blank">
@@ -56,12 +57,9 @@ const themeConfig: DocsThemeConfig = {
       </span>
     ),
   },
-  primaryHue: 100,
-  primarySaturation: 48.47,
-  useNextSeoProps() {
-    return {
-      titleTemplate: '%s | Documenso Docs',
-    };
+  color: {
+    hue: 100,
+    saturation: 48.47,
   },
 };
 

apps/documentation/tsconfig.json

@@ -1,13 +1,17 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
@@ -18,10 +22,21 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     },
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "tailwind.config.js"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "tailwind.config.js"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

apps/openpage-api/next.config.js

@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-module.exports = nextConfig;

apps/openpage-api/next.config.ts

@@ -0,0 +1,5 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {};
+
+export default nextConfig;

apps/openpage-api/package.json

@@ -11,12 +11,12 @@
   },
   "dependencies": {
     "@documenso/prisma": "*",
-    "luxon": "^3.5.0",
-    "next": "14.2.28"
+    "luxon": "^3.7.2",
+    "next": "^15"
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "18.3.5",
+    "@types/react": "18.3.27",
     "typescript": "5.6.2"
   }
 }

apps/remix/app/app.css

@@ -69,3 +69,4 @@
     --font-noto: 'Noto Sans', 'Noto Sans Korean', 'Noto Sans Japanese', 'Noto Sans Chinese';
   }
 }
+

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

@@ -13,7 +13,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useCurrentTeam } from '~/providers/team';
@@ -96,7 +96,7 @@ export const DocumentDuplicateDialog = ({
           </div>
         ) : (
           <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll">
-            <PDFViewer
+            <PDFViewerLazy
               key={envelopeItems[0].id}
               envelopeItem={envelopeItems[0]}
               token={undefined}

apps/remix/app/components/dialogs/organisation-email-create-dialog.tsx

@@ -72,7 +72,6 @@ export const OrganisationEmailCreateDialog = ({
   const { mutateAsync: createOrganisationEmail, isPending } =
     trpc.enterprise.organisation.email.create.useMutation();
 
-  // Reset state when dialog closes
   useEffect(() => {
     if (!open) {
       form.reset();

apps/remix/app/components/dialogs/recipient-detection-prompt-dialog.tsx

@@ -0,0 +1,251 @@
+import { useEffect, useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { match } from 'ts-pattern';
+
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+
+import type { RecipientForCreation } from '~/utils/detect-document-recipients';
+
+import { SuggestedRecipientsForm } from './suggested-recipients-form';
+
+type RecipientDetectionStep =
+  | 'PROMPT_DETECT_RECIPIENTS'
+  | 'DETECTING_RECIPIENTS'
+  | 'REVIEW_RECIPIENTS'
+  | 'DETECTING_FIELDS';
+
+export type RecipientDetectionPromptDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAccept: () => Promise<void> | void;
+  onSkip: () => void;
+  recipients: RecipientForCreation[] | null;
+  onRecipientsSubmit: (recipients: RecipientForCreation[]) => Promise<void> | void;
+  onAutoAddFields?: (recipients: RecipientForCreation[]) => Promise<void> | void;
+  isProcessingRecipients?: boolean;
+};
+
+export const RecipientDetectionPromptDialog = ({
+  open,
+  onOpenChange,
+  onAccept,
+  onSkip,
+  recipients,
+  onRecipientsSubmit,
+  onAutoAddFields,
+  isProcessingRecipients = false,
+}: RecipientDetectionPromptDialogProps) => {
+  const [currentStep, setCurrentStep] = useState<RecipientDetectionStep>(
+    'PROMPT_DETECT_RECIPIENTS',
+  );
+  const [currentRecipients, setCurrentRecipients] = useState<RecipientForCreation[] | null>(
+    recipients,
+  );
+
+  useEffect(() => {
+    if (!open) {
+      setCurrentStep('PROMPT_DETECT_RECIPIENTS');
+    }
+  }, [open]);
+
+  useEffect(() => {
+    setCurrentRecipients(recipients);
+  }, [recipients]);
+
+  useEffect(() => {
+    if (recipients && currentStep === 'DETECTING_RECIPIENTS') {
+      setCurrentStep('REVIEW_RECIPIENTS');
+    }
+  }, [recipients, currentStep]);
+
+  const handleStartDetection = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setCurrentStep('DETECTING_RECIPIENTS');
+
+    Promise.resolve(onAccept()).catch(() => {
+      setCurrentStep('PROMPT_DETECT_RECIPIENTS');
+    });
+  };
+
+  const handleSkip = () => {
+    onSkip();
+  };
+
+  const handleAutoAddFields = async (recipients: RecipientForCreation[]) => {
+    if (!onAutoAddFields) {
+      return;
+    }
+
+    // Save the current state of recipients so if we fail and come back,
+    // the form is restored with the user's changes.
+    setCurrentRecipients(recipients);
+    setCurrentStep('DETECTING_FIELDS');
+
+    try {
+      await onAutoAddFields(recipients);
+    } catch {
+      setCurrentStep('REVIEW_RECIPIENTS');
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(newOpen) => {
+        // Prevent closing during processing
+        if (
+          !newOpen &&
+          (currentStep === 'DETECTING_RECIPIENTS' ||
+            currentStep === 'DETECTING_FIELDS' ||
+            isProcessingRecipients)
+        ) {
+          return;
+        }
+        onOpenChange(newOpen);
+      }}
+    >
+      <DialogContent
+        className={
+          currentStep === 'REVIEW_RECIPIENTS' ? 'max-h-[90vh] max-w-4xl overflow-y-auto' : ''
+        }
+      >
+        <fieldset
+          disabled={currentStep === 'DETECTING_RECIPIENTS' || currentStep === 'DETECTING_FIELDS'}
+        >
+          <AnimateGenericFadeInOut motionKey={currentStep} className="grid gap-4">
+            {match(currentStep)
+              .with('PROMPT_DETECT_RECIPIENTS', () => (
+                <>
+                  <DialogHeader>
+                    <DialogTitle>
+                      <Trans>Auto-detect recipients?</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                      <Trans>
+                        Would you like to automatically detect recipients in your document? This can
+                        save you time in setting up your document.
+                      </Trans>
+                    </DialogDescription>
+                  </DialogHeader>
+
+                  <DialogFooter>
+                    <Button variant="ghost" onClick={handleSkip}>
+                      <Trans>Skip for now</Trans>
+                    </Button>
+                    <Button onClick={handleStartDetection}>
+                      <Trans>Detect recipients</Trans>
+                    </Button>
+                  </DialogFooter>
+                </>
+              ))
+              .with('DETECTING_RECIPIENTS', () => (
+                <div className="flex flex-col items-center justify-center py-4">
+                  <div className="relative mb-4 flex items-center justify-center">
+                    <div
+                      className="border-muted-foreground/20 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-left flex-col gap-y-1 overflow-hidden rounded-lg border px-2 py-4 backdrop-blur-sm"
+                      style={{ transform: 'translateZ(0px)' }}
+                    >
+                      <div className="bg-muted-foreground/20 h-2 w-full rounded-[2px]"></div>
+                      <div className="bg-muted-foreground/20 h-2 w-5/6 rounded-[2px]"></div>
+                      <div className="bg-muted-foreground/20 h-2 w-full rounded-[2px]"></div>
+
+                      <div className="bg-muted-foreground/20 h-2 w-4/5 rounded-[2px]"></div>
+                      <div className="bg-muted-foreground/20 h-2 w-full rounded-[2px]"></div>
+                      <div className="bg-muted-foreground/20 h-2 w-3/4 rounded-[2px]"></div>
+                    </div>
+
+                    <div
+                      className="bg-documenso/80 animate-scan pointer-events-none absolute left-1/2 top-0 z-20 h-0.5 w-24 -translate-x-1/2"
+                      style={{
+                        transform: 'translateX(-50%) translateZ(0px)',
+                      }}
+                    />
+                  </div>
+
+                  <DialogHeader>
+                    <DialogTitle className="text-center">
+                      <Trans>Analyzing your document</Trans>
+                    </DialogTitle>
+                    <DialogDescription className="text-center">
+                      <Trans>
+                        Scanning your document to detect recipient names, emails, and signing order.
+                      </Trans>
+                    </DialogDescription>
+                  </DialogHeader>
+                </div>
+              ))
+              .with('DETECTING_FIELDS', () => (
+                <div className="flex flex-col items-center justify-center py-4">
+                  <div className="relative mb-4 flex items-center justify-center">
+                    <div
+                      className="border-muted-foreground/20 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-left flex-col gap-y-1 overflow-hidden rounded-lg border px-2 py-4 backdrop-blur-sm"
+                      style={{ transform: 'translateZ(0px)' }}
+                    >
+                      <div className="bg-muted-foreground/20 h-2 w-full rounded-[2px]"></div>
+                      <div className="bg-muted-foreground/20 h-2 w-5/6 rounded-[2px]"></div>
+                      <div className="bg-muted-foreground/20 h-2 w-full rounded-[2px]"></div>
+
+                      <div className="bg-muted-foreground/20 h-2 w-4/5 rounded-[2px]"></div>
+                      <div className="bg-muted-foreground/20 h-2 w-full rounded-[2px]"></div>
+                      <div className="bg-muted-foreground/20 h-2 w-3/4 rounded-[2px]"></div>
+                    </div>
+
+                    <div
+                      className="bg-documenso/80 animate-scan pointer-events-none absolute left-1/2 top-0 z-20 h-0.5 w-24 -translate-x-1/2"
+                      style={{
+                        transform: 'translateX(-50%) translateZ(0px)',
+                      }}
+                    />
+                  </div>
+
+                  <DialogHeader>
+                    <DialogTitle className="text-center">
+                      <Trans>Detecting fields</Trans>
+                    </DialogTitle>
+                    <DialogDescription className="text-center">
+                      <Trans>
+                        Scanning your document to intelligently place fields for your recipients.
+                      </Trans>
+                    </DialogDescription>
+                  </DialogHeader>
+                </div>
+              ))
+              .with('REVIEW_RECIPIENTS', () => (
+                <>
+                  <DialogHeader>
+                    <DialogTitle>
+                      <Trans>Review detected recipients</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                      <Trans>
+                        Confirm, edit, or add recipients before continuing. You can adjust any
+                        information below before importing it into your document.
+                      </Trans>
+                    </DialogDescription>
+                  </DialogHeader>
+                  <SuggestedRecipientsForm
+                    recipients={currentRecipients}
+                    onCancel={handleSkip}
+                    onSubmit={onRecipientsSubmit}
+                    onAutoAddFields={onAutoAddFields ? handleAutoAddFields : undefined}
+                    isProcessing={isProcessingRecipients}
+                  />
+                </>
+              ))
+              .exhaustive()}
+          </AnimateGenericFadeInOut>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/suggested-recipients-form.tsx

@@ -0,0 +1,408 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { RecipientRole } from '@prisma/client';
+import { PlusIcon, TrashIcon } from 'lucide-react';
+import { type FieldError, useFieldArray, useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { nanoid } from '@documenso/lib/universal/id';
+import { trpc } from '@documenso/trpc/react';
+import { RecipientAutoCompleteInput } from '@documenso/ui/components/recipient/recipient-autocomplete-input';
+import type { RecipientAutoCompleteOption } from '@documenso/ui/components/recipient/recipient-autocomplete-input';
+import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { DialogFooter } from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
+
+import type { RecipientForCreation } from '~/utils/detect-document-recipients';
+
+const ZSuggestedRecipientSchema = z.object({
+  formId: z.string().min(1),
+  name: z
+    .string()
+    .min(1, { message: msg`Name is required`.id })
+    .max(255),
+  email: z
+    .string()
+    .min(1, { message: msg`Email is required`.id })
+    .email({ message: msg`Invalid email`.id })
+    .max(254),
+  role: z.nativeEnum(RecipientRole),
+});
+
+const ZSuggestedRecipientsFormSchema = z.object({
+  recipients: z
+    .array(ZSuggestedRecipientSchema)
+    .min(1, { message: msg`Please add at least one recipient`.id }),
+});
+
+type TSuggestedRecipientsFormSchema = z.infer<typeof ZSuggestedRecipientsFormSchema>;
+
+export type SuggestedRecipientsFormProps = {
+  recipients: RecipientForCreation[] | null;
+  onCancel: () => void;
+  onSubmit: (recipients: RecipientForCreation[]) => Promise<void> | void;
+  onAutoAddFields?: (recipients: RecipientForCreation[]) => Promise<void> | void;
+  isProcessing?: boolean;
+};
+
+export const SuggestedRecipientsForm = ({
+  recipients,
+  onCancel,
+  onSubmit,
+  onAutoAddFields,
+  isProcessing = false,
+}: SuggestedRecipientsFormProps) => {
+  const { t } = useLingui();
+
+  const [recipientSearchQuery, setRecipientSearchQuery] = useState('');
+
+  const debouncedRecipientSearchQuery = useDebouncedValue(recipientSearchQuery, 500);
+
+  const { data: recipientSuggestionsData, isLoading } = trpc.recipient.suggestions.find.useQuery(
+    {
+      query: debouncedRecipientSearchQuery,
+    },
+    {
+      enabled: debouncedRecipientSearchQuery.length > 1,
+    },
+  );
+
+  const recipientSuggestions = recipientSuggestionsData?.results || [];
+
+  const defaultRecipients = useMemo(() => {
+    if (recipients && recipients.length > 0) {
+      const sorted = [...recipients].sort((a, b) => {
+        const orderA = a.signingOrder ?? 0;
+        const orderB = b.signingOrder ?? 0;
+
+        return orderA - orderB;
+      });
+
+      return sorted.map((recipient) => ({
+        formId: nanoid(),
+        name: recipient.name,
+        email: recipient.email,
+        role: recipient.role,
+      }));
+    }
+
+    return [
+      {
+        formId: nanoid(),
+        name: '',
+        email: '',
+        role: RecipientRole.SIGNER,
+      },
+    ];
+  }, [recipients]);
+
+  const form = useForm<TSuggestedRecipientsFormSchema>({
+    resolver: zodResolver(ZSuggestedRecipientsFormSchema),
+    defaultValues: {
+      recipients: defaultRecipients,
+    },
+  });
+  const {
+    formState: { isSubmitting },
+  } = form;
+
+  useEffect(() => {
+    form.reset({
+      recipients: defaultRecipients,
+    });
+  }, [defaultRecipients, form]);
+
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: 'recipients',
+  });
+
+  const handleRecipientAutoCompleteSelect = (
+    index: number,
+    suggestion: RecipientAutoCompleteOption,
+  ) => {
+    form.setValue(`recipients.${index}.email`, suggestion.email);
+    form.setValue(`recipients.${index}.name`, suggestion.name ?? suggestion.email);
+  };
+
+  const handleAddSigner = () => {
+    append({
+      formId: nanoid(),
+      name: '',
+      email: '',
+      role: RecipientRole.SIGNER,
+    });
+  };
+
+  const handleRemoveSigner = (index: number) => {
+    remove(index);
+  };
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    const normalizedRecipients: RecipientForCreation[] = values.recipients.map(
+      (recipient, index) => ({
+        name: recipient.name.trim(),
+        email: recipient.email.trim(),
+        role: recipient.role,
+        signingOrder: index + 1,
+      }),
+    );
+
+    try {
+      await onSubmit(normalizedRecipients);
+    } catch (error) {
+      console.error('Failed to submit recipients:', error);
+    }
+  });
+
+  const handleAutoAddFields = form.handleSubmit(async (values) => {
+    if (!onAutoAddFields) {
+      return;
+    }
+
+    const normalizedRecipients: RecipientForCreation[] = values.recipients.map(
+      (recipient, index) => ({
+        name: recipient.name.trim(),
+        email: recipient.email.trim(),
+        role: recipient.role,
+        signingOrder: index + 1,
+      }),
+    );
+
+    try {
+      await onAutoAddFields(normalizedRecipients);
+    } catch (error) {
+      console.error('Failed to auto-add fields:', error);
+    }
+  });
+
+  const getRecipientsRootError = (
+    error: typeof form.formState.errors.recipients,
+  ): FieldError | undefined => {
+    if (typeof error !== 'object' || !error || !('root' in error)) {
+      return undefined;
+    }
+
+    const candidate = (error as { root?: FieldError }).root;
+    return typeof candidate === 'object' ? candidate : undefined;
+  };
+
+  const recipientsRootError = getRecipientsRootError(form.formState.errors.recipients);
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div className="space-y-4">
+          {fields.map((field, index) => (
+            <div
+              key={field.id}
+              className="flex flex-col gap-4 md:flex-row md:items-center md:gap-x-2"
+            >
+              <FormField
+                control={form.control}
+                name={`recipients.${index}.email`}
+                render={({ field: emailField }) => (
+                  <FormItem
+                    className={cn('relative w-full', {
+                      'mb-6':
+                        form.formState.errors.recipients?.[index] &&
+                        !form.formState.errors.recipients[index]?.email,
+                    })}
+                  >
+                    {index === 0 && (
+                      <FormLabel required>
+                        <Trans>Email</Trans>
+                      </FormLabel>
+                    )}
+                    <FormControl>
+                      <RecipientAutoCompleteInput
+                        type="email"
+                        placeholder={t`Email`}
+                        value={emailField.value}
+                        options={recipientSuggestions}
+                        onSelect={(suggestion) =>
+                          handleRecipientAutoCompleteSelect(index, suggestion)
+                        }
+                        onSearchQueryChange={(query) => {
+                          emailField.onChange(query);
+                          setRecipientSearchQuery(query);
+                        }}
+                        loading={isLoading}
+                        disabled={isSubmitting}
+                        maxLength={254}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name={`recipients.${index}.name`}
+                render={({ field: nameField }) => (
+                  <FormItem
+                    className={cn('w-full', {
+                      'mb-6':
+                        form.formState.errors.recipients?.[index] &&
+                        !form.formState.errors.recipients[index]?.name,
+                    })}
+                  >
+                    {index === 0 && (
+                      <FormLabel>
+                        <Trans>Name</Trans>
+                      </FormLabel>
+                    )}
+                    <FormControl>
+                      <RecipientAutoCompleteInput
+                        type="text"
+                        placeholder={t`Name`}
+                        value={nameField.value}
+                        options={recipientSuggestions}
+                        onSelect={(suggestion) =>
+                          handleRecipientAutoCompleteSelect(index, suggestion)
+                        }
+                        onSearchQueryChange={(query) => {
+                          nameField.onChange(query);
+                          setRecipientSearchQuery(query);
+                        }}
+                        loading={isLoading}
+                        disabled={isSubmitting}
+                        maxLength={255}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name={`recipients.${index}.role`}
+                render={({ field: roleField }) => (
+                  <FormItem
+                    className={cn('mt-2 w-full md:mt-auto md:w-fit', {
+                      'mb-6':
+                        form.formState.errors.recipients?.[index] &&
+                        !form.formState.errors.recipients[index]?.role,
+                    })}
+                  >
+                    {index === 0 && (
+                      <FormLabel>
+                        <Trans>Role</Trans>
+                      </FormLabel>
+                    )}
+                    <FormControl>
+                      <RecipientRoleSelect
+                        value={roleField.value}
+                        onValueChange={roleField.onChange}
+                        disabled={isSubmitting}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Button
+                type="button"
+                variant="ghost"
+                className={cn('mt-2 w-full px-2 md:mt-auto md:w-auto', {
+                  'mb-6': form.formState.errors.recipients?.[index],
+                })}
+                onClick={() => handleRemoveSigner(index)}
+                disabled={isSubmitting || fields.length === 1}
+              >
+                <TrashIcon className="h-4 w-4" />
+              </Button>
+            </div>
+          ))}
+
+          <FormErrorMessage className="mt-2" error={recipientsRootError} />
+
+          <div className="flex">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleAddSigner}
+              className="w-full md:w-auto"
+              disabled={isSubmitting}
+            >
+              <PlusIcon className="mr-2 h-4 w-4" />
+              <Trans>Add signer</Trans>
+            </Button>
+          </div>
+        </div>
+
+        <DialogFooter className="flex flex-col gap-2 sm:flex-row sm:justify-between sm:gap-3">
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={onCancel}
+            disabled={isSubmitting || isProcessing}
+          >
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <div className="flex flex-col gap-2 sm:flex-row sm:gap-3">
+            <Button type="submit" disabled={isSubmitting || isProcessing}>
+              <Trans>Use recipients</Trans>
+            </Button>
+
+            {onAutoAddFields && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div>
+                      <Button
+                        type="button"
+                        onClick={handleAutoAddFields}
+                        disabled={
+                          isSubmitting ||
+                          isProcessing ||
+                          fields.length === 0 ||
+                          !form.formState.isValid
+                        }
+                      >
+                        {isProcessing ? (
+                          <Trans>Processing...</Trans>
+                        ) : (
+                          <Trans>Auto add fields</Trans>
+                        )}
+                      </Button>
+                    </div>
+                  </TooltipTrigger>
+                  {(fields.length === 0 || !form.formState.isValid) && (
+                    <TooltipContent>
+                      <Trans>Please add at least one valid recipient to auto-detect fields</Trans>
+                    </TooltipContent>
+                  )}
+                </Tooltip>
+              </TooltipProvider>
+            )}
+          </div>
+        </DialogFooter>
+      </form>
+    </Form>
+  );
+};

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

@@ -38,7 +38,7 @@ import { useCurrentTeam } from '~/providers/team';
 
 import { WebhookMultiSelectCombobox } from '../general/webhook-multiselect-combobox';
 
-const ZCreateWebhookFormSchema = ZCreateWebhookRequestSchema.omit({ teamId: true });
+const ZCreateWebhookFormSchema = ZCreateWebhookRequestSchema;
 
 type TCreateWebhookFormSchema = z.infer<typeof ZCreateWebhookFormSchema>;
 
@@ -78,7 +78,6 @@ export const WebhookCreateDialog = ({ trigger, ...props }: WebhookCreateDialogPr
         eventTriggers,
         secret,
         webhookUrl,
-        teamId: team.id,
       });
 
       setOpen(false);

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

@@ -67,7 +67,7 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
 
   const onSubmit = async () => {
     try {
-      await deleteWebhook({ id: webhook.id, teamId: team.id });
+      await deleteWebhook({ id: webhook.id });
 
       toast({
         title: _(msg`Webhook deleted`),
@@ -146,26 +146,18 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
               />
 
               <DialogFooter>
-                <div className="flex w-full flex-nowrap gap-4">
-                  <Button
-                    type="button"
-                    variant="secondary"
-                    className="flex-1"
-                    onClick={() => setOpen(false)}
-                  >
-                    <Trans>Cancel</Trans>
-                  </Button>
+                <Button type="button" variant="secondary" onClick={() => setOpen(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/dialogs/webhook-edit-dialog.tsx

@@ -0,0 +1,225 @@
+import { useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import type { Webhook } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { ZEditWebhookRequestSchema } from '@documenso/trpc/server/webhook-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  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 { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { WebhookMultiSelectCombobox } from '../general/webhook-multiselect-combobox';
+
+const ZEditWebhookFormSchema = ZEditWebhookRequestSchema.omit({ id: true });
+
+type TEditWebhookFormSchema = z.infer<typeof ZEditWebhookFormSchema>;
+
+export type WebhookEditDialogProps = {
+  trigger?: React.ReactNode;
+  webhook: Webhook;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const WebhookEditDialog = ({ trigger, webhook, ...props }: WebhookEditDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const { mutateAsync: updateWebhook } = trpc.webhook.editWebhook.useMutation();
+
+  const form = useForm<TEditWebhookFormSchema>({
+    resolver: zodResolver(ZEditWebhookFormSchema),
+    values: {
+      webhookUrl: webhook?.webhookUrl ?? '',
+      eventTriggers: webhook?.eventTriggers ?? [],
+      secret: webhook?.secret ?? '',
+      enabled: webhook?.enabled ?? true,
+    },
+  });
+
+  const onSubmit = async (data: TEditWebhookFormSchema) => {
+    try {
+      await updateWebhook({
+        id: webhook.id,
+        ...data,
+      });
+
+      toast({
+        title: t`Webhook updated`,
+        description: t`The webhook has been updated successfully.`,
+        duration: 5000,
+      });
+    } catch (err) {
+      toast({
+        title: t`Failed to update webhook`,
+        description: t`We encountered an error while updating the webhook. Please try again later.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+      {...props}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger}
+      </DialogTrigger>
+
+      <DialogContent className="max-w-lg" position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Edit webhook</Trans>
+          </DialogTitle>
+          <DialogDescription>{webhook.id}</DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset
+              className="flex h-full flex-col gap-y-6"
+              disabled={form.formState.isSubmitting}
+            >
+              <div className="flex flex-col-reverse gap-4 md:flex-row">
+                <FormField
+                  control={form.control}
+                  name="webhookUrl"
+                  render={({ field }) => (
+                    <FormItem className="flex-1">
+                      <FormLabel required>Webhook URL</FormLabel>
+                      <FormControl>
+                        <Input className="bg-background" {...field} />
+                      </FormControl>
+
+                      <FormDescription>
+                        <Trans>The URL for Documenso to send webhook events to.</Trans>
+                      </FormDescription>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="enabled"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        <Trans>Enabled</Trans>
+                      </FormLabel>
+
+                      <div>
+                        <FormControl>
+                          <Switch
+                            className="bg-background"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                      </div>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="eventTriggers"
+                render={({ field: { onChange, value } }) => (
+                  <FormItem className="flex flex-col gap-2">
+                    <FormLabel required>
+                      <Trans>Triggers</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <WebhookMultiSelectCombobox
+                        listValues={value}
+                        onChange={(values: string[]) => {
+                          onChange(values);
+                        }}
+                      />
+                    </FormControl>
+
+                    <FormDescription>
+                      <Trans>The events that will trigger a webhook to be sent to your URL.</Trans>
+                    </FormDescription>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="secret"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Secret</FormLabel>
+                    <FormControl>
+                      <PasswordInput
+                        className="bg-background"
+                        {...field}
+                        value={field.value ?? ''}
+                      />
+                    </FormControl>
+
+                    <FormDescription>
+                      <Trans>
+                        A secret that will be sent to your URL so you can verify that the request
+                        has been sent by Documenso.
+                      </Trans>
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button variant="secondary">
+                    <Trans>Close</Trans>
+                  </Button>
+                </DialogClose>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  <Trans>Update</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/webhook-test-dialog.tsx

@@ -36,8 +36,6 @@ import {
 } from '@documenso/ui/primitives/select';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useCurrentTeam } from '~/providers/team';
-
 export type WebhookTestDialogProps = {
   webhook: Pick<Webhook, 'id' | 'webhookUrl' | 'eventTriggers'>;
   children: React.ReactNode;
@@ -53,8 +51,6 @@ export const WebhookTestDialog = ({ webhook, children }: WebhookTestDialogProps)
   const { t } = useLingui();
   const { toast } = useToast();
 
-  const team = useCurrentTeam();
-
   const [open, setOpen] = useState(false);
 
   const { mutateAsync: testWebhook } = trpc.webhook.testWebhook.useMutation();
@@ -71,7 +67,6 @@ export const WebhookTestDialog = ({ webhook, children }: WebhookTestDialogProps)
       await testWebhook({
         id: webhook.id,
         event,
-        teamId: team.id,
       });
 
       toast({
@@ -150,11 +145,11 @@ export const WebhookTestDialog = ({ webhook, children }: WebhookTestDialogProps)
 
               <DialogFooter>
                 <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                  <Trans>Cancel</Trans>
+                  <Trans>Close</Trans>
                 </Button>
 
                 <Button type="submit" loading={form.formState.isSubmitting}>
-                  <Trans>Send Test Webhook</Trans>
+                  <Trans>Send</Trans>
                 </Button>
               </DialogFooter>
             </fieldset>

apps/remix/app/components/embed/authoring/configure-document-recipients.tsx

@@ -29,7 +29,6 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitive
 import { useConfigureDocument } from './configure-document-context';
 import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
 
-// Define a type for signer items
 type SignerItem = TConfigureEmbedFormSchema['signers'][number];
 
 export interface ConfigureDocumentRecipientsProps {
@@ -97,18 +96,15 @@ export const ConfigureDocumentRecipients = ({
       const currentSigners = getValues('signers') || [...signers];
       const signer = currentSigners[index];
 
-      // Remove signer from current position and insert at new position
       const remainingSigners = currentSigners.filter((_: unknown, idx: number) => idx !== index);
       const newPosition = Math.min(Math.max(0, newOrder - 1), currentSigners.length - 1);
       remainingSigners.splice(newPosition, 0, signer);
 
-      // Update signing order for each item
       const updatedSigners = remainingSigners.map((s: SignerItem, idx: number) => ({
         ...s,
         signingOrder: signingOrder === DocumentSigningOrder.SEQUENTIAL ? idx + 1 : undefined,
       }));
 
-      // Update the form
       replace(updatedSigners);
     },
     [signers, replace, getValues],
@@ -118,17 +114,14 @@ export const ConfigureDocumentRecipients = ({
     (result: DropResult) => {
       if (!result.destination) return;
 
-      // Use the move function from useFieldArray which preserves input values
       move(result.source.index, result.destination.index);
 
-      // Update signing orders after move
       const currentSigners = getValues('signers');
       const updatedSigners = currentSigners.map((signer: SignerItem, index: number) => ({
         ...signer,
         signingOrder: signingOrder === DocumentSigningOrder.SEQUENTIAL ? index + 1 : undefined,
       }));
 
-      // Update the form with new ordering
       replace(updatedSigners);
     },
     [move, replace, getValues],

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

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { DocumentData, FieldType } from '@prisma/client';
+import type { EnvelopeItem, FieldType } from '@prisma/client';
 import { ReadStatus, type Recipient, SendStatus, SigningStatus } from '@prisma/client';
 import { base64 } from '@scure/base';
 import { ChevronsUpDown } from 'lucide-react';
@@ -23,7 +23,7 @@ import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/type
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { FieldSelector } from '@documenso/ui/primitives/field-selector';
 import { Form } from '@documenso/ui/primitives/form/form';
-import PDFViewer from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
 import { Sheet, SheetContent, SheetTrigger } from '@documenso/ui/primitives/sheet';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -40,7 +40,8 @@ const DEFAULT_WIDTH_PX = MIN_WIDTH_PX * 2.5;
 
 export type ConfigureFieldsViewProps = {
   configData: TConfigureEmbedFormSchema;
-  documentData?: DocumentData;
+  presignToken?: string | undefined;
+  envelopeItem?: Pick<EnvelopeItem, 'id' | 'envelopeId'>;
   defaultValues?: Partial<TConfigureFieldsFormSchema>;
   onBack?: (data: TConfigureFieldsFormSchema) => void;
   onSubmit: (data: TConfigureFieldsFormSchema) => void;
@@ -48,7 +49,8 @@ export type ConfigureFieldsViewProps = {
 
 export const ConfigureFieldsView = ({
   configData,
-  documentData,
+  presignToken,
+  envelopeItem,
   defaultValues,
   onBack,
   onSubmit,
@@ -82,17 +84,25 @@ export const ConfigureFieldsView = ({
   }, []);
 
   const normalizedDocumentData = useMemo(() => {
-    if (documentData) {
-      return documentData.data;
+    if (envelopeItem) {
+      return undefined;
     }
 
     if (!configData.documentData) {
-      return null;
+      return undefined;
     }
 
     return base64.encode(configData.documentData.data);
   }, [configData.documentData]);
 
+  const normalizedEnvelopeItem = useMemo(() => {
+    if (envelopeItem) {
+      return envelopeItem;
+    }
+
+    return { id: '', envelopeId: '' };
+  }, [envelopeItem]);
+
   const recipients = useMemo(() => {
     return configData.signers.map<Recipient>((signer, index) => ({
       id: signer.nativeId || index,
@@ -453,12 +463,12 @@ export const ConfigureFieldsView = ({
         {/* Desktop sidebar */}
         {!isMobile && (
           <div className="order-2 col-span-12 md:order-1 md:col-span-4">
-            <div className="bg-widget border-border sticky top-4 max-h-[calc(100vh-2rem)] rounded-lg border p-4 pb-6">
+            <div className="sticky top-4 max-h-[calc(100vh-2rem)] rounded-lg border border-border bg-widget p-4 pb-6">
               <h2 className="mb-1 text-lg font-medium">
                 <Trans>Configure Fields</Trans>
               </h2>
 
-              <p className="text-muted-foreground mb-6 text-sm">
+              <p className="mb-6 text-sm text-muted-foreground">
                 <Trans>Configure the fields you want to place on the document.</Trans>
               </p>
 
@@ -512,7 +522,7 @@ export const ConfigureFieldsView = ({
             {selectedField && (
               <div
                 className={cn(
-                  'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white transition duration-200 [container-type:size]',
+                  'dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white text-muted-foreground transition duration-200 [container-type:size]',
                   selectedRecipientStyles.base,
                   {
                     '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
@@ -534,56 +544,50 @@ export const ConfigureFieldsView = ({
             )}
 
             <Form {...form}>
-              {normalizedDocumentData && (
-                <div>
-                  <PDFViewer
-                    overrideData={normalizedDocumentData}
-                    envelopeItem={{
-                      id: '',
-                      envelopeId: '',
-                    }}
-                    token={undefined}
-                    version="signed"
-                  />
+              <div>
+                <PDFViewerLazy
+                  presignToken={presignToken}
+                  overrideData={normalizedDocumentData}
+                  envelopeItem={normalizedEnvelopeItem}
+                  token={undefined}
+                  version="signed"
+                />
 
-                  <ElementVisible
-                    target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
-                  >
-                    {localFields.map((field, index) => {
-                      const recipientIndex = recipients.findIndex(
-                        (r) => r.id === field.recipientId,
-                      );
+                <ElementVisible
+                  target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
+                >
+                  {localFields.map((field, index) => {
+                    const recipientIndex = recipients.findIndex((r) => r.id === field.recipientId);
 
-                      return (
-                        <FieldItem
-                          key={field.formId}
-                          field={field}
-                          minHeight={MIN_HEIGHT_PX}
-                          minWidth={MIN_WIDTH_PX}
-                          defaultHeight={DEFAULT_HEIGHT_PX}
-                          defaultWidth={DEFAULT_WIDTH_PX}
-                          onResize={(node) => onFieldResize(node, index)}
-                          onMove={(node) => onFieldMove(node, index)}
-                          onRemove={() => remove(index)}
-                          onDuplicate={() => onFieldCopy(null, { duplicate: true })}
-                          onDuplicateAllPages={() => onFieldCopy(null, { duplicateAll: true })}
-                          onFocus={() => setLastActiveField(field)}
-                          onBlur={() => setLastActiveField(null)}
-                          onAdvancedSettings={() => {
-                            setCurrentField(field);
-                            setShowAdvancedSettings(true);
-                          }}
-                          recipientIndex={recipientIndex}
-                          active={activeFieldId === field.formId}
-                          onFieldActivate={() => setActiveFieldId(field.formId)}
-                          onFieldDeactivate={() => setActiveFieldId(null)}
-                          disabled={selectedRecipient?.id !== field.recipientId}
-                        />
-                      );
-                    })}
-                  </ElementVisible>
-                </div>
-              )}
+                    return (
+                      <FieldItem
+                        key={field.formId}
+                        field={field}
+                        minHeight={MIN_HEIGHT_PX}
+                        minWidth={MIN_WIDTH_PX}
+                        defaultHeight={DEFAULT_HEIGHT_PX}
+                        defaultWidth={DEFAULT_WIDTH_PX}
+                        onResize={(node) => onFieldResize(node, index)}
+                        onMove={(node) => onFieldMove(node, index)}
+                        onRemove={() => remove(index)}
+                        onDuplicate={() => onFieldCopy(null, { duplicate: true })}
+                        onDuplicateAllPages={() => onFieldCopy(null, { duplicateAll: true })}
+                        onFocus={() => setLastActiveField(field)}
+                        onBlur={() => setLastActiveField(null)}
+                        onAdvancedSettings={() => {
+                          setCurrentField(field);
+                          setShowAdvancedSettings(true);
+                        }}
+                        recipientIndex={recipientIndex}
+                        active={activeFieldId === field.formId}
+                        onFieldActivate={() => setActiveFieldId(field.formId)}
+                        onFieldDeactivate={() => setActiveFieldId(null)}
+                        disabled={selectedRecipient?.id !== field.recipientId}
+                      />
+                    );
+                  })}
+                </ElementVisible>
+              </div>
             </Form>
           </div>
         </div>
@@ -593,14 +597,14 @@ export const ConfigureFieldsView = ({
       {isMobile && (
         <Sheet open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
           <SheetTrigger asChild>
-            <div className="bg-widget border-border fixed bottom-6 left-6 right-6 z-50 flex items-center justify-between gap-2 rounded-lg border p-4">
+            <div className="fixed bottom-6 left-6 right-6 z-50 flex items-center justify-between gap-2 rounded-lg border border-border bg-widget p-4">
               <span className="text-lg font-medium">
                 <Trans>Configure Fields</Trans>
               </span>
 
               <button
                 type="button"
-                className="border-border text-muted-foreground inline-flex h-10 w-10 items-center justify-center rounded-lg border"
+                className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-border text-muted-foreground"
               >
                 <ChevronsUpDown className="h-6 w-6" />
               </button>
@@ -610,13 +614,13 @@ export const ConfigureFieldsView = ({
           <SheetContent
             position="bottom"
             size="xl"
-            className="bg-widget h-fit max-h-[80vh] overflow-y-auto rounded-t-xl p-4"
+            className="h-fit max-h-[80vh] overflow-y-auto rounded-t-xl bg-widget p-4"
           >
             <h2 className="mb-1 text-lg font-medium">
               <Trans>Configure Fields</Trans>
             </h2>
 
-            <p className="text-muted-foreground mb-6 text-sm">
+            <p className="mb-6 text-sm text-muted-foreground">
               <Trans>Configure the fields you want to place on the document.</Trans>
             </p>
 

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

@@ -28,7 +28,7 @@ import { Button } from '@documenso/ui/primitives/button';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -334,7 +334,7 @@ export const EmbedDirectTemplateClientPage = ({
       <div className="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
         {/* Viewer */}
         <div className="flex-1">
-          <PDFViewer
+          <PDFViewerLazy
             envelopeItem={envelopeItems[0]}
             token={recipient.token}
             version="signed"
@@ -348,11 +348,11 @@ export const EmbedDirectTemplateClientPage = ({
           className="group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:bottom-[unset] md:top-4 md:z-auto md:w-[350px] md:px-0"
           data-expanded={isExpanded || undefined}
         >
-          <div className="border-border bg-widget flex h-fit w-full flex-col rounded-xl border px-4 py-4 md:min-h-[min(calc(100dvh-2rem),48rem)] md:py-6">
+          <div className="flex h-fit w-full flex-col rounded-xl border border-border bg-widget px-4 py-4 md:min-h-[min(calc(100dvh-2rem),48rem)] md:py-6">
             {/* Header */}
             <div>
               <div className="flex items-center justify-between gap-x-2">
-                <h3 className="text-foreground text-xl font-semibold md:text-2xl">
+                <h3 className="text-xl font-semibold text-foreground md:text-2xl">
                   <Trans>Sign document</Trans>
                 </h3>
 
@@ -362,7 +362,7 @@ export const EmbedDirectTemplateClientPage = ({
                     className="h-8 w-8 p-0 md:hidden"
                     onClick={() => setIsExpanded(false)}
                   >
-                    <LucideChevronDown className="text-muted-foreground h-5 w-5" />
+                    <LucideChevronDown className="h-5 w-5 text-muted-foreground" />
                   </Button>
                 ) : pendingFields.length > 0 ? (
                   <Button
@@ -370,7 +370,7 @@ export const EmbedDirectTemplateClientPage = ({
                     className="h-8 w-8 p-0 md:hidden"
                     onClick={() => setIsExpanded(true)}
                   >
-                    <LucideChevronUp className="text-muted-foreground h-5 w-5" />
+                    <LucideChevronUp className="h-5 w-5 text-muted-foreground" />
                   </Button>
                 ) : (
                   <Button
@@ -388,11 +388,11 @@ export const EmbedDirectTemplateClientPage = ({
             </div>
 
             <div className="hidden group-data-[expanded]/document-widget:block md:block">
-              <p className="text-muted-foreground mt-2 text-sm">
+              <p className="mt-2 text-sm text-muted-foreground">
                 <Trans>Sign the document to complete the process.</Trans>
               </p>
 
-              <hr className="border-border mb-8 mt-4" />
+              <hr className="mb-8 mt-4 border-border" />
             </div>
 
             {/* Form */}
@@ -406,7 +406,7 @@ export const EmbedDirectTemplateClientPage = ({
                   <Input
                     type="text"
                     id="full-name"
-                    className="bg-background mt-2"
+                    className="mt-2 bg-background"
                     disabled={isNameLocked}
                     value={fullName}
                     onChange={(e) => !isNameLocked && setFullName(e.target.value)}
@@ -421,7 +421,7 @@ export const EmbedDirectTemplateClientPage = ({
                   <Input
                     type="email"
                     id="email"
-                    className="bg-background mt-2"
+                    className="mt-2 bg-background"
                     disabled={isEmailLocked}
                     value={email}
                     onChange={(e) => !isEmailLocked && setEmail(e.target.value.trim())}
@@ -490,7 +490,7 @@ export const EmbedDirectTemplateClientPage = ({
       </div>
 
       {!hidePoweredBy && (
-        <div className="bg-primary text-primary-foreground fixed bottom-0 left-0 z-40 rounded-tr px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100">
+        <div className="fixed bottom-0 left-0 z-40 rounded-tr bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100">
           <span>Powered by</span>
           <BrandingLogo className="ml-2 inline-block h-[14px]" />
         </div>

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

@@ -22,7 +22,7 @@ import { Button } from '@documenso/ui/primitives/button';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
 import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -286,7 +286,7 @@ export const EmbedSignDocumentV1ClientPage = ({
         <div className="embed--DocumentContainer relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
           {/* Viewer */}
           <div className="embed--DocumentViewer flex-1">
-            <PDFViewer
+            <PDFViewerLazy
               envelopeItem={envelopeItems[0]}
               token={token}
               version="signed"
@@ -300,11 +300,11 @@ export const EmbedSignDocumentV1ClientPage = ({
             className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:bottom-[unset] md:top-4 md:z-auto md:w-[350px] md:px-0"
             data-expanded={isExpanded || undefined}
           >
-            <div className="embed--DocumentWidget border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
+            <div className="embed--DocumentWidget flex w-full flex-col rounded-xl border border-border bg-widget px-4 py-4 md:py-6">
               {/* Header */}
               <div className="embed--DocumentWidgetHeader">
                 <div className="flex items-center justify-between gap-x-2">
-                  <h3 className="text-foreground text-xl font-semibold md:text-2xl">
+                  <h3 className="text-xl font-semibold text-foreground md:text-2xl">
                     {isAssistantMode ? (
                       <Trans>Assist with signing</Trans>
                     ) : (
@@ -315,18 +315,18 @@ export const EmbedSignDocumentV1ClientPage = ({
                   {isExpanded ? (
                     <Button
                       variant="outline"
-                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                      className="h-8 w-8 bg-background p-0 md:hidden dark:bg-foreground"
                       onClick={() => setIsExpanded(false)}
                     >
-                      <LucideChevronDown className="text-muted-foreground dark:text-background h-5 w-5" />
+                      <LucideChevronDown className="h-5 w-5 text-muted-foreground dark:text-background" />
                     </Button>
                   ) : pendingFields.length > 0 ? (
                     <Button
                       variant="outline"
-                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                      className="h-8 w-8 bg-background p-0 md:hidden dark:bg-foreground"
                       onClick={() => setIsExpanded(true)}
                     >
-                      <LucideChevronUp className="text-muted-foreground dark:text-background h-5 w-5" />
+                      <LucideChevronUp className="h-5 w-5 text-muted-foreground dark:text-background" />
                     </Button>
                   ) : (
                     <Button
@@ -346,7 +346,7 @@ export const EmbedSignDocumentV1ClientPage = ({
               </div>
 
               <div className="embed--DocumentWidgetContent hidden group-data-[expanded]/document-widget:block md:block">
-                <p className="text-muted-foreground mt-2 text-sm">
+                <p className="mt-2 text-sm text-muted-foreground">
                   {isAssistantMode ? (
                     <Trans>Help complete the document for other signers.</Trans>
                   ) : (
@@ -354,7 +354,7 @@ export const EmbedSignDocumentV1ClientPage = ({
                   )}
                 </p>
 
-                <hr className="border-border mb-8 mt-4" />
+                <hr className="mb-8 mt-4 border-border" />
               </div>
 
               {/* Form */}
@@ -366,7 +366,7 @@ export const EmbedSignDocumentV1ClientPage = ({
                         <Trans>Signing for</Trans>
                       </Label>
 
-                      <fieldset className="dark:bg-background border-border mt-2 rounded-2xl border bg-white p-3">
+                      <fieldset className="mt-2 rounded-2xl border border-border bg-white p-3 dark:bg-background">
                         <RadioGroup
                           className="gap-0 space-y-3 shadow-none"
                           value={selectedSignerId?.toString()}
@@ -377,7 +377,7 @@ export const EmbedSignDocumentV1ClientPage = ({
                             .map((r) => (
                               <div
                                 key={`${assistantSignersId}-${r.id}`}
-                                className="bg-widget border-border relative flex flex-col gap-4 rounded-lg border p-4"
+                                className="relative flex flex-col gap-4 rounded-lg border border-border bg-widget p-4"
                               >
                                 <div className="flex items-center justify-between">
                                   <div className="flex items-center gap-3">
@@ -395,15 +395,15 @@ export const EmbedSignDocumentV1ClientPage = ({
                                         {r.name}
 
                                         {r.id === recipient.id && (
-                                          <span className="text-muted-foreground ml-2">
+                                          <span className="ml-2 text-muted-foreground">
                                             {_(msg`(You)`)}
                                           </span>
                                         )}
                                       </Label>
-                                      <p className="text-muted-foreground text-xs">{r.email}</p>
+                                      <p className="text-xs text-muted-foreground">{r.email}</p>
                                     </div>
                                   </div>
-                                  <div className="text-muted-foreground text-xs leading-[inherit]">
+                                  <div className="text-xs leading-[inherit] text-muted-foreground">
                                     {r.fields.length} {r.fields.length === 1 ? 'field' : 'fields'}
                                   </div>
                                 </div>
@@ -424,7 +424,7 @@ export const EmbedSignDocumentV1ClientPage = ({
                         <Input
                           type="text"
                           id="full-name"
-                          className="bg-background mt-2"
+                          className="mt-2 bg-background"
                           disabled={isNameLocked}
                           value={fullName}
                           onChange={(e) => !isNameLocked && setFullName(e.target.value)}
@@ -439,7 +439,7 @@ export const EmbedSignDocumentV1ClientPage = ({
                         <Input
                           type="email"
                           id="email"
-                          className="bg-background mt-2"
+                          className="mt-2 bg-background"
                           value={email}
                           disabled
                         />
@@ -507,7 +507,7 @@ export const EmbedSignDocumentV1ClientPage = ({
         </div>
 
         {!hidePoweredBy && (
-          <div className="bg-primary text-primary-foreground fixed bottom-0 left-0 z-40 rounded-tr px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100">
+          <div className="fixed bottom-0 left-0 z-40 rounded-tr bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100">
             <span>Powered by</span>
             <BrandingLogo className="ml-2 inline-block h-[14px]" />
           </div>

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

@@ -21,7 +21,7 @@ import { Button } from '@documenso/ui/primitives/button';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import PDFViewer from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -177,14 +177,14 @@ export const MultiSignDocumentSigningView = ({
   };
 
   return (
-    <div className="bg-background min-h-screen overflow-hidden">
+    <div className="min-h-screen overflow-hidden bg-background">
       <div id="document-field-portal-root" className="relative h-full w-full overflow-y-auto p-8">
         {match({ isLoading, document })
           .with({ isLoading: true }, () => (
             <div className="flex min-h-[400px] w-full items-center justify-center">
               <div className="flex flex-col items-center gap-4">
-                <Loader className="text-primary h-8 w-8 animate-spin" />
-                <p className="text-muted-foreground text-sm">
+                <Loader className="h-8 w-8 animate-spin text-primary" />
+                <p className="text-sm text-muted-foreground">
                   <Trans>Loading document...</Trans>
                 </p>
               </div>
@@ -192,7 +192,7 @@ export const MultiSignDocumentSigningView = ({
           ))
           .with({ isLoading: false, document: undefined }, () => (
             <div className="flex min-h-[400px] w-full items-center justify-center">
-              <p className="text-muted-foreground text-sm">
+              <p className="text-sm text-muted-foreground">
                 <Trans>Failed to load document</Trans>
               </p>
             </div>
@@ -225,7 +225,7 @@ export const MultiSignDocumentSigningView = ({
                     'md:mx-auto md:max-w-2xl': document.status === DocumentStatus.COMPLETED,
                   })}
                 >
-                  <PDFViewer
+                  <PDFViewerLazy
                     envelopeItem={document.envelopeItems[0]}
                     token={token}
                     version="signed"
@@ -243,23 +243,23 @@ export const MultiSignDocumentSigningView = ({
                     className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:bottom-[unset] md:top-0 md:z-auto md:w-[350px] md:px-0"
                     data-expanded={isExpanded || undefined}
                   >
-                    <div className="embed--DocumentWidget border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
+                    <div className="embed--DocumentWidget flex w-full flex-col rounded-xl border border-border bg-widget px-4 py-4 md:py-6">
                       {/* Header */}
                       <div className="embed--DocumentWidgetHeader">
                         <div className="flex items-center justify-between gap-x-2">
-                          <h3 className="text-foreground text-xl font-semibold md:text-2xl">
+                          <h3 className="text-xl font-semibold text-foreground md:text-2xl">
                             <Trans>Sign document</Trans>
                           </h3>
 
                           <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
                             {isExpanded ? (
                               <LucideChevronDown
-                                className="text-muted-foreground h-5 w-5"
+                                className="h-5 w-5 text-muted-foreground"
                                 onClick={() => setIsExpanded(false)}
                               />
                             ) : (
                               <LucideChevronUp
-                                className="text-muted-foreground h-5 w-5"
+                                className="h-5 w-5 text-muted-foreground"
                                 onClick={() => setIsExpanded(true)}
                               />
                             )}
@@ -268,11 +268,11 @@ export const MultiSignDocumentSigningView = ({
                       </div>
 
                       <div className="embed--DocumentWidgetContent hidden group-data-[expanded]/document-widget:block md:block">
-                        <p className="text-muted-foreground mt-2 text-sm">
+                        <p className="mt-2 text-sm text-muted-foreground">
                           <Trans>Sign the document to complete the process.</Trans>
                         </p>
 
-                        <hr className="border-border mb-8 mt-4" />
+                        <hr className="mb-8 mt-4 border-border" />
                       </div>
 
                       {/* Form */}
@@ -288,7 +288,7 @@ export const MultiSignDocumentSigningView = ({
                                 <Input
                                   type="text"
                                   id="full-name"
-                                  className="bg-background mt-2"
+                                  className="mt-2 bg-background"
                                   disabled={isNameLocked}
                                   value={fullName}
                                   onChange={(e) => !isNameLocked && setFullName(e.target.value)}
@@ -303,7 +303,7 @@ export const MultiSignDocumentSigningView = ({
                                 <Input
                                   type="email"
                                   id="email"
-                                  className="bg-background mt-2"
+                                  className="mt-2 bg-background"
                                   value={email}
                                   disabled
                                 />

apps/remix/app/components/general/billing-plans.tsx

@@ -42,7 +42,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { ZCreateOrganisationFormSchema } from '../dialogs/organisation-create-dialog';
 
-const MotionCard = motion(Card);
+const MotionCard = motion.create(Card);
 
 export type BillingPlansProps = {
   plans: InternalClaimPlans;
@@ -101,7 +101,7 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
               <CardContent className="flex h-full flex-col p-6">
                 <CardTitle>{price.product.name}</CardTitle>
 
-                <div className="text-muted-foreground mt-2 text-lg font-medium">
+                <div className="mt-2 text-lg font-medium text-muted-foreground">
                   {price.friendlyPrice + ' '}
                   <span className="text-xs">
                     {interval === 'monthlyPrice' ? (
@@ -112,12 +112,12 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
                   </span>
                 </div>
 
-                <div className="text-muted-foreground mt-1.5 text-sm">
+                <div className="mt-1.5 text-sm text-muted-foreground">
                   {price.product.description}
                 </div>
 
                 {price.product.features && price.product.features.length > 0 && (
-                  <div className="text-muted-foreground mt-4">
+                  <div className="mt-4 text-muted-foreground">
                     <div className="text-sm font-medium">Includes:</div>
 
                     <ul className="mt-1 divide-y text-sm">
@@ -261,7 +261,7 @@ const BillingDialog = ({
                     <Building2Icon className="h-4 w-4" />
                     <Trans>Update current organisation</Trans>
                   </Label>
-                  <p className="text-muted-foreground text-sm">
+                  <p className="text-sm text-muted-foreground">
                     <Trans>
                       Upgrade <strong>{organisation.name}</strong> to {planName}
                     </Trans>
@@ -276,7 +276,7 @@ const BillingDialog = ({
                     <PlusIcon className="h-4 w-4" />
                     <Trans>Create separate organisation</Trans>
                   </Label>
-                  <p className="text-muted-foreground text-sm">
+                  <p className="text-sm text-muted-foreground">
                     <Trans>
                       Create a new organisation with {planName} plan. Keep your current organisation
                       on it's current plan

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

@@ -13,7 +13,7 @@ import { trpc } from '@documenso/trpc/react';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -151,7 +151,7 @@ export const DirectTemplatePageView = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewer
+          <PDFViewerLazy
             key={template.id}
             envelopeItem={template.envelopeItems[0]}
             token={directTemplateRecipient.token}

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

@@ -135,7 +135,7 @@ export const DocumentSigningForm = ({
                 <div className="flex flex-col gap-4 md:flex-row">
                   <Button
                     type="button"
-                    className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
+                    className="w-full bg-black/5 hover:bg-black/10 dark:bg-muted dark:hover:bg-muted/80"
                     variant="secondary"
                     size="lg"
                     disabled={typeof window !== 'undefined' && window.history.length <= 1}
@@ -166,7 +166,7 @@ export const DocumentSigningForm = ({
           ) : recipient.role === RecipientRole.ASSISTANT ? (
             <>
               <form onSubmit={assistantForm.handleSubmit(onAssistantFormSubmit)}>
-                <fieldset className="dark:bg-background border-border rounded-2xl border bg-white p-3">
+                <fieldset className="rounded-2xl border border-border bg-white p-3 dark:bg-background">
                   <Controller
                     name="selectedSignerId"
                     control={assistantForm.control}
@@ -185,7 +185,7 @@ export const DocumentSigningForm = ({
                           .map((r) => (
                             <div
                               key={`${assistantSignersId}-${r.id}`}
-                              className="bg-widget border-border relative flex flex-col gap-4 rounded-lg border p-4"
+                              className="relative flex flex-col gap-4 rounded-lg border border-border bg-widget p-4"
                             >
                               <div className="flex items-center justify-between">
                                 <div className="flex items-center gap-3">
@@ -203,15 +203,15 @@ export const DocumentSigningForm = ({
                                       {r.name}
 
                                       {r.id === recipient.id && (
-                                        <span className="text-muted-foreground ml-2">
+                                        <span className="ml-2 text-muted-foreground">
                                           {_(msg`(You)`)}
                                         </span>
                                       )}
                                     </Label>
-                                    <p className="text-muted-foreground text-xs">{r.email}</p>
+                                    <p className="text-xs text-muted-foreground">{r.email}</p>
                                   </div>
                                 </div>
-                                <div className="text-muted-foreground text-xs leading-[inherit]">
+                                <div className="text-xs leading-[inherit] text-muted-foreground">
                                   {r.fields.length} {r.fields.length === 1 ? 'field' : 'fields'}
                                 </div>
                               </div>
@@ -265,7 +265,7 @@ export const DocumentSigningForm = ({
                     <Input
                       type="text"
                       id="full-name"
-                      className="bg-background mt-2"
+                      className="mt-2 bg-background"
                       value={fullName}
                       onChange={(e) => setFullName(e.target.value.trimStart())}
                     />
@@ -294,7 +294,7 @@ export const DocumentSigningForm = ({
               <div className="mt-6 flex flex-col gap-4 md:flex-row">
                 <Button
                   type="button"
-                  className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
+                  className="w-full bg-black/5 hover:bg-black/10 dark:bg-muted dark:hover:bg-muted/80"
                   variant="secondary"
                   size="lg"
                   disabled={typeof window !== 'undefined' && window.history.length <= 1}

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

@@ -30,7 +30,7 @@ import { DocumentReadOnlyFields } from '@documenso/ui/components/document/docume
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 
 import { DocumentSigningAttachmentsPopover } from '~/components/general/document-signing/document-signing-attachments-popover';
 import { DocumentSigningAutoSign } from '~/components/general/document-signing/document-signing-auto-sign';
@@ -187,7 +187,7 @@ export const DocumentSigningPageViewV1 = ({
 
         <div className="mt-1.5 flex flex-wrap items-center justify-between gap-y-2 sm:mt-2.5 sm:gap-y-0">
           <div className="max-w-[50ch]">
-            <span className="text-muted-foreground truncate" title={senderName}>
+            <span className="truncate text-muted-foreground" title={senderName}>
               {senderName} {senderEmail}
             </span>{' '}
             <span className="text-muted-foreground">
@@ -245,7 +245,7 @@ export const DocumentSigningPageViewV1 = ({
           <div className="flex-1">
             <Card className="rounded-xl before:rounded-xl" gradient>
               <CardContent className="p-2">
-                <PDFViewer
+                <PDFViewerLazy
                   key={document.envelopeItems[0].id}
                   envelopeItem={document.envelopeItems[0]}
                   token={recipient.token}
@@ -260,9 +260,9 @@ export const DocumentSigningPageViewV1 = ({
             className="group/document-widget fixed bottom-6 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-4 md:sticky md:bottom-[unset] md:top-4 md:z-auto md:w-[350px] md:px-0"
             data-expanded={isExpanded || undefined}
           >
-            <div className="border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
+            <div className="flex w-full flex-col rounded-xl border border-border bg-widget px-4 py-4 md:py-6">
               <div className="flex items-center justify-between gap-x-2">
-                <h3 className="text-foreground text-xl font-semibold md:text-2xl">
+                <h3 className="text-xl font-semibold text-foreground md:text-2xl">
                   {match(recipient.role)
                     .with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
                     .with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
@@ -305,25 +305,25 @@ export const DocumentSigningPageViewV1 = ({
                   .with({ isExpanded: true }, () => (
                     <Button
                       variant="outline"
-                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                      className="h-8 w-8 bg-background p-0 md:hidden dark:bg-foreground"
                       onClick={() => setIsExpanded(false)}
                     >
-                      <LucideChevronDown className="text-muted-foreground dark:text-background h-5 w-5" />
+                      <LucideChevronDown className="h-5 w-5 text-muted-foreground dark:text-background" />
                     </Button>
                   ))
                   .otherwise(() => (
                     <Button
                       variant="outline"
-                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                      className="h-8 w-8 bg-background p-0 md:hidden dark:bg-foreground"
                       onClick={() => setIsExpanded(true)}
                     >
-                      <LucideChevronUp className="text-muted-foreground dark:text-background h-5 w-5" />
+                      <LucideChevronUp className="h-5 w-5 text-muted-foreground dark:text-background" />
                     </Button>
                   ))}
               </div>
 
               <div className="hidden group-data-[expanded]/document-widget:block md:block">
-                <p className="text-muted-foreground mt-2 text-sm">
+                <p className="mt-2 text-sm text-muted-foreground">
                   {match(recipient.role)
                     .with(RecipientRole.VIEWER, () => (
                       <Trans>Please mark as viewed to complete.</Trans>
@@ -340,7 +340,7 @@ export const DocumentSigningPageViewV1 = ({
                     .otherwise(() => null)}
                 </p>
 
-                <hr className="border-border mb-8 mt-4" />
+                <hr className="mb-8 mt-4 border-border" />
               </div>
 
               <div className="-mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">

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

@@ -34,7 +34,7 @@ import { DocumentSigningRejectDialog } from './document-signing-reject-dialog';
 import { useRequiredEnvelopeSigningContext } from './envelope-signing-provider';
 
 const EnvelopeSignerPageRenderer = lazy(
-  async () => import('../envelope-signing/envelope-signer-page-renderer'),
+  async () => import('~/components/general/envelope-signing/envelope-signer-page-renderer'),
 );
 
 export const DocumentSigningPageViewV2 = () => {
@@ -71,7 +71,7 @@ export const DocumentSigningPageViewV2 = () => {
   }, [recipientFieldsRemaining, selectedAssistantRecipientFields, currentEnvelopeItem]);
 
   return (
-    <div className="dark:bg-background min-h-screen w-screen bg-gray-50">
+    <div className="min-h-screen w-screen bg-gray-50 dark:bg-background">
       <SignFieldEmailDialog.Root />
       <SignFieldTextDialog.Root />
       <SignFieldNumberDialog.Root />
@@ -86,9 +86,9 @@ export const DocumentSigningPageViewV2 = () => {
       {/* Main Content Area */}
       <div className="flex h-[calc(100vh-4rem)] w-screen">
         {/* Left Section - Step Navigation */}
-        <div className="embed--DocumentWidgetContainer bg-background border-border hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r py-4 lg:flex">
+        <div className="embed--DocumentWidgetContainer hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-border bg-background py-4 lg:flex">
           <div className="px-4">
-            <h3 className="text-foreground flex items-end justify-between text-sm font-semibold">
+            <h3 className="flex items-end justify-between text-sm font-semibold text-foreground">
               {match(recipient.role)
                 .with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
                 .with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
@@ -96,7 +96,7 @@ export const DocumentSigningPageViewV2 = () => {
                 .with(RecipientRole.ASSISTANT, () => <Trans>Assist Document</Trans>)
                 .otherwise(() => null)}
 
-              <span className="text-muted-foreground bg-muted/50 ml-2 rounded border px-2 py-0.5 text-xs">
+              <span className="ml-2 rounded border bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground">
                 <Plural
                   value={recipientFieldsRemaining.length}
                   one="1 Field Remaining"
@@ -105,11 +105,11 @@ export const DocumentSigningPageViewV2 = () => {
               </span>
             </h3>
 
-            <div className="bg-muted relative my-4 h-[4px] rounded-md">
+            <div className="relative my-4 h-[4px] rounded-md bg-muted">
               <motion.div
                 layout="size"
                 layoutId="document-flow-container-step"
-                className="bg-documenso absolute inset-y-0 left-0"
+                className="absolute inset-y-0 left-0 bg-documenso"
                 style={{
                   width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
                 }}
@@ -126,7 +126,7 @@ export const DocumentSigningPageViewV2 = () => {
           {/* Quick Actions. */}
           {!isDirectTemplate && (
             <div className="embed--Actions space-y-3 px-4">
-              <h4 className="text-foreground text-sm font-semibold">
+              <h4 className="text-sm font-semibold text-foreground">
                 <Trans>Actions</Trans>
               </h4>
 
@@ -173,7 +173,7 @@ export const DocumentSigningPageViewV2 = () => {
                     <Button
                       variant="ghost"
                       size="sm"
-                      className="hover:text-destructive w-full justify-start"
+                      className="w-full justify-start hover:text-destructive"
                     >
                       <BanIcon className="mr-2 h-4 w-4" />
                       <Trans>Reject Document</Trans>
@@ -235,7 +235,7 @@ export const DocumentSigningPageViewV2 = () => {
                 />
               ) : (
                 <div className="flex flex-col items-center justify-center py-32">
-                  <p className="text-foreground text-sm">
+                  <p className="text-sm text-foreground">
                     <Trans>No documents found</Trans>
                   </p>
                 </div>
@@ -250,7 +250,7 @@ export const DocumentSigningPageViewV2 = () => {
                 <a
                   href="https://documenso.com"
                   target="_blank"
-                  className="bg-primary text-primary-foreground fixed bottom-0 right-0 z-40 hidden cursor-pointer rounded-tl px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100 lg:block"
+                  className="fixed bottom-0 right-0 z-40 hidden cursor-pointer rounded-tl bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100 lg:block"
                 >
                   <span>Powered by</span>
                   <BrandingLogo className="ml-2 inline-block h-[14px]" />

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { lazy, useEffect, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { type DocumentData, DocumentStatus, type EnvelopeItem, EnvelopeType } from '@prisma/client';
@@ -21,12 +21,15 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 
 import { EnvelopeRendererFileSelector } from '../envelope-editor/envelope-file-selector';
-import EnvelopeGenericPageRenderer from '../envelope-editor/envelope-generic-page-renderer';
+
+const EnvelopeGenericPageRenderer = lazy(
+  async () => import('~/components/general/envelope-editor/envelope-generic-page-renderer'),
+);
 
 export type DocumentCertificateQRViewProps = {
   documentId: number;
@@ -120,7 +123,7 @@ export const DocumentCertificateQRView = ({
           <div className="flex w-full flex-col justify-between gap-4 md:flex-row md:items-end">
             <div className="space-y-1">
               <h1 className="text-xl font-medium">{title}</h1>
-              <div className="text-muted-foreground flex flex-col gap-0.5 text-sm">
+              <div className="flex flex-col gap-0.5 text-sm text-muted-foreground">
                 <p>
                   <Trans>{recipientCount} recipients</Trans>
                 </p>
@@ -146,7 +149,7 @@ export const DocumentCertificateQRView = ({
           </div>
 
           <div className="mt-12 w-full">
-            <PDFViewer
+            <PDFViewerLazy
               key={envelopeItems[0].id}
               envelopeItem={envelopeItems[0]}
               token={token}
@@ -179,7 +182,7 @@ const DocumentCertificateQrV2 = ({
       <div className="flex w-full flex-col justify-between gap-4 md:flex-row md:items-end">
         <div className="space-y-1">
           <h1 className="text-xl font-medium">{title}</h1>
-          <div className="text-muted-foreground flex flex-col gap-0.5 text-sm">
+          <div className="flex flex-col gap-0.5 text-sm text-muted-foreground">
             <p>
               <Trans>{recipientCount} recipients</Trans>
             </p>

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

@@ -27,7 +27,7 @@ import { AddSubjectFormPartial } from '@documenso/ui/primitives/document-flow/ad
 import type { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -440,7 +440,7 @@ export const DocumentEditForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewer
+          <PDFViewerLazy
             key={document.envelopeItems[0].id}
             envelopeItem={document.envelopeItems[0]}
             token={undefined}

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

@@ -174,18 +174,12 @@ export default function EnvelopeEditorFieldsPageRenderer() {
    * Initialize the Konva page canvas and all fields and interactions.
    */
   const createPageCanvas = (currentStage: Konva.Stage, currentPageLayer: Konva.Layer) => {
-    // Initialize snap guides layer
-    // snapGuideLayer.current = initializeSnapGuides(stage.current);
-
-    // Add transformer for resizing and rotating.
     interactiveTransformer.current = createInteractiveTransformer(currentStage, currentPageLayer);
 
-    // Render the fields.
     for (const field of localPageFields) {
       renderFieldOnLayer(field);
     }
 
-    // Handle stage click to deselect.
     currentStage.on('mousedown', (e) => {
       removePendingField();
 
@@ -270,7 +264,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     let y2: number;
 
     currentStage.on('mousedown touchstart', (e) => {
-      // do nothing if we mousedown on any shape
       if (e.target !== currentStage) {
         return;
       }
@@ -296,7 +289,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     });
 
     currentStage.on('mousemove touchmove', () => {
-      // do nothing if we didn't start selection
       if (!selectionRectangle.visible()) {
         return;
       }
@@ -321,7 +313,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     });
 
     currentStage.on('mouseup touchend', () => {
-      // do nothing if we didn't start selection
       if (!selectionRectangle.visible()) {
         return;
       }
@@ -375,34 +366,25 @@ export default function EnvelopeEditorFieldsPageRenderer() {
         return;
       }
 
-      // If empty area clicked, remove all selections
       if (e.target === stage.current) {
         setSelectedFields([]);
         return;
       }
 
-      // Do nothing if field not clicked, or if field is not editable
       if (!e.target.hasName('field-group') || e.target.draggable() === false) {
         return;
       }
 
-      // do we pressed shift or ctrl?
       const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
       const isSelected = transformer.nodes().indexOf(e.target) >= 0;
 
       if (!metaPressed && !isSelected) {
-        // if no key pressed and the node is not selected
-        // select just one
         setSelectedFields([e.target]);
       } else if (metaPressed && isSelected) {
-        // if we pressed keys and node was selected
-        // we need to remove it from selection:
-        const nodes = transformer.nodes().slice(); // use slice to have new copy of array
-        // remove node from array
+        const nodes = transformer.nodes().slice();
         nodes.splice(nodes.indexOf(e.target), 1);
         setSelectedFields(nodes);
       } else if (metaPressed && !isSelected) {
-        // add the node into selection
         const nodes = transformer.nodes().concat([e.target]);
         setSelectedFields(nodes);
       }
@@ -429,12 +411,10 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       }
     });
 
-    // If it exists, rerender.
     localPageFields.forEach((field) => {
       renderFieldOnLayer(field);
     });
 
-    // Rerender the transformer
     interactiveTransformer.current?.forceUpdate();
 
     pageLayer.current.batchDraw();

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

@@ -1,7 +1,7 @@
-import { lazy, useEffect, useMemo } from 'react';
+import { lazy, useEffect, useMemo, useState } from 'react';
 
 import type { MessageDescriptor } from '@lingui/core';
-import { msg } from '@lingui/core/macro';
+import { msg, plural } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { FieldType, RecipientRole } from '@prisma/client';
 import { FileTextIcon } from 'lucide-react';
@@ -11,6 +11,7 @@ import { match } from 'ts-pattern';
 
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import type { TDetectedFormField } from '@documenso/lib/types/document-analysis';
 import type {
   TCheckboxFieldMeta,
   TDateFieldMeta,
@@ -24,12 +25,14 @@ import type {
   TSignatureFieldMeta,
   TTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
+import { FIELD_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { EditorFieldCheckboxForm } from '~/components/forms/editor/editor-field-checkbox-form';
 import { EditorFieldDateForm } from '~/components/forms/editor/editor-field-date-form';
@@ -47,9 +50,54 @@ import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 import { EnvelopeRecipientSelector } from './envelope-recipient-selector';
 
 const EnvelopeEditorFieldsPageRenderer = lazy(
-  async () => import('./envelope-editor-fields-page-renderer'),
+  async () => import('~/components/general/envelope-editor/envelope-editor-fields-page-renderer'),
 );
 
+const detectFormFieldsInDocument = async (params: {
+  envelopeId: string;
+  onProgress: (current: number, total: number) => void;
+}): Promise<{
+  fieldsPerPage: Map<number, TDetectedFormField[]>;
+  errors: Map<number, Error>;
+}> => {
+  const { envelopeId, onProgress } = params;
+  const fieldsPerPage = new Map<number, TDetectedFormField[]>();
+  const errors = new Map<number, Error>();
+
+  try {
+    onProgress(0, 1);
+
+    const response = await fetch('/api/ai/detect-fields', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ envelopeId }),
+      credentials: 'include',
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Field detection failed: ${response.statusText} - ${errorText}`);
+    }
+
+    const detectedFields: TDetectedFormField[] = await response.json();
+
+    for (const field of detectedFields) {
+      if (!fieldsPerPage.has(field.pageNumber)) {
+        fieldsPerPage.set(field.pageNumber, []);
+      }
+      fieldsPerPage.get(field.pageNumber)!.push(field);
+    }
+
+    onProgress(1, 1);
+  } catch (error) {
+    errors.set(0, error instanceof Error ? error : new Error(String(error)));
+  }
+
+  return { fieldsPerPage, errors };
+};
+
 const FieldSettingsTypeTranslations: Record<FieldType, MessageDescriptor> = {
   [FieldType.SIGNATURE]: msg`Signature Settings`,
   [FieldType.FREE_SIGNATURE]: msg`Free Signature Settings`,
@@ -72,6 +120,14 @@ export const EnvelopeEditorFieldsPage = () => {
   const { currentEnvelopeItem } = useCurrentEnvelopeRender();
 
   const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [isDetectingFields, setIsAutoAddingFields] = useState(false);
+  const [processingProgress, setProcessingProgress] = useState<{
+    current: number;
+    total: number;
+  } | null>(null);
+  const [hasAutoPlacedFields, setHasAutoPlacedFields] = useState(false);
 
   const selectedField = useMemo(
     () => structuredClone(editorFields.selectedField),
@@ -85,20 +141,13 @@ export const EnvelopeEditorFieldsPage = () => {
 
     const isMetaSame = isDeepEqual(selectedField.fieldMeta, fieldMeta);
 
-    // Todo: Envelopes - Clean up console logs.
     if (!isMetaSame) {
-      console.log('TRIGGER UPDATE');
       editorFields.updateFieldByFormId(selectedField.formId, {
         fieldMeta,
       });
-    } else {
-      console.log('DATA IS SAME, NO UPDATE');
     }
   };
 
-  /**
-   * Set the selected recipient to the first recipient in the envelope.
-   */
   useEffect(() => {
     const firstSelectableRecipient = envelope.recipients.find(
       (recipient) =>
@@ -108,10 +157,128 @@ export const EnvelopeEditorFieldsPage = () => {
     editorFields.setSelectedRecipient(firstSelectableRecipient?.id ?? null);
   }, []);
 
+  useEffect(() => {
+    if (hasAutoPlacedFields || !currentEnvelopeItem) {
+      return;
+    }
+
+    const storageKey = `autoPlaceFields_${envelope.id}`;
+    const storedData = sessionStorage.getItem(storageKey);
+
+    if (!storedData) {
+      return;
+    }
+
+    sessionStorage.removeItem(storageKey);
+    setHasAutoPlacedFields(true);
+
+    try {
+      const { fields: detectedFields, recipientCount } = JSON.parse(storedData) as {
+        fields: TDetectedFormField[];
+        recipientCount: number;
+      };
+
+      let totalAdded = 0;
+
+      const fieldsPerPage = new Map<number, TDetectedFormField[]>();
+      for (const field of detectedFields) {
+        if (!fieldsPerPage.has(field.pageNumber)) {
+          fieldsPerPage.set(field.pageNumber, []);
+        }
+        fieldsPerPage.get(field.pageNumber)!.push(field);
+      }
+
+      for (const [pageNumber, fields] of fieldsPerPage.entries()) {
+        for (const detected of fields) {
+          const { ymin, xmin, ymax, xmax } = detected.boundingBox;
+          const positionX = (xmin / 1000) * 100;
+          const positionY = (ymin / 1000) * 100;
+          const width = ((xmax - xmin) / 1000) * 100;
+          const height = ((ymax - ymin) / 1000) * 100;
+
+          const fieldType = detected.label as FieldType;
+          const resolvedRecipientId =
+            envelope.recipients.find((recipient) => recipient.id === detected.recipientId)?.id ??
+            editorFields.selectedRecipient?.id ??
+            envelope.recipients[0]?.id;
+
+          if (!resolvedRecipientId) {
+            console.warn('Skipping detected field because no recipient could be resolved', {
+              detectedRecipientId: detected.recipientId,
+            });
+            continue;
+          }
+
+          try {
+            editorFields.addField({
+              envelopeItemId: currentEnvelopeItem.id,
+              page: pageNumber,
+              type: fieldType,
+              positionX,
+              positionY,
+              width,
+              height,
+              recipientId: resolvedRecipientId,
+              fieldMeta: structuredClone(FIELD_META_DEFAULT_VALUES[fieldType]),
+            });
+            totalAdded++;
+          } catch (error) {
+            console.error(`Failed to add field on page ${pageNumber}:`, error);
+          }
+        }
+      }
+
+      if (totalAdded > 0) {
+        toast({
+          title: t`Recipients and fields added`,
+          description: t`Added ${recipientCount} ${plural(recipientCount, {
+            one: 'recipient',
+            other: 'recipients',
+          })} and ${totalAdded} ${plural(totalAdded, { one: 'field', other: 'fields' })}`,
+          duration: 5000,
+        });
+      } else {
+        toast({
+          title: t`Recipients added`,
+          description: t`Added ${recipientCount} ${plural(recipientCount, {
+            one: 'recipient',
+            other: 'recipients',
+          })}. No fields were detected in the document.`,
+          duration: 5000,
+        });
+      }
+    } catch (error) {
+      console.error('Failed to auto-place fields:', error);
+      toast({
+        title: t`Field placement failed`,
+        description: t`Failed to automatically place fields. You can add them manually.`,
+        variant: 'destructive',
+        duration: 5000,
+      });
+    }
+  }, [
+    currentEnvelopeItem,
+    envelope.id,
+    envelope.recipients,
+    editorFields,
+    hasAutoPlacedFields,
+    t,
+    toast,
+  ]);
+
   return (
     <div className="relative flex h-full">
-      <div className="flex w-full flex-col overflow-y-auto">
+      <div className="relative flex w-full flex-col overflow-y-auto">
         {/* Horizontal envelope item selector */}
+        {isDetectingFields && (
+          <>
+            <div className="edge-glow edge-glow-top pointer-events-none fixed left-0 right-0 top-0 z-20 h-32" />
+            <div className="edge-glow edge-glow-right pointer-events-none fixed bottom-0 right-0 top-0 z-20 w-32" />
+            <div className="edge-glow edge-glow-bottom pointer-events-none fixed bottom-0 left-0 right-0 z-20 h-32" />
+            <div className="edge-glow edge-glow-left pointer-events-none fixed bottom-0 left-0 top-0 z-20 w-32" />
+          </>
+        )}
+
         <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
         {/* Document View */}
@@ -119,7 +286,7 @@ export const EnvelopeEditorFieldsPage = () => {
           {envelope.recipients.length === 0 && (
             <Alert
               variant="neutral"
-              className="border-border bg-background mb-4 flex max-w-[800px] flex-row items-center justify-between space-y-0 rounded-sm border"
+              className="mb-4 flex max-w-[800px] flex-row items-center justify-between space-y-0 rounded-sm border border-border bg-background"
             >
               <div className="flex flex-col gap-1">
                 <AlertTitle>
@@ -145,11 +312,11 @@ export const EnvelopeEditorFieldsPage = () => {
             />
           ) : (
             <div className="flex flex-col items-center justify-center py-32">
-              <FileTextIcon className="text-muted-foreground h-10 w-10" />
-              <p className="text-foreground mt-1 text-sm">
+              <FileTextIcon className="h-10 w-10 text-muted-foreground" />
+              <p className="mt-1 text-sm text-foreground">
                 <Trans>No documents found</Trans>
               </p>
-              <p className="text-muted-foreground mt-1 text-sm">
+              <p className="mt-1 text-sm text-muted-foreground">
                 <Trans>Please upload a document to continue</Trans>
               </p>
             </div>
@@ -159,10 +326,10 @@ export const EnvelopeEditorFieldsPage = () => {
 
       {/* Right Section - Form Fields Panel */}
       {currentEnvelopeItem && envelope.recipients.length > 0 && (
-        <div className="bg-background border-border sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l py-4">
+        <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l border-border bg-background py-4">
           {/* Recipient selector section. */}
           <section className="px-4">
-            <h3 className="text-foreground mb-2 text-sm font-semibold">
+            <h3 className="mb-2 text-sm font-semibold text-foreground">
               <Trans>Selected Recipient</Trans>
             </h3>
 
@@ -194,7 +361,7 @@ export const EnvelopeEditorFieldsPage = () => {
 
           {/* Add fields section. */}
           <section className="px-4">
-            <h3 className="text-foreground mb-2 text-sm font-semibold">
+            <h3 className="mb-2 text-sm font-semibold text-foreground">
               <Trans>Add Fields</Trans>
             </h3>
 
@@ -202,6 +369,129 @@ export const EnvelopeEditorFieldsPage = () => {
               selectedRecipientId={editorFields.selectedRecipient?.id ?? null}
               selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null}
             />
+
+            <Button
+              className="mt-4 w-full"
+              variant="outline"
+              disabled={isDetectingFields}
+              onClick={async () => {
+                setIsAutoAddingFields(true);
+                setProcessingProgress(null);
+
+                try {
+                  if (!currentEnvelopeItem) {
+                    toast({
+                      title: t`No document selected`,
+                      description: t`No document selected. Please reload the page and try again.`,
+                      variant: 'destructive',
+                    });
+                    return;
+                  }
+
+                  if (!currentEnvelopeItem.documentDataId) {
+                    toast({
+                      title: t`Document data missing`,
+                      description: t`Document data not found. Please try reloading the page.`,
+                      variant: 'destructive',
+                    });
+                    return;
+                  }
+
+                  const { fieldsPerPage, errors } = await detectFormFieldsInDocument({
+                    envelopeId: envelope.id,
+                    onProgress: (current, total) => {
+                      setProcessingProgress({ current, total });
+                    },
+                  });
+
+                  let totalAdded = 0;
+                  for (const [pageNumber, detectedFields] of fieldsPerPage.entries()) {
+                    for (const detected of detectedFields) {
+                      const { ymin, xmin, ymax, xmax } = detected.boundingBox;
+                      const positionX = (xmin / 1000) * 100;
+                      const positionY = (ymin / 1000) * 100;
+                      const width = ((xmax - xmin) / 1000) * 100;
+                      const height = ((ymax - ymin) / 1000) * 100;
+
+                      const fieldType = detected.label as FieldType;
+                      const resolvedRecipientId =
+                        envelope.recipients.find(
+                          (recipient) => recipient.id === detected.recipientId,
+                        )?.id ??
+                        editorFields.selectedRecipient?.id ??
+                        envelope.recipients[0]?.id;
+
+                      if (!resolvedRecipientId) {
+                        console.warn(
+                          'Skipping detected field because no recipient could be resolved',
+                          {
+                            detectedRecipientId: detected.recipientId,
+                          },
+                        );
+                        continue;
+                      }
+
+                      try {
+                        editorFields.addField({
+                          envelopeItemId: currentEnvelopeItem.id,
+                          page: pageNumber,
+                          type: fieldType,
+                          positionX,
+                          positionY,
+                          width,
+                          height,
+                          recipientId: resolvedRecipientId,
+                          fieldMeta: structuredClone(FIELD_META_DEFAULT_VALUES[fieldType]),
+                        });
+                        totalAdded++;
+                      } catch (error) {
+                        console.error(`Failed to add field on page ${pageNumber}:`, error);
+                      }
+                    }
+                  }
+
+                  const successfulPages = fieldsPerPage.size;
+                  const failedPages = errors.size;
+
+                  if (totalAdded > 0) {
+                    let description = t`Added ${totalAdded} fields`;
+                    if (fieldsPerPage.size > 1) {
+                      description = t`Added ${totalAdded} fields across ${successfulPages} pages`;
+                    }
+                    if (failedPages > 0) {
+                      description = t`Added ${totalAdded} fields across ${successfulPages} pages. ${failedPages} pages failed.`;
+                    }
+
+                    toast({
+                      title: t`Fields added`,
+                      description,
+                    });
+                  } else if (failedPages > 0) {
+                    toast({
+                      title: t`Field detection failed`,
+                      description: t`Failed to detect fields on ${failedPages} pages. Please try again.`,
+                      variant: 'destructive',
+                    });
+                  } else {
+                    toast({
+                      title: t`No fields detected`,
+                      description: t`No fields were detected in the document`,
+                    });
+                  }
+                } catch (error) {
+                  toast({
+                    title: t`Processing error`,
+                    description: t`An unexpected error occurred while processing pages.`,
+                    variant: 'destructive',
+                  });
+                } finally {
+                  setIsAutoAddingFields(false);
+                  setProcessingProgress(null);
+                }
+              }}
+            >
+              {isDetectingFields ? <Trans>Processing...</Trans> : <Trans>Auto add fields</Trans>}
+            </Button>
           </section>
 
           {/* Field details section. */}
@@ -213,25 +503,25 @@ export const EnvelopeEditorFieldsPage = () => {
                 {searchParams.get('devmode') && (
                   <>
                     <div className="px-4">
-                      <h3 className="text-foreground mb-3 text-sm font-semibold">
+                      <h3 className="mb-3 text-sm font-semibold text-foreground">
                         <Trans>Developer Mode</Trans>
                       </h3>
 
-                      <div className="bg-muted/50 border-border text-foreground space-y-2 rounded-md border p-3 text-sm">
+                      <div className="space-y-2 rounded-md border border-border bg-muted/50 p-3 text-sm text-foreground">
                         <p>
-                          <span className="text-muted-foreground min-w-12">Pos X:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">Pos X:&nbsp;</span>
                           {selectedField.positionX.toFixed(2)}
                         </p>
                         <p>
-                          <span className="text-muted-foreground min-w-12">Pos Y:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">Pos Y:&nbsp;</span>
                           {selectedField.positionY.toFixed(2)}
                         </p>
                         <p>
-                          <span className="text-muted-foreground min-w-12">Width:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">Width:&nbsp;</span>
                           {selectedField.width.toFixed(2)}
                         </p>
                         <p>
-                          <span className="text-muted-foreground min-w-12">Height:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">Height:&nbsp;</span>
                           {selectedField.height.toFixed(2)}
                         </p>
                       </div>
@@ -241,7 +531,7 @@ export const EnvelopeEditorFieldsPage = () => {
                   </>
                 )}
 
-                <div className="[&_label]:text-foreground/70 px-4 [&_label]:text-xs">
+                <div className="px-4 [&_label]:text-xs [&_label]:text-foreground/70">
                   <h3 className="text-sm font-semibold">
                     {t(FieldSettingsTypeTranslations[selectedField.type])}
                   </h3>

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

@@ -23,7 +23,9 @@ import { Separator } from '@documenso/ui/primitives/separator';
 
 import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 
-const EnvelopeGenericPageRenderer = lazy(async () => import('./envelope-generic-page-renderer'));
+const EnvelopeGenericPageRenderer = lazy(
+  async () => import('~/components/general/envelope-editor/envelope-generic-page-renderer'),
+);
 
 // Todo: Envelopes - Dynamically import faker
 export const EnvelopeEditorPreviewPage = () => {
@@ -232,11 +234,11 @@ export const EnvelopeEditorPreviewPage = () => {
               />
             ) : (
               <div className="flex flex-col items-center justify-center py-32">
-                <FileTextIcon className="text-muted-foreground h-10 w-10" />
-                <p className="text-foreground mt-1 text-sm">
+                <FileTextIcon className="h-10 w-10 text-muted-foreground" />
+                <p className="mt-1 text-sm text-foreground">
                   <Trans>No documents found</Trans>
                 </p>
-                <p className="text-muted-foreground mt-1 text-sm">
+                <p className="mt-1 text-sm text-muted-foreground">
                   <Trans>Please upload a document to continue</Trans>
                 </p>
               </div>

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

@@ -1,12 +1,11 @@
 import { useMemo, useState } from 'react';
 
-import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import type { DropResult } from '@hello-pangea/dnd';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { DocumentStatus } from '@prisma/client';
-import { FileWarningIcon, GripVerticalIcon, Loader2 } from 'lucide-react';
-import { X } from 'lucide-react';
+import { FileWarningIcon, GripVerticalIcon, Loader2, X } from 'lucide-react';
 import { ErrorCode as DropzoneErrorCode, type FileRejection } from 'react-dropzone';
 import { Link } from 'react-router';
 
@@ -174,7 +173,6 @@ export const EnvelopeEditorUploadPage = () => {
       fields: envelope.fields.filter((field) => field.envelopeItemId !== envelopeItemId),
     });
 
-    // Reset editor fields.
     editorFields.resetForm(fieldsWithoutDeletedItem);
   };
 

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

@@ -171,7 +171,7 @@ export default function EnvelopeSignerPageRenderer() {
 
     const handleFieldGroupClick = (e: KonvaEventObject<Event>) => {
       const currentTarget = e.currentTarget as Konva.Group;
-      const target = e.target;
+      const target = e.target as Konva.Shape;
 
       const { width: fieldWidth, height: fieldHeight } = fieldGroup.getClientRect();
 

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

@@ -57,17 +57,24 @@ export const EnvelopeSignerCompleteDialog = () => {
       return;
     }
 
-    if (nextField.envelopeItemId !== currentEnvelopeItem?.id) {
+    const isEnvelopeItemSwitch = nextField.envelopeItemId !== currentEnvelopeItem?.id;
+
+    if (isEnvelopeItemSwitch) {
       setCurrentEnvelopeItem(nextField.envelopeItemId);
     }
 
-    const fieldTooltip = document.querySelector(`#field-tooltip`);
-
-    if (fieldTooltip) {
-      fieldTooltip.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-
     setShowPendingFieldTooltip(true);
+
+    setTimeout(
+      () => {
+        const fieldTooltip = document.querySelector(`#field-tooltip`);
+
+        if (fieldTooltip) {
+          fieldTooltip.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      },
+      isEnvelopeItemSwitch ? 150 : 50,
+    );
   };
 
   const handleOnCompleteClick = async (

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

@@ -1,7 +1,7 @@
 import { type ReactNode, useState } from 'react';
 
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
+import { plural } from '@lingui/core/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
 import { Loader } from 'lucide-react';
 import {
@@ -27,7 +27,13 @@ import type { TCreateEnvelopePayload } from '@documenso/trpc/server/envelope-rou
 import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { RecipientDetectionPromptDialog } from '~/components/dialogs/recipient-detection-prompt-dialog';
 import { useCurrentTeam } from '~/providers/team';
+import {
+  type RecipientForCreation,
+  detectRecipientsInDocument,
+  ensureRecipientEmails,
+} from '~/utils/detect-document-recipients';
 
 export interface EnvelopeDropZoneWrapperProps {
   children: ReactNode;
@@ -52,6 +58,10 @@ export const EnvelopeDropZoneWrapper = ({
   const organisation = useCurrentOrganisation();
 
   const [isLoading, setIsLoading] = useState(false);
+  const [showExtractionPrompt, setShowExtractionPrompt] = useState(false);
+  const [uploadedDocumentId, setUploadedDocumentId] = useState<string | null>(null);
+  const [pendingRecipients, setPendingRecipients] = useState<RecipientForCreation[] | null>(null);
+  const [shouldNavigateAfterPromptClose, setShouldNavigateAfterPromptClose] = useState(true);
 
   const userTimezone =
     TIME_ZONES.find((timezone) => timezone === Intl.DateTimeFormat().resolvedOptions().timeZone) ??
@@ -60,6 +70,7 @@ export const EnvelopeDropZoneWrapper = ({
   const { quota, remaining, refreshLimits, maximumEnvelopeItemCount } = useLimits();
 
   const { mutateAsync: createEnvelope } = trpc.envelope.create.useMutation();
+  const { mutateAsync: createRecipients } = trpc.envelope.recipient.createMany.useMutation();
 
   const isUploadDisabled = remaining.documents === 0 || !user.emailVerified;
 
@@ -108,14 +119,15 @@ export const EnvelopeDropZoneWrapper = ({
           documentId: id,
           timestamp: new Date().toISOString(),
         });
+
+        setUploadedDocumentId(id);
+        setPendingRecipients(null);
+        setShouldNavigateAfterPromptClose(true);
+        setShowExtractionPrompt(true);
+      } else {
+        const pathPrefix = formatTemplatesPath(team.url);
+        await navigate(`${pathPrefix}/${id}/edit`);
       }
-
-      const pathPrefix =
-        type === EnvelopeType.DOCUMENT
-          ? formatDocumentsPath(team.url)
-          : formatTemplatesPath(team.url);
-
-      await navigate(`${pathPrefix}/${id}/edit`);
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -132,7 +144,7 @@ export const EnvelopeDropZoneWrapper = ({
         .otherwise(() => t`An error occurred during upload.`);
 
       toast({
-        title: t`Error`,
+        title: t`Upload failed`,
         description: errorMessage,
         variant: 'destructive',
         duration: 7500,
@@ -161,7 +173,6 @@ export const EnvelopeDropZoneWrapper = ({
       return;
     }
 
-    // Since users can only upload only one file (no multi-upload), we only handle the first file rejection
     const { file, errors } = fileRejections[0];
 
     if (!errors.length) {
@@ -201,6 +212,116 @@ export const EnvelopeDropZoneWrapper = ({
       variant: 'destructive',
     });
   };
+
+  const navigateToEnvelopeEditor = () => {
+    if (!uploadedDocumentId) {
+      return;
+    }
+
+    const pathPrefix = formatDocumentsPath(team.url);
+    void navigate(`${pathPrefix}/${uploadedDocumentId}/edit`);
+  };
+
+  const handleStartRecipientDetection = async () => {
+    if (!uploadedDocumentId) {
+      return;
+    }
+
+    try {
+      const recipients = await detectRecipientsInDocument(uploadedDocumentId);
+
+      if (recipients.length === 0) {
+        toast({
+          title: t`No recipients detected`,
+          description: t`You can add recipients manually in the editor`,
+          duration: 5000,
+        });
+
+        setShouldNavigateAfterPromptClose(true);
+        setShowExtractionPrompt(false);
+        navigateToEnvelopeEditor();
+        return;
+      }
+
+      const recipientsWithEmails = ensureRecipientEmails(recipients, uploadedDocumentId);
+
+      setPendingRecipients(recipientsWithEmails);
+      setShouldNavigateAfterPromptClose(false);
+    } catch (error) {
+      if (!(error instanceof Error && error.message === 'NO_RECIPIENTS_DETECTED')) {
+        const parsedError = AppError.parseError(error);
+
+        toast({
+          title: t`Failed to detect recipients`,
+          description: parsedError.userMessage || t`You can add recipients manually in the editor`,
+          variant: 'destructive',
+          duration: 7500,
+        });
+      }
+
+      throw error;
+    }
+  };
+
+  const handleSkipRecipientDetection = () => {
+    setShouldNavigateAfterPromptClose(true);
+    setShowExtractionPrompt(false);
+    navigateToEnvelopeEditor();
+  };
+
+  const handleRecipientsConfirm = async (recipientsToCreate: RecipientForCreation[]) => {
+    if (!uploadedDocumentId) {
+      return;
+    }
+
+    try {
+      await createRecipients({
+        envelopeId: uploadedDocumentId,
+        data: recipientsToCreate,
+      });
+
+      toast({
+        title: t`Recipients added`,
+        description: t`Successfully detected ${recipientsToCreate.length} ${plural(
+          recipientsToCreate.length,
+          {
+            one: 'recipient',
+            other: 'recipients',
+          },
+        )}`,
+        duration: 5000,
+      });
+
+      setShowExtractionPrompt(false);
+      setPendingRecipients(null);
+      navigateToEnvelopeEditor();
+    } catch (error) {
+      const parsedError = AppError.parseError(error);
+
+      toast({
+        title: t`Failed to add recipients`,
+        description: parsedError.userMessage || t`Please review the recipients and try again`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+
+      throw error;
+    }
+  };
+
+  const handlePromptDialogOpenChange = (open: boolean) => {
+    setShowExtractionPrompt(open);
+
+    if (open) {
+      setShouldNavigateAfterPromptClose(true);
+      return;
+    }
+
+    if (!open && shouldNavigateAfterPromptClose) {
+      navigateToEnvelopeEditor();
+    }
+  };
+
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept: {
       'application/pdf': ['.pdf'],
@@ -267,6 +388,15 @@ export const EnvelopeDropZoneWrapper = ({
           </div>
         </div>
       )}
+
+      <RecipientDetectionPromptDialog
+        open={showExtractionPrompt}
+        onOpenChange={handlePromptDialogOpenChange}
+        onAccept={handleStartRecipientDetection}
+        onSkip={handleSkipRecipientDetection}
+        recipients={pendingRecipients}
+        onRecipientsSubmit={handleRecipientsConfirm}
+      />
     </div>
   );
 };

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

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 
-import { msg } from '@lingui/core/macro';
+import { msg, plural } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
@@ -27,7 +27,14 @@ import {
 } from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { RecipientDetectionPromptDialog } from '~/components/dialogs/recipient-detection-prompt-dialog';
 import { useCurrentTeam } from '~/providers/team';
+import { detectFieldsInDocument } from '~/utils/detect-document-fields';
+import {
+  type RecipientForCreation,
+  detectRecipientsInDocument,
+  ensureRecipientEmails,
+} from '~/utils/detect-document-recipients';
 
 export type EnvelopeUploadButtonProps = {
   className?: string;
@@ -35,9 +42,6 @@ export type EnvelopeUploadButtonProps = {
   folderId?: string;
 };
 
-/**
- * Upload an envelope
- */
 export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUploadButtonProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
@@ -55,8 +59,14 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
   const { quota, remaining, refreshLimits, maximumEnvelopeItemCount } = useLimits();
 
   const [isLoading, setIsLoading] = useState(false);
+  const [showExtractionPrompt, setShowExtractionPrompt] = useState(false);
+  const [uploadedDocumentId, setUploadedDocumentId] = useState<string | null>(null);
+  const [pendingRecipients, setPendingRecipients] = useState<RecipientForCreation[] | null>(null);
+  const [shouldNavigateAfterPromptClose, setShouldNavigateAfterPromptClose] = useState(true);
+  const [isAutoAddingFields, setIsAutoAddingFields] = useState(false);
 
   const { mutateAsync: createEnvelope } = trpc.envelope.create.useMutation();
+  const { mutateAsync: createRecipients } = trpc.envelope.recipient.createMany.useMutation();
 
   const disabledMessage = useMemo(() => {
     if (organisation.subscription && remaining.documents === 0) {
@@ -108,16 +118,26 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
           ? formatDocumentsPath(team.url)
           : formatTemplatesPath(team.url);
 
-      await navigate(`${pathPrefix}/${id}/edit`);
+      if (type === EnvelopeType.DOCUMENT) {
+        setUploadedDocumentId(id);
+        setPendingRecipients(null);
+        setShouldNavigateAfterPromptClose(true);
+        setShowExtractionPrompt(true);
 
-      toast({
-        title: type === EnvelopeType.DOCUMENT ? t`Document uploaded` : t`Template uploaded`,
-        description:
-          type === EnvelopeType.DOCUMENT
-            ? t`Your document has been uploaded successfully.`
-            : t`Your template has been uploaded successfully.`,
-        duration: 5000,
-      });
+        toast({
+          title: t`Document uploaded`,
+          description: t`Your document has been uploaded successfully.`,
+          duration: 5000,
+        });
+      } else {
+        await navigate(`${pathPrefix}/${id}/edit`);
+
+        toast({
+          title: t`Template uploaded`,
+          description: t`Your template has been uploaded successfully.`,
+          duration: 5000,
+        });
+      }
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -136,7 +156,7 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
         .otherwise(() => t`An error occurred while uploading your document.`);
 
       toast({
-        title: t`Error`,
+        title: t`Upload failed`,
         description: errorMessage,
         variant: 'destructive',
         duration: 7500,
@@ -169,6 +189,181 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
     });
   };
 
+  const navigateToEnvelopeEditor = () => {
+    if (!uploadedDocumentId) {
+      return;
+    }
+
+    const pathPrefix = formatDocumentsPath(team.url);
+    void navigate(`${pathPrefix}/${uploadedDocumentId}/edit`);
+  };
+
+  const handleStartRecipientDetection = async () => {
+    if (!uploadedDocumentId) {
+      return;
+    }
+
+    try {
+      const recipients = await detectRecipientsInDocument(uploadedDocumentId);
+
+      if (recipients.length === 0) {
+        toast({
+          title: t`No recipients detected`,
+          description: t`You can add recipients manually in the editor`,
+          duration: 5000,
+        });
+
+        setShouldNavigateAfterPromptClose(true);
+        setShowExtractionPrompt(false);
+        navigateToEnvelopeEditor();
+        return;
+      }
+
+      const recipientsWithEmails = ensureRecipientEmails(recipients, uploadedDocumentId);
+
+      setPendingRecipients(recipientsWithEmails);
+      setShouldNavigateAfterPromptClose(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      // Only show toast if this wasn't a "no recipients found" case
+      if (error.code !== 'NO_RECIPIENTS_DETECTED') {
+        toast({
+          title: t`Failed to analyze recipients`,
+          description: error.userMessage || t`You can add recipients manually in the editor`,
+          variant: 'destructive',
+          duration: 7500,
+        });
+      }
+
+      throw error;
+    }
+  };
+
+  const handleSkipRecipientDetection = () => {
+    setShouldNavigateAfterPromptClose(true);
+    setShowExtractionPrompt(false);
+    navigateToEnvelopeEditor();
+  };
+
+  const handleRecipientsConfirm = async (recipientsToCreate: RecipientForCreation[]) => {
+    if (!uploadedDocumentId) {
+      return;
+    }
+
+    try {
+      await createRecipients({
+        envelopeId: uploadedDocumentId,
+        data: recipientsToCreate,
+      });
+
+      toast({
+        title: t`Recipients added`,
+        description: t`Successfully detected ${recipientsToCreate.length} ${plural(
+          recipientsToCreate.length,
+          {
+            one: 'recipient',
+            other: 'recipients',
+          },
+        )}`,
+        duration: 5000,
+      });
+
+      setShowExtractionPrompt(false);
+      setPendingRecipients(null);
+      navigateToEnvelopeEditor();
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      toast({
+        title: t`Failed to add recipients`,
+        description: error.userMessage || t`Please review the recipients and try again`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+
+      // Error is handled, dialog stays open for retry
+    }
+  };
+
+  const handleAutoAddFields = async (recipientsToCreate: RecipientForCreation[]) => {
+    if (!uploadedDocumentId) {
+      return;
+    }
+
+    setIsAutoAddingFields(true);
+
+    try {
+      await createRecipients({
+        envelopeId: uploadedDocumentId,
+        data: recipientsToCreate,
+      });
+
+      let detectedFields;
+      try {
+        detectedFields = await detectFieldsInDocument(uploadedDocumentId);
+      } catch (error) {
+        console.error('Field detection failed:', error);
+
+        toast({
+          title: t`Field detection failed`,
+          description: t`Recipients added successfully, but field detection encountered an error. You can add fields manually.`,
+          variant: 'destructive',
+          duration: 7500,
+        });
+
+        setShowExtractionPrompt(false);
+        setPendingRecipients(null);
+        setIsAutoAddingFields(false);
+
+        const pathPrefix = formatDocumentsPath(team.url);
+        void navigate(`${pathPrefix}/${uploadedDocumentId}/edit?step=addFields`);
+        return;
+      }
+
+      if (detectedFields.length > 0) {
+        sessionStorage.setItem(
+          `autoPlaceFields_${uploadedDocumentId}`,
+          JSON.stringify({
+            fields: detectedFields,
+            recipientCount: recipientsToCreate.length,
+          }),
+        );
+      }
+
+      setShowExtractionPrompt(false);
+      setPendingRecipients(null);
+      setIsAutoAddingFields(false);
+
+      const pathPrefix = formatDocumentsPath(team.url);
+      void navigate(`${pathPrefix}/${uploadedDocumentId}/edit?step=addFields`);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      toast({
+        title: t`Failed to add recipients`,
+        description: error.userMessage || t`Please try again`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+
+      setIsAutoAddingFields(false);
+    }
+  };
+
+  const handlePromptDialogOpenChange = (open: boolean) => {
+    setShowExtractionPrompt(open);
+
+    if (open) {
+      setShouldNavigateAfterPromptClose(true);
+      return;
+    }
+
+    if (!open && shouldNavigateAfterPromptClose) {
+      navigateToEnvelopeEditor();
+    }
+  };
+
   return (
     <div className={cn('relative', className)}>
       <TooltipProvider>
@@ -201,6 +396,17 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
             )}
         </Tooltip>
       </TooltipProvider>
+
+      <RecipientDetectionPromptDialog
+        open={showExtractionPrompt}
+        onOpenChange={handlePromptDialogOpenChange}
+        onAccept={handleStartRecipientDetection}
+        onSkip={handleSkipRecipientDetection}
+        recipients={pendingRecipients}
+        onRecipientsSubmit={handleRecipientsConfirm}
+        onAutoAddFields={handleAutoAddFields}
+        isProcessingRecipients={isAutoAddingFields}
+      />
     </div>
   );
 };

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

@@ -18,7 +18,7 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { AddTemplateFieldsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-fields';
 import type { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
@@ -312,7 +312,7 @@ export const TemplateEditForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewer
+          <PDFViewerLazy
             key={template.envelopeItems[0].id}
             envelopeItem={template.envelopeItems[0]}
             token={undefined}

apps/remix/app/components/general/webhook-logs-sheet.tsx

@@ -0,0 +1,198 @@
+import { useMemo, useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+import { WebhookCallStatus } from '@prisma/client';
+import { RotateCwIcon } from 'lucide-react';
+import { createCallable } from 'react-call';
+
+import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
+import { trpc } from '@documenso/trpc/react';
+import type { TFindWebhookCallsResponse } from '@documenso/trpc/server/webhook-router/find-webhook-calls.types';
+import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Sheet, SheetContent, SheetTitle } from '@documenso/ui/primitives/sheet';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type WebhookLogsSheetProps = {
+  webhookCall: TFindWebhookCallsResponse['data'][number];
+};
+
+export const WebhookLogsSheet = createCallable<WebhookLogsSheetProps, string | null>(
+  ({ call, webhookCall: initialWebhookCall }) => {
+    const { t } = useLingui();
+    const { toast } = useToast();
+
+    const [webhookCall, setWebhookCall] = useState(initialWebhookCall);
+
+    const [activeTab, setActiveTab] = useState<'request' | 'response'>('request');
+
+    const { mutateAsync: resendWebhookCall, isPending: isResending } =
+      trpc.webhook.calls.resend.useMutation({
+        onSuccess: (result) => {
+          toast({ title: t`Webhook successfully sent` });
+
+          setWebhookCall(result);
+        },
+        onError: () => {
+          toast({ title: t`Something went wrong` });
+        },
+      });
+
+    const generalWebhookDetails = useMemo(() => {
+      return [
+        {
+          header: t`Status`,
+          value: webhookCall.status === WebhookCallStatus.SUCCESS ? t`Success` : t`Failed`,
+        },
+        {
+          header: t`Event`,
+          value: toFriendlyWebhookEventName(webhookCall.event),
+        },
+        {
+          header: t`Sent`,
+          value: new Date(webhookCall.createdAt).toLocaleString(),
+        },
+        {
+          header: t`Response Code`,
+          value: webhookCall.responseCode,
+        },
+        {
+          header: t`Destination`,
+          value: webhookCall.url,
+        },
+      ];
+    }, [webhookCall]);
+
+    return (
+      <Sheet open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <SheetContent position="right" size="lg" className="max-w-2xl overflow-y-auto">
+          <SheetTitle>
+            <h2 className="text-lg font-semibold">
+              <Trans>Webhook Details</Trans>
+            </h2>
+            <p className="text-muted-foreground font-mono text-xs">{webhookCall.id}</p>
+          </SheetTitle>
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto">
+            <div className="mt-6">
+              <div className="flex items-end justify-between">
+                <h4 className="text-muted-foreground mb-3 text-xs font-semibold uppercase tracking-wider">
+                  <Trans>Details</Trans>
+                </h4>
+
+                <Button
+                  onClick={() =>
+                    resendWebhookCall({
+                      webhookId: webhookCall.webhookId,
+                      webhookCallId: webhookCall.id,
+                    })
+                  }
+                  tabIndex={-1}
+                  loading={isResending}
+                  size="sm"
+                  className="mb-2"
+                >
+                  {!isResending && <RotateCwIcon className="mr-2 h-3.5 w-3.5" />}
+                  <Trans>Resend</Trans>
+                </Button>
+              </div>
+              <div className="border-border overflow-hidden rounded-lg border">
+                <table className="w-full text-left text-sm">
+                  <tbody className="divide-border bg-muted/30 divide-y">
+                    {generalWebhookDetails.map(({ header, value }, index) => (
+                      <tr key={index}>
+                        <td className="text-muted-foreground border-border w-1/3 border-r px-4 py-2 font-mono text-xs">
+                          {header}
+                        </td>
+                        <td className="text-foreground break-all px-4 py-2 font-mono text-xs">
+                          {value}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            {/* Payload Tabs */}
+            <div className="py-6">
+              <div className="border-border mb-4 flex items-center gap-4 border-b">
+                <button
+                  onClick={() => setActiveTab('request')}
+                  className={cn(
+                    'relative pb-2 text-sm font-medium transition-colors',
+                    activeTab === 'request'
+                      ? 'text-foreground after:bg-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5'
+                      : 'text-muted-foreground hover:text-foreground',
+                  )}
+                >
+                  <Trans>Request</Trans>
+                </button>
+
+                <button
+                  onClick={() => setActiveTab('response')}
+                  className={cn(
+                    'relative pb-2 text-sm font-medium transition-colors',
+                    activeTab === 'response'
+                      ? 'text-foreground after:bg-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5'
+                      : 'text-muted-foreground hover:text-foreground',
+                  )}
+                >
+                  <Trans>Response</Trans>
+                </button>
+              </div>
+
+              <div className="group relative">
+                <div className="absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100">
+                  <CopyTextButton
+                    value={JSON.stringify(
+                      activeTab === 'request' ? webhookCall.requestBody : webhookCall.responseBody,
+                      null,
+                      2,
+                    )}
+                    onCopySuccess={() => toast({ title: t`Copied to clipboard` })}
+                  />
+                </div>
+                <pre className="bg-muted/50 border-border text-foreground overflow-x-auto rounded-lg border p-4 font-mono text-xs leading-relaxed">
+                  {JSON.stringify(
+                    activeTab === 'request' ? webhookCall.requestBody : webhookCall.responseBody,
+                    null,
+                    2,
+                  )}
+                </pre>
+              </div>
+
+              {activeTab === 'response' && (
+                <div className="mt-6">
+                  <h4 className="text-muted-foreground mb-3 text-xs font-semibold uppercase tracking-wider">
+                    <Trans>Response Headers</Trans>
+                  </h4>
+                  <div className="border-border overflow-hidden rounded-lg border">
+                    <table className="w-full text-left text-sm">
+                      <tbody className="divide-border bg-muted/30 divide-y">
+                        {Object.entries(webhookCall.responseHeaders as Record<string, string>).map(
+                          ([key, value]) => (
+                            <tr key={key}>
+                              <td className="text-muted-foreground border-border w-1/3 border-r px-4 py-2 font-mono text-xs">
+                                {key}
+                              </td>
+                              <td className="text-foreground break-all px-4 py-2 font-mono text-xs">
+                                {value as string}
+                              </td>
+                            </tr>
+                          ),
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+  },
+);

apps/remix/app/root.tsx

@@ -1,6 +1,3 @@
-import { useEffect } from 'react';
-
-import Plausible from 'plausible-tracker';
 import {
   Links,
   Meta,
@@ -17,7 +14,7 @@ import { PreventFlashOnWrongTheme, ThemeProvider, useTheme } from 'remix-themes'
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
 import { SessionProvider } from '@documenso/lib/client-only/providers/session';
 import { APP_I18N_OPTIONS, type SupportedLanguageCodes } from '@documenso/lib/constants/i18n';
-import { createPublicEnv, env } from '@documenso/lib/utils/env';
+import { createPublicEnv } from '@documenso/lib/utils/env';
 import { extractLocaleData } from '@documenso/lib/utils/i18n';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { getOrganisationSession } from '@documenso/trpc/server/organisation-router/get-organisation-session';
@@ -31,11 +28,6 @@ import { langCookie } from './storage/lang-cookie.server';
 import { themeSessionResolver } from './storage/theme-session.server';
 import { appMetaTags } from './utils/meta';
 
-const { trackPageview } = Plausible({
-  domain: 'documenso.com',
-  trackLocalhost: false,
-});
-
 export const links: Route.LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }];
 
 export function meta() {
@@ -92,12 +84,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
   const location = useLocation();
 
-  useEffect(() => {
-    if (env('NODE_ENV') === 'production') {
-      trackPageview();
-    }
-  }, [location.pathname]);
-
   return (
     <ThemeProvider specifiedTheme={theme} themeAction="/api/theme">
       <LayoutContent>{children}</LayoutContent>

apps/remix/app/routes/_authenticated+/admin+/organisation-insights.$id.tsx

@@ -1,6 +1,10 @@
+import { Trans } from '@lingui/react/macro';
+import { Link } from 'react-router';
+
 import { getOrganisationDetailedInsights } from '@documenso/lib/server-only/admin/get-organisation-detailed-insights';
 import type { DateRange } from '@documenso/lib/types/search-params';
 import { getAdminOrganisation } from '@documenso/trpc/server/admin-router/get-admin-organisation';
+import { Button } from '@documenso/ui/primitives/button';
 
 import { OrganisationInsightsTable } from '~/components/tables/organisation-insights-table';
 
@@ -38,12 +42,17 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 }
 
 export default function OrganisationInsights({ loaderData }: Route.ComponentProps) {
-  const { insights, page, perPage, dateRange, view, organisationName } = loaderData;
+  const { insights, page, perPage, dateRange, view, organisationName, organisationId } = loaderData;
 
   return (
     <div>
       <div className="flex items-center justify-between">
         <h2 className="text-4xl font-semibold">{organisationName}</h2>
+        <Button variant="outline" asChild>
+          <Link to={`/admin/organisations/${organisationId}`}>
+            <Trans>Manage organisation</Trans>
+          </Link>
+        </Button>
       </div>
       <div className="mt-8">
         <OrganisationInsightsTable

apps/remix/app/routes/_authenticated+/admin+/organisation-insights._index.tsx

@@ -44,7 +44,7 @@ export async function loader({ request }: Route.LoaderArgs) {
   const typedOrganisations: OrganisationOverview[] = organisations.map((item) => ({
     id: String(item.id),
     name: item.name || '',
-    signingVolume: item.signingVolume,
+    signingVolume: item.signingVolume || 0,
     createdAt: item.createdAt || new Date(),
     customerId: item.customerId || '',
     subscriptionStatus: item.subscriptionStatus,

apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx

@@ -162,7 +162,13 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen
       <SettingsHeader
         title={t`Manage organisation`}
         subtitle={t`Manage the ${organisation.name} organisation`}
-      />
+      >
+        <Button variant="outline" asChild>
+          <Link to={`/admin/organisation-insights/${organisationId}`}>
+            <Trans>View insights</Trans>
+          </Link>
+        </Button>
+      </SettingsHeader>
 
       <GenericOrganisationAdminForm organisation={organisation} />
 

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/webhooks.$id._index.tsx

@@ -1,4 +1,4 @@
-import WebhookPage, { meta } from '../../t.$teamUrl+/settings.webhooks.$id';
+import WebhookPage, { meta } from '../../t.$teamUrl+/settings.webhooks.$id._index';
 
 export { meta };
 

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

@@ -1,3 +1,5 @@
+import { lazy } from 'react';
+
 import { msg } from '@lingui/core/macro';
 import { Plural, Trans, useLingui } from '@lingui/react/macro';
 import { DocumentStatus } from '@prisma/client';
@@ -19,7 +21,7 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { Spinner } from '@documenso/ui/primitives/spinner';
 
 import { DocumentPageViewButton } from '~/components/general/document/document-page-view-button';
@@ -33,13 +35,16 @@ import {
   FRIENDLY_STATUS_MAP,
 } from '~/components/general/document/document-status';
 import { EnvelopeRendererFileSelector } from '~/components/general/envelope-editor/envelope-file-selector';
-import EnvelopeGenericPageRenderer from '~/components/general/envelope-editor/envelope-generic-page-renderer';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
 import { useCurrentTeam } from '~/providers/team';
 
 import type { Route } from './+types/documents.$id._index';
 
+const EnvelopeGenericPageRenderer = lazy(
+  async () => import('~/components/general/envelope-editor/envelope-generic-page-renderer'),
+);
+
 export default function DocumentPage({ params }: Route.ComponentProps) {
   const { t } = useLingui();
   const { user } = useSession();
@@ -56,7 +61,7 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
 
   if (isLoadingEnvelope) {
     return (
-      <div className="text-foreground flex w-screen flex-col items-center justify-center gap-2 py-64">
+      <div className="flex w-screen flex-col items-center justify-center gap-2 py-64 text-foreground">
         <Spinner />
         <Trans>Loading</Trans>
       </div>
@@ -117,7 +122,7 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
             />
 
             {envelope.recipients.length > 0 && (
-              <div className="text-muted-foreground flex items-center">
+              <div className="flex items-center text-muted-foreground">
                 <Users2 className="mr-2 h-5 w-5" />
 
                 <StackAvatarsWithTooltip
@@ -188,7 +193,7 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
                 />
               )}
 
-              <PDFViewer
+              <PDFViewerLazy
                 envelopeItem={envelope.envelopeItems[0]}
                 token={undefined}
                 key={envelope.envelopeItems[0].id}
@@ -202,16 +207,16 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
           className={cn('col-span-12 lg:col-span-6 xl:col-span-5', isMultiEnvelopeItem && 'mt-20')}
         >
           <div className="space-y-6">
-            <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
+            <section className="flex flex-col rounded-xl border border-border bg-widget pb-4 pt-6">
               <div className="flex flex-row items-center justify-between px-4">
-                <h3 className="text-foreground text-2xl font-semibold">
+                <h3 className="text-2xl font-semibold text-foreground">
                   {t(FRIENDLY_STATUS_MAP[envelope.status].labelExtended)}
                 </h3>
 
                 <DocumentPageViewDropdown envelope={envelope} />
               </div>
 
-              <p className="text-muted-foreground mt-2 px-4 text-sm">
+              <p className="mt-2 px-4 text-sm text-muted-foreground">
                 {match(envelope.status)
                   .with(DocumentStatus.COMPLETED, () => (
                     <Trans>This document has been signed by all recipients</Trans>

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

@@ -0,0 +1,392 @@
+import { useMemo, useState } from 'react';
+import { useEffect } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { WebhookCallStatus, WebhookTriggerEvents } from '@prisma/client';
+import {
+  CheckCircle2Icon,
+  ChevronRightIcon,
+  PencilIcon,
+  TerminalIcon,
+  XCircleIcon,
+} from 'lucide-react';
+import { useNavigate } from 'react-router';
+import { useLocation, useSearchParams } from 'react-router';
+import { Link } from 'react-router';
+import { z } from 'zod';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
+import { trpc } from '@documenso/trpc/react';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Input } from '@documenso/ui/primitives/input';
+import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { SpinnerBox } from '@documenso/ui/primitives/spinner';
+import { TableCell } from '@documenso/ui/primitives/table';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { WebhookEditDialog } from '~/components/dialogs/webhook-edit-dialog';
+import { WebhookTestDialog } from '~/components/dialogs/webhook-test-dialog';
+import { GenericErrorLayout } from '~/components/general/generic-error-layout';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { WebhookLogsSheet } from '~/components/general/webhook-logs-sheet';
+import { useCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+import type { Route } from './+types/settings.webhooks.$id._index';
+
+const WebhookSearchParamsSchema = ZUrlSearchParamsSchema.extend({
+  status: z.nativeEnum(WebhookCallStatus).optional(),
+  events: z.preprocess(
+    (value) => (typeof value === 'string' && value.length > 0 ? value.split(',') : []),
+    z.array(z.nativeEnum(WebhookTriggerEvents)).optional(),
+  ),
+});
+
+export function meta() {
+  return appMetaTags('Webhooks');
+}
+
+export default function WebhookPage({ params }: Route.ComponentProps) {
+  const { t, i18n } = useLingui();
+  const { toast } = useToast();
+
+  const { pathname } = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+  const team = useCurrentTeam();
+
+  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
+  const parsedSearchParams = WebhookSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data: webhook, isLoading } = trpc.webhook.getWebhookById.useQuery(
+    {
+      id: params.id,
+    },
+    { enabled: !!params.id, retry: false },
+  );
+
+  const {
+    data,
+    isLoading: isLogsLoading,
+    isLoadingError: isLogsLoadingError,
+  } = trpc.webhook.calls.find.useQuery({
+    webhookId: params.id,
+    page: parsedSearchParams.page,
+    perPage: parsedSearchParams.perPage,
+    status: parsedSearchParams.status,
+    events: parsedSearchParams.events,
+    query: parsedSearchParams.query,
+  });
+
+  /**
+   * Handle debouncing the search query.
+   */
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('query', debouncedSearchQuery);
+
+    if (debouncedSearchQuery === '') {
+      params.delete('query');
+    }
+
+    // If nothing  to change then do nothing.
+    if (params.toString() === searchParams?.toString()) {
+      return;
+    }
+
+    setSearchParams(params);
+  }, [debouncedSearchQuery, pathname, searchParams]);
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: t`Status`,
+        accessorKey: 'status',
+
+        cell: ({ row }) => (
+          <Badge variant={row.original.status === 'SUCCESS' ? 'default' : 'destructive'}>
+            {row.original.status === 'SUCCESS' ? (
+              <CheckCircle2Icon className="mr-2 h-4 w-4" />
+            ) : (
+              <XCircleIcon className="mr-2 h-4 w-4" />
+            )}
+            {row.original.responseCode}
+          </Badge>
+        ),
+      },
+      {
+        header: t`Event`,
+        accessorKey: 'event',
+        cell: ({ row }) => (
+          <div>
+            <p className="text-foreground text-sm font-semibold">
+              {toFriendlyWebhookEventName(row.original.event)}
+            </p>
+            <p className="text-muted-foreground text-xs">{row.original.id}</p>
+          </div>
+        ),
+      },
+      {
+        header: t`Sent`,
+        accessorKey: 'createdAt',
+        cell: ({ row }) => (
+          <div className="flex items-center justify-between gap-2">
+            <p>
+              {i18n.date(row.original.createdAt, {
+                timeStyle: 'short',
+                dateStyle: 'short',
+              })}
+            </p>
+
+            <div className="data-state-selected:block opacity-0 transition-opacity group-hover:opacity-100">
+              <ChevronRightIcon className="h-4 w-4" />
+            </div>
+          </div>
+        ),
+      },
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
+
+  const getTabHref = (value: string) => {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('status', value);
+
+    if (value === '') {
+      params.delete('status');
+    }
+
+    if (params.has('page')) {
+      params.delete('page');
+    }
+
+    let path = pathname;
+
+    if (params.toString()) {
+      path += `?${params.toString()}`;
+    }
+
+    return path;
+  };
+
+  if (isLoading) {
+    return <SpinnerBox className="py-32" />;
+  }
+
+  // Todo: Update UI, currently out of place.
+  if (!webhook) {
+    return (
+      <GenericErrorLayout
+        errorCode={404}
+        errorCodeMap={{
+          404: {
+            heading: msg`Webhook not found`,
+            subHeading: msg`404 Webhook not found`,
+            message: msg`The webhook you are looking for may have been removed, renamed or may have never existed.`,
+          },
+        }}
+        primaryButton={
+          <Button asChild>
+            <Link to={`/t/${team.url}/settings/webhooks`}>
+              <Trans>Go back</Trans>
+            </Link>
+          </Button>
+        }
+        secondaryButton={null}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <SettingsHeader
+        title={
+          <div className="flex items-center gap-2">
+            <p>
+              <Trans>Webhook</Trans>
+            </p>
+            <Badge variant={webhook.enabled ? 'default' : 'secondary'}>
+              {webhook.enabled ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>}
+            </Badge>
+          </div>
+        }
+        subtitle={webhook.webhookUrl}
+      >
+        <div className="flex gap-2">
+          <WebhookTestDialog webhook={webhook}>
+            <Button variant="outline">
+              <TerminalIcon className="mr-2 h-4 w-4" />
+              <Trans>Test</Trans>
+            </Button>
+          </WebhookTestDialog>
+
+          <WebhookEditDialog
+            webhook={webhook}
+            trigger={
+              <Button>
+                <PencilIcon className="mr-2 h-4 w-4" />
+                <Trans>Edit</Trans>
+              </Button>
+            }
+          />
+        </div>
+      </SettingsHeader>
+
+      <div className="mt-4">
+        <div className="mb-4 flex flex-row items-center justify-between gap-x-4">
+          <Input
+            defaultValue={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder={t`Search by ID`}
+          />
+
+          <WebhookEventCombobox />
+
+          <Tabs value={parsedSearchParams.status || ''} className="flex-shrink-0">
+            <TabsList>
+              <TabsTrigger className="hover:text-foreground min-w-[60px]" value="" asChild>
+                <Link to={getTabHref('')}>
+                  <Trans>All</Trans>
+                </Link>
+              </TabsTrigger>
+              <TabsTrigger className="hover:text-foreground min-w-[60px]" value="SUCCESS" asChild>
+                <Link to={getTabHref(WebhookCallStatus.SUCCESS)}>
+                  <Trans>Success</Trans>
+                </Link>
+              </TabsTrigger>
+              <TabsTrigger className="hover:text-foreground min-w-[60px]" value="FAILED" asChild>
+                <Link to={getTabHref(WebhookCallStatus.FAILED)}>
+                  <Trans>Failed</Trans>
+                </Link>
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+
+        <DataTable
+          columns={columns}
+          data={results.data}
+          perPage={results.perPage}
+          currentPage={results.currentPage}
+          totalPages={results.totalPages}
+          onPaginationChange={onPaginationChange}
+          onRowClick={(row) =>
+            WebhookLogsSheet.call({
+              webhookCall: row,
+            })
+          }
+          rowClassName="cursor-pointer group"
+          error={{
+            enable: isLogsLoadingError,
+          }}
+          skeleton={{
+            enable: isLogsLoading,
+            rows: 3,
+            component: (
+              <>
+                <TableCell>
+                  <Skeleton className="h-4 w-12 rounded-full" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-12 rounded-full" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-12 rounded-full" />
+                </TableCell>
+              </>
+            ),
+          }}
+        >
+          {(table) =>
+            results.totalPages > 1 && (
+              <DataTablePagination additionalInformation="VisibleCount" table={table} />
+            )
+          }
+        </DataTable>
+      </div>
+
+      <WebhookLogsSheet.Root />
+    </div>
+  );
+}
+
+const WebhookEventCombobox = () => {
+  const { pathname } = useLocation();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const isMounted = useIsMounted();
+
+  const events = (searchParams?.get('events') ?? '').split(',').filter((value) => value !== '');
+
+  const comboBoxOptions = Object.values(WebhookTriggerEvents).map((event) => ({
+    label: toFriendlyWebhookEventName(event),
+    value: event,
+  }));
+
+  const onChange = (newEvents: string[]) => {
+    if (!pathname) {
+      return;
+    }
+
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('events', newEvents.join(','));
+
+    if (newEvents.length === 0) {
+      params.delete('events');
+    }
+
+    void navigate(`${pathname}?${params.toString()}`, { preventScrollReset: true });
+  };
+
+  return (
+    <MultiSelectCombobox
+      emptySelectionPlaceholder={
+        <p className="text-muted-foreground font-normal">
+          <Trans>
+            <span className="text-muted-foreground/70">Events:</span> All
+          </Trans>
+        </p>
+      }
+      enableClearAllButton={true}
+      inputPlaceholder={msg`Search`}
+      loading={!isMounted}
+      options={comboBoxOptions}
+      selectedValues={events}
+      onChange={onChange}
+    />
+  );
+};

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

@@ -1,263 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { useForm } from 'react-hook-form';
-import { useRevalidator } from 'react-router';
-import { Link } from 'react-router';
-import type { z } from 'zod';
-
-import { trpc } from '@documenso/trpc/react';
-import { ZEditWebhookRequestSchema } from '@documenso/trpc/server/webhook-router/schema';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { PasswordInput } from '@documenso/ui/primitives/password-input';
-import { SpinnerBox } from '@documenso/ui/primitives/spinner';
-import { Switch } from '@documenso/ui/primitives/switch';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { WebhookTestDialog } from '~/components/dialogs/webhook-test-dialog';
-import { GenericErrorLayout } from '~/components/general/generic-error-layout';
-import { SettingsHeader } from '~/components/general/settings-header';
-import { WebhookMultiSelectCombobox } from '~/components/general/webhook-multiselect-combobox';
-import { useCurrentTeam } from '~/providers/team';
-import { appMetaTags } from '~/utils/meta';
-
-import type { Route } from './+types/settings.webhooks.$id';
-
-const ZEditWebhookFormSchema = ZEditWebhookRequestSchema.omit({ id: true, teamId: true });
-
-type TEditWebhookFormSchema = z.infer<typeof ZEditWebhookFormSchema>;
-
-export function meta() {
-  return appMetaTags('Webhooks');
-}
-
-export default function WebhookPage({ params }: Route.ComponentProps) {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-  const { revalidate } = useRevalidator();
-
-  const team = useCurrentTeam();
-
-  const { data: webhook, isLoading } = trpc.webhook.getWebhookById.useQuery(
-    {
-      id: params.id,
-      teamId: team.id,
-    },
-    { enabled: !!params.id && !!team.id },
-  );
-
-  const { mutateAsync: updateWebhook } = trpc.webhook.editWebhook.useMutation();
-
-  const form = useForm<TEditWebhookFormSchema>({
-    resolver: zodResolver(ZEditWebhookFormSchema),
-    values: {
-      webhookUrl: webhook?.webhookUrl ?? '',
-      eventTriggers: webhook?.eventTriggers ?? [],
-      secret: webhook?.secret ?? '',
-      enabled: webhook?.enabled ?? true,
-    },
-  });
-
-  const onSubmit = async (data: TEditWebhookFormSchema) => {
-    try {
-      await updateWebhook({
-        id: params.id,
-        teamId: team.id,
-        ...data,
-      });
-
-      toast({
-        title: _(msg`Webhook updated`),
-        description: _(msg`The webhook has been updated successfully.`),
-        duration: 5000,
-      });
-
-      await revalidate();
-    } catch (err) {
-      toast({
-        title: _(msg`Failed to update webhook`),
-        description: _(
-          msg`We encountered an error while updating the webhook. Please try again later.`,
-        ),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  if (isLoading) {
-    return <SpinnerBox className="py-32" />;
-  }
-
-  // Todo: Update UI, currently out of place.
-  if (!webhook) {
-    return (
-      <GenericErrorLayout
-        errorCode={404}
-        errorCodeMap={{
-          404: {
-            heading: msg`Webhook not found`,
-            subHeading: msg`404 Webhook not found`,
-            message: msg`The webhook you are looking for may have been removed, renamed or may have never existed.`,
-          },
-        }}
-        primaryButton={
-          <Button asChild>
-            <Link to={`/t/${team.url}/settings/webhooks`}>
-              <Trans>Go back</Trans>
-            </Link>
-          </Button>
-        }
-        secondaryButton={null}
-      />
-    );
-  }
-
-  return (
-    <div className="max-w-2xl">
-      <SettingsHeader
-        title={_(msg`Edit webhook`)}
-        subtitle={_(msg`On this page, you can edit the webhook and its settings.`)}
-      />
-
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          <fieldset className="flex h-full flex-col gap-y-6" disabled={form.formState.isSubmitting}>
-            <div className="flex flex-col-reverse gap-4 md:flex-row">
-              <FormField
-                control={form.control}
-                name="webhookUrl"
-                render={({ field }) => (
-                  <FormItem className="flex-1">
-                    <FormLabel required>Webhook URL</FormLabel>
-                    <FormControl>
-                      <Input className="bg-background" {...field} />
-                    </FormControl>
-
-                    <FormDescription>
-                      <Trans>The URL for Documenso to send webhook events to.</Trans>
-                    </FormDescription>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="enabled"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>Enabled</Trans>
-                    </FormLabel>
-
-                    <div>
-                      <FormControl>
-                        <Switch
-                          className="bg-background"
-                          checked={field.value}
-                          onCheckedChange={field.onChange}
-                        />
-                      </FormControl>
-                    </div>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <FormField
-              control={form.control}
-              name="eventTriggers"
-              render={({ field: { onChange, value } }) => (
-                <FormItem className="flex flex-col gap-2">
-                  <FormLabel required>
-                    <Trans>Triggers</Trans>
-                  </FormLabel>
-                  <FormControl>
-                    <WebhookMultiSelectCombobox
-                      listValues={value}
-                      onChange={(values: string[]) => {
-                        onChange(values);
-                      }}
-                    />
-                  </FormControl>
-
-                  <FormDescription>
-                    <Trans>The events that will trigger a webhook to be sent to your URL.</Trans>
-                  </FormDescription>
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="secret"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Secret</FormLabel>
-                  <FormControl>
-                    <PasswordInput className="bg-background" {...field} value={field.value ?? ''} />
-                  </FormControl>
-
-                  <FormDescription>
-                    <Trans>
-                      A secret that will be sent to your URL so you can verify that the request has
-                      been sent by Documenso.
-                    </Trans>
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="flex justify-end gap-4">
-              <Button type="submit" loading={form.formState.isSubmitting}>
-                <Trans>Update webhook</Trans>
-              </Button>
-            </div>
-          </fieldset>
-        </form>
-      </Form>
-
-      <Alert
-        className="mt-6 flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
-        variant="neutral"
-      >
-        <div>
-          <AlertTitle>
-            <Trans>Test Webhook</Trans>
-          </AlertTitle>
-          <AlertDescription className="mr-2">
-            <Trans>
-              Send a test webhook with sample data to verify your integration is working correctly.
-            </Trans>
-          </AlertDescription>
-        </div>
-
-        <div className="flex-shrink-0">
-          <WebhookTestDialog webhook={webhook}>
-            <Button variant="outline" disabled={!webhook.enabled}>
-              <Trans>Test Webhook</Trans>
-            </Button>
-          </WebhookTestDialog>
-        </div>
-      </Alert>
-    </div>
-  );
-}

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

@@ -1,7 +1,18 @@
+import { useMemo } from 'react';
+
 import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { Plural, useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
-import { Loader } from 'lucide-react';
+import type { Webhook } from '@prisma/client';
+import {
+  CheckCircle2Icon,
+  EditIcon,
+  Loader,
+  MoreHorizontalIcon,
+  ScrollTextIcon,
+  Trash2Icon,
+  XCircleIcon,
+} from 'lucide-react';
 import { DateTime } from 'luxon';
 import { Link } from 'react-router';
 
@@ -10,9 +21,21 @@ import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 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 { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
 
 import { WebhookCreateDialog } from '~/components/dialogs/webhook-create-dialog';
 import { WebhookDeleteDialog } from '~/components/dialogs/webhook-delete-dialog';
+import { WebhookEditDialog } from '~/components/dialogs/webhook-edit-dialog';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -22,19 +45,72 @@ export function meta() {
 }
 
 export default function WebhookPage() {
-  const { _, i18n } = useLingui();
+  const { t, i18n } = useLingui();
 
   const team = useCurrentTeam();
 
-  const { data: webhooks, isLoading } = trpc.webhook.getTeamWebhooks.useQuery({
-    teamId: team.id,
-  });
+  const { data, isLoading, isError } = trpc.webhook.getTeamWebhooks.useQuery();
+
+  const results = {
+    data: data ?? [],
+    perPage: 0,
+    currentPage: 0,
+    totalPages: 0,
+  };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: t`Webhook`,
+        cell: ({ row }) => (
+          <Link to={`/t/${team.url}/settings/webhooks/${row.original.id}`}>
+            <p className="text-muted-foreground text-xs">{row.original.id}</p>
+            <p
+              className="text-foreground max-w-sm truncate text-xs font-semibold"
+              title={row.original.webhookUrl}
+            >
+              {row.original.webhookUrl}
+            </p>
+          </Link>
+        ),
+      },
+      {
+        header: t`Status`,
+        cell: ({ row }) => (
+          <Badge variant={row.original.enabled ? 'default' : 'neutral'} size="small">
+            {row.original.enabled ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>}
+          </Badge>
+        ),
+      },
+      {
+        header: t`Listening to`,
+        cell: ({ row }) => (
+          <p
+            className="text-foreground"
+            title={row.original.eventTriggers
+              .map((event) => toFriendlyWebhookEventName(event))
+              .join(', ')}
+          >
+            <Plural value={row.original.eventTriggers.length} one="# Event" other="# Events" />
+          </p>
+        ),
+      },
+      {
+        header: t`Created`,
+        cell: ({ row }) => i18n.date(row.original.createdAt),
+      },
+      {
+        header: t`Actions`,
+        cell: ({ row }) => <WebhookTableActionDropdown webhook={row.original} />,
+      },
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
 
   return (
     <div>
       <SettingsHeader
-        title={_(msg`Webhooks`)}
-        subtitle={_(msg`On this page, you can create new Webhooks and manage the existing ones.`)}
+        title={t`Webhooks`}
+        subtitle={t`On this page, you can create new Webhooks and manage the existing ones.`}
       >
         <WebhookCreateDialog />
       </SettingsHeader>
@@ -43,74 +119,95 @@ export default function WebhookPage() {
           <Loader className="h-8 w-8 animate-spin text-gray-500" />
         </div>
       )}
-      {webhooks && webhooks.length === 0 && (
-        // TODO: Perhaps add some illustrations here to make the page more engaging
-        <div className="mb-4">
-          <p className="text-muted-foreground mt-2 text-sm italic">
-            <Trans>
-              You have no webhooks yet. Your webhooks will be shown here once you create them.
-            </Trans>
-          </p>
-        </div>
-      )}
-      {webhooks && webhooks.length > 0 && (
-        <div className="mt-4 flex max-w-2xl flex-col gap-y-4">
-          {webhooks?.map((webhook) => (
-            <div
-              key={webhook.id}
-              className={cn(
-                'border-border rounded-lg border p-4',
-                !webhook.enabled && 'bg-muted/40',
-              )}
-            >
-              <div className="flex flex-col gap-x-4 sm:flex-row sm:items-center sm:justify-between">
-                <div>
-                  <div className="truncate font-mono text-xs">{webhook.id}</div>
 
-                  <div className="mt-1.5 flex items-center gap-2">
-                    <h5
-                      className="max-w-[30rem] truncate text-sm sm:max-w-[18rem]"
-                      title={webhook.webhookUrl}
-                    >
-                      {webhook.webhookUrl}
-                    </h5>
-
-                    <Badge variant={webhook.enabled ? 'neutral' : 'warning'} size="small">
-                      {webhook.enabled ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>}
-                    </Badge>
-                  </div>
-
-                  <p className="text-muted-foreground mt-2 text-xs">
-                    <Trans>
-                      Listening to{' '}
-                      {webhook.eventTriggers
-                        .map((trigger) => toFriendlyWebhookEventName(trigger))
-                        .join(', ')}
-                    </Trans>
-                  </p>
-
-                  <p className="text-muted-foreground mt-2 text-xs">
-                    <Trans>Created on {i18n.date(webhook.createdAt, DateTime.DATETIME_FULL)}</Trans>
-                  </p>
-                </div>
-
-                <div className="mt-4 flex flex-shrink-0 gap-4 sm:mt-0">
-                  <Button asChild variant="outline">
-                    <Link to={`/t/${team.url}/settings/webhooks/${webhook.id}`}>
-                      <Trans>Edit</Trans>
-                    </Link>
-                  </Button>
-                  <WebhookDeleteDialog webhook={webhook}>
-                    <Button variant="destructive">
-                      <Trans>Delete</Trans>
-                    </Button>
-                  </WebhookDeleteDialog>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
+      <DataTable
+        columns={columns}
+        data={results.data}
+        perPage={results.perPage}
+        currentPage={results.currentPage}
+        totalPages={results.totalPages}
+        error={{
+          enable: isError,
+        }}
+        emptyState={
+          <div className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4">
+            <p>
+              <Trans>
+                You have no webhooks yet. Your webhooks will be shown here once you create them.
+              </Trans>
+            </p>
+          </div>
+        }
+        skeleton={{
+          enable: isLoading,
+          rows: 3,
+          component: (
+            <>
+              <TableCell>
+                <Skeleton className="h-4 w-24 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-8 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-12 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-12 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-6 rounded-full" />
+              </TableCell>
+            </>
+          ),
+        }}
+      />
     </div>
   );
 }
+
+const WebhookTableActionDropdown = ({ webhook }: { webhook: Webhook }) => {
+  const team = useCurrentTeam();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger data-testid="webhook-table-action-btn">
+        <MoreHorizontalIcon className="text-muted-foreground h-5 w-5" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" forceMount>
+        <DropdownMenuLabel>
+          <Trans>Action</Trans>
+        </DropdownMenuLabel>
+
+        <DropdownMenuItem asChild>
+          <Link to={`/t/${team.url}/settings/webhooks/${webhook.id}`}>
+            <ScrollTextIcon className="mr-2 h-4 w-4" />
+            <Trans>Logs</Trans>
+          </Link>
+        </DropdownMenuItem>
+
+        <WebhookEditDialog
+          webhook={webhook}
+          trigger={
+            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+              <div>
+                <EditIcon className="mr-2 h-4 w-4" />
+                <Trans>Edit</Trans>
+              </div>
+            </DropdownMenuItem>
+          }
+        />
+
+        <WebhookDeleteDialog webhook={webhook}>
+          <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+            <div>
+              <Trash2Icon className="mr-2 h-4 w-4" />
+              <Trans>Delete</Trans>
+            </div>
+          </DropdownMenuItem>
+        </WebhookDeleteDialog>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

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

@@ -1,3 +1,5 @@
+import { lazy } from 'react';
+
 import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { DocumentSigningOrder, SigningStatus } from '@prisma/client';
@@ -14,14 +16,13 @@ import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-k
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { Spinner } from '@documenso/ui/primitives/spinner';
 
 import { TemplateBulkSendDialog } from '~/components/dialogs/template-bulk-send-dialog';
 import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
 import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
 import { EnvelopeRendererFileSelector } from '~/components/general/envelope-editor/envelope-file-selector';
-import EnvelopeGenericPageRenderer from '~/components/general/envelope-editor/envelope-generic-page-renderer';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
 import { TemplatePageViewDocumentsTable } from '~/components/general/template/template-page-view-documents-table';
@@ -34,6 +35,10 @@ import { useCurrentTeam } from '~/providers/team';
 
 import type { Route } from './+types/templates.$id._index';
 
+const EnvelopeGenericPageRenderer = lazy(
+  async () => import('~/components/general/envelope-editor/envelope-generic-page-renderer'),
+);
+
 export default function TemplatePage({ params }: Route.ComponentProps) {
   const { t } = useLingui();
   const { user } = useSession();
@@ -51,7 +56,7 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
 
   if (isLoadingEnvelope) {
     return (
-      <div className="text-foreground flex w-screen flex-col items-center justify-center gap-2 py-64">
+      <div className="flex w-screen flex-col items-center justify-center gap-2 py-64 text-foreground">
         <Spinner />
         <Trans>Loading</Trans>
       </div>
@@ -205,7 +210,7 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
                 documentMeta={mockedDocumentMeta}
               />
 
-              <PDFViewer
+              <PDFViewerLazy
                 envelopeItem={envelope.envelopeItems[0]}
                 token={undefined}
                 version="signed"
@@ -219,9 +224,9 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
           className={cn('col-span-12 lg:col-span-6 xl:col-span-5', isMultiEnvelopeItem && 'mt-20')}
         >
           <div className="space-y-6">
-            <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
+            <section className="flex flex-col rounded-xl border border-border bg-widget pb-4 pt-6">
               <div className="flex flex-row items-center justify-between px-4">
-                <h3 className="text-foreground text-2xl font-semibold">
+                <h3 className="text-2xl font-semibold text-foreground">
                   <Trans>Template</Trans>
                 </h3>
 
@@ -239,7 +244,7 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
                 </div>
               </div>
 
-              <p className="text-muted-foreground mt-2 px-4 text-sm">
+              <p className="mt-2 px-4 text-sm text-muted-foreground">
                 <Trans>Manage and view template</Trans>
               </p>
 

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

@@ -1,10 +1,8 @@
-import { useEffect } from 'react';
-
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
-import { CheckCircle2, Clock8, DownloadIcon } from 'lucide-react';
-import { Link, useRevalidator } from 'react-router';
+import { CheckCircle2, Clock8, DownloadIcon, Loader2 } from 'lucide-react';
+import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import signingCelebration from '@documenso/assets/images/signing-celebration.png';
@@ -18,7 +16,7 @@ import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get
 import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { env } from '@documenso/lib/utils/env';
-import type { Document } from '@documenso/prisma/types/document-legacy-schema';
+import { trpc } from '@documenso/trpc/react';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 import { cn } from '@documenso/ui/lib/utils';
@@ -84,6 +82,13 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 
   const canSignUp = !isExistingUser && env('NEXT_PUBLIC_DISABLE_SIGNUP') !== 'true';
 
+  const canRedirectToFolder =
+    user && document.userId === user.id && document.folderId && document.team?.url;
+
+  const returnToHomePath = canRedirectToFolder
+    ? `/t/${document.team.url}/documents/f/${document.folderId}`
+    : '/';
+
   return {
     isDocumentAccessValid: true,
     canSignUp,
@@ -92,6 +97,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     signatures,
     document,
     recipient,
+    returnToHomePath,
   };
 }
 
@@ -109,8 +115,27 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
     document,
     recipient,
     recipientEmail,
+    returnToHomePath,
   } = loaderData;
 
+  // Poll signing status every few seconds
+  const { data: signingStatusData } = trpc.envelope.signingStatus.useQuery(
+    {
+      token: recipient?.token || '',
+    },
+    {
+      refetchInterval: 3000,
+      initialData: match(document?.status)
+        .with(DocumentStatus.COMPLETED, () => ({ status: 'COMPLETED' }) as const)
+        .with(DocumentStatus.REJECTED, () => ({ status: 'REJECTED' }) as const)
+        .with(DocumentStatus.PENDING, () => ({ status: 'PENDING' }) as const)
+        .otherwise(() => ({ status: 'PENDING' }) as const),
+    },
+  );
+
+  // Use signing status from query if available, otherwise fall back to document status
+  const signingStatus = signingStatusData?.status ?? 'PENDING';
+
   if (!isDocumentAccessValid) {
     return <DocumentSigningAuthPageView email={recipientEmail} />;
   }
@@ -118,7 +143,7 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
   return (
     <div
       className={cn(
-        '-mx-4 flex flex-col items-center overflow-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44',
+        '-mx-4 flex flex-col items-center overflow-hidden px-4 pt-16 md:-mx-8 md:px-8 lg:pt-20 xl:pt-28',
         { 'pt-0 lg:pt-0 xl:pt-0': canSignUp },
       )}
     >
@@ -152,15 +177,23 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
             {recipient.role === RecipientRole.APPROVER && <Trans>Document Approved</Trans>}
           </h2>
 
-          {match({ status: document.status, deletedAt: document.deletedAt })
-            .with({ status: DocumentStatus.COMPLETED }, () => (
-              <div className="text-documenso-700 mt-4 flex items-center text-center">
+          {match({ status: signingStatus, deletedAt: document.deletedAt })
+            .with({ status: 'COMPLETED' }, () => (
+              <div className="mt-4 flex items-center text-center text-documenso-700">
                 <CheckCircle2 className="mr-2 h-5 w-5" />
                 <span className="text-sm">
                   <Trans>Everyone has signed</Trans>
                 </span>
               </div>
             ))
+            .with({ status: 'PROCESSING' }, () => (
+              <div className="mt-4 flex items-center text-center text-orange-600">
+                <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                <span className="text-sm">
+                  <Trans>Processing document</Trans>
+                </span>
+              </div>
+            ))
             .with({ deletedAt: null }, () => (
               <div className="mt-4 flex items-center text-center text-blue-600">
                 <Clock8 className="mr-2 h-5 w-5" />
@@ -178,23 +211,31 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
               </div>
             ))}
 
-          {match({ status: document.status, deletedAt: document.deletedAt })
-            .with({ status: DocumentStatus.COMPLETED }, () => (
-              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+          {match({ status: signingStatus, deletedAt: document.deletedAt })
+            .with({ status: 'COMPLETED' }, () => (
+              <p className="mt-2.5 max-w-[60ch] text-center text-sm font-medium text-muted-foreground/60 md:text-base">
                 <Trans>
-                  Everyone has signed! You will receive an Email copy of the signed document.
+                  Everyone has signed! You will receive an email copy of the signed document.
+                </Trans>
+              </p>
+            ))
+            .with({ status: 'PROCESSING' }, () => (
+              <p className="mt-2.5 max-w-[60ch] text-center text-sm font-medium text-muted-foreground/60 md:text-base">
+                <Trans>
+                  All recipients have signed. The document is being processed and you will receive
+                  an email copy shortly.
                 </Trans>
               </p>
             ))
             .with({ deletedAt: null }, () => (
-              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+              <p className="mt-2.5 max-w-[60ch] text-center text-sm font-medium text-muted-foreground/60 md:text-base">
                 <Trans>
-                  You will receive an Email copy of the signed document once everyone has signed.
+                  You will receive an email copy of the signed document once everyone has signed.
                 </Trans>
               </p>
             ))
             .otherwise(() => (
-              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+              <p className="mt-2.5 max-w-[60ch] text-center text-sm font-medium text-muted-foreground/60 md:text-base">
                 <Trans>
                   This document has been cancelled by the owner and is no longer available for
                   others to sign.
@@ -202,23 +243,35 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
               </p>
             ))}
 
-          <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
-            <DocumentShareButton documentId={document.id} token={recipient.token} />
+          <div className="mt-8 flex w-full max-w-xs flex-col items-stretch gap-4 md:w-auto md:max-w-none md:flex-row md:items-center">
+            <DocumentShareButton
+              documentId={document.id}
+              token={recipient.token}
+              className="w-full max-w-none md:flex-1"
+            />
 
-            {isDocumentCompleted(document.status) && (
+            {isDocumentCompleted(document) && (
               <EnvelopeDownloadDialog
                 envelopeId={document.envelopeId}
                 envelopeStatus={document.status}
                 envelopeItems={document.envelopeItems}
                 token={recipient?.token}
                 trigger={
-                  <Button type="button" variant="outline" className="flex-1">
+                  <Button type="button" variant="outline" className="flex-1 md:flex-initial">
                     <DownloadIcon className="mr-2 h-5 w-5" />
                     <Trans>Download</Trans>
                   </Button>
                 }
               />
             )}
+
+            {user && (
+              <Button asChild>
+                <Link to={returnToHomePath}>
+                  <Trans>Go Back Home</Trans>
+                </Link>
+              </Button>
+            )}
           </div>
         </div>
 
@@ -229,7 +282,7 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
                 <Trans>Need to sign documents?</Trans>
               </h2>
 
-              <p className="text-muted-foreground/60 mt-4 max-w-[55ch] text-center leading-normal">
+              <p className="mt-4 max-w-[55ch] text-center leading-normal text-muted-foreground/60">
                 <Trans>
                   Create your account and start using state-of-the-art document signing.
                 </Trans>
@@ -238,41 +291,8 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
               <ClaimAccount defaultName={recipientName} defaultEmail={recipient.email} />
             </div>
           )}
-
-          {user && (
-            <Link to="/" className="text-documenso-700 hover:text-documenso-600 mt-2">
-              <Trans>Go Back Home</Trans>
-            </Link>
-          )}
         </div>
       </div>
-
-      <PollUntilDocumentCompleted document={document} />
     </div>
   );
 }
-
-export type PollUntilDocumentCompletedProps = {
-  document: Pick<Document, 'id' | 'status' | 'deletedAt'>;
-};
-
-export const PollUntilDocumentCompleted = ({ document }: PollUntilDocumentCompletedProps) => {
-  const { revalidate } = useRevalidator();
-
-  useEffect(() => {
-    if (isDocumentCompleted(document.status)) {
-      return;
-    }
-
-    const interval = setInterval(() => {
-      if (window.document.hasFocus()) {
-        void revalidate();
-      }
-    }, 5000);
-
-    return () => clearInterval(interval);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [document.status]);
-
-  return <></>;
-};

apps/remix/app/routes/api+/branding.logo.organisation.$orgId.ts

@@ -3,7 +3,7 @@ import sharp from 'sharp';
 import { getFileServerSide } from '@documenso/lib/universal/upload/get-file.server';
 import { prisma } from '@documenso/prisma';
 
-import type { Route } from './+types/branding.logo.team.$teamId';
+import type { Route } from './+types/branding.logo.organisation.$orgId';
 
 export async function loader({ params }: Route.LoaderArgs) {
   const organisationId = params.orgId;
@@ -69,7 +69,7 @@ export async function loader({ params }: Route.LoaderArgs) {
     })
     .toBuffer();
 
-  return new Response(img, {
+  return new Response(Buffer.from(img), {
     headers: {
       'Content-Type': 'image/png',
       'Content-Length': img.length.toString(),

apps/remix/app/routes/api+/webhook.trigger.ts

@@ -1,3 +1,4 @@
+// Todo: [Webhooks] delete file after deployment.
 import { handlerTriggerWebhooks } from '@documenso/lib/server-only/webhooks/trigger/handler';
 
 import type { Route } from './+types/webhook.trigger';

apps/remix/app/routes/embed+/v1+/authoring+/document.edit.$id.tsx

@@ -75,6 +75,7 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
   }));
 
   return {
+    token,
     document: {
       ...document,
       fields,
@@ -86,7 +87,7 @@ export default function EmbeddingAuthoringDocumentEditPage() {
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const { document } = useLoaderData<typeof loader>();
+  const { document, token } = useLoaderData<typeof loader>();
 
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
 
@@ -321,7 +322,8 @@ export default function EmbeddingAuthoringDocumentEditPage() {
 
           <ConfigureFieldsView
             configData={configuration!}
-            documentData={document.documentData}
+            presignToken={token}
+            envelopeItem={document.envelopeItems[0]}
             defaultValues={fields ?? undefined}
             onBack={canGoBack ? handleBackToConfig : undefined}
             onSubmit={handleConfigureFieldsSubmit}

apps/remix/app/routes/embed+/v1+/authoring+/template.edit.$id.tsx

@@ -75,6 +75,7 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
   }));
 
   return {
+    token,
     template: {
       ...template,
       fields,
@@ -86,7 +87,7 @@ export default function EmbeddingAuthoringTemplateEditPage() {
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const { template } = useLoaderData<typeof loader>();
+  const { template, token } = useLoaderData<typeof loader>();
 
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
 
@@ -321,7 +322,8 @@ export default function EmbeddingAuthoringTemplateEditPage() {
 
           <ConfigureFieldsView
             configData={configuration!}
-            documentData={template.templateDocumentData}
+            presignToken={token}
+            envelopeItem={template.envelopeItems[0]}
             defaultValues={fields ?? undefined}
             onBack={canGoBack ? handleBackToConfig : undefined}
             onSubmit={handleConfigureFieldsSubmit}

apps/remix/app/utils/detect-document-fields.ts

@@ -0,0 +1,39 @@
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TDetectedFormField } from '@documenso/lib/types/document-analysis';
+
+export const detectFieldsInDocument = async (envelopeId: string): Promise<TDetectedFormField[]> => {
+  const response = await fetch('/api/ai/detect-fields', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ envelopeId }),
+    credentials: 'include',
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+
+    console.error('Field detection failed:', {
+      status: response.status,
+      statusText: response.statusText,
+      error: errorText,
+    });
+
+    throw new AppError(AppErrorCode.UNKNOWN_ERROR, {
+      message: `Field detection failed: ${response.statusText}`,
+      userMessage: 'Failed to detect fields in the document. Please try adding fields manually.',
+    });
+  }
+
+  const data = await response.json();
+
+  if (!Array.isArray(data)) {
+    throw new AppError(AppErrorCode.UNKNOWN_ERROR, {
+      message: 'Invalid response from field detection API - expected array',
+      userMessage: 'Failed to detect fields in the document. Please try again.',
+    });
+  }
+
+  return data;
+};

apps/remix/app/utils/detect-document-recipients.ts

@@ -0,0 +1,67 @@
+import { RecipientRole } from '@prisma/client';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+
+export type SuggestedRecipient = {
+  name: string;
+  email?: string;
+  role: 'SIGNER' | 'APPROVER' | 'CC';
+  signingOrder?: number;
+};
+
+export const detectRecipientsInDocument = async (
+  envelopeId: string,
+): Promise<SuggestedRecipient[]> => {
+  try {
+    const response = await fetch('/api/ai/detect-recipients', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ envelopeId }),
+    });
+
+    if (!response.ok) {
+      throw new AppError(AppErrorCode.UNKNOWN_ERROR, {
+        message: 'Failed to detect recipients',
+      });
+    }
+
+    return (await response.json()) as SuggestedRecipient[];
+  } catch (error) {
+    throw AppError.parseError(error);
+  }
+};
+
+export type RecipientForCreation = {
+  name: string;
+  email: string;
+  role: RecipientRole;
+  signingOrder?: number;
+};
+
+export const ensureRecipientEmails = (
+  recipients: SuggestedRecipient[],
+  envelopeId: string,
+): RecipientForCreation[] => {
+  const allowedRoles: RecipientRole[] = [
+    RecipientRole.SIGNER,
+    RecipientRole.APPROVER,
+    RecipientRole.CC,
+  ];
+
+  return recipients.map((recipient) => {
+    const email = recipient.email ?? '';
+
+    const candidateRole = recipient.role as RecipientRole;
+    const normalizedRole = allowedRoles.includes(candidateRole)
+      ? candidateRole
+      : RecipientRole.SIGNER;
+
+    return {
+      ...recipient,
+      email,
+      role: normalizedRole,
+    };
+  });
+};

apps/remix/package.json

@@ -14,7 +14,9 @@
     "with:env": "dotenv -e ../../.env -e ../../.env.local --"
   },
   "dependencies": {
-    "@cantoo/pdf-lib": "^2.5.2",
+    "@ai-sdk/google": "^2.0.25",
+    "@ai-sdk/react": "^2.0.82",
+    "@cantoo/pdf-lib": "^2.5.3",
     "@documenso/api": "*",
     "@documenso/assets": "*",
     "@documenso/auth": "*",
@@ -26,85 +28,89 @@
     "@documenso/ui": "*",
     "@epic-web/remember": "^1.1.0",
     "@faker-js/faker": "^10.1.0",
-    "@hono/node-server": "^1.13.7",
-    "@hono/trpc-server": "^0.3.4",
-    "@hookform/resolvers": "^3.1.0",
-    "@lingui/core": "^5.2.0",
-    "@lingui/detect-locale": "^5.2.0",
-    "@lingui/macro": "^5.2.0",
-    "@lingui/react": "^5.2.0",
+    "@hono/node-server": "^1.19.6",
+    "@hono/trpc-server": "^0.4.0",
+    "@hono/standard-validator": "^0.2.0",
+    "@hookform/resolvers": "^3",
+    "@lingui/core": "^5.6.0",
+    "@lingui/detect-locale": "^5.6.0",
+    "@lingui/macro": "^5.6.0",
+    "@lingui/react": "^5.6.0",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
-    "@react-router/node": "^7.6.0",
-    "@react-router/serve": "^7.6.0",
+    "@react-router/node": "^7.9.6",
+    "@react-router/serve": "^7.9.6",
     "@simplewebauthn/browser": "^9.0.1",
     "@simplewebauthn/server": "^9.0.3",
-    "autoprefixer": "^10.4.13",
+    "@tanstack/react-query": "5.90.10",
+    "ai": "^5.0.82",
+    "autoprefixer": "^10.4.22",
     "colord": "^2.9.3",
-    "content-disposition": "^0.5.4",
-    "framer-motion": "^10.12.8",
-    "hono": "4.7.0",
+    "content-disposition": "^1.0.1",
+    "framer-motion": "^12.23.24",
+    "hono": "4.10.6",
     "hono-rate-limiter": "^0.4.2",
-    "hono-react-router-adapter": "^0.6.2",
-    "input-otp": "^1.2.4",
-    "isbot": "^5.1.17",
-    "jsonwebtoken": "^9.0.2",
-    "konva": "^10.0.2",
-    "lucide-react": "^0.279.0",
-    "luxon": "^3.4.0",
-    "papaparse": "^5.4.1",
-    "plausible-tracker": "^0.3.9",
-    "posthog-js": "^1.245.0",
-    "posthog-node": "^4.17.0",
+    "hono-react-router-adapter": "^0.6.5",
+    "input-otp": "^1.4.2",
+    "isbot": "^5.1.32",
+    "konva": "^10.0.9",
+    "lucide-react": "^0.554.0",
+    "luxon": "^3.7.2",
+    "nanoid": "^5.1.6",
+    "papaparse": "^5.5.3",
+    "posthog-js": "^1.297.2",
+    "posthog-node": "4.18.0",
     "react": "^18",
-    "react-call": "^1.7.0",
+    "react-call": "^1.8.1",
     "react-dom": "^18",
-    "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.43.9",
-    "react-hotkeys-hook": "^4.4.1",
-    "react-icons": "^5.4.0",
-    "react-rnd": "^10.4.1",
-    "react-router": "^7.6.0",
-    "recharts": "^2.7.2",
-    "remeda": "^2.17.3",
+    "react-dropzone": "^14.3.8",
+    "react-hook-form": "^7.66.1",
+    "react-hotkeys-hook": "^4.6.2",
+    "react-icons": "^5.5.0",
+    "react-rnd": "^10.5.2",
+    "react-router": "^7.9.6",
+    "recharts": "^2.15.4",
+    "remeda": "^2.32.0",
     "remix-themes": "^2.0.4",
-    "satori": "^0.12.1",
-    "sharp": "0.32.6",
-    "tailwindcss": "^3.4.15",
-    "ts-pattern": "^5.0.5",
-    "ua-parser-js": "^1.0.37",
+    "satori": "^0.18.3",
+    "sharp": "0.34.5",
+    "skia-canvas": "^3.0.8",
+    "tailwindcss": "^3.4.18",
+    "ts-pattern": "^5.9.0",
+    "ua-parser-js": "^1.0.41",
     "uqr": "^0.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.7",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.26.0",
-    "@lingui/babel-plugin-lingui-macro": "^5.2.0",
-    "@lingui/vite-plugin": "^5.3.1",
-    "@react-router/dev": "^7.6.0",
-    "@react-router/remix-routes-option-adapter": "^7.6.0",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "@rollup/plugin-typescript": "^12.1.2",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@lingui/babel-plugin-lingui-macro": "^5.6.0",
+    "@lingui/vite-plugin": "^5.6.0",
+    "@react-router/dev": "^7.9.6",
+    "@react-router/remix-routes-option-adapter": "^7.9.6",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^28.0.9",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
     "@simplewebauthn/types": "^9.0.1",
     "@types/content-disposition": "^0.5.9",
-    "@types/formidable": "^2.0.6",
-    "@types/luxon": "^3.3.1",
+    "@types/formidable": "^3.4.6",
+    "@types/luxon": "^3.7.1",
     "@types/node": "^20",
-    "@types/papaparse": "^5.3.15",
-    "@types/react": "^18",
+    "@types/papaparse": "^5.5.0",
+    "@types/react": "18.3.27",
     "@types/react-dom": "^18",
     "@types/ua-parser-js": "^0.7.39",
-    "cross-env": "^7.0.3",
-    "esbuild": "^0.25.4",
-    "remix-flat-routes": "^0.8.4",
-    "rollup": "^4.34.5",
-    "tsx": "^4.19.2",
+    "cross-env": "^10.1.0",
+    "esbuild": "^0.27.0",
+    "remix-flat-routes": "^0.8.5",
+    "rollup": "^4.53.3",
+    "tsx": "^4.20.6",
     "typescript": "5.6.2",
-    "vite": "^6.3.5",
+    "vite": "^7.2.4",
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   },
-  "version": "2.0.13"
+  "version": "2.1.0"
 }

apps/remix/rollup.config.mjs

@@ -1,6 +1,7 @@
 import linguiMacro from '@lingui/babel-plugin-lingui-macro';
 import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
 import resolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
 import path from 'node:path';
@@ -39,6 +40,7 @@ const config = {
       ],
       extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
     }),
+    json(),
     commonjs(),
     babel({
       babelHelpers: 'bundled',

apps/remix/server/api/document-analysis/authorization.ts

@@ -0,0 +1,61 @@
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import { prisma } from '@documenso/prisma';
+import type { DocumentData } from '@documenso/prisma/client';
+
+/**
+ * Authorize a user's access to an envelope and return its document data.
+ * Checks both direct ownership and team membership.
+ */
+export async function authorizeDocumentAccess(
+  envelopeId: string,
+  userId: number,
+): Promise<DocumentData> {
+  const envelope = await prisma.envelope.findUnique({
+    where: { id: envelopeId },
+    include: {
+      envelopeItems: {
+        include: {
+          documentData: true,
+        },
+      },
+    },
+  });
+
+  if (!envelope || !envelope.envelopeItems || envelope.envelopeItems.length === 0) {
+    throw new AppError(AppErrorCode.NOT_FOUND, {
+      message: `Envelope not found: ${envelopeId}`,
+      userMessage: 'The requested document does not exist.',
+    });
+  }
+
+  const isDirectOwner = envelope.userId === userId;
+
+  let hasTeamAccess = false;
+  if (envelope.teamId) {
+    try {
+      await getTeamById({ teamId: envelope.teamId, userId });
+      hasTeamAccess = true;
+    } catch {
+      hasTeamAccess = false;
+    }
+  }
+
+  if (!isDirectOwner && !hasTeamAccess) {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, {
+      message: `User ${userId} does not have access to envelope ${envelopeId}`,
+      userMessage: 'You do not have permission to access this document.',
+    });
+  }
+
+  const documentData = envelope.envelopeItems[0]?.documentData;
+
+  if (!documentData) {
+    throw new AppError(AppErrorCode.NOT_FOUND, {
+      message: `Document data not found in envelope: ${envelopeId}`,
+      userMessage: 'The requested document does not exist.',
+    });
+  }
+
+  return documentData;
+}

apps/remix/server/api/document-analysis/debug-visualizer.ts

@@ -0,0 +1,183 @@
+import { mkdir, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { Canvas, Image } from 'skia-canvas';
+
+import type { TDetectFormFieldsResponse } from './types';
+
+export type RenderedPage = {
+  image: Buffer;
+  pageNumber: number;
+  width: number;
+  height: number;
+};
+
+const GRID_PADDING = { left: 80, top: 20, right: 20, bottom: 40 };
+const GRID_INTERVAL = 100;
+const FIELD_COLORS = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];
+
+/**
+ * Saves debug visualizations of detected form fields for development purposes.
+ * Creates annotated images showing field bounding boxes and coordinate grids.
+ */
+export async function saveDebugVisualization(
+  renderedPages: RenderedPage[],
+  detectedFields: TDetectFormFieldsResponse,
+): Promise<void> {
+  const debugDir = join(process.cwd(), '..', '..', 'packages', 'assets', 'ai-previews');
+  await mkdir(debugDir, { recursive: true });
+
+  const timestamp = new Date()
+    .toISOString()
+    .replace(/[-:]/g, '')
+    .replace(/\..+/, '')
+    .replace('T', '_');
+
+  for (const page of renderedPages) {
+    const canvas = createAnnotatedCanvas(page, detectedFields);
+    await saveCanvasToFile(canvas, debugDir, timestamp, page.pageNumber);
+  }
+}
+
+function createAnnotatedCanvas(
+  page: RenderedPage,
+  detectedFields: TDetectFormFieldsResponse,
+): Canvas {
+  const canvas = new Canvas(
+    page.width + GRID_PADDING.left + GRID_PADDING.right,
+    page.height + GRID_PADDING.top + GRID_PADDING.bottom,
+  );
+  const ctx = canvas.getContext('2d');
+
+  // Draw the original page image
+  const img = new Image();
+  img.src = page.image;
+  ctx.drawImage(img, GRID_PADDING.left, GRID_PADDING.top);
+
+  // Draw coordinate grid
+  drawCoordinateGrid(ctx, page.width, page.height);
+
+  // Draw field bounding boxes
+  drawFieldBoundingBoxes(ctx, page, detectedFields);
+
+  // Draw axis labels
+  drawAxisLabels(ctx, page.width, page.height);
+
+  return canvas;
+}
+
+function drawCoordinateGrid(
+  ctx: ReturnType<Canvas['getContext']>,
+  pageWidth: number,
+  pageHeight: number,
+): void {
+  ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+  ctx.lineWidth = 1;
+
+  // Draw vertical grid lines
+  for (let i = 0; i <= 1000; i += GRID_INTERVAL) {
+    const x = GRID_PADDING.left + (i / 1000) * pageWidth;
+    ctx.beginPath();
+    ctx.moveTo(x, GRID_PADDING.top);
+    ctx.lineTo(x, pageHeight + GRID_PADDING.top);
+    ctx.stroke();
+  }
+
+  // Draw horizontal grid lines
+  for (let i = 0; i <= 1000; i += GRID_INTERVAL) {
+    const y = GRID_PADDING.top + (i / 1000) * pageHeight;
+    ctx.beginPath();
+    ctx.moveTo(GRID_PADDING.left, y);
+    ctx.lineTo(pageWidth + GRID_PADDING.left, y);
+    ctx.stroke();
+  }
+}
+
+function drawFieldBoundingBoxes(
+  ctx: ReturnType<Canvas['getContext']>,
+  page: RenderedPage,
+  detectedFields: TDetectFormFieldsResponse,
+): void {
+  const pageFields = detectedFields.filter((field) => field.pageNumber === page.pageNumber);
+
+  pageFields.forEach((field, index) => {
+    const { ymin, xmin, ymax, xmax } = field.boundingBox;
+
+    const x = (xmin / 1000) * page.width + GRID_PADDING.left;
+    const y = (ymin / 1000) * page.height + GRID_PADDING.top;
+    const width = ((xmax - xmin) / 1000) * page.width;
+    const height = ((ymax - ymin) / 1000) * page.height;
+
+    const color = FIELD_COLORS[index % FIELD_COLORS.length];
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 5;
+    ctx.strokeRect(x, y, width, height);
+
+    // Draw field label
+    ctx.fillStyle = color;
+    ctx.font = '20px Arial';
+    ctx.fillText(field.label, x, y - 5);
+  });
+}
+
+function drawAxisLabels(
+  ctx: ReturnType<Canvas['getContext']>,
+  pageWidth: number,
+  pageHeight: number,
+): void {
+  ctx.strokeStyle = '#000000';
+  ctx.lineWidth = 1;
+  ctx.font = '26px Arial';
+
+  // Draw Y-axis
+  ctx.beginPath();
+  ctx.moveTo(GRID_PADDING.left, GRID_PADDING.top);
+  ctx.lineTo(GRID_PADDING.left, pageHeight + GRID_PADDING.top);
+  ctx.stroke();
+
+  // Y-axis labels
+  ctx.textAlign = 'right';
+  ctx.textBaseline = 'middle';
+  for (let i = 0; i <= 1000; i += GRID_INTERVAL) {
+    const y = GRID_PADDING.top + (i / 1000) * pageHeight;
+    ctx.fillStyle = '#000000';
+    ctx.fillText(i.toString(), GRID_PADDING.left - 5, y);
+
+    ctx.beginPath();
+    ctx.moveTo(GRID_PADDING.left - 5, y);
+    ctx.lineTo(GRID_PADDING.left, y);
+    ctx.stroke();
+  }
+
+  // Draw X-axis
+  ctx.beginPath();
+  ctx.moveTo(GRID_PADDING.left, pageHeight + GRID_PADDING.top);
+  ctx.lineTo(pageWidth + GRID_PADDING.left, pageHeight + GRID_PADDING.top);
+  ctx.stroke();
+
+  // X-axis labels
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'top';
+  for (let i = 0; i <= 1000; i += GRID_INTERVAL) {
+    const x = GRID_PADDING.left + (i / 1000) * pageWidth;
+    ctx.fillStyle = '#000000';
+    ctx.fillText(i.toString(), x, pageHeight + GRID_PADDING.top + 5);
+
+    ctx.beginPath();
+    ctx.moveTo(x, pageHeight + GRID_PADDING.top);
+    ctx.lineTo(x, pageHeight + GRID_PADDING.top + 5);
+    ctx.stroke();
+  }
+}
+
+async function saveCanvasToFile(
+  canvas: Canvas,
+  debugDir: string,
+  timestamp: string,
+  pageNumber: number,
+): Promise<void> {
+  const outputFilename = `detected_form_fields_${timestamp}_page_${pageNumber}.png`;
+  const outputPath = join(debugDir, outputFilename);
+
+  const pngBuffer = await canvas.toBuffer('png');
+  await writeFile(outputPath, new Uint8Array(pngBuffer));
+}