fix: wip

Co-authored-by: Catalin Pit <catalinpit@gmail.com>

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

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

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

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

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

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

.agents/plans/warm-purple-flower-custom-email-domain-sync-and-recovery.md

@@ -0,0 +1,263 @@
+---
+date: 2026-02-24
+title: Custom Email Domain Sync And Recovery
+---
+
+## Problem Statement
+
+Custom email domains configured via AWS SES can get stuck in a `PENDING` state or fail validation silently. Currently, there is **no automated verification** -- users must manually click "Sync" in the UI to check domain status. If a domain fails to validate, the only option is to delete it and recreate it, which generates new DKIM keys and requires the user to update their DNS records.
+
+### Current Pain Points
+
+1. **No background sync** -- Domain verification status is never checked automatically; users must manually click "Sync"
+2. **Stuck domains** -- Domains can remain in `PENDING` state indefinitely with no alerting or auto-recovery
+3. **Failed recovery requires DNS changes** -- Deleting and recreating a domain generates new keys, forcing the user to update DNS records
+4. **No visibility into failure duration** -- There's no tracking of how long a domain has been pending
+
+## Proposed Solution
+
+### 1. Hourly Background Sync Job
+
+Create a new cron job (`internal.sync-email-domains`) that runs every hour to automatically verify all `PENDING` email domains.
+
+**Job Definition:** `packages/lib/jobs/definitions/internal/sync-email-domains.ts`
+**Job Handler:** `packages/lib/jobs/definitions/internal/sync-email-domains.handler.ts`
+
+**Pattern:** Follow the existing `cleanup-rate-limits` cron job pattern:
+
+- `cron: '0 * * * *'` (every hour, on the hour)
+- Empty `z.object({})` schema (no payload needed)
+- Register in `packages/lib/jobs/client.ts`
+
+**Handler Logic:**
+
+1. Query all `EmailDomain` records with `status: 'PENDING'`
+2. For each domain, call `verifyEmailDomain(emailDomainId)` which:
+   - Calls AWS SES `GetEmailIdentityCommand` to check current verification status
+   - Updates DB status to `ACTIVE` if verified, keeps `PENDING` otherwise
+3. Log results via `io.logger` (how many checked, how many transitioned to ACTIVE)
+4. Process domains in batches to avoid overwhelming SES API rate limits
+5. Add error handling per-domain so one failure doesn't stop the entire sweep
+
+### 2. Schema Changes -- Track Pending Duration
+
+Add a `lastVerifiedAt` column to the `EmailDomain` model to track when verification was last attempted, enabling "stale domain" detection.
+
+**File:** `packages/prisma/schema.prisma`
+
+```prisma
+model EmailDomain {
+  // ... existing fields ...
+  lastVerifiedAt DateTime?  // Last time verification was checked against SES
+}
+```
+
+**Migration:** Create a new Prisma migration for this column addition.
+
+**Updates needed:**
+
+- `verify-email-domain.ts` -- Update `lastVerifiedAt` when verification is checked
+- The sync job handler -- Use `lastVerifiedAt` to avoid re-checking domains that were just verified
+
+### 3. Domain Re-registration (Recovery) -- Delete & Recreate in SES Without Changing Keys
+
+Add a new "Re-register" action that deletes the SES identity and recreates it using the **same** DKIM key pair stored in the database, so the user's DNS records remain valid.
+
+#### 3a. New Service Function
+
+**File:** `packages/ee/server-only/lib/reregister-email-domain.ts`
+
+```typescript
+export const reregisterEmailDomain = async (options: { emailDomainId: string }) => {
+  // 1. Fetch the EmailDomain record (including encrypted privateKey)
+  // 2. Decrypt the private key using DOCUMENSO_ENCRYPTION_KEY
+  // 3. Call DeleteEmailIdentityCommand on SES (ignore NotFoundException)
+  // 4. Call CreateEmailIdentityCommand with BYODKIM using the SAME selector + private key
+  // 5. Update EmailDomain status back to PENDING, update lastVerifiedAt
+  // 6. Return the updated domain
+};
+```
+
+Key points:
+
+- Uses the existing encrypted `privateKey` from the DB -- no new key generation
+- Uses the existing `selector` -- DNS records stay the same
+- Deletes first, then recreates -- handles cases where SES state is corrupted
+- Resets status to `PENDING` since verification will need to re-occur
+- Uses `verifyDomainWithDKIM()` from `create-email-domain.ts` (may need to extract/export this helper)
+
+#### 3b. Admin TRPC Routes (Find, Get, Re-register)
+
+All email domain admin routes use `adminProcedure` -- requires system-level `Role.ADMIN`.
+
+**Find (list) route:**
+**File:** `packages/trpc/server/admin-router/find-email-domains.ts`
+**Types:** `packages/trpc/server/admin-router/find-email-domains.types.ts`
+
+- Query route: `admin.emailDomain.find`
+- Input: `{ query?: string, page?: number, perPage?: number, status?: EmailDomainStatus }`
+- Extends `ZFindSearchParamsSchema` with optional `status` filter
+- Returns standard `ZFindResultResponse` with email domain data including: id, domain, status, selector, createdAt, lastVerifiedAt, organisation name, email count
+- Prisma query filters by domain name (LIKE search on `query`), optional status, joins organisation for name, counts emails
+
+**Get (detail) route:**
+**File:** `packages/trpc/server/admin-router/get-email-domain.ts`
+**Types:** `packages/trpc/server/admin-router/get-email-domain.types.ts`
+
+- Query route: `admin.emailDomain.get`
+- Input: `{ emailDomainId: string }`
+- Returns full email domain detail: all fields (except privateKey), organisation info, list of associated emails, DNS records (generated from publicKey + selector)
+- Omits `privateKey` from response
+
+**Re-register (mutation) route:**
+**File:** `packages/trpc/server/admin-router/reregister-email-domain.ts`
+**Types:** `packages/trpc/server/admin-router/reregister-email-domain.types.ts`
+
+- Mutation route: `admin.emailDomain.reregister`
+- Input: `{ emailDomainId: string }`
+- Calls `reregisterEmailDomain()`
+- Rationale: Re-registration is a recovery/operational action that deletes and recreates an SES identity. This is a privileged operation that should only be performed by platform operators, not self-service by org admins.
+
+#### 3c. Register in Admin Router
+
+**File:** `packages/trpc/server/admin-router/router.ts`
+
+Add a new `emailDomain` namespace to the admin router:
+
+```typescript
+emailDomain: {
+  find: findEmailDomainsRoute,
+  get: getEmailDomainRoute,
+  reregister: reregisterEmailDomainRoute,
+},
+```
+
+#### 3d. Admin Panel UI -- Email Domains Section
+
+**List page:** `apps/remix/app/routes/_authenticated+/admin+/email-domains._index.tsx`
+
+- New admin panel page at `/admin/email-domains`
+- Follow the existing admin documents list pattern (client-side TRPC data fetching)
+- Search input (debounced) filtering by domain name
+- Status filter dropdown (All / Pending / Active)
+- DataTable with columns: Domain, Organisation, Status (badge), Email Count, Created, Last Verified, Actions
+- Actions dropdown per row: View details, Re-register
+- Pagination via `DataTablePagination`
+
+**Detail page:** `apps/remix/app/routes/_authenticated+/admin+/email-domains.$id.tsx`
+
+- Shows full domain details: domain, selector, status, organisation, created date, last verified date
+- Shows DNS records (DKIM + SPF) with copy buttons (reuse `organisation-email-domain-records-dialog` pattern)
+- Table of associated organisation emails
+- "Re-register" button with confirmation dialog explaining the action (SES identity will be deleted and recreated with the same keys)
+- "Verify Now" button to manually trigger a verification check
+- Shows how long the domain has been pending (using `lastVerifiedAt` or `createdAt`)
+
+**Navigation:** Add menu item to admin sidebar in `_layout.tsx`:
+
+```tsx
+<Button
+  variant="ghost"
+  className={cn(
+    'justify-start md:w-full',
+    pathname?.startsWith('/admin/email-domains') && 'bg-secondary',
+  )}
+  asChild
+>
+  <Link to="/admin/email-domains">
+    <MailIcon className="mr-2 h-5 w-5" />
+    <Trans>Email Domains</Trans>
+  </Link>
+</Button>
+```
+
+**Table component:** `apps/remix/app/components/tables/admin-email-domains-table.tsx` (optional -- can be inline in the route file like the documents page)
+
+#### 3e. Automatic Re-registration in Sync Job (Optional Enhancement)
+
+In the hourly sync job, after checking verification status, if a domain has been `PENDING` for more than 48 hours:
+
+- Automatically call `reregisterEmailDomain()` to attempt recovery
+- Log the auto-recovery attempt
+- This provides a self-healing mechanism without user intervention
+
+## Implementation Plan
+
+### Phase 1: Background Sync Job (Core)
+
+1. Create `sync-email-domains.ts` job definition with hourly cron
+2. Create `sync-email-domains.handler.ts` with batch verification logic
+3. Register job in `packages/lib/jobs/client.ts`
+4. Add error handling and logging
+
+### Phase 2: Schema Enhancement
+
+5. Add `lastVerifiedAt` column to `EmailDomain` model
+6. Create Prisma migration
+7. Update `verifyEmailDomain()` to set `lastVerifiedAt` on each check
+8. Update sync job to use `lastVerifiedAt` for intelligent scheduling
+
+### Phase 3: Admin Email Domains Panel
+
+9. Create `find-email-domains` admin TRPC route + types (list/search with pagination and status filter)
+10. Create `get-email-domain` admin TRPC route + types (detail view with org info, emails, DNS records)
+11. Register find + get routes in admin router under `emailDomain` namespace
+12. Create admin list page (`admin+/email-domains._index.tsx`) with search, status filter, DataTable
+13. Create admin detail page (`admin+/email-domains.$id.tsx`) with domain info, emails table, DNS records
+14. Add "Email Domains" menu item to admin sidebar (`_layout.tsx`)
+
+### Phase 4: Re-registration Feature
+
+15. Extract `verifyDomainWithDKIM()` as a shared helper (if not already exported)
+16. Create `reregisterEmailDomain()` service function
+17. Create `reregister-email-domain` admin TRPC mutation route + types
+18. Register reregister route in admin router under `emailDomain.reregister`
+19. Add "Re-register" button + confirmation dialog on admin detail page
+
+### Phase 5: Auto-Recovery (Optional)
+
+20. Add 48-hour stale detection logic to sync job
+21. Auto-trigger re-registration for stale domains
+22. Add logging/notifications for auto-recovery events
+
+## Files to Create/Modify
+
+### New Files
+
+- `packages/lib/jobs/definitions/internal/sync-email-domains.ts`
+- `packages/lib/jobs/definitions/internal/sync-email-domains.handler.ts`
+- `packages/ee/server-only/lib/reregister-email-domain.ts`
+- `packages/trpc/server/admin-router/find-email-domains.ts`
+- `packages/trpc/server/admin-router/find-email-domains.types.ts`
+- `packages/trpc/server/admin-router/get-email-domain.ts`
+- `packages/trpc/server/admin-router/get-email-domain.types.ts`
+- `packages/trpc/server/admin-router/reregister-email-domain.ts`
+- `packages/trpc/server/admin-router/reregister-email-domain.types.ts`
+- `apps/remix/app/routes/_authenticated+/admin+/email-domains._index.tsx`
+- `apps/remix/app/routes/_authenticated+/admin+/email-domains.$id.tsx`
+
+### Modified Files
+
+- `packages/prisma/schema.prisma` -- Add `lastVerifiedAt` field
+- `packages/lib/jobs/client.ts` -- Register new sync job
+- `packages/ee/server-only/lib/verify-email-domain.ts` -- Update `lastVerifiedAt`
+- `packages/ee/server-only/lib/create-email-domain.ts` -- Export `verifyDomainWithDKIM` helper
+- `packages/trpc/server/admin-router/router.ts` -- Add `emailDomain.{find, get, reregister}` routes
+- `apps/remix/app/routes/_authenticated+/admin+/_layout.tsx` -- Add "Email Domains" nav item to sidebar
+- New Prisma migration file
+
+## Technical Considerations
+
+1. **SES API Rate Limits** -- AWS SES has rate limits on `GetEmailIdentityCommand`. The sync job should process domains in batches with small delays between calls (e.g., 5-10 per batch with 1s delay).
+
+2. **Concurrency** -- The local job provider has deterministic deduplication via SHA-256 IDs, so multiple app instances won't run the same cron tick twice.
+
+3. **Error Isolation** -- Each domain verification in the sync job should be wrapped in try/catch so one failing domain doesn't prevent others from being checked.
+
+4. **Re-registration Safety** -- The re-register function should be idempotent. Deleting a non-existent SES identity should be handled gracefully (already done in `deleteEmailDomain`).
+
+5. **Private Key Security** -- The private key is encrypted at rest and should only be decrypted transiently during re-registration. It should never be logged or exposed in API responses.
+
+6. **Feature Gating** -- The sync job should only process domains belonging to organisations with active `emailDomains` claim flags. This prevents processing domains for orgs that have downgraded.
+
+7. **Observability** -- Add structured logging to the sync job so operations teams can monitor domain verification health across all tenants.

.env.example

@@ -1,3 +1,6 @@
+# The license key to enable enterprise features for self hosters
+NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=
+
 # [[AUTH]]
 NEXTAUTH_SECRET="secret"
 
@@ -172,6 +175,8 @@ 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,6 +41,7 @@ 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()

.github/workflows/publish.yml

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

.gitignore

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

apps/documentation/pages/developers/_meta.js

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

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

@@ -1,12 +1,25 @@
 ---
-title: Authoring
+title: Embedded Authoring
 description: Learn how to use embedded authoring to create documents and templates in your application
 ---
 
+import { Callout } from 'nextra/components';
+
+<Callout type="info">
+  The embedded authoring feature is an enterprise only feature. Please contact us if you are
+  interested in using it.
+</Callout>
+
 # Embedded Authoring
 
 In addition to embedding signing experiences, Documenso now supports embedded authoring, allowing you to integrate document and template creation and editing directly within your application.
 
+## Embedded Signing vs Embedded Authoring
+
+Embedded signing allows you to embed your Documenso documents into your application for signing. Your users will be able to sign the document directly in your application.
+
+Embedded authoring allows you to integrate Documenso's document and template creation and editing into your application. You will be able to create and edit documents and templates directly in your application.
+
 ## How Embedded Authoring Works
 
 The embedded authoring feature enables your users to create and edit documents and templates without leaving your application. This process works through secure presign tokens that authenticate the embedding session and manage permissions.

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

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

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

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

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

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

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

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

apps/documentation/pages/developers/webhooks.mdx

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

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

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

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

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

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

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

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

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

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

@@ -115,10 +115,12 @@ export function AssistantConfirmationDialog({
                   <div className="mt-4 flex flex-col gap-4">
                     {!isEditingNextSigner && (
                       <div>
-                        <p className="text-muted-foreground text-sm">
-                          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 className="text-sm text-muted-foreground">
+                          <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>
                         </p>
 
                         <Button

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

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

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

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

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

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

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

@@ -258,10 +258,10 @@ export const EnvelopeDistributeDialog = ({
                 >
                   <TabsList className="w-full">
                     <TabsTrigger className="w-full" value={DocumentDistributionMethod.EMAIL}>
-                      Email
+                      <Trans>Email</Trans>
                     </TabsTrigger>
                     <TabsTrigger className="w-full" value={DocumentDistributionMethod.NONE}>
-                      None
+                      <Trans>None</Trans>
                     </TabsTrigger>
                   </TabsList>
                 </Tabs>

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

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

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

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

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

@@ -77,7 +77,7 @@ export const OrganisationGroupDeleteDialog = ({
           </DialogTitle>
 
           <DialogDescription className="mt-4">
-            <Trans>
+            <Trans context="Removing group from organisation">
               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,7 +127,11 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
   };
 
   const mapTextToUrl = (text: string) => {
-    return text.toLowerCase().replace(/\s+/g, '-');
+    return text
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .toLowerCase()
+      .replace(/\s+/g, '-');
   };
 
   const dialogState = useMemo(() => {
@@ -260,7 +264,7 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
                         <Input className="bg-background" {...field} />
                       </FormControl>
                       {!form.formState.errors.teamUrl && (
-                        <span className="text-foreground/50 text-xs font-normal">
+                        <span className="text-xs font-normal text-foreground/50">
                           {field.value ? (
                             `${NEXT_PUBLIC_WEBAPP_URL()}/t/${field.value}`
                           ) : (
@@ -288,7 +292,7 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
                           />
 
                           <label
-                            className="text-muted-foreground ml-2 text-sm"
+                            className="ml-2 text-sm text-muted-foreground"
                             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>
+            <Trans context="Removing group from team">
               You are about to remove the following group from{' '}
               <span className="font-semibold">{team.name}</span>.
             </Trans>

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

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

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

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

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

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

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

@@ -5,7 +5,6 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { EnvelopeItem, FieldType } from '@prisma/client';
 import { ReadStatus, type Recipient, SendStatus, SigningStatus } from '@prisma/client';
-import { base64 } from '@scure/base';
 import { ChevronsUpDown } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -16,6 +15,7 @@ import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import { nanoid } from '@documenso/lib/universal/id';
 import { ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING } from '@documenso/lib/utils/advanced-fields-helpers';
+import { PDFViewer } from '@documenso/ui/components/pdf-viewer/pdf-viewer';
 import { useRecipientColors } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -24,7 +24,6 @@ import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/type
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { FieldSelector } from '@documenso/ui/primitives/field-selector';
 import { Form } from '@documenso/ui/primitives/form/form';
-import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
 import { Sheet, SheetContent, SheetTrigger } from '@documenso/ui/primitives/sheet';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -84,7 +83,7 @@ export const ConfigureFieldsView = ({
     };
   }, []);
 
-  const normalizedDocumentData = useMemo(() => {
+  const overrideImages = useMemo(() => {
     if (envelopeItem) {
       return undefined;
     }
@@ -93,7 +92,7 @@ export const ConfigureFieldsView = ({
       return undefined;
     }
 
-    return base64.encode(configData.documentData.data);
+    return configData.documentData.images;
   }, [configData.documentData]);
 
   const normalizedEnvelopeItem = useMemo(() => {
@@ -115,7 +114,9 @@ export const ConfigureFieldsView = ({
       templateId: null,
       token: '',
       documentDeletedAt: null,
-      expired: null,
+      expired: null, // !: deprecated Not in use. To be removed in a future migration.
+      expiresAt: null,
+      expirationNotifiedAt: null,
       signedAt: null,
       authOptions: null,
       rejectionReason: null,
@@ -177,8 +178,6 @@ export const ConfigureFieldsView = ({
     name: 'fields',
   });
 
-  const highestPageNumber = Math.max(...localFields.map((field) => field.pageNumber));
-
   const onFieldCopy = useCallback(
     (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
       const { duplicate = false, duplicateAll = false } = options ?? {};
@@ -546,17 +545,16 @@ 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
-                  target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
-                >
+                <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
                   {localFields.map((field, index) => {
                     const recipientIndex = recipients.findIndex((r) => r.id === field.recipientId);
 

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

@@ -1,11 +1,14 @@
+import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
 
 export const EmbedClientLoading = () => {
   return (
-    <div className="bg-background fixed left-0 top-0 z-[9999] flex h-full w-full items-center justify-center">
+    <div className="fixed left-0 top-0 z-[9999] flex h-full w-full items-center justify-center bg-background">
       <Loader className="mr-2 h-4 w-4 animate-spin" />
 
-      <span>Loading...</span>
+      <span>
+        <Trans>Loading...</Trans>
+      </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';
 
@@ -101,8 +101,6 @@ export const EmbedDirectTemplateClientPage = ({
     localFields.filter((field) => field.inserted),
   ];
 
-  const highestPendingPageNumber = Math.max(...pendingFields.map((field) => field.page));
-
   const hasSignatureField = localFields.some((field) => isSignatureFieldType(field.type));
 
   const signatureValid = !hasSignatureField || (signature && signature.trim() !== '');
@@ -341,10 +339,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>
@@ -478,9 +477,7 @@ export const EmbedDirectTemplateClientPage = ({
           </div>
         </div>
 
-        <ElementVisible
-          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
-        >
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
           {showPendingFieldTooltip && pendingFields.length > 0 && (
             <FieldToolTip key={pendingFields[0].id} field={pendingFields[0]} color="warning">
               <Trans>Click to insert field</Trans>
@@ -499,7 +496,9 @@ 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>Powered by</span>
+          <span>
+            <Trans>Powered by</Trans>
+          </span>
           <BrandingLogo className="ml-2 inline-block h-[14px]" />
         </div>
       )}

apps/remix/app/components/embed/embed-document-fields.tsx

@@ -50,10 +50,8 @@ export const EmbedDocumentFields = ({
   onSignField,
   onUnsignField,
 }: EmbedDocumentFieldsProps) => {
-  const highestPageNumber = Math.max(...fields.map((field) => field.page));
-
   return (
-    <ElementVisible target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}>
+    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
       {fields.map((field) =>
         match(field.type)
           .with(FieldType.SIGNATURE, () => (

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';
@@ -106,8 +106,6 @@ export const EmbedSignDocumentV1ClientPage = ({
     fields.filter((field) => field.inserted),
   ];
 
-  const highestPendingPageNumber = Math.max(...pendingFields.map((field) => field.page));
-
   const { mutateAsync: completeDocumentWithToken, isPending: isSubmitting } =
     trpc.recipient.completeDocumentWithToken.useMutation();
 
@@ -287,10 +285,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>
@@ -491,9 +490,7 @@ export const EmbedSignDocumentV1ClientPage = ({
             </div>
           </div>
 
-          <ElementVisible
-            target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
-          >
+          <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
             {showPendingFieldTooltip && pendingFields.length > 0 && (
               <FieldToolTip key={pendingFields[0].id} field={pendingFields[0]} color="warning">
                 <Trans>Click to insert field</Trans>
@@ -510,7 +507,9 @@ 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>Powered by</span>
+            <span>
+              <Trans>Powered by</Trans>
+            </span>
             <BrandingLogo className="ml-2 inline-block h-[14px]" />
           </div>
         )}

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

@@ -1,6 +1,7 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
 
 import { useLingui } from '@lingui/react';
+import { EnvelopeType } from '@prisma/client';
 
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
 
@@ -25,7 +26,7 @@ export const EmbedSignDocumentV2ClientPage = ({
 }: EmbedSignDocumentV2ClientPageProps) => {
   const { _ } = useLingui();
 
-  const { envelope, recipient, envelopeData, setFullName, fullName } =
+  const { envelope, recipient, envelopeData, setFullName, setEmail, fullName } =
     useRequiredEnvelopeSigningContext();
 
   const { isCompleted, isRejected, recipientSignature } = envelopeData;
@@ -35,6 +36,7 @@ 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;
@@ -132,6 +134,17 @@ 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) {
@@ -213,6 +226,7 @@ export const EmbedSignDocumentV2ClientPage = ({
   return (
     <EmbedSigningProvider
       isNameLocked={isNameLocked}
+      isEmailLocked={isEmailLocked}
       hidePoweredBy={hidePoweredBy}
       allowDocumentRejection={allowDocumentRejection}
       onDocumentCompleted={onDocumentCompleted}

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

@@ -0,0 +1,46 @@
+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);
@@ -93,8 +95,6 @@ export const MultiSignDocumentSigningView = ({
       [],
   ];
 
-  const highestPendingPageNumber = Math.max(...pendingFields.map((field) => field.page));
-
   const uninsertedFields = document?.fields.filter((field) => !field.inserted) ?? [];
 
   const onSignField = async (payload: TSignFieldWithTokenMutationSchema) => {
@@ -179,7 +179,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 +230,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?.();
@@ -363,9 +368,7 @@ export const MultiSignDocumentSigningView = ({
               </div>
 
               {hasDocumentLoaded && (
-                <ElementVisible
-                  target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
-                >
+                <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
                   {showPendingFieldTooltip && pendingFields.length > 0 && (
                     <FieldToolTip
                       key={pendingFields[0].id}

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

@@ -11,6 +11,10 @@ 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,
@@ -27,6 +31,7 @@ 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';
@@ -70,6 +75,7 @@ export type TDocumentPreferencesFormSchema = {
   defaultRecipients: TDefaultRecipients | null;
   delegateDocumentOwnership: boolean | null;
   aiFeaturesEnabled: boolean | null;
+  envelopeExpirationPeriod: TEnvelopeExpirationPeriod | null;
 };
 
 type SettingsSubset = Pick<
@@ -87,6 +93,7 @@ type SettingsSubset = Pick<
   | 'defaultRecipients'
   | 'delegateDocumentOwnership'
   | 'aiFeaturesEnabled'
+  | 'envelopeExpirationPeriod'
 >;
 
 export type DocumentPreferencesFormProps = {
@@ -126,6 +133,7 @@ export const DocumentPreferencesForm = ({
     defaultRecipients: ZDefaultRecipientsSchema.nullable(),
     delegateDocumentOwnership: z.boolean().nullable(),
     aiFeaturesEnabled: z.boolean().nullable(),
+    envelopeExpirationPeriod: ZEnvelopeExpirationPeriod.nullable(),
   });
 
   const form = useForm<TDocumentPreferencesFormSchema>({
@@ -146,6 +154,7 @@ export const DocumentPreferencesForm = ({
         : null,
       delegateDocumentOwnership: settings.delegateDocumentOwnership,
       aiFeaturesEnabled: settings.aiFeaturesEnabled,
+      envelopeExpirationPeriod: settings.envelopeExpirationPeriod ?? null,
     },
     resolver: zodResolver(ZDocumentPreferencesFormSchema),
   });
@@ -669,6 +678,35 @@ 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/forms/signup.tsx

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

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

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

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

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

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

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

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

@@ -97,13 +97,13 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
           {menuNavigationLinks.map(({ href, text }) => (
             <Link
               key={href}
-              className="text-foreground hover:text-foreground/80 flex items-center gap-2 text-2xl font-semibold"
+              className="flex items-center gap-2 text-2xl font-semibold text-foreground hover:text-foreground/80"
               to={href}
               onClick={() => handleMenuItemClick()}
             >
               {text}
               {href === '/inbox' && unreadCountData && unreadCountData.count > 0 && (
-                <span className="bg-primary text-primary-foreground flex h-6 min-w-[1.5rem] items-center justify-center rounded-full px-1.5 text-xs font-semibold">
+                <span className="flex h-6 min-w-[1.5rem] items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-primary-foreground">
                   {unreadCountData.count > 99 ? '99+' : unreadCountData.count}
                 </span>
               )}
@@ -111,7 +111,7 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
           ))}
 
           <button
-            className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+            className="text-2xl font-semibold text-foreground hover:text-foreground/80"
             onClick={async () => authClient.signOut()}
           >
             <Trans>Sign Out</Trans>
@@ -123,8 +123,10 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
             <ThemeSwitcher />
           </div>
 
-          <p className="text-muted-foreground text-sm">
-            © {new Date().getFullYear()} Documenso, Inc. <br /> All rights reserved.
+          <p className="text-sm text-muted-foreground">
+            © {new Date().getFullYear()} Documenso, Inc.
+            <br />
+            <Trans>All rights reserved.</Trans>
           </p>
         </div>
       </SheetContent>

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

@@ -118,7 +118,9 @@ 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">Includes:</div>
+                    <div className="text-sm font-medium">
+                      <Trans>Includes:</Trans>
+                    </div>
 
                     <ul className="mt-1 divide-y text-sm">
                       {price.product.features.map((feature, index) => (

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

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

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

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

apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx

@@ -82,8 +82,6 @@ export const DirectTemplateSigningForm = ({
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const highestPageNumber = Math.max(...localFields.map((field) => field.page));
-
   const fieldsRequiringValidation = useMemo(() => {
     return localFields.filter((field) => isFieldUnsignedAndRequired(field));
   }, [localFields]);
@@ -250,9 +248,7 @@ export const DirectTemplateSigningForm = ({
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
 
       <DocumentFlowFormContainerContent>
-        <ElementVisible
-          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
-        >
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
           {validateUninsertedFields && uninsertedFields[0] && (
             <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
               <Trans>Click to insert field</Trans>

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

@@ -4,6 +4,7 @@ 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';
@@ -27,7 +28,6 @@ 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,7 +44,6 @@ type T2FAAuthFormSchema = z.infer<typeof Z2FAAuthFormSchema>;
 
 export const DocumentSigningAuth2FA = ({
   actionTarget = 'FIELD',
-  actionVerb = 'sign',
   onReauthFormSubmit,
   open,
   onOpenChange,
@@ -101,14 +100,39 @@ export const DocumentSigningAuth2FA = ({
         <Alert variant="warning">
           <AlertDescription>
             <p>
-              {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()}.`
-              )}
+              {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()}
             </p>
-
             <p className="mt-2">
               <Trans>
                 By enabling 2FA, you will be required to enter a code from your authenticator app
@@ -138,7 +162,9 @@ export const DocumentSigningAuth2FA = ({
               name="token"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel required>2FA token</FormLabel>
+                  <FormLabel required>
+                    <Trans>2FA token</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <PinInput {...field} value={field.value ?? ''} maxLength={6}>

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

@@ -2,6 +2,7 @@ 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';
@@ -13,13 +14,11 @@ 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();
@@ -55,32 +54,110 @@ export const DocumentSigningAuthAccount = ({
     <fieldset disabled={isSigningOut} className="space-y-4">
       <Alert variant="warning">
         <AlertDescription>
-          {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>
-          )}
+          <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>
         </AlertDescription>
       </Alert>
 

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

@@ -8,6 +8,7 @@ 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';
@@ -38,7 +39,6 @@ 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,7 +52,6 @@ type TPasskeyAuthFormSchema = z.infer<typeof ZPasskeyAuthFormSchema>;
 
 export const DocumentSigningAuthPasskey = ({
   actionTarget = 'FIELD',
-  actionVerb = 'sign',
   onReauthFormSubmit,
   open,
   onOpenChange,
@@ -128,9 +127,62 @@ export const DocumentSigningAuthPasskey = ({
       <div className="space-y-4">
         <Alert variant="warning">
           <AlertDescription>
-            {/* Todo: Translate */}
-            Your browser does not support passkeys, which is required to {actionVerb.toLowerCase()}{' '}
-            this {actionTarget.toLowerCase()}.
+            {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()}
           </AlertDescription>
         </Alert>
 
@@ -178,10 +230,38 @@ export const DocumentSigningAuthPasskey = ({
       <div className="space-y-4">
         <Alert variant="warning">
           <AlertDescription>
-            {/* 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()}.`}
+            {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()}
           </AlertDescription>
         </Alert>
 
@@ -213,7 +293,9 @@ export const DocumentSigningAuthPasskey = ({
               name="passkeyId"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel required>Passkey</FormLabel>
+                  <FormLabel required>
+                    <Trans>Passkey</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <Select {...field} onValueChange={field.onChange}>
@@ -241,20 +323,24 @@ export const DocumentSigningAuthPasskey = ({
 
             {formErrorCode && (
               <Alert variant="destructive">
-                <AlertTitle>Unauthorized</AlertTitle>
+                <AlertTitle>
+                  <Trans>Unauthorized</Trans>
+                </AlertTitle>
                 <AlertDescription>
-                  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
+                  </Trans>
                 </AlertDescription>
               </Alert>
             )}
 
             <DialogFooter>
               <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                Cancel
+                <Trans>Cancel</Trans>
               </Button>
 
               <Button type="submit" loading={isCurrentlyAuthenticating}>
-                Sign
+                <Trans>Sign</Trans>
               </Button>
             </DialogFooter>
           </div>

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

@@ -23,8 +23,6 @@ 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;
@@ -40,8 +38,6 @@ 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,10 +162,12 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Automatically sign fields</DialogTitle>
+          <DialogTitle>
+            <Trans>Automatically sign fields</Trans>
+          </DialogTitle>
         </DialogHeader>
 
-        <div className="text-muted-foreground max-w-[50ch]">
+        <div className="max-w-[50ch] text-muted-foreground">
           <p>
             <Trans>
               When you sign a document, we can automatically fill in and sign the following fields

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

@@ -122,7 +122,9 @@ 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>Powered by</span>
+                  <span>
+                    <Trans>Powered by</Trans>
+                  </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';
@@ -162,8 +162,6 @@ export const DocumentSigningPageViewV1 = ({
       : undefined;
   }, [document.documentMeta?.signingOrder, allRecipients, recipient.id]);
 
-  const highestPageNumber = Math.max(...fields.map((field) => field.page));
-
   const pendingFields = fieldsRequiringValidation.filter((field) => !field.inserted);
   const hasPendingFields = pendingFields.length > 0;
 
@@ -274,11 +272,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>
@@ -400,9 +399,7 @@ export const DocumentSigningPageViewV1 = ({
           <DocumentSigningAutoSign recipient={recipient} fields={fields} />
         )}
 
-        <ElementVisible
-          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
-        >
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
           {fields
             .filter(
               (field) =>

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,7 +259,9 @@ 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>Powered by</span>
+                  <span>
+                    <Trans>Powered by</Trans>
+                  </span>
                   <BrandingLogo className="ml-2 inline-block h-[14px]" />
                 </a>
               )}

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

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

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

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

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

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

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

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

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

@@ -9,19 +9,21 @@ 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 } from '@documenso/lib/utils/recipients';
+import { formatSigningLink, isRecipientExpired } 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';
@@ -44,7 +46,7 @@ export const DocumentPageViewRecipients = ({
   envelope,
   documentRootPath,
 }: DocumentPageViewRecipientsProps) => {
-  const { _ } = useLingui();
+  const { _, i18n } = useLingui();
   const { toast } = useToast();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -66,9 +68,9 @@ export const DocumentPageViewRecipients = ({
   }, [searchParams, setSearchParams]);
 
   return (
-    <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
+    <section className="flex flex-col rounded-xl border border-border bg-widget dark:bg-background">
       <div className="flex flex-row items-center justify-between px-4 py-3">
-        <h1 className="text-foreground font-medium">
+        <h1 className="font-medium text-foreground">
           <Trans>Recipients</Trans>
         </h1>
 
@@ -87,7 +89,7 @@ export const DocumentPageViewRecipients = ({
         )}
       </div>
 
-      <ul className="text-muted-foreground divide-y border-t">
+      <ul className="divide-y border-t text-muted-foreground">
         {recipients.length === 0 && (
           <li className="flex flex-col items-center justify-center py-6 text-sm">
             <Trans>No recipients</Trans>
@@ -98,9 +100,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-muted-foreground text-sm">{recipient.email}</p>}
+              primaryText={<p className="text-sm text-muted-foreground">{recipient.email}</p>}
               secondaryText={
-                <p className="text-muted-foreground/70 text-xs">
+                <p className="text-xs text-muted-foreground/70">
                   {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
                 </p>
               }
@@ -154,12 +156,41 @@ export const DocumentPageViewRecipients = ({
                 )}
 
               {envelope.status !== DocumentStatus.DRAFT &&
-                recipient.signingStatus === SigningStatus.NOT_SIGNED && (
+                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>
+                ) : (
                   <Badge variant="secondary">
                     <Clock className="mr-1 h-3 w-3" />
                     <Trans>Pending</Trans>
                   </Badge>
-                )}
+                ))}
 
               {envelope.status !== DocumentStatus.DRAFT &&
                 recipient.signingStatus === SigningStatus.REJECTED && (
@@ -175,7 +206,7 @@ export const DocumentPageViewRecipients = ({
                       <Trans>Reason for rejection: </Trans>
                     </p>
 
-                    <p className="text-muted-foreground mt-1 text-sm">
+                    <p className="mt-1 text-sm text-muted-foreground">
                       {recipient.rejectionReason}
                     </p>
                   </PopoverHover>
@@ -183,7 +214,8 @@ export const DocumentPageViewRecipients = ({
 
               {envelope.status === DocumentStatus.PENDING &&
                 recipient.signingStatus === SigningStatus.NOT_SIGNED &&
-                recipient.role !== RecipientRole.CC && (
+                recipient.role !== RecipientRole.CC &&
+                !isRecipientExpired(recipient) && (
                   <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, currentEnvelopeItem?.id],
   );
 
   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,15 +434,31 @@ 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]);
+  }, [localPageFields, selectedKonvaFieldGroups]);
 
   const setSelectedFields = (nodes: Konva.Node[]) => {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const fieldGroups = nodes.filter((node) => node.hasName('field-group')) as Konva.Group[];
+    const fieldGroups = nodes.filter(
+      (node) =>
+        node.hasName('field-group') && Boolean(node.getStage()) && Boolean(node.getParent()),
+    ) as Konva.Group[];
 
     interactiveTransformer.current?.nodes(fieldGroups);
     setSelectedKonvaFieldGroups(fieldGroups);
@@ -515,7 +531,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
 
     removePendingField();
 
-    if (!canvasElement.current || !currentEnvelopeItem || !editorFields.selectedRecipient) {
+    if (!currentEnvelopeItem || !editorFields.selectedRecipient) {
       return;
     }
 
@@ -530,7 +546,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
 
     editorFields.addField({
       envelopeItemId: currentEnvelopeItem.id,
-      page: pageContext.pageNumber,
+      page: pageNumber,
       type,
       positionX: fieldX,
       positionY: fieldY,
@@ -559,10 +575,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
   }
 
   return (
-    <div
-      className="relative w-full"
-      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
-    >
+    <div className="relative w-full" key={`${currentEnvelopeItem.id}-renderer-${pageNumber}`}>
       {selectedKonvaFieldGroups.length > 0 &&
         interactiveTransformer.current &&
         !isFieldChanging && (
@@ -625,13 +638,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>
   );
 }
@@ -674,6 +681,10 @@ const FieldActionButtons = ({
       selectedFieldFormId.includes(field.formId),
     );
 
+    if (fields.length === 0) {
+      return null;
+    }
+
     const recipient = envelope.recipients.find(
       (recipient) => recipient.id === fields[0].recipientId,
     );
@@ -689,7 +700,7 @@ const FieldActionButtons = ({
     }
 
     return null;
-  }, [editorFields.localFields]);
+  }, [editorFields.localFields, envelope.recipients, selectedFieldFormId]);
 
   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';
@@ -12,6 +12,7 @@ import { match } from 'ts-pattern';
 
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { 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,6 +73,8 @@ export const EnvelopeEditorFieldsPage = () => {
 
   const team = useCurrentTeam();
 
+  const scrollableContainerRef = useRef<HTMLDivElement>(null);
+
   const { envelope, editorFields, relativePath } = useCurrentEnvelopeEditor();
 
   const { currentEnvelopeItem } = useCurrentEnvelopeRender();
@@ -156,12 +156,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"
@@ -185,9 +185,10 @@ export const EnvelopeEditorFieldsPage = () => {
           )}
 
           {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">
@@ -296,19 +297,31 @@ 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">Pos X:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Pos X:</Trans>
+                          </span>
+                          &nbsp;
                           {selectedField.positionX.toFixed(2)}
                         </p>
                         <p>
-                          <span className="min-w-12 text-muted-foreground">Pos Y:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Pos Y:</Trans>
+                          </span>
+                          &nbsp;
                           {selectedField.positionY.toFixed(2)}
                         </p>
                         <p>
-                          <span className="min-w-12 text-muted-foreground">Width:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Width:</Trans>
+                          </span>
+                          &nbsp;
                           {selectedField.width.toFixed(2)}
                         </p>
                         <p>
-                          <span className="min-w-12 text-muted-foreground">Height:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Height:</Trans>
+                          </span>
+                          &nbsp;
                           {selectedField.height.toFixed(2)}
                         </p>
                       </div>

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

@@ -594,8 +594,12 @@ export const EnvelopeEditorRecipientForm = () => {
     <Card backdropBlur={false} className="border">
       <CardHeader className="flex flex-row justify-between">
         <div>
-          <CardTitle>Recipients</CardTitle>
-          <CardDescription className="mt-1.5">Add recipients to your document</CardDescription>
+          <CardTitle>
+            <Trans>Recipients</Trans>
+          </CardTitle>
+          <CardDescription className="mt-1.5">
+            <Trans>Add recipients to your document</Trans>
+          </CardDescription>
         </div>
 
         <div className="flex flex-row items-center space-x-2">

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

@@ -22,6 +22,7 @@ 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,
@@ -62,6 +63,7 @@ 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';
@@ -135,6 +137,7 @@ 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(),
   }),
 });
 
@@ -207,6 +210,7 @@ export const EnvelopeEditorSettingsDialog = ({
         emailReplyTo: envelope.documentMeta.emailReplyTo ?? undefined,
         emailSettings: ZDocumentEmailSettingsSchema.parse(envelope.documentMeta.emailSettings),
         signatureTypes: extractTeamSignatureSettings(envelope.documentMeta),
+        envelopeExpirationPeriod: envelope.documentMeta?.envelopeExpirationPeriod ?? null,
       },
     };
   };
@@ -245,6 +249,7 @@ export const EnvelopeEditorSettingsDialog = ({
       message,
       subject,
       emailReplyTo,
+      envelopeExpirationPeriod,
     } = data.meta;
 
     const parsedGlobalAccessAuth = z
@@ -273,6 +278,7 @@ export const EnvelopeEditorSettingsDialog = ({
           drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
           typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
           uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+          envelopeExpirationPeriod,
         },
       });
 
@@ -373,7 +379,7 @@ 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 pt-6"
+                className="flex h-[45rem] max-h-[calc(100vh-14rem)] w-full flex-col space-y-6 overflow-y-auto px-6 py-6"
                 disabled={form.formState.isSubmitting}
                 key={activeTab}
               >
@@ -636,6 +642,40 @@ export const EnvelopeEditorSettingsDialog = ({
                           </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', () => (

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, currentEnvelopeItem?.id]);
 
   /**
    * 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-signing/envelope-signing-complete-dialog.tsx

@@ -71,6 +71,14 @@ export const EnvelopeSignerCompleteDialog = () => {
 
         if (fieldTooltip) {
           fieldTooltip.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        } else {
+          // Tooltip not in DOM (page virtualized away) — signal the PDF viewer
+          // to scroll to the correct page via the data attribute.
+          const pdfContent = document.querySelector('[data-pdf-content]');
+
+          if (pdfContent) {
+            pdfContent.setAttribute('data-scroll-to-page', String(nextField.page));
+          }
         }
       },
       isEnvelopeItemSwitch ? 150 : 50,

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

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

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

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

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

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

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

@@ -21,17 +21,17 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
   return (
     <div
       className={cn(
-        'dark:bg-background flex flex-col items-center rounded-xl bg-neutral-100 p-4',
+        'flex flex-col items-center rounded-xl bg-neutral-100 p-4 dark:bg-background',
         className,
       )}
     >
-      <div className="border-border bg-background text-muted-foreground inline-block max-w-full truncate rounded-md border px-2.5 py-1.5 text-sm lowercase">
+      <div className="inline-block max-w-full truncate rounded-md border border-border bg-background px-2.5 py-1.5 text-sm lowercase text-muted-foreground">
         {baseUrl.host}/u/{user.url}
       </div>
 
       <div className="mt-4">
-        <div className="bg-primary/10 rounded-full p-1.5">
-          <div className="bg-background flex h-20 w-20 items-center justify-center rounded-full border-2">
+        <div className="rounded-full bg-primary/10 p-1.5">
+          <div className="flex h-20 w-20 items-center justify-center rounded-full border-2 bg-background">
             <User2 className="h-12 w-12 text-[hsl(228,10%,90%)]" />
           </div>
         </div>
@@ -41,17 +41,17 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
         <div className="flex items-center justify-center gap-x-2">
           <h2 className="max-w-[12rem] truncate text-2xl font-semibold">{user.name}</h2>
 
-          <VerifiedIcon className="text-primary h-8 w-8" />
+          <VerifiedIcon className="h-8 w-8 text-primary" />
         </div>
 
-        <div className="dark:bg-foreground/30 mx-auto mt-4 h-2 w-52 rounded-full bg-neutral-300" />
-        <div className="dark:bg-foreground/20 mx-auto mt-2 h-2 w-36 rounded-full bg-neutral-200" />
+        <div className="mx-auto mt-4 h-2 w-52 rounded-full bg-neutral-300 dark:bg-foreground/30" />
+        <div className="mx-auto mt-2 h-2 w-36 rounded-full bg-neutral-200 dark:bg-foreground/20" />
       </div>
 
       <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">
-            Documents
+        <div className="divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200 dark:divide-foreground/30 dark:border-foreground/30">
+          <div className="bg-neutral-50 p-4 font-medium text-muted-foreground dark:bg-foreground/20">
+            <Trans>Documents</Trans>
           </div>
 
           {Array(rows)
@@ -59,14 +59,14 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
             .map((_, index) => (
               <div
                 key={index}
-                className="bg-background flex items-center justify-between gap-x-6 p-4"
+                className="flex items-center justify-between gap-x-6 bg-background p-4"
               >
                 <div className="flex items-center gap-x-2">
-                  <File className="text-muted-foreground/80 h-8 w-8" strokeWidth={1.5} />
+                  <File className="h-8 w-8 text-muted-foreground/80" strokeWidth={1.5} />
 
                   <div className="space-y-2">
-                    <div className="dark:bg-foreground/30 h-1.5 w-24 rounded-full bg-neutral-300 md:w-36" />
-                    <div className="dark:bg-foreground/20 h-1.5 w-16 rounded-full bg-neutral-200 md:w-24" />
+                    <div className="h-1.5 w-24 rounded-full bg-neutral-300 md:w-36 dark:bg-foreground/30" />
+                    <div className="h-1.5 w-16 rounded-full bg-neutral-200 md:w-24 dark:bg-foreground/20" />
                   </div>
                 </div>
 

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

@@ -1,5 +1,6 @@
 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';
@@ -41,7 +42,11 @@ export const WebhookMultiSelectCombobox = ({
       placeholder={_(msg`Select triggers`)}
       hideClearAllButton
       hidePlaceholderWhenSelected
-      emptyIndicator={<p className="text-center text-sm">No triggers available</p>}
+      emptyIndicator={
+        <p className="text-center text-sm">
+          <Trans>No triggers available</Trans>
+        </p>
+      }
     />
   );
 };

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

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

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

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

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

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

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

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

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

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

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

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

apps/remix/app/root.tsx

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

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

@@ -3,6 +3,7 @@ import {
   BarChart3,
   Building2Icon,
   FileStack,
+  MailIcon,
   Settings,
   Trophy,
   Users,
@@ -11,25 +12,37 @@ import {
 import { Link, Outlet, redirect, useLocation } from 'react-router';
 
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { LicenseClient } from '@documenso/lib/server-only/license/license-client';
 import { isAdmin } from '@documenso/lib/utils/is-admin';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
+import { AdminLicenseStatusBanner } from '~/components/general/admin-license-status-banner';
+
 import type { Route } from './+types/_layout';
 
 export async function loader({ request }: Route.LoaderArgs) {
   const { user } = await getSession(request);
 
+  const license = await LicenseClient.getInstance()?.getCachedLicense();
+
   if (!user || !isAdmin(user)) {
     throw redirect('/');
   }
+
+  return {
+    license: license || null,
+  };
 }
 
-export default function AdminLayout() {
+export default function AdminLayout({ loaderData }: Route.ComponentProps) {
+  const { license } = loaderData;
   const { pathname } = useLocation();
 
   return (
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <AdminLicenseStatusBanner license={license} />
+
       <h1 className="text-4xl font-semibold">
         <Trans>Admin Panel</Trans>
       </h1>
@@ -110,6 +123,20 @@ export default function AdminLayout() {
             </Link>
           </Button>
 
+          <Button
+            variant="ghost"
+            className={cn(
+              'justify-start md:w-full',
+              pathname?.startsWith('/admin/email-domains') && 'bg-secondary',
+            )}
+            asChild
+          >
+            <Link to="/admin/email-domains">
+              <MailIcon className="mr-2 h-5 w-5" />
+              <Trans>Email Domains</Trans>
+            </Link>
+          </Button>
+
           <Button
             variant="ghost"
             className={cn(

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

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

apps/remix/app/routes/_authenticated+/admin+/email-domains.$id.tsx

@@ -0,0 +1,295 @@
+import { useMemo } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { EmailDomainStatus } from '@prisma/client';
+import { CheckCircle2Icon, ClockIcon, CopyIcon, RotateCcwIcon } from 'lucide-react';
+import { DateTime } from 'luxon';
+import { Link, redirect } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { generateEmailDomainRecords } from '@documenso/lib/utils/email-domains';
+import { trpc } from '@documenso/trpc/react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@documenso/ui/primitives/alert-dialog';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import type { Route } from './+types/email-domains.$id';
+
+export function loader({ params }: Route.LoaderArgs) {
+  const id = params.id;
+
+  if (!id) {
+    throw redirect('/admin/email-domains');
+  }
+
+  return { emailDomainId: id };
+}
+
+export default function AdminEmailDomainDetailPage({ loaderData }: Route.ComponentProps) {
+  const { emailDomainId } = loaderData;
+
+  const { _, i18n } = useLingui();
+  const { toast } = useToast();
+
+  const {
+    data: emailDomain,
+    isPending: isLoading,
+    refetch,
+  } = trpc.admin.emailDomain.get.useQuery({ emailDomainId });
+
+  const { mutate: reregisterDomain, isPending: isReregistering } =
+    trpc.admin.emailDomain.reregister.useMutation({
+      onSuccess: () => {
+        toast({
+          title: _(msg`Domain re-registered`),
+          description: _(
+            msg`The SES identity has been deleted and recreated with the same keys. DNS records remain unchanged.`,
+          ),
+        });
+
+        void refetch();
+      },
+      onError: () => {
+        toast({
+          title: _(msg`Error`),
+          description: _(msg`Failed to re-register email domain`),
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const dnsRecords = useMemo(() => {
+    if (!emailDomain) {
+      return [];
+    }
+
+    return generateEmailDomainRecords(emailDomain.selector, emailDomain.publicKey);
+  }, [emailDomain]);
+
+  const emailColumns = useMemo(() => {
+    return [
+      {
+        header: _(msg`Email`),
+        accessorKey: 'email',
+      },
+      {
+        header: _(msg`Display Name`),
+        accessorKey: 'emailName',
+      },
+      {
+        header: _(msg`Created`),
+        accessorKey: 'createdAt',
+        cell: ({ row }) => i18n.date(row.original.createdAt),
+      },
+    ] satisfies DataTableColumnDef<NonNullable<typeof emailDomain>['emails'][number]>[];
+  }, []);
+
+  const onCopyToClipboard = async (text: string) => {
+    await navigator.clipboard.writeText(text);
+
+    toast({
+      title: _(msg`Copied to clipboard`),
+    });
+  };
+
+  if (isLoading || !emailDomain) {
+    return (
+      <div>
+        <h2 className="text-4xl font-semibold">
+          <Trans>Email Domain</Trans>
+        </h2>
+        <p className="mt-4 text-muted-foreground">
+          <Trans>Loading...</Trans>
+        </p>
+      </div>
+    );
+  }
+
+  const pendingDuration =
+    emailDomain.status === EmailDomainStatus.PENDING
+      ? DateTime.fromJSDate(new Date(emailDomain.createdAt)).toRelative()
+      : null;
+
+  return (
+    <div>
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-x-4">
+          <h2 className="text-2xl font-semibold">{emailDomain.domain}</h2>
+
+          {match(emailDomain.status)
+            .with(EmailDomainStatus.ACTIVE, () => (
+              <Badge>
+                <CheckCircle2Icon className="mr-2 h-4 w-4 text-green-500 dark:text-green-300" />
+                <Trans>Active</Trans>
+              </Badge>
+            ))
+            .with(EmailDomainStatus.PENDING, () => (
+              <Badge variant="warning">
+                <ClockIcon className="mr-2 h-4 w-4 text-yellow-500 dark:text-yellow-200" />
+                <Trans>Pending</Trans>
+              </Badge>
+            ))
+            .exhaustive()}
+        </div>
+      </div>
+
+      <div className="mt-4 text-sm text-muted-foreground">
+        <div>
+          <Trans>ID</Trans>: {emailDomain.id}
+        </div>
+        <div>
+          <Trans>Organisation</Trans>:{' '}
+          <Link
+            to={`/admin/organisations/${emailDomain.organisation.id}`}
+            className="hover:underline"
+          >
+            {emailDomain.organisation.name}
+          </Link>
+        </div>
+        <div>
+          <Trans>Selector</Trans>: {emailDomain.selector}
+        </div>
+        <div>
+          <Trans>Created</Trans>: {i18n.date(emailDomain.createdAt, DateTime.DATETIME_MED)}
+        </div>
+        <div>
+          <Trans>Last Verified</Trans>:{' '}
+          {emailDomain.lastVerifiedAt
+            ? i18n.date(emailDomain.lastVerifiedAt, DateTime.DATETIME_MED)
+            : '-'}
+        </div>
+        {pendingDuration && (
+          <div className="mt-1 text-yellow-600 dark:text-yellow-400">
+            <Trans>Pending since</Trans>: {pendingDuration}
+          </div>
+        )}
+      </div>
+
+      <hr className="my-4" />
+
+      <h3 className="text-lg font-semibold">
+        <Trans>Admin Actions</Trans>
+      </h3>
+
+      <div className="mt-2 flex gap-x-4">
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button variant="outline" loading={isReregistering}>
+              <RotateCcwIcon className="mr-2 h-4 w-4" />
+              <Trans>Re-register</Trans>
+            </Button>
+          </AlertDialogTrigger>
+
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                <Trans>Re-register Email Domain</Trans>
+              </AlertDialogTitle>
+
+              <AlertDialogDescription>
+                <Trans>
+                  This will delete the existing SES identity for{' '}
+                  <strong>{emailDomain.domain}</strong> and recreate it using the same DKIM keys.
+                  The user will not need to update their DNS records. The domain status will be
+                  reset to Pending.
+                </Trans>
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+
+            <AlertDialogFooter>
+              <AlertDialogCancel>
+                <Trans>Cancel</Trans>
+              </AlertDialogCancel>
+
+              <AlertDialogAction
+                onClick={() => reregisterDomain({ emailDomainId: emailDomain.id })}
+              >
+                <Trans>Re-register</Trans>
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+
+      <hr className="my-4" />
+
+      <h3 className="text-lg font-semibold">
+        <Trans>DNS Records</Trans>
+      </h3>
+
+      <div className="mt-4 space-y-4">
+        {dnsRecords.map((record, index) => (
+          <div key={index} className="rounded-lg border p-4">
+            <div className="flex items-center justify-between">
+              <div className="text-sm font-medium">
+                {record.type} <Trans>Record</Trans>
+              </div>
+
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => void onCopyToClipboard(record.value)}
+              >
+                <CopyIcon className="mr-2 h-4 w-4" />
+                <Trans>Copy Value</Trans>
+              </Button>
+            </div>
+
+            <div className="mt-2 space-y-1 text-sm">
+              <div>
+                <span className="text-muted-foreground">
+                  <Trans>Name</Trans>:{' '}
+                </span>
+                <code className="rounded bg-muted px-1 py-0.5">{record.name}</code>
+              </div>
+              <div>
+                <span className="text-muted-foreground">
+                  <Trans>Value</Trans>:{' '}
+                </span>
+                <code className="block break-all rounded bg-muted px-1 py-0.5">{record.value}</code>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <hr className="my-4" />
+
+      <h3 className="text-lg font-semibold">
+        <Trans>Emails</Trans> ({emailDomain.emails.length})
+      </h3>
+
+      <div className="mt-4">
+        {emailDomain.emails.length > 0 ? (
+          <DataTable
+            columns={emailColumns}
+            data={emailDomain.emails}
+            perPage={emailDomain.emails.length}
+            currentPage={1}
+            totalPages={1}
+            onPaginationChange={() => {}}
+          />
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            <Trans>No emails configured for this domain.</Trans>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/admin+/email-domains._index.tsx

@@ -0,0 +1,207 @@
+import { useMemo, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { EmailDomainStatus } from '@prisma/client';
+import { CheckCircle2Icon, ClockIcon, Loader } from 'lucide-react';
+import { Link, useSearchParams } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { trpc } from '@documenso/trpc/react';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+
+export default function AdminEmailDomainsPage() {
+  const { _, i18n } = useLingui();
+
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const [term, setTerm] = useState(() => searchParams?.get?.('term') ?? '');
+  const debouncedTerm = useDebouncedValue(term, 500);
+
+  const page = searchParams?.get?.('page') ? Number(searchParams.get('page')) : undefined;
+  const perPage = searchParams?.get?.('perPage') ? Number(searchParams.get('perPage')) : undefined;
+  const statusParam = searchParams?.get?.('status') ?? 'ALL';
+
+  const statusFilter =
+    statusParam === 'PENDING' || statusParam === 'ACTIVE' ? statusParam : undefined;
+
+  const { data: findEmailDomainsData, isPending: isFindEmailDomainsLoading } =
+    trpc.admin.emailDomain.find.useQuery(
+      {
+        query: debouncedTerm,
+        page: page || 1,
+        perPage: perPage || 20,
+        status: statusFilter,
+      },
+      {
+        placeholderData: (previousData) => previousData,
+      },
+    );
+
+  const results = findEmailDomainsData ?? {
+    data: [],
+    perPage: 20,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: _(msg`Domain`),
+        accessorKey: 'domain',
+        cell: ({ row }) => (
+          <Link
+            to={`/admin/email-domains/${row.original.id}`}
+            className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[15rem]"
+          >
+            {row.original.domain}
+          </Link>
+        ),
+      },
+      {
+        header: _(msg`Organisation`),
+        accessorKey: 'organisation',
+        cell: ({ row }) => (
+          <Link
+            to={`/admin/organisations/${row.original.organisation.id}`}
+            className="hover:underline"
+          >
+            {row.original.organisation.name}
+          </Link>
+        ),
+      },
+      {
+        header: _(msg`Status`),
+        accessorKey: 'status',
+        cell: ({ row }) =>
+          match(row.original.status)
+            .with(EmailDomainStatus.ACTIVE, () => (
+              <Badge>
+                <CheckCircle2Icon className="mr-2 h-4 w-4 text-green-500 dark:text-green-300" />
+                <Trans>Active</Trans>
+              </Badge>
+            ))
+            .with(EmailDomainStatus.PENDING, () => (
+              <Badge variant="warning">
+                <ClockIcon className="mr-2 h-4 w-4 text-yellow-500 dark:text-yellow-200" />
+                <Trans>Pending</Trans>
+              </Badge>
+            ))
+            .exhaustive(),
+      },
+      {
+        header: _(msg`Emails`),
+        accessorKey: '_count',
+        cell: ({ row }) => row.original._count.emails,
+      },
+      {
+        header: _(msg`Created`),
+        accessorKey: 'createdAt',
+        cell: ({ row }) => i18n.date(row.original.createdAt),
+      },
+      {
+        header: _(msg`Last Verified`),
+        accessorKey: 'lastVerifiedAt',
+        cell: ({ row }) =>
+          row.original.lastVerifiedAt ? i18n.date(row.original.lastVerifiedAt) : '-',
+      },
+      {
+        header: _(msg`Actions`),
+        cell: ({ row }) => (
+          <Button asChild variant="outline" size="sm">
+            <Link to={`/admin/email-domains/${row.original.id}`}>
+              <Trans>View</Trans>
+            </Link>
+          </Button>
+        ),
+      },
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
+
+  const onPaginationChange = (newPage: number, newPerPage: number) => {
+    updateSearchParams({
+      page: newPage,
+      perPage: newPerPage,
+    });
+  };
+
+  const onStatusChange = (value: string) => {
+    updateSearchParams({
+      status: value === 'ALL' ? undefined : value,
+      page: 1,
+    });
+  };
+
+  return (
+    <div>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Email Domains</Trans>
+      </h2>
+
+      <div className="mt-8">
+        <div className="flex flex-col gap-4 sm:flex-row">
+          <Input
+            className="flex-1"
+            type="search"
+            placeholder={_(msg`Search by domain or organisation name`)}
+            value={term}
+            onChange={(e) => setTerm(e.target.value)}
+          />
+
+          <Select value={statusParam} onValueChange={onStatusChange}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder={_(msg`Filter by status`)} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="ALL">
+                <Trans>All Statuses</Trans>
+              </SelectItem>
+              <SelectItem value="PENDING">
+                <Trans>Pending</Trans>
+              </SelectItem>
+              <SelectItem value="ACTIVE">
+                <Trans>Active</Trans>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="relative mt-4">
+          <DataTable
+            columns={columns}
+            data={results.data}
+            perPage={results.perPage ?? 20}
+            currentPage={results.currentPage ?? 1}
+            totalPages={results.totalPages ?? 1}
+            onPaginationChange={onPaginationChange}
+          >
+            {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+          </DataTable>
+
+          {isFindEmailDomainsLoading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+              <Loader className="h-8 w-8 animate-spin text-gray-500" />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

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

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

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

@@ -10,6 +10,12 @@ 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,
@@ -30,6 +36,7 @@ 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';
 
@@ -197,7 +204,7 @@ const AdminUserPage = ({ user }: { user: TGetUserResponse }) => {
             <h3 className="text-lg font-semibold leading-none tracking-tight">
               <Trans>User Organisations</Trans>
             </h3>
-            <p className="text-muted-foreground mt-1.5 text-sm">
+            <p className="mt-1.5 text-sm text-muted-foreground">
               <Trans>Organisations that the user is a member of.</Trans>
             </p>
           </div>
@@ -219,6 +226,28 @@ 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,6 +60,7 @@ export default function OrganisationSettingsDocumentPage() {
         defaultRecipients,
         delegateDocumentOwnership,
         aiFeaturesEnabled,
+        envelopeExpirationPeriod,
       } = data;
 
       if (
@@ -90,6 +91,7 @@ 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,7 @@ 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 { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
@@ -16,12 +17,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';
@@ -154,7 +155,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 +172,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 +197,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

@@ -58,7 +58,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 +67,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>
@@ -99,7 +99,9 @@ export default function EnvelopeEditorPage({ params }: Route.ComponentProps) {
   return (
     <EnvelopeEditorProvider initialEnvelope={envelope}>
       <EnvelopeRenderProvider
+        version="current"
         envelope={envelope}
+        envelopeItems={envelope.envelopeItems}
         token={undefined}
         fields={envelope.fields}
         recipients={envelope.recipients}

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

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

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

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

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

@@ -66,7 +66,9 @@ export default function DocumentsFoldersPage() {
             onClick={() => navigateToFolder(null)}
           >
             <HomeIcon className="h-4 w-4" />
-            <span>Home</span>
+            <span>
+              <Trans>Home</Trans>
+            </span>
           </Button>
         </div>
 
@@ -76,7 +78,7 @@ export default function DocumentsFoldersPage() {
       </div>
 
       <div className="relative w-full max-w-md py-6">
-        <SearchIcon className="text-muted-foreground absolute left-2 top-9 h-4 w-4" />
+        <SearchIcon className="absolute left-2 top-9 h-4 w-4 text-muted-foreground" />
         <Input
           placeholder={t`Search folders...`}
           value={searchTerm}
@@ -91,7 +93,7 @@ export default function DocumentsFoldersPage() {
 
       {isFoldersLoading ? (
         <div className="mt-6 flex justify-center">
-          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       ) : (
         <>
@@ -126,7 +128,7 @@ export default function DocumentsFoldersPage() {
 
           <div>
             {searchTerm && foldersData?.folders.filter(isFolderMatchingSearch).length === 0 && (
-              <div className="text-muted-foreground mt-6 text-center">
+              <div className="mt-6 text-center text-muted-foreground">
                 <Trans>No folders found matching "{searchTerm}"</Trans>
               </div>
             )}