v2.10.0

Some PDFs have CropBox or MediaBox entries stored as a PDFDict
instead of the expected PDFArray, causing pdf-lib to throw during
lookup.

Wrap both box lookups in try-catch and fall back to A4 dimensions
when neither can be parsed

.agents/plans/bright-emerald-flower-bullmq-background-jobs.md

@@ -0,0 +1,239 @@
+---
+date: 2026-03-26
+title: Bullmq Background Jobs
+---
+
+## Context
+
+The codebase has a well-designed background job provider abstraction (`BaseJobProvider`) with two existing implementations:
+
+- **InngestJobProvider** — cloud/SaaS provider, externally hosted
+- **LocalJobProvider** — database-backed (Postgres via Prisma), uses HTTP self-calls to dispatch
+
+The goal is to add a third provider backed by a proper job queue library for self-hosted deployments that need more reliability than the Local provider offers.
+
+### Current Architecture
+
+All code lives in `packages/lib/jobs/`:
+
+- `client/base.ts` — Abstract `BaseJobProvider` with 4 methods: `defineJob()`, `triggerJob()`, `getApiHandler()`, `startCron()`
+- `client/client.ts` — `JobClient` facade, selects provider via `NEXT_PRIVATE_JOBS_PROVIDER` env var
+- `client/inngest.ts` — Inngest implementation
+- `client/local.ts` — Local/Postgres implementation
+- `client/_internal/job.ts` — Core types: `JobDefinition`, `JobRunIO`, `SimpleTriggerJobOptions`
+- `definitions/` — 19 job definitions (15 event-triggered, 4 cron)
+
+The `JobRunIO` interface provided to handlers includes:
+
+- `runTask(cacheKey, callback)` — idempotent task execution (cached via `BackgroundJobTask` table)
+- `triggerJob(cacheKey, options)` — chain jobs from within handlers
+- `wait(cacheKey, ms)` — delay/sleep (not implemented in Local provider)
+- `logger` — structured logging
+
+### Local Provider Limitations
+
+The current Local provider has several issues that motivate this work:
+
+1. `io.wait()` throws "Not implemented"
+2. HTTP self-call with 150ms fire-and-forget `Promise.race` is fragile
+3. No concurrency control — jobs run in the web server process
+4. No real retry backoff (immediate re-dispatch)
+5. No monitoring/visibility into job status
+6. Jobs compete for resources with HTTP request handling
+
+---
+
+## Provider Evaluation
+
+Three alternatives were evaluated against the existing provider interface and project requirements.
+
+### BullMQ (Redis-backed) — Recommended
+
+| Attribute           | Detail                     |
+| ------------------- | -------------------------- |
+| Backend             | Redis 7.x                  |
+| npm downloads/month | ~15M                       |
+| TypeScript          | Native                     |
+| Delayed jobs        | Yes (ms precision)         |
+| Cron/repeatable     | Yes (`upsertJobScheduler`) |
+| Retries + backoff   | Yes (exponential, custom)  |
+| Concurrency control | Yes (per-worker)           |
+| Rate limiting       | Yes (per-queue, per-group) |
+| Dashboard           | Bull Board (mature)        |
+| New infrastructure  | Yes — Redis required       |
+
+**Why BullMQ**: Most mature and widely-adopted Node.js queue. Native delayed jobs solve the `io.wait()` gap. Redis is purpose-built for queue workloads and keeps Postgres clean for application data. Bull Board gives immediate operational visibility. The provider abstraction already exists so wrapping BullMQ is straightforward.
+
+**Trade-off**: Requires Redis, which is additional infrastructure. However, Redis is a single Docker Compose service or a free Upstash tier, and the operational benefit is significant.
+
+### pg-boss (PostgreSQL-backed) — Strong Alternative
+
+| Attribute           | Detail                        |
+| ------------------- | ----------------------------- |
+| Backend             | PostgreSQL (existing)         |
+| npm downloads/month | ~1.4M                         |
+| TypeScript          | Native                        |
+| Delayed jobs        | Yes (`startAfter`)            |
+| Cron/repeatable     | Yes (`schedule()`)            |
+| New infrastructure  | No — reuses existing Postgres |
+
+**Why it could work**: Zero new infrastructure since the project already uses Postgres. API maps well to existing patterns.
+
+**Why it's second choice**: Polling-based (no LISTEN/NOTIFY), adds write amplification to the primary database, smaller ecosystem, no dashboard. At scale, queue operations on the primary database become a concern.
+
+### Graphile Worker (PostgreSQL-backed) — Less Suitable
+
+Uses LISTEN/NOTIFY for instant pickup but has a file-based task convention and separate schema that don't mesh well with the existing Prisma-centric architecture. Would require more adapter work.
+
+### Improving the Local Provider — Not Recommended
+
+Fixing the Local provider's issues (wait support, replacing HTTP self-calls, adding concurrency control, backoff) essentially means rebuilding a queue library from scratch with less robustness and no community maintenance.
+
+---
+
+## Recommendation
+
+**Proceed with BullMQ.** It's the most capable option, maps cleanly to the existing provider interface, and is the standard choice for production Node.js applications. Redis is lightweight infrastructure with managed options available at every cloud provider.
+
+**If Redis is a hard blocker**, pg-boss is the clear fallback — but the plan below assumes BullMQ.
+
+---
+
+## Implementation Plan
+
+### Phase 1: BullMQ Provider Core
+
+**File: `packages/lib/jobs/client/bullmq.ts`**
+
+Create `BullMQJobProvider extends BaseJobProvider` with singleton pattern matching the existing providers.
+
+Key implementation details:
+
+1. **Constructor / `getInstance()`**
+   - Initialize a Redis `IORedis` connection using new env var: `NEXT_PRIVATE_REDIS_URL`
+   - Create a single `Queue` instance for dispatching jobs, using `NEXT_PRIVATE_REDIS_PREFIX` as the BullMQ `prefix` option (defaults to `documenso` if unset). This namespaces all Redis keys so multiple environments (worktrees, branches, developers) sharing the same Redis instance don't collide.
+   - Create a single `Worker` instance for processing jobs (in-process, same prefix)
+   - Store job definitions in a `_jobDefinitions` record (same pattern as Local provider)
+
+2. **`defineJob()`**
+   - Store definition in `_jobDefinitions` keyed by ID
+   - If the definition has a `trigger.cron`, register it via `queue.upsertJobScheduler()` with the cron expression
+
+3. **`triggerJob(options)`**
+   - Find eligible definitions by `trigger.name` (same lookup as Local provider)
+   - For each, call `queue.add(jobDefinitionId, payload)` with appropriate options
+   - Support `options.id` for deduplication via BullMQ's `jobId` option
+
+4. **`getApiHandler()`**
+   - Return a minimal health-check / queue-status handler. Unlike the Local provider, BullMQ workers don't need an HTTP endpoint to receive jobs — they pull from Redis directly. The API handler can return queue metrics for monitoring.
+
+5. **`startCron()`**
+   - No-op — cron is handled by BullMQ's `upsertJobScheduler` registered during `defineJob()`
+
+6. **Worker setup**
+   - Single worker processes all job types by dispatching to the correct handler from `_jobDefinitions`
+   - Configure concurrency with a default of 10 (overridable via `NEXT_PRIVATE_BULLMQ_CONCURRENCY` env var for those who need to tune it)
+   - Configure retry with exponential backoff: `backoff: { type: 'exponential', delay: 1000 }`
+   - Default 3 retries (matching current Local provider behavior)
+
+7. **`createJobRunIO(jobId)`** — Implement `JobRunIO`:
+   - `runTask()`: Reuse the existing `BackgroundJobTask` Prisma table for idempotent task tracking (same pattern as Local provider)
+   - `triggerJob()`: Delegate to `this.triggerJob()`
+   - `wait()`: Throw "Not implemented" (same as Local provider). No handler uses `io.wait()` so this has zero impact
+   - `logger`: Same console-based logger pattern as Local provider
+
+### Phase 2: Provider Registration
+
+**File: `packages/lib/jobs/client/client.ts`**
+
+Add `'bullmq'` case to the provider match:
+
+```typescript
+this._provider = match(env('NEXT_PRIVATE_JOBS_PROVIDER'))
+  .with('inngest', () => InngestJobProvider.getInstance())
+  .with('bullmq', () => BullMQJobProvider.getInstance())
+  .otherwise(() => LocalJobProvider.getInstance());
+```
+
+**File: `packages/tsconfig/process-env.d.ts`**
+
+Add `'bullmq'` to the `NEXT_PRIVATE_JOBS_PROVIDER` type union and add Redis env var types:
+
+```typescript
+NEXT_PRIVATE_JOBS_PROVIDER?: 'inngest' | 'local' | 'bullmq';
+NEXT_PRIVATE_REDIS_URL?: string;
+NEXT_PRIVATE_REDIS_PREFIX?: string;
+NEXT_PRIVATE_BULLMQ_CONCURRENCY?: string;
+```
+
+**File: `.env.example`**
+
+Add Redis configuration examples:
+
+```env
+NEXT_PRIVATE_JOBS_PROVIDER="local"  # Options: local, inngest, bullmq
+NEXT_PRIVATE_REDIS_URL="redis://localhost:63790"
+NEXT_PRIVATE_REDIS_PREFIX="documenso"  # Namespace for Redis keys (useful when sharing a Redis instance)
+```
+
+**File: `turbo.json`**
+
+Add `NEXT_PRIVATE_REDIS_URL`, `NEXT_PRIVATE_REDIS_PREFIX`, and `NEXT_PRIVATE_BULLMQ_CONCURRENCY` to the env vars list for cache invalidation.
+
+### Phase 3: Infrastructure & Dependencies
+
+**File: `packages/lib/package.json`**
+
+Add dependencies:
+
+- `bullmq` — the queue library
+- `ioredis` — Redis client (peer dependency of BullMQ, but explicit is better)
+
+**File: `docker-compose.yml` (or equivalent)**
+
+Add Redis service for local development:
+
+```yaml
+redis:
+  image: redis:7-alpine
+  ports:
+    - '6379:6379'
+```
+
+### Phase 4: Optional Enhancements
+
+These are not required for the initial implementation but worth considering for follow-up:
+
+1. **Bull Board integration** — Add a `/api/jobs/dashboard` route that serves Bull Board UI for monitoring. Gate behind an admin auth check.
+
+2. **Separate worker process** — Add an `apps/worker` entry point that runs BullMQ workers without the web server, for deployments that want to isolate job processing from request handling.
+
+3. **Graceful shutdown** — Register `SIGTERM`/`SIGINT` handlers to call `worker.close()` and `queue.close()` for clean shutdown.
+
+4. **BackgroundJob table integration** — Optionally continue writing to the `BackgroundJob` Prisma table for audit/history, using BullMQ events (`completed`, `failed`) to update status. This preserves the existing database-level visibility.
+
+---
+
+## Files to Create/Modify
+
+| File                                 | Action     | Description                              |
+| ------------------------------------ | ---------- | ---------------------------------------- |
+| `packages/lib/jobs/client/bullmq.ts` | **Create** | BullMQ provider implementation           |
+| `packages/lib/jobs/client/client.ts` | Modify     | Add `'bullmq'` provider case             |
+| `packages/tsconfig/process-env.d.ts` | Modify     | Add type for `'bullmq'` + Redis env vars |
+| `.env.example`                       | Modify     | Add Redis config example                 |
+| `turbo.json`                         | Modify     | Add Redis env var to cache keys          |
+| `packages/lib/package.json`          | Modify     | Add `bullmq` + `ioredis` dependencies    |
+| `docker-compose.yml`                 | Modify     | Add Redis service                        |
+
+---
+
+## Open Questions
+
+1. **Should the BullMQ provider also write to the `BackgroundJob` Prisma table?** This would maintain audit history and allow existing admin tooling to query job status. Trade-off is dual-write complexity.
+
+2. **Redis connection resilience**: Should the provider gracefully degrade if Redis is unavailable (e.g., fall back to Local provider), or fail hard? Failing hard is simpler and more predictable.
+
+## Resolved Questions
+
+- **`io.wait()`**: Not a concern. Only Inngest implements it (via `step.sleep`), the Local provider throws "Not implemented", and no job handler calls `io.wait()`. The BullMQ provider can throw "Not implemented" identically to the Local provider.

.agents/scratches/search-query-optimization.md

@@ -0,0 +1,113 @@
+---
+date: 2026-03-07
+title: Search Query Optimization
+---
+
+## Problem
+
+The `searchDocumentsWithKeyword` and `searchTemplatesWithKeyword` functions generate a single massive Prisma `findMany` with 7 OR branches. This produces a SQL query that:
+
+- Joins `Team` twice (aliased j3 and j8) for the two team-access branches
+- Embeds 4-level deep EXISTS subqueries (`TeamGroup -> OrganisationGroup -> OrganisationGroupMember -> OrganisationMember`) for each team branch
+- Uses `ILIKE` across multiple columns with no way for Postgres to use indexes effectively across the OR
+- Includes `recipients: true` on the result even though only a small subset of fields are needed
+- Fetches all matching rows then filters visibility **in application code**
+
+With 1,000 documents seeded under `medium-account@documenso.com`, this query is noticeably slow.
+
+---
+
+## Option A: Pre-resolve team IDs, keep Prisma
+
+**Change:** Before the envelope query, resolve the user's accessible team IDs in a single query:
+
+```ts
+const teamIds = await prisma.teamGroup
+  .findMany({
+    where: {
+      organisationGroup: {
+        organisationGroupMembers: {
+          some: { organisationMember: { userId } },
+        },
+      },
+    },
+    select: { teamId: true },
+  })
+  .then((rows) => [...new Set(rows.map((r) => r.teamId))]);
+```
+
+Then replace `team: buildTeamWhereQuery(...)` with `teamId: { in: teamIds }` in the envelope query.
+
+**Benefits:**
+
+- Eliminates the duplicated 4-level deep join chain from the envelope query
+- The team ID resolution is a simple indexed lookup (runs once, not twice)
+- Minimal code change -- still Prisma, same structure
+- Can also pre-resolve team roles to move visibility filtering into the WHERE clause
+
+**Drawbacks:**
+
+- Still a single large OR query with ILIKE branches
+- Prisma still generates suboptimal SQL for the remaining OR conditions
+
+---
+
+## Option B: Kysely rewrite with pre-resolved teams
+
+**Change:** Rewrite using Kysely (already set up in codebase as `kyselyPrisma.$kysely`). Follow the pattern in `find-envelopes.ts` -- use Kysely for filtering/ID fetching, then Prisma for hydration.
+
+Structure as a UNION of targeted queries instead of a single OR:
+
+```
+Query 1: owned docs matching title/externalId (simple indexed lookup)
+Query 2: docs where user is recipient matching title (EXISTS on Recipient)
+Query 3: team docs matching title/externalId (using pre-resolved teamIds)
+UNION ALL -> deduplicate -> ORDER BY createdAt DESC -> LIMIT 20
+```
+
+Then hydrate the 20 IDs with Prisma for the include data.
+
+**Benefits:**
+
+- Each sub-query is simple and independently optimizable by Postgres
+- UNION eliminates the massive OR which forces bad query plans
+- Kysely gives control over exact SQL structure
+- Only hydrate the final 20 results (not all matches)
+- Follows existing `find-envelopes.ts` pattern -- not a new paradigm
+
+**Drawbacks:**
+
+- More code than Option A
+- Two query layers (Kysely for IDs, Prisma for hydration)
+
+---
+
+## Option C: Hybrid -- pre-resolve teams + simplify Prisma OR
+
+**Change:** Pre-resolve team IDs (like Option A), but also restructure the Prisma query to reduce OR branches:
+
+- Merge "owned + title" and "owned + externalId" and "owned + recipient email" into a single owned-docs branch with nested OR
+- Merge "team + title" and "team + externalId" into a single team-docs branch
+- Keep "recipient inbox" branches separate
+
+This reduces from 7 OR branches to ~3-4, with simpler conditions in each.
+
+**Benefits:**
+
+- Simpler than Kysely rewrite
+- Fewer OR branches = better query plan
+- Pre-resolved team IDs eliminate the deep joins
+- Still pure Prisma
+
+**Drawbacks:**
+
+- Postgres still has to handle OR across different access patterns in one query
+- Less control over SQL than Kysely
+
+---
+
+## Recommendation
+
+**Option B (Kysely)** is the strongest choice. The codebase already uses this exact pattern for `find-envelopes.ts` which solves the same class of problem. The UNION approach gives Postgres the best chance at using indexes per sub-query. Pre-resolving team IDs is a prerequisite for all options and is trivially cheap.
+
+The template search query has the same structure and should get the same treatment.

.agents/skills/create-documentation/SKILL.md

@@ -0,0 +1,337 @@
+---
+name: create-documentation
+description: Generate markdown documentation for a module or feature
+---
+
+You are creating proper markdown documentation for a feature or guide in the Documenso documentation site.
+
+**Read [WRITING_STYLE.md](../../../WRITING_STYLE.md) first** for tone, formatting conventions, and anti-patterns to avoid.
+
+## Your Task
+
+1. **Identify the scope** - Based on the conversation context, determine what feature or topic needs documentation. Ask the user if unclear.
+2. **Identify the audience** - Is this for Users, Developers, or Self-Hosters?
+3. **Read the source code** - Understand the feature, API, or configuration being documented.
+4. **Read existing docs** - Check `apps/docs/content/docs/` for documentation to update.
+5. **Write comprehensive documentation** - Create or update MDX docs following the patterns below.
+6. **Update navigation** - Add to the relevant `meta.json` if creating a new page.
+
+## Documentation Framework
+
+This project uses [Fumadocs](https://fumadocs.dev). All documentation lives in `apps/docs/content/docs/` as MDX files. The docs app is a Next.js app at `apps/docs/`.
+
+## Documentation Structure
+
+```
+apps/docs/content/docs/
+├── index.mdx              # Landing page with audience navigation
+├── meta.json              # Root navigation: guides + resources
+├── users/                 # Application usage guides
+│   ├── meta.json          # { "root": true, "pages": [...] }
+│   ├── getting-started/   # Account creation, first document
+│   ├── documents/         # Upload, recipients, fields, send
+│   │   └── advanced/      # AI detection, visibility, placeholders
+│   ├── templates/         # Create and use templates
+│   ├── organisations/     # Overview, members, groups, SSO, billing
+│   │   ├── single-sign-on/
+│   │   └── preferences/
+│   └── settings/          # Profile, security, API tokens
+├── developers/            # API and integration docs
+│   ├── meta.json          # { "root": true, "pages": [...] }
+│   ├── getting-started/   # Authentication, first API call
+│   ├── api/               # Documents, recipients, fields, templates, teams
+│   ├── webhooks/          # Setup, events, verification
+│   ├── embedding/         # Authoring, direct links, CSS vars, SDKs
+│   │   └── sdks/          # React, Vue, Svelte, Solid, Preact, Angular
+│   ├── examples/          # Common workflows
+│   ├── local-development/ # Quickstart, manual, translations
+│   └── contributing/      # Contributing translations
+├── self-hosting/          # Self-hosting documentation
+│   ├── meta.json          # { "root": true, "pages": [...] }
+│   ├── getting-started/   # Quick start, requirements, tips
+│   ├── deployment/        # Docker, docker-compose, Kubernetes, Railway
+│   ├── configuration/     # Environment, database, email, storage
+│   │   ├── signing-certificate/  # Local, Google Cloud HSM, timestamp
+│   │   └── advanced/      # OAuth providers, AI features
+│   └── maintenance/       # Upgrades, backups, troubleshooting
+├── concepts/              # Shared across audiences
+│   └── ...                # Document lifecycle, field types, signing
+├── compliance/            # eSign, GDPR, standards, certifications
+└── policies/              # Terms, privacy, security, licenses
+```
+
+### Where to Put Documentation
+
+| Type                | Location                                         | When to use                                        |
+| ------------------- | ------------------------------------------------ | -------------------------------------------------- |
+| **User Guide**      | `apps/docs/content/docs/users/<section>/`        | UI workflows for using the Documenso web app       |
+| **Developer Guide** | `apps/docs/content/docs/developers/<section>/`   | API reference, SDK guides, webhooks, embedding     |
+| **Self-Hosting**    | `apps/docs/content/docs/self-hosting/<section>/` | Deployment, configuration, environment variables   |
+| **Concept**         | `apps/docs/content/docs/concepts/`               | Cross-audience concepts (document lifecycle, etc.) |
+| **Compliance**      | `apps/docs/content/docs/compliance/`             | Legal and regulatory documentation                 |
+
+### Navigation (meta.json)
+
+Each directory has a `meta.json` controlling navigation order:
+
+```json
+{
+  "title": "Section Title",
+  "pages": ["getting-started", "documents", "templates"]
+}
+```
+
+Top-level audience sections use `"root": true`:
+
+```json
+{
+  "title": "Users",
+  "description": "Send and sign documents",
+  "root": true,
+  "pages": ["getting-started", "documents", "templates", "organisations", "settings"]
+}
+```
+
+Root `meta.json` uses `---Label---` for section dividers:
+
+```json
+{
+  "title": "Documentation",
+  "pages": [
+    "---Guides---",
+    "users",
+    "developers",
+    "self-hosting",
+    "---Resources---",
+    "concepts",
+    "compliance",
+    "policies"
+  ]
+}
+```
+
+## MDX File Format
+
+### Frontmatter
+
+Every page needs frontmatter:
+
+```yaml
+---
+title: Upload Documents
+description: Upload documents to Documenso to prepare them for signing. Covers supported formats, file size limits, and upload methods.
+---
+```
+
+### Fumadocs Components
+
+Import components at the top of the file (after frontmatter):
+
+```mdx
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+;
+```
+
+Callouts (use sparingly for warnings, beta features, security):
+
+```mdx
+<Callout type="info">Informational note about behavior.</Callout>
+
+<Callout type="warn">Warning about potential issues or breaking changes.</Callout>
+
+<Callout type="error">Critical warning about data loss or security.</Callout>
+```
+
+Steps (for sequential UI instructions):
+
+```mdx
+{/* prettier-ignore */}
+<Steps>
+  <Step>
+    ### Step title
+
+    Step description.
+
+  </Step>
+  <Step>
+    ### Next step
+
+    Next description.
+
+  </Step>
+</Steps>
+```
+
+Tabs (for multiple approaches or platforms):
+
+````mdx
+<Tabs items={['cURL', 'JavaScript', 'Python']}>
+  <Tab value="cURL">```bash curl -X POST ... ```</Tab>
+  <Tab value="JavaScript">```typescript const response = await fetch(...) ```</Tab>
+</Tabs>
+````
+
+## Page Structure by Audience
+
+### User Documentation
+
+```mdx
+---
+title: Feature Name
+description: Brief description for SEO and previews.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+
+## Limitations
+
+| Limitation        | Value    |
+| ----------------- | -------- |
+| Supported format  | PDF only |
+| Maximum file size | 50MB     |
+
+## How to Do the Thing
+
+{/* prettier-ignore */}
+<Steps>
+  <Step>
+    ### Navigate to the page
+
+    Open **Settings > Feature**.
+
+  </Step>
+  <Step>
+    ### Configure the setting
+
+    Fill in the required fields and click **Save**.
+
+  </Step>
+</Steps>
+
+---
+
+## See Also
+
+- [Related Guide](/docs/users/related)
+```
+
+### Developer Documentation
+
+````mdx
+---
+title: Documents API
+description: Create, manage, and send documents for signing via the API.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+<Callout type="warn">
+  This guide may not reflect the latest endpoints. For an always up-to-date reference, see the
+  [OpenAPI Reference](https://openapi.documenso.com).
+</Callout>
+
+## Overview
+
+Brief description of the resource and what you can do with it.
+
+## Resource Object
+
+| Property | Type   | Description       |
+| -------- | ------ | ----------------- |
+| `id`     | string | Unique identifier |
+| `status` | string | Current status    |
+
+## Create a Resource
+
+```typescript
+const response = await fetch('https://app.documenso.com/api/v2/document', {
+  method: 'POST',
+  headers: {
+    Authorization: 'Bearer YOUR_API_TOKEN',
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify({
+    title: 'Service Agreement',
+  }),
+});
+```
+````
+
+---
+
+## See Also
+
+- [Related Guide](/docs/developers/related)
+
+````
+
+### Self-Hosting Documentation
+
+```mdx
+---
+title: Environment Variables
+description: Complete reference for all environment variables used to configure Documenso.
+---
+
+## Required Variables
+
+| Variable           | Description                                      |
+| ------------------ | ------------------------------------------------ |
+| `NEXTAUTH_SECRET`  | Secret key for session encryption (min 32 chars)  |
+| `DATABASE_URL`     | PostgreSQL connection URL                        |
+
+---
+
+## Optional Variables
+
+| Variable       | Default | Description            |
+| -------------- | ------- | ---------------------- |
+| `PORT`         | `3000`  | Port the server runs on |
+
+---
+
+## See Also
+
+- [Database Configuration](/docs/self-hosting/configuration/database)
+````
+
+## Documentation Audiences
+
+Tailor content to the audience:
+
+- **User docs**: Focus on UI workflows, bold UI elements (**Settings**, **Save**), use `>` for navigation paths (**Settings > Team > Members**), number sequential steps, no code required
+- **Developer docs**: API/SDK examples, authentication, webhooks, code samples in TypeScript, link to OpenAPI reference
+- **Self-hosting docs**: Deployment guides, environment variables, Docker/non-Docker approaches, system requirements, troubleshooting
+
+## Guidelines
+
+See [WRITING_STYLE.md](../../../WRITING_STYLE.md) for complete guidelines. Key points:
+
+- **Tone**: Direct, second-person, no emojis, no excessive personality
+- **Examples**: Progressive complexity, all must be valid TypeScript
+- **Tables**: Use Sharp-style nested parameter tables for API docs
+- **Callouts**: Use sparingly for warnings, beta features, security
+- **Cross-references**: Link related docs, add "See Also" sections
+- **Navigation**: Update `meta.json` when adding new pages
+- **Limitations**: Explicitly list what is NOT supported
+- **Images**: Use `.webp` format, store in `apps/docs/public/`
+
+## Process
+
+1. **Identify the audience** - Users, Developers, or Self-Hosters?
+2. **Explore the code** - Read source files to understand the feature
+3. **Check existing docs** - Look in `apps/docs/content/docs/` for related pages
+4. **Draft the structure** - Outline sections before writing
+5. **Write content** - Fill in each section following audience-specific patterns
+6. **Update navigation** - Add to relevant `meta.json` if creating a new page
+7. **Add cross-references** - Link from related docs, add "See Also" section
+
+## Begin
+
+Analyze the conversation context to determine the documentation scope, read the relevant source code, and create comprehensive MDX documentation in `apps/docs/content/docs/`.

.env.example

@@ -35,6 +35,8 @@ NEXT_PRIVATE_OIDC_PROMPT="login"
 NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
 # URL used by the web app to request itself (e.g. local background jobs)
 NEXT_PRIVATE_INTERNAL_WEBAPP_URL="http://localhost:3000"
+# OPTIONAL: Comma-separated hostnames or IPs whose webhooks are allowed to resolve to private/loopback addresses. (e.g., internal.example.com,192.168.1.5).
+NEXT_PRIVATE_WEBHOOK_SSRF_BYPASS_HOSTS=
 
 # [[SERVER]]
 # OPTIONAL: The port the server will listen on. Defaults to 3000.
@@ -143,8 +145,15 @@ NEXT_PRIVATE_STRIPE_API_KEY=
 NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
 
 # [[BACKGROUND JOBS]]
+# Available options: local (default) | inngest | bullmq
 NEXT_PRIVATE_JOBS_PROVIDER="local"
 NEXT_PRIVATE_INNGEST_EVENT_KEY=
+# OPTIONAL: Redis URL for the BullMQ jobs provider.
+NEXT_PRIVATE_REDIS_URL="redis://localhost:63790"
+# OPTIONAL: Key prefix for Redis to namespace queues (useful when sharing a Redis instance).
+NEXT_PRIVATE_REDIS_PREFIX="documenso"
+# OPTIONAL: Number of concurrent jobs to process. Defaults to 10.
+# NEXT_PRIVATE_BULLMQ_CONCURRENCY=10
 
 # [[FEATURES]]
 # OPTIONAL: Leave blank to disable PostHog and feature flags.
@@ -153,6 +162,8 @@ NEXT_PUBLIC_POSTHOG_KEY=""
 NEXT_PUBLIC_FEATURE_BILLING_ENABLED=
 # OPTIONAL: Leave blank to allow users to signup through /signup page.
 NEXT_PUBLIC_DISABLE_SIGNUP=
+# OPTIONAL: Comma-separated list of email domains allowed to sign up (e.g., example.com,acme.org).
+NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS=
 # OPTIONAL: Set to true to use internal webapp url in browserless requests.
 NEXT_PUBLIC_USE_INTERNAL_URL_BROWSERLESS=false
 
@@ -171,6 +182,14 @@ GOOGLE_VERTEX_LOCATION="global"
 # https://console.cloud.google.com/vertex-ai/studio/settings/api-keys
 GOOGLE_VERTEX_API_KEY=""
 
+# [[CLOUDFLARE TURNSTILE]]
+# OPTIONAL: Cloudflare Turnstile site key (public). When configured, Turnstile challenges
+# will be shown on sign-up (visible) and sign-in (invisible) pages.
+# See: https://developers.cloudflare.com/turnstile/
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=
+# OPTIONAL: Cloudflare Turnstile secret key (server-side verification).
+NEXT_PRIVATE_TURNSTILE_SECRET_KEY=
+
 # [[E2E Tests]]
 E2E_TEST_AUTHENTICATE_USERNAME="Test User"
 E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"

.github/actions/node-install/action.yml

@@ -12,6 +12,10 @@ runs:
       with:
         node-version: ${{ inputs.node_version }}
 
+    - name: Enable corepack
+      shell: bash
+      run: corepack enable npm
+
     - name: Cache npm
       uses: actions/cache@v3
       with:

.github/labeler.yml

@@ -1,5 +1,8 @@
 'apps: web':
-  - apps/web/**
+  - apps/remix/**
+
+'type: documentation':
+  - apps/docs/**
 
 'version bump 👀':
   - '**/package.json'

.gitignore

@@ -63,6 +63,7 @@ CLAUDE.md
 
 # scripts
 scripts/output*
+scripts/bench-*
 
 # license
 .documenso-license.json
@@ -70,3 +71,6 @@ scripts/output*
 
 # tmp
 tmp/
+
+# opencode
+.opencode/package-lock.json

.npmrc

@@ -1,2 +1,3 @@
 legacy-peer-deps = true
-prefer-dedupe = true
+prefer-dedupe = true
+min-release-age = 7

.opencode/commands/create-documentation.md

@@ -0,0 +1,27 @@
+---
+description: Generate markdown documentation for a module or feature
+argument-hint: <topic-or-feature>
+---
+
+You are generating documentation for the Documenso project.
+
+## Your Task
+
+Load and follow the skill at `.agents/skills/create-documentation/SKILL.md`. It contains the complete instructions for writing documentation including:
+
+- Documentation structure and file locations
+- MDX format and Fumadocs components
+- Audience-specific patterns (Users, Developers, Self-Hosters)
+- Navigation (`meta.json`) updates
+- Writing style guidelines
+
+## Context
+
+The topic or feature to document is: `$ARGUMENTS`
+
+## Begin
+
+1. **Read the skill** at `.agents/skills/create-documentation/SKILL.md`
+2. **Read WRITING_STYLE.md** for tone and formatting conventions
+3. **Follow the skill instructions** to create comprehensive documentation
+4. **Use TodoWrite** to track your progress throughout

.opencode/commands/create-justification.md

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

.opencode/commands/create-plan.md

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

.opencode/commands/create-scratch.md

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

.opencode/commands/document.md

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

.opencode/skills/agent-browser

@@ -1 +0,0 @@
-../../.agents/skills/agent-browser

ARCHITECTURE.md

@@ -235,6 +235,7 @@ Processes async jobs.
 | Provider | Description           | Env Value         |
 | -------- | --------------------- | ----------------- |
 | Local    | Database-backed queue | `local` (default) |
+| BullMQ   | Redis-backed queue    | `bullmq`          |
 | Inngest  | Managed cloud service | `inngest`         |
 
 **Config**: `NEXT_PRIVATE_JOBS_PROVIDER`

README.md

@@ -182,6 +182,9 @@ git clone https://github.com/<your-username>/documenso
 - Optional: Seed the database using `npm run prisma:seed -w @documenso/prisma` to create a test user and document.
 - Optional: Create your own signing certificate.
   - To generate your own using these steps and a Linux Terminal or Windows Subsystem for Linux (WSL), see **[Create your own signing certificate](./SIGNING.md)**.
+- Optional: Configure job provider for document reminders.
+  - The default local job provider does not support scheduled jobs required for document reminders.
+  - To enable reminders, set `NEXT_PRIVATE_JOBS_PROVIDER=inngest` and provide `NEXT_PRIVATE_INNGEST_EVENT_KEY` in your `.env` file.
 
 ### Run in Gitpod
 

apps/docs/content/docs/compliance/certifications.mdx

@@ -43,7 +43,7 @@ ISO 27001 is an international standard for managing information security, specif
 
 ## HIPAA
 
-<Callout type="warn">Status: [Planned](https://github.com/documenso/backlog/issues/25)</Callout>
+<Callout type="info">Status: [Compliant](https://documen.so/trust)</Callout>
 
 The HIPAA (Health Insurance Portability and Accountability Act) is a U.S. law designed to protect patient health information's privacy and security and improve the healthcare system's efficiency and effectiveness.
 

apps/docs/content/docs/developers/api/developer-mode.mdx

@@ -1,17 +1,22 @@
 ---
 title: Developer Mode
-description: Advanced development tools for debugging field coordinates and integrating with the Documenso API.
+description: Advanced development tools for debugging field IDs, recipient IDs, coordinates and integrating with the Documenso API.
 ---
 
 ## Overview
 
 Developer mode provides additional tools and features to help you integrate and debug Documenso.
 
-## Field Coordinates
+## Field Information
 
-Field coordinates represent the position of a field in a document. They are returned in the `pageX`, `pageY`, `width` and `height` properties of the field.
+When enabled, developer mode displays the following information for each field:
 
-To enable field coordinates, add the `devmode=true` query parameter to the editor URL.
+- **Field ID** - The unique identifier of the field
+- **Recipient ID** - The ID of the recipient assigned to the field
+- **Pos X / Pos Y** - The position of the field on the page
+- **Width / Height** - The dimensions of the field
+
+To enable developer mode, add the `devmode=true` query parameter to the editor URL.
 
 ```bash
 # Legacy editor

apps/docs/content/docs/developers/embedding/authoring/index.mdx

@@ -0,0 +1,56 @@
+---
+title: Authoring
+description: Embed document, template, and envelope creation directly in your application.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+In addition to embedding signing, Documenso supports embedded authoring. It allows your users to create and edit documents, templates, and envelopes without leaving your application.
+
+<Callout type="warn">
+  Embedded authoring is included with [Enterprise](https://documen.so/enterprise-cta) plans. It is
+  also available as a paid add-on for the [Platform Plan](https://documen.so/platform-cta-pricing).
+  Contact sales for access.
+</Callout>
+
+## Versions
+
+Embedded authoring is available in two versions:
+
+- **[V1 Authoring](/docs/developers/embedding/authoring/v1)** — Works with V1 Documents and Templates.
+- **[V2 Authoring](/docs/developers/embedding/authoring/v2)** — Works with Envelopes, which are the unified model for documents and templates.
+
+### Comparison
+
+| Aspect | V1 | V2 |
+| --- | --- | --- |
+| Entity model | Documents and Templates (separate) | Envelopes (unified, can be documents or templates) |
+| API compatibility | V1 Documents/Templates API | V2 Envelopes API |
+| Customization | 6 simple boolean flags | Rich structured settings with sections (general, settings, actions, envelope items, recipients) |
+
+---
+
+## Presign Tokens
+
+Before using any authoring component, obtain a presign token from your backend:
+
+```
+POST /api/v2/embedding/create-presign-token
+```
+
+This endpoint requires your Documenso API key. The token has a default expiration of 1 hour.
+
+See the [API documentation](https://openapi.documenso.com/reference#tag/embedding) for full details.
+
+<Callout type="warn">
+  Presign tokens should be created server-side. Never expose your API key in client-side code.
+</Callout>
+
+---
+
+## Next Steps
+
+- [V1 Authoring](/docs/developers/embedding/authoring/v1) — Create and edit documents and templates using V1 components
+- [V2 Authoring](/docs/developers/embedding/authoring/v2) — Create and edit envelopes using V2 components
+- [CSS Variables](/docs/developers/embedding/css-variables) — Customize the appearance of embedded components
+- [SDKs](/docs/developers/embedding/sdks) — Framework-specific SDK documentation

apps/docs/content/docs/developers/embedding/authoring/meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Authoring",
+  "pages": ["v1", "v2"]
+}

apps/docs/content/docs/developers/embedding/authoring/v1.mdx

@@ -1,11 +1,11 @@
 ---
-title: Authoring
-description: Embed document and template creation directly in your application.
+title: V1 Authoring
+description: Embed V1 document and template creation directly in your application.
 ---
 
 import { Callout } from 'fumadocs-ui/components/callout';
 
-In addition to embedding signing, Documenso supports embedded authoring. It allows your users to create and edit documents and templates without leaving your application.
+V1 authoring components allow your users to create and edit documents and templates using the V1 Documents and Templates API without leaving your application.
 
 <Callout type="warn">
   Embedded authoring is included with [Enterprise](https://documen.so/enterprise-cta) plans. It is
@@ -15,7 +15,7 @@ In addition to embedding signing, Documenso supports embedded authoring. It allo
 
 ## Components
 
-The SDK provides four authoring components:
+The SDK provides four V1 authoring components:
 
 | Component               | Purpose                 |
 | ----------------------- | ----------------------- |
@@ -24,24 +24,16 @@ The SDK provides four authoring components:
 | `EmbedUpdateDocumentV1` | Edit existing documents |
 | `EmbedUpdateTemplateV1` | Edit existing templates |
 
-All authoring components require a **presign token** for authentication instead of a regular token.
 
 ---
 
 ## Presign Tokens
 
-Before using any authoring component, obtain a presign token from your backend:
+All authoring components require a **presign token** for authentication. See the [Authoring overview](/docs/developers/embedding/authoring) for details on obtaining presign tokens.
 
-```
-POST /api/v2/embedding/create-presign-token
-```
-
-This endpoint requires your Documenso API key. The token has a default expiration of 1 hour.
-
-See the [API documentation](https://openapi.documenso.com/reference#tag/embedding) for full details.
 
 <Callout type="warn">
-  Presign tokens should be created server-side. Never expose your API key in client-side code.
+  A presigned token is NOT an API token
 </Callout>
 
 ---
@@ -147,8 +139,9 @@ const TemplateEditor = ({ presignToken, templateId }) => {
 | `externalId`       | `string`  | No       | Your reference ID to link with the document or template  |
 | `host`             | `string`  | No       | Custom host URL. Defaults to `https://app.documenso.com` |
 | `css`              | `string`  | No       | Custom CSS string (Platform Plan)                        |
-| `cssVars`          | `object`  | No       | CSS variable overrides (Platform Plan)                   |
+| `cssVars`          | `object`  | No       | [CSS variable](/docs/developers/embedding/css-variables) overrides (Platform Plan) |
 | `darkModeDisabled` | `boolean` | No       | Disable dark mode (Platform Plan)                        |
+| `language`         | `string`  | No       | Set the UI language. See [Supported Languages](https://github.com/documenso/documenso/tree/main/packages/lib/constants/locales.ts) |
 | `className`        | `string`  | No       | CSS class for the iframe                                 |
 | `features`         | `object`  | No       | Feature toggles for the authoring experience             |
 
@@ -301,6 +294,7 @@ Pass extra props to the iframe for testing experimental features:
 ## See Also
 
 - [Embedding Overview](/docs/developers/embedding) - Signing embed concepts and props
+- [V2 Authoring](/docs/developers/embedding/authoring/v2) - V2 envelope authoring
 - [CSS Variables](/docs/developers/embedding/css-variables) - Customize appearance
 - [Documents API](/docs/developers/api/documents) - Create documents via API
 - [Templates API](/docs/developers/api/templates) - Create templates via API

apps/docs/content/docs/developers/embedding/authoring/v2.mdx

@@ -0,0 +1,343 @@
+---
+title: V2 Authoring
+description: Embed envelope creation and editing directly in your application.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+V2 authoring components allow your users to create and edit envelopes without leaving your application. Envelopes are the unified model for documents and templates in the V2 API.
+
+<Callout type="warn">
+  Embedded authoring is included with [Enterprise](https://documen.so/enterprise-cta) plans. It is
+  also available as a paid add-on for the [Platform Plan](https://documen.so/platform-cta-pricing).
+  Contact sales for access.
+</Callout>
+
+## Components
+
+The SDK provides two V2 authoring components:
+
+| Component              | Purpose                  |
+| ---------------------- | ------------------------ |
+| `EmbedCreateEnvelope`  | Create new envelopes     |
+| `EmbedUpdateEnvelope`  | Edit existing envelopes  |
+
+---
+
+## Presign Tokens
+
+All authoring components require a **presign token** for authentication. See the [Authoring overview](/docs/developers/embedding/authoring) for details on obtaining presign tokens.
+
+<Callout type="warn">
+  A presigned token is NOT an API token
+</Callout>
+
+---
+
+## Creating Envelopes
+
+Use `EmbedCreateEnvelope` to embed envelope creation. The `type` prop determines whether the envelope is created as a document or template.
+
+```jsx
+import { EmbedCreateEnvelope } from '@documenso/embed-react';
+
+const EnvelopeCreator = ({ presignToken }) => {
+  return (
+    <div style={{ height: '800px', width: '100%' }}>
+      <EmbedCreateEnvelope
+        presignToken={presignToken}
+        type="DOCUMENT"
+        externalId="order-12345"
+        onEnvelopeCreated={(data) => {
+          console.log('Envelope created:', data.envelopeId);
+          console.log('External ID:', data.externalId);
+        }}
+      />
+    </div>
+  );
+};
+```
+
+To create a template instead of a document, set `type` to `"TEMPLATE"`:
+
+```jsx
+<EmbedCreateEnvelope
+  presignToken={presignToken}
+  type="TEMPLATE"
+  externalId="template-12345"
+  onEnvelopeCreated={(data) => {
+    console.log('Template envelope created:', data.envelopeId);
+  }}
+/>
+```
+
+---
+
+## Editing Envelopes
+
+Use `EmbedUpdateEnvelope` to embed envelope editing:
+
+```jsx
+import { EmbedUpdateEnvelope } from '@documenso/embed-react';
+
+const EnvelopeEditor = ({ presignToken, envelopeId }) => {
+  return (
+    <div style={{ height: '800px', width: '100%' }}>
+      <EmbedUpdateEnvelope
+        presignToken={presignToken}
+        envelopeId={envelopeId}
+        externalId="order-12345"
+        onEnvelopeUpdated={(data) => {
+          console.log('Envelope updated:', data.envelopeId);
+        }}
+      />
+    </div>
+  );
+};
+```
+
+---
+
+## Props
+
+### All V2 Authoring Components
+
+| Prop               | Type      | Required | Description                                              |
+| ------------------ | --------- | -------- | -------------------------------------------------------- |
+| `presignToken`     | `string`  | Yes      | Authentication token from your backend                   |
+| `externalId`       | `string`  | No       | Your reference ID to link with the envelope              |
+| `host`             | `string`  | No       | Custom host URL. Defaults to `https://app.documenso.com` |
+| `css`              | `string`  | No       | Custom CSS string (Platform Plan)                        |
+| `cssVars`          | `object`  | No       | [CSS variable](/docs/developers/embedding/css-variables) overrides (Platform Plan) |
+| `darkModeDisabled` | `boolean` | No       | Disable dark mode (Platform Plan)                        |
+| `language`         | `string`  | No       | Set the UI language. See [Supported Languages](https://github.com/documenso/documenso/tree/main/packages/lib/constants/locales.ts) |
+| `className`        | `string`  | No       | CSS class for the iframe                                 |
+| `features`         | `object`  | No       | Feature toggles for the authoring experience             |
+
+### Create Component Only
+
+| Prop       | Type                           | Required | Description                                                                                                                                                      |
+| ---------- | ------------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`     | `"DOCUMENT"` \| `"TEMPLATE"`  | Yes      | Whether to create a document or template envelope                                                                                                                |
+| `folderId` | `string`                       | No       | The ID of the folder to create the envelope in. If not provided, the envelope is created in the root folder. The folder must match the envelope type and team.   |
+
+### Update Component Only
+
+| Prop         | Type     | Required | Description                  |
+| ------------ | -------- | -------- | ---------------------------- |
+| `envelopeId` | `string` | Yes      | The envelope ID to edit      |
+
+---
+
+## Feature Toggles
+
+V2 authoring provides rich, structured feature toggles organized into sections. Pass a partial configuration to customize the authoring experience — any omitted fields will use their defaults.
+
+```jsx
+<EmbedCreateEnvelope
+  presignToken={presignToken}
+  type="DOCUMENT"
+  features={{
+    general: {
+      allowConfigureEnvelopeTitle: false,
+      allowUploadAndRecipientStep: false,
+      allowAddFieldsStep: false,
+      allowPreviewStep: false,
+    },
+    settings: {
+      allowConfigureSignatureTypes: false,
+      allowConfigureLanguage: false,
+      allowConfigureDateFormat: false,
+    },
+    recipients: {
+      allowApproverRole: false,
+      allowViewerRole: false,
+    },
+  }}
+/>
+```
+
+### General
+
+Controls the overall authoring flow and UI:
+
+| Property                        | Type      | Default | Description                                      |
+| ------------------------------- | --------- | ------- | ------------------------------------------------ |
+| `allowConfigureEnvelopeTitle`   | `boolean` | `true`  | Allow editing the envelope title                 |
+| `allowUploadAndRecipientStep`   | `boolean` | `true`  | Show the upload and recipient configuration step |
+| `allowAddFieldsStep`           | `boolean` | `true`  | Show the add fields step                         |
+| `allowPreviewStep`             | `boolean` | `true`  | Show the preview step                            |
+| `minimizeLeftSidebar`          | `boolean` | `true`  | Minimize the left sidebar by default             |
+
+### Settings
+
+Controls envelope configuration options. Set to `null` to hide envelope settings entirely.
+
+| Property                            | Type      | Default | Description                               |
+| ----------------------------------- | --------- | ------- | ----------------------------------------- |
+| `allowConfigureSignatureTypes`      | `boolean` | `true`  | Allow configuring signature types         |
+| `allowConfigureLanguage`            | `boolean` | `true`  | Allow configuring the language            |
+| `allowConfigureDateFormat`          | `boolean` | `true`  | Allow configuring the date format         |
+| `allowConfigureTimezone`            | `boolean` | `true`  | Allow configuring the timezone            |
+| `allowConfigureRedirectUrl`         | `boolean` | `true`  | Allow configuring a redirect URL          |
+| `allowConfigureDistribution`        | `boolean` | `true`  | Allow configuring distribution settings   |
+| `allowConfigureExpirationPeriod`    | `boolean` | `true`  | Allow configuring the expiration period   |
+| `allowConfigureEmailSender`         | `boolean` | `true`  | Allow configuring the email sender        |
+| `allowConfigureEmailReplyTo`        | `boolean` | `true`  | Allow configuring the email reply-to      |
+
+### Actions
+
+Controls available actions during authoring:
+
+| Property           | Type      | Default | Description              |
+| ------------------ | --------- | ------- | ------------------------ |
+| `allowAttachments` | `boolean` | `true`  | Allow adding attachments |
+
+### Envelope Items
+
+Controls how envelope items (individual files within the envelope) can be managed. Set to `null` to prevent any item modifications.
+
+| Property              | Type      | Default | Description                          |
+| --------------------- | --------- | ------- | ------------------------------------ |
+| `allowConfigureTitle`  | `boolean` | `true`  | Allow editing item titles            |
+| `allowConfigureOrder`  | `boolean` | `true`  | Allow reordering items               |
+| `allowUpload`          | `boolean` | `true`  | Allow uploading new items            |
+| `allowDelete`          | `boolean` | `true`  | Allow deleting items                 |
+| `allowReplace`         | `boolean` | `true`  | Allow replacing an item's PDF        |
+
+### Recipients
+
+Controls recipient configuration options. Set to `null` to prevent any recipient modifications.
+
+| Property                          | Type      | Default | Description                              |
+| --------------------------------- | --------- | ------- | ---------------------------------------- |
+| `allowConfigureSigningOrder`      | `boolean` | `true`  | Allow configuring the signing order      |
+| `allowConfigureDictateNextSigner` | `boolean` | `true`  | Allow configuring dictate next signer    |
+| `allowApproverRole`               | `boolean` | `true`  | Allow the approver recipient role        |
+| `allowViewerRole`                 | `boolean` | `true`  | Allow the viewer recipient role          |
+| `allowCCerRole`                   | `boolean` | `true`  | Allow the CC recipient role              |
+| `allowAssistantRole`              | `boolean` | `true`  | Allow the assistant recipient role       |
+
+### Disabling Steps
+
+You can also disable entire steps of the authoring flow. This allows you to skip steps that are not relevant to your use case:
+
+```jsx
+<EmbedCreateEnvelope
+  presignToken={presignToken}
+  type="DOCUMENT"
+  features={{
+    general: {
+      allowUploadAndRecipientStep: false, // Skip the upload and recipient step
+      allowAddFieldsStep: false,          // Skip the add fields step
+      allowPreviewStep: false,            // Skip the preview step
+    },
+    settings: null,       // Hide all envelope settings
+    envelopeItems: null,  // Prevent item modifications
+    recipients: null,     // Prevent recipient modifications
+  }}
+/>
+```
+
+---
+
+## Event Callbacks
+
+### `onEnvelopeCreated`
+
+Fired when an envelope is successfully created:
+
+| Field        | Type             | Description                             |
+| ------------ | ---------------- | --------------------------------------- |
+| `envelopeId` | `string`         | The ID of the created envelope          |
+| `externalId` | `string \| null` | Your external reference ID, if provided |
+
+### `onEnvelopeUpdated`
+
+Fired when an envelope is successfully updated:
+
+| Field        | Type             | Description                             |
+| ------------ | ---------------- | --------------------------------------- |
+| `envelopeId` | `string`         | The ID of the updated envelope          |
+| `externalId` | `string \| null` | Your external reference ID, if provided |
+
+---
+
+## Complete Integration Example
+
+This example shows a full workflow where users create an envelope and then edit it:
+
+```tsx
+import { useState } from 'react';
+
+import { EmbedCreateEnvelope, EmbedUpdateEnvelope } from '@documenso/embed-react';
+
+const EnvelopeManager = ({ presignToken }) => {
+  const [envelopeId, setEnvelopeId] = useState(null);
+  const [mode, setMode] = useState('create');
+
+  if (mode === 'success') {
+    return (
+      <div>
+        <h2>Envelope updated successfully</h2>
+        <button
+          onClick={() => {
+            setEnvelopeId(null);
+            setMode('create');
+          }}
+        >
+          Create Another Envelope
+        </button>
+      </div>
+    );
+  }
+
+  if (mode === 'edit' && envelopeId) {
+    return (
+      <div style={{ height: '800px', width: '100%' }}>
+        <button onClick={() => setMode('create')}>Back to Create</button>
+        <EmbedUpdateEnvelope
+          presignToken={presignToken}
+          envelopeId={envelopeId}
+          onEnvelopeUpdated={(data) => {
+            console.log('Envelope updated:', data.envelopeId);
+            setMode('success');
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ height: '800px', width: '100%' }}>
+      <EmbedCreateEnvelope
+        presignToken={presignToken}
+        type="DOCUMENT"
+        features={{
+          general: {
+            allowConfigureEnvelopeTitle: false,
+          },
+          settings: {
+            allowConfigureSignatureTypes: false,
+            allowConfigureLanguage: false,
+          },
+        }}
+        onEnvelopeCreated={(data) => {
+          console.log('Envelope created:', data.envelopeId);
+          setEnvelopeId(data.envelopeId);
+          setMode('edit');
+        }}
+      />
+    </div>
+  );
+};
+```
+
+---
+
+## See Also
+
+- [Authoring Overview](/docs/developers/embedding/authoring) - V1 vs V2 comparison and presign tokens
+- [V1 Authoring](/docs/developers/embedding/authoring/v1) - V1 document and template authoring
+- [Embedding Overview](/docs/developers/embedding) - Signing embed concepts and props
+- [CSS Variables](/docs/developers/embedding/css-variables) - Customize appearance

apps/docs/content/docs/developers/embedding/css-variables.mdx

@@ -59,6 +59,7 @@ Use the `cssVars` prop on any embed component to override default colors, spacin
 | `destructiveForeground` | Destructive/danger text color     |
 | `ring`                  | Focus ring color                  |
 | `warning`               | Warning/alert color               |
+| `envelopeEditorBackground` | Envelope editor background color. _V2 Envelope Editor only._ |
 
 ### Spacing
 

apps/docs/content/docs/developers/embedding/index.mdx

@@ -161,6 +161,7 @@ If you prefer not to use any SDK, you can embed signing using [Direct Links](/do
 | `css`                 | `string`   | Custom CSS string (Platform Plan).                               |
 | `cssVars`             | `object`   | CSS variable overrides for theming (Platform Plan).              |
 | `darkModeDisabled`    | `boolean`  | Disable dark mode in the embed (Platform Plan).                  |
+| `language`            | `string`   | Set the UI language. See [Supported Languages](https://github.com/documenso/documenso/tree/main/packages/lib/constants/locales.ts). |
 | `onDocumentReady`     | `function` | Called when the document is loaded and ready.                    |
 | `onDocumentCompleted` | `function` | Called when signing is completed.                                |
 | `onDocumentError`     | `function` | Called when an error occurs.                                     |
@@ -175,6 +176,7 @@ If you prefer not to use any SDK, you can embed signing using [Direct Links](/do
 | `host`                | `string`   | Documenso instance URL. Defaults to `https://app.documenso.com`. |
 | `name`                | `string`   | Pre-fill the signer's name.                                      |
 | `lockName`            | `boolean`  | Prevent the signer from changing their name.                     |
+| `language`            | `string`   | Set the UI language. See [Supported Languages](https://github.com/documenso/documenso/tree/main/packages/lib/constants/locales.ts). |
 | `onDocumentReady`     | `function` | Called when the document is loaded and ready.                    |
 | `onDocumentCompleted` | `function` | Called when signing is completed.                                |
 | `onDocumentError`     | `function` | Called when an error occurs.                                     |

apps/docs/content/docs/developers/webhooks/events.mdx

@@ -13,7 +13,7 @@ All webhook events share a common structure:
 {
   "event": "DOCUMENT_COMPLETED",
   "payload": {
-    // Document data with recipients
+    // Document or template data with recipients
   },
   "createdAt": "2024-04-22T11:52:18.277Z",
   "webhookEndpoint": "https://your-endpoint.com/webhook"
@@ -33,14 +33,13 @@ All webhook events share a common structure:
 
 | Field            | Type      | Description                                            |
 | ---------------- | --------- | ------------------------------------------------------ |
-| `id`             | number    | Document ID                                            |
+| `id`             | number    | Document or template ID                                |
 | `externalId`     | string?   | External identifier for integration                    |
 | `userId`         | number    | Owner's user ID                                        |
 | `authOptions`    | object?   | Document-level authentication options                  |
 | `formValues`     | object?   | PDF form values associated with the document           |
-| `title`          | string    | Document title                                         |
+| `title`          | string    | Document or template title                             |
 | `status`         | string    | Current status: `DRAFT`, `PENDING`, `COMPLETED`        |
-| `documentDataId` | string    | Reference to the document's PDF data                   |
 | `visibility`     | string    | Document visibility setting                            |
 | `createdAt`      | datetime  | Document creation timestamp                            |
 | `updatedAt`      | datetime  | Last modification timestamp                            |
@@ -50,45 +49,50 @@ All webhook events share a common structure:
 | `templateId`     | number?   | Template ID if created from a template                 |
 | `source`         | string    | Source: `DOCUMENT` or `TEMPLATE`                       |
 | `documentMeta`   | object    | Document metadata (subject, message, signing options)  |
-| `Recipient`      | array     | List of recipient objects                              |
+| `recipients`     | array     | List of recipient objects                              |
+| `Recipient`      | array     | List of recipient objects (legacy, same as recipients) |
 
 ### Document Metadata Fields
 
-| Field                   | Type    | Description                             |
-| ----------------------- | ------- | --------------------------------------- |
-| `id`                    | string  | Metadata record identifier              |
-| `subject`               | string? | Email subject line                      |
-| `message`               | string? | Email message body                      |
-| `timezone`              | string  | Timezone for date display               |
-| `password`              | string? | Document access password (if set)       |
-| `dateFormat`            | string  | Date format string                      |
-| `redirectUrl`           | string? | URL to redirect after signing           |
-| `signingOrder`          | string  | `PARALLEL` or `SEQUENTIAL`              |
-| `typedSignatureEnabled` | boolean | Whether typed signatures are allowed    |
-| `language`              | string  | Document language code                  |
-| `distributionMethod`    | string  | How document is distributed             |
-| `emailSettings`         | object? | Custom email settings for this document |
+| Field                      | Type    | Description                             |
+| -------------------------- | ------- | --------------------------------------- |
+| `id`                       | string  | Metadata record identifier              |
+| `subject`                  | string? | Email subject line                      |
+| `message`                  | string? | Email message body                      |
+| `timezone`                 | string  | Timezone for date display               |
+| `password`                 | string? | Document access password (if set)       |
+| `dateFormat`               | string  | Date format string                      |
+| `redirectUrl`              | string? | URL to redirect after signing           |
+| `signingOrder`             | string  | `PARALLEL` or `SEQUENTIAL`              |
+| `allowDictateNextSigner`   | boolean | Whether signers can choose the next signer |
+| `typedSignatureEnabled`    | boolean | Whether typed signatures are allowed    |
+| `uploadSignatureEnabled`   | boolean | Whether uploaded signatures are allowed |
+| `drawSignatureEnabled`     | boolean | Whether drawn signatures are allowed    |
+| `language`                 | string  | Document language code                  |
+| `distributionMethod`       | string  | How document is distributed             |
+| `emailSettings`            | object? | Custom email settings for this document |
 
 ### Recipient Fields
 
-| Field               | Type      | Description                                |
-| ------------------- | --------- | ------------------------------------------ |
-| `id`                | number    | Recipient ID                               |
-| `documentId`        | number    | Parent document ID                         |
-| `templateId`        | number?   | Template ID if created from a template     |
-| `email`             | string    | Recipient email address                    |
-| `name`              | string    | Recipient name                             |
-| `token`             | string    | Unique signing token                       |
-| `documentDeletedAt` | datetime? | When the document was deleted (if deleted) |
-| `expired`           | boolean?  | Whether the recipient's link has expired   |
-| `signedAt`          | datetime? | When recipient signed                      |
-| `authOptions`       | object?   | Per-recipient authentication options       |
-| `role`              | string    | Role: `SIGNER`, `VIEWER`, `APPROVER`, `CC` |
-| `signingOrder`      | number?   | Position in signing sequence               |
-| `readStatus`        | string    | `NOT_OPENED` or `OPENED`                   |
-| `signingStatus`     | string    | `NOT_SIGNED`, `SIGNED`, or `REJECTED`      |
-| `sendStatus`        | string    | `NOT_SENT` or `SENT`                       |
-| `rejectionReason`   | string?   | Reason if recipient rejected               |
+| Field                  | Type      | Description                                |
+| ---------------------- | --------- | ------------------------------------------ |
+| `id`                   | number    | Recipient ID                               |
+| `documentId`           | number?   | Parent document ID                         |
+| `templateId`           | number?   | Template ID if created from a template     |
+| `email`                | string    | Recipient email address                    |
+| `name`                 | string    | Recipient name                             |
+| `token`                | string    | Unique signing token                       |
+| `documentDeletedAt`    | datetime? | When the recipient hid the document        |
+| `expiresAt`            | datetime? | When the recipient's signing link expires  |
+| `expirationNotifiedAt` | datetime? | When the expiration notification was sent  |
+| `signedAt`             | datetime? | When recipient signed                      |
+| `authOptions`          | object?   | Per-recipient authentication options       |
+| `role`                 | string    | Role: `SIGNER`, `VIEWER`, `APPROVER`, `ASSISTANT`, `CC` |
+| `signingOrder`         | number?   | Position in signing sequence               |
+| `readStatus`           | string    | `NOT_OPENED` or `OPENED`                   |
+| `signingStatus`        | string    | `NOT_SIGNED`, `SIGNED`, or `REJECTED`      |
+| `sendStatus`           | string    | `NOT_SENT` or `SENT`                       |
+| `rejectionReason`      | string?   | Reason if recipient rejected               |
 
 ---
 
@@ -98,7 +102,7 @@ These events track the document through its lifecycle.
 
 ### `document.created`
 
-Triggered when a new document is uploaded.
+Triggered when a new document is created.
 
 **Event name:** `DOCUMENT_CREATED`
 
@@ -114,7 +118,6 @@ Triggered when a new document is uploaded.
     "visibility": "EVERYONE",
     "title": "contract.pdf",
     "status": "DRAFT",
-    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
     "createdAt": "2024-04-22T11:44:43.341Z",
     "updatedAt": "2024-04-22T11:44:43.341Z",
     "completedAt": null,
@@ -131,11 +134,35 @@ Triggered when a new document is uploaded.
       "dateFormat": "MM/DD/YYYY",
       "redirectUrl": null,
       "signingOrder": "PARALLEL",
+      "allowDictateNextSigner": false,
       "typedSignatureEnabled": true,
+      "uploadSignatureEnabled": true,
+      "drawSignatureEnabled": true,
       "language": "en",
       "distributionMethod": "EMAIL",
       "emailSettings": null
     },
+    "recipients": [
+      {
+        "id": 52,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer@example.com",
+        "name": "John Doe",
+        "token": "vbT8hi3jKQmrFP_LN1WcS",
+        "documentDeletedAt": null,
+        "expiresAt": null,
+        "expirationNotifiedAt": null,
+        "signedAt": null,
+        "authOptions": null,
+        "signingOrder": 1,
+        "rejectionReason": null,
+        "role": "SIGNER",
+        "readStatus": "NOT_OPENED",
+        "signingStatus": "NOT_SIGNED",
+        "sendStatus": "NOT_SENT"
+      }
+    ],
     "Recipient": [
       {
         "id": 52,
@@ -145,7 +172,8 @@ Triggered when a new document is uploaded.
         "name": "John Doe",
         "token": "vbT8hi3jKQmrFP_LN1WcS",
         "documentDeletedAt": null,
-        "expired": null,
+        "expiresAt": null,
+        "expirationNotifiedAt": null,
         "signedAt": null,
         "authOptions": null,
         "signingOrder": 1,
@@ -182,7 +210,6 @@ The document status changes to `PENDING` and recipients have `sendStatus: "SENT"
     "visibility": "EVERYONE",
     "title": "contract.pdf",
     "status": "PENDING",
-    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
     "createdAt": "2024-04-22T11:44:43.341Z",
     "updatedAt": "2024-04-22T11:48:07.569Z",
     "completedAt": null,
@@ -199,11 +226,35 @@ The document status changes to `PENDING` and recipients have `sendStatus: "SENT"
       "dateFormat": "MM/DD/YYYY",
       "redirectUrl": null,
       "signingOrder": "PARALLEL",
+      "allowDictateNextSigner": false,
       "typedSignatureEnabled": true,
+      "uploadSignatureEnabled": true,
+      "drawSignatureEnabled": true,
       "language": "en",
       "distributionMethod": "EMAIL",
       "emailSettings": null
     },
+    "recipients": [
+      {
+        "id": 52,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer@example.com",
+        "name": "John Doe",
+        "token": "vbT8hi3jKQmrFP_LN1WcS",
+        "documentDeletedAt": null,
+        "expiresAt": null,
+        "expirationNotifiedAt": null,
+        "signedAt": null,
+        "authOptions": null,
+        "signingOrder": 1,
+        "rejectionReason": null,
+        "role": "SIGNER",
+        "readStatus": "NOT_OPENED",
+        "signingStatus": "NOT_SIGNED",
+        "sendStatus": "SENT"
+      }
+    ],
     "Recipient": [
       {
         "id": 52,
@@ -213,7 +264,8 @@ The document status changes to `PENDING` and recipients have `sendStatus: "SENT"
         "name": "John Doe",
         "token": "vbT8hi3jKQmrFP_LN1WcS",
         "documentDeletedAt": null,
-        "expired": null,
+        "expiresAt": null,
+        "expirationNotifiedAt": null,
         "signedAt": null,
         "authOptions": null,
         "signingOrder": 1,
@@ -230,6 +282,106 @@ The document status changes to `PENDING` and recipients have `sendStatus: "SENT"
 }
 ```
 
+### `document.opened`
+
+Triggered when a recipient opens the document for the first time.
+
+**Event name:** `DOCUMENT_OPENED`
+
+The recipient's `readStatus` changes to `OPENED`.
+
+```json
+{
+  "event": "DOCUMENT_OPENED",
+  "payload": {
+    "id": 10,
+    "status": "PENDING",
+    "title": "contract.pdf",
+    "source": "DOCUMENT",
+    "recipients": [
+      {
+        "id": 52,
+        "email": "signer@example.com",
+        "name": "John Doe",
+        "role": "SIGNER",
+        "readStatus": "OPENED",
+        "signingStatus": "NOT_SIGNED",
+        "sendStatus": "SENT"
+      }
+    ]
+  },
+  "createdAt": "2024-04-22T11:50:26.174Z",
+  "webhookEndpoint": "https://your-endpoint.com/webhook"
+}
+```
+
+### `document.signed`
+
+Triggered when a recipient signs the document. This fires for each individual signature, not just when the document is fully completed.
+
+**Event name:** `DOCUMENT_SIGNED`
+
+The recipient's `signingStatus` changes to `SIGNED` and `signedAt` is populated.
+
+```json
+{
+  "event": "DOCUMENT_SIGNED",
+  "payload": {
+    "id": 10,
+    "status": "COMPLETED",
+    "title": "contract.pdf",
+    "source": "DOCUMENT",
+    "completedAt": "2024-04-22T11:52:05.707Z",
+    "recipients": [
+      {
+        "id": 51,
+        "email": "signer@example.com",
+        "name": "John Doe",
+        "role": "SIGNER",
+        "signedAt": "2024-04-22T11:52:05.688Z",
+        "readStatus": "OPENED",
+        "signingStatus": "SIGNED",
+        "sendStatus": "SENT"
+      }
+    ]
+  },
+  "createdAt": "2024-04-22T11:52:18.577Z",
+  "webhookEndpoint": "https://your-endpoint.com/webhook"
+}
+```
+
+### `document.recipient.completed`
+
+Triggered when an individual recipient completes their required action (signing, approving, or viewing). This is useful for tracking per-recipient progress in documents with multiple recipients.
+
+**Event name:** `DOCUMENT_RECIPIENT_COMPLETED`
+
+```json
+{
+  "event": "DOCUMENT_RECIPIENT_COMPLETED",
+  "payload": {
+    "id": 10,
+    "status": "PENDING",
+    "title": "contract.pdf",
+    "source": "DOCUMENT",
+    "recipients": [
+      {
+        "id": 52,
+        "email": "signer@example.com",
+        "name": "John Doe",
+        "role": "SIGNER",
+        "signedAt": "2024-04-22T11:52:05.688Z",
+        "readStatus": "OPENED",
+        "signingStatus": "SIGNED",
+        "sendStatus": "SENT"
+      }
+    ]
+  },
+  "createdAt": "2024-04-22T11:52:06.000Z",
+  "webhookEndpoint": "https://your-endpoint.com/webhook"
+}
+```
+
 ### `document.completed`
 
 Triggered when all recipients have completed their required actions.
@@ -250,7 +402,6 @@ The document status changes to `COMPLETED` and `completedAt` is set.
     "visibility": "EVERYONE",
     "title": "contract.pdf",
     "status": "COMPLETED",
-    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
     "createdAt": "2024-04-22T11:44:43.341Z",
     "updatedAt": "2024-04-22T11:52:05.708Z",
     "completedAt": "2024-04-22T11:52:05.707Z",
@@ -267,12 +418,15 @@ The document status changes to `COMPLETED` and `completedAt` is set.
       "dateFormat": "MM/DD/YYYY",
       "redirectUrl": null,
       "signingOrder": "PARALLEL",
+      "allowDictateNextSigner": false,
       "typedSignatureEnabled": true,
+      "uploadSignatureEnabled": true,
+      "drawSignatureEnabled": true,
       "language": "en",
       "distributionMethod": "EMAIL",
       "emailSettings": null
     },
-    "Recipient": [
+    "recipients": [
       {
         "id": 50,
         "documentId": 10,
@@ -281,7 +435,8 @@ The document status changes to `COMPLETED` and `completedAt` is set.
         "name": "Jane Smith",
         "token": "vbT8hi3jKQmrFP_LN1WcS",
         "documentDeletedAt": null,
-        "expired": null,
+        "expiresAt": null,
+        "expirationNotifiedAt": null,
         "signedAt": "2024-04-22T11:51:10.055Z",
         "authOptions": {
           "accessAuth": null,
@@ -302,7 +457,54 @@ The document status changes to `COMPLETED` and `completedAt` is set.
         "name": "John Doe",
         "token": "HkrptwS42ZBXdRKj1TyUo",
         "documentDeletedAt": null,
-        "expired": null,
+        "expiresAt": null,
+        "expirationNotifiedAt": null,
+        "signedAt": "2024-04-22T11:52:05.688Z",
+        "authOptions": {
+          "accessAuth": null,
+          "actionAuth": null
+        },
+        "signingOrder": 2,
+        "rejectionReason": null,
+        "role": "SIGNER",
+        "readStatus": "OPENED",
+        "signingStatus": "SIGNED",
+        "sendStatus": "SENT"
+      }
+    ],
+    "Recipient": [
+      {
+        "id": 50,
+        "documentId": 10,
+        "templateId": null,
+        "email": "reviewer@example.com",
+        "name": "Jane Smith",
+        "token": "vbT8hi3jKQmrFP_LN1WcS",
+        "documentDeletedAt": null,
+        "expiresAt": null,
+        "expirationNotifiedAt": null,
+        "signedAt": "2024-04-22T11:51:10.055Z",
+        "authOptions": {
+          "accessAuth": null,
+          "actionAuth": null
+        },
+        "signingOrder": 1,
+        "rejectionReason": null,
+        "role": "VIEWER",
+        "readStatus": "OPENED",
+        "signingStatus": "SIGNED",
+        "sendStatus": "SENT"
+      },
+      {
+        "id": 51,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer@example.com",
+        "name": "John Doe",
+        "token": "HkrptwS42ZBXdRKj1TyUo",
+        "documentDeletedAt": null,
+        "expiresAt": null,
+        "expirationNotifiedAt": null,
         "signedAt": "2024-04-22T11:52:05.688Z",
         "authOptions": {
           "accessAuth": null,
@@ -335,53 +537,17 @@ The recipient's `signingStatus` changes to `REJECTED` and `rejectionReason` cont
   "event": "DOCUMENT_REJECTED",
   "payload": {
     "id": 10,
-    "externalId": null,
-    "userId": 1,
-    "authOptions": null,
-    "formValues": null,
-    "visibility": "EVERYONE",
-    "title": "contract.pdf",
     "status": "PENDING",
-    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
-    "createdAt": "2024-04-22T11:44:43.341Z",
-    "updatedAt": "2024-04-22T11:48:07.569Z",
-    "completedAt": null,
-    "deletedAt": null,
-    "teamId": null,
-    "templateId": null,
+    "title": "contract.pdf",
     "source": "DOCUMENT",
-    "documentMeta": {
-      "id": "doc_meta_123",
-      "subject": "Please sign this document",
-      "message": "Hello, please review and sign this document.",
-      "timezone": "UTC",
-      "password": null,
-      "dateFormat": "MM/DD/YYYY",
-      "redirectUrl": null,
-      "signingOrder": "PARALLEL",
-      "typedSignatureEnabled": true,
-      "language": "en",
-      "distributionMethod": "EMAIL",
-      "emailSettings": null
-    },
-    "Recipient": [
+    "recipients": [
       {
         "id": 52,
-        "documentId": 10,
-        "templateId": null,
         "email": "signer@example.com",
         "name": "John Doe",
-        "token": "vbT8hi3jKQmrFP_LN1WcS",
-        "documentDeletedAt": null,
-        "expired": null,
-        "signedAt": "2024-04-22T11:48:07.569Z",
-        "authOptions": {
-          "accessAuth": null,
-          "actionAuth": null
-        },
-        "signingOrder": 1,
-        "rejectionReason": "I do not agree with the terms",
         "role": "SIGNER",
+        "signedAt": "2024-04-22T11:48:07.569Z",
+        "rejectionReason": "I do not agree with the terms",
         "readStatus": "OPENED",
         "signingStatus": "REJECTED",
         "sendStatus": "SENT"
@@ -395,7 +561,9 @@ The recipient's `signingStatus` changes to `REJECTED` and `rejectionReason` cont
 
 ### `document.cancelled`
 
-Triggered when the document owner cancels a pending document.
+Triggered when the document owner or a team member deletes a document. Draft and pending documents are hard-deleted, while completed documents are soft-deleted.
+
+This event is **not** triggered when a recipient hides a document from their inbox.
 
 **Event name:** `DOCUMENT_CANCELLED`
 
@@ -411,7 +579,6 @@ Triggered when the document owner cancels a pending document.
     "visibility": "EVERYONE",
     "title": "contract.pdf",
     "status": "PENDING",
-    "documentDataId": "cm6exvn93006hi02ru90a265a",
     "createdAt": "2025-01-27T11:02:14.393Z",
     "updatedAt": "2025-01-27T11:03:16.387Z",
     "completedAt": null,
@@ -428,11 +595,35 @@ Triggered when the document owner cancels a pending document.
       "dateFormat": "yyyy-MM-dd hh:mm a",
       "redirectUrl": "",
       "signingOrder": "PARALLEL",
+      "allowDictateNextSigner": false,
       "typedSignatureEnabled": true,
+      "uploadSignatureEnabled": true,
+      "drawSignatureEnabled": true,
       "language": "en",
       "distributionMethod": "EMAIL",
       "emailSettings": null
     },
+    "recipients": [
+      {
+        "id": 7,
+        "documentId": 7,
+        "templateId": null,
+        "email": "signer@example.com",
+        "name": "John Doe",
+        "token": "XkKx1HCs6Znm2UBJA2j6o",
+        "documentDeletedAt": null,
+        "expiresAt": null,
+        "expirationNotifiedAt": null,
+        "signedAt": null,
+        "authOptions": { "accessAuth": null, "actionAuth": null },
+        "signingOrder": 1,
+        "rejectionReason": null,
+        "role": "SIGNER",
+        "readStatus": "NOT_OPENED",
+        "signingStatus": "NOT_SIGNED",
+        "sendStatus": "SENT"
+      }
+    ],
     "Recipient": [
       {
         "id": 7,
@@ -442,7 +633,8 @@ Triggered when the document owner cancels a pending document.
         "name": "John Doe",
         "token": "XkKx1HCs6Znm2UBJA2j6o",
         "documentDeletedAt": null,
-        "expired": null,
+        "expiresAt": null,
+        "expirationNotifiedAt": null,
         "signedAt": null,
         "authOptions": { "accessAuth": null, "actionAuth": null },
         "signingOrder": 1,
@@ -459,147 +651,127 @@ Triggered when the document owner cancels a pending document.
 }
 ```
 
----
+### `document.reminder.sent`
 
-## Recipient Events
+Triggered when a reminder email is sent to a recipient who has not yet completed their action.
 
-Recipient events track individual signer actions. These events use the same payload structure as document events, but focus on a specific recipient's action.
-
-### `document.opened`
-
-Triggered when a recipient opens the document for the first time.
-
-**Event name:** `DOCUMENT_OPENED`
-
-The recipient's `readStatus` changes to `OPENED`.
+**Event name:** `DOCUMENT_REMINDER_SENT`
 
 ```json
 {
-  "event": "DOCUMENT_OPENED",
+  "event": "DOCUMENT_REMINDER_SENT",
   "payload": {
     "id": 10,
-    "externalId": null,
-    "userId": 1,
-    "authOptions": null,
-    "formValues": null,
-    "visibility": "EVERYONE",
-    "title": "contract.pdf",
     "status": "PENDING",
-    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
-    "createdAt": "2024-04-22T11:44:43.341Z",
-    "updatedAt": "2024-04-22T11:48:07.569Z",
-    "completedAt": null,
-    "deletedAt": null,
-    "teamId": null,
-    "templateId": null,
+    "title": "contract.pdf",
     "source": "DOCUMENT",
-    "documentMeta": {
-      "id": "doc_meta_123",
-      "subject": "Please sign this document",
-      "message": "Hello, please review and sign this document.",
-      "timezone": "UTC",
-      "password": null,
-      "dateFormat": "MM/DD/YYYY",
-      "redirectUrl": null,
-      "signingOrder": "PARALLEL",
-      "typedSignatureEnabled": true,
-      "language": "en",
-      "distributionMethod": "EMAIL",
-      "emailSettings": null
-    },
-    "Recipient": [
+    "recipients": [
       {
         "id": 52,
-        "documentId": 10,
-        "templateId": null,
         "email": "signer@example.com",
         "name": "John Doe",
-        "token": "vbT8hi3jKQmrFP_LN1WcS",
-        "documentDeletedAt": null,
-        "expired": null,
-        "signedAt": null,
-        "authOptions": null,
-        "signingOrder": 1,
-        "rejectionReason": null,
         "role": "SIGNER",
-        "readStatus": "OPENED",
+        "readStatus": "NOT_OPENED",
         "signingStatus": "NOT_SIGNED",
         "sendStatus": "SENT"
       }
     ]
   },
-  "createdAt": "2024-04-22T11:50:26.174Z",
+  "createdAt": "2024-04-23T09:00:00.000Z",
   "webhookEndpoint": "https://your-endpoint.com/webhook"
 }
 ```
 
-### `document.signed`
+---
 
-Triggered when a recipient signs the document.
+## Template Events
 
-**Event name:** `DOCUMENT_SIGNED`
+Template events track changes to reusable document templates. Template payloads use the same structure as document payloads, with `source` set to `TEMPLATE` and `templateId` populated.
 
-The recipient's `signingStatus` changes to `SIGNED` and `signedAt` is populated.
+### `template.created`
+
+Triggered when a new template is created.
+
+**Event name:** `TEMPLATE_CREATED`
 
 ```json
 {
-  "event": "DOCUMENT_SIGNED",
+  "event": "TEMPLATE_CREATED",
   "payload": {
     "id": 10,
-    "externalId": null,
-    "userId": 1,
-    "authOptions": null,
-    "formValues": null,
-    "visibility": "EVERYONE",
-    "title": "contract.pdf",
-    "status": "COMPLETED",
-    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
-    "createdAt": "2024-04-22T11:44:43.341Z",
-    "updatedAt": "2024-04-22T11:52:05.708Z",
-    "completedAt": "2024-04-22T11:52:05.707Z",
-    "deletedAt": null,
-    "teamId": null,
-    "templateId": null,
-    "source": "DOCUMENT",
-    "documentMeta": {
-      "id": "doc_meta_123",
-      "subject": "Please sign this document",
-      "message": "Hello, please review and sign this document.",
-      "timezone": "UTC",
-      "password": null,
-      "dateFormat": "MM/DD/YYYY",
-      "redirectUrl": null,
-      "signingOrder": "PARALLEL",
-      "typedSignatureEnabled": true,
-      "language": "en",
-      "distributionMethod": "EMAIL",
-      "emailSettings": null
-    },
-    "Recipient": [
-      {
-        "id": 51,
-        "documentId": 10,
-        "templateId": null,
-        "email": "signer@example.com",
-        "name": "John Doe",
-        "token": "HkrptwS42ZBXdRKj1TyUo",
-        "documentDeletedAt": null,
-        "expired": null,
-        "signedAt": "2024-04-22T11:52:05.688Z",
-        "authOptions": {
-          "accessAuth": null,
-          "actionAuth": null
-        },
-        "signingOrder": 1,
-        "rejectionReason": null,
-        "role": "SIGNER",
-        "readStatus": "OPENED",
-        "signingStatus": "SIGNED",
-        "sendStatus": "SENT"
-      }
-    ]
+    "title": "My Template",
+    "status": "DRAFT",
+    "templateId": 10,
+    "source": "TEMPLATE",
+    "recipients": []
   },
-  "createdAt": "2024-04-22T11:52:18.577Z",
+  "createdAt": "2024-04-22T11:44:44.779Z",
+  "webhookEndpoint": "https://your-endpoint.com/webhook"
+}
+```
+
+### `template.updated`
+
+Triggered when a template's settings, recipients, or fields are modified.
+
+**Event name:** `TEMPLATE_UPDATED`
+
+```json
+{
+  "event": "TEMPLATE_UPDATED",
+  "payload": {
+    "id": 10,
+    "title": "My Updated Template",
+    "status": "DRAFT",
+    "templateId": 10,
+    "source": "TEMPLATE",
+    "recipients": []
+  },
+  "createdAt": "2024-04-22T12:00:00.000Z",
+  "webhookEndpoint": "https://your-endpoint.com/webhook"
+}
+```
+
+### `template.deleted`
+
+Triggered when a template is deleted.
+
+**Event name:** `TEMPLATE_DELETED`
+
+```json
+{
+  "event": "TEMPLATE_DELETED",
+  "payload": {
+    "id": 10,
+    "title": "Deleted Template",
+    "status": "DRAFT",
+    "templateId": 10,
+    "source": "TEMPLATE",
+    "recipients": []
+  },
+  "createdAt": "2024-04-22T13:00:00.000Z",
+  "webhookEndpoint": "https://your-endpoint.com/webhook"
+}
+```
+
+### `template.used`
+
+Triggered when a document is created from a template. This event fires alongside `document.created`, giving you a way to specifically track template usage.
+
+**Event name:** `TEMPLATE_USED`
+
+```json
+{
+  "event": "TEMPLATE_USED",
+  "payload": {
+    "id": 10,
+    "title": "Document from Template",
+    "status": "DRAFT",
+    "templateId": 10,
+    "source": "TEMPLATE",
+    "recipients": []
+  },
+  "createdAt": "2024-04-22T14:00:00.000Z",
   "webhookEndpoint": "https://your-endpoint.com/webhook"
 }
 ```
@@ -608,15 +780,28 @@ The recipient's `signingStatus` changes to `SIGNED` and `signedAt` is populated.
 
 ## Event Summary
 
-| Event                | Trigger                         | Key Changes                                                  |
-| -------------------- | ------------------------------- | ------------------------------------------------------------ |
-| `DOCUMENT_CREATED`   | Document uploaded               | `status: "DRAFT"`                                            |
-| `DOCUMENT_SENT`      | Document sent to recipients     | `status: "PENDING"`, recipients `sendStatus: "SENT"`         |
-| `DOCUMENT_OPENED`    | Recipient opens document        | Recipient `readStatus: "OPENED"`                             |
-| `DOCUMENT_SIGNED`    | Recipient signs document        | Recipient `signingStatus: "SIGNED"`, `signedAt` set          |
-| `DOCUMENT_COMPLETED` | All recipients complete actions | `status: "COMPLETED"`, `completedAt` set                     |
-| `DOCUMENT_REJECTED`  | Recipient rejects document      | Recipient `signingStatus: "REJECTED"`, `rejectionReason` set |
-| `DOCUMENT_CANCELLED` | Owner cancels document          | Document cancelled while pending                             |
+### Document Events
+
+| Event                        | Trigger                                     | Key Changes                                                  |
+| ---------------------------- | ------------------------------------------- | ------------------------------------------------------------ |
+| `DOCUMENT_CREATED`           | Document uploaded or created from template   | `status: "DRAFT"`                                            |
+| `DOCUMENT_SENT`              | Document sent to recipients                  | `status: "PENDING"`, recipients `sendStatus: "SENT"`         |
+| `DOCUMENT_OPENED`            | Recipient opens document for the first time  | Recipient `readStatus: "OPENED"`                             |
+| `DOCUMENT_SIGNED`            | Recipient signs document                     | Recipient `signingStatus: "SIGNED"`, `signedAt` set          |
+| `DOCUMENT_RECIPIENT_COMPLETED` | Recipient completes their action           | Recipient `signingStatus: "SIGNED"`, `signedAt` set          |
+| `DOCUMENT_COMPLETED`         | All recipients complete actions               | `status: "COMPLETED"`, `completedAt` set                     |
+| `DOCUMENT_REJECTED`          | Recipient rejects document                   | Recipient `signingStatus: "REJECTED"`, `rejectionReason` set |
+| `DOCUMENT_CANCELLED`         | Owner or team member deletes document        | Document cancelled or deleted                                |
+| `DOCUMENT_REMINDER_SENT`     | Reminder email sent to recipient             | No status changes                                            |
+
+### Template Events
+
+| Event              | Trigger                              | Key Changes               |
+| ------------------ | ------------------------------------ | ------------------------- |
+| `TEMPLATE_CREATED` | New template created                 | `source: "TEMPLATE"`      |
+| `TEMPLATE_UPDATED` | Template settings or fields modified | `source: "TEMPLATE"`      |
+| `TEMPLATE_DELETED` | Template deleted                     | `source: "TEMPLATE"`      |
+| `TEMPLATE_USED`    | Document created from template       | `source: "TEMPLATE"`      |
 
 ---
 
@@ -652,19 +837,22 @@ app.post('/webhook', (req, res) => {
 
   switch (event) {
     case 'DOCUMENT_COMPLETED':
-      // Handle completed document
       console.log(`Document ${payload.id} completed`);
       break;
+    case 'DOCUMENT_RECIPIENT_COMPLETED':
+      const signer = payload.recipients.find((r) => r.signingStatus === 'SIGNED');
+      console.log(`${signer?.name} completed their action on document ${payload.id}`);
+      break;
     case 'DOCUMENT_SIGNED':
-      // Handle signature
-      const signer = payload.Recipient.find((r) => r.signingStatus === 'SIGNED');
-      console.log(`${signer?.name} signed document ${payload.id}`);
+      console.log(`Signature added to document ${payload.id}`);
       break;
     case 'DOCUMENT_REJECTED':
-      // Handle rejection
-      const rejecter = payload.Recipient.find((r) => r.signingStatus === 'REJECTED');
+      const rejecter = payload.recipients.find((r) => r.signingStatus === 'REJECTED');
       console.log(`${rejecter?.name} rejected: ${rejecter?.rejectionReason}`);
       break;
+    case 'TEMPLATE_USED':
+      console.log(`Template ${payload.templateId} used to create document ${payload.id}`);
+      break;
   }
 
   res.status(200).send('OK');

apps/docs/content/docs/developers/webhooks/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Webhooks
-description: Receive real-time notifications when documents are signed, completed, or updated.
+description: Receive real-time notifications for document and template events.
 ---
 
 ## How Webhooks Work
@@ -9,6 +9,8 @@ description: Receive real-time notifications when documents are signed, complete
 2. When an event occurs, Documenso sends an HTTP POST to your URL
 3. Your application processes the event and responds with 200 OK
 
+Documenso supports webhook events for the full document lifecycle (created, sent, opened, signed, completed, rejected, cancelled) as well as template events (created, updated, deleted, used).
+
 ---
 
 ## Getting Started
@@ -41,7 +43,15 @@ description: Receive real-time notifications when documents are signed, complete
   "payload": {
     "id": 123,
     "title": "Contract",
-    "status": "COMPLETED"
+    "status": "COMPLETED",
+    "completedAt": "2024-01-15T10:30:00.000Z",
+    "recipients": [
+      {
+        "id": 1,
+        "email": "signer@example.com",
+        "signingStatus": "SIGNED"
+      }
+    ]
   },
   "createdAt": "2024-01-15T10:30:00.000Z",
   "webhookEndpoint": "https://your-endpoint.com/webhook"

apps/docs/content/docs/developers/webhooks/setup.mdx

@@ -220,11 +220,17 @@ When creating a webhook, you can subscribe to one or more events:
 | ----- | ------- |
 | `DOCUMENT_CREATED` | A new document is created |
 | `DOCUMENT_SENT` | A document is sent to recipients |
-| `DOCUMENT_OPENED` | A recipient opens the document |
+| `DOCUMENT_OPENED` | A recipient opens the document for the first time |
 | `DOCUMENT_SIGNED` | A recipient signs the document |
-| `DOCUMENT_COMPLETED` | All recipients have signed the document |
+| `DOCUMENT_RECIPIENT_COMPLETED` | A recipient completes their required action |
+| `DOCUMENT_COMPLETED` | All recipients have completed their actions |
 | `DOCUMENT_REJECTED` | A recipient rejects the document |
-| `DOCUMENT_CANCELLED` | The document owner cancels the document |
+| `DOCUMENT_CANCELLED` | The document owner deletes the document |
+| `DOCUMENT_REMINDER_SENT` | A reminder email is sent to a recipient |
+| `TEMPLATE_CREATED` | A new template is created |
+| `TEMPLATE_UPDATED` | A template is modified |
+| `TEMPLATE_DELETED` | A template is deleted |
+| `TEMPLATE_USED` | A document is created from a template |
 
 You can subscribe to all events or select specific ones based on your needs. For example, if you only need to know when documents are fully signed, subscribe only to `DOCUMENT_COMPLETED`.
 

apps/docs/content/docs/developers/webhooks/verification.mdx

@@ -250,9 +250,15 @@ const validEvents = [
   'DOCUMENT_SENT',
   'DOCUMENT_OPENED',
   'DOCUMENT_SIGNED',
+  'DOCUMENT_RECIPIENT_COMPLETED',
   'DOCUMENT_COMPLETED',
   'DOCUMENT_REJECTED',
   'DOCUMENT_CANCELLED',
+  'DOCUMENT_REMINDER_SENT',
+  'TEMPLATE_CREATED',
+  'TEMPLATE_UPDATED',
+  'TEMPLATE_DELETED',
+  'TEMPLATE_USED',
 ];
 
 if (!validEvents.includes(event)) {

apps/docs/content/docs/self-hosting/configuration/background-jobs.mdx

@@ -0,0 +1,187 @@
+---
+title: Background Jobs
+description: Configure how Documenso processes background tasks like email delivery, document processing, and webhook dispatch.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+## Overview
+
+Documenso processes background jobs for email delivery, document sealing, webhook dispatch, and scheduled maintenance tasks. Three providers are available:
+
+| Provider | Backend    | Best For                                        | Infrastructure |
+| -------- | ---------- | ----------------------------------------------- | -------------- |
+| Inngest  | Managed    | Production with zero ops overhead               | None           |
+| BullMQ   | Redis      | Self-hosted production with full control         | Redis          |
+| Local    | PostgreSQL | Development and small self-hosted deployments   | None           |
+
+Select a provider with the `NEXT_PRIVATE_JOBS_PROVIDER` environment variable:
+
+```bash
+NEXT_PRIVATE_JOBS_PROVIDER=inngest  # or bullmq, local
+```
+
+<Callout type="info">
+  The default provider is `local`. It requires no additional infrastructure and works well for development and small deployments, but is not recommended for production workloads.
+</Callout>
+
+---
+
+## Inngest (Recommended)
+
+[Inngest](https://www.inngest.com/) is a managed background job service. It handles scheduling, retries, concurrency, and observability without any infrastructure to manage. This is the recommended provider for production deployments.
+
+### Setup
+
+{/* prettier-ignore */}
+1. Create an account at [inngest.com](https://www.inngest.com/)
+2. Create an app and obtain your event key and signing key
+3. Configure the environment variables:
+
+```bash
+NEXT_PRIVATE_JOBS_PROVIDER=inngest
+NEXT_PRIVATE_INNGEST_EVENT_KEY=your-event-key
+INNGEST_SIGNING_KEY=your-signing-key
+```
+
+### Environment Variables
+
+| Variable                         | Description                                  | Required |
+| -------------------------------- | -------------------------------------------- | -------- |
+| `NEXT_PRIVATE_INNGEST_EVENT_KEY` | Inngest event key                            | Yes      |
+| `INNGEST_EVENT_KEY`              | Alternative Inngest event key                | No       |
+| `INNGEST_SIGNING_KEY`            | Inngest signing key for webhook verification | Yes      |
+| `NEXT_PRIVATE_INNGEST_APP_ID`    | Custom Inngest app ID                        | No       |
+
+### Advantages
+
+- No infrastructure to manage
+- Built-in monitoring dashboard
+- Automatic retries with backoff
+- Cron scheduling handled externally
+- Scales automatically
+
+---
+
+## BullMQ
+
+[BullMQ](https://docs.bullmq.io/) is a Redis-backed job queue that runs inside the Documenso process. It provides higher throughput than the local provider, configurable concurrency, and a built-in dashboard for monitoring jobs.
+
+### Requirements
+
+- **Redis 6.2+** - any Redis-compatible service works (Redis, KeyDB, Dragonfly, AWS ElastiCache, Upstash, etc.)
+
+### Setup
+
+```bash
+NEXT_PRIVATE_JOBS_PROVIDER=bullmq
+NEXT_PRIVATE_REDIS_URL=redis://localhost:6379
+```
+
+### Environment Variables
+
+| Variable                           | Description                                                                | Default     |
+| ---------------------------------- | -------------------------------------------------------------------------- | ----------- |
+| `NEXT_PRIVATE_REDIS_URL`           | Redis connection URL                                                       | _(required)_ |
+| `NEXT_PRIVATE_REDIS_PREFIX`        | Key prefix for Redis queues (useful when sharing an instance)              | `documenso` |
+| `NEXT_PRIVATE_BULLMQ_CONCURRENCY` | Number of concurrent jobs to process                                       | `10`        |
+
+### Dashboard
+
+BullMQ includes a job monitoring dashboard at `/api/jobs/board`. In production, only admin users can access the dashboard. In development, it is open to all users.
+
+The dashboard provides visibility into queued, active, completed, and failed jobs.
+
+### Docker Compose with Redis
+
+If you're using Docker Compose, add a Redis service:
+
+```yaml
+services:
+  redis:
+    image: redis:8-alpine
+    ports:
+      - '6379:6379'
+    volumes:
+      - redis_data:/data
+
+volumes:
+  redis_data:
+```
+
+Then set `NEXT_PRIVATE_REDIS_URL=redis://redis:6379` in your Documenso environment.
+
+### Advantages
+
+- Self-hosted with no external service dependencies beyond Redis
+- Configurable concurrency
+- Built-in job monitoring dashboard
+- Reliable retries with exponential backoff
+- Queue namespacing for shared Redis instances
+
+---
+
+## Local
+
+The local provider uses your PostgreSQL database as a job queue. Jobs are stored in the `BackgroundJob` table and processed via internal HTTP requests that Documenso sends to itself.
+
+### Setup
+
+No configuration required. The local provider is the default when `NEXT_PRIVATE_JOBS_PROVIDER` is unset or set to `local`.
+
+```bash
+# Optional - this is the default
+NEXT_PRIVATE_JOBS_PROVIDER=local
+```
+
+### Internal URL
+
+Background jobs in the local provider work by Documenso sending HTTP requests to itself. If your reverse proxy or network setup causes issues with the app reaching its own public URL, set the internal URL:
+
+```bash
+NEXT_PRIVATE_INTERNAL_WEBAPP_URL=http://localhost:3000
+```
+
+This tells the job system to use the internal address instead of `NEXT_PUBLIC_WEBAPP_URL` for self-requests.
+
+<Callout type="warn">
+  The local provider is suitable for development and small deployments. For production workloads, use Inngest or BullMQ.
+</Callout>
+
+### Limitations
+
+- No concurrency control - jobs are processed one at a time per request cycle
+- No built-in monitoring
+- Depends on the application being able to reach itself over HTTP
+- Not suitable for high-throughput workloads
+
+---
+
+## Choosing a Provider
+
+<Tabs items={['Managed hosting', 'Self-hosted production', 'Development']}>
+<Tab value="Managed hosting">
+
+Use **Inngest**. Zero infrastructure, automatic scaling, and built-in observability. The simplest path to reliable background jobs in production.
+
+</Tab>
+<Tab value="Self-hosted production">
+
+Use **BullMQ**. Add a Redis instance to your infrastructure and get reliable job processing with a monitoring dashboard. Good fit if you already run Redis or want to keep everything self-hosted.
+
+</Tab>
+<Tab value="Development">
+
+Use **Local** (the default). No additional setup required. Works out of the box with just PostgreSQL.
+
+</Tab>
+</Tabs>
+
+---
+
+## See Also
+
+- [Environment Variables](/docs/self-hosting/configuration/environment) - Complete configuration reference
+- [Requirements](/docs/self-hosting/getting-started/requirements) - Infrastructure requirements
+- [Docker Compose](/docs/self-hosting/deployment/docker-compose) - Deploy with Docker Compose

apps/docs/content/docs/self-hosting/configuration/environment.mdx

@@ -224,11 +224,31 @@ For detailed certificate setup, see [Signing Certificate](/docs/self-hosting/con
 
 ## Feature Flags
 
-| Variable                              | Description                                     | Default |
-| ------------------------------------- | ----------------------------------------------- | ------- |
-| `NEXT_PUBLIC_DISABLE_SIGNUP`          | Disable public user registration                | `false` |
-| `NEXT_PUBLIC_POSTHOG_KEY`             | PostHog API key for analytics and feature flags |         |
-| `NEXT_PUBLIC_FEATURE_BILLING_ENABLED` | Enable billing features                         | `false` |
+| Variable                              | Description                                                                         | Default |
+| ------------------------------------- | ----------------------------------------------------------------------------------- | ------- |
+| `NEXT_PUBLIC_DISABLE_SIGNUP`          | Disable public user registration entirely                                           | `false` |
+| `NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS` | Comma-separated list of email domains allowed to sign up (e.g., `example.com,acme.org`) |         |
+| `NEXT_PUBLIC_POSTHOG_KEY`             | PostHog API key for analytics and feature flags                                     |         |
+| `NEXT_PUBLIC_FEATURE_BILLING_ENABLED` | Enable billing features                                                             | `false` |
+
+### Signup Restrictions
+
+You can control who is allowed to create accounts on your instance using two environment variables:
+
+- **`NEXT_PUBLIC_DISABLE_SIGNUP`**: Set to `true` to block all new signups. Existing users can still sign in. This applies to both email/password and OAuth signups.
+- **`NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS`**: Restrict signups to specific email domains. When set, only users whose email address matches one of the listed domains can create an account. Leave empty to allow all domains.
+
+Both restrictions apply to email/password registration and OAuth (Google, Microsoft, OIDC). If a user attempts to sign up via OAuth with a disallowed domain, they are redirected to the sign-in page with an error.
+
+When both variables are set, `NEXT_PUBLIC_DISABLE_SIGNUP` takes precedence. Signups are blocked regardless of the domain list.
+
+```bash
+# Allow signups only from specific domains
+NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS="example.com,acme.org"
+
+# Or disable signups entirely
+NEXT_PUBLIC_DISABLE_SIGNUP="true"
+```
 
 ---
 
@@ -248,20 +268,40 @@ AI features must also be enabled in organisation/team settings after configurati
 
 ## Background Jobs
 
-Documenso uses a PostgreSQL-based job queue by default. Jobs (email delivery, document processing, webhook dispatch) are stored in the `BackgroundJob` table and processed via internal HTTP requests. No external queue service like Redis is required.
+Documenso supports multiple background job providers for processing emails, documents, webhooks, and scheduled tasks.
 
-| Variable                     | Description                                                                    | Default |
-| ---------------------------- | ------------------------------------------------------------------------------ | ------- |
-| `NEXT_PRIVATE_JOBS_PROVIDER` | Jobs provider: `local` (PostgreSQL-based queue) or `inngest` (managed service) | `local` |
+### Provider Selection
 
-### Inngest Configuration
+| Variable                     | Description                                                                            | Default |
+| ---------------------------- | -------------------------------------------------------------------------------------- | ------- |
+| `NEXT_PRIVATE_JOBS_PROVIDER` | Jobs provider: `local` (PostgreSQL), `bullmq` (Redis), or `inngest` (managed service) | `local` |
 
-| Variable                         | Description                                  |
-| -------------------------------- | -------------------------------------------- |
-| `NEXT_PRIVATE_INNGEST_EVENT_KEY` | Inngest event key                            |
-| `INNGEST_EVENT_KEY`              | Alternative Inngest event key                |
-| `INNGEST_SIGNING_KEY`            | Inngest signing key for webhook verification |
-| `NEXT_PRIVATE_INNGEST_APP_ID`    | Custom Inngest app ID                        |
+### Local (local)
+
+No additional configuration required. Jobs are stored in PostgreSQL and processed via internal HTTP requests.
+
+| Variable                           | Description                                                  | Default                          |
+| ---------------------------------- | ------------------------------------------------------------ | -------------------------------- |
+| `NEXT_PRIVATE_INTERNAL_WEBAPP_URL` | Internal URL for the app to send job requests to itself      | Same as `NEXT_PUBLIC_WEBAPP_URL` |
+
+### BullMQ (bullmq)
+
+| Variable                           | Required | Description                                                   | Default     |
+| ---------------------------------- | -------- | ------------------------------------------------------------- | ----------- |
+| `NEXT_PRIVATE_REDIS_URL`           | Yes      | Redis connection URL (e.g., `redis://localhost:6379`)         |             |
+| `NEXT_PRIVATE_REDIS_PREFIX`        | No       | Key prefix for Redis queues (useful when sharing an instance) | `documenso` |
+| `NEXT_PRIVATE_BULLMQ_CONCURRENCY` | No       | Number of concurrent jobs to process                          | `10`        |
+
+### Inngest (inngest)
+
+| Variable                         | Required | Description                                  |
+| -------------------------------- | -------- | -------------------------------------------- |
+| `NEXT_PRIVATE_INNGEST_EVENT_KEY` | Yes      | Inngest event key                            |
+| `INNGEST_EVENT_KEY`              | No       | Alternative Inngest event key                |
+| `INNGEST_SIGNING_KEY`            | Yes      | Inngest signing key for webhook verification |
+| `NEXT_PRIVATE_INNGEST_APP_ID`    | No       | Custom Inngest app ID                        |
+
+For setup guides and provider recommendations, see [Background Jobs](/docs/self-hosting/configuration/background-jobs).
 
 ---
 
@@ -271,6 +311,8 @@ Documenso uses a PostgreSQL-based job queue by default. Jobs (email delivery, do
 | ----------------------------- | -------------------------------------------- | ------- |
 | `DOCUMENSO_DISABLE_TELEMETRY` | Set to `true` to disable anonymous telemetry | `false` |
 
+Telemetry also auto-disables when `NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY` is configured.
+
 Telemetry collects only: app version, installation ID, and node ID. No personal data is collected.
 
 ---
@@ -326,6 +368,10 @@ NEXT_PRIVATE_SMTP_FROM_ADDRESS="noreply@example.com"
 
 # Signing (certificate must be configured)
 NEXT_PRIVATE_SIGNING_PASSPHRASE="your-certificate-password"
+
+# Signup restrictions (optional)
+# NEXT_PUBLIC_DISABLE_SIGNUP="true"
+# NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS="example.com,acme.org"
 ```
 
 ---

apps/docs/content/docs/self-hosting/configuration/meta.json

@@ -5,6 +5,7 @@
     "database",
     "email",
     "storage",
+    "background-jobs",
     "signing-certificate",
     "telemetry",
     "advanced"

apps/docs/content/docs/self-hosting/deployment/docker-compose.mdx

@@ -154,8 +154,9 @@ PORT=3000
 # Signing certificate (see Signing Certificate section)
 NEXT_PRIVATE_SIGNING_PASSPHRASE=your-certificate-password
 
-# Disable public signups
+# Signup restrictions (optional)
 NEXT_PUBLIC_DISABLE_SIGNUP=false
+# NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS=example.com,acme.org
 ```
 
 <Callout type="info">Generate secure secrets using: `openssl rand -base64 32`</Callout>
@@ -251,7 +252,8 @@ Navigate to the signup page and create your account. Verify your email address
 <Callout type="info">
   All accounts created through signup are regular user accounts. Admin access must be granted
   directly in the database. Once your accounts are set up, consider disabling public signups by
-  setting `NEXT_PUBLIC_DISABLE_SIGNUP=true`.
+  setting `NEXT_PUBLIC_DISABLE_SIGNUP=true`, or restrict signups to specific email domains with
+  `NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS`.
 </Callout>
 
 ## Managing Services

apps/docs/content/docs/self-hosting/deployment/docker.mdx

@@ -101,6 +101,7 @@ See [Email Configuration](/docs/self-hosting/configuration/email) for other tran
 | `NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS`  | Base64-encoded `.p12` certificate (alternative to file path)   | -                         |
 | `NEXT_PUBLIC_UPLOAD_TRANSPORT`              | Document storage: `database` or `s3`                           | `database`                |
 | `NEXT_PUBLIC_DISABLE_SIGNUP`                | Disable public signups                                         | `false`                   |
+| `NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS`       | Comma-separated list of allowed signup email domains           |                           |
 
 For the complete list, see [Environment Variables](/docs/self-hosting/configuration/environment).
 

apps/docs/content/docs/self-hosting/deployment/railway.mdx

@@ -153,8 +153,9 @@ NEXT_PRIVATE_SMTP_FROM_ADDRESS=noreply@yourdomain.com
 | Variable                          | Description                        | Default |
 | --------------------------------- | ---------------------------------- | ------- |
 | `PORT`                            | Application port                   | `3000`  |
-| `NEXT_PUBLIC_DISABLE_SIGNUP`      | Disable public signups             | `false` |
-| `NEXT_PRIVATE_SIGNING_PASSPHRASE` | Passphrase for signing certificate | -       |
+| `NEXT_PUBLIC_DISABLE_SIGNUP`          | Disable public signups                                 | `false` |
+| `NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS` | Comma-separated list of allowed signup email domains   |         |
+| `NEXT_PRIVATE_SIGNING_PASSPHRASE`     | Passphrase for signing certificate                     | -       |
 | `DOCUMENSO_DISABLE_TELEMETRY`     | Disable anonymous telemetry        | `false` |
 
 </Step>

apps/docs/content/docs/self-hosting/getting-started/requirements.mdx

@@ -85,9 +85,13 @@ See [Storage Configuration](/docs/self-hosting/configuration/storage) for setup
 
 ### Background Jobs
 
-Documenso processes background jobs (email delivery, document processing) using a PostgreSQL-based queue. No additional services like Redis are required: the job queue is built into the application and uses your existing database.
+Documenso processes background jobs (email delivery, document processing) using a PostgreSQL-based queue by default. No additional services are required: the job queue is built into the application and uses your existing database.
 
-For high-throughput deployments, Documenso optionally supports [Inngest](https://www.inngest.com/) as an alternative job provider. Set `NEXT_PRIVATE_JOBS_PROVIDER=inngest` and configure `INNGEST_EVENT_KEY` and `INNGEST_SIGNING_KEY`. Most self-hosted instances do not need this.
+For production deployments that need higher throughput or more reliable job processing, Documenso supports [BullMQ](https://docs.bullmq.io/) as an alternative provider. BullMQ requires a **Redis** instance (v6.2+). Set `NEXT_PRIVATE_JOBS_PROVIDER=bullmq` and configure `NEXT_PRIVATE_REDIS_URL`.
+
+For managed/cloud deployments, [Inngest](https://www.inngest.com/) is also supported as a job provider. Set `NEXT_PRIVATE_JOBS_PROVIDER=inngest` and configure `INNGEST_EVENT_KEY` and `INNGEST_SIGNING_KEY`.
+
+See [Background Jobs Configuration](/docs/self-hosting/configuration/background-jobs) for full details.
 
 ---
 

apps/docs/content/docs/self-hosting/getting-started/tips.mdx

@@ -144,19 +144,13 @@ See [Storage Configuration](/docs/self-hosting/configuration/storage) for full s
 
 ---
 
-## Background Jobs Don't Need Redis
+## Background Jobs
 
-Documenso uses a PostgreSQL-based job queue by default. No Redis, no external message broker. The job system uses your existing database to store and process background tasks like email delivery and document processing.
+Documenso uses a PostgreSQL-based job queue by default (`local` provider). No Redis or external message broker is required for basic deployments.
 
-For high-throughput deployments, Documenso optionally supports [Inngest](https://www.inngest.com/) as an alternative job provider:
+For production workloads, consider switching to **Inngest** (managed) or **BullMQ** (self-hosted with Redis) for better reliability and throughput.
 
-```bash
-NEXT_PRIVATE_JOBS_PROVIDER=inngest
-INNGEST_EVENT_KEY=your-event-key
-INNGEST_SIGNING_KEY=your-signing-key
-```
-
-Most self-hosted instances do not need Inngest.
+See [Background Jobs Configuration](/docs/self-hosting/configuration/background-jobs) for setup instructions and provider comparison.
 
 ---
 

apps/docs/content/docs/users/documents/advanced/index.mdx

@@ -24,4 +24,14 @@ description: Advanced document features including PDF placeholders, AI detection
     description="Control who can see documents within a team."
     href="/docs/users/documents/advanced/document-visibility"
   />
+  <Card
+    title="Recipient Expiration"
+    description="Set a signing deadline so document links expire after a configurable period."
+    href="/docs/users/documents/advanced/recipient-expiration"
+  />
+  <Card
+    title="Signing Reminders"
+    description="Automatically email recipients who have not yet signed on a configurable schedule."
+    href="/docs/users/documents/advanced/signing-reminders"
+  />
 </Cards>

apps/docs/content/docs/users/documents/advanced/meta.json

@@ -5,6 +5,8 @@
     "pdf-placeholders",
     "ai-detection",
     "default-recipients",
-    "document-visibility"
+    "document-visibility",
+    "recipient-expiration",
+    "signing-reminders"
   ]
 }

apps/docs/content/docs/users/documents/advanced/recipient-expiration.mdx

@@ -0,0 +1,183 @@
+---
+title: Recipient Expiration
+description: Set a signing deadline for recipients so document links expire after a configurable period.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+## Overview
+
+Recipient expiration lets you set a deadline for how long recipients have to sign a document after it is sent. Once the deadline passes, the recipient can no longer access the signing link and the document owner is notified.
+
+This is useful when:
+
+- A business deal is contingent on being signed within a specific time frame
+- A document is no longer relevant after a certain date
+- You want to ensure recipients act promptly rather than leaving documents unsigned indefinitely
+
+Expiration is tracked **per recipient**, not per document. If one recipient's deadline passes, other recipients can still sign. The document stays in a pending state so the owner can decide whether to resend or cancel.
+
+## Default Behaviour
+
+Every organisation has a default expiration period of **3 months**. This means that when you send a document, each recipient has 3 months from the time the document is sent to complete their signing.
+
+You can change this default at the organisation or team level, or override it per document.
+
+## Settings Cascade
+
+Expiration settings follow a three-level cascade: **Organisation → Team → Document**. Each level can override the one above it.
+
+<Tabs items={['Organisation', 'Team', 'Document']}>
+<Tab value="Organisation">
+
+Sets the default for all teams in the organisation. Options are a **custom duration** or **never expires**.
+
+To configure, navigate to **Organisation Settings > Preferences > Document** and find **Default Envelope Expiration**.
+
+</Tab>
+<Tab value="Team">
+
+Overrides the organisation default for documents created within this team. Options are a **custom duration**, **never expires**, or **inherit from organisation**.
+
+New teams default to **inherit from organisation**.
+
+To configure, navigate to **Team Settings > Preferences > Document** and find **Default Envelope Expiration**.
+
+</Tab>
+<Tab value="Document">
+
+Overrides the team or organisation default for a single document. Options are a **custom duration** or **never expires**.
+
+If you do not change the expiration when editing a document, the team or organisation default applies.
+
+</Tab>
+</Tabs>
+
+## Set Expiration for a Document
+
+{/* prettier-ignore */}
+<Steps>
+<Step>
+
+### Open the document settings
+
+In the document editor, open the **Settings** dialog and go to the **General** tab.
+
+</Step>
+<Step>
+
+### Configure the expiration
+
+Find the **Expiration** field. Choose one of:
+
+- **Custom duration** — enter a number and select a unit (days, weeks, months, or years)
+- **Never expires** — the recipient can sign at any time
+
+If you leave it unchanged, the team or organisation default applies.
+
+![Recipient Expiration Screenshot](/recipient-expiration/configure-expiration.webp)
+
+</Step>
+<Step>
+
+### Send the document
+
+When you send the document, the expiration deadline is calculated from that moment. For example, if you set a 7-day expiration and send the document on March 1st, the recipient has until March 8th to sign.
+
+</Step>
+</Steps>
+
+<Callout type="info">
+  You cannot change the expiration period after the document has been sent. To extend a recipient's
+  deadline, resend the document to them — this resets the clock.
+</Callout>
+
+## Set a Default Expiration Period
+
+{/* prettier-ignore */}
+<Steps>
+<Step>
+
+### Navigate to document preferences
+
+Go to **Organisation Settings > Preferences > Document** (or **Team Settings > Preferences > Document** for team-level overrides).
+
+</Step>
+<Step>
+
+### Configure the default
+
+Find **Default Envelope Expiration** and choose:
+
+- **Custom duration** — enter a number and unit
+- **Never expires** — no deadline for recipients
+- **Inherit from organisation** (team level only) — use whatever the organisation has configured
+
+</Step>
+<Step>
+
+### Save
+
+Click **Save** to apply. New documents created after this change use the updated default.
+
+</Step>
+</Steps>
+
+<Callout type="info">
+  Changing the default expiration does not affect documents that have already been sent. Only new
+  documents use the updated setting.
+</Callout>
+
+## What Happens When a Recipient Expires
+
+When a recipient's signing deadline passes:
+
+1. The recipient can no longer access the signing link. They see a message explaining that the signing deadline has expired and to contact the document owner.
+2. The document owner receives an email notification with a link to view the document.
+3. An audit log entry is created recording the expiration.
+4. The document remains in a **pending** state — other recipients who have not expired can still sign.
+
+![Recipient Expired Signing Page](/recipient-expiration/recipient-expired.webp)
+
+## Resending to Extend a Deadline
+
+If a recipient's deadline has passed (or is about to), you can resend the document to them. Resending recalculates the expiration from the current time, effectively extending the deadline.
+
+{/* prettier-ignore */}
+<Steps>
+<Step>
+
+### Open the document
+
+Navigate to the document page and find the recipient whose deadline has expired. Expired recipients are marked with an **Expired** badge.
+
+</Step>
+<Step>
+
+### Resend
+
+Click the resend option for the recipient. This sends a new signing link and resets the expiration clock based on the document's configured expiration period.
+
+</Step>
+</Steps>
+
+## Expiration Options Reference
+
+| Unit   | Example         | Description                                 |
+| ------ | --------------- | ------------------------------------------- |
+| Days   | 7 days          | Recipient has 7 days from when the document is sent |
+| Weeks  | 2 weeks         | Recipient has 2 weeks from when the document is sent |
+| Months | 3 months        | Recipient has 3 months from when the document is sent (default) |
+| Years  | 1 year          | Recipient has 1 year from when the document is sent |
+
+You can also set expiration to **never expires**, which means the signing link remains valid indefinitely.
+
+---
+
+## See Also
+
+- [Send Documents](/docs/users/documents/send) - Send documents for signing
+- [Document Preferences](/docs/users/organisations/preferences/document) - Configure default document settings
+- [Add Recipients](/docs/users/documents/add-recipients) - Add signers and other recipients to a document

apps/docs/content/docs/users/documents/advanced/signing-reminders.mdx

@@ -0,0 +1,195 @@
+---
+title: Signing Reminders
+description: Automatically email recipients who have not yet signed on a configurable schedule.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+## Overview
+
+Signing reminders automatically email recipients who have not completed their signing. You configure when the first reminder goes out and how often it repeats — Documenso handles the rest until the recipient signs or the document leaves a pending state.
+
+This is useful when:
+
+- You want recipients nudged without having to track them down manually
+- A deadline is approaching and you want to escalate gradually
+- You send a high volume of documents and cannot chase each one
+
+Reminders are tracked **per recipient**, not per document. Each unsigned recipient is on their own schedule based on when they were emailed.
+
+This is different from the **Resend** action covered in [Send Documents](/docs/users/documents/send), which is a one-off manual nudge. Reminders are scheduled and recurring.
+
+## Default Behaviour
+
+Every **newly created** organisation starts with reminders **enabled**:
+
+- First reminder sent **5 days** after the recipient is emailed
+- Repeats **every 2 days** until the recipient signs
+
+You can change this default at the organisation or team level, or override it per document.
+
+<Callout type="info">
+  Organisations created **before this feature shipped** have reminders left blank (no default) so
+  recipients of in-flight or future documents are not unexpectedly sent reminders. To enable
+  reminders for an existing organisation, configure **Default Signing Reminders** under
+  **Organisation Settings > Preferences > Document**.
+</Callout>
+
+## Settings Cascade
+
+Reminder settings follow a three-level cascade: **Organisation → Team → Document**. Each level can override the one above it, or inherit from it.
+
+<Tabs items={['Organisation', 'Team', 'Document']}>
+<Tab value="Organisation">
+
+Sets the default for all teams in the organisation. Options are **Enabled** (set when the first reminder fires and how often it repeats) or **No reminders**.
+
+To configure, navigate to **Organisation Settings > Preferences > Document** and find **Default Signing Reminders**.
+
+</Tab>
+<Tab value="Team">
+
+Overrides the organisation default for documents created within this team. Options are **Enabled**, **No reminders**, or **Inherit from organisation**.
+
+New teams default to **Inherit from organisation**.
+
+To configure, navigate to **Team Settings > Preferences > Document** and find **Default Signing Reminders**.
+
+</Tab>
+<Tab value="Document">
+
+Overrides the team or organisation default for a single document. Options are **Enabled**, **No reminders**, or **Inherit from organisation**.
+
+If you do not change reminders when editing a document, the team or organisation default applies.
+
+</Tab>
+</Tabs>
+
+## Set Reminders for a Document
+
+{/* prettier-ignore */}
+<Steps>
+<Step>
+
+### Open the document settings
+
+In the document editor, open the **Settings** dialog and go to the **Reminders** tab.
+
+</Step>
+<Step>
+
+### Choose a mode
+
+- **Enabled** — Documenso sends reminders on the schedule you configure below
+- **No reminders** — no automatic reminders for this document
+- **Inherit from organisation** — use the team or organisation default
+
+</Step>
+<Step>
+
+### Configure the schedule
+
+When **Enabled**, set:
+
+- **Send first reminder after** — a number and unit (days, weeks, or months) measured from when the recipient is first emailed
+- **Then repeat every** — either **Custom interval** (a number and unit) or **Don't repeat** (only one reminder is ever sent)
+
+</Step>
+<Step>
+
+### Send the document
+
+The first reminder is scheduled when the recipient receives the initial signing email. Subsequent reminders are scheduled from the time the previous reminder was sent.
+
+</Step>
+</Steps>
+
+<Callout type="info">
+  Editing reminder settings on a document that is already pending recalculates the next reminder for
+  every unsigned recipient immediately.
+</Callout>
+
+## Set a Default Reminder Schedule
+
+{/* prettier-ignore */}
+<Steps>
+<Step>
+
+### Navigate to document preferences
+
+Go to **Organisation Settings > Preferences > Document** (or **Team Settings > Preferences > Document** for team-level overrides).
+
+</Step>
+<Step>
+
+### Configure the default
+
+Find **Default Signing Reminders** and choose:
+
+- **Enabled** — set the first-reminder delay and repeat interval
+- **No reminders** — disable reminders by default
+- **Inherit from organisation** (team level only) — use whatever the organisation has configured
+
+</Step>
+<Step>
+
+### Save
+
+Click **Save** to apply. New documents created after this change use the updated default. Documents already in flight are unaffected unless you edit their reminder settings directly.
+
+</Step>
+</Steps>
+
+## What Happens When a Reminder Fires
+
+When a recipient's next reminder time arrives:
+
+1. Documenso sends the reminder email — same template as the original signing request, but the subject and preview are prefixed with **"Reminder:"**.
+2. An audit log entry is created for the recipient (an `EMAIL_SENT` entry of type `REMINDER`).
+3. The `document.reminder.sent` webhook fires. See [webhook events](/docs/developers/webhooks/events).
+4. The next reminder is scheduled based on **Then repeat every**, or no further reminder is scheduled if you chose **Don't repeat**.
+
+Reminders stop automatically when the recipient signs, declines, the recipient's signing deadline passes, or the document leaves the pending state (completed, rejected, or deleted).
+
+## When Reminders Are Skipped
+
+A configured reminder will not be sent in the following cases:
+
+- The recipient is a **CC** — CCs are notified once and never reminded
+- The recipient's **signing deadline has passed** — see [Recipient Expiration](/docs/users/documents/advanced/recipient-expiration). Resending the document refreshes the deadline and resumes reminders.
+- The document uses **manual link distribution** — Documenso never emails recipients for these documents
+- The envelope's email settings have **signing request emails disabled**
+- The recipient has not yet been emailed (for example, an unreached step in a sequential workflow)
+
+<Callout type="info">
+  Reminders stop automatically **30 days after the recipient was first emailed**, regardless of the
+  repeat interval. This hard cap prevents runaway reminder chains for recipients who never sign and
+  have no expiration set. If you need a different stop condition, set a shorter repeat interval,
+  use **Don't repeat**, or configure [recipient expiration](/docs/users/documents/advanced/recipient-expiration).
+</Callout>
+
+<Callout type="info">
+  Reminders are dispatched by a background sweep that runs every 15 minutes, so the actual send time
+  may be up to ~15 minutes after the scheduled time.
+</Callout>
+
+## Reminder Options Reference
+
+| Setting                     | Options                                  | Notes                                                                |
+| --------------------------- | ---------------------------------------- | -------------------------------------------------------------------- |
+| **Mode**                    | Enabled / No reminders / Inherit         | Inherit is only available at the team and document levels            |
+| **Send first reminder after** | 1+ days, weeks, or months              | Measured from when the recipient receives the initial signing email. Reminders past 30 days from that moment are skipped. |
+| **Then repeat every**       | Custom interval (1+ days/weeks/months) or Don't repeat | Custom interval keeps reminding until the recipient signs or the 30-day cap is reached |
+
+The organisation default out of the box is **first reminder after 5 days, repeating every 2 days**, which falls well inside the 30-day cap.
+
+---
+
+## See Also
+
+- [Send Documents](/docs/users/documents/send) - Send documents and trigger a one-off resend
+- [Recipient Expiration](/docs/users/documents/advanced/recipient-expiration) - Set a hard signing deadline
+- [Document Preferences](/docs/users/organisations/preferences/document) - Configure default document settings
+- [Webhook Events](/docs/developers/webhooks/events) - Subscribe to `document.reminder.sent`

apps/docs/content/docs/users/organisations/members.mdx

@@ -22,6 +22,37 @@ Organisation members have different permission levels that determine what they c
   organisation.
 </Callout>
 
+## Transferring Organisation Ownership
+
+Organisation ownership cannot be transferred through the regular organisation settings. Only a Documenso instance administrator can transfer ownership through the admin panel.
+
+If you are using Documenso Cloud, contact support to request an ownership transfer. If you are self-hosting, an instance administrator can follow the steps below.
+
+The target user must already be a member of the organisation.
+
+{/* prettier-ignore */}
+<Steps>
+  <Step>
+    Navigate to **Admin > Organisations** and select the organisation.
+  </Step>
+  <Step>
+    In the **Organisation Members** table, find the target member and click **Update role**.
+  </Step>
+  <Step>
+    Select **Owner** from the role dropdown and click **Update**.
+  </Step>
+</Steps>
+
+After the transfer:
+
+- The new owner is promoted to Admin if they previously held a lower role (Manager or Member).
+- The previous owner retains their Admin role and remains a member of the organisation.
+- Only one user can be the owner at a time.
+
+<Callout type="warn">
+  The current owner cannot be demoted below Admin. Transfer ownership to another member first.
+</Callout>
+
 ## Team Member Roles
 
 Teams have three roles with different permission levels:

apps/docs/content/docs/users/organisations/preferences/document.mdx

@@ -32,6 +32,8 @@ To access the preferences, navigate to either the organisation or teams settings
 | **Include the Signing Certificate**  | Whether the signing certificate is embedded in signed PDFs. The certificate is always available separately from the logs page.  |
 | **Include the Audit Logs**           | Whether the audit logs are embedded in the document when downloaded. The audit logs are always available separately from the logs page. |
 | **Default Recipients**               | Recipients that are automatically added to new documents. Can be overridden per document.                                       |
+| **Default Envelope Expiration**      | How long recipients have to sign before the signing link expires. See [recipient expiration](/docs/users/documents/advanced/recipient-expiration). |
+| **Default Signing Reminders**        | When and how often to email recipients who have not yet signed. See [signing reminders](/docs/users/documents/advanced/signing-reminders). |
 | **Delegate Document Ownership**      | Allow team API tokens to delegate document ownership to another team member.                                                    |
 | **AI Features**                      | Enable AI-powered features such as automatic recipient detection. Only shown if AI features are configured on the instance.     |
 

apps/docs/content/docs/users/templates/create.mdx

@@ -135,7 +135,9 @@ Additional options that apply to all documents created from this template:
 
 ## Template Visibility
 
-All templates are created in a team context. Team members can see, edit, delete, and use the templates in that team. See [Organisations](/docs/users/organisations) to learn about creating and managing organisations.
+All templates are created in a team context. By default, templates are **Private** and only visible to members of the owning team.
+
+If your organisation has multiple teams, you can set a template's type to **Organisation** to share it across all teams. See [Organisation Templates](/docs/users/templates/organisation-templates) for details.
 
 ---
 

apps/docs/content/docs/users/templates/index.mdx

@@ -24,6 +24,11 @@ description: Create reusable document templates for common signing workflows.
     description="Create documents from your templates."
     href="/docs/users/templates/use"
   />
+  <Card
+    title="Organisation Templates"
+    description="Share templates across all teams in your organisation."
+    href="/docs/users/templates/organisation-templates"
+  />
 </Cards>
 
 ---

apps/docs/content/docs/users/templates/meta.json

@@ -1,4 +1,4 @@
 {
   "title": "Templates",
-  "pages": ["create", "use"]
+  "pages": ["create", "use", "organisation-templates"]
 }

apps/docs/content/docs/users/templates/organisation-templates.mdx

@@ -0,0 +1,131 @@
+---
+title: Organisation Templates
+description: Share templates across all teams in your organisation so any team can create documents from them.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+
+## Overview
+
+Organisation templates are templates shared across all teams within the same organisation. Any team in the organisation can browse and use them to create documents, but only the owning team can edit or delete them.
+
+This is useful when you have standardised documents that multiple teams need to use, such as company-wide NDAs, onboarding agreements, or compliance forms.
+
+## Requirements
+
+The Organisation template type is available when your organisation has **two or more teams**. If your organisation has only one team, the option does not appear.
+
+## Template Types
+
+| Type             | Who can see it            | Who can edit it   | Who can use it              |
+| ---------------- | ------------------------- | ----------------- | --------------------------- |
+| **Private**      | Members of the owning team | Owning team       | Owning team                 |
+| **Organisation** | All teams in the org      | Owning team only  | All teams in the org        |
+| **Public**       | Anyone with the link      | Owning team       | Anyone via direct link      |
+
+## Set a Template as Organisation
+
+{/* prettier-ignore */}
+<Steps>
+<Step>
+### Open template settings
+
+Navigate to **Templates**, open the template you want to share, and click **Edit Template** to open the editor. Then open the settings dialog.
+
+</Step>
+
+<Step>
+### Change the template type
+
+In the **Template type** dropdown, select **Organisation**. This option only appears if your organisation has at least two teams.
+
+</Step>
+
+<Step>
+### Save
+
+Click **Save** to apply the change. The template is now visible to all teams in your organisation.
+
+</Step>
+</Steps>
+
+You can also set the template type to Organisation when creating a new template. The type dropdown appears in the template settings step.
+
+## Browse Organisation Templates
+
+{/* prettier-ignore */}
+<Steps>
+<Step>
+### Open the templates page
+
+Navigate to **Templates** in the sidebar.
+
+</Step>
+
+<Step>
+### Switch to the Organisation tab
+
+Click the **Organisation** tab above the template list. This tab only appears for non-personal organisations.
+
+The Organisation tab shows all organisation templates from every team in your organisation, including your own.
+
+</Step>
+</Steps>
+
+Templates from other teams display the owning team's name next to the template type.
+
+## Use an Organisation Template
+
+Any team member in the organisation can create documents from an organisation template, even if the template belongs to a different team.
+
+{/* prettier-ignore */}
+<Steps>
+<Step>
+
+Find the template in the **Organisation** tab or click through from the template detail page.
+
+</Step>
+
+<Step>
+
+Click **Use Template** and fill in the recipient details. The document is created under your team, not the template's owning team.
+
+</Step>
+</Steps>
+
+See [Use Templates](/docs/users/templates/use) for details on creating documents from templates.
+
+## Editing and Permissions
+
+Only members of the team that owns the template can edit or delete it. When viewing an organisation template from another team:
+
+- The **Edit Template**, **Direct Link**, and **Bulk Send** controls are hidden
+- The recipients section is read-only
+- The **Use Template** button is available
+
+To modify a template owned by another team, contact that team's members or ask an organisation admin to make changes.
+
+## Visibility
+
+Organisation templates respect the same visibility settings as other templates. A template's visibility determines which team roles can access it:
+
+| Visibility            | Who can access                          |
+| --------------------- | --------------------------------------- |
+| **Everyone**          | All team members (Admin, Manager, Member) |
+| **Manager and above** | Admins and Managers only                |
+| **Admin**             | Admins only                             |
+
+This applies to both the owning team and other teams in the organisation. A Member-role user on any team cannot see an organisation template set to Admin visibility.
+
+## Reverting to Private
+
+To stop sharing a template across the organisation, change the template type back to **Private** in the template settings. The template will only be visible to the owning team. Documents already created from the template are not affected.
+
+---
+
+## See Also
+
+- [Create Templates](/docs/users/templates/create) - Build reusable templates
+- [Use Templates](/docs/users/templates/use) - Create documents from templates
+- [Organisations](/docs/users/organisations) - Managing organisations and teams

apps/docs/package.json

@@ -16,7 +16,7 @@
     "fumadocs-ui": "16.5.0",
     "lucide-react": "^0.563.0",
     "mermaid": "^11.12.2",
-    "next": "16.1.6",
+    "next": "16.2.4",
     "next-plausible": "^3.12.5",
     "next-themes": "^0.4.6",
     "react": "^19.2.4",

apps/openpage-api/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@documenso/prisma": "*",
     "luxon": "^3.7.2",
-    "next": "15.5.12"
+    "next": "16.2.4"
   },
   "devDependencies": {
     "@types/node": "^20",

apps/openpage-api/tsconfig.json

@@ -11,7 +11,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -22,6 +22,12 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }

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

@@ -0,0 +1,136 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useNavigate } from 'react-router';
+
+import { AppError } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AdminOrganisationMemberDeleteDialogProps = {
+  organisationId: string;
+  organisationName: string;
+  organisationMemberId: string;
+  organisationMemberName: string;
+  organisationMemberEmail: string;
+};
+
+export const AdminOrganisationMemberDeleteDialog = ({
+  organisationId,
+  organisationName,
+  organisationMemberId,
+  organisationMemberName,
+  organisationMemberEmail,
+}: AdminOrganisationMemberDeleteDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+
+  const [open, setOpen] = useState(false);
+
+  const { mutateAsync: deleteOrganisationMember, isPending } =
+    trpc.admin.organisationMember.delete.useMutation({
+      onSuccess: async () => {
+        toast({
+          title: _(msg`Success`),
+          description: _(msg`Member has been removed from the organisation.`),
+          duration: 5000,
+        });
+
+        setOpen(false);
+
+        // Refresh the page to show updated data
+        await navigate(0);
+      },
+      onError: (err) => {
+        const error = AppError.parseError(err);
+
+        console.error(error);
+
+        toast({
+          title: _(msg`An error occurred`),
+          description: _(msg`We couldn't remove this member. Please try again later.`),
+          variant: 'destructive',
+          duration: 10000,
+        });
+      },
+    });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
+      <DialogTrigger asChild>
+        <Button variant="destructive">
+          <Trans>Remove</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader className="space-y-4">
+          <DialogTitle>
+            <Trans>Remove Organisation Member</Trans>
+          </DialogTitle>
+
+          <Alert variant="destructive">
+            <AlertDescription className="selection:bg-red-100">
+              <Trans>This action is not reversible. Please be certain.</Trans>
+            </AlertDescription>
+          </Alert>
+        </DialogHeader>
+
+        <div>
+          <DialogDescription>
+            <Trans>
+              You are about to remove the following user from the organisation{' '}
+              <span className="font-semibold">{organisationName}</span>:
+            </Trans>
+          </DialogDescription>
+
+          <Alert className="mt-4" variant="neutral" padding="tight">
+            <AvatarWithText
+              avatarClass="h-12 w-12"
+              avatarFallback={organisationMemberName.slice(0, 1).toUpperCase()}
+              primaryText={<span className="font-semibold">{organisationMemberName}</span>}
+              secondaryText={organisationMemberEmail}
+            />
+          </Alert>
+        </div>
+
+        <fieldset disabled={isPending}>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              <Trans>Cancel</Trans>
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isPending}
+              onClick={async () =>
+                deleteOrganisationMember({
+                  organisationId,
+                  organisationMemberId,
+                })
+              }
+            >
+              <Trans>Remove member</Trans>
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,130 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useNavigate } from 'react-router';
+
+import { AppError } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AdminTeamMemberDeleteDialogProps = {
+  teamId: number;
+  teamName: string;
+  memberId: string;
+  memberName: string;
+  memberEmail: string;
+};
+
+export const AdminTeamMemberDeleteDialog = ({
+  teamId,
+  teamName,
+  memberId,
+  memberName,
+  memberEmail,
+}: AdminTeamMemberDeleteDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+
+  const [open, setOpen] = useState(false);
+
+  const { mutateAsync: deleteTeamMember, isPending } = trpc.admin.teamMember.delete.useMutation({
+    onSuccess: async () => {
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Member has been removed from the team.`),
+        duration: 5000,
+      });
+
+      setOpen(false);
+
+      // Refresh the page to show updated data
+      await navigate(0);
+    },
+    onError: (err) => {
+      const error = AppError.parseError(err);
+
+      console.error(error);
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(msg`We couldn't remove this member. Please try again later.`),
+        variant: 'destructive',
+        duration: 10000,
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
+      <DialogTrigger asChild>
+        <Button variant="destructive">
+          <Trans>Remove</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader className="space-y-4">
+          <DialogTitle>
+            <Trans>Remove Team Member</Trans>
+          </DialogTitle>
+
+          <Alert variant="destructive">
+            <AlertDescription className="selection:bg-red-100">
+              <Trans>This action is not reversible. Please be certain.</Trans>
+            </AlertDescription>
+          </Alert>
+        </DialogHeader>
+
+        <div>
+          <DialogDescription>
+            <Trans>
+              You are about to remove the following user from the team{' '}
+              <span className="font-semibold">{teamName}</span>:
+            </Trans>
+          </DialogDescription>
+
+          <Alert className="mt-4" variant="neutral" padding="tight">
+            <AvatarWithText
+              avatarClass="h-12 w-12"
+              avatarFallback={memberName.slice(0, 1).toUpperCase()}
+              primaryText={<span className="font-semibold">{memberName}</span>}
+              secondaryText={memberEmail}
+            />
+          </Alert>
+        </div>
+
+        <fieldset disabled={isPending}>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              <Trans>Cancel</Trans>
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isPending}
+              onClick={async () => deleteTeamMember({ teamId, memberId })}
+            >
+              <Trans>Remove member</Trans>
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -5,6 +5,7 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { zEmail } from '@documenso/lib/utils/zod';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -43,7 +44,7 @@ type ConfirmationDialogProps = {
 
 const ZNextSignerFormSchema = z.object({
   name: z.string().min(1, 'Name is required'),
-  email: z.string().email('Invalid email address'),
+  email: zEmail('Invalid email address'),
 });
 
 type TNextSignerFormSchema = z.infer<typeof ZNextSignerFormSchema>;
@@ -115,7 +116,7 @@ export function AssistantConfirmationDialog({
                   <div className="mt-4 flex flex-col gap-4">
                     {!isEditingNextSigner && (
                       <div>
-                        <p className="text-muted-foreground text-sm">
+                        <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> (

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

@@ -57,7 +57,7 @@ export const ClaimCreateDialog = ({ licenseFlags }: ClaimCreateDialogProps) => {
         </Button>
       </DialogTrigger>
 
-      <DialogContent className="sm:max-w-md">
+      <DialogContent className="scrollbar-hidden max-h-[90vh] overflow-y-auto sm:max-w-md">
         <DialogHeader>
           <DialogTitle>
             <Trans>Create Subscription Claim</Trans>

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

@@ -53,7 +53,7 @@ export const ClaimUpdateDialog = ({ claim, trigger, licenseFlags }: ClaimUpdateD
         {trigger}
       </DialogTrigger>
 
-      <DialogContent className="sm:max-w-md">
+      <DialogContent className="scrollbar-hidden max-h-[90vh] overflow-y-auto sm:max-w-md">
         <DialogHeader>
           <DialogTitle>
             <Trans>Update Subscription Claim</Trans>

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

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

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

@@ -1,103 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { useNavigate } from 'react-router';
-
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { trpc as trpcReact } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useCurrentTeam } from '~/providers/team';
-
-type DocumentDuplicateDialogProps = {
-  id: string;
-  token?: string;
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-};
-
-export const DocumentDuplicateDialog = ({
-  id,
-  token,
-  open,
-  onOpenChange,
-}: DocumentDuplicateDialogProps) => {
-  const navigate = useNavigate();
-
-  const { toast } = useToast();
-  const { _ } = useLingui();
-
-  const team = useCurrentTeam();
-
-  const documentsPath = formatDocumentsPath(team.url);
-
-  const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
-    trpcReact.envelope.duplicate.useMutation({
-      onSuccess: async ({ id }) => {
-        toast({
-          title: _(msg`Document Duplicated`),
-          description: _(msg`Your document has been successfully duplicated.`),
-          duration: 5000,
-        });
-
-        await navigate(`${documentsPath}/${id}/edit`);
-        onOpenChange(false);
-      },
-    });
-
-  const onDuplicate = async () => {
-    try {
-      await duplicateEnvelope({ envelopeId: id });
-    } catch {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`This document could not be duplicated at this time. Please try again.`),
-        variant: 'destructive',
-        duration: 7500,
-      });
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => !isDuplicating && onOpenChange(value)}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Duplicate</Trans>
-          </DialogTitle>
-        </DialogHeader>
-
-        <DialogFooter>
-          <div className="flex w-full flex-1 flex-nowrap gap-4">
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => onOpenChange(false)}
-              className="flex-1"
-            >
-              <Trans>Cancel</Trans>
-            </Button>
-
-            <Button
-              type="button"
-              disabled={isDuplicating}
-              loading={isDuplicating}
-              onClick={onDuplicate}
-              className="flex-1"
-            >
-              <Trans>Duplicate</Trans>
-            </Button>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -4,13 +4,14 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { type Recipient, SigningStatus, type Team, type User } from '@prisma/client';
+import { SigningStatus, type Team, type User } from '@prisma/client';
 import { History } from 'lucide-react';
 import { useForm, useWatch } from 'react-hook-form';
 import * as z from 'zod';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import type { TRecipientLite } from '@documenso/lib/types/recipient';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { Document } from '@documenso/prisma/types/document-legacy-schema';
 import { trpc as trpcReact } from '@documenso/trpc/react';
@@ -45,10 +46,10 @@ const FORM_ID = 'resend-email';
 export type DocumentResendDialogProps = {
   document: Pick<Document, 'id' | 'userId' | 'teamId' | 'status'> & {
     user: Pick<User, 'id' | 'name' | 'email'>;
-    recipients: Recipient[];
+    recipients: TRecipientLite[];
     team: Pick<Team, 'id' | 'url'> | null;
   };
-  recipients: Recipient[];
+  recipients: TRecipientLite[];
 };
 
 export const ZResendDocumentFormSchema = z.object({
@@ -183,7 +184,7 @@ export const DocumentResendDialog = ({ document, recipients }: DocumentResendDia
             <DialogClose asChild>
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                className="flex-1 bg-black/5 hover:bg-black/10 dark:bg-muted dark:hover:bg-muted/80"
                 variant="secondary"
                 disabled={isSubmitting}
               >

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

@@ -52,13 +52,23 @@ export const EnvelopeDeleteDialog = ({
   const [inputValue, setInputValue] = useState('');
   const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
 
+  const isDocument = type === EnvelopeType.DOCUMENT;
+
   const { mutateAsync: deleteEnvelope, isPending } = trpcReact.envelope.delete.useMutation({
     onSuccess: async () => {
       void refreshLimits();
 
       toast({
-        title: t`Document deleted`,
-        description: t`"${title}" has been successfully deleted`,
+        title: canManageDocument
+          ? isDocument
+            ? t`Document deleted`
+            : t`Template deleted`
+          : isDocument
+            ? t`Document hidden`
+            : t`Template hidden`,
+        description: canManageDocument
+          ? t`"${title}" has been successfully deleted`
+          : t`"${title}" has been successfully hidden`,
         duration: 5000,
       });
 
@@ -69,7 +79,9 @@ export const EnvelopeDeleteDialog = ({
     onError: () => {
       toast({
         title: t`Something went wrong`,
-        description: t`This document could not be deleted at this time. Please try again.`,
+        description: isDocument
+          ? t`This document could not be deleted at this time. Please try again.`
+          : t`This template could not be deleted at this time. Please try again.`,
         variant: 'destructive',
         duration: 7500,
       });

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

@@ -16,6 +16,7 @@ import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/org
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { getRecipientsWithMissingFields } from '@documenso/lib/utils/recipients';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { trpc, trpc as trpcReact } from '@documenso/trpc/react';
 import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
 import { cn } from '@documenso/ui/lib/utils';
@@ -62,10 +63,7 @@ export type EnvelopeDistributeDialogProps = {
 export const ZEnvelopeDistributeFormSchema = z.object({
   meta: z.object({
     emailId: z.string().nullable(),
-    emailReplyTo: z.preprocess(
-      (val) => (val === '' ? undefined : val),
-      z.string().email().optional(),
-    ),
+    emailReplyTo: z.preprocess((val) => (val === '' ? undefined : val), zEmail().optional()),
     subject: z.string(),
     message: z.string(),
     distributionMethod: z

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

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
 import { useNavigate } from 'react-router';
 
@@ -10,6 +9,7 @@ import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -41,19 +41,20 @@ export const EnvelopeDuplicateDialog = ({
 
   const team = useCurrentTeam();
 
+  const isDocument = envelopeType === EnvelopeType.DOCUMENT;
+
   const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
     trpc.envelope.duplicate.useMutation({
       onSuccess: async ({ id }) => {
         toast({
-          title: t`Envelope Duplicated`,
-          description: t`Your envelope has been successfully duplicated.`,
+          title: isDocument ? t`Document Duplicated` : t`Template Duplicated`,
+          description: isDocument
+            ? t`Your document has been successfully duplicated.`
+            : t`Your template has been successfully duplicated.`,
           duration: 5000,
         });
 
-        const path =
-          envelopeType === EnvelopeType.DOCUMENT
-            ? formatDocumentsPath(team.url)
-            : formatTemplatesPath(team.url);
+        const path = isDocument ? formatDocumentsPath(team.url) : formatTemplatesPath(team.url);
 
         await navigate(`${path}/${id}/edit`);
         setOpen(false);
@@ -66,7 +67,9 @@ export const EnvelopeDuplicateDialog = ({
     } catch {
       toast({
         title: t`Something went wrong`,
-        description: t`This document could not be duplicated at this time. Please try again.`,
+        description: isDocument
+          ? t`This document could not be duplicated at this time. Please try again.`
+          : t`This template could not be duplicated at this time. Please try again.`,
         variant: 'destructive',
         duration: 7500,
       });
@@ -78,30 +81,25 @@ export const EnvelopeDuplicateDialog = ({
       {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
 
       <DialogContent>
-        {envelopeType === EnvelopeType.DOCUMENT ? (
-          <DialogHeader>
-            <DialogTitle>
-              <Trans>Duplicate Document</Trans>
-            </DialogTitle>
-            <DialogDescription>
+        <DialogHeader>
+          <DialogTitle>
+            {isDocument ? <Trans>Duplicate Document</Trans> : <Trans>Duplicate Template</Trans>}
+          </DialogTitle>
+          <DialogDescription>
+            {isDocument ? (
               <Trans>This document will be duplicated.</Trans>
-            </DialogDescription>
-          </DialogHeader>
-        ) : (
-          <DialogHeader>
-            <DialogTitle>
-              <Trans>Duplicate Template</Trans>
-            </DialogTitle>
-            <DialogDescription>
+            ) : (
               <Trans>This template will be duplicated.</Trans>
-            </DialogDescription>
-          </DialogHeader>
-        )}
+            )}
+          </DialogDescription>
+        </DialogHeader>
 
         <DialogFooter>
-          <Button type="button" variant="secondary" disabled={isDuplicating}>
-            <Trans>Cancel</Trans>
-          </Button>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isDuplicating}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
 
           <Button type="button" loading={isDuplicating} onClick={onDuplicate}>
             <Trans>Duplicate</Trans>

apps/remix/app/components/dialogs/envelope-item-edit-dialog.tsx

@@ -0,0 +1,368 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { AlertTriangleIcon, FileIcon, UploadIcon, XIcon } from 'lucide-react';
+import { type FileRejection, useDropzone } from 'react-dropzone';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
+import { trpc } from '@documenso/trpc/react';
+import { ZDocumentTitleSchema } from '@documenso/trpc/server/document-router/schema';
+import type { TReplaceEnvelopeItemPdfPayload } from '@documenso/trpc/server/envelope-router/replace-envelope-item-pdf.types';
+import { buildDropzoneRejectionDescription } from '@documenso/ui/lib/handle-dropzone-rejection';
+import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  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';
+
+const ZEditEnvelopeItemFormSchema = z.object({
+  title: ZDocumentTitleSchema,
+});
+
+type TEditEnvelopeItemFormSchema = z.infer<typeof ZEditEnvelopeItemFormSchema>;
+
+/**
+ * Note: This should only be visible if the envelope item is editable.
+ */
+export type EnvelopeItemEditDialogProps = {
+  envelopeItem: { id: string; title: string };
+  allowConfigureTitle: boolean;
+  trigger: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const EnvelopeItemEditDialog = ({
+  envelopeItem,
+  allowConfigureTitle,
+  trigger,
+  ...props
+}: EnvelopeItemEditDialogProps) => {
+  const { t, i18n } = useLingui();
+  const { toast } = useToast();
+
+  const { envelope, editorFields, setLocalEnvelope, isEmbedded } = useCurrentEnvelopeEditor();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [replacementFile, setReplacementFile] = useState<{ file: File; pageCount: number } | null>(
+    null,
+  );
+  const [isDropping, setIsDropping] = useState(false);
+
+  const form = useForm<TEditEnvelopeItemFormSchema>({
+    resolver: zodResolver(ZEditEnvelopeItemFormSchema),
+    defaultValues: {
+      title: envelopeItem.title,
+    },
+  });
+
+  const { mutateAsync: replaceEnvelopeItemPdf } = trpc.envelope.item.replacePdf.useMutation({
+    onSuccess: ({ data, fields }) => {
+      setLocalEnvelope({
+        envelopeItems: envelope.envelopeItems.map((item) =>
+          item.id === data.id
+            ? { ...item, documentDataId: data.documentDataId, title: data.title }
+            : item,
+        ),
+      });
+
+      if (fields) {
+        setLocalEnvelope({ fields });
+        editorFields.resetForm(fields);
+      }
+    },
+  });
+
+  const fieldsOnExcessPages =
+    replacementFile !== null
+      ? envelope.fields.filter(
+          (field) =>
+            field.envelopeItemId === envelopeItem.id && field.page > replacementFile.pageCount,
+        )
+      : [];
+
+  const onFileDropRejected = (fileRejections: FileRejection[]) => {
+    toast({
+      title: t`Upload failed`,
+      description: i18n._(buildDropzoneRejectionDescription(fileRejections)),
+      duration: 5000,
+      variant: 'destructive',
+    });
+  };
+
+  const onFileDrop = async (files: File[]) => {
+    const file = files[0];
+
+    if (!file || isDropping) {
+      return;
+    }
+
+    setIsDropping(true);
+
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const fileData = new Uint8Array(arrayBuffer.slice(0));
+      const { PDF } = await import('@libpdf/core');
+      const pdfDoc = await PDF.load(fileData);
+
+      setReplacementFile({
+        file,
+        pageCount: pdfDoc.getPageCount(),
+      });
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: t`Failed to read file`,
+        description: t`The file is not a valid PDF.`,
+        variant: 'destructive',
+      });
+    }
+
+    setIsDropping(false);
+  };
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: { 'application/pdf': ['.pdf'] },
+    maxFiles: 1,
+    maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
+    disabled: form.formState.isSubmitting,
+    onDrop: (files) => void onFileDrop(files),
+    onDropRejected: onFileDropRejected,
+  });
+
+  const onSubmit = async (data: TEditEnvelopeItemFormSchema) => {
+    if (isDropping || !replacementFile) {
+      return;
+    }
+
+    try {
+      const { file, pageCount } = replacementFile;
+
+      if (isEmbedded) {
+        const arrayBuffer = await file.arrayBuffer();
+        const fileData = new Uint8Array(arrayBuffer.slice(0));
+
+        const remainingFields = envelope.fields.filter(
+          (field) => field.envelopeItemId !== envelopeItem.id || field.page <= pageCount,
+        );
+
+        setLocalEnvelope({
+          envelopeItems: envelope.envelopeItems.map((item) =>
+            item.id === envelopeItem.id ? { ...item, title: data.title, data: fileData } : item,
+          ),
+          fields: remainingFields,
+        });
+
+        editorFields.resetForm(remainingFields);
+      } else {
+        const payload = {
+          envelopeId: envelope.id,
+          envelopeItemId: envelopeItem.id,
+          title: data.title,
+        } satisfies TReplaceEnvelopeItemPdfPayload;
+
+        const formData = new FormData();
+        formData.append('payload', JSON.stringify(payload));
+        formData.append('file', file);
+
+        await replaceEnvelopeItemPdf(formData);
+      }
+
+      setIsOpen(false);
+    } catch {
+      toast({
+        title: t`Failed to update item`,
+        description: t`Something went wrong while updating the envelope item.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset({ title: envelopeItem.title });
+      setReplacementFile(null);
+      setIsDropping(false);
+    }
+  }, [isOpen, form, envelopeItem.title]);
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes < 1024) {
+      return `${bytes} B`;
+    }
+
+    if (bytes < 1024 * 1024) {
+      return `${(bytes / 1024).toFixed(1)} KB`;
+    }
+
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  return (
+    <Dialog
+      {...props}
+      open={isOpen}
+      onOpenChange={(value) => !form.formState.isSubmitting && setIsOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Edit Item</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Update the title or replace the PDF file.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Document Title</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        data-testid="envelope-item-edit-title-input"
+                        placeholder={t`Document Title`}
+                        disabled={!allowConfigureTitle}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div>
+                <FormLabel>
+                  <Trans>Replace PDF</Trans>
+                </FormLabel>
+
+                {replacementFile ? (
+                  <div className="mt-1.5 space-y-2">
+                    <div
+                      data-testid="envelope-item-edit-selected-file"
+                      className="flex items-center justify-between rounded-md border border-border bg-muted/50 px-3 py-2"
+                    >
+                      <div className="flex min-w-0 items-center space-x-2">
+                        <FileIcon className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+                        <div className="min-w-0">
+                          <p className="truncate text-sm font-medium">
+                            {replacementFile.file.name}
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            {formatFileSize(replacementFile.file.size)}
+                            {isDropping ? ' · …' : ' · '}
+                            {!isDropping && replacementFile.pageCount !== null && (
+                              <Plural
+                                one="1 page"
+                                other="# pages"
+                                value={replacementFile.pageCount}
+                              />
+                            )}
+                          </p>
+                        </div>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        data-testid="envelope-item-edit-clear-file"
+                        onClick={() => {
+                          setReplacementFile(null);
+                        }}
+                      >
+                        <XIcon className="h-4 w-4" />
+                      </Button>
+                    </div>
+
+                    {fieldsOnExcessPages.length > 0 && (
+                      <Alert variant="warning" padding="tight">
+                        <AlertTriangleIcon className="h-4 w-4" />
+                        <AlertDescription data-testid="envelope-item-edit-field-warning">
+                          <Plural
+                            one="1 field will be deleted because the new PDF has fewer pages than the current one."
+                            other="# fields will be deleted because the new PDF has fewer pages than the current one."
+                            value={fieldsOnExcessPages.length}
+                          />
+                        </AlertDescription>
+                      </Alert>
+                    )}
+                  </div>
+                ) : (
+                  <div
+                    data-testid="envelope-item-edit-dropzone"
+                    {...getRootProps()}
+                    className={cn(
+                      'mt-1.5 flex cursor-pointer items-center justify-center rounded-md border border-dashed border-border px-4 py-4 transition-colors',
+                      isDragActive
+                        ? 'border-primary/50 bg-primary/5'
+                        : 'hover:border-muted-foreground/50 hover:bg-muted/50',
+                    )}
+                  >
+                    <input {...getInputProps()} />
+                    <div className="flex items-center space-x-2 text-sm text-muted-foreground">
+                      <UploadIcon className="h-4 w-4" />
+                      <span>
+                        <Trans>Drop PDF here or click to select</Trans>
+                      </span>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    <Trans>Cancel</Trans>
+                  </Button>
+                </DialogClose>
+
+                <Button
+                  type="submit"
+                  loading={form.formState.isSubmitting}
+                  disabled={isDropping || !replacementFile}
+                  data-testid="envelope-item-edit-update-button"
+                >
+                  <Trans>Update</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -4,12 +4,13 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
-import { DocumentStatus, EnvelopeType, type Recipient, SigningStatus } from '@prisma/client';
+import { DocumentStatus, EnvelopeType, SigningStatus } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
+import type { TEnvelopeRecipientLite } from '@documenso/lib/types/recipient';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -38,7 +39,7 @@ import { StackAvatar } from '../general/stack-avatar';
 
 export type EnvelopeRedistributeDialogProps = {
   envelope: Pick<TEnvelope, 'id' | 'userId' | 'teamId' | 'status' | 'type' | 'documentMeta'> & {
-    recipients: Recipient[];
+    recipients: TEnvelopeRecipientLite[];
   };
   trigger?: React.ReactNode;
 };

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

@@ -0,0 +1,130 @@
+import { useEffect, useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { DOCUMENT_TITLE_MAX_LENGTH } from '@documenso/trpc/server/document-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type EnvelopeRenameDialogProps = {
+  id: string;
+  initialTitle: string;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+  onSuccess?: () => Promise<void>;
+  envelopeType?: 'document' | 'template';
+};
+
+export const EnvelopeRenameDialog = ({
+  id,
+  initialTitle,
+  open,
+  onOpenChange,
+  onSuccess,
+  envelopeType = 'document',
+}: EnvelopeRenameDialogProps) => {
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const [title, setTitle] = useState(initialTitle);
+
+  useEffect(() => {
+    if (open) {
+      setTitle(initialTitle);
+    }
+  }, [open, initialTitle]);
+
+  const isTemplate = envelopeType === 'template';
+
+  const { mutate: updateEnvelope, isPending } = trpcReact.envelope.update.useMutation({
+    onSuccess: async () => {
+      await onSuccess?.();
+
+      toast({
+        title: isTemplate ? t`Template Renamed` : t`Document Renamed`,
+        description: isTemplate
+          ? t`Your template has been successfully renamed.`
+          : t`Your document has been successfully renamed.`,
+        duration: 5000,
+      });
+
+      onOpenChange(false);
+    },
+    onError: () => {
+      toast({
+        description: t`Something went wrong. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    },
+  });
+
+  const trimmedTitle = title.trim();
+
+  const onRename = () => {
+    if (!trimmedTitle || trimmedTitle === initialTitle) {
+      onOpenChange(false);
+      return;
+    }
+
+    updateEnvelope({
+      envelopeId: id,
+      data: {
+        title: trimmedTitle,
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {isTemplate ? <Trans>Rename Template</Trans> : <Trans>Rename Document</Trans>}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="py-2">
+          <Label htmlFor="title" className="sr-only">
+            <Trans>Title</Trans>
+          </Label>
+          <Input
+            id="title"
+            value={title}
+            placeholder={t`Enter a new title`}
+            onChange={(e) => setTitle(e.target.value)}
+            disabled={isPending}
+            maxLength={DOCUMENT_TITLE_MAX_LENGTH}
+            className="w-full"
+            autoFocus
+          />
+        </div>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button
+            type="button"
+            disabled={isPending || !trimmedTitle || trimmedTitle === initialTitle}
+            loading={isPending}
+            onClick={() => void onRename()}
+          >
+            <Trans>Rename</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelope-save-as-template-dialog.tsx

@@ -0,0 +1,181 @@
+import { useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+import { Controller, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+type EnvelopeSaveAsTemplateDialogProps = {
+  envelopeId: string;
+  trigger?: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export const EnvelopeSaveAsTemplateDialog = ({
+  envelopeId,
+  trigger,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+}: EnvelopeSaveAsTemplateDialogProps) => {
+  const navigate = useNavigate();
+
+  const [internalOpen, setInternalOpen] = useState(false);
+
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = controlledOnOpenChange ?? setInternalOpen;
+
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const team = useCurrentTeam();
+
+  const templatesPath = formatTemplatesPath(team.url);
+
+  const form = useForm({
+    defaultValues: {
+      includeRecipients: true,
+      includeFields: true,
+    },
+  });
+
+  const includeRecipients = form.watch('includeRecipients');
+
+  const { mutateAsync: saveAsTemplate, isPending } = trpc.envelope.saveAsTemplate.useMutation({
+    onSuccess: async ({ id }) => {
+      toast({
+        title: t`Template Created`,
+        description: t`Your document has been saved as a template.`,
+        duration: 5000,
+      });
+
+      await navigate(`${templatesPath}/${id}/edit`);
+      setOpen(false);
+    },
+  });
+
+  const onSubmit = async () => {
+    const { includeRecipients, includeFields } = form.getValues();
+
+    try {
+      await saveAsTemplate({
+        envelopeId,
+        includeRecipients,
+        includeFields: includeRecipients && includeFields,
+      });
+    } catch {
+      toast({
+        title: t`Something went wrong`,
+        description: t`This document could not be saved as a template at this time. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(value) => {
+        if (isPending) {
+          return;
+        }
+
+        setOpen(value);
+
+        if (!value) {
+          form.reset();
+        }
+      }}
+    >
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Save as Template</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Create a template from this document.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <Controller
+            control={form.control}
+            name="includeRecipients"
+            render={({ field }) => (
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="envelopeIncludeRecipients"
+                  checked={field.value}
+                  onCheckedChange={(checked) => {
+                    field.onChange(checked === true);
+
+                    if (!checked) {
+                      form.setValue('includeFields', false);
+                    }
+                  }}
+                />
+                <Label htmlFor="envelopeIncludeRecipients">
+                  <Trans>Include Recipients</Trans>
+                </Label>
+              </div>
+            )}
+          />
+
+          <Controller
+            control={form.control}
+            name="includeFields"
+            render={({ field }) => (
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="envelopeIncludeFields"
+                  checked={field.value}
+                  disabled={!includeRecipients}
+                  onCheckedChange={(checked) => field.onChange(checked === true)}
+                />
+                <Label
+                  htmlFor="envelopeIncludeFields"
+                  className={!includeRecipients ? 'opacity-50' : ''}
+                >
+                  <Trans>Include Fields</Trans>
+                </Label>
+              </div>
+            )}
+          />
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isPending}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button type="button" loading={isPending} onClick={onSubmit}>
+            <Trans>Save as Template</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -40,13 +40,21 @@ type TCreateFolderFormSchema = z.infer<typeof ZCreateFolderFormSchema>;
 export type FolderCreateDialogProps = {
   type: FolderType;
   trigger?: React.ReactNode;
+  parentFolderId?: string | null;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
-export const FolderCreateDialog = ({ type, trigger, ...props }: FolderCreateDialogProps) => {
+export const FolderCreateDialog = ({
+  type,
+  trigger,
+  parentFolderId,
+  ...props
+}: FolderCreateDialogProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
   const { folderId } = useParams();
 
+  const parentId = parentFolderId ?? folderId;
+
   const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false);
 
   const { mutateAsync: createFolder } = trpc.folder.createFolder.useMutation();
@@ -62,7 +70,7 @@ export const FolderCreateDialog = ({ type, trigger, ...props }: FolderCreateDial
     try {
       await createFolder({
         name: data.name,
-        parentId: folderId,
+        parentId,
         type,
       });
 

apps/remix/app/components/dialogs/organisation-member-invite-dialog.tsx

@@ -17,6 +17,7 @@ import { IS_BILLING_ENABLED, SUPPORT_EMAIL } from '@documenso/lib/constants/app'
 import { ORGANISATION_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/organisations';
 import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
 import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateOrganisationMemberInvitesRequestSchema } from '@documenso/trpc/server/organisation-router/create-organisation-member-invites.types';
 import { cn } from '@documenso/ui/lib/utils';
@@ -94,7 +95,7 @@ type TabTypes = 'INDIVIDUAL' | 'BULK';
 
 const ZImportOrganisationMemberSchema = z.array(
   z.object({
-    email: z.string().email(),
+    email: zEmail(),
     organisationRole: z.nativeEnum(OrganisationMemberRole),
   }),
 );
@@ -329,12 +330,12 @@ export const OrganisationMemberInviteDialog = ({
             onValueChange={(value) => setInvitationType(value as TabTypes)}
           >
             <TabsList className="w-full">
-              <TabsTrigger value="INDIVIDUAL" className="hover:text-foreground w-full">
+              <TabsTrigger value="INDIVIDUAL" className="w-full hover:text-foreground">
                 <MailIcon size={20} className="mr-2" />
                 <Trans>Invite Members</Trans>
               </TabsTrigger>
 
-              <TabsTrigger value="BULK" className="hover:text-foreground w-full">
+              <TabsTrigger value="BULK" className="w-full hover:text-foreground">
                 <UsersIcon size={20} className="mr-2" /> <Trans>Bulk Import</Trans>
               </TabsTrigger>
             </TabsList>
@@ -382,7 +383,7 @@ export const OrganisationMemberInviteDialog = ({
                                 )}
                                 <FormControl>
                                   <Select {...field} onValueChange={field.onChange}>
-                                    <SelectTrigger className="text-muted-foreground max-w-[200px]">
+                                    <SelectTrigger className="max-w-[200px] text-muted-foreground">
                                       <SelectValue />
                                     </SelectTrigger>
 
@@ -447,7 +448,7 @@ export const OrganisationMemberInviteDialog = ({
               <div className="mt-4 space-y-4">
                 <Card gradient className="h-32">
                   <CardContent
-                    className="text-muted-foreground/80 hover:text-muted-foreground/90 flex h-full cursor-pointer flex-col items-center justify-center rounded-lg p-0 transition-colors"
+                    className="flex h-full cursor-pointer flex-col items-center justify-center rounded-lg p-0 text-muted-foreground/80 transition-colors hover:text-muted-foreground/90"
                     onClick={() => fileInputRef.current?.click()}
                   >
                     <Upload className="h-5 w-5" />

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

@@ -5,6 +5,7 @@ import { createCallable } from 'react-call';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { zEmail } from '@documenso/lib/utils/zod';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -24,10 +25,7 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 
 const ZSignFieldEmailFormSchema = z.object({
-  email: z
-    .string()
-    .email()
-    .min(1, { message: msg`Email is required`.id }),
+  email: zEmail().min(1, { message: msg`Email is required`.id }),
 });
 
 type TSignFieldEmailFormSchema = z.infer<typeof ZSignFieldEmailFormSchema>;

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

@@ -10,8 +10,10 @@ import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { TEAM_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/teams';
 import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
@@ -73,8 +75,14 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
   const { toast } = useToast();
 
   const team = useCurrentTeam();
+  const organisation = useCurrentOrganisation();
   const utils = trpc.useUtils();
 
+  const canInviteOrganisationMembers = canExecuteOrganisationAction(
+    'MANAGE_ORGANISATION',
+    organisation.currentOrganisationRole,
+  );
+
   const form = useForm<TAddTeamMembersFormSchema>({
     resolver: zodResolver(ZAddTeamMembersFormSchema),
     defaultValues: {
@@ -106,7 +114,7 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
 
   const onFormSubmit = async ({ members }: TAddTeamMembersFormSchema) => {
     if (members.length === 0) {
-      if (hasNoAvailableMembers) {
+      if (hasNoAvailableMembers && canInviteOrganisationMembers) {
         setInviteDialogOpen(true);
         return;
       }
@@ -231,7 +239,7 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
             onKeyDown={(e) => {
               if (e.key === 'Enter' && form.getValues('members').length === 0) {
                 e.preventDefault();
-                if (hasNoAvailableMembers) {
+                if (hasNoAvailableMembers && canInviteOrganisationMembers) {
                   setInviteDialogOpen(true);
                 }
                 // Don't show toast - the disabled Next button already communicates this
@@ -260,21 +268,32 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
                                 <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>
+                                {canInviteOrganisationMembers ? (
+                                  <Trans>
+                                    To add members to this team, you must first add them to the
+                                    organisation.
+                                  </Trans>
+                                ) : (
+                                  <Trans>
+                                    To add members to this team, they must first be invited to the
+                                    organisation. Only organisation admins and managers can invite
+                                    new members — please contact one of them to invite members on
+                                    your behalf.
+                                  </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>
-                                }
-                              />
+                              {canInviteOrganisationMembers && (
+                                <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
@@ -310,30 +329,32 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
                               <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>
+                            {canInviteOrganisationMembers && (
+                              <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>

apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx

@@ -114,7 +114,7 @@ export const TemplateBulkSendDialog = ({
     <Dialog>
       <DialogTrigger asChild>
         {trigger ?? (
-          <Button variant="outline">
+          <Button variant="outline" className="shrink-0" size="sm">
             <Upload className="mr-2 h-4 w-4" />
             <Trans>Bulk Send via CSV</Trans>
           </Button>

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

@@ -1,93 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-
-import { trpc as trpcReact } from '@documenso/trpc/react';
-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';
-
-type TemplateDeleteDialogProps = {
-  id: number;
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-  onDelete?: () => Promise<void> | void;
-};
-
-export const TemplateDeleteDialog = ({
-  id,
-  open,
-  onOpenChange,
-  onDelete,
-}: TemplateDeleteDialogProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const { mutateAsync: deleteTemplate, isPending } = trpcReact.template.deleteTemplate.useMutation({
-    onSuccess: async () => {
-      await onDelete?.();
-
-      toast({
-        title: _(msg`Template deleted`),
-        description: _(msg`Your template has been successfully deleted.`),
-        duration: 5000,
-      });
-
-      onOpenChange(false);
-    },
-    onError: () => {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`This template could not be deleted at this time. Please try again.`),
-        variant: 'destructive',
-        duration: 7500,
-      });
-    },
-  });
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Do you want to delete this template?</Trans>
-          </DialogTitle>
-
-          <DialogDescription>
-            <Trans>
-              Please note that this action is irreversible. Once confirmed, your template will be
-              permanently deleted.
-            </Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <DialogFooter>
-          <Button
-            type="button"
-            variant="secondary"
-            disabled={isPending}
-            onClick={() => onOpenChange(false)}
-          >
-            <Trans>Cancel</Trans>
-          </Button>
-
-          <Button
-            type="button"
-            variant="destructive"
-            loading={isPending}
-            onClick={async () => deleteTemplate({ templateId: id })}
-          >
-            <Trans>Delete</Trans>
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { type Recipient, RecipientRole, type TemplateDirectLink } from '@prisma/client';
+import { RecipientRole, type TemplateDirectLink } from '@prisma/client';
 import {
   CircleDotIcon,
   CircleIcon,
@@ -21,6 +21,7 @@ import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/org
 import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { DIRECT_TEMPLATE_DOCUMENTATION } from '@documenso/lib/constants/template';
+import type { TRecipientLite } from '@documenso/lib/types/recipient';
 import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
@@ -52,8 +53,9 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 type TemplateDirectLinkDialogProps = {
   templateId: number;
   directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
-  recipients: Recipient[];
+  recipients: TRecipientLite[];
   trigger?: React.ReactNode;
+  triggerSizeVariant?: 'default' | 'sm' | 'lg';
   onCreateSuccess?: () => Promise<void> | void;
   onDeleteSuccess?: () => Promise<void> | void;
 };
@@ -65,6 +67,7 @@ export const TemplateDirectLinkDialog = ({
   directLink,
   recipients,
   trigger,
+  triggerSizeVariant = 'sm',
   onCreateSuccess,
   onDeleteSuccess,
 }: TemplateDirectLinkDialogProps) => {
@@ -207,7 +210,7 @@ export const TemplateDirectLinkDialog = ({
     <Dialog open={open} onOpenChange={(value) => !isLoading && setOpen(value)}>
       <DialogTrigger asChild>
         {trigger || (
-          <Button variant="outline" className="px-3">
+          <Button variant="outline" className="shrink-0 px-3" size={triggerSizeVariant}>
             <LinkIcon className="mr-1.5 h-3.5 w-3.5" />
 
             {directLink ? <Trans>Manage Direct Link</Trans> : <Trans>Create Direct Link</Trans>}

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

@@ -1,89 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-
-import { trpc as trpcReact } from '@documenso/trpc/react';
-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';
-
-type TemplateDuplicateDialogProps = {
-  id: number;
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-};
-
-export const TemplateDuplicateDialog = ({
-  id,
-  open,
-  onOpenChange,
-}: TemplateDuplicateDialogProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const { mutateAsync: duplicateTemplate, isPending } =
-    trpcReact.template.duplicateTemplate.useMutation({
-      onSuccess: () => {
-        toast({
-          title: _(msg`Template duplicated`),
-          description: _(msg`Your template has been duplicated successfully.`),
-          duration: 5000,
-        });
-
-        onOpenChange(false);
-      },
-      onError: () => {
-        toast({
-          title: _(msg`Error`),
-          description: _(msg`An error occurred while duplicating template.`),
-          variant: 'destructive',
-        });
-      },
-    });
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Do you want to duplicate this template?</Trans>
-          </DialogTitle>
-
-          <DialogDescription className="pt-2">
-            <Trans>Your template will be duplicated.</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <DialogFooter>
-          <Button
-            type="button"
-            disabled={isPending}
-            variant="secondary"
-            onClick={() => onOpenChange(false)}
-          >
-            <Trans>Cancel</Trans>
-          </Button>
-
-          <Button
-            type="button"
-            loading={isPending}
-            onClick={async () =>
-              duplicateTemplate({
-                templateId: id,
-              })
-            }
-          >
-            <Trans>Duplicate</Trans>
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/template-use-dialog.tsx

@@ -4,11 +4,11 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { Recipient } from '@prisma/client';
 import { DocumentDistributionMethod, DocumentSigningOrder } from '@prisma/client';
 import { FileTextIcon, InfoIcon, Plus, UploadCloudIcon, X } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
+import { match } from 'ts-pattern';
 import * as z from 'zod';
 
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
@@ -20,8 +20,8 @@ import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
   SKIP_QUERY_BATCH_META,
 } from '@documenso/lib/constants/trpc';
-import { AppError } from '@documenso/lib/errors/app-error';
-import { ZRecipientEmailSchema } from '@documenso/lib/types/recipient';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { type TRecipientLite, ZRecipientEmailSchema } from '@documenso/lib/types/recipient';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -48,7 +48,6 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
-import type { Toast } from '@documenso/ui/primitives/use-toast';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const ZAddRecipientsForNewDocumentSchema = z.object({
@@ -79,7 +78,7 @@ export type TemplateUseDialogProps = {
   envelopeId: string;
   templateId: number;
   templateSigningOrder?: DocumentSigningOrder | null;
-  recipients: Recipient[];
+  recipients: TRecipientLite[];
   documentDistributionMethod?: DocumentDistributionMethod;
   documentRootPath: string;
   trigger?: React.ReactNode;
@@ -202,19 +201,32 @@ export function TemplateUseDialog({
     } catch (err) {
       const error = AppError.parseError(err);
 
-      const toastPayload: Toast = {
+      const errorMessage = match(error.code)
+        .with(
+          'DOCUMENT_SEND_FAILED',
+          () => msg`The document was created but could not be sent to recipients.`,
+        )
+        .with(
+          AppErrorCode.INVALID_BODY,
+          AppErrorCode.INVALID_REQUEST,
+          () =>
+            msg`The document could not be created because of missing or invalid information. Please review the template's recipients and fields.`,
+        )
+        .with(
+          AppErrorCode.NOT_FOUND,
+          () => msg`The template or one of its recipients could not be found.`,
+        )
+        .with(
+          AppErrorCode.LIMIT_EXCEEDED,
+          () => msg`You have reached your document limit for this plan.`,
+        )
+        .otherwise(() => msg`An error occurred while creating document from template.`);
+
+      toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while creating document from template.`),
+        description: _(errorMessage),
         variant: 'destructive',
-      };
-
-      if (error.code === 'DOCUMENT_SEND_FAILED') {
-        toastPayload.description = _(
-          msg`The document was created but could not be sent to recipients.`,
-        );
-      }
-
-      toast(toastPayload);
+      });
     }
   };
 

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

@@ -60,11 +60,11 @@ export const ConfigureDocumentAdvancedSettings = ({
 
   return (
     <div>
-      <h3 className="text-foreground mb-1 text-lg font-medium">
+      <h3 className="mb-1 text-lg font-medium text-foreground">
         <Trans>Advanced Settings</Trans>
       </h3>
 
-      <p className="text-muted-foreground mb-6 text-sm">
+      <p className="mb-6 text-sm text-muted-foreground">
         <Trans>Configure additional options and preferences</Trans>
       </p>
 
@@ -100,7 +100,7 @@ export const ConfigureDocumentAdvancedSettings = ({
                         }))}
                         selectedValues={field.value}
                         onChange={field.onChange}
-                        className="bg-background w-full"
+                        className="w-full bg-background"
                         emptySelectionPlaceholder={t`Select signature types`}
                       />
                     </FormControl>
@@ -204,7 +204,7 @@ export const ConfigureDocumentAdvancedSettings = ({
                         <TooltipTrigger>
                           <InfoIcon className="mx-2 h-4 w-4" />
                         </TooltipTrigger>
-                        <TooltipContent className="text-muted-foreground max-w-xs">
+                        <TooltipContent className="max-w-xs text-muted-foreground">
                           <Trans>
                             Add a URL to redirect the user to once the document is signed
                           </Trans>
@@ -279,7 +279,7 @@ export const ConfigureDocumentAdvancedSettings = ({
                       <FormControl>
                         <Input
                           id="subject"
-                          className="bg-background mt-2"
+                          className="mt-2 bg-background"
                           disabled={isSubmitting || !isEmailDistribution}
                           {...field}
                         />
@@ -302,7 +302,7 @@ export const ConfigureDocumentAdvancedSettings = ({
                       <FormControl>
                         <Textarea
                           id="message"
-                          className="bg-background mt-2 h-32 resize-none"
+                          className="mt-2 h-32 resize-none bg-background"
                           disabled={isSubmitting || !isEmailDistribution}
                           {...field}
                         />

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

@@ -4,10 +4,11 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Cloud, FileText, Loader, X } from 'lucide-react';
-import { useDropzone } from 'react-dropzone';
+import { type FileRejection, useDropzone } from 'react-dropzone';
 import { useFormContext } from 'react-hook-form';
 
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import { buildDropzoneRejectionDescription } from '@documenso/ui/lib/handle-dropzone-rejection';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -82,10 +83,10 @@ export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocum
     }
   };
 
-  const onDropRejected = () => {
+  const onDropRejected = (fileRejections: FileRejection[]) => {
     toast({
       title: _(msg`Your document failed to upload.`),
-      description: _(msg`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`),
+      description: _(buildDropzoneRejectionDescription(fileRejections)),
       duration: 5000,
       variant: 'destructive',
     });
@@ -144,7 +145,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 +194,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

@@ -6,6 +6,7 @@ import {
   ZDocumentMetaLanguageSchema,
 } from '@documenso/lib/types/document-meta';
 import { ZRecipientEmailSchema } from '@documenso/lib/types/recipient';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { DocumentDistributionMethod } from '@documenso/prisma/generated/types';
 
 // Define the schema for configuration
@@ -19,7 +20,7 @@ export const ZConfigureEmbedFormSchema = z.object({
         nativeId: z.number().optional(),
         formId: z.string(),
         name: z.string(),
-        email: z.string().email('Invalid email address'),
+        email: zEmail('Invalid email address'),
         role: z.enum(['SIGNER', 'CC', 'APPROVER', 'VIEWER', 'ASSISTANT']),
         signingOrder: z.number().optional(),
         disabled: z.boolean().optional(),

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

@@ -4,7 +4,7 @@ import { msg } from '@lingui/core/macro';
 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 { ReadStatus, SendStatus, SigningStatus } from '@prisma/client';
 import { ChevronsUpDown } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -13,10 +13,11 @@ import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-c
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR, getPdfPagesCount } from '@documenso/lib/constants/pdf-viewer';
 import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import type { TRecipientLite } from '@documenso/lib/types/recipient';
 import { nanoid } from '@documenso/lib/universal/id';
 import { ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getDocumentDataUrlForPdfViewer } from '@documenso/lib/utils/envelope-download';
-import { useRecipientColors } from '@documenso/ui/lib/recipient-colors';
+import { getRecipientColorStyles } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { FieldItem } from '@documenso/ui/primitives/document-flow/field-item';
@@ -29,7 +30,7 @@ import { Sheet, SheetContent, SheetTrigger } from '@documenso/ui/primitives/shee
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { FieldAdvancedSettingsDrawer } from '~/components/embed/authoring/field-advanced-settings-drawer';
-import { PDFViewer } from '~/components/general/pdf-viewer/pdf-viewer';
+import PDFViewerLazy from '~/components/general/pdf-viewer/pdf-viewer-lazy';
 
 import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
 import type { TConfigureFieldsFormSchema } from './configure-fields-view.types';
@@ -105,7 +106,7 @@ export const ConfigureFieldsView = ({
   }, [configData.documentData, envelopeItem, presignToken]);
 
   const recipients = useMemo(() => {
-    return configData.signers.map<Recipient>((signer, index) => ({
+    return configData.signers.map<TRecipientLite>((signer, index) => ({
       id: signer.nativeId || index,
       name: signer.name || '',
       email: signer.email || '',
@@ -128,7 +129,7 @@ export const ConfigureFieldsView = ({
     }));
   }, [configData.signers]);
 
-  const [selectedRecipient, setSelectedRecipient] = useState<Recipient | null>(
+  const [selectedRecipient, setSelectedRecipient] = useState<TRecipientLite | null>(
     () => recipients.find((r) => r.signingStatus === SigningStatus.NOT_SIGNED) || null,
   );
   const [selectedField, setSelectedField] = useState<FieldType | null>(null);
@@ -155,9 +156,7 @@ export const ConfigureFieldsView = ({
   });
 
   const selectedRecipientIndex = recipients.findIndex((r) => r.id === selectedRecipient?.id);
-  const selectedRecipientStyles = useRecipientColors(
-    selectedRecipientIndex === -1 ? 0 : selectedRecipientIndex,
-  );
+  const selectedRecipientStyles = getRecipientColorStyles(selectedRecipientIndex);
 
   const form = useForm<TConfigureFieldsFormSchema>({
     defaultValues: {
@@ -549,7 +548,7 @@ export const ConfigureFieldsView = ({
             <Form {...form}>
               <div>
                 {normalizedDocumentData && (
-                  <PDFViewer data={normalizedDocumentData} scrollParentRef="window" />
+                  <PDFViewerLazy data={normalizedDocumentData} scrollParentRef="window" />
                 )}
 
                 <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>

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

@@ -3,7 +3,7 @@ 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>

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

@@ -17,6 +17,7 @@ import { useSearchParams } from 'react-router';
 
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import { ZDirectTemplateEmbedDataSchema } from '@documenso/lib/types/embed-direct-template-schema';
@@ -26,6 +27,8 @@ import {
 } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getDocumentDataUrlForPdfViewer } from '@documenso/lib/utils/envelope-download';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import { dynamicActivate } from '@documenso/lib/utils/i18n';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-field';
 import { trpc } from '@documenso/trpc/react';
 import type {
@@ -33,6 +36,7 @@ import type {
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+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';
@@ -41,7 +45,7 @@ import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signa
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { BrandingLogo } from '~/components/general/branding-logo';
-import { PDFViewer } from '~/components/general/pdf-viewer/pdf-viewer';
+import PDFViewerLazy from '~/components/general/pdf-viewer/pdf-viewer-lazy';
 import { injectCss } from '~/utils/css-vars';
 
 import type { DirectTemplateLocalField } from '../general/direct-template/direct-template-signing-form';
@@ -92,6 +96,7 @@ export const EmbedDirectTemplateClientPage = ({
   const [isNameLocked, setIsNameLocked] = useState(false);
 
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
+  const [emailError, setEmailError] = useState<string | null>(null);
 
   const [throttledOnCompleteClick, isThrottled] = useThrottleFn(() => void onCompleteClick(), 500);
 
@@ -205,6 +210,14 @@ export const EmbedDirectTemplateClientPage = ({
         return;
       }
 
+      const { success: isEmailValid } = zEmail().safeParse(email);
+
+      if (!isEmailValid) {
+        setEmailError(_(msg`A valid email is required`));
+        setIsExpanded(true);
+        return;
+      }
+
       let directTemplateExternalId = searchParams?.get('externalId') || undefined;
 
       if (directTemplateExternalId) {
@@ -290,12 +303,19 @@ export const EmbedDirectTemplateClientPage = ({
           cssVars: data.cssVars,
         });
       }
+
+      if (data.language && data.language !== APP_I18N_OPTIONS.sourceLang) {
+        void dynamicActivate(data.language).finally(() => {
+          setHasFinishedInit(true);
+        });
+      } else {
+        setHasFinishedInit(true);
+      }
     } catch (err) {
       console.error(err);
+      setHasFinishedInit(true);
     }
 
-    setHasFinishedInit(true);
-
     // !: While the two setters are stable we still want to ensure we're avoiding
     // !: re-renders.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -340,7 +360,7 @@ export const EmbedDirectTemplateClientPage = ({
       <div className="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
         {/* Viewer */}
         <div className="flex-1">
-          <PDFViewer
+          <PDFViewerLazy
             data={getDocumentDataUrlForPdfViewer({
               envelopeId: envelopeItems[0]?.envelopeId,
               envelopeItemId: envelopeItems[0]?.id,
@@ -433,11 +453,23 @@ export const EmbedDirectTemplateClientPage = ({
                   <Input
                     type="email"
                     id="email"
-                    className="mt-2 bg-background"
+                    className={cn(
+                      'mt-2 bg-background',
+                      emailError && 'border-destructive ring-2 ring-destructive/20',
+                    )}
                     disabled={isEmailLocked}
                     value={email}
-                    onChange={(e) => !isEmailLocked && setEmail(e.target.value.trim())}
+                    onChange={(e) => {
+                      if (!isEmailLocked) {
+                        setEmail(e.target.value.trim());
+                        setEmailError(null);
+                      }
+                    }}
                   />
+
+                  {emailError && (
+                    <p className="mt-2 text-xs font-medium text-destructive">{emailError}</p>
+                  )}
                 </div>
 
                 {hasSignatureField && (

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

@@ -8,11 +8,13 @@ import { type Field, RecipientRole, SigningStatus } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
+import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { ZSignDocumentEmbedDataSchema } from '@documenso/lib/types/embed-document-sign-schema';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getDocumentDataUrlForPdfViewer } from '@documenso/lib/utils/envelope-download';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import { dynamicActivate } from '@documenso/lib/utils/i18n';
 import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-field';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { trpc } from '@documenso/trpc/react';
@@ -30,7 +32,7 @@ import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signa
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { BrandingLogo } from '~/components/general/branding-logo';
-import { PDFViewer } from '~/components/general/pdf-viewer/pdf-viewer';
+import PDFViewerLazy from '~/components/general/pdf-viewer/pdf-viewer-lazy';
 import { injectCss } from '~/utils/css-vars';
 
 import { DocumentSigningAttachmentsPopover } from '../general/document-signing/document-signing-attachments-popover';
@@ -74,7 +76,7 @@ export const EmbedSignDocumentV1ClientPage = ({
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const { fullName, email, signature, setFullName, setSignature } =
+  const { fullName, email, signature, setFullName, setEmail, setSignature } =
     useRequiredDocumentSigningContext();
 
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
@@ -89,6 +91,7 @@ export const EmbedSignDocumentV1ClientPage = ({
 
   const [isExpanded, setIsExpanded] = useState(false);
   const [isNameLocked, setIsNameLocked] = useState(false);
+  const [isEmailLocked, setIsEmailLocked] = useState(!!email);
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
   const [_showOtherRecipientsCompletedFields, setShowOtherRecipientsCompletedFields] =
     useState(false);
@@ -205,13 +208,19 @@ export const EmbedSignDocumentV1ClientPage = ({
     try {
       const data = ZSignDocumentEmbedDataSchema.parse(JSON.parse(decodeURIComponent(atob(hash))));
 
-      if (!isCompleted && data.name) {
+      if (!isCompleted && data.name && !fullName) {
         setFullName(data.name);
       }
 
       // 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 (!isCompleted && data.email && !email) {
+        setEmail(data.email);
+        setIsEmailLocked(!!data.lockEmail);
+      }
+
       setAllowDocumentRejection(!!data.allowDocumentRejection);
       setShowOtherRecipientsCompletedFields(!!data.showOtherRecipientsCompletedFields);
 
@@ -225,12 +234,19 @@ export const EmbedSignDocumentV1ClientPage = ({
           cssVars: data.cssVars,
         });
       }
+
+      if (data.language && data.language !== APP_I18N_OPTIONS.sourceLang) {
+        void dynamicActivate(data.language).finally(() => {
+          setHasFinishedInit(true);
+        });
+      } else {
+        setHasFinishedInit(true);
+      }
     } catch (err) {
       console.error(err);
+      setHasFinishedInit(true);
     }
 
-    setHasFinishedInit(true);
-
     // !: While the two setters are stable we still want to ensure we're avoiding
     // !: re-renders.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -288,7 +304,7 @@ export const EmbedSignDocumentV1ClientPage = ({
         <div className="embed--DocumentContainer relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
           {/* Viewer */}
           <div className="embed--DocumentViewer flex-1">
-            <PDFViewer
+            <PDFViewerLazy
               data={getDocumentDataUrlForPdfViewer({
                 envelopeId: envelopeItems[0]?.envelopeId,
                 envelopeItemId: envelopeItems[0]?.id,
@@ -449,7 +465,8 @@ export const EmbedSignDocumentV1ClientPage = ({
                           id="email"
                           className="mt-2 bg-background"
                           value={email}
-                          disabled
+                          onChange={(e) => setEmail(e.target.value)}
+                          disabled={isEmailLocked}
                         />
                       </div>
 

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

@@ -3,8 +3,10 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 import { useLingui } from '@lingui/react';
 import { EnvelopeType } from '@prisma/client';
 
+import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
 import { ZSignDocumentEmbedDataSchema } from '@documenso/lib/types/embed-document-sign-schema';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
+import { dynamicActivate } from '@documenso/lib/utils/i18n';
 
 import { injectCss } from '~/utils/css-vars';
 
@@ -26,7 +28,7 @@ export const EmbedSignDocumentV2ClientPage = ({
 }: EmbedSignDocumentV2ClientPageProps) => {
   const { _ } = useLingui();
 
-  const { envelope, recipient, envelopeData, setFullName, setEmail, fullName } =
+  const { envelope, recipient, envelopeData, setFullName, setEmail, fullName, email } =
     useRequiredEnvelopeSigningContext();
 
   const { isCompleted, isRejected, recipientSignature } = envelopeData;
@@ -36,7 +38,9 @@ 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 [isEmailLocked, setIsEmailLocked] = useState(
+    envelope.type === EnvelopeType.DOCUMENT && !!email,
+  );
 
   const onDocumentCompleted = (data: {
     token: string;
@@ -128,19 +132,22 @@ export const EmbedSignDocumentV2ClientPage = ({
       const data = ZSignDocumentEmbedDataSchema.parse(JSON.parse(decodeURIComponent(atob(hash))));
 
       if (!isCompleted && data.name) {
-        setFullName(data.name);
+        // For documents, only use the hash name if the recipient doesn't already have one.
+        // For templates, always allow the hash name to be used.
+        if (envelope.type === EnvelopeType.TEMPLATE || !fullName) {
+          setFullName(data.name);
+        }
       }
 
       // 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) {
+      if (!isCompleted && data.email) {
+        // For documents, only use the hash email if the recipient doesn't already have one.
+        // For templates, always allow the hash email to be used.
+        if (envelope.type === EnvelopeType.TEMPLATE || !email) {
           setEmail(data.email);
-        }
-
-        if (data.email) {
           setIsEmailLocked(!!data.lockEmail);
         }
       }
@@ -157,12 +164,19 @@ export const EmbedSignDocumentV2ClientPage = ({
           cssVars: data.cssVars,
         });
       }
+
+      if (data.language && data.language !== APP_I18N_OPTIONS.sourceLang) {
+        void dynamicActivate(data.language).finally(() => {
+          setHasFinishedInit(true);
+        });
+      } else {
+        setHasFinishedInit(true);
+      }
     } catch (err) {
       console.error(err);
+      setHasFinishedInit(true);
     }
 
-    setHasFinishedInit(true);
-
     // !: While the setters are stable we still want to ensure we're avoiding
     // !: re-renders.
     // eslint-disable-next-line react-hooks/exhaustive-deps

apps/remix/app/components/embed/embed-paywall.tsx

@@ -1,7 +1,25 @@
+import { Trans } from '@lingui/react/macro';
+import { Link } from 'react-router';
+
+import { SUPPORT_EMAIL } from '@documenso/lib/constants/app';
+
 export const EmbedPaywall = () => {
   return (
-    <div>
-      <h1>Paywall</h1>
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="text-center text-muted-foreground">
+        <p className="text-lg font-semibold">
+          <Trans>This feature is not available on your current plan</Trans>
+        </p>
+        <p className="mt-2 text-sm">
+          <Trans>
+            Please contact{' '}
+            <Link to={`mailto:${SUPPORT_EMAIL}`} target="_blank">
+              support
+            </Link>{' '}
+            if you have any questions.
+          </Trans>
+        </p>
+      </div>
     </div>
   );
 };

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

@@ -27,7 +27,7 @@ import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { PDFViewer } from '~/components/general/pdf-viewer/pdf-viewer';
+import PDFViewerLazy from '~/components/general/pdf-viewer/pdf-viewer-lazy';
 
 import { useRequiredDocumentSigningContext } from '../../general/document-signing/document-signing-provider';
 import { DocumentSigningRejectDialog } from '../../general/document-signing/document-signing-reject-dialog';
@@ -181,8 +181,8 @@ 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 className="min-h-screen bg-background">
+      <div className="relative h-full w-full p-8">
         {match({ isLoading, document })
           .with({ isLoading: true }, () => (
             <div className="flex min-h-[400px] w-full items-center justify-center">
@@ -229,7 +229,7 @@ export const MultiSignDocumentSigningView = ({
                     'md:mx-auto md:max-w-2xl': document.status === DocumentStatus.COMPLETED,
                   })}
                 >
-                  <PDFViewer
+                  <PDFViewerLazy
                     data={getDocumentDataUrlForPdfViewer({
                       envelopeId: document.envelopeId,
                       envelopeItemId: document.envelopeItems[0]?.id,
@@ -369,35 +369,39 @@ export const MultiSignDocumentSigningView = ({
                     </div>
                   </div>
                 )}
+
+                {hasDocumentLoaded && showPendingFieldTooltip && pendingFields.length > 0 && (
+                  <ElementVisible
+                    target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${pendingFields[0].page}"]`}
+                  >
+                    <FieldToolTip
+                      key={pendingFields[0].id}
+                      field={pendingFields[0]}
+                      color="warning"
+                    >
+                      <Trans>Click to insert field</Trans>
+                    </FieldToolTip>
+                  </ElementVisible>
+                )}
+
+                {/* Fields */}
+                {hasDocumentLoaded && (
+                  <EmbedDocumentFields
+                    fields={pendingFields}
+                    metadata={document.documentMeta}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                )}
+
+                {/* Completed fields */}
+                {document.status !== DocumentStatus.COMPLETED && (
+                  <DocumentReadOnlyFields
+                    documentMeta={document.documentMeta ?? undefined}
+                    fields={completedFields}
+                  />
+                )}
               </div>
-
-              {hasDocumentLoaded && showPendingFieldTooltip && pendingFields.length > 0 && (
-                <ElementVisible
-                  target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${pendingFields[0].page}"]`}
-                >
-                  <FieldToolTip key={pendingFields[0].id} field={pendingFields[0]} color="warning">
-                    <Trans>Click to insert field</Trans>
-                  </FieldToolTip>
-                </ElementVisible>
-              )}
-
-              {/* Fields */}
-              {hasDocumentLoaded && (
-                <EmbedDocumentFields
-                  fields={pendingFields}
-                  metadata={document.documentMeta}
-                  onSignField={onSignField}
-                  onUnsignField={onUnsignField}
-                />
-              )}
-
-              {/* Completed fields */}
-              {document.status !== DocumentStatus.COMPLETED && (
-                <DocumentReadOnlyFields
-                  documentMeta={document.documentMeta ?? undefined}
-                  fields={completedFields}
-                />
-              )}
             </>
           ))
           .otherwise(() => null)}

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

@@ -98,7 +98,7 @@ export function BrandingPreferencesForm({
             ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/team/${team?.id}`
             : `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/organisation/${organisation?.id}`;
 
-        setPreviewUrl(logoUrl);
+        setPreviewUrl(logoUrl + '?v=' + Date.now());
         setHasLoadedPreview(true);
       }
     }
@@ -173,7 +173,7 @@ export function BrandingPreferencesForm({
           />
 
           <div className="relative flex w-full flex-col gap-y-4">
-            {!isBrandingEnabled && <div className="bg-background/60 absolute inset-0 z-[9998]" />}
+            {!isBrandingEnabled && <div className="absolute inset-0 z-[9998] bg-background/60" />}
 
             <FormField
               control={form.control}
@@ -185,7 +185,7 @@ export function BrandingPreferencesForm({
                   </FormLabel>
 
                   <div className="flex flex-col gap-4">
-                    <div className="border-border bg-background relative h-48 w-full overflow-hidden rounded-lg border">
+                    <div className="relative h-48 w-full overflow-hidden rounded-lg border border-border bg-background">
                       {previewUrl ? (
                         <img
                           src={previewUrl}
@@ -193,12 +193,12 @@ export function BrandingPreferencesForm({
                           className="h-full w-full object-contain p-4"
                         />
                       ) : (
-                        <div className="bg-muted/20 dark:bg-muted text-muted-foreground relative flex h-full w-full items-center justify-center text-sm">
+                        <div className="relative flex h-full w-full items-center justify-center bg-muted/20 text-sm text-muted-foreground dark:bg-muted">
                           <Trans>Please upload a logo</Trans>
 
                           {!hasLoadedPreview && (
-                            <div className="bg-muted dark:bg-muted absolute inset-0 z-[999] flex items-center justify-center">
-                              <Loader className="text-muted-foreground h-8 w-8 animate-spin" />
+                            <div className="absolute inset-0 z-[999] flex items-center justify-center bg-muted dark:bg-muted">
+                              <Loader className="h-8 w-8 animate-spin text-muted-foreground" />
                             </div>
                           )}
                         </div>
@@ -243,7 +243,7 @@ export function BrandingPreferencesForm({
                           type="button"
                           variant="link"
                           size="sm"
-                          className="text-destructive text-xs"
+                          className="text-xs text-destructive"
                           onClick={() => {
                             setPreviewUrl('');
                             onChange(null);

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

@@ -15,6 +15,10 @@ import {
   type TEnvelopeExpirationPeriod,
   ZEnvelopeExpirationPeriod,
 } from '@documenso/lib/constants/envelope-expiration';
+import {
+  type TEnvelopeReminderSettings,
+  ZEnvelopeReminderSettings,
+} from '@documenso/lib/constants/envelope-reminder';
 import {
   SUPPORTED_LANGUAGES,
   SUPPORTED_LANGUAGE_CODES,
@@ -32,6 +36,7 @@ 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 { ReminderSettingsPicker } from '@documenso/ui/components/document/reminder-settings-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';
@@ -76,6 +81,7 @@ export type TDocumentPreferencesFormSchema = {
   delegateDocumentOwnership: boolean | null;
   aiFeaturesEnabled: boolean | null;
   envelopeExpirationPeriod: TEnvelopeExpirationPeriod | null;
+  reminderSettings: TEnvelopeReminderSettings | null;
 };
 
 type SettingsSubset = Pick<
@@ -94,6 +100,7 @@ type SettingsSubset = Pick<
   | 'delegateDocumentOwnership'
   | 'aiFeaturesEnabled'
   | 'envelopeExpirationPeriod'
+  | 'reminderSettings'
 >;
 
 export type DocumentPreferencesFormProps = {
@@ -134,6 +141,7 @@ export const DocumentPreferencesForm = ({
     delegateDocumentOwnership: z.boolean().nullable(),
     aiFeaturesEnabled: z.boolean().nullable(),
     envelopeExpirationPeriod: ZEnvelopeExpirationPeriod.nullable(),
+    reminderSettings: ZEnvelopeReminderSettings.nullable(),
   });
 
   const form = useForm<TDocumentPreferencesFormSchema>({
@@ -155,6 +163,7 @@ export const DocumentPreferencesForm = ({
       delegateDocumentOwnership: settings.delegateDocumentOwnership,
       aiFeaturesEnabled: settings.aiFeaturesEnabled,
       envelopeExpirationPeriod: settings.envelopeExpirationPeriod ?? null,
+      reminderSettings: settings.reminderSettings ?? null,
     },
     resolver: zodResolver(ZDocumentPreferencesFormSchema),
   });
@@ -707,6 +716,35 @@ export const DocumentPreferencesForm = ({
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="reminderSettings"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Default Signing Reminders</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <ReminderSettingsPicker
+                    value={field.value}
+                    onChange={field.onChange}
+                    inheritLabel={canInherit ? t`Inherit from organisation` : undefined}
+                  />
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>
+                    Controls when and how often reminder emails are sent to recipients who have not
+                    yet completed signing.
+                  </Trans>
+                </FormDescription>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           {isAiFeaturesConfigured && (
             <FormField
               control={form.control}

apps/remix/app/components/forms/editor/editor-field-dropdown-form.tsx

@@ -96,7 +96,7 @@ export const EditorFieldDropdownForm = ({
     mode: 'onChange',
     defaultValues: {
       defaultValue: value.defaultValue,
-      values: [{ value: t`Option 1` }],
+      values: value.values || [{ value: t`Option 1` }],
       required: value.required || false,
       readOnly: value.readOnly || false,
       fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,

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

@@ -10,6 +10,7 @@ import {
   DEFAULT_DOCUMENT_EMAIL_SETTINGS,
   ZDocumentEmailSettingsSchema,
 } from '@documenso/lib/types/document-email';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { trpc } from '@documenso/trpc/react';
 import { DocumentEmailCheckboxes } from '@documenso/ui/components/document/document-email-checkboxes';
 import { Button } from '@documenso/ui/primitives/button';
@@ -33,7 +34,7 @@ import {
 
 const ZEmailPreferencesFormSchema = z.object({
   emailId: z.string().nullable(),
-  emailReplyTo: z.string().email().nullable(),
+  emailReplyTo: zEmail().nullable(),
   // emailReplyToName: z.string(),
   emailDocumentSettings: ZDocumentEmailSettingsSchema.nullable(),
 });
@@ -219,7 +220,8 @@ export const EmailPreferencesForm = ({
 
                 <FormDescription>
                   <Trans>
-                    Controls the default email settings when new documents or templates are created
+                    Controls the default email settings when new documents or templates are created.
+                    Updating these settings will not affect existing documents or templates.
                   </Trans>
                 </FormDescription>
               </FormItem>

apps/remix/app/components/forms/forgot-password.tsx

@@ -7,6 +7,7 @@ import { useNavigate } from 'react-router';
 import { z } from 'zod';
 
 import { authClient } from '@documenso/auth/client';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -21,7 +22,7 @@ import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZForgotPasswordFormSchema = z.object({
-  email: z.string().email().min(1),
+  email: zEmail().min(1),
 });
 
 export type TForgotPasswordFormSchema = z.infer<typeof ZForgotPasswordFormSchema>;

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

@@ -6,6 +6,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { ZNameSchema } from '@documenso/lib/constants/auth';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -23,10 +24,7 @@ import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signa
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZProfileFormSchema = z.object({
-  name: z
-    .string()
-    .trim()
-    .min(1, { message: msg`Please enter a valid name.`.id }),
+  name: ZNameSchema,
   signature: z.string().min(1, { message: msg`Signature Pad cannot be empty.`.id }),
 });
 

apps/remix/app/components/forms/send-confirmation-email.tsx

@@ -6,6 +6,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { authClient } from '@documenso/auth/client';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -20,7 +21,7 @@ import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZSendConfirmationEmailFormSchema = z.object({
-  email: z.string().email().min(1),
+  email: zEmail().min(1),
 });
 
 export type TSendConfirmationEmailFormSchema = z.infer<typeof ZSendConfirmationEmailFormSchema>;

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

@@ -1,10 +1,12 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import type { TurnstileInstance } from '@marsidev/react-turnstile';
+import { Turnstile } from '@marsidev/react-turnstile';
 import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser';
 import { KeyRoundIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
@@ -16,7 +18,9 @@ import { z } from 'zod';
 
 import { authClient } from '@documenso/auth/client';
 import { AuthenticationErrorCode } from '@documenso/auth/server/lib/errors/error-codes';
-import { AppError } from '@documenso/lib/errors/app-error';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { env } from '@documenso/lib/utils/env';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { trpc } from '@documenso/trpc/react';
 import { ZCurrentPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
@@ -58,7 +62,7 @@ const handleFallbackErrorMessages = (code: string) => {
 const LOGIN_REDIRECT_PATH = '/';
 
 export const ZSignInFormSchema = z.object({
-  email: z.string().email().min(1),
+  email: zEmail().min(1),
   password: ZCurrentPasswordSchema,
   totpCode: z.string().trim().optional(),
   backupCode: z.string().trim().optional(),
@@ -100,6 +104,10 @@ export const SignInForm = ({
 
   const hasSocialAuthEnabled = isGoogleSSOEnabled || isMicrosoftSSOEnabled || isOIDCSSOEnabled;
 
+  const turnstileSiteKey = env('NEXT_PUBLIC_TURNSTILE_SITE_KEY');
+  const turnstileRef = useRef<TurnstileInstance>(null);
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+
   const [isPasskeyLoading, setIsPasskeyLoading] = useState(false);
 
   const redirectPath = useMemo(() => {
@@ -216,6 +224,7 @@ export const SignInForm = ({
         password,
         totpCode,
         backupCode,
+        captchaToken: captchaToken ?? undefined,
         redirectPath,
       });
     } catch (err) {
@@ -250,6 +259,10 @@ export const SignInForm = ({
           AuthenticationErrorCode.InvalidTwoFactorCode,
           () => msg`The two-factor authentication code provided is incorrect.`,
         )
+        .with(
+          AppErrorCode.INVALID_CAPTCHA,
+          () => msg`We were unable to verify that you're human. Please try again.`,
+        )
         .otherwise(() => handleFallbackErrorMessages(error.code));
 
       toast({
@@ -257,6 +270,9 @@ export const SignInForm = ({
         description: _(errorMessage),
         variant: 'destructive',
       });
+
+      turnstileRef.current?.reset();
+      setCaptchaToken(null);
     }
   };
 
@@ -377,6 +393,19 @@ export const SignInForm = ({
             )}
           />
 
+          {turnstileSiteKey && (
+            <Turnstile
+              ref={turnstileRef}
+              siteKey={turnstileSiteKey}
+              onSuccess={setCaptchaToken}
+              onExpire={() => setCaptchaToken(null)}
+              options={{
+                size: 'flexible',
+                appearance: 'interaction-only',
+              }}
+            />
+          )}
+
           <Button
             type="submit"
             size="lg"

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

@@ -1,10 +1,12 @@
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import type { TurnstileInstance } from '@marsidev/react-turnstile';
+import { Turnstile } from '@marsidev/react-turnstile';
 import { useForm } from 'react-hook-form';
 import { FaIdCardClip } from 'react-icons/fa6';
 import { FcGoogle } from 'react-icons/fc';
@@ -14,7 +16,10 @@ import { z } from 'zod';
 import communityCardsImage from '@documenso/assets/images/community-cards.png';
 import { authClient } from '@documenso/auth/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { ZNameSchema } from '@documenso/lib/constants/auth';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { env } from '@documenso/lib/utils/env';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -35,11 +40,8 @@ import { UserProfileTimur } from '~/components/general/user-profile-timur';
 
 export const ZSignUpFormSchema = z
   .object({
-    name: z
-      .string()
-      .trim()
-      .min(1, { message: msg`Please enter a valid name.`.id }),
-    email: z.string().email().min(1),
+    name: ZNameSchema,
+    email: zEmail().min(1),
     password: ZPasswordSchema,
     signature: z.string().min(1, { message: msg`We need your signature to sign documents`.id }),
   })
@@ -54,9 +56,9 @@ export const ZSignUpFormSchema = z
     },
   );
 
-export const signupErrorMessages: Record<string, MessageDescriptor> = {
-  SIGNUP_DISABLED: msg`Signups are disabled.`,
-  [AppErrorCode.ALREADY_EXISTS]: msg`User with this email already exists. Please use a different email address.`,
+export const SIGNUP_ERROR_MESSAGES: Record<string, MessageDescriptor> = {
+  SIGNUP_DISABLED: msg`Signup is currently disabled or not available for your email domain.`,
+  [AppErrorCode.ALREADY_EXISTS]: msg`We were unable to create your account. If you already have an account, try signing in instead.`,
   [AppErrorCode.INVALID_REQUEST]: msg`We were unable to create your account. Please review the information you provided and try again.`,
 };
 
@@ -88,6 +90,11 @@ export const SignUpForm = ({
 
   const utmSrc = searchParams.get('utm_source') ?? null;
 
+  const turnstileSiteKey = env('NEXT_PUBLIC_TURNSTILE_SITE_KEY');
+  const turnstileRef = useRef<TurnstileInstance>(null);
+
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+
   const hasSocialAuthEnabled = isGoogleSSOEnabled || isMicrosoftSSOEnabled || isOIDCSSOEnabled;
 
   const form = useForm<TSignUpFormSchema>({
@@ -110,6 +117,7 @@ export const SignUpForm = ({
         email,
         password,
         signature,
+        captchaToken: captchaToken ?? undefined,
       });
 
       await navigate(returnTo ? returnTo : '/unverified-account');
@@ -130,13 +138,17 @@ export const SignUpForm = ({
     } catch (err) {
       const error = AppError.parseError(err);
 
-      const errorMessage = signupErrorMessages[error.code] ?? signupErrorMessages.INVALID_REQUEST;
+      const errorMessage =
+        SIGNUP_ERROR_MESSAGES[error.code] ?? SIGNUP_ERROR_MESSAGES.INVALID_REQUEST;
 
       toast({
         title: _(msg`An error occurred`),
         description: _(errorMessage),
         variant: 'destructive',
       });
+
+      turnstileRef.current?.reset();
+      setCaptchaToken(null);
     }
   };
 
@@ -196,7 +208,7 @@ export const SignUpForm = ({
 
   return (
     <div className={cn('flex justify-center gap-x-12', className)}>
-      <div className="border-border relative hidden flex-1 overflow-hidden rounded-xl border xl:flex">
+      <div className="relative hidden flex-1 overflow-hidden rounded-xl border border-border xl:flex">
         <div className="absolute -inset-8 -z-[2] backdrop-blur">
           <img
             src={communityCardsImage}
@@ -205,17 +217,17 @@ export const SignUpForm = ({
           />
         </div>
 
-        <div className="bg-background/50 absolute -inset-8 -z-[1] backdrop-blur-[2px]" />
+        <div className="absolute -inset-8 -z-[1] bg-background/50 backdrop-blur-[2px]" />
 
         <div className="relative flex h-full w-full flex-col items-center justify-evenly">
-          <div className="bg-background rounded-2xl border px-4 py-1 text-sm font-medium">
+          <div className="rounded-2xl border bg-background px-4 py-1 text-sm font-medium">
             <Trans>User profiles are here!</Trans>
           </div>
 
           <div className="w-full max-w-md">
             <UserProfileTimur
               rows={2}
-              className="bg-background border-border rounded-2xl border shadow-md"
+              className="rounded-2xl border border-border bg-background shadow-md"
             />
           </div>
 
@@ -223,13 +235,13 @@ export const SignUpForm = ({
         </div>
       </div>
 
-      <div className="border-border dark:bg-background relative z-10 flex min-h-[min(850px,80vh)] w-full max-w-lg flex-col rounded-xl border bg-neutral-100 p-6">
+      <div className="relative z-10 flex min-h-[min(850px,80vh)] w-full max-w-lg flex-col rounded-xl border border-border bg-neutral-100 p-6 dark:bg-background">
         <div className="h-20">
           <h1 className="text-xl font-semibold md:text-2xl">
             <Trans>Create a new account</Trans>
           </h1>
 
-          <p className="text-muted-foreground mt-2 text-xs md:text-sm">
+          <p className="mt-2 text-xs text-muted-foreground md:text-sm">
             <Trans>
               Create your account and start using state-of-the-art document signing. Open and
               beautiful signing is within your grasp.
@@ -244,13 +256,7 @@ export const SignUpForm = ({
             className="flex w-full flex-1 flex-col gap-y-4"
             onSubmit={form.handleSubmit(onFormSubmit)}
           >
-            <fieldset
-              className={cn(
-                'flex h-[550px] w-full flex-col gap-y-4',
-                hasSocialAuthEnabled && 'h-[650px]',
-              )}
-              disabled={isSubmitting}
-            >
+            <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
               <FormField
                 control={form.control}
                 name="name"
@@ -322,71 +328,76 @@ export const SignUpForm = ({
                 )}
               />
 
+              {turnstileSiteKey && (
+                <Turnstile
+                  ref={turnstileRef}
+                  siteKey={turnstileSiteKey}
+                  onSuccess={setCaptchaToken}
+                  onExpire={() => setCaptchaToken(null)}
+                  options={{
+                    size: 'flexible',
+                    appearance: 'interaction-only',
+                  }}
+                />
+              )}
+
               {hasSocialAuthEnabled && (
-                <>
-                  <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
-                    <div className="bg-border h-px flex-1" />
-                    <span className="text-muted-foreground bg-transparent">
-                      <Trans>Or</Trans>
-                    </span>
-                    <div className="bg-border h-px flex-1" />
-                  </div>
-                </>
+                <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
+                  <div className="h-px flex-1 bg-border" />
+                  <span className="bg-transparent text-muted-foreground">
+                    <Trans>Or</Trans>
+                  </span>
+                  <div className="h-px flex-1 bg-border" />
+                </div>
               )}
 
               {isGoogleSSOEnabled && (
-                <>
-                  <Button
-                    type="button"
-                    size="lg"
-                    variant={'outline'}
-                    className="bg-background text-muted-foreground border"
-                    disabled={isSubmitting}
-                    onClick={onSignUpWithGoogleClick}
-                  >
-                    <FcGoogle className="mr-2 h-5 w-5" />
-                    <Trans>Sign Up with Google</Trans>
-                  </Button>
-                </>
+                <Button
+                  type="button"
+                  size="lg"
+                  variant={'outline'}
+                  className="border bg-background text-muted-foreground"
+                  disabled={isSubmitting}
+                  onClick={onSignUpWithGoogleClick}
+                >
+                  <FcGoogle className="mr-2 h-5 w-5" />
+                  <Trans>Sign Up with Google</Trans>
+                </Button>
               )}
 
               {isMicrosoftSSOEnabled && (
-                <>
-                  <Button
-                    type="button"
-                    size="lg"
-                    variant={'outline'}
-                    className="bg-background text-muted-foreground border"
-                    disabled={isSubmitting}
-                    onClick={onSignUpWithMicrosoftClick}
-                  >
-                    <img
-                      className="mr-2 h-4 w-4"
-                      alt="Microsoft Logo"
-                      src={'/static/microsoft.svg'}
-                    />
-                    <Trans>Sign Up with Microsoft</Trans>
-                  </Button>
-                </>
+                <Button
+                  type="button"
+                  size="lg"
+                  variant={'outline'}
+                  className="border bg-background text-muted-foreground"
+                  disabled={isSubmitting}
+                  onClick={onSignUpWithMicrosoftClick}
+                >
+                  <img
+                    className="mr-2 h-4 w-4"
+                    alt="Microsoft Logo"
+                    src={'/static/microsoft.svg'}
+                  />
+                  <Trans>Sign Up with Microsoft</Trans>
+                </Button>
               )}
 
               {isOIDCSSOEnabled && (
-                <>
-                  <Button
-                    type="button"
-                    size="lg"
-                    variant={'outline'}
-                    className="bg-background text-muted-foreground border"
-                    disabled={isSubmitting}
-                    onClick={onSignUpWithOIDCClick}
-                  >
-                    <FaIdCardClip className="mr-2 h-5 w-5" />
-                    <Trans>Sign Up with OIDC</Trans>
-                  </Button>
-                </>
+                <Button
+                  type="button"
+                  size="lg"
+                  variant={'outline'}
+                  className="border bg-background text-muted-foreground"
+                  disabled={isSubmitting}
+                  onClick={onSignUpWithOIDCClick}
+                >
+                  <FaIdCardClip className="mr-2 h-5 w-5" />
+                  <Trans>Sign Up with OIDC</Trans>
+                </Button>
               )}
 
-              <p className="text-muted-foreground mt-4 text-sm">
+              <p className="mt-4 text-sm text-muted-foreground">
                 <Trans>
                   Already have an account?{' '}
                   <Link to="/signin" className="text-documenso-700 duration-200 hover:opacity-70">
@@ -406,7 +417,7 @@ export const SignUpForm = ({
             </Button>
           </form>
         </Form>
-        <p className="text-muted-foreground mt-6 text-xs">
+        <p className="mt-6 text-xs text-muted-foreground">
           <Trans>
             By proceeding, you agree to our{' '}
             <Link