chore: remove random file

.agents/plans/calm-violet-tide-envelope-expiration.md

@@ -1,519 +0,0 @@
----
-date: 2026-02-10
-title: Envelope Expiration
----
-
-## Summary
-
-Envelopes (documents sent for signing) should automatically expire after a configurable period, preventing recipients from completing stale documents. Expiration is tracked **per-recipient** — when a recipient's signing window lapses, the document owner is notified and can resend (extending the deadline) or cancel. The document itself stays PENDING so other recipients can continue signing.
-
-**Settings cascade**: Organisation → Team → Document (each level can override the prior).
-**Default**: 1 month from when the envelope is sent (transitions to PENDING).
-
----
-
-## 1. Database Schema Changes
-
-### 1.1 Expiration period data shape
-
-Store expiration as a structured JSON object rather than an enum or raw milliseconds. This avoids the enum treadmill (adding `FOUR_MONTHS` later requires a migration) while keeping values validated and meaningful.
-
-**Zod schema** (defined in `packages/lib/constants/envelope-expiration.ts`):
-
-```typescript
-export const ZEnvelopeExpirationPeriod = z.union([
-  z.object({ unit: z.enum(['day', 'week', 'month', 'year']), amount: z.number().int().min(1) }),
-  z.object({ disabled: z.literal(true) }),
-]);
-
-export type TEnvelopeExpirationPeriod = z.infer<typeof ZEnvelopeExpirationPeriod>;
-```
-
-Semantics:
-
-- `null` on `DocumentMeta` / `TeamGlobalSettings` = inherit from parent
-- `{ disabled: true }` = explicitly never expires
-- `{ unit: 'month', amount: 1 }` = expires in 1 month
-
-No Prisma enum is needed — the period is stored as `Json?` on the relevant models (see sections 1.3 and 1.4).
-
-### 1.2 Add expiration fields to `Recipient`
-
-```prisma
-model Recipient {
-  // ... existing fields
-  expiresAt              DateTime?
-  expirationNotifiedAt   DateTime?   // null = not yet notified; set when owner notification sent
-
-  @@index([expiresAt])
-}
-```
-
-`expiresAt` is a computed timestamp set when the envelope transitions to PENDING (at send time). It is calculated from the effective expiration period. Storing the concrete timestamp rather than a relative duration means:
-
-- Sweep queries are simple (`WHERE expiresAt <= NOW() AND expirationNotifiedAt IS NULL`)
-- No need to re-resolve the settings cascade at query time
-- The sender can see the exact deadline in the UI
-- The index on `expiresAt` ensures the expiration sweep query is efficient
-
-`expirationNotifiedAt` tracks whether the owner has already been notified about this recipient's expiration, making the notification job idempotent.
-
-### 1.3 Add expiration period to settings models
-
-**OrganisationGlobalSettings** (JSON, application-level default):
-
-```prisma
-model OrganisationGlobalSettings {
-  // ... existing fields
-  envelopeExpirationPeriod Json?
-}
-```
-
-Prisma `@default` doesn't work for `Json` columns, so the application-level default (`{ unit: 'month', amount: 1 }`) is applied in `extractDerivedTeamSettings` / `extractDerivedDocumentMeta` when the value is null. The migration should backfill existing rows with `{ "unit": "month", "amount": 1 }`.
-
-**TeamGlobalSettings** (nullable, null = inherit from org):
-
-```prisma
-model TeamGlobalSettings {
-  // ... existing fields
-  envelopeExpirationPeriod Json?
-}
-```
-
-### 1.4 Add expiration period to DocumentMeta
-
-This allows per-document override during the document editing flow:
-
-```prisma
-model DocumentMeta {
-  // ... existing fields
-  envelopeExpirationPeriod Json?
-}
-```
-
-When null on DocumentMeta, the resolved team/org setting is used at send time. Validated at write time using `ZEnvelopeExpirationPeriod.nullable()`.
-
-**Important**: `envelopeExpirationPeriod` on `DocumentMeta` is a user-facing preference that may be set during the draft editing flow. It does NOT determine the final expiration — that is resolved at send time (see section 2.3). The value stored here is just the user's selection in the document editor.
-
----
-
-## 2. Expiration Period Resolution
-
-### 2.1 Duration mapping
-
-Add to `packages/lib/constants/envelope-expiration.ts` alongside the Zod schema:
-
-```typescript
-import { Duration } from 'luxon';
-
-const UNIT_TO_LUXON_KEY: Record<TEnvelopeExpirationPeriod['unit'], string> = {
-  day: 'days',
-  week: 'weeks',
-  month: 'months',
-  year: 'years',
-};
-
-export const DEFAULT_ENVELOPE_EXPIRATION_PERIOD: TEnvelopeExpirationPeriod = {
-  unit: 'month',
-  amount: 1,
-};
-
-export const getEnvelopeExpirationDuration = (period: TEnvelopeExpirationPeriod): Duration => {
-  return Duration.fromObject({ [UNIT_TO_LUXON_KEY[period.unit]]: period.amount });
-};
-```
-
-### 2.2 Settings cascade integration
-
-`extractDerivedTeamSettings()` in `packages/lib/utils/teams.ts` needs **no code changes** — it iterates `Object.keys(derivedSettings)` and overrides with non-null team values at runtime. The new `envelopeExpirationPeriod` field on both `OrganisationGlobalSettings` and `TeamGlobalSettings` will be automatically picked up.
-
-Update `extractDerivedDocumentMeta()` in `packages/lib/utils/document.ts` to include the new field:
-
-```typescript
-envelopeExpirationPeriod: meta.envelopeExpirationPeriod ?? settings.envelopeExpirationPeriod,
-```
-
-### 2.3 Compute `expiresAt` at send time
-
-The expiration period is **locked at send time** — when the envelope transitions to PENDING. The concrete `expiresAt` timestamp is computed for each recipient when the document is actually sent.
-
-In `packages/lib/server-only/document/send-document.ts`:
-
-```typescript
-// Resolve effective period: document meta -> team/org settings -> default
-const rawPeriod =
-  envelope.documentMeta?.envelopeExpirationPeriod ?? settings.envelopeExpirationPeriod;
-
-const expiresAt = resolveExpiresAt(rawPeriod);
-
-// Inside the $transaction, for each recipient:
-await tx.recipient.updateMany({
-  where: { envelopeId: envelope.id },
-  data: { expiresAt },
-});
-```
-
-### 2.4 Compute `expiresAt` in the direct template flow
-
-`create-document-from-direct-template.ts` creates envelopes directly as PENDING and then calls `sendDocument` afterward. Since `sendDocument` handles setting `expiresAt` on recipients, the direct template flow doesn't need to set it directly — `sendDocument` handles it.
-
----
-
-## 3. Cron Job Infrastructure (New)
-
-The current job system is purely event-triggered. Inngest natively supports cron-triggered functions, but the local provider (used in dev and by self-hosters who don't want a third-party dependency) has no scheduling capability. This section adds cron support to the local provider to maintain feature parity.
-
-### 3.1 Extend `JobDefinition` with cron support
-
-Add an optional `cron` field to the trigger type in `packages/lib/jobs/client/_internal/job.ts`:
-
-```typescript
-export type JobDefinition<Name extends string = string, Schema = any> = {
-  id: string;
-  name: string;
-  version: string;
-  enabled?: boolean;
-  optimizeParallelism?: boolean;
-  trigger: {
-    name: Name;
-    schema?: z.ZodType<Schema>;
-    /** Cron expression (e.g. "* * * * *"). When set, the job runs on a schedule. */
-    cron?: string;
-  };
-  handler: (options: { payload: Schema; io: JobRunIO }) => Promise<Json | void>;
-};
-```
-
-### 3.2 Inngest provider: wire up native cron
-
-In `packages/lib/jobs/client/inngest.ts`, when defining a function, check for `cron`:
-
-```typescript
-defineJob(job) {
-  if (job.trigger.cron) {
-    this._functions.push(
-      this._client.createFunction(
-        { id: job.id, name: job.name },
-        { cron: job.trigger.cron },
-        async ({ step, logger }) => {
-          const io = convertInngestIoToJobRunIo(step, logger, this);
-          await job.handler({ payload: {} as any, io });
-        },
-      ),
-    );
-  } else {
-    // Existing event-triggered logic (unchanged)
-  }
-}
-```
-
-### 3.3 Local provider: poller + deterministic `BackgroundJob` IDs
-
-Use the existing `BackgroundJob` table for multi-instance dedupe instead of advisory locks. This approach keeps implementation Prisma-only (no raw SQL), works for single-instance and multi-instance deployments, and preserves existing retry/visibility behavior.
-
-**On `defineJob()`**: If the job has a `cron` field, register an in-process scheduler entry and start a lightweight poller (every 30s with jitter).
-
-**Each poll tick**:
-
-1. Evaluate whether the cron schedule has one or more due run slots since the last tick (use a real cron parser, e.g. `cron-parser`)
-2. For each due slot, build a deterministic run ID from job ID + scheduled slot time
-3. Create a `BackgroundJob` row with that deterministic ID using Prisma
-4. If insert succeeds → enqueue via the existing local job pipeline
-5. If insert fails with Prisma `P2002` (unique violation) → another node already enqueued that run, skip
-
-### 3.4 Summary of changes to the job system
-
-| File                                        | Change                                                           |
-| ------------------------------------------- | ---------------------------------------------------------------- |
-| `packages/lib/jobs/client/_internal/job.ts` | Add optional `cron` field to `trigger` type                      |
-| `packages/lib/jobs/client/local.ts`         | Add cron poller + deterministic `BackgroundJob.id` dedupe        |
-| `packages/lib/jobs/client/inngest.ts`       | Wire up `{ cron: ... }` in `createFunction` for cron jobs        |
-| `packages/lib/jobs/client/_internal/*`      | Add cron helper utilities (`getDueCronSlots`, run ID generation) |
-
----
-
-## 4. Expiration Processing
-
-### 4.1 Two-job architecture
-
-Expiration uses two jobs: a **sweep dispatcher** that runs on a cron schedule and finds expired recipients, and an **individual notification job** that handles the audit log, owner notification email, and webhook for a single recipient. This separation means:
-
-- The sweep is lightweight and fast (just a query + N job triggers)
-- Each recipient's expiration notification is independently retryable
-- The individual jobs are idempotent — they check `expirationNotifiedAt IS NULL` before processing
-
-### 4.2 Sweep job: `EXPIRE_RECIPIENTS_SWEEP_JOB`
-
-A cron-triggered job that runs every minute to find and dispatch notifications for expired recipients.
-
-**Definition:** `packages/lib/jobs/definitions/internal/expire-recipients-sweep.ts`
-
-**Handler:** `packages/lib/jobs/definitions/internal/expire-recipients-sweep.handler.ts`
-
-```typescript
-const expiredRecipients = await prisma.recipient.findMany({
-  where: {
-    expiresAt: { lte: new Date() },
-    expirationNotifiedAt: null,
-    signingStatus: { notIn: [SigningStatus.SIGNED, SigningStatus.REJECTED] },
-    envelope: { status: DocumentStatus.PENDING },
-  },
-  select: { id: true },
-  take: 100,
-});
-
-for (const recipient of expiredRecipients) {
-  await jobs.triggerJob({
-    name: 'internal.notify-recipient-expired',
-    payload: { recipientId: recipient.id },
-  });
-}
-```
-
-### 4.3 Individual notification job: `NOTIFY_RECIPIENT_EXPIRED_JOB`
-
-An event-triggered job that handles a single recipient's expiration.
-
-**Definition:** `packages/lib/jobs/definitions/internal/notify-recipient-expired.ts`
-
-**Handler:** `packages/lib/jobs/definitions/internal/notify-recipient-expired.handler.ts`
-
-The handler:
-
-1. Fetches the recipient (with guard: `expirationNotifiedAt IS NULL` + not signed/rejected)
-2. Sets `recipient.expirationNotifiedAt = now()` (idempotency)
-3. Creates audit log entry with `DOCUMENT_RECIPIENT_EXPIRED` type
-4. Sends email notification to the **document owner** (inline — no separate email job)
-5. The document stays PENDING — the owner decides whether to resend or cancel
-
-### 4.4 Register in job client
-
-Add `EXPIRE_RECIPIENTS_SWEEP_JOB_DEFINITION` and `NOTIFY_RECIPIENT_EXPIRED_JOB_DEFINITION` to the job registry in `packages/lib/jobs/client.ts`.
-
-### 4.5 Email template: Recipient Expired
-
-Target the **document owner**:
-
-- Subject: `Signing window expired for "{recipientName}" on "{documentTitle}"`
-- Body: "The signing window for {recipientName} ({recipientEmail}) on document {title} has expired. You can resend the document to extend their deadline or cancel the document."
-- Include a "View Document" link to the document page in the app
-
-Template files:
-
-- `packages/email/templates/recipient-expired.tsx` — wrapper
-- `packages/email/template-components/template-recipient-expired.tsx` — body
-
-### 4.6 Recipient signing guard
-
-In the signing flow, check `recipient.expiresAt` before allowing any signing action. Note that the document stays PENDING even after recipient expiration, so the existing `status !== PENDING` guard does not block expired recipients — an explicit expiration check is required:
-
-```typescript
-if (recipient.expiresAt && recipient.expiresAt <= new Date()) {
-  throw new AppError(AppErrorCode.RECIPIENT_EXPIRED, {
-    message: 'Recipient signing window has expired',
-  });
-}
-```
-
-**Files to update:**
-
-- `packages/lib/server-only/document/complete-document-with-token.ts`
-- `packages/lib/server-only/field/sign-field-with-token.ts`
-- `packages/lib/server-only/field/remove-signed-field-with-token.ts`
-- `packages/lib/server-only/document/reject-document-with-token.ts`
-
----
-
-## 5. UI Design
-
-### 5.1 Expiration Period Selector Component
-
-Use a number input + unit selector combo. This gives organisations full flexibility to configure any duration without needing schema changes for new options.
-
-**Layout**: A horizontal group with:
-
-- A number `<Input>` (min 1, integer)
-- A `<Select>` for the unit (`day`, `week`, `month`, `year`)
-- A "Never expires" toggle/checkbox that disables the duration inputs and sets the value to `{ disabled: true }`
-
-At the team level, include an "Inherit from organisation" option that clears the value to `null`.
-
-**Validation**: Use `ZEnvelopeExpirationPeriod` for form validation.
-
-### 5.2 Organisation Settings → Document Preferences
-
-Add a "Default Envelope Expiration" field to the `DocumentPreferencesForm` component. At the org level, there is no "Inherit" option — it must have a concrete value (default: `{ unit: 'month', amount: 1 }`).
-
-### 5.3 Team Settings → Document Preferences
-
-Same field as org, but with the additional "Inherit from organisation" option (stored as `null`).
-
-### 5.4 Document Editor → Settings Step
-
-Add the expiration selector to `packages/ui/primitives/document-flow/add-settings.tsx` inside the "Advanced Options" accordion.
-
-Label: **"Expiration"**
-Description: _"How long recipients have to complete this document after it is sent."_
-
-### 5.5 Recipient Signing Page — Expired State
-
-When a recipient visits a signing link for an expired recipient:
-
-- Redirect to `/sign/{token}/expired`
-- Show a clear, non-alarming message: "Your signing window has expired. Please contact the sender for a new invitation."
-- Do not show the signing form or fields
-- The `isExpired` flag in `get-envelope-for-recipient-signing.ts` is derived from `recipient.expiresAt`
-
-### 5.6 Embed Signing — Expired State
-
-Embed signing routes handle recipient expiration by throwing `embed-recipient-expired`:
-
-- `apps/remix/app/routes/embed+/_v0+/sign.$token.tsx` — both V1 and V2 loaders check expiration
-- The embed error boundary renders an `EmbedRecipientExpired` component
-- Direct templates (`direct.$token.tsx`) create fresh recipients so `isExpired` is always `false`
-
----
-
-## 6. API / TRPC Changes
-
-### 6.1 Update settings mutation schemas
-
-- `packages/trpc/server/organisation-router/update-organisation-settings.types.ts` — add `envelopeExpirationPeriod: ZEnvelopeExpirationPeriod` (non-nullable at org level)
-- `packages/trpc/server/team-router/update-team-settings.types.ts` — add `envelopeExpirationPeriod: ZEnvelopeExpirationPeriod.nullable()` (null = inherit from org)
-
-### 6.2 Update document mutation schemas
-
-- `packages/lib/types/document-meta.ts` — add `envelopeExpirationPeriod: ZEnvelopeExpirationPeriod.nullable()` to the meta schema
-- `packages/trpc/server/document-router/create-document.types.ts` — include in meta
-- `packages/trpc/server/document-router/update-document.types.ts` — include in meta
-- `packages/trpc/server/document-router/distribute-document.types.ts` — include in meta
-
-### 6.3 Expose `expiresAt` in recipient responses
-
-Ensure `expiresAt` and `expirationNotifiedAt` are returned when fetching recipients/documents so the UI can display expiration status.
-
-### 6.4 Webhook / API schema updates
-
-- Recipient schema includes `expiresAt` and `expirationNotifiedAt` fields (replacing the old `expired` field)
-- Update `packages/api/v1/schema.ts`, webhook payload types, zapier integration, and sample data generators
-
----
-
-## 7. Edge Cases & Considerations
-
-### 7.1 Already-sent documents
-
-The migration should NOT retroactively expire existing recipients. `expiresAt` will be null for all existing recipients, meaning they never expire (backward-compatible).
-
-### 7.2 Re-sending / redistributing
-
-When `redistribute` is called on a PENDING document, `expiresAt` should be refreshed on all eligible recipients. Redistributing signals active intent, so the clock should restart.
-
-**Implementation**: `resendDocument` refreshes `recipient.expiresAt` for all recipients that haven't signed/rejected yet.
-
-### 7.3 Multi-recipient partial expiration
-
-If some recipients have signed and others expire, the document stays PENDING. This is the key advantage over document-level expiration — the owner can resend to extend the expired recipients' deadlines without affecting those who've already signed.
-
-### 7.4 Partial completion
-
-Partial signatures are preserved. The document is not sealed/completed until all required recipients have signed (or the owner cancels).
-
-### 7.5 Timezone handling
-
-`expiresAt` is stored as UTC. Display in the sender's configured timezone.
-
-### 7.6 Race condition: signing at expiration time
-
-The signing guard checks `recipient.expiresAt` in application code before the signing operation. The notification job's guard (`expirationNotifiedAt IS NULL` + `signingStatus NOT IN (SIGNED, REJECTED)`) prevents double-notifications. If a recipient signs just before expiration, the sweep's `signingStatus` filter skips them.
-
-### 7.7 Direct template flow
-
-`create-document-from-direct-template.ts` creates envelopes directly as PENDING then calls `sendDocument`. Since `sendDocument` sets `recipient.expiresAt`, no special handling is needed in the direct template flow.
-
----
-
-## 8. Migration Plan
-
-1. Add Prisma schema changes (`expiresAt` + `expirationNotifiedAt` on Recipient, `Json?` fields on settings models, index)
-2. Generate and run migration
-3. Backfill: set `envelopeExpirationPeriod` to `{ "unit": "month", "amount": 1 }` on all existing `OrganisationGlobalSettings` rows
-4. No backfill on `Recipient.expiresAt` — existing recipients keep null (never expire)
-5. Deploy backend changes (jobs, guards, email template)
-6. Deploy frontend changes (settings UI, document editor, signing page, embeds)
-
----
-
-## 9. Files to Create or Modify
-
-### New Files
-
-- `packages/lib/constants/envelope-expiration.ts` — `ZEnvelopeExpirationPeriod` schema, types, `DEFAULT_ENVELOPE_EXPIRATION_PERIOD`, `getEnvelopeExpirationDuration()`, `resolveExpiresAt()` helper
-- `packages/lib/jobs/definitions/internal/expire-recipients-sweep.ts` — cron sweep job definition
-- `packages/lib/jobs/definitions/internal/expire-recipients-sweep.handler.ts` — cron sweep handler
-- `packages/lib/jobs/definitions/internal/notify-recipient-expired.ts` — individual notification job definition
-- `packages/lib/jobs/definitions/internal/notify-recipient-expired.handler.ts` — notification handler (includes inline email sending)
-- `packages/email/templates/recipient-expired.tsx` — email template wrapper
-- `packages/email/template-components/template-recipient-expired.tsx` — email template body
-- `apps/remix/app/components/embed/embed-recipient-expired.tsx` — embed expired component
-
-### Modified Files
-
-**Job system (cron infrastructure):**
-
-- `packages/lib/jobs/client/_internal/job.ts` — add optional `cron` field to `trigger` type
-- `packages/lib/jobs/client/local.ts` — add cron poller + deterministic `BackgroundJob.id` dedupe
-- `packages/lib/jobs/client/inngest.ts` — wire up `{ cron: ... }` in `createFunction`
-- `packages/lib/jobs/client/_internal/*` — add cron helper utilities (slot calc + run ID)
-- `packages/lib/jobs/client.ts` — register new jobs
-
-**Schema & data layer:**
-
-- `packages/prisma/schema.prisma` — model changes + index
-- `packages/lib/utils/document.ts` — `extractDerivedDocumentMeta` (add `envelopeExpirationPeriod`)
-- `packages/lib/server-only/document/send-document.ts` — resolve settings + compute and set `recipient.expiresAt`
-- `packages/lib/server-only/template/create-document-from-direct-template.ts` — no changes (sendDocument handles it)
-- `packages/lib/server-only/document/resend-document.ts` — refresh `recipient.expiresAt` on redistribute
-- `packages/lib/server-only/document/complete-document-with-token.ts` — recipient expiration guard
-- `packages/lib/server-only/field/sign-field-with-token.ts` — recipient expiration guard
-- `packages/lib/server-only/field/remove-signed-field-with-token.ts` — recipient expiration guard
-- `packages/lib/server-only/document/reject-document-with-token.ts` — recipient expiration guard
-
-**Error handling:**
-
-- `packages/lib/errors/app-error.ts` — add `RECIPIENT_EXPIRED` error code
-
-**Audit logs:**
-
-- `packages/lib/types/document-audit-logs.ts` — add `DOCUMENT_RECIPIENT_EXPIRED` type with `recipientEmail`/`recipientName` data fields
-- `packages/lib/utils/document-audit-logs.ts` — add human-readable rendering for `DOCUMENT_RECIPIENT_EXPIRED`
-
-**Signing page:**
-
-- `packages/lib/server-only/envelope/get-envelope-for-recipient-signing.ts` — derive `isExpired` from `recipient.expiresAt`
-- `apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx` — keep redirect to expired page using `isExpired`
-
-**Embeds:**
-
-- `apps/remix/app/routes/embed+/_v0+/sign.$token.tsx` — check recipient expiration in V1/V2 loaders
-- `apps/remix/app/routes/embed+/_v0+/_layout.tsx` — handle `embed-recipient-expired` in error boundary
-
-**Webhook / API:**
-
-- `packages/lib/types/recipient.ts` — add `expiresAt`/`expirationNotifiedAt` to recipient type
-- `packages/lib/types/webhook-payload.ts` — add `expiresAt`/`expirationNotifiedAt` to webhook recipient
-- `packages/lib/server-only/webhooks/trigger/generate-sample-data.ts` — update sample data
-- `packages/lib/server-only/webhooks/zapier/list-documents.ts` — update zapier recipient shape
-- `packages/api/v1/schema.ts` — add `expiresAt` to API recipient schema
-
-**TRPC / settings:**
-
-- `packages/trpc/server/organisation-router/update-organisation-settings.types.ts`
-- `packages/trpc/server/team-router/update-team-settings.types.ts`
-- `packages/lib/types/document-meta.ts`
-
-**UI:**
-
-- `apps/remix/app/components/forms/document-preferences-form.tsx` — add expiration period picker
-- `packages/ui/primitives/document-flow/add-settings.tsx` — add expiration field
-- `packages/ui/primitives/document-flow/add-settings.types.ts` — add to schema

.agents/plans/fresh-gold-rock-cert-page-width-mismatch.md

@@ -1,168 +0,0 @@
----
-date: 2026-02-11
-title: Cert Page Width Mismatch
----
-
-## Problem
-
-Certificate and audit log pages are generated with hardcoded A4 dimensions (`PDF_SIZE_A4_72PPI`: 595×842) regardless of the actual document page sizes. When the source document uses a different page size (e.g., Letter, Legal, or custom dimensions), the certificate/audit log pages end up with a different width than the document pages. This causes problems with courts that expect uniform page dimensions throughout a PDF.
-
-**Both width and height must match** the last page of the document so the entire PDF prints uniformly.
-
-**Root cause**: In `seal-document.handler.ts` (lines 186-187), the certificate payload always uses:
-
-```ts
-pageWidth: PDF_SIZE_A4_72PPI.width,  // 595
-pageHeight: PDF_SIZE_A4_72PPI.height, // 842
-```
-
-These hardcoded values flow into `generateCertificatePdf`, `generateAuditLogPdf`, `renderCertificate`, and `renderAuditLogs` — all of which use `pageWidth`/`pageHeight` to set Konva stage dimensions and layout content.
-
-## Key Files
-
-| File                                                                    | Role                                                                                  |
-| ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
-| `packages/lib/jobs/definitions/internal/seal-document.handler.ts`       | Orchestrates sealing; passes page dimensions to cert/audit generators                 |
-| `packages/lib/constants/pdf.ts`                                         | Defines `PDF_SIZE_A4_72PPI` (595×842)                                                 |
-| `packages/lib/server-only/pdf/generate-certificate-pdf.ts`              | Generates certificate PDF; accepts `pageWidth`/`pageHeight`                           |
-| `packages/lib/server-only/pdf/generate-audit-log-pdf.ts`                | Generates audit log PDF; accepts `pageWidth`/`pageHeight`                             |
-| `packages/lib/server-only/pdf/render-certificate.ts`                    | Renders certificate pages via Konva; uses `pageWidth`/`pageHeight` for stage + layout |
-| `packages/lib/server-only/pdf/render-audit-logs.ts`                     | Renders audit log pages via Konva; uses `pageWidth`/`pageHeight` for stage + layout   |
-| `packages/lib/server-only/pdf/get-page-size.ts`                         | Existing utility — extend with `@libpdf/core` version                                 |
-| `packages/trpc/server/document-router/download-document-certificate.ts` | Standalone certificate download (also hardcodes A4)                                   |
-| `packages/trpc/server/document-router/download-document-audit-logs.ts`  | Standalone audit log download (also hardcodes A4)                                     |
-
-## Architecture
-
-### Current Flow
-
-1. **One cert PDF + one audit log PDF** generated per envelope with hardcoded A4 dims
-2. Both appended to **every** envelope item (document) via `decorateAndSignPdf` → `pdfDoc.copyPagesFrom()`
-3. The audit log is envelope-level (all recipients, all events across all docs) — one per envelope, not per document
-
-### Multi-Document Envelopes
-
-- V1 envelopes: single document only
-- V2 envelopes: support multiple documents (envelope items)
-- Each envelope item gets both cert + audit log pages appended to it
-- If documents have different page sizes → need size-matched cert/audit for each
-
-### Reading Page Dimensions (`@libpdf/core` only)
-
-Use `@libpdf/core`'s `PDF` class — NOT `@cantoo/pdf-lib`:
-
-```ts
-const pdfDoc = await PDF.load(pdfData);
-const lastPage = pdfDoc.getPage(pdfDoc.getPageCount() - 1);
-const { width, height } = lastPage; // e.g. 612, 792 for Letter
-```
-
-Already used this way in `seal-document.handler.ts` lines 403-410 for V2 field insertion.
-"Last page" = last page of the original document, before cert/audit pages are appended.
-
-### Content Layout Adaptation
-
-Both renderers already handle variable dimensions gracefully:
-
-- **Width**: `render-certificate.ts:713` / `render-audit-logs.ts:588` — `Math.min(pageWidth - minimumMargin * 2, contentMaxWidth)` with `contentMaxWidth = 768`. Wider pages get more margin, narrower pages tighter margins.
-- **Height**: Both renderers paginate content into pages using `groupRowsIntoPages()` which respects `pageHeight` via `maxTableHeight = pageHeight - pageTopMargin - pageBottomMargin`. Shorter pages just mean more pages; taller pages fit more rows per page.
-
-### Playwright PDF Path — Out of Scope
-
-The `NEXT_PRIVATE_USE_PLAYWRIGHT_PDF` toggle enables a deprecated Playwright-based PDF generation path (`get-certificate-pdf.ts`, `get-audit-logs-pdf.ts`) that also hardcodes `format: 'A4'` in `page.pdf()`. This path is **not being updated** as part of this fix:
-
-- Both files are marked `@deprecated`
-- The Konva-based path is the default and recommended path
-- The Playwright path is behind a feature flag and will be removed
-
-No changes needed. Add a code comment noting the A4 limitation if the Playwright path is ever re-enabled.
-
-## Plan
-
-### 1. Extend `get-page-size.ts` with `@libpdf/core` utility
-
-Add a `getLastPageDimensions` function to the existing `packages/lib/server-only/pdf/get-page-size.ts` file. This consolidates page-size logic in one place (the file already has the legacy `@cantoo/pdf-lib` version).
-
-```ts
-export const getLastPageDimensions = (pdfDoc: PDF): { width: number; height: number } => {
-  const lastPage = pdfDoc.getPage(pdfDoc.getPageCount() - 1);
-  const width = Math.round(lastPage.width);
-  const height = Math.round(lastPage.height);
-
-  if (width < MIN_CERT_PAGE_WIDTH || height < MIN_CERT_PAGE_HEIGHT) {
-    return { width: PDF_SIZE_A4_72PPI.width, height: PDF_SIZE_A4_72PPI.height };
-  }
-
-  return { width, height };
-};
-```
-
-**Dimension rounding**: `Math.round()` both width and height. PDF points at 72ppi are typically whole numbers; rounding avoids spurious float-precision mismatches (e.g., 612.0 vs 612.00001) that would cause unnecessary duplicate cert/audit PDF generation.
-
-**Minimum page dimensions**: Enforce a minimum threshold (e.g., 300pt for both width and height). If either dimension falls below the minimum, fall back to A4 (595×842). The certificate and audit log renderers have headers, table rows, margins, and QR codes that require a minimum viable area.
-
-### 2. Read last page dimensions from each envelope item's PDF
-
-In `seal-document.handler.ts`, before generating cert/audit PDFs:
-
-- For each `envelopeItem`, load the PDF and read the **last page's width and height** using `getLastPageDimensions`
-- Use `PDF.load()` then pass the loaded doc to the utility
-
-**Resealing consideration**: When `isResealing` is true, envelope items are remapped to use `initialData` (lines 152-158) before this point. Page-size extraction must operate on the same data source that `decorateAndSignPdf` will use. Since the `envelopeItems` array is already remapped by the time we read dimensions, reading from `envelopeItem.documentData` will naturally give the correct (initial) data. No special handling needed beyond ensuring the dimension read happens **after** the resealing remap.
-
-### 3. Generate cert/audit PDFs per unique page size
-
-Current flow generates one cert + one audit log doc per envelope. Change to:
-
-1. Collect `{ width, height }` of the last page for each envelope item
-2. Deduplicate by `"${width}x${height}"` key (using the already-rounded integers)
-3. For each unique size, generate cert PDF and audit log PDF with those dimensions
-4. Store in a `Map<string, { certificateDoc, auditLogDoc }>` keyed by `"${width}x${height}"`
-
-For the common single-document case, this is one generation — same perf as today.
-
-### 4. Thread the correct docs into `decorateAndSignPdf`
-
-In the envelope item loop, look up the item's last-page dimensions in the map and pass the matching cert/audit docs. Signature of `decorateAndSignPdf` doesn't change — it still receives a single `certificateDoc` and `auditLogDoc`, just the right ones per item.
-
-### 5. Update standalone download routes
-
-`download-document-certificate.ts` and `download-document-audit-logs.ts` also hardcode A4:
-
-- Both routes have `documentId` which maps to a specific envelope item
-- Fetch **that specific document's** PDF data, load it, read last page width + height via `getLastPageDimensions`
-- Pass `{ pageWidth, pageHeight }` to the generator
-- This ensures the standalone download matches the dimensions the user would see in the sealed PDF for that document
-
-### 6. Edge cases
-
-| Scenario                                | Behavior                                                                                    |
-| --------------------------------------- | ------------------------------------------------------------------------------------------- |
-| Mixed page sizes within one PDF         | Use last page's dimensions (per spec)                                                       |
-| Page dimensions below minimum threshold | Fall back to A4 (595×842)                                                                   |
-| Landscape pages                         | width/height just swap roles; renderers adapt via `Math.min()` capping. No special handling |
-| Fallback if page dims unreadable        | Default to A4 (595×842)                                                                     |
-| Resealing                               | Dimensions read after `initialData` remap — correct source automatically                    |
-| Playwright PDF path enabled             | Remains A4 — out of scope, deprecated                                                       |
-| Single-doc envelope (most common)       | One generation, same perf as today                                                          |
-| Multi-doc envelope, same page sizes     | Dedup key matches → one generation                                                          |
-| Multi-doc envelope, different sizes     | One generation per unique size                                                              |
-
-### 7. Tests
-
-- Add assertion-based E2E test (no visual regression / reference images needed)
-- Seal a Letter-size (612×792) PDF through the full flow
-- Load the sealed output and assert all pages (document + cert + audit) have matching width/height
-- Can be added to `envelope-alignment.spec.ts` or as a new focused test
-
-## Implementation Steps
-
-1. **Extend `get-page-size.ts`** — add `getLastPageDimensions(pdfDoc: PDF): { width: number; height: number }` using `@libpdf/core`, with `Math.round()` and minimum dimension enforcement
-2. **In `seal-document.handler.ts`**:
-   a. After the resealing remap (line ~159), load each envelope item's PDF via `PDF.load()` and collect last page `{ width, height }` using `getLastPageDimensions`
-   b. Deduplicate by `"${width}x${height}"` key
-   c. Generate cert/audit PDFs per unique size (parallel via `Promise.all`)
-   d. In envelope item loop, look up matching cert/audit doc by size key
-3. **Fix `download-document-certificate.ts`** — load the specific document's PDF, read last page dims via `getLastPageDimensions`, pass to generator
-4. **Fix `download-document-audit-logs.ts`** — same as above, using the specific `documentId`'s PDF
-5. **Add E2E test** — assertion-based test with a Letter-size document verifying all page dimensions match after sealing

.agents/plans/smooth-coral-earth-database-rate-limiting.md

@@ -1,551 +0,0 @@
----
-date: 2026-02-19
-title: Database Rate Limiting
----
-
-## Summary
-
-Replace the in-memory `hono-rate-limiter` with a database-backed rate limiting system using Prisma and PostgreSQL. The current in-memory approach is ineffective in multi-instance deployments since there are no sticky sessions. The new system uses **bucketed counters** (one row per key/action/time-bucket with atomic increment) to efficiently handle both high-throughput API rate limiting and granular auth/email rate limiting.
-
-### Design Decisions
-
-- **Bucketed counters** over row-per-request: high-throughput consumers would create thousands of rows per minute; bucketed counters reduce this to one row per key per time bucket
-- **Fixed time windows**: simpler than sliding windows, the 2x burst-at-boundary scenario is acceptable for rate limiting purposes
-- **Dual-key rate limiting**: per-identifier (`max`) and per-IP (`globalMax`) checked independently via separate rows with a `key` prefix (`id:` / `ip:`)
-- **Accept slight over-count**: the upsert is atomic (increment + return count in one operation) but concurrent requests near the limit may both see a count just under the threshold before either commits, allowing a slight overshoot
-- **Fail-open on errors**: if the rate limit DB query fails, allow the request through rather than blocking legitimate users
-- **Prisma upsert** with `{ increment: 1 }` for atomic counter updates, returns the updated row so count check is a single operation
-- **Application cron job** for cleanup of expired bucket rows
-
-### Rate Limit Check Flow
-
-```
-check({ ip, identifier }) ->
-  1. Upsert IP row (ip:{ip} / action / bucket) with count + 1, RETURNING count
-     -> if globalMax is set and count >= globalMax, return { isLimited: true }
-  2. Upsert identifier row (id:{identifier} / action / bucket) with count + 1, RETURNING count
-     -> if count >= max, return { isLimited: true }
-  3. Neither limited -> return { isLimited: false }
-```
-
-Each upsert atomically increments and returns the new count in a single operation. Both counters always increment on every check — there's no conditional logic to skip one based on the other. This keeps the implementation simple and avoids read-then-write race conditions. If only IP is provided (API rate limiting), only step 1 runs.
-
----
-
-## 1. Database Schema
-
-### 1.1 Prisma model
-
-Add to `packages/prisma/schema.prisma` after the `Counter` model:
-
-```prisma
-model RateLimit {
-  key       String
-  action    String
-  bucket    DateTime
-  count     Int      @default(1)
-
-  createdAt DateTime @default(now())
-
-  @@id([key, action, bucket])
-  @@index([createdAt])
-}
-```
-
-- **Composite primary key** `(key, action, bucket)` serves as both the unique constraint for upserts and the lookup index
-- **`key`** is prefixed: `ip:1.2.3.4` or `id:user@example.com`
-- **`action`** is the rate limit action name: `auth.forgot-password`, `api.v1`, etc.
-- **`bucket`** is the start of the time window, truncated to the window size (e.g., `2026-02-19T10:05:00Z` for a 5-minute bucket)
-- **`createdAt` index** is for the cleanup job to efficiently delete old rows
-- **`count`** starts at 1 (set by the create side of the upsert)
-
-### 1.2 Migration
-
-Generate with `npx prisma migrate dev --name add-rate-limits`.
-
----
-
-## 2. Rate Limit Library
-
-### 2.1 Core module
-
-Create `packages/lib/server-only/rate-limit/rate-limit.ts`:
-
-```typescript
-type WindowUnit = 's' | 'm' | 'h' | 'd';
-type WindowStr = `${number}${WindowUnit}`;
-
-type RateLimitConfig = {
-  action: string;
-  max: number;
-  globalMax?: number;
-  window: WindowStr;
-};
-
-type CheckParams = {
-  ip: string;
-  identifier?: string;
-};
-
-export const rateLimit = (config: RateLimitConfig) => {
-  return {
-    async check(params: CheckParams): Promise<{
-      isLimited: boolean;
-      remaining: number;
-      limit: number;
-      reset: Date;
-    }> { ... }
-  };
-};
-```
-
-### 2.2 Window parsing and bucket computation
-
-```typescript
-const parseWindow = (window: WindowStr): number => {
-  const value = parseInt(window.slice(0, -1), 10);
-  const unit = window.slice(-1) as WindowUnit;
-  const multipliers: Record<WindowUnit, number> = {
-    s: 1000,
-    m: 60 * 1000,
-    h: 60 * 60 * 1000,
-    d: 24 * 60 * 60 * 1000,
-  };
-  return value * multipliers[unit];
-};
-
-const getBucket = (windowMs: number): Date => {
-  const now = Date.now();
-  return new Date(now - (now % windowMs));
-};
-```
-
-### 2.3 Check implementation
-
-The `check()` method:
-
-1. Compute the current bucket from the window
-2. Compute `reset` as `bucket + windowMs` (the start of the next window)
-3. If `globalMax` is set, upsert the IP row and check count
-4. If `identifier` is provided, upsert the identifier row and check count
-5. Wrap in try/catch — **fail-open** on any database error (log the error, return `{ isLimited: false }`)
-
-Each upsert uses Prisma's `upsert` with `{ increment: 1 }`:
-
-```typescript
-const result = await prisma.rateLimit.upsert({
-  where: {
-    key_action_bucket: {
-      key: `ip:${params.ip}`,
-      action: config.action,
-      bucket,
-    },
-  },
-  create: {
-    key: `ip:${params.ip}`,
-    action: config.action,
-    bucket,
-    count: 1,
-  },
-  update: {
-    count: { increment: 1 },
-  },
-});
-
-if (config.globalMax && result.count >= config.globalMax) {
-  return { isLimited: true, remaining: 0, limit: config.globalMax };
-}
-```
-
-### 2.4 Rate limit definitions
-
-Create `packages/lib/server-only/rate-limit/rate-limits.ts` with all rate limit instances:
-
-```typescript
-// ---- Auth (Tier 1 - Critical, sends emails) ----
-export const signupRateLimit = rateLimit({
-  action: 'auth.signup',
-  max: 5,
-  globalMax: 10,
-  window: '1h',
-});
-
-export const forgotPasswordRateLimit = rateLimit({
-  action: 'auth.forgot-password',
-  max: 3,
-  globalMax: 20,
-  window: '1h',
-});
-
-export const resendVerifyEmailRateLimit = rateLimit({
-  action: 'auth.resend-verify-email',
-  max: 3,
-  globalMax: 20,
-  window: '1h',
-});
-
-export const request2FAEmailRateLimit = rateLimit({
-  action: 'auth.request-2fa-email',
-  max: 5,
-  globalMax: 20,
-  window: '15m',
-});
-
-// ---- Auth (Tier 2 - Unauthenticated) ----
-export const loginRateLimit = rateLimit({
-  action: 'auth.login',
-  max: 10,
-  globalMax: 50,
-  window: '15m',
-});
-
-export const resetPasswordRateLimit = rateLimit({
-  action: 'auth.reset-password',
-  max: 5,
-  globalMax: 20,
-  window: '1h',
-});
-
-export const verifyEmailRateLimit = rateLimit({
-  action: 'auth.verify-email',
-  max: 5,
-  globalMax: 20,
-  window: '15m',
-});
-
-export const passkeyRateLimit = rateLimit({
-  action: 'auth.passkey',
-  max: 10,
-  globalMax: 50,
-  window: '15m',
-});
-
-export const oauthRateLimit = rateLimit({
-  action: 'auth.oauth',
-  max: 10,
-  globalMax: 50,
-  window: '15m',
-});
-
-export const linkOrgAccountRateLimit = rateLimit({
-  action: 'auth.link-org-account',
-  max: 5,
-  globalMax: 20,
-  window: '1h',
-});
-
-// ---- API (Tier 4 - Standard) ----
-export const apiV1RateLimit = rateLimit({
-  action: 'api.v1',
-  max: 100,
-  window: '1m',
-});
-
-export const apiV2RateLimit = rateLimit({
-  action: 'api.v2',
-  max: 100,
-  window: '1m',
-});
-
-export const apiTrpcRateLimit = rateLimit({
-  action: 'api.trpc',
-  max: 100,
-  window: '1m',
-});
-
-export const aiRateLimit = rateLimit({
-  action: 'api.ai',
-  max: 3,
-  window: '1m',
-});
-
-export const fileUploadRateLimit = rateLimit({
-  action: 'api.file-upload',
-  max: 20,
-  window: '1m',
-});
-```
-
-Exact limits are initial values — tune based on observed traffic patterns. These should be easy to adjust.
-
----
-
-## 3. Integration Points
-
-### 3.1 Hono middleware for API routes
-
-Create a reusable Hono middleware factory in `packages/lib/server-only/rate-limit/rate-limit-middleware.ts` that wraps the `rateLimit` checker into Hono middleware:
-
-```typescript
-import { type MiddlewareHandler } from 'hono';
-
-import { getIpAddress } from '@documenso/lib/universal/get-ip-address';
-
-export const createRateLimitMiddleware = (
-  limiter: ReturnType<typeof rateLimit>,
-  options?: { identifierFn?: (c: Context) => string | undefined },
-): MiddlewareHandler => {
-  return async (c, next) => {
-    let ip: string;
-    try {
-      ip = getIpAddress(c.req.raw);
-    } catch {
-      ip = 'unknown';
-    }
-
-    const identifier = options?.identifierFn?.(c);
-
-    const result = await limiter.check({ ip, identifier });
-
-    c.header('X-RateLimit-Limit', String(result.limit));
-    c.header('X-RateLimit-Remaining', String(result.remaining));
-    c.header('X-RateLimit-Reset', String(Math.ceil(result.reset.getTime() / 1000)));
-
-    if (result.isLimited) {
-      c.header('Retry-After', String(Math.ceil((result.reset.getTime() - Date.now()) / 1000)));
-      return c.json({ error: 'Too many requests, please try again later.' }, 429);
-    }
-
-    await next();
-  };
-};
-```
-
-### 3.2 Replace existing Hono rate limiters
-
-In `apps/remix/server/router.ts`:
-
-- Remove `hono-rate-limiter` import and both `rateLimiter()` instances
-- Replace with `createRateLimitMiddleware()` calls using the defined rate limits
-- API routes use IP-only limiting (no identifier)
-- AI route uses IP-only limiting with the stricter 3/min limit
-
-```typescript
-// Before
-import { rateLimiter } from 'hono-rate-limiter';
-const rateLimitMiddleware = rateLimiter({ ... });
-
-// After
-import { createRateLimitMiddleware } from '@documenso/lib/server-only/rate-limit/rate-limit-middleware';
-import { apiV1RateLimit, apiV2RateLimit, aiRateLimit } from '@documenso/lib/server-only/rate-limit/rate-limits';
-
-const apiV1RateLimitMiddleware = createRateLimitMiddleware(apiV1RateLimit);
-const apiV2RateLimitMiddleware = createRateLimitMiddleware(apiV2RateLimit);
-const aiRateLimitMiddleware = createRateLimitMiddleware(aiRateLimit);
-```
-
-### 3.3 Response helpers for inline checks
-
-For auth routes (Hono handlers) and tRPC routes where rate limiting is applied inline rather than via middleware, provide helpers that handle the response formatting and headers consistently.
-
-**Hono helper** — returns a 429 `Response` with headers if limited, or `null` if allowed:
-
-```typescript
-export const rateLimitResponse = (c: Context, result: RateLimitCheckResult): Response | null => {
-  c.header('X-RateLimit-Limit', String(result.limit));
-  c.header('X-RateLimit-Remaining', String(result.remaining));
-  c.header('X-RateLimit-Reset', String(Math.ceil(result.reset.getTime() / 1000)));
-
-  if (result.isLimited) {
-    c.header('Retry-After', String(Math.ceil((result.reset.getTime() - Date.now()) / 1000)));
-    return c.json({ error: 'Too many requests, please try again later.' }, 429);
-  }
-
-  return null;
-};
-```
-
-Usage in auth routes:
-
-```typescript
-const result = await loginRateLimit.check({
-  ip: requestMetadata.ipAddress ?? 'unknown',
-  identifier: input.email,
-});
-
-const limited = rateLimitResponse(c, result);
-if (limited) return limited;
-```
-
-**tRPC helper** — throws a `TRPCError` with rate limit headers if limited:
-
-```typescript
-export const assertRateLimit = (result: RateLimitCheckResult): void => {
-  if (result.isLimited) {
-    throw new TRPCError({
-      code: 'TOO_MANY_REQUESTS',
-    });
-  }
-};
-```
-
-Usage in tRPC routes:
-
-```typescript
-const result = await request2FAEmailRateLimit.check({
-  ip: ctx.requestMetadata.ipAddress ?? 'unknown',
-  identifier: input.recipientId,
-});
-
-assertRateLimit(result);
-```
-
-Both helpers live in `packages/lib/server-only/rate-limit/rate-limit-middleware.ts` alongside the Hono middleware.
-
-### 3.4 Auth endpoint rate limiting
-
-In `packages/auth/server/routes/email-password.ts`, add rate limit checks at the start of each handler using the `rateLimitResponse` helper.
-
-Apply to each endpoint per the tier list:
-
-| Endpoint                    | Rate Limit                                            |
-| --------------------------- | ----------------------------------------------------- |
-| `POST /signup`              | `signupRateLimit` with `identifier: email`            |
-| `POST /authorize` (login)   | `loginRateLimit` with `identifier: email`             |
-| `POST /forgot-password`     | `forgotPasswordRateLimit` with `identifier: email`    |
-| `POST /resend-verify-email` | `resendVerifyEmailRateLimit` with `identifier: email` |
-| `POST /verify-email`        | `verifyEmailRateLimit` with `identifier: token`       |
-| `POST /reset-password`      | `resetPasswordRateLimit` with `identifier: token`     |
-| `POST /passkey/authorize`   | `passkeyRateLimit` (IP only, no identifier)           |
-| `POST /oauth/authorize/*`   | `oauthRateLimit` (IP only)                            |
-
-### 3.4 tRPC unauthenticated route rate limiting
-
-For unauthenticated tRPC routes that send emails, add rate limit checks at the start of the route handler:
-
-| Route                                                      | Rate Limit                           | Identifier             |
-| ---------------------------------------------------------- | ------------------------------------ | ---------------------- |
-| `document.accessAuth.request2FAEmail`                      | `request2FAEmailRateLimit`           | `recipientId` or token |
-| `enterprise.organisation.authenticationPortal.linkAccount` | `linkOrgAccountRateLimit`            | email                  |
-| `template.createDocumentFromDirectTemplate`                | Dedicated direct template rate limit | IP only                |
-
-Access `requestMetadata` from the tRPC context (`ctx.requestMetadata.ipAddress`).
-
-### 3.5 tRPC and file routes — general API rate limiting
-
-Add rate limit middleware for currently unprotected routes:
-
-- `/api/trpc/*` — apply `apiTrpcRateLimit` middleware
-- `/api/files/*` — apply `fileUploadRateLimit` middleware
-
----
-
-## 4. Cleanup Job
-
-### 4.1 Job definition
-
-Create `packages/lib/jobs/definitions/internal/cleanup-rate-limits.ts`:
-
-```typescript
-export const CLEANUP_RATE_LIMITS_JOB_DEFINITION = {
-  id: 'internal.cleanup-rate-limits',
-  name: 'Cleanup Rate Limits',
-  version: '1.0.0',
-  trigger: {
-    name: 'internal.cleanup-rate-limits',
-    schema: z.object({}),
-    cron: '*/15 * * * *', // Every 15 minutes
-  },
-  handler: async ({ payload, io }) => {
-    const handler = await import('./cleanup-rate-limits.handler');
-    await handler.run({ payload, io });
-  },
-} as const satisfies JobDefinition<...>;
-```
-
-### 4.2 Job handler
-
-Create `packages/lib/jobs/definitions/internal/cleanup-rate-limits.handler.ts`:
-
-- Delete all `RateLimit` rows where `createdAt` is older than 24 hours (covers all possible windows with margin)
-- Use batched deletes to avoid long-running transactions
-- Batch in chunks of 10,000 rows
-
-```typescript
-export const run = async () => {
-  const cutoff = new Date(Date.now() - 24 * 60 * 60 * 1000);
-
-  let deleted = 0;
-  do {
-    // Prisma doesn't support DELETE with LIMIT, so use raw SQL for batching
-    deleted = await prisma.$executeRaw`
-      DELETE FROM "RateLimit"
-      WHERE "createdAt" < ${cutoff}
-      AND ctid IN (
-        SELECT ctid FROM "RateLimit"
-        WHERE "createdAt" < ${cutoff}
-        LIMIT 10000
-      )
-    `;
-  } while (deleted > 0);
-};
-```
-
-### 4.3 Register in job client
-
-Add `CLEANUP_RATE_LIMITS_JOB_DEFINITION` to the job registry in `packages/lib/jobs/client.ts`.
-
----
-
-## 5. Remove hono-rate-limiter Dependency
-
-After the migration is complete:
-
-- Remove `hono-rate-limiter` from `apps/remix/package.json`
-- Run `npm install` to clean up
-
----
-
-## 6. Files to Create or Modify
-
-### New Files
-
-| File                                                                    | Purpose                                                                                                         |
-| ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
-| `packages/lib/server-only/rate-limit/rate-limit.ts`                     | Core rate limit factory (`rateLimit()`) with window parsing, bucket computation, Prisma upsert, fail-open       |
-| `packages/lib/server-only/rate-limit/rate-limits.ts`                    | All rate limit instances (auth, API, AI, file upload)                                                           |
-| `packages/lib/server-only/rate-limit/rate-limit-middleware.ts`          | Hono middleware factory, `rateLimitResponse` helper for Hono handlers, `assertRateLimit` helper for tRPC routes |
-| `packages/lib/jobs/definitions/internal/cleanup-rate-limits.ts`         | Cleanup cron job definition                                                                                     |
-| `packages/lib/jobs/definitions/internal/cleanup-rate-limits.handler.ts` | Cleanup handler (batched deletes)                                                                               |
-
-### Modified Files
-
-| File                                                                    | Change                                                                                                      |
-| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| `packages/prisma/schema.prisma`                                         | Add `RateLimit` model                                                                                       |
-| `apps/remix/server/router.ts`                                           | Replace `hono-rate-limiter` with DB-backed middleware, add rate limits for `/api/trpc/*` and `/api/files/*` |
-| `apps/remix/package.json`                                               | Remove `hono-rate-limiter` dependency                                                                       |
-| `packages/auth/server/routes/email-password.ts`                         | Add rate limit checks to signup, login, forgot-password, resend-verify-email, verify-email, reset-password  |
-| `packages/auth/server/routes/passkey.ts`                                | Add rate limit check to passkey authorize                                                                   |
-| `packages/auth/server/routes/oauth.ts`                                  | Add rate limit check to OAuth authorize endpoints                                                           |
-| `packages/trpc/server/document-router/access-auth-request-2fa-email.ts` | Add rate limit check (sends email, unauthenticated)                                                         |
-| `packages/trpc/server/enterprise-router/link-organisation-account.ts`   | Add rate limit check (sends email, unauthenticated)                                                         |
-| `packages/lib/jobs/client.ts`                                           | Register cleanup-rate-limits job definition                                                                 |
-
----
-
-## 7. Considerations
-
-### 7.1 Fail-open
-
-All rate limit checks must be wrapped in try/catch. On any DB error, log the error and allow the request through. Rate limiting should never block legitimate traffic due to infrastructure issues.
-
-### 7.2 Performance
-
-- Each API request adds 1 upsert query (~1ms)
-- Auth requests add 2 upsert queries (~2ms total)
-- The composite primary key ensures all lookups and upserts are index-only operations
-- No `COUNT(*)` queries — the count is stored directly in the row
-
-### 7.3 Monitoring
-
-Log rate limit hits at `warn` level with the action, key type (IP/identifier), and count. This provides visibility into traffic patterns and helps tune limits.
-
-### 7.4 Testing
-
-The rate limit module should be mockable in tests. Consider exporting the bucket computation and window parsing as standalone functions for unit testing. Integration tests can verify the upsert + count logic against a test database.
-
-### 7.5 Future improvements
-
-- **Redis backend**: if DB pressure from rate limiting becomes measurable, swap the Prisma upsert for Redis `INCR` + `EXPIRE` with no API changes
-- **System-wide circuit breaker**: add a `systemMax` config option that counts all requests for an action regardless of key

.env.example

@@ -175,8 +175,6 @@ GOOGLE_VERTEX_API_KEY=""
 E2E_TEST_AUTHENTICATE_USERNAME="Test User"
 E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
 E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
-# OPTIONAL: Set to "true" to disable all rate limiting. Only use for E2E tests.
-DANGEROUS_BYPASS_RATE_LIMITS=
 
 # [[LOGGER]]
 # OPTIONAL: The file to save the logger output to. Will disable stdout if provided.

.github/workflows/e2e-tests.yml

@@ -41,7 +41,6 @@ jobs:
         env:
           # Needed since we use next start which will set the NODE_ENV to production
           NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH: './example/cert.p12'
-          DANGEROUS_BYPASS_RATE_LIMITS: 'true'
 
       - uses: actions/upload-artifact@v4
         if: always()

apps/remix/app/components/dialogs/assistant-confirmation-dialog.tsx

@@ -116,11 +116,9 @@ export function AssistantConfirmationDialog({
                     {!isEditingNextSigner && (
                       <div>
                         <p className="text-muted-foreground text-sm">
-                          <Trans>
-                            The next recipient to sign this document will be{' '}
-                            <span className="font-semibold">{form.watch('name')}</span> (
-                            <span className="font-semibold">{form.watch('email')}</span>).
-                          </Trans>
+                          The next recipient to sign this document will be{' '}
+                          <span className="font-semibold">{form.watch('name')}</span> (
+                          <span className="font-semibold">{form.watch('email')}</span>).
                         </p>
 
                         <Button

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

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

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

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

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

@@ -13,6 +13,7 @@ import * as z from 'zod';
 
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { getRecipientsWithMissingFields } from '@documenso/lib/utils/recipients';
 import { trpc, trpc as trpcReact } from '@documenso/trpc/react';
@@ -116,10 +117,15 @@ export const EnvelopeDistributeDialog = ({
   } = form;
 
   const { data: emailData, isLoading: isLoadingEmails } =
-    trpc.enterprise.organisation.email.find.useQuery({
-      organisationId: organisation.id,
-      perPage: 100,
-    });
+    trpc.enterprise.organisation.email.find.useQuery(
+      {
+        organisationId: organisation.id,
+        perPage: 100,
+      },
+      {
+        ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+      },
+    );
 
   const emails = emailData?.data || [];
 
@@ -258,10 +264,10 @@ export const EnvelopeDistributeDialog = ({
                 >
                   <TabsList className="w-full">
                     <TabsTrigger className="w-full" value={DocumentDistributionMethod.EMAIL}>
-                      <Trans>Email</Trans>
+                      Email
                     </TabsTrigger>
                     <TabsTrigger className="w-full" value={DocumentDistributionMethod.NONE}>
-                      <Trans>None</Trans>
+                      None
                     </TabsTrigger>
                   </TabsList>
                 </Tabs>

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

@@ -149,12 +149,7 @@ export const EnvelopesBulkDeleteDialog = ({
         </Alert>
 
         <DialogFooter>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => onOpenChange(false)}
-            disabled={isPending}
-          >
+          <Button type="button" variant="secondary" disabled={isPending}>
             <Trans>Cancel</Trans>
           </Button>
 

apps/remix/app/components/dialogs/organisation-group-delete-dialog.tsx

@@ -77,7 +77,7 @@ export const OrganisationGroupDeleteDialog = ({
           </DialogTitle>
 
           <DialogDescription className="mt-4">
-            <Trans context="Removing group from organisation">
+            <Trans>
               You are about to remove the following group from{' '}
               <span className="font-semibold">{organisation.name}</span>.
             </Trans>

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

@@ -127,11 +127,7 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
   };
 
   const mapTextToUrl = (text: string) => {
-    return text
-      .normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '')
-      .toLowerCase()
-      .replace(/\s+/g, '-');
+    return text.toLowerCase().replace(/\s+/g, '-');
   };
 
   const dialogState = useMemo(() => {
@@ -264,7 +260,7 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
                         <Input className="bg-background" {...field} />
                       </FormControl>
                       {!form.formState.errors.teamUrl && (
-                        <span className="text-xs font-normal text-foreground/50">
+                        <span className="text-foreground/50 text-xs font-normal">
                           {field.value ? (
                             `${NEXT_PUBLIC_WEBAPP_URL()}/t/${field.value}`
                           ) : (
@@ -292,7 +288,7 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
                           />
 
                           <label
-                            className="ml-2 text-sm text-muted-foreground"
+                            className="text-muted-foreground ml-2 text-sm"
                             htmlFor="inherit-members"
                           >
                             <Trans>Allow all organisation members to access this team</Trans>

apps/remix/app/components/dialogs/team-group-delete-dialog.tsx

@@ -81,7 +81,7 @@ export const TeamGroupDeleteDialog = ({
           </DialogTitle>
 
           <DialogDescription className="mt-4">
-            <Trans context="Removing group from team">
+            <Trans>
               You are about to remove the following group from{' '}
               <span className="font-semibold">{team.name}</span>.
             </Trans>

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

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

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

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

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

@@ -5,7 +5,6 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { EnvelopeItem, FieldType } from '@prisma/client';
 import { ReadStatus, type Recipient, SendStatus, SigningStatus } from '@prisma/client';
-import { base64 } from '@scure/base';
 import { ChevronsUpDown } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -16,6 +15,7 @@ import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import { nanoid } from '@documenso/lib/universal/id';
 import { ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING } from '@documenso/lib/utils/advanced-fields-helpers';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 import { useRecipientColors } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -24,7 +24,6 @@ import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/type
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { FieldSelector } from '@documenso/ui/primitives/field-selector';
 import { Form } from '@documenso/ui/primitives/form/form';
-import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
 import { Sheet, SheetContent, SheetTrigger } from '@documenso/ui/primitives/sheet';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -84,7 +83,7 @@ export const ConfigureFieldsView = ({
     };
   }, []);
 
-  const normalizedDocumentData = useMemo(() => {
+  const overrideImages = useMemo(() => {
     if (envelopeItem) {
       return undefined;
     }
@@ -93,7 +92,7 @@ export const ConfigureFieldsView = ({
       return undefined;
     }
 
-    return base64.encode(configData.documentData.data);
+    return configData.documentData.images;
   }, [configData.documentData]);
 
   const normalizedEnvelopeItem = useMemo(() => {
@@ -115,9 +114,7 @@ export const ConfigureFieldsView = ({
       templateId: null,
       token: '',
       documentDeletedAt: null,
-      expired: null, // !: deprecated Not in use. To be removed in a future migration.
-      expiresAt: null,
-      expirationNotifiedAt: null,
+      expired: null,
       signedAt: null,
       authOptions: null,
       rejectionReason: null,
@@ -548,12 +545,13 @@ export const ConfigureFieldsView = ({
 
             <Form {...form}>
               <div>
-                <PDFViewerLazy
+                <PDFViewer
                   presignToken={presignToken}
-                  overrideData={normalizedDocumentData}
+                  overrideImages={overrideImages}
                   envelopeItem={normalizedEnvelopeItem}
                   token={undefined}
-                  version="signed"
+                  version="current"
+                  scrollParentRef="window"
                 />
 
                 <ElementVisible

apps/remix/app/components/embed/embed-client-loading.tsx

@@ -1,4 +1,3 @@
-import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
 
 export const EmbedClientLoading = () => {
@@ -6,9 +5,7 @@ export const EmbedClientLoading = () => {
     <div className="bg-background fixed left-0 top-0 z-[9999] flex h-full w-full items-center justify-center">
       <Loader className="mr-2 h-4 w-4 animate-spin" />
 
-      <span>
-        <Trans>Loading...</Trans>
-      </span>
+      <span>Loading...</span>
     </div>
   );
 };

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

@@ -31,11 +31,11 @@ import type {
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 import { Button } from '@documenso/ui/primitives/button';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -341,10 +341,11 @@ export const EmbedDirectTemplateClientPage = ({
       <div className="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
         {/* Viewer */}
         <div className="flex-1">
-          <PDFViewerLazy
+          <PDFViewer
             envelopeItem={envelopeItems[0]}
             token={recipient.token}
-            version="signed"
+            version="current"
+            scrollParentRef="window"
             onDocumentLoad={() => setHasDocumentLoaded(true)}
           />
         </div>
@@ -499,9 +500,7 @@ export const EmbedDirectTemplateClientPage = ({
 
       {!hidePoweredBy && (
         <div className="fixed bottom-0 left-0 z-40 rounded-tr bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100">
-          <span>
-            <Trans>Powered by</Trans>
-          </span>
+          <span>Powered by</span>
           <BrandingLogo className="ml-2 inline-block h-[14px]" />
         </div>
       )}

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

@@ -19,11 +19,11 @@ import {
   DocumentReadOnlyFields,
 } from '@documenso/ui/components/document/document-read-only-fields';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 import { Button } from '@documenso/ui/primitives/button';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
 import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -287,10 +287,11 @@ export const EmbedSignDocumentV1ClientPage = ({
         <div className="embed--DocumentContainer relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
           {/* Viewer */}
           <div className="embed--DocumentViewer flex-1">
-            <PDFViewerLazy
+            <PDFViewer
               envelopeItem={envelopeItems[0]}
               token={token}
-              version="signed"
+              version="current"
+              scrollParentRef="window"
               onDocumentLoad={() => setHasDocumentLoaded(true)}
             />
           </div>
@@ -510,9 +511,7 @@ export const EmbedSignDocumentV1ClientPage = ({
 
         {!hidePoweredBy && (
           <div className="fixed bottom-0 left-0 z-40 rounded-tr bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100">
-            <span>
-              <Trans>Powered by</Trans>
-            </span>
+            <span>Powered by</span>
             <BrandingLogo className="ml-2 inline-block h-[14px]" />
           </div>
         )}

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

@@ -1,7 +1,6 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
 
 import { useLingui } from '@lingui/react';
-import { EnvelopeType } from '@prisma/client';
 
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
 
@@ -26,7 +25,7 @@ export const EmbedSignDocumentV2ClientPage = ({
 }: EmbedSignDocumentV2ClientPageProps) => {
   const { _ } = useLingui();
 
-  const { envelope, recipient, envelopeData, setFullName, setEmail, fullName } =
+  const { envelope, recipient, envelopeData, setFullName, fullName } =
     useRequiredEnvelopeSigningContext();
 
   const { isCompleted, isRejected, recipientSignature } = envelopeData;
@@ -36,7 +35,6 @@ export const EmbedSignDocumentV2ClientPage = ({
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
   const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
   const [isNameLocked, setIsNameLocked] = useState(false);
-  const [isEmailLocked, setIsEmailLocked] = useState(envelope.type === EnvelopeType.DOCUMENT);
 
   const onDocumentCompleted = (data: {
     token: string;
@@ -134,17 +132,6 @@ export const EmbedSignDocumentV2ClientPage = ({
       // Since a recipient can be provided a name we can lock it without requiring
       // a to be provided by the parent application, unlike direct templates.
       setIsNameLocked(!!data.lockName);
-
-      if (envelope.type === EnvelopeType.TEMPLATE) {
-        if (!isCompleted && data.email) {
-          setEmail(data.email);
-        }
-
-        if (data.email) {
-          setIsEmailLocked(!!data.lockEmail);
-        }
-      }
-
       setAllowDocumentRejection(!!data.allowDocumentRejection);
 
       if (data.darkModeDisabled) {
@@ -226,7 +213,6 @@ export const EmbedSignDocumentV2ClientPage = ({
   return (
     <EmbedSigningProvider
       isNameLocked={isNameLocked}
-      isEmailLocked={isEmailLocked}
       hidePoweredBy={hidePoweredBy}
       allowDocumentRejection={allowDocumentRejection}
       onDocumentCompleted={onDocumentCompleted}

apps/remix/app/components/embed/embed-recipient-expired.tsx

@@ -1,46 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-
-export const EmbedRecipientExpired = () => {
-  const [hasPostedMessage, setHasPostedMessage] = useState(false);
-
-  useEffect(() => {
-    if (window.parent && !hasPostedMessage) {
-      window.parent.postMessage(
-        {
-          action: 'recipient-expired',
-          data: null,
-        },
-        '*',
-      );
-    }
-
-    setHasPostedMessage(true);
-  }, [hasPostedMessage]);
-
-  if (!hasPostedMessage) {
-    return null;
-  }
-
-  return (
-    <div className="embed--RecipientExpired relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
-      <h3 className="text-center text-2xl font-bold text-foreground">
-        <Trans>Signing Window Expired</Trans>
-      </h3>
-
-      <div className="mt-8 max-w-[50ch] text-center">
-        <p className="text-sm text-muted-foreground">
-          <Trans>
-            Your signing window for this document has expired. Please contact the sender for a new
-            invitation.
-          </Trans>
-        </p>
-
-        <p className="mt-4 text-sm text-muted-foreground">
-          <Trans>Please check with the parent application for more information.</Trans>
-        </p>
-      </div>
-    </div>
-  );
-};

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -17,12 +17,12 @@ import type {
 } from '@documenso/trpc/server/field-router/schema';
 import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -66,6 +66,8 @@ export const MultiSignDocumentSigningView = ({
 
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
 
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
   const [isExpanded, setIsExpanded] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
@@ -179,7 +181,11 @@ export const MultiSignDocumentSigningView = ({
 
   return (
     <div className="min-h-screen overflow-hidden bg-background">
-      <div id="document-field-portal-root" className="relative h-full w-full overflow-y-auto p-8">
+      <div
+        id="document-field-portal-root"
+        ref={scrollContainerRef}
+        className="relative h-full w-full overflow-y-auto p-8"
+      >
         {match({ isLoading, document })
           .with({ isLoading: true }, () => (
             <div className="flex min-h-[400px] w-full items-center justify-center">
@@ -226,10 +232,11 @@ export const MultiSignDocumentSigningView = ({
                     'md:mx-auto md:max-w-2xl': document.status === DocumentStatus.COMPLETED,
                   })}
                 >
-                  <PDFViewerLazy
+                  <PDFViewer
                     envelopeItem={document.envelopeItems[0]}
                     token={token}
-                    version="signed"
+                    version="current"
+                    scrollParentRef={scrollContainerRef}
                     onDocumentLoad={() => {
                       setHasDocumentLoaded(true);
                       onDocumentReady?.();

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

@@ -11,10 +11,6 @@ import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/org
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { DATE_FORMATS } from '@documenso/lib/constants/date-formats';
 import { DOCUMENT_SIGNATURE_TYPES, DocumentSignatureType } from '@documenso/lib/constants/document';
-import {
-  type TEnvelopeExpirationPeriod,
-  ZEnvelopeExpirationPeriod,
-} from '@documenso/lib/constants/envelope-expiration';
 import {
   SUPPORTED_LANGUAGES,
   SUPPORTED_LANGUAGE_CODES,
@@ -31,7 +27,6 @@ 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 { ExpirationPeriodPicker } from '@documenso/ui/components/document/expiration-period-picker';
 import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
 import { Alert } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -75,7 +70,6 @@ export type TDocumentPreferencesFormSchema = {
   defaultRecipients: TDefaultRecipients | null;
   delegateDocumentOwnership: boolean | null;
   aiFeaturesEnabled: boolean | null;
-  envelopeExpirationPeriod: TEnvelopeExpirationPeriod | null;
 };
 
 type SettingsSubset = Pick<
@@ -93,7 +87,6 @@ type SettingsSubset = Pick<
   | 'defaultRecipients'
   | 'delegateDocumentOwnership'
   | 'aiFeaturesEnabled'
-  | 'envelopeExpirationPeriod'
 >;
 
 export type DocumentPreferencesFormProps = {
@@ -133,7 +126,6 @@ export const DocumentPreferencesForm = ({
     defaultRecipients: ZDefaultRecipientsSchema.nullable(),
     delegateDocumentOwnership: z.boolean().nullable(),
     aiFeaturesEnabled: z.boolean().nullable(),
-    envelopeExpirationPeriod: ZEnvelopeExpirationPeriod.nullable(),
   });
 
   const form = useForm<TDocumentPreferencesFormSchema>({
@@ -154,7 +146,6 @@ export const DocumentPreferencesForm = ({
         : null,
       delegateDocumentOwnership: settings.delegateDocumentOwnership,
       aiFeaturesEnabled: settings.aiFeaturesEnabled,
-      envelopeExpirationPeriod: settings.envelopeExpirationPeriod ?? null,
     },
     resolver: zodResolver(ZDocumentPreferencesFormSchema),
   });
@@ -678,35 +669,6 @@ export const DocumentPreferencesForm = ({
             )}
           />
 
-          <FormField
-            control={form.control}
-            name="envelopeExpirationPeriod"
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Default Envelope Expiration</Trans>
-                </FormLabel>
-
-                <FormControl>
-                  <ExpirationPeriodPicker
-                    value={field.value}
-                    onChange={field.onChange}
-                    inheritLabel={canInherit ? t`Inherit from organisation` : undefined}
-                  />
-                </FormControl>
-
-                <FormDescription>
-                  <Trans>
-                    Controls how long recipients have to complete signing before the document
-                    expires. After expiration, recipients can no longer sign the document.
-                  </Trans>
-                </FormDescription>
-
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
           {isAiFeaturesConfigured && (
             <FormField
               control={form.control}

apps/remix/app/components/general/app-nav-mobile.tsx

@@ -124,9 +124,7 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
           </div>
 
           <p className="text-muted-foreground text-sm">
-            © {new Date().getFullYear()} Documenso, Inc.
-            <br />
-            <Trans>All rights reserved.</Trans>
+            © {new Date().getFullYear()} Documenso, Inc. <br /> All rights reserved.
           </p>
         </div>
       </SheetContent>

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

@@ -118,9 +118,7 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
 
                 {price.product.features && price.product.features.length > 0 && (
                   <div className="mt-4 text-muted-foreground">
-                    <div className="text-sm font-medium">
-                      <Trans>Includes:</Trans>
-                    </div>
+                    <div className="text-sm font-medium">Includes:</div>
 
                     <ul className="mt-1 divide-y text-sm">
                       {price.product.features.map((feature, index) => (

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

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

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

@@ -4,7 +4,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
 import { RecipientRole } from '@prisma/client';
 import { useForm } from 'react-hook-form';
-import { match } from 'ts-pattern';
 import { z } from 'zod';
 
 import { AppError } from '@documenso/lib/errors/app-error';
@@ -28,6 +27,7 @@ import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-p
 
 export type DocumentSigningAuth2FAProps = {
   actionTarget?: 'FIELD' | 'DOCUMENT';
+  actionVerb?: string;
   open: boolean;
   onOpenChange: (value: boolean) => void;
   onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
@@ -44,6 +44,7 @@ type T2FAAuthFormSchema = z.infer<typeof Z2FAAuthFormSchema>;
 
 export const DocumentSigningAuth2FA = ({
   actionTarget = 'FIELD',
+  actionVerb = 'sign',
   onReauthFormSubmit,
   open,
   onOpenChange,
@@ -100,39 +101,14 @@ export const DocumentSigningAuth2FA = ({
         <Alert variant="warning">
           <AlertDescription>
             <p>
-              {match({ role: recipient.role, actionTarget })
-                .with({ role: RecipientRole.SIGNER, actionTarget: 'FIELD' }, () => (
-                  <Trans>You need to setup 2FA to sign this field.</Trans>
-                ))
-                .with({ role: RecipientRole.SIGNER, actionTarget: 'DOCUMENT' }, () => (
-                  <Trans>You need to setup 2FA to sign this document.</Trans>
-                ))
-                .with({ role: RecipientRole.APPROVER, actionTarget: 'FIELD' }, () => (
-                  <Trans>You need to setup 2FA to approve this field.</Trans>
-                ))
-                .with({ role: RecipientRole.APPROVER, actionTarget: 'DOCUMENT' }, () => (
-                  <Trans>You need to setup 2FA to approve this document.</Trans>
-                ))
-                .with({ role: RecipientRole.VIEWER, actionTarget: 'FIELD' }, () => (
-                  <Trans>You need to setup 2FA to view this field.</Trans>
-                ))
-                .with({ role: RecipientRole.VIEWER, actionTarget: 'DOCUMENT' }, () => (
-                  <Trans>You need to setup 2FA to mark this document as viewed.</Trans>
-                ))
-                .with({ role: RecipientRole.CC, actionTarget: 'FIELD' }, () => (
-                  <Trans>You need to setup 2FA to view this field.</Trans>
-                ))
-                .with({ role: RecipientRole.CC, actionTarget: 'DOCUMENT' }, () => (
-                  <Trans>You need to setup 2FA to view this document.</Trans>
-                ))
-                .with({ role: RecipientRole.ASSISTANT, actionTarget: 'FIELD' }, () => (
-                  <Trans>You need to setup 2FA to assist with this field.</Trans>
-                ))
-                .with({ role: RecipientRole.ASSISTANT, actionTarget: 'DOCUMENT' }, () => (
-                  <Trans>You need to setup 2FA to assist with this document.</Trans>
-                ))
-                .exhaustive()}
+              {recipient.role === RecipientRole.VIEWER && actionTarget === 'DOCUMENT' ? (
+                <Trans>You need to setup 2FA to mark this document as viewed.</Trans>
+              ) : (
+                // Todo: Translate
+                `You need to setup 2FA to ${actionVerb.toLowerCase()} this ${actionTarget.toLowerCase()}.`
+              )}
             </p>
+
             <p className="mt-2">
               <Trans>
                 By enabling 2FA, you will be required to enter a code from your authenticator app
@@ -162,9 +138,7 @@ export const DocumentSigningAuth2FA = ({
               name="token"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel required>
-                    <Trans>2FA token</Trans>
-                  </FormLabel>
+                  <FormLabel required>2FA token</FormLabel>
 
                   <FormControl>
                     <PinInput {...field} value={field.value ?? ''} maxLength={6}>

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

@@ -2,7 +2,6 @@ import { useState } from 'react';
 
 import { Trans, useLingui } from '@lingui/react/macro';
 import { RecipientRole } from '@prisma/client';
-import { match } from 'ts-pattern';
 
 import { authClient } from '@documenso/auth/client';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
@@ -14,11 +13,13 @@ import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-p
 
 export type DocumentSigningAuthAccountProps = {
   actionTarget?: 'FIELD' | 'DOCUMENT';
+  actionVerb?: string;
   onOpenChange: (value: boolean) => void;
 };
 
 export const DocumentSigningAuthAccount = ({
   actionTarget = 'FIELD',
+  actionVerb = 'sign',
   onOpenChange,
 }: DocumentSigningAuthAccountProps) => {
   const { recipient, isDirectTemplate } = useRequiredDocumentSigningAuthContext();
@@ -54,110 +55,32 @@ export const DocumentSigningAuthAccount = ({
     <fieldset disabled={isSigningOut} className="space-y-4">
       <Alert variant="warning">
         <AlertDescription>
-          <span>
-            {match({ role: recipient.role, actionTarget })
-              .with({ role: RecipientRole.SIGNER, actionTarget: 'FIELD' }, () =>
-                isDirectTemplate ? (
-                  <Trans>To sign this field, you need to be logged in.</Trans>
-                ) : (
-                  <Trans>
-                    To sign this field, you need to be logged in as{' '}
-                    <strong>{recipient.email}</strong>
-                  </Trans>
-                ),
-              )
-              .with({ role: RecipientRole.SIGNER, actionTarget: 'DOCUMENT' }, () =>
-                isDirectTemplate ? (
-                  <Trans>To sign this document, you need to be logged in.</Trans>
-                ) : (
-                  <Trans>
-                    To sign this document, you need to be logged in as{' '}
-                    <strong>{recipient.email}</strong>
-                  </Trans>
-                ),
-              )
-              .with({ role: RecipientRole.APPROVER, actionTarget: 'FIELD' }, () =>
-                isDirectTemplate ? (
-                  <Trans>To approve this field, you need to be logged in.</Trans>
-                ) : (
-                  <Trans>
-                    To approve this field, you need to be logged in as{' '}
-                    <strong>{recipient.email}</strong>
-                  </Trans>
-                ),
-              )
-              .with({ role: RecipientRole.APPROVER, actionTarget: 'DOCUMENT' }, () =>
-                isDirectTemplate ? (
-                  <Trans>To approve this document, you need to be logged in.</Trans>
-                ) : (
-                  <Trans>
-                    To approve this document, you need to be logged in as{' '}
-                    <strong>{recipient.email}</strong>
-                  </Trans>
-                ),
-              )
-              .with({ role: RecipientRole.VIEWER, actionTarget: 'FIELD' }, () =>
-                isDirectTemplate ? (
-                  <Trans>To view this field, you need to be logged in.</Trans>
-                ) : (
-                  <Trans>
-                    To view this field, you need to be logged in as{' '}
-                    <strong>{recipient.email}</strong>
-                  </Trans>
-                ),
-              )
-              .with({ role: RecipientRole.VIEWER, actionTarget: 'DOCUMENT' }, () =>
-                isDirectTemplate ? (
-                  <Trans>To mark this document as viewed, you need to be logged in.</Trans>
-                ) : (
-                  <Trans>
-                    To mark this document as viewed, you need to be logged in as{' '}
-                    <strong>{recipient.email}</strong>
-                  </Trans>
-                ),
-              )
-              .with({ role: RecipientRole.CC, actionTarget: 'FIELD' }, () =>
-                isDirectTemplate ? (
-                  <Trans>To view this field, you need to be logged in.</Trans>
-                ) : (
-                  <Trans>
-                    To view this field, you need to be logged in as{' '}
-                    <strong>{recipient.email}</strong>
-                  </Trans>
-                ),
-              )
-              .with({ role: RecipientRole.CC, actionTarget: 'DOCUMENT' }, () =>
-                isDirectTemplate ? (
-                  <Trans>To view this document, you need to be logged in.</Trans>
-                ) : (
-                  <Trans>
-                    To view this document, you need to be logged in as{' '}
-                    <strong>{recipient.email}</strong>
-                  </Trans>
-                ),
-              )
-              .with({ role: RecipientRole.ASSISTANT, actionTarget: 'FIELD' }, () =>
-                isDirectTemplate ? (
-                  <Trans>To assist with this field, you need to be logged in.</Trans>
-                ) : (
-                  <Trans>
-                    To assist with this field, you need to be logged in as{' '}
-                    <strong>{recipient.email}</strong>
-                  </Trans>
-                ),
-              )
-              .with({ role: RecipientRole.ASSISTANT, actionTarget: 'DOCUMENT' }, () =>
-                isDirectTemplate ? (
-                  <Trans>To assist with this document, you need to be logged in.</Trans>
-                ) : (
-                  <Trans>
-                    To assist with this document, you need to be logged in as{' '}
-                    <strong>{recipient.email}</strong>
-                  </Trans>
-                ),
-              )
-              .exhaustive()}
-          </span>
+          {actionTarget === 'DOCUMENT' && recipient.role === RecipientRole.VIEWER ? (
+            <span>
+              {isDirectTemplate ? (
+                <Trans>To mark this document as viewed, you need to be logged in.</Trans>
+              ) : (
+                <Trans>
+                  To mark this document as viewed, you need to be logged in as{' '}
+                  <strong>{recipient.email}</strong>
+                </Trans>
+              )}
+            </span>
+          ) : (
+            <span>
+              {isDirectTemplate ? (
+                <Trans>
+                  To {actionVerb.toLowerCase()} this {actionTarget.toLowerCase()}, you need to be
+                  logged in.
+                </Trans>
+              ) : (
+                <Trans>
+                  To {actionVerb.toLowerCase()} this {actionTarget.toLowerCase()}, you need to be
+                  logged in as <strong>{recipient.email}</strong>
+                </Trans>
+              )}
+            </span>
+          )}
         </AlertDescription>
       </Alert>
 

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

@@ -8,7 +8,6 @@ import { RecipientRole } from '@prisma/client';
 import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser';
 import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
-import { match } from 'ts-pattern';
 import { z } from 'zod';
 
 import { AppError } from '@documenso/lib/errors/app-error';
@@ -39,6 +38,7 @@ import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-p
 
 export type DocumentSigningAuthPasskeyProps = {
   actionTarget?: 'FIELD' | 'DOCUMENT';
+  actionVerb?: string;
   open: boolean;
   onOpenChange: (value: boolean) => void;
   onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
@@ -52,6 +52,7 @@ type TPasskeyAuthFormSchema = z.infer<typeof ZPasskeyAuthFormSchema>;
 
 export const DocumentSigningAuthPasskey = ({
   actionTarget = 'FIELD',
+  actionVerb = 'sign',
   onReauthFormSubmit,
   open,
   onOpenChange,
@@ -127,62 +128,9 @@ export const DocumentSigningAuthPasskey = ({
       <div className="space-y-4">
         <Alert variant="warning">
           <AlertDescription>
-            {match({ role: recipient.role, actionTarget })
-              .with({ role: RecipientRole.SIGNER, actionTarget: 'FIELD' }, () => (
-                <Trans>
-                  Your browser does not support passkeys, which is required to sign this field.
-                </Trans>
-              ))
-              .with({ role: RecipientRole.SIGNER, actionTarget: 'DOCUMENT' }, () => (
-                <Trans>
-                  Your browser does not support passkeys, which is required to sign this document.
-                </Trans>
-              ))
-              .with({ role: RecipientRole.APPROVER, actionTarget: 'FIELD' }, () => (
-                <Trans>
-                  Your browser does not support passkeys, which is required to approve this field.
-                </Trans>
-              ))
-              .with({ role: RecipientRole.APPROVER, actionTarget: 'DOCUMENT' }, () => (
-                <Trans>
-                  Your browser does not support passkeys, which is required to approve this
-                  document.
-                </Trans>
-              ))
-              .with({ role: RecipientRole.VIEWER, actionTarget: 'FIELD' }, () => (
-                <Trans>
-                  Your browser does not support passkeys, which is required to view this field.
-                </Trans>
-              ))
-              .with({ role: RecipientRole.VIEWER, actionTarget: 'DOCUMENT' }, () => (
-                <Trans>
-                  Your browser does not support passkeys, which is required to mark this document as
-                  viewed.
-                </Trans>
-              ))
-              .with({ role: RecipientRole.CC, actionTarget: 'FIELD' }, () => (
-                <Trans>
-                  Your browser does not support passkeys, which is required to view this field.
-                </Trans>
-              ))
-              .with({ role: RecipientRole.CC, actionTarget: 'DOCUMENT' }, () => (
-                <Trans>
-                  Your browser does not support passkeys, which is required to view this document.
-                </Trans>
-              ))
-              .with({ role: RecipientRole.ASSISTANT, actionTarget: 'FIELD' }, () => (
-                <Trans>
-                  Your browser does not support passkeys, which is required to assist with this
-                  field.
-                </Trans>
-              ))
-              .with({ role: RecipientRole.ASSISTANT, actionTarget: 'DOCUMENT' }, () => (
-                <Trans>
-                  Your browser does not support passkeys, which is required to assist with this
-                  document.
-                </Trans>
-              ))
-              .exhaustive()}
+            {/* Todo: Translate */}
+            Your browser does not support passkeys, which is required to {actionVerb.toLowerCase()}{' '}
+            this {actionTarget.toLowerCase()}.
           </AlertDescription>
         </Alert>
 
@@ -230,38 +178,10 @@ export const DocumentSigningAuthPasskey = ({
       <div className="space-y-4">
         <Alert variant="warning">
           <AlertDescription>
-            {match({ role: recipient.role, actionTarget })
-              .with({ role: RecipientRole.SIGNER, actionTarget: 'FIELD' }, () => (
-                <Trans>You need to setup a passkey to sign this field.</Trans>
-              ))
-              .with({ role: RecipientRole.SIGNER, actionTarget: 'DOCUMENT' }, () => (
-                <Trans>You need to setup a passkey to sign this document.</Trans>
-              ))
-              .with({ role: RecipientRole.APPROVER, actionTarget: 'FIELD' }, () => (
-                <Trans>You need to setup a passkey to approve this field.</Trans>
-              ))
-              .with({ role: RecipientRole.APPROVER, actionTarget: 'DOCUMENT' }, () => (
-                <Trans>You need to setup a passkey to approve this document.</Trans>
-              ))
-              .with({ role: RecipientRole.VIEWER, actionTarget: 'FIELD' }, () => (
-                <Trans>You need to setup a passkey to view this field.</Trans>
-              ))
-              .with({ role: RecipientRole.VIEWER, actionTarget: 'DOCUMENT' }, () => (
-                <Trans>You need to setup a passkey to mark this document as viewed.</Trans>
-              ))
-              .with({ role: RecipientRole.CC, actionTarget: 'FIELD' }, () => (
-                <Trans>You need to setup a passkey to view this field.</Trans>
-              ))
-              .with({ role: RecipientRole.CC, actionTarget: 'DOCUMENT' }, () => (
-                <Trans>You need to setup a passkey to view this document.</Trans>
-              ))
-              .with({ role: RecipientRole.ASSISTANT, actionTarget: 'FIELD' }, () => (
-                <Trans>You need to setup a passkey to assist with this field.</Trans>
-              ))
-              .with({ role: RecipientRole.ASSISTANT, actionTarget: 'DOCUMENT' }, () => (
-                <Trans>You need to setup a passkey to assist with this document.</Trans>
-              ))
-              .exhaustive()}
+            {/* Todo: Translate */}
+            {recipient.role === RecipientRole.VIEWER && actionTarget === 'DOCUMENT'
+              ? 'You need to setup a passkey to mark this document as viewed.'
+              : `You need to setup a passkey to ${actionVerb.toLowerCase()} this ${actionTarget.toLowerCase()}.`}
           </AlertDescription>
         </Alert>
 
@@ -293,9 +213,7 @@ export const DocumentSigningAuthPasskey = ({
               name="passkeyId"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel required>
-                    <Trans>Passkey</Trans>
-                  </FormLabel>
+                  <FormLabel required>Passkey</FormLabel>
 
                   <FormControl>
                     <Select {...field} onValueChange={field.onChange}>
@@ -323,24 +241,20 @@ export const DocumentSigningAuthPasskey = ({
 
             {formErrorCode && (
               <Alert variant="destructive">
-                <AlertTitle>
-                  <Trans>Unauthorized</Trans>
-                </AlertTitle>
+                <AlertTitle>Unauthorized</AlertTitle>
                 <AlertDescription>
-                  <Trans>
-                    We were unable to verify your details. Please try again or contact support
-                  </Trans>
+                  We were unable to verify your details. Please try again or contact support
                 </AlertDescription>
               </Alert>
             )}
 
             <DialogFooter>
               <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                <Trans>Cancel</Trans>
+                Cancel
               </Button>
 
               <Button type="submit" loading={isCurrentlyAuthenticating}>
-                <Trans>Sign</Trans>
+                Sign
               </Button>
             </DialogFooter>
           </div>

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

@@ -23,6 +23,8 @@ import { Input } from '@documenso/ui/primitives/input';
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 
 export type DocumentSigningAuthPasswordProps = {
+  actionTarget?: 'FIELD' | 'DOCUMENT';
+  actionVerb?: string;
   open: boolean;
   onOpenChange: (value: boolean) => void;
   onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
@@ -38,6 +40,8 @@ const ZPasswordAuthFormSchema = z.object({
 type TPasswordAuthFormSchema = z.infer<typeof ZPasswordAuthFormSchema>;
 
 export const DocumentSigningAuthPassword = ({
+  actionTarget = 'FIELD',
+  actionVerb = 'sign',
   onReauthFormSubmit,
   open,
   onOpenChange,

apps/remix/app/components/general/document-signing/document-signing-auto-sign.tsx

@@ -162,9 +162,7 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>
-            <Trans>Automatically sign fields</Trans>
-          </DialogTitle>
+          <DialogTitle>Automatically sign fields</DialogTitle>
         </DialogHeader>
 
         <div className="text-muted-foreground max-w-[50ch]">

apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx

@@ -122,9 +122,7 @@ export const DocumentSigningMobileWidget = () => {
 
               {!hidePoweredBy && (
                 <div className="mt-2 inline-block rounded bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100 lg:hidden">
-                  <span>
-                    <Trans>Powered by</Trans>
-                  </span>
+                  <span>Powered by</span>
                   <BrandingLogo className="ml-2 inline-block h-[14px]" />
                 </div>
               )}

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

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

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

@@ -1,4 +1,4 @@
-import { lazy, useMemo } from 'react';
+import { lazy, useMemo, useRef } from 'react';
 
 import { Plural, Trans } from '@lingui/react/macro';
 import { EnvelopeType, RecipientRole } from '@prisma/client';
@@ -8,8 +8,9 @@ import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { PDF_VIEWER_ERROR_MESSAGES } from '@documenso/lib/constants/pdf-viewer-i18n';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
-import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
+import { EnvelopePdfViewer } from '@documenso/ui/components/pdf-viewer/envelope-pdf-viewer';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
 
@@ -40,6 +41,8 @@ const EnvelopeSignerPageRenderer = lazy(
 export const DocumentSigningPageViewV2 = () => {
   const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
 
+  const scrollableContainerRef = useRef<HTMLDivElement>(null);
+
   const {
     isDirectTemplate,
     envelope,
@@ -199,7 +202,10 @@ export const DocumentSigningPageViewV2 = () => {
           </div>
         </div>
 
-        <div className="embed--DocumentContainer flex-1 overflow-y-auto">
+        <div
+          className="embed--DocumentContainer flex-1 overflow-y-auto"
+          ref={scrollableContainerRef}
+        >
           <div className="flex flex-col">
             {/* Horizontal envelope item selector */}
             {envelopeItems.length > 1 && (
@@ -228,15 +234,16 @@ export const DocumentSigningPageViewV2 = () => {
             {/* Document View */}
             <div className="embed--DocumentViewer flex flex-col items-center justify-center p-2 sm:mt-4 sm:p-4">
               {currentEnvelopeItem ? (
-                <PDFViewerKonvaLazy
-                  renderer="signing"
+                <EnvelopePdfViewer
                   key={currentEnvelopeItem.id}
                   customPageRenderer={EnvelopeSignerPageRenderer}
+                  scrollParentRef={scrollableContainerRef}
+                  errorMessage={PDF_VIEWER_ERROR_MESSAGES.signing}
                 />
               ) : (
                 <div className="flex flex-col items-center justify-center py-32">
                   <p className="text-sm text-foreground">
-                    <Trans>No documents found</Trans>
+                    <Trans>No document selected</Trans>
                   </p>
                 </div>
               )}
@@ -252,9 +259,7 @@ export const DocumentSigningPageViewV2 = () => {
                   target="_blank"
                   className="fixed bottom-0 right-0 z-40 hidden cursor-pointer rounded-tl bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100 lg:block"
                 >
-                  <span>
-                    <Trans>Powered by</Trans>
-                  </span>
+                  <span>Powered by</span>
                   <BrandingLogo className="ml-2 inline-block h-[14px]" />
                 </a>
               )}

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

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

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

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

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

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

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

@@ -9,21 +9,19 @@ import {
   AlertTriangle,
   CheckIcon,
   Clock,
-  Clock8Icon,
   MailIcon,
   MailOpenIcon,
   PenIcon,
   PlusIcon,
   UserIcon,
 } from 'lucide-react';
-import { DateTime } from 'luxon';
 import { Link, useSearchParams } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
-import { formatSigningLink, isRecipientExpired } from '@documenso/lib/utils/recipients';
+import { formatSigningLink } from '@documenso/lib/utils/recipients';
 import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
 import { SignatureIcon } from '@documenso/ui/icons/signature';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -46,7 +44,7 @@ export const DocumentPageViewRecipients = ({
   envelope,
   documentRootPath,
 }: DocumentPageViewRecipientsProps) => {
-  const { _, i18n } = useLingui();
+  const { _ } = useLingui();
   const { toast } = useToast();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -68,9 +66,9 @@ export const DocumentPageViewRecipients = ({
   }, [searchParams, setSearchParams]);
 
   return (
-    <section className="flex flex-col rounded-xl border border-border bg-widget dark:bg-background">
+    <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
       <div className="flex flex-row items-center justify-between px-4 py-3">
-        <h1 className="font-medium text-foreground">
+        <h1 className="text-foreground font-medium">
           <Trans>Recipients</Trans>
         </h1>
 
@@ -89,7 +87,7 @@ export const DocumentPageViewRecipients = ({
         )}
       </div>
 
-      <ul className="divide-y border-t text-muted-foreground">
+      <ul className="text-muted-foreground divide-y border-t">
         {recipients.length === 0 && (
           <li className="flex flex-col items-center justify-center py-6 text-sm">
             <Trans>No recipients</Trans>
@@ -100,9 +98,9 @@ export const DocumentPageViewRecipients = ({
           <li key={recipient.id} className="flex items-center justify-between px-4 py-2.5 text-sm">
             <AvatarWithText
               avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
-              primaryText={<p className="text-sm text-muted-foreground">{recipient.email}</p>}
+              primaryText={<p className="text-muted-foreground text-sm">{recipient.email}</p>}
               secondaryText={
-                <p className="text-xs text-muted-foreground/70">
+                <p className="text-muted-foreground/70 text-xs">
                   {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
                 </p>
               }
@@ -156,41 +154,12 @@ export const DocumentPageViewRecipients = ({
                 )}
 
               {envelope.status !== DocumentStatus.DRAFT &&
-                recipient.signingStatus === SigningStatus.NOT_SIGNED &&
-                isRecipientExpired(recipient) && (
-                  <Badge variant="destructive">
-                    <Clock8Icon className="mr-1 h-3 w-3" />
-                    <Trans>Expired</Trans>
-                  </Badge>
-                )}
-
-              {envelope.status !== DocumentStatus.DRAFT &&
-                recipient.signingStatus === SigningStatus.NOT_SIGNED &&
-                !isRecipientExpired(recipient) &&
-                (recipient.expiresAt ? (
-                  <PopoverHover
-                    trigger={
-                      <Badge variant="secondary">
-                        <Clock className="mr-1 h-3 w-3" />
-                        <Trans>Pending</Trans>
-                      </Badge>
-                    }
-                  >
-                    <p className="text-xs text-muted-foreground">
-                      <Trans>
-                        Expires{' '}
-                        {recipient.expiresAt
-                          ? i18n.date(recipient.expiresAt, DateTime.DATETIME_MED)
-                          : 'N/A'}
-                      </Trans>
-                    </p>
-                  </PopoverHover>
-                ) : (
+                recipient.signingStatus === SigningStatus.NOT_SIGNED && (
                   <Badge variant="secondary">
                     <Clock className="mr-1 h-3 w-3" />
                     <Trans>Pending</Trans>
                   </Badge>
-                ))}
+                )}
 
               {envelope.status !== DocumentStatus.DRAFT &&
                 recipient.signingStatus === SigningStatus.REJECTED && (
@@ -206,7 +175,7 @@ export const DocumentPageViewRecipients = ({
                       <Trans>Reason for rejection: </Trans>
                     </p>
 
-                    <p className="mt-1 text-sm text-muted-foreground">
+                    <p className="text-muted-foreground mt-1 text-sm">
                       {recipient.rejectionReason}
                     </p>
                   </PopoverHover>
@@ -214,8 +183,7 @@ export const DocumentPageViewRecipients = ({
 
               {envelope.status === DocumentStatus.PENDING &&
                 recipient.signingStatus === SigningStatus.NOT_SIGNED &&
-                recipient.role !== RecipientRole.CC &&
-                !isRecipientExpired(recipient) && (
+                recipient.role !== RecipientRole.CC && (
                   <TooltipProvider>
                     <Tooltip open={shouldHighlightCopyButtons && i === 0}>
                       <TooltipTrigger asChild>

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

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

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

@@ -10,7 +10,10 @@ import { CopyPlusIcon, SquareStackIcon, TrashIcon, UserCircleIcon } from 'lucide
 import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fields';
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import {
+  type PageRenderData,
+  useCurrentEnvelopeRender,
+} from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { FIELD_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
 import {
   MIN_FIELD_HEIGHT_PX,
@@ -22,10 +25,15 @@ import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { CommandDialog } from '@documenso/ui/primitives/command';
 
+import { EnvelopePageImage } from '../envelope/envelope-page-image';
 import { fieldButtonList } from './envelope-editor-fields-drag-drop';
 import { EnvelopeRecipientSelectorCommand } from './envelope-recipient-selector';
 
-export default function EnvelopeEditorFieldsPageRenderer() {
+export default function EnvelopeEditorFieldsPageRenderer({
+  pageData,
+}: {
+  pageData: PageRenderData;
+}) {
   const { t, i18n } = useLingui();
   const { envelope, editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
   const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
@@ -40,31 +48,24 @@ export default function EnvelopeEditorFieldsPageRenderer() {
   const {
     stage,
     pageLayer,
-    canvasElement,
     konvaContainer,
-    pageContext,
     scaledViewport,
     unscaledViewport,
-  } = usePageRenderer(({ stage, pageLayer }) => createPageCanvas(stage, pageLayer));
+    renderStatus,
+    imageProps,
+  } = usePageRenderer(({ stage, pageLayer }) => createPageCanvas(stage, pageLayer), pageData);
 
-  const { _className, scale } = pageContext;
+  const { scale, pageNumber } = pageData;
 
   const localPageFields = useMemo(
     () =>
       editorFields.localFields.filter(
-        (field) =>
-          field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
+        (field) => field.page === pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
       ),
-    [editorFields.localFields, pageContext.pageNumber],
+    [editorFields.localFields, pageNumber],
   );
 
   const handleResizeOrMove = (event: KonvaEventObject<Event>) => {
-    const { current: container } = canvasElement;
-
-    if (!container) {
-      return;
-    }
-
     const isDragEvent = event.type === 'dragend';
 
     const fieldGroup = event.target as Konva.Group;
@@ -344,7 +345,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       // Create a field if no items are selected or the size is too small.
       if (
         selectedFieldGroups.length === 0 &&
-        canvasElement.current &&
         unscaledBoxWidth > MIN_FIELD_WIDTH_PX &&
         unscaledBoxHeight > MIN_FIELD_HEIGHT_PX &&
         editorFields.selectedRecipient &&
@@ -434,31 +434,15 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       renderFieldOnLayer(field);
     });
 
-    // Reconcile selection state with live field nodes after flush/sync updates.
-    const liveSelectedFieldGroups = selectedKonvaFieldGroups.filter((fieldGroup) => {
-      if (!fieldGroup.getStage() || !fieldGroup.getParent()) {
-        return false;
-      }
-
-      return localPageFields.some((field) => field.formId === fieldGroup.id());
-    });
-
-    if (liveSelectedFieldGroups.length !== selectedKonvaFieldGroups.length) {
-      setSelectedFields(liveSelectedFieldGroups);
-    }
-
     // Rerender the transformer
     interactiveTransformer.current?.forceUpdate();
 
     pageLayer.current.batchDraw();
-  }, [localPageFields, selectedKonvaFieldGroups]);
+  }, [localPageFields]);
 
   const setSelectedFields = (nodes: Konva.Node[]) => {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const fieldGroups = nodes.filter(
-      (node) =>
-        node.hasName('field-group') && Boolean(node.getStage()) && Boolean(node.getParent()),
-    ) as Konva.Group[];
+    const fieldGroups = nodes.filter((node) => node.hasName('field-group')) as Konva.Group[];
 
     interactiveTransformer.current?.nodes(fieldGroups);
     setSelectedKonvaFieldGroups(fieldGroups);
@@ -531,7 +515,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
 
     removePendingField();
 
-    if (!canvasElement.current || !currentEnvelopeItem || !editorFields.selectedRecipient) {
+    if (!currentEnvelopeItem || !editorFields.selectedRecipient) {
       return;
     }
 
@@ -546,7 +530,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
 
     editorFields.addField({
       envelopeItemId: currentEnvelopeItem.id,
-      page: pageContext.pageNumber,
+      page: pageNumber,
       type,
       positionX: fieldX,
       positionY: fieldY,
@@ -575,10 +559,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
   }
 
   return (
-    <div
-      className="relative w-full"
-      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
-    >
+    <div className="relative w-full" key={`${currentEnvelopeItem.id}-renderer-${pageNumber}`}>
       {selectedKonvaFieldGroups.length > 0 &&
         interactiveTransformer.current &&
         !isFieldChanging && (
@@ -641,13 +622,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       {/* The element Konva will inject it's canvas into. */}
       <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>
 
-      {/* Canvas the PDF will be rendered on. */}
-      <canvas
-        className={`${_className}__canvas z-0`}
-        ref={canvasElement}
-        height={scaledViewport.height}
-        width={scaledViewport.width}
-      />
+      <EnvelopePageImage renderStatus={renderStatus} imageProps={imageProps} />
     </div>
   );
 }
@@ -690,10 +665,6 @@ const FieldActionButtons = ({
       selectedFieldFormId.includes(field.formId),
     );
 
-    if (fields.length === 0) {
-      return null;
-    }
-
     const recipient = envelope.recipients.find(
       (recipient) => recipient.id === fields[0].recipientId,
     );
@@ -709,7 +680,7 @@ const FieldActionButtons = ({
     }
 
     return null;
-  }, [editorFields.localFields, envelope.recipients, selectedFieldFormId]);
+  }, [editorFields.localFields]);
 
   return (
     <div className="flex flex-col items-center" {...props}>

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

@@ -1,4 +1,4 @@
-import { lazy, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
@@ -6,12 +6,13 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
 import { FileTextIcon, SparklesIcon } from 'lucide-react';
-import { Link, useRevalidator, useSearchParams } from 'react-router';
+import { useRevalidator, useSearchParams } from 'react-router';
 import { isDeepEqual } from 'remeda';
 import { match } from 'ts-pattern';
 
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { PDF_VIEWER_ERROR_MESSAGES } from '@documenso/lib/constants/pdf-viewer-i18n';
 import type { NormalizedFieldWithContext } from '@documenso/lib/server-only/ai/envelope/detect-fields/types';
 import {
   FIELD_META_DEFAULT_VALUES,
@@ -29,7 +30,7 @@ import {
 } from '@documenso/lib/types/field-meta';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
-import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
+import { EnvelopePdfViewer } from '@documenso/ui/components/pdf-viewer/envelope-pdf-viewer';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
@@ -49,13 +50,10 @@ import { EditorFieldTextForm } from '~/components/forms/editor/editor-field-text
 import { useCurrentTeam } from '~/providers/team';
 
 import { EnvelopeEditorFieldDragDrop } from './envelope-editor-fields-drag-drop';
+import EnvelopeEditorFieldsPageRenderer from './envelope-editor-fields-page-renderer';
 import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 import { EnvelopeRecipientSelector } from './envelope-recipient-selector';
 
-const EnvelopeEditorFieldsPageRenderer = lazy(
-  async () => import('~/components/general/envelope-editor/envelope-editor-fields-page-renderer'),
-);
-
 const FieldSettingsTypeTranslations: Record<FieldType, MessageDescriptor> = {
   [FieldType.SIGNATURE]: msg`Signature Settings`,
   [FieldType.FREE_SIGNATURE]: msg`Free Signature Settings`,
@@ -75,7 +73,9 @@ export const EnvelopeEditorFieldsPage = () => {
 
   const team = useCurrentTeam();
 
-  const { envelope, editorFields, relativePath } = useCurrentEnvelopeEditor();
+  const scrollableContainerRef = useRef<HTMLDivElement>(null);
+
+  const { envelope, editorFields, navigateToStep, editorConfig } = useCurrentEnvelopeEditor();
 
   const { currentEnvelopeItem } = useCurrentEnvelopeRender();
 
@@ -97,14 +97,10 @@ export const EnvelopeEditorFieldsPage = () => {
 
     const isMetaSame = isDeepEqual(selectedField.fieldMeta, fieldMeta);
 
-    // Todo: Envelopes - Clean up console logs.
     if (!isMetaSame) {
-      console.log('TRIGGER UPDATE');
       editorFields.updateFieldByFormId(selectedField.formId, {
         fieldMeta,
       });
-    } else {
-      console.log('DATA IS SAME, NO UPDATE');
     }
   };
 
@@ -156,12 +152,12 @@ export const EnvelopeEditorFieldsPage = () => {
 
   return (
     <div className="relative flex h-full">
-      <div className="flex w-full flex-col overflow-y-auto">
+      <div className="flex h-full w-full flex-col overflow-y-auto" ref={scrollableContainerRef}>
         {/* Horizontal envelope item selector */}
         <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
         {/* Document View */}
-        <div className="mt-4 flex flex-col items-center justify-center">
+        <div className="mt-4 flex h-full flex-col items-center justify-center">
           {envelope.recipients.length === 0 && (
             <Alert
               variant="neutral"
@@ -176,18 +172,17 @@ export const EnvelopeEditorFieldsPage = () => {
                 </AlertDescription>
               </div>
 
-              <Button asChild variant="outline">
-                <Link to={`${relativePath.editorPath}`}>
-                  <Trans>Add Recipients</Trans>
-                </Link>
+              <Button variant="outline" onClick={() => void navigateToStep('upload')}>
+                <Trans>Add Recipients</Trans>
               </Button>
             </Alert>
           )}
 
           {currentEnvelopeItem !== null ? (
-            <PDFViewerKonvaLazy
-              renderer="editor"
+            <EnvelopePdfViewer
               customPageRenderer={EnvelopeEditorFieldsPageRenderer}
+              scrollParentRef={scrollableContainerRef}
+              errorMessage={PDF_VIEWER_ERROR_MESSAGES.editor}
             />
           ) : (
             <div className="flex flex-col items-center justify-center py-32">
@@ -249,36 +244,40 @@ export const EnvelopeEditorFieldsPage = () => {
               selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null}
             />
 
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="mt-4 w-full"
-              onClick={onDetectClick}
-              disabled={envelope.status !== DocumentStatus.DRAFT}
-              title={
-                envelope.status !== DocumentStatus.DRAFT
-                  ? _(msg`You can only detect fields in draft envelopes`)
-                  : undefined
-              }
-            >
-              <SparklesIcon className="-ml-1 mr-2 h-4 w-4" />
-              <Trans>Detect with AI</Trans>
-            </Button>
+            {editorConfig.fields?.allowAIDetection && (
+              <>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="mt-4 w-full"
+                  onClick={onDetectClick}
+                  disabled={envelope.status !== DocumentStatus.DRAFT}
+                  title={
+                    envelope.status !== DocumentStatus.DRAFT
+                      ? _(msg`You can only detect fields in draft envelopes`)
+                      : undefined
+                  }
+                >
+                  <SparklesIcon className="-ml-1 mr-2 h-4 w-4" />
+                  <Trans>Detect with AI</Trans>
+                </Button>
 
-            <AiFieldDetectionDialog
-              open={isAiFieldDialogOpen}
-              onOpenChange={setIsAiFieldDialogOpen}
-              onComplete={onFieldDetectionComplete}
-              envelopeId={envelope.id}
-              teamId={envelope.teamId}
-            />
+                <AiFieldDetectionDialog
+                  open={isAiFieldDialogOpen}
+                  onOpenChange={setIsAiFieldDialogOpen}
+                  onComplete={onFieldDetectionComplete}
+                  envelopeId={envelope.id}
+                  teamId={envelope.teamId}
+                />
 
-            <AiFeaturesEnableDialog
-              open={isAiEnableDialogOpen}
-              onOpenChange={setIsAiEnableDialogOpen}
-              onEnabled={onAiFeaturesEnabled}
-            />
+                <AiFeaturesEnableDialog
+                  open={isAiEnableDialogOpen}
+                  onOpenChange={setIsAiEnableDialogOpen}
+                  onEnabled={onAiFeaturesEnabled}
+                />
+              </>
+            )}
           </section>
 
           {/* Field details section. */}
@@ -296,31 +295,19 @@ export const EnvelopeEditorFieldsPage = () => {
 
                       <div className="space-y-2 rounded-md border border-border bg-muted/50 p-3 text-sm text-foreground">
                         <p>
-                          <span className="min-w-12 text-muted-foreground">
-                            <Trans>Pos X:</Trans>
-                          </span>
-                          &nbsp;
+                          <span className="min-w-12 text-muted-foreground">Pos X:&nbsp;</span>
                           {selectedField.positionX.toFixed(2)}
                         </p>
                         <p>
-                          <span className="min-w-12 text-muted-foreground">
-                            <Trans>Pos Y:</Trans>
-                          </span>
-                          &nbsp;
+                          <span className="min-w-12 text-muted-foreground">Pos Y:&nbsp;</span>
                           {selectedField.positionY.toFixed(2)}
                         </p>
                         <p>
-                          <span className="min-w-12 text-muted-foreground">
-                            <Trans>Width:</Trans>
-                          </span>
-                          &nbsp;
+                          <span className="min-w-12 text-muted-foreground">Width:&nbsp;</span>
                           {selectedField.width.toFixed(2)}
                         </p>
                         <p>
-                          <span className="min-w-12 text-muted-foreground">
-                            <Trans>Height:</Trans>
-                          </span>
-                          &nbsp;
+                          <span className="min-w-12 text-muted-foreground">Height:&nbsp;</span>
                           {selectedField.height.toFixed(2)}
                         </p>
                       </div>

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

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

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

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

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

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

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

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

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

@@ -22,13 +22,13 @@ import {
   DOCUMENT_DISTRIBUTION_METHODS,
   DOCUMENT_SIGNATURE_TYPES,
 } from '@documenso/lib/constants/document';
-import { ZEnvelopeExpirationPeriod } from '@documenso/lib/constants/envelope-expiration';
 import {
   SUPPORTED_LANGUAGES,
   SUPPORTED_LANGUAGE_CODES,
   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,
@@ -63,7 +63,6 @@ import {
   DocumentVisibilitySelect,
   DocumentVisibilityTooltip,
 } from '@documenso/ui/components/document/document-visibility-select';
-import { ExpirationPeriodPicker } from '@documenso/ui/components/document/expiration-period-picker';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { CardDescription, CardHeader, CardTitle } from '@documenso/ui/primitives/card';
@@ -137,7 +136,6 @@ export const ZAddSettingsFormSchema = z.object({
     signatureTypes: z.array(z.nativeEnum(DocumentSignatureType)).min(1, {
       message: msg`At least one signature type must be enabled`.id,
     }),
-    envelopeExpirationPeriod: ZEnvelopeExpirationPeriod.nullish(),
   }),
 });
 
@@ -177,7 +175,9 @@ export const EnvelopeEditorSettingsDialog = ({
   const { t, i18n } = useLingui();
   const { toast } = useToast();
 
-  const { envelope, updateEnvelopeAsync } = useCurrentEnvelopeEditor();
+  const { envelope, updateEnvelopeAsync, editorConfig, isEmbedded } = useCurrentEnvelopeEditor();
+
+  const { settings } = editorConfig;
 
   const team = useCurrentTeam();
   const organisation = useCurrentOrganisation();
@@ -210,7 +210,6 @@ export const EnvelopeEditorSettingsDialog = ({
         emailReplyTo: envelope.documentMeta.emailReplyTo ?? undefined,
         emailSettings: ZDocumentEmailSettingsSchema.parse(envelope.documentMeta.emailSettings),
         signatureTypes: extractTeamSignatureSettings(envelope.documentMeta),
-        envelopeExpirationPeriod: envelope.documentMeta?.envelopeExpirationPeriod ?? null,
       },
     };
   };
@@ -227,10 +226,15 @@ export const EnvelopeEditorSettingsDialog = ({
   const emailSettings = form.watch('meta.emailSettings');
 
   const { data: emailData, isLoading: isLoadingEmails } =
-    trpc.enterprise.organisation.email.find.useQuery({
-      organisationId: organisation.id,
-      perPage: 100,
-    });
+    trpc.enterprise.organisation.email.find.useQuery(
+      {
+        organisationId: organisation.id,
+        perPage: 100,
+      },
+      {
+        ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+      },
+    );
 
   const emails = emailData?.data || [];
 
@@ -249,7 +253,6 @@ export const EnvelopeEditorSettingsDialog = ({
       message,
       subject,
       emailReplyTo,
-      envelopeExpirationPeriod,
     } = data.meta;
 
     const parsedGlobalAccessAuth = z
@@ -278,17 +281,18 @@ export const EnvelopeEditorSettingsDialog = ({
           drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
           typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
           uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
-          envelopeExpirationPeriod,
         },
       });
 
       setOpen(false);
 
-      toast({
-        title: t`Success`,
-        description: t`Envelope updated`,
-        duration: 5000,
-      });
+      if (!isEmbedded) {
+        toast({
+          title: t`Success`,
+          description: t`Envelope updated`,
+          duration: 5000,
+        });
+      }
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -325,7 +329,7 @@ export const EnvelopeEditorSettingsDialog = ({
 
   const selectedTab = tabs.find((tab) => tab.id === activeTab);
 
-  if (!selectedTab) {
+  if (!selectedTab || !settings) {
     return null;
   }
 
@@ -346,26 +350,32 @@ export const EnvelopeEditorSettingsDialog = ({
       <DialogContent className="flex w-full !max-w-5xl flex-row gap-0 p-0">
         {/* Sidebar. */}
         <div className="flex w-80 flex-col border-r bg-accent/20">
-          <DialogHeader className="p-6 pb-4">
+          <DialogHeader className="p-6 pb-4" data-testid="envelope-editor-settings-dialog-header">
             <DialogTitle>
               <Trans>Document Settings</Trans>
             </DialogTitle>
           </DialogHeader>
 
           <nav className="col-span-12 mb-8 flex flex-wrap items-center justify-start gap-x-2 gap-y-4 px-4 md:col-span-3 md:w-full md:flex-col md:items-start md:gap-y-2">
-            {tabs.map((tab) => (
-              <Button
-                key={tab.id}
-                onClick={() => setActiveTab(tab.id)}
-                variant="ghost"
-                className={cn('w-full justify-start', {
-                  'bg-secondary': activeTab === tab.id,
-                })}
-              >
-                <tab.icon className="mr-2 h-5 w-5" />
-                {t(tab.title)}
-              </Button>
-            ))}
+            {tabs.map((tab) => {
+              if (tab.id === 'email' && !settings.allowConfigureDistribution) {
+                return null;
+              }
+
+              return (
+                <Button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  variant="ghost"
+                  className={cn('w-full justify-start', {
+                    'bg-secondary': activeTab === tab.id,
+                  })}
+                >
+                  <tab.icon className="mr-2 h-5 w-5" />
+                  {t(tab.title)}
+                </Button>
+              );
+            })}
           </nav>
         </div>
 
@@ -379,141 +389,155 @@ export const EnvelopeEditorSettingsDialog = ({
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onFormSubmit)}>
               <fieldset
-                className="flex h-[45rem] max-h-[calc(100vh-14rem)] w-full flex-col space-y-6 overflow-y-auto px-6 py-6"
+                className="flex h-[45rem] max-h-[calc(100vh-14rem)] w-full flex-col space-y-6 overflow-y-auto px-6 pt-6"
                 disabled={form.formState.isSubmitting}
                 key={activeTab}
               >
-                {match(activeTab)
-                  .with('general', () => (
+                {match({ activeTab, settings })
+                  .with({ activeTab: 'general' }, () => (
                     <>
-                      <FormField
-                        control={form.control}
-                        name="meta.language"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="inline-flex items-center">
-                              <Trans>Language</Trans>
-                              <Tooltip>
-                                <TooltipTrigger>
-                                  <InfoIcon className="mx-2 h-4 w-4" />
-                                </TooltipTrigger>
+                      {settings.allowConfigureLanguage && (
+                        <FormField
+                          control={form.control}
+                          name="meta.language"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="inline-flex items-center">
+                                <Trans>Language</Trans>
+                                <Tooltip>
+                                  <TooltipTrigger>
+                                    <InfoIcon className="mx-2 h-4 w-4" />
+                                  </TooltipTrigger>
 
-                                <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
-                                  <Trans>
-                                    Controls the language for the document, including the language
-                                    to be used for email notifications, and the final certificate
-                                    that is generated and attached to the document.
-                                  </Trans>
-                                </TooltipContent>
-                              </Tooltip>
-                            </FormLabel>
+                                  <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
+                                    <Trans>
+                                      Controls the language for the document, including the language
+                                      to be used for email notifications, and the final certificate
+                                      that is generated and attached to the document.
+                                    </Trans>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </FormLabel>
 
-                            <FormControl>
-                              <Select
-                                value={field.value}
-                                disabled={field.disabled}
-                                onValueChange={field.onChange}
-                              >
-                                <SelectTrigger className="bg-background">
-                                  <SelectValue />
-                                </SelectTrigger>
+                              <FormControl>
+                                <Select
+                                  value={field.value}
+                                  disabled={field.disabled}
+                                  onValueChange={field.onChange}
+                                >
+                                  <SelectTrigger className="bg-background">
+                                    <SelectValue />
+                                  </SelectTrigger>
 
-                                <SelectContent>
-                                  {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
-                                    <SelectItem key={code} value={code}>
-                                      {language.full}
-                                    </SelectItem>
-                                  ))}
-                                </SelectContent>
-                              </Select>
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                      <FormField
-                        control={form.control}
-                        name="meta.signatureTypes"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="flex flex-row items-center">
-                              <Trans>Allowed Signature Types</Trans>
-                              <DocumentSignatureSettingsTooltip />
-                            </FormLabel>
+                                  <SelectContent>
+                                    {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
+                                      <SelectItem key={code} value={code}>
+                                        {language.full}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      )}
 
-                            <FormControl>
-                              <MultiSelectCombobox
-                                options={Object.values(DOCUMENT_SIGNATURE_TYPES).map((option) => ({
-                                  label: t(option.label),
-                                  value: option.value,
-                                }))}
-                                selectedValues={field.value}
-                                onChange={field.onChange}
-                                className="w-full bg-background"
-                                emptySelectionPlaceholder="Select signature types"
-                              />
-                            </FormControl>
+                      {settings.allowConfigureSignatureTypes && (
+                        <FormField
+                          control={form.control}
+                          name="meta.signatureTypes"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="flex flex-row items-center">
+                                <Trans>Allowed Signature Types</Trans>
+                                <DocumentSignatureSettingsTooltip />
+                              </FormLabel>
 
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                      <FormField
-                        control={form.control}
-                        name="meta.dateFormat"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>
-                              <Trans>Date Format</Trans>
-                            </FormLabel>
+                              <FormControl>
+                                <MultiSelectCombobox
+                                  options={Object.values(DOCUMENT_SIGNATURE_TYPES).map(
+                                    (option) => ({
+                                      label: t(option.label),
+                                      value: option.value,
+                                    }),
+                                  )}
+                                  selectedValues={field.value}
+                                  onChange={field.onChange}
+                                  className="w-full bg-background"
+                                  emptySelectionPlaceholder="Select signature types"
+                                />
+                              </FormControl>
 
-                            <FormControl>
-                              <Select
-                                value={field.value}
-                                onValueChange={field.onChange}
-                                disabled={envelopeHasBeenSent}
-                              >
-                                <SelectTrigger className="bg-background">
-                                  <SelectValue />
-                                </SelectTrigger>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      )}
 
-                                <SelectContent>
-                                  {DATE_FORMATS.map((format) => (
-                                    <SelectItem key={format.key} value={format.value}>
-                                      {format.label}
-                                    </SelectItem>
-                                  ))}
-                                </SelectContent>
-                              </Select>
-                            </FormControl>
+                      {settings.allowConfigureDateFormat && (
+                        <FormField
+                          control={form.control}
+                          name="meta.dateFormat"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                <Trans>Date Format</Trans>
+                              </FormLabel>
 
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                      <FormField
-                        control={form.control}
-                        name="meta.timezone"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>
-                              <Trans>Time Zone</Trans>
-                            </FormLabel>
+                              <FormControl>
+                                <Select
+                                  value={field.value}
+                                  onValueChange={field.onChange}
+                                  disabled={envelopeHasBeenSent}
+                                >
+                                  <SelectTrigger className="bg-background">
+                                    <SelectValue />
+                                  </SelectTrigger>
 
-                            <FormControl>
-                              <Combobox
-                                className="bg-background"
-                                options={TIME_ZONES}
-                                value={field.value}
-                                onChange={(value) => value && field.onChange(value)}
-                                disabled={envelopeHasBeenSent}
-                              />
-                            </FormControl>
+                                  <SelectContent>
+                                    {DATE_FORMATS.map((format) => (
+                                      <SelectItem key={format.key} value={format.value}>
+                                        {format.label}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </FormControl>
+
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      )}
+
+                      {settings.allowConfigureTimezone && (
+                        <FormField
+                          control={form.control}
+                          name="meta.timezone"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                <Trans>Time Zone</Trans>
+                              </FormLabel>
+
+                              <FormControl>
+                                <Combobox
+                                  className="bg-background"
+                                  options={TIME_ZONES}
+                                  value={field.value}
+                                  onChange={(value) => value && field.onChange(value)}
+                                  disabled={envelopeHasBeenSent}
+                                />
+                              </FormControl>
+
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      )}
 
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
                       <FormField
                         control={form.control}
                         name="externalId"
@@ -544,177 +568,29 @@ export const EnvelopeEditorSettingsDialog = ({
                         )}
                       />
 
-                      <FormField
-                        control={form.control}
-                        name="meta.redirectUrl"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="flex flex-row items-center">
-                              <Trans>Redirect URL</Trans>{' '}
-                              <Tooltip>
-                                <TooltipTrigger>
-                                  <InfoIcon className="mx-2 h-4 w-4" />
-                                </TooltipTrigger>
-
-                                <TooltipContent className="max-w-xs text-muted-foreground">
-                                  <Trans>
-                                    Add a URL to redirect the user to once the document is signed
-                                  </Trans>
-                                </TooltipContent>
-                              </Tooltip>
-                            </FormLabel>
-
-                            <FormControl>
-                              <Input className="bg-background" {...field} />
-                            </FormControl>
-
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                      <FormField
-                        control={form.control}
-                        name="meta.distributionMethod"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="flex flex-row items-center">
-                              <Trans>Document Distribution Method</Trans>
-                              <Tooltip>
-                                <TooltipTrigger>
-                                  <InfoIcon className="mx-2 h-4 w-4" />
-                                </TooltipTrigger>
-
-                                <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
-                                  <h2>
-                                    <strong>
-                                      <Trans>Document Distribution Method</Trans>
-                                    </strong>
-                                  </h2>
-
-                                  <p>
-                                    <Trans>
-                                      This is how the document will reach the recipients once the
-                                      document is ready for signing.
-                                    </Trans>
-                                  </p>
-
-                                  <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
-                                    <li>
-                                      <Trans>
-                                        <strong>Email</strong> - The recipient will be emailed the
-                                        document to sign, approve, etc.
-                                      </Trans>
-                                    </li>
-                                    <li>
-                                      <Trans>
-                                        <strong>None</strong> - We will generate links which you can
-                                        send to the recipients manually.
-                                      </Trans>
-                                    </li>
-                                  </ul>
-
-                                  <Trans>
-                                    <strong>Note</strong> - If you use Links in combination with
-                                    direct templates, you will need to manually send the links to
-                                    the remaining recipients.
-                                  </Trans>
-                                </TooltipContent>
-                              </Tooltip>
-                            </FormLabel>
-
-                            <FormControl>
-                              <Select {...field} onValueChange={field.onChange}>
-                                <SelectTrigger className="bg-background text-muted-foreground">
-                                  <SelectValue data-testid="documentDistributionMethodSelectValue" />
-                                </SelectTrigger>
-
-                                <SelectContent position="popper">
-                                  {Object.values(DOCUMENT_DISTRIBUTION_METHODS).map(
-                                    ({ value, description }) => (
-                                      <SelectItem key={value} value={value}>
-                                        {i18n._(description)}
-                                      </SelectItem>
-                                    ),
-                                  )}
-                                </SelectContent>
-                              </Select>
-                            </FormControl>
-                          </FormItem>
-                        )}
-                      />
-
-                      <FormField
-                        control={form.control}
-                        name="meta.envelopeExpirationPeriod"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="flex flex-row items-center">
-                              <Trans>Expiration</Trans>
-                              <Tooltip>
-                                <TooltipTrigger>
-                                  <InfoIcon className="mx-2 h-4 w-4" />
-                                </TooltipTrigger>
-
-                                <TooltipContent className="max-w-xs text-muted-foreground">
-                                  <Trans>
-                                    How long recipients have to complete this document after it is
-                                    sent. Uses the team default when set to inherit.
-                                  </Trans>
-                                </TooltipContent>
-                              </Tooltip>
-                            </FormLabel>
-
-                            <FormControl>
-                              <ExpirationPeriodPicker
-                                value={field.value}
-                                onChange={field.onChange}
-                                disabled={envelopeHasBeenSent}
-                              />
-                            </FormControl>
-
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </>
-                  ))
-                  .with('email', () => (
-                    <>
-                      {organisation.organisationClaim.flags.emailDomains && (
+                      {settings.allowConfigureRedirectUrl && (
                         <FormField
                           control={form.control}
-                          name="meta.emailId"
+                          name="meta.redirectUrl"
                           render={({ field }) => (
                             <FormItem>
-                              <FormLabel>
-                                <Trans>Email Sender</Trans>
+                              <FormLabel className="flex flex-row items-center">
+                                <Trans>Redirect URL</Trans>{' '}
+                                <Tooltip>
+                                  <TooltipTrigger>
+                                    <InfoIcon className="mx-2 h-4 w-4" />
+                                  </TooltipTrigger>
+
+                                  <TooltipContent className="max-w-xs text-muted-foreground">
+                                    <Trans>
+                                      Add a URL to redirect the user to once the document is signed
+                                    </Trans>
+                                  </TooltipContent>
+                                </Tooltip>
                               </FormLabel>
 
                               <FormControl>
-                                <Select
-                                  {...field}
-                                  value={field.value === null ? '-1' : field.value}
-                                  onValueChange={(value) =>
-                                    field.onChange(value === '-1' ? null : value)
-                                  }
-                                >
-                                  <SelectTrigger
-                                    loading={isLoadingEmails}
-                                    className="bg-background"
-                                  >
-                                    <SelectValue />
-                                  </SelectTrigger>
-
-                                  <SelectContent>
-                                    {emails.map((email) => (
-                                      <SelectItem key={email.id} value={email.id}>
-                                        {email.email}
-                                      </SelectItem>
-                                    ))}
-
-                                    <SelectItem value={'-1'}>Documenso</SelectItem>
-                                  </SelectContent>
-                                </Select>
+                                <Input className="bg-background" {...field} />
                               </FormControl>
 
                               <FormMessage />
@@ -723,82 +599,204 @@ export const EnvelopeEditorSettingsDialog = ({
                         />
                       )}
 
-                      <FormField
-                        control={form.control}
-                        name="meta.emailReplyTo"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>
-                              <Trans>
-                                Reply To Email{' '}
-                                <span className="text-muted-foreground">(Optional)</span>
-                              </Trans>
-                            </FormLabel>
+                      {settings.allowConfigureDistribution && (
+                        <FormField
+                          control={form.control}
+                          name="meta.distributionMethod"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="flex flex-row items-center">
+                                <Trans>Document Distribution Method</Trans>
+                                <Tooltip>
+                                  <TooltipTrigger>
+                                    <InfoIcon className="mx-2 h-4 w-4" />
+                                  </TooltipTrigger>
 
-                            <FormControl>
-                              <Input {...field} />
-                            </FormControl>
+                                  <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
+                                    <h2>
+                                      <strong>
+                                        <Trans>Document Distribution Method</Trans>
+                                      </strong>
+                                    </h2>
 
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
+                                    <p>
+                                      <Trans>
+                                        This is how the document will reach the recipients once the
+                                        document is ready for signing.
+                                      </Trans>
+                                    </p>
 
-                      <FormField
-                        control={form.control}
-                        name="meta.subject"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>
-                              <Trans>
-                                Subject <span className="text-muted-foreground">(Optional)</span>
-                              </Trans>
-                            </FormLabel>
+                                    <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
+                                      <li>
+                                        <Trans>
+                                          <strong>Email</strong> - The recipient will be emailed the
+                                          document to sign, approve, etc.
+                                        </Trans>
+                                      </li>
+                                      <li>
+                                        <Trans>
+                                          <strong>None</strong> - We will generate links which you
+                                          can send to the recipients manually.
+                                        </Trans>
+                                      </li>
+                                    </ul>
 
-                            <FormControl>
-                              <Input {...field} />
-                            </FormControl>
+                                    <Trans>
+                                      <strong>Note</strong> - If you use Links in combination with
+                                      direct templates, you will need to manually send the links to
+                                      the remaining recipients.
+                                    </Trans>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </FormLabel>
 
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
+                              <FormControl>
+                                <Select {...field} onValueChange={field.onChange}>
+                                  <SelectTrigger className="bg-background text-muted-foreground">
+                                    <SelectValue data-testid="documentDistributionMethodSelectValue" />
+                                  </SelectTrigger>
 
-                      <FormField
-                        control={form.control}
-                        name="meta.message"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="flex flex-row items-center">
-                              <Trans>
-                                Message <span className="text-muted-foreground">(Optional)</span>
-                              </Trans>
-                              <Tooltip>
-                                <TooltipTrigger>
-                                  <InfoIcon className="mx-2 h-4 w-4" />
-                                </TooltipTrigger>
-                                <TooltipContent className="p-4 text-muted-foreground">
-                                  <DocumentSendEmailMessageHelper />
-                                </TooltipContent>
-                              </Tooltip>
-                            </FormLabel>
-
-                            <FormControl>
-                              <Textarea className="h-16 resize-none bg-background" {...field} />
-                            </FormControl>
-
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-
-                      <DocumentEmailCheckboxes
-                        value={emailSettings}
-                        onChange={(value) => form.setValue('meta.emailSettings', value)}
-                      />
+                                  <SelectContent position="popper">
+                                    {Object.values(DOCUMENT_DISTRIBUTION_METHODS).map(
+                                      ({ value, description }) => (
+                                        <SelectItem key={value} value={value}>
+                                          {i18n._(description)}
+                                        </SelectItem>
+                                      ),
+                                    )}
+                                  </SelectContent>
+                                </Select>
+                              </FormControl>
+                            </FormItem>
+                          )}
+                        />
+                      )}
                     </>
                   ))
-                  .with('security', () => (
+                  .with(
+                    { activeTab: 'email', settings: { allowConfigureDistribution: true } },
+                    () => (
+                      <>
+                        {organisation.organisationClaim.flags.emailDomains && (
+                          <FormField
+                            control={form.control}
+                            name="meta.emailId"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>
+                                  <Trans>Email Sender</Trans>
+                                </FormLabel>
+
+                                <FormControl>
+                                  <Select
+                                    {...field}
+                                    value={field.value === null ? '-1' : field.value}
+                                    onValueChange={(value) =>
+                                      field.onChange(value === '-1' ? null : value)
+                                    }
+                                  >
+                                    <SelectTrigger
+                                      loading={isLoadingEmails}
+                                      className="bg-background"
+                                    >
+                                      <SelectValue />
+                                    </SelectTrigger>
+
+                                    <SelectContent>
+                                      {emails.map((email) => (
+                                        <SelectItem key={email.id} value={email.id}>
+                                          {email.email}
+                                        </SelectItem>
+                                      ))}
+
+                                      <SelectItem value={'-1'}>Documenso</SelectItem>
+                                    </SelectContent>
+                                  </Select>
+                                </FormControl>
+
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        )}
+
+                        <FormField
+                          control={form.control}
+                          name="meta.emailReplyTo"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                <Trans>
+                                  Reply To Email{' '}
+                                  <span className="text-muted-foreground">(Optional)</span>
+                                </Trans>
+                              </FormLabel>
+
+                              <FormControl>
+                                <Input {...field} />
+                              </FormControl>
+
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name="meta.subject"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                <Trans>
+                                  Subject <span className="text-muted-foreground">(Optional)</span>
+                                </Trans>
+                              </FormLabel>
+
+                              <FormControl>
+                                <Input {...field} />
+                              </FormControl>
+
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name="meta.message"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="flex flex-row items-center">
+                                <Trans>
+                                  Message <span className="text-muted-foreground">(Optional)</span>
+                                </Trans>
+                                <Tooltip>
+                                  <TooltipTrigger>
+                                    <InfoIcon className="mx-2 h-4 w-4" />
+                                  </TooltipTrigger>
+                                  <TooltipContent className="p-4 text-muted-foreground">
+                                    <DocumentSendEmailMessageHelper />
+                                  </TooltipContent>
+                                </Tooltip>
+                              </FormLabel>
+
+                              <FormControl>
+                                <Textarea className="h-16 resize-none bg-background" {...field} />
+                              </FormControl>
+
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <DocumentEmailCheckboxes
+                          value={emailSettings}
+                          onChange={(value) => form.setValue('meta.emailSettings', value)}
+                        />
+                      </>
+                    ),
+                  )
+                  .with({ activeTab: 'security' }, () => (
                     <>
                       {organisation.organisationClaim.flags.cfr21 && (
                         <FormField
@@ -867,7 +865,7 @@ export const EnvelopeEditorSettingsDialog = ({
                       />
                     </>
                   ))
-                  .exhaustive()}
+                  .otherwise(() => null)}
               </fieldset>
 
               <div className="flex flex-row justify-end gap-4 p-6">

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -14,11 +14,11 @@ import {
 import { ZDocumentAccessAuthTypesSchema } from '@documenso/lib/types/document-auth';
 import type { TTemplate } from '@documenso/lib/types/template';
 import { trpc } from '@documenso/trpc/react';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { AddTemplateFieldsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-fields';
 import type { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
@@ -312,11 +312,12 @@ export const TemplateEditForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewerLazy
+          <PDFViewer
             key={template.envelopeItems[0].id}
             envelopeItem={template.envelopeItems[0]}
             token={undefined}
-            version="signed"
+            version="current"
+            scrollParentRef="window"
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

apps/remix/app/components/general/user-profile-skeleton.tsx

@@ -51,7 +51,7 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
       <div className="mt-8 w-full">
         <div className="dark:divide-foreground/30 dark:border-foreground/30 divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200">
           <div className="text-muted-foreground dark:bg-foreground/20 bg-neutral-50 p-4 font-medium">
-            <Trans>Documents</Trans>
+            Documents
           </div>
 
           {Array(rows)

apps/remix/app/components/general/webhook-multiselect-combobox.tsx

@@ -1,6 +1,5 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
 import { WebhookTriggerEvents } from '@prisma/client';
 
 import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
@@ -42,11 +41,7 @@ export const WebhookMultiSelectCombobox = ({
       placeholder={_(msg`Select triggers`)}
       hideClearAllButton
       hidePlaceholderWhenSelected
-      emptyIndicator={
-        <p className="text-center text-sm">
-          <Trans>No triggers available</Trans>
-        </p>
-      }
+      emptyIndicator={<p className="text-center text-sm">No triggers available</p>}
     />
   );
 };

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

@@ -96,9 +96,7 @@ export const AdminDocumentLogsTable = ({ envelopeId }: AdminDocumentLogsTablePro
               )}
             </div>
           ) : (
-            <p>
-              <Trans>N/A</Trans>
-            </p>
+            <p>N/A</p>
           ),
       },
       {

apps/remix/app/components/tables/admin-user-teams-table.tsx

@@ -1,146 +0,0 @@
-import { useMemo } from 'react';
-
-import { useLingui } from '@lingui/react';
-import { useLingui as useLinguiMacro } from '@lingui/react/macro';
-import { Link, useSearchParams } from 'react-router';
-
-import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
-import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
-import type { TeamMemberRole } from '@documenso/prisma/generated/types';
-import { trpc } from '@documenso/trpc/react';
-import { Badge } from '@documenso/ui/primitives/badge';
-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 { HoverCard, HoverCardContent, HoverCardTrigger } from '@documenso/ui/primitives/hover-card';
-import { Skeleton } from '@documenso/ui/primitives/skeleton';
-import { TableCell } from '@documenso/ui/primitives/table';
-
-type AdminUserTeamsTableProps = {
-  userId: number;
-};
-
-export const AdminUserTeamsTable = ({ userId }: AdminUserTeamsTableProps) => {
-  const { i18n } = useLingui();
-  const { t } = useLinguiMacro();
-
-  const [searchParams] = useSearchParams();
-  const updateSearchParams = useUpdateSearchParams();
-
-  const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
-
-  const { data, isLoading, isLoadingError } = trpc.admin.user.findTeams.useQuery({
-    userId,
-    query: parsedSearchParams.query,
-    page: parsedSearchParams.page,
-    perPage: parsedSearchParams.perPage,
-  });
-
-  const onPaginationChange = (page: number, perPage: number) => {
-    updateSearchParams({
-      page,
-      perPage,
-    });
-  };
-
-  const results = data ?? {
-    data: [],
-    perPage: 10,
-    currentPage: 1,
-    totalPages: 1,
-  };
-
-  const columns = useMemo(() => {
-    return [
-      {
-        header: t`Team`,
-        accessorKey: 'name',
-        cell: ({ row }) => (
-          <HoverCard>
-            <HoverCardTrigger className="cursor-default underline decoration-dotted underline-offset-4">
-              {row.original.name}
-            </HoverCardTrigger>
-            <HoverCardContent
-              className="w-auto font-mono text-xs text-muted-foreground"
-              align="start"
-            >
-              <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1">
-                <dt>id</dt>
-                <dd>{row.original.id}</dd>
-                <dt>url</dt>
-                <dd>{row.original.url}</dd>
-              </dl>
-            </HoverCardContent>
-          </HoverCard>
-        ),
-      },
-      {
-        header: t`Organisation`,
-        accessorKey: 'organisation',
-        cell: ({ row }) => (
-          <Link
-            to={`/admin/organisations/${row.original.organisation.id}`}
-            className="hover:underline"
-          >
-            {row.original.organisation.name}
-          </Link>
-        ),
-      },
-      {
-        header: t`Role`,
-        accessorKey: 'teamRole',
-        cell: ({ row }) => (
-          <Badge variant="neutral">
-            {i18n._(TEAM_MEMBER_ROLE_MAP[row.original.teamRole as TeamMemberRole])}
-          </Badge>
-        ),
-      },
-      {
-        header: t`Created At`,
-        accessorKey: 'createdAt',
-        cell: ({ row }) => i18n.date(row.original.createdAt),
-      },
-    ] 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 className="py-4 pr-4">
-              <Skeleton className="h-4 w-20 rounded-full" />
-            </TableCell>
-            <TableCell>
-              <Skeleton className="h-4 w-20 rounded-full" />
-            </TableCell>
-            <TableCell>
-              <Skeleton className="h-4 w-12 rounded-full" />
-            </TableCell>
-            <TableCell>
-              <Skeleton className="h-4 w-16 rounded-full" />
-            </TableCell>
-          </>
-        ),
-      }}
-    >
-      {(table) =>
-        table.getPageCount() > 1 ? (
-          <DataTablePagination additionalInformation="VisibleCount" table={table} />
-        ) : null
-      }
-    </DataTable>
-  );
-};

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

@@ -2,7 +2,6 @@ import { useMemo } 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';
@@ -89,9 +88,7 @@ export const DocumentLogsTable = ({ documentId, userId }: DocumentLogsTableProps
               )}
             </div>
           ) : (
-            <p>
-              <Trans>N/A</Trans>
-            </p>
+            <p>N/A</p>
           ),
       },
       {

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

@@ -24,7 +24,7 @@ export const EnvelopesTableBulkActionBar = ({
   }
 
   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-background px-4 py-3 shadow-lg">
+    <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>
@@ -36,7 +36,13 @@ export const EnvelopesTableBulkActionBar = ({
         <Trans>Move to Folder</Trans>
       </Button>
 
-      <Button type="button" variant="destructive" size="sm" onClick={onDeleteClick}>
+      <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>

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

@@ -107,11 +107,7 @@ export default function OrganisationGroupSettingsPage({
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
             <Link to={`/admin/users/${row.original.user.id}`}>{row.original.user.name}</Link>
-            {row.original.user.id === organisation?.ownerUserId && (
-              <Badge>
-                <Trans>Owner</Trans>
-              </Badge>
-            )}
+            {row.original.user.id === organisation?.ownerUserId && <Badge>Owner</Badge>}
           </div>
         ),
       },
@@ -212,9 +208,7 @@ export default function OrganisationGroupSettingsPage({
                 {SUBSCRIPTION_STATUS_MAP[organisation.subscription.status]} subscription found
               </span>
             ) : (
-              <span>
-                <Trans>No subscription found</Trans>
-              </span>
+              <span>No subscription found</span>
             )}
           </AlertDescription>
         </div>

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

@@ -10,12 +10,6 @@ import type { z } from 'zod';
 import { trpc } from '@documenso/trpc/react';
 import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
 import { ZUpdateUserRequestSchema } from '@documenso/trpc/server/admin-router/update-user.types';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@documenso/ui/primitives/accordion';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Form,
@@ -36,7 +30,6 @@ import { AdminUserEnableDialog } from '~/components/dialogs/admin-user-enable-di
 import { AdminUserResetTwoFactorDialog } from '~/components/dialogs/admin-user-reset-two-factor-dialog';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 import { AdminOrganisationsTable } from '~/components/tables/admin-organisations-table';
-import { AdminUserTeamsTable } from '~/components/tables/admin-user-teams-table';
 
 import { MultiSelectRoleCombobox } from '../../../components/general/multiselect-role-combobox';
 
@@ -204,7 +197,7 @@ const AdminUserPage = ({ user }: { user: TGetUserResponse }) => {
             <h3 className="text-lg font-semibold leading-none tracking-tight">
               <Trans>User Organisations</Trans>
             </h3>
-            <p className="mt-1.5 text-sm text-muted-foreground">
+            <p className="text-muted-foreground mt-1.5 text-sm">
               <Trans>Organisations that the user is a member of.</Trans>
             </p>
           </div>
@@ -226,28 +219,6 @@ const AdminUserPage = ({ user }: { user: TGetUserResponse }) => {
         />
       </div>
 
-      <hr className="my-8" />
-
-      <Accordion type="single" collapsible>
-        <AccordionItem value="team-memberships" className="border-b-0">
-          <AccordionTrigger className="py-0">
-            <div className="text-left">
-              <h3 className="text-lg font-semibold leading-none tracking-tight">
-                <Trans>Team Memberships</Trans>
-              </h3>
-              <p className="mt-1.5 text-sm font-normal text-muted-foreground">
-                <Trans>Teams that this user is a member of and their roles.</Trans>
-              </p>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent>
-            <div className="mt-4">
-              <AdminUserTeamsTable userId={user.id} />
-            </div>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-
       <div className="mt-16 flex flex-col gap-4">
         {user && user.twoFactorEnabled && <AdminUserResetTwoFactorDialog user={user} />}
         {user && user.disabled && <AdminUserEnableDialog userToEnable={user} />}

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

@@ -60,7 +60,6 @@ export default function OrganisationSettingsDocumentPage() {
         defaultRecipients,
         delegateDocumentOwnership,
         aiFeaturesEnabled,
-        envelopeExpirationPeriod,
       } = data;
 
       if (
@@ -91,7 +90,6 @@ export default function OrganisationSettingsDocumentPage() {
           drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
           delegateDocumentOwnership: delegateDocumentOwnership,
           aiFeaturesEnabled,
-          envelopeExpirationPeriod: envelopeExpirationPeriod ?? undefined,
         },
       });
 

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

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

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

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

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

@@ -7,7 +7,6 @@ import { useParams, useSearchParams } from 'react-router';
 import { Link } from 'react-router';
 import { z } from 'zod';
 
-import { useSessionStorage } from '@documenso/lib/client-only/hooks/use-session-storage';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { parseToIntegerArray } from '@documenso/lib/utils/params';
@@ -59,10 +58,7 @@ export default function DocumentsPage() {
   const [isMovingDocument, setIsMovingDocument] = useState(false);
   const [documentToMove, setDocumentToMove] = useState<number | null>(null);
 
-  const [rowSelection, setRowSelection] = useSessionStorage<RowSelectionState>(
-    'documents-bulk-selection',
-    {},
-  );
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [isBulkMoveDialogOpen, setIsBulkMoveDialogOpen] = useState(false);
   const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
 
@@ -125,6 +121,11 @@ export default function DocumentsPage() {
     }
   }, [data?.stats]);
 
+  // Clear selection when navigation or filters change
+  useEffect(() => {
+    setRowSelection({});
+  }, [folderId, findDocumentSearchParams]);
+
   return (
     <EnvelopeDropZoneWrapper type={EnvelopeType.DOCUMENT}>
       <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">

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

@@ -66,9 +66,7 @@ export default function DocumentsFoldersPage() {
             onClick={() => navigateToFolder(null)}
           >
             <HomeIcon className="h-4 w-4" />
-            <span>
-              <Trans>Home</Trans>
-            </span>
+            <span>Home</span>
           </Button>
         </div>
 

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

@@ -53,7 +53,6 @@ export default function TeamsSettingsPage() {
         defaultRecipients,
         delegateDocumentOwnership,
         aiFeaturesEnabled,
-        envelopeExpirationPeriod,
       } = data;
 
       await updateTeamSettings({
@@ -68,7 +67,6 @@ export default function TeamsSettingsPage() {
           includeAuditLog,
           defaultRecipients,
           aiFeaturesEnabled,
-          envelopeExpirationPeriod,
           ...(signatureTypes.length === 0
             ? {
                 typedSignatureEnabled: null,

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.public-profile.tsx

@@ -207,9 +207,7 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
             directTemplates={enabledPrivateDirectTemplates}
             trigger={
               <Button variant="outline">
-                <Trans context="Action button to link template to public profile">
-                  Link template
-                </Trans>
+                <Trans>Link template</Trans>
               </Button>
             }
           />

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

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

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

@@ -1,11 +1,10 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
 import { Bird } from 'lucide-react';
 import { useParams, useSearchParams } from 'react-router';
 
-import { useSessionStorage } from '@documenso/lib/client-only/hooks/use-session-storage';
 import { FolderType } from '@documenso/lib/types/folder-type';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
@@ -35,10 +34,7 @@ export default function TemplatesPage() {
   const page = Number(searchParams.get('page')) || 1;
   const perPage = Number(searchParams.get('perPage')) || 10;
 
-  const [rowSelection, setRowSelection] = useSessionStorage<RowSelectionState>(
-    'templates-bulk-selection',
-    {},
-  );
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [isBulkMoveDialogOpen, setIsBulkMoveDialogOpen] = useState(false);
   const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
 
@@ -55,6 +51,11 @@ export default function TemplatesPage() {
     folderId,
   });
 
+  // Clear selection when navigation or filters change
+  useEffect(() => {
+    setRowSelection({});
+  }, [folderId, page, perPage]);
+
   return (
     <EnvelopeDropZoneWrapper type={EnvelopeType.TEMPLATE}>
       <div className="mx-auto max-w-screen-xl px-4 md:px-8">

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

@@ -66,9 +66,7 @@ export default function TemplatesFoldersPage() {
             onClick={() => navigateToFolder(null)}
           >
             <HomeIcon className="h-4 w-4" />
-            <span>
-              <Trans>Home</Trans>
-            </span>
+            <span>Home</span>
           </Button>
         </div>
 

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

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

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

@@ -25,7 +25,6 @@ import { getTeamSettings } from '@documenso/lib/server-only/team/get-team-settin
 import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
 import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
-import { isRecipientExpired } from '@documenso/lib/utils/recipients';
 import { prisma } from '@documenso/prisma';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 
@@ -141,10 +140,6 @@ const handleV1Loader = async ({ params, request }: Route.LoaderArgs) => {
     throw redirect(`/sign/${token}/rejected`);
   }
 
-  if (isRecipientExpired(recipient)) {
-    throw redirect(`/sign/${token}/expired`);
-  }
-
   if (
     document.status === DocumentStatus.COMPLETED ||
     recipient.signingStatus === SigningStatus.SIGNED
@@ -206,8 +201,7 @@ const handleV2Loader = async ({ params, request }: Route.LoaderArgs) => {
     return envelopeForSigning;
   }
 
-  const { envelope, recipient, isCompleted, isRejected, isExpired, isRecipientsTurn } =
-    envelopeForSigning;
+  const { envelope, recipient, isCompleted, isRejected, isRecipientsTurn } = envelopeForSigning;
 
   if (!isRecipientsTurn) {
     throw redirect(`/sign/${token}/waiting`);
@@ -239,6 +233,12 @@ const handleV2Loader = async ({ params, request }: Route.LoaderArgs) => {
     } as const;
   }
 
+  await viewedDocument({
+    token,
+    requestMetadata,
+    recipientAccessAuth: derivedRecipientAccessAuth,
+  }).catch(() => null);
+
   if (isRejected) {
     throw redirect(`/sign/${token}/rejected`);
   }
@@ -247,16 +247,6 @@ const handleV2Loader = async ({ params, request }: Route.LoaderArgs) => {
     throw redirect(envelope.documentMeta.redirectUrl || `/sign/${token}/complete`);
   }
 
-  if (isExpired) {
-    throw redirect(`/sign/${token}/expired`);
-  }
-
-  await viewedDocument({
-    token,
-    requestMetadata,
-    recipientAccessAuth: derivedRecipientAccessAuth,
-  }).catch(() => null);
-
   return {
     isDocumentAccessValid: true,
     envelopeForSigning,
@@ -504,7 +494,12 @@ const SigningPageV2 = ({ data }: { data: Awaited<ReturnType<typeof handleV2Loade
         recipient={recipient}
         user={user}
       >
-        <EnvelopeRenderProvider envelope={envelope} token={recipient.token}>
+        <EnvelopeRenderProvider
+          version="current"
+          envelope={envelope}
+          envelopeItems={envelope.envelopeItems}
+          token={recipient.token}
+        >
           <DocumentSigningPageViewV2 />
         </EnvelopeRenderProvider>
       </DocumentSigningAuthProvider>

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

@@ -1,114 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import { TimerOffIcon } from 'lucide-react';
-import { Link } from 'react-router';
-
-import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
-import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
-import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
-import { isRecipientAuthorized } from '@documenso/lib/server-only/document/is-recipient-authorized';
-import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
-import { Badge } from '@documenso/ui/primitives/badge';
-import { Button } from '@documenso/ui/primitives/button';
-
-import { DocumentSigningAuthPageView } from '~/components/general/document-signing/document-signing-auth-page';
-import { truncateTitle } from '~/utils/truncate-title';
-
-import type { Route } from './+types/expired';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { user } = await getOptionalSession(request);
-
-  const { token } = params;
-
-  if (!token) {
-    throw new Response('Not Found', { status: 404 });
-  }
-
-  const document = await getDocumentAndSenderByToken({
-    token,
-    requireAccessAuth: false,
-  }).catch(() => null);
-
-  if (!document) {
-    throw new Response('Not Found', { status: 404 });
-  }
-
-  const title = document.title;
-
-  const recipient = await getRecipientByToken({ token }).catch(() => null);
-
-  if (!recipient) {
-    throw new Response('Not Found', { status: 404 });
-  }
-
-  const isDocumentAccessValid = await isRecipientAuthorized({
-    type: 'ACCESS',
-    documentAuthOptions: document.authOptions,
-    recipient,
-    userId: user?.id,
-  });
-
-  const recipientEmail = recipient.email;
-
-  if (isDocumentAccessValid) {
-    return {
-      isDocumentAccessValid: true,
-      recipientEmail,
-      title,
-    };
-  }
-
-  return {
-    isDocumentAccessValid: false,
-    recipientEmail,
-  };
-}
-
-export default function ExpiredSigningPage({ loaderData }: Route.ComponentProps) {
-  const { sessionData } = useOptionalSession();
-  const user = sessionData?.user;
-
-  const { isDocumentAccessValid, recipientEmail, title } = loaderData;
-
-  if (!isDocumentAccessValid) {
-    return <DocumentSigningAuthPageView email={recipientEmail} />;
-  }
-
-  return (
-    <div className="flex flex-col items-center pt-24 lg:pt-36 xl:pt-44">
-      <Badge
-        variant="neutral"
-        size="default"
-        title={title}
-        className="mb-6 rounded-xl border bg-transparent"
-      >
-        {truncateTitle(title ?? '')}
-      </Badge>
-
-      <div className="flex flex-col items-center">
-        <div className="flex items-center gap-x-4">
-          <TimerOffIcon className="h-10 w-10 text-orange-500" />
-
-          <h2 className="max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
-            <Trans>Signing Deadline Expired</Trans>
-          </h2>
-        </div>
-
-        <p className="mt-6 max-w-[60ch] text-center text-sm text-muted-foreground">
-          <Trans>
-            The signing deadline for this document has passed. Please contact the document owner if
-            you need a new copy to sign.
-          </Trans>
-        </p>
-
-        {user && (
-          <Button className="mt-6" asChild>
-            <Link to={`/`}>
-              <Trans>Return Home</Trans>
-            </Link>
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}

apps/remix/app/routes/embed+/_v0+/_layout.tsx

@@ -1,4 +1,3 @@
-import { Trans } from '@lingui/react/macro';
 import { Outlet, isRouteErrorResponse, useRouteError } from 'react-router';
 
 import {
@@ -13,7 +12,6 @@ import { EmbedDocumentCompleted } from '~/components/embed/embed-document-comple
 import { EmbedDocumentRejected } from '~/components/embed/embed-document-rejected';
 import { EmbedDocumentWaitingForTurn } from '~/components/embed/embed-document-waiting-for-turn';
 import { EmbedPaywall } from '~/components/embed/embed-paywall';
-import { EmbedRecipientExpired } from '~/components/embed/embed-recipient-expired';
 
 import type { Route } from './+types/_layout';
 
@@ -80,10 +78,6 @@ export function ErrorBoundary({ loaderData }: Route.ErrorBoundaryProps) {
       return <EmbedDocumentWaitingForTurn />;
     }
 
-    if (error.status === 403 && error.data.type === 'embed-recipient-expired') {
-      return <EmbedRecipientExpired />;
-    }
-
     // !: Not used at the moment, may be removed in the future.
     if (error.status === 403 && error.data.type === 'embed-document-rejected') {
       return <EmbedDocumentRejected />;
@@ -95,9 +89,5 @@ export function ErrorBoundary({ loaderData }: Route.ErrorBoundaryProps) {
     }
   }
 
-  return (
-    <div>
-      <Trans>Not Found</Trans>
-    </div>
-  );
+  return <div>Not Found</div>;
 }

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

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

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

@@ -19,7 +19,6 @@ import { getRecipientsForAssistant } from '@documenso/lib/server-only/recipient/
 import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
-import { isRecipientExpired } from '@documenso/lib/utils/recipients';
 import { prisma } from '@documenso/prisma';
 
 import { EmbedSignDocumentV1ClientPage } from '~/components/embed/embed-document-signing-page-v1';
@@ -79,17 +78,6 @@ async function handleV1Loader({ params, request }: Route.LoaderArgs) {
     );
   }
 
-  if (isRecipientExpired(recipient)) {
-    throw data(
-      {
-        type: 'embed-recipient-expired',
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
   const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
     documentAuth: document.authOptions,
   });
@@ -202,7 +190,7 @@ async function handleV2Loader({ params, request }: Route.LoaderArgs) {
     );
   }
 
-  const { envelope, recipient, isRecipientsTurn, isExpired } = envelopeForSigning;
+  const { envelope, recipient, isRecipientsTurn } = envelopeForSigning;
 
   const organisationClaim = await getOrganisationClaimByTeamId({ teamId: envelope.teamId });
 
@@ -220,17 +208,6 @@ async function handleV2Loader({ params, request }: Route.LoaderArgs) {
     );
   }
 
-  if (isExpired) {
-    throw data(
-      {
-        type: 'embed-recipient-expired',
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
   if (!isRecipientsTurn) {
     throw data(
       {
@@ -405,7 +382,12 @@ const EmbedSignDocumentPageV2 = ({
         recipient={recipient}
         user={user}
       >
-        <EnvelopeRenderProvider envelope={envelope} token={token}>
+        <EnvelopeRenderProvider
+          version="current"
+          envelope={envelope}
+          envelopeItems={envelope.envelopeItems}
+          token={token}
+        >
           <EmbedSignDocumentV2ClientPage
             hidePoweredBy={hidePoweredBy}
             allowWhitelabelling={allowEmbedSigningWhitelabel}

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

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

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

@@ -1,6 +1,5 @@
 import { useLayoutEffect } from 'react';
 
-import { Trans } from '@lingui/react/macro';
 import { Outlet, useLoaderData } from 'react-router';
 
 import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
@@ -76,11 +75,7 @@ export default function AuthoringLayout() {
   }, []);
 
   if (!hasValidToken) {
-    return (
-      <div>
-        <Trans>Invalid embedding presign token provided</Trans>
-      </div>
-    );
+    return <div>Invalid embedding presign token provided</div>;
   }
 
   return (

apps/remix/app/routes/embed+/v1+/multisign+/_index.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
 
-import { Trans } from '@lingui/react/macro';
 import { SigningStatus } from '@prisma/client';
 import { useRevalidator } from 'react-router';
 
@@ -284,9 +283,7 @@ export default function MultisignPage() {
 
         {!hidePoweredBy && (
           <div className="bg-primary text-primary-foreground fixed bottom-0 left-0 z-40 rounded-tr px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100">
-            <span>
-              <Trans>Powered by</Trans>
-            </span>
+            <span>Powered by</span>
             <BrandingLogo className="ml-2 inline-block h-[14px]" />
           </div>
         )}
@@ -301,9 +298,7 @@ export default function MultisignPage() {
 
       {!hidePoweredBy && (
         <div className="bg-primary text-primary-foreground fixed bottom-0 left-0 z-40 rounded-tr px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100">
-          <span>
-            <Trans>Powered by</Trans>
-          </span>
+          <span>Powered by</span>
           <BrandingLogo className="ml-2 inline-block h-[14px]" />
         </div>
       )}

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

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

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

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

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

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

apps/remix/package.json

@@ -46,6 +46,7 @@
     "content-disposition": "^1.0.1",
     "framer-motion": "^12.23.24",
     "hono": "4.11.4",
+    "hono-rate-limiter": "^0.4.2",
     "hono-react-router-adapter": "^0.6.5",
     "input-otp": "^1.4.2",
     "isbot": "^5.1.32",
@@ -105,5 +106,5 @@
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   },
-  "version": "2.6.1"
+  "version": "2.6.0"
 }

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

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

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

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

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

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

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

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

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

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

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

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

apps/remix/server/router.ts

@@ -1,25 +1,18 @@
 import { Hono } from 'hono';
+import { rateLimiter } from 'hono-rate-limiter';
 import { contextStorage } from 'hono/context-storage';
 import { cors } from 'hono/cors';
-import type { RequestIdVariables } from 'hono/request-id';
 import { requestId } from 'hono/request-id';
+import type { RequestIdVariables } from 'hono/request-id';
 import type { Logger } from 'pino';
 
 import { tsRestHonoApp } from '@documenso/api/hono';
 import { auth } from '@documenso/auth/server';
+import { API_V2_BETA_URL, API_V2_URL } from '@documenso/lib/constants/app';
 import { jobsClient } from '@documenso/lib/jobs/client';
 import { LicenseClient } from '@documenso/lib/server-only/license/license-client';
-import { createRateLimitMiddleware } from '@documenso/lib/server-only/rate-limit/rate-limit-middleware';
-import {
-  aiRateLimit,
-  apiTrpcRateLimit,
-  apiV1RateLimit,
-  apiV2RateLimit,
-  fileUploadRateLimit,
-} from '@documenso/lib/server-only/rate-limit/rate-limits';
 import { TelemetryClient } from '@documenso/lib/server-only/telemetry/telemetry-client';
-import { migrateDeletedAccountServiceAccount } from '@documenso/lib/server-only/user/service-accounts/deleted-account';
-import { migrateLegacyServiceAccount } from '@documenso/lib/server-only/user/service-accounts/legacy-service-account';
+import { getIpAddress } from '@documenso/lib/universal/get-ip-address';
 import { env } from '@documenso/lib/utils/env';
 import { logger } from '@documenso/lib/utils/logger';
 import { openApiDocument } from '@documenso/trpc/server/open-api';
@@ -42,13 +35,38 @@ export interface HonoEnv {
 const app = new Hono<HonoEnv>();
 
 /**
- * Database-backed rate limiting for API routes.
+ * Rate limiting for v1 and v2 API routes only.
+ * - 100 requests per minute per IP address
  */
-const apiV1RateLimitMiddleware = createRateLimitMiddleware(apiV1RateLimit);
-const apiV2RateLimitMiddleware = createRateLimitMiddleware(apiV2RateLimit);
-const aiRateLimitMiddleware = createRateLimitMiddleware(aiRateLimit);
-const trpcRateLimitMiddleware = createRateLimitMiddleware(apiTrpcRateLimit);
-const fileRateLimitMiddleware = createRateLimitMiddleware(fileUploadRateLimit);
+const rateLimitMiddleware = rateLimiter({
+  windowMs: 60 * 1000, // 1 minute
+  limit: 100, // 100 requests per window
+  keyGenerator: (c) => {
+    try {
+      return getIpAddress(c.req.raw);
+    } catch (error) {
+      return 'unknown';
+    }
+  },
+  message: {
+    error: 'Too many requests, please try again later.',
+  },
+});
+
+const aiRateLimitMiddleware = rateLimiter({
+  windowMs: 60 * 1000, // 1 minute
+  limit: 3, // 3 requests per window
+  keyGenerator: (c) => {
+    try {
+      return getIpAddress(c.req.raw);
+    } catch (error) {
+      return 'unknown';
+    }
+  },
+  message: {
+    error: 'Too many requests, please try again later.',
+  },
+});
 
 /**
  * Attach session and context to requests.
@@ -66,7 +84,6 @@ app.use(async (c, next) => {
 
   const honoLogger = logger.child({
     requestId: c.var.requestId,
-    requestPath: c.req.path,
     ipAddress: metadata.ipAddress,
     userAgent: metadata.userAgent,
   });
@@ -76,20 +93,14 @@ app.use(async (c, next) => {
   await next();
 });
 
-// Apply cors and rate limits to API routes.
-app.use(`/api/v1/*`, cors());
-app.use('/api/v1/*', apiV1RateLimitMiddleware);
-app.use(`/api/v2/*`, cors());
-app.use('/api/v2/*', apiV2RateLimitMiddleware);
-app.use(`/api/v2-beta/*`, cors());
-app.use('/api/v2-beta/*', apiV2RateLimitMiddleware);
+// Apply rate limit to /api/v1/*
+app.use('/api/v1/*', rateLimitMiddleware);
+app.use('/api/v2/*', rateLimitMiddleware);
 
 // Auth server.
 app.route('/api/auth', auth);
 
 // Files route.
-app.use('/api/files/upload-pdf', fileRateLimitMiddleware);
-app.use('/api/files/presigned-post-url', fileRateLimitMiddleware);
 app.route('/api/files', filesRoute);
 
 // AI route.
@@ -97,26 +108,28 @@ app.use('/api/ai/*', aiRateLimitMiddleware);
 app.route('/api/ai', aiRoute);
 
 // API servers.
+app.use(`/api/v1/*`, cors());
 app.route('/api/v1', tsRestHonoApp);
 app.use('/api/jobs/*', jobsClient.getApiHandler());
-app.use('/api/trpc/*', trpcRateLimitMiddleware);
 app.use('/api/trpc/*', reactRouterTrpcServer);
 
 // Unstable API server routes. Order matters for these two.
-app.get(`/api/v2/openapi.json`, (c) => c.json(openApiDocument));
+app.get(`${API_V2_URL}/openapi.json`, (c) => c.json(openApiDocument));
+app.use(`${API_V2_URL}/*`, cors());
 // Shadows the download routes that tRPC defines since tRPC-to-openapi doesn't support their return types.
-app.route(`/api/v2`, downloadRoute);
-app.use(`/api/v2/*`, async (c) =>
+app.route(`${API_V2_URL}`, downloadRoute);
+app.use(`${API_V2_URL}/*`, async (c) =>
   openApiTrpcServerHandler(c, {
     isBeta: false,
   }),
 );
 
 // Unstable API server routes. Order matters for these two.
-app.get(`/api/v2-beta/openapi.json`, (c) => c.json(openApiDocument));
+app.get(`${API_V2_BETA_URL}/openapi.json`, (c) => c.json(openApiDocument));
+app.use(`${API_V2_BETA_URL}/*`, cors());
 // Shadows the download routes that tRPC defines since tRPC-to-openapi doesn't support their return types.
-app.route(`/api/v2-beta`, downloadRoute);
-app.use(`/api/v2-beta/*`, async (c) =>
+app.route(`${API_V2_BETA_URL}`, downloadRoute);
+app.use(`${API_V2_BETA_URL}/*`, async (c) =>
   openApiTrpcServerHandler(c, {
     isBeta: true,
   }),
@@ -131,11 +144,4 @@ if (env('NODE_ENV') !== 'development') {
 // Start license client to verify license on startup.
 void LicenseClient.start();
 
-// Start cron scheduler for background jobs (e.g. envelope expiration sweep).
-// No-op for Inngest provider which handles cron externally.
-jobsClient.startCron();
-
-void migrateDeletedAccountServiceAccount();
-void migrateLegacyServiceAccount();
-
 export default app;

assets/a4-size.pdf

@@ -1,51 +0,0 @@
-%PDF-1.7
-%âãÏÓ
-1 0 obj
-<<
-/Type /Pages
-/Kids [4 0 R]
-/Count 1
->>
-endobj
-2 0 obj
-<<
-/Type /Catalog
-/Pages 1 0 R
->>
-endobj
-3 0 obj
-<<
-/Title (Untitled)
-/Author (Unknown)
-/Creator (@libpdf/core)
-/Producer (@libpdf/core)
-/CreationDate (D:20260211083727Z)
-/ModDate (D:20260211083727Z)
->>
-endobj
-4 0 obj
-<<
-/Type /Page
-/MediaBox [0 0 595 842]
-/Resources <<
->>
-/Parent 1 0 R
->>
-endobj
-xref
-0 5
-0000000000 65535 f
-0000000015 00000 n
-0000000072 00000 n
-0000000121 00000 n
-0000000290 00000 n
-trailer
-<<
-/Size 5
-/Root 2 0 R
-/Info 3 0 R
-/ID [<B051F100F1EED01A592FC6119F589603> <B051F100F1EED01A592FC6119F589603>]
->>
-startxref
-378
-%%EOF

assets/letter-size.pdf

@@ -1,51 +0,0 @@
-%PDF-1.7
-%âãÏÓ
-1 0 obj
-<<
-/Type /Pages
-/Kids [4 0 R]
-/Count 1
->>
-endobj
-2 0 obj
-<<
-/Type /Catalog
-/Pages 1 0 R
->>
-endobj
-3 0 obj
-<<
-/Title (Untitled)
-/Author (Unknown)
-/Creator (@libpdf/core)
-/Producer (@libpdf/core)
-/CreationDate (D:20260211081729Z)
-/ModDate (D:20260211081729Z)
->>
-endobj
-4 0 obj
-<<
-/Type /Page
-/MediaBox [0 0 612 792]
-/Resources <<
->>
-/Parent 1 0 R
->>
-endobj
-xref
-0 5
-0000000000 65535 f
-0000000015 00000 n
-0000000072 00000 n
-0000000121 00000 n
-0000000290 00000 n
-trailer
-<<
-/Size 5
-/Root 2 0 R
-/Info 3 0 R
-/ID [<94A5FB5DCF5A94AD8C472C493420962C> <94A5FB5DCF5A94AD8C472C493420962C>]
->>
-startxref
-378
-%%EOF

assets/tabloid-landscape.pdf

@@ -1,51 +0,0 @@
-%PDF-1.7
-%âãÏÓ
-1 0 obj
-<<
-/Type /Pages
-/Kids [4 0 R]
-/Count 1
->>
-endobj
-2 0 obj
-<<
-/Type /Catalog
-/Pages 1 0 R
->>
-endobj
-3 0 obj
-<<
-/Title (Untitled)
-/Author (Unknown)
-/Creator (@libpdf/core)
-/Producer (@libpdf/core)
-/CreationDate (D:20260211084535Z)
-/ModDate (D:20260211084535Z)
->>
-endobj
-4 0 obj
-<<
-/Type /Page
-/MediaBox [0 0 1224 792]
-/Resources <<
->>
-/Parent 1 0 R
->>
-endobj
-xref
-0 5
-0000000000 65535 f
-0000000015 00000 n
-0000000072 00000 n
-0000000121 00000 n
-0000000290 00000 n
-trailer
-<<
-/Size 5
-/Root 2 0 R
-/Info 3 0 R
-/ID [<694452F2208AC8E3DD2D2488544F9F0C> <694452F2208AC8E3DD2D2488544F9F0C>]
->>
-startxref
-379
-%%EOF

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@documenso/root",
-  "version": "2.6.1",
+  "version": "2.6.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@documenso/root",
-      "version": "2.6.1",
+      "version": "2.6.0",
       "hasInstallScript": true,
       "workspaces": [
         "apps/*",
@@ -19,7 +19,6 @@
         "@lingui/conf": "^5.6.0",
         "@lingui/core": "^5.6.0",
         "ai": "^5.0.104",
-        "cron-parser": "^5.5.0",
         "luxon": "^3.7.2",
         "patch-package": "^8.0.1",
         "posthog-node": "4.18.0",
@@ -109,7 +108,7 @@
     },
     "apps/remix": {
       "name": "@documenso/remix",
-      "version": "2.6.1",
+      "version": "2.6.0",
       "dependencies": {
         "@cantoo/pdf-lib": "^2.5.3",
         "@documenso/api": "*",
@@ -143,6 +142,7 @@
         "content-disposition": "^1.0.1",
         "framer-motion": "^12.23.24",
         "hono": "4.11.4",
+        "hono-rate-limiter": "^0.4.2",
         "hono-react-router-adapter": "^0.6.5",
         "input-otp": "^1.4.2",
         "isbot": "^5.1.32",
@@ -20192,18 +20192,6 @@
         "typescript": ">=5"
       }
     },
-    "node_modules/cron-parser": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-5.5.0.tgz",
-      "integrity": "sha512-oML4lKUXxizYswqmxuOCpgFS8BNUJpIu6k/2HVHyaL8Ynnf3wdf9tkns0yRdJLSIjkJ+b0DXHMZEHGpMwjnPww==",
-      "license": "MIT",
-      "dependencies": {
-        "luxon": "^3.7.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/cross-env": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
@@ -25093,6 +25081,15 @@
         "node": ">=16.9.0"
       }
     },
+    "node_modules/hono-rate-limiter": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/hono-rate-limiter/-/hono-rate-limiter-0.4.2.tgz",
+      "integrity": "sha512-AAtFqgADyrmbDijcRTT/HJfwqfvhalya2Zo+MgfdrMPas3zSMD8SU03cv+ZsYwRU1swv7zgVt0shwN059yzhjw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "hono": "^4.1.1"
+      }
+    },
     "node_modules/hono-react-router-adapter": {
       "version": "0.6.5",
       "resolved": "https://registry.npmjs.org/hono-react-router-adapter/-/hono-react-router-adapter-0.6.5.tgz",
@@ -27368,24 +27365,6 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
-    "node_modules/make-cancellable-promise": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-2.0.0.tgz",
-      "integrity": "sha512-3SEQqTpV9oqVsIWqAcmDuaNeo7yBO3tqPtqGRcKkEo0lrzD3wqbKG9mkxO65KoOgXqj+zH2phJ2LiAsdzlogSw==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/wojtekmaj/make-cancellable-promise?sponsor=1"
-      }
-    },
-    "node_modules/make-event-props": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-2.0.0.tgz",
-      "integrity": "sha512-G/hncXrl4Qt7mauJEXSg3AcdYzmpkIITTNl5I+rH9sog5Yw0kK6vseJjCaPfOXqOqQuPUP89Rkhfz5kPS8ijtw==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/wojtekmaj/make-event-props?sponsor=1"
-      }
-    },
     "node_modules/map-stream": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
@@ -27832,23 +27811,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/merge-refs": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-2.0.0.tgz",
-      "integrity": "sha512-3+B21mYK2IqUWnd2EivABLT7ueDhb0b8/dGK8LoFQPrU61YITeCMn14F7y7qZafWNZhUEKb24cJdiT5Wxs3prg==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/wojtekmaj/merge-refs?sponsor=1"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -31878,44 +31840,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/react-pdf": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-10.3.0.tgz",
-      "integrity": "sha512-2LQzC9IgNVAX8gM+6F+1t/70a9/5RWThYxc+CWAmT2LW/BRmnj+35x1os5j/nR2oldyf8L+hCAMBmVKU8wrYFA==",
-      "license": "MIT",
-      "dependencies": {
-        "clsx": "^2.0.0",
-        "dequal": "^2.0.3",
-        "make-cancellable-promise": "^2.0.0",
-        "make-event-props": "^2.0.0",
-        "merge-refs": "^2.0.0",
-        "pdfjs-dist": "5.4.296",
-        "tiny-invariant": "^1.0.0",
-        "warning": "^4.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/wojtekmaj/react-pdf?sponsor=1"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-pdf/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/react-promise-suspense": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/react-promise-suspense/-/react-promise-suspense-0.3.4.tgz",
@@ -36485,15 +36409,6 @@
         "node": ">=20.0.0"
       }
     },
-    "node_modules/warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -37437,7 +37352,6 @@
         "posthog-js": "^1.297.2",
         "posthog-node": "4.18.0",
         "react": "^18",
-        "react-pdf": "^10.3.0",
         "remeda": "^2.32.0",
         "sharp": "0.34.5",
         "skia-canvas": "^3.0.8",
@@ -37595,7 +37509,6 @@
         "react-day-picker": "^8.10.1",
         "react-dom": "^18",
         "react-hook-form": "^7.66.1",
-        "react-pdf": "^10.3.0",
         "react-rnd": "^10.5.2",
         "remeda": "^2.32.0",
         "tailwind-merge": "^1.14.0",

package.json

@@ -5,7 +5,7 @@
     "apps/*",
     "packages/*"
   ],
-  "version": "2.6.1",
+  "version": "2.6.0",
   "scripts": {
     "postinstall": "patch-package",
     "build": "turbo run build",
@@ -90,7 +90,6 @@
     "@lingui/conf": "^5.6.0",
     "@lingui/core": "^5.6.0",
     "ai": "^5.0.104",
-    "cron-parser": "^5.5.0",
     "luxon": "^3.7.2",
     "patch-package": "^8.0.1",
     "posthog-node": "4.18.0",

packages/api/v1/schema.ts

@@ -437,8 +437,8 @@ export const ZSuccessfulRecipientResponseSchema = z.object({
   role: z.nativeEnum(RecipientRole),
   signingOrder: z.number().nullish(),
   token: z.string(),
-  expiresAt: z.date().nullish(),
-  expirationNotifiedAt: z.date().nullish(),
+  // !: Not used for now
+  // expired: z.string(),
   signedAt: z.date().nullable(),
   readStatus: z.nativeEnum(ReadStatus),
   signingStatus: z.nativeEnum(SigningStatus),
@@ -576,8 +576,7 @@ export const ZRecipientSchema = z.object({
   token: z.string(),
   signingOrder: z.number().nullish(),
   documentDeletedAt: z.date().nullish(),
-  expiresAt: z.date().nullish(),
-  expirationNotifiedAt: z.date().nullish(),
+  expired: z.date().nullish(),
   signedAt: z.date().nullish(),
   authOptions: z.unknown(),
   role: z.nativeEnum(RecipientRole),

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

@@ -171,7 +171,6 @@ test.describe('API V2 Envelopes', () => {
                 positionY: 0,
                 width: 0,
                 height: 0,
-                fieldMeta: { type: 'signature' },
               },
               {
                 type: FieldType.SIGNATURE,
@@ -181,7 +180,6 @@ test.describe('API V2 Envelopes', () => {
                 positionY: 0,
                 width: 0,
                 height: 0,
-                fieldMeta: { type: 'signature' },
               },
             ],
           },
@@ -207,7 +205,6 @@ test.describe('API V2 Envelopes', () => {
             documentPending: false,
             documentCompleted: false,
             documentDeleted: false,
-            ownerRecipientExpired: true,
             ownerDocumentCompleted: true,
           },
         },

packages/app-tests/e2e/document-flow/autosave-fields-step.spec.ts

@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { prisma } from '@documenso/prisma';
 import { seedBlankDocument } from '@documenso/prisma/seed/documents';
 import { seedUser } from '@documenso/prisma/seed/users';
@@ -46,7 +47,7 @@ test.describe('AutoSave Fields Step', () => {
     await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
 
     await page.getByRole('button', { name: 'Signature' }).click();
-    await page.locator('canvas').click({
+    await page.locator(PDF_VIEWER_PAGE_SELECTOR).click({
       position: {
         x: 100,
         y: 100,
@@ -54,7 +55,7 @@ test.describe('AutoSave Fields Step', () => {
     });
 
     await page.getByRole('button', { name: 'Text' }).click();
-    await page.locator('canvas').click({
+    await page.locator(PDF_VIEWER_PAGE_SELECTOR).click({
       position: {
         x: 100,
         y: 200,
@@ -74,7 +75,7 @@ test.describe('AutoSave Fields Step', () => {
     await page.getByRole('option', { name: 'Recipient 2 (recipient2@documenso.com)' }).click();
 
     await page.getByRole('button', { name: 'Signature' }).click();
-    await page.locator('canvas').click({
+    await page.locator(PDF_VIEWER_PAGE_SELECTOR).click({
       position: {
         x: 100,
         y: 500,
@@ -100,7 +101,7 @@ test.describe('AutoSave Fields Step', () => {
     await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
 
     await page.getByRole('button', { name: 'Signature' }).click();
-    await page.locator('canvas').click({
+    await page.locator(PDF_VIEWER_PAGE_SELECTOR).click({
       position: {
         x: 100,
         y: 100,
@@ -108,7 +109,7 @@ test.describe('AutoSave Fields Step', () => {
     });
 
     await page.getByRole('button', { name: 'Text' }).click();
-    await page.locator('canvas').click({
+    await page.locator(PDF_VIEWER_PAGE_SELECTOR).click({
       position: {
         x: 100,
         y: 200,
@@ -128,7 +129,7 @@ test.describe('AutoSave Fields Step', () => {
     await page.getByRole('option', { name: 'Recipient 2 (recipient2@documenso.com)' }).click();
 
     await page.getByRole('button', { name: 'Signature' }).click();
-    await page.locator('canvas').click({
+    await page.locator(PDF_VIEWER_PAGE_SELECTOR).click({
       position: {
         x: 100,
         y: 500,
@@ -162,7 +163,7 @@ test.describe('AutoSave Fields Step', () => {
     await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
 
     await page.getByRole('button', { name: 'Signature' }).click();
-    await page.locator('canvas').click({
+    await page.locator(PDF_VIEWER_PAGE_SELECTOR).click({
       position: {
         x: 100,
         y: 100,
@@ -170,7 +171,7 @@ test.describe('AutoSave Fields Step', () => {
     });
 
     await page.getByRole('button', { name: 'Text' }).click();
-    await page.locator('canvas').click({
+    await page.locator(PDF_VIEWER_PAGE_SELECTOR).click({
       position: {
         x: 100,
         y: 200,
@@ -190,7 +191,7 @@ test.describe('AutoSave Fields Step', () => {
     await page.getByRole('option', { name: 'Recipient 2 (recipient2@documenso.com)' }).click();
 
     await page.getByRole('button', { name: 'Signature' }).click();
-    await page.locator('canvas').click({
+    await page.locator(PDF_VIEWER_PAGE_SELECTOR).click({
       position: {
         x: 100,
         y: 500,
@@ -224,7 +225,7 @@ test.describe('AutoSave Fields Step', () => {
     await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
 
     await page.getByRole('button', { name: 'Signature' }).click();
-    await page.locator('canvas').click({
+    await page.locator(PDF_VIEWER_PAGE_SELECTOR).click({
       position: {
         x: 100,
         y: 100,
@@ -232,7 +233,7 @@ test.describe('AutoSave Fields Step', () => {
     });
 
     await page.getByRole('button', { name: 'Text' }).click();
-    await page.locator('canvas').click({
+    await page.locator(PDF_VIEWER_PAGE_SELECTOR).click({
       position: {
         x: 100,
         y: 200,

packages/app-tests/e2e/document-flow/autosave-subject-step.spec.ts

@@ -2,6 +2,7 @@ import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 import { EnvelopeType } from '@prisma/client';
 
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { getEnvelopeById } from '@documenso/lib/server-only/envelope/get-envelope-by-id';
 import { seedBlankDocument } from '@documenso/prisma/seed/documents';
 import { seedUser } from '@documenso/prisma/seed/users';
@@ -28,7 +29,7 @@ export const setupDocumentAndNavigateToSubjectStep = async (page: Page) => {
   await page.getByRole('button', { name: 'Continue' }).click();
 
   await page.getByRole('button', { name: 'Signature' }).click();
-  await page.locator('canvas').click({
+  await page.locator(PDF_VIEWER_PAGE_SELECTOR).click({
     position: {
       x: 100,
       y: 100,
@@ -106,10 +107,10 @@ test.describe('AutoSave Subject Step', () => {
     const { user, document, team } = await setupDocumentAndNavigateToSubjectStep(page);
 
     // Toggle some email settings checkboxes (randomly - some checked, some unchecked)
-    await page.getByText('Email the owner when a recipient signs').click();
-    await page.getByText("Email recipients when they're removed from a pending document").click();
-    await page.getByText('Email recipients when the document is completed', { exact: true }).click();
-    await page.getByText('Email recipients when a pending document is deleted').click();
+    await page.getByText('Send recipient signed email').click();
+    await page.getByText('Send recipient removed email').click();
+    await page.getByText('Send document completed email', { exact: true }).click();
+    await page.getByText('Send document deleted email').click();
 
     await triggerAutosave(page);
 
@@ -126,30 +127,26 @@ test.describe('AutoSave Subject Step', () => {
 
       const emailSettings = retrievedDocumentData.documentMeta?.emailSettings;
 
-      await expect(page.getByText('Email the owner when a recipient signs')).toBeChecked({
+      await expect(page.getByText('Send recipient signed email')).toBeChecked({
         checked: emailSettings?.recipientSigned,
       });
-      await expect(
-        page.getByText("Email recipients when they're removed from a pending document"),
-      ).toBeChecked({
+      await expect(page.getByText('Send recipient removed email')).toBeChecked({
         checked: emailSettings?.recipientRemoved,
       });
-      await expect(
-        page.getByText('Email recipients when the document is completed', { exact: true }),
-      ).toBeChecked({
+      await expect(page.getByText('Send document completed email', { exact: true })).toBeChecked({
         checked: emailSettings?.documentCompleted,
       });
-      await expect(page.getByText('Email recipients when a pending document is deleted')).toBeChecked({
+      await expect(page.getByText('Send document deleted email')).toBeChecked({
         checked: emailSettings?.documentDeleted,
       });
 
-      await expect(page.getByText('Email recipients with a signing request')).toBeChecked({
+      await expect(page.getByText('Send recipient signing request email')).toBeChecked({
         checked: emailSettings?.recipientSigningRequest,
       });
-      await expect(page.getByText('Email the signer if the document is still pending')).toBeChecked({
+      await expect(page.getByText('Send document pending email')).toBeChecked({
         checked: emailSettings?.documentPending,
       });
-      await expect(page.getByText('Email the owner when the document is completed')).toBeChecked({
+      await expect(page.getByText('Send document completed email to the owner')).toBeChecked({
         checked: emailSettings?.ownerDocumentCompleted,
       });
     }).toPass();
@@ -165,10 +162,10 @@ test.describe('AutoSave Subject Step', () => {
     await page.getByRole('textbox', { name: 'Subject (Optional)' }).fill(subject);
     await page.getByRole('textbox', { name: 'Message (Optional)' }).fill(message);
 
-    await page.getByText('Email the owner when a recipient signs').click();
-    await page.getByText("Email recipients when they're removed from a pending document").click();
-    await page.getByText('Email recipients when the document is completed', { exact: true }).click();
-    await page.getByText('Email recipients when a pending document is deleted').click();
+    await page.getByText('Send recipient signed email').click();
+    await page.getByText('Send recipient removed email').click();
+    await page.getByText('Send document completed email', { exact: true }).click();
+    await page.getByText('Send document deleted email').click();
 
     await triggerAutosave(page);
 
@@ -194,30 +191,26 @@ test.describe('AutoSave Subject Step', () => {
         retrievedDocumentData.documentMeta?.message ?? '',
       );
 
-      await expect(page.getByText('Email the owner when a recipient signs')).toBeChecked({
+      await expect(page.getByText('Send recipient signed email')).toBeChecked({
         checked: retrievedDocumentData.documentMeta?.emailSettings?.recipientSigned,
       });
-      await expect(
-        page.getByText("Email recipients when they're removed from a pending document"),
-      ).toBeChecked({
+      await expect(page.getByText('Send recipient removed email')).toBeChecked({
         checked: retrievedDocumentData.documentMeta?.emailSettings?.recipientRemoved,
       });
-      await expect(
-        page.getByText('Email recipients when the document is completed', { exact: true }),
-      ).toBeChecked({
+      await expect(page.getByText('Send document completed email', { exact: true })).toBeChecked({
         checked: retrievedDocumentData.documentMeta?.emailSettings?.documentCompleted,
       });
-      await expect(page.getByText('Email recipients when a pending document is deleted')).toBeChecked({
+      await expect(page.getByText('Send document deleted email')).toBeChecked({
         checked: retrievedDocumentData.documentMeta?.emailSettings?.documentDeleted,
       });
 
-      await expect(page.getByText('Email recipients with a signing request')).toBeChecked({
+      await expect(page.getByText('Send recipient signing request email')).toBeChecked({
         checked: retrievedDocumentData.documentMeta?.emailSettings?.recipientSigningRequest,
       });
-      await expect(page.getByText('Email the signer if the document is still pending')).toBeChecked({
+      await expect(page.getByText('Send document pending email')).toBeChecked({
         checked: retrievedDocumentData.documentMeta?.emailSettings?.documentPending,
       });
-      await expect(page.getByText('Email the owner when the document is completed')).toBeChecked({
+      await expect(page.getByText('Send document completed email to the owner')).toBeChecked({
         checked: retrievedDocumentData.documentMeta?.emailSettings?.ownerDocumentCompleted,
       });
     }).toPass();