refactor: simplify field dialog component

- Removed unused DialogDescription and FormLabel components for cleaner code.
- Updated DialogTitle to conditionally display field label or a default translation.
- Changed button text from Sign to Enter for better clarity.j

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

@@ -1,161 +0,0 @@
----
-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

.agents/plans/clear-amber-light-validate-signer-fields-on-distribute.md

@@ -1,76 +0,0 @@
----
-date: 2026-01-26
-title: Validate Signer Fields On Distribute
----
-
-## Summary
-
-Validate that signers have at least one signature field before allowing document/envelope distribution via API, matching the existing UI behavior.
-
-## Background
-
-The API originally allowed distributing documents/envelopes without validating that signers had signature fields assigned. This was intentional - we thought API users might have specific flows where this flexibility was needed.
-
-However, after running it this way for a while, we've observed that more often than not, API users inadvertently send documents without fields assigned. This causes confusion for their recipients (who receive a document with nothing to sign) and breaks their own systems expecting a completed signing flow.
-
-## Problem
-
-The API allowed distributing documents/envelopes even when signers had no signature fields assigned. This was inconsistent with the UI which validates this condition before allowing distribution.
-
-## Solution
-
-### 1. Create centralized validation helper
-
-**File**: `packages/lib/utils/recipients.ts`
-
-- Added `RECIPIENT_ROLES_THAT_REQUIRE_FIELDS` constant (currently only `SIGNER`)
-- Added `getRecipientsWithMissingFields()` function that returns recipients missing required fields
-- Uses existing `isSignatureFieldType` guard from `packages/prisma/guards/is-signature-field.ts`
-
-### 2. Add server-side validation
-
-**File**: `packages/lib/server-only/document/send-document.ts`
-
-- Added validation check that throws `AppError` with `INVALID_REQUEST` code when signers are missing signature fields
-- This blocks both v1 and v2 API distribution endpoints since they both use `sendDocument()`
-
-### 3. Fix v1 API error handling
-
-**File**: `packages/api/v1/implementation.ts`
-
-- Changed `sendDocument` endpoint to use `AppError.toRestAPIError(err)` instead of always returning 500
-- Now returns 400 for validation errors
-
-### 4. Update UI to use shared helper
-
-**Files**:
-
-- `apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx`
-- `packages/ui/primitives/document-flow/add-fields.tsx`
-
-### 5. Consolidate `hasSignatureField` checks
-
-Updated to use `isSignatureFieldType` guard (checks both `SIGNATURE` and `FREE_SIGNATURE`):
-
-- `apps/remix/app/components/general/document-signing/document-signing-form.tsx`
-- `apps/remix/app/components/general/envelope-signing/envelope-signer-form.tsx`
-- `apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx`
-- `apps/remix/app/components/embed/embed-direct-template-client-page.tsx`
-- `apps/remix/app/components/embed/embed-document-signing-page-v1.tsx`
-
-### 6. Add E2E tests
-
-**Files**:
-
-- `packages/app-tests/e2e/api/v1/document-sending.spec.ts` - 5 new tests
-- `packages/app-tests/e2e/api/v2/distribute-validation.spec.ts` - 8 new tests
-
-## Test Coverage
-
-- Distribution fails when signer has no fields
-- Distribution fails when signer has only non-signature fields
-- Distribution succeeds with SIGNATURE field
-- Distribution succeeds with FREE_SIGNATURE field (v1 only via Prisma)
-- Distribution succeeds when VIEWER/CC/APPROVER have no fields
-- Distribution fails when one of multiple signers is missing signature field
-- Distribution succeeds when all signers have signature fields

.agents/plans/swift-pink-sky-simplewebauthn-v13-upgrade.md

@@ -1,186 +0,0 @@
----
-date: 2026-01-14
-title: Simplewebauthn V13 Upgrade
----
-
-## Overview
-
-Upgrade SimpleWebAuthn packages from v9.x to v13.x to address the deprecation of `@simplewebauthn/types` and take advantage of new features and improvements.
-
-## Current State
-
-The codebase currently uses:
-- `@simplewebauthn/browser@9.x`
-- `@simplewebauthn/server@9.x`
-- `@simplewebauthn/types@9.x`
-
-## Breaking Changes Summary (v9 → v13)
-
-### v10.0.0 Breaking Changes
-1. **Minimum Node version raised to Node v20**
-2. **`generateRegistrationOptions()` now expects `Base64URLString` for `excludeCredentials` IDs** (no more `type: 'public-key'` needed)
-3. **`generateAuthenticationOptions()` now expects `Base64URLString` for `allowCredentials` IDs**
-4. **`credentialID` returned from verification methods is now `Base64URLString`** instead of `Uint8Array`
-5. **`AuthenticatorDevice.credentialID` is now `Base64URLString`**
-6. **`rpID` is now required when calling `generateAuthenticationOptions()`**
-7. **`generateRegistrationOptions()` will generate random user IDs** if not provided
-8. **`user.id` is treated as base64url string in `startRegistration()`**
-9. **`userHandle` is treated as base64url string in `startAuthentication()`**
-
-### v11.0.0 Breaking Changes
-1. **Positional arguments in `startRegistration()` and `startAuthentication()` replaced by object**
-   - Before: `startRegistration(options)`
-   - After: `startRegistration({ optionsJSON: options })`
-   - Before: `startAuthentication(options)`
-   - After: `startAuthentication({ optionsJSON: options })`
-2. **`AuthenticatorDevice` type renamed to `WebAuthnCredential`**
-   - `credentialID` → `credential.id`
-   - `credentialPublicKey` → `credential.publicKey`
-3. **`verifyRegistrationResponse()` returns `registrationInfo.credential` instead of individual properties**
-   - `credentialID` → `credential.id`
-   - `credentialPublicKey` → `credential.publicKey`
-   - `counter` → `credential.counter`
-   - `transports` are now in `credential.transports`
-4. **`verifyAuthenticationResponse()` uses `credential` argument instead of `authenticator`**
-
-### v13.0.0 Breaking Changes
-1. **`@simplewebauthn/types` package is retired**
-   - Types are now exported from `@simplewebauthn/browser` and `@simplewebauthn/server`
-   - Import types from `@simplewebauthn/server` instead
-
-## Files to Update
-
-### Package Changes
-1. Remove `@simplewebauthn/types` dependency
-2. Update `@simplewebauthn/browser` to `^13.2.2`
-3. Update `@simplewebauthn/server` to `^13.2.2`
-
-### Server-side Files
-
-#### 1. `packages/lib/server-only/auth/create-passkey-registration-options.ts`
-- Change import from `@simplewebauthn/types` to `@simplewebauthn/server`
-- Remove `type: 'public-key'` from `excludeCredentials` items
-- Update `userID` to use `isoUint8Array.fromUTF8String()` for proper encoding
-
-#### 2. `packages/lib/server-only/auth/create-passkey-authentication-options.ts`
-- Change import from `@simplewebauthn/types` to `@simplewebauthn/server`
-- Remove `type: 'public-key'` from `allowCredentials` items
-
-#### 3. `packages/lib/server-only/auth/create-passkey-signin-options.ts`
-- No changes needed (already using correct options)
-
-#### 4. `packages/lib/server-only/auth/create-passkey.ts`
-- Change import from `@simplewebauthn/types` to `@simplewebauthn/server`
-- Update to use new `registrationInfo.credential` structure:
-  - `credentialID` → `credential.id`
-  - `credentialPublicKey` → `credential.publicKey`
-  - `counter` → `credential.counter`
-- Note: `credential.id` is now a `Base64URLString`, so `Buffer.from(credentialID)` needs updating
-
-#### 5. `packages/lib/server-only/document/is-recipient-authorized.ts`
-- Update `verifyAuthenticationResponse()` to use `credential` instead of `authenticator`:
-  - Change `authenticator: { credentialID, credentialPublicKey, counter }` to `credential: { id, publicKey, counter }`
-- Since `credential.id` is now base64url string, convert stored `credentialId` buffer to base64url
-
-#### 6. `packages/auth/server/routes/passkey.ts`
-- Update `verifyAuthenticationResponse()` to use `credential` instead of `authenticator`
-- Same changes as `is-recipient-authorized.ts`
-
-#### 7. `packages/trpc/server/auth-router/create-passkey.ts`
-- Change import from `@simplewebauthn/types` to `@simplewebauthn/server`
-
-### Browser-side Files
-
-#### 8. `apps/remix/app/components/dialogs/passkey-create-dialog.tsx`
-- Update `startRegistration()` call:
-  - Before: `startRegistration(passkeyRegistrationOptions)`
-  - After: `startRegistration({ optionsJSON: passkeyRegistrationOptions })`
-
-#### 9. `apps/remix/app/components/forms/signin.tsx`
-- Update `startAuthentication()` call:
-  - Before: `startAuthentication(options)`
-  - After: `startAuthentication({ optionsJSON: options })`
-
-#### 10. `apps/remix/app/components/general/document-signing/document-signing-auth-passkey.tsx`
-- Update `startAuthentication()` call:
-  - Before: `startAuthentication(options)`
-  - After: `startAuthentication({ optionsJSON: options })`
-
-### Database/Schema Considerations
-
-The database stores `credentialId` as `Bytes`. The new API returns `credential.id` as `Base64URLString`. We need to:
-1. When **storing** a new passkey: Convert from `Base64URLString` to `Buffer`
-2. When **passing to verification**: Convert from `Buffer` to `Base64URLString`
-
-Use `isoBase64URL` helper from `@simplewebauthn/server/helpers` for these conversions.
-
-## Implementation Steps
-
-### Step 1: Update package.json dependencies
-```bash
-npm uninstall @simplewebauthn/types
-npm install @simplewebauthn/browser@^13.2.2 @simplewebauthn/server@^13.2.2
-```
-
-### Step 2: Update type imports
-Replace all `@simplewebauthn/types` imports with `@simplewebauthn/server`
-
-### Step 3: Update browser-side API calls
-- `startRegistration(options)` → `startRegistration({ optionsJSON: options })`
-- `startAuthentication(options)` → `startAuthentication({ optionsJSON: options })`
-
-### Step 4: Update server-side registration
-- Update `excludeCredentials` format (remove `type: 'public-key'`)
-- Update `userID` encoding if needed
-- Update `verifyRegistrationResponse()` result handling for new `credential` structure
-
-### Step 5: Update server-side authentication
-- Update `allowCredentials` format (remove `type: 'public-key'`)
-- Update `verifyAuthenticationResponse()` to use `credential` instead of `authenticator`
-- Handle `Base64URLString` for `credential.id`
-
-### Step 6: Update credential storage/retrieval
-- When storing: Convert `Base64URLString` to `Buffer`
-- When reading: Convert `Buffer` to `Base64URLString`
-
-### Step 7: Test passkey flows
-1. Test passkey creation
-2. Test passkey sign-in
-3. Test passkey authentication for document signing
-4. Test passkey deletion
-
-## Code Examples
-
-### Converting stored Buffer to Base64URLString for verification
-```typescript
-import { isoBase64URL } from '@simplewebauthn/server/helpers';
-
-// When reading from database (Buffer) and passing to verification
-const credential = {
-  id: isoBase64URL.fromBuffer(passkey.credentialId),
-  publicKey: new Uint8Array(passkey.credentialPublicKey),
-  counter: Number(passkey.counter),
-  transports: passkey.transports,
-};
-```
-
-### Converting Base64URLString to Buffer for storage
-```typescript
-import { isoBase64URL } from '@simplewebauthn/server/helpers';
-
-// When storing from registration response
-const credentialIdBuffer = Buffer.from(
-  isoBase64URL.toBuffer(registrationInfo.credential.id)
-);
-```
-
-## Risks and Mitigations
-
-1. **Database compatibility**: The `credentialId` is stored as `Bytes` in the database. The new API uses `Base64URLString`. We need proper conversion functions.
-   - **Mitigation**: Use `isoBase64URL.fromBuffer()` and `isoBase64URL.toBuffer()` for conversions
-
-2. **Existing passkeys**: Existing passkeys should continue to work as long as conversion is done correctly.
-   - **Mitigation**: Test with existing passkeys after upgrade
-
-3. **Browser compatibility**: v10+ requires newer browser APIs.
-   - **Mitigation**: `browserSupportsWebAuthn()` already handles this check

.env.example

@@ -1,6 +1,3 @@
-# The license key to enable enterprise features for self hosters
-NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=
-
 # [[AUTH]]
 NEXTAUTH_SECRET="secret"
 
@@ -62,18 +59,6 @@ NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_PATH=
 NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_CONTENTS=
 # OPTIONAL: The path to the Google Cloud Credentials file to use for the gcloud-hsm signing transport.
 NEXT_PRIVATE_SIGNING_GCLOUD_APPLICATION_CREDENTIALS_CONTENTS=
-# OPTIONAL: The path to the certificate chain file for the gcloud-hsm signing transport.
-NEXT_PRIVATE_SIGNING_GCLOUD_HSM_CERT_CHAIN_FILE_PATH=
-# OPTIONAL: The base64-encoded contents of the certificate chain for the gcloud-hsm signing transport.
-NEXT_PRIVATE_SIGNING_GCLOUD_HSM_CERT_CHAIN_CONTENTS=
-# OPTIONAL: The Google Secret Manager path to retrieve the certificate for the gcloud-hsm signing transport.
-NEXT_PRIVATE_SIGNING_GCLOUD_HSM_SECRET_MANAGER_CERT_PATH=
-# OPTIONAL: Comma-separated list of timestamp authority URLs for PDF signing (enables LTV and archival timestamps).
-NEXT_PRIVATE_SIGNING_TIMESTAMP_AUTHORITY=
-# OPTIONAL: Contact info to embed in PDF signatures. Defaults to the webapp URL.
-NEXT_PUBLIC_SIGNING_CONTACT_INFO=
-# OPTIONAL: Set to "true" to use the legacy adbe.pkcs7.detached subfilter instead of ETSI.CAdES.detached.
-NEXT_PRIVATE_USE_LEGACY_SIGNING_SUBFILTER=
 
 # [[STORAGE]]
 # OPTIONAL: Defines the storage transport to use. Available options: database (default) | s3

.github/workflows/publish.yml

@@ -3,12 +3,6 @@ name: Publish Docker
 on:
   push:
     branches: ['release']
-  workflow_dispatch:
-    inputs:
-      tag:
-        description: 'Git tag to build and publish (e.g., v1.0.0)'
-        required: true
-        type: string
 
 jobs:
   build_and_publish_platform_containers:
@@ -24,7 +18,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ inputs.tag || github.ref }}
           fetch-tags: true
 
       - name: Login to DockerHub
@@ -45,11 +38,8 @@ jobs:
           BUILD_PLATFORM: ${{ matrix.os == 'warp-ubuntu-latest-arm64-4x' && 'arm64' || 'amd64' }}
           NEXT_PRIVATE_TELEMETRY_KEY: ${{ secrets.NEXT_PRIVATE_TELEMETRY_KEY }}
           NEXT_PRIVATE_TELEMETRY_HOST: ${{ secrets.NEXT_PRIVATE_TELEMETRY_HOST }}
-          APP_VERSION: ${{ inputs.tag || '' }}
         run: |
-          if [ -z "$APP_VERSION" ]; then
-            APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
-          fi
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
           GIT_SHA="$(git rev-parse HEAD)"
 
           docker build \
@@ -75,6 +65,47 @@ jobs:
         env:
           BUILD_PLATFORM: ${{ matrix.os == 'warp-ubuntu-latest-arm64-4x' && 'arm64' || 'amd64' }}
 
+      - name: Build the chromium docker image
+        env:
+          BUILD_PLATFORM: ${{ matrix.os == 'warp-ubuntu-latest-arm64-4x' && 'arm64' || 'amd64' }}
+        run: |
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
+          GIT_SHA="$(git rev-parse HEAD)"
+
+          docker build \
+            -f ./docker/Dockerfile.chromium \
+            --progress=plain \
+            --build-arg TAG="$GIT_SHA" \
+            -t "documenso/documenso-$BUILD_PLATFORM:latest-chromium" \
+            -t "documenso/documenso-$BUILD_PLATFORM:$GIT_SHA-chromium" \
+            -t "documenso/documenso-$BUILD_PLATFORM:$APP_VERSION-chromium" \
+            -t "ghcr.io/documenso/documenso-$BUILD_PLATFORM:latest-chromium" \
+            -t "ghcr.io/documenso/documenso-$BUILD_PLATFORM:$GIT_SHA-chromium" \
+            -t "ghcr.io/documenso/documenso-$BUILD_PLATFORM:$APP_VERSION-chromium" \
+            .
+
+      - name: Push the chromium docker image to DockerHub
+        env:
+          BUILD_PLATFORM: ${{ matrix.os == 'warp-ubuntu-latest-arm64-4x' && 'arm64' || 'amd64' }}
+        run: |
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
+          GIT_SHA="$(git rev-parse HEAD)"
+
+          docker push "documenso/documenso-$BUILD_PLATFORM:latest-chromium"
+          docker push "documenso/documenso-$BUILD_PLATFORM:$GIT_SHA-chromium"
+          docker push "documenso/documenso-$BUILD_PLATFORM:$APP_VERSION-chromium" \
+
+      - name: Push the chromium docker image to GitHub Container Registry
+        env:
+          BUILD_PLATFORM: ${{ matrix.os == 'warp-ubuntu-latest-arm64-4x' && 'arm64' || 'amd64' }}
+        run: |
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
+          GIT_SHA="$(git rev-parse HEAD)"
+
+          docker push "ghcr.io/documenso/documenso-$BUILD_PLATFORM:latest-chromium"
+          docker push "ghcr.io/documenso/documenso-$BUILD_PLATFORM:$GIT_SHA-chromium"
+          docker push "ghcr.io/documenso/documenso-$BUILD_PLATFORM:$APP_VERSION-chromium"
+
   create_and_publish_manifest:
     name: Create and publish manifest
     runs-on: ubuntu-latest
@@ -83,7 +114,6 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          ref: ${{ inputs.tag || github.ref }}
           fetch-tags: true
 
       - name: Login to DockerHub
@@ -100,12 +130,8 @@ jobs:
           password: ${{ secrets.GH_TOKEN }}
 
       - name: Create and push DockerHub manifest
-        env:
-          APP_VERSION: ${{ inputs.tag || '' }}
         run: |
-          if [ -z "$APP_VERSION" ]; then
-            APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
-          fi
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
           GIT_SHA="$(git rev-parse HEAD)"
 
           # Check if the version is stable (no rc or beta in the version)
@@ -140,13 +166,46 @@ jobs:
           docker manifest push documenso/documenso:$GIT_SHA
           docker manifest push documenso/documenso:$APP_VERSION
 
-      - name: Create and push Github Container Registry manifest
-        env:
-          APP_VERSION: ${{ inputs.tag || '' }}
+      - name: Create and push DockerHub chromium manifest
         run: |
-          if [ -z "$APP_VERSION" ]; then
-            APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
+          GIT_SHA="$(git rev-parse HEAD)"
+
+          # Check if the version is stable (no rc or beta in the version)
+          if [[ "$APP_VERSION" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+            docker manifest create \
+              documenso/documenso:latest-chromium \
+              --amend documenso/documenso-amd64:latest-chromium \
+              --amend documenso/documenso-arm64:latest-chromium
+
+            docker manifest push documenso/documenso:latest-chromium
           fi
+
+          if [[ "$APP_VERSION" =~ ^v[0-9]+\.[0-9]+\.[0-9]+-rc\.[0-9]+$ ]]; then
+            docker manifest create \
+              documenso/documenso:rc-chromium \
+              --amend documenso/documenso-amd64:rc-chromium \
+              --amend documenso/documenso-arm64:rc-chromium
+
+            docker manifest push documenso/documenso:rc-chromium
+          fi
+
+          docker manifest create \
+            documenso/documenso:$GIT_SHA-chromium \
+            --amend documenso/documenso-amd64:$GIT_SHA-chromium \
+            --amend documenso/documenso-arm64:$GIT_SHA-chromium
+
+          docker manifest create \
+            documenso/documenso:$APP_VERSION-chromium \
+            --amend documenso/documenso-amd64:$APP_VERSION-chromium \
+            --amend documenso/documenso-arm64:$APP_VERSION-chromium
+
+          docker manifest push documenso/documenso:$GIT_SHA-chromium
+          docker manifest push documenso/documenso:$APP_VERSION-chromium
+
+      - name: Create and push Github Container Registry manifest
+        run: |
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
           GIT_SHA="$(git rev-parse HEAD)"
 
           # Check if the version is stable (no rc or beta in the version)
@@ -180,3 +239,40 @@ jobs:
 
           docker manifest push ghcr.io/documenso/documenso:$GIT_SHA
           docker manifest push ghcr.io/documenso/documenso:$APP_VERSION
+
+      - name: Create and push Github Container Registry chromium manifest
+        run: |
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
+          GIT_SHA="$(git rev-parse HEAD)"
+
+          # Check if the version is stable (no rc or beta in the version)
+          if [[ "$APP_VERSION" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+            docker manifest create \
+              ghcr.io/documenso/documenso:latest-chromium \
+              --amend ghcr.io/documenso/documenso-amd64:latest-chromium \
+              --amend ghcr.io/documenso/documenso-arm64:latest-chromium
+
+            docker manifest push ghcr.io/documenso/documenso:latest-chromium
+          fi
+
+          if [[ "$APP_VERSION" =~ ^v[0-9]+\.[0-9]+\.[0-9]+-rc\.[0-9]+$ ]]; then
+            docker manifest create \
+              ghcr.io/documenso/documenso:rc-chromium \
+              --amend ghcr.io/documenso/documenso-amd64:rc-chromium \
+              --amend ghcr.io/documenso/documenso-arm64:rc-chromium
+
+            docker manifest push ghcr.io/documenso/documenso:rc-chromium
+          fi
+
+          docker manifest create \
+            ghcr.io/documenso/documenso:$GIT_SHA-chromium \
+            --amend ghcr.io/documenso/documenso-amd64:$GIT_SHA-chromium \
+            --amend ghcr.io/documenso/documenso-arm64:$GIT_SHA-chromium
+
+          docker manifest create \
+            ghcr.io/documenso/documenso:$APP_VERSION-chromium \
+            --amend ghcr.io/documenso/documenso-amd64:$APP_VERSION-chromium \
+            --amend ghcr.io/documenso/documenso-arm64:$APP_VERSION-chromium
+
+          docker manifest push ghcr.io/documenso/documenso:$GIT_SHA-chromium
+          docker manifest push ghcr.io/documenso/documenso:$APP_VERSION-chromium

.gitignore

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

.opencode/commands/commit.md

@@ -1,80 +0,0 @@
----
-description: Add and commit changes using conventional commits
-allowed-tools: Bash, Read, Glob, Grep
----
-
-Create a git commit for the current changes using the Conventional Commits standard.
-
-## Process
-
-1. **Analyze the changes** by running:
-   - `git status` to see all modified/untracked files
-   - `git diff` to see unstaged changes
-   - `git diff --staged` to see already-staged changes
-   - `git log --oneline -5` to see recent commit style
-
-2. **Stage appropriate files**:
-   - Stage all related changes with `git add`
-   - Do NOT stage files that appear to contain secrets (.env, credentials, API keys, tokens)
-   - If you detect potential secrets, warn the user and skip those files
-
-3. **Determine the commit type** based on the changes:
-   - `feat`: New feature or capability
-   - `fix`: Bug fix
-   - `docs`: Documentation only
-   - `style`: Formatting, whitespace (not CSS)
-   - `refactor`: Code restructuring without behavior change
-   - `perf`: Performance improvement
-   - `test`: Adding or updating tests
-   - `build`: Build system or dependencies
-   - `ci`: CI/CD configuration
-   - `chore`: Maintenance tasks, tooling, config
-
-   NOTE: Do not use a scope for commits
-
-4. **Write the commit message**:
-   - **Subject line**: `<type>: <description>`
-     - Use imperative mood ("add" not "added")
-     - Lowercase, no period at end
-     - Max 50 characters if possible, 72 hard limit
-   - **Body** (if needed): Explain _why_, not _what_
-     - Wrap at 72 characters
-     - Separate from subject with blank line
-
-## Commit Format
-
-```
-<type>[scope]: <subject>
-
-[optional body explaining WHY this change was made]
-```
-
-## Examples
-
-Simple change:
-
-```
-fix: handle empty input in parser without throwing
-```
-
-With body:
-
-```
-feat: add streaming response support
-
-Large responses were causing memory issues in production.
-Streaming allows processing chunks incrementally.
-```
-
-## Rules
-
-- NEVER commit files that may contain secrets
-- NEVER use `git commit --amend` unless the user explicitly requests it
-- NEVER use `--no-verify` to skip hooks
-- If the pre-commit hook fails, fix the issues and create a NEW commit
-- If there are no changes to commit, inform the user and stop
-- Use a HEREDOC to pass the commit message to ensure proper formatting
-
-## Execute
-
-Run the git commands to analyze, stage, and commit the changes now.

.opencode/commands/continue.md

@@ -1,112 +0,0 @@
----
-description: Continue implementing a spec from a previous session
-argument-hint: <spec-file-path>
----
-
-You are continuing implementation of a specification that was started in a previous session. Work autonomously until the feature is complete and tests pass.
-
-## Your Task
-
-1. **Read the spec** at `$ARGUMENTS`
-2. **Read CODE_STYLE.md** for formatting conventions
-3. **Assess current state**:
-   - Check git status for uncommitted changes
-   - Run tests to see what's passing/failing (if E2E tests exist)
-   - Review any existing implementation
-4. **Determine what remains** by comparing the spec to the current state
-5. **Plan remaining work** using TodoWrite
-6. **Continue implementing** until complete
-
-## Assessing Current State
-
-Run these commands to understand where the previous session left off:
-
-```bash
-git status                                    # See uncommitted changes
-git log --oneline -10                         # See recent commits
-npm run typecheck -w @documenso/remix         # Check for type errors
-npm run lint:fix                              # Check for linting issues
-```
-
-Review the code that's already been written to understand:
-
-- What's already implemented
-- What's partially done
-- What's not started yet
-
-## Implementation Guidelines
-
-### During Implementation
-
-- Follow CODE_STYLE.md strictly (2-space indent, double quotes, braces always, etc.)
-- Follow workspace rules for TypeScript, React, TRPC patterns, and Remix conventions
-- Mark todos complete as you finish each task
-- Commit logical chunks of work
-
-### Code Quality
-
-- No stubbed implementations
-- Handle edge cases and error conditions
-- Include descriptive error messages with context
-- Use async/await for all I/O operations
-- Use AppError class when throwing errors
-- Use Zod for validation and react-hook-form for forms
-
-### Testing
-
-**Important**: E2E tests are time-consuming. Only write tests for non-trivial functionality.
-
-- Write E2E tests in `packages/app-tests/e2e/` using Playwright
-- Test critical user flows and edge cases
-- Follow existing E2E test patterns in the codebase
-- Use descriptive test names that explain what is being tested
-- Skip tests for trivial changes (simple UI tweaks, minor refactors, etc.)
-
-## Autonomous Workflow
-
-Work continuously through these steps:
-
-1. **Implement** - Write the code for the current task
-2. **Typecheck** - Run `npm run typecheck -w @documenso/remix` to verify types
-3. **Lint** - Run `npm run lint:fix` to fix linting issues
-4. **Test** - If non-trivial, run E2E tests: `npm run test:dev -w @documenso/app-tests`
-5. **Fix** - If tests fail, fix and re-run
-6. **Repeat** - Move to next task
-
-## Stopping Conditions
-
-**Stop and report success when:**
-
-- All spec requirements are implemented
-- Typecheck passes
-- Lint passes
-- E2E tests pass (if written for non-trivial functionality)
-
-**Stop and ask for help when:**
-
-- The spec is ambiguous and you need clarification
-- You encounter a blocking issue you cannot resolve
-- You need to make a decision that significantly deviates from the spec
-- External dependencies are missing
-
-## Commands
-
-```bash
-# Type checking
-npm run typecheck -w @documenso/remix
-
-# Linting
-npm run lint:fix
-
-# E2E Tests (only for non-trivial work)
-npm run test:dev -w @documenso/app-tests              # Run E2E tests in dev mode
-npm run test-ui:dev -w @documenso/app-tests            # Run E2E tests with UI
-npm run test:e2e                                       # Run full E2E test suite
-
-# Development
-npm run dev                                            # Start dev server
-```
-
-## Begin
-
-Read the spec file and CODE_STYLE.md, assess the current implementation state, then continue where the previous session left off. Use TodoWrite to track your progress throughout.

.opencode/commands/create-justification.md

@@ -1,75 +0,0 @@
----
-description: Create a new justification file in .agents/justifications/
-argument-hint: <justification-slug> [content]
----
-
-You are creating a new justification file in the `.agents/justifications/` directory.
-
-## Your Task
-
-1. **Determine the slug** - Use `$ARGUMENTS` as the file slug (kebab-case recommended)
-2. **Gather content** - Collect or generate the justification content
-3. **Create the file** - Use the create-justification script to generate the file
-
-## Usage
-
-The script will automatically:
-- Generate a unique three-word ID (e.g., `swift-emerald-river`)
-- Create frontmatter with current date and formatted title
-- Save the file as `{id}-{slug}.md` in `.agents/justifications/`
-
-## Creating the File
-
-### Option 1: Direct Content
-
-If you have the content ready, run:
-
-```bash
-npx tsx scripts/create-justification.ts "$ARGUMENTS" "Your justification content here"
-```
-
-### Option 2: Multi-line Content (Heredoc)
-
-For multi-line content, use heredoc:
-
-```bash
-npx tsx scripts/create-justification.ts "$ARGUMENTS" << HEREDOC
-Your multi-line
-justification content
-goes here
-HEREDOC
-```
-
-### Option 3: Pipe Content
-
-You can also pipe content:
-
-```bash
-echo "Your content" | npx tsx scripts/create-justification.ts "$ARGUMENTS"
-```
-
-## File Format
-
-The created file will have:
-
-```markdown
----
-date: 2026-01-13
-title: Justification Title
----
-
-Your content here
-```
-
-The title is automatically formatted from the slug (e.g., `architecture-decision` → `Architecture Decision`).
-
-## Guidelines
-
-- Use descriptive slugs in kebab-case (e.g., `tech-stack-choice`, `api-design-rationale`)
-- Include clear reasoning and context for the decision
-- The unique ID ensures no filename conflicts
-- Files are automatically dated for organization
-
-## Begin
-
-Create a justification file using the slug from `$ARGUMENTS` and appropriate content documenting the reasoning or justification.

.opencode/commands/create-plan.md

@@ -1,76 +0,0 @@
----
-description: Create a new plan file in .agents/plans/
-argument-hint: <plan-slug> [content]
----
-
-You are creating a new plan file in the `.agents/plans/` directory.
-
-## Your Task
-
-1. **Determine the slug** - Use `$ARGUMENTS` as the file slug (kebab-case recommended)
-2. **Gather content** - Collect or generate the plan content
-3. **Create the file** - Use the create-plan script to generate the file
-
-## Usage
-
-The script will automatically:
-
-- Generate a unique three-word ID (e.g., `happy-blue-moon`)
-- Create frontmatter with current date and formatted title
-- Save the file as `{id}-{slug}.md` in `.agents/plans/`
-
-## Creating the File
-
-### Option 1: Direct Content
-
-If you have the content ready, run:
-
-```bash
-npx tsx scripts/create-plan.ts "$ARGUMENTS" "Your plan content here"
-```
-
-### Option 2: Multi-line Content (Heredoc)
-
-For multi-line content, use heredoc:
-
-```bash
-npx tsx scripts/create-plan.ts "$ARGUMENTS" << HEREDOC
-Your multi-line
-plan content
-goes here
-HEREDOC
-```
-
-### Option 3: Pipe Content
-
-You can also pipe content:
-
-```bash
-echo "Your content" | npx tsx scripts/create-plan.ts "$ARGUMENTS"
-```
-
-## File Format
-
-The created file will have:
-
-```markdown
----
-date: 2026-01-13
-title: Plan Title
----
-
-Your content here
-```
-
-The title is automatically formatted from the slug (e.g., `my-feature` → `My Feature`).
-
-## Guidelines
-
-- Use descriptive slugs in kebab-case (e.g., `user-authentication`, `api-integration`)
-- Include clear, actionable plan content
-- The unique ID ensures no filename conflicts
-- Files are automatically dated for organization
-
-## Begin
-
-Create a plan file using the slug from `$ARGUMENTS` and appropriate content for the planning task.

.opencode/commands/create-scratch.md

@@ -1,75 +0,0 @@
----
-description: Create a new scratch file in .agents/scratches/
-argument-hint: <scratch-slug> [content]
----
-
-You are creating a new scratch file in the `.agents/scratches/` directory.
-
-## Your Task
-
-1. **Determine the slug** - Use `$ARGUMENTS` as the file slug (kebab-case recommended)
-2. **Gather content** - Collect or generate the scratch content
-3. **Create the file** - Use the create-scratch script to generate the file
-
-## Usage
-
-The script will automatically:
-- Generate a unique three-word ID (e.g., `calm-teal-cloud`)
-- Create frontmatter with current date and formatted title
-- Save the file as `{id}-{slug}.md` in `.agents/scratches/`
-
-## Creating the File
-
-### Option 1: Direct Content
-
-If you have the content ready, run:
-
-```bash
-npx tsx scripts/create-scratch.ts "$ARGUMENTS" "Your scratch content here"
-```
-
-### Option 2: Multi-line Content (Heredoc)
-
-For multi-line content, use heredoc:
-
-```bash
-npx tsx scripts/create-scratch.ts "$ARGUMENTS" << HEREDOC
-Your multi-line
-scratch content
-goes here
-HEREDOC
-```
-
-### Option 3: Pipe Content
-
-You can also pipe content:
-
-```bash
-echo "Your content" | npx tsx scripts/create-scratch.ts "$ARGUMENTS"
-```
-
-## File Format
-
-The created file will have:
-
-```markdown
----
-date: 2026-01-13
-title: Scratch Title
----
-
-Your content here
-```
-
-The title is automatically formatted from the slug (e.g., `quick-notes` → `Quick Notes`).
-
-## Guidelines
-
-- Use descriptive slugs in kebab-case (e.g., `exploration-ideas`, `temporary-notes`)
-- Scratch files are for temporary notes, explorations, or ideas
-- The unique ID ensures no filename conflicts
-- Files are automatically dated for organization
-
-## Begin
-
-Create a scratch file using the slug from `$ARGUMENTS` and appropriate content for notes or exploration.

.opencode/commands/document.md

@@ -1,201 +0,0 @@
----
-description: Generate MDX documentation for a module or feature
-argument-hint: <module-path-or-feature>
----
-
-You are creating proper MDX documentation for a module or feature in Documenso using Nextra.
-
-## Your Task
-
-1. **Identify the scope** - What does `$ARGUMENTS` refer to? (file, directory, or feature name)
-2. **Read the source code** - Understand the public API, types, and behavior
-3. **Read existing docs** - Check if there's documentation to update or reference
-4. **Write comprehensive documentation** - Create or update MDX docs in the appropriate location
-5. **Update navigation** - Add entry to `_meta.js` if creating a new page
-
-## Documentation Structure
-
-Create documentation in the appropriate location:
-
-- **Developer docs**: `apps/documentation/pages/developers/`
-- **User docs**: `apps/documentation/pages/users/`
-
-### File Format
-
-All documentation files must be `.mdx` files with frontmatter:
-
-```mdx
----
-title: Page Title
-description: Brief description for SEO and meta tags
----
-
-# Page Title
-
-Content starts here...
-```
-
-### Navigation
-
-Each directory should have a `_meta.js` file that defines the navigation structure:
-
-```javascript
-export default {
-  index: 'Introduction',
-  'feature-name': 'Feature Name',
-  'another-feature': 'Another Feature',
-};
-```
-
-If creating a new page, add it to the appropriate `_meta.js` file.
-
-### Documentation Format
-
-````mdx
----
-title: <Module|Feature Name>
-description: Brief description of what this does and when to use it
----
-
-# <Module|Feature Name>
-
-Brief description of what this module/feature does and when to use it.
-
-## Installation
-
-If there are specific packages or imports needed:
-
-```bash
-npm install @documenso/package-name
-```
-
-## Quick Start
-
-```jsx
-// Minimal working example
-import { Component } from '@documenso/package';
-
-const Example = () => {
-  return <Component />;
-};
-```
-
-## API Reference
-
-### Component/Function Name
-
-Description of what it does.
-
-#### Props/Parameters
-
-| Prop/Param | Type                 | Description               |
-| ---------- | -------------------- | ------------------------- |
-| prop       | `string`             | Description of the prop   |
-| optional   | `boolean` (optional) | Optional prop description |
-
-#### Example
-
-```jsx
-import { Component } from '@documenso/package';
-
-<Component prop="value" optional={true} />;
-```
-
-### Types
-
-#### `TypeName`
-
-```typescript
-type TypeName = {
-  property: string;
-  optional?: boolean;
-};
-```
-
-## Examples
-
-### Common Use Case
-
-```jsx
-// Full working example
-```
-
-### Advanced Usage
-
-```jsx
-// More complex example
-```
-
-## Related
-
-- [Link to related documentation](/developers/path)
-- [Another related page](/users/path)
-````
-
-## Guidelines
-
-### Content Quality
-
-- **Be accurate** - Verify behavior by reading the code
-- **Be complete** - Document all public API surface
-- **Be practical** - Include real, working examples
-- **Be concise** - Don't over-explain obvious things
-- **Be user-focused** - Write for the target audience (developers or users)
-
-### Code Examples
-
-- Use appropriate language tags: `jsx`, `tsx`, `typescript`, `bash`, `json`
-- Show imports when not obvious
-- Include expected output in comments where helpful
-- Progress from simple to complex
-- Use real examples from the codebase when possible
-
-### Formatting
-
-- Always include frontmatter with `title` and `description`
-- Use proper markdown headers (h1 for title, h2 for sections)
-- Use tables for props/parameters documentation (matching existing style)
-- Use code fences with appropriate language tags
-- Use Nextra components when appropriate:
-  - `<Callout type="info">` for notes
-  - `<Steps>` for step-by-step instructions
-- Use relative links for internal documentation (e.g., `/developers/embedding/react`)
-
-### Nextra Components
-
-You can import and use Nextra components:
-
-```jsx
-import { Callout, Steps } from 'nextra/components';
-
-<Callout type="info">
-  This is an informational note.
-</Callout>
-
-<Steps>
-  <Steps.Step>First step</Steps.Step>
-  <Steps.Step>Second step</Steps.Step>
-</Steps>
-```
-
-### Maintenance
-
-- Include types inline so docs don't get stale
-- Reference source file locations for complex behavior
-- Keep examples up-to-date with the codebase
-- Update `_meta.js` when adding new pages
-
-## Process
-
-1. **Explore the code** - Read source files to understand the API
-2. **Identify the audience** - Is this for developers or users?
-3. **Check existing docs** - Look for similar pages to match style
-4. **Draft the structure** - Outline sections before writing
-5. **Write content** - Fill in each section with frontmatter
-6. **Add examples** - Create working code samples
-7. **Update navigation** - Add to `_meta.js` if needed
-8. **Review** - Read through for clarity and accuracy
-
-## Begin
-
-Analyze `$ARGUMENTS`, read the relevant source code, check existing documentation patterns, and create comprehensive MDX documentation following the Documenso documentation style.

.opencode/commands/implement.md

@@ -1,100 +0,0 @@
----
-description: Implement a spec from the plans directory
-argument-hint: <spec-file-path>
----
-
-You are implementing a specification from the `.agents/plans/` directory. Work autonomously until the feature is complete and tests pass.
-
-## Your Task
-
-1. **Read the spec** at `$ARGUMENTS`
-2. **Read CODE_STYLE.md** for formatting conventions
-3. **Plan the implementation** using the TodoWrite tool to break down the work
-4. **Implement the feature** following the spec and code style
-5. **Write E2E tests** only for non-trivial functionality (E2E tests are time-consuming)
-6. **Run tests** and fix any failures
-7. **Run typecheck and lint** and fix any issues
-
-## Implementation Guidelines
-
-### Before Coding
-
-- Understand the spec's goals and scope
-- Identify the desired API from usage examples in the spec
-- Review related existing code to understand patterns
-- Break the work into discrete tasks using TodoWrite
-
-### During Implementation
-
-- Follow CODE_STYLE.md strictly (2-space indent, double quotes, braces always, etc.)
-- Follow workspace rules for TypeScript, React, TRPC patterns, and Remix conventions
-- Mark todos complete as you finish each task
-- Commit logical chunks of work
-
-### Code Quality
-
-- No stubbed implementations
-- Handle edge cases and error conditions
-- Include descriptive error messages with context
-- Use async/await for all I/O operations
-- Use AppError class when throwing errors
-- Use Zod for validation and react-hook-form for forms
-
-### Testing
-
-**Important**: E2E tests are time-consuming. Only write tests for non-trivial functionality.
-
-- Write E2E tests in `packages/app-tests/e2e/` using Playwright
-- Test critical user flows and edge cases
-- Follow existing E2E test patterns in the codebase
-- Use descriptive test names that explain what is being tested
-- Skip tests for trivial changes (simple UI tweaks, minor refactors, etc.)
-
-## Autonomous Workflow
-
-Work continuously through these steps:
-
-1. **Implement** - Write the code for the current task
-2. **Typecheck** - Run `npm run typecheck -w @documenso/remix` to verify types
-3. **Lint** - Run `npm run lint:fix` to fix linting issues
-4. **Test** - If non-trivial, run E2E tests: `npm run test:dev -w @documenso/app-tests`
-5. **Fix** - If tests fail, fix and re-run
-6. **Repeat** - Move to next task
-
-## Stopping Conditions
-
-**Stop and report success when:**
-
-- All spec requirements are implemented
-- Typecheck passes
-- Lint passes
-- E2E tests pass (if written for non-trivial functionality)
-
-**Stop and ask for help when:**
-
-- The spec is ambiguous and you need clarification
-- You encounter a blocking issue you cannot resolve
-- You need to make a decision that significantly deviates from the spec
-- External dependencies are missing
-
-## Commands
-
-```bash
-# Type checking
-npm run typecheck -w @documenso/remix
-
-# Linting
-npm run lint:fix
-
-# E2E Tests (only for non-trivial work)
-npm run test:dev -w @documenso/app-tests              # Run E2E tests in dev mode
-npm run test-ui:dev -w @documenso/app-tests            # Run E2E tests with UI
-npm run test:e2e                                       # Run full E2E test suite
-
-# Development
-npm run dev                                            # Start dev server
-```
-
-## Begin
-
-Read the spec file and CODE_STYLE.md, then start implementing. Use TodoWrite to track your progress throughout.

.opencode/commands/interview.md

@@ -1,57 +0,0 @@
----
-description: Deep-dive interview to flesh out a spec or design document
-agent: build
-argument-hint: <file-path>
----
-
-You are conducting a thorough interview to help flesh out and complete a specification or design document.
-
-## Your Task
-
-1. **Read the document** at `$ARGUMENTS`
-2. **Analyze it deeply** - identify gaps, ambiguities, unexplored edge cases, and areas needing clarification
-3. **Interview the user** by providing a question with some pre-determined options
-4. **Write the completed spec** back to the file when the interview is complete
-
-## Interview Guidelines
-
-### Question Quality
-- Ask **non-obvious, insightful questions** - avoid surface-level queries
-- Focus on: technical implementation details, architectural decisions, edge cases, error handling, UX implications, security considerations, performance tradeoffs, integration points, migration strategies, rollback plans
-- Each question should reveal something that would otherwise be missed
-- Challenge assumptions embedded in the document
-- Explore second and third-order consequences of design decisions
-- Use the Web Search and other tools where required to ground questions (e.g. package recommendations)
-
-### Question Strategy
-- Start by identifying the 3-5 most critical unknowns or ambiguities
-- Use the AskUserQuestion tool with well-crafted options that represent real tradeoffs
-- When appropriate, offer multiple valid approaches with their pros/cons as options
-- Don't ask about things that are already clearly specified
-- Probe deeper when answers reveal new areas of uncertainty
-
-### Topics to Explore (as relevant)
-- **Technical**: Data models, API contracts, state management, concurrency, caching, validation
-- **UX**: Error states, loading states, empty states, edge cases, accessibility, mobile considerations
-- **Operations**: Deployment, monitoring, alerting, debugging, logging, feature flags
-- **Security**: Auth, authz, input validation, rate limiting, audit trails
-- **Scale**: Performance bottlenecks, data growth, traffic spikes, graceful degradation
-- **Integration**: Dependencies, backwards compatibility, versioning, migration path
-- **Failure modes**: What happens when X fails? How do we recover? What's the blast radius?
-
-### Interview Flow
-1. Ask 2-4 questions at a time (use multiple questions in one when they're related)
-2. After each round, incorporate answers and identify follow-up questions
-3. Continue until all critical areas are addressed
-4. Signal when you believe the interview is complete, but offer to go deeper
-
-## Output
-
-When the interview is complete:
-1. Synthesize all gathered information
-2. Rewrite/expand the original document with the new details
-3. Preserve the document's original structure where sensible, but reorganize if needed
-4. Add new sections for areas that weren't originally covered
-5. Write the completed spec back to `$ARGUMENTS`
-
-Begin by reading the file and identifying your first set of deep questions.

.opencode/skill/create-justification/SKILL.md

@@ -1,56 +0,0 @@
----
-name: create-justification
-description: Create a new justification file in .agents/justifications/ with a unique three-word ID, frontmatter, and formatted title
-license: MIT
-compatibility: opencode
-metadata:
-  audience: agents
-  workflow: decision-making
----
-
-## What I do
-
-I help you create new justification files in the `.agents/justifications/` directory. Each justification file gets:
-
-- A unique three-word identifier (e.g., `swift-emerald-river`)
-- Frontmatter with the current date and formatted title
-- Content you provide
-
-## How to use
-
-Run the script with a slug and content:
-
-```bash
-npx tsx scripts/create-justification.ts "decision-name" "Justification content here"
-```
-
-Or use heredoc for multi-line content:
-
-```bash
-npx tsx scripts/create-justification.ts "decision-name" << HEREDOC
-Multi-line
-justification content
-goes here
-HEREDOC
-```
-
-## File format
-
-Files are created as: `{three-word-id}-{slug}.md`
-
-Example: `swift-emerald-river-decision-name.md`
-
-The file includes frontmatter:
-
-```markdown
----
-date: 2026-01-13
-title: Decision Name
----
-
-Your content here
-```
-
-## When to use me
-
-Use this skill when you need to document the reasoning or justification for a decision, approach, or architectural choice. The unique ID ensures no filename conflicts, and the frontmatter provides metadata for organization.

.opencode/skill/create-plan/SKILL.md

@@ -1,56 +0,0 @@
----
-name: create-plan
-description: Create a new plan file in .agents/plans/ with a unique three-word ID, frontmatter, and formatted title
-license: MIT
-compatibility: opencode
-metadata:
-  audience: agents
-  workflow: planning
----
-
-## What I do
-
-I help you create new plan files in the `.agents/plans/` directory. Each plan file gets:
-
-- A unique three-word identifier (e.g., `happy-blue-moon`)
-- Frontmatter with the current date and formatted title
-- Content you provide
-
-## How to use
-
-Run the script with a slug and content:
-
-```bash
-npx tsx scripts/create-plan.ts "feature-name" "Plan content here"
-```
-
-Or use heredoc for multi-line content:
-
-```bash
-npx tsx scripts/create-plan.ts "feature-name" << HEREDOC
-Multi-line
-plan content
-goes here
-HEREDOC
-```
-
-## File format
-
-Files are created as: `{three-word-id}-{slug}.md`
-
-Example: `happy-blue-moon-feature-name.md`
-
-The file includes frontmatter:
-
-```markdown
----
-date: 2026-01-13
-title: Feature Name
----
-
-Your content here
-```
-
-## When to use me
-
-Use this skill when you need to create a new plan document for a feature, task, or project. The unique ID ensures no filename conflicts, and the frontmatter provides metadata for organization.

.opencode/skill/create-scratch/SKILL.md

@@ -1,56 +0,0 @@
----
-name: create-scratch
-description: Create a new scratch file in .agents/scratches/ with a unique three-word ID, frontmatter, and formatted title
-license: MIT
-compatibility: opencode
-metadata:
-  audience: agents
-  workflow: exploration
----
-
-## What I do
-
-I help you create new scratch files in the `.agents/scratches/` directory. Each scratch file gets:
-
-- A unique three-word identifier (e.g., `calm-teal-cloud`)
-- Frontmatter with the current date and formatted title
-- Content you provide
-
-## How to use
-
-Run the script with a slug and content:
-
-```bash
-npx tsx scripts/create-scratch.ts "note-name" "Scratch content here"
-```
-
-Or use heredoc for multi-line content:
-
-```bash
-npx tsx scripts/create-scratch.ts "note-name" << HEREDOC
-Multi-line
-scratch content
-goes here
-HEREDOC
-```
-
-## File format
-
-Files are created as: `{three-word-id}-{slug}.md`
-
-Example: `calm-teal-cloud-note-name.md`
-
-The file includes frontmatter:
-
-```markdown
----
-date: 2026-01-13
-title: Note Name
----
-
-Your content here
-```
-
-## When to use me
-
-Use this skill when you need to create a temporary note, exploration document, or scratch pad for ideas. The unique ID ensures no filename conflicts, and the frontmatter provides metadata for organization.

AGENTS.md

@@ -11,8 +11,6 @@
 - `npm run format` - Format code with Prettier
 - `npm run dev` - Start development server for Remix app
 
-**Important:** Do not run `npm run build` to verify changes unless explicitly asked. Builds take a long time (~2 minutes). Use `npx tsc --noEmit` for type checking specific packages if needed.
-
 ## Code Style Guidelines
 
 - Use TypeScript for all code; prefer `type` over `interface`

CONTRIBUTING.md

@@ -52,53 +52,3 @@ You can build the project with:
 ```bash
 npm run build
 ```
-
-## AI-Assisted Development with OpenCode
-
-We use [OpenCode](https://opencode.ai) for AI-assisted development. OpenCode provides custom commands and skills to help maintain consistency and streamline common workflows.
-
-OpenCode works with most major AI providers (Anthropic, OpenAI, Google, etc.) or you can use [Zen](https://opencode.ai/zen) for optimized coding models. Configure your preferred provider in the OpenCode settings.
-
-> **Important**: All AI-generated code must be thoroughly reviewed by the contributor before submitting a PR. You are responsible for understanding and validating every line of code you submit. If we detect that contributors are simply throwing AI-generated code over the wall without proper review, they will be blocked from the repository.
-
-### Getting Started
-
-1. Install OpenCode (see [opencode.ai](https://opencode.ai) for other install methods):
-   ```bash
-   curl -fsSL https://opencode.ai/install | bash
-   ```
-2. Configure your AI provider (or use Zen for optimized models)
-3. Run `opencode` in the project root
-
-### Available Commands
-
-Use these commands in OpenCode by typing the command name:
-
-| Command                        | Description                                              |
-| ------------------------------ | -------------------------------------------------------- |
-| `/implement <spec-path>`       | Implement a spec from `.agents/plans/` autonomously      |
-| `/continue <spec-path>`        | Continue implementing a spec from a previous session     |
-| `/interview <file-path>`       | Deep-dive interview to flesh out a spec or design        |
-| `/document <module-path>`      | Generate MDX documentation for a module or feature       |
-| `/commit`                      | Create a conventional commit for staged changes          |
-| `/create-plan <slug>`          | Create a new plan file in `.agents/plans/`               |
-| `/create-scratch <slug>`       | Create a scratch file for notes in `.agents/scratches/`  |
-| `/create-justification <slug>` | Create a justification file in `.agents/justifications/` |
-
-### Typical Workflow
-
-1. **Create a plan**: Use `/create-plan my-feature` to draft a spec for a new feature
-2. **Flesh out the spec**: Use `/interview .agents/plans/<file>.md` to refine requirements
-3. **Implement**: Use `/implement .agents/plans/<file>.md` to build the feature
-4. **Continue if needed**: Use `/continue .agents/plans/<file>.md` to pick up where you left off
-5. **Commit**: Use `/commit` to create a conventional commit
-
-### Agent Files
-
-The `.agents/` directory stores AI-generated artifacts:
-
-- **`.agents/plans/`** - Feature specs and implementation plans
-- **`.agents/scratches/`** - Temporary notes and explorations
-- **`.agents/justifications/`** - Decision rationale and technical justifications
-
-These files use a unique ID format (`{word}-{word}-{word}-{slug}.md`) to prevent conflicts.

apps/documentation/pages/developers/_meta.js

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

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

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

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

@@ -1,25 +1,12 @@
 ---
-title: Embedded Authoring
+title: 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/index.mdx

@@ -3,16 +3,10 @@ title: Get Started
 description: Learn how to use embedding to bring signing to your own website or application
 ---
 
-# Embedded Signing
+# Embedding
 
 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,19 +31,10 @@ Our new API V2 supports the following typed SDKs:
 
 ## API V1 - Deprecated
 
-<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).
-
-  <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.
 
+📖 [Documentation](https://documen.so/api-v2-docs)
+
 ## Availability
 
 The API is available to individual users, teams and higher plans. [Fair Use](https://documen.so/fair) applies.

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

@@ -316,8 +316,6 @@ 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.
@@ -362,95 +360,6 @@ 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/self-hosting/how-to.mdx

@@ -291,13 +291,10 @@ For AI setup specifics, see the [AI Recipient & Field Detection (Self-hosting)](
 | `NEXT_PUBLIC_SUPPORT_EMAIL`                  | The support email address displayed to users (default `support@documenso.com`).                                                                         |
 | `NEXT_PRIVATE_DATABASE_URL`                  | The URL for the primary database connection (with connection pooling).                                                                                  |
 | `NEXT_PRIVATE_DIRECT_DATABASE_URL`           | The URL for the direct database connection (without connection pooling).                                                                                |
-| `NEXT_PRIVATE_SIGNING_TRANSPORT`             | The signing transport to use. Available options: local (default), gcloud-hsm                                                                            |
+| `NEXT_PRIVATE_SIGNING_TRANSPORT`             | The signing transport to use. Available options: local (default)                                                                                        |
 | `NEXT_PRIVATE_SIGNING_PASSPHRASE`            | The passphrase for the key file.                                                                                                                        |
 | `NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS`   | The base64-encoded contents of the key file will be used instead of the file path.                                                                      |
 | `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH`       | The path to the key file, default `/opt/documenso/cert.p12`.                                                                                            |
-| `NEXT_PRIVATE_SIGNING_TIMESTAMP_AUTHORITY`   | Comma-separated list of timestamp authority URLs for PDF signing. Enables LTV and archival timestamps.                                                  |
-| `NEXT_PUBLIC_SIGNING_CONTACT_INFO`           | Contact info to embed in PDF signatures. Defaults to the webapp URL.                                                                                    |
-| `NEXT_PRIVATE_USE_LEGACY_SIGNING_SUBFILTER`  | Set to "true" to use the legacy adbe.pkcs7.detached subfilter instead of ETSI.CAdES.detached.                                                           |
 | `NEXT_PUBLIC_UPLOAD_TRANSPORT`               | The transport for file uploads (database or s3).                                                                                                        |
 | `NEXT_PRIVATE_UPLOAD_ENDPOINT`               | The endpoint for the S3 storage transport (for third-party S3-compatible providers).                                                                    |
 | `NEXT_PRIVATE_UPLOAD_FORCE_PATH_STYLE`       | Whether to force path-style URLs for the S3 storage transport.                                                                                          |

apps/documentation/pages/developers/self-hosting/signing-certificate.mdx

@@ -53,21 +53,15 @@ Have the Certificate Authority sign the Certificate Signing Request.
 
 Configure your instance to use the new certificate by configuring the following environment variables in your `.env` file:
 
-| Environment Variable                                           | Description                                                                                                                               |
-| :------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------- |
-| `NEXT_PRIVATE_SIGNING_TRANSPORT`                               | The transport used for document signing. Available options: local (default), gcloud-hsm                                                   |
-| `NEXT_PRIVATE_SIGNING_PASSPHRASE`                              | The passphrase for the local file-based signing transport. This field is optional.                                                        |
-| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH`                         | The local file path to the .p12 file to use for the local signing transport. This field is optional.                                      |
-| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS`                     | The base64-encoded contents of the .p12 file to use for the local signing transport. This field is optional.                              |
-| `NEXT_PRIVATE_SIGNING_GCLOUD_HSM_KEY_PATH`                     | The Google Cloud HSM key path for the gcloud-hsm signing transport. This field is optional.                                               |
-| `NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_PATH`         | The path to the Google Cloud HSM public certificate file to use for the gcloud-hsm signing transport. This field is optional.             |
-| `NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_CONTENTS`     | The base64-encoded contents of the Google Cloud HSM public certificate file for the gcloud-hsm signing transport. This field is optional. |
-| `NEXT_PRIVATE_SIGNING_GCLOUD_APPLICATION_CREDENTIALS_CONTENTS` | The base64-encoded Google Cloud Credentials for the gcloud-hsm signing transport. This field is optional.                                 |
-| `NEXT_PRIVATE_SIGNING_GCLOUD_HSM_CERT_CHAIN_FILE_PATH`         | The path to the certificate chain file for the gcloud-hsm signing transport. This field is optional.                                      |
-| `NEXT_PRIVATE_SIGNING_GCLOUD_HSM_CERT_CHAIN_CONTENTS`          | The base64-encoded contents of the certificate chain for the gcloud-hsm signing transport. This field is optional.                        |
-| `NEXT_PRIVATE_SIGNING_GCLOUD_HSM_SECRET_MANAGER_CERT_PATH`     | The Google Secret Manager path to retrieve the certificate for the gcloud-hsm signing transport. This field is optional.                  |
-| `NEXT_PRIVATE_SIGNING_TIMESTAMP_AUTHORITY`                     | Comma-separated list of timestamp authority URLs for PDF signing. Enables LTV and archival timestamps. This field is optional.            |
-| `NEXT_PUBLIC_SIGNING_CONTACT_INFO`                             | Contact info to embed in PDF signatures. Defaults to the webapp URL. This field is optional.                                              |
-| `NEXT_PRIVATE_USE_LEGACY_SIGNING_SUBFILTER`                    | Set to "true" to use the legacy adbe.pkcs7.detached subfilter instead of ETSI.CAdES.detached. This field is optional.                     |
+| Environment Variable                                            | Description                                                                                                                               |
+| :-------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------- |
+| `NEXT_PRIVATE_SIGNING_TRANSPORT`                                | The transport used for document signing. Available options: local (default), gcloud-hsm                                                   |
+| `NEXT_PRIVATE_SIGNING_PASSPHRASE`                               | The passphrase for the local file-based signing transport. This field is optional.                                                        |
+| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH`                          | The local file path to the .p12 file to use for the local signing transport. This field is optional.                                      |
+| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS`                      | The base64-encoded contents of the .p12 file to use for the local signing transport. This field is optional.                              |
+| `NEXT_PRIVATE_SIGNING_GCLOUD_HSM_KEY_PATH`                      | The Google Cloud HSM key path for the gcloud-hsm signing transport. This field is optional.                                               |
+| `NEXT_PRIVATE_SIGNING_GCLOUD_HSM _PUBLIC_CRT_FILE_PATH`         | The path to the Google Cloud HSM public certificate file to use for the gcloud-hsm signing transport. This field is optional.             |
+| `NEXT_PRIVATE_SIGNING_GCLOUD_HSM _PUBLIC_CRT_FILE_CONTENTS`     | The base64-encoded contents of the Google Cloud HSM public certificate file for the gcloud-hsm signing transport. This field is optional. |
+| `NEXT_PRIVATE_SIGNING_GCLOUD_ APPLICATION_CREDENTIALS_CONTENTS` | The Google Cloud Credentials file path for the gcloud-hsm signing transport. This field is optional.                                      |
 
 </Steps>

apps/documentation/pages/developers/webhooks.mdx

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

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

@@ -3,8 +3,6 @@ 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/default-recipients.mdx

@@ -1,45 +0,0 @@
----
-title: Default Document Recipients
-description: Learn how to set default recipients with various roles for your documents.
----
-
-import { Callout, Steps } from 'nextra/components';
-
-# Default Document Recipients
-
-Documenso allows you to set default recipients for your documents. This is useful when you require specific recipients to be added to every document you send.
-
-You can add default recipients with the same roles as the recipients you can add when sending a document:
-
-- **Signer** - The recipient will be required to sign the document.
-- **Approver** - The recipient will be required to approve the document.
-- **Viewer** - The recipient will be required to view the document.
-- **CC** - The recipient will receive a copy of the document.
-
-You can set default recipients at the organisation or team level.
-
-### Organisation level
-
-To set default recipients at the organisation level, navigate to the organisation settings page and click the "Document" tab under the "Preferences" section.
-
-Then scroll down to the "Default Recipients" section and add the recipients you want to be included in every document you send.
-
-![A screenshot of the organisation's default recipients page](/default-recipients/organisation-default-recipients-select-step.webp)
-
-The recipients are added with the "CC" role by default, but you can select a different role for each recipient.
-
-![A screenshot of the organisation's default recipients page when selecting the role of the recipient](/default-recipients/organisation-default-recipients-role-step.webp)
-
-### Team level
-
-Setting the default recipients at the team level follows the same process as setting them at the organisation level.
-
-<Callout type="info">
-  Setting the default recipients at the team level will override organisation-level defaults.
-</Callout>
-
-To set default recipients at the team level, navigate to the team settings page and click the "Document" tab under the "Preferences" section.
-
-Then scroll down to the "Default Recipients" section. By default, the team will inherit the default recipients from the organisation. You can override these defaults by adding the recipients you want to be added to every document you send.
-
-![A screenshot of the team's default recipients page](/default-recipients/team-default-recipients.webp)

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

@@ -1,179 +0,0 @@
----
-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,41 +7,28 @@ import { Callout } from 'nextra/components';
 
 # Fair Use Policy
 
-We like to overdeliver, but we cannot overcommit.
+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.
 
-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.
+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:
 
 ### Spirit of the Plan
 
-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.
+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.
 
 <Callout type="info">
-  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.
+  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.
 </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
-- Use the API and automation tools to automate your signing workflows
-- Experiment with plans and integrations while testing what you want to build
+- 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
 
 ### DON'T
 
-- 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
+- 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

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

@@ -7,51 +7,20 @@ 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,7 +3,6 @@ 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';
@@ -23,11 +22,7 @@ import { SubscriptionClaimForm } from '../forms/subscription-claim-form';
 
 export type CreateClaimFormValues = z.infer<typeof ZCreateSubscriptionClaimRequestSchema>;
 
-type ClaimCreateDialogProps = {
-  licenseFlags?: TLicenseClaim;
-};
-
-export const ClaimCreateDialog = ({ licenseFlags }: ClaimCreateDialogProps) => {
+export const ClaimCreateDialog = () => {
   const { t } = useLingui();
   const { toast } = useToast();
 
@@ -72,7 +67,6 @@ export const ClaimCreateDialog = ({ licenseFlags }: ClaimCreateDialogProps) => {
             ...generateDefaultSubscriptionClaim(),
           }}
           onFormSubmit={createClaim}
-          licenseFlags={licenseFlags}
           formSubmitTrigger={
             <DialogFooter>
               <Button

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

@@ -2,7 +2,6 @@ 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';
@@ -22,10 +21,9 @@ import { SubscriptionClaimForm } from '../forms/subscription-claim-form';
 export type ClaimUpdateDialogProps = {
   claim: TFindSubscriptionClaimsResponse['data'][number];
   trigger: React.ReactNode;
-  licenseFlags?: TLicenseClaim;
 };
 
-export const ClaimUpdateDialog = ({ claim, trigger, licenseFlags }: ClaimUpdateDialogProps) => {
+export const ClaimUpdateDialog = ({ claim, trigger }: ClaimUpdateDialogProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
 
@@ -71,7 +69,6 @@ export const ClaimUpdateDialog = ({ claim, trigger, licenseFlags }: ClaimUpdateD
               data,
             })
           }
-          licenseFlags={licenseFlags}
           formSubmitTrigger={
             <DialogFooter>
               <Button

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

@@ -1,5 +1,3 @@
-import { useRef } from 'react';
-
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
@@ -7,7 +5,6 @@ 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,
@@ -16,6 +13,7 @@ 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';
@@ -40,8 +38,6 @@ export const DocumentDuplicateDialog = ({
 
   const team = useCurrentTeam();
 
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-
   const { data: envelopeItemsPayload, isLoading: isLoadingEnvelopeItems } =
     trpcReact.envelope.item.getManyByToken.useQuery(
       {
@@ -99,13 +95,12 @@ export const DocumentDuplicateDialog = ({
             </h1>
           </div>
         ) : (
-          <div ref={scrollContainerRef} className="h-[50vh] overflow-y-scroll p-2">
-            <PDFViewer
+          <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll">
+            <PDFViewerLazy
               key={envelopeItems[0].id}
               envelopeItem={envelopeItems[0]}
               token={undefined}
-              version="initial"
-              scrollParentRef={scrollContainerRef}
+              version="original"
             />
           </div>
         )}

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

@@ -1,215 +0,0 @@
-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

@@ -3,7 +3,13 @@ import { useEffect, useMemo, useState } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
-import { DocumentDistributionMethod, DocumentStatus, EnvelopeType } from '@prisma/client';
+import {
+  DocumentDistributionMethod,
+  DocumentStatus,
+  EnvelopeType,
+  FieldType,
+  RecipientRole,
+} from '@prisma/client';
 import { AnimatePresence, motion } from 'framer-motion';
 import { InfoIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
@@ -13,9 +19,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';
 import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
 import { cn } from '@documenso/ui/lib/utils';
@@ -117,15 +121,10 @@ export const EnvelopeDistributeDialog = ({
   } = form;
 
   const { data: emailData, isLoading: isLoadingEmails } =
-    trpc.enterprise.organisation.email.find.useQuery(
-      {
-        organisationId: organisation.id,
-        perPage: 100,
-      },
-      {
-        ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-      },
-    );
+    trpc.enterprise.organisation.email.find.useQuery({
+      organisationId: organisation.id,
+      perPage: 100,
+    });
 
   const emails = emailData?.data || [];
 
@@ -141,7 +140,14 @@ export const EnvelopeDistributeDialog = ({
   );
 
   const recipientsMissingSignatureFields = useMemo(
-    () => getRecipientsWithMissingFields(recipientsWithIndex, envelope.fields),
+    () =>
+      recipientsWithIndex.filter(
+        (recipient) =>
+          recipient.role === RecipientRole.SIGNER &&
+          !envelope.fields.some(
+            (field) => field.type === FieldType.SIGNATURE && field.recipientId === recipient.id,
+          ),
+      ),
     [recipientsWithIndex, envelope.fields],
   );
 

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

@@ -1,170 +0,0 @@
-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

@@ -1,256 +0,0 @@
-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/passkey-create-dialog.tsx

@@ -73,9 +73,7 @@ export const PasskeyCreateDialog = ({ trigger, onSuccess, ...props }: PasskeyCre
     try {
       const passkeyRegistrationOptions = await createPasskeyRegistrationOptions();
 
-      const registrationResult = await startRegistration({
-        optionsJSON: passkeyRegistrationOptions,
-      });
+      const registrationResult = await startRegistration(passkeyRegistrationOptions);
 
       await createPasskey({
         passkeyName,

apps/remix/app/components/dialogs/sign-field-checkbox-dialog.tsx

@@ -82,7 +82,9 @@ export const SignFieldCheckboxDialog = createCallable<
     <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
       <DialogContent position="center">
         <DialogHeader>
-          <DialogTitle>{fieldMeta.label || <Trans>Select Options</Trans>}</DialogTitle>
+          <DialogTitle>
+            <Trans>Sign Checkbox Field</Trans>
+          </DialogTitle>
 
           <DialogDescription
             className={cn('mt-4', {
@@ -141,7 +143,7 @@ export const SignFieldCheckboxDialog = createCallable<
                             <div className="flex items-center">
                               <Checkbox
                                 id={`checkbox-value-${index}`}
-                                className="h-5 w-5 border-foreground/30 data-[state=checked]:bg-primary"
+                                className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
                                 checked={field.value.checked}
                                 onCheckedChange={(checked) => {
                                   field.onChange({
@@ -152,7 +154,7 @@ export const SignFieldCheckboxDialog = createCallable<
                               />
 
                               <label
-                                className="ml-2 w-full text-sm text-muted-foreground"
+                                className="text-muted-foreground ml-2 w-full text-sm"
                                 htmlFor={`checkbox-value-${index}`}
                               >
                                 {value.value}
@@ -172,7 +174,7 @@ export const SignFieldCheckboxDialog = createCallable<
                 </Button>
 
                 <Button type="submit">
-                  <Trans>Confirm</Trans>
+                  <Trans>Sign</Trans>
                 </Button>
               </DialogFooter>
             </fieldset>

apps/remix/app/components/dialogs/sign-field-email-dialog.tsx

@@ -50,11 +50,11 @@ export const SignFieldEmailDialog = createCallable<SignFieldEmailDialogProps, st
         <DialogContent>
           <DialogHeader>
             <DialogTitle>
-              <Trans>Enter Email</Trans>
+              <Trans>Sign Email</Trans>
             </DialogTitle>
 
             <DialogDescription className="mt-4">
-              <Trans>Please enter your email address</Trans>
+              <Trans>Sign your email into the field</Trans>
             </DialogDescription>
           </DialogHeader>
 
@@ -83,7 +83,7 @@ export const SignFieldEmailDialog = createCallable<SignFieldEmailDialogProps, st
                   </Button>
 
                   <Button type="submit">
-                    <Trans>Enter</Trans>
+                    <Trans>Sign</Trans>
                   </Button>
                 </DialogFooter>
               </fieldset>

apps/remix/app/components/dialogs/sign-field-initials-dialog.tsx

@@ -48,11 +48,11 @@ export const SignFieldInitialsDialog = createCallable<SignFieldInitialsDialogPro
         <DialogContent>
           <DialogHeader>
             <DialogTitle>
-              <Trans>Enter Initials</Trans>
+              <Trans>Sign Initials</Trans>
             </DialogTitle>
 
             <DialogDescription className="mt-4">
-              <Trans>Please enter your initials</Trans>
+              <Trans>Sign your initials into the field</Trans>
             </DialogDescription>
           </DialogHeader>
 
@@ -84,7 +84,7 @@ export const SignFieldInitialsDialog = createCallable<SignFieldInitialsDialogPro
                   </Button>
 
                   <Button type="submit">
-                    <Trans>Enter</Trans>
+                    <Trans>Sign</Trans>
                   </Button>
                 </DialogFooter>
               </fieldset>

apps/remix/app/components/dialogs/sign-field-name-dialog.tsx

@@ -47,11 +47,11 @@ export const SignFieldNameDialog = createCallable<SignFieldNameDialogProps, stri
         <DialogContent>
           <DialogHeader>
             <DialogTitle>
-              <Trans>Enter Name</Trans>
+              <Trans>Sign Name</Trans>
             </DialogTitle>
 
             <DialogDescription className="mt-4">
-              <Trans>Please enter your full name</Trans>
+              <Trans>Sign your full name into the field</Trans>
             </DialogDescription>
           </DialogHeader>
 
@@ -80,7 +80,7 @@ export const SignFieldNameDialog = createCallable<SignFieldNameDialogProps, stri
                   </Button>
 
                   <Button type="submit">
-                    <Trans>Enter</Trans>
+                    <Trans>Sign</Trans>
                   </Button>
                 </DialogFooter>
               </fieldset>

apps/remix/app/components/dialogs/sign-field-number-dialog.tsx

@@ -22,6 +22,7 @@ import {
   FormControl,
   FormField,
   FormItem,
+  FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
@@ -106,10 +107,12 @@ export const SignFieldNumberDialog = createCallable<SignFieldNumberDialogProps,
       <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>{fieldMeta.label || <Trans>Enter Number</Trans>}</DialogTitle>
+            <DialogTitle>
+              <Trans>Sign Number Field</Trans>
+            </DialogTitle>
 
             <DialogDescription className="mt-4">
-              <Trans>Please enter a number</Trans>
+              <Trans>Insert a value into the number field</Trans>
             </DialogDescription>
           </DialogHeader>
 
@@ -124,6 +127,8 @@ export const SignFieldNumberDialog = createCallable<SignFieldNumberDialogProps,
                   name="number"
                   render={({ field, fieldState }) => (
                     <FormItem>
+                      {fieldMeta.label && <FormLabel>{fieldMeta.label}</FormLabel>}
+
                       <FormControl>
                         <Input
                           placeholder={fieldMeta.placeholder ?? t`Enter your number here`}
@@ -145,7 +150,7 @@ export const SignFieldNumberDialog = createCallable<SignFieldNumberDialogProps,
                   </Button>
 
                   <Button type="submit">
-                    <Trans>Enter</Trans>
+                    <Trans>Sign</Trans>
                   </Button>
                 </DialogFooter>
               </fieldset>

apps/remix/app/components/dialogs/sign-field-text-dialog.tsx

@@ -12,7 +12,6 @@ import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -52,10 +51,6 @@ export const SignFieldTextDialog = createCallable<SignFieldTextDialogProps, stri
         <DialogContent>
           <DialogHeader>
             <DialogTitle>{fieldMeta?.label || <Trans>Enter Text</Trans>}</DialogTitle>
-
-            <DialogDescription className="mt-4">
-              <Trans>Please enter a value</Trans>
-            </DialogDescription>
           </DialogHeader>
 
           <Form {...form}>

apps/remix/app/components/dialogs/template-direct-link-dialog.tsx

@@ -54,8 +54,6 @@ type TemplateDirectLinkDialogProps = {
   directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
   recipients: Recipient[];
   trigger?: React.ReactNode;
-  onCreateSuccess?: () => Promise<void> | void;
-  onDeleteSuccess?: () => Promise<void> | void;
 };
 
 type TemplateDirectLinkStep = 'ONBOARD' | 'SELECT_RECIPIENT' | 'MANAGE' | 'CONFIRM_DELETE';
@@ -65,8 +63,6 @@ export const TemplateDirectLinkDialog = ({
   directLink,
   recipients,
   trigger,
-  onCreateSuccess,
-  onDeleteSuccess,
 }: TemplateDirectLinkDialogProps) => {
   const { toast } = useToast();
   const { quota, remaining } = useLimits();
@@ -101,7 +97,6 @@ export const TemplateDirectLinkDialog = ({
   } = trpcReact.template.createTemplateDirectLink.useMutation({
     onSuccess: async (data) => {
       await revalidate();
-      await onCreateSuccess?.();
 
       setToken(data.token);
       setIsEnabled(data.enabled);
@@ -147,7 +142,6 @@ export const TemplateDirectLinkDialog = ({
     trpcReact.template.deleteTemplateDirectLink.useMutation({
       onSuccess: async () => {
         await revalidate();
-        await onDeleteSuccess?.();
 
         setOpen(false);
         setToken(null);
@@ -240,7 +234,7 @@ export const TemplateDirectLinkDialog = ({
                         </div>
 
                         <h3 className="font-semibold">{_(step.title)}</h3>
-                        <p className="mt-1 text-sm text-muted-foreground">{_(step.description)}</p>
+                        <p className="text-muted-foreground mt-1 text-sm">{_(step.description)}</p>
                       </li>
                     ))}
                   </ul>
@@ -326,13 +320,13 @@ export const TemplateDirectLinkDialog = ({
                             onClick={async () => onRecipientTableRowClick(row.id)}
                           >
                             <TableCell>
-                              <div className="text-sm text-muted-foreground">
+                              <div className="text-muted-foreground text-sm">
                                 <p>{row.name}</p>
-                                <p className="text-xs text-muted-foreground/70">{row.email}</p>
+                                <p className="text-muted-foreground/70 text-xs">{row.email}</p>
                               </div>
                             </TableCell>
 
-                            <TableCell className="text-sm text-muted-foreground">
+                            <TableCell className="text-muted-foreground text-sm">
                               {_(RECIPIENT_ROLES_DESCRIPTION[row.role].roleName)}
                             </TableCell>
 
@@ -356,7 +350,7 @@ export const TemplateDirectLinkDialog = ({
                     <DialogFooter className="mx-auto">
                       <div className="flex flex-col items-center justify-center">
                         {validDirectTemplateRecipients.length !== 0 && (
-                          <p className="text-sm text-muted-foreground">
+                          <p className="text-muted-foreground text-sm">
                             <Trans>Or</Trans>
                           </p>
                         )}
@@ -398,7 +392,7 @@ export const TemplateDirectLinkDialog = ({
                           <TooltipTrigger tabIndex={-1} className="ml-2">
                             <InfoIcon className="h-4 w-4" />
                           </TooltipTrigger>
-                          <TooltipContent className="z-9999 max-w-md p-4 text-foreground">
+                          <TooltipContent className="text-foreground z-9999 max-w-md p-4">
                             <Trans>
                               Disabling direct link signing will prevent anyone from accessing the
                               link.

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

@@ -8,8 +8,6 @@ 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 {
@@ -54,17 +52,12 @@ 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
@@ -151,7 +144,7 @@ export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocum
                     <div
                       {...getRootProps()}
                       className={cn(
-                        'relative flex min-h-[160px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-border bg-background transition',
+                        'border-border bg-background relative flex min-h-[160px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed transition',
                         {
                           'border-primary/50 bg-primary/5': isDragActive,
                           'hover:bg-muted/30':
@@ -200,21 +193,21 @@ export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocum
                   </FormControl>
 
                   {isLoading && (
-                    <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 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>
                   )}
                 </div>
               ) : (
                 <div className="mt-2 rounded-lg border p-4">
                   <div className="flex items-center gap-x-4">
-                    <div className="flex h-12 w-12 items-center justify-center rounded-md bg-primary/10 text-primary">
+                    <div className="bg-primary/10 text-primary flex h-12 w-12 items-center justify-center rounded-md">
                       <FileText className="h-6 w-6" />
                     </div>
 
                     <div className="flex-1">
                       <div className="text-sm font-medium">{documentData.name}</div>
-                      <div className="text-xs text-muted-foreground">
+                      <div className="text-muted-foreground text-xs">
                         {formatFileSize(documentData.size)}
                       </div>
                     </div>

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

@@ -46,13 +46,6 @@ 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,6 +5,7 @@ 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';
@@ -15,7 +16,6 @@ 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,6 +24,7 @@ import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/type
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { FieldSelector } from '@documenso/ui/primitives/field-selector';
 import { Form } from '@documenso/ui/primitives/form/form';
+import { 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';
@@ -83,7 +84,7 @@ export const ConfigureFieldsView = ({
     };
   }, []);
 
-  const overrideImages = useMemo(() => {
+  const normalizedDocumentData = useMemo(() => {
     if (envelopeItem) {
       return undefined;
     }
@@ -92,7 +93,7 @@ export const ConfigureFieldsView = ({
       return undefined;
     }
 
-    return configData.documentData.images;
+    return base64.encode(configData.documentData.data);
   }, [configData.documentData]);
 
   const normalizedEnvelopeItem = useMemo(() => {
@@ -545,13 +546,12 @@ export const ConfigureFieldsView = ({
 
             <Form {...form}>
               <div>
-                <PDFViewer
+                <PDFViewerLazy
                   presignToken={presignToken}
-                  overrideImages={overrideImages}
+                  overrideData={normalizedDocumentData}
                   envelopeItem={normalizedEnvelopeItem}
                   token={undefined}
-                  version="current"
-                  scrollParentRef="window"
+                  version="signed"
                 />
 
                 <ElementVisible

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

@@ -3,14 +3,8 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import {
-  type DocumentMeta,
-  type EnvelopeItem,
-  type Field,
-  FieldType,
-  type Recipient,
-  type Signature,
-} from '@prisma/client';
+import type { DocumentMeta, EnvelopeItem, Recipient, Signature } from '@prisma/client';
+import { type Field, FieldType } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { useSearchParams } from 'react-router';
@@ -24,18 +18,17 @@ import {
   isRequiredField,
 } from '@documenso/lib/utils/advanced-fields-helpers';
 import { validateFieldsInserted } from '@documenso/lib/utils/fields';
-import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-field';
 import { trpc } from '@documenso/trpc/react';
 import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   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';
 
@@ -103,7 +96,7 @@ export const EmbedDirectTemplateClientPage = ({
 
   const highestPendingPageNumber = Math.max(...pendingFields.map((field) => field.page));
 
-  const hasSignatureField = localFields.some((field) => isSignatureFieldType(field.type));
+  const hasSignatureField = localFields.some((field) => field.type === FieldType.SIGNATURE);
 
   const signatureValid = !hasSignatureField || (signature && signature.trim() !== '');
 
@@ -341,11 +334,10 @@ export const EmbedDirectTemplateClientPage = ({
       <div className="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
         {/* Viewer */}
         <div className="flex-1">
-          <PDFViewer
+          <PDFViewerLazy
             envelopeItem={envelopeItems[0]}
             token={recipient.token}
-            version="current"
-            scrollParentRef="window"
+            version="signed"
             onDocumentLoad={() => setHasDocumentLoaded(true)}
           />
         </div>

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

@@ -4,14 +4,13 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { DocumentMeta, EnvelopeItem } from '@prisma/client';
-import { type Field, RecipientRole, SigningStatus } from '@prisma/client';
+import { type Field, FieldType, RecipientRole, SigningStatus } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { validateFieldsInserted } from '@documenso/lib/utils/fields';
-import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-field';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { trpc } from '@documenso/trpc/react';
 import {
@@ -19,11 +18,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';
@@ -116,7 +115,7 @@ export const EmbedSignDocumentV1ClientPage = ({
     [fields],
   );
 
-  const hasSignatureField = fields.some((field) => isSignatureFieldType(field.type));
+  const hasSignatureField = fields.some((field) => field.type === FieldType.SIGNATURE);
 
   const signatureValid = !hasSignatureField || (signature && signature.trim() !== '');
 
@@ -287,11 +286,10 @@ export const EmbedSignDocumentV1ClientPage = ({
         <div className="embed--DocumentContainer relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
           {/* Viewer */}
           <div className="embed--DocumentViewer flex-1">
-            <PDFViewer
+            <PDFViewerLazy
               envelopeItem={envelopeItems[0]}
               token={token}
-              version="current"
-              scrollParentRef="window"
+              version="signed"
               onDocumentLoad={() => setHasDocumentLoaded(true)}
             />
           </div>

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

@@ -1,15 +1,14 @@
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { DocumentStatus, SigningStatus } from '@prisma/client';
+import { DocumentStatus, FieldType, SigningStatus } from '@prisma/client';
 import { Loader, LucideChevronDown, LucideChevronUp, X } from 'lucide-react';
 import { P, match } from 'ts-pattern';
 
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-field';
 import { trpc } from '@documenso/trpc/react';
 import type {
   TRemovedSignedFieldWithTokenMutationSchema,
@@ -17,12 +16,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,8 +65,6 @@ 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);
@@ -86,7 +83,7 @@ export const MultiSignDocumentSigningView = ({
   const { mutateAsync: completeDocumentWithToken } =
     trpc.recipient.completeDocumentWithToken.useMutation();
 
-  const hasSignatureField = document?.fields.some((field) => isSignatureFieldType(field.type));
+  const hasSignatureField = document?.fields.some((field) => field.type === FieldType.SIGNATURE);
 
   const [pendingFields, completedFields] = [
     document?.fields.filter((field) => field.recipient.signingStatus !== SigningStatus.SIGNED) ??
@@ -181,11 +178,7 @@ export const MultiSignDocumentSigningView = ({
 
   return (
     <div className="min-h-screen overflow-hidden bg-background">
-      <div
-        id="document-field-portal-root"
-        ref={scrollContainerRef}
-        className="relative h-full w-full overflow-y-auto p-8"
-      >
+      <div id="document-field-portal-root" className="relative h-full w-full overflow-y-auto p-8">
         {match({ isLoading, document })
           .with({ isLoading: true }, () => (
             <div className="flex min-h-[400px] w-full items-center justify-center">
@@ -232,11 +225,10 @@ export const MultiSignDocumentSigningView = ({
                     'md:mx-auto md:max-w-2xl': document.status === DocumentStatus.COMPLETED,
                   })}
                 >
-                  <PDFViewer
+                  <PDFViewerLazy
                     envelopeItem={document.envelopeItems[0]}
                     token={token}
-                    version="current"
-                    scrollParentRef={scrollContainerRef}
+                    version="signed"
                     onDocumentLoad={() => {
                       setHasDocumentLoaded(true);
                       onDocumentReady?.();

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

@@ -3,7 +3,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import type { TeamGlobalSettings } from '@prisma/client';
-import { DocumentVisibility, OrganisationType, type RecipientRole } from '@prisma/client';
+import { DocumentVisibility, OrganisationType } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -17,19 +17,14 @@ import {
   isValidLanguageCode,
 } from '@documenso/lib/constants/i18n';
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
-import type { TDefaultRecipients } from '@documenso/lib/types/default-recipients';
-import { ZDefaultRecipientsSchema } from '@documenso/lib/types/default-recipients';
 import {
   type TDocumentMetaDateFormat,
   ZDocumentMetaTimezoneSchema,
 } from '@documenso/lib/types/document-meta';
 import { isPersonalLayout } from '@documenso/lib/utils/organisations';
-import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
 import { DocumentSignatureSettingsTooltip } from '@documenso/ui/components/document/document-signature-settings-tooltip';
-import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
 import { Alert } from '@documenso/ui/primitives/alert';
-import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
 import { Combobox } from '@documenso/ui/primitives/combobox';
 import {
@@ -50,10 +45,6 @@ import {
   SelectValue,
 } from '@documenso/ui/primitives/select';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
-
-import { DefaultRecipientsMultiSelectCombobox } from '../general/default-recipients-multiselect-combobox';
-
 /**
  * Can't infer this from the schema since we need to keep the schema inside the component to allow
  * it to be dynamic.
@@ -67,7 +58,6 @@ export type TDocumentPreferencesFormSchema = {
   includeSigningCertificate: boolean | null;
   includeAuditLog: boolean | null;
   signatureTypes: DocumentSignatureType[];
-  defaultRecipients: TDefaultRecipients | null;
   delegateDocumentOwnership: boolean | null;
   aiFeaturesEnabled: boolean | null;
 };
@@ -84,7 +74,6 @@ type SettingsSubset = Pick<
   | 'typedSignatureEnabled'
   | 'uploadSignatureEnabled'
   | 'drawSignatureEnabled'
-  | 'defaultRecipients'
   | 'delegateDocumentOwnership'
   | 'aiFeaturesEnabled'
 >;
@@ -105,7 +94,6 @@ export const DocumentPreferencesForm = ({
   const { t } = useLingui();
   const { user, organisations } = useSession();
   const currentOrganisation = useCurrentOrganisation();
-  const optionalTeam = useOptionalCurrentTeam();
 
   const isPersonalLayoutMode = isPersonalLayout(organisations);
   const isPersonalOrganisation = currentOrganisation.type === OrganisationType.PERSONAL;
@@ -123,7 +111,6 @@ export const DocumentPreferencesForm = ({
     signatureTypes: z.array(z.nativeEnum(DocumentSignatureType)).min(canInherit ? 0 : 1, {
       message: msg`At least one signature type must be enabled`.id,
     }),
-    defaultRecipients: ZDefaultRecipientsSchema.nullable(),
     delegateDocumentOwnership: z.boolean().nullable(),
     aiFeaturesEnabled: z.boolean().nullable(),
   });
@@ -141,9 +128,6 @@ export const DocumentPreferencesForm = ({
       includeSigningCertificate: settings.includeSigningCertificate,
       includeAuditLog: settings.includeAuditLog,
       signatureTypes: extractTeamSignatureSettings({ ...settings }),
-      defaultRecipients: settings.defaultRecipients
-        ? ZDefaultRecipientsSchema.parse(settings.defaultRecipients)
-        : null,
       delegateDocumentOwnership: settings.delegateDocumentOwnership,
       aiFeaturesEnabled: settings.aiFeaturesEnabled,
     },
@@ -535,94 +519,6 @@ export const DocumentPreferencesForm = ({
             )}
           />
 
-          <FormField
-            control={form.control}
-            name="defaultRecipients"
-            render={({ field }) => {
-              const recipients = field.value ?? [];
-
-              return (
-                <FormItem className="flex-1">
-                  <FormLabel>
-                    <Trans>Default Recipients</Trans>
-                  </FormLabel>
-
-                  {canInherit && (
-                    <Select
-                      value={field.value === null ? '-1' : '0'}
-                      onValueChange={(value) => field.onChange(value === '-1' ? null : [])}
-                    >
-                      <SelectTrigger>
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value={'-1'}>
-                          <Trans>Inherit from organisation</Trans>
-                        </SelectItem>
-                        <SelectItem value={'0'}>
-                          <Trans>Override organisation settings</Trans>
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  )}
-
-                  {(field.value !== null || !canInherit) && (
-                    <div className="space-y-4">
-                      <DefaultRecipientsMultiSelectCombobox
-                        listValues={recipients}
-                        onChange={field.onChange}
-                        organisationId={!canInherit ? currentOrganisation.id : undefined}
-                        teamId={canInherit ? optionalTeam?.id : undefined}
-                      />
-
-                      {recipients.map((recipient, index) => {
-                        return (
-                          <div
-                            key={recipient.email}
-                            className="flex items-center justify-between gap-3 rounded-lg border p-3"
-                          >
-                            <AvatarWithText
-                              avatarFallback={recipientAbbreviation(recipient)}
-                              primaryText={
-                                <span className="text-sm font-medium">
-                                  {recipient.name || recipient.email}
-                                </span>
-                              }
-                              secondaryText={
-                                recipient.name ? (
-                                  <span className="text-xs text-muted-foreground">
-                                    {recipient.email}
-                                  </span>
-                                ) : undefined
-                              }
-                              className="flex-1"
-                            />
-                            <div className="flex items-center gap-2">
-                              <RecipientRoleSelect
-                                value={recipient.role}
-                                onValueChange={(role: RecipientRole) => {
-                                  field.onChange(
-                                    recipients.map((recipient, idx) =>
-                                      idx === index ? { ...recipient, role } : recipient,
-                                    ),
-                                  );
-                                }}
-                              />
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  )}
-
-                  <FormDescription>
-                    <Trans>Recipients that will be automatically added to new documents.</Trans>
-                  </FormDescription>
-                </FormItem>
-              );
-            }}
-          />
-
           <FormField
             control={form.control}
             name="delegateDocumentOwnership"

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

@@ -171,7 +171,7 @@ export const SignInForm = ({
 
       const { options, sessionId } = await createPasskeySigninOptions();
 
-      const credential = await startAuthentication({ optionsJSON: options });
+      const credential = await startAuthentication(options);
 
       await authClient.passkey.signIn({
         credential: JSON.stringify(credential),

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

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

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

@@ -2,13 +2,10 @@ 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,
@@ -27,22 +24,15 @@ 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: {
@@ -152,59 +142,34 @@ 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, isEnterprise }) => {
-                  const isRestrictedFeature =
-                    isEnterprise && !licenseFlags?.[key as keyof TLicenseClaim]; // eslint-disable-line @typescript-eslint/consistent-type-assertions
+              {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}
+                          />
 
-                  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>
-                      )}
-                    />
-                  );
-                },
-              )}
+                          <label
+                            className="text-muted-foreground ml-2 flex flex-row items-center text-sm"
+                            htmlFor={`flag-${key}`}
+                          >
+                            {label}
+                          </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

@@ -1,212 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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,120 +0,0 @@
-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[];
-  onChange: (_values: TDefaultRecipient[]) => void;
-  teamId?: number;
-  organisationId?: string;
-};
-
-export const DefaultRecipientsMultiSelectCombobox = ({
-  listValues,
-  onChange,
-  teamId,
-  organisationId,
-}: DefaultRecipientsMultiSelectComboboxProps) => {
-  const { _ } = useLingui();
-  const { t } = useLinguiMacro();
-  const { toast } = useToast();
-
-  const { data: organisationData, isLoading: isLoadingOrganisation } =
-    trpc.organisation.member.find.useQuery(
-      {
-        organisationId: organisationId!,
-        query: '',
-        page: 1,
-        perPage: 100,
-      },
-      {
-        enabled: !!organisationId,
-      },
-    );
-
-  const { data: teamData, isLoading: isLoadingTeam } = trpc.team.member.find.useQuery(
-    {
-      teamId: teamId!,
-      query: '',
-      page: 1,
-      perPage: 100,
-    },
-    {
-      enabled: !!teamId,
-    },
-  );
-
-  const members = organisationId ? organisationData?.data : teamData?.data;
-  const isLoading = organisationId ? isLoadingOrganisation : isLoadingTeam;
-
-  const options = members?.map((member) => ({
-    value: member.email,
-    label: member.name ? `${member.name} (${member.email})` : member.email,
-  }));
-
-  const value = listValues.map((recipient) => ({
-    value: recipient.email,
-    label: recipient.name ? `${recipient.name} (${recipient.email})` : recipient.email,
-  }));
-
-  const onSelectionChange = (selected: Option[]) => {
-    const invalidEmails = selected.filter(
-      (option) => !isRecipientEmailValidForSending({ email: option.value }),
-    );
-
-    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 or add recipients`) }}
-      options={options}
-      value={value}
-      onChange={onSelectionChange}
-      placeholder={_(msg`Select or enter email address`)}
-      hideClearAllButton
-      hidePlaceholderWhenSelected
-      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,12 +151,11 @@ export const DirectTemplatePageView = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewer
+          <PDFViewerLazy
             key={template.id}
             envelopeItem={template.envelopeItems[0]}
             token={directTemplateRecipient.token}
-            version="current"
-            scrollParentRef="window"
+            version="signed"
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

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

@@ -90,7 +90,7 @@ export const DocumentSigningAuthPasskey = ({
         preferredPasskeyId: passkeyId,
       });
 
-      const authenticationResponse = await startAuthentication({ optionsJSON: options });
+      const authenticationResponse = await startAuthentication(options);
 
       await onReauthFormSubmit({
         type: DocumentAuth.PASSKEY,
@@ -146,7 +146,7 @@ export const DocumentSigningAuthPasskey = ({
   if (passkeyData.isInitialLoading || (passkeyData.isError && passkeyData.passkeys.length === 0)) {
     return (
       <div className="flex h-28 items-center justify-center">
-        <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
+        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
       </div>
     );
   }

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

@@ -3,7 +3,7 @@ import { useId, useMemo, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { type Field, type Recipient, RecipientRole } from '@prisma/client';
+import { type Field, FieldType, type Recipient, RecipientRole } from '@prisma/client';
 import { Controller, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 
@@ -11,7 +11,6 @@ import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-
 import type { TRecipientAccessAuth } from '@documenso/lib/types/document-auth';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { sortFieldsByPosition } from '@documenso/lib/utils/fields';
-import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-field';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { Button } from '@documenso/ui/primitives/button';
@@ -79,7 +78,7 @@ export const DocumentSigningForm = ({
     [fields],
   );
 
-  const hasSignatureField = fields.some((field) => isSignatureFieldType(field.type));
+  const hasSignatureField = fields.some((field) => field.type === FieldType.SIGNATURE);
 
   const uninsertedFields = useMemo(() => {
     return sortFieldsByPosition(fieldsRequiringValidation.filter((field) => !field.inserted));

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,12 +274,11 @@ export const DocumentSigningPageViewV1 = ({
           <div className="flex-1">
             <Card className="rounded-xl before:rounded-xl" gradient>
               <CardContent className="p-2">
-                <PDFViewer
+                <PDFViewerLazy
                   key={document.envelopeItems[0].id}
                   envelopeItem={document.envelopeItems[0]}
                   token={recipient.token}
-                  version="current"
-                  scrollParentRef="window"
+                  version="signed"
                 />
               </CardContent>
             </Card>

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

@@ -1,4 +1,4 @@
-import { lazy, useMemo, useRef } from 'react';
+import { lazy, useMemo } from 'react';
 
 import { Plural, Trans } from '@lingui/react/macro';
 import { EnvelopeType, RecipientRole } from '@prisma/client';
@@ -8,9 +8,8 @@ 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 { EnvelopePdfViewer } from '@documenso/ui/components/pdf-viewer/envelope-pdf-viewer';
+import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
 
@@ -41,8 +40,6 @@ const EnvelopeSignerPageRenderer = lazy(
 export const DocumentSigningPageViewV2 = () => {
   const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
 
-  const scrollableContainerRef = useRef<HTMLDivElement>(null);
-
   const {
     isDirectTemplate,
     envelope,
@@ -202,10 +199,7 @@ export const DocumentSigningPageViewV2 = () => {
           </div>
         </div>
 
-        <div
-          className="embed--DocumentContainer flex-1 overflow-y-auto"
-          ref={scrollableContainerRef}
-        >
+        <div className="embed--DocumentContainer flex-1 overflow-y-auto">
           <div className="flex flex-col">
             {/* Horizontal envelope item selector */}
             {envelopeItems.length > 1 && (
@@ -234,16 +228,15 @@ 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 ? (
-                <EnvelopePdfViewer
+                <PDFViewerKonvaLazy
+                  renderer="signing"
                   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 document selected</Trans>
+                    <Trans>No documents found</Trans>
                   </p>
                 </div>
               )}

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

@@ -8,7 +8,6 @@ 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';
@@ -50,16 +49,9 @@ export const DocumentAttachmentsPopover = ({
 
   const utils = trpc.useUtils();
 
-  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 { data: attachments } = trpc.envelope.attachment.find.useQuery({
+    envelopeId,
+  });
 
   const { mutateAsync: createAttachment, isPending: isCreating } =
     trpc.envelope.attachment.create.useMutation({
@@ -151,7 +143,7 @@ export const DocumentAttachmentsPopover = ({
             <h4 className="font-medium">
               <Trans>Attachments</Trans>
             </h4>
-            <p className="mt-1 text-sm text-muted-foreground">
+            <p className="text-muted-foreground mt-1 text-sm">
               <Trans>Add links to relevant documents or resources.</Trans>
             </p>
           </div>
@@ -161,7 +153,7 @@ export const DocumentAttachmentsPopover = ({
               {attachments?.data.map((attachment) => (
                 <div
                   key={attachment.id}
-                  className="flex items-center justify-between rounded-md border border-border p-2"
+                  className="border-border flex items-center justify-between rounded-md border p-2"
                 >
                   <div className="min-w-0 flex-1">
                     <p className="truncate text-sm font-medium">{attachment.label}</p>
@@ -169,7 +161,7 @@ export const DocumentAttachmentsPopover = ({
                       href={attachment.data}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="truncate text-xs text-muted-foreground underline hover:text-foreground"
+                      className="text-muted-foreground hover:text-foreground truncate text-xs underline"
                     >
                       {attachment.data}
                     </a>

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

@@ -3,8 +3,6 @@ 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';
@@ -27,15 +25,36 @@ export const DocumentAuditLogDownloadButton = ({
 
   const onDownloadAuditLogsClick = async () => {
     try {
-      const { data, envelopeTitle } = await downloadAuditLogs({ documentId });
+      const { url } = await downloadAuditLogs({ documentId });
 
-      const buffer = new Uint8Array(base64.decode(data));
-      const blob = new Blob([buffer], { type: 'application/pdf' });
-
-      downloadFile({
-        data: blob,
-        filename: `${envelopeTitle} - Audit Logs.pdf`,
+      const iframe = Object.assign(document.createElement('iframe'), {
+        src: url,
       });
+
+      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,8 +4,6 @@ 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';
@@ -31,15 +29,36 @@ export const DocumentCertificateDownloadButton = ({
 
   const onDownloadCertificatesClick = async () => {
     try {
-      const { data, envelopeTitle } = await downloadCertificate({ documentId });
+      const { url } = await downloadCertificate({ documentId });
 
-      const buffer = new Uint8Array(base64.decode(data));
-      const blob = new Blob([buffer], { type: 'application/pdf' });
-
-      downloadFile({
-        data: blob,
-        filename: `${envelopeTitle} - Certificate.pdf`,
+      const iframe = Object.assign(document.createElement('iframe'), {
+        src: url,
       });
+
+      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, useRef, useState } from 'react';
+import { lazy, useEffect, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { type DocumentData, DocumentStatus, type EnvelopeItem, EnvelopeType } from '@prisma/client';
@@ -9,11 +9,9 @@ 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 { EnvelopePdfViewer } from '@documenso/ui/components/pdf-viewer/envelope-pdf-viewer';
-import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
+import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -23,6 +21,7 @@ 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';
 
@@ -36,7 +35,7 @@ export type DocumentCertificateQRViewProps = {
   documentId: number;
   title: string;
   internalVersion: number;
-  envelopeItems: (EnvelopeItem & { documentData: Omit<DocumentData, 'metadata'> })[];
+  envelopeItems: (EnvelopeItem & { documentData: DocumentData })[];
   documentTeamUrl: string;
   recipientCount?: number;
   completedDate?: Date;
@@ -105,13 +104,11 @@ export const DocumentCertificateQRView = ({
 
       {internalVersion === 2 ? (
         <EnvelopeRenderProvider
-          version="current"
           envelope={{
-            id: envelopeItems[0].envelopeId,
+            envelopeItems,
             status: DocumentStatus.COMPLETED,
             type: EnvelopeType.DOCUMENT,
           }}
-          envelopeItems={envelopeItems}
           token={token}
         >
           <DocumentCertificateQrV2
@@ -152,12 +149,11 @@ export const DocumentCertificateQRView = ({
           </div>
 
           <div className="mt-12 w-full">
-            <PDFViewer
+            <PDFViewerLazy
               key={envelopeItems[0].id}
               envelopeItem={envelopeItems[0]}
               token={token}
-              version="current"
-              scrollParentRef="window"
+              version="signed"
             />
           </div>
         </>
@@ -179,9 +175,7 @@ const DocumentCertificateQrV2 = ({
   formattedDate,
   token,
 }: DocumentCertificateQrV2Props) => {
-  const { envelopeItems } = useCurrentEnvelopeRender();
-
-  const scrollableContainerRef = useRef<HTMLDivElement>(null);
+  const { currentEnvelopeItem, envelopeItems } = useCurrentEnvelopeRender();
 
   return (
     <div className="flex min-h-screen flex-col items-start">
@@ -213,14 +207,10 @@ const DocumentCertificateQrV2 = ({
         />
       </div>
 
-      <div className="mt-12 max-h-[80vh] w-full overflow-y-auto" ref={scrollableContainerRef}>
+      <div className="mt-12 w-full">
         <EnvelopeRendererFileSelector className="mb-4 p-0" fields={[]} secondaryOverride={''} />
 
-        <EnvelopePdfViewer
-          customPageRenderer={EnvelopeGenericPageRenderer}
-          scrollParentRef={scrollableContainerRef}
-          errorMessage={PDF_VIEWER_ERROR_MESSAGES.preview}
-        />
+        <PDFViewerKonvaLazy renderer="preview" customPageRenderer={EnvelopeGenericPageRenderer} />
       </div>
     </div>
   );

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

@@ -15,7 +15,6 @@ 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';
@@ -28,6 +27,7 @@ import { AddSubjectFormPartial } from '@documenso/ui/primitives/document-flow/ad
 import type { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -440,12 +440,11 @@ export const DocumentEditForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewer
+          <PDFViewerLazy
             key={document.envelopeItems[0].id}
             envelopeItem={document.envelopeItems[0]}
             token={undefined}
-            version="current"
-            scrollParentRef="window"
+            version="signed"
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

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

@@ -175,6 +175,15 @@ 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
@@ -269,13 +278,13 @@ export const EnvelopeEditorFieldDragDrop = ({
             onMouseDown={() => setSelectedField(field.type)}
             data-selected={selectedField === field.type ? true : undefined}
             className={cn(
-              'group flex h-12 cursor-pointer items-center justify-center rounded-lg border border-border px-4 transition-colors',
+              'border-border group flex h-12 cursor-pointer items-center justify-center rounded-lg border px-4 transition-colors',
               RECIPIENT_COLOR_STYLES[selectedRecipientColor].fieldButton,
             )}
           >
             <p
               className={cn(
-                'flex items-center justify-center gap-x-1.5 font-noto text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
+                'text-muted-foreground font-noto group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
                 field.className,
                 {
                   'group-hover:text-recipient-green': selectedRecipientColor === 'green',
@@ -297,7 +306,7 @@ export const EnvelopeEditorFieldDragDrop = ({
       {selectedField && (
         <div
           className={cn(
-            '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]',
+            '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]',
             RECIPIENT_COLOR_STYLES[selectedRecipientColor].base,
             selectedField === FieldType.SIGNATURE && 'font-signature',
             {

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

@@ -10,10 +10,7 @@ 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 {
-  type PageRenderData,
-  useCurrentEnvelopeRender,
-} from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { 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,
@@ -25,15 +22,10 @@ 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({
-  pageData,
-}: {
-  pageData: PageRenderData;
-}) {
+export default function EnvelopeEditorFieldsPageRenderer() {
   const { t, i18n } = useLingui();
   const { envelope, editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
   const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
@@ -48,24 +40,31 @@ export default function EnvelopeEditorFieldsPageRenderer({
   const {
     stage,
     pageLayer,
+    canvasElement,
     konvaContainer,
+    pageContext,
     scaledViewport,
     unscaledViewport,
-    renderStatus,
-    imageProps,
-  } = usePageRenderer(({ stage, pageLayer }) => createPageCanvas(stage, pageLayer), pageData);
+  } = usePageRenderer(({ stage, pageLayer }) => createPageCanvas(stage, pageLayer));
 
-  const { scale, pageNumber } = pageData;
+  const { _className, scale } = pageContext;
 
   const localPageFields = useMemo(
     () =>
       editorFields.localFields.filter(
-        (field) => field.page === pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
+        (field) =>
+          field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
       ),
-    [editorFields.localFields, pageNumber],
+    [editorFields.localFields, pageContext.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;
@@ -345,6 +344,7 @@ 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 (!currentEnvelopeItem || !editorFields.selectedRecipient) {
+    if (!canvasElement.current || !currentEnvelopeItem || !editorFields.selectedRecipient) {
       return;
     }
 
@@ -530,7 +530,7 @@ export default function EnvelopeEditorFieldsPageRenderer({
 
     editorFields.addField({
       envelopeItemId: currentEnvelopeItem.id,
-      page: pageNumber,
+      page: pageContext.pageNumber,
       type,
       positionX: fieldX,
       positionY: fieldY,
@@ -559,7 +559,10 @@ export default function EnvelopeEditorFieldsPageRenderer({
   }
 
   return (
-    <div className="relative w-full" key={`${currentEnvelopeItem.id}-renderer-${pageNumber}`}>
+    <div
+      className="relative w-full"
+      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
+    >
       {selectedKonvaFieldGroups.length > 0 &&
         interactiveTransformer.current &&
         !isFieldChanging && (
@@ -622,7 +625,13 @@ 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>
 
-      <EnvelopePageImage renderStatus={renderStatus} imageProps={imageProps} />
+      {/* Canvas the PDF will be rendered on. */}
+      <canvas
+        className={`${_className}__canvas z-0`}
+        ref={canvasElement}
+        height={scaledViewport.height}
+        width={scaledViewport.width}
+      />
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { lazy, useEffect, useMemo, useState } from 'react';
 
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
@@ -6,13 +6,12 @@ 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 { useRevalidator, useSearchParams } from 'react-router';
+import { Link, 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,
@@ -30,7 +29,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 { EnvelopePdfViewer } from '@documenso/ui/components/pdf-viewer/envelope-pdf-viewer';
+import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
@@ -50,10 +49,13 @@ 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`,
@@ -73,9 +75,7 @@ export const EnvelopeEditorFieldsPage = () => {
 
   const team = useCurrentTeam();
 
-  const scrollableContainerRef = useRef<HTMLDivElement>(null);
-
-  const { envelope, editorFields, navigateToStep, editorConfig } = useCurrentEnvelopeEditor();
+  const { envelope, editorFields, relativePath } = useCurrentEnvelopeEditor();
 
   const { currentEnvelopeItem } = useCurrentEnvelopeRender();
 
@@ -97,10 +97,14 @@ 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');
     }
   };
 
@@ -152,12 +156,12 @@ export const EnvelopeEditorFieldsPage = () => {
 
   return (
     <div className="relative flex h-full">
-      <div className="flex h-full w-full flex-col overflow-y-auto" ref={scrollableContainerRef}>
+      <div className="flex w-full flex-col overflow-y-auto">
         {/* Horizontal envelope item selector */}
         <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
         {/* Document View */}
-        <div className="mt-4 flex h-full flex-col items-center justify-center">
+        <div className="mt-4 flex flex-col items-center justify-center">
           {envelope.recipients.length === 0 && (
             <Alert
               variant="neutral"
@@ -172,17 +176,18 @@ export const EnvelopeEditorFieldsPage = () => {
                 </AlertDescription>
               </div>
 
-              <Button variant="outline" onClick={() => void navigateToStep('upload')}>
-                <Trans>Add Recipients</Trans>
+              <Button asChild variant="outline">
+                <Link to={`${relativePath.editorPath}`}>
+                  <Trans>Add Recipients</Trans>
+                </Link>
               </Button>
             </Alert>
           )}
 
           {currentEnvelopeItem !== null ? (
-            <EnvelopePdfViewer
+            <PDFViewerKonvaLazy
+              renderer="editor"
               customPageRenderer={EnvelopeEditorFieldsPageRenderer}
-              scrollParentRef={scrollableContainerRef}
-              errorMessage={PDF_VIEWER_ERROR_MESSAGES.editor}
             />
           ) : (
             <div className="flex flex-col items-center justify-center py-32">
@@ -244,40 +249,36 @@ export const EnvelopeEditorFieldsPage = () => {
               selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null}
             />
 
-            {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>
+            <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,56 +30,21 @@ import { EnvelopeItemTitleInput } from './envelope-editor-title-input';
 export default function EnvelopeEditorHeader() {
   const { t } = useLingui();
 
-  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);
-  };
+  const { envelope, isDocument, isTemplate, updateEnvelope, autosaveError, relativePath } =
+    useCurrentEnvelopeEditor();
 
   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">
-          {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>
-          )}
+          <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 || !allowConfigureEnvelopeTitle}
+              disabled={envelope.status !== DocumentStatus.DRAFT}
               value={envelope.title}
               onChange={(title) => {
                 updateEnvelope({
@@ -162,71 +127,53 @@ export default function EnvelopeEditorHeader() {
         </div>
 
         <div className="flex items-center space-x-2">
-          {allowAttachments && (
-            <DocumentAttachmentsPopover envelopeId={envelope.id} buttonSize="sm" />
-          )}
+          <DocumentAttachmentsPopover envelopeId={envelope.id} buttonSize="sm" />
 
-          {editorConfig.settings && (
-            <EnvelopeEditorSettingsDialog
-              trigger={
-                <Button variant="outline" size="sm">
-                  <SettingsIcon className="h-4 w-4" />
-                </Button>
-              }
-            />
-          )}
+          <EnvelopeEditorSettingsDialog
+            trigger={
+              <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}
+          {isDocument && (
+            <>
+              <EnvelopeDistributeDialog
                 documentRootPath={relativePath.documentRootPath}
                 trigger={
                   <Button size="sm">
-                    <Trans>Use Template</Trans>
+                    <SendIcon className="mr-2 h-4 w-4" />
+                    <Trans>Send Document</Trans>
                   </Button>
                 }
               />
-            ))
 
-            .otherwise(() => null)}
-
-          {embeded?.mode === 'create' && (
-            <Button size="sm" onClick={handleCreateEmbeddedEnvelope}>
-              {isDocument ? <Trans>Create Document</Trans> : <Trans>Create Template</Trans>}
-            </Button>
+              <EnvelopeRedistributeDialog
+                envelope={envelope}
+                trigger={
+                  <Button size="sm">
+                    <SendIcon className="mr-2 h-4 w-4" />
+                    <Trans>Resend Document</Trans>
+                  </Button>
+                }
+              />
+            </>
           )}
 
-          {embeded?.mode === 'edit' && (
-            <Button size="sm" onClick={handleUpdateEmbeddedEnvelope}>
-              {isDocument ? <Trans>Update Document</Trans> : <Trans>Update Template</Trans>}
-            </Button>
+          {isTemplate && (
+            <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>
+              }
+            />
           )}
         </div>
       </div>

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

@@ -1,4 +1,4 @@
-import { lazy, useEffect, useMemo, useRef, useState } from 'react';
+import { lazy, useEffect, useMemo, useState } from 'react';
 
 import { faker } from '@faker-js/faker/locale/en';
 import { Trans } from '@lingui/react/macro';
@@ -11,13 +11,12 @@ 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 { EnvelopePdfViewer } from '@documenso/ui/components/pdf-viewer/envelope-pdf-viewer';
+import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
 import { Separator } from '@documenso/ui/primitives/separator';
@@ -34,8 +33,6 @@ export const EnvelopeEditorPreviewPage = () => {
 
   const { currentEnvelopeItem, fields } = useCurrentEnvelopeRender();
 
-  const scrollableContainerRef = useRef<HTMLDivElement>(null);
-
   const [selectedPreviewMode, setSelectedPreviewMode] = useState<'recipient' | 'signed'>(
     'recipient',
   );
@@ -203,9 +200,7 @@ 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) => ({
@@ -217,12 +212,12 @@ export const EnvelopeEditorPreviewPage = () => {
       }}
     >
       <div className="relative flex h-full">
-        <div className="flex w-full flex-col overflow-y-auto" ref={scrollableContainerRef}>
+        <div className="flex w-full flex-col overflow-y-auto">
           {/* Horizontal envelope item selector */}
           <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
           {/* Document View */}
-          <div className="mt-4 flex h-full flex-col items-center justify-center">
+          <div className="mt-4 flex flex-col items-center justify-center">
             <Alert variant="warning" className="mb-4 max-w-[800px]">
               <AlertTitle>
                 <Trans>Preview Mode</Trans>
@@ -233,10 +228,9 @@ export const EnvelopeEditorPreviewPage = () => {
             </Alert>
 
             {currentEnvelopeItem !== null ? (
-              <EnvelopePdfViewer
+              <PDFViewerKonvaLazy
+                renderer="editor"
                 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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 
 import {
   DragDropContext,
@@ -7,23 +7,28 @@ import {
   Droppable,
   type SensorAPI,
 } from '@hello-pangea/dnd';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { plural } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { DocumentSigningOrder, EnvelopeType, RecipientRole, SendStatus } from '@prisma/client';
 import { motion } from 'framer-motion';
 import { GripVerticalIcon, HelpCircleIcon, PlusIcon, SparklesIcon, TrashIcon } from 'lucide-react';
-import { useFieldArray, useWatch } from 'react-hook-form';
+import { useFieldArray, useForm, useWatch } from 'react-hook-form';
 import { useRevalidator, useSearchParams } from 'react-router';
-import { isDeepEqual } from 'remeda';
+import { isDeepEqual, prop, sortBy } from 'remeda';
+import { z } from 'zod';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
-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 { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import { useSession } 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 {
+  ZRecipientActionAuthTypesSchema,
+  ZRecipientAuthOptionsSchema,
+} from '@documenso/lib/types/document-auth';
+import { ZRecipientEmailSchema } from '@documenso/lib/types/recipient';
 import { nanoid } from '@documenso/lib/universal/id';
 import { canRecipientBeModified as utilCanRecipientBeModified } from '@documenso/lib/utils/recipients';
 import { trpc } from '@documenso/trpc/react';
@@ -62,15 +67,26 @@ import { AiFeaturesEnableDialog } from '~/components/dialogs/ai-features-enable-
 import { AiRecipientDetectionDialog } from '~/components/dialogs/ai-recipient-detection-dialog';
 import { useCurrentTeam } from '~/providers/team';
 
+const ZEnvelopeRecipientsForm = z.object({
+  signers: z.array(
+    z.object({
+      formId: z.string().min(1),
+      id: z.number().optional(),
+      email: ZRecipientEmailSchema,
+      name: z.string(),
+      role: z.nativeEnum(RecipientRole),
+      signingOrder: z.number().optional(),
+      actionAuth: z.array(ZRecipientActionAuthTypesSchema).optional().default([]),
+    }),
+  ),
+  signingOrder: z.nativeEnum(DocumentSigningOrder),
+  allowDictateNextSigner: z.boolean().default(false),
+});
+
+type TEnvelopeRecipientsForm = z.infer<typeof ZEnvelopeRecipientsForm>;
+
 export const EnvelopeEditorRecipientForm = () => {
-  const {
-    envelope,
-    setRecipientsDebounced,
-    updateEnvelope,
-    editorRecipients,
-    isEmbedded,
-    editorConfig,
-  } = useCurrentEnvelopeEditor();
+  const { envelope, setRecipientsDebounced, updateEnvelope } = useCurrentEnvelopeEditor();
 
   const organisation = useCurrentOrganisation();
   const team = useCurrentTeam();
@@ -78,9 +94,7 @@ export const EnvelopeEditorRecipientForm = () => {
   const { t } = useLingui();
   const { toast } = useToast();
   const { remaining } = useLimits();
-  const { sessionData } = useOptionalSession();
-
-  const user = sessionData?.user;
+  const { user } = useSession();
 
   const [searchParams, setSearchParams] = useSearchParams();
   const [recipientSearchQuery, setRecipientSearchQuery] = useState('');
@@ -131,6 +145,7 @@ export const EnvelopeEditorRecipientForm = () => {
 
   const debouncedRecipientSearchQuery = useDebouncedValue(recipientSearchQuery, 500);
 
+  const initialId = useId();
   const $sensorApi = useRef<SensorAPI | null>(null);
   const isFirstRender = useRef(true);
   const { recipients, fields } = envelope;
@@ -141,13 +156,47 @@ export const EnvelopeEditorRecipientForm = () => {
     },
     {
       enabled: debouncedRecipientSearchQuery.length > 1,
-      retry: false,
     },
   );
 
   const recipientSuggestions = recipientSuggestionsData?.results || [];
 
-  const { form } = editorRecipients;
+  const defaultRecipients = [
+    {
+      formId: initialId,
+      name: '',
+      email: '',
+      role: RecipientRole.SIGNER,
+      signingOrder: 1,
+      actionAuth: [],
+    },
+  ];
+
+  const form = useForm<TEnvelopeRecipientsForm>({
+    resolver: zodResolver(ZEnvelopeRecipientsForm),
+    mode: 'onChange', // Used for autosave purposes, maybe can try onBlur instead?
+    defaultValues: {
+      signers:
+        recipients.length > 0
+          ? sortBy(
+              recipients.map((recipient, index) => ({
+                id: recipient.id,
+                formId: String(recipient.id),
+                name: recipient.name,
+                email: recipient.email,
+                role: recipient.role,
+                signingOrder: recipient.signingOrder ?? index + 1,
+                actionAuth:
+                  ZRecipientAuthOptionsSchema.parse(recipient.authOptions)?.actionAuth ?? undefined,
+              })),
+              [prop('signingOrder'), 'asc'],
+              [prop('id'), 'asc'],
+            )
+          : defaultRecipients,
+      signingOrder: envelope.documentMeta.signingOrder,
+      allowDictateNextSigner: envelope.documentMeta.allowDictateNextSigner,
+    },
+  });
 
   const recipientHasAuthSettings = useMemo(() => {
     const recipientHasAuthOptions = recipients.find((recipient) => {
@@ -539,7 +588,7 @@ export const EnvelopeEditorRecipientForm = () => {
       return;
     }
 
-    const validatedFormValues = ZEditorRecipientsFormSchema.safeParse(formValues);
+    const validatedFormValues = ZEnvelopeRecipientsForm.safeParse(formValues);
 
     if (!validatedFormValues.success) {
       return;
@@ -603,50 +652,42 @@ export const EnvelopeEditorRecipientForm = () => {
     <Card backdropBlur={false} className="border">
       <CardHeader className="flex flex-row justify-between">
         <div>
-          <CardTitle>
-            <Trans>Recipients</Trans>
-          </CardTitle>
-          <CardDescription className="mt-1.5">
-            <Trans>Add recipients to your document</Trans>
-          </CardDescription>
+          <CardTitle>Recipients</CardTitle>
+          <CardDescription className="mt-1.5">Add recipients to your document</CardDescription>
         </div>
 
         <div className="flex flex-row items-center space-x-2">
-          {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>
+          <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>
 
-          {!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"
+            className="flex flex-row items-center"
+            size="sm"
+            disabled={isSubmitting || isUserAlreadyARecipient}
+            onClick={() => onAddSelfSigner()}
+          >
+            <Trans>Add Myself</Trans>
+          </Button>
 
           <Button
             variant="outline"
@@ -665,13 +706,7 @@ export const EnvelopeEditorRecipientForm = () => {
       <CardContent>
         <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
           <Form {...form}>
-            <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,
-              })}
-            >
+            <div className="-mt-2 mb-2 space-y-4 rounded-md bg-accent/50 p-4">
               {organisation.organisationClaim.flags.cfr21 && (
                 <div className="flex flex-row items-center">
                   <Checkbox
@@ -689,66 +724,64 @@ export const EnvelopeEditorRecipientForm = () => {
                 </div>
               )}
 
-              {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;
-                            }
+              <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
@@ -815,215 +848,246 @@ export const EnvelopeEditorRecipientForm = () => {
                     ref={provided.innerRef}
                     className="flex w-full flex-col gap-y-2"
                   >
-                    {signers.map((signer, index) => {
-                      const isDirectRecipient =
-                        envelope.type === EnvelopeType.TEMPLATE &&
-                        envelope.directLink !== null &&
-                        signer.id === envelope.directLink.directTemplateRecipientId;
-
-                      return (
-                        <Draggable
-                          key={`${signer.nativeId}-${signer.signingOrder}`}
-                          draggableId={signer['nativeId']}
-                          index={index}
-                          isDragDisabled={
-                            !isSigningOrderSequential ||
-                            isSubmitting ||
-                            !canRecipientBeModified(signer.id) ||
-                            !signer.signingOrder
-                          }
-                        >
-                          {(provided, snapshot) => (
-                            <div
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                              {...provided.dragHandleProps}
-                              className={cn('py-1', {
-                                'pointer-events-none rounded-md bg-widget-foreground pt-2':
-                                  snapshot.isDragging,
+                    {signers.map((signer, index) => (
+                      <Draggable
+                        key={`${signer.nativeId}-${signer.signingOrder}`}
+                        draggableId={signer['nativeId']}
+                        index={index}
+                        isDragDisabled={
+                          !isSigningOrderSequential ||
+                          isSubmitting ||
+                          !canRecipientBeModified(signer.id) ||
+                          !signer.signingOrder
+                        }
+                      >
+                        {(provided, snapshot) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            className={cn('py-1', {
+                              'pointer-events-none rounded-md bg-widget-foreground pt-2':
+                                snapshot.isDragging,
+                            })}
+                          >
+                            <motion.fieldset
+                              data-native-id={signer.id}
+                              disabled={isSubmitting || !canRecipientBeModified(signer.id)}
+                              className={cn('pb-2', {
+                                'border-b pb-4':
+                                  showAdvancedSettings && index !== signers.length - 1,
+                                'pt-2': showAdvancedSettings && index === 0,
+                                'pr-3': isSigningOrderSequential,
                               })}
                             >
-                              <motion.fieldset
-                                data-native-id={signer.id}
-                                disabled={isSubmitting || !canRecipientBeModified(signer.id)}
-                                className={cn('pb-2', {
-                                  'border-b pb-4':
-                                    showAdvancedSettings && index !== signers.length - 1,
-                                  'pt-2': showAdvancedSettings && index === 0,
-                                  'pr-3': isSigningOrderSequential,
-                                })}
-                              >
-                                <div className="flex flex-row items-center gap-x-2">
-                                  {isSigningOrderSequential && (
-                                    <FormField
-                                      control={form.control}
-                                      name={`signers.${index}.signingOrder`}
-                                      render={({ field }) => (
-                                        <FormItem
-                                          className={cn(
-                                            'mt-auto flex items-center gap-x-1 space-y-0',
-                                            {
-                                              'mb-6':
-                                                form.formState.errors.signers?.[index] &&
-                                                !form.formState.errors.signers[index]?.signingOrder,
-                                            },
-                                          )}
-                                        >
-                                          <GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
-                                          <FormControl>
-                                            <Input
-                                              type="number"
-                                              max={signers.length}
-                                              data-testid="signing-order-input"
-                                              className={cn(
-                                                'w-10 text-center',
-                                                '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
-                                              )}
-                                              {...field}
-                                              onChange={(e) => {
-                                                field.onChange(e);
-                                                handleSigningOrderChange(index, e.target.value);
-                                              }}
-                                              onBlur={(e) => {
-                                                field.onBlur();
-                                                handleSigningOrderChange(index, e.target.value);
-                                              }}
-                                              disabled={
-                                                snapshot.isDragging ||
-                                                isSubmitting ||
-                                                !canRecipientBeModified(signer.id)
-                                              }
-                                            />
-                                          </FormControl>
-                                          <FormMessage />
-                                        </FormItem>
+                              <div className="flex flex-row items-center gap-x-2">
+                                {isSigningOrderSequential && (
+                                  <FormField
+                                    control={form.control}
+                                    name={`signers.${index}.signingOrder`}
+                                    render={({ field }) => (
+                                      <FormItem
+                                        className={cn(
+                                          'mt-auto flex items-center gap-x-1 space-y-0',
+                                          {
+                                            'mb-6':
+                                              form.formState.errors.signers?.[index] &&
+                                              !form.formState.errors.signers[index]?.signingOrder,
+                                          },
+                                        )}
+                                      >
+                                        <GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
+                                        <FormControl>
+                                          <Input
+                                            type="number"
+                                            max={signers.length}
+                                            data-testid="signing-order-input"
+                                            className={cn(
+                                              'w-10 text-center',
+                                              '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+                                            )}
+                                            {...field}
+                                            onChange={(e) => {
+                                              field.onChange(e);
+                                              handleSigningOrderChange(index, e.target.value);
+                                            }}
+                                            onBlur={(e) => {
+                                              field.onBlur();
+                                              handleSigningOrderChange(index, e.target.value);
+                                            }}
+                                            disabled={
+                                              snapshot.isDragging ||
+                                              isSubmitting ||
+                                              !canRecipientBeModified(signer.id)
+                                            }
+                                          />
+                                        </FormControl>
+                                        <FormMessage />
+                                      </FormItem>
+                                    )}
+                                  />
+                                )}
+
+                                <FormField
+                                  control={form.control}
+                                  name={`signers.${index}.email`}
+                                  render={({ field }) => (
+                                    <FormItem
+                                      className={cn('relative w-full', {
+                                        'mb-6':
+                                          form.formState.errors.signers?.[index] &&
+                                          !form.formState.errors.signers[index]?.email,
+                                      })}
+                                    >
+                                      {!showAdvancedSettings && index === 0 && (
+                                        <FormLabel>
+                                          <Trans>Email</Trans>
+                                        </FormLabel>
                                       )}
-                                    />
+
+                                      <FormControl>
+                                        <RecipientAutoCompleteInput
+                                          type="email"
+                                          placeholder={t`Email`}
+                                          value={field.value}
+                                          disabled={
+                                            snapshot.isDragging ||
+                                            isSubmitting ||
+                                            !canRecipientBeModified(signer.id)
+                                          }
+                                          options={recipientSuggestions}
+                                          onSelect={(suggestion) =>
+                                            handleRecipientAutoCompleteSelect(index, suggestion)
+                                          }
+                                          onSearchQueryChange={(query) => {
+                                            field.onChange(query);
+                                            setRecipientSearchQuery(query);
+                                          }}
+                                          loading={isLoading}
+                                          data-testid="signer-email-input"
+                                          maxLength={254}
+                                        />
+                                      </FormControl>
+
+                                      <FormMessage />
+                                    </FormItem>
                                   )}
+                                />
 
+                                <FormField
+                                  control={form.control}
+                                  name={`signers.${index}.name`}
+                                  render={({ field }) => (
+                                    <FormItem
+                                      className={cn('w-full', {
+                                        'mb-6':
+                                          form.formState.errors.signers?.[index] &&
+                                          !form.formState.errors.signers[index]?.name,
+                                      })}
+                                    >
+                                      {!showAdvancedSettings && index === 0 && (
+                                        <FormLabel>
+                                          <Trans>Name</Trans>
+                                        </FormLabel>
+                                      )}
+
+                                      <FormControl>
+                                        <RecipientAutoCompleteInput
+                                          type="text"
+                                          placeholder={t`Recipient ${index + 1}`}
+                                          {...field}
+                                          disabled={
+                                            snapshot.isDragging ||
+                                            isSubmitting ||
+                                            !canRecipientBeModified(signer.id)
+                                          }
+                                          options={recipientSuggestions}
+                                          onSelect={(suggestion) =>
+                                            handleRecipientAutoCompleteSelect(index, suggestion)
+                                          }
+                                          onSearchQueryChange={(query) => {
+                                            field.onChange(query);
+                                            setRecipientSearchQuery(query);
+                                          }}
+                                          loading={isLoading}
+                                          maxLength={255}
+                                        />
+                                      </FormControl>
+
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+
+                                <FormField
+                                  control={form.control}
+                                  name={`signers.${index}.role`}
+                                  render={({ field }) => (
+                                    <FormItem
+                                      className={cn('mt-auto w-fit', {
+                                        'mb-6':
+                                          form.formState.errors.signers?.[index] &&
+                                          !form.formState.errors.signers[index]?.role,
+                                      })}
+                                    >
+                                      <FormControl>
+                                        <RecipientRoleSelect
+                                          {...field}
+                                          isAssistantEnabled={isSigningOrderSequential}
+                                          onValueChange={(value) => {
+                                            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                                            handleRoleChange(index, value as RecipientRole);
+                                            field.onChange(value);
+                                          }}
+                                          disabled={
+                                            snapshot.isDragging ||
+                                            isSubmitting ||
+                                            !canRecipientBeModified(signer.id)
+                                          }
+                                        />
+                                      </FormControl>
+
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+
+                                <Button
+                                  variant="ghost"
+                                  className={cn('mt-auto px-2', {
+                                    'mb-6': form.formState.errors.signers?.[index],
+                                  })}
+                                  data-testid="remove-signer-button"
+                                  disabled={
+                                    snapshot.isDragging ||
+                                    isSubmitting ||
+                                    !canRecipientBeModified(signer.id) ||
+                                    signers.length === 1
+                                  }
+                                  onClick={() => onRemoveSigner(index)}
+                                >
+                                  <TrashIcon className="h-4 w-4" />
+                                </Button>
+                              </div>
+
+                              {showAdvancedSettings &&
+                                organisation.organisationClaim.flags.cfr21 && (
                                   <FormField
                                     control={form.control}
-                                    name={`signers.${index}.email`}
+                                    name={`signers.${index}.actionAuth`}
                                     render={({ field }) => (
                                       <FormItem
-                                        className={cn('relative w-full', {
+                                        className={cn('mt-2 w-full', {
                                           'mb-6':
                                             form.formState.errors.signers?.[index] &&
-                                            !form.formState.errors.signers[index]?.email,
+                                            !form.formState.errors.signers[index]?.actionAuth,
+                                          'pl-6': isSigningOrderSequential,
                                         })}
                                       >
-                                        {!showAdvancedSettings && index === 0 && (
-                                          <FormLabel>
-                                            <Trans>Email</Trans>
-                                          </FormLabel>
-                                        )}
-
                                         <FormControl>
-                                          <RecipientAutoCompleteInput
-                                            type="email"
-                                            placeholder={t`Email`}
-                                            value={field.value}
-                                            disabled={
-                                              snapshot.isDragging ||
-                                              isSubmitting ||
-                                              !canRecipientBeModified(signer.id) ||
-                                              isDirectRecipient
-                                            }
-                                            options={recipientSuggestions}
-                                            onSelect={(suggestion) =>
-                                              handleRecipientAutoCompleteSelect(index, suggestion)
-                                            }
-                                            onSearchQueryChange={(query) => {
-                                              field.onChange(query);
-                                              setRecipientSearchQuery(query);
-                                            }}
-                                            loading={isLoading}
-                                            data-testid="signer-email-input"
-                                            maxLength={254}
-                                          />
-                                        </FormControl>
-
-                                        <FormMessage />
-                                      </FormItem>
-                                    )}
-                                  />
-
-                                  <FormField
-                                    control={form.control}
-                                    name={`signers.${index}.name`}
-                                    render={({ field }) => (
-                                      <FormItem
-                                        className={cn('w-full', {
-                                          'mb-6':
-                                            form.formState.errors.signers?.[index] &&
-                                            !form.formState.errors.signers[index]?.name,
-                                        })}
-                                      >
-                                        {!showAdvancedSettings && index === 0 && (
-                                          <FormLabel>
-                                            <Trans>Name</Trans>
-                                          </FormLabel>
-                                        )}
-
-                                        <FormControl>
-                                          <RecipientAutoCompleteInput
-                                            type="text"
-                                            placeholder={t`Recipient ${index + 1}`}
+                                          <RecipientActionAuthSelect
                                             {...field}
-                                            disabled={
-                                              snapshot.isDragging ||
-                                              isSubmitting ||
-                                              !canRecipientBeModified(signer.id) ||
-                                              isDirectRecipient
-                                            }
-                                            options={recipientSuggestions}
-                                            onSelect={(suggestion) =>
-                                              handleRecipientAutoCompleteSelect(index, suggestion)
-                                            }
-                                            onSearchQueryChange={(query) => {
-                                              field.onChange(query);
-                                              setRecipientSearchQuery(query);
-                                            }}
-                                            loading={isLoading}
-                                            maxLength={255}
-                                          />
-                                        </FormControl>
-
-                                        <FormMessage />
-                                      </FormItem>
-                                    )}
-                                  />
-
-                                  <FormField
-                                    control={form.control}
-                                    name={`signers.${index}.role`}
-                                    render={({ field }) => (
-                                      <FormItem
-                                        className={cn('mt-auto w-fit', {
-                                          'mb-6':
-                                            form.formState.errors.signers?.[index] &&
-                                            !form.formState.errors.signers[index]?.role,
-                                        })}
-                                      >
-                                        <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
-                                              handleRoleChange(index, value as RecipientRole);
-                                              field.onChange(value);
-                                            }}
+                                            onValueChange={field.onChange}
                                             disabled={
                                               snapshot.isDragging ||
                                               isSubmitting ||
@@ -1036,63 +1100,12 @@ export const EnvelopeEditorRecipientForm = () => {
                                       </FormItem>
                                     )}
                                   />
-
-                                  <Button
-                                    variant="ghost"
-                                    className={cn('mt-auto px-2', {
-                                      'mb-6': form.formState.errors.signers?.[index],
-                                    })}
-                                    data-testid="remove-signer-button"
-                                    disabled={
-                                      snapshot.isDragging ||
-                                      isSubmitting ||
-                                      !canRecipientBeModified(signer.id) ||
-                                      signers.length === 1 ||
-                                      isDirectRecipient
-                                    }
-                                    onClick={() => onRemoveSigner(index)}
-                                  >
-                                    <TrashIcon className="h-4 w-4" />
-                                  </Button>
-                                </div>
-
-                                {showAdvancedSettings &&
-                                  organisation.organisationClaim.flags.cfr21 && (
-                                    <FormField
-                                      control={form.control}
-                                      name={`signers.${index}.actionAuth`}
-                                      render={({ field }) => (
-                                        <FormItem
-                                          className={cn('mt-2 w-full', {
-                                            'mb-6':
-                                              form.formState.errors.signers?.[index] &&
-                                              !form.formState.errors.signers[index]?.actionAuth,
-                                            'pl-6': isSigningOrderSequential,
-                                          })}
-                                        >
-                                          <FormControl>
-                                            <RecipientActionAuthSelect
-                                              {...field}
-                                              onValueChange={field.onChange}
-                                              disabled={
-                                                snapshot.isDragging ||
-                                                isSubmitting ||
-                                                !canRecipientBeModified(signer.id)
-                                              }
-                                            />
-                                          </FormControl>
-
-                                          <FormMessage />
-                                        </FormItem>
-                                      )}
-                                    />
-                                  )}
-                              </motion.fieldset>
-                            </div>
-                          )}
-                        </Draggable>
-                      );
-                    })}
+                                )}
+                            </motion.fieldset>
+                          </div>
+                        )}
+                      </Draggable>
+                    ))}
 
                     {provided.placeholder}
                   </div>
@@ -1114,15 +1127,13 @@ export const EnvelopeEditorRecipientForm = () => {
           onConfirm={handleSigningOrderDisable}
         />
 
-        {editorConfig.recipients?.allowAIDetection && (
-          <AiRecipientDetectionDialog
-            open={isAiDialogOpen}
-            onOpenChange={onAiDialogOpenChange}
-            onComplete={onAiDetectionComplete}
-            envelopeId={envelope.id}
-            teamId={envelope.teamId}
-          />
-        )}
+        <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

@@ -1,28 +0,0 @@
-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,7 +28,6 @@ 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,
@@ -175,9 +174,7 @@ export const EnvelopeEditorSettingsDialog = ({
   const { t, i18n } = useLingui();
   const { toast } = useToast();
 
-  const { envelope, updateEnvelopeAsync, editorConfig, isEmbedded } = useCurrentEnvelopeEditor();
-
-  const { settings } = editorConfig;
+  const { envelope, updateEnvelopeAsync } = useCurrentEnvelopeEditor();
 
   const team = useCurrentTeam();
   const organisation = useCurrentOrganisation();
@@ -226,15 +223,10 @@ 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,
-      },
-      {
-        ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-      },
-    );
+    trpc.enterprise.organisation.email.find.useQuery({
+      organisationId: organisation.id,
+      perPage: 100,
+    });
 
   const emails = emailData?.data || [];
 
@@ -286,13 +278,11 @@ export const EnvelopeEditorSettingsDialog = ({
 
       setOpen(false);
 
-      if (!isEmbedded) {
-        toast({
-          title: t`Success`,
-          description: t`Envelope updated`,
-          duration: 5000,
-        });
-      }
+      toast({
+        title: t`Success`,
+        description: t`Envelope updated`,
+        duration: 5000,
+      });
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -329,7 +319,7 @@ export const EnvelopeEditorSettingsDialog = ({
 
   const selectedTab = tabs.find((tab) => tab.id === activeTab);
 
-  if (!selectedTab || !settings) {
+  if (!selectedTab) {
     return null;
   }
 
@@ -350,32 +340,24 @@ 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" data-testid="envelope-editor-settings-dialog-header">
-            <DialogTitle>
-              <Trans>Document Settings</Trans>
-            </DialogTitle>
+          <DialogHeader className="p-6 pb-4">
+            <DialogTitle>Document Settings</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) => {
-              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>
-              );
-            })}
+            {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>
+            ))}
           </nav>
         </div>
 
@@ -393,151 +375,137 @@ export const EnvelopeEditorSettingsDialog = ({
                 disabled={form.formState.isSubmitting}
                 key={activeTab}
               >
-                {match({ activeTab, settings })
-                  .with({ activeTab: 'general' }, () => (
+                {match(activeTab)
+                  .with('general', () => (
                     <>
-                      {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>
+                      <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>
-                          )}
-                        />
-                      )}
+                                <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>
 
-                      {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>
+                            <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>
-                                <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>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                      <FormField
+                        control={form.control}
+                        name="meta.dateFormat"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              <Trans>Date Format</Trans>
+                            </FormLabel>
 
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                      )}
+                            <FormControl>
+                              <Select
+                                value={field.value}
+                                onValueChange={field.onChange}
+                                disabled={envelopeHasBeenSent}
+                              >
+                                <SelectTrigger className="bg-background">
+                                  <SelectValue />
+                                </SelectTrigger>
 
-                      {settings.allowConfigureDateFormat && (
-                        <FormField
-                          control={form.control}
-                          name="meta.dateFormat"
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>
-                                <Trans>Date Format</Trans>
-                              </FormLabel>
+                                <SelectContent>
+                                  {DATE_FORMATS.map((format) => (
+                                    <SelectItem key={format.key} value={format.value}>
+                                      {format.label}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </FormControl>
 
-                              <FormControl>
-                                <Select
-                                  value={field.value}
-                                  onValueChange={field.onChange}
-                                  disabled={envelopeHasBeenSent}
-                                >
-                                  <SelectTrigger className="bg-background">
-                                    <SelectValue />
-                                  </SelectTrigger>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                      <FormField
+                        control={form.control}
+                        name="meta.timezone"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              <Trans>Time Zone</Trans>
+                            </FormLabel>
 
-                                  <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>
-                          )}
-                        />
-                      )}
+                            <FormControl>
+                              <Combobox
+                                className="bg-background"
+                                options={TIME_ZONES}
+                                value={field.value}
+                                onChange={(value) => value && field.onChange(value)}
+                                disabled={envelopeHasBeenSent}
+                              />
+                            </FormControl>
 
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
                       <FormField
                         control={form.control}
                         name="externalId"
@@ -568,235 +536,227 @@ export const EnvelopeEditorSettingsDialog = ({
                         )}
                       />
 
-                      {settings.allowConfigureRedirectUrl && (
-                        <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>
+                      <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">
+                                <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>
-                                      Add a URL to redirect the user to once the document is signed
+                                      This is how the document will reach the recipients once the
+                                      document is ready for signing.
                                     </Trans>
-                                  </TooltipContent>
-                                </Tooltip>
-                              </FormLabel>
+                                  </p>
 
-                              <FormControl>
-                                <Input className="bg-background" {...field} />
-                              </FormControl>
-
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                      )}
-
-                      {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>
-
-                                  <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
-                                    <h2>
-                                      <strong>
-                                        <Trans>Document Distribution Method</Trans>
-                                      </strong>
-                                    </h2>
-
-                                    <p>
+                                  <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
+                                    <li>
                                       <Trans>
-                                        This is how the document will reach the recipients once the
-                                        document is ready for signing.
+                                        <strong>Email</strong> - The recipient will be emailed the
+                                        document to sign, approve, etc.
                                       </Trans>
-                                    </p>
+                                    </li>
+                                    <li>
+                                      <Trans>
+                                        <strong>None</strong> - We will generate links which you can
+                                        send to the recipients manually.
+                                      </Trans>
+                                    </li>
+                                  </ul>
 
-                                    <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>
 
-                                    <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>
+                            <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 && (
+                        <FormField
+                          control={form.control}
+                          name="meta.emailId"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                <Trans>Email Sender</Trans>
                               </FormLabel>
 
                               <FormControl>
-                                <Select {...field} onValueChange={field.onChange}>
-                                  <SelectTrigger className="bg-background text-muted-foreground">
-                                    <SelectValue data-testid="documentDistributionMethodSelectValue" />
+                                <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 position="popper">
-                                    {Object.values(DOCUMENT_DISTRIBUTION_METHODS).map(
-                                      ({ value, description }) => (
-                                        <SelectItem key={value} value={value}>
-                                          {i18n._(description)}
-                                        </SelectItem>
-                                      ),
-                                    )}
+                                  <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: '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' }, () => (
+                  .with('security', () => (
                     <>
                       {organisation.organisationClaim.flags.cfr21 && (
                         <FormField
@@ -865,7 +825,7 @@ export const EnvelopeEditorSettingsDialog = ({
                       />
                     </>
                   ))
-                  .otherwise(() => null)}
+                  .exhaustive()}
               </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,7 +9,6 @@ export type EnvelopeItemTitleInputProps = {
   className?: string;
   placeholder?: string;
   disabled?: boolean;
-  dataTestId?: string;
 };
 
 export const EnvelopeItemTitleInput = ({
@@ -18,7 +17,6 @@ export const EnvelopeItemTitleInput = ({
   className,
   placeholder,
   disabled,
-  dataTestId,
 }: EnvelopeItemTitleInputProps) => {
   const [envelopeItemTitle, setEnvelopeItemTitle] = useState(value);
   const [isError, setIsError] = useState(false);
@@ -65,7 +63,6 @@ export const EnvelopeItemTitleInput = ({
         {envelopeItemTitle || placeholder}
       </span>
       <input
-        data-testid={dataTestId}
         data-1p-ignore
         autoComplete="off"
         ref={inputRef}
@@ -75,7 +72,7 @@ export const EnvelopeItemTitleInput = ({
         disabled={disabled}
         style={{ width: `${inputWidth}px` }}
         className={cn(
-          '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',
+          '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',
           className,
           {
             'outline-red-500': isError,

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

@@ -8,6 +8,7 @@ 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 {
@@ -16,9 +17,7 @@ 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';
@@ -50,14 +49,10 @@ 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)
@@ -108,45 +103,17 @@ export const EnvelopeEditorUploadPage = () => {
   );
 
   const onFileDrop = async (files: File[]) => {
-    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,
-        };
-      }),
-    );
+    const newUploadingFiles: (LocalFile & { file: File })[] = files.map((file) => ({
+      id: nanoid(),
+      envelopeItemId: null,
+      title: file.name,
+      file,
+      isUploading: true,
+      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;
@@ -196,9 +163,7 @@ export const EnvelopeEditorUploadPage = () => {
    * Hide the envelope item from the list on deletion.
    */
   const onFileDelete = (envelopeItemId: string) => {
-    setLocalFiles((prev) =>
-      prev.filter((uploadingFile) => uploadingFile.envelopeItemId !== envelopeItemId),
-    );
+    setLocalFiles((prev) => prev.filter((uploadingFile) => uploadingFile.id !== envelopeItemId));
 
     const fieldsWithoutDeletedItem = envelope.fields.filter(
       (field) => field.envelopeItemId !== envelopeItemId,
@@ -230,30 +195,6 @@ 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
@@ -336,72 +277,52 @@ export const EnvelopeEditorUploadPage = () => {
         </CardHeader>
 
         <CardContent>
-          {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}
-            />
-          )}
+          <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}
+          />
 
           {/* Uploaded Files List */}
           <div className="mt-4">
             <DragDropContext onDragEnd={onDragEnd}>
               <Droppable droppableId="files">
                 {(provided) => (
-                  <div
-                    data-testid="envelope-items-list"
-                    {...provided.droppableProps}
-                    ref={provided.innerRef}
-                    className="space-y-2"
-                  >
+                  <div {...provided.droppableProps} ref={provided.innerRef} className="space-y-2">
                     {localFiles.map((localFile, index) => (
                       <Draggable
                         key={localFile.id}
-                        isDragDisabled={
-                          isCreatingEnvelopeItems ||
-                          !canItemsBeModified ||
-                          !uploadConfig?.allowConfigureOrder
-                        }
+                        isDragDisabled={isCreatingEnvelopeItems || !canItemsBeModified}
                         draggableId={localFile.id}
                         index={index}
                       >
                         {(provided, snapshot) => (
                           <div
-                            data-testid={`envelope-item-row-${localFile.id}`}
                             ref={provided.innerRef}
                             {...provided.draggableProps}
                             style={provided.draggableProps.style}
-                            className={`flex items-center justify-between rounded-lg bg-accent/50 p-3 transition-shadow ${
+                            className={`bg-accent/50 flex items-center justify-between rounded-lg p-3 transition-shadow ${
                               snapshot.isDragging ? 'shadow-md' : ''
                             }`}
                           >
                             <div className="flex items-center space-x-3">
-                              {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
+                                {...provided.dragHandleProps}
+                                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 ||
-                                      !uploadConfig?.allowConfigureTitle
-                                    }
+                                    disabled={envelope.status !== DocumentStatus.DRAFT}
                                     value={localFile.title}
-                                    dataTestId={`envelope-item-title-input-${localFile.id}`}
                                     placeholder={t`Document Title`}
                                     onChange={(title) => {
                                       onEnvelopeItemTitleChange(localFile.envelopeItemId!, title);
@@ -411,7 +332,7 @@ export const EnvelopeEditorUploadPage = () => {
                                   <p className="text-sm font-medium">{localFile.title}</p>
                                 )}
 
-                                <div className="text-xs text-muted-foreground">
+                                <div className="text-muted-foreground text-xs">
                                   {localFile.isUploading ? (
                                     <Trans>Uploading</Trans>
                                   ) : localFile.isError ? (
@@ -424,46 +345,30 @@ export const EnvelopeEditorUploadPage = () => {
                             <div className="flex items-center space-x-2">
                               {localFile.isUploading && (
                                 <div className="flex h-6 w-10 items-center justify-center">
-                                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                                  <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
                                 </div>
                               )}
 
                               {localFile.isError && (
                                 <div className="flex h-6 w-10 items-center justify-center">
-                                  <FileWarningIcon className="h-4 w-4 text-destructive" />
+                                  <FileWarningIcon className="text-destructive h-4 w-4" />
                                 </div>
                               )}
 
-                              {!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>
-                                    }
-                                  />
-                                ))}
+                              {!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>
+                                  }
+                                />
+                              )}
                             </div>
                           </div>
                         )}
@@ -480,13 +385,14 @@ export const EnvelopeEditorUploadPage = () => {
 
       {/* Recipients Section */}
       <EnvelopeEditorRecipientForm />
-      {editorConfig.general.allowAddFieldsStep && (
-        <div className="flex justify-end">
-          <Button type="button" onClick={() => void navigateToStep('addFields')}>
+
+      <div className="flex justify-end">
+        <Button asChild>
+          <Link to={`${relativePath.editorPath}?step=addFields`}>
             <Trans>Add Fields</Trans>
-          </Button>
-        </div>
-      )}
+          </Link>
+        </Button>
+      </div>
     </div>
   );
 };

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

@@ -1,9 +1,7 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, 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,
@@ -11,31 +9,32 @@ import {
   DownloadCloudIcon,
   EyeIcon,
   LinkIcon,
-  type LucideIcon,
-  MousePointerIcon,
+  MousePointer,
   SendIcon,
   SettingsIcon,
   Trash2Icon,
-  UploadIcon,
+  Upload,
 } 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 { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
+import {
+  mapSecondaryIdToDocumentId,
+  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 { EnvelopeDeleteDialog } from '~/components/dialogs/envelope-delete-dialog';
+import { DocumentDeleteDialog } from '~/components/dialogs/document-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';
 
@@ -44,108 +43,92 @@ import EnvelopeEditorHeader from './envelope-editor-header';
 import { EnvelopeEditorPreviewPage } from './envelope-editor-preview-page';
 import { EnvelopeEditorUploadPage } from './envelope-editor-upload-page';
 
-type EnvelopeEditorStepData = {
-  id: string;
-  title: MessageDescriptor;
-  icon: LucideIcon;
-  description: MessageDescriptor;
-};
+type EnvelopeEditorStep = 'upload' | 'addFields' | 'preview';
 
-const UPLOAD_STEP = {
-  id: 'upload',
-  title: msg`Document & Recipients`,
-  icon: UploadIcon,
-  description: msg`Upload documents and add recipients`,
-};
+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 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 = () => {
+export default function EnvelopeEditor() {
   const { t } = useLingui();
 
   const navigate = useNavigate();
 
   const {
     envelope,
-    editorConfig,
     isDocument,
     isTemplate,
+    isAutosaving,
+    flushAutosave,
     relativePath,
-    syncEnvelope,
-    navigateToStep,
+    editorFields,
   } = useCurrentEnvelopeEditor();
 
   const [searchParams, setSearchParams] = useSearchParams();
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isStepLoading, setIsStepLoading] = useState(false);
 
-  const {
-    general: {
-      minimizeLeftSidebar,
-      allowUploadAndRecipientStep,
-      allowAddFieldsStep,
-      allowPreviewStep,
-    },
-    actions: {
-      allowDistributing,
-      allowDirectLink,
-      allowDuplication,
-      allowDownloadPDF,
-      allowDeletion,
-      allowReturnToPreviousPage,
-    },
-  } = editorConfig;
+  const [currentStep, setCurrentStep] = useState<EnvelopeEditorStep>(() => {
+    const searchParamStep = searchParams.get('step') as EnvelopeEditorStep | undefined;
 
-  const envelopeEditorSteps = useMemo(() => {
-    const steps: EnvelopeEditorStepData[] = [];
-
-    if (allowUploadAndRecipientStep) {
-      steps.push(UPLOAD_STEP);
+    // Empty URL param equals upload, otherwise use the step URL param
+    if (!searchParamStep) {
+      return 'upload';
     }
 
-    if (allowAddFieldsStep) {
-      steps.push(ADD_FIELDS_STEP);
+    const validSteps: EnvelopeEditorStep[] = ['upload', 'addFields', 'preview'];
+
+    if (validSteps.includes(searchParamStep)) {
+      return searchParamStep;
     }
 
-    if (allowPreviewStep) {
-      steps.push(PREVIEW_STEP);
+    return 'upload';
+  });
+
+  const navigateToStep = (step: EnvelopeEditorStep) => {
+    setCurrentStep(step);
+
+    void flushAutosave();
+
+    if (!isStepLoading && isAutosaving) {
+      setIsStepLoading(true);
     }
 
-    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 };
-    },
-  );
+    // 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;
+      });
+    }
+  };
 
   // Watch the URL params and setStep if the step changes.
   useEffect(() => {
@@ -153,19 +136,20 @@ export const EnvelopeEditor = () => {
 
     const foundStep = envelopeEditorSteps.find((step) => step.id === stepParam);
 
-    if (foundStep && foundStep.id !== currentStep.step) {
+    if (foundStep && foundStep.id !== currentStep) {
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      void navigateToStep(foundStep.id as EnvelopeEditorStep).then(() => {
-        setCurrentStep({
-          step: foundStep.id as EnvelopeEditorStep,
-          isLoading: false,
-        });
-      });
+      navigateToStep(foundStep.id as EnvelopeEditorStep);
     }
   }, [searchParams]);
 
+  useEffect(() => {
+    if (!isAutosaving) {
+      setIsStepLoading(false);
+    }
+  }, [isAutosaving]);
+
   const currentStepData =
-    envelopeEditorSteps.find((step) => step.id === currentStep.step) || envelopeEditorSteps[0];
+    envelopeEditorSteps.find((step) => step.id === currentStep) || envelopeEditorSteps[0];
 
   return (
     <div className="h-screen w-screen bg-gray-50 dark:bg-background">
@@ -174,124 +158,57 @@ export const EnvelopeEditor = () => {
       {/* Main Content Area */}
       <div className="flex h-[calc(100vh-4rem)] w-screen">
         {/* Left Section - Step Navigation */}
-        <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,
-            },
-          )}
-        >
+        <div className="flex w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-border bg-background py-4">
           {/* Left section step selector. */}
-          {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 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)}%`,
+                }}
+              />
             </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>}
 
-                <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="space-y-3">
+              {envelopeEditorSteps.map((step) => {
+                const Icon = step.icon;
+                const isActive = currentStep === step.id;
 
-              <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 ${
+                return (
+                  <div
+                    key={step.id}
+                    className={`cursor-pointer rounded-lg p-3 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'
-                    }`,
-                    {
-                      '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 && (
+                    }`}
+                    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>
                       <div>
                         <div
                           className={`text-sm font-medium ${
@@ -304,275 +221,158 @@ export const EnvelopeEditor = () => {
                         </div>
                         <div className="text-xs text-muted-foreground">{t(step.description)}</div>
                       </div>
-                    )}
+                    </div>
                   </div>
-                </button>
-              );
-            })}
+                );
+              })}
+            </div>
           </div>
 
-          <Separator
-            className={cn('my-6', {
-              'mx-auto mb-4 w-4/5': minimizeLeftSidebar,
-            })}
-          />
+          <Separator className="my-6" />
 
           {/* Quick Actions. */}
-          <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>
-            )}
+          <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>
+              }
+            />
 
-            {editorConfig.settings && (
-              <EnvelopeEditorSettingsDialog
+            {isDocument && (
+              <EnvelopeDistributeDialog
+                documentRootPath={relativePath.documentRootPath}
                 trigger={
-                  <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 variant="ghost" size="sm" className="w-full justify-start">
+                    <SendIcon className="mr-2 h-4 w-4" />
+                    <Trans>Send 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>
-                  }
-                />
-              </>
+            {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>
+                }
+              />
             )}
 
-            {isTemplate && allowDirectLink && (
+            {/* <Button variant="ghost" size="sm" className="w-full justify-start">
+              <FileText className="mr-2 h-4 w-4" />
+              Save as Template
+            </Button> */}
+
+            {isTemplate && (
               <TemplateDirectLinkDialog
                 templateId={mapSecondaryIdToTemplateId(envelope.secondaryId)}
                 directLink={envelope.directLink}
                 recipients={envelope.recipients}
-                onCreateSuccess={async () => await syncEnvelope()}
-                onDeleteSuccess={async () => await syncEnvelope()}
                 trigger={
-                  <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 variant="ghost" size="sm" className="w-full justify-start">
+                    <LinkIcon className="mr-2 h-4 w-4" />
+                    <Trans>Direct Link</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" />
+            <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>
+              }
+            />
 
-                    {!minimizeLeftSidebar && (
-                      <span className="ml-2">
-                        {isDocument ? (
-                          <Trans>Duplicate Document</Trans>
-                        ) : (
-                          <Trans>Duplicate Template</Trans>
-                        )}
-                      </span>
-                    )}
-                  </Button>
-                }
-              />
-            )}
+            <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>
+              }
+            />
 
-            {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,
-                  );
-                }}
-              />
-            )}
+            <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>
           </div>
 
-          {/* Footer of left sidebar. */}
-          {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>
+          {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>
         </div>
 
         {/* Main Content - Changes based on current step */}
-        <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,
-          })
+        <AnimateGenericFadeInOut className="flex-1 overflow-y-auto" key={currentStep}>
+          {match({ currentStep, isStepLoading })
             .with({ isStepLoading: true }, () => <SpinnerBox className="py-32" />)
-            .with({ currentStep: 'upload', allowUploadAndRecipientStep: true }, () => (
-              <EnvelopeEditorUploadPage />
-            ))
-            .with({ currentStep: 'addFields', allowAddFieldsStep: true }, () => (
-              <EnvelopeEditorFieldsPage />
-            ))
-            .with({ currentStep: 'preview', allowPreviewStep: true }, () => (
-              <EnvelopeEditorPreviewPage />
-            ))
-            .otherwise(() => null)}
+            .with({ currentStep: 'upload' }, () => <EnvelopeEditorUploadPage />)
+            .with({ currentStep: 'addFields' }, () => <EnvelopeEditorFieldsPage />)
+            .with({ currentStep: 'preview' }, () => <EnvelopeEditorPreviewPage />)
+            .exhaustive()}
         </AnimateGenericFadeInOut>
       </div>
     </div>
   );
-};
+}

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

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

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

@@ -1,9 +1,8 @@
 import { useMemo } from 'react';
 
 import { Plural, Trans } from '@lingui/react/macro';
-import { RecipientRole } from '@prisma/client';
+import { FieldType, RecipientRole } from '@prisma/client';
 
-import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-field';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
@@ -31,7 +30,7 @@ export default function EnvelopeSignerForm() {
   const { isNameLocked, isEmailLocked } = useEmbedSigningContext() || {};
 
   const hasSignatureField = useMemo(() => {
-    return recipientFields.some((field) => isSignatureFieldType(field.type));
+    return recipientFields.some((field) => field.type === FieldType.SIGNATURE);
   }, [recipientFields]);
 
   const isSubmitting = false;

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

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

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

@@ -1,32 +0,0 @@
-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,16 +5,15 @@ 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, children }: CardMetricProps) => {
+export const CardMetric = ({ icon: Icon, title, value, className }: CardMetricProps) => {
   return (
     <div
       className={cn(
-        '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',
+        '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',
         className,
       )}
     >
@@ -22,7 +21,7 @@ export const CardMetric = ({ icon: Icon, title, value, className, children }: Ca
         <div className="flex items-start">
           {Icon && (
             <div className="mr-2 h-4 w-4">
-              <Icon className="h-4 w-4 text-muted-foreground" />
+              <Icon className="text-muted-foreground h-4 w-4" />
             </div>
           )}
 
@@ -31,11 +30,9 @@ export const CardMetric = ({ icon: Icon, title, value, className, children }: Ca
           </h3>
         </div>
 
-        {children || (
-          <p className="mt-auto text-4xl font-semibold leading-8 text-foreground">
-            {typeof value === 'number' ? value.toLocaleString('en-US') : value}
-          </p>
-        )}
+        <p className="text-foreground mt-auto text-4xl font-semibold leading-8">
+          {typeof value === 'number' ? value.toLocaleString('en-US') : value}
+        </p>
       </div>
     </div>
   );

apps/remix/app/components/general/skeletons/document-edit-skeleton.tsx

@@ -21,17 +21,17 @@ export default function DocumentEditSkeleton() {
       </div>
 
       <div className="mt-4 grid h-[80vh] max-h-[60rem] w-full grid-cols-12 gap-x-8">
-        <div className="col-span-12 rounded-xl border-2 border-border bg-white/50 p-2 before:rounded-xl lg:col-span-6 xl:col-span-7 dark:bg-background">
+        <div className="dark:bg-background border-border col-span-12 rounded-xl border-2 bg-white/50 p-2 before:rounded-xl lg:col-span-6 xl:col-span-7">
           <div className="flex h-[80vh] max-h-[60rem] flex-col items-center justify-center">
-            <Loader className="h-12 w-12 animate-spin text-documenso" />
+            <Loader className="text-documenso h-12 w-12 animate-spin" />
 
-            <p className="mt-4 text-muted-foreground">
+            <p className="text-muted-foreground mt-4">
               <Trans>Loading document...</Trans>
             </p>
           </div>
         </div>
 
-        <div className="col-span-12 rounded-xl border-2 border-border bg-background before:rounded-xl lg:col-span-6 xl:col-span-5" />
+        <div className="bg-background border-border col-span-12 rounded-xl border-2 before:rounded-xl lg:col-span-6 xl:col-span-5" />
       </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,12 +312,11 @@ export const TemplateEditForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewer
+          <PDFViewerLazy
             key={template.envelopeItems[0].id}
             envelopeItem={template.envelopeItems[0]}
             token={undefined}
-            version="current"
-            scrollParentRef="window"
+            version="signed"
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

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

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

apps/remix/app/components/tables/admin-document-logs-table.tsx

@@ -1,210 +0,0 @@
-import { useMemo, useState } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { DateTime } from 'luxon';
-import type { DateTimeFormatOptions } from 'luxon';
-import { useSearchParams } from 'react-router';
-import { UAParser } from 'ua-parser-js';
-
-import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import type { TDocumentAuditLog } from '@documenso/lib/types/document-audit-logs';
-import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
-import { formatDocumentAuditLogAction } from '@documenso/lib/utils/document-audit-logs';
-import { trpc } from '@documenso/trpc/react';
-import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
-import { Button } from '@documenso/ui/primitives/button';
-import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
-import { DataTable } from '@documenso/ui/primitives/data-table';
-import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@documenso/ui/primitives/dialog';
-import { Skeleton } from '@documenso/ui/primitives/skeleton';
-import { TableCell } from '@documenso/ui/primitives/table';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type AdminDocumentLogsTableProps = {
-  envelopeId: string;
-};
-
-const dateFormat: DateTimeFormatOptions = {
-  ...DateTime.DATETIME_SHORT,
-  hourCycle: 'h12',
-};
-
-export const AdminDocumentLogsTable = ({ envelopeId }: AdminDocumentLogsTableProps) => {
-  const { _, i18n } = useLingui();
-  const { toast } = useToast();
-
-  const [searchParams] = useSearchParams();
-  const updateSearchParams = useUpdateSearchParams();
-
-  const [selectedAuditLog, setSelectedAuditLog] = useState<TDocumentAuditLog | null>(null);
-
-  const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
-
-  const { data, isLoading, isLoadingError } = trpc.admin.document.findAuditLogs.useQuery(
-    {
-      envelopeId,
-      page: parsedSearchParams.page,
-      perPage: parsedSearchParams.perPage,
-    },
-    {
-      placeholderData: (previousData) => previousData,
-    },
-  );
-
-  const onPaginationChange = (page: number, perPage: number) => {
-    updateSearchParams({
-      page,
-      perPage,
-    });
-  };
-
-  const results = data ?? {
-    data: [],
-    perPage: 10,
-    currentPage: 1,
-    totalPages: 1,
-  };
-
-  const columns = useMemo(() => {
-    const parser = new UAParser();
-
-    return [
-      {
-        header: _(msg`Time`),
-        accessorKey: 'createdAt',
-        cell: ({ row }) => i18n.date(row.original.createdAt, dateFormat),
-      },
-      {
-        header: _(msg`User`),
-        accessorKey: 'name',
-        cell: ({ row }) =>
-          row.original.name || row.original.email ? (
-            <div>
-              {row.original.name && (
-                <p className="truncate" title={row.original.name}>
-                  {row.original.name}
-                </p>
-              )}
-
-              {row.original.email && (
-                <p className="truncate" title={row.original.email}>
-                  {row.original.email}
-                </p>
-              )}
-            </div>
-          ) : (
-            <p>N/A</p>
-          ),
-      },
-      {
-        header: _(msg`Action`),
-        accessorKey: 'type',
-        cell: ({ row }) => (
-          <span>{formatDocumentAuditLogAction(i18n, row.original).description}</span>
-        ),
-      },
-      {
-        header: _(msg`IP Address`),
-        accessorKey: 'ipAddress',
-      },
-      {
-        header: _(msg`Browser`),
-        cell: ({ row }) => {
-          if (!row.original.userAgent) {
-            return 'N/A';
-          }
-
-          parser.setUA(row.original.userAgent);
-
-          const result = parser.getResult();
-
-          return result.browser.name ?? 'N/A';
-        },
-      },
-      {
-        header: '',
-        id: 'actions',
-        cell: ({ row }) => (
-          <Button variant="link" size="sm" onClick={() => setSelectedAuditLog(row.original)}>
-            <Trans>View JSON</Trans>
-          </Button>
-        ),
-      },
-    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
-  }, []);
-
-  return (
-    <>
-      <DataTable
-        columns={columns}
-        data={results.data}
-        perPage={results.perPage}
-        currentPage={results.currentPage}
-        totalPages={results.totalPages}
-        onPaginationChange={onPaginationChange}
-        error={{
-          enable: isLoadingError,
-        }}
-        skeleton={{
-          enable: isLoading,
-          rows: 3,
-          component: (
-            <>
-              <TableCell>
-                <Skeleton className="h-4 w-12 rounded-full" />
-              </TableCell>
-              <TableCell className="w-1/2 py-4 pr-4">
-                <div className="ml-2 flex flex-grow flex-col">
-                  <Skeleton className="h-4 w-1/3 max-w-[8rem]" />
-                  <Skeleton className="mt-1 h-4 w-1/2 max-w-[12rem]" />
-                </div>
-              </TableCell>
-              <TableCell>
-                <Skeleton className="h-4 w-12 rounded-full" />
-              </TableCell>
-              <TableCell>
-                <Skeleton className="h-4 w-10 rounded-full" />
-              </TableCell>
-              <TableCell>
-                <Skeleton className="h-4 w-10 rounded-full" />
-              </TableCell>
-              <TableCell>
-                <Skeleton className="h-4 w-8 rounded-full" />
-              </TableCell>
-            </>
-          ),
-        }}
-      >
-        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
-      </DataTable>
-
-      <Dialog open={selectedAuditLog !== null} onOpenChange={() => setSelectedAuditLog(null)}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>
-              <Trans>Audit Log Details</Trans>
-            </DialogTitle>
-          </DialogHeader>
-
-          {selectedAuditLog && (
-            <div className="group relative">
-              <div className="absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100">
-                <CopyTextButton
-                  value={JSON.stringify(selectedAuditLog, null, 2)}
-                  onCopySuccess={() => toast({ title: _(msg`Copied to clipboard`) })}
-                />
-              </div>
-
-              <pre className="max-h-[60vh] overflow-auto whitespace-pre-wrap break-all rounded-lg border border-border bg-muted/50 p-4 font-mono text-xs leading-relaxed text-foreground">
-                {JSON.stringify(selectedAuditLog, null, 2)}
-              </pre>
-            </div>
-          )}
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-};

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

@@ -12,8 +12,7 @@ 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 { Checkbox } from '@documenso/ui/primitives/checkbox';
-import type { DataTableColumnDef, RowSelectionState } from '@documenso/ui/primitives/data-table';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
@@ -31,9 +30,6 @@ export type DocumentsTableProps = {
   isLoading?: boolean;
   isLoadingError?: boolean;
   onMoveDocument?: (documentId: number) => void;
-  enableSelection?: boolean;
-  rowSelection?: RowSelectionState;
-  onRowSelectionChange?: (selection: RowSelectionState) => void;
 };
 
 type DocumentsTableRow = TFindDocumentsResponse['data'][number];
@@ -43,9 +39,6 @@ export const DocumentsTable = ({
   isLoading,
   isLoadingError,
   onMoveDocument,
-  enableSelection,
-  rowSelection,
-  onRowSelectionChange,
 }: DocumentsTableProps) => {
   const { _, i18n } = useLingui();
 
@@ -55,34 +48,7 @@ export const DocumentsTable = ({
   const updateSearchParams = useUpdateSearchParams();
 
   const columns = useMemo(() => {
-    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(
+    return [
       {
         header: _(msg`Created`),
         accessorKey: 'createdAt',
@@ -127,10 +93,8 @@ export const DocumentsTable = ({
             </div>
           ),
       },
-    );
-
-    return cols;
-  }, [team, onMoveDocument, enableSelection]);
+    ] satisfies DataTableColumnDef<DocumentsTableRow>[];
+  }, [team, onMoveDocument]);
 
   const onPaginationChange = (page: number, perPage: number) => {
     startTransition(() => {
@@ -168,11 +132,6 @@ 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>
@@ -193,17 +152,13 @@ export const DocumentsTable = ({
             </>
           ),
         }}
-        enableRowSelection={enableSelection}
-        rowSelection={rowSelection}
-        onRowSelectionChange={onRowSelectionChange}
-        getRowId={(row) => row.envelopeId}
       >
         {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
       </DataTable>
 
       {isPending && (
-        <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 className="bg-background/50 absolute inset-0 flex items-center justify-center">
+          <Loader className="text-muted-foreground h-8 w-8 animate-spin" />
         </div>
       )}
     </div>

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

@@ -1,55 +0,0 @@
-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>
-  );
-};