Merge remote-tracking branch 'origin/main' into pr-2853

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

.agents/plans/loud-orange-leaf-acroform-field-detection-and-reuse.md

@@ -0,0 +1,430 @@
+---
+date: 2026-05-21
+title: Acroform Field Detection And Reuse
+---
+
+## Problem
+
+Users routinely prepare PDFs in Adobe Acrobat (or other PDF editors) with AcroForm fields — signatures, text inputs, dates, checkboxes — and upload them to Documenso. Today those widgets are either stripped (`DOCUMENT` upload flattens via `form.flatten()` in `normalize-pdf.ts`) or preserved as static interactive controls (`TEMPLATE` upload), but never reused as Documenso fields. Users have to re-place every field in the editor.
+
+Issue: https://github.com/documenso/documenso/issues/2697 (labels: `type: enhancement`, `apps: web`).
+
+## Goal
+
+On upload, detect AcroForm fields, map supported types to Documenso fields, persist their page geometry, then flatten the PDF so no duplicate interactive controls remain. Imported fields should be ordinary `Field` rows — visible in the editor, assignable to recipients, signable like any other field.
+
+## Background
+
+The placeholder pipeline (`{{signature, r1}}` style) already does almost everything we need:
+
+- `packages/lib/server-only/pdf/auto-place-fields.ts` extracts `PlaceholderInfo[]` (with `fieldAndMeta: TFieldAndMeta`, top-left percentages, page index), then `convertPlaceholdersToFieldInputs(placeholders, recipientResolver, envelopeItemId)` returns `tx.field.createMany` payloads.
+- `packages/trpc/server/envelope-router/create-envelope.ts` per file: `convertToPdf` → optional `insertFormValuesInPdf` → `normalizePdf({ flattenForm: type !== 'TEMPLATE' })` → `extractPdfPlaceholders(normalized)` → `putPdfFileServerSide(cleanedPdf)` → forwards `{ title, documentDataId, placeholders }`.
+- `packages/lib/server-only/envelope-item/create-envelope-items.ts` runs the same per-file pipeline when files are appended to an existing envelope.
+- `packages/lib/server-only/envelope/create-envelope.ts` consumes `envelopeItems[].placeholders`, creates placeholder `SIGNER` recipients (`recipient.${i}@documenso.com`) when `data.recipients` is empty, then calls `convertPlaceholdersToFieldInputs` + `tx.field.createMany` inside its existing transaction.
+
+`@libpdf/core` exposes the AcroForm primitives we need (verified in `node_modules/@libpdf/core/dist/index.d.mts`):
+
+- `PDF.isEncrypted: boolean`, `PDF.getForm(): PDFForm | null`, `PDF.getPages()[i].ref` + `.getRotation()`.
+- `PDFForm.getFields(): FormField[]`.
+- `FormField`: `name`, `partialName`, `alternateName` (/TU), `isRequired()`, `isReadOnly()`, `acroField(): PdfDict` (raw dict access), `type: 'text' | 'checkbox' | 'radio' | 'dropdown' | 'listbox' | 'signature' | 'button' | 'unknown' | 'non-terminal'`.
+- `WidgetAnnotation`: `rect`, `width`, `height`, `pageRef: PdfRef | null`, `isHidden()`, `isPrintable()`, `getOnValue()`.
+- Typed subclasses: `CheckboxField.isChecked()` / `getOnValues()` / `getOnValue()`, `DropdownField.getOptions()`, `RadioField.getOptions()`, `SignatureField`, `TextField.getText()`.
+
+`ZBaseFieldMeta` (in `packages/lib/types/field-meta.ts`) already carries `label`, `required`, `readOnly`. We extend it once with `source?: 'acroform'` so imported fields are introspectable without UI changes.
+
+## Scope
+
+In scope: server-side extraction at upload time for v2 envelopes (both new envelopes and items appended to existing envelopes), per-field `FIELD_CREATED` audit log entries for imported fields, and the one-line schema extension to record provenance. Out of scope: editor UI changes (badges, banners, review modals), signing surface changes, v1 path, listbox, button/unknown/non-terminal field types, true radio-group consolidation, recipient inference beyond first-signer selection.
+
+## Field Mapping
+
+### Type resolution
+
+| AcroForm type | Documenso field | Rule |
+| --- | --- | --- |
+| `signature` (unsigned) | `SIGNATURE` | Import. |
+| `signature` (signed — `SignatureField.isSigned()` returns true) | — | **Skip.** Log `logger.warn({ event: 'acroform-import.signed-pdf-no-flatten', envelopeItemTitle })`. Also downgrade `flattenForm` to `false` for that envelope item (do not re-flatten a signed PDF). |
+| `text` | resolved by heuristic below | Heuristic order: AcroForm format action → name token → default to TEXT. |
+| `checkbox` | `CHECKBOX` | One Documenso field per widget. |
+| `radio` | `RADIO` | One Documenso field per widget. Store group's `getOptions()` in each `fieldMeta.values`. Semantics intentionally differ from PDF (each is independent); documented under Risks. |
+| `dropdown` | `DROPDOWN` | Preserve `getOptions()` in `fieldMeta.values`, current selection in `fieldMeta.defaultValue`. |
+| `listbox`, `button`, `unknown`, `non-terminal` | — | Skip, return as `AcroFormUnsupportedFieldInfo`. Never block upload. |
+
+### Text-field heuristic (resolved in order — first match wins)
+
+AcroForm format actions take precedence over every name token. If `/AA → /F → /JS` references a known formatter, that result is final. Only when no format action is detected do the name regexes apply.
+
+1. **DATE** if `acroField()` carries an additional-actions date format (`/AA` → `/F` → `JS` containing `AFDate_FormatEx` or `AFDate_Format`).
+2. **NUMBER** if `acroField()` carries an `AFNumber_Format` action.
+3. **DATE** if name/alternateName matches `/date|dob|birth/i`.
+4. **NUMBER** if name/alternateName matches `/amount|qty|count|number/i` AND `/MaxLen <= 10`.
+5. **EMAIL** if name/alternateName matches `/email|e[-_]?mail/i`.
+6. **NAME** if name/alternateName matches `/name/i`.
+7. **INITIALS** if name/alternateName matches `/initial/i`.
+8. Else **TEXT**.
+
+All regexes are case-insensitive and run against `partialName` then `alternateName`.
+
+Patterns are intentionally lenient to handle CamelCase Adobe Acrobat names (e.g. `CustomerName`, `BirthDate`) that strict word-boundary patterns miss. Expected false positives — `username` → NAME, `birth_name` → DATE, `initialize` → INITIALS — are tolerable because the editor is the final arbiter; false negatives fall through to TEXT (always safe).
+
+### Metadata mapping
+
+For every imported field:
+
+- `fieldMeta.required = field.isRequired()` (boolean; omit when false).
+- `fieldMeta.readOnly = field.isReadOnly()` (boolean; omit when false). Read-only fields **are** imported (rendered for reference in the editor); the renderer already honours `readOnly`.
+- `fieldMeta.label`: `alternateName ?? partialName` for label-supporting types (TEXT, NUMBER, DATE, INITIALS, NAME, EMAIL, DROPDOWN, RADIO, CHECKBOX). SIGNATURE has no label slot — drop it.
+- `fieldMeta.source = 'acroform'` on every imported field (see Schema Extension).
+
+### CHECKBOX required semantics
+
+AcroForm "required" on a checkbox means "must be checked". Documenso CHECKBOX has both `required` (field must be present) and `validationRule`/`validationLength` (e.g. "at least N of M"). Mapping:
+
+```ts
+if (field.isRequired()) {
+  fieldMeta.required = true;
+  fieldMeta.validationRule = 'at-least';
+  fieldMeta.validationLength = 1;
+}
+```
+
+This approximates "must be checked to submit" for a single-widget checkbox field.
+
+### Default values (only when `formValues` was NOT provided on this upload)
+
+`formValues` (via `insertFormValuesInPdf`) is authoritative when present — it bakes values into the flattened background, so the imported fields stay empty for the signer to fill. When `formValues` is absent, we copy PDF defaults into `fieldMeta` so the editor preview matches the source PDF:
+
+| Source | Target |
+| --- | --- |
+| `TextField.getText()` (non-empty) | `fieldMeta.text` (TEXT/DATE/INITIALS/NAME/EMAIL) or `fieldMeta.value` (NUMBER) |
+| `DropdownField` current selection | `fieldMeta.defaultValue` |
+| `CheckboxField.isChecked()` | `fieldMeta.values[0].checked = true` |
+| `RadioField` current selection | `fieldMeta.values[i].checked = true` on the matching option |
+
+Always emit `inserted: false` and `customText: ''` — the signer still confirms each field, defaults are editor-only hints.
+
+All metadata flows through `ZEnvelopeFieldAndMetaSchema.parse(...)` so imported fields match what the editor already expects.
+
+## Pre-extraction Guards
+
+Run in this order before any AcroForm work:
+
+1. **Encrypted PDFs**: if `pdfDoc.isEncrypted` → log `{ event: 'acroform-import.skip', reason: 'encrypted', envelopeItemTitle }`, return `{ fields: [], unsupported: [] }`. Upload proceeds with zero imported fields.
+2. **XFA hybrid**: detect via the catalog's `AcroForm` dict carrying an `XFA` key (best-effort via raw dict access; if @libpdf/core's public surface can't read it, fall through — mirrored AcroForm fields in XFA hybrids are fine to import). When detected, log `{ event: 'acroform-import.skip', reason: 'xfa-hybrid' }` and return empty results.
+3. **`getForm()` is null** → return empty results silently.
+4. **Top-level try/catch** around steps 1–6: any throw → `logger.error({ event: 'acroform-import.error', envelopeItemTitle, err })`, return `{ fields: [], unsupported: [] }`. Upload proceeds untouched. Never bubble.
+
+## Coordinate Handling
+
+Reuse the placeholder convention (top-left percentages, see `auto-place-fields.ts:121-138`):
+
+1. Build a page lookup once: `pages = pdfDoc.getPages(); pageByRef = new Map(pages.map((p, i) => [p.ref, i]))`.
+2. For each widget:
+   1. Read `widget.rect = [x1, y1, x2, y2]` (bottom-left, points).
+   2. Normalize: `left = min(x1, x2)`, `right = max`, `bottom = min(y1, y2)`, `top = max`.
+   3. Resolve `pageIndex` via `pageByRef.get(widget.pageRef)`. Skip if no match.
+   4. Read `page.width`, `page.height`, `rot = page.getRotation()` (degrees, normalized to `0|90|180|270`).
+   5. Apply inverse rotation transform so the field lands at the rendered top-left percentage:
+      - `rot === 0`: `x = left`, `y = pageH - top`, `w = right - left`, `h = top - bottom`. Page dims `(pageW, pageH)`.
+      - `rot === 90`: `x = bottom`, `y = left`, `w = top - bottom`, `h = right - left`. Page dims swap: `(pageH, pageW)`.
+      - `rot === 180`: `x = pageW - right`, `y = bottom`, `w = right - left`, `h = top - bottom`. Page dims `(pageW, pageH)`.
+      - `rot === 270`: `x = pageH - top`, `y = pageW - right`, `w = top - bottom`, `h = right - left`. Page dims swap.
+   6. Out-of-bounds policy: if the entire rect is outside the rotated page bounds, skip + emit `AcroFormUnsupportedFieldInfo` with `reason: 'off-page'`. Otherwise clamp to `[0, renderedW] × [0, renderedH]`.
+   7. Convert to percentages against the rendered page dimensions from step 5.
+   8. Apply the existing `MIN_HEIGHT_THRESHOLD` / `DEFAULT_FIELD_HEIGHT_PERCENT` fallback used by placeholders.
+3. Skip widgets that are `isHidden()` or have zero/negative `width`/`height` after normalization.
+
+## Ordering
+
+Sort imported fields before `createMany` by `(pageIndex asc, top-to-bottom, left-to-right)`. Concretely: ascending `pageIndex`, then ascending `y` (top-of-page first), then ascending `x` within `±2%` y-buckets so a row of fields stays a row. This matches how a signer visually scans the page; it does not rely on AcroForm `/Tabs` metadata (often wrong).
+
+## Audit Logging
+
+Every imported field emits one `FIELD_CREATED` entry matching `create-envelope-fields.ts:264`'s shape:
+
+```ts
+await tx.documentAuditLog.createMany({
+  data: createdFields.map((f) => createDocumentAuditLogData({
+    type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_CREATED,
+    envelopeId: envelope.id,
+    metadata: requestMetadata,
+    data: { fieldId: f.secondaryId, fieldRecipientEmail, fieldRecipientId, fieldType: f.type },
+  })),
+});
+```
+
+The placeholder branch in `create-envelope.ts` is silent today and stays silent — AcroForm import does not retroactively change that. Distinguishing imported vs. placeholder vs. user-placed fields is done via `fieldMeta.source`, not a new audit type.
+
+## Schema Extension
+
+One field added to `ZBaseFieldMeta` in `packages/lib/types/field-meta.ts`:
+
+```ts
+export const ZBaseFieldMeta = z.object({
+  // existing...
+  source: z.enum(['acroform']).optional(),
+});
+```
+
+No DB migration (fieldMeta is JSON). No editor change. No API contract change beyond the optional field. Forwards-compatible: future sources (`'placeholder'`, `'figma'`, etc.) extend the enum.
+
+## Plan
+
+### 1. Add the AcroForm extractor
+
+New file `packages/lib/server-only/pdf/acroform-fields.ts`:
+
+```ts
+export type AcroFormFieldImportInfo = {
+  source: 'acroform';
+  fieldName: string;
+  widgetIndex: number;
+  fieldAndMeta: TFieldAndMeta;
+  page: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  pageWidth: number;
+  pageHeight: number;
+};
+
+export type AcroFormUnsupportedFieldInfo = {
+  fieldName: string;
+  acroFormType: string;
+  reason: 'unsupported-type' | 'hidden' | 'off-page' | 'zero-size' | 'no-page-match' | 'signed-signature';
+};
+
+export type AcroFormExtractionResult = {
+  fields: AcroFormFieldImportInfo[];
+  unsupported: AcroFormUnsupportedFieldInfo[];
+  /** True when a signed signature widget was found — caller MUST set flattenForm: false for that item. */
+  hasSignedSignature: boolean;
+  /** True when extraction returned empty for a reason that should be surfaced in logs but not propagated. */
+  skipReason?: 'encrypted' | 'xfa-hybrid' | 'no-form' | 'error';
+};
+
+export const extractAcroFormFieldsFromPDF = async (
+  pdf: Buffer,
+): Promise<AcroFormExtractionResult>;
+
+export const convertAcroFormFieldsToFieldInputs = (
+  fields: AcroFormFieldImportInfo[],
+  recipientResolver: (fieldName: string) => Pick<Recipient, 'id'>,
+  envelopeItemId?: string,
+): FieldToCreate[];
+```
+
+`extractAcroFormFieldsFromPDF`:
+
+- Wraps everything in try/catch (top-level guard).
+- Loads via `PDF.load(new Uint8Array(pdf))`.
+- Runs pre-extraction guards (encrypted, XFA, null form) — returns early with `skipReason` set.
+- Builds the page-ref → index + rotation lookup once.
+- Iterates `form.getFields()`, applies the type-resolution heuristic, geometry pipeline, default-value mapping.
+- Records signed-signature widgets in `unsupported` with `reason: 'signed-signature'` AND sets `hasSignedSignature = true`.
+- Logger is module-scoped (no apiRequestMetadata in this file — pure function).
+
+`convertAcroFormFieldsToFieldInputs` mirrors `convertPlaceholdersToFieldInputs` — pure point→percentage transform, no DB access. After mapping, sort by `(page, y, x)` as in Ordering.
+
+Kept separate from `auto-place-fields.ts`: placeholders are text-driven and emit white rectangles via `whiteoutRegions`; AcroForm import is widget-driven and relies on the post-extraction `form.flatten()` to clean the PDF. Sharing types prematurely would couple both paths.
+
+### 2. Extract AcroForm fields before flattening
+
+In both upload entry points the order becomes:
+
+```
+convertToPdf (router only)
+  → insertFormValuesInPdf if formValues
+  → extractAcroFormFieldsFromPDF(pdf)            // new — must run BEFORE normalizePdf
+  → const shouldFlatten = type !== 'TEMPLATE' && !extraction.hasSignedSignature
+  → normalizePdf({ flattenForm: shouldFlatten })
+  → extractPdfPlaceholders(normalized)
+  → putPdfFileServerSide(cleanedPdf)
+  → forward { placeholders, acroFormFields, formValuesProvided }
+```
+
+Why before `normalizePdf`: for `DOCUMENT` uploads `normalizePdf` calls `form.flatten()` and destroys widget geometry. Extraction must read the unflattened buffer. `formValues` filling stays first so user-prefilled values still bake into the flattened background.
+
+When `extraction.hasSignedSignature` is true, also `logger.warn({ event: 'acroform-import.signed-pdf-no-flatten', envelopeItemTitle })`.
+
+`formValuesProvided` (boolean) is forwarded to the converter so the default-value mapping can skip prefill when the user-supplied values pipeline already filled the PDF.
+
+Template flattening policy is unchanged in this plan: templates continue to preserve AcroForm widgets (no `form.flatten()`), so imported fields will visually duplicate the still-interactive PDF widgets in the template preview. Flipping templates to flatten is a follow-up — it's a breaking change for API users relying on template `formValues`.
+
+### 3. Thread `acroFormFields` through `createEnvelope`
+
+Extend `CreateEnvelopeOptions.data.envelopeItems[number]` (`packages/lib/server-only/envelope/create-envelope.ts:70-75`):
+
+```ts
+envelopeItems: {
+  title?: string;
+  documentDataId: string;
+  order?: number;
+  placeholders?: PlaceholderInfo[];
+  acroFormFields?: AcroFormFieldImportInfo[];   // new
+  formValuesProvided?: boolean;                  // new — already-applied prefill
+}[];
+```
+
+Inside the existing transaction (alongside the `itemsWithPlaceholders` branch at `:431-538`), add an `itemsWithAcroFormFields` branch:
+
+- Run AFTER the placeholder branch so `availableRecipients` reflects any placeholder signers it created.
+- Recipient resolution:
+  - **First-signer rule**: pick `availableRecipients.filter(r => r.role === SIGNER || r.role === APPROVER).sort((a, b) => (a.signingOrder ?? Infinity) - (b.signingOrder ?? Infinity) || a.id - b.id)[0]`.
+  - If none: the placeholder branch may have created `Recipient 1` already — reuse. If still none (no recipients, no placeholders), create one placeholder `SIGNER` via the same `recipient.1@documenso.com` shape used by the placeholder branch.
+  - All imported fields → that one recipient. User reassigns in editor.
+- Call `convertAcroFormFieldsToFieldInputs(item.acroFormFields, resolver, envelopeItem.id)` then `tx.field.createMany(...)` with the same `{ envelopeId, envelopeItemId, recipientId, type, page, positionX, positionY, width, height, customText: '', inserted: false, fieldMeta }` shape used by the placeholder branch.
+- Immediately after, emit per-field `FIELD_CREATED` audit log entries (see Audit Logging).
+
+### 4. Mirror in `UNSAFE_createEnvelopeItems`
+
+`packages/lib/server-only/envelope-item/create-envelope-items.ts:47-77` — carry `acroFormFields` and `formValuesProvided` alongside `placeholders` in `envelopeItemsToCreate`. Inside the existing `if (envelope.recipients.length > 0)` block (`:111-160`), after the placeholder loop, run the AcroForm loop using the same first-signer rule (SIGNER|APPROVER, signingOrder asc, id asc). Emit per-field `FIELD_CREATED` entries with `apiRequestMetadata`. If `envelope.recipients.length === 0`, skip — appending widgets to a recipient-less envelope is the user's setup phase and is handled when they add recipients (matches current placeholder behavior on append).
+
+### 5. Log unsupported fields, never block upload
+
+In both entry points, after extraction:
+
+```ts
+if (extraction.unsupported.length > 0) {
+  logger.info({
+    event: 'acroform-import.unsupported',
+    envelopeItemTitle,
+    count: extraction.unsupported.length,
+    byReason: groupBy(extraction.unsupported, u => u.reason),
+  });
+}
+if (extraction.skipReason) {
+  logger.info({ event: 'acroform-import.skip', envelopeItemTitle, reason: extraction.skipReason });
+}
+```
+
+No new error type, no upload rejection, no response-shape change. A UI surface for warnings comes later once the upload response has a stable warning shape.
+
+### 6. Schema extension
+
+`packages/lib/types/field-meta.ts`: add `source: z.enum(['acroform']).optional()` to `ZBaseFieldMeta`. Single-line change, no callers need updating because the field is optional.
+
+## Files
+
+| File | Change |
+| --- | --- |
+| `packages/lib/types/field-meta.ts` | Add `source?: 'acroform'` to `ZBaseFieldMeta`. |
+| `packages/lib/server-only/pdf/acroform-fields.ts` | **new** — extractor, converter, types, pre-extraction guards, heuristics, geometry pipeline, ordering. |
+| `packages/lib/server-only/envelope/create-envelope.ts` | Extend `CreateEnvelopeOptions.envelopeItems[]` with `acroFormFields` + `formValuesProvided`. Add AcroForm branch beside placeholder branch (~`:431-538`). Emit per-field `FIELD_CREATED` audit entries. |
+| `packages/trpc/server/envelope-router/create-envelope.ts` | Insert `extractAcroFormFieldsFromPDF` before `normalizePdf` in the per-file loop (`:110-141`). Downgrade `flattenForm` when `hasSignedSignature`. Forward `acroFormFields` + `formValuesProvided` into the `envelopeItems` payload (`:135-140`). Log unsupported + skipReason. |
+| `packages/lib/server-only/envelope-item/create-envelope-items.ts` | Insert `extractAcroFormFieldsFromPDF` before `normalizePdf` (`:48-77`). Same flatten downgrade. Carry `acroFormFields` + `formValuesProvided` in `envelopeItemsToCreate`. Add AcroForm loop inside `envelope.recipients.length > 0` (`:111-160`). Per-field audit entries. Log unsupported + skipReason. |
+| `packages/lib/server-only/pdf/acroform-fields.test.ts` | **new** — unit suite (see Tests). |
+| `packages/app-tests/e2e/scenarios/acroform-import.spec.ts` | **new** — e2e suite (see Tests). |
+| `scripts/generate-acroform-test-pdf.mjs` | **new** — one-off generator (committed) producing `assets/acroform-import-test.pdf` + rotated variants. |
+| `assets/acroform-import-test.pdf` | **new** — base fixture: one of each supported type. |
+| `assets/acroform-import-rotated-90.pdf` | **new** — rotated-page fixture. |
+| `assets/acroform-import-rotated-180.pdf` | **new** — rotated-page fixture. |
+| `assets/acroform-import-rotated-270.pdf` | **new** — rotated-page fixture. |
+| `assets/acroform-import-signed.pdf` | **new** — fixture with one signed signature widget + supported widgets. |
+
+No DB schema change. No new tRPC route. No public API surface change beyond the optional `fieldMeta.source`.
+
+## Tests
+
+### Unit (`packages/lib/server-only/pdf/acroform-fields.test.ts`)
+
+Drive from the committed fixture set; synthesize edge-case PDFs inline via `@libpdf/core`'s form builder where a static file is overkill.
+
+Type resolution:
+- text / signature / checkbox / radio / dropdown widgets each produce the expected Documenso field type.
+- Heuristic positives: `signed_date` / `dob` → DATE; `initial` / `initials` → INITIALS; `customer_email` → EMAIL; `full_name` / `fname` → NAME; field with `AFNumber_Format` action → NUMBER; field with `MaxLen: 5` + name `qty` → NUMBER; plain `customer_id` → TEXT.
+- AcroForm format actions take precedence over name tokens (a field named `customer_name` with an `AFDate_FormatEx` action → DATE).
+
+Metadata:
+- `isRequired` / `isReadOnly` round-trip into `fieldMeta`.
+- `alternateName` (or `partialName` fallback) → `fieldMeta.label` on label-supporting types; SIGNATURE has no label.
+- Required CHECKBOX → `required: true` + `validationRule: 'at-least'` + `validationLength: 1`.
+- Every imported field has `fieldMeta.source = 'acroform'`.
+
+Default values:
+- TextField with non-empty value AND `formValuesProvided = false` → `fieldMeta.text` set.
+- TextField with non-empty value AND `formValuesProvided = true` → `fieldMeta.text` NOT set.
+- DropdownField selection → `fieldMeta.defaultValue`.
+- CheckboxField checked → `values[0].checked = true`.
+- RadioField selected → matching `values[i].checked = true`.
+
+Geometry:
+- Bottom-left widget rect `[100, 600, 200, 620]` on a 612×792 page → top-left percentages within ±0.01% of expected.
+- 90° rotated page: same widget rect → rotated coordinates as defined in Coordinate Handling step 5.
+- 180° and 270° rotated pages: same.
+- Hidden widgets (annotation flags hidden bit) → skipped.
+- Widgets with zero/negative dimensions → skipped.
+- Widgets with `pageRef` not in `pdfDoc.getPages()` → `unsupported` with `reason: 'no-page-match'`.
+- Widget rect entirely off-page → `unsupported` with `reason: 'off-page'`.
+- Widget rect partially off-page → clamped, imported.
+
+Ordering:
+- Two pages × four widgets in scrambled creation order → output sorted by `(page, y, x)`.
+
+Skips and unsupported:
+- listbox / button / unknown / non-terminal → `unsupported`, never thrown.
+- Encrypted PDF → `skipReason: 'encrypted'`, `fields: []`, no throw.
+- XFA hybrid PDF (best-effort detect) → `skipReason: 'xfa-hybrid'` when detectable; otherwise extraction proceeds normally.
+- Signed signature widget (`SignatureField.isSigned()` returns true) → `unsupported` with `reason: 'signed-signature'` AND `hasSignedSignature: true`.
+- Buffer corruption → top-level try/catch, returns empty + `skipReason: 'error'`, no throw.
+
+### E2E (`packages/app-tests/e2e/scenarios/acroform-import.spec.ts`)
+
+- Upload `assets/acroform-import-test.pdf` as a `DOCUMENT` via the v2 envelope router with one provided SIGNER recipient → assert envelope has one `Field` per supported widget, types match, `positionX/Y/width/height` within ±1% of expected, every field's recipient is that one SIGNER, stored PDF (`documentData`) loaded via `PDF.load` reports `getForm() === null` or `getFields().length === 0`. Audit log contains N `FIELD_CREATED` entries.
+- Upload with `formValues` populated → `formValues` persists, imported fields exist but have no default values set in fieldMeta, the flattened PDF reflects the prefilled values.
+- Upload with two recipients: one CC + one SIGNER → all imported fields assigned to the SIGNER (CC skipped).
+- Upload with two recipients: one SIGNER (signingOrder=1) + one APPROVER (signingOrder=2) → all imported fields assigned to the SIGNER.
+- Upload with zero recipients → placeholder `Recipient 1` created (shared with the placeholder branch's behavior; if both placeholders and AcroForm fields exist in the same file, only one `Recipient 1` exists).
+- Upload `assets/acroform-import-signed.pdf` → signed signature widget skipped, other widgets imported, stored PDF is NOT flattened (`getForm() !== null`, widgets still present).
+- Append `assets/acroform-import-test.pdf` to an existing envelope with one SIGNER via `UNSAFE_createEnvelopeItems` → new `envelopeItem.id` carries the imported fields, all assigned to that SIGNER.
+- Append to a recipient-less envelope → AcroForm extraction runs, fields are NOT created (skipped, matching placeholder behavior).
+- Upload `TEMPLATE` → template still preserves AcroForm widgets in the stored PDF (current behavior unchanged), imported fields ALSO exist (visual duplication acknowledged in Risks).
+- Upload PDF with one `listbox` + one supported `text` field → upload succeeds, only the text field becomes a Documenso field, log line emitted for the listbox.
+- Upload rotated PDFs (90/180/270 fixtures) → field geometry lands within ±1% of the expected rendered position on each page.
+
+### Regression
+
+```bash
+npx tsc --noEmit -p apps/remix/tsconfig.json
+npm run test:dev -w @documenso/app-tests -- packages/app-tests/e2e/scenarios/form-flattening.spec.ts
+npm run test:dev -w @documenso/app-tests -- packages/app-tests/e2e/scenarios/acroform-import.spec.ts
+```
+
+## Behavior Matrix
+
+| Upload | Has AcroForm | Signed sig? | `formValues`? | `recipients`? | Result |
+| --- | --- | --- | --- | --- | --- |
+| `DOCUMENT` | yes | no | none | 1 SIGNER/APPROVER | All imported fields → that recipient. Stored PDF flat. Per-field `FIELD_CREATED` audit. |
+| `DOCUMENT` | yes | no | none | N≥2 mixed roles | All imported fields → first SIGNER|APPROVER by (signingOrder asc, id asc). CC/VIEWER skipped. User reassigns in editor. |
+| `DOCUMENT` | yes | no | none | only CC/VIEWER | Treated as "no signable recipients" — placeholder `Recipient 1` SIGNER created. |
+| `DOCUMENT` | yes | no | none | none | One placeholder `Recipient 1` SIGNER created (reused if placeholder branch already made one). |
+| `DOCUMENT` | yes | no | provided | any | `formValues` filled → flattened values visible → empty supported fields imported with `source: 'acroform'`, no `fieldMeta.text`/`defaultValue` prefill. |
+| `DOCUMENT` | yes | yes | any | any | Signed signature(s) skipped + logged. `flattenForm` downgraded to false → stored PDF retains widgets. Other supported widgets imported normally. |
+| `DOCUMENT` | no | n/a | any | any | Unchanged. |
+| `TEMPLATE` | yes | n/a | any | any | Imported fields created **and** PDF still contains interactive widgets (known artifact, follow-up). |
+| Encrypted PDF | n/a | n/a | any | any | Extraction skipped + logged. Upload proceeds with zero AcroForm imports. |
+| XFA hybrid (detected) | n/a | n/a | any | any | Extraction skipped + logged. Same as encrypted. |
+| Append to existing envelope w/ recipients | yes | no | n/a | n/a | Imported fields → first SIGNER|APPROVER of the envelope. Per-field audit. |
+| Append to existing envelope w/o recipients | yes | n/a | n/a | n/a | Skipped (matches current placeholder behavior on append). |
+
+## Out of Scope / Follow-ups
+
+- Flipping `TEMPLATE` uploads to flatten after import — breaking for API users relying on template AcroForm `formValues`.
+- Editor UI surface: "Imported from PDF" badge (using `fieldMeta.source`), warning toast for skipped widgets, encrypted/XFA banner. Data is captured now; UI ships separately.
+- A signed-AcroForm-signature → completed Documenso signature mapping.
+- True radio-group consolidation (one Documenso field per AcroForm radio group instead of per widget) — needs `fieldMeta` schema extension for multi-position groups.
+- Same-name multi-widget non-radio fields (one AcroForm text field rendered on N pages) — currently emit N independent Documenso fields; future work could sync values at signing time via a shared `groupId` in fieldMeta.
+- Listbox support.
+- Recipient inference from PDF authoring metadata (Adobe's role/recipient hints, tab order grouping).
+- AcroForm `/Tabs` ordering as a signal — current spatial sort suffices.
+
+## Risks
+
+- **Rotated pages**: covered by inverse-rotation transform with 90/180/270 fixtures gating the unit suite. Skewed rotations (non-cardinal) are not supported; should be rejected as `off-page` if their normalized rect doesn't land within page bounds.
+- **Radio groups**: emitting one Documenso field per widget will look right visually but signing semantics differ from a single PDF radio group (each option becomes independently checkable). Gating fixture in e2e covers visual placement; signing semantics divergence is documented and ships as a known limitation.
+- **Template behavior**: leaving `TEMPLATE` uploads unflattened means imported fields and live widgets coexist. Acceptable for v1, but the template preview will show duplicated controls.
+- **Signed signature + flattenForm downgrade**: a `DOCUMENT` upload containing a signed signature now stores an un-flattened PDF. Existing code paths that assume `DOCUMENT` PDFs are always flat (signing renderer, downstream conversion) MUST be re-verified — add an integration check in the e2e suite that signing still works on the signed-fixture envelope.
+- **Recipient ambiguity**: AcroForm widgets don't encode Documenso recipients. Deterministic "all to first signer" + editor review is the safest first cut; smarter assignment is a follow-up.
+- **XFA detection**: best-effort; if @libpdf/core's public surface doesn't expose the catalog AcroForm dict, we fall through and import any mirrored AcroForm fields. Acceptable — XFA-only PDFs with no mirror produce empty AcroForm extraction and the upload proceeds. Worst case is a noisy log line on a misclassified hybrid.
+- **Heuristic false positives**: expanded heuristic (NAME/EMAIL/NUMBER/DATE/INITIALS) increases the chance of mis-typing a field. Mitigation: every imported field is editable in the editor before sending. False negatives fall through to TEXT (always safe).

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

@@ -1,4 +1,3 @@
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -24,7 +23,7 @@ import { useParams } from 'react-router';
 import { z } from 'zod';
 
 const ZCreateFolderFormSchema = z.object({
-  name: ZNameSchema,
+  name: z.string().min(1, { message: 'Folder name is required' }),
 });
 
 type TCreateFolderFormSchema = z.infer<typeof ZCreateFolderFormSchema>;
@@ -66,7 +65,7 @@ export const FolderCreateDialog = ({ type, trigger, parentFolderId, ...props }:
       toast({
         description: t`Folder created successfully`,
       });
-    } catch (_err) {
+    } catch (err) {
       toast({
         title: t`Failed to create folder`,
         description: t`An unknown error occurred while creating the folder.`,

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

@@ -1,6 +1,5 @@
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { trpc } from '@documenso/trpc/react';
 import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
@@ -24,6 +23,8 @@ import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { useOptionalCurrentTeam } from '~/providers/team';
+
 export type FolderUpdateDialogProps = {
   folder: TFolderWithSubfolders | null;
   isOpen: boolean;
@@ -31,7 +32,7 @@ export type FolderUpdateDialogProps = {
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
 export const ZUpdateFolderFormSchema = z.object({
-  name: ZNameSchema,
+  name: z.string().min(1),
   visibility: z.nativeEnum(DocumentVisibility).optional(),
 });
 
@@ -39,6 +40,7 @@ export type TUpdateFolderFormSchema = z.infer<typeof ZUpdateFolderFormSchema>;
 
 export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdateDialogProps) => {
   const { t } = useLingui();
+  const team = useOptionalCurrentTeam();
 
   const { toast } = useToast();
   const { mutateAsync: updateFolder } = trpc.folder.updateFolder.useMutation();

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

@@ -1,6 +1,5 @@
 import { MAXIMUM_PASSKEYS } from '@documenso/lib/constants/auth';
 import { AppError } from '@documenso/lib/errors/app-error';
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
@@ -26,13 +25,14 @@ import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { UAParser } from 'ua-parser-js';
 import { z } from 'zod';
+
 export type PasskeyCreateDialogProps = {
   trigger?: React.ReactNode;
   onSuccess?: () => void;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
 const ZCreatePasskeyFormSchema = z.object({
-  passkeyName: ZNameSchema,
+  passkeyName: z.string().min(3),
 });
 
 type TCreatePasskeyFormSchema = z.infer<typeof ZCreatePasskeyFormSchema>;

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

@@ -155,7 +155,7 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
           <Button className="flex-shrink-0" variant="secondary">
-            <Trans>Create Team</Trans>
+            <Trans>Create team</Trans>
           </Button>
         )}
       </DialogTrigger>
@@ -163,7 +163,7 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
       <DialogContent position="center">
         <DialogHeader>
           <DialogTitle>
-            <Trans>Create Team</Trans>
+            <Trans>Create team</Trans>
           </DialogTitle>
 
           <DialogDescription>

apps/remix/app/components/dialogs/team-email-update-dialog.tsx

@@ -1,5 +1,4 @@
 import { trpc } from '@documenso/trpc/react';
-import { ZUpdateTeamEmailMutationSchema } from '@documenso/trpc/server/team-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -20,16 +19,16 @@ import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useRevalidator } from 'react-router';
-import type { z } from 'zod';
+import { z } from 'zod';
 
 export type TeamEmailUpdateDialogProps = {
   teamEmail: TeamEmail;
   trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
-const ZUpdateTeamEmailFormSchema = ZUpdateTeamEmailMutationSchema.pick({
-  data: true,
-}).shape.data;
+const ZUpdateTeamEmailFormSchema = z.object({
+  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+});
 
 type TUpdateTeamEmailFormSchema = z.infer<typeof ZUpdateTeamEmailFormSchema>;
 
@@ -45,7 +44,6 @@ export const TeamEmailUpdateDialog = ({ teamEmail, trigger, ...props }: TeamEmai
     defaultValues: {
       name: teamEmail.name,
     },
-    mode: 'onSubmit',
   });
 
   const { mutateAsync: updateTeamEmail } = trpc.team.email.update.useMutation();

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

@@ -79,7 +79,7 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
 
       toast({
         title: t`Success`,
-        description: t`Team groups have been added.`,
+        description: t`Team members have been added.`,
         duration: 5000,
       });
 
@@ -87,7 +87,7 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
     } catch {
       toast({
         title: t`An unknown error occurred`,
-        description: t`We encountered an unknown error while attempting to add the groups. Please try again later.`,
+        description: t`We encountered an unknown error while attempting to add team members. Please try again later.`,
         variant: 'destructive',
       });
     }
@@ -134,7 +134,7 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
               </DialogTitle>
 
               <DialogDescription>
-                <Trans>Configure the team roles for each group.</Trans>
+                <Trans>Configure the team roles for each group</Trans>
               </DialogDescription>
             </DialogHeader>
           ))
@@ -260,7 +260,7 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
                     </Button>
 
                     <Button type="submit" loading={form.formState.isSubmitting}>
-                      <Trans>Add Groups</Trans>
+                      <Trans>Create Groups</Trans>
                     </Button>
                   </DialogFooter>
                 </>

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

@@ -106,7 +106,7 @@ export const WebhookCreateDialog = ({ trigger, ...props }: WebhookCreateDialogPr
             <Trans>Create webhook</Trans>
           </DialogTitle>
           <DialogDescription>
-            <Trans>Receive real-time notifications when document events occur.</Trans>
+            <Trans>On this page, you can create a new webhook.</Trans>
           </DialogDescription>
         </DialogHeader>
 

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

@@ -1,10 +1,5 @@
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import {
-  BRANDING_LOGO_ALLOWED_TYPES,
-  BRANDING_LOGO_MAX_SIZE_BYTES,
-  BRANDING_LOGO_MAX_SIZE_MB,
-} from '@documenso/lib/constants/branding';
 import { DEFAULT_BRAND_COLORS, DEFAULT_BRAND_RADIUS } from '@documenso/lib/constants/theme';
 import { ZCssVarsSchema } from '@documenso/lib/types/css-vars';
 import { cn } from '@documenso/ui/lib/utils';
@@ -28,15 +23,15 @@ import { useCspNonce } from '~/utils/nonce';
 
 import { FormStickySaveBar } from './form-sticky-save-bar';
 
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+const ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
+
 const ZBrandingPreferencesFormSchema = z.object({
   brandingEnabled: z.boolean().nullable(),
   brandingLogo: z
     .instanceof(File)
-    .refine(
-      (file) => file.size <= BRANDING_LOGO_MAX_SIZE_BYTES,
-      `File size must be less than ${BRANDING_LOGO_MAX_SIZE_MB}MB`,
-    )
-    .refine((file) => BRANDING_LOGO_ALLOWED_TYPES.includes(file.type), 'Only .jpg, .png, and .webp files are accepted')
+    .refine((file) => file.size <= MAX_FILE_SIZE, 'File size must be less than 5MB')
+    .refine((file) => ACCEPTED_FILE_TYPES.includes(file.type), 'Only .jpg, .png, and .webp files are accepted')
     .nullish(),
   brandingUrl: z.string().url().optional().or(z.literal('')),
   brandingCompanyDetails: z.string().max(500).optional(),
@@ -250,7 +245,7 @@ export function BrandingPreferencesForm({
                       <FormControl className="relative">
                         <Input
                           type="file"
-                          accept={BRANDING_LOGO_ALLOWED_TYPES.join(',')}
+                          accept={ACCEPTED_FILE_TYPES.join(',')}
                           disabled={!isBrandingEnabled}
                           onChange={(e) => {
                             const file = e.target.files?.[0];

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

@@ -162,7 +162,7 @@ export const DocumentPreferencesForm = ({
   return (
     <Form {...form}>
       <form onSubmit={handleFormSubmit}>
-        <fieldset className="flex h-full flex-col gap-y-6" disabled={form.formState.isSubmitting}>
+        <fieldset className="flex h-full max-w-2xl flex-col gap-y-6" disabled={form.formState.isSubmitting}>
           {!isPersonalLayoutMode && (
             <FormField
               control={form.control}

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

@@ -75,7 +75,7 @@ export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: Ema
   return (
     <Form {...form}>
       <form onSubmit={handleFormSubmit}>
-        <fieldset className="flex h-full flex-col gap-y-6" disabled={form.formState.isSubmitting}>
+        <fieldset className="flex h-full max-w-2xl flex-col gap-y-6" disabled={form.formState.isSubmitting}>
           {organisation.organisationClaim.flags.emailDomains && (
             <FormField
               control={form.control}

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

@@ -1,4 +1,3 @@
-import { ZNameSchema } from '@documenso/lib/types/name';
 import {
   Form,
   FormControl,
@@ -16,8 +15,8 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 const ZEmailTransportFormSchema = z.object({
-  name: ZNameSchema,
-  fromName: ZNameSchema,
+  name: z.string().min(1),
+  fromName: z.string().min(1),
   fromAddress: z.string().email(),
   type: z.enum(['SMTP_AUTH', 'SMTP_API', 'RESEND', 'MAILCHANNELS']),
   host: z.string().optional(),

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

@@ -1,5 +1,5 @@
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { ZNameSchema } from '@documenso/lib/types/name';
+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';

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

@@ -1,8 +1,8 @@
 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 { ZNameSchema } from '@documenso/lib/types/name';
 import { env } from '@documenso/lib/utils/env';
 import { zEmail } from '@documenso/lib/utils/zod';
 import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';

apps/remix/app/components/general/admin-global-settings-section.tsx

@@ -5,7 +5,6 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { OrganisationGlobalSettings, TeamGlobalSettings } from '@prisma/client';
-import type { ReactNode } from 'react';
 
 import { DetailsCard, DetailsValue } from '~/components/general/admin-details';
 
@@ -26,72 +25,38 @@ const emailSettingsKeys = Object.keys(EMAIL_SETTINGS_LABELS) as (keyof TDocument
 type AdminGlobalSettingsSectionProps = {
   settings: TeamGlobalSettings | OrganisationGlobalSettings | null;
   isTeam?: boolean;
-  /** When viewing a team, the parent organisation settings the team inherits from. */
-  inheritedSettings?: OrganisationGlobalSettings | null;
 };
 
-export const AdminGlobalSettingsSection = ({
-  settings,
-  isTeam = false,
-  inheritedSettings,
-}: AdminGlobalSettingsSectionProps) => {
+export const AdminGlobalSettingsSection = ({ settings, isTeam = false }: AdminGlobalSettingsSectionProps) => {
   const { _ } = useLingui();
+  const notSetLabel = isTeam ? <Trans>Inherited</Trans> : <Trans>Not set</Trans>;
 
   if (!settings) {
     return null;
   }
 
-  const notSet = <Trans>Not set</Trans>;
-
-  const inheritedValue = (value: ReactNode) => {
-    if (!isTeam || value === null) {
-      return notSet;
+  const textValue = (value: string | null | undefined) => {
+    if (value === null || value === undefined) {
+      return notSetLabel;
     }
 
-    return (
-      <span className="flex items-center gap-1.5">
-        <span className="text-muted-foreground">
-          <Trans>Inherited</Trans>:
-        </span>
-        <span>{value}</span>
-      </span>
-    );
+    return value;
   };
 
-  const textValue = (value: string | null | undefined, inherited?: string | null) => {
-    if (value && value.trim() !== '') {
-      return value;
+  const brandingTextValue = (value: string | null | undefined) => {
+    if (value === null || value === undefined || value.trim() === '') {
+      return notSetLabel;
     }
 
-    if (inherited && inherited.trim() !== '') {
-      return inheritedValue(inherited);
-    }
-
-    return notSet;
+    return value;
   };
 
-  const booleanLabel = (value: boolean) => (value ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>);
-
-  const booleanValue = (value: boolean | null | undefined, inherited?: boolean | null) => {
-    if (value !== null && value !== undefined) {
-      return booleanLabel(value);
+  const booleanValue = (value: boolean | null | undefined) => {
+    if (value === null || value === undefined) {
+      return notSetLabel;
     }
 
-    return inherited !== null && inherited !== undefined ? inheritedValue(booleanLabel(inherited)) : notSet;
-  };
-
-  const visibilityLabel = (value: string | null | undefined) => {
-    return value && DOCUMENT_VISIBILITY[value] ? _(DOCUMENT_VISIBILITY[value].value) : null;
-  };
-
-  const visibilityValue = (value: string | null | undefined, inherited?: string | null) => {
-    const label = visibilityLabel(value);
-
-    if (label !== null) {
-      return label;
-    }
-
-    return inheritedValue(visibilityLabel(inherited));
+    return value ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>;
   };
 
   const parsedEmailSettings = ZDocumentEmailSettingsSchema.safeParse(settings.emailDocumentSettings);
@@ -100,82 +65,70 @@ export const AdminGlobalSettingsSection = ({
     <div className="grid grid-cols-1 gap-3 text-sm sm:grid-cols-2 lg:grid-cols-3">
       <DetailsCard label={<Trans>Document visibility</Trans>}>
         <DetailsValue>
-          {visibilityValue(settings.documentVisibility, inheritedSettings?.documentVisibility)}
+          {settings.documentVisibility != null
+            ? _(DOCUMENT_VISIBILITY[settings.documentVisibility].value)
+            : notSetLabel}
         </DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Document language</Trans>}>
-        <DetailsValue>{textValue(settings.documentLanguage, inheritedSettings?.documentLanguage)}</DetailsValue>
+        <DetailsValue>{textValue(settings.documentLanguage)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Document timezone</Trans>}>
-        <DetailsValue>{textValue(settings.documentTimezone, inheritedSettings?.documentTimezone)}</DetailsValue>
+        <DetailsValue>{textValue(settings.documentTimezone)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Date format</Trans>}>
-        <DetailsValue>{textValue(settings.documentDateFormat, inheritedSettings?.documentDateFormat)}</DetailsValue>
+        <DetailsValue>{textValue(settings.documentDateFormat)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Include sender details</Trans>}>
-        <DetailsValue>
-          {booleanValue(settings.includeSenderDetails, inheritedSettings?.includeSenderDetails)}
-        </DetailsValue>
+        <DetailsValue>{booleanValue(settings.includeSenderDetails)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Include signing certificate</Trans>}>
-        <DetailsValue>
-          {booleanValue(settings.includeSigningCertificate, inheritedSettings?.includeSigningCertificate)}
-        </DetailsValue>
+        <DetailsValue>{booleanValue(settings.includeSigningCertificate)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Include audit log</Trans>}>
-        <DetailsValue>{booleanValue(settings.includeAuditLog, inheritedSettings?.includeAuditLog)}</DetailsValue>
+        <DetailsValue>{booleanValue(settings.includeAuditLog)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Delegate document ownership</Trans>}>
-        <DetailsValue>
-          {booleanValue(settings.delegateDocumentOwnership, inheritedSettings?.delegateDocumentOwnership)}
-        </DetailsValue>
+        <DetailsValue>{booleanValue(settings.delegateDocumentOwnership)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Typed signature</Trans>}>
-        <DetailsValue>
-          {booleanValue(settings.typedSignatureEnabled, inheritedSettings?.typedSignatureEnabled)}
-        </DetailsValue>
+        <DetailsValue>{booleanValue(settings.typedSignatureEnabled)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Upload signature</Trans>}>
-        <DetailsValue>
-          {booleanValue(settings.uploadSignatureEnabled, inheritedSettings?.uploadSignatureEnabled)}
-        </DetailsValue>
+        <DetailsValue>{booleanValue(settings.uploadSignatureEnabled)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Draw signature</Trans>}>
-        <DetailsValue>
-          {booleanValue(settings.drawSignatureEnabled, inheritedSettings?.drawSignatureEnabled)}
-        </DetailsValue>
+        <DetailsValue>{booleanValue(settings.drawSignatureEnabled)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Branding</Trans>}>
-        <DetailsValue>{booleanValue(settings.brandingEnabled, inheritedSettings?.brandingEnabled)}</DetailsValue>
+        <DetailsValue>{booleanValue(settings.brandingEnabled)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Branding logo</Trans>}>
-        <DetailsValue>{textValue(settings.brandingLogo, inheritedSettings?.brandingLogo)}</DetailsValue>
+        <DetailsValue>{brandingTextValue(settings.brandingLogo)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Branding URL</Trans>}>
-        <DetailsValue>{textValue(settings.brandingUrl, inheritedSettings?.brandingUrl)}</DetailsValue>
+        <DetailsValue>{brandingTextValue(settings.brandingUrl)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Branding company details</Trans>}>
-        <DetailsValue>
-          {textValue(settings.brandingCompanyDetails, inheritedSettings?.brandingCompanyDetails)}
-        </DetailsValue>
+        <DetailsValue>{brandingTextValue(settings.brandingCompanyDetails)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Email reply-to</Trans>}>
-        <DetailsValue>{textValue(settings.emailReplyTo, inheritedSettings?.emailReplyTo)}</DetailsValue>
+        <DetailsValue>{textValue(settings.emailReplyTo)}</DetailsValue>
       </DetailsCard>
 
       {isTeam && parsedEmailSettings.success && (
@@ -192,7 +145,7 @@ export const AdminGlobalSettingsSection = ({
       )}
 
       <DetailsCard label={<Trans>AI features</Trans>}>
-        <DetailsValue>{booleanValue(settings.aiFeaturesEnabled, inheritedSettings?.aiFeaturesEnabled)}</DetailsValue>
+        <DetailsValue>{booleanValue(settings.aiFeaturesEnabled)}</DetailsValue>
       </DetailsCard>
     </div>
   );

apps/remix/app/components/general/claim-account.tsx

@@ -1,7 +1,6 @@
 import { authClient } from '@documenso/auth/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { AppError } from '@documenso/lib/errors/app-error';
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { env } from '@documenso/lib/utils/env';
 import { zEmail } from '@documenso/lib/utils/zod';
 import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
@@ -20,6 +19,7 @@ import { useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import { z } from 'zod';
+
 import { SIGNUP_ERROR_MESSAGES } from '~/components/forms/signup';
 
 export type ClaimAccountProps = {
@@ -30,7 +30,7 @@ export type ClaimAccountProps = {
 
 export const ZClaimAccountFormSchema = z
   .object({
-    name: ZNameSchema,
+    name: z.string().trim().min(1, { message: msg`Please enter a valid name.`.id }),
     email: zEmail().min(1),
     password: ZPasswordSchema,
   })

apps/remix/app/components/general/claim-limit-fields.tsx

@@ -1,4 +1,11 @@
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { Trans, useLingui } from '@lingui/react/macro';
 import type { ReactNode } from 'react';
@@ -6,13 +13,6 @@ import type { Control, FieldValues, Path } from 'react-hook-form';
 
 import { RateLimitArrayInput } from './rate-limit-array-input';
 
-/**
- * The rate-limit editor renders its own per-row inline errors, but a submit
- * attempt can still surface array-level Zod issues (e.g. a committed duplicate
- * window). Rendering the field's message here guarantees the form never fails
- * silently when those errors are not tied to a row the editor is showing.
- */
-
 type ClaimLimitFieldsProps<T extends FieldValues> = {
   control: Control<T>;
   /** e.g. '' for the claim form, 'claims.' for the org admin form. */
@@ -20,12 +20,6 @@ type ClaimLimitFieldsProps<T extends FieldValues> = {
   disabled?: boolean;
 };
 
-type LimitGroup = {
-  title: ReactNode;
-  quotaKey: string;
-  rateLimitKey: string;
-};
-
 export const ClaimLimitFields = <T extends FieldValues>({
   control,
   prefix = '',
@@ -36,33 +30,13 @@ export const ClaimLimitFields = <T extends FieldValues>({
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   const name = (key: string) => `${prefix}${key}` as Path<T>;
 
-  const limitGroups: LimitGroup[] = [
-    {
-      title: <Trans>Documents</Trans>,
-      quotaKey: 'documentQuota',
-      rateLimitKey: 'documentRateLimits',
-    },
-    {
-      title: <Trans>Emails</Trans>,
-      quotaKey: 'emailQuota',
-      rateLimitKey: 'emailRateLimits',
-    },
-    {
-      title: <Trans>API</Trans>,
-      quotaKey: 'apiQuota',
-      rateLimitKey: 'apiRateLimits',
-    },
-  ];
-
-  const renderQuotaField = (group: LimitGroup) => (
+  const renderQuotaField = (key: string, label: ReactNode, description: ReactNode) => (
     <FormField
       control={control}
-      name={name(group.quotaKey)}
+      name={name(key)}
       render={({ field }) => (
         <FormItem>
-          <FormLabel className="text-muted-foreground text-xs">
-            <Trans>Monthly quota</Trans>
-          </FormLabel>
+          <FormLabel>{label}</FormLabel>
           <FormControl>
             <Input
               type="number"
@@ -73,18 +47,20 @@ export const ClaimLimitFields = <T extends FieldValues>({
               onChange={(e) => field.onChange(e.target.value === '' ? null : parseInt(e.target.value, 10))}
             />
           </FormControl>
+          <FormDescription>{description}</FormDescription>
           <FormMessage />
         </FormItem>
       )}
     />
   );
 
-  const renderRateLimitField = (group: LimitGroup) => (
+  const renderRateLimitField = (key: string, label: ReactNode) => (
     <FormField
       control={control}
-      name={name(group.rateLimitKey)}
+      name={name(key)}
       render={({ field }) => (
         <FormItem>
+          <FormLabel>{label}</FormLabel>
           <FormControl>
             <RateLimitArrayInput value={field.value ?? []} onChange={field.onChange} disabled={disabled} />
           </FormControl>
@@ -95,30 +71,27 @@ export const ClaimLimitFields = <T extends FieldValues>({
   );
 
   return (
-    <div className="space-y-3">
-      <div>
-        <h3 className="font-semibold text-base">
-          <Trans>Limits</Trans>
-        </h3>
-        <p className="mt-1 text-muted-foreground text-sm">
-          <Trans>
-            Empty quota means unlimited, 0 blocks the resource. Rate limit windows accept values like 5m, 1h or 24h.
-          </Trans>
-        </p>
-      </div>
+    <div className="space-y-4 rounded-md border p-4">
+      <FormLabel>
+        <Trans>Limits</Trans>
+      </FormLabel>
 
-      <div className="overflow-hidden rounded-lg border">
-        <div className="grid grid-cols-1 divide-y divide-border md:grid-cols-3 md:divide-x md:divide-y-0">
-          {limitGroups.map((group) => (
-            <div key={group.quotaKey} className="space-y-4 p-4">
-              <h4 className="font-semibold text-sm">{group.title}</h4>
+      {renderQuotaField(
+        'documentQuota',
+        <Trans>Monthly document quota</Trans>,
+        <Trans>Empty = Unlimited, 0 = Blocked</Trans>,
+      )}
+      {renderRateLimitField('documentRateLimits', <Trans>Document rate limits</Trans>)}
 
-              {renderQuotaField(group)}
-              {renderRateLimitField(group)}
-            </div>
-          ))}
-        </div>
-      </div>
+      {renderQuotaField(
+        'emailQuota',
+        <Trans>Monthly email quota</Trans>,
+        <Trans>Empty = Unlimited, 0 = Blocked</Trans>,
+      )}
+      {renderRateLimitField('emailRateLimits', <Trans>Email rate limits</Trans>)}
+
+      {renderQuotaField('apiQuota', <Trans>Monthly API quota</Trans>, <Trans>Empty = Unlimited, 0 = Blocked</Trans>)}
+      {renderRateLimitField('apiRateLimits', <Trans>API rate limits</Trans>)}
     </div>
   );
 };

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

@@ -20,18 +20,20 @@ import {
 import { getEnvelopeItemPermissions } from '@documenso/lib/utils/envelope';
 import { getOverlappingFieldPairs } from '@documenso/lib/utils/fields-overlap';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
+import { trpc } from '@documenso/trpc/react';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { cn } from '@documenso/ui/lib/utils';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
-import { AlertTriangleIcon, FileTextIcon, PencilIcon, SparklesIcon } from 'lucide-react';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { AlertTriangleIcon, FileTextIcon, FormInputIcon, PencilIcon, SparklesIcon } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRevalidator, useSearchParams } from 'react-router';
 import { isDeepEqual } from 'remeda';
 import { match } from 'ts-pattern';
@@ -78,7 +80,8 @@ export const EnvelopeEditorFieldsPage = () => {
 
   const scrollableContainerRef = useRef<HTMLDivElement>(null);
 
-  const { envelope, editorFields, navigateToStep, editorConfig } = useCurrentEnvelopeEditor();
+  const { envelope, editorFields, navigateToStep, editorConfig, flushAutosave, syncEnvelope } =
+    useCurrentEnvelopeEditor();
 
   const { currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
 
@@ -86,7 +89,32 @@ export const EnvelopeEditorFieldsPage = () => {
 
   const [isAiFieldDialogOpen, setIsAiFieldDialogOpen] = useState(false);
   const [isAiEnableDialogOpen, setIsAiEnableDialogOpen] = useState(false);
+  const [acroFormHasFieldsByItemRevision, setAcroFormHasFieldsByItemRevision] = useState<Record<string, boolean>>({});
+
   const { revalidate } = useRevalidator();
+  const { toast } = useToast();
+
+  const { mutateAsync: importFieldsFromPdf, isPending: isImportingFieldsFromPdf } =
+    trpc.envelope.field.importFromPdf.useMutation();
+
+  const currentEnvelopeItemRevision = currentEnvelopeItem
+    ? `${currentEnvelopeItem.id}:${currentEnvelopeItem.documentDataId}`
+    : null;
+  const currentItemHasAcroForm =
+    currentEnvelopeItemRevision !== null && acroFormHasFieldsByItemRevision[currentEnvelopeItemRevision] === true;
+
+  const onAcroFormDetected = useCallback(
+    (hasFields: boolean) => {
+      if (!currentEnvelopeItemRevision) {
+        return;
+      }
+
+      setAcroFormHasFieldsByItemRevision((prev) =>
+        prev[currentEnvelopeItemRevision] === hasFields ? prev : { ...prev, [currentEnvelopeItemRevision]: hasFields },
+      );
+    },
+    [currentEnvelopeItemRevision],
+  );
 
   const envelopeItemPermissions = useMemo(
     () => getEnvelopeItemPermissions(envelope, envelope.recipients),
@@ -201,6 +229,40 @@ export const EnvelopeEditorFieldsPage = () => {
     });
   };
 
+  const onImportFromPdfClick = async () => {
+    try {
+      await flushAutosave();
+      const result = await importFieldsFromPdf({ envelopeId: envelope.id });
+
+      if (result.fieldsCreated === 0) {
+        toast({
+          title: _(msg`No form fields found`),
+          description: _(msg`This PDF does not contain any importable form fields.`),
+          duration: 5000,
+        });
+
+        return;
+      }
+
+      await syncEnvelope();
+
+      toast({
+        title: _(msg`Fields imported`),
+        description: _(
+          msg`Imported ${result.fieldsCreated} field${result.fieldsCreated === 1 ? '' : 's'} from the PDF form. Review and reassign in the editor.`,
+        ),
+        duration: 5000,
+      });
+    } catch {
+      toast({
+        title: _(msg`Could not import fields`),
+        description: _(msg`Something went wrong while importing fields from the PDF.`),
+        variant: 'destructive',
+        duration: 5000,
+      });
+    }
+  };
+
   return (
     <div className="relative flex h-full">
       <div className="flex h-full w-full flex-col overflow-y-auto px-2" ref={scrollableContainerRef}>
@@ -288,6 +350,7 @@ export const EnvelopeEditorFieldsPage = () => {
               customPageRenderer={EnvelopeEditorFieldsPageRenderer}
               scrollParentRef={scrollableContainerRef}
               errorMessage={PDF_VIEWER_ERROR_MESSAGES.editor}
+              onAcroFormDetected={onAcroFormDetected}
             />
           ) : (
             <div className="flex flex-col items-center justify-center py-32">
@@ -380,6 +443,20 @@ export const EnvelopeEditorFieldsPage = () => {
                 />
               </>
             )}
+
+            {currentItemHasAcroForm && envelope.status === DocumentStatus.DRAFT && (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="mt-4 w-full"
+                onClick={() => void onImportFromPdfClick()}
+                disabled={isImportingFieldsFromPdf}
+              >
+                <FormInputIcon className="mr-2 -ml-1 h-4 w-4" />
+                {isImportingFieldsFromPdf ? <Trans>Importing...</Trans> : <Trans>Import from PDF form</Trans>}
+              </Button>
+            )}
           </section>
 
           {/* Field details section. */}

apps/remix/app/components/general/organisation-usage-panel.tsx

@@ -1,38 +1,13 @@
 import { currentMonthlyPeriod } from '@documenso/lib/universal/monthly-period';
-import {
-  getQuotaUsagePercent,
-  isQuotaExceeded,
-  isQuotaNearing,
-  normalizeCapacityLimit,
-} from '@documenso/lib/universal/quota-usage';
-import { cn } from '@documenso/ui/lib/utils';
-import type { BadgeProps } from '@documenso/ui/primitives/badge';
-import { Badge } from '@documenso/ui/primitives/badge';
 import { Progress } from '@documenso/ui/primitives/progress';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
 
 import { Trans } from '@lingui/react/macro';
 import type { OrganisationClaim, OrganisationMonthlyStat } from '@prisma/client';
-import type { LucideIcon } from 'lucide-react';
-import { FileIcon, MailIcon, MailOpenIcon, PlugIcon, UsersIcon, UsersRoundIcon } from 'lucide-react';
-import type { ReactNode } from 'react';
-import { useId, useState } from 'react';
-
+import { useState } from 'react';
+import { match } from 'ts-pattern';
 import { OrganisationUsageResetButton } from './organisation-usage-reset-button';
 
-type CapacityUsage = {
-  members: number;
-  teams: number;
-};
-
-type UsageRow = {
-  counter: 'document' | 'email' | 'api';
-  label: ReactNode;
-  icon: LucideIcon;
-  used: number;
-  effectiveLimit: number | null;
-};
-
 type OrganisationUsagePanelProps = {
   organisationId: string;
   monthlyStats: Pick<
@@ -40,151 +15,13 @@ type OrganisationUsagePanelProps = {
     'period' | 'documentCount' | 'emailCount' | 'apiCount' | 'emailReports'
   >[];
   organisationClaim: OrganisationClaim;
-  capacityUsage?: CapacityUsage;
-};
-
-type UsageCardState = {
-  status: {
-    label: ReactNode;
-    variant: NonNullable<BadgeProps['variant']>;
-  };
-  percent: number;
-  hasFiniteLimit: boolean;
-  progressClassName: string;
-  subtext: ReactNode;
-};
-
-type UsageCardStateOptions = {
-  used: number;
-  limit: number | null | undefined;
-  footnote?: ReactNode;
-};
-
-const getUsageCardState = ({ used, limit, footnote }: UsageCardStateOptions): UsageCardState => {
-  const percent = getQuotaUsagePercent(used, limit ?? null);
-  const hasFiniteLimit = Boolean(limit && limit > 0);
-
-  if (limit === null || limit === undefined) {
-    return {
-      status: { label: <Trans>Unlimited</Trans>, variant: 'neutral' },
-      percent,
-      hasFiniteLimit,
-      progressClassName: '',
-      subtext: footnote ?? null,
-    };
-  }
-
-  if (limit === 0) {
-    return {
-      status: { label: <Trans>Blocked</Trans>, variant: 'destructive' },
-      percent,
-      hasFiniteLimit,
-      progressClassName: '',
-      subtext: footnote ?? <Trans>Resource blocked</Trans>,
-    };
-  }
-
-  if (used > limit) {
-    return {
-      status: { label: <Trans>Exceeded</Trans>, variant: 'destructive' },
-      percent,
-      hasFiniteLimit,
-      progressClassName: '[&>div]:bg-destructive',
-      subtext: footnote ?? null,
-    };
-  }
-
-  if (isQuotaExceeded(limit, used)) {
-    return {
-      status: { label: <Trans>Limit reached</Trans>, variant: 'orange' },
-      percent,
-      hasFiniteLimit,
-      progressClassName: '[&>div]:bg-orange-500 dark:[&>div]:bg-orange-400',
-      subtext: footnote ?? null,
-    };
-  }
-
-  if (isQuotaNearing(limit, used)) {
-    return {
-      status: { label: <Trans>Near limit</Trans>, variant: 'warning' },
-      percent,
-      hasFiniteLimit,
-      progressClassName: '[&>div]:bg-yellow-500 dark:[&>div]:bg-yellow-400',
-      subtext: footnote ?? null,
-    };
-  }
-
-  return {
-    status: { label: <Trans>Within limit</Trans>, variant: 'default' },
-    percent,
-    hasFiniteLimit,
-    progressClassName: '',
-    subtext: footnote ?? null,
-  };
-};
-
-type UsageStatCardProps = {
-  label: ReactNode;
-  icon: LucideIcon;
-  used: number;
-  limit: number | null | undefined;
-  /** When true the card is a plain counter with no limit, status or progress. */
-  countOnly?: boolean;
-  footnote?: ReactNode;
-  action?: ReactNode;
-};
-
-const UsageStatCard = ({ label, icon: Icon, used, limit, countOnly = false, footnote, action }: UsageStatCardProps) => {
-  const { status, percent, hasFiniteLimit, progressClassName, subtext } = getUsageCardState({ used, limit, footnote });
-
-  return (
-    <div className="flex flex-col rounded-lg border bg-background p-5">
-      <div className="flex items-center justify-between gap-3">
-        <div className="flex items-center gap-2 font-medium text-foreground text-sm">
-          <Icon className="h-4 w-4 text-muted-foreground" />
-          <span>{label}</span>
-        </div>
-
-        {!countOnly && (
-          <Badge variant={status.variant} size="small">
-            {status.label}
-          </Badge>
-        )}
-      </div>
-
-      <div className="mt-4 flex flex-1 flex-col">
-        <div className="flex items-baseline justify-between gap-2">
-          <div className="flex items-baseline gap-1.5">
-            <span className="font-semibold text-3xl text-foreground tabular-nums tracking-tight">
-              {used.toLocaleString()}
-            </span>
-            {hasFiniteLimit ? (
-              <span className="text-base text-muted-foreground tabular-nums">/ {limit?.toLocaleString()}</span>
-            ) : null}
-          </div>
-
-          {hasFiniteLimit ? (
-            <span className="font-medium text-muted-foreground text-sm tabular-nums">{percent}%</span>
-          ) : null}
-        </div>
-
-        {hasFiniteLimit ? <Progress className={cn('mt-3 h-2', progressClassName)} value={percent} /> : null}
-
-        {subtext ? <p className="mt-2 text-muted-foreground text-xs">{subtext}</p> : null}
-      </div>
-
-      {action ? <div className="mt-4 flex justify-end border-t pt-4">{action}</div> : null}
-    </div>
-  );
 };
 
 export const OrganisationUsagePanel = ({
   organisationId,
   monthlyStats,
   organisationClaim,
-  capacityUsage,
 }: OrganisationUsagePanelProps) => {
-  const monthlyUsagePeriodId = useId();
   const [selectedPeriod, setSelectedPeriod] = useState<string | undefined>(() => monthlyStats[0]?.period);
 
   const selectedStat = monthlyStats.find((stat) => stat.period === selectedPeriod) ?? monthlyStats[0];
@@ -193,105 +30,86 @@ export const OrganisationUsagePanel = ({
   // current period), so only offer the reset action when viewing the current month.
   const isCurrentPeriod = selectedStat?.period === currentMonthlyPeriod();
 
-  const capacityRows = capacityUsage
-    ? [
-        {
-          key: 'members',
-          label: <Trans>Members</Trans>,
-          icon: UsersIcon,
-          used: capacityUsage.members,
-          limit: normalizeCapacityLimit(organisationClaim.memberCount),
-        },
-        {
-          key: 'teams',
-          label: <Trans>Teams</Trans>,
-          icon: UsersRoundIcon,
-          used: capacityUsage.teams,
-          limit: normalizeCapacityLimit(organisationClaim.teamCount),
-        },
-      ]
-    : [];
-
-  const monthlyRows: UsageRow[] = [
+  const rows = [
     {
-      counter: 'document',
+      counter: 'document' as const,
       label: <Trans>Documents</Trans>,
-      icon: FileIcon,
       used: selectedStat?.documentCount ?? 0,
       effectiveLimit: organisationClaim.documentQuota,
     },
     {
-      counter: 'email',
+      counter: 'email' as const,
       label: <Trans>Emails</Trans>,
-      icon: MailIcon,
       used: selectedStat?.emailCount ?? 0,
       effectiveLimit: organisationClaim.emailQuota,
     },
     {
-      counter: 'api',
+      counter: 'api' as const,
       label: <Trans>API requests</Trans>,
-      icon: PlugIcon,
       used: selectedStat?.apiCount ?? 0,
       effectiveLimit: organisationClaim.apiQuota,
     },
   ];
 
   return (
-    <div className="mt-4 space-y-6">
-      {capacityRows.length > 0 ? (
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
-          {capacityRows.map((row) => (
-            <UsageStatCard key={row.key} label={row.label} icon={row.icon} used={row.used} limit={row.limit} />
-          ))}
-        </div>
-      ) : null}
+    <div className="space-y-4 rounded-md border p-4">
+      <div className="flex items-center justify-between gap-2">
+        <h3 className="font-medium text-sm">
+          <Trans>Usage for period: {selectedStat?.period || 'N/A'}</Trans>
+        </h3>
 
-      <div className="space-y-3">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <h3 id={monthlyUsagePeriodId} className="font-semibold text-base">
-            <Trans>Monthly usage</Trans>
-          </h3>
+        {monthlyStats.length > 0 && (
+          <Select value={selectedStat?.period} onValueChange={setSelectedPeriod}>
+            <SelectTrigger className="w-40">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {monthlyStats.map((stat) => (
+                <SelectItem key={stat.period} value={stat.period}>
+                  {stat.period}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </div>
 
-          {monthlyStats.length > 0 ? (
-            <Select value={selectedStat?.period} onValueChange={setSelectedPeriod}>
-              <SelectTrigger className="h-9 w-full sm:w-44" aria-labelledby={monthlyUsagePeriodId}>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {monthlyStats.map((stat) => (
-                  <SelectItem key={stat.period} value={stat.period}>
-                    {stat.period}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          ) : null}
-        </div>
+      {rows.map((row) => {
+        const percent =
+          row.effectiveLimit && row.effectiveLimit > 0
+            ? Math.min(100, Math.round((row.used / row.effectiveLimit) * 100))
+            : 0;
 
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
-          {monthlyRows.map((row) => (
-            <UsageStatCard
-              key={row.counter}
-              label={row.label}
-              icon={row.icon}
-              used={row.used}
-              limit={row.effectiveLimit}
-              action={
-                selectedStat && isCurrentPeriod ? (
-                  <OrganisationUsageResetButton organisationId={organisationId} counter={row.counter} />
-                ) : undefined
-              }
-            />
-          ))}
+        return (
+          <div key={row.counter} className="space-y-1">
+            <div className="flex items-center justify-between text-sm">
+              <span>{row.label}</span>
+              <span className="text-muted-foreground">
+                {row.used} /{' '}
+                {match(row.effectiveLimit)
+                  .with(null, () => <Trans>Unlimited</Trans>)
+                  .with(0, () => <Trans>Blocked</Trans>)
+                  .otherwise(String)}
+              </span>
+            </div>
 
-          <UsageStatCard
-            label={<Trans>Reports</Trans>}
-            icon={MailOpenIcon}
-            used={selectedStat?.emailReports ?? 0}
-            limit={null}
-            countOnly
-            footnote={<Trans>Sent this period</Trans>}
-          />
+            {row.effectiveLimit && row.effectiveLimit > 0 ? <Progress className="h-2 w-full" value={percent} /> : null}
+
+            {selectedStat && isCurrentPeriod && (
+              <div className="flex w-full justify-end pt-1">
+                <OrganisationUsageResetButton organisationId={organisationId} counter={row.counter} />
+              </div>
+            )}
+          </div>
+        );
+      })}
+
+      <div className="space-y-1">
+        <div className="flex items-center justify-between text-sm">
+          <span>
+            <Trans>Reports</Trans>
+          </span>
+          <span className="text-muted-foreground">{selectedStat?.emailReports ?? 0}</span>
         </div>
       </div>
     </div>

apps/remix/app/components/general/organisation-usage-reset-button.tsx

@@ -2,7 +2,6 @@ import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { RotateCcwIcon } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 type OrganisationUsageResetButtonProps = {
@@ -33,7 +32,6 @@ export const OrganisationUsageResetButton = ({ organisationId, counter }: Organi
       loading={isPending}
       onClick={() => reset({ organisationId, counter })}
     >
-      <RotateCcwIcon className="mr-2 h-3.5 w-3.5" />
       <Trans>Reset</Trans>
     </Button>
   );

apps/remix/app/components/general/pdf-viewer/envelope-pdf-viewer.tsx

@@ -46,7 +46,7 @@ export const EnvelopePdfViewer = ({ errorMessage, className, ...props }: Envelop
 
   return (
     <PDFViewerLazy
-      key={`${currentEnvelopeItem.envelopeId}-${currentEnvelopeItem.id}`}
+      key={`${currentEnvelopeItem.envelopeId}-${currentEnvelopeItem.id}-${currentEnvelopeItem.documentDataId}`}
       {...props}
       className={cn('h-full w-full max-w-[800px]', className)}
       data={currentEnvelopeItem.data}

apps/remix/app/components/general/pdf-viewer/pdf-viewer.tsx

@@ -50,6 +50,7 @@ export type PDFViewerProps = {
   scrollParentRef: ScrollTarget;
 
   onDocumentLoad?: () => void;
+  onAcroFormDetected?: (hasFields: boolean) => void;
 
   /**
    * Additional component to render next to the image, such as a Konva canvas
@@ -63,6 +64,7 @@ export default function PDFViewer({
   data,
   scrollParentRef,
   onDocumentLoad,
+  onAcroFormDetected,
   customPageRenderer,
   ...props
 }: PDFViewerProps) {
@@ -124,6 +126,20 @@ export default function PDFViewer({
         // eslint-disable-next-line require-atomic-updates
         pdfRef.current = loadedPdf;
 
+        if (onAcroFormDetected) {
+          try {
+            const fieldObjects = await loadedPdf.getFieldObjects();
+
+            if (!isCancelled) {
+              onAcroFormDetected(fieldObjects !== null && Object.keys(fieldObjects).length > 0);
+            }
+          } catch {
+            if (!isCancelled) {
+              onAcroFormDetected(false);
+            }
+          }
+        }
+
         // Fetch the pages
         const pages = await pMap(Array.from({ length: loadedPdf.numPages }), async (_, pageIndex) => {
           const page = await loadedPdf.getPage(pageIndex + 1);
@@ -168,7 +184,7 @@ export default function PDFViewer({
         pdfRef.current = null;
       }
     };
-  }, [data]);
+  }, [data, onAcroFormDetected]);
 
   // Notify when document is loaded
   useEffect(() => {

apps/remix/app/components/general/rate-limit-array-input.tsx

@@ -1,9 +1,7 @@
-import { RATE_LIMIT_WINDOW_REGEX } from '@documenso/lib/types/subscription';
 import { Button } from '@documenso/ui/primitives/button';
 import { Input } from '@documenso/ui/primitives/input';
-import { Trans, useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
 import { PlusIcon, Trash2Icon } from 'lucide-react';
-import { useState } from 'react';
 
 type RateLimitEntryValue = { window: string; max: number };
 
@@ -13,153 +11,50 @@ type RateLimitArrayInputProps = {
   disabled?: boolean;
 };
 
-const EMPTY_ENTRY: RateLimitEntryValue = { window: '', max: 0 };
-
-/** A row counts as "started" once either field has input; fully-empty rows are dropped on commit. */
-const hasEntryInput = (entry: RateLimitEntryValue) => entry.window.trim() !== '' || entry.max > 0;
-
-/** Keep in-progress rows; drop rows that are completely empty. */
-const persistEntries = (entries: RateLimitEntryValue[]) => {
-  return entries.map((entry) => ({ ...entry, window: entry.window.trim() })).filter(hasEntryInput);
-};
-
 export const RateLimitArrayInput = ({ value, onChange, disabled }: RateLimitArrayInputProps) => {
-  const { t } = useLingui();
-  const [draftEntry, setDraftEntry] = useState<RateLimitEntryValue | null>(null);
-
-  const entries = draftEntry ? [...value, draftEntry] : value.length ? value : [EMPTY_ENTRY];
-
-  const getWindowError = (entry: RateLimitEntryValue, index: number) => {
-    const window = entry.window.trim();
-
-    if (!hasEntryInput(entry)) {
-      return null;
-    }
-
-    if (window === '') {
-      return t`Enter a window, e.g. 5m`;
-    }
-
-    if (!RATE_LIMIT_WINDOW_REGEX.test(window)) {
-      return t`Use a duration with a unit, e.g. 5m, 1h, or 24h`;
-    }
-
-    const isDuplicateWindow = entries.some((otherEntry, otherIndex) => {
-      return otherIndex !== index && otherEntry.window.trim() === window;
-    });
-
-    return isDuplicateWindow ? t`Use a unique window for each rate limit` : null;
-  };
-
-  const getMaxError = (entry: RateLimitEntryValue) => {
-    if (!hasEntryInput(entry)) {
-      return null;
-    }
-
-    return entry.max > 0 ? null : t`Enter a max request count greater than 0`;
-  };
+  const entries = value ?? [];
 
   const updateEntry = (index: number, patch: Partial<RateLimitEntryValue>) => {
-    if (index >= value.length) {
-      const nextDraftEntry = { ...(draftEntry ?? EMPTY_ENTRY), ...patch };
-
-      if (hasEntryInput(nextDraftEntry)) {
-        onChange(persistEntries([...value, nextDraftEntry]));
-        setDraftEntry(null);
-        return;
-      }
-
-      setDraftEntry(nextDraftEntry);
-      return;
-    }
-
-    const next = value.map((entry, i) => (i === index ? { ...entry, ...patch } : entry));
-    onChange(persistEntries(next));
+    const next = entries.map((entry, i) => (i === index ? { ...entry, ...patch } : entry));
+    onChange(next);
   };
 
   const removeEntry = (index: number) => {
-    if (index >= value.length) {
-      setDraftEntry(null);
-      return;
-    }
-
-    const next = value.filter((_, i) => i !== index);
-    onChange(persistEntries(next));
+    onChange(entries.filter((_, i) => i !== index));
   };
 
   const addEntry = () => {
-    setDraftEntry(EMPTY_ENTRY);
+    onChange([...entries, { window: '5m', max: 100 }]);
   };
 
-  const hasErrors = entries.some((entry, index) => getWindowError(entry, index) || getMaxError(entry));
-  const isAddDisabled = disabled || value.length === 0 || Boolean(draftEntry) || hasErrors;
-
   return (
     <div className="space-y-2">
-      <div className="flex items-center gap-2 text-muted-foreground text-xs">
-        <span className="w-20 shrink-0">
-          <Trans>Window</Trans>
-        </span>
-        <span className="flex-1">
-          <Trans>Max requests</Trans>
-        </span>
-        <span className="w-9 shrink-0" aria-hidden="true" />
-      </div>
+      {entries.map((entry, index) => (
+        <div key={index} className="flex items-center gap-2">
+          <Input
+            className="w-24"
+            placeholder="5m"
+            value={entry.window}
+            disabled={disabled}
+            onChange={(e) => updateEntry(index, { window: e.target.value })}
+          />
+          <Input
+            className="w-32"
+            type="number"
+            min={1}
+            value={entry.max}
+            disabled={disabled}
+            onChange={(e) => updateEntry(index, { max: parseInt(e.target.value, 10) || 0 })}
+          />
+          <Button type="button" variant="ghost" size="sm" disabled={disabled} onClick={() => removeEntry(index)}>
+            <Trash2Icon className="h-4 w-4" />
+          </Button>
+        </div>
+      ))}
 
-      {entries.map((entry, index) => {
-        const windowError = getWindowError(entry, index);
-        const maxError = getMaxError(entry);
-
-        return (
-          <div key={index} className="space-y-1">
-            <div className="flex items-center gap-2">
-              <Input
-                className="w-20 shrink-0"
-                placeholder="5m"
-                value={entry.window}
-                disabled={disabled}
-                aria-invalid={Boolean(windowError)}
-                onChange={(e) => updateEntry(index, { window: e.target.value })}
-              />
-              <Input
-                className="flex-1"
-                type="number"
-                min={1}
-                placeholder="100"
-                value={entry.max || ''}
-                disabled={disabled}
-                aria-invalid={Boolean(maxError)}
-                onChange={(e) => updateEntry(index, { max: parseInt(e.target.value, 10) || 0 })}
-              />
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="h-9 w-9 shrink-0 p-0 text-muted-foreground hover:text-foreground"
-                disabled={disabled}
-                aria-label={t`Remove rate limit`}
-                onClick={() => removeEntry(index)}
-              >
-                <Trash2Icon className="h-4 w-4" />
-              </Button>
-            </div>
-
-            {windowError ? <p className="text-destructive text-xs">{windowError}</p> : null}
-            {maxError ? <p className="text-destructive text-xs">{maxError}</p> : null}
-          </div>
-        );
-      })}
-
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        className="w-full border-dashed"
-        disabled={isAddDisabled}
-        onClick={addEntry}
-      >
+      <Button type="button" variant="secondary" size="sm" disabled={disabled} onClick={addEntry}>
         <PlusIcon className="mr-2 h-4 w-4" />
-        <Trans>Add rate limit window</Trans>
+        <Trans>Add rate limit</Trans>
       </Button>
     </div>
   );

apps/remix/app/components/general/settings-nav-desktop.tsx

@@ -0,0 +1,137 @@
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { canExecuteOrganisationAction, isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Trans } from '@lingui/react/macro';
+import { BracesIcon, CreditCardIcon, Globe2Icon, Lock, Settings2Icon, User, Users, WebhookIcon } from 'lucide-react';
+import type { HTMLAttributes } from 'react';
+import { Link, useLocation } from 'react-router';
+
+export type SettingsDesktopNavProps = HTMLAttributes<HTMLDivElement>;
+
+export const SettingsDesktopNav = ({ className, ...props }: SettingsDesktopNavProps) => {
+  const { pathname } = useLocation();
+
+  const { organisations } = useSession();
+
+  const isPersonalLayoutMode = isPersonalLayout(organisations);
+
+  const hasManageableBillingOrgs = organisations.some((org) =>
+    canExecuteOrganisationAction('MANAGE_BILLING', org.currentOrganisationRole),
+  );
+
+  return (
+    <div className={cn('flex flex-col gap-y-2', className)} {...props}>
+      <Link to="/settings/profile">
+        <Button
+          variant="ghost"
+          className={cn('w-full justify-start', pathname?.startsWith('/settings/profile') && 'bg-secondary')}
+        >
+          <User className="mr-2 h-5 w-5" />
+          <Trans>Profile</Trans>
+        </Button>
+      </Link>
+
+      {isPersonalLayoutMode && (
+        <>
+          <Link to="/settings/document">
+            <Button variant="ghost" className={cn('w-full justify-start')}>
+              <Settings2Icon className="mr-2 h-5 w-5" />
+              <Trans>Preferences</Trans>
+            </Button>
+          </Link>
+
+          <Link className="w-full pl-8" to="/settings/document">
+            <Button
+              variant="ghost"
+              className={cn('w-full justify-start', pathname?.startsWith('/settings/document') && 'bg-secondary')}
+            >
+              <Trans>Document</Trans>
+            </Button>
+          </Link>
+
+          <Link className="w-full pl-8" to="/settings/branding">
+            <Button
+              variant="ghost"
+              className={cn('w-full justify-start', pathname?.startsWith('/settings/branding') && 'bg-secondary')}
+            >
+              <Trans>Branding</Trans>
+            </Button>
+          </Link>
+
+          <Link className="w-full pl-8" to="/settings/email">
+            <Button
+              variant="ghost"
+              className={cn('w-full justify-start', pathname?.startsWith('/settings/email') && 'bg-secondary')}
+            >
+              <Trans>Email</Trans>
+            </Button>
+          </Link>
+
+          <Link to="/settings/public-profile">
+            <Button
+              variant="ghost"
+              className={cn('w-full justify-start', pathname?.startsWith('/settings/public-profile') && 'bg-secondary')}
+            >
+              <Globe2Icon className="mr-2 h-5 w-5" />
+              <Trans>Public Profile</Trans>
+            </Button>
+          </Link>
+
+          <Link to="/settings/tokens">
+            <Button
+              variant="ghost"
+              className={cn('w-full justify-start', pathname?.startsWith('/settings/tokens') && 'bg-secondary')}
+            >
+              <BracesIcon className="mr-2 h-5 w-5" />
+              <Trans>API Tokens</Trans>
+            </Button>
+          </Link>
+
+          <Link to="/settings/webhooks">
+            <Button
+              variant="ghost"
+              className={cn('w-full justify-start', pathname?.startsWith('/settings/webhooks') && 'bg-secondary')}
+            >
+              <WebhookIcon className="mr-2 h-5 w-5" />
+              <Trans>Webhooks</Trans>
+            </Button>
+          </Link>
+        </>
+      )}
+
+      <Link to="/settings/organisations">
+        <Button
+          variant="ghost"
+          className={cn('w-full justify-start', pathname?.startsWith('/settings/organisations') && 'bg-secondary')}
+        >
+          <Users className="mr-2 h-5 w-5" />
+          <Trans>Organisations</Trans>
+        </Button>
+      </Link>
+
+      {IS_BILLING_ENABLED() && hasManageableBillingOrgs && (
+        <Link to={isPersonalLayoutMode ? '/settings/billing-personal' : `/settings/billing`}>
+          <Button
+            variant="ghost"
+            className={cn('w-full justify-start', pathname?.startsWith('/settings/billing') && 'bg-secondary')}
+          >
+            <CreditCardIcon className="mr-2 h-5 w-5" />
+            <Trans>Billing</Trans>
+          </Button>
+        </Link>
+      )}
+
+      <Link to="/settings/security">
+        <Button
+          variant="ghost"
+          className={cn('w-full justify-start', pathname?.startsWith('/settings/security') && 'bg-secondary')}
+        >
+          <Lock className="mr-2 h-5 w-5" />
+          <Trans>Security</Trans>
+        </Button>
+      </Link>
+    </div>
+  );
+};

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

@@ -0,0 +1,144 @@
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { canExecuteOrganisationAction, isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Trans } from '@lingui/react/macro';
+import {
+  BracesIcon,
+  CreditCardIcon,
+  Globe2Icon,
+  Lock,
+  MailIcon,
+  PaletteIcon,
+  Settings2Icon,
+  User,
+  Users,
+  WebhookIcon,
+} from 'lucide-react';
+import type { HTMLAttributes } from 'react';
+import { Link, useLocation } from 'react-router';
+
+export type SettingsMobileNavProps = HTMLAttributes<HTMLDivElement>;
+
+export const SettingsMobileNav = ({ className, ...props }: SettingsMobileNavProps) => {
+  const { pathname } = useLocation();
+
+  const { organisations } = useSession();
+
+  const isPersonalLayoutMode = isPersonalLayout(organisations);
+
+  const hasManageableBillingOrgs = organisations.some((org) =>
+    canExecuteOrganisationAction('MANAGE_BILLING', org.currentOrganisationRole),
+  );
+
+  return (
+    <div className={cn('flex flex-wrap items-center justify-start gap-x-2 gap-y-4', className)} {...props}>
+      <Link to="/settings/profile">
+        <Button
+          variant="ghost"
+          className={cn('w-full justify-start', pathname?.startsWith('/settings/profile') && 'bg-secondary')}
+        >
+          <User className="mr-2 h-5 w-5" />
+          <Trans>Profile</Trans>
+        </Button>
+      </Link>
+
+      {isPersonalLayoutMode && (
+        <>
+          <Link to="/settings/document">
+            <Button
+              variant="ghost"
+              className={cn('w-full justify-start', pathname?.startsWith('/settings/document') && 'bg-secondary')}
+            >
+              <Settings2Icon className="mr-2 h-5 w-5" />
+              <Trans>Document Preferences</Trans>
+            </Button>
+          </Link>
+
+          <Link to="/settings/branding">
+            <Button
+              variant="ghost"
+              className={cn('w-full justify-start', pathname?.startsWith('/settings/branding') && 'bg-secondary')}
+            >
+              <PaletteIcon className="mr-2 h-5 w-5" />
+              <Trans>Branding Preferences</Trans>
+            </Button>
+          </Link>
+
+          <Link to="/settings/email">
+            <Button
+              variant="ghost"
+              className={cn('w-full justify-start', pathname?.startsWith('/settings/email') && 'bg-secondary')}
+            >
+              <MailIcon className="mr-2 h-5 w-5" />
+              <Trans>Email Preferences</Trans>
+            </Button>
+          </Link>
+
+          <Link to="/settings/public-profile">
+            <Button
+              variant="ghost"
+              className={cn('w-full justify-start', pathname?.startsWith('/settings/public-profile') && 'bg-secondary')}
+            >
+              <Globe2Icon className="mr-2 h-5 w-5" />
+              <Trans>Public Profile</Trans>
+            </Button>
+          </Link>
+
+          <Link to="/settings/tokens">
+            <Button
+              variant="ghost"
+              className={cn('w-full justify-start', pathname?.startsWith('/settings/tokens') && 'bg-secondary')}
+            >
+              <BracesIcon className="mr-2 h-5 w-5" />
+              <Trans>API Tokens</Trans>
+            </Button>
+          </Link>
+
+          <Link to="/settings/webhooks">
+            <Button
+              variant="ghost"
+              className={cn('w-full justify-start', pathname?.startsWith('/settings/webhooks') && 'bg-secondary')}
+            >
+              <WebhookIcon className="mr-2 h-5 w-5" />
+              <Trans>Webhooks</Trans>
+            </Button>
+          </Link>
+        </>
+      )}
+
+      <Link to="/settings/organisations">
+        <Button
+          variant="ghost"
+          className={cn('w-full justify-start', pathname?.startsWith('/settings/organisations') && 'bg-secondary')}
+        >
+          <Users className="mr-2 h-5 w-5" />
+          <Trans>Organisations</Trans>
+        </Button>
+      </Link>
+
+      {IS_BILLING_ENABLED() && hasManageableBillingOrgs && (
+        <Link to={isPersonalLayoutMode ? '/settings/billing-personal' : `/settings/billing`}>
+          <Button
+            variant="ghost"
+            className={cn('w-full justify-start', pathname?.startsWith('/settings/billing') && 'bg-secondary')}
+          >
+            <CreditCardIcon className="mr-2 h-5 w-5" />
+            <Trans>Billing</Trans>
+          </Button>
+        </Link>
+      )}
+
+      <Link to="/settings/security">
+        <Button
+          variant="ghost"
+          className={cn('w-full justify-start', pathname?.startsWith('/settings/security') && 'bg-secondary')}
+        >
+          <Lock className="mr-2 h-5 w-5" />
+          <Trans>Security</Trans>
+        </Button>
+      </Link>
+    </div>
+  );
+};

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

@@ -1,62 +0,0 @@
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import type { LucideIcon } from 'lucide-react';
-import { NavLink } from 'react-router';
-
-export type SettingsNavRoute = {
-  path: string;
-  label: string;
-  icon?: LucideIcon;
-  /**
-   * Renders the route as a non-interactive group label, only visible on desktop.
-   */
-  isSectionLabel?: boolean;
-  /**
-   * Indents the route under the preceding section label on desktop.
-   */
-  isSubNav?: boolean;
-  /**
-   * Only mark the route as active on an exact path match.
-   */
-  end?: boolean;
-};
-
-export type SettingsNavProps = {
-  routes: SettingsNavRoute[];
-  className?: string;
-};
-
-export const SettingsNav = ({ routes, className }: SettingsNavProps) => {
-  return (
-    <nav
-      className={cn(
-        'flex flex-wrap items-center justify-start gap-x-2 gap-y-4 md:w-full md:flex-col md:items-start md:gap-y-2',
-        className,
-      )}
-    >
-      {routes.map((route) =>
-        route.isSectionLabel ? (
-          <div
-            key={`${route.path}-${route.label}`}
-            className="flex h-10 w-full items-center px-4 font-medium text-sm max-md:hidden"
-          >
-            {route.icon && <route.icon className="mr-2 h-5 w-5" />}
-            {route.label}
-          </div>
-        ) : (
-          <NavLink
-            key={`${route.path}-${route.label}`}
-            to={route.path}
-            end={route.end}
-            className={cn('group justify-start md:w-full', route.isSubNav && 'md:pl-8')}
-          >
-            <Button variant="ghost" className="w-full justify-start group-aria-[current]:bg-secondary">
-              {route.icon && <route.icon className="mr-2 h-5 w-5" />}
-              {route.label}
-            </Button>
-          </NavLink>
-        ),
-      )}
-    </nav>
-  );
-};

apps/remix/app/components/tables/organisation-email-domains-table.tsx

@@ -102,9 +102,7 @@ export const OrganisationEmailDomainsDataTable = () => {
         cell: ({ row }) => (
           <div className="flex justify-end space-x-2">
             <Button asChild variant="outline">
-              <Link to={`/o/${organisation.url}/settings/email-domains/${row.original.id}`}>
-                <Trans>Manage</Trans>
-              </Link>
+              <Link to={`/o/${organisation.url}/settings/email-domains/${row.original.id}`}>Manage</Link>
             </Button>
 
             <OrganisationEmailDomainDeleteDialog

apps/remix/app/components/tables/settings-security-passkey-table-actions.tsx

@@ -1,4 +1,3 @@
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -30,7 +29,7 @@ export type SettingsSecurityPasskeyTableActionsProps = {
 };
 
 const ZUpdatePasskeySchema = z.object({
-  name: ZNameSchema,
+  name: z.string(),
 });
 
 type TUpdatePasskeySchema = z.infer<typeof ZUpdatePasskeySchema>;

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

@@ -8,7 +8,6 @@ import { getHighestOrganisationRoleInGroup } from '@documenso/lib/utils/organisa
 import { trpc } from '@documenso/trpc/react';
 import type { TGetAdminOrganisationResponse } from '@documenso/trpc/server/admin-router/get-admin-organisation.types';
 import { ZUpdateAdminOrganisationRequestSchema } from '@documenso/trpc/server/admin-router/update-admin-organisation.types';
-import { cn } from '@documenso/ui/lib/utils';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@documenso/ui/primitives/accordion';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Badge } from '@documenso/ui/primitives/badge';
@@ -31,7 +30,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { OrganisationMemberRole, SubscriptionStatus } from '@prisma/client';
+import { OrganisationMemberRole } from '@prisma/client';
 import { ExternalLinkIcon, InfoIcon, Loader } from 'lucide-react';
 import { useMemo } from 'react';
 import { useForm } from 'react-hook-form';
@@ -43,6 +42,7 @@ import { AdminOrganisationDeleteDialog } from '~/components/dialogs/admin-organi
 import { AdminOrganisationMemberDeleteDialog } from '~/components/dialogs/admin-organisation-member-delete-dialog';
 import { AdminOrganisationMemberUpdateDialog } from '~/components/dialogs/admin-organisation-member-update-dialog';
 import { AdminOrganisationSyncSubscriptionDialog } from '~/components/dialogs/admin-organisation-sync-subscription-dialog';
+import { DetailsCard, DetailsValue } from '~/components/general/admin-details';
 import { AdminGlobalSettingsSection } from '~/components/general/admin-global-settings-section';
 import { ClaimLimitFields } from '~/components/general/claim-limit-fields';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
@@ -268,32 +268,54 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
 
       <GenericOrganisationAdminForm organisation={organisation} />
 
-      <SettingsHeader
-        title={t`Organisation usage`}
-        subtitle={t`Current usage against organisation limits.`}
-        className="mt-6"
-        hideDivider
-      />
+      <div className="mt-6 rounded-lg border p-4">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <p className="font-medium text-sm">
+              <Trans>Organisation usage</Trans>
+            </p>
+            <p className="mt-1 text-muted-foreground text-sm">
+              <Trans>Current usage against organisation limits.</Trans>
+            </p>
+          </div>
+        </div>
 
-      <OrganisationUsagePanel
-        organisationId={organisation.id}
-        monthlyStats={organisation.monthlyStats}
-        organisationClaim={organisation.organisationClaim}
-        capacityUsage={{
-          members: organisation.members.length,
-          teams: organisation.teams.length,
-        }}
-      />
+        <div className="mt-4 grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
+          <DetailsCard label={<Trans>Members</Trans>}>
+            <DetailsValue>
+              {organisation.members.length} /{' '}
+              {organisation.organisationClaim.memberCount === 0
+                ? t`Unlimited`
+                : organisation.organisationClaim.memberCount}
+            </DetailsValue>
+          </DetailsCard>
+
+          <DetailsCard label={<Trans>Teams</Trans>}>
+            <DetailsValue>
+              {organisation.teams.length} /{' '}
+              {organisation.organisationClaim.teamCount === 0 ? t`Unlimited` : organisation.organisationClaim.teamCount}
+            </DetailsValue>
+          </DetailsCard>
+        </div>
+
+        <div className="mt-4">
+          <OrganisationUsagePanel
+            organisationId={organisation.id}
+            monthlyStats={organisation.monthlyStats}
+            organisationClaim={organisation.organisationClaim}
+          />
+        </div>
+      </div>
 
       <div className="mt-6 rounded-lg border p-4">
         <Accordion type="single" collapsible>
           <AccordionItem value="global-settings" className="border-b-0">
             <AccordionTrigger className="py-0">
               <div className="text-left">
-                <p className="font-semibold text-base">
+                <p className="font-medium text-sm">
                   <Trans>Global Settings</Trans>
                 </p>
-                <p className="mt-1 text-muted-foreground text-sm">
+                <p className="mt-1 font-normal text-muted-foreground text-sm">
                   <Trans>Default settings applied to this organisation.</Trans>
                 </p>
               </div>
@@ -313,15 +335,7 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
         className="mt-16"
       />
 
-      <Alert
-        className={cn(
-          'my-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center',
-          organisation.subscription?.status === SubscriptionStatus.ACTIVE &&
-            'border border-green-600/20 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10',
-          organisation.subscription?.status === SubscriptionStatus.INACTIVE && 'opacity-60',
-        )}
-        variant="neutral"
-      >
+      <Alert className="my-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
         <div className="mb-4 sm:mb-0">
           <AlertTitle>
             <Trans>Subscription</Trans>
@@ -329,12 +343,7 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
 
           <AlertDescription className="mr-2">
             {organisation.subscription ? (
-              <span className="flex items-center gap-2">
-                {organisation.subscription.status === SubscriptionStatus.ACTIVE && (
-                  <span className="h-2 w-2 shrink-0 rounded-full bg-green-600 dark:bg-green-400" aria-hidden="true" />
-                )}
-                <span>{i18n._(SUBSCRIPTION_STATUS_MAP[organisation.subscription.status])} subscription found</span>
-              </span>
+              <span>{i18n._(SUBSCRIPTION_STATUS_MAP[organisation.subscription.status])} subscription found</span>
             ) : (
               <span>
                 <Trans>No subscription found</Trans>
@@ -347,7 +356,6 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
           <div>
             <Button
               variant="outline"
-              className="bg-background"
               loading={isCreatingStripeCustomer}
               onClick={async () => createStripeCustomer({ organisationId })}
             >
@@ -358,7 +366,7 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
 
         {organisation.customerId && !organisation.subscription && (
           <div>
-            <Button variant="outline" className="bg-background" asChild>
+            <Button variant="outline" asChild>
               <Link
                 target="_blank"
                 to={`https://dashboard.stripe.com/customers/${organisation.customerId}?create=subscription&subscription_default_customer=${organisation.customerId}`}
@@ -375,13 +383,13 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
             <AdminOrganisationSyncSubscriptionDialog
               organisationId={organisationId}
               trigger={
-                <Button variant="outline" className="bg-background">
+                <Button variant="outline">
                   <Trans>Sync Stripe subscription</Trans>
                 </Button>
               }
             />
 
-            <Button variant="outline" className="bg-background" asChild>
+            <Button variant="outline" asChild>
               <Link
                 target="_blank"
                 to={`https://dashboard.stripe.com/subscriptions/${organisation.subscription.planId}`}
@@ -398,27 +406,21 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
 
       <div className="mt-16 space-y-10">
         <div>
-          <h3 className="font-semibold text-base">
+          <label className="font-medium text-sm leading-none">
             <Trans>Organisation Members</Trans>
-          </h3>
-          <p className="mt-1 text-muted-foreground text-sm">
-            <Trans>People with access to this organisation.</Trans>
-          </p>
+          </label>
 
-          <div className="mt-3">
+          <div className="my-2">
             <DataTable columns={organisationMembersColumns} data={organisation.members} />
           </div>
         </div>
 
         <div>
-          <h3 className="font-semibold text-base">
+          <label className="font-medium text-sm leading-none">
             <Trans>Organisation Teams</Trans>
-          </h3>
-          <p className="mt-1 text-muted-foreground text-sm">
-            <Trans>Teams that belong to this organisation.</Trans>
-          </p>
+          </label>
 
-          <div className="mt-3">
+          <div className="my-2">
             <DataTable columns={teamsColumns} data={organisation.teams} />
           </div>
         </div>
@@ -646,7 +648,7 @@ const OrganisationAdminForm = ({ organisation, licenseFlags }: OrganisationAdmin
               <FormLabel className="flex items-center">
                 <Trans>Inherited subscription claim</Trans>
                 <Tooltip>
-                  <TooltipTrigger type="button">
+                  <TooltipTrigger>
                     <InfoIcon className="mx-2 h-4 w-4" />
                   </TooltipTrigger>
 
@@ -679,15 +681,10 @@ const OrganisationAdminForm = ({ organisation, licenseFlags }: OrganisationAdmin
                   </TooltipContent>
                 </Tooltip>
               </FormLabel>
-              <div className="rounded-lg border bg-muted/40 px-3 py-2.5 text-sm">
-                {field.value ? (
-                  <span className="font-mono text-foreground">{field.value}</span>
-                ) : (
-                  <span className="text-muted-foreground">
-                    <Trans>No inherited claim</Trans>
-                  </span>
-                )}
-              </div>
+              <FormControl>
+                <Input disabled {...field} />
+              </FormControl>
+              <FormMessage />
             </FormItem>
           )}
         />
@@ -718,113 +715,108 @@ const OrganisationAdminForm = ({ organisation, licenseFlags }: OrganisationAdmin
           )}
         />
 
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          <FormField
-            control={form.control}
-            name="claims.teamCount"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans>Team Count</Trans>
-                </FormLabel>
-                <FormControl>
-                  <Input
-                    type="number"
-                    min={0}
-                    {...field}
-                    onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
-                  />
-                </FormControl>
-                <FormDescription>
-                  <Trans>Number of teams allowed. 0 = Unlimited</Trans>
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+        <FormField
+          control={form.control}
+          name="claims.teamCount"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <Trans>Team Count</Trans>
+              </FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  min={0}
+                  {...field}
+                  onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
+                />
+              </FormControl>
+              <FormDescription>
+                <Trans>Number of teams allowed. 0 = Unlimited</Trans>
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
 
-          <FormField
-            control={form.control}
-            name="claims.memberCount"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans>Member Count</Trans>
-                </FormLabel>
-                <FormControl>
-                  <Input
-                    type="number"
-                    min={0}
-                    {...field}
-                    onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
-                  />
-                </FormControl>
-                <FormDescription>
-                  <Trans>Number of members allowed. 0 = Unlimited</Trans>
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+        <FormField
+          control={form.control}
+          name="claims.memberCount"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <Trans>Member Count</Trans>
+              </FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  min={0}
+                  {...field}
+                  onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
+                />
+              </FormControl>
+              <FormDescription>
+                <Trans>Number of members allowed. 0 = Unlimited</Trans>
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
 
-          <FormField
-            control={form.control}
-            name="claims.envelopeItemCount"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans>Envelope Item Count</Trans>
-                </FormLabel>
-                <FormControl>
-                  <Input
-                    type="number"
-                    min={1}
-                    {...field}
-                    onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
-                  />
-                </FormControl>
-                <FormDescription>
-                  <Trans>Maximum number of uploaded files per envelope allowed</Trans>
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+        <FormField
+          control={form.control}
+          name="claims.envelopeItemCount"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <Trans>Envelope Item Count</Trans>
+              </FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  min={1}
+                  {...field}
+                  onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
+                />
+              </FormControl>
+              <FormDescription>
+                <Trans>Maximum number of uploaded files per envelope allowed</Trans>
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
 
-          <FormField
-            control={form.control}
-            name="claims.recipientCount"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans>Recipient Count</Trans>
-                </FormLabel>
-                <FormControl>
-                  <Input
-                    type="number"
-                    min={0}
-                    {...field}
-                    onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
-                  />
-                </FormControl>
-                <FormDescription>
-                  <Trans>Maximum number of recipients per document allowed. 0 = Unlimited</Trans>
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </div>
+        <FormField
+          control={form.control}
+          name="claims.recipientCount"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <Trans>Recipient Count</Trans>
+              </FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  min={0}
+                  {...field}
+                  onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
+                />
+              </FormControl>
+              <FormDescription>
+                <Trans>Maximum number of recipients per document allowed. 0 = Unlimited</Trans>
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
 
         <div>
-          <h3 className="font-semibold text-base">
+          <FormLabel>
             <Trans>Feature Flags</Trans>
-          </h3>
-          <p className="mt-1 text-muted-foreground text-sm">
-            <Trans>Capabilities enabled for this organisation.</Trans>
-          </p>
+          </FormLabel>
 
-          <div className="mt-3 space-y-2 rounded-md border p-4">
+          <div className="mt-2 space-y-2 rounded-md border p-4">
             {Object.values(SUBSCRIPTION_CLAIM_FEATURE_FLAGS).map(({ key, label, isEnterprise }) => {
               const isRestrictedFeature = isEnterprise && !licenseFlags?.[key as keyof TLicenseClaim]; // eslint-disable-line @typescript-eslint/consistent-type-assertions
 

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

@@ -287,11 +287,7 @@ export default function AdminTeamPage({ params }: Route.ComponentProps) {
               </AccordionTrigger>
               <AccordionContent>
                 <div className="mt-4">
-                  <AdminGlobalSettingsSection
-                    settings={team.teamGlobalSettings}
-                    inheritedSettings={team.organisation.organisationGlobalSettings}
-                    isTeam
-                  />
+                  <AdminGlobalSettingsSection settings={team.teamGlobalSettings} isTeam />
                 </div>
               </AccordionContent>
             </AccordionItem>

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

@@ -1,6 +1,7 @@
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -12,12 +13,11 @@ import {
   Settings2Icon,
   ShieldCheckIcon,
   Users2Icon,
-  UsersIcon,
 } from 'lucide-react';
-import { Link, Outlet } from 'react-router';
+import { FaUsers } from 'react-icons/fa6';
+import { Link, NavLink, Outlet } from 'react-router';
 
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
-import { SettingsNav, type SettingsNavRoute } from '~/components/general/settings-nav';
 import { appMetaTags } from '~/utils/meta';
 
 export function meta() {
@@ -30,7 +30,7 @@ export default function SettingsLayout() {
   const isBillingEnabled = IS_BILLING_ENABLED();
   const organisation = useCurrentOrganisation();
 
-  const organisationSettingRoutes: SettingsNavRoute[] = [
+  const organisationSettingRoutes = [
     {
       path: `/o/${organisation.url}/settings/general`,
       label: t`General`,
@@ -40,7 +40,7 @@ export default function SettingsLayout() {
       path: `/o/${organisation.url}/settings/document`,
       label: t`Preferences`,
       icon: Settings2Icon,
-      isSectionLabel: true,
+      hideHighlight: true,
     },
     {
       path: `/o/${organisation.url}/settings/document`,
@@ -65,7 +65,7 @@ export default function SettingsLayout() {
     {
       path: `/o/${organisation.url}/settings/teams`,
       label: t`Teams`,
-      icon: UsersIcon,
+      icon: FaUsers,
     },
     {
       path: `/o/${organisation.url}/settings/members`,
@@ -139,9 +139,32 @@ export default function SettingsLayout() {
       </h1>
 
       <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
-        <SettingsNav routes={organisationSettingRoutes} className="col-span-12 mb-8 md:col-span-3 md:mb-0" />
+        {/* Navigation */}
+        <div
+          className={cn(
+            'col-span-12 mb-8 flex flex-wrap items-center justify-start gap-x-2 gap-y-4 md:col-span-3 md:w-full md:flex-col md:items-start md:gap-y-2',
+          )}
+        >
+          {organisationSettingRoutes.map((route) => (
+            <NavLink
+              to={route.path}
+              className={cn('group w-full justify-start', route.isSubNav && 'pl-8')}
+              key={route.path}
+            >
+              <Button
+                variant="ghost"
+                className={cn('w-full justify-start', {
+                  'group-aria-[current]:bg-secondary': !route.hideHighlight,
+                })}
+              >
+                {route.icon && <route.icon className="mr-2 h-5 w-5" />}
+                <Trans>{route.label}</Trans>
+              </Button>
+            </NavLink>
+          ))}
+        </div>
 
-        <div className="col-span-12 max-w-3xl md:col-span-9">
+        <div className="col-span-12 md:col-span-9">
           <Outlet />
         </div>
       </div>

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

@@ -89,9 +89,9 @@ export default function TeamsSettingBillingPage() {
 
   return (
     <div>
-      <div className="flex flex-row items-center justify-between">
+      <div className="flex flex-row items-end justify-between">
         <div>
-          <h3 className="font-medium text-lg">
+          <h3 className="font-semibold text-2xl">
             <Trans>Billing</Trans>
           </h3>
 

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

@@ -1,6 +1,7 @@
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
 import { canExecuteOrganisationAction, isPersonalLayout } from '@documenso/lib/utils/organisations';
 import type { SanitizeBrandingCssWarning } from '@documenso/lib/utils/sanitize-branding-css';
 import { trpc } from '@documenso/trpc/react';
@@ -48,29 +49,26 @@ export default function OrganisationSettingsBrandingPage() {
 
   const { mutateAsync: updateOrganisationSettings } = trpc.organisation.settings.update.useMutation();
 
-  const { mutateAsync: updateOrganisationBrandingLogo } = trpc.organisation.settings.updateBrandingLogo.useMutation();
-
   const onBrandingPreferencesFormSubmit = async (data: TBrandingPreferencesFormSchema) => {
     try {
       const { brandingEnabled, brandingLogo, brandingUrl, brandingCompanyDetails, brandingColors, brandingCss } = data;
 
-      // Upload (or clear) the logo through the dedicated, server-validated route.
-      if (brandingLogo instanceof File || brandingLogo === null) {
-        const formData = new FormData();
+      let uploadedBrandingLogo: string | undefined;
 
-        formData.append('payload', JSON.stringify({ organisationId: organisation.id }));
+      if (brandingLogo) {
+        uploadedBrandingLogo = JSON.stringify(await putFile(brandingLogo));
+      }
 
-        if (brandingLogo instanceof File) {
-          formData.append('brandingLogo', brandingLogo);
-        }
-
-        await updateOrganisationBrandingLogo(formData);
+      // Empty the branding logo if the user unsets it.
+      if (brandingLogo === null) {
+        uploadedBrandingLogo = '';
       }
 
       const result = await updateOrganisationSettings({
         organisationId: organisation.id,
         data: {
           brandingEnabled: brandingEnabled ?? undefined,
+          brandingLogo: uploadedBrandingLogo,
           brandingUrl,
           brandingCompanyDetails,
           brandingColors,
@@ -123,13 +121,13 @@ export default function OrganisationSettingsBrandingPage() {
   const settingsHeaderText = t`Branding Preferences`;
 
   const settingsHeaderSubtitle = isPersonalLayoutMode
-    ? t`Set the default branding for documents you send.`
+    ? t`Here you can set your general branding preferences.`
     : team
-      ? t`Set the default branding for documents sent by your team.`
-      : t`Set the default branding for your organisation. Teams inherit these settings by default.`;
+      ? t`Here you can set branding preferences for your team.`
+      : t`Here you can set branding preferences for your organisation. Teams will inherit these settings by default.`;
 
   return (
-    <div>
+    <div className="max-w-2xl">
       <SettingsHeader title={settingsHeaderText} subtitle={settingsHeaderSubtitle} />
 
       {organisationWithSettings.organisationClaim.flags.allowCustomBranding || !IS_BILLING_ENABLED() ? (

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

@@ -120,11 +120,11 @@ export default function OrganisationSettingsDocumentPage() {
 
   const settingsHeaderText = t`Document Preferences`;
   const settingsHeaderSubtitle = isPersonalLayoutMode
-    ? t`Set your default document settings.`
-    : t`Set the default document settings for your organisation. Teams inherit these settings by default.`;
+    ? t`Here you can set your general document preferences.`
+    : t`Here you can set document preferences for your organisation. Teams will inherit these settings by default.`;
 
   return (
-    <div>
+    <div className="max-w-2xl">
       <SettingsHeader title={settingsHeaderText} subtitle={settingsHeaderSubtitle} />
 
       <section>

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.email-domains.$id.tsx

@@ -132,7 +132,7 @@ export default function OrganisationEmailDomainSettingsPage({ params }: Route.Co
 
   return (
     <div>
-      <SettingsHeader title={t`Email Domain Settings`} subtitle={t`Manage the email addresses for this domain.`}>
+      <SettingsHeader title={t`Email Domain Settings`} subtitle={t`Manage your email domain settings.`}>
         <OrganisationEmailCreateDialog emailDomain={emailDomain} />
       </SettingsHeader>
 

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.email-domains._index.tsx

@@ -33,7 +33,7 @@ export default function OrganisationSettingsEmailDomains() {
 
   return (
     <div>
-      <SettingsHeader title={t`Email Domains`} subtitle={t`Add and verify email domains for your organisation.`}>
+      <SettingsHeader title={t`Email Domains`} subtitle={t`Here you can add email domains to your organisation.`}>
         {isEmailDomainsEnabled && <OrganisationEmailDomainCreateDialog />}
       </SettingsHeader>
 

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

@@ -1,6 +1,4 @@
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -15,16 +13,12 @@ export function meta() {
   return appMetaTags(msg`Email Preferences`);
 }
 
-export default function OrganisationSettingsEmailPage() {
+export default function OrganisationSettingsGeneral() {
   const { t } = useLingui();
   const { toast } = useToast();
 
   const organisation = useCurrentOrganisation();
 
-  const { organisations } = useSession();
-
-  const isPersonalLayoutMode = isPersonalLayout(organisations);
-
   const { data: organisationWithSettings, isLoading: isLoadingOrganisation } = trpc.organisation.get.useQuery({
     organisationReference: organisation.url,
   });
@@ -65,15 +59,8 @@ export default function OrganisationSettingsEmailPage() {
   }
 
   return (
-    <div>
-      <SettingsHeader
-        title={t`Email Preferences`}
-        subtitle={
-          isPersonalLayoutMode
-            ? t`Manage your default email settings.`
-            : t`Manage the default email settings for your organisation. Teams inherit these settings by default.`
-        }
-      />
+    <div className="max-w-2xl">
+      <SettingsHeader title={t`Email Preferences`} subtitle={t`You can manage your email preferences here.`} />
 
       <section>
         <EmailPreferencesForm

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

@@ -21,8 +21,8 @@ export default function OrganisationSettingsGeneral() {
   const organisation = useCurrentOrganisation();
 
   return (
-    <div>
-      <SettingsHeader title={_(msg`General`)} subtitle={_(msg`Update your organisation's details.`)} />
+    <div className="max-w-2xl">
+      <SettingsHeader title={_(msg`General`)} subtitle={_(msg`Here you can edit your organisation details.`)} />
 
       <div className="space-y-8">
         <AvatarImageForm organisation={organisation} />

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

@@ -3,7 +3,6 @@ import { ORGANISATION_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/org
 import { EXTENDED_ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
 import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
 import { AppError } from '@documenso/lib/errors/app-error';
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { trpc } from '@documenso/trpc/react';
 import type { TFindOrganisationGroupsResponse } from '@documenso/trpc/server/organisation-router/find-organisation-groups.types';
 import { Button } from '@documenso/ui/primitives/button';
@@ -29,6 +28,7 @@ import { useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Link } from 'react-router';
 import { z } from 'zod';
+
 import { OrganisationGroupDeleteDialog } from '~/components/dialogs/organisation-group-delete-dialog';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 import {
@@ -36,6 +36,7 @@ import {
   OrganisationMembersMultiSelectCombobox,
 } from '~/components/general/organisation-members-multiselect-combobox';
 import { SettingsHeader } from '~/components/general/settings-header';
+
 import type { Route } from './+types/o.$orgUrl.settings.groups.$id';
 
 export default function OrganisationGroupSettingsPage({ params }: Route.ComponentProps) {
@@ -94,7 +95,7 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen
 
   return (
     <div>
-      <SettingsHeader title={t`Group Settings`} subtitle={t`Update the group's name, role and members.`}>
+      <SettingsHeader title={t`Organisation Group Settings`} subtitle={t`Manage your organisation group settings.`}>
         <OrganisationGroupDeleteDialog
           organisationGroupId={groupId}
           organisationGroupName={group.name || ''}
@@ -112,7 +113,7 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen
 }
 
 const ZUpdateOrganisationGroupFormSchema = z.object({
-  name: ZNameSchema,
+  name: z.string().min(1, msg`Name is required`.id),
   organisationRole: z.nativeEnum(OrganisationMemberRole),
   memberIds: z.array(z.string()),
 });

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

@@ -10,7 +10,7 @@ export default function TeamsSettingsMembersPage() {
   return (
     <div>
       <SettingsHeader
-        title={t`Organisation Groups`}
+        title={t`Custom Organisation Groups`}
         subtitle={t`Manage the custom groups of members for your organisation.`}
       >
         <OrganisationGroupCreateDialog />

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

@@ -46,10 +46,7 @@ export default function TeamsSettingsMembersPage() {
 
   return (
     <div>
-      <SettingsHeader
-        title={_(msg`Organisation Members`)}
-        subtitle={_(msg`Manage the members and invitations for your organisation.`)}
-      >
+      <SettingsHeader title={_(msg`Organisation Members`)} subtitle={_(msg`Manage the members or invite new members.`)}>
         <OrganisationMemberInviteDialog />
       </SettingsHeader>
 

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

@@ -73,7 +73,7 @@ export default function OrganisationSettingSSOLoginPage() {
   }
 
   return (
-    <div>
+    <div className="max-w-2xl">
       <SettingsHeader
         title={t`Organisation SSO Portal`}
         subtitle={t`Manage a custom SSO login portal for your organisation.`}

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

@@ -1,21 +1,9 @@
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
-import { canExecuteOrganisationAction, isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { msg } from '@lingui/core/macro';
-import { Trans, useLingui } from '@lingui/react/macro';
-import {
-  BracesIcon,
-  CreditCardIcon,
-  Globe2Icon,
-  LockIcon,
-  Settings2Icon,
-  UserIcon,
-  UsersIcon,
-  WebhookIcon,
-} from 'lucide-react';
+import { Trans } from '@lingui/react/macro';
 import { Outlet } from 'react-router';
 
-import { SettingsNav, type SettingsNavRoute } from '~/components/general/settings-nav';
+import { SettingsDesktopNav } from '~/components/general/settings-nav-desktop';
+import { SettingsMobileNav } from '~/components/general/settings-nav-mobile';
 import { appMetaTags } from '~/utils/meta';
 
 export function meta() {
@@ -23,83 +11,6 @@ export function meta() {
 }
 
 export default function SettingsLayout() {
-  const { t } = useLingui();
-
-  const { organisations } = useSession();
-
-  const isPersonalLayoutMode = isPersonalLayout(organisations);
-
-  const hasManageableBillingOrgs = organisations.some((org) =>
-    canExecuteOrganisationAction('MANAGE_BILLING', org.currentOrganisationRole),
-  );
-
-  const settingRoutes: SettingsNavRoute[] = [
-    {
-      path: '/settings/profile',
-      label: t`Profile`,
-      icon: UserIcon,
-    },
-    ...(isPersonalLayoutMode
-      ? [
-          {
-            path: '/settings/document',
-            label: t`Preferences`,
-            icon: Settings2Icon,
-            isSectionLabel: true,
-          },
-          {
-            path: '/settings/document',
-            label: t`Document`,
-            isSubNav: true,
-          },
-          {
-            path: '/settings/branding',
-            label: t`Branding`,
-            isSubNav: true,
-          },
-          {
-            path: '/settings/email',
-            label: t`Email`,
-            isSubNav: true,
-          },
-          {
-            path: '/settings/public-profile',
-            label: t`Public Profile`,
-            icon: Globe2Icon,
-          },
-          {
-            path: '/settings/tokens',
-            label: t`API Tokens`,
-            icon: BracesIcon,
-          },
-          {
-            path: '/settings/webhooks',
-            label: t`Webhooks`,
-            icon: WebhookIcon,
-          },
-        ]
-      : []),
-    {
-      path: '/settings/organisations',
-      label: t`Organisations`,
-      icon: UsersIcon,
-    },
-    ...(IS_BILLING_ENABLED() && hasManageableBillingOrgs
-      ? [
-          {
-            path: isPersonalLayoutMode ? '/settings/billing-personal' : '/settings/billing',
-            label: t`Billing`,
-            icon: CreditCardIcon,
-          },
-        ]
-      : []),
-    {
-      path: '/settings/security',
-      label: t`Security`,
-      icon: LockIcon,
-    },
-  ];
-
   return (
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
       <h1 className="font-semibold text-4xl">
@@ -107,9 +18,10 @@ export default function SettingsLayout() {
       </h1>
 
       <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
-        <SettingsNav routes={settingRoutes} className="col-span-12 mb-8 md:col-span-3 md:mb-0" />
+        <SettingsDesktopNav className="hidden md:col-span-3 md:flex" />
+        <SettingsMobileNav className="col-span-12 mb-8 md:hidden" />
 
-        <div className="col-span-12 max-w-3xl md:col-span-9">
+        <div className="col-span-12 md:col-span-9">
           <Outlet />
         </div>
       </div>

apps/remix/app/routes/_authenticated+/settings+/organisations.tsx

@@ -11,7 +11,10 @@ export default function TeamsSettingsPage() {
 
   return (
     <div>
-      <SettingsHeader title={_(msg`Organisations`)} subtitle={_(msg`Manage the organisations you belong to.`)}>
+      <SettingsHeader
+        title={_(msg`Organisations`)}
+        subtitle={_(msg`Manage all organisations you are currently associated with.`)}
+      >
         <OrganisationCreateDialog />
       </SettingsHeader>
 

apps/remix/app/routes/_authenticated+/settings+/profile.tsx

@@ -27,14 +27,14 @@ export default function SettingsProfile() {
 
   return (
     <div>
-      <SettingsHeader title={_(msg`Profile`)} subtitle={_(msg`Update your personal details.`)} />
+      <SettingsHeader title={_(msg`Profile`)} subtitle={_(msg`Here you can edit your personal details.`)} />
 
-      <AvatarImageForm className="mb-8" />
-      <ProfileForm className="mb-8" />
+      <AvatarImageForm className="mb-8 max-w-xl" />
+      <ProfileForm className="mb-8 max-w-xl" />
 
-      <hr className="my-4" />
+      <hr className="my-4 max-w-xl" />
 
-      <div className="space-y-8">
+      <div className="max-w-xl space-y-8">
         <AnimatePresence>
           {(!isPersonalLayoutMode || user.email !== teamEmail?.email) && teamEmail && (
             <AnimateGenericFadeInOut>

apps/remix/app/routes/_authenticated+/settings+/security._index.tsx

@@ -62,7 +62,10 @@ export default function SettingsSecurity({ loaderData }: Route.ComponentProps) {
 
   return (
     <div>
-      <SettingsHeader title={_(msg`Security`)} subtitle={_(msg`Manage your password and security settings.`)} />
+      <SettingsHeader
+        title={_(msg`Security`)}
+        subtitle={_(msg`Here you can manage your password and security settings.`)}
+      />
       {hasEmailPasswordAccount && (
         <>
           <PasswordForm user={user} />

apps/remix/app/routes/_authenticated+/settings+/security.activity.tsx

@@ -15,7 +15,7 @@ export default function SettingsSecurityActivity() {
   return (
     <div>
       <SettingsHeader
-        title={_(msg`Security Activity`)}
+        title={_(msg`Security activity`)}
         subtitle={_(msg`View all security activity related to your account.`)}
         hideDivider={true}
       />

apps/remix/app/routes/_authenticated+/settings+/security.sessions.tsx

@@ -94,7 +94,7 @@ export default function SettingsSecuritySessions() {
 
   return (
     <div>
-      <SettingsHeader title={t`Active Sessions`} subtitle={t`View and manage all active sessions for your account.`}>
+      <SettingsHeader title={t`Active sessions`} subtitle={t`View and manage all active sessions for your account.`}>
         <SessionLogoutAllDialog onSuccess={refetch} disabled={results.length === 1 || isLoading} />
       </SettingsHeader>
 

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

@@ -5,7 +5,7 @@ import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
-import { Trans, useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
 import { CheckCircle2, Clock } from 'lucide-react';
 import { match, P } from 'ts-pattern';
 
@@ -33,15 +33,13 @@ export async function loader({ request, params }: Route.LoaderArgs) {
 }
 
 export default function TeamsSettingsPage({ loaderData }: Route.ComponentProps) {
-  const { t } = useLingui();
-
   const { team } = loaderData;
 
   const currentTeam = useCurrentTeam();
 
   return (
-    <div>
-      <SettingsHeader title={t`General`} subtitle={t`Update your team's details.`} />
+    <div className="max-w-2xl">
+      <SettingsHeader title="General settings" subtitle="Here you can edit your team's details." />
 
       <AvatarImageForm team={currentTeam} className="mb-8" />
 

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

@@ -1,14 +1,14 @@
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { BracesIcon, Globe2Icon, GroupIcon, Settings2Icon, SettingsIcon, Users2Icon, WebhookIcon } from 'lucide-react';
-import { Link, Outlet, redirect } from 'react-router';
+import { Link, NavLink, Outlet, redirect } from 'react-router';
 
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
-import { SettingsNav, type SettingsNavRoute } from '~/components/general/settings-nav';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
 
@@ -40,18 +40,17 @@ export default function TeamsSettingsLayout() {
 
   const team = useCurrentTeam();
 
-  const teamSettingRoutes: SettingsNavRoute[] = [
+  const teamSettingRoutes = [
     {
       path: `/t/${team.url}/settings`,
       label: t`General`,
       icon: SettingsIcon,
-      end: true,
     },
     {
       path: `/t/${team.url}/settings/document`,
       label: t`Preferences`,
       icon: Settings2Icon,
-      isSectionLabel: true,
+      isSubNavParent: true,
     },
     {
       path: `/t/${team.url}/settings/document`,
@@ -125,9 +124,31 @@ export default function TeamsSettingsLayout() {
       </h1>
 
       <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
-        <SettingsNav routes={teamSettingRoutes} className="col-span-12 mb-8 md:col-span-3 md:mb-0" />
+        <div
+          className={cn(
+            'col-span-12 mb-8 flex flex-wrap items-center justify-start gap-x-2 gap-y-4 md:col-span-3 md:w-full md:flex-col md:items-start md:gap-y-2',
+          )}
+        >
+          {teamSettingRoutes.map((route) => (
+            <NavLink
+              to={route.path}
+              className={cn('group w-full justify-start', route.isSubNav && 'pl-8')}
+              key={route.path}
+            >
+              <Button
+                variant="ghost"
+                className={cn('w-full justify-start', {
+                  'group-aria-[current]:bg-secondary': !route.isSubNavParent,
+                })}
+              >
+                {route.icon && <route.icon className="mr-2 h-5 w-5" />}
+                <Trans>{route.label}</Trans>
+              </Button>
+            </NavLink>
+          ))}
+        </div>
 
-        <div className="col-span-12 max-w-3xl md:col-span-9">
+        <div className="col-span-12 md:col-span-9">
           <Outlet />
         </div>
       </div>

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

@@ -1,5 +1,6 @@
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
 import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
 import type { SanitizeBrandingCssWarning } from '@documenso/lib/utils/sanitize-branding-css';
 import { trpc } from '@documenso/trpc/react';
@@ -37,7 +38,6 @@ export default function TeamsSettingsPage() {
   });
 
   const { mutateAsync: updateTeamSettings } = trpc.team.settings.update.useMutation();
-  const { mutateAsync: updateTeamBrandingLogo } = trpc.team.settings.updateBrandingLogo.useMutation();
 
   const canConfigureBranding = organisation.organisationClaim.flags.allowCustomBranding || !IS_BILLING_ENABLED();
 
@@ -48,23 +48,22 @@ export default function TeamsSettingsPage() {
     try {
       const { brandingEnabled, brandingLogo, brandingUrl, brandingCompanyDetails, brandingColors, brandingCss } = data;
 
-      // Upload (or clear) the logo through the dedicated, server-validated route.
-      if (brandingLogo instanceof File || brandingLogo === null) {
-        const formData = new FormData();
+      let uploadedBrandingLogo: string | undefined;
 
-        formData.append('payload', JSON.stringify({ teamId: team.id }));
+      if (brandingLogo) {
+        uploadedBrandingLogo = JSON.stringify(await putFile(brandingLogo));
+      }
 
-        if (brandingLogo instanceof File) {
-          formData.append('brandingLogo', brandingLogo);
-        }
-
-        await updateTeamBrandingLogo(formData);
+      // Empty the branding logo if the user unsets it.
+      if (brandingLogo === null) {
+        uploadedBrandingLogo = '';
       }
 
       const result = await updateTeamSettings({
         teamId: team.id,
         data: {
           brandingEnabled,
+          brandingLogo: uploadedBrandingLogo,
           brandingUrl: brandingUrl || null,
           brandingCompanyDetails: brandingCompanyDetails || null,
           brandingColors,
@@ -115,10 +114,10 @@ export default function TeamsSettingsPage() {
   }
 
   return (
-    <div>
+    <div className="max-w-2xl">
       <SettingsHeader
         title={t`Branding Preferences`}
-        subtitle={t`Set the default branding for documents sent by your team.`}
+        subtitle={t`Here you can set preferences and defaults for branding.`}
       />
 
       {canConfigureBranding ? (

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

@@ -110,8 +110,11 @@ export default function TeamsSettingsPage() {
   }
 
   return (
-    <div>
-      <SettingsHeader title={t`Document Preferences`} subtitle={t`Set the default document settings for your team.`} />
+    <div className="max-w-2xl">
+      <SettingsHeader
+        title={t`Document Preferences`}
+        subtitle={t`Here you can set preferences and defaults for your team.`}
+      />
 
       <section>
         <DocumentPreferencesForm

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

@@ -10,10 +10,10 @@ import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
 
 export function meta() {
-  return appMetaTags(msg`Email Preferences`);
+  return appMetaTags(msg`Settings`);
 }
 
-export default function TeamEmailSettingsPage() {
+export default function TeamEmailSettingsGeneral() {
   const { t } = useLingui();
   const { toast } = useToast();
 
@@ -59,8 +59,8 @@ export default function TeamEmailSettingsPage() {
   }
 
   return (
-    <div>
-      <SettingsHeader title={t`Email Preferences`} subtitle={t`Manage the default email settings for your team.`} />
+    <div className="max-w-2xl">
+      <SettingsHeader title={t`Email Preferences`} subtitle={t`You can manage your email preferences here.`} />
 
       <section>
         <EmailPreferencesForm

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

@@ -128,8 +128,11 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
   }, [profile.enabled]);
 
   return (
-    <div>
-      <SettingsHeader title={t`Public Profile`} subtitle={t`Manage your public profile and the templates shown on it.`}>
+    <div className="max-w-2xl">
+      <SettingsHeader
+        title={t`Public Profile`}
+        subtitle={t`You can choose to enable or disable the profile for public view.`}
+      >
         <Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
           <TooltipTrigger asChild>
             <div
@@ -187,7 +190,7 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
       <div className="mt-4">
         <SettingsHeader
           title={t`Templates`}
-          subtitle={t`Show templates in your public profile for your audience to sign and get started quickly.`}
+          subtitle={t`Show templates in your public profile for your audience to sign and get started quickly`}
           hideDivider={true}
           className="mt-8 [&>*>h3]:text-base"
         >

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

@@ -30,7 +30,7 @@ export default function ApiTokensPage() {
         title={<Trans>API Tokens</Trans>}
         subtitle={
           <Trans>
-            Create and manage API tokens. See our{' '}
+            On this page, you can create and manage API tokens. See our{' '}
             <a
               className="text-primary underline"
               href={'https://docs.documenso.com/developers/public-api'}
@@ -57,7 +57,7 @@ export default function ApiTokensPage() {
         </Alert>
       ) : (
         <>
-          <ApiTokenForm tokens={tokens} />
+          <ApiTokenForm className="max-w-xl" tokens={tokens} />
 
           <hr className="mt-8 mb-4" />
 
@@ -74,7 +74,7 @@ export default function ApiTokensPage() {
           )}
 
           {tokens && tokens.length > 0 && (
-            <div className="mt-4 flex flex-col gap-y-4">
+            <div className="mt-4 flex max-w-xl flex-col gap-y-4">
               {tokens.map((token) => (
                 <div key={token.id} className="rounded-lg border border-border p-4">
                   <div className="flex items-center justify-between gap-x-4">

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

@@ -88,7 +88,10 @@ export default function WebhookPage() {
 
   return (
     <div>
-      <SettingsHeader title={t`Webhooks`} subtitle={t`Create and manage webhooks for document events.`}>
+      <SettingsHeader
+        title={t`Webhooks`}
+        subtitle={t`On this page, you can create new Webhooks and manage the existing ones.`}
+      >
         <WebhookCreateDialog />
       </SettingsHeader>
       {isLoading && (

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

@@ -1,8 +1,9 @@
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
-import { AppError } from '@documenso/lib/errors/app-error';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
 import { putNormalizedPdfFileServerSide } from '@documenso/lib/universal/upload/put-file.server';
+import { getPresignPostUrl } from '@documenso/lib/universal/upload/server-actions';
 import { prisma } from '@documenso/prisma';
 import { sValidator } from '@hono/standard-validator';
 import type { Prisma } from '@prisma/client';
@@ -11,11 +12,14 @@ import { Hono } from 'hono';
 import type { HonoEnv } from '../../router';
 import { checkEnvelopeFileAccess, handleEnvelopeItemFileRequest, resolveFileUploadUserId } from './files.helpers';
 import {
+  isAllowedUploadContentType,
+  type TGetPresignedPostUrlResponse,
   ZGetEnvelopeItemFileDownloadRequestParamsSchema,
   ZGetEnvelopeItemFileRequestParamsSchema,
   ZGetEnvelopeItemFileRequestQuerySchema,
   ZGetEnvelopeItemFileTokenDownloadRequestParamsSchema,
   ZGetEnvelopeItemFileTokenRequestParamsSchema,
+  ZGetPresignedPostUrlRequestSchema,
   ZUploadPdfRequestSchema,
 } from './files.types';
 import getEnvelopeItemPdfRoute from './routes/get-envelope-item-pdf';
@@ -57,6 +61,29 @@ export const filesRoute = new Hono<HonoEnv>()
       return c.json({ error: 'Upload failed' }, 500);
     }
   })
+  .post('/presigned-post-url', sValidator('json', ZGetPresignedPostUrlRequestSchema), async (c) => {
+    const userId = await resolveFileUploadUserId(c);
+
+    if (!userId) {
+      return c.json({ error: 'Unauthorized' }, 401);
+    }
+
+    const { fileName, contentType } = c.req.valid('json');
+
+    if (!isAllowedUploadContentType(contentType)) {
+      return c.json({ error: 'Unsupported content type' }, 400);
+    }
+
+    try {
+      const { key, url } = await getPresignPostUrl(fileName, contentType, userId);
+
+      return c.json({ key, url } satisfies TGetPresignedPostUrlResponse);
+    } catch (err) {
+      console.error(err);
+
+      throw new AppError(AppErrorCode.UNKNOWN_ERROR);
+    }
+  })
   .get(
     '/envelope/:envelopeId/envelopeItem/:envelopeItemId',
     sValidator('param', ZGetEnvelopeItemFileRequestParamsSchema),

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

@@ -13,6 +13,27 @@ export const ZUploadPdfResponseSchema = DocumentDataSchema.pick({
 export type TUploadPdfRequest = z.infer<typeof ZUploadPdfRequestSchema>;
 export type TUploadPdfResponse = z.infer<typeof ZUploadPdfResponseSchema>;
 
+export const ALLOWED_UPLOAD_CONTENT_TYPES = ['application/pdf', 'image/jpeg', 'image/png', 'image/webp'] as const;
+
+export const isAllowedUploadContentType = (contentType: string): boolean => {
+  const normalizedContentType = contentType.split(';').at(0)?.trim().toLowerCase();
+
+  return ALLOWED_UPLOAD_CONTENT_TYPES.some((allowed) => allowed === normalizedContentType);
+};
+
+export const ZGetPresignedPostUrlRequestSchema = z.object({
+  fileName: z.string().min(1),
+  contentType: z.string().min(1),
+});
+
+export const ZGetPresignedPostUrlResponseSchema = z.object({
+  key: z.string().min(1),
+  url: z.string().min(1),
+});
+
+export type TGetPresignedPostUrlRequest = z.infer<typeof ZGetPresignedPostUrlRequestSchema>;
+export type TGetPresignedPostUrlResponse = z.infer<typeof ZGetPresignedPostUrlResponseSchema>;
+
 export const ZGetEnvelopeItemFileRequestParamsSchema = z.object({
   envelopeId: z.string().min(1),
   envelopeItemId: z.string().min(1),

apps/remix/server/router.ts

@@ -105,6 +105,7 @@ app.route('/api/auth', auth);
 
 // Files route.
 app.use('/api/files/upload-pdf', fileRateLimitMiddleware);
+app.use('/api/files/presigned-post-url', fileRateLimitMiddleware);
 app.route('/api/files', filesRoute);
 
 // AI route.

assets/acroform-import-test.pdf

@@ -0,0 +1,715 @@
+%PDF-1.7
+%âãÏÓ
+1 0 obj
+<<
+/Type /Pages
+/Kids [4 0 R 5 0 R]
+/Count 2
+>>
+endobj
+2 0 obj
+<<
+/Type /Catalog
+/Pages 1 0 R
+/AcroForm 6 0 R
+>>
+endobj
+3 0 obj
+<<
+/Title (Untitled)
+/Author (Unknown)
+/Creator (@libpdf/core)
+/Producer (@libpdf/core)
+/CreationDate (D:20260521033345Z)
+/ModDate (D:20260521033345Z)
+>>
+endobj
+4 0 obj
+<<
+/Type /Page
+/MediaBox [0 0 612 792]
+/Resources <<
+>>
+/Parent 1 0 R
+/Annots [8 0 R 11 0 R 14 0 R]
+>>
+endobj
+5 0 obj
+<<
+/Type /Page
+/MediaBox [0 0 612 792]
+/Resources <<
+>>
+/Parent 1 0 R
+/Annots [18 0 R 21 0 R 24 0 R 27 0 R 31 0 R 34 0 R 37 0 R]
+>>
+endobj
+6 0 obj
+<<
+/Fields [7 0 R 10 0 R 13 0 R 17 0 R 20 0 R 30 0 R 33 0 R 36 0 R]
+/DR <<
+/Font <<
+/Helv <<
+/Type /Font
+/Subtype /Type1
+/BaseFont /Helvetica
+>>
+/ZaDb <<
+/Type /Font
+/Subtype /Type1
+/BaseFont /ZapfDingbats
+>>
+>>
+>>
+/DA (/Helv 0 Tf 0 g)
+/NeedAppearances false
+/SigFlags 3
+>>
+endobj
+7 0 obj
+<<
+/FT /Tx
+/T (CustomerName)
+/Kids [8 0 R]
+/DA (0 g)
+>>
+endobj
+8 0 obj
+<<
+/Type /Annot
+/Subtype /Widget
+/Rect [80 620 280 644]
+/P 4 0 R
+/Parent 7 0 R
+/F 4
+/AP <<
+/N 9 0 R
+>>
+>>
+endobj
+9 0 obj
+<<
+/Length 73/Type /XObject
+/Subtype /Form
+/BBox [0 0 200 24]
+/Resources <<
+/Font <<
+/Helv <<
+/Type /Font
+/Subtype /Type1
+/BaseFont /Helvetica
+>>
+>>
+>>
+>>
+stream
+/Tx BMC
+q
+1 1 198 22 re
+W
+n
+BT
+/Helv 14 Tf
+0 g
+2 6.974 Td
+() Tj
+ET
+Q
+EMC
+
+endstream
+endobj
+10 0 obj
+<<
+/FT /Tx
+/T (signed_date)
+/Kids [11 0 R]
+/DA (0 g)
+>>
+endobj
+11 0 obj
+<<
+/Type /Annot
+/Subtype /Widget
+/Rect [80 560 280 584]
+/P 4 0 R
+/Parent 10 0 R
+/F 4
+/AP <<
+/N 12 0 R
+>>
+>>
+endobj
+12 0 obj
+<<
+/Length 73/Type /XObject
+/Subtype /Form
+/BBox [0 0 200 24]
+/Resources <<
+/Font <<
+/Helv <<
+/Type /Font
+/Subtype /Type1
+/BaseFont /Helvetica
+>>
+>>
+>>
+>>
+stream
+/Tx BMC
+q
+1 1 198 22 re
+W
+n
+BT
+/Helv 14 Tf
+0 g
+2 6.974 Td
+() Tj
+ET
+Q
+EMC
+
+endstream
+endobj
+13 0 obj
+<<
+/FT /Btn
+/T (accept_terms)
+/Kids [14 0 R]
+/V /Off
+>>
+endobj
+14 0 obj
+<<
+/Type /Annot
+/Subtype /Widget
+/Rect [80 500 98 518]
+/P 4 0 R
+/Parent 13 0 R
+/F 4
+/AS /Off
+/AP <<
+/N <<
+/Yes 15 0 R
+/Off 16 0 R
+>>
+>>
+>>
+endobj
+15 0 obj
+<<
+/Length 47/Type /XObject
+/Subtype /Form
+/BBox [0 0 18 18]
+/Resources <<
+/Font <<
+/ZaDb <<
+/Type /Font
+/Subtype /Type1
+/BaseFont /ZapfDingbats
+>>
+>>
+>>
+>>
+stream
+q
+BT
+/ZaDb 12.6 Tf
+0 g
+2.7 4.59 Td
+(4) Tj
+ET
+Q
+
+endstream
+endobj
+16 0 obj
+<<
+/Length 0/Type /XObject
+/Subtype /Form
+/BBox [0 0 18 18]
+/Resources <<
+>>
+>>
+stream
+
+endstream
+endobj
+17 0 obj
+<<
+/FT /Ch
+/T (country)
+/Ff 131072
+/Kids [18 0 R]
+/Opt [(USA) (Canada) (Germany)]
+/DA (0 g)
+/V (USA)
+/DV (USA)
+>>
+endobj
+18 0 obj
+<<
+/Type /Annot
+/Subtype /Widget
+/Rect [80 700 280 724]
+/P 5 0 R
+/Parent 17 0 R
+/F 4
+/AP <<
+/N 19 0 R
+>>
+>>
+endobj
+19 0 obj
+<<
+/Length 76/Type /XObject
+/Subtype /Form
+/BBox [0 0 200 24]
+/Resources <<
+/Font <<
+/Helv <<
+/Type /Font
+/Subtype /Type1
+/BaseFont /Helvetica
+>>
+>>
+>>
+>>
+stream
+/Tx BMC
+q
+1 1 178 22 re
+W
+n
+BT
+/Helv 14 Tf
+0 g
+2 9.872 Td
+(USA) Tj
+ET
+Q
+EMC
+
+endstream
+endobj
+20 0 obj
+<<
+/FT /Btn
+/T (payment_method)
+/Ff 32768
+/Kids [21 0 R 24 0 R 27 0 R]
+/V /PayPal
+/DV /PayPal
+/Opt [(Credit Card) (PayPal) (Bank Transfer)]
+>>
+endobj
+21 0 obj
+<<
+/Type /Annot
+/Subtype /Widget
+/Rect [80 640 96 656]
+/P 5 0 R
+/Parent 20 0 R
+/F 4
+/AS /Off
+/AP <<
+/N <<
+/Credit#20Card 22 0 R
+/Off 23 0 R
+>>
+>>
+>>
+endobj
+22 0 obj
+<<
+/Length 46/Type /XObject
+/Subtype /Form
+/BBox [0 0 16 16]
+/Resources <<
+/Font <<
+/ZaDb <<
+/Type /Font
+/Subtype /Type1
+/BaseFont /ZapfDingbats
+>>
+>>
+>>
+>>
+stream
+q
+BT
+/ZaDb 9.6 Tf
+0 g
+3.2 4.64 Td
+(l) Tj
+ET
+Q
+
+endstream
+endobj
+23 0 obj
+<<
+/Length 159/Type /XObject
+/Subtype /Form
+/BBox [0 0 16 16]
+/Resources <<
+>>
+>>
+stream
+q
+0 G
+12.8 8 m
+12.8 10.65104 10.65104 12.8 8 12.8 c
+5.34896 12.8 3.2 10.65104 3.2 8 c
+3.2 5.34896 5.34896 3.2 8 3.2 c
+10.65104 3.2 12.8 5.34896 12.8 8 c
+h
+S
+Q
+
+endstream
+endobj
+24 0 obj
+<<
+/Type /Annot
+/Subtype /Widget
+/Rect [80 615 96 631]
+/P 5 0 R
+/Parent 20 0 R
+/F 4
+/AS /PayPal
+/AP <<
+/N <<
+/PayPal 25 0 R
+/Off 26 0 R
+>>
+>>
+>>
+endobj
+25 0 obj
+<<
+/Length 46/Type /XObject
+/Subtype /Form
+/BBox [0 0 16 16]
+/Resources <<
+/Font <<
+/ZaDb <<
+/Type /Font
+/Subtype /Type1
+/BaseFont /ZapfDingbats
+>>
+>>
+>>
+>>
+stream
+q
+BT
+/ZaDb 9.6 Tf
+0 g
+3.2 4.64 Td
+(l) Tj
+ET
+Q
+
+endstream
+endobj
+26 0 obj
+<<
+/Length 159/Type /XObject
+/Subtype /Form
+/BBox [0 0 16 16]
+/Resources <<
+>>
+>>
+stream
+q
+0 G
+12.8 8 m
+12.8 10.65104 10.65104 12.8 8 12.8 c
+5.34896 12.8 3.2 10.65104 3.2 8 c
+3.2 5.34896 5.34896 3.2 8 3.2 c
+10.65104 3.2 12.8 5.34896 12.8 8 c
+h
+S
+Q
+
+endstream
+endobj
+27 0 obj
+<<
+/Type /Annot
+/Subtype /Widget
+/Rect [80 590 96 606]
+/P 5 0 R
+/Parent 20 0 R
+/F 4
+/AS /Off
+/AP <<
+/N <<
+/Bank#20Transfer 28 0 R
+/Off 29 0 R
+>>
+>>
+>>
+endobj
+28 0 obj
+<<
+/Length 46/Type /XObject
+/Subtype /Form
+/BBox [0 0 16 16]
+/Resources <<
+/Font <<
+/ZaDb <<
+/Type /Font
+/Subtype /Type1
+/BaseFont /ZapfDingbats
+>>
+>>
+>>
+>>
+stream
+q
+BT
+/ZaDb 9.6 Tf
+0 g
+3.2 4.64 Td
+(l) Tj
+ET
+Q
+
+endstream
+endobj
+29 0 obj
+<<
+/Length 159/Type /XObject
+/Subtype /Form
+/BBox [0 0 16 16]
+/Resources <<
+>>
+>>
+stream
+q
+0 G
+12.8 8 m
+12.8 10.65104 10.65104 12.8 8 12.8 c
+5.34896 12.8 3.2 10.65104 3.2 8 c
+3.2 5.34896 5.34896 3.2 8 3.2 c
+10.65104 3.2 12.8 5.34896 12.8 8 c
+h
+S
+Q
+
+endstream
+endobj
+30 0 obj
+<<
+/FT /Tx
+/T (initials)
+/Kids [31 0 R]
+/DA (0 g)
+>>
+endobj
+31 0 obj
+<<
+/Type /Annot
+/Subtype /Widget
+/Rect [80 540 140 564]
+/P 5 0 R
+/Parent 30 0 R
+/F 4
+/AP <<
+/N 32 0 R
+>>
+>>
+endobj
+32 0 obj
+<<
+/Length 72/Type /XObject
+/Subtype /Form
+/BBox [0 0 60 24]
+/Resources <<
+/Font <<
+/Helv <<
+/Type /Font
+/Subtype /Type1
+/BaseFont /Helvetica
+>>
+>>
+>>
+>>
+stream
+/Tx BMC
+q
+1 1 58 22 re
+W
+n
+BT
+/Helv 14 Tf
+0 g
+2 6.974 Td
+() Tj
+ET
+Q
+EMC
+
+endstream
+endobj
+33 0 obj
+<<
+/FT /Tx
+/T (contact_email)
+/Kids [34 0 R]
+/DA (0 g)
+>>
+endobj
+34 0 obj
+<<
+/Type /Annot
+/Subtype /Widget
+/Rect [160 540 380 564]
+/P 5 0 R
+/Parent 33 0 R
+/F 4
+/AP <<
+/N 35 0 R
+>>
+>>
+endobj
+35 0 obj
+<<
+/Length 73/Type /XObject
+/Subtype /Form
+/BBox [0 0 220 24]
+/Resources <<
+/Font <<
+/Helv <<
+/Type /Font
+/Subtype /Type1
+/BaseFont /Helvetica
+>>
+>>
+>>
+>>
+stream
+/Tx BMC
+q
+1 1 218 22 re
+W
+n
+BT
+/Helv 14 Tf
+0 g
+2 6.974 Td
+() Tj
+ET
+Q
+EMC
+
+endstream
+endobj
+36 0 obj
+<<
+/FT /Tx
+/T (item_qty)
+/Kids [37 0 R]
+/DA (0 g)
+/MaxLen 4
+>>
+endobj
+37 0 obj
+<<
+/Type /Annot
+/Subtype /Widget
+/Rect [400 540 460 564]
+/P 5 0 R
+/Parent 36 0 R
+/F 4
+/AP <<
+/N 38 0 R
+>>
+>>
+endobj
+38 0 obj
+<<
+/Length 72/Type /XObject
+/Subtype /Form
+/BBox [0 0 60 24]
+/Resources <<
+/Font <<
+/Helv <<
+/Type /Font
+/Subtype /Type1
+/BaseFont /Helvetica
+>>
+>>
+>>
+>>
+stream
+/Tx BMC
+q
+1 1 58 22 re
+W
+n
+BT
+/Helv 14 Tf
+0 g
+2 6.974 Td
+() Tj
+ET
+Q
+EMC
+
+endstream
+endobj
+xref
+0 39
+0000000000 65535 f
+0000000015 00000 n
+0000000078 00000 n
+0000000143 00000 n
+0000000312 00000 n
+0000000430 00000 n
+0000000577 00000 n
+0000000866 00000 n
+0000000937 00000 n
+0000001058 00000 n
+0000001319 00000 n
+0000001391 00000 n
+0000001515 00000 n
+0000001777 00000 n
+0000001849 00000 n
+0000002004 00000 n
+0000002242 00000 n
+0000002356 00000 n
+0000002486 00000 n
+0000002610 00000 n
+0000002875 00000 n
+0000003034 00000 n
+0000003199 00000 n
+0000003436 00000 n
+0000003711 00000 n
+0000003872 00000 n
+0000004109 00000 n
+0000004384 00000 n
+0000004551 00000 n
+0000004788 00000 n
+0000005063 00000 n
+0000005132 00000 n
+0000005256 00000 n
+0000005516 00000 n
+0000005590 00000 n
+0000005715 00000 n
+0000005977 00000 n
+0000006056 00000 n
+0000006181 00000 n
+trailer
+<<
+/Size 39
+/Root 2 0 R
+/Info 3 0 R
+/ID [<4798EA6ACCB2CE19827C36CD841F759A> <4798EA6ACCB2CE19827C36CD841F759A>]
+>>
+startxref
+6441
+%%EOF

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

@@ -44,6 +44,46 @@ test.describe('File upload endpoint authorization', () => {
     expect(res.status()).toBe(401);
   });
 
+  test('rejects an unauthenticated presigned-post-url request', async ({ request }) => {
+    const res = await request.post(`${WEBAPP_BASE_URL}/api/files/presigned-post-url`, {
+      headers: { 'Content-Type': 'application/json' },
+      data: { fileName: 'test.pdf', contentType: 'application/pdf' },
+    });
+
+    expect(res.ok()).toBeFalsy();
+    expect(res.status()).toBe(401);
+  });
+
+  test('rejects a presigned-post-url request with an invalid presign token', async ({ request }) => {
+    const res = await request.post(`${WEBAPP_BASE_URL}/api/files/presigned-post-url`, {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer not-a-real-token',
+      },
+      data: { fileName: 'test.pdf', contentType: 'application/pdf' },
+    });
+
+    expect(res.ok()).toBeFalsy();
+    expect(res.status()).toBe(401);
+  });
+
+  test('rejects a presigned-post-url request with a disallowed content type', async ({ request }) => {
+    const { user, team } = await seedUser();
+    const presignToken = await createPresignTokenForUser(user.id, team.id);
+
+    const res = await request.post(`${WEBAPP_BASE_URL}/api/files/presigned-post-url`, {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${presignToken}`,
+      },
+      data: { fileName: 'malware.exe', contentType: 'application/x-msdownload' },
+    });
+
+    // Authenticated, but the content type is not on the allow-list.
+    expect(res.ok()).toBeFalsy();
+    expect(res.status()).toBe(400);
+  });
+
   test('allows an upload-pdf request authorized by a valid presign token', async ({ request }) => {
     const { user, team } = await seedUser();
     const presignToken = await createPresignTokenForUser(user.id, team.id);

packages/app-tests/e2e/branding-logo-optimise.spec.ts

@@ -1,37 +0,0 @@
-import { optimiseBrandingLogo } from '@documenso/lib/utils/images/logo';
-import { expect, test } from '@playwright/test';
-import sharp from 'sharp';
-
-const makePng = async (width = 1200, height = 1200) =>
-  sharp({
-    create: { width, height, channels: 3, background: { r: 10, g: 20, b: 30 } },
-  })
-    .png()
-    .toBuffer();
-
-test.describe('optimiseBrandingLogo', () => {
-  test('re-encodes a valid image to a PNG buffer', async () => {
-    const input = await makePng();
-
-    const output = await optimiseBrandingLogo(input);
-
-    const metadata = await sharp(output).metadata();
-
-    expect(metadata.format).toBe('png');
-  });
-
-  test('bounds the image to a maximum of 512px on its largest side', async () => {
-    const input = await makePng(2000, 1000);
-
-    const output = await optimiseBrandingLogo(input);
-
-    const metadata = await sharp(output).metadata();
-
-    expect(metadata.width).toBeLessThanOrEqual(512);
-    expect(metadata.height).toBeLessThanOrEqual(512);
-  });
-
-  test('rejects input that is not a valid image', async () => {
-    await expect(optimiseBrandingLogo(Buffer.from('this is not an image'))).rejects.toThrow();
-  });
-});

packages/app-tests/e2e/branding-logo-upload.spec.ts

@@ -1,225 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import { prisma } from '@documenso/prisma';
-import { seedUser } from '@documenso/prisma/seed/users';
-import { expect, type Page, test } from '@playwright/test';
-
-import { apiSignin } from './fixtures/authentication';
-
-test.describe.configure({ mode: 'parallel' });
-
-const LOGO_PATH = path.join(__dirname, '../../assets/logo.png');
-
-type MultipartFile = { name: string; mimeType: string; buffer: Buffer };
-
-const enableBrandingAndUpload = async (page: Page) => {
-  // Enable custom branding so the file input is no longer disabled.
-  await page.getByTestId('enable-branding').click();
-  await page.getByRole('option', { name: 'Yes' }).click();
-
-  // Upload the logo file through the real multipart route.
-  await page.locator('input[type="file"]').setInputFiles(LOGO_PATH);
-
-  await page.getByRole('button', { name: 'Save changes' }).first().click();
-  await expect(page.getByText('Your branding preferences have been updated').first()).toBeVisible();
-};
-
-/**
- * POST a logo straight to the dedicated multipart tRPC route using the
- * authenticated browser cookies. This bypasses the client-side form validation,
- * which is the only way to exercise the server-side image validation /
- * sanitisation (`zfdBrandingImageFile` + `optimiseBrandingLogo`) and the entitlement gate.
- */
-const postOrganisationBrandingLogo = async (page: Page, organisationId: string, file: MultipartFile | null) => {
-  const multipart: Record<string, string | MultipartFile> = {
-    payload: JSON.stringify({ organisationId }),
-  };
-
-  if (file) {
-    multipart.brandingLogo = file;
-  }
-
-  return await page
-    .context()
-    .request.post(`${NEXT_PUBLIC_WEBAPP_URL()}/api/trpc/organisation.settings.updateBrandingLogo`, { multipart });
-};
-
-/**
- * Grant the organisation the custom-branding entitlement. The positive branding
- * flows require it whenever billing is enabled; with billing disabled the gate is
- * bypassed, so this keeps these tests valid in both modes.
- */
-const grantCustomBranding = async (organisationClaimId: string) => {
-  await prisma.organisationClaim.update({
-    where: { id: organisationClaimId },
-    data: { flags: { allowLegacyEnvelopes: true, allowCustomBranding: true } },
-  });
-};
-
-test('[BRANDING_LOGO]: uploads an organisation branding logo via the dedicated route', async ({ page }) => {
-  const { user, organisation } = await seedUser({ isPersonalOrganisation: false });
-
-  await grantCustomBranding(organisation.organisationClaim.id);
-
-  await apiSignin({
-    page,
-    email: user.email,
-    redirectPath: `/o/${organisation.url}/settings/branding`,
-  });
-
-  await enableBrandingAndUpload(page);
-
-  const settings = await prisma.organisationGlobalSettings.findUniqueOrThrow({
-    where: { id: organisation.organisationGlobalSettingsId },
-  });
-
-  expect(settings.brandingLogo).toBeTruthy();
-
-  const parsed = JSON.parse(settings.brandingLogo);
-  expect(parsed).toHaveProperty('type');
-  expect(parsed).toHaveProperty('data');
-});
-
-test('[BRANDING_LOGO]: uploads a team branding logo via the dedicated route', async ({ page }) => {
-  const { user, team, organisation } = await seedUser({ isPersonalOrganisation: false });
-
-  await grantCustomBranding(organisation.organisationClaim.id);
-
-  await apiSignin({
-    page,
-    email: user.email,
-    redirectPath: `/t/${team.url}/settings/branding`,
-  });
-
-  await enableBrandingAndUpload(page);
-
-  // TeamGlobalSettings has no `teamId` column (the FK lives on Team), so read it
-  // through the team relation.
-  const teamWithSettings = await prisma.team.findUniqueOrThrow({
-    where: { id: team.id },
-    include: { teamGlobalSettings: true },
-  });
-
-  expect(teamWithSettings.teamGlobalSettings?.brandingLogo).toBeTruthy();
-
-  const parsed = JSON.parse(teamWithSettings.teamGlobalSettings?.brandingLogo ?? '');
-  expect(parsed).toHaveProperty('type');
-  expect(parsed).toHaveProperty('data');
-});
-
-test('[BRANDING_LOGO]: clears the organisation branding logo when the user removes it', async ({ page }) => {
-  const { user, organisation } = await seedUser({ isPersonalOrganisation: false });
-
-  await grantCustomBranding(organisation.organisationClaim.id);
-
-  await apiSignin({
-    page,
-    email: user.email,
-    redirectPath: `/o/${organisation.url}/settings/branding`,
-  });
-
-  await enableBrandingAndUpload(page);
-
-  // Confirm the logo was stored before we clear it.
-  const settings = await prisma.organisationGlobalSettings.findUniqueOrThrow({
-    where: { id: organisation.organisationGlobalSettingsId },
-  });
-
-  expect(settings.brandingLogo).toBeTruthy();
-
-  // Remove the logo and save again.
-  await page.getByRole('button', { name: 'Remove' }).click();
-  await page.getByRole('button', { name: 'Save changes' }).first().click();
-
-  // Clearing the logo persists an empty string via the dedicated route.
-  await expect
-    .poll(async () => {
-      const updated = await prisma.organisationGlobalSettings.findUniqueOrThrow({
-        where: { id: organisation.organisationGlobalSettingsId },
-      });
-
-      return updated.brandingLogo;
-    })
-    .toBe('');
-});
-
-test('[BRANDING_LOGO]: validates and sanitises the logo on the server', async ({ page }) => {
-  const { user, organisation } = await seedUser({ isPersonalOrganisation: false });
-
-  await grantCustomBranding(organisation.organisationClaim.id);
-
-  await apiSignin({
-    page,
-    email: user.email,
-    redirectPath: `/o/${organisation.url}/settings/branding`,
-  });
-
-  // Positive control: a genuine PNG is accepted and stored. This also proves the
-  // direct multipart request shape matches what the route expects.
-  const validResponse = await postOrganisationBrandingLogo(page, organisation.id, {
-    name: 'logo.png',
-    mimeType: 'image/png',
-    buffer: fs.readFileSync(LOGO_PATH),
-  });
-
-  expect(validResponse.ok()).toBeTruthy();
-
-  const afterValid = await prisma.organisationGlobalSettings.findUniqueOrThrow({
-    where: { id: organisation.organisationGlobalSettingsId },
-  });
-
-  expect(afterValid.brandingLogo).toBeTruthy();
-
-  // Bytes that pass the MIME/size allowlist but are not a real image must be
-  // rejected by the server (the `sharp` re-encode) without changing stored state.
-  const invalidResponse = await postOrganisationBrandingLogo(page, organisation.id, {
-    name: 'fake.png',
-    mimeType: 'image/png',
-    buffer: Buffer.from('this is definitely not a valid png'),
-  });
-
-  expect(invalidResponse.ok()).toBeFalsy();
-  expect(invalidResponse.status()).toBeGreaterThanOrEqual(400);
-  expect(invalidResponse.status()).toBeLessThan(500);
-
-  const afterInvalid = await prisma.organisationGlobalSettings.findUniqueOrThrow({
-    where: { id: organisation.organisationGlobalSettingsId },
-  });
-
-  // The previously stored, valid logo is left untouched by the rejected upload.
-  expect(afterInvalid.brandingLogo).toBe(afterValid.brandingLogo);
-});
-
-test('[BRANDING_LOGO]: rejects setting a logo without the custom-branding entitlement', async ({ page }) => {
-  // The entitlement is only enforced when billing is enabled; with billing off
-  // the check is intentionally skipped server-side, so this can't be exercised.
-  test.skip(
-    process.env.NEXT_PUBLIC_FEATURE_BILLING_ENABLED !== 'true',
-    'Entitlement is only enforced when billing is enabled.',
-  );
-
-  // Seeded organisations have no `allowCustomBranding` claim flag.
-  const { user, organisation } = await seedUser({ isPersonalOrganisation: false });
-
-  await apiSignin({
-    page,
-    email: user.email,
-    redirectPath: `/o/${organisation.url}/settings/branding`,
-  });
-
-  const response = await postOrganisationBrandingLogo(page, organisation.id, {
-    name: 'logo.png',
-    mimeType: 'image/png',
-    buffer: fs.readFileSync(LOGO_PATH),
-  });
-
-  expect(response.ok()).toBeFalsy();
-
-  const settings = await prisma.organisationGlobalSettings.findUniqueOrThrow({
-    where: { id: organisation.organisationGlobalSettingsId },
-  });
-
-  expect(settings.brandingLogo).toBeFalsy();
-});

packages/app-tests/e2e/organisations/manage-organisation.spec.ts

@@ -355,8 +355,8 @@ test('[ORGANISATIONS]: manage groups and members', async ({ page }) => {
   await page.getByRole('button', { name: 'Next' }).click();
   await page.getByRole('combobox').click();
   await page.getByRole('option', { name: 'Manager' }).click();
-  await page.getByRole('button', { name: 'Add Groups' }).click();
-  await expect(page.getByText('Team groups have been added').first()).toBeVisible();
+  await page.getByRole('button', { name: 'Create Groups' }).click();
+  await expect(page.getByText('Team members have been added').first()).toBeVisible();
 
   // Assign CUSTOM_GROUP_B to TeamA
   await page.goto(`/t/${teamA}/settings/groups`);
@@ -368,8 +368,8 @@ test('[ORGANISATIONS]: manage groups and members', async ({ page }) => {
   await page.getByRole('button', { name: 'Next' }).click();
   await page.getByRole('combobox').click();
   await page.getByRole('option', { name: 'Manager' }).click();
-  await page.getByRole('button', { name: 'Add Groups' }).click();
-  await expect(page.getByText('Team groups have been added').first()).toBeVisible();
+  await page.getByRole('button', { name: 'Create Groups' }).click();
+  await expect(page.getByText('Team members have been added').first()).toBeVisible();
 
   // Update CUSTOM_GROUP_B
   const updateBtn = page.getByRole('row', { name: 'CUSTOM_GROUP_B' }).getByRole('button');

packages/app-tests/e2e/scenarios/acroform-import.spec.ts

@@ -0,0 +1,368 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { UNSAFE_importAcroFormFieldsFromEnvelope } from '@documenso/lib/server-only/envelope-item/import-acroform-fields';
+import { UNSAFE_replaceEnvelopeItemPdf } from '@documenso/lib/server-only/envelope-item/replace-envelope-item-pdf';
+import { createApiToken } from '@documenso/lib/server-only/public-api/create-api-token';
+import type { ApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { getFileServerSide } from '@documenso/lib/universal/upload/get-file.server';
+import { prisma } from '@documenso/prisma';
+import { EnvelopeType, RecipientRole } from '@documenso/prisma/client';
+import { seedUser } from '@documenso/prisma/seed/users';
+import type {
+  TCreateEnvelopePayload,
+  TCreateEnvelopeResponse,
+} from '@documenso/trpc/server/envelope-router/create-envelope.types';
+import { PDF, PdfString } from '@libpdf/core';
+import { type APIRequestContext, expect, type Page, test } from '@playwright/test';
+
+import { apiSignin } from '../fixtures/authentication';
+
+const WEBAPP_BASE_URL = NEXT_PUBLIC_WEBAPP_URL();
+const baseUrl = `${WEBAPP_BASE_URL}/api/v2-beta`;
+
+const ACROFORM_FIXTURE = fs.readFileSync(path.join(__dirname, '../../../../assets/acroform-import-test.pdf'));
+
+const ACROFORM_DOCUMENT_PAYLOAD: TCreateEnvelopePayload = {
+  type: EnvelopeType.DOCUMENT,
+  title: 'AcroForm document',
+  recipients: [
+    {
+      email: 'signer@example.com',
+      name: 'Signer',
+      role: RecipientRole.SIGNER,
+    },
+  ],
+};
+
+const API_REQUEST_METADATA: ApiRequestMetadata = {
+  requestMetadata: {},
+  source: 'apiV1',
+  auth: 'api',
+};
+
+type TestUser = Awaited<ReturnType<typeof seedUser>>['user'];
+type TestTeam = Awaited<ReturnType<typeof seedUser>>['team'];
+
+const seedUserWithApiToken = async (): Promise<{ token: string; user: TestUser; team: TestTeam }> => {
+  const { user, team } = await seedUser();
+  const { token } = await createApiToken({
+    userId: user.id,
+    teamId: team.id,
+    tokenName: 'test',
+    expiresIn: null,
+  });
+
+  return { token, user, team };
+};
+
+const pdfHasFormFields = async (pdf: Uint8Array): Promise<boolean> => {
+  const pdfDoc = await PDF.load(new Uint8Array(pdf));
+  const form = pdfDoc.getForm();
+
+  return (form?.fieldCount ?? 0) > 0;
+};
+
+const createSignedSignatureAcroFormPdf = (): Promise<Uint8Array> => {
+  const pdf = PDF.create();
+  const page = pdf.addPage({ size: 'letter' });
+  const form = pdf.getOrCreateForm();
+  const textField = form.createTextField('full_name');
+  const signatureField = form.createSignatureField('signed_signature');
+
+  page.drawField(textField, { x: 100, y: 700, width: 200, height: 24 });
+  signatureField.getDict().set('V', PdfString.fromString('fake-signature'));
+
+  return pdf.save();
+};
+
+const uploadAcroFormEnvelope = async ({
+  request,
+  token,
+  payload = ACROFORM_DOCUMENT_PAYLOAD,
+  file = ACROFORM_FIXTURE,
+  fileName = 'acroform-import-test.pdf',
+}: {
+  request: APIRequestContext;
+  token: string;
+  payload?: TCreateEnvelopePayload;
+  file?: Uint8Array;
+  fileName?: string;
+}): Promise<TCreateEnvelopeResponse> => {
+  const formData = new FormData();
+
+  formData.append('payload', JSON.stringify(payload));
+  formData.append('files', new File([file], fileName, { type: 'application/pdf' }));
+
+  const res = await request.post(`${baseUrl}/envelope/create`, {
+    headers: { Authorization: `Bearer ${token}` },
+    multipart: formData,
+  });
+
+  expect(res.ok()).toBeTruthy();
+
+  return (await res.json()) as TCreateEnvelopeResponse;
+};
+
+const importAcroFormFieldsWithSession = ({
+  page,
+  teamId,
+  envelopeId,
+}: {
+  page: Page;
+  teamId: number;
+  envelopeId: string;
+}) =>
+  page.context().request.post(`${WEBAPP_BASE_URL}/api/trpc/envelope.field.importFromPdf`, {
+    headers: {
+      'content-type': 'application/json',
+      'x-team-id': String(teamId),
+    },
+    data: JSON.stringify({ json: { envelopeId } }),
+  });
+
+const loadEnvelopeForImport = async (envelopeId: string) =>
+  prisma.envelope.findUniqueOrThrow({
+    where: { id: envelopeId },
+    include: {
+      envelopeItems: { include: { documentData: true } },
+      recipients: true,
+    },
+  });
+
+test.describe.configure({
+  mode: 'parallel',
+});
+
+test.describe('AcroForm Import', () => {
+  test('upload does not create fields and preserves widgets in the stored PDF', async ({ request }) => {
+    const { token } = await seedUserWithApiToken();
+
+    const response = await uploadAcroFormEnvelope({ request, token });
+
+    const envelope = await prisma.envelope.findUniqueOrThrow({
+      where: { id: response.id },
+      include: {
+        envelopeItems: { include: { documentData: true } },
+        fields: true,
+      },
+    });
+
+    expect(envelope.fields).toHaveLength(0);
+
+    const pdfBuffer = await getFileServerSide(envelope.envelopeItems[0].documentData);
+
+    expect(await pdfHasFormFields(pdfBuffer)).toBe(true);
+  });
+
+  test('replacement preserves widgets in the stored PDF for later import', async ({ request }) => {
+    const { token, user } = await seedUserWithApiToken();
+
+    const response = await uploadAcroFormEnvelope({ request, token });
+
+    const envelope = await loadEnvelopeForImport(response.id);
+    const oldDocumentDataId = envelope.envelopeItems[0].documentDataId;
+
+    await UNSAFE_replaceEnvelopeItemPdf({
+      envelope,
+      recipients: envelope.recipients,
+      envelopeItemId: envelope.envelopeItems[0].id,
+      oldDocumentDataId,
+      data: {
+        title: 'Replacement AcroForm document',
+        file: new File([ACROFORM_FIXTURE], 'replacement-acroform.pdf', { type: 'application/pdf' }),
+      },
+      user,
+      apiRequestMetadata: API_REQUEST_METADATA,
+    });
+
+    const after = await prisma.envelope.findUniqueOrThrow({
+      where: { id: response.id },
+      include: {
+        envelopeItems: { include: { documentData: true } },
+        fields: true,
+      },
+    });
+
+    expect(after.fields).toHaveLength(0);
+    expect(after.envelopeItems[0].documentDataId).not.toBe(oldDocumentDataId);
+
+    const pdfBuffer = await getFileServerSide(after.envelopeItems[0].documentData);
+
+    expect(await pdfHasFormFields(pdfBuffer)).toBe(true);
+  });
+
+  test('import creates fields assigned to the signer, flattens the PDF, and emits audit logs', async ({ request }) => {
+    const { token } = await seedUserWithApiToken();
+
+    const response = await uploadAcroFormEnvelope({ request, token });
+
+    const envelope = await loadEnvelopeForImport(response.id);
+    const oldDocumentDataId = envelope.envelopeItems[0].documentDataId;
+
+    const result = await UNSAFE_importAcroFormFieldsFromEnvelope({
+      envelope,
+      apiRequestMetadata: API_REQUEST_METADATA,
+    });
+
+    expect(result.fieldsCreated).toBeGreaterThan(0);
+    expect(result.itemsProcessed).toBe(1);
+
+    const after = await prisma.envelope.findUniqueOrThrow({
+      where: { id: response.id },
+      include: {
+        envelopeItems: { include: { documentData: true } },
+        recipients: true,
+        fields: true,
+      },
+    });
+
+    expect(after.fields.length).toBeGreaterThanOrEqual(8);
+    expect(after.fields.every((f) => f.recipientId === after.recipients[0].id)).toBe(true);
+
+    for (const field of after.fields) {
+      const meta = field.fieldMeta as { source?: string } | null;
+      expect(meta?.source).toBe('acroform');
+    }
+
+    const auditEntries = await prisma.documentAuditLog.findMany({
+      where: { envelopeId: after.id, type: 'FIELD_CREATED' },
+    });
+
+    expect(auditEntries.length).toBe(after.fields.length);
+
+    expect(after.envelopeItems[0].documentDataId).not.toBe(oldDocumentDataId);
+
+    const flattenedPdf = await getFileServerSide(after.envelopeItems[0].documentData);
+
+    expect(await pdfHasFormFields(flattenedPdf)).toBe(false);
+
+    const oldRecord = await prisma.documentData.findUnique({ where: { id: oldDocumentDataId } });
+
+    expect(oldRecord).toBeNull();
+  });
+
+  test('import creates a placeholder Recipient 1 SIGNER when no recipients exist', async ({ request }) => {
+    const { token } = await seedUserWithApiToken();
+
+    const response = await uploadAcroFormEnvelope({
+      request,
+      token,
+      payload: {
+        type: EnvelopeType.DOCUMENT,
+        title: 'AcroForm document without recipients',
+      },
+    });
+
+    const envelope = await loadEnvelopeForImport(response.id);
+
+    expect(envelope.recipients).toHaveLength(0);
+
+    await UNSAFE_importAcroFormFieldsFromEnvelope({
+      envelope,
+      apiRequestMetadata: API_REQUEST_METADATA,
+    });
+
+    const after = await prisma.envelope.findUniqueOrThrow({
+      where: { id: response.id },
+      include: { recipients: true, fields: true },
+    });
+
+    expect(after.recipients).toHaveLength(1);
+    expect(after.recipients[0].email).toBe('recipient.1@documenso.com');
+    expect(after.recipients[0].role).toBe(RecipientRole.SIGNER);
+    expect(after.fields.length).toBeGreaterThanOrEqual(8);
+    expect(after.fields.every((f) => f.recipientId === after.recipients[0].id)).toBe(true);
+  });
+
+  test('import endpoint rejects template envelopes without mutating stored widgets', async ({ page, request }) => {
+    const { token, user, team } = await seedUserWithApiToken();
+
+    const response = await uploadAcroFormEnvelope({
+      request,
+      token,
+      payload: {
+        type: EnvelopeType.TEMPLATE,
+        title: 'AcroForm template',
+      },
+    });
+
+    await apiSignin({ page, email: user.email });
+
+    const res = await importAcroFormFieldsWithSession({
+      page,
+      teamId: team.id,
+      envelopeId: response.id,
+    });
+
+    expect(res.ok()).toBeFalsy();
+    expect(res.status()).toBe(404);
+
+    const after = await prisma.envelope.findUniqueOrThrow({
+      where: { id: response.id },
+      include: {
+        envelopeItems: { include: { documentData: true } },
+        fields: true,
+      },
+    });
+
+    expect(after.fields).toHaveLength(0);
+
+    const pdfBuffer = await getFileServerSide(after.envelopeItems[0].documentData);
+
+    expect(await pdfHasFormFields(pdfBuffer)).toBe(true);
+  });
+
+  test('import does not duplicate fields when signed signatures prevent flattening', async ({ request }) => {
+    const { token } = await seedUserWithApiToken();
+    const signedPdf = await createSignedSignatureAcroFormPdf();
+
+    const response = await uploadAcroFormEnvelope({
+      request,
+      token,
+      file: signedPdf,
+      fileName: 'signed-acroform.pdf',
+    });
+
+    const envelope = await loadEnvelopeForImport(response.id);
+
+    const firstResult = await UNSAFE_importAcroFormFieldsFromEnvelope({
+      envelope,
+      apiRequestMetadata: API_REQUEST_METADATA,
+    });
+
+    expect(firstResult.fieldsCreated).toBeGreaterThan(0);
+    expect(firstResult.itemsProcessed).toBe(1);
+    expect(firstResult.signedSignatureCount).toBe(1);
+
+    const afterFirst = await prisma.envelope.findUniqueOrThrow({
+      where: { id: response.id },
+      include: {
+        envelopeItems: { include: { documentData: true } },
+        fields: true,
+      },
+    });
+    const firstFieldCount = afterFirst.fields.length;
+
+    const preservedPdf = await getFileServerSide(afterFirst.envelopeItems[0].documentData);
+
+    expect(await pdfHasFormFields(preservedPdf)).toBe(true);
+
+    const secondEnvelope = await loadEnvelopeForImport(response.id);
+
+    const secondResult = await UNSAFE_importAcroFormFieldsFromEnvelope({
+      envelope: secondEnvelope,
+      apiRequestMetadata: API_REQUEST_METADATA,
+    });
+
+    expect(secondResult.fieldsCreated).toBe(0);
+    expect(secondResult.itemsProcessed).toBe(0);
+
+    const afterSecond = await prisma.envelope.findUniqueOrThrow({
+      where: { id: response.id },
+      include: { fields: true },
+    });
+
+    expect(afterSecond.fields).toHaveLength(firstFieldCount);
+  });
+});

packages/app-tests/e2e/scenarios/form-flattening.spec.ts

@@ -93,7 +93,7 @@ test.describe('Form Flattening', () => {
   const formFieldsPdf = fs.readFileSync(path.join(__dirname, '../../../../assets/form-fields-test.pdf'));
 
   test.describe('Envelope Creation (DOCUMENT type)', () => {
-    test('should flatten form fields when creating a DOCUMENT envelope with formValues', async ({ request }) => {
+    test('should preserve form fields when creating a DOCUMENT envelope with formValues', async ({ request }) => {
       const { user, team } = await seedUser();
       const { token } = await createApiToken({
         userId: user.id,
@@ -136,16 +136,16 @@ test.describe('Form Flattening', () => {
       expect(envelope.formValues).toEqual(TEST_FORM_VALUES);
       expect(envelope.type).toBe(EnvelopeType.DOCUMENT);
 
-      // Get the PDF and verify form fields are flattened
       const documentData = envelope.envelopeItems[0].documentData;
       const pdfBuffer = await getFileServerSide(documentData);
 
-      const hasFormFields = await pdfHasFormFields(pdfBuffer);
-
-      expect(hasFormFields).toBe(false);
+      expect(await pdfHasFormFields(pdfBuffer)).toBe(true);
+      expect(await getPdfTextFieldValue(pdfBuffer, FORM_FIELDS.TEXT_FIELD)).toBe(
+        TEST_FORM_VALUES[FORM_FIELDS.TEXT_FIELD],
+      );
     });
 
-    test('should flatten form fields when creating a DOCUMENT envelope without formValues', async ({ request }) => {
+    test('should preserve form fields when creating a DOCUMENT envelope without formValues', async ({ request }) => {
       const { user, team } = await seedUser();
       const { token } = await createApiToken({
         userId: user.id,
@@ -157,7 +157,6 @@ test.describe('Form Flattening', () => {
       const payload: TCreateEnvelopePayload = {
         type: EnvelopeType.DOCUMENT,
         title: 'Document without Form Values',
-        // No formValues - but form should still be flattened for DOCUMENT type
       };
 
       const formData = new FormData();
@@ -184,13 +183,10 @@ test.describe('Form Flattening', () => {
         },
       });
 
-      // Get the PDF and verify form fields are flattened
       const documentData = envelope.envelopeItems[0].documentData;
       const pdfBuffer = await getFileServerSide(documentData);
 
-      const hasFormFields = await pdfHasFormFields(pdfBuffer);
-
-      expect(hasFormFields).toBe(false);
+      expect(await pdfHasFormFields(pdfBuffer)).toBe(true);
     });
   });
 
@@ -747,11 +743,10 @@ test.describe('Form Flattening', () => {
         },
       });
 
-      // Form should still be flattened for DOCUMENT type
       const documentData = envelope.envelopeItems[0].documentData;
       const pdfBuffer = await getFileServerSide(documentData);
 
-      expect(await pdfHasFormFields(pdfBuffer)).toBe(false);
+      expect(await pdfHasFormFields(pdfBuffer)).toBe(true);
     });
 
     test('should handle partial formValues (only some fields)', async ({ request }) => {
@@ -798,11 +793,11 @@ test.describe('Form Flattening', () => {
         [FORM_FIELDS.TEXT_FIELD]: 'Only this field',
       });
 
-      // Form should still be flattened
       const documentData = envelope.envelopeItems[0].documentData;
       const pdfBuffer = await getFileServerSide(documentData);
 
-      expect(await pdfHasFormFields(pdfBuffer)).toBe(false);
+      expect(await pdfHasFormFields(pdfBuffer)).toBe(true);
+      expect(await getPdfTextFieldValue(pdfBuffer, FORM_FIELDS.TEXT_FIELD)).toBe('Only this field');
     });
   });
 });

packages/app-tests/e2e/signing-branding.spec.ts

@@ -142,38 +142,3 @@ test('[SIGNING_BRANDING]: embedded signing does not render custom logo Brand Web
   await expect(page.locator(`a[href="${BRANDING_URL}"]`)).toHaveCount(0);
   await expect(page.getByRole('link', { name: `${team.name}'s Logo` })).toHaveCount(0);
 });
-
-test('[SIGNING_BRANDING]: custom logo renders when branding is enabled and is hidden when disabled', async ({
-  page,
-}) => {
-  const { user, team, organisation } = await seedUser();
-
-  await enableOrganisationBranding({
-    organisationGlobalSettingsId: organisation.organisationGlobalSettingsId,
-  });
-
-  const { recipients } = await seedPendingDocumentWithFullFields({
-    owner: user,
-    teamId: team.id,
-    recipients: ['enabled-disabled-branding-signer@test.documenso.com'],
-    fields: [FieldType.SIGNATURE],
-    updateDocumentOptions: { internalVersion: 2 },
-  });
-
-  // Branding enabled → the custom logo is rendered on the signing page.
-  await page.goto(`/sign/${recipients[0].token}`);
-  await expectPlainBrandingLogo(page, `${team.name}'s Logo`);
-
-  // Disable branding while keeping the stored logo (the team inherits this).
-  await prisma.organisationGlobalSettings.update({
-    where: { id: organisation.organisationGlobalSettingsId },
-    data: { brandingEnabled: false },
-  });
-
-  // Branding disabled → the custom logo is gone and the Documenso fallback
-  // (an internal link to "/") is shown instead.
-  await page.goto(`/sign/${recipients[0].token}`);
-
-  await expect(page.getByRole('img', { name: `${team.name}'s Logo` })).toHaveCount(0);
-  await expect(page.locator('a[href="/"]').first()).toBeVisible();
-});

packages/auth/server/types/email-password.ts

@@ -1,4 +1,4 @@
-import { ZNameSchema } from '@documenso/lib/types/name';
+import { ZNameSchema } from '@documenso/lib/constants/auth';
 import { zEmail } from '@documenso/lib/utils/zod';
 import { z } from 'zod';
 

packages/lib/client-only/providers/envelope-render-provider.tsx

@@ -43,6 +43,7 @@ type EnvelopeRenderItem = {
   title: string;
   order: number;
   envelopeId: string;
+  documentDataId: string;
 
   /**
    * The PDF data to render.

packages/lib/constants/auth.ts

@@ -1,10 +1,25 @@
 import MailChecker from 'mailchecker';
+import { z } from 'zod';
 
 import { env } from '../utils/env';
 import { NEXT_PUBLIC_WEBAPP_URL } from './app';
 
 export const SALT_ROUNDS = 12;
 
+export const URL_PATTERN = /https?:\/\/|www\./i;
+
+/**
+ * Shared name schema that disallows URLs to prevent phishing via email rendering.
+ */
+export const ZNameSchema = z
+  .string()
+  .trim()
+  .min(3, { message: 'Please enter a valid name.' })
+  .max(255, { message: 'Name cannot be more than 255 characters.' })
+  .refine((value) => !URL_PATTERN.test(value), {
+    message: 'Name cannot contain URLs.',
+  });
+
 export const IDENTITY_PROVIDER_NAME: Record<string, string> = {
   DOCUMENSO: 'Documenso',
   GOOGLE: 'Google',

packages/lib/constants/branding.ts

@@ -9,13 +9,3 @@
  * cap so a malicious or runaway payload can't exhaust PostCSS/server memory.
  */
 export const BRANDING_CSS_MAX_LENGTH = 256 * 1024;
-
-/**
- * Branding logo upload constraints. Enforced server-side at the TRPC request
- * boundary (`zfdBrandingImageFile`) and reused by the client form for matching UX.
- */
-export const BRANDING_LOGO_MAX_SIZE_MB = 5;
-
-export const BRANDING_LOGO_MAX_SIZE_BYTES = BRANDING_LOGO_MAX_SIZE_MB * 1024 * 1024;
-
-export const BRANDING_LOGO_ALLOWED_TYPES: string[] = ['image/jpeg', 'image/png', 'image/webp'];

packages/lib/server-only/branding/store-branding-logo.ts

@@ -1,26 +0,0 @@
-import { AppError, AppErrorCode } from '../../errors/app-error';
-import { putFileServerSide } from '../../universal/upload/put-file.server';
-import { optimiseBrandingLogo } from '../../utils/images/logo';
-
-/**
- * Validate, sanitise and store an uploaded branding logo. Returns the
- * `JSON.stringify({ type, data })` reference persisted in the `brandingLogo`
- * column (the same format the serving endpoints already expect).
- */
-export const buildBrandingLogoData = async (file: File): Promise<string> => {
-  const buffer = Buffer.from(await file.arrayBuffer());
-
-  const optimised = await optimiseBrandingLogo(buffer).catch(() => {
-    throw new AppError(AppErrorCode.INVALID_BODY, {
-      message: 'The branding logo must be a valid image file.',
-    });
-  });
-
-  const documentData = await putFileServerSide({
-    name: 'branding-logo.png',
-    type: 'image/png',
-    arrayBuffer: async () => Promise.resolve(optimised),
-  });
-
-  return JSON.stringify(documentData);
-};

packages/lib/server-only/envelope-item/create-envelope-items.ts

@@ -54,7 +54,7 @@ export const UNSAFE_createEnvelopeItems = async ({
       }
 
       const normalized = await normalizePdf(buffer, {
-        flattenForm: envelope.type !== 'TEMPLATE',
+        flattenForm: false,
       });
 
       const { cleanedPdf, placeholders } = await extractPdfPlaceholders(normalized);

packages/lib/server-only/envelope-item/import-acroform-fields.ts

@@ -0,0 +1,349 @@
+import { prisma } from '@documenso/prisma';
+import type { DocumentData, Envelope, EnvelopeItem, Field, Recipient } from '@prisma/client';
+import { EnvelopeType, RecipientRole, SendStatus, SigningStatus } from '@prisma/client';
+import { AppError, AppErrorCode } from '../../errors/app-error';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import type { ApiRequestMetadata } from '../../universal/extract-request-metadata';
+import { nanoid } from '../../universal/id';
+import { getFileServerSide } from '../../universal/upload/get-file.server';
+import { putPdfFileServerSide } from '../../universal/upload/put-file.server';
+import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
+import { logger } from '../../utils/logger';
+import {
+  type AcroFormExtractionResult,
+  type AcroFormSkipReason,
+  convertAcroFormFieldsToFieldInputs,
+  extractAcroFormFieldsFromPDF,
+} from '../pdf/acroform-fields';
+import { normalizePdf } from '../pdf/normalize-pdf';
+
+type UnsafeImportAcroFormFieldsOptions = {
+  envelope: Pick<Envelope, 'id' | 'type' | 'formValues'> & {
+    envelopeItems: (Pick<EnvelopeItem, 'id' | 'title' | 'documentDataId'> & {
+      documentData: DocumentData;
+    })[];
+    recipients: Recipient[];
+  };
+  apiRequestMetadata: ApiRequestMetadata;
+};
+
+type PerItemSkip = {
+  envelopeItemId: string;
+  envelopeItemTitle: string;
+  reason: AcroFormSkipReason;
+};
+
+export type ImportAcroFormFieldsResult = {
+  itemsProcessed: number;
+  fieldsCreated: number;
+  unsupportedCount: number;
+  signedSignatureCount: number;
+  skippedItems: PerItemSkip[];
+  fields: Field[];
+};
+
+type PreparedItem = {
+  envelopeItemId: string;
+  envelopeItemTitle: string;
+  oldDocumentDataId: string;
+  extraction: AcroFormExtractionResult;
+  newDocumentData?: DocumentData;
+};
+
+export const UNSAFE_importAcroFormFieldsFromEnvelope = async ({
+  envelope,
+  apiRequestMetadata,
+}: UnsafeImportAcroFormFieldsOptions): Promise<ImportAcroFormFieldsResult> => {
+  if (envelope.type !== EnvelopeType.DOCUMENT) {
+    throw new AppError(AppErrorCode.INVALID_REQUEST, {
+      message: 'AcroForm import is only supported for document envelopes',
+    });
+  }
+
+  const prepared: PreparedItem[] = await Promise.all(
+    envelope.envelopeItems.map(async (item): Promise<PreparedItem> => {
+      const buffer = await getFileServerSide(item.documentData);
+
+      const extraction = await extractAcroFormFieldsFromPDF(Buffer.from(buffer), {
+        formValuesProvided: Boolean(envelope.formValues),
+      });
+
+      if (extraction.skipReason) {
+        logger.info(
+          {
+            event: 'acroform-import.skip',
+            envelopeItemId: item.id,
+            envelopeItemTitle: item.title,
+            reason: extraction.skipReason,
+          },
+          'AcroForm extraction skipped',
+        );
+      }
+
+      if (extraction.unsupported.length > 0) {
+        const byReason: Record<string, number> = {};
+
+        for (const entry of extraction.unsupported) {
+          byReason[entry.reason] = (byReason[entry.reason] ?? 0) + 1;
+        }
+
+        logger.info(
+          {
+            event: 'acroform-import.unsupported',
+            envelopeItemId: item.id,
+            envelopeItemTitle: item.title,
+            count: extraction.unsupported.length,
+            byReason,
+          },
+          'AcroForm import skipped unsupported widgets',
+        );
+      }
+
+      if (extraction.hasSignedSignature) {
+        logger.warn(
+          {
+            event: 'acroform-import.signed-pdf-no-flatten',
+            envelopeItemId: item.id,
+            envelopeItemTitle: item.title,
+          },
+          'Signed AcroForm signature detected — skipping flatten to preserve signature',
+        );
+      }
+
+      const base: PreparedItem = {
+        envelopeItemId: item.id,
+        envelopeItemTitle: item.title,
+        oldDocumentDataId: item.documentDataId,
+        extraction,
+      };
+
+      if (extraction.fields.length === 0 || extraction.hasSignedSignature) {
+        return base;
+      }
+
+      const flattened = await normalizePdf(Buffer.from(buffer), {
+        flattenForm: true,
+      });
+
+      const { documentData: newDocumentData } = await putPdfFileServerSide({
+        name: item.title,
+        type: 'application/pdf',
+        arrayBuffer: async () => Promise.resolve(flattened),
+      });
+
+      return {
+        ...base,
+        newDocumentData,
+      };
+    }),
+  );
+
+  const totalFieldsToCreate = prepared.reduce((sum, p) => sum + p.extraction.fields.length, 0);
+  const unsupportedCount = prepared.reduce((sum, p) => sum + p.extraction.unsupported.length, 0);
+  const signedSignatureCount = prepared.filter((p) => p.extraction.hasSignedSignature).length;
+
+  const skippedItems: PerItemSkip[] = [];
+
+  for (const p of prepared) {
+    const reason = p.extraction.skipReason;
+
+    if (!reason) {
+      continue;
+    }
+
+    skippedItems.push({
+      envelopeItemId: p.envelopeItemId,
+      envelopeItemTitle: p.envelopeItemTitle,
+      reason,
+    });
+  }
+
+  if (totalFieldsToCreate === 0) {
+    return {
+      itemsProcessed: 0,
+      fieldsCreated: 0,
+      unsupportedCount,
+      signedSignatureCount,
+      skippedItems,
+      fields: [],
+    };
+  }
+
+  const { createdFields, importedItemsCount } = await prisma.$transaction(async (tx) => {
+    const pickFirstSignableRecipient = (recipients: Pick<Recipient, 'id' | 'email' | 'role' | 'signingOrder'>[]) => {
+      const signable = recipients.filter((r) => r.role === RecipientRole.SIGNER || r.role === RecipientRole.APPROVER);
+
+      if (signable.length === 0) {
+        return null;
+      }
+
+      return signable.sort((a, b) => {
+        const aOrder = a.signingOrder ?? Number.MAX_SAFE_INTEGER;
+        const bOrder = b.signingOrder ?? Number.MAX_SAFE_INTEGER;
+
+        if (aOrder !== bOrder) {
+          return aOrder - bOrder;
+        }
+
+        return a.id - b.id;
+      })[0];
+    };
+
+    const signedItemIds = prepared
+      .filter((item) => item.extraction.hasSignedSignature && item.extraction.fields.length > 0)
+      .map((item) => item.envelopeItemId);
+
+    const alreadyImportedSignedItemIds = new Set<string>();
+
+    if (signedItemIds.length > 0) {
+      const existingImportedFields = await tx.field.findMany({
+        where: {
+          envelopeId: envelope.id,
+          envelopeItemId: {
+            in: signedItemIds,
+          },
+        },
+        select: {
+          envelopeItemId: true,
+          fieldMeta: true,
+        },
+      });
+
+      for (const field of existingImportedFields) {
+        const fieldMeta = field.fieldMeta;
+
+        if (
+          fieldMeta &&
+          typeof fieldMeta === 'object' &&
+          !Array.isArray(fieldMeta) &&
+          (fieldMeta as { source?: unknown }).source === 'acroform'
+        ) {
+          alreadyImportedSignedItemIds.add(field.envelopeItemId);
+        }
+      }
+    }
+
+    const itemsToImport = prepared.filter((item) => {
+      if (item.extraction.fields.length === 0) {
+        return false;
+      }
+
+      return !(item.extraction.hasSignedSignature && alreadyImportedSignedItemIds.has(item.envelopeItemId));
+    });
+
+    const createdFields: Field[] = [];
+
+    if (itemsToImport.length === 0) {
+      return { createdFields, importedItemsCount: 0 };
+    }
+
+    let recipient = pickFirstSignableRecipient(
+      await tx.recipient.findMany({
+        where: { envelopeId: envelope.id },
+        select: { id: true, email: true, role: true, signingOrder: true },
+      }),
+    );
+
+    if (!recipient) {
+      const placeholderEmail = 'recipient.1@documenso.com';
+
+      recipient = await tx.recipient.create({
+        data: {
+          envelopeId: envelope.id,
+          email: placeholderEmail,
+          name: 'Recipient 1',
+          role: RecipientRole.SIGNER,
+          signingOrder: 1,
+          token: nanoid(),
+          sendStatus: SendStatus.NOT_SENT,
+          signingStatus: SigningStatus.NOT_SIGNED,
+        },
+        select: { id: true, email: true, role: true, signingOrder: true },
+      });
+    }
+
+    let importedItemsCount = 0;
+
+    for (const item of itemsToImport) {
+      if (item.newDocumentData) {
+        await tx.envelopeItem.update({
+          where: { id: item.envelopeItemId },
+          data: { documentDataId: item.newDocumentData.id },
+        });
+      }
+
+      const fieldsToCreate = convertAcroFormFieldsToFieldInputs(
+        item.extraction.fields,
+        () => recipient,
+        item.envelopeItemId,
+      );
+
+      const itemCreatedFields = await tx.field.createManyAndReturn({
+        data: fieldsToCreate.map((field) => ({
+          envelopeId: envelope.id,
+          envelopeItemId: item.envelopeItemId,
+          recipientId: field.recipientId,
+          type: field.type,
+          page: field.page,
+          positionX: field.positionX,
+          positionY: field.positionY,
+          width: field.width,
+          height: field.height,
+          customText: '',
+          inserted: false,
+          fieldMeta: field.fieldMeta || undefined,
+        })),
+      });
+
+      createdFields.push(...itemCreatedFields);
+      importedItemsCount += 1;
+
+      if (envelope.type === EnvelopeType.DOCUMENT) {
+        await tx.documentAuditLog.createMany({
+          data: itemCreatedFields.map((createdField) =>
+            createDocumentAuditLogData({
+              type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_CREATED,
+              envelopeId: envelope.id,
+              metadata: apiRequestMetadata,
+              data: {
+                fieldId: createdField.secondaryId,
+                fieldRecipientEmail: recipient.email,
+                fieldRecipientId: createdField.recipientId,
+                fieldType: createdField.type,
+              },
+            }),
+          ),
+        });
+      }
+    }
+
+    return { createdFields, importedItemsCount };
+  });
+
+  await Promise.all(
+    prepared
+      .filter((p) => p.newDocumentData !== undefined)
+      .map((p) =>
+        prisma.documentData.delete({ where: { id: p.oldDocumentDataId } }).catch((err) => {
+          logger.error(
+            {
+              event: 'acroform-import.delete-old-document-data-failed',
+              envelopeItemId: p.envelopeItemId,
+              oldDocumentDataId: p.oldDocumentDataId,
+              err,
+            },
+            'Failed to delete orphaned DocumentData after AcroForm import',
+          );
+        }),
+      ),
+  );
+
+  return {
+    itemsProcessed: importedItemsCount,
+    fieldsCreated: createdFields.length,
+    unsupportedCount,
+    signedSignatureCount,
+    skippedItems,
+    fields: createdFields,
+  };
+};

packages/lib/server-only/envelope-item/replace-envelope-item-pdf.ts

@@ -82,7 +82,7 @@ export const UNSAFE_replaceEnvelopeItemPdf = async ({
   }
 
   const normalized = await normalizePdf(buffer, {
-    flattenForm: envelope.type !== 'TEMPLATE',
+    flattenForm: false,
   });
 
   const { cleanedPdf, placeholders } = await extractPdfPlaceholders(normalized);

packages/lib/server-only/pdf/acroform-fields.ts

@@ -0,0 +1,834 @@
+import {
+  PDF,
+  type PDFPage,
+  type PdfDict,
+  type PdfObject,
+  type PdfRef,
+  type PdfStream,
+  type PdfString,
+} from '@libpdf/core';
+import { FieldType, type Recipient } from '@prisma/client';
+import {
+  FIELD_CHECKBOX_META_DEFAULT_VALUES,
+  FIELD_DATE_META_DEFAULT_VALUES,
+  FIELD_DROPDOWN_META_DEFAULT_VALUES,
+  FIELD_EMAIL_META_DEFAULT_VALUES,
+  FIELD_INITIALS_META_DEFAULT_VALUES,
+  FIELD_NAME_META_DEFAULT_VALUES,
+  FIELD_NUMBER_META_DEFAULT_VALUES,
+  FIELD_RADIO_META_DEFAULT_VALUES,
+  FIELD_SIGNATURE_META_DEFAULT_VALUES,
+  FIELD_TEXT_META_DEFAULT_VALUES,
+  type TCheckboxFieldMeta,
+  type TDropdownFieldMeta,
+  type TFieldAndMeta,
+  type TNumberFieldMeta,
+  type TRadioFieldMeta,
+  type TTextFieldMeta,
+  ZEnvelopeFieldAndMetaSchema,
+} from '../../types/field-meta';
+import { logger } from '../../utils/logger';
+import type { FieldToCreate } from './auto-place-fields';
+
+/**
+ * Local shape for the widget annotations returned by @libpdf/core.
+ *
+ * The library exposes WidgetAnnotation as a class but does not re-export the
+ * type from its public surface. We duck-type the subset we actually read.
+ */
+type WidgetAnnotation = {
+  readonly rect: [number, number, number, number];
+  readonly width: number;
+  readonly height: number;
+  readonly pageRef: PdfRef | null;
+  isHidden(): boolean;
+  getOnValue(): string | null;
+};
+
+/**
+ * Function shape that follows a {@link PdfRef} to the referenced object.
+ *
+ * `@libpdf/core` does not re-export the `RefResolver` type alias, so we redeclare
+ * it locally. Built via {@link makeResolver} from a loaded {@link PDF}.
+ */
+type RefResolver = (ref: PdfRef) => PdfObject | null;
+
+const makeResolver =
+  (pdfDoc: PDF): RefResolver =>
+  (ref: PdfRef) =>
+    pdfDoc.context.resolve(ref);
+
+const DEFAULT_FIELD_HEIGHT_PERCENT = 2;
+const MIN_HEIGHT_THRESHOLD = 0.01;
+
+const DATE_NAME_PATTERN = /date|dob|birth/i;
+const NUMBER_NAME_PATTERN = /amount|qty|count|number/i;
+const EMAIL_NAME_PATTERN = /email|e[-_]?mail/i;
+const NAME_NAME_PATTERN = /name/i;
+const INITIALS_NAME_PATTERN = /initial/i;
+
+const ROW_TOLERANCE_PERCENT = 2;
+const ACROFORM_FIELD_SOURCE = 'acroform';
+
+export type AcroFormUnsupportedReason =
+  | 'unsupported-type'
+  | 'hidden'
+  | 'off-page'
+  | 'zero-size'
+  | 'no-page-match'
+  | 'signed-signature'
+  | 'rotated-out-of-bounds';
+
+export type AcroFormSkipReason = 'encrypted' | 'xfa-hybrid' | 'no-form' | 'error';
+
+export type AcroFormFieldImportInfo = {
+  source: 'acroform';
+  fieldName: string;
+  widgetIndex: number;
+  fieldAndMeta: TFieldAndMeta;
+  page: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  pageWidth: number;
+  pageHeight: number;
+};
+
+export type AcroFormUnsupportedFieldInfo = {
+  fieldName: string;
+  acroFormType: string;
+  reason: AcroFormUnsupportedReason;
+};
+
+export type AcroFormExtractionResult = {
+  fields: AcroFormFieldImportInfo[];
+  unsupported: AcroFormUnsupportedFieldInfo[];
+  /**
+   * True when a signed signature widget was found.
+   *
+   * Callers MUST set `flattenForm: false` for that envelope item so the signed
+   * PDF is not re-flattened (which would invalidate the signature).
+   */
+  hasSignedSignature: boolean;
+  /**
+   * Set when extraction returned empty for a reason that should be surfaced in
+   * logs but not propagated to the user. Absent when extraction ran normally.
+   */
+  skipReason?: AcroFormSkipReason;
+};
+
+type ResolvedGeometry = {
+  page: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  pageWidth: number;
+  pageHeight: number;
+};
+
+const EMPTY_RESULT = (skipReason?: AcroFormSkipReason): AcroFormExtractionResult => ({
+  fields: [],
+  unsupported: [],
+  hasSignedSignature: false,
+  skipReason,
+});
+
+/**
+ * Detect XFA-hybrid PDFs by inspecting the catalog's `/AcroForm` dict for an
+ * `/XFA` key.
+ *
+ * Uses public accessors (`pdf.context.catalog.getDict()`) and a {@link RefResolver}
+ * so an indirect `/AcroForm` entry is followed. Returns `false` on any error
+ * (e.g. malformed catalog) so the caller can fall through to normal extraction.
+ */
+const hasXfa = (pdfDoc: PDF, resolver: RefResolver): boolean => {
+  try {
+    const catalogDict = pdfDoc.context.catalog.getDict();
+    const acroFormDict = catalogDict.getDict('AcroForm', resolver);
+
+    return Boolean(acroFormDict?.has('XFA'));
+  } catch {
+    return false;
+  }
+};
+
+const isDateFieldByName = (name: string | null | undefined): boolean => !!name && DATE_NAME_PATTERN.test(name);
+
+const isNumberFieldByName = (name: string | null | undefined): boolean => !!name && NUMBER_NAME_PATTERN.test(name);
+
+const isEmailFieldByName = (name: string | null | undefined): boolean => !!name && EMAIL_NAME_PATTERN.test(name);
+
+const isNameFieldByName = (name: string | null | undefined): boolean => !!name && NAME_NAME_PATTERN.test(name);
+
+const isInitialsFieldByName = (name: string | null | undefined): boolean => !!name && INITIALS_NAME_PATTERN.test(name);
+
+/**
+ * Detect AcroForm format actions on a text field dictionary.
+ *
+ * Adobe attaches a JavaScript format action via `/AA` → `/F` → `/JS`. The script
+ * body references `AFDate_FormatEx` or `AFNumber_Format` depending on the
+ * intended format. The action dict and its `/F` entry are frequently stored
+ * as indirect refs in real-world PDFs, so a {@link RefResolver} MUST be
+ * threaded through the lookups. We do a string-contains check on the script
+ * to avoid pulling in a JS parser.
+ */
+const getTextFieldFormatHint = (fieldDict: PdfDict, resolver: RefResolver): 'date' | 'number' | null => {
+  try {
+    const formatDict = fieldDict.getDict('AA', resolver)?.getDict('F', resolver);
+
+    if (!formatDict) {
+      return null;
+    }
+
+    const js = formatDict.get('JS', resolver);
+
+    if (!js || typeof js !== 'object') {
+      return null;
+    }
+
+    let script: string;
+
+    if (js.type === 'string') {
+      script = (js as PdfString).asString();
+    } else if (js.type === 'stream') {
+      script = new TextDecoder().decode((js as PdfStream).getDecodedData());
+    } else {
+      return null;
+    }
+
+    if (script.includes('AFDate_FormatEx') || script.includes('AFDate_Format')) {
+      return 'date';
+    }
+
+    if (script.includes('AFNumber_Format')) {
+      return 'number';
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+};
+
+type FormFieldWithDict = {
+  name: string;
+  partialName: string;
+  alternateName: string | null;
+  isReadOnly(): boolean;
+  isRequired(): boolean;
+  acroField(): PdfDict;
+  getWidgets(): WidgetAnnotation[];
+};
+
+type ResolvedTextDocumensoType =
+  | typeof FieldType.TEXT
+  | typeof FieldType.DATE
+  | typeof FieldType.NUMBER
+  | typeof FieldType.EMAIL
+  | typeof FieldType.NAME
+  | typeof FieldType.INITIALS;
+
+const resolveTextSubtype = (
+  field: FormFieldWithDict,
+  resolver: RefResolver,
+): {
+  documensoType: ResolvedTextDocumensoType;
+} => {
+  const candidateNames = [field.partialName, field.alternateName];
+
+  const formatHint = getTextFieldFormatHint(field.acroField(), resolver);
+
+  // AcroForm format actions take precedence over name tokens — Adobe set them
+  // explicitly, so they're a stronger signal than a heuristic regex hit.
+  if (formatHint === 'date') {
+    return { documensoType: FieldType.DATE };
+  }
+
+  if (formatHint === 'number') {
+    return { documensoType: FieldType.NUMBER };
+  }
+
+  const maxLen = field.acroField().getNumber('MaxLen', resolver)?.value ?? Number.POSITIVE_INFINITY;
+
+  if (candidateNames.some(isDateFieldByName)) {
+    return { documensoType: FieldType.DATE };
+  }
+
+  if (maxLen <= 10 && candidateNames.some(isNumberFieldByName)) {
+    return { documensoType: FieldType.NUMBER };
+  }
+
+  if (candidateNames.some(isEmailFieldByName)) {
+    return { documensoType: FieldType.EMAIL };
+  }
+
+  if (candidateNames.some(isNameFieldByName)) {
+    return { documensoType: FieldType.NAME };
+  }
+
+  if (candidateNames.some(isInitialsFieldByName)) {
+    return { documensoType: FieldType.INITIALS };
+  }
+
+  return { documensoType: FieldType.TEXT };
+};
+
+const pickLabel = (field: FormFieldWithDict): string | undefined => {
+  // /TU is the human-facing tooltip/label; /T is the internal field identifier.
+  return field.alternateName || undefined;
+};
+
+type RotationDegrees = 0 | 90 | 180 | 270;
+
+type RawRect = { x1: number; y1: number; x2: number; y2: number };
+
+const getRectFromWidget = (widget: WidgetAnnotation): RawRect | null => {
+  const rect = widget.rect;
+
+  if (!rect || rect.length !== 4) {
+    return null;
+  }
+
+  const [x1, y1, x2, y2] = rect;
+
+  if (![x1, y1, x2, y2].every((v) => Number.isFinite(v))) {
+    return null;
+  }
+
+  return { x1, y1, x2, y2 };
+};
+
+const resolveGeometry = (
+  widget: WidgetAnnotation,
+  pageIndex: number,
+  page: PDFPage,
+): { geometry: ResolvedGeometry | null; reason: AcroFormUnsupportedReason | null } => {
+  const rect = getRectFromWidget(widget);
+
+  if (!rect) {
+    return { geometry: null, reason: 'zero-size' };
+  }
+
+  const xL = Math.min(rect.x1, rect.x2);
+  const xR = Math.max(rect.x1, rect.x2);
+  const yB = Math.min(rect.y1, rect.y2);
+  const yT = Math.max(rect.y1, rect.y2);
+
+  if (xR - xL <= 0 || yT - yB <= 0) {
+    return { geometry: null, reason: 'zero-size' };
+  }
+
+  const mediaBox = page.getMediaBox();
+  const mediaW = mediaBox.width;
+  const mediaH = mediaBox.height;
+  const rotation = page.rotation as RotationDegrees;
+
+  // PDFPage.width / .height return rotation-adjusted dimensions, which is what
+  // we want for percent-based positioning relative to the rendered page.
+  const renderedW = page.width;
+  const renderedH = page.height;
+
+  let renderedX: number;
+  let renderedY: number;
+  let renderedFieldW: number;
+  let renderedFieldH: number;
+
+  if (rotation === 90) {
+    renderedX = yB;
+    renderedY = xL;
+    renderedFieldW = yT - yB;
+    renderedFieldH = xR - xL;
+  } else if (rotation === 180) {
+    renderedX = mediaW - xR;
+    renderedY = yB;
+    renderedFieldW = xR - xL;
+    renderedFieldH = yT - yB;
+  } else if (rotation === 270) {
+    renderedX = mediaH - yT;
+    renderedY = mediaW - xR;
+    renderedFieldW = yT - yB;
+    renderedFieldH = xR - xL;
+  } else {
+    renderedX = xL;
+    renderedY = mediaH - yT;
+    renderedFieldW = xR - xL;
+    renderedFieldH = yT - yB;
+  }
+
+  // Out-of-bounds: skip if the entire rect is outside the rendered page bounds.
+  const left = renderedX;
+  const right = renderedX + renderedFieldW;
+  const top = renderedY;
+  const bottom = renderedY + renderedFieldH;
+
+  if (right <= 0 || left >= renderedW || bottom <= 0 || top >= renderedH) {
+    return { geometry: null, reason: 'off-page' };
+  }
+
+  // Partial out-of-bounds: clamp.
+  const clampedLeft = Math.max(0, Math.min(left, renderedW));
+  const clampedRight = Math.max(0, Math.min(right, renderedW));
+  const clampedTop = Math.max(0, Math.min(top, renderedH));
+  const clampedBottom = Math.max(0, Math.min(bottom, renderedH));
+
+  const clampedW = clampedRight - clampedLeft;
+  const clampedH = clampedBottom - clampedTop;
+
+  if (clampedW <= 0 || clampedH <= 0) {
+    return { geometry: null, reason: 'off-page' };
+  }
+
+  return {
+    geometry: {
+      page: pageIndex + 1,
+      x: clampedLeft,
+      y: clampedTop,
+      width: clampedW,
+      height: clampedH,
+      pageWidth: renderedW,
+      pageHeight: renderedH,
+    },
+    reason: null,
+  };
+};
+
+const buildSignatureFieldAndMeta = (field: FormFieldWithDict): TFieldAndMeta => {
+  return ZEnvelopeFieldAndMetaSchema.parse({
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      ...FIELD_SIGNATURE_META_DEFAULT_VALUES,
+      required: field.isRequired() || undefined,
+      readOnly: field.isReadOnly() || undefined,
+      source: ACROFORM_FIELD_SOURCE,
+    },
+  });
+};
+
+const buildTextFieldAndMeta = (
+  field: FormFieldWithDict,
+  documensoType: ResolvedTextDocumensoType,
+  defaultText: string | undefined,
+): TFieldAndMeta => {
+  const label = pickLabel(field);
+  const required = field.isRequired() || undefined;
+  const readOnly = field.isReadOnly() || undefined;
+
+  const defaultValue = defaultText && defaultText.length > 0 ? defaultText : undefined;
+  if (documensoType === FieldType.NUMBER) {
+    const fieldMeta: TNumberFieldMeta = {
+      ...FIELD_NUMBER_META_DEFAULT_VALUES,
+      label: label ?? FIELD_NUMBER_META_DEFAULT_VALUES.label,
+      required,
+      readOnly,
+      source: ACROFORM_FIELD_SOURCE,
+      value: defaultValue,
+    };
+
+    return ZEnvelopeFieldAndMetaSchema.parse({ type: documensoType, fieldMeta });
+  }
+
+  if (documensoType === FieldType.TEXT) {
+    const fieldMeta: TTextFieldMeta = {
+      ...FIELD_TEXT_META_DEFAULT_VALUES,
+      label: label ?? FIELD_TEXT_META_DEFAULT_VALUES.label,
+      required,
+      readOnly,
+      source: ACROFORM_FIELD_SOURCE,
+      text: defaultValue ?? FIELD_TEXT_META_DEFAULT_VALUES.text,
+    };
+
+    return ZEnvelopeFieldAndMetaSchema.parse({ type: documensoType, fieldMeta });
+  }
+
+  if (documensoType === FieldType.DATE) {
+    return ZEnvelopeFieldAndMetaSchema.parse({
+      type: documensoType,
+      fieldMeta: {
+        ...FIELD_DATE_META_DEFAULT_VALUES,
+        label,
+        required,
+        readOnly,
+        source: ACROFORM_FIELD_SOURCE,
+      },
+    });
+  }
+
+  if (documensoType === FieldType.EMAIL) {
+    return ZEnvelopeFieldAndMetaSchema.parse({
+      type: documensoType,
+      fieldMeta: {
+        ...FIELD_EMAIL_META_DEFAULT_VALUES,
+        label,
+        required,
+        readOnly,
+        source: ACROFORM_FIELD_SOURCE,
+      },
+    });
+  }
+
+  if (documensoType === FieldType.NAME) {
+    return ZEnvelopeFieldAndMetaSchema.parse({
+      type: documensoType,
+      fieldMeta: {
+        ...FIELD_NAME_META_DEFAULT_VALUES,
+        label,
+        required,
+        readOnly,
+        source: ACROFORM_FIELD_SOURCE,
+      },
+    });
+  }
+
+  return ZEnvelopeFieldAndMetaSchema.parse({
+    type: documensoType,
+    fieldMeta: {
+      ...FIELD_INITIALS_META_DEFAULT_VALUES,
+      label,
+      required,
+      readOnly,
+      source: ACROFORM_FIELD_SOURCE,
+    },
+  });
+};
+
+const buildCheckboxFieldAndMeta = (
+  field: FormFieldWithDict,
+  onValue: string | undefined,
+  isChecked: boolean,
+): TFieldAndMeta => {
+  const required = field.isRequired();
+  const value = onValue && onValue.length > 0 ? onValue : 'Yes';
+
+  const fieldMeta: TCheckboxFieldMeta = {
+    ...FIELD_CHECKBOX_META_DEFAULT_VALUES,
+    label: pickLabel(field) ?? FIELD_CHECKBOX_META_DEFAULT_VALUES.label,
+    required: required || undefined,
+    readOnly: field.isReadOnly() || undefined,
+    source: ACROFORM_FIELD_SOURCE,
+    values: [{ id: 1, checked: isChecked, value }],
+    validationRule: required ? 'at-least' : '',
+    validationLength: required ? 1 : 0,
+  };
+
+  return ZEnvelopeFieldAndMetaSchema.parse({ type: FieldType.CHECKBOX, fieldMeta });
+};
+
+const buildRadioFieldAndMeta = (
+  field: FormFieldWithDict,
+  options: string[],
+  selectedValue: string | null,
+  widgetOnValue: string | null,
+): TFieldAndMeta => {
+  const values =
+    options.length > 0
+      ? options.map((value, index) => ({
+          id: index + 1,
+          checked: selectedValue !== null && value === selectedValue,
+          value,
+        }))
+      : [
+          {
+            id: 1,
+            checked: widgetOnValue !== null && widgetOnValue === selectedValue,
+            value: widgetOnValue ?? '',
+          },
+        ];
+
+  const fieldMeta: TRadioFieldMeta = {
+    ...FIELD_RADIO_META_DEFAULT_VALUES,
+    label: pickLabel(field) ?? '',
+    required: field.isRequired() || undefined,
+    readOnly: field.isReadOnly() || undefined,
+    source: ACROFORM_FIELD_SOURCE,
+    values,
+  };
+
+  return ZEnvelopeFieldAndMetaSchema.parse({ type: FieldType.RADIO, fieldMeta });
+};
+
+const buildDropdownFieldAndMeta = (
+  field: FormFieldWithDict,
+  options: string[],
+  defaultValue: string | undefined,
+): TFieldAndMeta => {
+  const fieldMeta: TDropdownFieldMeta = {
+    ...FIELD_DROPDOWN_META_DEFAULT_VALUES,
+    label: pickLabel(field) ?? '',
+    required: field.isRequired() || undefined,
+    readOnly: field.isReadOnly() || undefined,
+    source: ACROFORM_FIELD_SOURCE,
+    values: options.length > 0 ? options.map((value) => ({ value })) : FIELD_DROPDOWN_META_DEFAULT_VALUES.values,
+    defaultValue: defaultValue ?? '',
+  };
+
+  return ZEnvelopeFieldAndMetaSchema.parse({ type: FieldType.DROPDOWN, fieldMeta });
+};
+
+type WidgetWithPage = { widget: WidgetAnnotation; pageIndex: number; page: PDFPage };
+
+const resolveWidgetPages = (
+  widgets: WidgetAnnotation[],
+  pageByRef: Map<PdfRef, { index: number; page: PDFPage }>,
+): {
+  matched: WidgetWithPage[];
+  unmatched: WidgetAnnotation[];
+} => {
+  const matched: WidgetWithPage[] = [];
+  const unmatched: WidgetAnnotation[] = [];
+
+  for (const widget of widgets) {
+    const pageRef = widget.pageRef;
+    const resolved = pageRef ? pageByRef.get(pageRef) : null;
+
+    if (!resolved) {
+      unmatched.push(widget);
+      continue;
+    }
+
+    matched.push({ widget, pageIndex: resolved.index, page: resolved.page });
+  }
+
+  return { matched, unmatched };
+};
+
+export type ExtractAcroFormOptions = {
+  /**
+   * When true, `insertFormValuesInPdf` already ran for this buffer. The
+   * extractor will not copy AcroForm default values into `fieldMeta` to
+   * avoid duplicating values that are already baked into the flattened PDF.
+   */
+  formValuesProvided?: boolean;
+};
+
+/**
+ * Extract AcroForm fields from a PDF and convert them to Documenso field
+ * imports.
+ *
+ * Runs before flattening so widget geometry is still present in the buffer.
+ * Returns an empty result for non-AcroForm PDFs, encrypted PDFs, pure XFA forms
+ * with no AcroForm widgets, and on any internal error (with `skipReason` set so
+ * callers can log).
+ */
+export const extractAcroFormFieldsFromPDF = async (
+  pdf: Buffer,
+  options: ExtractAcroFormOptions = {},
+): Promise<AcroFormExtractionResult> => {
+  try {
+    const pdfDoc = await PDF.load(new Uint8Array(pdf));
+
+    if (pdfDoc.isEncrypted) {
+      return EMPTY_RESULT('encrypted');
+    }
+
+    const resolver = makeResolver(pdfDoc);
+
+    const hasXfaForm = hasXfa(pdfDoc, resolver);
+    const form = pdfDoc.getForm();
+
+    if (!form) {
+      return EMPTY_RESULT(hasXfaForm ? 'xfa-hybrid' : 'no-form');
+    }
+
+    const formFields = form.getFields();
+
+    if (hasXfaForm && formFields.length === 0) {
+      return EMPTY_RESULT('xfa-hybrid');
+    }
+
+    const pages = pdfDoc.getPages();
+    const pageByRef = new Map<PdfRef, { index: number; page: PDFPage }>();
+
+    pages.forEach((page, index) => {
+      pageByRef.set(page.ref, { index, page });
+    });
+
+    const fields: AcroFormFieldImportInfo[] = [];
+    const unsupported: AcroFormUnsupportedFieldInfo[] = [];
+    let hasSignedSignature = false;
+    const usePdfDefaults = !options.formValuesProvided;
+    const addUnsupported = (fieldName: string, acroFormType: string, reason: AcroFormUnsupportedReason): void => {
+      unsupported.push({ fieldName, acroFormType, reason });
+    };
+
+    for (const field of formFields) {
+      const acroFormType = field.type;
+
+      if (
+        acroFormType === 'listbox' ||
+        acroFormType === 'button' ||
+        acroFormType === 'unknown' ||
+        acroFormType === 'non-terminal'
+      ) {
+        addUnsupported(field.name, acroFormType, 'unsupported-type');
+        continue;
+      }
+
+      // Signed signature widgets are skipped entirely and the caller is asked
+      // to keep the form intact (no flatten) so the signature stays valid.
+      if (acroFormType === 'signature') {
+        type SignatureFieldDuck = FormFieldWithDict & { isSigned(): boolean };
+        const sigField = field as unknown as SignatureFieldDuck;
+
+        if (typeof sigField.isSigned === 'function' && sigField.isSigned()) {
+          hasSignedSignature = true;
+          addUnsupported(field.name, acroFormType, 'signed-signature');
+          continue;
+        }
+      }
+
+      const formField = field as unknown as FormFieldWithDict;
+      const widgets = formField.getWidgets();
+      const { matched, unmatched } = resolveWidgetPages(widgets, pageByRef);
+
+      for (let i = 0; i < unmatched.length; i += 1) {
+        addUnsupported(field.name, acroFormType, 'no-page-match');
+      }
+
+      let widgetCounter = 0;
+
+      for (const { widget, pageIndex, page } of matched) {
+        if (widget.isHidden()) {
+          addUnsupported(field.name, acroFormType, 'hidden');
+          continue;
+        }
+
+        const { geometry, reason } = resolveGeometry(widget, pageIndex, page);
+
+        if (!geometry) {
+          addUnsupported(field.name, acroFormType, reason ?? 'zero-size');
+          continue;
+        }
+
+        let fieldAndMeta: TFieldAndMeta;
+
+        if (acroFormType === 'signature') {
+          fieldAndMeta = buildSignatureFieldAndMeta(formField);
+        } else if (acroFormType === 'text') {
+          type TextFieldDuck = FormFieldWithDict & {
+            getValue(): string;
+            getDefaultValue(): string;
+          };
+          const textField = field as unknown as TextFieldDuck;
+          const { documensoType } = resolveTextSubtype(formField, resolver);
+          const defaultText = usePdfDefaults ? textField.getValue?.() || textField.getDefaultValue?.() || '' : '';
+          fieldAndMeta = buildTextFieldAndMeta(formField, documensoType, defaultText);
+        } else if (acroFormType === 'checkbox') {
+          type CheckboxFieldDuck = FormFieldWithDict & {
+            isChecked(): boolean;
+            getOnValue(): string;
+          };
+          const checkbox = field as unknown as CheckboxFieldDuck;
+          const onValue = widget.getOnValue() ?? checkbox.getOnValue?.();
+          const checked = usePdfDefaults ? (checkbox.isChecked?.() ?? false) : false;
+          fieldAndMeta = buildCheckboxFieldAndMeta(formField, onValue ?? undefined, checked);
+        } else if (acroFormType === 'radio') {
+          type RadioFieldDuck = FormFieldWithDict & {
+            getOptions(): string[];
+            getValue(): string | null;
+          };
+          const radio = field as unknown as RadioFieldDuck;
+          const selectedValue = usePdfDefaults ? (radio.getValue?.() ?? null) : null;
+          fieldAndMeta = buildRadioFieldAndMeta(
+            formField,
+            radio.getOptions?.() ?? [],
+            selectedValue,
+            widget.getOnValue(),
+          );
+        } else if (acroFormType === 'dropdown') {
+          type DropdownFieldDuck = FormFieldWithDict & {
+            getOptions(): Array<{ value: string; display: string }>;
+            getValue(): string;
+            getDefaultValue(): string;
+          };
+          const dropdown = field as unknown as DropdownFieldDuck;
+          const rawOptions = dropdown.getOptions?.() ?? [];
+          const optionValues = rawOptions.map((opt) => opt.value);
+          const currentSelection = usePdfDefaults ? dropdown.getValue?.() || dropdown.getDefaultValue?.() || '' : '';
+          fieldAndMeta = buildDropdownFieldAndMeta(formField, optionValues, currentSelection || undefined);
+        } else {
+          addUnsupported(field.name, acroFormType, 'unsupported-type');
+          continue;
+        }
+
+        fields.push({
+          source: ACROFORM_FIELD_SOURCE,
+          fieldName: field.name,
+          widgetIndex: widgetCounter,
+          fieldAndMeta,
+          page: geometry.page,
+          x: geometry.x,
+          y: geometry.y,
+          width: geometry.width,
+          height: geometry.height,
+          pageWidth: geometry.pageWidth,
+          pageHeight: geometry.pageHeight,
+        });
+
+        widgetCounter += 1;
+      }
+    }
+
+    return {
+      fields,
+      unsupported,
+      hasSignedSignature,
+    };
+  } catch (err) {
+    logger.error({ event: 'acroform-import.error', err }, 'AcroForm extraction threw');
+
+    return EMPTY_RESULT('error');
+  }
+};
+
+const sortFieldsForCreate = (fields: AcroFormFieldImportInfo[]): AcroFormFieldImportInfo[] => {
+  return [...fields].sort((a, b) => {
+    if (a.page !== b.page) {
+      return a.page - b.page;
+    }
+
+    const aRowPercent = (a.y / a.pageHeight) * 100;
+    const bRowPercent = (b.y / b.pageHeight) * 100;
+
+    if (Math.abs(aRowPercent - bRowPercent) > ROW_TOLERANCE_PERCENT) {
+      return aRowPercent - bRowPercent;
+    }
+
+    return a.x - b.x;
+  });
+};
+
+/**
+ * Convert pre-extracted AcroForm fields to field creation inputs.
+ *
+ * Pure data transform — converts points to percentages and resolves the
+ * recipient via the provided callback. No DB calls.
+ */
+export const convertAcroFormFieldsToFieldInputs = (
+  fields: AcroFormFieldImportInfo[],
+  recipientResolver: (fieldName: string) => Pick<Recipient, 'id'>,
+  envelopeItemId?: string,
+): FieldToCreate[] => {
+  return sortFieldsForCreate(fields).map((f) => {
+    const xPercent = (f.x / f.pageWidth) * 100;
+    const yPercent = (f.y / f.pageHeight) * 100;
+    const widthPercent = (f.width / f.pageWidth) * 100;
+    const heightPercent = (f.height / f.pageHeight) * 100;
+
+    const finalHeightPercent = heightPercent > MIN_HEIGHT_THRESHOLD ? heightPercent : DEFAULT_FIELD_HEIGHT_PERCENT;
+
+    const recipient = recipientResolver(f.fieldName);
+
+    return {
+      ...f.fieldAndMeta,
+      envelopeItemId,
+      recipientId: recipient.id,
+      page: f.page,
+      positionX: xPercent,
+      positionY: yPercent,
+      width: widthPercent,
+      height: finalHeightPercent,
+    };
+  });
+};

packages/lib/server-only/rate-limit/compute-quota-flags.ts

@@ -1,4 +1,4 @@
-import { isQuotaExceeded, isQuotaNearing } from '../../universal/quota-usage';
+import { QUOTA_WARNING_THRESHOLD } from './get-quota-alert-kind';
 
 export type QuotaFlags = {
   isDocumentQuotaExceeded: boolean;
@@ -22,6 +22,39 @@ type ComputeQuotaFlagsOptions = {
   };
 };
 
+/**
+ * A quota of `null` means unlimited (never exceeded). A quota of `0` means
+ * blocked (always exceeded). Otherwise usage `>=` quota is exceeded.
+ */
+const isQuotaExceeded = (quota: number | null, usage: number): boolean => {
+  if (quota === null) {
+    return false;
+  }
+
+  if (quota === 0) {
+    return true;
+  }
+
+  return usage >= quota;
+};
+
+/**
+ * A counter is "nearing" its quota once usage reaches the warning threshold
+ * (80% of the quota, rounded up) but has not yet been exceeded. Nearing and
+ * exceeded are mutually exclusive per counter.
+ */
+const isQuotaNearing = (quota: number | null, usage: number): boolean => {
+  if (quota === null || quota === 0) {
+    return false;
+  }
+
+  if (isQuotaExceeded(quota, usage)) {
+    return false;
+  }
+
+  return usage >= Math.ceil(quota * QUOTA_WARNING_THRESHOLD);
+};
+
 export const computeQuotaFlags = ({ quotas, usage }: ComputeQuotaFlagsOptions): QuotaFlags => {
   return {
     isDocumentQuotaExceeded: isQuotaExceeded(quotas.documentQuota, usage?.documentCount ?? 0),

packages/lib/server-only/rate-limit/get-quota-alert-kind.ts

@@ -1,4 +1,4 @@
-import { getQuotaWarningCount } from '../../universal/quota-usage';
+export const QUOTA_WARNING_THRESHOLD = 0.8;
 
 export type QuotaAlertKind = 'quota' | 'quotaNearing';
 
@@ -32,7 +32,7 @@ export const getQuotaAlertKind = (opts: GetQuotaAlertKindOptions): QuotaAlertKin
   // From here newCount < quota, so for tiny quotas (1-4) where the rounded-up
   // warning threshold equals the quota itself, the warning can never fire — the
   // exhausting request is handled by the quota branch above.
-  const warningCount = getQuotaWarningCount(quota);
+  const warningCount = Math.ceil(quota * QUOTA_WARNING_THRESHOLD);
 
   const didCrossWarning = newCount >= warningCount && previousCount < warningCount;
 

packages/lib/types/field-meta.ts

@@ -72,6 +72,7 @@ export const ZBaseFieldMeta = z.object({
   readOnly: z.boolean().optional(),
   fontSize: z.number().min(8).max(96).default(DEFAULT_FIELD_FONT_SIZE).optional(),
   overflow: ZFieldOverflowMode.optional(),
+  source: z.enum(['acroform']).optional(),
 });
 
 export type TBaseFieldMeta = z.infer<typeof ZBaseFieldMeta>;

packages/lib/types/name.test.ts

@@ -1,145 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { ZNameSchema } from './name';
-
-describe('ZNameSchema', () => {
-  describe('valid names', () => {
-    it('accepts a normal name', () => {
-      expect(ZNameSchema.safeParse('Example User')).toEqual({
-        success: true,
-        data: 'Example User',
-      });
-    });
-
-    it('accepts international characters', () => {
-      expect(ZNameSchema.safeParse('Døcumensø Üser')).toEqual({
-        success: true,
-        data: 'Døcumensø Üser',
-      });
-    });
-
-    it('trims surrounding whitespace', () => {
-      expect(ZNameSchema.safeParse('  Documenso User  ')).toEqual({
-        success: true,
-        data: 'Documenso User',
-      });
-    });
-
-    it('accepts names at the minimum length', () => {
-      expect(ZNameSchema.safeParse('DU')).toEqual({
-        success: true,
-        data: 'DU',
-      });
-    });
-
-    it('accepts names at the maximum length', () => {
-      const name =
-        'DocumensoUser DocumensoUser DocumensoUser DocumensoUser DocumensoUser DocumensoUser DocumensoUser Do';
-
-      expect(name.length).toBe(100);
-      expect(ZNameSchema.safeParse(name)).toEqual({
-        success: true,
-        data: name,
-      });
-    });
-  });
-
-  describe('length validation', () => {
-    it('rejects names shorter than 2 characters', () => {
-      expect(ZNameSchema.safeParse('D')).toMatchObject({
-        success: false,
-        error: {
-          issues: [{ message: 'Please enter a valid name.' }],
-        },
-      });
-    });
-
-    it('rejects names longer than 100 characters', () => {
-      const name =
-        'DocumensoUser DocumensoUser DocumensoUser DocumensoUser DocumensoUser DocumensoUser DocumensoUser Doc';
-
-      expect(name.length).toBe(101);
-      expect(ZNameSchema.safeParse(name)).toMatchObject({
-        success: false,
-        error: {
-          issues: [{ message: 'Name cannot be more than 100 characters.' }],
-        },
-      });
-    });
-
-    it('rejects whitespace-only input after trim', () => {
-      expect(ZNameSchema.safeParse('   ')).toMatchObject({
-        success: false,
-      });
-    });
-  });
-
-  describe('URL validation', () => {
-    it.each([
-      'https://example.com',
-      'http://example.com',
-      'HTTPS://EXAMPLE.COM',
-      'Northwind www.example.com',
-      'www.example.com',
-    ])('rejects URLs in names: %s', (value) => {
-      expect(ZNameSchema.safeParse(value)).toMatchObject({
-        success: false,
-        error: {
-          issues: expect.arrayContaining([expect.objectContaining({ message: 'Name cannot contain URLs.' })]),
-        },
-      });
-    });
-  });
-
-  describe('invalid character validation', () => {
-    it.each([
-      ['NUL character', 'Acme\u0000Corp'],
-      ['zero-width space', 'Acme\u200bCorp'],
-      ['bidi override', 'Acme\u202eCorp'],
-      ['byte order mark', 'Acme\ufeffCorp'],
-      ['lone surrogate', 'Acme\ud800Corp'],
-      ['tag character', `Acme${String.fromCodePoint(0xe0041)}Corp`],
-      ['noncharacter', 'Acme\ufffeCorp'],
-      ['private use character', 'Acme\ue000Corp'],
-      ['Hangul filler', 'Acme\u3164Corp'],
-      ['braille blank', 'Acme\u2800Corp'],
-      ['combining grapheme joiner', 'Acme\u034fCorp'],
-    ])('rejects names containing a %s', (_label, value) => {
-      expect(ZNameSchema.safeParse(value)).toMatchObject({
-        success: false,
-        error: {
-          issues: expect.arrayContaining([expect.objectContaining({ message: 'Name contains invalid characters.' })]),
-        },
-      });
-    });
-
-    it.each([
-      ['fixed form', String.raw`Acme\u200bCorp`],
-      ['uppercase U', String.raw`Acme\U200BCorp`],
-      ['braced form', String.raw`Acme\u{200b}Corp`],
-      ['braced form with leading zeros', String.raw`Acme\u{0000200b}Corp`],
-      ['lone surrogate', String.raw`Acme\ud800Corp`],
-    ])('rejects literal \\u escape sequences stored as text (%s)', (_label, value) => {
-      expect(ZNameSchema.safeParse(value)).toMatchObject({
-        success: false,
-        error: {
-          issues: expect.arrayContaining([expect.objectContaining({ message: 'Name contains invalid characters.' })]),
-        },
-      });
-    });
-
-    it.each([
-      ['escape of a valid code point', String.raw`Acme\u0041Corp`],
-      ['braced escape of a valid astral code point', String.raw`Acme\u{1F600}Corp`],
-      ['braced escape beyond the Unicode range', String.raw`Acme\u{FFFFFFF}Corp`],
-      ['incomplete escape sequence', String.raw`Acme\u00 Corp`],
-      ['unterminated braced escape', String.raw`Acme\u{200bCorp`],
-      ['astral characters such as emoji', 'Acme 😀 Corp'],
-      ['emoji with a variation selector', 'I ❤️ Docs'],
-    ])('accepts %s', (_label, value) => {
-      expect(ZNameSchema.safeParse(value)).toMatchObject({
-        success: true,
-      });
-    });
-  });
-});

packages/lib/types/name.ts

@@ -1,68 +0,0 @@
-import { z } from 'zod';
-
-export const URL_PATTERN = /https?:\/\/|www\./i;
-
-/**
- * Characters that render as empty/invisible or break text layout:
- *
- * - `\p{C}`         - control, format, lone surrogate, private use and
- *                     unassigned code points (NUL, zero-width spaces, bidi
- *                     overrides, BOM, tag characters, noncharacters).
- * - `\p{Zl}\p{Zp}`  - line and paragraph separators.
- * - `\u{034F}`      - combining grapheme joiner (invisible). Kept outside the
- *                     character class because it is a combining mark, which
- *                     lint rules reject inside classes.
- * - remaining       - letters that render as blank (Hangul fillers, braille blank).
- *
- * The `\p{...}` classes are maintained by the Unicode database, so newly
- * assigned characters in these categories are covered automatically.
- */
-const INVALID_CHARACTER_REGEX = /[\p{C}\p{Zl}\p{Zp}\u{115F}\u{1160}\u{2800}\u{3164}\u{FFA0}]|\u{034F}/u;
-
-const hasInvalidCharacter = (value: string) => INVALID_CHARACTER_REGEX.test(value);
-
-/**
- * Matches literal `\uXXXX` and `\u{XXXX}` escape sequences stored verbatim as
- * text (e.g. the 6 characters `\`, `u`, `2`, `0`, `0`, `b`), which can still
- * break rendering downstream if anything decodes them.
- */
-const ESCAPE_SEQUENCE_PATTERN = /\\u(?:([0-9a-f]{4})|\{([0-9a-f]+)\})/gi;
-
-const hasInvalidEscapeSequence = (value: string) => {
-  for (const [, fixedHex, bracedHex] of value.matchAll(ESCAPE_SEQUENCE_PATTERN)) {
-    const codePoint = parseInt(fixedHex ?? bracedHex, 16);
-
-    if (codePoint > 0x10ffff) {
-      continue;
-    }
-
-    // Decode the escape and run it through the same character policy as the
-    // unescaped check, so the two can never drift apart.
-    if (hasInvalidCharacter(String.fromCodePoint(codePoint))) {
-      return true;
-    }
-  }
-
-  return false;
-};
-
-export const hasInvalidTextCharacters = (value: string) =>
-  hasInvalidCharacter(value) || hasInvalidEscapeSequence(value);
-
-/**
- * Shared name schema that disallows URLs to prevent phishing via email rendering,
- * and invisible/control characters that render as empty or break the UI.
- */
-export const ZNameSchema = z
-  .string()
-  .trim()
-  .min(2, { message: 'Please enter a valid name.' })
-  .max(100, { message: 'Name cannot be more than 100 characters.' })
-  .refine((value) => !URL_PATTERN.test(value), {
-    message: 'Name cannot contain URLs.',
-  })
-  .refine((value) => !hasInvalidTextCharacters(value), {
-    message: 'Name contains invalid characters.',
-  });
-
-export type TName = z.infer<typeof ZNameSchema>;

packages/lib/types/subscription.ts

@@ -6,39 +6,14 @@ import { z } from 'zod';
  *
  * Example: "5m", "1h", "1d"
  */
-export const RATE_LIMIT_WINDOW_REGEX = /^\d+[smhd]$/;
+export const ZRateLimitWindowSchema = z.string().regex(/^\d+[smhd]$/);
 
-const RATE_LIMIT_WINDOW_ERROR_MESSAGE = 'Use a duration with a unit, e.g. 5m, 1h, or 24h';
-const RATE_LIMIT_DUPLICATE_WINDOW_ERROR_MESSAGE = 'Use a unique window for each rate limit';
-
-export const ZRateLimitWindowSchema = z.string().trim().regex(RATE_LIMIT_WINDOW_REGEX, {
-  message: RATE_LIMIT_WINDOW_ERROR_MESSAGE,
-});
-
-export const ZRateLimitArraySchema = z
-  .array(
-    z.object({
-      window: ZRateLimitWindowSchema,
-      max: z.number().int().positive(),
-    }),
-  )
-  .superRefine((entries, ctx) => {
-    const windows = new Set<string>();
-
-    entries.forEach((entry, index) => {
-      const window = entry.window.trim();
-
-      if (windows.has(window)) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: RATE_LIMIT_DUPLICATE_WINDOW_ERROR_MESSAGE,
-          path: [index, 'window'],
-        });
-      }
-
-      windows.add(window);
-    });
-  });
+export const ZRateLimitArraySchema = z.array(
+  z.object({
+    window: ZRateLimitWindowSchema,
+    max: z.number().int().positive(),
+  }),
+);
 
 export type TRateLimitArray = z.infer<typeof ZRateLimitArraySchema>;
 

packages/lib/universal/quota-usage.test.ts

@@ -1,99 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import {
-  getQuotaUsagePercent,
-  getQuotaWarningCount,
-  isQuotaExceeded,
-  isQuotaNearing,
-  normalizeCapacityLimit,
-} from './quota-usage';
-
-describe('isQuotaExceeded', () => {
-  it('treats null quota as unlimited (never exceeded)', () => {
-    expect(isQuotaExceeded(null, 0)).toBe(false);
-    expect(isQuotaExceeded(null, 1_000_000)).toBe(false);
-  });
-
-  it('treats a zero quota as blocked (always exceeded)', () => {
-    expect(isQuotaExceeded(0, 0)).toBe(true);
-    expect(isQuotaExceeded(0, 5)).toBe(true);
-  });
-
-  it('is exceeded once usage reaches the quota (>= boundary)', () => {
-    expect(isQuotaExceeded(10, 9)).toBe(false);
-    expect(isQuotaExceeded(10, 10)).toBe(true);
-    expect(isQuotaExceeded(10, 11)).toBe(true);
-  });
-});
-
-describe('getQuotaWarningCount', () => {
-  it('rounds the 80% threshold up', () => {
-    expect(getQuotaWarningCount(10)).toBe(8);
-    expect(getQuotaWarningCount(100)).toBe(80);
-    // 5 * 0.8 = 4 exactly.
-    expect(getQuotaWarningCount(5)).toBe(4);
-    // 3 * 0.8 = 2.4 -> 3, so the warning count equals the quota itself.
-    expect(getQuotaWarningCount(3)).toBe(3);
-  });
-});
-
-describe('isQuotaNearing', () => {
-  it('is never nearing for unlimited or blocked quotas', () => {
-    expect(isQuotaNearing(null, 5)).toBe(false);
-    expect(isQuotaNearing(0, 5)).toBe(false);
-  });
-
-  it('is nearing from the warning threshold up to (but not including) the quota', () => {
-    expect(isQuotaNearing(10, 7)).toBe(false);
-    expect(isQuotaNearing(10, 8)).toBe(true);
-    expect(isQuotaNearing(10, 9)).toBe(true);
-  });
-
-  it('is not nearing once exceeded (nearing and exceeded are mutually exclusive)', () => {
-    expect(isQuotaNearing(10, 10)).toBe(false);
-    expect(isQuotaNearing(10, 11)).toBe(false);
-  });
-
-  it('can never fire for tiny quotas where the warning count equals the quota', () => {
-    // getQuotaWarningCount(3) === 3, so usage >= 3 is already exceeded.
-    expect(isQuotaNearing(3, 2)).toBe(false);
-    expect(isQuotaNearing(3, 3)).toBe(false);
-  });
-
-  it('agrees with the warning-count helper at the boundary', () => {
-    const quota = 250;
-    const warningCount = getQuotaWarningCount(quota);
-
-    expect(isQuotaNearing(quota, warningCount - 1)).toBe(false);
-    expect(isQuotaNearing(quota, warningCount)).toBe(true);
-  });
-});
-
-describe('getQuotaUsagePercent', () => {
-  it('returns 0 for unlimited or non-positive quotas', () => {
-    expect(getQuotaUsagePercent(5, null)).toBe(0);
-    expect(getQuotaUsagePercent(5, 0)).toBe(0);
-    expect(getQuotaUsagePercent(5, -10)).toBe(0);
-  });
-
-  it('rounds the percentage to the nearest integer', () => {
-    expect(getQuotaUsagePercent(1, 3)).toBe(33);
-    expect(getQuotaUsagePercent(2, 3)).toBe(67);
-    expect(getQuotaUsagePercent(50, 100)).toBe(50);
-  });
-
-  it('clamps the percentage to 100 when usage exceeds the quota', () => {
-    expect(getQuotaUsagePercent(150, 100)).toBe(100);
-  });
-});
-
-describe('normalizeCapacityLimit', () => {
-  it('maps 0 (unlimited for capacity limits) to null', () => {
-    expect(normalizeCapacityLimit(0)).toBeNull();
-  });
-
-  it('passes positive limits through unchanged', () => {
-    expect(normalizeCapacityLimit(1)).toBe(1);
-    expect(normalizeCapacityLimit(25)).toBe(25);
-  });
-});

packages/lib/universal/quota-usage.ts

@@ -1,57 +0,0 @@
-export const QUOTA_WARNING_THRESHOLD = 0.8;
-
-/**
- * Monthly quotas: `null` = unlimited, `0` = blocked. Usage `>=` quota is exceeded.
- */
-export const isQuotaExceeded = (quota: number | null, usage: number): boolean => {
-  if (quota === null) {
-    return false;
-  }
-
-  if (quota === 0) {
-    return true;
-  }
-
-  return usage >= quota;
-};
-
-/**
- * The usage count at which a positive quota starts "nearing" (80% rounded up).
- * The single source for the warning threshold math so the UI panel, quota flags,
- * and the per-request alert path can't drift apart.
- */
-export const getQuotaWarningCount = (quota: number): number => {
-  return Math.ceil(quota * QUOTA_WARNING_THRESHOLD);
-};
-
-/**
- * Nearing once usage reaches the warning threshold (80% rounded up) but is not exceeded.
- */
-export const isQuotaNearing = (quota: number | null, usage: number): boolean => {
-  if (quota === null || quota === 0) {
-    return false;
-  }
-
-  if (isQuotaExceeded(quota, usage)) {
-    return false;
-  }
-
-  return usage >= getQuotaWarningCount(quota);
-};
-
-export const getQuotaUsagePercent = (usage: number, quota: number | null): number => {
-  if (quota === null || quota <= 0) {
-    return 0;
-  }
-
-  return Math.min(100, Math.round((usage / quota) * 100));
-};
-
-/** Member/team capacity limits use `0` for unlimited. */
-export const normalizeCapacityLimit = (limit: number): number | null => {
-  if (limit === 0) {
-    return null;
-  }
-
-  return limit;
-};

packages/lib/universal/upload/put-file.ts

@@ -1,5 +1,10 @@
-import type { TUploadPdfResponse } from '@documenso/remix/server/api/files/files.types';
+import { env } from '@documenso/lib/utils/env';
+import type { TGetPresignedPostUrlResponse, TUploadPdfResponse } from '@documenso/remix/server/api/files/files.types';
+import { DocumentDataType } from '@prisma/client';
+import { base64 } from '@scure/base';
+import { match } from 'ts-pattern';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
 import { AppError } from '../../errors/app-error';
 
 type File = {
@@ -53,3 +58,68 @@ export const putPdfFile = async (file: File, options?: PutFileOptions) => {
 
   return result;
 };
+
+/**
+ * Uploads a file to the appropriate storage location.
+ */
+export const putFile = async (file: File, options?: PutFileOptions) => {
+  const NEXT_PUBLIC_UPLOAD_TRANSPORT = env('NEXT_PUBLIC_UPLOAD_TRANSPORT');
+
+  return await match(NEXT_PUBLIC_UPLOAD_TRANSPORT)
+    .with('s3', async () => putFileInObjectStorage(file, {}, options))
+    .with('azure-blob', async () => putFileInObjectStorage(file, { 'x-ms-blob-type': 'BlockBlob' }, options))
+    .otherwise(async () => putFileInDatabase(file));
+};
+
+const putFileInDatabase = async (file: File) => {
+  const contents = await file.arrayBuffer();
+
+  const binaryData = new Uint8Array(contents);
+
+  const asciiData = base64.encode(binaryData);
+
+  return {
+    type: DocumentDataType.BYTES_64,
+    data: asciiData,
+  };
+};
+
+const putFileInObjectStorage = async (file: File, extraHeaders: Record<string, string>, options?: PutFileOptions) => {
+  const getPresignedUrlResponse = await fetch(`${NEXT_PUBLIC_WEBAPP_URL()}/api/files/presigned-post-url`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      ...buildUploadAuthHeaders(options),
+    },
+    body: JSON.stringify({
+      fileName: file.name,
+      contentType: file.type,
+    }),
+  });
+
+  if (!getPresignedUrlResponse.ok) {
+    throw new Error(`Failed to get presigned post url, failed with status code ${getPresignedUrlResponse.status}`);
+  }
+
+  const { url, key }: TGetPresignedPostUrlResponse = await getPresignedUrlResponse.json();
+
+  const body = await file.arrayBuffer();
+
+  const response = await fetch(url, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/octet-stream',
+      ...extraHeaders,
+    },
+    body,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to upload file "${file.name}", failed with status code ${response.status}`);
+  }
+
+  return {
+    type: DocumentDataType.S3_PATH,
+    data: key,
+  };
+};

packages/lib/utils/images/logo.ts

@@ -8,15 +8,3 @@ export const loadLogo = async (file: Uint8Array) => {
     content,
   };
 };
-
-/**
- * Validate and sanitise an uploaded branding logo. Re-encoding through `sharp`
- * proves the bytes are a real raster image and strips any embedded payloads.
- * Throws if the input cannot be parsed as an image.
- */
-export const optimiseBrandingLogo = async (input: Buffer | Uint8Array): Promise<Buffer> => {
-  return await sharp(input)
-    .resize(512, 512, { fit: 'inside', withoutEnlargement: true })
-    .png({ quality: 80 })
-    .toBuffer();
-};

packages/trpc/server/admin-router/create-admin-organisation.types.ts

@@ -1,10 +1,11 @@
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { z } from 'zod';
 
+import { ZOrganisationNameSchema } from '../organisation-router/create-organisation.types';
+
 export const ZCreateAdminOrganisationRequestSchema = z.object({
   ownerUserId: z.number(),
   data: z.object({
-    name: ZNameSchema,
+    name: ZOrganisationNameSchema,
   }),
 });
 

packages/trpc/server/admin-router/create-subscription-claim.types.ts

@@ -1,9 +1,8 @@
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { ZClaimFlagsSchema, ZRateLimitArraySchema } from '@documenso/lib/types/subscription';
 import { z } from 'zod';
 
 export const ZCreateSubscriptionClaimRequestSchema = z.object({
-  name: ZNameSchema,
+  name: z.string().min(1),
   teamCount: z.number().int().min(0),
   memberCount: z.number().int().min(0),
   envelopeItemCount: z.number().int().min(1),

packages/trpc/server/admin-router/create-user.types.ts

@@ -1,4 +1,4 @@
-import { ZNameSchema } from '@documenso/lib/types/name';
+import { ZNameSchema } from '@documenso/lib/constants/auth';
 import { z } from 'zod';
 
 export const ZCreateUserRequestSchema = z.object({

packages/trpc/server/admin-router/email-transport/create-email-transport.types.ts

@@ -1,10 +1,9 @@
 import { ZEmailTransportConfigSchema } from '@documenso/lib/server-only/email/email-transport-config';
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { z } from 'zod';
 
 export const ZCreateEmailTransportRequestSchema = z.object({
-  name: ZNameSchema,
-  fromName: ZNameSchema,
+  name: z.string().min(1),
+  fromName: z.string().min(1),
   fromAddress: z.string().email(),
   config: ZEmailTransportConfigSchema,
 });

packages/trpc/server/admin-router/email-transport/update-email-transport.types.ts

@@ -4,7 +4,6 @@ import {
   ZSmtpApiConfigSchema,
   ZSmtpAuthConfigSchema,
 } from '@documenso/lib/server-only/email/email-transport-config';
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { z } from 'zod';
 
 // Reuses the canonical transport config schemas, but relaxes the secret field so
@@ -22,8 +21,8 @@ const ZUpdateConfigSchema = z.discriminatedUnion('type', [
 export const ZUpdateEmailTransportRequestSchema = z.object({
   id: z.string(),
   data: z.object({
-    name: ZNameSchema,
-    fromName: ZNameSchema,
+    name: z.string().min(1),
+    fromName: z.string().min(1),
     fromAddress: z.string().email(),
     config: ZUpdateConfigSchema,
   }),

packages/trpc/server/admin-router/get-admin-team.ts

@@ -30,7 +30,6 @@ export const getAdminTeamRoute = adminProcedure
             name: true,
             url: true,
             ownerUserId: true,
-            organisationGlobalSettings: true,
           },
         },
         teamEmail: true,

packages/trpc/server/admin-router/get-admin-team.types.ts

@@ -1,6 +1,5 @@
 import { OrganisationMemberRoleSchema } from '@documenso/prisma/generated/zod/inputTypeSchemas/OrganisationMemberRoleSchema';
 import { TeamMemberRoleSchema } from '@documenso/prisma/generated/zod/inputTypeSchemas/TeamMemberRoleSchema';
-import OrganisationGlobalSettingsSchema from '@documenso/prisma/generated/zod/modelSchema/OrganisationGlobalSettingsSchema';
 import OrganisationMemberInviteSchema from '@documenso/prisma/generated/zod/modelSchema/OrganisationMemberInviteSchema';
 import OrganisationMemberSchema from '@documenso/prisma/generated/zod/modelSchema/OrganisationMemberSchema';
 import OrganisationSchema from '@documenso/prisma/generated/zod/modelSchema/OrganisationSchema';
@@ -20,8 +19,6 @@ export const ZGetAdminTeamResponseSchema = TeamSchema.extend({
     name: true,
     url: true,
     ownerUserId: true,
-  }).extend({
-    organisationGlobalSettings: OrganisationGlobalSettingsSchema,
   }),
   teamEmail: TeamEmailSchema.nullable(),
   teamGlobalSettings: TeamGlobalSettingsSchema.nullable(),

packages/trpc/server/admin-router/update-admin-organisation.types.ts

@@ -1,13 +1,13 @@
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { z } from 'zod';
 
+import { ZOrganisationNameSchema } from '../organisation-router/create-organisation.types';
 import { ZTeamUrlSchema } from '../team-router/schema';
 import { ZCreateSubscriptionClaimRequestSchema } from './create-subscription-claim.types';
 
 export const ZUpdateAdminOrganisationRequestSchema = z.object({
   organisationId: z.string(),
   data: z.object({
-    name: ZNameSchema.optional(),
+    name: ZOrganisationNameSchema.optional(),
     url: ZTeamUrlSchema.optional(),
     claims: ZCreateSubscriptionClaimRequestSchema.pick({
       teamCount: true,

packages/trpc/server/admin-router/update-user.types.ts

@@ -1,11 +1,10 @@
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { zEmail } from '@documenso/lib/utils/zod';
 import { Role } from '@prisma/client';
 import { z } from 'zod';
 
 export const ZUpdateUserRequestSchema = z.object({
   id: z.number().min(1),
-  name: ZNameSchema.nullish(),
+  name: z.string().nullish(),
   email: zEmail().optional(),
   roles: z.array(z.nativeEnum(Role)).optional(),
 });

packages/trpc/server/api-token-router/create-api-token.types.ts

@@ -1,9 +1,8 @@
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { z } from 'zod';
 
 export const ZCreateApiTokenRequestSchema = z.object({
   teamId: z.number(),
-  tokenName: ZNameSchema,
+  tokenName: z.string().min(3, { message: 'The token name should be 3 characters or longer' }),
   expirationDate: z.string().nullable(),
 });
 

packages/trpc/server/auth-router/create-passkey.types.ts

@@ -1,9 +1,8 @@
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { ZRegistrationResponseJSONSchema } from '@documenso/lib/types/webauthn';
 import { z } from 'zod';
 
 export const ZCreatePasskeyRequestSchema = z.object({
-  passkeyName: ZNameSchema,
+  passkeyName: z.string().trim().min(1),
   verificationResponse: ZRegistrationResponseJSONSchema,
 });
 

packages/trpc/server/auth-router/update-passkey.types.ts

@@ -1,9 +1,8 @@
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { z } from 'zod';
 
 export const ZUpdatePasskeyRequestSchema = z.object({
   passkeyId: z.string().trim().min(1),
-  name: ZNameSchema,
+  name: z.string().trim().min(1),
 });
 
 export const ZUpdatePasskeyResponseSchema = z.void();

packages/trpc/server/enterprise-router/create-organisation-email.types.ts

@@ -1,10 +1,9 @@
-import { ZNameSchema } from '@documenso/lib/types/name';
 import { zEmail } from '@documenso/lib/utils/zod';
 import { z } from 'zod';
 
 export const ZCreateOrganisationEmailRequestSchema = z.object({
   emailDomainId: z.string(),
-  emailName: ZNameSchema,
+  emailName: z.string().min(1).max(100),
   email: zEmail().toLowerCase(),
 
   // This does not need to be validated to be part of the domain.

packages/trpc/server/envelope-router/create-envelope.ts

@@ -6,7 +6,6 @@ import { extractPdfPlaceholders } from '@documenso/lib/server-only/pdf/auto-plac
 import { normalizePdf } from '@documenso/lib/server-only/pdf/normalize-pdf';
 import type { ApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { putPdfFileServerSide } from '@documenso/lib/universal/upload/put-file.server';
-import { EnvelopeType } from '@prisma/client';
 import type { Logger } from 'pino';
 
 import { insertFormValuesInPdf } from '../../../lib/server-only/pdf/insert-form-values-in-pdf';
@@ -120,7 +119,7 @@ export const createEnvelopeRouteCaller = async ({
       }
 
       const normalized = await normalizePdf(pdf, {
-        flattenForm: type !== EnvelopeType.TEMPLATE,
+        flattenForm: false,
       });
 
       // Todo: Embeds - Might need to add this for client-side embeds in the future.