chore: remove random file

- Fixes checkbox fields not displaying correctly in sealed documents by
calling `flatten()` on the pdf-lib form before saving

.agents/plans/bold-emerald-earth-pdf-placeholder-field-positioning.md

@@ -0,0 +1,161 @@
+---
+date: 2026-01-28
+title: Pdf Placeholder Field Positioning
+---
+
+## Overview
+
+This feature enables automatic field placement in PDFs using placeholder text, eliminating the need for manual coordinate-based positioning. It supports two complementary workflows:
+
+1. **Automatic detection on upload** - PDFs containing structured placeholders like `{{signature, r1}}` have fields created automatically when uploaded
+2. **API placeholder positioning** - Developers can reference any text in a PDF to position fields instead of calculating coordinates
+
+## Goals
+
+- Allow users to prepare documents in Word/Google Docs with placeholders that become signature fields
+- Reduce friction for document preparation workflows
+- Provide API developers with a simpler alternative to coordinate-based field positioning
+- Support documents with repeated placeholders (e.g., initials on every page)
+
+## Placeholder Format (Automatic Detection)
+
+```
+{{FIELD_TYPE, RECIPIENT, option1=value1, option2=value2}}
+```
+
+### Components
+
+- **FIELD_TYPE** (required): One of `signature`, `initials`, `name`, `email`, `date`, `text`, `number`, `radio`, `checkbox`, `dropdown`
+- **RECIPIENT** (required): `r1`, `r2`, `r3`, etc. - identifies which recipient the field belongs to
+- **OPTIONS** (optional): Key-value pairs like `required=true`, `fontSize=14`, `readOnly=true`
+
+### Examples
+
+- `{{signature, r1}}` - Signature field for first recipient
+- `{{text, r1, required=true, label=Company Name}}` - Required text field with label
+- `{{number, r2, minValue=0, maxValue=100}}` - Number field with validation
+
+### Behavior
+
+- Placeholders without recipient identifiers (e.g., `{{signature}}`) are skipped during automatic detection - reserved for API use
+- Invalid field types are silently skipped
+- Placeholder text is covered with white rectangles after field creation
+
+## API Placeholder Positioning
+
+The `/api/v2/envelope/field/create-many` endpoint accepts `placeholder` as an alternative to coordinates:
+
+```json
+{
+  "recipientId": 123,
+  "type": "SIGNATURE",
+  "placeholder": "{{signature}}"
+}
+```
+
+### Parameters
+
+| Parameter     | Type    | Description                                  |
+| ------------- | ------- | -------------------------------------------- |
+| `placeholder` | string  | Text to search for in the PDF                |
+| `width`       | number  | Optional override (percentage)               |
+| `height`      | number  | Optional override (percentage)               |
+| `matchAll`    | boolean | When true, creates fields at ALL occurrences |
+
+### matchAll Behavior
+
+- Default (`false`): Only first occurrence gets a field
+- `true`: Creates a field at every occurrence of the placeholder text
+
+This is useful for documents requiring initials on every page.
+
+## Implementation Components
+
+### Core Functions
+
+- `extractPlaceholdersFromPDF()` - Scans PDF for `{{...}}` patterns with recipient identifiers
+- `removePlaceholdersFromPDF()` - Covers placeholder text with white rectangles
+- `whiteoutRegions()` - Low-level helper for drawing white boxes on PDF pages
+- `parseFieldTypeFromPlaceholder()` - Converts placeholder field type to FieldType enum
+- `parseFieldMetaFromPlaceholder()` - Parses options into fieldMeta format
+
+### Integration Points
+
+1. **Upload flow** (`create-envelope.ts`, `create-envelope-items.ts`)
+   - Extract placeholders at upload time (before saving to storage)
+   - Pass placeholders in-memory to envelope creation
+   - Create placeholder recipients if none provided
+   - Create fields within the same transaction
+
+2. **API field creation** (`create-envelope-fields.ts`)
+   - Accept `placeholder` as alternative to coordinates
+   - Search PDF for placeholder text
+   - Resolve position from bounding box
+   - Support `matchAll` for multiple occurrences
+
+### Field Meta Parsing
+
+The following properties are explicitly parsed:
+
+- `required`, `readOnly` → boolean
+- `fontSize`, `minValue`, `maxValue`, `characterLimit` → number
+- Other properties pass through as strings
+
+Note: Signature fields do not support fieldMeta options.
+
+## Testing
+
+### E2E Tests
+
+**UI Tests** (`e2e/auto-placing-fields/`):
+
+- Single recipient placeholder detection
+- Multiple recipient placeholder detection
+- Field configuration from placeholder options
+- Skipping placeholders without recipient identifiers
+- Skipping invalid field types
+
+**API Tests** (`e2e/api/v2/placeholder-fields-api.spec.ts`):
+
+- Placeholder-based field positioning
+- Width/height overrides
+- Error on placeholder not found
+- Mixed coordinate and placeholder positioning
+- First occurrence only (default)
+- All occurrences with `matchAll: true`
+
+## Documentation
+
+### User Documentation
+
+`/users/documents/pdf-placeholders` - Explains:
+
+- Placeholder format and syntax
+- Supported field types
+- Recipient identifiers
+- Available options per field type
+- Troubleshooting
+
+### Developer Documentation
+
+`/developers/public-api/reference` - Documents:
+
+- Coordinate-based positioning (existing)
+- Placeholder-based positioning (new)
+- matchAll parameter
+- Mixing both methods
+
+## Edge Cases Handled
+
+1. **No placeholders found** - Original PDF returned unchanged
+2. **Placeholder not found (API)** - Returns error with placeholder text
+3. **Multiple occurrences** - First only by default, all with `matchAll: true`
+4. **No recipient identifier** - Skipped during auto-detection, works for API
+5. **Invalid field type** - Skipped during auto-detection
+6. **Signature field with options** - Options ignored (signature doesn't support fieldMeta)
+
+## Future Considerations
+
+- Support for placeholder text styles (bold, underline) to indicate field properties
+- Template-level placeholder mapping for reusable configurations
+- Placeholder validation in document editor before sending

.env.example

@@ -1,3 +1,6 @@
+# The license key to enable enterprise features for self hosters
+NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=
+
 # [[AUTH]]
 NEXTAUTH_SECRET="secret"
 

.gitignore

@@ -63,3 +63,7 @@ CLAUDE.md
 
 # scripts
 scripts/output*
+
+# license
+.documenso-license.json
+.documenso-license-backup.json

apps/documentation/pages/developers/_meta.js

@@ -13,6 +13,7 @@ export default {
     title: 'API & Integration Guides',
   },
   'public-api': 'Public API',
-  embedding: 'Embedding',
+  embedding: 'Embedded Signing',
+  'embedded-authoring': 'Embedded Authoring',
   webhooks: 'Webhooks',
 };

apps/documentation/pages/developers/embedded-authoring.mdx

@@ -1,12 +1,25 @@
 ---
-title: Authoring
+title: Embedded Authoring
 description: Learn how to use embedded authoring to create documents and templates in your application
 ---
 
+import { Callout } from 'nextra/components';
+
+<Callout type="info">
+  The embedded authoring feature is an enterprise only feature. Please contact us if you are
+  interested in using it.
+</Callout>
+
 # Embedded Authoring
 
 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.
 
+## Embedded Signing vs Embedded Authoring
+
+Embedded signing allows you to embed your Documenso documents into your application for signing. Your users will be able to sign the document directly in your application.
+
+Embedded authoring allows you to integrate Documenso's document and template creation and editing into your application. You will be able to create and edit documents and templates directly in your application.
+
 ## How Embedded Authoring Works
 
 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.

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

@@ -7,5 +7,4 @@ export default {
   preact: 'Preact Integration',
   angular: 'Angular Integration',
   'css-variables': 'CSS Variables',
-  authoring: 'Authoring',
 };

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

@@ -3,10 +3,16 @@ title: Get Started
 description: Learn how to use embedding to bring signing to your own website or application
 ---
 
-# Embedding
+# Embedded Signing
 
 Our embedding feature lets you integrate our document signing experience into your own application or website. Whether you're building with React, Preact, Vue, Svelte, Solid, Angular, or using generalized web components, this guide will help you get started with embedding Documenso.
 
+## Embedded Signing vs Embedded Authoring
+
+Embedded signing allows you to embed your Documenso documents into your application for signing. Your users will be able to sign the document directly in your application.
+
+Embedded authoring allows you to integrate Documenso's document and template creation and editing into your application. You will be able to create and edit documents and templates directly in your application.
+
 ## Availability
 
 Embedding is currently available for all users on a **Teams Plan** and above, as well as **Early Adopter's** within a team (Early Adopters can create a team for free).

apps/documentation/pages/developers/public-api/index.mdx

@@ -31,9 +31,18 @@ Our new API V2 supports the following typed SDKs:
 
 ## API V1 - Deprecated
 
-Check out the [API V1 documentation](https://app.documenso.com/api/v1/openapi) for details about the API endpoints, request parameters, response formats, and authentication methods.
+<Callout type="warning">
+  <strong>API V1 is deprecated.</strong>
+  <br />
+  The V1 API will continue to be supported for the foreseeable future, but it is limited to
+  <strong>Legacy Documents</strong> (Documents created using the old non-envelope editor).
 
-📖 [Documentation](https://documen.so/api-v2-docs)
+  <strong>Important:</strong> To work with the new <strong>Envelope</strong> document system, you
+  must use the
+  <strong> V2 API</strong>.
+</Callout>
+
+Check out the [API V1 documentation](https://app.documenso.com/api/v1/openapi) for details about the API endpoints, request parameters, response formats, and authentication methods.
 
 ## Availability
 

apps/documentation/pages/developers/public-api/reference.mdx

@@ -316,6 +316,8 @@ Before adding fields to an envelope, you will need the following details:
 
 See the [Get Envelope](#get-envelope) section for more details on how to retrieve these details.
 
+### Coordinate-Based Positioning
+
 The following is an example of a request which creates 2 new fields on the first page of the envelope.
 
 Note that width, height, positionX and positionY are percentage numbers between 0 and 100, which scale the field relative to the size of the PDF.
@@ -360,6 +362,95 @@ curl https://app.documenso.com/api/v2/envelope/field/create-many \
   }'
 ```
 
+### Placeholder-Based Positioning
+
+Instead of specifying exact coordinates, you can position fields using placeholder text in the PDF. The API will search for the text and place the field at that location.
+
+This is useful when:
+
+- You have PDFs with designated placeholder text (e.g., `{{signature}}`, `[SIGN HERE]`)
+- You want field positions to adapt to document content changes
+- You're working with templated documents generated from other systems
+
+```sh
+curl https://app.documenso.com/api/v2/envelope/field/create-many \
+  --request POST \
+  --header 'Authorization: api_xxxxxxxxxxxxxx' \
+  --header 'Content-Type: application/json' \
+  --data '{
+    "envelopeId": "envelope_xxxxxxxxxx",
+    "data": [
+      {
+        "recipientId": recipient_id_here,
+        "type": "SIGNATURE",
+        "placeholder": "{{signature}}"
+      },
+      {
+        "recipientId": recipient_id_here,
+        "type": "NAME",
+        "placeholder": "{{name}}",
+        "width": 30,
+        "height": 5
+      }
+    ]
+  }'
+```
+
+#### Placeholder Parameters
+
+| Parameter     | Type    | Required | Description                                                                                                      |
+| ------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------- |
+| `placeholder` | string  | Yes      | Text to search for in the PDF. The field is placed at the location of this text.                                 |
+| `width`       | number  | No       | Override the field width (percentage). If omitted, uses the placeholder text width.                              |
+| `height`      | number  | No       | Override the field height (percentage). If omitted, uses the placeholder text height.                            |
+| `matchAll`    | boolean | No       | When `true`, creates a field at every occurrence of the placeholder. Default is `false` (first occurrence only). |
+
+<Callout type="info">
+  The placeholder text is automatically covered with a white rectangle after field creation, so it
+  won't appear in the final signed document.
+</Callout>
+
+#### Multiple Occurrences
+
+If your PDF contains the same placeholder text multiple times (e.g., initials on every page), use `matchAll: true` to create fields at all occurrences:
+
+```json
+{
+  "recipientId": 123,
+  "type": "INITIALS",
+  "placeholder": "{{initials}}",
+  "matchAll": true
+}
+```
+
+This will create one INITIALS field for each occurrence of `{{initials}}` in the PDF.
+
+#### Mixing Positioning Methods
+
+You can combine coordinate-based and placeholder-based positioning in the same request:
+
+```json
+{
+  "envelopeId": "envelope_xxxxxxxxxx",
+  "data": [
+    {
+      "recipientId": 123,
+      "type": "SIGNATURE",
+      "placeholder": "{{signature}}"
+    },
+    {
+      "recipientId": 123,
+      "type": "DATE",
+      "page": 1,
+      "positionX": 70,
+      "positionY": 85,
+      "width": 20,
+      "height": 3
+    }
+  ]
+}
+```
+
 Field meta allows you to further configure fields, for example it will allow you to add multiple items for checkboxes or radios.
 
 A successful request will return a JSON response with the newly added fields.

apps/documentation/pages/developers/webhooks.mdx

@@ -544,7 +544,7 @@ Example payload for the `document.rejected` event:
 }
 ```
 
-Example payload for the `document.rejected` event:
+Example payload for the `document.cancelled` event:
 
 ```json
 {

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

@@ -3,6 +3,7 @@ export default {
   'document-preferences': 'Document Preferences',
   'document-visibility': 'Document Visibility',
   fields: 'Document Fields',
+  'pdf-placeholders': 'PDF Placeholders',
   'email-preferences': 'Email Preferences',
   'ai-detection': 'AI Recipient & Field Detection',
   'default-recipients': 'Default Recipients',

apps/documentation/pages/users/documents/pdf-placeholders.mdx

@@ -0,0 +1,179 @@
+---
+title: PDF Placeholders
+description: Learn how to use placeholder text in your PDFs for automatic field placement in Documenso.
+---
+
+import { Callout } from 'nextra/components';
+
+# PDF Placeholders
+
+Documenso can automatically detect placeholder text in your PDF documents and create fields at those locations. This allows you to prepare documents in your preferred editing tool (Word, Google Docs, etc.) with placeholders that become signature fields when uploaded.
+
+## How It Works
+
+When you upload a PDF, Documenso scans for text matching the placeholder pattern `{{...}}`. Each placeholder can specify:
+
+1. **Field type** - What kind of field to create (signature, name, email, etc.)
+2. **Recipient** - Which signer the field belongs to (r1, r2, etc.)
+3. **Options** - Additional settings like required, read-only, font size, etc.
+
+The placeholder text is automatically hidden after fields are created, so your final document looks clean.
+
+## Placeholder Format
+
+The basic format is:
+
+```
+{{FIELD_TYPE, RECIPIENT, option1=value1, option2=value2}}
+```
+
+### Examples
+
+| Placeholder                   | Description                         |
+| ----------------------------- | ----------------------------------- |
+| `{{signature, r1}}`           | Signature field for recipient 1     |
+| `{{name, r1}}`                | Name field for recipient 1          |
+| `{{email, r2}}`               | Email field for recipient 2         |
+| `{{date, r1}}`                | Date field for recipient 1          |
+| `{{text, r1, required=true}}` | Required text field for recipient 1 |
+| `{{initials, r1}}`            | Initials field for recipient 1      |
+
+## Supported Field Types
+
+The following field types are supported in placeholders:
+
+| Field Type | Placeholder Value |
+| ---------- | ----------------- |
+| Signature  | `signature`       |
+| Initials   | `initials`        |
+| Name       | `name`            |
+| Email      | `email`           |
+| Date       | `date`            |
+| Text       | `text`            |
+| Number     | `number`          |
+| Radio      | `radio`           |
+| Checkbox   | `checkbox`        |
+| Dropdown   | `dropdown`        |
+
+<Callout type="info">
+  Field types are case-insensitive. `{{ SIGNATURE, r1 }}` and `{{ signature, r1 }}` are equivalent.
+</Callout>
+
+## Recipient Identifiers
+
+Recipients are identified using `r1`, `r2`, `r3`, etc. The number corresponds to the order in which recipients are created:
+
+- `r1` - First recipient
+- `r2` - Second recipient
+- `r3` - Third recipient
+
+When you upload a PDF with placeholders, Documenso will:
+
+1. Create placeholder recipients for each unique identifier found (e.g., `r1`, `r2`)
+2. You can then update these with real email addresses before sending
+
+<Callout type="warning">
+  Placeholders without a recipient identifier (e.g., `{{ signature }}` without `r1`) are reserved
+  for API use and will not create fields during upload.
+</Callout>
+
+## Field Options
+
+You can customize fields by adding options after the recipient identifier:
+
+### Common Options
+
+| Option      | Values                    | Description                                |
+| ----------- | ------------------------- | ------------------------------------------ |
+| `required`  | `true`, `false`           | Whether the field must be filled           |
+| `readOnly`  | `true`, `false`           | Whether the field is pre-filled and locked |
+| `fontSize`  | Number (e.g., `12`)       | Font size in points                        |
+| `textAlign` | `left`, `center`, `right` | Horizontal text alignment                  |
+
+### Text Field Options
+
+| Option           | Values | Description                           |
+| ---------------- | ------ | ------------------------------------- |
+| `label`          | Text   | Label shown in the field              |
+| `placeholder`    | Text   | Placeholder text shown before signing |
+| `text`           | Text   | Pre-filled text value                 |
+| `characterLimit` | Number | Maximum characters allowed            |
+
+### Number Field Options
+
+| Option         | Values        | Description           |
+| -------------- | ------------- | --------------------- |
+| `value`        | Number        | Pre-filled value      |
+| `minValue`     | Number        | Minimum allowed value |
+| `maxValue`     | Number        | Maximum allowed value |
+| `numberFormat` | Format string | Number display format |
+
+### Examples with Options
+
+```
+{{text, r1, required=true, label=Company Name}}
+{{number, r1, minValue=0, maxValue=100, value=50}}
+{{name, r1, fontSize=14}}
+{{text, r2, readOnly=true, text=Contract #12345}}
+```
+
+<Callout type="info">
+  Signature and Free Signature fields do not support additional options beyond the field type and
+  recipient.
+</Callout>
+
+## Multiple Recipients Example
+
+Here's how a document might look with placeholders for two signers:
+
+```
+AGREEMENT
+
+Party A Signature: {{signature, r1}}
+Party A Name: {{name, r1}}
+Party A Date: {{date, r1}}
+
+Party B Signature: {{signature, r2}}
+Party B Name: {{name, r2}}
+Party B Date: {{date, r2}}
+```
+
+When uploaded, this creates:
+
+- 3 fields assigned to recipient 1 (Party A)
+- 3 fields assigned to recipient 2 (Party B)
+- 2 placeholder recipients that you can update with real email addresses
+
+## Tips for Creating Documents
+
+1. **Use a readable font** - Placeholders need to be readable by the PDF parser. Standard fonts like Arial, Helvetica, or Times New Roman work best.
+
+2. **Don't split placeholders** - Ensure the entire placeholder text `{{...}}` is on a single line and not broken across text boxes.
+
+3. **Size matters** - The field will be sized to match the placeholder text width. Use spaces or longer placeholder text if you need wider fields.
+
+4. **Test with a draft** - Upload your document as a draft first to verify fields are detected correctly before sending.
+
+<Callout type="info">
+  Placeholder detection happens automatically when you upload a PDF. You can review and adjust the
+  created fields in the document editor before sending.
+</Callout>
+
+## Troubleshooting
+
+### Placeholders Not Detected
+
+- Ensure placeholders use double curly braces: `{{...}}`
+- Check that the placeholder includes a recipient identifier (e.g., `r1`)
+- Verify the field type is spelled correctly
+- Try using a standard font in your source document
+
+### Wrong Field Position
+
+- The field is placed at the exact location of the placeholder text
+- If the position seems off, check that your PDF wasn't scaled or reformatted when exported
+
+### Placeholder Text Still Visible
+
+- Placeholder text is covered with a white rectangle after field creation
+- If you see the text, try re-uploading the document

apps/documentation/pages/users/fair-use.mdx

@@ -7,28 +7,41 @@ import { Callout } from 'nextra/components';
 
 # Fair Use Policy
 
-We offer our plans without any limits on volume because we want our users and customers to make the most of their accounts. Estimating volume is incredibly hard, especially for shorter intervals like a quarter. We are not interested in selling volume packages our customers end up not using.
+We like to overdeliver, but we cannot overcommit.
 
-This is why the individual plan and the team plan do not include a limit on signing or API volume. If you are a customer of these [plans](https://documen.so/pricing), we ask you to abide by this fair use policy:
+Our plans are designed to be generous and flexible without forcing customers into rigid volume limits they may never use. At the same time, estimating usage at scale is hard, especially over short periods. This fair use policy exists to keep plans sustainable while allowing us to add more value wherever possible without overformalizing restrictions.
+
+We offer our plans without any limits on volume because we want users and customers to make the most of their accounts. Estimating volume is incredibly hard, especially for shorter intervals like a quarter. We are not interested in selling volume packages our customers end up not using.
+
+This is why our plans not include a limit on signing or API volume. If you are a customer of these plans, we ask you to abide by this fair use policy.
 
 ### Spirit of the Plan
 
-Use the limitless accounts as much as you like (they are meant to offer a lot) while respecting the spirit and intended scope of the account.
+Use the limitless plans as much as you like. They are meant to offer a lot. Please respect the spirit and intended scope of the account.
 
 <Callout type="info">
-  What happens if I violate this policy? We will ask you to upgrade to a fitting plan or custom
-  pricing. We won’t block your account without reaching out. You can [message
-  us](mailto:support@documenso.com) for questions.
+  What happens if I go beyond the scope of this policy? We will ask you to upgrade to a fitting plan
+  or custom pricing. We will not block your account without reaching out. You can message us for
+  questions.
 </Callout>
 
+### Fair Support
+
+We believe in fair support as much as fair usage.
+
+Fair support includes reasonable and within reason application level help for self hosted users. We will help you get unstuck and point you in the right direction when issues come up. Support is provided in good faith and within reasonable time and effort limits. We are not your operations team and cannot take responsibility for running, monitoring, or maintaining your infrastructure.
+
+If you are unsure whether something falls within fair use or fair support, reach out. We are happy to talk it through.
+
 ### DO
 
-- Sign as many documents as you need with the individual plan for your single business or organization you are part of
-- Use the API and automation tools to automate all your signing workflows
-- Experiment with the plans and integrations, testing what you want to build
+- Sign as many documents as you need with the individual plan for your single business or organization
+- Use the API and automation tools to automate your signing workflows
+- Experiment with plans and integrations while testing what you want to build
 
 ### DON'T
 
-- Use the individual account's API to power a platform
-- Run a huge company, signing thousands of documents per day on a two-user team plan using the API
-- Let this policy make you overthink. If you are a paying customer, we want you to win
+- Use an individual account API to power a platform or product
+- Run a large company signing thousands of documents per day on a small team plan
+- Expect enterprise level support for fair support plan
+- Overthink this policy. If you are a paying customer, we want you to win

apps/documentation/pages/users/licenses/enterprise-edition.mdx

@@ -7,20 +7,51 @@ import { Callout } from 'nextra/components';
 
 # Enterprise Edition
 
-The Documenso Enterprise Edition is our license for self-hosters that need the full range of support and compliance. Everything in the EE folder and all features listed [here](https://github.com/documenso/documenso/blob/main/packages/ee/FEATURES) can be used after acquiring a paid license.
-
-## Includes
-
-- Self-Host Documenso in any context.
-- Premium Support via Slack, Discord and Email.
-- Flexible Licensing (e.g. MIT) for deeper custom integration (if needed).
-- Access to all Enterprise-grade compliance and administration features.
-
-## Limitations
-
-The Enterprise Edition currently has no limitations except custom contract terms.
-
 <Callout type="info">
   The Enterprise Edition requires a paid subscription. [Contact us for a
   quote](https://documen.so/enterprise).
 </Callout>
+
+The Documenso Enterprise Edition is our license for self-hosters that need the full range of support and compliance.
+
+The following features are included in the Enterprise Edition:
+
+{/* Keep this synced with the packages/ee/FEATURES file */}
+
+- The Stripe Billing Module
+- Organisation Authentication Portal
+- Document Action Reauthentication (Passkeys and 2FA)
+- 21 CFR
+- Email domains
+- Embed authoring
+- Embed authoring white label
+
+In addition, you will receive:
+
+- Premium Support via Slack, Discord and Email.
+- Flexible Licensing (e.g. MIT) for deeper custom integration (if needed).
+- Access to Enterprise-grade compliance and administration features.
+- Permission to self-Host Documenso in any context.
+
+The Enterprise Edition currently has no limitations except custom contract terms.
+
+## Getting a License
+
+To acquire an Enterprise Edition license, please [contact our sales team](https://documen.so/enterprise) for a quote. Our team will work with you to understand your requirements and provide a license that fits your needs.
+
+## Using Your License
+
+Once you have acquired an Enterprise Edition license:
+
+1. Access your license key at [license.documenso.com](https://license.documenso.com)
+2. Set the `NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY` environment variable in your Documenso instance with your license key
+
+```bash
+NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY="your-license-key-here"
+```
+
+3. You can verify your license status in the Admin Panel under the Stats section.
+
+![Admin License Status](/images/admin-license-status.webp)
+
+Your license will be verified on startup and periodically to ensure continued access to Enterprise features.

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

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { Trans, useLingui } from '@lingui/react/macro';
 import type { z } from 'zod';
 
+import type { TLicenseClaim } from '@documenso/lib/types/license';
 import { generateDefaultSubscriptionClaim } from '@documenso/lib/utils/organisations-claims';
 import { trpc } from '@documenso/trpc/react';
 import type { ZCreateSubscriptionClaimRequestSchema } from '@documenso/trpc/server/admin-router/create-subscription-claim.types';
@@ -22,7 +23,11 @@ import { SubscriptionClaimForm } from '../forms/subscription-claim-form';
 
 export type CreateClaimFormValues = z.infer<typeof ZCreateSubscriptionClaimRequestSchema>;
 
-export const ClaimCreateDialog = () => {
+type ClaimCreateDialogProps = {
+  licenseFlags?: TLicenseClaim;
+};
+
+export const ClaimCreateDialog = ({ licenseFlags }: ClaimCreateDialogProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
 
@@ -67,6 +72,7 @@ export const ClaimCreateDialog = () => {
             ...generateDefaultSubscriptionClaim(),
           }}
           onFormSubmit={createClaim}
+          licenseFlags={licenseFlags}
           formSubmitTrigger={
             <DialogFooter>
               <Button

apps/remix/app/components/dialogs/claim-update-dialog.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 import { Trans, useLingui } from '@lingui/react/macro';
 
+import type { TLicenseClaim } from '@documenso/lib/types/license';
 import { trpc } from '@documenso/trpc/react';
 import type { TFindSubscriptionClaimsResponse } from '@documenso/trpc/server/admin-router/find-subscription-claims.types';
 import { Button } from '@documenso/ui/primitives/button';
@@ -21,9 +22,10 @@ import { SubscriptionClaimForm } from '../forms/subscription-claim-form';
 export type ClaimUpdateDialogProps = {
   claim: TFindSubscriptionClaimsResponse['data'][number];
   trigger: React.ReactNode;
+  licenseFlags?: TLicenseClaim;
 };
 
-export const ClaimUpdateDialog = ({ claim, trigger }: ClaimUpdateDialogProps) => {
+export const ClaimUpdateDialog = ({ claim, trigger, licenseFlags }: ClaimUpdateDialogProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
 
@@ -69,6 +71,7 @@ export const ClaimUpdateDialog = ({ claim, trigger }: ClaimUpdateDialogProps) =>
               data,
             })
           }
+          licenseFlags={licenseFlags}
           formSubmitTrigger={
             <DialogFooter>
               <Button

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

@@ -1,3 +1,5 @@
+import { useRef } from 'react';
+
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
@@ -5,6 +7,7 @@ import { useNavigate } from 'react-router';
 
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcReact } from '@documenso/trpc/react';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -13,7 +16,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
-import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useCurrentTeam } from '~/providers/team';
@@ -38,6 +40,8 @@ export const DocumentDuplicateDialog = ({
 
   const team = useCurrentTeam();
 
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
   const { data: envelopeItemsPayload, isLoading: isLoadingEnvelopeItems } =
     trpcReact.envelope.item.getManyByToken.useQuery(
       {
@@ -95,12 +99,13 @@ export const DocumentDuplicateDialog = ({
             </h1>
           </div>
         ) : (
-          <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll">
-            <PDFViewerLazy
+          <div ref={scrollContainerRef} className="h-[50vh] overflow-y-scroll p-2">
+            <PDFViewer
               key={envelopeItems[0].id}
               envelopeItem={envelopeItems[0]}
               token={undefined}
-              version="original"
+              version="initial"
+              scrollParentRef={scrollContainerRef}
             />
           </div>
         )}

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

@@ -0,0 +1,215 @@
+import { useEffect, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { DocumentStatus, EnvelopeType } from '@prisma/client';
+import { P, match } from 'ts-pattern';
+
+import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type EnvelopeDeleteDialogProps = {
+  id: string;
+  type: EnvelopeType;
+  trigger?: React.ReactNode;
+  onDelete?: () => Promise<void> | void;
+  status: DocumentStatus;
+  title: string;
+  canManageDocument: boolean;
+};
+
+export const EnvelopeDeleteDialog = ({
+  id,
+  type,
+  trigger,
+  onDelete,
+  status,
+  title,
+  canManageDocument,
+}: EnvelopeDeleteDialogProps) => {
+  const { toast } = useToast();
+  const { refreshLimits } = useLimits();
+  const { t } = useLingui();
+
+  const deleteMessage = msg`delete`;
+
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
+
+  const { mutateAsync: deleteEnvelope, isPending } = trpcReact.envelope.delete.useMutation({
+    onSuccess: async () => {
+      void refreshLimits();
+
+      toast({
+        title: t`Document deleted`,
+        description: t`"${title}" has been successfully deleted`,
+        duration: 5000,
+      });
+
+      await onDelete?.();
+
+      setOpen(false);
+    },
+    onError: () => {
+      toast({
+        title: t`Something went wrong`,
+        description: t`This document could not be deleted at this time. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    },
+  });
+
+  useEffect(() => {
+    if (open) {
+      setInputValue('');
+      setIsDeleteEnabled(status === DocumentStatus.DRAFT);
+    }
+  }, [open, status]);
+
+  const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+    setIsDeleteEnabled(event.target.value === t(deleteMessage));
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            {canManageDocument ? (
+              <Trans>
+                You are about to delete <strong>"{title}"</strong>
+              </Trans>
+            ) : (
+              <Trans>
+                You are about to hide <strong>"{title}"</strong>
+              </Trans>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        {canManageDocument ? (
+          <Alert variant="warning" className="-mt-1">
+            {match(status)
+              .with(DocumentStatus.DRAFT, () => (
+                <AlertDescription>
+                  {type === EnvelopeType.DOCUMENT ? (
+                    <Trans>
+                      Please note that this action is <strong>irreversible</strong>. Once confirmed,
+                      this document will be permanently deleted.
+                    </Trans>
+                  ) : (
+                    <Trans>
+                      Please note that this action is <strong>irreversible</strong>. Once confirmed,
+                      this template will be permanently deleted.
+                    </Trans>
+                  )}
+                </AlertDescription>
+              ))
+              .with(DocumentStatus.PENDING, () => (
+                <AlertDescription>
+                  <p>
+                    <Trans>
+                      Please note that this action is <strong>irreversible</strong>.
+                    </Trans>
+                  </p>
+
+                  <p className="mt-1">
+                    <Trans>Once confirmed, the following will occur:</Trans>
+                  </p>
+
+                  <ul className="mt-0.5 list-inside list-disc">
+                    <li>
+                      <Trans>Document will be permanently deleted</Trans>
+                    </li>
+                    <li>
+                      <Trans>Document signing process will be cancelled</Trans>
+                    </li>
+                    <li>
+                      <Trans>All inserted signatures will be voided</Trans>
+                    </li>
+                    <li>
+                      <Trans>All recipients will be notified</Trans>
+                    </li>
+                  </ul>
+                </AlertDescription>
+              ))
+              .with(P.union(DocumentStatus.COMPLETED, DocumentStatus.REJECTED), () => (
+                <AlertDescription>
+                  <p>
+                    <Trans>By deleting this document, the following will occur:</Trans>
+                  </p>
+
+                  <ul className="mt-0.5 list-inside list-disc">
+                    <li>
+                      <Trans>The document will be hidden from your account</Trans>
+                    </li>
+                    <li>
+                      <Trans>Recipients will still retain their copy of the document</Trans>
+                    </li>
+                  </ul>
+                </AlertDescription>
+              ))
+              .exhaustive()}
+          </Alert>
+        ) : (
+          <Alert variant="warning" className="-mt-1">
+            <AlertDescription>
+              <Trans>Please contact support if you would like to revert this action.</Trans>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {status !== DocumentStatus.DRAFT && canManageDocument && (
+          <Input
+            type="text"
+            value={inputValue}
+            onChange={onInputChange}
+            placeholder={t`Please type ${`'${t(deleteMessage)}'`} to confirm`}
+          />
+        )}
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isPending}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button
+            type="button"
+            loading={isPending}
+            onClick={() => void deleteEnvelope({ envelopeId: id })}
+            disabled={!isDeleteEnabled && canManageDocument}
+            variant="destructive"
+          >
+            {canManageDocument ? <Trans>Delete</Trans> : <Trans>Hide</Trans>}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -13,6 +13,7 @@ import * as z from 'zod';
 
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { getRecipientsWithMissingFields } from '@documenso/lib/utils/recipients';
 import { trpc, trpc as trpcReact } from '@documenso/trpc/react';
@@ -116,10 +117,15 @@ export const EnvelopeDistributeDialog = ({
   } = form;
 
   const { data: emailData, isLoading: isLoadingEmails } =
-    trpc.enterprise.organisation.email.find.useQuery({
-      organisationId: organisation.id,
-      perPage: 100,
-    });
+    trpc.enterprise.organisation.email.find.useQuery(
+      {
+        organisationId: organisation.id,
+        perPage: 100,
+      },
+      {
+        ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+      },
+    );
 
   const emails = emailData?.data || [];
 

apps/remix/app/components/dialogs/envelopes-bulk-delete-dialog.tsx

@@ -0,0 +1,170 @@
+import { plural } from '@lingui/core/macro';
+import { Plural, useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { EnvelopeType } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type EnvelopesBulkDeleteDialogProps = {
+  envelopeIds: string[];
+  envelopeType: EnvelopeType;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: () => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const EnvelopesBulkDeleteDialog = ({
+  envelopeIds,
+  envelopeType,
+  open,
+  onOpenChange,
+  onSuccess,
+  ...props
+}: EnvelopesBulkDeleteDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const trpcUtils = trpc.useUtils();
+
+  const isDocument = envelopeType === EnvelopeType.DOCUMENT;
+
+  const { mutateAsync: bulkDeleteEnvelopes, isPending } = trpc.envelope.bulk.delete.useMutation({
+    onSuccess: async (result) => {
+      // Invalidate the appropriate query based on envelope type.
+      if (isDocument) {
+        await trpcUtils.document.findDocumentsInternal.invalidate();
+      } else {
+        await trpcUtils.template.findTemplates.invalidate();
+      }
+
+      if (result.failedIds.length > 0) {
+        toast({
+          title: isDocument ? t`Documents partially deleted` : t`Templates partially deleted`,
+          description: t`${plural(result.deletedCount, {
+            one: '# item deleted.',
+            other: '# items deleted.',
+          })} ${plural(result.failedIds.length, {
+            one: '# item could not be deleted.',
+            other: '# items could not be deleted.',
+          })}`,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: isDocument ? t`Documents deleted` : t`Templates deleted`,
+          description: plural(result.deletedCount, {
+            one: '# item has been deleted.',
+            other: '# items have been deleted.',
+          }),
+          variant: 'default',
+        });
+      }
+
+      onSuccess?.();
+      onOpenChange(false);
+    },
+    onError: () => {
+      toast({
+        title: t`Error`,
+        description: t`An error occurred while deleting the items.`,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  return (
+    <Dialog {...props} open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {isDocument ? <Trans>Delete Documents</Trans> : <Trans>Delete Templates</Trans>}
+          </DialogTitle>
+
+          <DialogDescription>
+            {isDocument ? (
+              <Plural
+                value={envelopeIds.length}
+                one="You are about to delete the selected document."
+                other="You are about to delete # documents."
+              />
+            ) : (
+              <Plural
+                value={envelopeIds.length}
+                one="You are about to delete the selected template."
+                other="You are about to delete # templates."
+              />
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="warning">
+          <AlertDescription>
+            <p>
+              <Trans>
+                Please note that this action is <strong>irreversible</strong>.
+              </Trans>
+            </p>
+
+            <p className="mt-1">
+              <Trans>Once confirmed, the following will occur:</Trans>
+            </p>
+
+            <ul className="mt-0.5 list-inside list-disc">
+              {isDocument ? (
+                <>
+                  <li>
+                    <Trans>Selected documents will be permanently deleted</Trans>
+                  </li>
+                  <li>
+                    <Trans>Pending documents will have their signing process cancelled</Trans>
+                  </li>
+                  <li>
+                    <Trans>All recipients will be notified</Trans>
+                  </li>
+                </>
+              ) : (
+                <>
+                  <li>
+                    <Trans>Selected templates will be permanently deleted</Trans>
+                  </li>
+                  <li>
+                    <Trans>Direct links associated with templates will be removed</Trans>
+                  </li>
+                </>
+              )}
+            </ul>
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" disabled={isPending}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button
+            onClick={(e) => {
+              e.preventDefault();
+              void bulkDeleteEnvelopes({ envelopeIds });
+            }}
+            loading={isPending}
+            variant="destructive"
+          >
+            <Trans>Delete</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelopes-bulk-move-dialog.tsx

@@ -0,0 +1,256 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Plural, useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { EnvelopeType } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { FolderIcon, HomeIcon, Loader2, Search } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type EnvelopesBulkMoveDialogProps = {
+  envelopeIds: string[];
+  envelopeType: EnvelopeType;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentFolderId?: string;
+  onSuccess?: () => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZBulkMoveFormSchema = z.object({
+  folderId: z.string().nullable(),
+});
+
+type TBulkMoveFormSchema = z.infer<typeof ZBulkMoveFormSchema>;
+
+export const EnvelopesBulkMoveDialog = ({
+  envelopeIds,
+  envelopeType,
+  open,
+  onOpenChange,
+  currentFolderId,
+  onSuccess,
+  ...props
+}: EnvelopesBulkMoveDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const form = useForm<TBulkMoveFormSchema>({
+    resolver: zodResolver(ZBulkMoveFormSchema),
+    defaultValues: {
+      folderId: currentFolderId ?? null,
+    },
+  });
+
+  const isDocument = envelopeType === EnvelopeType.DOCUMENT;
+
+  const { data: folders, isLoading: isFoldersLoading } = trpc.folder.findFoldersInternal.useQuery(
+    {
+      parentId: currentFolderId,
+      type: envelopeType,
+    },
+    {
+      enabled: open,
+    },
+  );
+
+  const { mutateAsync: bulkMoveEnvelopes } = trpc.envelope.bulk.move.useMutation();
+
+  const trpcUtils = trpc.useUtils();
+
+  useEffect(() => {
+    if (open) {
+      setSearchTerm('');
+
+      form.reset({
+        folderId: currentFolderId,
+      });
+    }
+  }, [open, currentFolderId]);
+
+  const onSubmit = async (data: TBulkMoveFormSchema) => {
+    try {
+      await bulkMoveEnvelopes({
+        envelopeIds,
+        folderId: data.folderId,
+        envelopeType,
+      });
+
+      // Invalidate the appropriate query based on envelope type.
+      if (isDocument) {
+        await trpcUtils.document.findDocumentsInternal.invalidate();
+      } else {
+        await trpcUtils.template.findTemplates.invalidate();
+      }
+
+      toast({
+        description: t`Selected items have been moved.`,
+      });
+
+      onSuccess?.();
+      onOpenChange(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(
+          AppErrorCode.NOT_FOUND,
+          () => t`The folder you are trying to move the items to does not exist.`,
+        )
+        .with(AppErrorCode.UNAUTHORIZED, () => t`You are not allowed to move these items.`)
+        .with(AppErrorCode.INVALID_BODY, () => t`All items must be of the same type.`)
+        .otherwise(() => t`An error occurred while moving the items.`);
+
+      toast({
+        description: errorMessage,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const filteredFolders = folders?.data.filter((folder) =>
+    folder.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  return (
+    <Dialog {...props} open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {isDocument ? (
+              <Trans>Move Documents to Folder</Trans>
+            ) : (
+              <Trans>Move Templates to Folder</Trans>
+            )}
+          </DialogTitle>
+
+          <DialogDescription>
+            {isDocument ? (
+              <Plural
+                value={envelopeIds.length}
+                one="Select a folder to move the selected document to."
+                other="Select a folder to move the # selected documents to."
+              />
+            ) : (
+              <Plural
+                value={envelopeIds.length}
+                one="Select a folder to move the selected template to."
+                other="Select a folder to move the # selected templates to."
+              />
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="relative">
+          <Search className="absolute left-2 top-3 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder={t`Search folders...`}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-8"
+          />
+        </div>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
+            <FormField
+              control={form.control}
+              name="folderId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>Folder</Trans>
+                  </FormLabel>
+
+                  <FormControl>
+                    <div className="max-h-96 space-y-2 overflow-y-auto">
+                      {isFoldersLoading ? (
+                        <div className="flex h-10 items-center justify-center">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                        </div>
+                      ) : (
+                        <>
+                          <Button
+                            type="button"
+                            variant={field.value === null ? 'default' : 'outline'}
+                            className="w-full justify-start"
+                            onClick={() => field.onChange(null)}
+                            disabled={currentFolderId === undefined}
+                          >
+                            <HomeIcon className="mr-2 h-4 w-4" />
+                            <Trans>Home (No Folder)</Trans>
+                          </Button>
+
+                          {filteredFolders?.map((folder) => (
+                            <Button
+                              key={folder.id}
+                              type="button"
+                              variant={field.value === folder.id ? 'default' : 'outline'}
+                              className="w-full justify-start"
+                              onClick={() => field.onChange(folder.id)}
+                              disabled={currentFolderId === folder.id}
+                            >
+                              <FolderIcon className="mr-2 h-4 w-4" />
+                              {folder.name}
+                            </Button>
+                          ))}
+
+                          {searchTerm && filteredFolders?.length === 0 && (
+                            <div className="px-2 py-2 text-center text-sm text-muted-foreground">
+                              <Trans>No folders found</Trans>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="submit"
+                disabled={isFoldersLoading || form.formState.isSubmitting}
+                loading={form.formState.isSubmitting}
+              >
+                <Trans>Move</Trans>
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/team-member-create-dialog.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { TeamMemberRole } from '@prisma/client';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { InfoIcon } from 'lucide-react';
+import { InfoIcon, UserPlusIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';
@@ -13,6 +13,7 @@ import { z } from 'zod';
 import { TEAM_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/teams';
 import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
 import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -44,6 +45,7 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { OrganisationMemberInviteDialog } from '~/components/dialogs/organisation-member-invite-dialog';
 import { useCurrentTeam } from '~/providers/team';
 
 export type TeamMemberCreateDialogProps = {
@@ -64,11 +66,14 @@ type TAddTeamMembersFormSchema = z.infer<typeof ZAddTeamMembersFormSchema>;
 export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDialogProps) => {
   const [open, setOpen] = useState(false);
   const [step, setStep] = useState<'SELECT' | 'MEMBERS'>('SELECT');
+  const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
+  const prevInviteDialogOpenRef = useRef(false);
 
   const { t } = useLingui();
   const { toast } = useToast();
 
   const team = useCurrentTeam();
+  const utils = trpc.useUtils();
 
   const form = useForm<TAddTeamMembersFormSchema>({
     resolver: zodResolver(ZAddTeamMembersFormSchema),
@@ -96,7 +101,29 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
     );
   }, [organisationMemberQuery, teamMemberQuery]);
 
+  const hasNoAvailableMembers =
+    !organisationMemberQuery.isLoading && avaliableOrganisationMembers.length === 0;
+
   const onFormSubmit = async ({ members }: TAddTeamMembersFormSchema) => {
+    if (members.length === 0) {
+      if (hasNoAvailableMembers) {
+        setInviteDialogOpen(true);
+        return;
+      }
+
+      // Don't show error if on SELECT step - the disabled Next button already communicates this
+      if (step === 'SELECT') {
+        return;
+      }
+
+      toast({
+        title: t`No members selected`,
+        description: t`Please select at least one member to add to the team.`,
+        variant: 'destructive',
+      });
+      return;
+    }
+
     try {
       await createTeamMembers({
         teamId: team.id,
@@ -123,9 +150,20 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
     if (!open) {
       form.reset();
       setStep('SELECT');
+      setInviteDialogOpen(false);
     }
   }, [open, form]);
 
+  // Invalidate queries when invite dialog closes (transitions from true to false) to refresh available members
+  useEffect(() => {
+    if (prevInviteDialogOpenRef.current && !inviteDialogOpen) {
+      void utils.organisation.member.find.invalidate({
+        organisationId: team.organisationId,
+      });
+    }
+    prevInviteDialogOpenRef.current = inviteDialogOpen;
+  }, [inviteDialogOpen, utils, team.organisationId]);
+
   return (
     <Dialog
       {...props}
@@ -134,9 +172,11 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
       // Since it would be annoying to redo the whole process.
     >
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
-        <Button variant="secondary" onClick={() => setOpen(true)}>
-          <Trans>Add members</Trans>
-        </Button>
+        {trigger ?? (
+          <Button variant="secondary" onClick={() => setOpen(true)}>
+            <Trans>Add members</Trans>
+          </Button>
+        )}
       </DialogTrigger>
 
       <DialogContent hideClose={true} position="center">
@@ -149,7 +189,7 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
                   <TooltipTrigger asChild>
                     <InfoIcon className="mx-2 h-4 w-4" />
                   </TooltipTrigger>
-                  <TooltipContent className="text-muted-foreground z-[99999] max-w-xs">
+                  <TooltipContent className="z-[99999] max-w-xs text-muted-foreground">
                     <Trans>
                       To be able to add members to a team, you must first add them to the
                       organisation. For more information, please see the{' '}
@@ -186,7 +226,18 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
           .exhaustive()}
 
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+          <form
+            onSubmit={form.handleSubmit(onFormSubmit)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && form.getValues('members').length === 0) {
+                e.preventDefault();
+                if (hasNoAvailableMembers) {
+                  setInviteDialogOpen(true);
+                }
+                // Don't show toast - the disabled Next button already communicates this
+              }
+            }}
+          >
             <fieldset disabled={form.formState.isSubmitting}>
               {step === 'SELECT' && (
                 <>
@@ -194,46 +245,102 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
                     control={form.control}
                     name="members"
                     render={({ field }) => (
-                      <FormItem>
+                      <FormItem className="space-y-2">
                         <FormLabel>
                           <Trans>Members</Trans>
                         </FormLabel>
 
                         <FormControl>
-                          <MultiSelectCombobox
-                            options={avaliableOrganisationMembers.map((member) => ({
-                              label: member.name,
-                              value: member.id,
-                            }))}
-                            loading={organisationMemberQuery.isLoading}
-                            selectedValues={field.value.map(
-                              (member) => member.organisationMemberId,
-                            )}
-                            onChange={(value) => {
-                              field.onChange(
-                                value.map((organisationMemberId) => ({
-                                  organisationMemberId,
-                                  teamRole:
-                                    field.value.find(
-                                      (member) =>
-                                        member.organisationMemberId === organisationMemberId,
-                                    )?.teamRole || TeamMemberRole.MEMBER,
-                                })),
-                              );
-                            }}
-                            className="bg-background w-full"
-                            emptySelectionPlaceholder={t`Select members`}
-                          />
+                          {hasNoAvailableMembers ? (
+                            <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-muted-foreground/25 bg-muted/30 px-6 py-12 text-center">
+                              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+                                <UserPlusIcon className="h-6 w-6 text-muted-foreground" />
+                              </div>
+                              <h3 className="mb-2 text-sm font-semibold">
+                                <Trans>No organisation members available</Trans>
+                              </h3>
+                              <p className="mb-6 max-w-sm text-sm text-muted-foreground">
+                                <Trans>
+                                  To add members to this team, you must first add them to the
+                                  organisation.
+                                </Trans>
+                              </p>
+                              <OrganisationMemberInviteDialog
+                                open={inviteDialogOpen}
+                                onOpenChange={setInviteDialogOpen}
+                                trigger={
+                                  <Button type="button" variant="default">
+                                    <UserPlusIcon className="mr-2 h-4 w-4" />
+                                    <Trans>Invite organisation members</Trans>
+                                  </Button>
+                                }
+                              />
+                            </div>
+                          ) : (
+                            <MultiSelectCombobox
+                              options={avaliableOrganisationMembers.map((member) => ({
+                                label: member.name,
+                                value: member.id,
+                              }))}
+                              loading={organisationMemberQuery.isLoading}
+                              selectedValues={field.value.map(
+                                (member) => member.organisationMemberId,
+                              )}
+                              onChange={(value) => {
+                                field.onChange(
+                                  value.map((organisationMemberId) => ({
+                                    organisationMemberId,
+                                    teamRole:
+                                      field.value.find(
+                                        (member) =>
+                                          member.organisationMemberId === organisationMemberId,
+                                      )?.teamRole || TeamMemberRole.MEMBER,
+                                  })),
+                                );
+                              }}
+                              className="w-full bg-background"
+                              emptySelectionPlaceholder={t`Select members`}
+                            />
+                          )}
                         </FormControl>
 
-                        <FormDescription>
-                          <Trans>Select members to add to this team</Trans>
-                        </FormDescription>
+                        {!hasNoAvailableMembers && (
+                          <>
+                            <FormDescription>
+                              <Trans>Select members to add to this team</Trans>
+                            </FormDescription>
+
+                            <Alert
+                              variant="neutral"
+                              className="mt-2 flex items-center gap-2 space-y-0"
+                            >
+                              <div>
+                                <UserPlusIcon className="h-5 w-5 text-muted-foreground" />
+                              </div>
+                              <AlertDescription className="mt-0 flex-1">
+                                <Trans>Can't find someone?</Trans>{' '}
+                                <OrganisationMemberInviteDialog
+                                  open={inviteDialogOpen}
+                                  onOpenChange={setInviteDialogOpen}
+                                  trigger={
+                                    <Button
+                                      type="button"
+                                      variant="link"
+                                      className="h-auto p-0 text-sm font-medium text-documenso-700 hover:text-documenso-600"
+                                    >
+                                      <Trans>Invite them to the organisation first</Trans>
+                                    </Button>
+                                  }
+                                />
+                              </AlertDescription>
+                            </Alert>
+                          </>
+                        )}
                       </FormItem>
                     )}
                   />
 
-                  <DialogFooter>
+                  <DialogFooter className="mt-4">
                     <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
                       <Trans>Cancel</Trans>
                     </Button>

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

@@ -8,6 +8,8 @@ import { useDropzone } from 'react-dropzone';
 import { useFormContext } from 'react-hook-form';
 
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import { PDF_IMAGE_RENDER_SCALE } from '@documenso/lib/constants/pdf-viewer';
+import { pdfToImagesClientSide } from '@documenso/lib/server-only/ai/pdf-to-images.client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -52,12 +54,17 @@ export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocum
       const arrayBuffer = await file.arrayBuffer();
       const uint8Array = new Uint8Array(arrayBuffer);
 
+      const pdfImages = await pdfToImagesClientSide(uint8Array, {
+        scale: PDF_IMAGE_RENDER_SCALE,
+      });
+
       // Store file metadata and UInt8Array in form data
       form.setValue('documentData', {
         name: file.name,
         type: file.type,
         size: file.size,
         data: uint8Array, // Store as UInt8Array
+        images: pdfImages,
       });
 
       // Auto-populate title if it's empty
@@ -144,7 +151,7 @@ export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocum
                     <div
                       {...getRootProps()}
                       className={cn(
-                        'border-border bg-background relative flex min-h-[160px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed transition',
+                        'relative flex min-h-[160px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-border bg-background transition',
                         {
                           'border-primary/50 bg-primary/5': isDragActive,
                           'hover:bg-muted/30':
@@ -193,21 +200,21 @@ export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocum
                   </FormControl>
 
                   {isLoading && (
-                    <div className="bg-background/50 absolute inset-0 flex items-center justify-center rounded-lg">
-                      <Loader className="text-muted-foreground h-10 w-10 animate-spin" />
+                    <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background/50">
+                      <Loader className="h-10 w-10 animate-spin text-muted-foreground" />
                     </div>
                   )}
                 </div>
               ) : (
                 <div className="mt-2 rounded-lg border p-4">
                   <div className="flex items-center gap-x-4">
-                    <div className="bg-primary/10 text-primary flex h-12 w-12 items-center justify-center rounded-md">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-md bg-primary/10 text-primary">
                       <FileText className="h-6 w-6" />
                     </div>
 
                     <div className="flex-1">
                       <div className="text-sm font-medium">{documentData.name}</div>
-                      <div className="text-muted-foreground text-xs">
+                      <div className="text-xs text-muted-foreground">
                         {formatFileSize(documentData.size)}
                       </div>
                     </div>

apps/remix/app/components/embed/authoring/configure-document-view.types.ts

@@ -46,6 +46,13 @@ export const ZConfigureEmbedFormSchema = z.object({
       type: z.string(),
       size: z.number(),
       data: z.instanceof(Uint8Array), // UInt8Array can't be directly validated by zod
+      images: z
+        .object({
+          width: z.number(),
+          height: z.number(),
+          image: z.string(),
+        })
+        .array(),
     })
     .optional(),
 });

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

@@ -5,7 +5,6 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 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';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -16,6 +15,7 @@ import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import { nanoid } from '@documenso/lib/universal/id';
 import { ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING } from '@documenso/lib/utils/advanced-fields-helpers';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 import { useRecipientColors } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -24,7 +24,6 @@ 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 { 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';
@@ -84,7 +83,7 @@ export const ConfigureFieldsView = ({
     };
   }, []);
 
-  const normalizedDocumentData = useMemo(() => {
+  const overrideImages = useMemo(() => {
     if (envelopeItem) {
       return undefined;
     }
@@ -93,7 +92,7 @@ export const ConfigureFieldsView = ({
       return undefined;
     }
 
-    return base64.encode(configData.documentData.data);
+    return configData.documentData.images;
   }, [configData.documentData]);
 
   const normalizedEnvelopeItem = useMemo(() => {
@@ -546,12 +545,13 @@ export const ConfigureFieldsView = ({
 
             <Form {...form}>
               <div>
-                <PDFViewerLazy
+                <PDFViewer
                   presignToken={presignToken}
-                  overrideData={normalizedDocumentData}
+                  overrideImages={overrideImages}
                   envelopeItem={normalizedEnvelopeItem}
                   token={undefined}
-                  version="signed"
+                  version="current"
+                  scrollParentRef="window"
                 />
 
                 <ElementVisible

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

@@ -31,11 +31,11 @@ import type {
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 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 { 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';
 
@@ -341,10 +341,11 @@ 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">
-          <PDFViewerLazy
+          <PDFViewer
             envelopeItem={envelopeItems[0]}
             token={recipient.token}
-            version="signed"
+            version="current"
+            scrollParentRef="window"
             onDocumentLoad={() => setHasDocumentLoaded(true)}
           />
         </div>

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

@@ -19,11 +19,11 @@ import {
   DocumentReadOnlyFields,
 } from '@documenso/ui/components/document/document-read-only-fields';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 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 { 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';
@@ -287,10 +287,11 @@ 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">
-            <PDFViewerLazy
+            <PDFViewer
               envelopeItem={envelopeItems[0]}
               token={token}
-              version="signed"
+              version="current"
+              scrollParentRef="window"
               onDocumentLoad={() => setHasDocumentLoaded(true)}
             />
           </div>

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -17,12 +17,12 @@ import type {
 } from '@documenso/trpc/server/field-router/schema';
 import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 import { cn } from '@documenso/ui/lib/utils';
 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 { 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';
 
@@ -66,6 +66,8 @@ export const MultiSignDocumentSigningView = ({
 
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
 
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
   const [isExpanded, setIsExpanded] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
@@ -179,7 +181,11 @@ export const MultiSignDocumentSigningView = ({
 
   return (
     <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">
+      <div
+        id="document-field-portal-root"
+        ref={scrollContainerRef}
+        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">
@@ -226,10 +232,11 @@ export const MultiSignDocumentSigningView = ({
                     'md:mx-auto md:max-w-2xl': document.status === DocumentStatus.COMPLETED,
                   })}
                 >
-                  <PDFViewerLazy
+                  <PDFViewer
                     envelopeItem={document.envelopeItems[0]}
                     token={token}
-                    version="signed"
+                    version="current"
+                    scrollParentRef={scrollContainerRef}
                     onDocumentLoad={() => {
                       setHasDocumentLoaded(true);
                       onDocumentReady?.();

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

@@ -402,7 +402,7 @@ export const SignUpForm = ({
               size="lg"
               className="mt-6 w-full"
             >
-              <Trans>Complete</Trans>
+              <Trans>Create account</Trans>
             </Button>
           </form>
         </Form>

apps/remix/app/components/forms/subscription-claim-form.tsx

@@ -2,10 +2,13 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
 import type { SubscriptionClaim } from '@prisma/client';
 import { useForm } from 'react-hook-form';
+import { Link } from 'react-router';
 import type { z } from 'zod';
 
+import type { TLicenseClaim } from '@documenso/lib/types/license';
 import { SUBSCRIPTION_CLAIM_FEATURE_FLAGS } from '@documenso/lib/types/subscription';
 import { ZCreateSubscriptionClaimRequestSchema } from '@documenso/trpc/server/admin-router/create-subscription-claim.types';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
   Form,
@@ -24,15 +27,22 @@ type SubscriptionClaimFormProps = {
   subscriptionClaim: Omit<SubscriptionClaim, 'id' | 'createdAt' | 'updatedAt'>;
   onFormSubmit: (data: SubscriptionClaimFormValues) => Promise<void>;
   formSubmitTrigger?: React.ReactNode;
+  licenseFlags?: TLicenseClaim;
 };
 
 export const SubscriptionClaimForm = ({
   subscriptionClaim,
   onFormSubmit,
   formSubmitTrigger,
+  licenseFlags,
 }: SubscriptionClaimFormProps) => {
   const { t } = useLingui();
 
+  const hasRestrictedEnterpriseFeatures = Object.values(SUBSCRIPTION_CLAIM_FEATURE_FLAGS).some(
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    (flag) => flag.isEnterprise && !licenseFlags?.[flag.key as keyof TLicenseClaim],
+  );
+
   const form = useForm<SubscriptionClaimFormValues>({
     resolver: zodResolver(ZCreateSubscriptionClaimRequestSchema),
     defaultValues: {
@@ -142,34 +152,59 @@ export const SubscriptionClaimForm = ({
             </FormLabel>
 
             <div className="mt-2 space-y-2 rounded-md border p-4">
-              {Object.values(SUBSCRIPTION_CLAIM_FEATURE_FLAGS).map(({ key, label }) => (
-                <FormField
-                  key={key}
-                  control={form.control}
-                  name={`flags.${key}`}
-                  render={({ field }) => (
-                    <FormItem className="flex items-center space-x-2">
-                      <FormControl>
-                        <div className="flex items-center">
-                          <Checkbox
-                            id={`flag-${key}`}
-                            checked={field.value}
-                            onCheckedChange={field.onChange}
-                          />
+              {Object.values(SUBSCRIPTION_CLAIM_FEATURE_FLAGS).map(
+                ({ key, label, isEnterprise }) => {
+                  const isRestrictedFeature =
+                    isEnterprise && !licenseFlags?.[key as keyof TLicenseClaim]; // eslint-disable-line @typescript-eslint/consistent-type-assertions
 
-                          <label
-                            className="text-muted-foreground ml-2 flex flex-row items-center text-sm"
-                            htmlFor={`flag-${key}`}
-                          >
-                            {label}
-                          </label>
-                        </div>
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
-              ))}
+                  return (
+                    <FormField
+                      key={key}
+                      control={form.control}
+                      name={`flags.${key}`}
+                      render={({ field }) => (
+                        <FormItem className="flex items-center space-x-2">
+                          <FormControl>
+                            <div className="flex items-center">
+                              <Checkbox
+                                id={`flag-${key}`}
+                                checked={field.value}
+                                onCheckedChange={field.onChange}
+                                disabled={isRestrictedFeature && !field.value} // Allow disabling of restricted features.
+                              />
+
+                              <label
+                                className="ml-2 flex flex-row items-center text-sm text-muted-foreground"
+                                htmlFor={`flag-${key}`}
+                              >
+                                {label}
+                                {isRestrictedFeature && ' ¹'}
+                              </label>
+                            </div>
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  );
+                },
+              )}
             </div>
+
+            {hasRestrictedEnterpriseFeatures && (
+              <Alert variant="neutral" className="mt-4">
+                <AlertDescription>
+                  <span>¹&nbsp;</span>
+                  <Trans>Your current license does not include these features.</Trans>{' '}
+                  <Link
+                    to="https://docs.documenso.com/users/licenses/enterprise-edition"
+                    target="_blank"
+                    className="text-foreground underline hover:opacity-80"
+                  >
+                    <Trans>Learn more</Trans>
+                  </Link>
+                </AlertDescription>
+              </Alert>
+            )}
           </div>
 
           {formSubmitTrigger}

apps/remix/app/components/general/admin-license-card.tsx

@@ -0,0 +1,212 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+import {
+  ArrowRightIcon,
+  CheckCircle2Icon,
+  KeyRoundIcon,
+  Loader2Icon,
+  RefreshCwIcon,
+  XCircleIcon,
+} from 'lucide-react';
+import { DateTime } from 'luxon';
+import { Link, useRevalidator } from 'react-router';
+import { match } from 'ts-pattern';
+
+import type { TCachedLicense } from '@documenso/lib/types/license';
+import { SUBSCRIPTION_CLAIM_FEATURE_FLAGS } from '@documenso/lib/types/subscription';
+import { trpc } from '@documenso/trpc/react';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { CardMetric } from './metric-card';
+
+type AdminLicenseCardProps = {
+  licenseData: TCachedLicense | null;
+};
+
+export const AdminLicenseCard = ({ licenseData }: AdminLicenseCardProps) => {
+  const { t, i18n } = useLingui();
+
+  const { license } = licenseData || {};
+
+  if (!license) {
+    return (
+      <div className="relative">
+        <div className="absolute right-3 top-3 z-10">
+          <AdminLicenseResyncButton />
+        </div>
+        <CardMetric icon={KeyRoundIcon} title={t`License`} className="h-fit max-h-fit">
+          <div className="mt-1 flex items-center justify-center gap-2">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-dashed border-muted-foreground/30 bg-muted/50">
+              <KeyRoundIcon className="h-5 w-5 text-muted-foreground/50" />
+            </div>
+
+            <div className="flex flex-col gap-0.5">
+              {licenseData?.requestedLicenseKey ? (
+                <>
+                  <p className="text-sm font-medium text-destructive">
+                    <Trans>Invalid License Key</Trans>
+                  </p>
+                  <p className="text-xs text-muted-foreground">{licenseData.requestedLicenseKey}</p>
+                </>
+              ) : (
+                <p className="text-sm font-medium text-muted-foreground">
+                  <Trans>No License Configured</Trans>
+                </p>
+              )}
+
+              <Link
+                to="https://docs.documenso.com/users/licenses/enterprise-edition"
+                target="_blank"
+                className="flex flex-row items-center text-xs text-muted-foreground hover:text-muted-foreground/80"
+              >
+                <Trans>Learn more</Trans> <ArrowRightIcon className="h-3 w-3" />
+              </Link>
+            </div>
+          </div>
+        </CardMetric>
+      </div>
+    );
+  }
+
+  const enabledFlags = Object.entries(license.flags).filter(([, enabled]) => enabled);
+
+  return (
+    <div className="relative max-w-full overflow-hidden rounded-lg border border-border bg-background px-4 pb-6 pt-4 shadow shadow-transparent duration-200 hover:shadow-border/80">
+      <div className="absolute right-3 top-3">
+        <AdminLicenseResyncButton />
+      </div>
+
+      <div className="flex items-start gap-2">
+        <div className="h-4 w-4">
+          <KeyRoundIcon className="h-4 w-4 text-muted-foreground" />
+        </div>
+
+        <h3 className="text-primary-forground mb-2 flex items-end text-sm font-medium leading-tight">
+          <Trans>Documenso License</Trans>
+        </h3>
+
+        {match(license.status)
+          .with('ACTIVE', () => (
+            <Badge variant="default" size="small">
+              <CheckCircle2Icon className="mr-1 h-3 w-3" />
+              <Trans context="Subscription status">Active</Trans>
+            </Badge>
+          ))
+          .with('PAST_DUE', () => (
+            <Badge variant="warning" size="small">
+              <XCircleIcon className="mr-1 h-3 w-3" />
+              <Trans context="Subscription status">Past Due</Trans>
+            </Badge>
+          ))
+          .with('EXPIRED', () => (
+            <Badge variant="destructive" size="small">
+              <XCircleIcon className="mr-1 h-3 w-3" />
+              <Trans context="Subscription status">Expired</Trans>
+            </Badge>
+          ))
+          .otherwise(() => null)}
+      </div>
+
+      <div className="mt-4 grid grid-cols-2 gap-4">
+        <div>
+          <p className="text-sm font-medium text-foreground">
+            <Trans>License</Trans>
+          </p>
+          <p className="mt-0.5 text-xs text-muted-foreground">{license.name}</p>
+        </div>
+
+        <div>
+          <p className="text-sm font-medium text-foreground">
+            <Trans>Expires</Trans>
+          </p>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            {i18n.date(license.periodEnd, DateTime.DATE_MED)}
+          </p>
+        </div>
+
+        <div>
+          <p className="text-sm font-medium text-foreground">
+            <Trans>License Key</Trans>
+          </p>
+          <p className="mt-0.5 text-xs text-muted-foreground">{license.licenseKey}</p>
+        </div>
+
+        <div>
+          <p className="text-sm font-medium text-foreground">
+            <Trans>Features</Trans>
+          </p>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            {enabledFlags.length > 0 ? (
+              enabledFlags
+                .map(
+                  ([flag]) =>
+                    SUBSCRIPTION_CLAIM_FEATURE_FLAGS[
+                      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                      flag as keyof typeof SUBSCRIPTION_CLAIM_FEATURE_FLAGS
+                    ]?.label || flag,
+                )
+                .join(', ')
+            ) : (
+              <Trans>No features enabled</Trans>
+            )}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const AdminLicenseResyncButton = () => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const { mutate: resyncLicense, isPending: isResyncingLicense } =
+    trpc.admin.license.resync.useMutation({
+      onSuccess: async () => {
+        toast({
+          title: t`License synced`,
+        });
+
+        await revalidate();
+      },
+      onError: () => {
+        toast({
+          title: t`Failed to sync license`,
+          variant: 'destructive',
+        });
+      },
+    });
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 w-8 p-0"
+            disabled={isResyncingLicense}
+            onClick={() => resyncLicense()}
+          >
+            {isResyncingLicense ? (
+              <Loader2Icon className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCwIcon className="h-4 w-4" />
+            )}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <Trans>Sync license from server</Trans>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};

apps/remix/app/components/general/admin-license-status-banner.tsx

@@ -0,0 +1,78 @@
+import { Trans } from '@lingui/react/macro';
+import { AlertTriangleIcon, KeyRoundIcon } from 'lucide-react';
+import { Link } from 'react-router';
+import { match } from 'ts-pattern';
+
+import type { TCachedLicense } from '@documenso/lib/types/license';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type AdminLicenseStatusBannerProps = {
+  license: TCachedLicense | null;
+};
+
+export const AdminLicenseStatusBanner = ({ license }: AdminLicenseStatusBannerProps) => {
+  const licenseStatus = license?.derivedStatus;
+
+  if (!license || licenseStatus === 'ACTIVE' || licenseStatus === 'NOT_FOUND') {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn('mb-8 rounded-lg bg-yellow-200 text-yellow-900 dark:bg-yellow-400', {
+        'bg-destructive text-destructive-foreground':
+          licenseStatus === 'EXPIRED' || licenseStatus === 'UNAUTHORIZED',
+      })}
+    >
+      <div className="flex items-center justify-between gap-x-4 px-4 py-3 text-sm font-medium">
+        <div className="flex items-center">
+          <AlertTriangleIcon className="mr-2.5 h-5 w-5" />
+
+          {match(licenseStatus)
+            .with('PAST_DUE', () => (
+              <Trans>
+                License Payment Overdue - Please update your payment to avoid service disruptions.
+              </Trans>
+            ))
+            .with('EXPIRED', () => (
+              <Trans>
+                License Expired - Please renew your license to continue using enterprise features.
+              </Trans>
+            ))
+            .with('UNAUTHORIZED', () =>
+              license ? (
+                <Trans>
+                  Invalid License Type - Your Documenso instance is using features that are not part
+                  of your license.
+                </Trans>
+              ) : (
+                <Trans>
+                  Missing License - Your Documenso instance is using features that require a
+                  license.
+                </Trans>
+              ),
+            )
+            .otherwise(() => null)}
+        </div>
+
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn({
+            'border-yellow-900/30 text-yellow-900 hover:bg-yellow-100 dark:hover:bg-yellow-500':
+              licenseStatus === 'PAST_DUE',
+            'border-destructive-foreground/30 text-destructive-foreground hover:bg-destructive/80':
+              licenseStatus === 'EXPIRED' || licenseStatus === 'UNAUTHORIZED',
+          })}
+          asChild
+        >
+          <Link to="https://docs.documenso.com/users/licenses/enterprise-edition" target="_blank">
+            <KeyRoundIcon className="mr-1.5 h-4 w-4" />
+            <Trans>See Documentation</Trans>
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/default-recipients-multiselect-combobox.tsx

@@ -1,10 +1,13 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans, useLingui as useLinguiMacro } from '@lingui/react/macro';
 import { RecipientRole } from '@prisma/client';
 
 import type { TDefaultRecipient } from '@documenso/lib/types/default-recipients';
+import { isRecipientEmailValidForSending } from '@documenso/lib/utils/recipients';
 import { trpc } from '@documenso/trpc/react';
 import { MultiSelect, type Option } from '@documenso/ui/primitives/multiselect';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 type DefaultRecipientsMultiSelectComboboxProps = {
   listValues: TDefaultRecipient[];
@@ -20,6 +23,8 @@ export const DefaultRecipientsMultiSelectCombobox = ({
   organisationId,
 }: DefaultRecipientsMultiSelectComboboxProps) => {
   const { _ } = useLingui();
+  const { t } = useLinguiMacro();
+  const { toast } = useToast();
 
   const { data: organisationData, isLoading: isLoadingOrganisation } =
     trpc.organisation.member.find.useQuery(
@@ -60,31 +65,56 @@ export const DefaultRecipientsMultiSelectCombobox = ({
   }));
 
   const onSelectionChange = (selected: Option[]) => {
-    const updatedRecipients = selected.map((option) => {
-      const existingRecipient = listValues.find((r) => r.email === option.value);
-      const member = members?.find((m) => m.email === option.value);
+    const invalidEmails = selected.filter(
+      (option) => !isRecipientEmailValidForSending({ email: option.value }),
+    );
 
-      return {
-        email: option.value,
-        name: member?.name || option.value,
-        role: existingRecipient?.role ?? RecipientRole.CC,
-      };
-    });
+    if (invalidEmails.length > 0) {
+      toast({
+        title: t`Invalid email`,
+        description: t`"${invalidEmails[0].value}" is not a valid email address.`,
+        variant: 'destructive',
+      });
+    }
+
+    const updatedRecipients = selected
+      .filter((option) => !invalidEmails.includes(option))
+      .map((option) => {
+        const existingRecipient = listValues.find((r) => r.email === option.value);
+        const member = members?.find((m) => m.email === option.value);
+
+        return {
+          email: option.value,
+          name: member?.name || option.value,
+          role: existingRecipient?.role ?? RecipientRole.CC,
+        };
+      });
 
     onChange(updatedRecipients);
   };
 
   return (
     <MultiSelect
-      commandProps={{ label: _(msg`Select recipients`) }}
+      commandProps={{ label: _(msg`Select or add recipients`) }}
       options={options}
       value={value}
       onChange={onSelectionChange}
-      placeholder={_(msg`Select recipients`)}
+      placeholder={_(msg`Select or enter email address`)}
       hideClearAllButton
       hidePlaceholderWhenSelected
-      loadingIndicator={isLoading ? <p className="text-center text-sm">Loading...</p> : undefined}
-      emptyIndicator={<p className="text-center text-sm">No members found</p>}
+      creatable
+      loadingIndicator={
+        isLoading ? (
+          <p className="text-center text-sm">
+            <Trans>Loading...</Trans>
+          </p>
+        ) : undefined
+      }
+      emptyIndicator={
+        <p className="text-center text-sm">
+          <Trans>Type an email address to add a recipient</Trans>
+        </p>
+      }
     />
   );
 };

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

@@ -10,10 +10,10 @@ import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-
 import type { TTemplate } from '@documenso/lib/types/template';
 import { isRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
 import { trpc } from '@documenso/trpc/react';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 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 { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -151,11 +151,12 @@ export const DirectTemplatePageView = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewerLazy
+          <PDFViewer
             key={template.id}
             envelopeItem={template.envelopeItems[0]}
             token={directTemplateRecipient.token}
-            version="signed"
+            version="current"
+            scrollParentRef="window"
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

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

@@ -27,10 +27,10 @@ import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/fie
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { trpc } from '@documenso/trpc/react';
 import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
-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';
@@ -274,11 +274,12 @@ export const DocumentSigningPageViewV1 = ({
           <div className="flex-1">
             <Card className="rounded-xl before:rounded-xl" gradient>
               <CardContent className="p-2">
-                <PDFViewerLazy
+                <PDFViewer
                   key={document.envelopeItems[0].id}
                   envelopeItem={document.envelopeItems[0]}
                   token={recipient.token}
-                  version="signed"
+                  version="current"
+                  scrollParentRef="window"
                 />
               </CardContent>
             </Card>

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

@@ -1,4 +1,4 @@
-import { lazy, useMemo } from 'react';
+import { lazy, useMemo, useRef } from 'react';
 
 import { Plural, Trans } from '@lingui/react/macro';
 import { EnvelopeType, RecipientRole } from '@prisma/client';
@@ -8,8 +8,9 @@ import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { PDF_VIEWER_ERROR_MESSAGES } from '@documenso/lib/constants/pdf-viewer-i18n';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
-import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
+import { EnvelopePdfViewer } from '@documenso/ui/components/pdf-viewer/envelope-pdf-viewer';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
 
@@ -40,6 +41,8 @@ const EnvelopeSignerPageRenderer = lazy(
 export const DocumentSigningPageViewV2 = () => {
   const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
 
+  const scrollableContainerRef = useRef<HTMLDivElement>(null);
+
   const {
     isDirectTemplate,
     envelope,
@@ -199,7 +202,10 @@ export const DocumentSigningPageViewV2 = () => {
           </div>
         </div>
 
-        <div className="embed--DocumentContainer flex-1 overflow-y-auto">
+        <div
+          className="embed--DocumentContainer flex-1 overflow-y-auto"
+          ref={scrollableContainerRef}
+        >
           <div className="flex flex-col">
             {/* Horizontal envelope item selector */}
             {envelopeItems.length > 1 && (
@@ -228,15 +234,16 @@ export const DocumentSigningPageViewV2 = () => {
             {/* Document View */}
             <div className="embed--DocumentViewer flex flex-col items-center justify-center p-2 sm:mt-4 sm:p-4">
               {currentEnvelopeItem ? (
-                <PDFViewerKonvaLazy
-                  renderer="signing"
+                <EnvelopePdfViewer
                   key={currentEnvelopeItem.id}
                   customPageRenderer={EnvelopeSignerPageRenderer}
+                  scrollParentRef={scrollableContainerRef}
+                  errorMessage={PDF_VIEWER_ERROR_MESSAGES.signing}
                 />
               ) : (
                 <div className="flex flex-col items-center justify-center py-32">
                   <p className="text-sm text-foreground">
-                    <Trans>No documents found</Trans>
+                    <Trans>No document selected</Trans>
                   </p>
                 </div>
               )}

apps/remix/app/components/general/document/document-attachments-popover.tsx

@@ -8,6 +8,7 @@ import { Paperclip, Plus, X } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -49,9 +50,16 @@ export const DocumentAttachmentsPopover = ({
 
   const utils = trpc.useUtils();
 
-  const { data: attachments } = trpc.envelope.attachment.find.useQuery({
-    envelopeId,
-  });
+  const { data: attachments } = trpc.envelope.attachment.find.useQuery(
+    {
+      envelopeId,
+    },
+    {
+      // Note: The invalidation of the query is manually handled by the onSuccess
+      // callbacks below for create and delete mutations.
+      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    },
+  );
 
   const { mutateAsync: createAttachment, isPending: isCreating } =
     trpc.envelope.attachment.create.useMutation({
@@ -143,7 +151,7 @@ export const DocumentAttachmentsPopover = ({
             <h4 className="font-medium">
               <Trans>Attachments</Trans>
             </h4>
-            <p className="text-muted-foreground mt-1 text-sm">
+            <p className="mt-1 text-sm text-muted-foreground">
               <Trans>Add links to relevant documents or resources.</Trans>
             </p>
           </div>
@@ -153,7 +161,7 @@ export const DocumentAttachmentsPopover = ({
               {attachments?.data.map((attachment) => (
                 <div
                   key={attachment.id}
-                  className="border-border flex items-center justify-between rounded-md border p-2"
+                  className="flex items-center justify-between rounded-md border border-border p-2"
                 >
                   <div className="min-w-0 flex-1">
                     <p className="truncate text-sm font-medium">{attachment.label}</p>
@@ -161,7 +169,7 @@ export const DocumentAttachmentsPopover = ({
                       href={attachment.data}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-muted-foreground hover:text-foreground truncate text-xs underline"
+                      className="truncate text-xs text-muted-foreground underline hover:text-foreground"
                     >
                       {attachment.data}
                     </a>

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

@@ -3,6 +3,8 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DownloadIcon } from 'lucide-react';
 
+import { downloadFile } from '@documenso/lib/client-only/download-file';
+import { base64 } from '@documenso/lib/universal/base64';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -25,36 +27,15 @@ export const DocumentAuditLogDownloadButton = ({
 
   const onDownloadAuditLogsClick = async () => {
     try {
-      const { url } = await downloadAuditLogs({ documentId });
+      const { data, envelopeTitle } = await downloadAuditLogs({ documentId });
 
-      const iframe = Object.assign(document.createElement('iframe'), {
-        src: url,
+      const buffer = new Uint8Array(base64.decode(data));
+      const blob = new Blob([buffer], { type: 'application/pdf' });
+
+      downloadFile({
+        data: blob,
+        filename: `${envelopeTitle} - Audit Logs.pdf`,
       });
-
-      Object.assign(iframe.style, {
-        position: 'fixed',
-        top: '0',
-        left: '0',
-        width: '0',
-        height: '0',
-      });
-
-      const onLoaded = () => {
-        if (iframe.contentDocument?.readyState === 'complete') {
-          iframe.contentWindow?.print();
-
-          iframe.contentWindow?.addEventListener('afterprint', () => {
-            document.body.removeChild(iframe);
-          });
-        }
-      };
-
-      // When the iframe has loaded, print the iframe and remove it from the dom
-      iframe.addEventListener('load', onLoaded);
-
-      document.body.appendChild(iframe);
-
-      onLoaded();
     } catch (error) {
       console.error(error);
 

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

@@ -4,6 +4,8 @@ import { Trans } from '@lingui/react/macro';
 import type { DocumentStatus } from '@prisma/client';
 import { DownloadIcon } from 'lucide-react';
 
+import { downloadFile } from '@documenso/lib/client-only/download-file';
+import { base64 } from '@documenso/lib/universal/base64';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -29,36 +31,15 @@ export const DocumentCertificateDownloadButton = ({
 
   const onDownloadCertificatesClick = async () => {
     try {
-      const { url } = await downloadCertificate({ documentId });
+      const { data, envelopeTitle } = await downloadCertificate({ documentId });
 
-      const iframe = Object.assign(document.createElement('iframe'), {
-        src: url,
+      const buffer = new Uint8Array(base64.decode(data));
+      const blob = new Blob([buffer], { type: 'application/pdf' });
+
+      downloadFile({
+        data: blob,
+        filename: `${envelopeTitle} - Certificate.pdf`,
       });
-
-      Object.assign(iframe.style, {
-        position: 'fixed',
-        top: '0',
-        left: '0',
-        width: '0',
-        height: '0',
-      });
-
-      const onLoaded = () => {
-        if (iframe.contentDocument?.readyState === 'complete') {
-          iframe.contentWindow?.print();
-
-          iframe.contentWindow?.addEventListener('afterprint', () => {
-            document.body.removeChild(iframe);
-          });
-        }
-      };
-
-      // When the iframe has loaded, print the iframe and remove it from the dom
-      iframe.addEventListener('load', onLoaded);
-
-      document.body.appendChild(iframe);
-
-      onLoaded();
     } catch (error) {
       console.error(error);
 

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

@@ -1,4 +1,4 @@
-import { lazy, useEffect, useState } from 'react';
+import { lazy, useEffect, useRef, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { type DocumentData, DocumentStatus, type EnvelopeItem, EnvelopeType } from '@prisma/client';
@@ -9,9 +9,11 @@ import {
   EnvelopeRenderProvider,
   useCurrentEnvelopeRender,
 } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { PDF_VIEWER_ERROR_MESSAGES } from '@documenso/lib/constants/pdf-viewer-i18n';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
-import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
+import { EnvelopePdfViewer } from '@documenso/ui/components/pdf-viewer/envelope-pdf-viewer';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -21,7 +23,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
-import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 
@@ -35,7 +36,7 @@ export type DocumentCertificateQRViewProps = {
   documentId: number;
   title: string;
   internalVersion: number;
-  envelopeItems: (EnvelopeItem & { documentData: DocumentData })[];
+  envelopeItems: (EnvelopeItem & { documentData: Omit<DocumentData, 'metadata'> })[];
   documentTeamUrl: string;
   recipientCount?: number;
   completedDate?: Date;
@@ -104,11 +105,13 @@ export const DocumentCertificateQRView = ({
 
       {internalVersion === 2 ? (
         <EnvelopeRenderProvider
+          version="current"
           envelope={{
-            envelopeItems,
+            id: envelopeItems[0].envelopeId,
             status: DocumentStatus.COMPLETED,
             type: EnvelopeType.DOCUMENT,
           }}
+          envelopeItems={envelopeItems}
           token={token}
         >
           <DocumentCertificateQrV2
@@ -149,11 +152,12 @@ export const DocumentCertificateQRView = ({
           </div>
 
           <div className="mt-12 w-full">
-            <PDFViewerLazy
+            <PDFViewer
               key={envelopeItems[0].id}
               envelopeItem={envelopeItems[0]}
               token={token}
-              version="signed"
+              version="current"
+              scrollParentRef="window"
             />
           </div>
         </>
@@ -175,7 +179,9 @@ const DocumentCertificateQrV2 = ({
   formattedDate,
   token,
 }: DocumentCertificateQrV2Props) => {
-  const { currentEnvelopeItem, envelopeItems } = useCurrentEnvelopeRender();
+  const { envelopeItems } = useCurrentEnvelopeRender();
+
+  const scrollableContainerRef = useRef<HTMLDivElement>(null);
 
   return (
     <div className="flex min-h-screen flex-col items-start">
@@ -207,10 +213,14 @@ const DocumentCertificateQrV2 = ({
         />
       </div>
 
-      <div className="mt-12 w-full">
+      <div className="mt-12 max-h-[80vh] w-full overflow-y-auto" ref={scrollableContainerRef}>
         <EnvelopeRendererFileSelector className="mb-4 p-0" fields={[]} secondaryOverride={''} />
 
-        <PDFViewerKonvaLazy renderer="preview" customPageRenderer={EnvelopeGenericPageRenderer} />
+        <EnvelopePdfViewer
+          customPageRenderer={EnvelopeGenericPageRenderer}
+          scrollParentRef={scrollableContainerRef}
+          errorMessage={PDF_VIEWER_ERROR_MESSAGES.preview}
+        />
       </div>
     </div>
   );

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

@@ -15,6 +15,7 @@ import {
 import type { TDocument } from '@documenso/lib/types/document';
 import { ZDocumentAccessAuthTypesSchema } from '@documenso/lib/types/document-auth';
 import { trpc } from '@documenso/trpc/react';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add-fields';
@@ -27,7 +28,6 @@ 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 { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -440,11 +440,12 @@ export const DocumentEditForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewerLazy
+          <PDFViewer
             key={document.envelopeItems[0].id}
             envelopeItem={document.envelopeItems[0]}
             token={undefined}
-            version="signed"
+            version="current"
+            scrollParentRef="window"
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

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

@@ -175,15 +175,6 @@ export const EnvelopeEditorFieldDragDrop = ({
 
       const { top, left, height, width } = getBoundingClientRect($page);
 
-      console.log({
-        top,
-        left,
-        height,
-        width,
-        rawPageX: event.pageX,
-        rawPageY: event.pageY,
-      });
-
       const pageNumber = parseInt($page.getAttribute('data-page-number') ?? '1', 10);
 
       // Calculate x and y as a percentage of the page width and height
@@ -278,13 +269,13 @@ export const EnvelopeEditorFieldDragDrop = ({
             onMouseDown={() => setSelectedField(field.type)}
             data-selected={selectedField === field.type ? true : undefined}
             className={cn(
-              'border-border group flex h-12 cursor-pointer items-center justify-center rounded-lg border px-4 transition-colors',
+              'group flex h-12 cursor-pointer items-center justify-center rounded-lg border border-border px-4 transition-colors',
               RECIPIENT_COLOR_STYLES[selectedRecipientColor].fieldButton,
             )}
           >
             <p
               className={cn(
-                'text-muted-foreground font-noto group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                'flex items-center justify-center gap-x-1.5 font-noto text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
                 field.className,
                 {
                   'group-hover:text-recipient-green': selectedRecipientColor === 'green',
@@ -306,7 +297,7 @@ export const EnvelopeEditorFieldDragDrop = ({
       {selectedField && (
         <div
           className={cn(
-            'text-muted-foreground dark:text-muted-background font-noto pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white ring-2 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 rounded-[2px] bg-white font-noto text-muted-foreground ring-2 transition duration-200 [container-type:size]',
             RECIPIENT_COLOR_STYLES[selectedRecipientColor].base,
             selectedField === FieldType.SIGNATURE && 'font-signature',
             {

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

@@ -10,7 +10,10 @@ import { CopyPlusIcon, SquareStackIcon, TrashIcon, UserCircleIcon } from 'lucide
 import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fields';
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import {
+  type PageRenderData,
+  useCurrentEnvelopeRender,
+} from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { FIELD_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
 import {
   MIN_FIELD_HEIGHT_PX,
@@ -22,10 +25,15 @@ import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { CommandDialog } from '@documenso/ui/primitives/command';
 
+import { EnvelopePageImage } from '../envelope/envelope-page-image';
 import { fieldButtonList } from './envelope-editor-fields-drag-drop';
 import { EnvelopeRecipientSelectorCommand } from './envelope-recipient-selector';
 
-export default function EnvelopeEditorFieldsPageRenderer() {
+export default function EnvelopeEditorFieldsPageRenderer({
+  pageData,
+}: {
+  pageData: PageRenderData;
+}) {
   const { t, i18n } = useLingui();
   const { envelope, editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
   const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
@@ -40,31 +48,24 @@ export default function EnvelopeEditorFieldsPageRenderer() {
   const {
     stage,
     pageLayer,
-    canvasElement,
     konvaContainer,
-    pageContext,
     scaledViewport,
     unscaledViewport,
-  } = usePageRenderer(({ stage, pageLayer }) => createPageCanvas(stage, pageLayer));
+    renderStatus,
+    imageProps,
+  } = usePageRenderer(({ stage, pageLayer }) => createPageCanvas(stage, pageLayer), pageData);
 
-  const { _className, scale } = pageContext;
+  const { scale, pageNumber } = pageData;
 
   const localPageFields = useMemo(
     () =>
       editorFields.localFields.filter(
-        (field) =>
-          field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
+        (field) => field.page === pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
       ),
-    [editorFields.localFields, pageContext.pageNumber],
+    [editorFields.localFields, pageNumber],
   );
 
   const handleResizeOrMove = (event: KonvaEventObject<Event>) => {
-    const { current: container } = canvasElement;
-
-    if (!container) {
-      return;
-    }
-
     const isDragEvent = event.type === 'dragend';
 
     const fieldGroup = event.target as Konva.Group;
@@ -344,7 +345,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       // Create a field if no items are selected or the size is too small.
       if (
         selectedFieldGroups.length === 0 &&
-        canvasElement.current &&
         unscaledBoxWidth > MIN_FIELD_WIDTH_PX &&
         unscaledBoxHeight > MIN_FIELD_HEIGHT_PX &&
         editorFields.selectedRecipient &&
@@ -515,7 +515,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
 
     removePendingField();
 
-    if (!canvasElement.current || !currentEnvelopeItem || !editorFields.selectedRecipient) {
+    if (!currentEnvelopeItem || !editorFields.selectedRecipient) {
       return;
     }
 
@@ -530,7 +530,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
 
     editorFields.addField({
       envelopeItemId: currentEnvelopeItem.id,
-      page: pageContext.pageNumber,
+      page: pageNumber,
       type,
       positionX: fieldX,
       positionY: fieldY,
@@ -559,10 +559,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
   }
 
   return (
-    <div
-      className="relative w-full"
-      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
-    >
+    <div className="relative w-full" key={`${currentEnvelopeItem.id}-renderer-${pageNumber}`}>
       {selectedKonvaFieldGroups.length > 0 &&
         interactiveTransformer.current &&
         !isFieldChanging && (
@@ -625,13 +622,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       {/* The element Konva will inject it's canvas into. */}
       <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>
 
-      {/* Canvas the PDF will be rendered on. */}
-      <canvas
-        className={`${_className}__canvas z-0`}
-        ref={canvasElement}
-        height={scaledViewport.height}
-        width={scaledViewport.width}
-      />
+      <EnvelopePageImage renderStatus={renderStatus} imageProps={imageProps} />
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import { lazy, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
@@ -6,12 +6,13 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
 import { FileTextIcon, SparklesIcon } from 'lucide-react';
-import { Link, useRevalidator, useSearchParams } from 'react-router';
+import { useRevalidator, useSearchParams } from 'react-router';
 import { isDeepEqual } from 'remeda';
 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 { PDF_VIEWER_ERROR_MESSAGES } from '@documenso/lib/constants/pdf-viewer-i18n';
 import type { NormalizedFieldWithContext } from '@documenso/lib/server-only/ai/envelope/detect-fields/types';
 import {
   FIELD_META_DEFAULT_VALUES,
@@ -29,7 +30,7 @@ import {
 } 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 { EnvelopePdfViewer } from '@documenso/ui/components/pdf-viewer/envelope-pdf-viewer';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
@@ -49,13 +50,10 @@ import { EditorFieldTextForm } from '~/components/forms/editor/editor-field-text
 import { useCurrentTeam } from '~/providers/team';
 
 import { EnvelopeEditorFieldDragDrop } from './envelope-editor-fields-drag-drop';
+import EnvelopeEditorFieldsPageRenderer from './envelope-editor-fields-page-renderer';
 import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 import { EnvelopeRecipientSelector } from './envelope-recipient-selector';
 
-const EnvelopeEditorFieldsPageRenderer = lazy(
-  async () => import('~/components/general/envelope-editor/envelope-editor-fields-page-renderer'),
-);
-
 const FieldSettingsTypeTranslations: Record<FieldType, MessageDescriptor> = {
   [FieldType.SIGNATURE]: msg`Signature Settings`,
   [FieldType.FREE_SIGNATURE]: msg`Free Signature Settings`,
@@ -75,7 +73,9 @@ export const EnvelopeEditorFieldsPage = () => {
 
   const team = useCurrentTeam();
 
-  const { envelope, editorFields, relativePath } = useCurrentEnvelopeEditor();
+  const scrollableContainerRef = useRef<HTMLDivElement>(null);
+
+  const { envelope, editorFields, navigateToStep, editorConfig } = useCurrentEnvelopeEditor();
 
   const { currentEnvelopeItem } = useCurrentEnvelopeRender();
 
@@ -97,14 +97,10 @@ 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');
     }
   };
 
@@ -156,12 +152,12 @@ export const EnvelopeEditorFieldsPage = () => {
 
   return (
     <div className="relative flex h-full">
-      <div className="flex w-full flex-col overflow-y-auto">
+      <div className="flex h-full w-full flex-col overflow-y-auto" ref={scrollableContainerRef}>
         {/* Horizontal envelope item selector */}
         <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
         {/* Document View */}
-        <div className="mt-4 flex flex-col items-center justify-center">
+        <div className="mt-4 flex h-full flex-col items-center justify-center">
           {envelope.recipients.length === 0 && (
             <Alert
               variant="neutral"
@@ -176,18 +172,17 @@ export const EnvelopeEditorFieldsPage = () => {
                 </AlertDescription>
               </div>
 
-              <Button asChild variant="outline">
-                <Link to={`${relativePath.editorPath}`}>
-                  <Trans>Add Recipients</Trans>
-                </Link>
+              <Button variant="outline" onClick={() => void navigateToStep('upload')}>
+                <Trans>Add Recipients</Trans>
               </Button>
             </Alert>
           )}
 
           {currentEnvelopeItem !== null ? (
-            <PDFViewerKonvaLazy
-              renderer="editor"
+            <EnvelopePdfViewer
               customPageRenderer={EnvelopeEditorFieldsPageRenderer}
+              scrollParentRef={scrollableContainerRef}
+              errorMessage={PDF_VIEWER_ERROR_MESSAGES.editor}
             />
           ) : (
             <div className="flex flex-col items-center justify-center py-32">
@@ -249,36 +244,40 @@ export const EnvelopeEditorFieldsPage = () => {
               selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null}
             />
 
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="mt-4 w-full"
-              onClick={onDetectClick}
-              disabled={envelope.status !== DocumentStatus.DRAFT}
-              title={
-                envelope.status !== DocumentStatus.DRAFT
-                  ? _(msg`You can only detect fields in draft envelopes`)
-                  : undefined
-              }
-            >
-              <SparklesIcon className="-ml-1 mr-2 h-4 w-4" />
-              <Trans>Detect with AI</Trans>
-            </Button>
+            {editorConfig.fields?.allowAIDetection && (
+              <>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="mt-4 w-full"
+                  onClick={onDetectClick}
+                  disabled={envelope.status !== DocumentStatus.DRAFT}
+                  title={
+                    envelope.status !== DocumentStatus.DRAFT
+                      ? _(msg`You can only detect fields in draft envelopes`)
+                      : undefined
+                  }
+                >
+                  <SparklesIcon className="-ml-1 mr-2 h-4 w-4" />
+                  <Trans>Detect with AI</Trans>
+                </Button>
 
-            <AiFieldDetectionDialog
-              open={isAiFieldDialogOpen}
-              onOpenChange={setIsAiFieldDialogOpen}
-              onComplete={onFieldDetectionComplete}
-              envelopeId={envelope.id}
-              teamId={envelope.teamId}
-            />
+                <AiFieldDetectionDialog
+                  open={isAiFieldDialogOpen}
+                  onOpenChange={setIsAiFieldDialogOpen}
+                  onComplete={onFieldDetectionComplete}
+                  envelopeId={envelope.id}
+                  teamId={envelope.teamId}
+                />
 
-            <AiFeaturesEnableDialog
-              open={isAiEnableDialogOpen}
-              onOpenChange={setIsAiEnableDialogOpen}
-              onEnabled={onAiFeaturesEnabled}
-            />
+                <AiFeaturesEnableDialog
+                  open={isAiEnableDialogOpen}
+                  onOpenChange={setIsAiEnableDialogOpen}
+                  onEnabled={onAiFeaturesEnabled}
+                />
+              </>
+            )}
           </section>
 
           {/* Field details section. */}

apps/remix/app/components/general/envelope-editor/envelope-editor-header.tsx

@@ -30,21 +30,56 @@ import { EnvelopeItemTitleInput } from './envelope-editor-title-input';
 export default function EnvelopeEditorHeader() {
   const { t } = useLingui();
 
-  const { envelope, isDocument, isTemplate, updateEnvelope, autosaveError, relativePath } =
-    useCurrentEnvelopeEditor();
+  const {
+    envelope,
+    isDocument,
+    isTemplate,
+    isEmbedded,
+    updateEnvelope,
+    autosaveError,
+    relativePath,
+    editorConfig,
+    flushAutosave,
+  } = useCurrentEnvelopeEditor();
+
+  const {
+    embeded,
+    general: { allowConfigureEnvelopeTitle },
+    actions: { allowAttachments, allowDistributing },
+  } = editorConfig;
+
+  const handleCreateEmbeddedEnvelope = async () => {
+    const latestEnvelope = await flushAutosave();
+
+    embeded?.onCreate?.(latestEnvelope);
+  };
+
+  const handleUpdateEmbeddedEnvelope = async () => {
+    const latestEnvelope = await flushAutosave();
+
+    embeded?.onUpdate?.(latestEnvelope);
+  };
 
   return (
     <nav className="w-full border-b border-border bg-background px-4 py-3 md:px-6">
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-4">
-          <Link to="/">
-            <BrandingLogo className="h-6 w-auto" />
-          </Link>
+          {editorConfig.embeded?.customBrandingLogo ? (
+            <img
+              src={`/api/branding/logo/team/${envelope.teamId}`}
+              alt="Logo"
+              className="h-6 w-auto"
+            />
+          ) : (
+            <Link to="/">
+              <BrandingLogo className="h-6 w-auto" />
+            </Link>
+          )}
           <Separator orientation="vertical" className="h-6" />
 
           <div className="flex items-center space-x-2">
             <EnvelopeItemTitleInput
-              disabled={envelope.status !== DocumentStatus.DRAFT}
+              disabled={envelope.status !== DocumentStatus.DRAFT || !allowConfigureEnvelopeTitle}
               value={envelope.title}
               onChange={(title) => {
                 updateEnvelope({
@@ -127,54 +162,72 @@ export default function EnvelopeEditorHeader() {
         </div>
 
         <div className="flex items-center space-x-2">
-          <DocumentAttachmentsPopover envelopeId={envelope.id} buttonSize="sm" />
-
-          <EnvelopeEditorSettingsDialog
-            trigger={
-              <Button variant="outline" size="sm">
-                <SettingsIcon className="h-4 w-4" />
-              </Button>
-            }
-          />
-
-          {isDocument && (
-            <>
-              <EnvelopeDistributeDialog
-                documentRootPath={relativePath.documentRootPath}
-                trigger={
-                  <Button size="sm">
-                    <SendIcon className="mr-2 h-4 w-4" />
-                    <Trans>Send Document</Trans>
-                  </Button>
-                }
-              />
-
-              <EnvelopeRedistributeDialog
-                envelope={envelope}
-                trigger={
-                  <Button size="sm">
-                    <SendIcon className="mr-2 h-4 w-4" />
-                    <Trans>Resend Document</Trans>
-                  </Button>
-                }
-              />
-            </>
+          {allowAttachments && (
+            <DocumentAttachmentsPopover envelopeId={envelope.id} buttonSize="sm" />
           )}
 
-          {isTemplate && (
-            <TemplateUseDialog
-              envelopeId={envelope.id}
-              templateId={mapSecondaryIdToTemplateId(envelope.secondaryId)}
-              templateSigningOrder={envelope.documentMeta?.signingOrder}
-              recipients={envelope.recipients}
-              documentRootPath={relativePath.documentRootPath}
+          {editorConfig.settings && (
+            <EnvelopeEditorSettingsDialog
               trigger={
-                <Button size="sm">
-                  <Trans>Use Template</Trans>
+                <Button variant="outline" size="sm">
+                  <SettingsIcon className="h-4 w-4" />
                 </Button>
               }
             />
           )}
+
+          {match({ isEmbedded, isDocument, isTemplate, allowDistributing })
+            .with({ isEmbedded: false, isDocument: true, allowDistributing: true }, () => (
+              <>
+                <EnvelopeDistributeDialog
+                  documentRootPath={relativePath.documentRootPath}
+                  trigger={
+                    <Button size="sm">
+                      <SendIcon className="mr-2 h-4 w-4" />
+                      <Trans>Send Document</Trans>
+                    </Button>
+                  }
+                />
+
+                <EnvelopeRedistributeDialog
+                  envelope={envelope}
+                  trigger={
+                    <Button size="sm">
+                      <SendIcon className="mr-2 h-4 w-4" />
+                      <Trans>Resend Document</Trans>
+                    </Button>
+                  }
+                />
+              </>
+            ))
+            .with({ isEmbedded: false, isTemplate: true, allowDistributing: true }, () => (
+              <TemplateUseDialog
+                envelopeId={envelope.id}
+                templateId={mapSecondaryIdToTemplateId(envelope.secondaryId)}
+                templateSigningOrder={envelope.documentMeta?.signingOrder}
+                recipients={envelope.recipients}
+                documentRootPath={relativePath.documentRootPath}
+                trigger={
+                  <Button size="sm">
+                    <Trans>Use Template</Trans>
+                  </Button>
+                }
+              />
+            ))
+
+            .otherwise(() => null)}
+
+          {embeded?.mode === 'create' && (
+            <Button size="sm" onClick={handleCreateEmbeddedEnvelope}>
+              {isDocument ? <Trans>Create Document</Trans> : <Trans>Create Template</Trans>}
+            </Button>
+          )}
+
+          {embeded?.mode === 'edit' && (
+            <Button size="sm" onClick={handleUpdateEmbeddedEnvelope}>
+              {isDocument ? <Trans>Update Document</Trans> : <Trans>Update Template</Trans>}
+            </Button>
+          )}
         </div>
       </div>
     </nav>

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

@@ -1,4 +1,4 @@
-import { lazy, useEffect, useMemo, useState } from 'react';
+import { lazy, useEffect, useMemo, useRef, useState } from 'react';
 
 import { faker } from '@faker-js/faker/locale/en';
 import { Trans } from '@lingui/react/macro';
@@ -11,12 +11,13 @@ import {
   EnvelopeRenderProvider,
   useCurrentEnvelopeRender,
 } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { PDF_VIEWER_ERROR_MESSAGES } from '@documenso/lib/constants/pdf-viewer-i18n';
 import { ZFieldAndMetaSchema } from '@documenso/lib/types/field-meta';
 import { extractFieldInsertionValues } from '@documenso/lib/utils/envelope-signing';
 import { toCheckboxCustomText } from '@documenso/lib/utils/fields';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
-import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
+import { EnvelopePdfViewer } from '@documenso/ui/components/pdf-viewer/envelope-pdf-viewer';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
 import { Separator } from '@documenso/ui/primitives/separator';
@@ -33,6 +34,8 @@ export const EnvelopeEditorPreviewPage = () => {
 
   const { currentEnvelopeItem, fields } = useCurrentEnvelopeRender();
 
+  const scrollableContainerRef = useRef<HTMLDivElement>(null);
+
   const [selectedPreviewMode, setSelectedPreviewMode] = useState<'recipient' | 'signed'>(
     'recipient',
   );
@@ -200,7 +203,9 @@ export const EnvelopeEditorPreviewPage = () => {
   // Override the parent renderer provider so we can inject custom fields.
   return (
     <EnvelopeRenderProvider
+      version="current"
       envelope={envelope}
+      envelopeItems={envelope.envelopeItems}
       token={undefined}
       fields={fieldsWithPlaceholders}
       recipients={envelope.recipients.map((recipient) => ({
@@ -212,12 +217,12 @@ export const EnvelopeEditorPreviewPage = () => {
       }}
     >
       <div className="relative flex h-full">
-        <div className="flex w-full flex-col overflow-y-auto">
+        <div className="flex w-full flex-col overflow-y-auto" ref={scrollableContainerRef}>
           {/* Horizontal envelope item selector */}
           <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
           {/* Document View */}
-          <div className="mt-4 flex flex-col items-center justify-center">
+          <div className="mt-4 flex h-full flex-col items-center justify-center">
             <Alert variant="warning" className="mb-4 max-w-[800px]">
               <AlertTitle>
                 <Trans>Preview Mode</Trans>
@@ -228,9 +233,10 @@ export const EnvelopeEditorPreviewPage = () => {
             </Alert>
 
             {currentEnvelopeItem !== null ? (
-              <PDFViewerKonvaLazy
-                renderer="editor"
+              <EnvelopePdfViewer
                 customPageRenderer={EnvelopeGenericPageRenderer}
+                scrollParentRef={scrollableContainerRef}
+                errorMessage={PDF_VIEWER_ERROR_MESSAGES.preview}
               />
             ) : (
               <div className="flex flex-col items-center justify-center py-32">

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

@@ -21,7 +21,7 @@ import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounce
 import { ZEditorRecipientsFormSchema } from '@documenso/lib/client-only/hooks/use-editor-recipients';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { useSession } from '@documenso/lib/client-only/providers/session';
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import type { TDetectedRecipientSchema } from '@documenso/lib/server-only/ai/envelope/detect-recipients/schema';
 import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
@@ -63,8 +63,14 @@ import { AiRecipientDetectionDialog } from '~/components/dialogs/ai-recipient-de
 import { useCurrentTeam } from '~/providers/team';
 
 export const EnvelopeEditorRecipientForm = () => {
-  const { envelope, setRecipientsDebounced, updateEnvelope, editorRecipients } =
-    useCurrentEnvelopeEditor();
+  const {
+    envelope,
+    setRecipientsDebounced,
+    updateEnvelope,
+    editorRecipients,
+    isEmbedded,
+    editorConfig,
+  } = useCurrentEnvelopeEditor();
 
   const organisation = useCurrentOrganisation();
   const team = useCurrentTeam();
@@ -72,7 +78,9 @@ export const EnvelopeEditorRecipientForm = () => {
   const { t } = useLingui();
   const { toast } = useToast();
   const { remaining } = useLimits();
-  const { user } = useSession();
+  const { sessionData } = useOptionalSession();
+
+  const user = sessionData?.user;
 
   const [searchParams, setSearchParams] = useSearchParams();
   const [recipientSearchQuery, setRecipientSearchQuery] = useState('');
@@ -133,6 +141,7 @@ export const EnvelopeEditorRecipientForm = () => {
     },
     {
       enabled: debouncedRecipientSearchQuery.length > 1,
+      retry: false,
     },
   );
 
@@ -594,42 +603,50 @@ export const EnvelopeEditorRecipientForm = () => {
     <Card backdropBlur={false} className="border">
       <CardHeader className="flex flex-row justify-between">
         <div>
-          <CardTitle>Recipients</CardTitle>
-          <CardDescription className="mt-1.5">Add recipients to your document</CardDescription>
+          <CardTitle>
+            <Trans>Recipients</Trans>
+          </CardTitle>
+          <CardDescription className="mt-1.5">
+            <Trans>Add recipients to your document</Trans>
+          </CardDescription>
         </div>
 
         <div className="flex flex-row items-center space-x-2">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="outline"
-                type="button"
-                size="sm"
-                disabled={isSubmitting}
-                onClick={onDetectRecipientsClick}
-              >
-                <SparklesIcon className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
+          {editorConfig.recipients?.allowAIDetection && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  type="button"
+                  size="sm"
+                  disabled={isSubmitting}
+                  onClick={onDetectRecipientsClick}
+                >
+                  <SparklesIcon className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
 
-            <TooltipContent>
-              {team.preferences.aiFeaturesEnabled ? (
-                <Trans>Detect recipients with AI</Trans>
-              ) : (
-                <Trans>Enable AI detection</Trans>
-              )}
-            </TooltipContent>
-          </Tooltip>
+              <TooltipContent>
+                {team.preferences.aiFeaturesEnabled ? (
+                  <Trans>Detect recipients with AI</Trans>
+                ) : (
+                  <Trans>Enable AI detection</Trans>
+                )}
+              </TooltipContent>
+            </Tooltip>
+          )}
 
-          <Button
-            variant="outline"
-            className="flex flex-row items-center"
-            size="sm"
-            disabled={isSubmitting || isUserAlreadyARecipient}
-            onClick={() => onAddSelfSigner()}
-          >
-            <Trans>Add Myself</Trans>
-          </Button>
+          {!isEmbedded && (
+            <Button
+              variant="outline"
+              className="flex flex-row items-center"
+              size="sm"
+              disabled={isSubmitting || isUserAlreadyARecipient}
+              onClick={() => onAddSelfSigner()}
+            >
+              <Trans>Add Myself</Trans>
+            </Button>
+          )}
 
           <Button
             variant="outline"
@@ -648,7 +665,13 @@ export const EnvelopeEditorRecipientForm = () => {
       <CardContent>
         <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
           <Form {...form}>
-            <div className="-mt-2 mb-2 space-y-4 rounded-md bg-accent/50 p-4">
+            <div
+              className={cn('-mt-2 mb-2 space-y-4 rounded-md bg-accent/50 p-4', {
+                hidden:
+                  !editorConfig.recipients?.allowConfigureSigningOrder &&
+                  !organisation.organisationClaim.flags.cfr21,
+              })}
+            >
               {organisation.organisationClaim.flags.cfr21 && (
                 <div className="flex flex-row items-center">
                   <Checkbox
@@ -666,64 +689,66 @@ export const EnvelopeEditorRecipientForm = () => {
                 </div>
               )}
 
-              <FormField
-                control={form.control}
-                name="signingOrder"
-                render={({ field }) => (
-                  <FormItem className="flex flex-row items-center space-x-2 space-y-0">
-                    <FormControl>
-                      <Checkbox
-                        {...field}
-                        id="signingOrder"
-                        checked={field.value === DocumentSigningOrder.SEQUENTIAL}
-                        onCheckedChange={(checked) => {
-                          if (!checked && hasAssistantRole) {
-                            setShowSigningOrderConfirmation(true);
-                            return;
-                          }
+              {editorConfig.recipients?.allowConfigureSigningOrder && (
+                <FormField
+                  control={form.control}
+                  name="signingOrder"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center space-x-2 space-y-0">
+                      <FormControl>
+                        <Checkbox
+                          {...field}
+                          id="signingOrder"
+                          checked={field.value === DocumentSigningOrder.SEQUENTIAL}
+                          onCheckedChange={(checked) => {
+                            if (!checked && hasAssistantRole) {
+                              setShowSigningOrderConfirmation(true);
+                              return;
+                            }
 
-                          field.onChange(
-                            checked
-                              ? DocumentSigningOrder.SEQUENTIAL
-                              : DocumentSigningOrder.PARALLEL,
-                          );
+                            field.onChange(
+                              checked
+                                ? DocumentSigningOrder.SEQUENTIAL
+                                : DocumentSigningOrder.PARALLEL,
+                            );
 
-                          // If sequential signing is turned off, disable dictate next signer
-                          if (!checked) {
-                            form.setValue('allowDictateNextSigner', false, {
-                              shouldValidate: true,
-                              shouldDirty: true,
-                            });
-                          }
-                        }}
-                        disabled={isSubmitting || hasDocumentBeenSent}
-                      />
-                    </FormControl>
+                            // If sequential signing is turned off, disable dictate next signer
+                            if (!checked) {
+                              form.setValue('allowDictateNextSigner', false, {
+                                shouldValidate: true,
+                                shouldDirty: true,
+                              });
+                            }
+                          }}
+                          disabled={isSubmitting || hasDocumentBeenSent}
+                        />
+                      </FormControl>
 
-                    <div className="flex items-center text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-                      <FormLabel
-                        htmlFor="signingOrder"
-                        className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                      >
-                        <Trans>Enable signing order</Trans>
-                      </FormLabel>
+                      <div className="flex items-center text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                        <FormLabel
+                          htmlFor="signingOrder"
+                          className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                        >
+                          <Trans>Enable signing order</Trans>
+                        </FormLabel>
 
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <span className="ml-1 cursor-help text-muted-foreground">
-                            <HelpCircleIcon className="h-3.5 w-3.5" />
-                          </span>
-                        </TooltipTrigger>
-                        <TooltipContent className="max-w-80 p-4">
-                          <p>
-                            <Trans>Add 2 or more signers to enable signing order.</Trans>
-                          </p>
-                        </TooltipContent>
-                      </Tooltip>
-                    </div>
-                  </FormItem>
-                )}
-              />
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="ml-1 cursor-help text-muted-foreground">
+                              <HelpCircleIcon className="h-3.5 w-3.5" />
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent className="max-w-80 p-4">
+                            <p>
+                              <Trans>Add 2 or more signers to enable signing order.</Trans>
+                            </p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              )}
 
               {isSigningOrderSequential && (
                 <FormField
@@ -983,6 +1008,16 @@ export const EnvelopeEditorRecipientForm = () => {
                                         <FormControl>
                                           <RecipientRoleSelect
                                             {...field}
+                                            hideAssistantRole={
+                                              !editorConfig.recipients?.allowAssistantRole
+                                            }
+                                            hideCCerRole={!editorConfig.recipients?.allowCCerRole}
+                                            hideViewerRole={
+                                              !editorConfig.recipients?.allowViewerRole
+                                            }
+                                            hideApproverRole={
+                                              !editorConfig.recipients?.allowApproverRole
+                                            }
                                             isAssistantEnabled={isSigningOrderSequential}
                                             onValueChange={(value) => {
                                               // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -1079,13 +1114,15 @@ export const EnvelopeEditorRecipientForm = () => {
           onConfirm={handleSigningOrderDisable}
         />
 
-        <AiRecipientDetectionDialog
-          open={isAiDialogOpen}
-          onOpenChange={onAiDialogOpenChange}
-          onComplete={onAiDetectionComplete}
-          envelopeId={envelope.id}
-          teamId={envelope.teamId}
-        />
+        {editorConfig.recipients?.allowAIDetection && (
+          <AiRecipientDetectionDialog
+            open={isAiDialogOpen}
+            onOpenChange={onAiDialogOpenChange}
+            onComplete={onAiDetectionComplete}
+            envelopeId={envelope.id}
+            teamId={envelope.teamId}
+          />
+        )}
 
         <AiFeaturesEnableDialog
           open={isAiEnableDialogOpen}

apps/remix/app/components/general/envelope-editor/envelope-editor-renderer-provider-wrapper.tsx

@@ -0,0 +1,28 @@
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
+
+export const EnvelopeEditorRenderProviderWrapper = ({
+  children,
+  token,
+  presignedToken,
+}: {
+  children: React.ReactNode;
+  token?: string;
+  presignedToken?: string;
+}) => {
+  const { envelope } = useCurrentEnvelopeEditor();
+
+  return (
+    <EnvelopeRenderProvider
+      envelope={envelope}
+      envelopeItems={envelope.envelopeItems}
+      token={token}
+      presignToken={presignedToken}
+      version="current"
+      fields={envelope.fields}
+      recipients={envelope.recipients}
+    >
+      {children}
+    </EnvelopeRenderProvider>
+  );
+};

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

@@ -28,6 +28,7 @@ import {
   isValidLanguageCode,
 } from '@documenso/lib/constants/i18n';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError } from '@documenso/lib/errors/app-error';
 import {
   ZDocumentAccessAuthTypesSchema,
@@ -174,7 +175,9 @@ export const EnvelopeEditorSettingsDialog = ({
   const { t, i18n } = useLingui();
   const { toast } = useToast();
 
-  const { envelope, updateEnvelopeAsync } = useCurrentEnvelopeEditor();
+  const { envelope, updateEnvelopeAsync, editorConfig, isEmbedded } = useCurrentEnvelopeEditor();
+
+  const { settings } = editorConfig;
 
   const team = useCurrentTeam();
   const organisation = useCurrentOrganisation();
@@ -223,10 +226,15 @@ export const EnvelopeEditorSettingsDialog = ({
   const emailSettings = form.watch('meta.emailSettings');
 
   const { data: emailData, isLoading: isLoadingEmails } =
-    trpc.enterprise.organisation.email.find.useQuery({
-      organisationId: organisation.id,
-      perPage: 100,
-    });
+    trpc.enterprise.organisation.email.find.useQuery(
+      {
+        organisationId: organisation.id,
+        perPage: 100,
+      },
+      {
+        ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+      },
+    );
 
   const emails = emailData?.data || [];
 
@@ -278,11 +286,13 @@ export const EnvelopeEditorSettingsDialog = ({
 
       setOpen(false);
 
-      toast({
-        title: t`Success`,
-        description: t`Envelope updated`,
-        duration: 5000,
-      });
+      if (!isEmbedded) {
+        toast({
+          title: t`Success`,
+          description: t`Envelope updated`,
+          duration: 5000,
+        });
+      }
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -319,7 +329,7 @@ export const EnvelopeEditorSettingsDialog = ({
 
   const selectedTab = tabs.find((tab) => tab.id === activeTab);
 
-  if (!selectedTab) {
+  if (!selectedTab || !settings) {
     return null;
   }
 
@@ -340,26 +350,32 @@ export const EnvelopeEditorSettingsDialog = ({
       <DialogContent className="flex w-full !max-w-5xl flex-row gap-0 p-0">
         {/* Sidebar. */}
         <div className="flex w-80 flex-col border-r bg-accent/20">
-          <DialogHeader className="p-6 pb-4">
+          <DialogHeader className="p-6 pb-4" data-testid="envelope-editor-settings-dialog-header">
             <DialogTitle>
               <Trans>Document Settings</Trans>
             </DialogTitle>
           </DialogHeader>
 
           <nav className="col-span-12 mb-8 flex flex-wrap items-center justify-start gap-x-2 gap-y-4 px-4 md:col-span-3 md:w-full md:flex-col md:items-start md:gap-y-2">
-            {tabs.map((tab) => (
-              <Button
-                key={tab.id}
-                onClick={() => setActiveTab(tab.id)}
-                variant="ghost"
-                className={cn('w-full justify-start', {
-                  'bg-secondary': activeTab === tab.id,
-                })}
-              >
-                <tab.icon className="mr-2 h-5 w-5" />
-                {t(tab.title)}
-              </Button>
-            ))}
+            {tabs.map((tab) => {
+              if (tab.id === 'email' && !settings.allowConfigureDistribution) {
+                return null;
+              }
+
+              return (
+                <Button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  variant="ghost"
+                  className={cn('w-full justify-start', {
+                    'bg-secondary': activeTab === tab.id,
+                  })}
+                >
+                  <tab.icon className="mr-2 h-5 w-5" />
+                  {t(tab.title)}
+                </Button>
+              );
+            })}
           </nav>
         </div>
 
@@ -377,137 +393,151 @@ export const EnvelopeEditorSettingsDialog = ({
                 disabled={form.formState.isSubmitting}
                 key={activeTab}
               >
-                {match(activeTab)
-                  .with('general', () => (
+                {match({ activeTab, settings })
+                  .with({ activeTab: 'general' }, () => (
                     <>
-                      <FormField
-                        control={form.control}
-                        name="meta.language"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="inline-flex items-center">
-                              <Trans>Language</Trans>
-                              <Tooltip>
-                                <TooltipTrigger>
-                                  <InfoIcon className="mx-2 h-4 w-4" />
-                                </TooltipTrigger>
+                      {settings.allowConfigureLanguage && (
+                        <FormField
+                          control={form.control}
+                          name="meta.language"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="inline-flex items-center">
+                                <Trans>Language</Trans>
+                                <Tooltip>
+                                  <TooltipTrigger>
+                                    <InfoIcon className="mx-2 h-4 w-4" />
+                                  </TooltipTrigger>
 
-                                <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
-                                  <Trans>
-                                    Controls the language for the document, including the language
-                                    to be used for email notifications, and the final certificate
-                                    that is generated and attached to the document.
-                                  </Trans>
-                                </TooltipContent>
-                              </Tooltip>
-                            </FormLabel>
+                                  <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
+                                    <Trans>
+                                      Controls the language for the document, including the language
+                                      to be used for email notifications, and the final certificate
+                                      that is generated and attached to the document.
+                                    </Trans>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </FormLabel>
 
-                            <FormControl>
-                              <Select
-                                value={field.value}
-                                disabled={field.disabled}
-                                onValueChange={field.onChange}
-                              >
-                                <SelectTrigger className="bg-background">
-                                  <SelectValue />
-                                </SelectTrigger>
+                              <FormControl>
+                                <Select
+                                  value={field.value}
+                                  disabled={field.disabled}
+                                  onValueChange={field.onChange}
+                                >
+                                  <SelectTrigger className="bg-background">
+                                    <SelectValue />
+                                  </SelectTrigger>
 
-                                <SelectContent>
-                                  {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
-                                    <SelectItem key={code} value={code}>
-                                      {language.full}
-                                    </SelectItem>
-                                  ))}
-                                </SelectContent>
-                              </Select>
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                      <FormField
-                        control={form.control}
-                        name="meta.signatureTypes"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="flex flex-row items-center">
-                              <Trans>Allowed Signature Types</Trans>
-                              <DocumentSignatureSettingsTooltip />
-                            </FormLabel>
+                                  <SelectContent>
+                                    {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
+                                      <SelectItem key={code} value={code}>
+                                        {language.full}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      )}
 
-                            <FormControl>
-                              <MultiSelectCombobox
-                                options={Object.values(DOCUMENT_SIGNATURE_TYPES).map((option) => ({
-                                  label: t(option.label),
-                                  value: option.value,
-                                }))}
-                                selectedValues={field.value}
-                                onChange={field.onChange}
-                                className="w-full bg-background"
-                                emptySelectionPlaceholder="Select signature types"
-                              />
-                            </FormControl>
+                      {settings.allowConfigureSignatureTypes && (
+                        <FormField
+                          control={form.control}
+                          name="meta.signatureTypes"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="flex flex-row items-center">
+                                <Trans>Allowed Signature Types</Trans>
+                                <DocumentSignatureSettingsTooltip />
+                              </FormLabel>
 
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                      <FormField
-                        control={form.control}
-                        name="meta.dateFormat"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>
-                              <Trans>Date Format</Trans>
-                            </FormLabel>
+                              <FormControl>
+                                <MultiSelectCombobox
+                                  options={Object.values(DOCUMENT_SIGNATURE_TYPES).map(
+                                    (option) => ({
+                                      label: t(option.label),
+                                      value: option.value,
+                                    }),
+                                  )}
+                                  selectedValues={field.value}
+                                  onChange={field.onChange}
+                                  className="w-full bg-background"
+                                  emptySelectionPlaceholder="Select signature types"
+                                />
+                              </FormControl>
 
-                            <FormControl>
-                              <Select
-                                value={field.value}
-                                onValueChange={field.onChange}
-                                disabled={envelopeHasBeenSent}
-                              >
-                                <SelectTrigger className="bg-background">
-                                  <SelectValue />
-                                </SelectTrigger>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      )}
 
-                                <SelectContent>
-                                  {DATE_FORMATS.map((format) => (
-                                    <SelectItem key={format.key} value={format.value}>
-                                      {format.label}
-                                    </SelectItem>
-                                  ))}
-                                </SelectContent>
-                              </Select>
-                            </FormControl>
+                      {settings.allowConfigureDateFormat && (
+                        <FormField
+                          control={form.control}
+                          name="meta.dateFormat"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                <Trans>Date Format</Trans>
+                              </FormLabel>
 
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                      <FormField
-                        control={form.control}
-                        name="meta.timezone"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>
-                              <Trans>Time Zone</Trans>
-                            </FormLabel>
+                              <FormControl>
+                                <Select
+                                  value={field.value}
+                                  onValueChange={field.onChange}
+                                  disabled={envelopeHasBeenSent}
+                                >
+                                  <SelectTrigger className="bg-background">
+                                    <SelectValue />
+                                  </SelectTrigger>
 
-                            <FormControl>
-                              <Combobox
-                                className="bg-background"
-                                options={TIME_ZONES}
-                                value={field.value}
-                                onChange={(value) => value && field.onChange(value)}
-                                disabled={envelopeHasBeenSent}
-                              />
-                            </FormControl>
+                                  <SelectContent>
+                                    {DATE_FORMATS.map((format) => (
+                                      <SelectItem key={format.key} value={format.value}>
+                                        {format.label}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </FormControl>
+
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      )}
+
+                      {settings.allowConfigureTimezone && (
+                        <FormField
+                          control={form.control}
+                          name="meta.timezone"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                <Trans>Time Zone</Trans>
+                              </FormLabel>
+
+                              <FormControl>
+                                <Combobox
+                                  className="bg-background"
+                                  options={TIME_ZONES}
+                                  value={field.value}
+                                  onChange={(value) => value && field.onChange(value)}
+                                  disabled={envelopeHasBeenSent}
+                                />
+                              </FormControl>
+
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      )}
 
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
                       <FormField
                         control={form.control}
                         name="externalId"
@@ -538,143 +568,29 @@ export const EnvelopeEditorSettingsDialog = ({
                         )}
                       />
 
-                      <FormField
-                        control={form.control}
-                        name="meta.redirectUrl"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="flex flex-row items-center">
-                              <Trans>Redirect URL</Trans>{' '}
-                              <Tooltip>
-                                <TooltipTrigger>
-                                  <InfoIcon className="mx-2 h-4 w-4" />
-                                </TooltipTrigger>
-
-                                <TooltipContent className="max-w-xs text-muted-foreground">
-                                  <Trans>
-                                    Add a URL to redirect the user to once the document is signed
-                                  </Trans>
-                                </TooltipContent>
-                              </Tooltip>
-                            </FormLabel>
-
-                            <FormControl>
-                              <Input className="bg-background" {...field} />
-                            </FormControl>
-
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                      <FormField
-                        control={form.control}
-                        name="meta.distributionMethod"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="flex flex-row items-center">
-                              <Trans>Document Distribution Method</Trans>
-                              <Tooltip>
-                                <TooltipTrigger>
-                                  <InfoIcon className="mx-2 h-4 w-4" />
-                                </TooltipTrigger>
-
-                                <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
-                                  <h2>
-                                    <strong>
-                                      <Trans>Document Distribution Method</Trans>
-                                    </strong>
-                                  </h2>
-
-                                  <p>
-                                    <Trans>
-                                      This is how the document will reach the recipients once the
-                                      document is ready for signing.
-                                    </Trans>
-                                  </p>
-
-                                  <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
-                                    <li>
-                                      <Trans>
-                                        <strong>Email</strong> - The recipient will be emailed the
-                                        document to sign, approve, etc.
-                                      </Trans>
-                                    </li>
-                                    <li>
-                                      <Trans>
-                                        <strong>None</strong> - We will generate links which you can
-                                        send to the recipients manually.
-                                      </Trans>
-                                    </li>
-                                  </ul>
-
-                                  <Trans>
-                                    <strong>Note</strong> - If you use Links in combination with
-                                    direct templates, you will need to manually send the links to
-                                    the remaining recipients.
-                                  </Trans>
-                                </TooltipContent>
-                              </Tooltip>
-                            </FormLabel>
-
-                            <FormControl>
-                              <Select {...field} onValueChange={field.onChange}>
-                                <SelectTrigger className="bg-background text-muted-foreground">
-                                  <SelectValue data-testid="documentDistributionMethodSelectValue" />
-                                </SelectTrigger>
-
-                                <SelectContent position="popper">
-                                  {Object.values(DOCUMENT_DISTRIBUTION_METHODS).map(
-                                    ({ value, description }) => (
-                                      <SelectItem key={value} value={value}>
-                                        {i18n._(description)}
-                                      </SelectItem>
-                                    ),
-                                  )}
-                                </SelectContent>
-                              </Select>
-                            </FormControl>
-                          </FormItem>
-                        )}
-                      />
-                    </>
-                  ))
-                  .with('email', () => (
-                    <>
-                      {organisation.organisationClaim.flags.emailDomains && (
+                      {settings.allowConfigureRedirectUrl && (
                         <FormField
                           control={form.control}
-                          name="meta.emailId"
+                          name="meta.redirectUrl"
                           render={({ field }) => (
                             <FormItem>
-                              <FormLabel>
-                                <Trans>Email Sender</Trans>
+                              <FormLabel className="flex flex-row items-center">
+                                <Trans>Redirect URL</Trans>{' '}
+                                <Tooltip>
+                                  <TooltipTrigger>
+                                    <InfoIcon className="mx-2 h-4 w-4" />
+                                  </TooltipTrigger>
+
+                                  <TooltipContent className="max-w-xs text-muted-foreground">
+                                    <Trans>
+                                      Add a URL to redirect the user to once the document is signed
+                                    </Trans>
+                                  </TooltipContent>
+                                </Tooltip>
                               </FormLabel>
 
                               <FormControl>
-                                <Select
-                                  {...field}
-                                  value={field.value === null ? '-1' : field.value}
-                                  onValueChange={(value) =>
-                                    field.onChange(value === '-1' ? null : value)
-                                  }
-                                >
-                                  <SelectTrigger
-                                    loading={isLoadingEmails}
-                                    className="bg-background"
-                                  >
-                                    <SelectValue />
-                                  </SelectTrigger>
-
-                                  <SelectContent>
-                                    {emails.map((email) => (
-                                      <SelectItem key={email.id} value={email.id}>
-                                        {email.email}
-                                      </SelectItem>
-                                    ))}
-
-                                    <SelectItem value={'-1'}>Documenso</SelectItem>
-                                  </SelectContent>
-                                </Select>
+                                <Input className="bg-background" {...field} />
                               </FormControl>
 
                               <FormMessage />
@@ -683,82 +599,204 @@ export const EnvelopeEditorSettingsDialog = ({
                         />
                       )}
 
-                      <FormField
-                        control={form.control}
-                        name="meta.emailReplyTo"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>
-                              <Trans>
-                                Reply To Email{' '}
-                                <span className="text-muted-foreground">(Optional)</span>
-                              </Trans>
-                            </FormLabel>
+                      {settings.allowConfigureDistribution && (
+                        <FormField
+                          control={form.control}
+                          name="meta.distributionMethod"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="flex flex-row items-center">
+                                <Trans>Document Distribution Method</Trans>
+                                <Tooltip>
+                                  <TooltipTrigger>
+                                    <InfoIcon className="mx-2 h-4 w-4" />
+                                  </TooltipTrigger>
 
-                            <FormControl>
-                              <Input {...field} />
-                            </FormControl>
+                                  <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
+                                    <h2>
+                                      <strong>
+                                        <Trans>Document Distribution Method</Trans>
+                                      </strong>
+                                    </h2>
 
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
+                                    <p>
+                                      <Trans>
+                                        This is how the document will reach the recipients once the
+                                        document is ready for signing.
+                                      </Trans>
+                                    </p>
 
-                      <FormField
-                        control={form.control}
-                        name="meta.subject"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>
-                              <Trans>
-                                Subject <span className="text-muted-foreground">(Optional)</span>
-                              </Trans>
-                            </FormLabel>
+                                    <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
+                                      <li>
+                                        <Trans>
+                                          <strong>Email</strong> - The recipient will be emailed the
+                                          document to sign, approve, etc.
+                                        </Trans>
+                                      </li>
+                                      <li>
+                                        <Trans>
+                                          <strong>None</strong> - We will generate links which you
+                                          can send to the recipients manually.
+                                        </Trans>
+                                      </li>
+                                    </ul>
 
-                            <FormControl>
-                              <Input {...field} />
-                            </FormControl>
+                                    <Trans>
+                                      <strong>Note</strong> - If you use Links in combination with
+                                      direct templates, you will need to manually send the links to
+                                      the remaining recipients.
+                                    </Trans>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </FormLabel>
 
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
+                              <FormControl>
+                                <Select {...field} onValueChange={field.onChange}>
+                                  <SelectTrigger className="bg-background text-muted-foreground">
+                                    <SelectValue data-testid="documentDistributionMethodSelectValue" />
+                                  </SelectTrigger>
 
-                      <FormField
-                        control={form.control}
-                        name="meta.message"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="flex flex-row items-center">
-                              <Trans>
-                                Message <span className="text-muted-foreground">(Optional)</span>
-                              </Trans>
-                              <Tooltip>
-                                <TooltipTrigger>
-                                  <InfoIcon className="mx-2 h-4 w-4" />
-                                </TooltipTrigger>
-                                <TooltipContent className="p-4 text-muted-foreground">
-                                  <DocumentSendEmailMessageHelper />
-                                </TooltipContent>
-                              </Tooltip>
-                            </FormLabel>
-
-                            <FormControl>
-                              <Textarea className="h-16 resize-none bg-background" {...field} />
-                            </FormControl>
-
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-
-                      <DocumentEmailCheckboxes
-                        value={emailSettings}
-                        onChange={(value) => form.setValue('meta.emailSettings', value)}
-                      />
+                                  <SelectContent position="popper">
+                                    {Object.values(DOCUMENT_DISTRIBUTION_METHODS).map(
+                                      ({ value, description }) => (
+                                        <SelectItem key={value} value={value}>
+                                          {i18n._(description)}
+                                        </SelectItem>
+                                      ),
+                                    )}
+                                  </SelectContent>
+                                </Select>
+                              </FormControl>
+                            </FormItem>
+                          )}
+                        />
+                      )}
                     </>
                   ))
-                  .with('security', () => (
+                  .with(
+                    { activeTab: 'email', settings: { allowConfigureDistribution: true } },
+                    () => (
+                      <>
+                        {organisation.organisationClaim.flags.emailDomains && (
+                          <FormField
+                            control={form.control}
+                            name="meta.emailId"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>
+                                  <Trans>Email Sender</Trans>
+                                </FormLabel>
+
+                                <FormControl>
+                                  <Select
+                                    {...field}
+                                    value={field.value === null ? '-1' : field.value}
+                                    onValueChange={(value) =>
+                                      field.onChange(value === '-1' ? null : value)
+                                    }
+                                  >
+                                    <SelectTrigger
+                                      loading={isLoadingEmails}
+                                      className="bg-background"
+                                    >
+                                      <SelectValue />
+                                    </SelectTrigger>
+
+                                    <SelectContent>
+                                      {emails.map((email) => (
+                                        <SelectItem key={email.id} value={email.id}>
+                                          {email.email}
+                                        </SelectItem>
+                                      ))}
+
+                                      <SelectItem value={'-1'}>Documenso</SelectItem>
+                                    </SelectContent>
+                                  </Select>
+                                </FormControl>
+
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        )}
+
+                        <FormField
+                          control={form.control}
+                          name="meta.emailReplyTo"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                <Trans>
+                                  Reply To Email{' '}
+                                  <span className="text-muted-foreground">(Optional)</span>
+                                </Trans>
+                              </FormLabel>
+
+                              <FormControl>
+                                <Input {...field} />
+                              </FormControl>
+
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name="meta.subject"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                <Trans>
+                                  Subject <span className="text-muted-foreground">(Optional)</span>
+                                </Trans>
+                              </FormLabel>
+
+                              <FormControl>
+                                <Input {...field} />
+                              </FormControl>
+
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name="meta.message"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="flex flex-row items-center">
+                                <Trans>
+                                  Message <span className="text-muted-foreground">(Optional)</span>
+                                </Trans>
+                                <Tooltip>
+                                  <TooltipTrigger>
+                                    <InfoIcon className="mx-2 h-4 w-4" />
+                                  </TooltipTrigger>
+                                  <TooltipContent className="p-4 text-muted-foreground">
+                                    <DocumentSendEmailMessageHelper />
+                                  </TooltipContent>
+                                </Tooltip>
+                              </FormLabel>
+
+                              <FormControl>
+                                <Textarea className="h-16 resize-none bg-background" {...field} />
+                              </FormControl>
+
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <DocumentEmailCheckboxes
+                          value={emailSettings}
+                          onChange={(value) => form.setValue('meta.emailSettings', value)}
+                        />
+                      </>
+                    ),
+                  )
+                  .with({ activeTab: 'security' }, () => (
                     <>
                       {organisation.organisationClaim.flags.cfr21 && (
                         <FormField
@@ -827,7 +865,7 @@ export const EnvelopeEditorSettingsDialog = ({
                       />
                     </>
                   ))
-                  .exhaustive()}
+                  .otherwise(() => null)}
               </fieldset>
 
               <div className="flex flex-row justify-end gap-4 p-6">

apps/remix/app/components/general/envelope-editor/envelope-editor-title-input.tsx

@@ -9,6 +9,7 @@ export type EnvelopeItemTitleInputProps = {
   className?: string;
   placeholder?: string;
   disabled?: boolean;
+  dataTestId?: string;
 };
 
 export const EnvelopeItemTitleInput = ({
@@ -17,6 +18,7 @@ export const EnvelopeItemTitleInput = ({
   className,
   placeholder,
   disabled,
+  dataTestId,
 }: EnvelopeItemTitleInputProps) => {
   const [envelopeItemTitle, setEnvelopeItemTitle] = useState(value);
   const [isError, setIsError] = useState(false);
@@ -63,6 +65,7 @@ export const EnvelopeItemTitleInput = ({
         {envelopeItemTitle || placeholder}
       </span>
       <input
+        data-testid={dataTestId}
         data-1p-ignore
         autoComplete="off"
         ref={inputRef}
@@ -72,7 +75,7 @@ export const EnvelopeItemTitleInput = ({
         disabled={disabled}
         style={{ width: `${inputWidth}px` }}
         className={cn(
-          'text-foreground hover:outline-muted-foreground focus:outline-muted-foreground rounded-sm border-0 bg-transparent p-1 text-sm font-medium outline-none hover:outline hover:outline-1 focus:outline focus:outline-1',
+          'rounded-sm border-0 bg-transparent p-1 text-sm font-medium text-foreground outline-none hover:outline hover:outline-1 hover:outline-muted-foreground focus:outline focus:outline-1 focus:outline-muted-foreground',
           className,
           {
             'outline-red-500': isError,

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

@@ -8,7 +8,6 @@ import { DocumentStatus } from '@prisma/client';
 import { FileWarningIcon, GripVerticalIcon, Loader2 } from 'lucide-react';
 import { X } from 'lucide-react';
 import { ErrorCode as DropzoneErrorCode, type FileRejection } from 'react-dropzone';
-import { Link } from 'react-router';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import {
@@ -17,7 +16,9 @@ import {
 } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import type { TEditorEnvelope } from '@documenso/lib/types/envelope-editor';
 import { nanoid } from '@documenso/lib/universal/id';
+import { PRESIGNED_ENVELOPE_ITEM_ID_PREFIX } from '@documenso/lib/utils/embed-config';
 import { canEnvelopeItemsBeModified } from '@documenso/lib/utils/envelope';
 import { trpc } from '@documenso/trpc/react';
 import type { TCreateEnvelopeItemsPayload } from '@documenso/trpc/server/envelope-router/create-envelope-items.types';
@@ -49,10 +50,14 @@ export const EnvelopeEditorUploadPage = () => {
   const organisation = useCurrentOrganisation();
 
   const { t } = useLingui();
-  const { envelope, setLocalEnvelope, relativePath, editorFields } = useCurrentEnvelopeEditor();
   const { maximumEnvelopeItemCount, remaining } = useLimits();
   const { toast } = useToast();
 
+  const { envelope, setLocalEnvelope, editorFields, editorConfig, isEmbedded, navigateToStep } =
+    useCurrentEnvelopeEditor();
+
+  const { envelopeItems: uploadConfig } = editorConfig;
+
   const [localFiles, setLocalFiles] = useState<LocalFile[]>(
     envelope.envelopeItems
       .sort((a, b) => a.order - b.order)
@@ -103,17 +108,45 @@ export const EnvelopeEditorUploadPage = () => {
   );
 
   const onFileDrop = async (files: File[]) => {
-    const newUploadingFiles: (LocalFile & { file: File })[] = files.map((file) => ({
-      id: nanoid(),
-      envelopeItemId: null,
-      title: file.name,
-      file,
-      isUploading: true,
-      isError: false,
-    }));
+    const newUploadingFiles: (LocalFile & {
+      file: File;
+      data: TEditorEnvelope['envelopeItems'][number]['data'] | null;
+    })[] = await Promise.all(
+      files.map(async (file) => {
+        return {
+          id: nanoid(),
+          envelopeItemId: isEmbedded ? `${PRESIGNED_ENVELOPE_ITEM_ID_PREFIX}${nanoid()}` : null,
+          title: file.name,
+          file,
+          isUploading: isEmbedded ? false : true,
+          // Clone the buffer so it can be read multiple times (File.arrayBuffer() consumes the stream once)
+          data: isEmbedded ? new Uint8Array((await file.arrayBuffer()).slice(0)) : null,
+          isError: false,
+        };
+      }),
+    );
 
     setLocalFiles((prev) => [...prev, ...newUploadingFiles]);
 
+    // Directly commit the files for embedded documents since those are not uploaded
+    // until the end of the embedded flow.
+    if (isEmbedded) {
+      setLocalEnvelope({
+        envelopeItems: [
+          ...envelope.envelopeItems,
+          ...newUploadingFiles.map((file) => ({
+            id: file.envelopeItemId!,
+            title: file.title,
+            order: envelope.envelopeItems.length + 1,
+            envelopeId: envelope.id,
+            data: file.data!,
+          })),
+        ],
+      });
+
+      return;
+    }
+
     const payload = {
       envelopeId: envelope.id,
     } satisfies TCreateEnvelopeItemsPayload;
@@ -163,7 +196,9 @@ export const EnvelopeEditorUploadPage = () => {
    * Hide the envelope item from the list on deletion.
    */
   const onFileDelete = (envelopeItemId: string) => {
-    setLocalFiles((prev) => prev.filter((uploadingFile) => uploadingFile.id !== envelopeItemId));
+    setLocalFiles((prev) =>
+      prev.filter((uploadingFile) => uploadingFile.envelopeItemId !== envelopeItemId),
+    );
 
     const fieldsWithoutDeletedItem = envelope.fields.filter(
       (field) => field.envelopeItemId !== envelopeItemId,
@@ -195,6 +230,30 @@ export const EnvelopeEditorUploadPage = () => {
   };
 
   const debouncedUpdateEnvelopeItems = useDebounceFunction((files: LocalFile[]) => {
+    if (isEmbedded) {
+      const nextEnvelopeItems = files
+        .filter((item) => item.envelopeItemId)
+        .map((item, index) => {
+          const originalEnvelopeItem = envelope.envelopeItems.find(
+            (envelopeItem) => envelopeItem.id === item.envelopeItemId,
+          );
+
+          return {
+            id: item.envelopeItemId || '',
+            title: item.title,
+            order: index + 1,
+            envelopeId: envelope.id,
+            data: originalEnvelopeItem?.data,
+          };
+        });
+
+      setLocalEnvelope({
+        envelopeItems: nextEnvelopeItems,
+      });
+
+      return;
+    }
+
     void updateEnvelopeItems({
       envelopeId: envelope.id,
       data: files
@@ -277,32 +336,45 @@ export const EnvelopeEditorUploadPage = () => {
         </CardHeader>
 
         <CardContent>
-          <DocumentDropzone
-            onDrop={onFileDrop}
-            allowMultiple
-            className="pb-4 pt-6"
-            disabled={dropzoneDisabledMessage !== null}
-            disabledMessage={dropzoneDisabledMessage || undefined}
-            disabledHeading={msg`Upload disabled`}
-            maxFiles={maximumEnvelopeItemCount - localFiles.length}
-            onDropRejected={onFileDropRejected}
-          />
+          {uploadConfig?.allowUpload && (
+            <DocumentDropzone
+              data-testid="envelope-item-dropzone"
+              onDrop={onFileDrop}
+              allowMultiple
+              className="pb-4 pt-6"
+              disabled={dropzoneDisabledMessage !== null}
+              disabledMessage={dropzoneDisabledMessage || undefined}
+              disabledHeading={msg`Upload disabled`}
+              maxFiles={maximumEnvelopeItemCount - localFiles.length}
+              onDropRejected={onFileDropRejected}
+            />
+          )}
 
           {/* Uploaded Files List */}
           <div className="mt-4">
             <DragDropContext onDragEnd={onDragEnd}>
               <Droppable droppableId="files">
                 {(provided) => (
-                  <div {...provided.droppableProps} ref={provided.innerRef} className="space-y-2">
+                  <div
+                    data-testid="envelope-items-list"
+                    {...provided.droppableProps}
+                    ref={provided.innerRef}
+                    className="space-y-2"
+                  >
                     {localFiles.map((localFile, index) => (
                       <Draggable
                         key={localFile.id}
-                        isDragDisabled={isCreatingEnvelopeItems || !canItemsBeModified}
+                        isDragDisabled={
+                          isCreatingEnvelopeItems ||
+                          !canItemsBeModified ||
+                          !uploadConfig?.allowConfigureOrder
+                        }
                         draggableId={localFile.id}
                         index={index}
                       >
                         {(provided, snapshot) => (
                           <div
+                            data-testid={`envelope-item-row-${localFile.id}`}
                             ref={provided.innerRef}
                             {...provided.draggableProps}
                             style={provided.draggableProps.style}
@@ -311,18 +383,25 @@ export const EnvelopeEditorUploadPage = () => {
                             }`}
                           >
                             <div className="flex items-center space-x-3">
-                              <div
-                                {...provided.dragHandleProps}
-                                className="cursor-grab active:cursor-grabbing"
-                              >
-                                <GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
-                              </div>
+                              {uploadConfig?.allowConfigureOrder && (
+                                <div
+                                  {...provided.dragHandleProps}
+                                  data-testid={`envelope-item-drag-handle-${localFile.id}`}
+                                  className="cursor-grab active:cursor-grabbing"
+                                >
+                                  <GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
+                                </div>
+                              )}
 
                               <div>
                                 {localFile.envelopeItemId !== null ? (
                                   <EnvelopeItemTitleInput
-                                    disabled={envelope.status !== DocumentStatus.DRAFT}
+                                    disabled={
+                                      envelope.status !== DocumentStatus.DRAFT ||
+                                      !uploadConfig?.allowConfigureTitle
+                                    }
                                     value={localFile.title}
+                                    dataTestId={`envelope-item-title-input-${localFile.id}`}
                                     placeholder={t`Document Title`}
                                     onChange={(title) => {
                                       onEnvelopeItemTitleChange(localFile.envelopeItemId!, title);
@@ -355,20 +434,36 @@ export const EnvelopeEditorUploadPage = () => {
                                 </div>
                               )}
 
-                              {!localFile.isUploading && localFile.envelopeItemId && (
-                                <EnvelopeItemDeleteDialog
-                                  canItemBeDeleted={canItemsBeModified}
-                                  envelopeId={envelope.id}
-                                  envelopeItemId={localFile.envelopeItemId}
-                                  envelopeItemTitle={localFile.title}
-                                  onDelete={onFileDelete}
-                                  trigger={
-                                    <Button variant="ghost" size="sm">
-                                      <X className="h-4 w-4" />
-                                    </Button>
-                                  }
-                                />
-                              )}
+                              {!localFile.isUploading &&
+                                localFile.envelopeItemId &&
+                                uploadConfig?.allowDelete &&
+                                (isEmbedded ? (
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    data-testid={`envelope-item-remove-button-${localFile.id}`}
+                                    onClick={() => onFileDelete(localFile.envelopeItemId!)}
+                                  >
+                                    <X className="h-4 w-4" />
+                                  </Button>
+                                ) : (
+                                  <EnvelopeItemDeleteDialog
+                                    canItemBeDeleted={canItemsBeModified}
+                                    envelopeId={envelope.id}
+                                    envelopeItemId={localFile.envelopeItemId}
+                                    envelopeItemTitle={localFile.title}
+                                    onDelete={onFileDelete}
+                                    trigger={
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        data-testid={`envelope-item-remove-button-${localFile.id}`}
+                                      >
+                                        <X className="h-4 w-4" />
+                                      </Button>
+                                    }
+                                  />
+                                ))}
                             </div>
                           </div>
                         )}
@@ -385,14 +480,13 @@ export const EnvelopeEditorUploadPage = () => {
 
       {/* Recipients Section */}
       <EnvelopeEditorRecipientForm />
-
-      <div className="flex justify-end">
-        <Button asChild>
-          <Link to={`${relativePath.editorPath}?step=addFields`}>
+      {editorConfig.general.allowAddFieldsStep && (
+        <div className="flex justify-end">
+          <Button type="button" onClick={() => void navigateToStep('addFields')}>
             <Trans>Add Fields</Trans>
-          </Link>
-        </Button>
-      </div>
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -1,7 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
+import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
+import { EnvelopeType } from '@prisma/client';
 import { motion } from 'framer-motion';
 import {
   ArrowLeftIcon,
@@ -9,32 +11,31 @@ import {
   DownloadCloudIcon,
   EyeIcon,
   LinkIcon,
-  MousePointer,
+  type LucideIcon,
+  MousePointerIcon,
   SendIcon,
   SettingsIcon,
   Trash2Icon,
-  Upload,
+  UploadIcon,
 } from 'lucide-react';
 import { useNavigate, useSearchParams } from 'react-router';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
+import type { EnvelopeEditorStep } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import {
-  mapSecondaryIdToDocumentId,
-  mapSecondaryIdToTemplateId,
-} from '@documenso/lib/utils/envelope';
+import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
 import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 
-import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
+import { EnvelopeDeleteDialog } from '~/components/dialogs/envelope-delete-dialog';
 import { EnvelopeDistributeDialog } from '~/components/dialogs/envelope-distribute-dialog';
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 import { EnvelopeDuplicateDialog } from '~/components/dialogs/envelope-duplicate-dialog';
 import { EnvelopeRedistributeDialog } from '~/components/dialogs/envelope-redistribute-dialog';
-import { TemplateDeleteDialog } from '~/components/dialogs/template-delete-dialog';
 import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
 import { EnvelopeEditorSettingsDialog } from '~/components/general/envelope-editor/envelope-editor-settings-dialog';
 
@@ -43,92 +44,108 @@ import EnvelopeEditorHeader from './envelope-editor-header';
 import { EnvelopeEditorPreviewPage } from './envelope-editor-preview-page';
 import { EnvelopeEditorUploadPage } from './envelope-editor-upload-page';
 
-type EnvelopeEditorStep = 'upload' | 'addFields' | 'preview';
+type EnvelopeEditorStepData = {
+  id: string;
+  title: MessageDescriptor;
+  icon: LucideIcon;
+  description: MessageDescriptor;
+};
 
-const envelopeEditorSteps = [
-  {
-    id: 'upload',
-    order: 1,
-    title: msg`Document & Recipients`,
-    icon: Upload,
-    description: msg`Upload documents and add recipients`,
-  },
-  {
-    id: 'addFields',
-    order: 2,
-    title: msg`Add Fields`,
-    icon: MousePointer,
-    description: msg`Place and configure form fields in the document`,
-  },
-  {
-    id: 'preview',
-    order: 3,
-    title: msg`Preview`,
-    icon: EyeIcon,
-    description: msg`Preview the document before sending`,
-  },
-];
+const UPLOAD_STEP = {
+  id: 'upload',
+  title: msg`Document & Recipients`,
+  icon: UploadIcon,
+  description: msg`Upload documents and add recipients`,
+};
 
-export default function EnvelopeEditor() {
+const ADD_FIELDS_STEP = {
+  id: 'addFields',
+  title: msg`Add Fields`,
+  icon: MousePointerIcon,
+  description: msg`Place and configure form fields in the document`,
+};
+
+const PREVIEW_STEP = {
+  id: 'preview',
+  title: msg`Preview`,
+  icon: EyeIcon,
+  description: msg`Preview the document before sending`,
+};
+
+export const EnvelopeEditor = () => {
   const { t } = useLingui();
 
   const navigate = useNavigate();
 
   const {
     envelope,
+    editorConfig,
     isDocument,
     isTemplate,
-    isAutosaving,
-    flushAutosave,
     relativePath,
     syncEnvelope,
+    navigateToStep,
   } = useCurrentEnvelopeEditor();
 
   const [searchParams, setSearchParams] = useSearchParams();
-  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [isStepLoading, setIsStepLoading] = useState(false);
 
-  const [currentStep, setCurrentStep] = useState<EnvelopeEditorStep>(() => {
-    const searchParamStep = searchParams.get('step') as EnvelopeEditorStep | undefined;
+  const {
+    general: {
+      minimizeLeftSidebar,
+      allowUploadAndRecipientStep,
+      allowAddFieldsStep,
+      allowPreviewStep,
+    },
+    actions: {
+      allowDistributing,
+      allowDirectLink,
+      allowDuplication,
+      allowDownloadPDF,
+      allowDeletion,
+      allowReturnToPreviousPage,
+    },
+  } = editorConfig;
 
-    // Empty URL param equals upload, otherwise use the step URL param
-    if (!searchParamStep) {
-      return 'upload';
+  const envelopeEditorSteps = useMemo(() => {
+    const steps: EnvelopeEditorStepData[] = [];
+
+    if (allowUploadAndRecipientStep) {
+      steps.push(UPLOAD_STEP);
     }
 
-    const validSteps: EnvelopeEditorStep[] = ['upload', 'addFields', 'preview'];
-
-    if (validSteps.includes(searchParamStep)) {
-      return searchParamStep;
+    if (allowAddFieldsStep) {
+      steps.push(ADD_FIELDS_STEP);
     }
 
-    return 'upload';
-  });
-
-  const navigateToStep = (step: EnvelopeEditorStep) => {
-    setCurrentStep(step);
-
-    void flushAutosave();
-
-    if (!isStepLoading && isAutosaving) {
-      setIsStepLoading(true);
+    if (allowPreviewStep) {
+      steps.push(PREVIEW_STEP);
     }
 
-    // Update URL params: empty for upload, otherwise set the step
-    if (step === 'upload') {
-      setSearchParams((prev) => {
-        const newParams = new URLSearchParams(prev);
-        newParams.delete('step');
-        return newParams;
-      });
-    } else {
-      setSearchParams((prev) => {
-        const newParams = new URLSearchParams(prev);
-        newParams.set('step', step);
-        return newParams;
-      });
-    }
-  };
+    return steps.map((step, index) => ({
+      ...step,
+      order: index + 1,
+    }));
+  }, [editorConfig]);
+
+  const [currentStep, setCurrentStep] = useState<{ step: EnvelopeEditorStep; isLoading: boolean }>(
+    () => {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const searchParamStep = searchParams.get('step') as EnvelopeEditorStep | undefined;
+
+      // Empty URL param equals upload, otherwise use the step URL param
+      if (!searchParamStep) {
+        return { step: 'upload', isLoading: false };
+      }
+
+      const validSteps: EnvelopeEditorStep[] = ['upload', 'addFields', 'preview'];
+
+      if (validSteps.includes(searchParamStep)) {
+        return { step: searchParamStep, isLoading: false };
+      }
+
+      return { step: 'upload', isLoading: false };
+    },
+  );
 
   // Watch the URL params and setStep if the step changes.
   useEffect(() => {
@@ -136,20 +153,19 @@ export default function EnvelopeEditor() {
 
     const foundStep = envelopeEditorSteps.find((step) => step.id === stepParam);
 
-    if (foundStep && foundStep.id !== currentStep) {
+    if (foundStep && foundStep.id !== currentStep.step) {
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      navigateToStep(foundStep.id as EnvelopeEditorStep);
+      void navigateToStep(foundStep.id as EnvelopeEditorStep).then(() => {
+        setCurrentStep({
+          step: foundStep.id as EnvelopeEditorStep,
+          isLoading: false,
+        });
+      });
     }
   }, [searchParams]);
 
-  useEffect(() => {
-    if (!isAutosaving) {
-      setIsStepLoading(false);
-    }
-  }, [isAutosaving]);
-
   const currentStepData =
-    envelopeEditorSteps.find((step) => step.id === currentStep) || envelopeEditorSteps[0];
+    envelopeEditorSteps.find((step) => step.id === currentStep.step) || envelopeEditorSteps[0];
 
   return (
     <div className="h-screen w-screen bg-gray-50 dark:bg-background">
@@ -158,57 +174,124 @@ export default function EnvelopeEditor() {
       {/* Main Content Area */}
       <div className="flex h-[calc(100vh-4rem)] w-screen">
         {/* Left Section - Step Navigation */}
-        <div className="flex w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-border bg-background py-4">
+        <div
+          className={cn(
+            'flex w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-border bg-background py-4',
+            {
+              'w-14': minimizeLeftSidebar,
+            },
+          )}
+        >
           {/* Left section step selector. */}
-          <div className="px-4">
-            <h3 className="flex items-end justify-between text-sm font-semibold text-foreground">
-              {isDocument ? <Trans>Document Editor</Trans> : <Trans>Template Editor</Trans>}
-
-              <span className="ml-2 rounded border bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground">
-                <Trans context="The step counter">
-                  Step {currentStepData.order}/{envelopeEditorSteps.length}
-                </Trans>
-              </span>
-            </h3>
-
-            <div className="relative my-4 h-[4px] rounded-md bg-muted">
-              <motion.div
-                layout="size"
-                layoutId="document-flow-container-step"
-                className="absolute inset-y-0 left-0 bg-primary"
-                style={{
-                  width: `${(100 / envelopeEditorSteps.length) * (currentStepData.order ?? 0)}%`,
-                }}
-              />
+          {minimizeLeftSidebar ? (
+            <div className="flex justify-center px-4">
+              <div className="relative flex h-10 w-10 items-center justify-center">
+                <svg className="size-10 -rotate-90" viewBox="0 0 40 40" aria-hidden>
+                  {/* Track circle */}
+                  <circle
+                    cx="20"
+                    cy="20"
+                    r="16"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="3"
+                    className="text-muted"
+                  />
+                  {/* Progress arc */}
+                  <motion.circle
+                    cx="20"
+                    cy="20"
+                    r="16"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="3"
+                    strokeLinecap="round"
+                    className="text-primary"
+                    strokeDasharray={2 * Math.PI * 16}
+                    initial={false}
+                    animate={{
+                      strokeDashoffset:
+                        2 *
+                        Math.PI *
+                        16 *
+                        (1 - (currentStepData.order ?? 0) / envelopeEditorSteps.length),
+                    }}
+                    transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+                  />
+                </svg>
+                <span className="absolute inset-0 flex items-center justify-center text-[10px] font-semibold text-foreground">
+                  <Trans context="The step counter">
+                    {currentStepData.order}/{envelopeEditorSteps.length}
+                  </Trans>
+                </span>
+              </div>
             </div>
+          ) : (
+            <div className="px-4">
+              <h3 className="flex items-end justify-between text-sm font-semibold text-foreground">
+                {isDocument ? <Trans>Document Editor</Trans> : <Trans>Template Editor</Trans>}
 
-            <div className="space-y-3">
-              {envelopeEditorSteps.map((step) => {
-                const Icon = step.icon;
-                const isActive = currentStep === step.id;
+                <span className="ml-2 rounded border bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground">
+                  <Trans context="The step counter">
+                    Step {currentStepData.order}/{envelopeEditorSteps.length}
+                  </Trans>
+                </span>
+              </h3>
 
-                return (
-                  <div
-                    key={step.id}
-                    className={`cursor-pointer rounded-lg p-3 transition-colors ${
+              <div className="relative my-4 h-[4px] rounded-md bg-muted">
+                <motion.div
+                  layout="size"
+                  layoutId="document-flow-container-step"
+                  className="absolute inset-y-0 left-0 bg-primary"
+                  style={{
+                    width: `${(100 / envelopeEditorSteps.length) * (currentStepData.order ?? 0)}%`,
+                  }}
+                />
+              </div>
+            </div>
+          )}
+
+          <div
+            className={cn('space-y-3', {
+              'px-4': !minimizeLeftSidebar,
+              'mt-4 flex flex-col items-center': minimizeLeftSidebar,
+            })}
+          >
+            {envelopeEditorSteps.map((step) => {
+              const Icon = step.icon;
+              const isActive = currentStep.step === step.id;
+
+              return (
+                <button
+                  key={step.id}
+                  data-testid={`envelope-editor-step-${step.id}`}
+                  type="button"
+                  className={cn(
+                    `cursor-pointer rounded-lg text-left transition-colors ${
                       isActive
                         ? 'border border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10'
                         : 'border border-gray-200 hover:bg-gray-50 dark:border-gray-400/20 dark:hover:bg-gray-400/10'
-                    }`}
-                    onClick={() => navigateToStep(step.id as EnvelopeEditorStep)}
-                  >
-                    <div className="flex items-center space-x-3">
-                      <div
-                        className={`rounded border p-2 ${
-                          isActive
-                            ? 'border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10'
-                            : 'border-gray-100 bg-gray-100 dark:border-gray-400/20 dark:bg-gray-400/10'
-                        }`}
-                      >
-                        <Icon
-                          className={`h-4 w-4 ${isActive ? 'text-green-600' : 'text-gray-600'}`}
-                        />
-                      </div>
+                    }`,
+                    {
+                      'p-3': !minimizeLeftSidebar,
+                    },
+                  )}
+                  onClick={() => void navigateToStep(step.id as EnvelopeEditorStep)}
+                >
+                  <div className="flex items-center space-x-3">
+                    <div
+                      className={`rounded border p-2 ${
+                        isActive
+                          ? 'border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10'
+                          : 'border-gray-100 bg-gray-100 dark:border-gray-400/20 dark:bg-gray-400/10'
+                      }`}
+                    >
+                      <Icon
+                        className={`h-4 w-4 ${isActive ? 'text-green-600' : 'text-gray-600'}`}
+                      />
+                    </div>
+
+                    {!minimizeLeftSidebar && (
                       <div>
                         <div
                           className={`text-sm font-medium ${
@@ -221,59 +304,101 @@ export default function EnvelopeEditor() {
                         </div>
                         <div className="text-xs text-muted-foreground">{t(step.description)}</div>
                       </div>
-                    </div>
+                    )}
                   </div>
-                );
-              })}
-            </div>
+                </button>
+              );
+            })}
           </div>
 
-          <Separator className="my-6" />
+          <Separator
+            className={cn('my-6', {
+              'mx-auto mb-4 w-4/5': minimizeLeftSidebar,
+            })}
+          />
 
           {/* Quick Actions. */}
-          <div className="space-y-3 px-4">
-            <h4 className="text-sm font-semibold text-foreground">
-              <Trans>Quick Actions</Trans>
-            </h4>
-            <EnvelopeEditorSettingsDialog
-              trigger={
-                <Button variant="ghost" size="sm" className="w-full justify-start">
-                  <SettingsIcon className="mr-2 h-4 w-4" />
-                  {isDocument ? <Trans>Document Settings</Trans> : <Trans>Template Settings</Trans>}
-                </Button>
-              }
-            />
+          <div
+            className={cn('space-y-3 px-4 [&_.lucide]:text-muted-foreground', {
+              'px-2': minimizeLeftSidebar,
+            })}
+          >
+            {!minimizeLeftSidebar && (
+              <h4 className="text-sm font-semibold text-foreground">
+                <Trans>Quick Actions</Trans>
+              </h4>
+            )}
 
-            {isDocument && (
-              <EnvelopeDistributeDialog
-                documentRootPath={relativePath.documentRootPath}
+            {editorConfig.settings && (
+              <EnvelopeEditorSettingsDialog
                 trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start">
-                    <SendIcon className="mr-2 h-4 w-4" />
-                    <Trans>Send Document</Trans>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start"
+                    title={t(msg`Settings`)}
+                  >
+                    <SettingsIcon className="h-4 w-4" />
+
+                    {!minimizeLeftSidebar && (
+                      <span className="ml-2">
+                        {isDocument ? (
+                          <Trans>Document Settings</Trans>
+                        ) : (
+                          <Trans>Template Settings</Trans>
+                        )}
+                      </span>
+                    )}
                   </Button>
                 }
               />
             )}
 
-            {isDocument && (
-              <EnvelopeRedistributeDialog
-                envelope={envelope}
-                trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start">
-                    <SendIcon className="mr-2 h-4 w-4" />
-                    <Trans>Resend Document</Trans>
-                  </Button>
-                }
-              />
+            {isDocument && allowDistributing && (
+              <>
+                <EnvelopeDistributeDialog
+                  documentRootPath={relativePath.documentRootPath}
+                  trigger={
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="w-full justify-start"
+                      title={t(msg`Send Envelope`)}
+                    >
+                      <SendIcon className="h-4 w-4" />
+
+                      {!minimizeLeftSidebar && (
+                        <span className="ml-2">
+                          <Trans>Send Document</Trans>
+                        </span>
+                      )}
+                    </Button>
+                  }
+                />
+
+                <EnvelopeRedistributeDialog
+                  envelope={envelope}
+                  trigger={
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="w-full justify-start"
+                      title={t(msg`Resend Envelope`)}
+                    >
+                      <SendIcon className="h-4 w-4" />
+
+                      {!minimizeLeftSidebar && (
+                        <span className="ml-2">
+                          <Trans>Resend Document</Trans>
+                        </span>
+                      )}
+                    </Button>
+                  }
+                />
+              </>
             )}
 
-            {/* <Button variant="ghost" size="sm" className="w-full justify-start">
-              <FileText className="mr-2 h-4 w-4" />
-              Save as Template
-            </Button> */}
-
-            {isTemplate && (
+            {isTemplate && allowDirectLink && (
               <TemplateDirectLinkDialog
                 templateId={mapSecondaryIdToTemplateId(envelope.secondaryId)}
                 directLink={envelope.directLink}
@@ -281,100 +406,173 @@ export default function EnvelopeEditor() {
                 onCreateSuccess={async () => await syncEnvelope()}
                 onDeleteSuccess={async () => await syncEnvelope()}
                 trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start">
-                    <LinkIcon className="mr-2 h-4 w-4" />
-                    <Trans>Direct Link</Trans>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start"
+                    title={t(msg`Direct Link`)}
+                  >
+                    <LinkIcon className="h-4 w-4" />
+
+                    {!minimizeLeftSidebar && (
+                      <span className="ml-2">
+                        <Trans>Direct Link</Trans>
+                      </span>
+                    )}
                   </Button>
                 }
               />
             )}
 
-            <EnvelopeDuplicateDialog
-              envelopeId={envelope.id}
-              envelopeType={envelope.type}
-              trigger={
-                <Button variant="ghost" size="sm" className="w-full justify-start">
-                  <CopyPlusIcon className="mr-2 h-4 w-4" />
-                  {isDocument ? (
-                    <Trans>Duplicate Document</Trans>
-                  ) : (
-                    <Trans>Duplicate Template</Trans>
-                  )}
-                </Button>
-              }
-            />
+            {allowDuplication && (
+              <EnvelopeDuplicateDialog
+                envelopeId={envelope.id}
+                envelopeType={envelope.type}
+                trigger={
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start"
+                    title={t(msg`Duplicate Envelope`)}
+                  >
+                    <CopyPlusIcon className="h-4 w-4" />
 
-            <EnvelopeDownloadDialog
-              envelopeId={envelope.id}
-              envelopeStatus={envelope.status}
-              envelopeItems={envelope.envelopeItems}
-              trigger={
-                <Button variant="ghost" size="sm" className="w-full justify-start">
-                  <DownloadCloudIcon className="mr-2 h-4 w-4" />
-                  <Trans>Download PDF</Trans>
-                </Button>
-              }
-            />
+                    {!minimizeLeftSidebar && (
+                      <span className="ml-2">
+                        {isDocument ? (
+                          <Trans>Duplicate Document</Trans>
+                        ) : (
+                          <Trans>Duplicate Template</Trans>
+                        )}
+                      </span>
+                    )}
+                  </Button>
+                }
+              />
+            )}
 
-            <Button
-              variant="ghost"
-              size="sm"
-              className="w-full justify-start"
-              onClick={() => setDeleteDialogOpen(true)}
-            >
-              <Trash2Icon className="mr-2 h-4 w-4" />
-              {isDocument ? <Trans>Delete Document</Trans> : <Trans>Delete Template</Trans>}
-            </Button>
+            {allowDownloadPDF && (
+              <EnvelopeDownloadDialog
+                envelopeId={envelope.id}
+                envelopeStatus={envelope.status}
+                envelopeItems={envelope.envelopeItems}
+                trigger={
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start"
+                    title={t(msg`Download PDF`)}
+                  >
+                    <DownloadCloudIcon className="h-4 w-4" />
+
+                    {!minimizeLeftSidebar && (
+                      <span className="ml-2">
+                        <Trans>Download PDF</Trans>
+                      </span>
+                    )}
+                  </Button>
+                }
+              />
+            )}
+
+            {/* Check envelope ID since it can be in embedded create mode. */}
+            {allowDeletion && envelope.id && (
+              <EnvelopeDeleteDialog
+                id={envelope.id}
+                type={envelope.type}
+                status={envelope.status}
+                title={envelope.title}
+                canManageDocument={true}
+                trigger={
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start"
+                    title={t(msg`Delete Envelope`)}
+                  >
+                    <Trash2Icon className="h-4 w-4" />
+
+                    {!minimizeLeftSidebar && (
+                      <span className="ml-2">
+                        {isDocument ? (
+                          <Trans>Delete Document</Trans>
+                        ) : (
+                          <Trans>Delete Template</Trans>
+                        )}
+                      </span>
+                    )}
+                  </Button>
+                }
+                onDelete={async () => {
+                  // Todo: Embed - Where to navigate?
+                  await navigate(
+                    envelope.type === EnvelopeType.DOCUMENT
+                      ? relativePath.documentRootPath
+                      : relativePath.templateRootPath,
+                  );
+                }}
+              />
+            )}
           </div>
 
-          {isDocument ? (
-            <DocumentDeleteDialog
-              id={mapSecondaryIdToDocumentId(envelope.secondaryId)}
-              status={envelope.status}
-              documentTitle={envelope.title}
-              canManageDocument={true}
-              open={isDeleteDialogOpen}
-              onOpenChange={setDeleteDialogOpen}
-              onDelete={async () => {
-                await navigate(relativePath.documentRootPath);
-              }}
-            />
-          ) : (
-            <TemplateDeleteDialog
-              id={mapSecondaryIdToTemplateId(envelope.secondaryId)}
-              open={isDeleteDialogOpen}
-              onOpenChange={setDeleteDialogOpen}
-              onDelete={async () => {
-                await navigate(relativePath.templateRootPath);
-              }}
-            />
-          )}
-
           {/* Footer of left sidebar. */}
-          <div className="mt-auto px-4">
-            <Button variant="ghost" className="w-full justify-start" asChild>
-              <Link to={relativePath.basePath}>
-                <ArrowLeftIcon className="mr-2 h-4 w-4" />
-                {isDocument ? (
-                  <Trans>Return to documents</Trans>
-                ) : (
-                  <Trans>Return to templates</Trans>
-                )}
-              </Link>
-            </Button>
-          </div>
+          {allowReturnToPreviousPage && (
+            <div
+              className={cn('mt-auto px-4', {
+                'px-2': minimizeLeftSidebar,
+              })}
+            >
+              <Button
+                variant="ghost"
+                className={cn('w-full justify-start', {
+                  'flex items-center justify-center': minimizeLeftSidebar,
+                })}
+                asChild
+              >
+                <Link to={relativePath.basePath}>
+                  <ArrowLeftIcon className="h-4 w-4 flex-shrink-0" />
+
+                  {!minimizeLeftSidebar && (
+                    <span className="ml-2">
+                      {isDocument ? (
+                        <Trans>Return to documents</Trans>
+                      ) : (
+                        <Trans>Return to templates</Trans>
+                      )}
+                    </span>
+                  )}
+                </Link>
+              </Button>
+            </div>
+          )}
         </div>
 
         {/* Main Content - Changes based on current step */}
-        <AnimateGenericFadeInOut className="flex-1 overflow-y-auto" key={currentStep}>
-          {match({ currentStep, isStepLoading })
+        <AnimateGenericFadeInOut
+          className="flex-1 overflow-y-auto"
+          key={currentStep.isLoading ? `loading-${currentStep.step}` : currentStep.step}
+        >
+          {match({
+            isStepLoading: currentStep.isLoading,
+            currentStep: currentStep.step,
+            allowUploadAndRecipientStep,
+            allowAddFieldsStep,
+            allowPreviewStep,
+          })
             .with({ isStepLoading: true }, () => <SpinnerBox className="py-32" />)
-            .with({ currentStep: 'upload' }, () => <EnvelopeEditorUploadPage />)
-            .with({ currentStep: 'addFields' }, () => <EnvelopeEditorFieldsPage />)
-            .with({ currentStep: 'preview' }, () => <EnvelopeEditorPreviewPage />)
-            .exhaustive()}
+            .with({ currentStep: 'upload', allowUploadAndRecipientStep: true }, () => (
+              <EnvelopeEditorUploadPage />
+            ))
+            .with({ currentStep: 'addFields', allowAddFieldsStep: true }, () => (
+              <EnvelopeEditorFieldsPage />
+            ))
+            .with({ currentStep: 'preview', allowPreviewStep: true }, () => (
+              <EnvelopeEditorPreviewPage />
+            ))
+            .otherwise(() => null)}
         </AnimateGenericFadeInOut>
       </div>
     </div>
   );
-}
+};

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

@@ -5,17 +5,22 @@ import { DocumentStatus, type Recipient, SigningStatus } from '@prisma/client';
 import type Konva from 'konva';
 
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
-import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import {
+  type PageRenderData,
+  useCurrentEnvelopeRender,
+} from '@documenso/lib/client-only/providers/envelope-render-provider';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 import { EnvelopeRecipientFieldTooltip } from '@documenso/ui/components/document/envelope-recipient-field-tooltip';
 
+import { EnvelopePageImage } from '../envelope/envelope-page-image';
+
 type GenericLocalField = TEnvelope['fields'][number] & {
   recipient: Pick<Recipient, 'id' | 'name' | 'email' | 'signingStatus'>;
 };
 
-export default function EnvelopeGenericPageRenderer() {
+export default function EnvelopeGenericPageRenderer({ pageData }: { pageData: PageRenderData }) {
   const { i18n } = useLingui();
 
   const {
@@ -28,19 +33,12 @@ export default function EnvelopeGenericPageRenderer() {
     overrideSettings,
   } = useCurrentEnvelopeRender();
 
-  const {
-    stage,
-    pageLayer,
-    canvasElement,
-    konvaContainer,
-    pageContext,
-    scaledViewport,
-    unscaledViewport,
-  } = usePageRenderer(({ stage, pageLayer }) => {
-    createPageCanvas(stage, pageLayer);
-  });
+  const { stage, pageLayer, imageProps, konvaContainer, unscaledViewport, renderStatus } =
+    usePageRenderer(({ stage, pageLayer }) => {
+      createPageCanvas(stage, pageLayer);
+    }, pageData);
 
-  const { _className, scale } = pageContext;
+  const { scale, pageNumber } = pageData;
 
   const localPageFields = useMemo((): GenericLocalField[] => {
     if (envelopeStatus === DocumentStatus.COMPLETED) {
@@ -49,8 +47,7 @@ export default function EnvelopeGenericPageRenderer() {
 
     return fields
       .filter(
-        (field) =>
-          field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
+        (field) => field.page === pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
       )
       .map((field) => {
         const recipient = recipients.find((recipient) => recipient.id === field.recipientId);
@@ -73,7 +70,7 @@ export default function EnvelopeGenericPageRenderer() {
           (recipient.signingStatus === SigningStatus.SIGNED ? inserted : true) ||
           fieldMeta?.readOnly,
       );
-  }, [fields, pageContext.pageNumber, currentEnvelopeItem?.id, recipients]);
+  }, [fields, pageNumber, currentEnvelopeItem?.id, recipients]);
 
   const unsafeRenderFieldOnLayer = (field: GenericLocalField) => {
     if (!pageLayer.current) {
@@ -160,10 +157,7 @@ export default function EnvelopeGenericPageRenderer() {
   }
 
   return (
-    <div
-      className="relative w-full"
-      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
-    >
+    <div className="relative w-full" key={`${currentEnvelopeItem.id}-renderer-${pageNumber}`}>
       {overrideSettings?.showRecipientTooltip &&
         localPageFields.map((field) => (
           <EnvelopeRecipientFieldTooltip
@@ -177,13 +171,7 @@ export default function EnvelopeGenericPageRenderer() {
       {/* The element Konva will inject it's canvas into. */}
       <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>
 
-      {/* Canvas the PDF will be rendered on. */}
-      <canvas
-        className={`${_className}__canvas z-0`}
-        ref={canvasElement}
-        height={scaledViewport.height}
-        width={scaledViewport.width}
-      />
+      <EnvelopePageImage renderStatus={renderStatus} imageProps={imageProps} />
     </div>
   );
 }

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

@@ -14,7 +14,10 @@ import type { KonvaEventObject } from 'konva/lib/Node';
 import { match } from 'ts-pattern';
 
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
-import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import {
+  type PageRenderData,
+  useCurrentEnvelopeRender,
+} from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
 import { isBase64Image } from '@documenso/lib/constants/signatures';
@@ -44,12 +47,13 @@ import { handleTextFieldClick } from '~/utils/field-signing/text-field';
 
 import { useRequiredDocumentSigningAuthContext } from '../document-signing/document-signing-auth-provider';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
+import { EnvelopePageImage } from '../envelope/envelope-page-image';
 
 type GenericLocalField = TEnvelope['fields'][number] & {
   recipient: Pick<Recipient, 'id' | 'name' | 'email' | 'signingStatus'>;
 };
 
-export default function EnvelopeSignerPageRenderer() {
+export default function EnvelopeSignerPageRenderer({ pageData }: { pageData: PageRenderData }) {
   const { t, i18n } = useLingui();
   const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
   const { sessionData } = useOptionalSession();
@@ -77,17 +81,10 @@ export default function EnvelopeSignerPageRenderer() {
 
   const { onFieldSigned, onFieldUnsigned } = useEmbedSigningContext() || {};
 
-  const {
-    stage,
-    pageLayer,
-    canvasElement,
-    konvaContainer,
-    pageContext,
-    scaledViewport,
-    unscaledViewport,
-  } = usePageRenderer(({ stage, pageLayer }) => createPageCanvas(stage, pageLayer));
+  const { stage, pageLayer, imageProps, konvaContainer, unscaledViewport, renderStatus } =
+    usePageRenderer(({ stage, pageLayer }) => createPageCanvas(stage, pageLayer), pageData);
 
-  const { _className, scale } = pageContext;
+  const { scale, pageNumber } = pageData;
 
   const { envelope } = envelopeData;
 
@@ -99,10 +96,9 @@ export default function EnvelopeSignerPageRenderer() {
     }
 
     return fieldsToRender.filter(
-      (field) =>
-        field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
+      (field) => field.page === pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
     );
-  }, [recipientFields, selectedAssistantRecipientFields, pageContext.pageNumber]);
+  }, [recipientFields, selectedAssistantRecipientFields, pageNumber]);
 
   /**
    * Returns fields that have been fully signed by other recipients for this specific
@@ -117,7 +113,7 @@ export default function EnvelopeSignerPageRenderer() {
       return recipient.fields
         .filter(
           (field) =>
-            field.page === pageContext.pageNumber &&
+            field.page === pageNumber &&
             field.envelopeItemId === currentEnvelopeItem?.id &&
             (field.inserted || field.fieldMeta?.readOnly),
         )
@@ -132,7 +128,7 @@ export default function EnvelopeSignerPageRenderer() {
           },
         }));
     });
-  }, [envelope.recipients, pageContext.pageNumber]);
+  }, [envelope.recipients, pageNumber]);
 
   const unsafeRenderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
     if (!pageLayer.current) {
@@ -534,14 +530,11 @@ export default function EnvelopeSignerPageRenderer() {
   }
 
   return (
-    <div
-      className="relative w-full"
-      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
-    >
+    <div className="relative w-full" key={`${currentEnvelopeItem.id}-renderer-${pageNumber}`}>
       {showPendingFieldTooltip &&
         recipientFieldsRemaining.length > 0 &&
         recipientFieldsRemaining[0]?.envelopeItemId === currentEnvelopeItem?.id &&
-        recipientFieldsRemaining[0]?.page === pageContext.pageNumber && (
+        recipientFieldsRemaining[0]?.page === pageNumber && (
           <EnvelopeFieldToolTip
             key={recipientFieldsRemaining[0].id}
             field={recipientFieldsRemaining[0]}
@@ -563,13 +556,7 @@ export default function EnvelopeSignerPageRenderer() {
       {/* The element Konva will inject it's canvas into. */}
       <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>
 
-      {/* Canvas the PDF will be rendered on. */}
-      <canvas
-        className={`${_className}__canvas z-0`}
-        ref={canvasElement}
-        height={scaledViewport.height}
-        width={scaledViewport.width}
-      />
+      <EnvelopePageImage renderStatus={renderStatus} imageProps={imageProps} />
     </div>
   );
 }

apps/remix/app/components/general/envelope/envelope-page-image.tsx

@@ -0,0 +1,32 @@
+import { Trans } from '@lingui/react/macro';
+
+import { Spinner } from '@documenso/ui/primitives/spinner';
+
+type EnvelopePageImageProps = {
+  renderStatus: 'loading' | 'loaded' | 'error';
+  imageProps: React.ImgHTMLAttributes<HTMLImageElement> & Record<string, unknown> & { alt: '' };
+};
+
+export const EnvelopePageImage = ({ renderStatus, imageProps }: EnvelopePageImageProps) => {
+  return (
+    <>
+      {/* Loading State */}
+      {renderStatus === 'loading' && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center">
+          <Spinner />
+        </div>
+      )}
+
+      {renderStatus === 'error' && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center">
+          <p>
+            <Trans>Error loading page</Trans>
+          </p>
+        </div>
+      )}
+
+      {/* The PDF image. */}
+      <img {...imageProps} alt="" />
+    </>
+  );
+};

apps/remix/app/components/general/metric-card.tsx

@@ -5,15 +5,16 @@ import { cn } from '@documenso/ui/lib/utils';
 export type CardMetricProps = {
   icon?: LucideIcon;
   title: string;
-  value: string | number;
+  value?: string | number;
   className?: string;
+  children?: React.ReactNode;
 };
 
-export const CardMetric = ({ icon: Icon, title, value, className }: CardMetricProps) => {
+export const CardMetric = ({ icon: Icon, title, value, className, children }: CardMetricProps) => {
   return (
     <div
       className={cn(
-        'border-border bg-background hover:shadow-border/80 h-32 max-h-32 max-w-full overflow-hidden rounded-lg border shadow shadow-transparent duration-200',
+        'h-32 max-h-32 max-w-full overflow-hidden rounded-lg border border-border bg-background shadow shadow-transparent duration-200 hover:shadow-border/80',
         className,
       )}
     >
@@ -21,7 +22,7 @@ export const CardMetric = ({ icon: Icon, title, value, className }: CardMetricPr
         <div className="flex items-start">
           {Icon && (
             <div className="mr-2 h-4 w-4">
-              <Icon className="text-muted-foreground h-4 w-4" />
+              <Icon className="h-4 w-4 text-muted-foreground" />
             </div>
           )}
 
@@ -30,9 +31,11 @@ export const CardMetric = ({ icon: Icon, title, value, className }: CardMetricPr
           </h3>
         </div>
 
-        <p className="text-foreground mt-auto text-4xl font-semibold leading-8">
-          {typeof value === 'number' ? value.toLocaleString('en-US') : value}
-        </p>
+        {children || (
+          <p className="mt-auto text-4xl font-semibold leading-8 text-foreground">
+            {typeof value === 'number' ? value.toLocaleString('en-US') : value}
+          </p>
+        )}
       </div>
     </div>
   );

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

@@ -14,11 +14,11 @@ import {
 import { ZDocumentAccessAuthTypesSchema } from '@documenso/lib/types/document-auth';
 import type { TTemplate } from '@documenso/lib/types/template';
 import { trpc } from '@documenso/trpc/react';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 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 { 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,11 +312,12 @@ export const TemplateEditForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewerLazy
+          <PDFViewer
             key={template.envelopeItems[0].id}
             envelopeItem={template.envelopeItems[0]}
             token={undefined}
-            version="signed"
+            version="current"
+            scrollParentRef="window"
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

apps/remix/app/components/tables/admin-claims-table.tsx

@@ -6,6 +6,7 @@ import { EditIcon, MoreHorizontalIcon, Trash2Icon } from 'lucide-react';
 import { Link, useSearchParams } from 'react-router';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import type { TLicenseClaim } from '@documenso/lib/types/license';
 import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { SUBSCRIPTION_CLAIM_FEATURE_FLAGS } from '@documenso/lib/types/subscription';
 import { trpc } from '@documenso/trpc/react';
@@ -27,7 +28,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { ClaimDeleteDialog } from '../dialogs/claim-delete-dialog';
 import { ClaimUpdateDialog } from '../dialogs/claim-update-dialog';
 
-export const AdminClaimsTable = () => {
+type AdminClaimsTableProps = {
+  licenseFlags?: TLicenseClaim;
+};
+
+export const AdminClaimsTable = ({ licenseFlags }: AdminClaimsTableProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
 
@@ -97,11 +102,11 @@ export const AdminClaimsTable = () => {
           );
 
           if (flags.length === 0) {
-            return <p className="text-muted-foreground text-xs">{t`None`}</p>;
+            return <p className="text-xs text-muted-foreground">{t`None`}</p>;
           }
 
           return (
-            <ul className="text-muted-foreground list-disc space-y-1 text-xs">
+            <ul className="list-disc space-y-1 text-xs text-muted-foreground">
               {flags.map(({ key, label }) => (
                 <li key={key}>{label}</li>
               ))}
@@ -114,7 +119,7 @@ export const AdminClaimsTable = () => {
         cell: ({ row }) => (
           <DropdownMenu>
             <DropdownMenuTrigger>
-              <MoreHorizontalIcon className="text-muted-foreground h-5 w-5" />
+              <MoreHorizontalIcon className="h-5 w-5 text-muted-foreground" />
             </DropdownMenuTrigger>
 
             <DropdownMenuContent className="w-52" align="start" forceMount>
@@ -124,6 +129,7 @@ export const AdminClaimsTable = () => {
 
               <ClaimUpdateDialog
                 claim={row.original}
+                licenseFlags={licenseFlags}
                 trigger={
                   <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
                     <div>

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

@@ -12,7 +12,8 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/find-documents.types';
-import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import type { DataTableColumnDef, RowSelectionState } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
@@ -30,6 +31,9 @@ export type DocumentsTableProps = {
   isLoading?: boolean;
   isLoadingError?: boolean;
   onMoveDocument?: (documentId: number) => void;
+  enableSelection?: boolean;
+  rowSelection?: RowSelectionState;
+  onRowSelectionChange?: (selection: RowSelectionState) => void;
 };
 
 type DocumentsTableRow = TFindDocumentsResponse['data'][number];
@@ -39,6 +43,9 @@ export const DocumentsTable = ({
   isLoading,
   isLoadingError,
   onMoveDocument,
+  enableSelection,
+  rowSelection,
+  onRowSelectionChange,
 }: DocumentsTableProps) => {
   const { _, i18n } = useLingui();
 
@@ -48,7 +55,34 @@ export const DocumentsTable = ({
   const updateSearchParams = useUpdateSearchParams();
 
   const columns = useMemo(() => {
-    return [
+    const cols: DataTableColumnDef<DocumentsTableRow>[] = [];
+
+    if (enableSelection) {
+      cols.push({
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            checked={table.getIsAllPageRowsSelected()}
+            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+            aria-label={_(msg`Select all`)}
+            onClick={(e) => e.stopPropagation()}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label={_(msg`Select row`)}
+            onClick={(e) => e.stopPropagation()}
+          />
+        ),
+        enableSorting: false,
+        enableHiding: false,
+        size: 40,
+      });
+    }
+
+    cols.push(
       {
         header: _(msg`Created`),
         accessorKey: 'createdAt',
@@ -93,8 +127,10 @@ export const DocumentsTable = ({
             </div>
           ),
       },
-    ] satisfies DataTableColumnDef<DocumentsTableRow>[];
-  }, [team, onMoveDocument]);
+    );
+
+    return cols;
+  }, [team, onMoveDocument, enableSelection]);
 
   const onPaginationChange = (page: number, perPage: number) => {
     startTransition(() => {
@@ -132,6 +168,11 @@ export const DocumentsTable = ({
           rows: 5,
           component: (
             <>
+              {enableSelection && (
+                <TableCell>
+                  <Skeleton className="h-4 w-4 rounded" />
+                </TableCell>
+              )}
               <TableCell>
                 <Skeleton className="h-4 w-40 rounded-full" />
               </TableCell>
@@ -152,13 +193,17 @@ export const DocumentsTable = ({
             </>
           ),
         }}
+        enableRowSelection={enableSelection}
+        rowSelection={rowSelection}
+        onRowSelectionChange={onRowSelectionChange}
+        getRowId={(row) => row.envelopeId}
       >
         {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
       </DataTable>
 
       {isPending && (
-        <div className="bg-background/50 absolute inset-0 flex items-center justify-center">
-          <Loader className="text-muted-foreground h-8 w-8 animate-spin" />
+        <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+          <Loader className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       )}
     </div>

apps/remix/app/components/tables/envelopes-table-bulk-action-bar.tsx

@@ -0,0 +1,55 @@
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { FolderInputIcon, Trash2Icon, XIcon } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export type EnvelopesTableBulkActionBarProps = {
+  selectedCount: number;
+  onMoveClick: () => void;
+  onDeleteClick: () => void;
+  onClearSelection: () => void;
+};
+
+export const EnvelopesTableBulkActionBar = ({
+  selectedCount,
+  onMoveClick,
+  onDeleteClick,
+  onClearSelection,
+}: EnvelopesTableBulkActionBarProps) => {
+  const { t } = useLingui();
+
+  if (selectedCount === 0) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 items-center gap-x-4 rounded-lg border border-border bg-widget px-4 py-3 shadow-lg">
+      <span className="text-sm font-medium">
+        <Trans>{selectedCount} selected</Trans>
+      </span>
+
+      <div className="h-6 w-px bg-border" />
+
+      <Button type="button" variant="outline" size="sm" onClick={onMoveClick}>
+        <FolderInputIcon className="mr-2 h-4 w-4" />
+        <Trans>Move to Folder</Trans>
+      </Button>
+
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={onDeleteClick}
+        className="text-destructive hover:text-destructive"
+      >
+        <Trash2Icon className="mr-2 h-4 w-4" />
+        <Trans>Delete</Trans>
+      </Button>
+
+      <Button variant="ghost" size="sm" onClick={onClearSelection} aria-label={t`Clear selection`}>
+        <XIcon className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+};

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

@@ -12,7 +12,8 @@ import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/org
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 import type { TFindTemplatesResponse } from '@documenso/trpc/server/template-router/schema';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import type { DataTableColumnDef, RowSelectionState } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
@@ -32,6 +33,9 @@ type TemplatesTableProps = {
   isLoadingError?: boolean;
   documentRootPath: string;
   templateRootPath: string;
+  enableSelection?: boolean;
+  rowSelection?: RowSelectionState;
+  onRowSelectionChange?: (selection: RowSelectionState) => void;
 };
 
 type TemplatesTableRow = TFindTemplatesResponse['data'][number];
@@ -42,6 +46,9 @@ export const TemplatesTable = ({
   isLoadingError,
   documentRootPath,
   templateRootPath,
+  enableSelection,
+  rowSelection,
+  onRowSelectionChange,
 }: TemplatesTableProps) => {
   const { _, i18n } = useLingui();
   const { remaining } = useLimits();
@@ -60,7 +67,34 @@ export const TemplatesTable = ({
   };
 
   const columns = useMemo(() => {
-    return [
+    const cols: DataTableColumnDef<TemplatesTableRow>[] = [];
+
+    if (enableSelection) {
+      cols.push({
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            checked={table.getIsAllPageRowsSelected()}
+            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+            aria-label={_(msg`Select all`)}
+            onClick={(e) => e.stopPropagation()}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label={_(msg`Select row`)}
+            onClick={(e) => e.stopPropagation()}
+          />
+        ),
+        enableSorting: false,
+        enableHiding: false,
+        size: 40,
+      });
+    }
+
+    cols.push(
       {
         header: _(msg`Created`),
         accessorKey: 'createdAt',
@@ -86,8 +120,8 @@ export const TemplatesTable = ({
                 <InfoIcon className="mx-2 h-4 w-4" />
               </TooltipTrigger>
 
-              <TooltipContent className="text-foreground max-w-md space-y-2 !p-0">
-                <ul className="text-muted-foreground space-y-0.5 divide-y [&>li]:p-4">
+              <TooltipContent className="max-w-md space-y-2 !p-0 text-foreground">
+                <ul className="space-y-0.5 divide-y text-muted-foreground [&>li]:p-4">
                   <li>
                     <h2 className="mb-2 flex flex-row items-center font-semibold">
                       <Globe2Icon className="mr-2 h-5 w-5 text-green-500 dark:text-green-300" />
@@ -176,8 +210,10 @@ export const TemplatesTable = ({
           );
         },
       },
-    ] satisfies DataTableColumnDef<TemplatesTableRow>[];
-  }, [documentRootPath, team?.id, templateRootPath]);
+    );
+
+    return cols;
+  }, [documentRootPath, team?.id, templateRootPath, enableSelection]);
 
   const onPaginationChange = (page: number, perPage: number) => {
     startTransition(() => {
@@ -224,6 +260,10 @@ export const TemplatesTable = ({
         currentPage={results.currentPage}
         totalPages={results.totalPages}
         onPaginationChange={onPaginationChange}
+        enableRowSelection={enableSelection}
+        rowSelection={rowSelection}
+        onRowSelectionChange={onRowSelectionChange}
+        getRowId={(row) => row.envelopeId}
         error={{
           enable: isLoadingError || false,
         }}
@@ -232,6 +272,11 @@ export const TemplatesTable = ({
           rows: 5,
           component: (
             <>
+              {enableSelection && (
+                <TableCell className="w-10">
+                  <Skeleton className="h-4 w-4 rounded" />
+                </TableCell>
+              )}
               <TableCell>
                 <Skeleton className="h-4 w-40 rounded-full" />
               </TableCell>

apps/remix/app/root.tsx

@@ -7,7 +7,6 @@ import {
   data,
   isRouteErrorResponse,
   useLoaderData,
-  useLocation,
 } from 'react-router';
 import { PreventFlashOnWrongTheme, ThemeProvider, useTheme } from 'remix-themes';
 
@@ -87,8 +86,6 @@ export async function loader({ request }: Route.LoaderArgs) {
 export function Layout({ children }: { children: React.ReactNode }) {
   const { theme } = useLoaderData<typeof loader>() || {};
 
-  const location = useLocation();
-
   return (
     <ThemeProvider specifiedTheme={theme} themeAction="/api/theme">
       <LayoutContent>{children}</LayoutContent>
@@ -129,6 +126,18 @@ export function LayoutContent({ children }: { children: React.ReactNode }) {
         <script>0</script>
       </head>
       <body>
+        {/* Global license banner currently disabled. Need to wait until after a few releases. */}
+        {/* {licenseStatus === '?' && (
+          <div className="bg-destructive text-destructive-foreground">
+            <div className="mx-auto flex h-auto max-w-screen-xl items-center justify-center px-4 py-3 text-sm font-medium">
+              <div className="flex items-center">
+                <AlertTriangleIcon className="mr-2 h-4 w-4" />
+                <Trans>This is an expired license instance of Documenso</Trans>
+              </div>
+            </div>
+          </div>
+        )} */}
+
         <SessionProvider initialSession={session}>
           <TooltipProvider>
             <TrpcProvider>

apps/remix/app/routes/_authenticated+/admin+/_layout.tsx

@@ -11,25 +11,37 @@ import {
 import { Link, Outlet, redirect, useLocation } from 'react-router';
 
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { LicenseClient } from '@documenso/lib/server-only/license/license-client';
 import { isAdmin } from '@documenso/lib/utils/is-admin';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
+import { AdminLicenseStatusBanner } from '~/components/general/admin-license-status-banner';
+
 import type { Route } from './+types/_layout';
 
 export async function loader({ request }: Route.LoaderArgs) {
   const { user } = await getSession(request);
 
+  const license = await LicenseClient.getInstance()?.getCachedLicense();
+
   if (!user || !isAdmin(user)) {
     throw redirect('/');
   }
+
+  return {
+    license: license || null,
+  };
 }
 
-export default function AdminLayout() {
+export default function AdminLayout({ loaderData }: Route.ComponentProps) {
+  const { license } = loaderData;
   const { pathname } = useLocation();
 
   return (
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <AdminLicenseStatusBanner license={license} />
+
       <h1 className="text-4xl font-semibold">
         <Trans>Admin Panel</Trans>
       </h1>

apps/remix/app/routes/_authenticated+/admin+/claims.tsx

@@ -4,13 +4,26 @@ import { useLingui } from '@lingui/react/macro';
 import { useLocation, useSearchParams } from 'react-router';
 
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { LicenseClient } from '@documenso/lib/server-only/license/license-client';
 import { Input } from '@documenso/ui/primitives/input';
 
 import { ClaimCreateDialog } from '~/components/dialogs/claim-create-dialog';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { AdminClaimsTable } from '~/components/tables/admin-claims-table';
 
-export default function Claims() {
+import type { Route } from './+types/claims';
+
+export async function loader() {
+  const licenseData = await LicenseClient.getInstance()?.getCachedLicense();
+
+  return {
+    licenseFlags: licenseData?.license?.flags,
+  };
+}
+
+export default function Claims({ loaderData }: Route.ComponentProps) {
+  const { licenseFlags } = loaderData;
+
   const { t } = useLingui();
 
   const [searchParams, setSearchParams] = useSearchParams();
@@ -47,7 +60,7 @@ export default function Claims() {
         subtitle={t`Manage all subscription claims`}
         hideDivider
       >
-        <ClaimCreateDialog />
+        <ClaimCreateDialog licenseFlags={licenseFlags} />
       </SettingsHeader>
 
       <div className="mt-4">
@@ -58,7 +71,7 @@ export default function Claims() {
           className="mb-4"
         />
 
-        <AdminClaimsTable />
+        <AdminClaimsTable licenseFlags={licenseFlags} />
       </div>
     </div>
   );

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

@@ -12,6 +12,8 @@ import type { z } from 'zod';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { SUBSCRIPTION_STATUS_MAP } from '@documenso/lib/constants/billing';
 import { AppError } from '@documenso/lib/errors/app-error';
+import { LicenseClient } from '@documenso/lib/server-only/license/license-client';
+import type { TLicenseClaim } from '@documenso/lib/types/license';
 import { SUBSCRIPTION_CLAIM_FEATURE_FLAGS } from '@documenso/lib/types/subscription';
 import { trpc } from '@documenso/trpc/react';
 import type { TGetAdminOrganisationResponse } from '@documenso/trpc/server/admin-router/get-admin-organisation.types';
@@ -40,7 +42,20 @@ import { SettingsHeader } from '~/components/general/settings-header';
 
 import type { Route } from './+types/organisations.$id';
 
-export default function OrganisationGroupSettingsPage({ params }: Route.ComponentProps) {
+export async function loader() {
+  const licenseData = await LicenseClient.getInstance()?.getCachedLicense();
+
+  return {
+    licenseFlags: licenseData?.license?.flags,
+  };
+}
+
+export default function OrganisationGroupSettingsPage({
+  params,
+  loaderData,
+}: Route.ComponentProps) {
+  const { licenseFlags } = loaderData;
+
   const { t } = useLingui();
   const { toast } = useToast();
 
@@ -129,7 +144,7 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen
   if (isLoadingOrganisation) {
     return (
       <div className="flex items-center justify-center rounded-lg py-32">
-        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+        <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
       </div>
     );
   }
@@ -239,7 +254,7 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen
         )}
       </Alert>
 
-      <OrganisationAdminForm organisation={organisation} />
+      <OrganisationAdminForm organisation={organisation} licenseFlags={licenseFlags} />
 
       <div className="mt-16 space-y-10">
         <div>
@@ -278,6 +293,7 @@ type TUpdateGenericOrganisationDataFormSchema = z.infer<
 
 type OrganisationAdminFormOptions = {
   organisation: TGetAdminOrganisationResponse;
+  licenseFlags?: TLicenseClaim;
 };
 
 const GenericOrganisationAdminForm = ({ organisation }: OrganisationAdminFormOptions) => {
@@ -349,7 +365,7 @@ const GenericOrganisationAdminForm = ({ organisation }: OrganisationAdminFormOpt
                 <Input {...field} />
               </FormControl>
               {!form.formState.errors.url && (
-                <span className="text-foreground/50 text-xs font-normal">
+                <span className="text-xs font-normal text-foreground/50">
                   {field.value ? (
                     `${NEXT_PUBLIC_WEBAPP_URL()}/o/${field.value}`
                   ) : (
@@ -381,12 +397,17 @@ const ZUpdateOrganisationBillingFormSchema = ZUpdateAdminOrganisationRequestSche
 
 type TUpdateOrganisationBillingFormSchema = z.infer<typeof ZUpdateOrganisationBillingFormSchema>;
 
-const OrganisationAdminForm = ({ organisation }: OrganisationAdminFormOptions) => {
+const OrganisationAdminForm = ({ organisation, licenseFlags }: OrganisationAdminFormOptions) => {
   const { toast } = useToast();
   const { t } = useLingui();
 
   const { mutateAsync: updateOrganisation } = trpc.admin.organisation.update.useMutation();
 
+  const hasRestrictedEnterpriseFeatures = Object.values(SUBSCRIPTION_CLAIM_FEATURE_FLAGS).some(
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    (flag) => flag.isEnterprise && !licenseFlags?.[flag.key as keyof TLicenseClaim],
+  );
+
   const form = useForm<TUpdateOrganisationBillingFormSchema>({
     resolver: zodResolver(ZUpdateOrganisationBillingFormSchema),
     defaultValues: {
@@ -440,7 +461,7 @@ const OrganisationAdminForm = ({ organisation }: OrganisationAdminFormOptions) =
                     <InfoIcon className="mx-2 h-4 w-4" />
                   </TooltipTrigger>
 
-                  <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+                  <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
                     <h2>
                       <strong>
                         <Trans>Inherited subscription claim</Trans>
@@ -493,7 +514,7 @@ const OrganisationAdminForm = ({ organisation }: OrganisationAdminFormOptions) =
                 <Link
                   target="_blank"
                   to={`https://dashboard.stripe.com/customers/${field.value}`}
-                  className="text-foreground/50 text-xs font-normal"
+                  className="text-xs font-normal text-foreground/50"
                 >
                   {`https://dashboard.stripe.com/customers/${field.value}`}
                 </Link>
@@ -582,34 +603,57 @@ const OrganisationAdminForm = ({ organisation }: OrganisationAdminFormOptions) =
           </FormLabel>
 
           <div className="mt-2 space-y-2 rounded-md border p-4">
-            {Object.values(SUBSCRIPTION_CLAIM_FEATURE_FLAGS).map(({ key, label }) => (
-              <FormField
-                key={key}
-                control={form.control}
-                name={`claims.flags.${key}`}
-                render={({ field }) => (
-                  <FormItem className="flex items-center space-x-2">
-                    <FormControl>
-                      <div className="flex items-center">
-                        <Checkbox
-                          id={`flag-${key}`}
-                          checked={field.value}
-                          onCheckedChange={field.onChange}
-                        />
+            {Object.values(SUBSCRIPTION_CLAIM_FEATURE_FLAGS).map(({ key, label, isEnterprise }) => {
+              const isRestrictedFeature =
+                isEnterprise && !licenseFlags?.[key as keyof TLicenseClaim]; // eslint-disable-line @typescript-eslint/consistent-type-assertions
 
-                        <label
-                          className="text-muted-foreground ml-2 flex flex-row items-center text-sm"
-                          htmlFor={`flag-${key}`}
-                        >
-                          {label}
-                        </label>
-                      </div>
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-            ))}
+              return (
+                <FormField
+                  key={key}
+                  control={form.control}
+                  name={`claims.flags.${key}`}
+                  render={({ field }) => (
+                    <FormItem className="flex items-center space-x-2">
+                      <FormControl>
+                        <div className="flex items-center">
+                          <Checkbox
+                            id={`flag-${key}`}
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            disabled={isRestrictedFeature && !field.value} // Allow disabling of restricted features.
+                          />
+
+                          <label
+                            className="ml-2 flex flex-row items-center text-sm text-muted-foreground"
+                            htmlFor={`flag-${key}`}
+                          >
+                            {label}
+                            {isRestrictedFeature && ' ¹'}
+                          </label>
+                        </div>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              );
+            })}
           </div>
+
+          {hasRestrictedEnterpriseFeatures && (
+            <Alert variant="neutral" className="mt-4">
+              <AlertDescription>
+                <span>¹&nbsp;</span>
+                <Trans>Your current license does not include these features.</Trans>{' '}
+                <Link
+                  to="https://docs.documenso.com/users/licenses/enterprise-edition"
+                  target="_blank"
+                  className="text-foreground underline hover:opacity-80"
+                >
+                  <Trans>Learn more</Trans>
+                </Link>
+              </AlertDescription>
+            </Alert>
+          )}
         </div>
 
         <div className="flex justify-end">

apps/remix/app/routes/_authenticated+/admin+/stats.tsx

@@ -23,8 +23,10 @@ import {
   getUserWithSignedDocumentMonthlyGrowth,
   getUsersCount,
 } from '@documenso/lib/server-only/admin/get-users-stats';
+import { LicenseClient } from '@documenso/lib/server-only/license/license-client';
 import { getSignerConversionMonthly } from '@documenso/lib/server-only/user/get-signer-conversion';
 
+import { AdminLicenseCard } from '~/components/general/admin-license-card';
 import { MonthlyActiveUsersChart } from '~/components/general/admin-monthly-active-user-charts';
 import { AdminStatsSignerConversionChart } from '~/components/general/admin-stats-signer-conversion-chart';
 import { AdminStatsUsersWithDocumentsChart } from '~/components/general/admin-stats-users-with-documents';
@@ -42,6 +44,7 @@ export async function loader() {
     signerConversionMonthly,
     monthlyUsersWithDocuments,
     monthlyActiveUsers,
+    licenseData,
   ] = await Promise.all([
     getUsersCount(),
     getOrganisationsWithSubscriptionsCount(),
@@ -50,6 +53,7 @@ export async function loader() {
     getSignerConversionMonthly(),
     getUserWithSignedDocumentMonthlyGrowth(),
     getMonthlyActiveUsers(),
+    LicenseClient.getInstance()?.getCachedLicense(),
   ]);
 
   return {
@@ -60,6 +64,7 @@ export async function loader() {
     signerConversionMonthly,
     monthlyUsersWithDocuments,
     monthlyActiveUsers,
+    licenseData: licenseData || null,
   };
 }
 
@@ -74,6 +79,7 @@ export default function AdminStatsPage({ loaderData }: Route.ComponentProps) {
     signerConversionMonthly,
     monthlyUsersWithDocuments,
     monthlyActiveUsers,
+    licenseData,
   } = loaderData;
 
   return (
@@ -94,6 +100,10 @@ export default function AdminStatsPage({ loaderData }: Route.ComponentProps) {
         <CardMetric icon={FileCog} title={_(msg`App Version`)} value={`v${version}`} />
       </div>
 
+      <div className="mb-8 mt-4">
+        <AdminLicenseCard licenseData={licenseData} />
+      </div>
+
       <div className="mt-16 gap-8">
         <div>
           <h3 className="text-3xl font-semibold">

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

@@ -9,6 +9,8 @@ import { match } from 'ts-pattern';
 
 import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { PDF_VIEWER_ERROR_MESSAGES } from '@documenso/lib/constants/pdf-viewer-i18n';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
@@ -16,12 +18,12 @@ import {
   DocumentReadOnlyFields,
   mapFieldsWithRecipients,
 } from '@documenso/ui/components/document/document-read-only-fields';
-import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
+import { EnvelopePdfViewer } from '@documenso/ui/components/pdf-viewer/envelope-pdf-viewer';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 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 { 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';
@@ -55,9 +57,14 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
     data: envelope,
     isLoading: isLoadingEnvelope,
     isError: isErrorEnvelope,
-  } = trpc.envelope.get.useQuery({
-    envelopeId: params.id,
-  });
+  } = trpc.envelope.get.useQuery(
+    {
+      envelopeId: params.id,
+    },
+    {
+      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    },
+  );
 
   if (isLoadingEnvelope) {
     return (
@@ -154,7 +161,9 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
         {envelope.internalVersion === 2 ? (
           <div className="relative col-span-12 lg:col-span-6 xl:col-span-7">
             <EnvelopeRenderProvider
+              version="current"
               envelope={envelope}
+              envelopeItems={envelope.envelopeItems}
               token={undefined}
               fields={envelope.fields}
               recipients={envelope.recipients}
@@ -169,9 +178,10 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
 
               <Card className="rounded-xl before:rounded-xl" gradient>
                 <CardContent className="p-2">
-                  <PDFViewerKonvaLazy
-                    renderer="preview"
+                  <EnvelopePdfViewer
                     customPageRenderer={EnvelopeGenericPageRenderer}
+                    scrollParentRef="window"
+                    errorMessage={PDF_VIEWER_ERROR_MESSAGES.preview}
                   />
                 </CardContent>
               </Card>
@@ -193,11 +203,12 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
                 />
               )}
 
-              <PDFViewerLazy
+              <PDFViewer
                 envelopeItem={envelope.envelopeItems[0]}
                 token={undefined}
                 key={envelope.envelopeItems[0].id}
-                version="signed"
+                version="current"
+                scrollParentRef="window"
               />
             </CardContent>
           </Card>

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

@@ -6,13 +6,14 @@ import { EnvelopeType } from '@prisma/client';
 import { Link, useNavigate } from 'react-router';
 
 import { EnvelopeEditorProvider } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Spinner } from '@documenso/ui/primitives/spinner';
 
-import EnvelopeEditor from '~/components/general/envelope-editor/envelope-editor';
+import { EnvelopeEditor } from '~/components/general/envelope-editor/envelope-editor';
+import { EnvelopeEditorRenderProviderWrapper } from '~/components/general/envelope-editor/envelope-editor-renderer-provider-wrapper';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 import { useCurrentTeam } from '~/providers/team';
 
@@ -32,6 +33,7 @@ export default function EnvelopeEditorPage({ params }: Route.ComponentProps) {
     },
     {
       retry: false,
+      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     },
   );
 
@@ -58,7 +60,7 @@ export default function EnvelopeEditorPage({ params }: Route.ComponentProps) {
 
   if (envelope && (envelope.teamId !== team.id || envelope.internalVersion !== 2)) {
     return (
-      <div className="text-foreground flex h-screen w-screen flex-col items-center justify-center gap-2">
+      <div className="flex h-screen w-screen flex-col items-center justify-center gap-2 text-foreground">
         <Spinner />
         <Trans>Redirecting</Trans>
       </div>
@@ -67,7 +69,7 @@ export default function EnvelopeEditorPage({ params }: Route.ComponentProps) {
 
   if (isLoadingEnvelope) {
     return (
-      <div className="text-foreground flex h-screen w-screen flex-col items-center justify-center gap-2">
+      <div className="flex h-screen w-screen flex-col items-center justify-center gap-2 text-foreground">
         <Spinner />
         <Trans>Loading</Trans>
       </div>
@@ -98,14 +100,9 @@ export default function EnvelopeEditorPage({ params }: Route.ComponentProps) {
 
   return (
     <EnvelopeEditorProvider initialEnvelope={envelope}>
-      <EnvelopeRenderProvider
-        envelope={envelope}
-        token={undefined}
-        fields={envelope.fields}
-        recipients={envelope.recipients}
-      >
+      <EnvelopeEditorRenderProviderWrapper>
         <EnvelopeEditor />
-      </EnvelopeRenderProvider>
+      </EnvelopeEditorRenderProviderWrapper>
     </EnvelopeEditorProvider>
   );
 }

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

@@ -179,7 +179,9 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
           ))}
 
           <div className="text-sm text-foreground">
-            <h3 className="font-semibold">Recipients</h3>
+            <h3 className="font-semibold">
+              <Trans>Recipients</Trans>
+            </h3>
             <ul className="list-inside list-disc text-muted-foreground">
               {recipients.map((recipient) => (
                 <li key={`recipient-${recipient.id}`}>

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

@@ -16,9 +16,12 @@ import { trpc } from '@documenso/trpc/react';
 import type { TFindDocumentsInternalResponse } from '@documenso/trpc/server/document-router/find-documents-internal.types';
 import { ZFindDocumentsInternalRequestSchema } from '@documenso/trpc/server/document-router/find-documents-internal.types';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import type { RowSelectionState } from '@documenso/ui/primitives/data-table';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
 import { DocumentMoveToFolderDialog } from '~/components/dialogs/document-move-to-folder-dialog';
+import { EnvelopesBulkDeleteDialog } from '~/components/dialogs/envelopes-bulk-delete-dialog';
+import { EnvelopesBulkMoveDialog } from '~/components/dialogs/envelopes-bulk-move-dialog';
 import { DocumentSearch } from '~/components/general/document/document-search';
 import { DocumentStatus } from '~/components/general/document/document-status';
 import { EnvelopeDropZoneWrapper } from '~/components/general/envelope/envelope-drop-zone-wrapper';
@@ -27,6 +30,7 @@ import { PeriodSelector } from '~/components/general/period-selector';
 import { DocumentsTable } from '~/components/tables/documents-table';
 import { DocumentsTableEmptyState } from '~/components/tables/documents-table-empty-state';
 import { DocumentsTableSenderFilter } from '~/components/tables/documents-table-sender-filter';
+import { EnvelopesTableBulkActionBar } from '~/components/tables/envelopes-table-bulk-action-bar';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
 
@@ -54,6 +58,14 @@ export default function DocumentsPage() {
   const [isMovingDocument, setIsMovingDocument] = useState(false);
   const [documentToMove, setDocumentToMove] = useState<number | null>(null);
 
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [isBulkMoveDialogOpen, setIsBulkMoveDialogOpen] = useState(false);
+  const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
+
+  const selectedEnvelopeIds = useMemo(() => {
+    return Object.keys(rowSelection).filter((id) => rowSelection[id]);
+  }, [rowSelection]);
+
   const [stats, setStats] = useState<TFindDocumentsInternalResponse['stats']>({
     [ExtendedDocumentStatus.DRAFT]: 0,
     [ExtendedDocumentStatus.PENDING]: 0,
@@ -109,6 +121,11 @@ export default function DocumentsPage() {
     }
   }, [data?.stats]);
 
+  // Clear selection when navigation or filters change
+  useEffect(() => {
+    setRowSelection({});
+  }, [folderId, findDocumentSearchParams]);
+
   return (
     <EnvelopeDropZoneWrapper type={EnvelopeType.DOCUMENT}>
       <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
@@ -116,9 +133,9 @@ export default function DocumentsPage() {
 
         <div className="mt-8 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
           <div className="flex flex-row items-center">
-            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+            <Avatar className="mr-3 h-12 w-12 border-2 border-solid border-white dark:border-border">
               {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
-              <AvatarFallback className="text-muted-foreground text-xs">
+              <AvatarFallback className="text-xs text-muted-foreground">
                 {team.name.slice(0, 1)}
               </AvatarFallback>
             </Avatar>
@@ -148,7 +165,7 @@ export default function DocumentsPage() {
                   .map((value) => (
                     <TabsTrigger
                       key={value}
-                      className="hover:text-foreground min-w-[60px]"
+                      className="min-w-[60px] hover:text-foreground"
                       value={value}
                       asChild
                     >
@@ -190,6 +207,9 @@ export default function DocumentsPage() {
                   setDocumentToMove(documentId);
                   setIsMovingDocument(true);
                 }}
+                enableSelection
+                rowSelection={rowSelection}
+                onRowSelectionChange={setRowSelection}
               />
             )}
           </div>
@@ -209,6 +229,30 @@ export default function DocumentsPage() {
             }}
           />
         )}
+
+        <EnvelopesTableBulkActionBar
+          selectedCount={selectedEnvelopeIds.length}
+          onMoveClick={() => setIsBulkMoveDialogOpen(true)}
+          onDeleteClick={() => setIsBulkDeleteDialogOpen(true)}
+          onClearSelection={() => setRowSelection({})}
+        />
+
+        <EnvelopesBulkMoveDialog
+          envelopeIds={selectedEnvelopeIds}
+          envelopeType={EnvelopeType.DOCUMENT}
+          open={isBulkMoveDialogOpen}
+          currentFolderId={folderId}
+          onOpenChange={setIsBulkMoveDialogOpen}
+          onSuccess={() => setRowSelection({})}
+        />
+
+        <EnvelopesBulkDeleteDialog
+          envelopeIds={selectedEnvelopeIds}
+          envelopeType={EnvelopeType.DOCUMENT}
+          open={isBulkDeleteDialogOpen}
+          onOpenChange={setIsBulkDeleteDialogOpen}
+          onSuccess={() => setRowSelection({})}
+        />
       </div>
     </EnvelopeDropZoneWrapper>
   );

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

@@ -8,15 +8,17 @@ import { Link, useNavigate } from 'react-router';
 
 import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { PDF_VIEWER_ERROR_MESSAGES } from '@documenso/lib/constants/pdf-viewer-i18n';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
-import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
+import { EnvelopePdfViewer } from '@documenso/ui/components/pdf-viewer/envelope-pdf-viewer';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
-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';
@@ -50,9 +52,14 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
     data: envelope,
     isLoading: isLoadingEnvelope,
     isError: isErrorEnvelope,
-  } = trpc.envelope.get.useQuery({
-    envelopeId: params.id,
-  });
+  } = trpc.envelope.get.useQuery(
+    {
+      envelopeId: params.id,
+    },
+    {
+      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    },
+  );
 
   if (isLoadingEnvelope) {
     return (
@@ -173,7 +180,9 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
         {envelope.internalVersion === 2 ? (
           <div className="relative col-span-12 lg:col-span-6 xl:col-span-7">
             <EnvelopeRenderProvider
+              version="current"
               envelope={envelope}
+              envelopeItems={envelope.envelopeItems}
               token={undefined}
               fields={envelope.fields}
               recipients={envelope.recipients}
@@ -187,9 +196,10 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
 
               <Card className="rounded-xl before:rounded-xl" gradient>
                 <CardContent className="p-2">
-                  <PDFViewerKonvaLazy
-                    renderer="preview"
+                  <EnvelopePdfViewer
                     customPageRenderer={EnvelopeGenericPageRenderer}
+                    scrollParentRef="window"
+                    errorMessage={PDF_VIEWER_ERROR_MESSAGES.preview}
                   />
                 </CardContent>
               </Card>
@@ -210,11 +220,12 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
                 documentMeta={mockedDocumentMeta}
               />
 
-              <PDFViewerLazy
+              <PDFViewer
                 envelopeItem={envelope.envelopeItems[0]}
                 token={undefined}
-                version="signed"
+                version="current"
                 key={envelope.envelopeItems[0].id}
+                scrollParentRef="window"
               />
             </CardContent>
           </Card>

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

@@ -1,3 +1,5 @@
+import { useEffect, useMemo, useState } from 'react';
+
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
 import { Bird } from 'lucide-react';
@@ -8,9 +10,13 @@ import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import type { RowSelectionState } from '@documenso/ui/primitives/data-table';
 
+import { EnvelopesBulkDeleteDialog } from '~/components/dialogs/envelopes-bulk-delete-dialog';
+import { EnvelopesBulkMoveDialog } from '~/components/dialogs/envelopes-bulk-move-dialog';
 import { EnvelopeDropZoneWrapper } from '~/components/general/envelope/envelope-drop-zone-wrapper';
 import { FolderGrid } from '~/components/general/folder/folder-grid';
+import { EnvelopesTableBulkActionBar } from '~/components/tables/envelopes-table-bulk-action-bar';
 import { TemplatesTable } from '~/components/tables/templates-table';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -28,6 +34,14 @@ export default function TemplatesPage() {
   const page = Number(searchParams.get('page')) || 1;
   const perPage = Number(searchParams.get('perPage')) || 10;
 
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [isBulkMoveDialogOpen, setIsBulkMoveDialogOpen] = useState(false);
+  const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
+
+  const selectedEnvelopeIds = useMemo(() => {
+    return Object.keys(rowSelection).filter((id) => rowSelection[id]);
+  }, [rowSelection]);
+
   const documentRootPath = formatDocumentsPath(team.url);
   const templateRootPath = formatTemplatesPath(team.url);
 
@@ -37,6 +51,11 @@ export default function TemplatesPage() {
     folderId,
   });
 
+  // Clear selection when navigation or filters change
+  useEffect(() => {
+    setRowSelection({});
+  }, [folderId, page, perPage]);
+
   return (
     <EnvelopeDropZoneWrapper type={EnvelopeType.TEMPLATE}>
       <div className="mx-auto max-w-screen-xl px-4 md:px-8">
@@ -44,9 +63,9 @@ export default function TemplatesPage() {
 
         <div className="mt-8">
           <div className="flex flex-row items-center">
-            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+            <Avatar className="mr-3 h-12 w-12 border-2 border-solid border-white dark:border-border">
               {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
-              <AvatarFallback className="text-muted-foreground text-xs">
+              <AvatarFallback className="text-xs text-muted-foreground">
                 {team.name.slice(0, 1)}
               </AvatarFallback>
             </Avatar>
@@ -58,7 +77,7 @@ export default function TemplatesPage() {
 
           <div className="mt-8">
             {data && data.count === 0 ? (
-              <div className="text-muted-foreground/60 flex h-96 flex-col items-center justify-center gap-y-4">
+              <div className="flex h-96 flex-col items-center justify-center gap-y-4 text-muted-foreground/60">
                 <Bird className="h-12 w-12" strokeWidth={1.5} />
 
                 <div className="text-center">
@@ -81,10 +100,37 @@ export default function TemplatesPage() {
                 isLoadingError={isLoadingError}
                 documentRootPath={documentRootPath}
                 templateRootPath={templateRootPath}
+                enableSelection
+                rowSelection={rowSelection}
+                onRowSelectionChange={setRowSelection}
               />
             )}
           </div>
         </div>
+
+        <EnvelopesTableBulkActionBar
+          selectedCount={selectedEnvelopeIds.length}
+          onMoveClick={() => setIsBulkMoveDialogOpen(true)}
+          onDeleteClick={() => setIsBulkDeleteDialogOpen(true)}
+          onClearSelection={() => setRowSelection({})}
+        />
+
+        <EnvelopesBulkMoveDialog
+          envelopeIds={selectedEnvelopeIds}
+          envelopeType={EnvelopeType.TEMPLATE}
+          open={isBulkMoveDialogOpen}
+          currentFolderId={folderId}
+          onOpenChange={setIsBulkMoveDialogOpen}
+          onSuccess={() => setRowSelection({})}
+        />
+
+        <EnvelopesBulkDeleteDialog
+          envelopeIds={selectedEnvelopeIds}
+          envelopeType={EnvelopeType.TEMPLATE}
+          open={isBulkDeleteDialogOpen}
+          onOpenChange={setIsBulkDeleteDialogOpen}
+          onSuccess={() => setRowSelection({})}
+        />
       </div>
     </EnvelopeDropZoneWrapper>
   );

apps/remix/app/routes/_internal+/[__htmltopdf]+/certificate.tsx

@@ -1,5 +1,6 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { EnvelopeType, FieldType, SigningStatus } from '@prisma/client';
 import { DateTime } from 'luxon';
 import { redirect } from 'react-router';
@@ -290,7 +291,9 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
                           </p>
                         </>
                       ) : (
-                        <p className="text-muted-foreground">N/A</p>
+                        <p className="text-muted-foreground">
+                          <Trans>N/A</Trans>
+                        </p>
                       )}
 
                       <p className="mt-2 text-sm text-muted-foreground print:text-xs">

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

@@ -198,7 +198,7 @@ const DirectSigningPageV1 = ({ data }: { data: Awaited<ReturnType<typeof handleV
               {template.title}
             </h1>
 
-            <div className="text-muted-foreground mb-8 mt-2.5 flex items-center gap-x-2">
+            <div className="mb-8 mt-2.5 flex items-center gap-x-2 text-muted-foreground">
               <UsersIcon className="h-4 w-4" />
               <p className="text-muted-foreground/80">
                 <Plural value={template.recipients.length} one="# recipient" other="# recipients" />
@@ -246,7 +246,12 @@ const DirectSigningPageV2 = ({ data }: { data: Awaited<ReturnType<typeof handleV
         recipient={recipient}
         user={user}
       >
-        <EnvelopeRenderProvider envelope={envelope} token={recipient.token}>
+        <EnvelopeRenderProvider
+          version="current"
+          envelope={envelope}
+          envelopeItems={envelope.envelopeItems}
+          token={recipient.token}
+        >
           <DocumentSigningPageViewV2 />
         </EnvelopeRenderProvider>
       </DocumentSigningAuthProvider>

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

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

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

@@ -320,7 +320,12 @@ const EmbedDirectTemplatePageV2 = ({
         user={user}
         isDirectTemplate={true}
       >
-        <EnvelopeRenderProvider envelope={envelope} token={recipient.token}>
+        <EnvelopeRenderProvider
+          version="current"
+          envelope={envelope}
+          envelopeItems={envelope.envelopeItems}
+          token={recipient.token}
+        >
           <EmbedSignDocumentV2ClientPage
             hidePoweredBy={hidePoweredBy}
             allowWhitelabelling={allowEmbedSigningWhitelabel}

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

@@ -382,7 +382,12 @@ const EmbedSignDocumentPageV2 = ({
         recipient={recipient}
         user={user}
       >
-        <EnvelopeRenderProvider envelope={envelope} token={token}>
+        <EnvelopeRenderProvider
+          version="current"
+          envelope={envelope}
+          envelopeItems={envelope.envelopeItems}
+          token={token}
+        >
           <EmbedSignDocumentV2ClientPage
             hidePoweredBy={hidePoweredBy}
             allowWhitelabelling={allowEmbedSigningWhitelabel}

apps/remix/app/routes/embed+/dummy.tsx

@@ -0,0 +1,647 @@
+/**
+ * This is an internal test page for the embedding system.
+ *
+ * We use this to test embeds for E2E testing.
+ *
+ * No translations required.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { useNavigate, useSearchParams } from 'react-router';
+
+export const loader = () => {
+  if (process.env.NODE_ENV !== 'development') {
+    throw new Error('This page is only available in development mode.');
+  }
+};
+
+/**
+ * Dummy embed test page.
+ *
+ * Simulates an embedding parent that renders the V2 authoring iframe
+ * with configurable features, externalId, and mode.
+ *
+ * Navigate to /embed/dummy to use.
+ */
+export default function EmbedDummyPage() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const [token, setToken] = useState(() => searchParams.get('token') || '');
+  const [externalId, setExternalId] = useState(() => searchParams.get('externalId') || '');
+  const [mode, setMode] = useState<'create' | 'edit'>(
+    () => (searchParams.get('mode') as 'create' | 'edit') || 'create',
+  );
+  const [envelopeId, setEnvelopeId] = useState(() => searchParams.get('envelopeId') || '');
+  const [envelopeType, setEnvelopeType] = useState<'DOCUMENT' | 'TEMPLATE'>(
+    () => (searchParams.get('envelopeType') as 'DOCUMENT' | 'TEMPLATE') || 'DOCUMENT',
+  );
+
+  // Auto-launch if query params are present on mount
+  const [iframeSrc, setIframeSrc] = useState<string | null>(null);
+  const [iframeKey, setIframeKey] = useState(0);
+  const [messages, setMessages] = useState<string[]>([]);
+
+  // Feature flags state -- grouped by section
+  const [generalFeatures, setGeneralFeatures] = useState({
+    allowConfigureEnvelopeTitle: true,
+    allowUploadAndRecipientStep: true,
+    allowAddFieldsStep: true,
+    allowPreviewStep: true,
+    minimizeLeftSidebar: true,
+  });
+
+  const [settingsFeatures, setSettingsFeatures] = useState({
+    allowConfigureSignatureTypes: true,
+    allowConfigureLanguage: true,
+    allowConfigureDateFormat: true,
+    allowConfigureTimezone: true,
+    allowConfigureRedirectUrl: true,
+    allowConfigureDistribution: true,
+  });
+
+  const [actionsFeatures, setActionsFeatures] = useState({
+    allowAttachments: true,
+    allowDistributing: false,
+    allowDirectLink: false,
+    allowDuplication: false,
+    allowDownloadPDF: false,
+    allowDeletion: false,
+    allowReturnToPreviousPage: false,
+  });
+
+  const [envelopeItemsFeatures, setEnvelopeItemsFeatures] = useState({
+    allowConfigureTitle: true,
+    allowConfigureOrder: true,
+    allowUpload: true,
+    allowDelete: true,
+  });
+
+  const [recipientsFeatures, setRecipientsFeatures] = useState({
+    allowAIDetection: true,
+    allowConfigureSigningOrder: true,
+    allowConfigureDictateNextSigner: true,
+    allowApproverRole: true,
+    allowViewerRole: true,
+    allowCCerRole: true,
+    allowAssistantRole: true,
+  });
+
+  const [fieldsFeatures, setFieldsFeatures] = useState({
+    allowAIDetection: true,
+  });
+
+  // CSS theming state
+  const [darkModeDisabled, setDarkModeDisabled] = useState(false);
+  const [rawCss, setRawCss] = useState('');
+  const [cssVars, setCssVars] = useState<Record<string, string>>({
+    background: '',
+    foreground: '',
+    muted: '',
+    mutedForeground: '',
+    popover: '',
+    popoverForeground: '',
+    card: '',
+    cardBorder: '',
+    cardBorderTint: '',
+    cardForeground: '',
+    fieldCard: '',
+    fieldCardBorder: '',
+    fieldCardForeground: '',
+    widget: '',
+    widgetForeground: '',
+    border: '',
+    input: '',
+    primary: '',
+    primaryForeground: '',
+    secondary: '',
+    secondaryForeground: '',
+    accent: '',
+    accentForeground: '',
+    destructive: '',
+    destructiveForeground: '',
+    ring: '',
+    radius: '',
+    warning: '',
+  });
+
+  const [isResolvingToken, setIsResolvingToken] = useState(false);
+  const [tokenError, setTokenError] = useState<string | null>(null);
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const hasAutoLaunched = useRef(false);
+
+  /**
+   * If the token starts with "api_", exchange it for a presign token
+   * via the embedding presign endpoint. Otherwise return as-is.
+   */
+  const resolveToken = async (inputToken: string): Promise<string> => {
+    if (!inputToken.startsWith('api_')) {
+      return inputToken;
+    }
+
+    const response = await fetch('/api/v2/embedding/create-presign-token', {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${inputToken}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({}),
+    });
+
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(`Failed to exchange API token (${response.status}): ${text}`);
+    }
+
+    const data = await response.json();
+    const presignToken = data?.token;
+
+    if (!presignToken || typeof presignToken !== 'string') {
+      throw new Error(`Unexpected response shape: ${JSON.stringify(data)}`);
+    }
+
+    return presignToken;
+  };
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      const timestamp = new Date().toISOString().slice(11, 19);
+      setMessages((prev) => [...prev, `[${timestamp}] ${JSON.stringify(event.data, null, 2)}`]);
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Auto-launch on mount if token is present in query params
+  useEffect(() => {
+    if (hasAutoLaunched.current) {
+      return;
+    }
+
+    const initialToken = searchParams.get('token');
+
+    if (initialToken) {
+      hasAutoLaunched.current = true;
+      void launchEmbed(initialToken);
+    }
+  }, []);
+
+  const updateQueryParams = (params: {
+    token: string;
+    externalId: string;
+    mode: string;
+    envelopeId: string;
+    envelopeType: string;
+  }) => {
+    const newParams = new URLSearchParams();
+
+    if (params.token) {
+      newParams.set('token', params.token);
+    }
+
+    if (params.externalId) {
+      newParams.set('externalId', params.externalId);
+    }
+
+    if (params.mode && params.mode !== 'create') {
+      newParams.set('mode', params.mode);
+    }
+
+    if (params.envelopeId) {
+      newParams.set('envelopeId', params.envelopeId);
+    }
+
+    if (params.envelopeType && params.envelopeType !== 'DOCUMENT') {
+      newParams.set('envelopeType', params.envelopeType);
+    }
+
+    const qs = newParams.toString();
+
+    void navigate(qs ? `?${qs}` : '.', { replace: true });
+  };
+
+  const launchEmbed = async (overrideToken?: string) => {
+    const inputToken = overrideToken ?? token;
+
+    if (!inputToken) {
+      return;
+    }
+
+    setTokenError(null);
+    setIsResolvingToken(true);
+
+    let presignToken: string;
+
+    try {
+      presignToken = await resolveToken(inputToken);
+    } catch (err) {
+      setTokenError(err instanceof Error ? err.message : String(err));
+      setIsResolvingToken(false);
+      return;
+    }
+
+    setIsResolvingToken(false);
+
+    // Filter out empty cssVars entries
+    const filteredCssVars: Record<string, string> = {};
+
+    for (const [key, value] of Object.entries(cssVars)) {
+      if (value) {
+        filteredCssVars[key] = value;
+      }
+    }
+
+    const hashData = {
+      externalId: externalId || undefined,
+      type: mode === 'create' ? envelopeType : undefined,
+      darkModeDisabled: darkModeDisabled || undefined,
+      css: rawCss || undefined,
+      cssVars: Object.keys(filteredCssVars).length > 0 ? filteredCssVars : undefined,
+      features: {
+        general: generalFeatures,
+        settings: settingsFeatures,
+        actions: actionsFeatures,
+        envelopeItems: envelopeItemsFeatures,
+        recipients: recipientsFeatures,
+        fields: fieldsFeatures,
+      },
+    };
+
+    const hash = btoa(encodeURIComponent(JSON.stringify(hashData)));
+
+    const basePath =
+      mode === 'create'
+        ? '/embed/v2/authoring/envelope/create'
+        : `/embed/v2/authoring/envelope/edit/${envelopeId}`;
+
+    setIframeSrc(`${basePath}?token=${presignToken}#${hash}`);
+    setIframeKey((prev) => prev + 1);
+
+    updateQueryParams({ token: inputToken, externalId, mode, envelopeId, envelopeType });
+  };
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      void launchEmbed();
+    },
+    [
+      token,
+      externalId,
+      mode,
+      envelopeId,
+      envelopeType,
+      generalFeatures,
+      settingsFeatures,
+      actionsFeatures,
+      envelopeItemsFeatures,
+      recipientsFeatures,
+      fieldsFeatures,
+      darkModeDisabled,
+      rawCss,
+      cssVars,
+    ],
+  );
+
+  const handleClear = () => {
+    setToken('');
+    setExternalId('');
+    setMode('create');
+    setEnvelopeId('');
+    setEnvelopeType('DOCUMENT');
+    setIframeSrc(null);
+    setMessages([]);
+    setTokenError(null);
+    setDarkModeDisabled(false);
+    setRawCss('');
+    setCssVars((prev) => {
+      const cleared: Record<string, string> = {};
+
+      for (const key of Object.keys(prev)) {
+        cleared[key] = '';
+      }
+
+      return cleared;
+    });
+    void navigate('.', { replace: true });
+  };
+
+  const renderCheckboxGroup = <T extends Record<string, boolean>>(
+    label: string,
+    state: T,
+    setState: React.Dispatch<React.SetStateAction<T>>,
+  ) => (
+    <fieldset
+      style={{ border: '1px solid #ccc', padding: '8px', marginBottom: '8px', borderRadius: '4px' }}
+    >
+      <legend style={{ fontWeight: 'bold', fontSize: '13px' }}>{label}</legend>
+      {Object.entries(state).map(([key, value]) => (
+        <label key={key} style={{ display: 'block', fontSize: '12px', marginBottom: '2px' }}>
+          <input
+            type="checkbox"
+            checked={value}
+            onChange={(e) => setState((prev) => ({ ...prev, [key]: e.target.checked }))}
+            style={{ marginRight: '4px' }}
+          />
+          {key}
+        </label>
+      ))}
+    </fieldset>
+  );
+
+  return (
+    <div style={{ display: 'flex', height: '100vh', fontFamily: 'monospace' }}>
+      {/* Left panel: controls */}
+      <div
+        style={{
+          width: '320px',
+          padding: '12px',
+          borderRight: '1px solid #ccc',
+          overflowY: 'auto',
+          flexShrink: 0,
+        }}
+      >
+        <h2 style={{ margin: '0 0 12px', fontSize: '16px' }}>Embed Test</h2>
+
+        <form onSubmit={handleSubmit}>
+          <div style={{ marginBottom: '8px' }}>
+            <label style={{ display: 'block', fontSize: '12px', fontWeight: 'bold' }}>
+              API or Embedded Token (Required)
+            </label>
+            <input
+              type="text"
+              value={token}
+              onChange={(e) => setToken(e.target.value)}
+              style={{ width: '100%', padding: '4px', fontSize: '12px' }}
+              placeholder="api_... or presign token"
+              required
+            />
+            {tokenError && (
+              <div style={{ color: 'red', fontSize: '11px', marginTop: '4px' }}>{tokenError}</div>
+            )}
+          </div>
+
+          <div style={{ marginBottom: '8px' }}>
+            <label style={{ display: 'block', fontSize: '12px', fontWeight: 'bold' }}>
+              External ID (optional)
+            </label>
+            <input
+              type="text"
+              value={externalId}
+              onChange={(e) => setExternalId(e.target.value)}
+              style={{ width: '100%', padding: '4px', fontSize: '12px' }}
+              placeholder="your-correlation-id"
+            />
+          </div>
+
+          <div style={{ marginBottom: '8px' }}>
+            <label style={{ display: 'block', fontSize: '12px', fontWeight: 'bold' }}>Mode</label>
+            <select
+              value={mode}
+              onChange={(e) => setMode(e.target.value as 'create' | 'edit')}
+              style={{ width: '100%', padding: '4px', fontSize: '12px' }}
+            >
+              <option value="create">Create</option>
+              <option value="edit">Edit</option>
+            </select>
+          </div>
+
+          {mode === 'create' && (
+            <div style={{ marginBottom: '8px' }}>
+              <label style={{ display: 'block', fontSize: '12px', fontWeight: 'bold' }}>
+                Envelope Type
+              </label>
+              <select
+                value={envelopeType}
+                onChange={(e) => setEnvelopeType(e.target.value as 'DOCUMENT' | 'TEMPLATE')}
+                style={{ width: '100%', padding: '4px', fontSize: '12px' }}
+              >
+                <option value="DOCUMENT">Document</option>
+                <option value="TEMPLATE">Template</option>
+              </select>
+            </div>
+          )}
+
+          {mode === 'edit' && (
+            <div style={{ marginBottom: '8px' }}>
+              <label style={{ display: 'block', fontSize: '12px', fontWeight: 'bold' }}>
+                Envelope ID
+              </label>
+              <input
+                type="text"
+                value={envelopeId}
+                onChange={(e) => setEnvelopeId(e.target.value)}
+                style={{ width: '100%', padding: '4px', fontSize: '12px' }}
+                placeholder="envelope_..."
+                required
+              />
+            </div>
+          )}
+
+          <h3 style={{ fontSize: '14px', margin: '12px 0 4px' }}>Feature Flags</h3>
+
+          {renderCheckboxGroup('General', generalFeatures, setGeneralFeatures)}
+          {renderCheckboxGroup('Settings', settingsFeatures, setSettingsFeatures)}
+          {renderCheckboxGroup('Actions', actionsFeatures, setActionsFeatures)}
+          {renderCheckboxGroup('Envelope Items', envelopeItemsFeatures, setEnvelopeItemsFeatures)}
+          {renderCheckboxGroup('Recipients', recipientsFeatures, setRecipientsFeatures)}
+          {renderCheckboxGroup('Fields', fieldsFeatures, setFieldsFeatures)}
+
+          <h3 style={{ fontSize: '14px', margin: '12px 0 4px' }}>CSS Theming</h3>
+
+          <label style={{ display: 'block', fontSize: '12px', marginBottom: '8px' }}>
+            <input
+              type="checkbox"
+              checked={darkModeDisabled}
+              onChange={(e) => setDarkModeDisabled(e.target.checked)}
+              style={{ marginRight: '4px' }}
+            />
+            darkModeDisabled
+          </label>
+
+          <fieldset
+            style={{
+              border: '1px solid #ccc',
+              padding: '8px',
+              marginBottom: '8px',
+              borderRadius: '4px',
+            }}
+          >
+            <legend style={{ fontWeight: 'bold', fontSize: '13px' }}>CSS Variables</legend>
+            <div
+              style={{
+                maxHeight: '200px',
+                overflowY: 'auto',
+              }}
+            >
+              {Object.entries(cssVars).map(([key, value]) => (
+                <div
+                  key={key}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '4px',
+                    marginBottom: '2px',
+                  }}
+                >
+                  <label style={{ fontSize: '11px', width: '140px', flexShrink: 0 }}>{key}</label>
+                  {key !== 'radius' && (
+                    <input
+                      type="color"
+                      value={value || '#000000'}
+                      onChange={(e) => setCssVars((prev) => ({ ...prev, [key]: e.target.value }))}
+                      style={{ width: '24px', height: '20px', padding: 0, border: 'none' }}
+                    />
+                  )}
+                  <input
+                    type="text"
+                    value={value}
+                    onChange={(e) => setCssVars((prev) => ({ ...prev, [key]: e.target.value }))}
+                    style={{ flex: 1, padding: '2px 4px', fontSize: '11px' }}
+                    placeholder={key === 'radius' ? '0.5rem' : '#hex or color'}
+                  />
+                  {value && (
+                    <button
+                      type="button"
+                      onClick={() => setCssVars((prev) => ({ ...prev, [key]: '' }))}
+                      style={{
+                        fontSize: '10px',
+                        cursor: 'pointer',
+                        padding: '0 4px',
+                        lineHeight: '18px',
+                      }}
+                    >
+                      x
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </fieldset>
+
+          <fieldset
+            style={{
+              border: '1px solid #ccc',
+              padding: '8px',
+              marginBottom: '8px',
+              borderRadius: '4px',
+            }}
+          >
+            <legend style={{ fontWeight: 'bold', fontSize: '13px' }}>Raw CSS</legend>
+            <textarea
+              value={rawCss}
+              onChange={(e) => setRawCss(e.target.value)}
+              style={{
+                width: '100%',
+                height: '80px',
+                padding: '4px',
+                fontSize: '11px',
+                fontFamily: 'monospace',
+                resize: 'vertical',
+              }}
+              placeholder=".my-class { color: red; }"
+            />
+          </fieldset>
+
+          <div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
+            <button
+              type="submit"
+              disabled={isResolvingToken}
+              style={{
+                flex: 1,
+                padding: '8px',
+                fontSize: '13px',
+                fontWeight: 'bold',
+                cursor: isResolvingToken ? 'not-allowed' : 'pointer',
+                opacity: isResolvingToken ? 0.6 : 1,
+              }}
+            >
+              {isResolvingToken ? 'Resolving Token...' : 'Launch Embed'}
+            </button>
+
+            <button
+              type="button"
+              onClick={handleClear}
+              style={{
+                padding: '8px 12px',
+                fontSize: '13px',
+                cursor: 'pointer',
+              }}
+            >
+              Clear
+            </button>
+          </div>
+        </form>
+
+        {/* Message log */}
+        <div style={{ marginTop: '16px' }}>
+          <h3 style={{ fontSize: '14px', margin: '0 0 4px' }}>
+            PostMessage Log
+            {messages.length > 0 && (
+              <button
+                type="button"
+                onClick={() => setMessages([])}
+                style={{ marginLeft: '8px', fontSize: '10px', cursor: 'pointer' }}
+              >
+                clear
+              </button>
+            )}
+          </h3>
+          <div
+            style={{
+              height: '200px',
+              overflowY: 'auto',
+              border: '1px solid #ccc',
+              padding: '4px',
+              fontSize: '11px',
+              backgroundColor: '#f9f9f9',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all',
+            }}
+          >
+            {messages.length === 0 && (
+              <span style={{ color: '#999' }}>Waiting for messages...</span>
+            )}
+            {messages.map((msg, i) => (
+              <div key={i} style={{ borderBottom: '1px solid #eee', padding: '2px 0' }}>
+                {msg}
+              </div>
+            ))}
+            <div ref={messagesEndRef} />
+          </div>
+        </div>
+      </div>
+
+      {/* Right panel: iframe */}
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+        {iframeSrc ? (
+          <iframe
+            key={iframeKey}
+            src={iframeSrc}
+            style={{ flex: 1, border: 'none', width: '100%', height: '100%' }}
+            title="Embedded Authoring"
+          />
+        ) : (
+          <div
+            style={{
+              flex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#999',
+              fontSize: '14px',
+            }}
+          >
+            Enter a token and click "Launch Embed" to start
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/embed+/v2+/authoring+/_layout.tsx

@@ -0,0 +1,181 @@
+import { useLayoutEffect } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { OrganisationMemberRole, OrganisationType, TeamMemberRole } from '@prisma/client';
+import { Outlet, isRouteErrorResponse, useLoaderData } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { PAID_PLAN_LIMITS } from '@documenso/ee/server-only/limits/constants';
+import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/client';
+import { OrganisationProvider } from '@documenso/lib/client-only/providers/organisation';
+import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
+import { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
+import { getTeamSettings } from '@documenso/lib/server-only/team/get-team-settings';
+import { TrpcProvider } from '@documenso/trpc/react';
+import type { OrganisationSession } from '@documenso/trpc/server/organisation-router/get-organisation-session.types';
+
+import { TeamProvider } from '~/providers/team';
+import { ZBaseEmbedDataSchema } from '~/types/embed-base-schemas';
+import { injectCss } from '~/utils/css-vars';
+
+import type { Route } from './+types/_layout';
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const url = new URL(request.url);
+
+  const token = url.searchParams.get('token');
+
+  if (!token) {
+    throw new Response('Invalid token', { status: 404 });
+  }
+
+  const result = await verifyEmbeddingPresignToken({ token }).catch(() => null);
+
+  if (!result) {
+    throw new Response('Invalid token', { status: 404 });
+  }
+
+  const organisationClaim = await getOrganisationClaimByTeamId({
+    teamId: result.teamId,
+  });
+
+  const teamSettings = await getTeamSettings({
+    userId: result.userId,
+    teamId: result.teamId,
+  });
+
+  return {
+    token,
+    userId: result.userId,
+    teamId: result.teamId,
+    organisationClaim,
+    preferences: {
+      aiFeaturesEnabled: teamSettings.aiFeaturesEnabled,
+    },
+  };
+};
+
+export default function AuthoringLayout() {
+  const { token, teamId, organisationClaim, preferences } = useLoaderData<typeof loader>();
+
+  const allowEmbedAuthoringWhiteLabel = organisationClaim.flags.embedAuthoringWhiteLabel ?? false;
+
+  useLayoutEffect(() => {
+    try {
+      const hash = window.location.hash.slice(1);
+
+      const result = ZBaseEmbedDataSchema.safeParse(JSON.parse(decodeURIComponent(atob(hash))));
+
+      if (!result.success) {
+        return;
+      }
+
+      const { css, cssVars, darkModeDisabled } = result.data;
+
+      if (darkModeDisabled) {
+        document.documentElement.classList.add('dark-mode-disabled');
+      }
+
+      if (allowEmbedAuthoringWhiteLabel) {
+        injectCss({
+          css,
+          cssVars,
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }, []);
+
+  /**
+   * Dummy data for providers.
+   */
+  const team: OrganisationSession['teams'][number] = {
+    id: teamId,
+    name: '',
+    url: '',
+    createdAt: new Date(),
+    avatarImageId: null,
+    organisationId: '',
+    currentTeamRole: TeamMemberRole.ADMIN,
+    preferences: {
+      aiFeaturesEnabled: preferences.aiFeaturesEnabled,
+    },
+  };
+
+  /**
+   * Dummy data for providers.
+   */
+  const organisation: OrganisationSession = {
+    id: '',
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    type: OrganisationType.ORGANISATION,
+    name: '',
+    url: '',
+    avatarImageId: null,
+    customerId: null,
+    ownerUserId: -1,
+    organisationClaim,
+    teams: [team],
+    subscription: null,
+    currentOrganisationRole: OrganisationMemberRole.ADMIN,
+  };
+
+  return (
+    <OrganisationProvider organisation={organisation}>
+      <TeamProvider team={team}>
+        <TrpcProvider
+          headers={{ authorization: `Bearer ${token}`, 'x-team-Id': team.id.toString() }}
+        >
+          <LimitsProvider
+            bypassLimits={true}
+            initialValue={{
+              quota: PAID_PLAN_LIMITS,
+              remaining: PAID_PLAN_LIMITS,
+              maximumEnvelopeItemCount: organisationClaim.envelopeItemCount,
+            }}
+            teamId={team.id}
+          >
+            <Outlet />
+          </LimitsProvider>
+        </TrpcProvider>
+      </TeamProvider>
+    </OrganisationProvider>
+  );
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const errorCode = isRouteErrorResponse(error) ? error.status : 500;
+
+  return (
+    <div>
+      {match(errorCode)
+        .with(404, () => (
+          <div>
+            <p>
+              <Trans>Token Not Found</Trans>
+            </p>
+
+            <ul>
+              <li>
+                <Trans>Ensure that you are using the embedding token, not the API token</Trans>
+              </li>
+              <li>
+                <Trans>
+                  If you are using staging, ensure that you have set the host prop on the embedding
+                  component to the staging domain (https://stg-app.documenso.com)
+                </Trans>
+              </li>
+            </ul>
+          </div>
+        ))
+        .otherwise(() => (
+          <p>
+            <Trans>An error occurred</Trans>
+            {errorCode}
+          </p>
+        ))}
+    </div>
+  );
+}

apps/remix/app/routes/embed+/v2+/authoring+/envelope.create._index.tsx

@@ -0,0 +1,404 @@
+import { useLayoutEffect, useMemo, useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { useLingui } from '@lingui/react/macro';
+import {
+  DocumentStatus,
+  EnvelopeType,
+  ReadStatus,
+  SendStatus,
+  SigningStatus,
+} from '@prisma/client';
+import { CheckCircle2Icon } from 'lucide-react';
+
+import { EnvelopeEditorProvider } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import type { SupportedLanguageCodes } from '@documenso/lib/constants/i18n';
+import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
+import { getTeamSettings } from '@documenso/lib/server-only/team/get-team-settings';
+import { ZDefaultRecipientsSchema } from '@documenso/lib/types/default-recipients';
+import type { TDocumentMetaDateFormat } from '@documenso/lib/types/document-meta';
+import type { TEditorEnvelope } from '@documenso/lib/types/envelope-editor';
+import {
+  type TEmbedCreateEnvelopeAuthoring,
+  ZEmbedCreateEnvelopeAuthoringSchema,
+} from '@documenso/lib/types/envelope-editor';
+import type { TEnvelopeFieldAndMeta } from '@documenso/lib/types/field-meta';
+import { extractDerivedDocumentMeta } from '@documenso/lib/utils/document';
+import { buildEmbeddedFeatures } from '@documenso/lib/utils/embed-config';
+import { buildEmbeddedEditorOptions } from '@documenso/lib/utils/embed-config';
+import { trpc } from '@documenso/trpc/react';
+import type { TCreateEnvelopePayload } from '@documenso/trpc/server/envelope-router/create-envelope.types';
+import { Spinner } from '@documenso/ui/primitives/spinner';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { EnvelopeEditor } from '~/components/general/envelope-editor/envelope-editor';
+import { EnvelopeEditorRenderProviderWrapper } from '~/components/general/envelope-editor/envelope-editor-renderer-provider-wrapper';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/envelope.create._index';
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const url = new URL(request.url);
+
+  // We know that the token is present because we're checking it in the parent _layout route
+  const token = url.searchParams.get('token') || '';
+
+  if (!token) {
+    throw new Response('Invalid token', { status: 404 });
+  }
+
+  // We also know that the token is valid, but we need the userId + teamId
+  const result = await verifyEmbeddingPresignToken({ token }).catch(() => null);
+
+  if (!result) {
+    throw new Response('Invalid token', { status: 404 });
+  }
+
+  const teamSettings = await getTeamSettings({
+    userId: result.userId,
+    teamId: result.teamId,
+  });
+
+  return superLoaderJson({
+    token,
+    tokenUserId: result.userId,
+    tokenTeamId: result.teamId,
+    teamSettings,
+  });
+};
+
+export default function EmbeddingAuthoringEnvelopeCreatePage() {
+  const [hasInitialized, setHasInitialized] = useState(false);
+  const [embedAuthoringOptions, setEmbedAuthoringOptions] =
+    useState<TEmbedCreateEnvelopeAuthoring | null>(null);
+
+  useLayoutEffect(() => {
+    try {
+      const hash = window.location.hash.slice(1);
+
+      if (hash) {
+        const result = ZEmbedCreateEnvelopeAuthoringSchema.safeParse(
+          JSON.parse(decodeURIComponent(atob(hash))),
+        );
+
+        if (result.success) {
+          setEmbedAuthoringOptions({
+            ...result.data,
+            features: buildEmbeddedFeatures(result.data.features),
+          });
+        }
+      }
+    } catch (err) {
+      console.error('Error parsing embedding params:', err);
+    }
+
+    setHasInitialized(true);
+  }, []);
+
+  if (!hasInitialized) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (!embedAuthoringOptions) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Trans>Invalid Embedding Parameters</Trans>
+      </div>
+    );
+  }
+
+  return <EnvelopeCreatePage embedAuthoringOptions={embedAuthoringOptions} />;
+}
+
+type EnvelopeCreatePageProps = {
+  embedAuthoringOptions: TEmbedCreateEnvelopeAuthoring;
+};
+
+const EnvelopeCreatePage = ({ embedAuthoringOptions }: EnvelopeCreatePageProps) => {
+  const { token, tokenUserId, tokenTeamId, teamSettings } = useSuperLoaderData<typeof loader>();
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [isCreatingEnvelope, setIsCreatingEnvelope] = useState(false);
+  const [createdEnvelope, setCreatedEnvelope] = useState<{ id: string } | null>(null);
+
+  const { mutateAsync: createEmbeddingEnvelope } =
+    trpc.embeddingPresign.createEmbeddingEnvelope.useMutation();
+
+  const buildCreateEnvelopeRequest = (
+    envelope: Omit<TEditorEnvelope, 'id'>,
+  ): { payload: TCreateEnvelopePayload; files: File[] } => {
+    const sortedItems = [...envelope.envelopeItems].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+
+    const itemIdToIndex = new Map<string, number>();
+
+    sortedItems.forEach((item, index) => {
+      itemIdToIndex.set(String(item.id), index);
+    });
+
+    const files: File[] = [];
+
+    for (const item of sortedItems) {
+      if (!item.data) {
+        throw new Error(`Envelope item "${item.title ?? item.id}" has no PDF data`);
+      }
+
+      files.push(
+        new File(
+          [item.data],
+          item.title?.endsWith('.pdf') ? item.title : `${item.title ?? 'document'}.pdf`,
+          {
+            type: 'application/pdf',
+          },
+        ),
+      );
+    }
+
+    const recipients = envelope.recipients.map((recipient) => {
+      const recipientFields = envelope.fields.filter((f) => f.recipientId === recipient.id);
+
+      const fields = recipientFields.map((field) => {
+        return {
+          identifier: itemIdToIndex.get(String(field.envelopeItemId)),
+          page: field.page,
+          positionX: Number(field.positionX),
+          positionY: Number(field.positionY),
+          width: Number(field.width),
+          height: Number(field.height),
+          ...({
+            type: field.type,
+            fieldMeta: field.fieldMeta ?? undefined,
+          } as TEnvelopeFieldAndMeta),
+        };
+      });
+
+      return {
+        email: recipient.email,
+        name: recipient.name,
+        role: recipient.role,
+        signingOrder: recipient.signingOrder ?? undefined,
+        accessAuth: recipient.authOptions?.accessAuth ?? [],
+        actionAuth: recipient.authOptions?.actionAuth ?? [],
+        fields,
+      };
+    });
+
+    const payload: TCreateEnvelopePayload = {
+      title: envelope.title,
+      type: envelope.type,
+      externalId: envelope.externalId ?? undefined,
+      visibility: envelope.visibility,
+      globalAccessAuth: envelope.authOptions?.globalAccessAuth?.length
+        ? envelope.authOptions?.globalAccessAuth
+        : undefined,
+      globalActionAuth: envelope.authOptions?.globalActionAuth?.length
+        ? envelope.authOptions?.globalActionAuth
+        : undefined,
+      folderId: envelope.folderId ?? undefined,
+      recipients,
+      meta: {
+        subject: envelope.documentMeta.subject ?? undefined,
+        message: envelope.documentMeta.message ?? undefined,
+        timezone: envelope.documentMeta.timezone ?? undefined,
+        dateFormat: (envelope.documentMeta.dateFormat as TDocumentMetaDateFormat) ?? undefined,
+        distributionMethod: envelope.documentMeta.distributionMethod ?? undefined,
+        signingOrder: envelope.documentMeta.signingOrder ?? undefined,
+        allowDictateNextSigner: envelope.documentMeta.allowDictateNextSigner ?? undefined,
+        redirectUrl: envelope.documentMeta.redirectUrl ?? undefined,
+        language: envelope.documentMeta.language as SupportedLanguageCodes,
+        typedSignatureEnabled: envelope.documentMeta.typedSignatureEnabled ?? undefined,
+        uploadSignatureEnabled: envelope.documentMeta.uploadSignatureEnabled ?? undefined,
+        drawSignatureEnabled: envelope.documentMeta.drawSignatureEnabled ?? undefined,
+        emailId: envelope.documentMeta.emailId ?? undefined,
+        emailReplyTo: envelope.documentMeta.emailReplyTo ?? undefined,
+        emailSettings: envelope.documentMeta.emailSettings ?? undefined,
+      },
+    };
+
+    return { payload, files };
+  };
+
+  const createEmbeddedEnvelope = async (envelopeWithoutId: Omit<TEditorEnvelope, 'id'>) => {
+    setIsCreatingEnvelope(true);
+
+    if (isCreatingEnvelope) {
+      return;
+    }
+
+    try {
+      const { payload, files } = buildCreateEnvelopeRequest(envelopeWithoutId);
+
+      const formData = new FormData();
+      formData.append('payload', JSON.stringify(payload));
+
+      for (const file of files) {
+        formData.append('files', file);
+      }
+
+      const { id } = await createEmbeddingEnvelope(formData);
+
+      // Send a message to the parent window with the document details
+      if (window.parent !== window) {
+        window.parent.postMessage(
+          {
+            type: 'envelope-created',
+            envelopeId: id,
+            externalId: envelopeWithoutId.externalId,
+          },
+          '*',
+        );
+      }
+
+      setCreatedEnvelope({ id });
+    } catch (err) {
+      console.error('Failed to create envelope:', err);
+
+      toast({
+        variant: 'destructive',
+        title: t`Error`,
+        description: t`Failed to create document. Please try again.`,
+      });
+    }
+
+    setIsCreatingEnvelope(false);
+  };
+
+  const embeded = useMemo(
+    () => ({
+      presignToken: token,
+      mode: 'create' as const,
+      onCreate: async (envelope: Omit<TEditorEnvelope, 'id'>) => createEmbeddedEnvelope(envelope),
+      customBrandingLogo: Boolean(teamSettings.brandingEnabled && teamSettings.brandingLogo),
+    }),
+    [token],
+  );
+
+  const editorConfig = useMemo(() => {
+    return buildEmbeddedEditorOptions(embedAuthoringOptions.features, embeded);
+  }, [embedAuthoringOptions.features, embeded]);
+
+  const initialEnvelope = useMemo((): TEditorEnvelope => {
+    const defaultDocumentMeta = extractDerivedDocumentMeta(teamSettings, undefined);
+
+    const defaultRecipients = teamSettings.defaultRecipients
+      ? ZDefaultRecipientsSchema.parse(teamSettings.defaultRecipients)
+      : [];
+
+    const recipients: TEditorEnvelope['recipients'] = defaultRecipients.map((recipient, index) => ({
+      id: -(index + 1),
+      envelopeId: '',
+      email: recipient.email,
+      name: recipient.name,
+      role: recipient.role,
+      token: '',
+      readStatus: ReadStatus.NOT_OPENED,
+      signingStatus: SigningStatus.NOT_SIGNED,
+      sendStatus: SendStatus.NOT_SENT,
+      documentDeletedAt: null,
+      expired: null,
+      signedAt: null,
+      authOptions: {
+        accessAuth: [],
+        actionAuth: [],
+      },
+      signingOrder: index + 1,
+      rejectionReason: null,
+    }));
+
+    const type = embedAuthoringOptions.type;
+
+    return {
+      id: '',
+      secondaryId: '',
+      internalVersion: 2,
+      type,
+      status: DocumentStatus.DRAFT,
+      source: 'DOCUMENT',
+      visibility: teamSettings.documentVisibility,
+      templateType: 'PRIVATE',
+      completedAt: null,
+      deletedAt: null,
+      title: type === EnvelopeType.DOCUMENT ? 'Document Title' : 'Template Title',
+      authOptions: {
+        globalAccessAuth: [],
+        globalActionAuth: [],
+      },
+      publicTitle: '',
+      publicDescription: '',
+      userId: tokenUserId,
+      teamId: tokenTeamId,
+      folderId: null,
+      documentMeta: {
+        id: '',
+        ...defaultDocumentMeta,
+      },
+      recipients,
+      fields: [],
+      envelopeItems: [],
+      directLink: null,
+      team: {
+        id: tokenTeamId,
+        url: '',
+      },
+      user: {
+        id: tokenUserId,
+        name: '',
+        email: '',
+      },
+      externalId: embedAuthoringOptions?.externalId ?? null,
+    };
+  }, []);
+
+  return (
+    <div className="min-w-screen relative min-h-screen">
+      {isCreatingEnvelope && (
+        <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-background">
+          <Spinner />
+
+          <p className="mt-2 text-sm text-muted-foreground">
+            {initialEnvelope.type === EnvelopeType.DOCUMENT ? (
+              <Trans>Creating Document</Trans>
+            ) : (
+              <Trans>Creating Template</Trans>
+            )}
+          </p>
+        </div>
+      )}
+
+      {createdEnvelope && (
+        <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-background">
+          <div className="mx-auto w-full max-w-md text-center">
+            <CheckCircle2Icon className="mx-auto h-16 w-16 text-primary" />
+
+            <h1 className="mt-6 text-2xl font-bold">
+              {initialEnvelope.type === EnvelopeType.TEMPLATE ? (
+                <Trans>Template Created</Trans>
+              ) : (
+                <Trans>Document Created</Trans>
+              )}
+            </h1>
+
+            <p className="mt-2 text-muted-foreground">
+              {initialEnvelope.type === EnvelopeType.TEMPLATE ? (
+                <Trans>Your template has been created successfully</Trans>
+              ) : (
+                <Trans>Your document has been created successfully</Trans>
+              )}
+            </p>
+          </div>
+        </div>
+      )}
+
+      <EnvelopeEditorProvider initialEnvelope={initialEnvelope} editorConfig={editorConfig}>
+        <EnvelopeEditorRenderProviderWrapper presignedToken={token}>
+          <EnvelopeEditor />
+        </EnvelopeEditorRenderProviderWrapper>
+      </EnvelopeEditorProvider>
+    </div>
+  );
+};

apps/remix/app/routes/embed+/v2+/authoring+/envelope.edit.$id.tsx

@@ -0,0 +1,353 @@
+import { useLayoutEffect, useMemo, useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+import { EnvelopeType } from '@prisma/client';
+import { CheckCircle2Icon } from 'lucide-react';
+import { redirect } from 'react-router';
+
+import { EnvelopeEditorProvider } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import type { SupportedLanguageCodes } from '@documenso/lib/constants/i18n';
+import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
+import { getEnvelopeById } from '@documenso/lib/server-only/envelope/get-envelope-by-id';
+import { getTeamSettings } from '@documenso/lib/server-only/team/get-team-settings';
+import type { TDocumentMetaDateFormat } from '@documenso/lib/types/document-meta';
+import type { TEditorEnvelope } from '@documenso/lib/types/envelope-editor';
+import {
+  type TEmbedEditEnvelopeAuthoring,
+  ZEmbedEditEnvelopeAuthoringSchema,
+} from '@documenso/lib/types/envelope-editor';
+import type { TEnvelopeFieldAndMeta } from '@documenso/lib/types/field-meta';
+import { buildEmbeddedEditorOptions } from '@documenso/lib/utils/embed-config';
+import { trpc } from '@documenso/trpc/react';
+import type { TUpdateEmbeddingEnvelopePayload } from '@documenso/trpc/server/embedding-router/update-embedding-envelope.types';
+import { Spinner } from '@documenso/ui/primitives/spinner';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { EnvelopeEditor } from '~/components/general/envelope-editor/envelope-editor';
+import { EnvelopeEditorRenderProviderWrapper } from '~/components/general/envelope-editor/envelope-editor-renderer-provider-wrapper';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/envelope.edit.$id';
+
+export const loader = async ({ request, params }: Route.LoaderArgs) => {
+  const url = new URL(request.url);
+
+  const { id } = params;
+
+  if (!id || !id.startsWith('envelope_')) {
+    throw redirect(`/embed/v2/authoring/error/not-found`);
+  }
+
+  // We know that the token is present because we're checking it in the parent _layout route
+  const token = url.searchParams.get('token') || '';
+
+  if (!token) {
+    throw new Response('Invalid token', { status: 404 });
+  }
+
+  // We also know that the token is valid, but we need the userId + teamId
+  const result = await verifyEmbeddingPresignToken({ token, scope: `envelopeId:${id}` }).catch(
+    () => null,
+  );
+
+  if (!result) {
+    throw new Error('Invalid token');
+  }
+
+  const settings = await getTeamSettings({
+    userId: result.userId,
+    teamId: result.teamId,
+  });
+
+  const envelope = await getEnvelopeById({
+    id: {
+      type: 'envelopeId',
+      id,
+    },
+    type: null,
+    userId: result.userId,
+    teamId: result.teamId,
+  }).catch(() => null);
+
+  if (!envelope) {
+    throw redirect(`/embed/v2/authoring/error/not-found`);
+  }
+
+  let brandingLogo: string | undefined = undefined;
+
+  if (settings.brandingEnabled && settings.brandingLogo) {
+    brandingLogo = settings.brandingLogo;
+  }
+
+  return superLoaderJson({
+    token,
+    envelope,
+    brandingLogo,
+  });
+};
+
+export default function EmbeddingAuthoringEnvelopeEditPage() {
+  const [hasInitialized, setHasInitialized] = useState(false);
+  const [embedAuthoringOptions, setEmbedAuthoringOptions] =
+    useState<TEmbedEditEnvelopeAuthoring | null>(null);
+
+  useLayoutEffect(() => {
+    try {
+      const hash = window.location.hash.slice(1);
+
+      if (hash) {
+        const result = ZEmbedEditEnvelopeAuthoringSchema.safeParse(
+          JSON.parse(decodeURIComponent(atob(hash))),
+        );
+
+        if (result.success) {
+          setEmbedAuthoringOptions(result.data);
+        }
+      }
+    } catch (err) {
+      console.error('Error parsing embedding params:', err);
+    }
+
+    setHasInitialized(true);
+  }, []);
+
+  if (!hasInitialized) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (!embedAuthoringOptions) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Trans>Invalid Embedding Parameters</Trans>
+      </div>
+    );
+  }
+
+  return <EnvelopeEditPage embedAuthoringOptions={embedAuthoringOptions} />;
+}
+
+type EnvelopeEditPageProps = {
+  embedAuthoringOptions: TEmbedEditEnvelopeAuthoring;
+};
+
+const EnvelopeEditPage = ({ embedAuthoringOptions }: EnvelopeEditPageProps) => {
+  const { envelope, token, brandingLogo } = useSuperLoaderData<typeof loader>();
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [isUpdatingEnvelope, setIsUpdatingEnvelope] = useState(false);
+  const [updatedEnvelope, setUpdatedEnvelope] = useState<{ id: string } | null>(null);
+
+  const { mutateAsync: updateEmbeddingEnvelope } =
+    trpc.embeddingPresign.updateEmbeddingEnvelope.useMutation();
+
+  const buildUpdateEnvelopeRequest = (
+    envelope: TEditorEnvelope,
+  ): { payload: TUpdateEmbeddingEnvelopePayload; files: File[] } => {
+    const files: File[] = [];
+
+    const envelopeItems = envelope.envelopeItems.map((item) => {
+      // Attach any new envelope item files to the request.
+      if (item.data) {
+        files.push(
+          new File(
+            [item.data],
+            item.title?.endsWith('.pdf') ? item.title : `${item.title ?? 'document'}.pdf`,
+            {
+              type: 'application/pdf',
+            },
+          ),
+        );
+      }
+
+      return {
+        id: item.id,
+        title: item.title,
+        order: item.order,
+        index: item.data ? files.length - 1 : undefined,
+      };
+    });
+
+    const recipients = envelope.recipients.map((recipient) => {
+      const recipientFields = envelope.fields.filter((f) => f.recipientId === recipient.id);
+
+      const fields = recipientFields.map((field) => ({
+        id: field.id,
+        envelopeItemId: field.envelopeItemId,
+        page: field.page,
+        positionX: Number(field.positionX),
+        positionY: Number(field.positionY),
+        width: Number(field.width),
+        height: Number(field.height),
+        ...({
+          type: field.type,
+          fieldMeta: field.fieldMeta ?? undefined,
+        } as TEnvelopeFieldAndMeta),
+      }));
+
+      return {
+        email: recipient.email,
+        name: recipient.name,
+        role: recipient.role,
+        signingOrder: recipient.signingOrder ?? undefined,
+        accessAuth: recipient.authOptions?.accessAuth ?? [],
+        actionAuth: recipient.authOptions?.actionAuth ?? [],
+        fields,
+      };
+    });
+
+    const payload: TUpdateEmbeddingEnvelopePayload = {
+      envelopeId: envelope.id,
+      data: {
+        title: envelope.title,
+        externalId: envelope.externalId,
+        visibility: envelope.visibility,
+        globalAccessAuth: envelope.authOptions?.globalAccessAuth,
+        globalActionAuth: envelope.authOptions?.globalActionAuth,
+        folderId: envelope.folderId,
+        recipients,
+        envelopeItems,
+      },
+      meta: {
+        subject: envelope.documentMeta.subject ?? undefined,
+        message: envelope.documentMeta.message ?? undefined,
+        timezone: envelope.documentMeta.timezone ?? undefined,
+        distributionMethod: envelope.documentMeta.distributionMethod ?? undefined,
+        signingOrder: envelope.documentMeta.signingOrder ?? undefined,
+        allowDictateNextSigner: envelope.documentMeta.allowDictateNextSigner ?? undefined,
+        redirectUrl: envelope.documentMeta.redirectUrl ?? undefined,
+        typedSignatureEnabled: envelope.documentMeta.typedSignatureEnabled ?? undefined,
+        uploadSignatureEnabled: envelope.documentMeta.uploadSignatureEnabled ?? undefined,
+        drawSignatureEnabled: envelope.documentMeta.drawSignatureEnabled ?? undefined,
+        emailId: envelope.documentMeta.emailId ?? undefined,
+        emailReplyTo: envelope.documentMeta.emailReplyTo ?? undefined,
+        emailSettings: envelope.documentMeta.emailSettings ?? undefined,
+        dateFormat: (envelope.documentMeta.dateFormat as TDocumentMetaDateFormat) ?? undefined,
+        language: envelope.documentMeta.language as SupportedLanguageCodes,
+      },
+    };
+
+    return { payload, files };
+  };
+
+  const updateEmbeddedEnvelope = async (envelope: TEditorEnvelope) => {
+    setIsUpdatingEnvelope(true);
+
+    if (isUpdatingEnvelope) {
+      return;
+    }
+
+    try {
+      const { payload, files } = buildUpdateEnvelopeRequest(envelope);
+
+      const formData = new FormData();
+      formData.append('payload', JSON.stringify(payload));
+
+      for (const file of files) {
+        formData.append('files', file);
+      }
+
+      await updateEmbeddingEnvelope(formData);
+
+      // Send a message to the parent window with the document details
+      if (window.parent !== window) {
+        window.parent.postMessage(
+          {
+            type: 'envelope-updated',
+            envelopeId: envelope.id,
+            externalId: envelope.externalId || null,
+          },
+          '*',
+        );
+      }
+
+      // Navigate to the completion page.
+      setUpdatedEnvelope({ id: envelope.id });
+    } catch (err) {
+      console.error('Failed to update envelope:', err);
+
+      toast({
+        variant: 'destructive',
+        title: t`Error`,
+        description: t`Failed to update envelope. Please try again.`,
+      });
+    }
+
+    setIsUpdatingEnvelope(false);
+  };
+
+  const embeded = useMemo(
+    () => ({
+      presignToken: token,
+      mode: 'edit' as const,
+      onUpdate: async (envelope: TEditorEnvelope) => updateEmbeddedEnvelope(envelope),
+      brandingLogo,
+    }),
+    [token],
+  );
+
+  const editorConfig = useMemo(() => {
+    return buildEmbeddedEditorOptions(embedAuthoringOptions.features, embeded);
+  }, [embedAuthoringOptions.features, embeded]);
+
+  const initialEnvelope = useMemo(
+    () => ({
+      ...envelope,
+      externalId: embedAuthoringOptions?.externalId || envelope.externalId || null,
+    }),
+    [envelope, embedAuthoringOptions?.externalId],
+  );
+
+  return (
+    <div className="min-w-screen relative min-h-screen">
+      {isUpdatingEnvelope && (
+        <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-background">
+          <Spinner />
+
+          <p className="mt-2 text-sm text-muted-foreground">
+            {envelope.type === EnvelopeType.DOCUMENT ? (
+              <Trans>Updating Document</Trans>
+            ) : (
+              <Trans>Updating Template</Trans>
+            )}
+          </p>
+        </div>
+      )}
+
+      {updatedEnvelope && (
+        <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-background">
+          <div className="mx-auto w-full max-w-md text-center">
+            <CheckCircle2Icon className="mx-auto h-16 w-16 text-primary" />
+
+            <h1 className="mt-6 text-2xl font-bold">
+              {envelope.type === EnvelopeType.TEMPLATE ? (
+                <Trans>Template Updated</Trans>
+              ) : (
+                <Trans>Document Updated</Trans>
+              )}
+            </h1>
+
+            <p className="mt-2 text-muted-foreground">
+              {envelope.type === EnvelopeType.TEMPLATE ? (
+                <Trans>Your template has been updated successfully</Trans>
+              ) : (
+                <Trans>Your document has been updated successfully</Trans>
+              )}
+            </p>
+          </div>
+        </div>
+      )}
+
+      <EnvelopeEditorProvider initialEnvelope={initialEnvelope} editorConfig={editorConfig}>
+        <EnvelopeEditorRenderProviderWrapper presignedToken={token}>
+          <EnvelopeEditor />
+        </EnvelopeEditorRenderProviderWrapper>
+      </EnvelopeEditorProvider>
+    </div>
+  );
+};

apps/remix/package.json

@@ -106,5 +106,5 @@
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   },
-  "version": "2.5.1"
+  "version": "2.6.0"
 }

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

@@ -23,6 +23,10 @@ import {
   ZGetPresignedPostUrlRequestSchema,
   ZUploadPdfRequestSchema,
 } from './files.types';
+import getEnvelopeItemImageRoute from './routes/get-envelope-item-image';
+import getEnvelopeItemImageByTokenRoute from './routes/get-envelope-item-image-by-token';
+import getEnvelopeItemMetaRoute from './routes/get-envelope-item-meta';
+import getEnvelopeItemMetaByTokenRoute from './routes/get-envelope-item-meta-by-token';
 
 export const filesRoute = new Hono<HonoEnv>()
   /**
@@ -319,3 +323,11 @@ export const filesRoute = new Hono<HonoEnv>()
       });
     },
   );
+
+// Envelope item meta routes for both tokens and auth based
+filesRoute.route('/', getEnvelopeItemMetaRoute);
+filesRoute.route('/', getEnvelopeItemMetaByTokenRoute);
+
+// Image routes for both tokens and auth based
+filesRoute.route('/', getEnvelopeItemImageRoute);
+filesRoute.route('/', getEnvelopeItemImageByTokenRoute);

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

@@ -72,3 +72,23 @@ export const ZGetEnvelopeItemFileTokenDownloadRequestParamsSchema = z.object({
 export type TGetEnvelopeItemFileTokenDownloadRequestParams = z.infer<
   typeof ZGetEnvelopeItemFileTokenDownloadRequestParamsSchema
 >;
+
+export const ZGetEnvelopeItemMetaSchema = z.object({
+  envelopeItemId: z.string(),
+  documentDataId: z.string(),
+  pages: z
+    .object({
+      originalWidth: z.number(),
+      originalHeight: z.number(),
+      scale: z.number(),
+      scaledWidth: z.number(),
+      scaledHeight: z.number(),
+    })
+    .array(),
+});
+
+export const ZGetEnvelopeItemsMetaResponseSchema = z.object({
+  envelopeItems: z.array(ZGetEnvelopeItemMetaSchema),
+});
+
+export type TGetEnvelopeItemsMetaResponse = z.infer<typeof ZGetEnvelopeItemsMetaResponseSchema>;

apps/remix/server/api/files/routes/get-envelope-item-image-by-token.ts

@@ -0,0 +1,68 @@
+import { sValidator } from '@hono/standard-validator';
+import { Hono } from 'hono';
+import { z } from 'zod';
+
+import { prisma } from '@documenso/prisma';
+
+import type { HonoEnv } from '../../../router';
+import { handleEnvelopeItemPageRequest } from './get-envelope-item-image';
+
+const route = new Hono<HonoEnv>();
+
+const ZGetEnvelopeItemPageTokenParamsSchema = z.object({
+  token: z.string().min(1),
+  envelopeId: z.string().min(1),
+  envelopeItemId: z.string().min(1),
+  documentDataId: z.string().min(1),
+  version: z.enum(['initial', 'current']),
+  pageIndex: z.coerce.number().int().min(0),
+});
+
+/**
+ * Returns a single PDF page as a JPEG image using a token.
+ */
+route.get(
+  '/token/:token/envelope/:envelopeId/envelopeItem/:envelopeItemId/dataId/:documentDataId/:version/:pageIndex/image.jpeg',
+  sValidator('param', ZGetEnvelopeItemPageTokenParamsSchema),
+  async (c) => {
+    const { token, envelopeId, envelopeItemId, documentDataId, version, pageIndex } =
+      c.req.valid('param');
+
+    // Validate envelope access.
+    const envelopeItem = await prisma.envelopeItem.findFirst({
+      where: {
+        id: envelopeItemId,
+        documentDataId,
+        envelope: {
+          id: envelopeId,
+          recipients: {
+            some: {
+              token,
+            },
+          },
+        },
+      },
+      include: {
+        documentData: true,
+      },
+    });
+
+    if (!envelopeItem) {
+      return c.json({ error: 'Not found' }, 404);
+    }
+
+    // We can hard cache this since since it's a unique URL for a given recipient.
+    // Might be dicey if the handler returns a cacheable error code.
+    c.header('Cache-Control', 'public, max-age=31536000, immutable');
+
+    return await handleEnvelopeItemPageRequest({
+      c,
+      envelopeItem,
+      version,
+      pageIndex,
+      cacheStrategy: 'public',
+    });
+  },
+);
+
+export default route;

apps/remix/server/api/files/routes/get-envelope-item-image.ts

@@ -0,0 +1,175 @@
+import { sValidator } from '@hono/standard-validator';
+import type { DocumentData, EnvelopeItem } from '@prisma/client';
+import { type Context, Hono } from 'hono';
+import { z } from 'zod';
+
+import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { PDF_IMAGE_RENDER_SCALE } from '@documenso/lib/constants/pdf-viewer';
+import { pdfToImage } from '@documenso/lib/server-only/ai/pdf-to-images';
+import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import type { DocumentDataVersion } from '@documenso/lib/types/document-data';
+import { getFileServerSide } from '@documenso/lib/universal/upload/get-file.server';
+import { UNSAFE_getS3File } from '@documenso/lib/universal/upload/server-actions';
+import { getEnvelopeItemPageImageS3Key } from '@documenso/lib/utils/envelope-images';
+import { prisma } from '@documenso/prisma';
+
+import type { HonoEnv } from '../../../router';
+
+const route = new Hono<HonoEnv>();
+
+const ZGetEnvelopeItemPageRequestParamsSchema = z.object({
+  envelopeId: z.string().min(1),
+  envelopeItemId: z.string().min(1),
+  documentDataId: z.string().min(1),
+  version: z.enum(['initial', 'current']),
+  pageIndex: z.coerce.number().int().min(0),
+});
+
+const ZGetEnvelopeItemPageRequestQuerySchema = z.object({
+  presignToken: z.string().optional(),
+});
+
+/**
+ * Returns a single PDF page as a JPEG image.
+ */
+route.get(
+  '/envelope/:envelopeId/envelopeItem/:envelopeItemId/dataId/:documentDataId/:version/:pageIndex/image.jpeg',
+  sValidator('param', ZGetEnvelopeItemPageRequestParamsSchema),
+  sValidator('query', ZGetEnvelopeItemPageRequestQuerySchema),
+  async (c) => {
+    const { envelopeId, envelopeItemId, documentDataId, version, pageIndex } = c.req.valid('param');
+
+    const { presignToken } = c.req.valid('query');
+
+    const session = await getOptionalSession(c);
+
+    let userId = session.user?.id;
+
+    // Check presignToken if provided
+    if (presignToken) {
+      const verifiedToken = await verifyEmbeddingPresignToken({
+        token: presignToken,
+      }).catch(() => undefined);
+
+      userId = verifiedToken?.userId;
+    }
+
+    if (!userId) {
+      return c.json({ error: 'Not found' }, 404);
+    }
+
+    const envelope = await prisma.envelope.findFirst({
+      where: { id: envelopeId },
+      include: {
+        envelopeItems: {
+          where: {
+            id: envelopeItemId,
+            documentDataId,
+          },
+          include: {
+            documentData: true,
+          },
+        },
+      },
+    });
+
+    if (!envelope) {
+      return c.json({ error: 'Not found' }, 404);
+    }
+
+    const [envelopeItem] = envelope.envelopeItems;
+
+    if (!envelopeItem?.documentData) {
+      return c.json({ error: 'Not found' }, 404);
+    }
+
+    // Check team access
+    const team = await getTeamById({
+      userId,
+      teamId: envelope.teamId,
+    }).catch(() => null);
+
+    if (!team) {
+      return c.json({ error: 'Not found' }, 404);
+    }
+
+    return await handleEnvelopeItemPageRequest({
+      c,
+      envelopeItem,
+      version,
+      pageIndex,
+      cacheStrategy: 'private',
+    });
+  },
+);
+
+type HandleEnvelopeItemPageRequestOptions = {
+  c: Context<HonoEnv>;
+  envelopeItem: EnvelopeItem & {
+    documentData: DocumentData;
+  };
+  pageIndex: number;
+  version: DocumentDataVersion;
+
+  /**
+   * The type of cache strategy to use.
+   *
+   * For access via tokens, we can use a public cache to allow the CDN to cache it.
+   *
+   * For access via session, we must use a private cache.
+   */
+  cacheStrategy: 'private' | 'public';
+};
+
+export const handleEnvelopeItemPageRequest = async ({
+  c,
+  envelopeItem,
+  pageIndex,
+  version,
+  cacheStrategy,
+}: HandleEnvelopeItemPageRequestOptions) => {
+  // Determine which PDF data to use based on version requested.
+  const documentDataToUse =
+    version === 'current' ? envelopeItem.documentData.data : envelopeItem.documentData.initialData;
+
+  c.header('Content-Type', 'image/jpeg');
+  c.header('Cache-Control', `${cacheStrategy}, max-age=31536000, immutable`);
+
+  // Return the image if it already exists in S3.
+  if (envelopeItem.documentData.type === 'S3_PATH') {
+    const s3Key = getEnvelopeItemPageImageS3Key(documentDataToUse, pageIndex);
+
+    const image = await UNSAFE_getS3File(s3Key);
+
+    if (image) {
+      return c.body(image);
+    }
+  }
+
+  // Fetch PDF to render the page on the spot if it doesn't exist in S3.
+  const pdfBytes = await getFileServerSide({
+    type: envelopeItem.documentData.type,
+    data: documentDataToUse,
+  });
+
+  // Render page to image.
+  const { image } = await pdfToImage(pdfBytes, {
+    scale: PDF_IMAGE_RENDER_SCALE,
+    pageIndex,
+  }).catch((err) => {
+    console.error(err);
+
+    return {
+      image: null,
+    };
+  });
+
+  if (!image) {
+    return c.json({ error: 'Failed to render page to image' }, 500);
+  }
+
+  return c.body(image);
+};
+
+export default route;

apps/remix/server/api/files/routes/get-envelope-item-meta-by-token.ts

@@ -0,0 +1,54 @@
+import { sValidator } from '@hono/standard-validator';
+import { Hono } from 'hono';
+import { z } from 'zod';
+
+import { prisma } from '@documenso/prisma';
+
+import type { HonoEnv } from '../../../router';
+import { handleEnvelopeItemsMetaRequest } from './get-envelope-item-meta';
+
+const route = new Hono<HonoEnv>();
+
+const ZGetEnvelopeMetaByTokenParamSchema = z.object({
+  token: z.string().min(1),
+  envelopeId: z.string().min(1),
+});
+
+/**
+ * Returns metadata for all envelope items including page counts and dimensions using a token.
+ */
+route.get(
+  '/token/:token/envelope/:envelopeId/meta',
+  sValidator('param', ZGetEnvelopeMetaByTokenParamSchema),
+  async (c) => {
+    const { token, envelopeId } = c.req.valid('param');
+
+    // Validate token belongs to envelope
+    const recipient = await prisma.recipient.findFirst({
+      where: {
+        token,
+        envelopeId,
+      },
+      select: {
+        envelope: {
+          include: {
+            envelopeItems: {
+              include: { documentData: true },
+            },
+          },
+        },
+      },
+    });
+
+    if (!recipient) {
+      return c.json({ error: 'Not found' }, 404);
+    }
+
+    return await handleEnvelopeItemsMetaRequest({
+      c,
+      envelopeItems: recipient.envelope.envelopeItems,
+    });
+  },
+);
+
+export default route;

apps/remix/server/api/files/routes/get-envelope-item-meta.ts

@@ -0,0 +1,139 @@
+import { sValidator } from '@hono/standard-validator';
+import type { DocumentData, EnvelopeItem } from '@prisma/client';
+import { type Context, Hono } from 'hono';
+import { z } from 'zod';
+
+import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import type { TDocumentDataMeta } from '@documenso/lib/types/document-data';
+import { getFileServerSide } from '@documenso/lib/universal/upload/get-file.server';
+import { extractAndStorePdfImages } from '@documenso/lib/universal/upload/put-file.server';
+import { prisma } from '@documenso/prisma';
+
+import type { HonoEnv } from '../../../router';
+import type { TGetEnvelopeItemsMetaResponse } from '../files.types';
+
+const route = new Hono<HonoEnv>();
+
+const ZGetEnvelopeMetaParamsSchema = z.object({
+  envelopeId: z.string().min(1),
+});
+
+const ZGetEnvelopeMetaQuerySchema = z.object({
+  presignToken: z.string().optional(),
+});
+
+/**
+ * Returns metadata for all envelope items including page counts and dimensions.
+ */
+route.get(
+  '/envelope/:envelopeId/meta',
+  sValidator('param', ZGetEnvelopeMetaParamsSchema),
+  sValidator('query', ZGetEnvelopeMetaQuerySchema),
+  async (c) => {
+    const { envelopeId } = c.req.valid('param');
+    const { presignToken } = c.req.valid('query');
+
+    const session = await getOptionalSession(c);
+
+    let userId = session.user?.id;
+
+    // Check presignToken if provided
+    if (presignToken) {
+      const verifiedToken = await verifyEmbeddingPresignToken({
+        token: presignToken,
+      }).catch(() => undefined);
+
+      userId = verifiedToken?.userId;
+    }
+
+    if (!userId) {
+      return c.json({ error: 'Not found' }, 404);
+    }
+
+    // Note: Access is verified in the getTeamById call after this.
+    const envelope = await prisma.envelope.findFirst({
+      where: {
+        id: envelopeId,
+      },
+      include: {
+        envelopeItems: {
+          include: { documentData: true },
+        },
+      },
+    });
+
+    if (!envelope) {
+      return c.json({ error: 'Not found' }, 404);
+    }
+
+    // Check access to envelope.
+    const team = await getTeamById({
+      userId,
+      teamId: envelope.teamId,
+    }).catch(() => null);
+
+    if (!team) {
+      return c.json({ error: 'Not found' }, 404);
+    }
+
+    return await handleEnvelopeItemsMetaRequest({
+      c,
+      envelopeItems: envelope.envelopeItems,
+    });
+  },
+);
+
+type HandleEnvelopeItemsMetaRequestOptions = {
+  c: Context<HonoEnv>;
+  envelopeItems: (EnvelopeItem & {
+    documentData: DocumentData;
+  })[];
+};
+
+export const handleEnvelopeItemsMetaRequest = async ({
+  c,
+  envelopeItems,
+}: HandleEnvelopeItemsMetaRequestOptions) => {
+  const response = await Promise.all(
+    envelopeItems.map(async (item) => {
+      let pageMetadata = item.documentData.metadata;
+
+      // Runtime backfill if pageMetadata is missing.
+      if (!pageMetadata) {
+        const pdfBytes = await getFileServerSide({
+          type: item.documentData.type,
+          data: item.documentData.data,
+        });
+
+        const pdfPageMetadata: TDocumentDataMeta['pages'] = await extractAndStorePdfImages(
+          new Uint8Array(pdfBytes).buffer,
+          item.documentData.id,
+        );
+
+        pageMetadata = {
+          pages: pdfPageMetadata,
+        };
+      }
+
+      const pages = pageMetadata.pages ?? [];
+
+      return {
+        envelopeItemId: item.id,
+        documentDataId: item.documentData.id,
+        pages: pages.map((page) => ({
+          originalWidth: page.originalWidth,
+          originalHeight: page.originalHeight,
+          scale: page.scale,
+          scaledWidth: page.scaledWidth,
+          scaledHeight: page.scaledHeight,
+        })),
+      };
+    }),
+  );
+
+  return c.json({ envelopeItems: response } satisfies TGetEnvelopeItemsMetaResponse);
+};
+
+export default route;

apps/remix/server/main.js

@@ -17,7 +17,7 @@ server.use(
   serveStatic({
     root: 'build/client',
     onFound: (path, c) => {
-      if (path.startsWith('./build/client/assets')) {
+      if (path.startsWith('build/client/assets')) {
         // Hard cache assets with hashed file names.
         c.header('Cache-Control', 'public, immutable, max-age=31536000');
       } else {

apps/remix/server/router.ts

@@ -10,6 +10,7 @@ import { tsRestHonoApp } from '@documenso/api/hono';
 import { auth } from '@documenso/auth/server';
 import { API_V2_BETA_URL, API_V2_URL } from '@documenso/lib/constants/app';
 import { jobsClient } from '@documenso/lib/jobs/client';
+import { LicenseClient } from '@documenso/lib/server-only/license/license-client';
 import { TelemetryClient } from '@documenso/lib/server-only/telemetry/telemetry-client';
 import { getIpAddress } from '@documenso/lib/universal/get-ip-address';
 import { env } from '@documenso/lib/utils/env';
@@ -140,4 +141,7 @@ if (env('NODE_ENV') !== 'development') {
   void TelemetryClient.start();
 }
 
+// Start license client to verify license on startup.
+void LicenseClient.start();
+
 export default app;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@documenso/root",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@documenso/root",
-      "version": "2.5.1",
+      "version": "2.6.0",
       "hasInstallScript": true,
       "workspaces": [
         "apps/*",
@@ -15,7 +15,7 @@
       "dependencies": {
         "@ai-sdk/google-vertex": "3.0.81",
         "@documenso/prisma": "*",
-        "@libpdf/core": "^0.2.2",
+        "@libpdf/core": "^0.2.5",
         "@lingui/conf": "^5.6.0",
         "@lingui/core": "^5.6.0",
         "ai": "^5.0.104",
@@ -108,7 +108,7 @@
     },
     "apps/remix": {
       "name": "@documenso/remix",
-      "version": "2.5.1",
+      "version": "2.6.0",
       "dependencies": {
         "@cantoo/pdf-lib": "^2.5.3",
         "@documenso/api": "*",
@@ -4167,9 +4167,9 @@
       "license": "MIT"
     },
     "node_modules/@libpdf/core": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@libpdf/core/-/core-0.2.2.tgz",
-      "integrity": "sha512-qxYHUirZc4YSxTYkUVtLHqM9ypC9iKPOpHYfpDIUYAZyDGgcHh4SOwhkInHY/Q51TBajXRv6ZZd9fjSPvoQZnw==",
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@libpdf/core/-/core-0.2.5.tgz",
+      "integrity": "sha512-+oTpNRkEdL1kVmeJr6qz2wf0yqJx5FmUVN2u0kDuX81wvxyzYOlMjmFD8qbbJqyYiNZp0J7IAcW6VsZr+MW1Uw==",
       "license": "MIT",
       "dependencies": {
         "@noble/ciphers": "^2.1.1",
@@ -27365,24 +27365,6 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
-    "node_modules/make-cancellable-promise": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-2.0.0.tgz",
-      "integrity": "sha512-3SEQqTpV9oqVsIWqAcmDuaNeo7yBO3tqPtqGRcKkEo0lrzD3wqbKG9mkxO65KoOgXqj+zH2phJ2LiAsdzlogSw==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/wojtekmaj/make-cancellable-promise?sponsor=1"
-      }
-    },
-    "node_modules/make-event-props": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-2.0.0.tgz",
-      "integrity": "sha512-G/hncXrl4Qt7mauJEXSg3AcdYzmpkIITTNl5I+rH9sog5Yw0kK6vseJjCaPfOXqOqQuPUP89Rkhfz5kPS8ijtw==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/wojtekmaj/make-event-props?sponsor=1"
-      }
-    },
     "node_modules/map-stream": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
@@ -27829,23 +27811,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/merge-refs": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-2.0.0.tgz",
-      "integrity": "sha512-3+B21mYK2IqUWnd2EivABLT7ueDhb0b8/dGK8LoFQPrU61YITeCMn14F7y7qZafWNZhUEKb24cJdiT5Wxs3prg==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/wojtekmaj/merge-refs?sponsor=1"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -31875,44 +31840,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/react-pdf": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-10.3.0.tgz",
-      "integrity": "sha512-2LQzC9IgNVAX8gM+6F+1t/70a9/5RWThYxc+CWAmT2LW/BRmnj+35x1os5j/nR2oldyf8L+hCAMBmVKU8wrYFA==",
-      "license": "MIT",
-      "dependencies": {
-        "clsx": "^2.0.0",
-        "dequal": "^2.0.3",
-        "make-cancellable-promise": "^2.0.0",
-        "make-event-props": "^2.0.0",
-        "merge-refs": "^2.0.0",
-        "pdfjs-dist": "5.4.296",
-        "tiny-invariant": "^1.0.0",
-        "warning": "^4.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/wojtekmaj/react-pdf?sponsor=1"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-pdf/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/react-promise-suspense": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/react-promise-suspense/-/react-promise-suspense-0.3.4.tgz",
@@ -36482,15 +36409,6 @@
         "node": ">=20.0.0"
       }
     },
-    "node_modules/warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -37434,7 +37352,6 @@
         "posthog-js": "^1.297.2",
         "posthog-node": "4.18.0",
         "react": "^18",
-        "react-pdf": "^10.3.0",
         "remeda": "^2.32.0",
         "sharp": "0.34.5",
         "skia-canvas": "^3.0.8",
@@ -37592,7 +37509,6 @@
         "react-day-picker": "^8.10.1",
         "react-dom": "^18",
         "react-hook-form": "^7.66.1",
-        "react-pdf": "^10.3.0",
         "react-rnd": "^10.5.2",
         "remeda": "^2.32.0",
         "tailwind-merge": "^1.14.0",

package.json

@@ -5,7 +5,7 @@
     "apps/*",
     "packages/*"
   ],
-  "version": "2.5.1",
+  "version": "2.6.0",
   "scripts": {
     "postinstall": "patch-package",
     "build": "turbo run build",
@@ -86,7 +86,7 @@
   "dependencies": {
     "@ai-sdk/google-vertex": "3.0.81",
     "@documenso/prisma": "*",
-    "@libpdf/core": "^0.2.2",
+    "@libpdf/core": "^0.2.5",
     "@lingui/conf": "^5.6.0",
     "@lingui/core": "^5.6.0",
     "ai": "^5.0.104",

packages/api/v1/contract.ts

@@ -43,6 +43,9 @@ import {
 
 const c = initContract();
 
+const deprecatedDescription =
+  'This endpoint is deprecated, but will continue to be supported. For more details, see https://docs.documenso.com/developers/public-api.';
+
 export const ApiContractV1 = c.router(
   {
     getDocuments: {
@@ -55,6 +58,8 @@ export const ApiContractV1 = c.router(
         404: ZUnsuccessfulResponseSchema,
       },
       summary: 'Get all documents',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     getDocument: {
@@ -66,6 +71,8 @@ export const ApiContractV1 = c.router(
         404: ZUnsuccessfulResponseSchema,
       },
       summary: 'Get a single document',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     downloadSignedDocument: {
@@ -78,6 +85,8 @@ export const ApiContractV1 = c.router(
         404: ZUnsuccessfulResponseSchema,
       },
       summary: 'Download a signed document when the storage transport is S3',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     createDocument: {
@@ -90,6 +99,8 @@ export const ApiContractV1 = c.router(
         404: ZUnsuccessfulResponseSchema,
       },
       summary: 'Upload a new document and get a presigned URL',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     createTemplate: {
@@ -102,6 +113,8 @@ export const ApiContractV1 = c.router(
         404: ZUnsuccessfulResponseSchema,
       },
       summary: 'Create a new template and get a presigned URL',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     deleteTemplate: {
@@ -114,6 +127,8 @@ export const ApiContractV1 = c.router(
         404: ZUnsuccessfulResponseSchema,
       },
       summary: 'Delete a template',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     getTemplate: {
@@ -125,6 +140,8 @@ export const ApiContractV1 = c.router(
         404: ZUnsuccessfulResponseSchema,
       },
       summary: 'Get a single template',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     getTemplates: {
@@ -137,6 +154,8 @@ export const ApiContractV1 = c.router(
         404: ZUnsuccessfulResponseSchema,
       },
       summary: 'Get all templates',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     createDocumentFromTemplate: {
@@ -150,7 +169,7 @@ export const ApiContractV1 = c.router(
       },
       summary: 'Create a new document from an existing template',
       deprecated: true,
-      description: `This has been deprecated in favour of "/api/v1/templates/:templateId/generate-document". You may face unpredictable behavior using this endpoint as it is no longer maintained.`,
+      description: `${deprecatedDescription} \n\nIf you must use the V1 API, use "/api/v1/templates/:templateId/generate-document" instead.`,
     },
 
     generateDocumentFromTemplate: {
@@ -165,8 +184,8 @@ export const ApiContractV1 = c.router(
         500: ZUnsuccessfulResponseSchema,
       },
       summary: 'Create a new document from an existing template',
-      description:
-        'Create a new document from an existing template. Passing in values for title and meta will override the original values defined in the template. If you do not pass in values for recipients, it will use the values defined in the template.',
+      deprecated: true,
+      description: `${deprecatedDescription} \n\nCreate a new document from an existing template. Passing in values for title and meta will override the original values defined in the template. If you do not pass in values for recipients, it will use the values defined in the template.`,
     },
 
     sendDocument: {
@@ -181,9 +200,8 @@ export const ApiContractV1 = c.router(
         500: ZUnsuccessfulResponseSchema,
       },
       summary: 'Send a document for signing',
-      // I'm aware this should be in the variable itself, which it is, however it's difficult for users to find in our current UI.
-      description:
-        'Notes\n\n`sendEmail` - Whether to send an email to the recipients asking them to action the document. If you disable this, you will need to manually distribute the document to the recipients using the generated signing links. Defaults to true',
+      deprecated: true,
+      description: `${deprecatedDescription} \n\nNotes\n\nsendEmail - Whether to send an email to the recipients asking them to action the document. If you disable this, you will need to manually distribute the document to the recipients using the generated signing links. Defaults to true`,
     },
 
     resendDocument: {
@@ -198,6 +216,8 @@ export const ApiContractV1 = c.router(
         500: ZUnsuccessfulResponseSchema,
       },
       summary: 'Re-send a document for signing',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     deleteDocument: {
@@ -210,6 +230,8 @@ export const ApiContractV1 = c.router(
         404: ZUnsuccessfulResponseSchema,
       },
       summary: 'Delete a document',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     createRecipient: {
@@ -224,6 +246,8 @@ export const ApiContractV1 = c.router(
         500: ZUnsuccessfulResponseSchema,
       },
       summary: 'Create a recipient for a document',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     updateRecipient: {
@@ -238,6 +262,8 @@ export const ApiContractV1 = c.router(
         500: ZUnsuccessfulResponseSchema,
       },
       summary: 'Update a recipient for a document',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     deleteRecipient: {
@@ -252,6 +278,8 @@ export const ApiContractV1 = c.router(
         500: ZUnsuccessfulResponseSchema,
       },
       summary: 'Delete a recipient from a document',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     createField: {
@@ -266,6 +294,8 @@ export const ApiContractV1 = c.router(
         500: ZUnsuccessfulResponseSchema,
       },
       summary: 'Create a field for a document',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     updateField: {
@@ -280,6 +310,8 @@ export const ApiContractV1 = c.router(
         500: ZUnsuccessfulResponseSchema,
       },
       summary: 'Update a field for a document',
+      deprecated: true,
+      description: deprecatedDescription,
     },
 
     deleteField: {
@@ -294,6 +326,8 @@ export const ApiContractV1 = c.router(
         500: ZUnsuccessfulResponseSchema,
       },
       summary: 'Delete a field from a document',
+      deprecated: true,
+      description: deprecatedDescription,
     },
   },
   {

packages/api/v1/openapi.ts

@@ -11,7 +11,8 @@ export const OpenAPIV1 = Object.assign(
       info: {
         title: 'Documenso API',
         version: '1.0.0',
-        description: 'The Documenso API for retrieving, creating, updating and deleting documents.',
+        description:
+          'API V1 is deprecated, but will continue to be supported. For more details, see https://docs.documenso.com/developers/public-api. \n\nThe Documenso API for retrieving, creating, updating and deleting documents.',
       },
       servers: [
         {

packages/app-tests/e2e/api/v2/placeholder-fields-api.spec.ts

@@ -0,0 +1,453 @@
+import { PDF, StandardFonts } from '@libpdf/core';
+import type { APIRequestContext } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+import type { Team, User } from '@prisma/client';
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { createApiToken } from '@documenso/lib/server-only/public-api/create-api-token';
+import { prisma } from '@documenso/prisma';
+import { EnvelopeType, FieldType, RecipientRole } from '@documenso/prisma/client';
+import { seedUser } from '@documenso/prisma/seed/users';
+import type {
+  TCreateEnvelopePayload,
+  TCreateEnvelopeResponse,
+} from '@documenso/trpc/server/envelope-router/create-envelope.types';
+import type { TCreateEnvelopeRecipientsRequest } from '@documenso/trpc/server/envelope-router/envelope-recipients/create-envelope-recipients.types';
+import type { TGetEnvelopeResponse } from '@documenso/trpc/server/envelope-router/get-envelope.types';
+
+const WEBAPP_BASE_URL = NEXT_PUBLIC_WEBAPP_URL();
+const baseUrl = `${WEBAPP_BASE_URL}/api/v2-beta`;
+
+const FIXTURES_DIR = path.join(__dirname, '../../../../assets/fixtures/auto-placement');
+
+test.describe.configure({ mode: 'parallel' });
+
+test.describe('Placeholder-based field creation', () => {
+  let user: User, team: Team, token: string;
+
+  test.beforeEach(async () => {
+    ({ user, team } = await seedUser());
+    ({ token } = await createApiToken({
+      userId: user.id,
+      teamId: team.id,
+      tokenName: 'test',
+      expiresIn: null,
+    }));
+  });
+
+  const createEnvelopeWithPdf = async (
+    request: APIRequestContext,
+    pdfFilename: string,
+  ): Promise<TCreateEnvelopeResponse> => {
+    const pdfPath = path.join(FIXTURES_DIR, pdfFilename);
+    const pdfData = fs.readFileSync(pdfPath);
+
+    const formData = new FormData();
+
+    formData.append(
+      'payload',
+      JSON.stringify({
+        type: EnvelopeType.DOCUMENT,
+        title: 'Placeholder Fields Test',
+      } satisfies TCreateEnvelopePayload),
+    );
+
+    formData.append('files', new File([pdfData], pdfFilename, { type: 'application/pdf' }));
+
+    const res = await request.post(`${baseUrl}/envelope/create`, {
+      headers: { Authorization: `Bearer ${token}` },
+      multipart: formData,
+    });
+
+    expect(res.ok()).toBeTruthy();
+
+    return res.json();
+  };
+
+  const createEnvelopeItemsWithPdf = async (
+    request: APIRequestContext,
+    envelopeId: string,
+    pdfFilename: string,
+  ) => {
+    const pdfPath = path.join(FIXTURES_DIR, pdfFilename);
+    const pdfData = fs.readFileSync(pdfPath);
+
+    const formData = new FormData();
+
+    formData.append('payload', JSON.stringify({ envelopeId }));
+    formData.append('files', new File([pdfData], pdfFilename, { type: 'application/pdf' }));
+
+    const res = await request.post(`${baseUrl}/envelope/item/create-many`, {
+      headers: { Authorization: `Bearer ${token}` },
+      multipart: formData,
+    });
+
+    expect(res.ok()).toBeTruthy();
+
+    return res.json();
+  };
+
+  const addRecipient = async (request: APIRequestContext, envelopeId: string) => {
+    const payload: TCreateEnvelopeRecipientsRequest = {
+      envelopeId,
+      data: [
+        {
+          email: user.email,
+          name: user.name || '',
+          role: RecipientRole.SIGNER,
+          accessAuth: [],
+          actionAuth: [],
+        },
+      ],
+    };
+
+    const res = await request.post(`${baseUrl}/envelope/recipient/create-many`, {
+      headers: { Authorization: `Bearer ${token}` },
+      data: payload,
+    });
+
+    expect(res.ok()).toBeTruthy();
+  };
+
+  const addRecipients = async (
+    request: APIRequestContext,
+    envelopeId: string,
+    recipients: TCreateEnvelopeRecipientsRequest['data'],
+  ) => {
+    const payload: TCreateEnvelopeRecipientsRequest = {
+      envelopeId,
+      data: recipients,
+    };
+
+    const res = await request.post(`${baseUrl}/envelope/recipient/create-many`, {
+      headers: { Authorization: `Bearer ${token}` },
+      data: payload,
+    });
+
+    expect(res.ok()).toBeTruthy();
+  };
+
+  const getEnvelope = async (
+    request: APIRequestContext,
+    envelopeId: string,
+  ): Promise<TGetEnvelopeResponse> => {
+    const res = await request.get(`${baseUrl}/envelope/${envelopeId}`, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+
+    expect(res.ok()).toBeTruthy();
+
+    return res.json();
+  };
+
+  /**
+   * Create a PDF with the same placeholder appearing multiple times at different locations.
+   */
+  const createPdfWithDuplicatePlaceholders = async (): Promise<Buffer> => {
+    const pdf = PDF.create();
+    const page = pdf.addPage({ size: 'letter' });
+
+    // Draw the same placeholder text at three different Y positions.
+    page.drawText('{{initials}}', { x: 50, y: 700, font: StandardFonts.Helvetica, size: 12 });
+    page.drawText('{{initials}}', { x: 50, y: 500, font: StandardFonts.Helvetica, size: 12 });
+    page.drawText('{{initials}}', { x: 50, y: 300, font: StandardFonts.Helvetica, size: 12 });
+
+    const bytes = await pdf.save();
+
+    return Buffer.from(bytes);
+  };
+
+  const createEnvelopeWithPdfBuffer = async (
+    request: APIRequestContext,
+    pdfBuffer: Buffer,
+    filename: string,
+  ): Promise<TCreateEnvelopeResponse> => {
+    const formData = new FormData();
+
+    formData.append(
+      'payload',
+      JSON.stringify({
+        type: EnvelopeType.DOCUMENT,
+        title: 'Placeholder Fields Test',
+      } satisfies TCreateEnvelopePayload),
+    );
+
+    formData.append('files', new File([pdfBuffer], filename, { type: 'application/pdf' }));
+
+    const res = await request.post(`${baseUrl}/envelope/create`, {
+      headers: { Authorization: `Bearer ${token}` },
+      multipart: formData,
+    });
+
+    expect(res.ok()).toBeTruthy();
+
+    return res.json();
+  };
+
+  test('should create a field at a placeholder location', async ({ request }) => {
+    const envelope = await createEnvelopeWithPdf(request, 'no-recipient-placeholders.pdf');
+    await addRecipient(request, envelope.id);
+
+    const envelopeData = await getEnvelope(request, envelope.id);
+    const recipientId = envelopeData.recipients[0].id;
+
+    const createFieldsRes = await request.post(`${baseUrl}/envelope/field/create-many`, {
+      headers: { Authorization: `Bearer ${token}` },
+      data: {
+        envelopeId: envelope.id,
+        data: [
+          {
+            recipientId,
+            type: FieldType.SIGNATURE,
+            placeholder: '{{signature}}',
+          },
+        ],
+      },
+    });
+
+    expect(createFieldsRes.ok()).toBeTruthy();
+
+    const fields = await prisma.field.findMany({
+      where: { envelopeId: envelope.id },
+    });
+
+    expect(fields).toHaveLength(1);
+    expect(fields[0].type).toBe(FieldType.SIGNATURE);
+
+    // Verify the field has non-zero position/dimensions resolved from the placeholder.
+    expect(fields[0].positionX.toNumber()).toBeGreaterThan(0);
+    expect(fields[0].positionY.toNumber()).toBeGreaterThan(0);
+    expect(fields[0].width.toNumber()).toBeGreaterThan(0);
+    expect(fields[0].height.toNumber()).toBeGreaterThan(0);
+  });
+
+  test('should override width and height when provided', async ({ request }) => {
+    const envelope = await createEnvelopeWithPdf(request, 'no-recipient-placeholders.pdf');
+    await addRecipient(request, envelope.id);
+
+    const envelopeData = await getEnvelope(request, envelope.id);
+    const recipientId = envelopeData.recipients[0].id;
+
+    const createFieldsRes = await request.post(`${baseUrl}/envelope/field/create-many`, {
+      headers: { Authorization: `Bearer ${token}` },
+      data: {
+        envelopeId: envelope.id,
+        data: [
+          {
+            recipientId,
+            type: FieldType.NAME,
+            placeholder: '{{name}}',
+            width: 30,
+            height: 5,
+          },
+        ],
+      },
+    });
+
+    expect(createFieldsRes.ok()).toBeTruthy();
+
+    const fields = await prisma.field.findMany({
+      where: { envelopeId: envelope.id },
+    });
+
+    expect(fields).toHaveLength(1);
+    expect(fields[0].width.toNumber()).toBeCloseTo(30, 1);
+    expect(fields[0].height.toNumber()).toBeCloseTo(5, 1);
+  });
+
+  test('should fail when placeholder text is not found in the PDF', async ({ request }) => {
+    const envelope = await createEnvelopeWithPdf(request, 'no-recipient-placeholders.pdf');
+    await addRecipient(request, envelope.id);
+
+    const envelopeData = await getEnvelope(request, envelope.id);
+    const recipientId = envelopeData.recipients[0].id;
+
+    const createFieldsRes = await request.post(`${baseUrl}/envelope/field/create-many`, {
+      headers: { Authorization: `Bearer ${token}` },
+      data: {
+        envelopeId: envelope.id,
+        data: [
+          {
+            recipientId,
+            type: FieldType.TEXT,
+            placeholder: '{{nonexistent}}',
+          },
+        ],
+      },
+    });
+
+    expect(createFieldsRes.ok()).toBeFalsy();
+  });
+
+  test('should create fields using a mix of coordinate and placeholder positioning', async ({
+    request,
+  }) => {
+    const envelope = await createEnvelopeWithPdf(request, 'no-recipient-placeholders.pdf');
+    await addRecipient(request, envelope.id);
+
+    const envelopeData = await getEnvelope(request, envelope.id);
+    const recipientId = envelopeData.recipients[0].id;
+
+    const createFieldsRes = await request.post(`${baseUrl}/envelope/field/create-many`, {
+      headers: { Authorization: `Bearer ${token}` },
+      data: {
+        envelopeId: envelope.id,
+        data: [
+          {
+            recipientId,
+            type: FieldType.SIGNATURE,
+            placeholder: '{{signature}}',
+          },
+          {
+            recipientId,
+            type: FieldType.DATE,
+            page: 1,
+            positionX: 10,
+            positionY: 20,
+            width: 15,
+            height: 3,
+          },
+        ],
+      },
+    });
+
+    expect(createFieldsRes.ok()).toBeTruthy();
+
+    const fields = await prisma.field.findMany({
+      where: { envelopeId: envelope.id },
+      orderBy: { type: 'asc' },
+    });
+
+    expect(fields).toHaveLength(2);
+
+    const dateField = fields.find((f) => f.type === FieldType.DATE);
+    const signatureField = fields.find((f) => f.type === FieldType.SIGNATURE);
+
+    expect(dateField).toBeDefined();
+    expect(dateField!.positionX.toNumber()).toBeCloseTo(10, 1);
+    expect(dateField!.positionY.toNumber()).toBeCloseTo(20, 1);
+
+    expect(signatureField).toBeDefined();
+    expect(signatureField!.positionX.toNumber()).toBeGreaterThan(0);
+  });
+
+  test('should create a field only at first occurrence by default', async ({ request }) => {
+    const pdfBuffer = await createPdfWithDuplicatePlaceholders();
+    const envelope = await createEnvelopeWithPdfBuffer(request, pdfBuffer, 'duplicates.pdf');
+    await addRecipient(request, envelope.id);
+
+    const envelopeData = await getEnvelope(request, envelope.id);
+    const recipientId = envelopeData.recipients[0].id;
+
+    const createFieldsRes = await request.post(`${baseUrl}/envelope/field/create-many`, {
+      headers: { Authorization: `Bearer ${token}` },
+      data: {
+        envelopeId: envelope.id,
+        data: [
+          {
+            recipientId,
+            type: FieldType.INITIALS,
+            placeholder: '{{initials}}',
+          },
+        ],
+      },
+    });
+
+    expect(createFieldsRes.ok()).toBeTruthy();
+
+    const fields = await prisma.field.findMany({
+      where: { envelopeId: envelope.id },
+    });
+
+    // Should only create one field (first occurrence).
+    expect(fields).toHaveLength(1);
+    expect(fields[0].type).toBe(FieldType.INITIALS);
+  });
+
+  test('should create fields at all occurrences when matchAll is true', async ({ request }) => {
+    const pdfBuffer = await createPdfWithDuplicatePlaceholders();
+    const envelope = await createEnvelopeWithPdfBuffer(request, pdfBuffer, 'duplicates.pdf');
+    await addRecipient(request, envelope.id);
+
+    const envelopeData = await getEnvelope(request, envelope.id);
+    const recipientId = envelopeData.recipients[0].id;
+
+    const createFieldsRes = await request.post(`${baseUrl}/envelope/field/create-many`, {
+      headers: { Authorization: `Bearer ${token}` },
+      data: {
+        envelopeId: envelope.id,
+        data: [
+          {
+            recipientId,
+            type: FieldType.INITIALS,
+            placeholder: '{{initials}}',
+            matchAll: true,
+          },
+        ],
+      },
+    });
+
+    expect(createFieldsRes.ok()).toBeTruthy();
+
+    const fields = await prisma.field.findMany({
+      where: { envelopeId: envelope.id },
+      orderBy: { positionY: 'asc' },
+    });
+
+    // Should create three fields (one for each occurrence).
+    expect(fields).toHaveLength(3);
+
+    // All should be INITIALS type.
+    expect(fields.every((f) => f.type === FieldType.INITIALS)).toBe(true);
+
+    // Verify they're at different Y positions.
+    const yPositions = fields.map((f) => f.positionY.toNumber());
+    const uniqueYPositions = new Set(yPositions);
+
+    expect(uniqueYPositions.size).toBe(3);
+  });
+
+  test('should map placeholder recipients by signing order when adding items', async ({
+    request,
+  }) => {
+    const envelope = await createEnvelopeWithPdf(request, 'no-recipient-placeholders.pdf');
+
+    await addRecipients(request, envelope.id, [
+      {
+        email: 'second.recipient@documenso.com',
+        name: 'Second Recipient',
+        role: RecipientRole.SIGNER,
+        signingOrder: 2,
+        accessAuth: [],
+        actionAuth: [],
+      },
+      {
+        email: 'first.recipient@documenso.com',
+        name: 'First Recipient',
+        role: RecipientRole.SIGNER,
+        signingOrder: 1,
+        accessAuth: [],
+        actionAuth: [],
+      },
+    ]);
+
+    await createEnvelopeItemsWithPdf(request, envelope.id, 'project-proposal-single-recipient.pdf');
+
+    const recipients = await prisma.recipient.findMany({
+      where: { envelopeId: envelope.id },
+    });
+
+    const firstRecipient = recipients.find((recipient) => recipient.signingOrder === 1);
+
+    expect(firstRecipient).toBeDefined();
+
+    const fields = await prisma.field.findMany({
+      where: { envelopeId: envelope.id },
+    });
+
+    expect(fields.length).toBeGreaterThan(0);
+    expect(fields.every((field) => field.recipientId === firstRecipient!.id)).toBe(true);
+  });
+});

packages/app-tests/e2e/api/v2/test-unauthorized-api-access.spec.ts

@@ -4730,252 +4730,6 @@ test.describe('Document API V2', () => {
       });
     });
 
-    test.describe('Envelope item delete endpoint', () => {
-      test('should block unauthorized access to envelope item delete endpoint', async ({
-        request,
-      }) => {
-        const doc = await seedBlankDocument(userA, teamA.id);
-
-        const envelopeItem = await prisma.envelopeItem.findFirstOrThrow({
-          where: { envelopeId: doc.id },
-        });
-
-        const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/item/delete`, {
-          headers: { Authorization: `Bearer ${tokenB}` },
-          data: {
-            envelopeId: doc.id,
-            envelopeItemId: envelopeItem.id,
-          },
-        });
-
-        expect(res.ok()).toBeFalsy();
-        expect(res.status()).toBe(404);
-      });
-
-      test('should allow authorized access to envelope item delete endpoint', async ({
-        request,
-      }) => {
-        const doc = await seedBlankDocument(userA, teamA.id);
-
-        const envelopeItem = await prisma.envelopeItem.findFirstOrThrow({
-          where: { envelopeId: doc.id },
-        });
-
-        const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/item/delete`, {
-          headers: { Authorization: `Bearer ${tokenA}` },
-          data: {
-            envelopeId: doc.id,
-            envelopeItemId: envelopeItem.id,
-          },
-        });
-
-        expect(res.ok()).toBeTruthy();
-        expect(res.status()).toBe(200);
-      });
-    });
-
-    test.describe('Envelope attachment find endpoint', () => {
-      test('should block unauthorized access to envelope attachment find endpoint', async ({
-        request,
-      }) => {
-        const doc = await seedBlankDocument(userA, teamA.id);
-
-        const res = await request.get(
-          `${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment?envelopeId=${doc.id}`,
-          {
-            headers: { Authorization: `Bearer ${tokenB}` },
-          },
-        );
-
-        expect(res.ok()).toBeFalsy();
-        expect(res.status()).toBe(404);
-      });
-
-      test('should allow authorized access to envelope attachment find endpoint', async ({
-        request,
-      }) => {
-        const doc = await seedBlankDocument(userA, teamA.id);
-
-        const res = await request.get(
-          `${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment?envelopeId=${doc.id}`,
-          {
-            headers: { Authorization: `Bearer ${tokenA}` },
-          },
-        );
-
-        expect(res.ok()).toBeTruthy();
-        expect(res.status()).toBe(200);
-      });
-    });
-
-    test.describe('Envelope attachment create endpoint', () => {
-      test('should block unauthorized access to envelope attachment create endpoint', async ({
-        request,
-      }) => {
-        const doc = await seedBlankDocument(userA, teamA.id);
-
-        const res = await request.post(
-          `${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment/create`,
-          {
-            headers: { Authorization: `Bearer ${tokenB}` },
-            data: {
-              envelopeId: doc.id,
-              data: {
-                label: 'Test Attachment',
-                data: 'https://example.com/file.pdf',
-              },
-            },
-          },
-        );
-
-        expect(res.ok()).toBeFalsy();
-        expect(res.status()).toBe(404);
-      });
-
-      test('should allow authorized access to envelope attachment create endpoint', async ({
-        request,
-      }) => {
-        const doc = await seedBlankDocument(userA, teamA.id);
-
-        const res = await request.post(
-          `${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment/create`,
-          {
-            headers: { Authorization: `Bearer ${tokenA}` },
-            data: {
-              envelopeId: doc.id,
-              data: {
-                label: 'Test Attachment',
-                data: 'https://example.com/file.pdf',
-              },
-            },
-          },
-        );
-
-        expect(res.ok()).toBeTruthy();
-        expect(res.status()).toBe(200);
-      });
-    });
-
-    test.describe('Envelope attachment update endpoint', () => {
-      test('should block unauthorized access to envelope attachment update endpoint', async ({
-        request,
-      }) => {
-        const doc = await seedBlankDocument(userA, teamA.id);
-
-        const attachment = await prisma.envelopeAttachment.create({
-          data: {
-            envelopeId: doc.id,
-            type: 'link',
-            label: 'Original Label',
-            data: 'https://example.com/original.pdf',
-          },
-        });
-
-        const res = await request.post(
-          `${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment/update`,
-          {
-            headers: { Authorization: `Bearer ${tokenB}` },
-            data: {
-              id: attachment.id,
-              data: {
-                label: 'Updated Label',
-                data: 'https://example.com/updated.pdf',
-              },
-            },
-          },
-        );
-
-        expect(res.ok()).toBeFalsy();
-        expect(res.status()).toBe(404);
-      });
-
-      test('should allow authorized access to envelope attachment update endpoint', async ({
-        request,
-      }) => {
-        const doc = await seedBlankDocument(userA, teamA.id);
-
-        const attachment = await prisma.envelopeAttachment.create({
-          data: {
-            envelopeId: doc.id,
-            type: 'link',
-            label: 'Original Label',
-            data: 'https://example.com/original.pdf',
-          },
-        });
-
-        const res = await request.post(
-          `${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment/update`,
-          {
-            headers: { Authorization: `Bearer ${tokenA}` },
-            data: {
-              id: attachment.id,
-              data: {
-                label: 'Updated Label',
-                data: 'https://example.com/updated.pdf',
-              },
-            },
-          },
-        );
-
-        expect(res.ok()).toBeTruthy();
-        expect(res.status()).toBe(200);
-      });
-    });
-
-    test.describe('Envelope attachment delete endpoint', () => {
-      test('should block unauthorized access to envelope attachment delete endpoint', async ({
-        request,
-      }) => {
-        const doc = await seedBlankDocument(userA, teamA.id);
-
-        const attachment = await prisma.envelopeAttachment.create({
-          data: {
-            envelopeId: doc.id,
-            type: 'link',
-            label: 'Test Attachment',
-            data: 'https://example.com/file.pdf',
-          },
-        });
-
-        const res = await request.post(
-          `${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment/delete`,
-          {
-            headers: { Authorization: `Bearer ${tokenB}` },
-            data: { id: attachment.id },
-          },
-        );
-
-        expect(res.ok()).toBeFalsy();
-        expect(res.status()).toBe(404);
-      });
-
-      test('should allow authorized access to envelope attachment delete endpoint', async ({
-        request,
-      }) => {
-        const doc = await seedBlankDocument(userA, teamA.id);
-
-        const attachment = await prisma.envelopeAttachment.create({
-          data: {
-            envelopeId: doc.id,
-            type: 'link',
-            label: 'Test Attachment',
-            data: 'https://example.com/file.pdf',
-          },
-        });
-
-        const res = await request.post(
-          `${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment/delete`,
-          {
-            headers: { Authorization: `Bearer ${tokenA}` },
-            data: { id: attachment.id },
-          },
-        );
-
-        expect(res.ok()).toBeTruthy();
-        expect(res.status()).toBe(200);
-      });
-    });
-
     test.describe('Envelope audit logs endpoint', () => {
       test('should block unauthorized access to envelope audit logs endpoint', async ({
         request,

packages/app-tests/e2e/api/v2/unauthorized-api-access/api-access-envelope-attachments.spec.ts

@@ -0,0 +1,220 @@
+import { expect, test } from '@playwright/test';
+import type { Team, User } from '@prisma/client';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { createApiToken } from '@documenso/lib/server-only/public-api/create-api-token';
+import { prisma } from '@documenso/prisma';
+import { seedBlankDocument } from '@documenso/prisma/seed/documents';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+const WEBAPP_BASE_URL = NEXT_PUBLIC_WEBAPP_URL();
+
+test.describe.configure({
+  mode: 'parallel',
+});
+
+test.describe('Envelope Attachments API V2', () => {
+  let userA: User, teamA: Team, userB: User, teamB: Team, tokenA: string, tokenB: string;
+
+  test.beforeEach(async () => {
+    ({ user: userA, team: teamA } = await seedUser());
+    ({ token: tokenA } = await createApiToken({
+      userId: userA.id,
+      teamId: teamA.id,
+      tokenName: 'userA',
+      expiresIn: null,
+    }));
+
+    ({ user: userB, team: teamB } = await seedUser());
+    ({ token: tokenB } = await createApiToken({
+      userId: userB.id,
+      teamId: teamB.id,
+      tokenName: 'userB',
+      expiresIn: null,
+    }));
+  });
+
+  test.describe('Envelope attachment find endpoint', () => {
+    test('should block unauthorized access to envelope attachment find endpoint', async ({
+      request,
+    }) => {
+      const doc = await seedBlankDocument(userA, teamA.id);
+
+      const res = await request.get(
+        `${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment?envelopeId=${doc.id}`,
+        {
+          headers: { Authorization: `Bearer ${tokenB}` },
+        },
+      );
+
+      expect(res.ok()).toBeFalsy();
+      expect(res.status()).toBe(404);
+    });
+
+    test('should allow authorized access to envelope attachment find endpoint', async ({
+      request,
+    }) => {
+      const doc = await seedBlankDocument(userA, teamA.id);
+
+      const res = await request.get(
+        `${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment?envelopeId=${doc.id}`,
+        {
+          headers: { Authorization: `Bearer ${tokenA}` },
+        },
+      );
+
+      expect(res.ok()).toBeTruthy();
+      expect(res.status()).toBe(200);
+    });
+  });
+
+  test.describe('Envelope attachment create endpoint', () => {
+    test('should block unauthorized access to envelope attachment create endpoint', async ({
+      request,
+    }) => {
+      const doc = await seedBlankDocument(userA, teamA.id);
+
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment/create`, {
+        headers: { Authorization: `Bearer ${tokenB}` },
+        data: {
+          envelopeId: doc.id,
+          data: {
+            label: 'Test Attachment',
+            data: 'https://example.com/file.pdf',
+          },
+        },
+      });
+
+      expect(res.ok()).toBeFalsy();
+      expect(res.status()).toBe(404);
+    });
+
+    test('should allow authorized access to envelope attachment create endpoint', async ({
+      request,
+    }) => {
+      const doc = await seedBlankDocument(userA, teamA.id);
+
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment/create`, {
+        headers: { Authorization: `Bearer ${tokenA}` },
+        data: {
+          envelopeId: doc.id,
+          data: {
+            label: 'Test Attachment',
+            data: 'https://example.com/file.pdf',
+          },
+        },
+      });
+
+      expect(res.ok()).toBeTruthy();
+      expect(res.status()).toBe(200);
+    });
+  });
+
+  test.describe('Envelope attachment update endpoint', () => {
+    test('should block unauthorized access to envelope attachment update endpoint', async ({
+      request,
+    }) => {
+      const doc = await seedBlankDocument(userA, teamA.id);
+
+      const attachment = await prisma.envelopeAttachment.create({
+        data: {
+          envelopeId: doc.id,
+          type: 'link',
+          label: 'Original Label',
+          data: 'https://example.com/original.pdf',
+        },
+      });
+
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment/update`, {
+        headers: { Authorization: `Bearer ${tokenB}` },
+        data: {
+          id: attachment.id,
+          data: {
+            label: 'Updated Label',
+            data: 'https://example.com/updated.pdf',
+          },
+        },
+      });
+
+      expect(res.ok()).toBeFalsy();
+      expect(res.status()).toBe(404);
+    });
+
+    test('should allow authorized access to envelope attachment update endpoint', async ({
+      request,
+    }) => {
+      const doc = await seedBlankDocument(userA, teamA.id);
+
+      const attachment = await prisma.envelopeAttachment.create({
+        data: {
+          envelopeId: doc.id,
+          type: 'link',
+          label: 'Original Label',
+          data: 'https://example.com/original.pdf',
+        },
+      });
+
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment/update`, {
+        headers: { Authorization: `Bearer ${tokenA}` },
+        data: {
+          id: attachment.id,
+          data: {
+            label: 'Updated Label',
+            data: 'https://example.com/updated.pdf',
+          },
+        },
+      });
+
+      expect(res.ok()).toBeTruthy();
+      expect(res.status()).toBe(200);
+    });
+  });
+
+  test.describe('Envelope attachment delete endpoint', () => {
+    test('should block unauthorized access to envelope attachment delete endpoint', async ({
+      request,
+    }) => {
+      const doc = await seedBlankDocument(userA, teamA.id);
+
+      const attachment = await prisma.envelopeAttachment.create({
+        data: {
+          envelopeId: doc.id,
+          type: 'link',
+          label: 'Test Attachment',
+          data: 'https://example.com/file.pdf',
+        },
+      });
+
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment/delete`, {
+        headers: { Authorization: `Bearer ${tokenB}` },
+        data: { id: attachment.id },
+      });
+
+      expect(res.ok()).toBeFalsy();
+      expect(res.status()).toBe(404);
+    });
+
+    test('should allow authorized access to envelope attachment delete endpoint', async ({
+      request,
+    }) => {
+      const doc = await seedBlankDocument(userA, teamA.id);
+
+      const attachment = await prisma.envelopeAttachment.create({
+        data: {
+          envelopeId: doc.id,
+          type: 'link',
+          label: 'Test Attachment',
+          data: 'https://example.com/file.pdf',
+        },
+      });
+
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/attachment/delete`, {
+        headers: { Authorization: `Bearer ${tokenA}` },
+        data: { id: attachment.id },
+      });
+
+      expect(res.ok()).toBeTruthy();
+      expect(res.status()).toBe(200);
+    });
+  });
+});

packages/app-tests/e2e/api/v2/unauthorized-api-access/api-access-envelope-bulk.spec.ts

@@ -0,0 +1,390 @@
+import { expect, test } from '@playwright/test';
+import type { Team, User } from '@prisma/client';
+import { EnvelopeType, FolderType } from '@prisma/client';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { createApiToken } from '@documenso/lib/server-only/public-api/create-api-token';
+import { prisma } from '@documenso/prisma';
+import { seedBlankDocument } from '@documenso/prisma/seed/documents';
+import { seedBlankFolder } from '@documenso/prisma/seed/folders';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+const WEBAPP_BASE_URL = NEXT_PUBLIC_WEBAPP_URL();
+
+test.describe.configure({
+  mode: 'parallel',
+});
+
+// Todo: Remove skip once the API endpoints are released.
+test.describe.skip('Envelope Bulk API V2', () => {
+  let userA: User, teamA: Team, userB: User, teamB: Team, tokenA: string, tokenB: string;
+
+  test.beforeEach(async () => {
+    ({ user: userA, team: teamA } = await seedUser());
+    ({ token: tokenA } = await createApiToken({
+      userId: userA.id,
+      teamId: teamA.id,
+      tokenName: 'userA',
+      expiresIn: null,
+    }));
+
+    ({ user: userB, team: teamB } = await seedUser());
+    ({ token: tokenB } = await createApiToken({
+      userId: userB.id,
+      teamId: teamB.id,
+      tokenName: 'userB',
+      expiresIn: null,
+    }));
+  });
+
+  test.describe('Envelope bulk move endpoint', () => {
+    test('should block unauthorized access to envelope bulk move endpoint', async ({ request }) => {
+      // Create a document owned by userA
+      const doc = await seedBlankDocument(userA, teamA.id);
+
+      // UserB tries to move userA's document
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/bulk/move`, {
+        headers: { Authorization: `Bearer ${tokenB}` },
+        data: {
+          envelopeIds: [doc.id],
+          envelopeType: EnvelopeType.DOCUMENT,
+          folderId: null,
+        },
+      });
+
+      expect(res.ok()).toBeTruthy();
+      expect(res.status()).toBe(200);
+
+      const body = await res.json();
+      expect(body.movedCount).toBe(0);
+
+      // Verify in database that the document was not modified
+      const docInDb = await prisma.envelope.findFirst({
+        where: { id: doc.id },
+      });
+
+      expect(docInDb).not.toBeNull();
+      expect(docInDb?.folderId).toBeNull();
+    });
+
+    test('should block moving envelopes to unauthorized folder', async ({ request }) => {
+      // Create a document owned by userB
+      const doc = await seedBlankDocument(userB, teamB.id);
+
+      // Create a folder owned by userA
+      const folderA = await seedBlankFolder(userA, teamA.id, {
+        createFolderOptions: {
+          name: 'UserA Folder',
+          type: FolderType.DOCUMENT,
+        },
+      });
+
+      // UserB tries to move their document to userA's folder
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/bulk/move`, {
+        headers: { Authorization: `Bearer ${tokenB}` },
+        data: {
+          envelopeIds: [doc.id],
+          envelopeType: EnvelopeType.DOCUMENT,
+          folderId: folderA.id,
+        },
+      });
+
+      expect(res.ok()).toBeFalsy();
+      expect(res.status()).toBe(404);
+
+      // Verify in database that the document was not modified
+      const docInDb = await prisma.envelope.findFirst({
+        where: { id: doc.id },
+      });
+
+      expect(docInDb).not.toBeNull();
+      expect(docInDb?.folderId).toBeNull();
+    });
+
+    test('should allow authorized access to envelope bulk move endpoint', async ({ request }) => {
+      // Create a document owned by userA
+      const doc = await seedBlankDocument(userA, teamA.id);
+
+      // Create a folder owned by userA
+      const folderA = await seedBlankFolder(userA, teamA.id, {
+        createFolderOptions: {
+          name: 'UserA Folder',
+          type: FolderType.DOCUMENT,
+        },
+      });
+
+      // UserA moves their own document to their own folder
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/bulk/move`, {
+        headers: { Authorization: `Bearer ${tokenA}` },
+        data: {
+          envelopeIds: [doc.id],
+          envelopeType: EnvelopeType.DOCUMENT,
+          folderId: folderA.id,
+        },
+      });
+
+      expect(res.ok()).toBeTruthy();
+      expect(res.status()).toBe(200);
+
+      const body = await res.json();
+      expect(body.movedCount).toBe(1);
+
+      // Verify in database that the document was moved to the folder
+      const docInDb = await prisma.envelope.findFirst({
+        where: { id: doc.id },
+      });
+
+      expect(docInDb).not.toBeNull();
+      expect(docInDb?.folderId).toBe(folderA.id);
+    });
+
+    test('should only move authorized envelopes when given mixed array of envelope IDs', async ({
+      request,
+    }) => {
+      // Create documents owned by userA
+      const docA1 = await seedBlankDocument(userA, teamA.id);
+      const docA2 = await seedBlankDocument(userA, teamA.id);
+
+      // Create a document owned by userB
+      const docB = await seedBlankDocument(userB, teamB.id);
+
+      // Create a folder owned by userA
+      const folderA = await seedBlankFolder(userA, teamA.id, {
+        createFolderOptions: {
+          name: 'UserA Folder',
+          type: FolderType.DOCUMENT,
+        },
+      });
+
+      // UserA tries to move a mix of their own documents and userB's document
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/bulk/move`, {
+        headers: { Authorization: `Bearer ${tokenA}` },
+        data: {
+          envelopeIds: [docA1.id, docB.id, docA2.id],
+          envelopeType: EnvelopeType.DOCUMENT,
+          folderId: folderA.id,
+        },
+      });
+
+      expect(res.ok()).toBeTruthy();
+      expect(res.status()).toBe(200);
+
+      const body = await res.json();
+      // Only userA's documents should be moved
+      expect(body.movedCount).toBe(2);
+
+      // Verify userA's documents were moved
+      const docA1InDb = await prisma.envelope.findFirst({
+        where: { id: docA1.id },
+      });
+      expect(docA1InDb).not.toBeNull();
+      expect(docA1InDb?.folderId).toBe(folderA.id);
+
+      const docA2InDb = await prisma.envelope.findFirst({
+        where: { id: docA2.id },
+      });
+      expect(docA2InDb).not.toBeNull();
+      expect(docA2InDb?.folderId).toBe(folderA.id);
+
+      // Verify userB's document was NOT moved
+      const docBInDb = await prisma.envelope.findFirst({
+        where: { id: docB.id },
+      });
+      expect(docBInDb).not.toBeNull();
+      expect(docBInDb?.folderId).toBeNull();
+    });
+
+    test('should move zero envelopes when all envelope IDs in array are unauthorized', async ({
+      request,
+    }) => {
+      // Create documents owned by userB
+      const docB1 = await seedBlankDocument(userB, teamB.id);
+      const docB2 = await seedBlankDocument(userB, teamB.id);
+
+      // Create a folder owned by userA
+      const folderA = await seedBlankFolder(userA, teamA.id, {
+        createFolderOptions: {
+          name: 'UserA Folder',
+          type: FolderType.DOCUMENT,
+        },
+      });
+
+      // UserA tries to move userB's documents
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/bulk/move`, {
+        headers: { Authorization: `Bearer ${tokenA}` },
+        data: {
+          envelopeIds: [docB1.id, docB2.id],
+          envelopeType: EnvelopeType.DOCUMENT,
+          folderId: folderA.id,
+        },
+      });
+
+      expect(res.ok()).toBeTruthy();
+      expect(res.status()).toBe(200);
+
+      const body = await res.json();
+      expect(body.movedCount).toBe(0);
+
+      // Verify userB's documents were NOT moved
+      const docB1InDb = await prisma.envelope.findFirst({
+        where: { id: docB1.id },
+      });
+      expect(docB1InDb).not.toBeNull();
+      expect(docB1InDb?.folderId).toBeNull();
+
+      const docB2InDb = await prisma.envelope.findFirst({
+        where: { id: docB2.id },
+      });
+      expect(docB2InDb).not.toBeNull();
+      expect(docB2InDb?.folderId).toBeNull();
+    });
+  });
+
+  test.describe('Envelope bulk delete endpoint', () => {
+    test('should block unauthorized access to envelope bulk delete endpoint', async ({
+      request,
+    }) => {
+      // Create a document owned by userA
+      const doc = await seedBlankDocument(userA, teamA.id);
+
+      // UserB tries to delete userA's document
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/bulk/delete`, {
+        headers: { Authorization: `Bearer ${tokenB}` },
+        data: {
+          envelopeIds: [doc.id],
+        },
+      });
+
+      expect(res.ok()).toBeTruthy();
+      expect(res.status()).toBe(200);
+
+      const body = await res.json();
+      expect(body.deletedCount).toBe(0);
+      // Unauthorized envelope ID should be in failedIds
+      expect(body.failedIds).toEqual([doc.id]);
+
+      // Verify in database that the document still exists
+      const docInDb = await prisma.envelope.findFirst({
+        where: { id: doc.id },
+      });
+
+      expect(docInDb).not.toBeNull();
+      expect(docInDb?.id).toBe(doc.id);
+      expect(docInDb?.deletedAt).toBeNull();
+    });
+
+    test('should allow authorized access to envelope bulk delete endpoint', async ({ request }) => {
+      // Create a document owned by userA
+      const doc = await seedBlankDocument(userA, teamA.id);
+
+      // UserA deletes their own document
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/bulk/delete`, {
+        headers: { Authorization: `Bearer ${tokenA}` },
+        data: {
+          envelopeIds: [doc.id],
+        },
+      });
+
+      expect(res.ok()).toBeTruthy();
+      expect(res.status()).toBe(200);
+
+      const body = await res.json();
+      expect(body.deletedCount).toBe(1);
+      expect(body.failedIds).toEqual([]);
+
+      // Verify in database that the document no longer exists
+      const docInDb = await prisma.envelope.findFirst({
+        where: { id: doc.id },
+      });
+
+      expect(docInDb).toBeNull();
+    });
+
+    test('should only delete authorized envelopes when given mixed array of envelope IDs', async ({
+      request,
+    }) => {
+      // Create documents owned by userA
+      const docA1 = await seedBlankDocument(userA, teamA.id);
+      const docA2 = await seedBlankDocument(userA, teamA.id);
+
+      // Create a document owned by userB
+      const docB = await seedBlankDocument(userB, teamB.id);
+
+      // UserA tries to delete a mix of their own documents and userB's document
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/bulk/delete`, {
+        headers: { Authorization: `Bearer ${tokenA}` },
+        data: {
+          envelopeIds: [docA1.id, docB.id, docA2.id],
+        },
+      });
+
+      expect(res.ok()).toBeTruthy();
+      expect(res.status()).toBe(200);
+
+      const body = await res.json();
+      // Only userA's documents should be deleted
+      expect(body.deletedCount).toBe(2);
+      // Unauthorized envelope ID (docB) should be in failedIds
+      expect(body.failedIds).toEqual([docB.id]);
+
+      // Verify userA's documents were deleted
+      const docA1InDb = await prisma.envelope.findFirst({
+        where: { id: docA1.id },
+      });
+      expect(docA1InDb).toBeNull();
+
+      const docA2InDb = await prisma.envelope.findFirst({
+        where: { id: docA2.id },
+      });
+      expect(docA2InDb).toBeNull();
+
+      // Verify userB's document was NOT deleted
+      const docBInDb = await prisma.envelope.findFirst({
+        where: { id: docB.id },
+      });
+      expect(docBInDb).not.toBeNull();
+      expect(docBInDb?.id).toBe(docB.id);
+      expect(docBInDb?.deletedAt).toBeNull();
+    });
+
+    test('should delete zero envelopes when all envelope IDs in array are unauthorized', async ({
+      request,
+    }) => {
+      // Create documents owned by userB
+      const docB1 = await seedBlankDocument(userB, teamB.id);
+      const docB2 = await seedBlankDocument(userB, teamB.id);
+
+      // UserA tries to delete userB's documents
+      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/bulk/delete`, {
+        headers: { Authorization: `Bearer ${tokenA}` },
+        data: {
+          envelopeIds: [docB1.id, docB2.id],
+        },
+      });
+
+      expect(res.ok()).toBeTruthy();
+      expect(res.status()).toBe(200);
+
+      const body = await res.json();
+      expect(body.deletedCount).toBe(0);
+      // All unauthorized envelope IDs should be in failedIds
+      expect(body.failedIds).toEqual(expect.arrayContaining([docB1.id, docB2.id]));
+      expect(body.failedIds).toHaveLength(2);
+
+      // Verify userB's documents were NOT deleted
+      const docB1InDb = await prisma.envelope.findFirst({
+        where: { id: docB1.id },
+      });
+      expect(docB1InDb).not.toBeNull();
+      expect(docB1InDb?.id).toBe(docB1.id);
+      expect(docB1InDb?.deletedAt).toBeNull();
+
+      const docB2InDb = await prisma.envelope.findFirst({
+        where: { id: docB2.id },
+      });
+      expect(docB2InDb).not.toBeNull();
+      expect(docB2InDb?.id).toBe(docB2.id);
+      expect(docB2InDb?.deletedAt).toBeNull();
+    });
+  });
+});

packages/app-tests/e2e/auto-placing-fields/auto-place-fields-document.spec.ts

@@ -0,0 +1,307 @@
+import { type Page, expect, test } from '@playwright/test';
+import path from 'path';
+
+import { prisma } from '@documenso/prisma';
+import { RecipientRole } from '@documenso/prisma/client';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../fixtures/authentication';
+
+const FIXTURES_DIR = path.join(__dirname, '../../../assets/fixtures/auto-placement');
+
+const SINGLE_PLACEHOLDER_PDF_PATH = path.join(
+  FIXTURES_DIR,
+  'project-proposal-single-recipient.pdf',
+);
+
+const MULTIPLE_PLACEHOLDER_PDF_PATH = path.join(
+  FIXTURES_DIR,
+  'project-proposal-multiple-fields-and-recipients.pdf',
+);
+
+const NO_RECIPIENT_PDF_PATH = path.join(FIXTURES_DIR, 'no-recipient-placeholders.pdf');
+
+const INVALID_FIELD_TYPE_PDF_PATH = path.join(FIXTURES_DIR, 'invalid-field-type.pdf');
+
+const FIELD_TYPE_ONLY_PDF_PATH = path.join(FIXTURES_DIR, 'field-type-only.pdf');
+
+const setTeamDefaultRecipients = async (
+  teamId: number,
+  defaultRecipients: Array<{ email: string; name: string; role: RecipientRole }>,
+) => {
+  const teamSettings = await prisma.teamGlobalSettings.findFirstOrThrow({
+    where: {
+      team: {
+        id: teamId,
+      },
+    },
+  });
+
+  await prisma.teamGlobalSettings.update({
+    where: {
+      id: teamSettings.id,
+    },
+    data: {
+      defaultRecipients,
+    },
+  });
+};
+
+const setupUserAndSignIn = async (page: Page) => {
+  const { user, team } = await seedUser();
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: `/t/${team.url}/documents`,
+  });
+
+  return { user, team };
+};
+
+const uploadPdf = async (page: Page, team: { url: string }, pdfPath: string) => {
+  const [fileChooser] = await Promise.all([
+    page.waitForEvent('filechooser'),
+    page
+      .locator('input[type=file]')
+      .nth(1)
+      .evaluate((e) => {
+        if (e instanceof HTMLInputElement) {
+          e.click();
+        }
+      }),
+  ]);
+
+  await fileChooser.setFiles(pdfPath);
+
+  // Wait for redirect to v2 envelope editor.
+  await page.waitForURL(new RegExp(`/t/${team.url}/documents/envelope_.*`));
+
+  // Extract envelope ID from URL.
+  const urlParts = page.url().split('/');
+  const envelopeId = urlParts.find((part) => part.startsWith('envelope_'));
+
+  if (!envelopeId) {
+    throw new Error('Could not extract envelope ID from URL');
+  }
+
+  return envelopeId;
+};
+
+test.describe('PDF Placeholders with single recipient', () => {
+  test('[AUTO_PLACING_FIELDS]: should create placeholder recipients even with default recipients', async ({
+    page,
+  }) => {
+    const { user, team } = await seedUser();
+
+    await setTeamDefaultRecipients(team.id, [
+      {
+        email: user.email,
+        name: user.name || user.email,
+        role: RecipientRole.CC,
+      },
+    ]);
+
+    await apiSignin({
+      page,
+      email: user.email,
+      redirectPath: `/t/${team.url}/documents`,
+    });
+
+    const envelopeId = await uploadPdf(page, team, SINGLE_PLACEHOLDER_PDF_PATH);
+
+    await expect(async () => {
+      const recipients = await prisma.recipient.findMany({
+        where: { envelopeId },
+      });
+
+      const placeholderRecipient = recipients.find(
+        (recipient) => recipient.email === 'recipient.1@documenso.com',
+      );
+
+      const defaultRecipient = recipients.find((recipient) => recipient.email === user.email);
+
+      expect(placeholderRecipient).toBeDefined();
+      expect(defaultRecipient).toBeDefined();
+
+      const fields = await prisma.field.findMany({
+        where: { envelopeId },
+      });
+
+      expect(fields.length).toBeGreaterThan(0);
+      expect(fields.every((field) => field.recipientId === placeholderRecipient!.id)).toBe(true);
+    }).toPass();
+  });
+
+  test('[AUTO_PLACING_FIELDS]: should automatically create recipients from PDF placeholders', async ({
+    page,
+  }) => {
+    const { team } = await setupUserAndSignIn(page);
+    await uploadPdf(page, team, SINGLE_PLACEHOLDER_PDF_PATH);
+
+    // V2 editor shows recipients on the upload page under "Recipients" heading.
+    await expect(page.getByRole('heading', { name: 'Recipients' })).toBeVisible();
+    await expect(page.getByTestId('signer-email-input').first()).toHaveValue(
+      'recipient.1@documenso.com',
+    );
+    await expect(page.getByLabel('Name').first()).toHaveValue('Recipient 1');
+  });
+
+  test('[AUTO_PLACING_FIELDS]: should automatically place fields from PDF placeholders', async ({
+    page,
+  }) => {
+    const { team } = await setupUserAndSignIn(page);
+    const envelopeId = await uploadPdf(page, team, SINGLE_PLACEHOLDER_PDF_PATH);
+
+    // V2 editor renders fields on a Konva canvas, so we verify via the database.
+    await expect(async () => {
+      const fields = await prisma.field.findMany({
+        where: { envelopeId },
+      });
+
+      const fieldTypes = fields.map((f) => f.type).sort();
+      expect(fieldTypes).toEqual(['EMAIL', 'NAME', 'SIGNATURE', 'TEXT'].sort());
+    }).toPass();
+  });
+
+  test('[AUTO_PLACING_FIELDS]: should automatically configure fields from PDF placeholders', async ({
+    page,
+  }) => {
+    const { team } = await setupUserAndSignIn(page);
+    const envelopeId = await uploadPdf(page, team, SINGLE_PLACEHOLDER_PDF_PATH);
+
+    // Verify field metadata was correctly parsed from the placeholder.
+    await expect(async () => {
+      const textField = await prisma.field.findFirst({
+        where: { envelopeId, type: 'TEXT' },
+      });
+
+      expect(textField).toBeDefined();
+      expect(textField!.fieldMeta).toBeDefined();
+
+      const meta = textField!.fieldMeta as Record<string, unknown>;
+      expect(meta.required).toBe(true);
+      expect(meta.textAlign).toBe('right');
+    }).toPass();
+  });
+});
+
+test.describe('PDF Placeholders with multiple recipients', () => {
+  test('[AUTO_PLACING_FIELDS]: should automatically create recipients from PDF placeholders', async ({
+    page,
+  }) => {
+    const { team } = await setupUserAndSignIn(page);
+    const envelopeId = await uploadPdf(page, team, MULTIPLE_PLACEHOLDER_PDF_PATH);
+
+    // V2 editor shows recipients on the upload page.
+    await expect(page.getByRole('heading', { name: 'Recipients' })).toBeVisible();
+
+    await expect(page.getByTestId('signer-email-input').first()).toHaveValue(
+      'recipient.1@documenso.com',
+    );
+
+    await expect(page.getByTestId('signer-email-input').nth(1)).toHaveValue(
+      'recipient.2@documenso.com',
+    );
+
+    await expect(page.getByTestId('signer-email-input').nth(2)).toHaveValue(
+      'recipient.3@documenso.com',
+    );
+
+    // Verify recipients via the database for name validation since the v2 editor
+    // only shows the "Name" label on the first recipient row.
+    await expect(async () => {
+      const recipients = await prisma.recipient.findMany({
+        where: { envelopeId },
+        orderBy: { signingOrder: 'asc' },
+      });
+
+      expect(recipients).toHaveLength(3);
+      expect(recipients[0].name).toBe('Recipient 1');
+      expect(recipients[1].name).toBe('Recipient 2');
+      expect(recipients[2].name).toBe('Recipient 3');
+    }).toPass();
+  });
+
+  test('[AUTO_PLACING_FIELDS]: should automatically create fields from PDF placeholders', async ({
+    page,
+  }) => {
+    const { team } = await setupUserAndSignIn(page);
+    const envelopeId = await uploadPdf(page, team, MULTIPLE_PLACEHOLDER_PDF_PATH);
+
+    // V2 editor renders fields on a Konva canvas, so we verify via the database.
+    await expect(async () => {
+      const fields = await prisma.field.findMany({
+        where: { envelopeId },
+      });
+
+      const fieldTypes = fields.map((f) => f.type).sort();
+      expect(fieldTypes).toEqual(
+        ['SIGNATURE', 'SIGNATURE', 'SIGNATURE', 'EMAIL', 'EMAIL', 'NAME', 'TEXT', 'NUMBER'].sort(),
+      );
+    }).toPass();
+  });
+});
+
+test.describe('PDF Placeholders without recipient identifier', () => {
+  test('[AUTO_PLACING_FIELDS]: should skip placeholders without a recipient identifier', async ({
+    page,
+  }) => {
+    const { team } = await setupUserAndSignIn(page);
+    const envelopeId = await uploadPdf(page, team, NO_RECIPIENT_PDF_PATH);
+
+    // Placeholders like {{signature}}, {{name}}, {{email}} have no recipient
+    // identifier and should be skipped entirely. No fields or auto-created
+    // recipients should exist.
+    await expect(async () => {
+      const fields = await prisma.field.findMany({
+        where: { envelopeId },
+      });
+
+      expect(fields).toHaveLength(0);
+    }).toPass();
+  });
+
+  test('[AUTO_PLACING_FIELDS]: should skip a bare field type placeholder', async ({ page }) => {
+    const { team } = await setupUserAndSignIn(page);
+    const envelopeId = await uploadPdf(page, team, FIELD_TYPE_ONLY_PDF_PATH);
+
+    await expect(async () => {
+      const fields = await prisma.field.findMany({
+        where: { envelopeId },
+      });
+
+      expect(fields).toHaveLength(0);
+    }).toPass();
+  });
+});
+
+test.describe('PDF Placeholders with invalid field types', () => {
+  test('[AUTO_PLACING_FIELDS]: should skip invalid field types and process valid ones', async ({
+    page,
+  }) => {
+    const { team } = await setupUserAndSignIn(page);
+    const envelopeId = await uploadPdf(page, team, INVALID_FIELD_TYPE_PDF_PATH);
+
+    // Only the valid placeholders (signature,r1 and email,r2) should create fields.
+    // The invalid ones (bogus,r1 and foobar,r2) should be skipped.
+    await expect(async () => {
+      const fields = await prisma.field.findMany({
+        where: { envelopeId },
+      });
+
+      const fieldTypes = fields.map((f) => f.type).sort();
+      expect(fieldTypes).toEqual(['EMAIL', 'SIGNATURE'].sort());
+    }).toPass();
+
+    // Both valid recipients should still be created.
+    await expect(async () => {
+      const recipients = await prisma.recipient.findMany({
+        where: { envelopeId },
+        orderBy: { signingOrder: 'asc' },
+      });
+
+      expect(recipients).toHaveLength(2);
+    }).toPass();
+  });
+});