feat: rework command search (#3109)

Currently direct templates can be created without the required
signatures fields for signers.

This means that the document can be fully signed by everyone but will
ultimately fail the sealing step which leaves the document in an
unrecoverable state.

.env.example

@@ -180,6 +180,20 @@ NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNUP=
 NEXT_PUBLIC_DISABLE_OIDC_SIGNUP=
 # OPTIONAL: Comma-separated list of email domains allowed to sign up (e.g., example.com,acme.org).
 NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS=
+# OPTIONAL: Set to "true" to disable all signin methods (email, Google, Microsoft, OIDC).
+NEXT_PUBLIC_DISABLE_SIGNIN=
+# OPTIONAL: Set to "true" to disable email/password signin only. Also closes /forgot-password and /reset-password.
+NEXT_PUBLIC_DISABLE_EMAIL_PASSWORD_SIGNIN=
+# OPTIONAL: Set to "true" to hide the Google signin button.
+NEXT_PUBLIC_DISABLE_GOOGLE_SIGNIN=
+# OPTIONAL: Set to "true" to hide the Microsoft signin button.
+NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNIN=
+# OPTIONAL: Set to "true" to hide the OIDC signin button.
+NEXT_PUBLIC_DISABLE_OIDC_SIGNIN=
+# OPTIONAL: When OIDC is the only enabled signin transport, /signin auto-redirects
+# to the OIDC provider (rendering only a spinner). Set to "true" to disable this
+# and keep showing the signin page.
+NEXT_PUBLIC_DISABLE_OIDC_AUTO_REDIRECT=
 # OPTIONAL: Set to true to use internal webapp url in browserless requests.
 NEXT_PUBLIC_USE_INTERNAL_URL_BROWSERLESS=false
 

.npmrc

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

ARCHITECTURE.md

@@ -42,8 +42,8 @@ Documenso is an open-source document signing platform built as a **monorepo** us
 | Package                    | Description                                              | Port |
 | -------------------------- | -------------------------------------------------------- | ---- |
 | `@documenso/remix`         | Main application - React Router (Remix) with Hono server | 3000 |
-| `@documenso/documentation` | Documentation site (Next.js + Nextra)                    | 3002 |
 | `@documenso/openpage-api`  | Public analytics API                                     | 3003 |
+| `@documenso/docs`          | Documentation site                                       | 3004 |
 
 ### Core Packages (`packages/`)
 

apps/docs/content/docs/developers/api/documents.mdx

@@ -6,6 +6,8 @@ description: Create, manage, and send documents for signing via the API.
 import { Callout } from 'fumadocs-ui/components/callout';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
+<EnvelopeWarning />
+
 <Callout type="warn">
   This guide may not reflect the latest endpoints or parameters. For an always up-to-date reference,
   see the [OpenAPI Reference](https://openapi.documenso.com).

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

@@ -5,6 +5,8 @@ description: Complete reference for the Documenso REST API.
 
 import { Callout } from 'fumadocs-ui/components/callout';
 
+<EnvelopeWarning />
+
 <Callout type="warn">
   The guides below cover common API patterns but may not reflect the latest endpoints or parameters.
   For an always up-to-date reference, see the [OpenAPI Reference](https://openapi.documenso.com).

apps/docs/content/docs/developers/api/meta.json

@@ -8,6 +8,7 @@
     "teams",
     "rate-limits",
     "versioning",
+    "migrate-to-envelopes",
     "developer-mode",
     "common-errors"
   ]

apps/docs/content/docs/developers/api/migrate-to-envelopes.mdx

@@ -0,0 +1,249 @@
+---
+title: Migrating to Envelopes
+description: Why Documenso unified documents and templates into envelopes, and how to migrate from the deprecated document and template create endpoints.
+---
+
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+## Summary
+
+The following items have been deprecated and will be removed on the <strong>1st of March 2027</strong>:
+
+- <strong>API V1</strong>
+- <strong>A subset of SDK/API V2 endpoints</strong>
+- <strong>Legacy documents and templates</strong>
+- <strong>EmbedCreateDocumentV1</strong>
+- <strong>EmbedCreateTemplateV1</strong>
+- <strong>EmbedUpdateDocumentV1</strong>
+- <strong>EmbedUpdateTemplateV1</strong>
+
+The beta endpoint `/api/v2-beta` will also be removed. Use `/api/v2` instead, which is a drop-in replacement.
+
+Nothing breaks before 1st of March 2027, so you can migrate at your own pace.
+
+## What are legacy documents and templates
+
+These are documents and templates created by the following endpoints:
+
+- `POST /api/v2/document/create`
+- `POST /api/v2/document/create/beta`
+- `POST /api/v2/template/create`
+- `POST /api/v2/template/create/beta`
+- `POST /api/v1/documents`
+- `POST /api/v1/templates`
+- `POST /api/v1/templates/create-document`
+- `POST /api/v1/templates/generate-document`
+
+## What replaces legacy documents and templates
+
+At the end of 2025 we introduced a unified system for documents and templates, called <strong>envelopes</strong>.
+
+We still reference documents and templates throughout the documentation and application to distinguish them, but internally they are envelopes.
+
+Moving to the envelope system gives you:
+
+- **Multiple PDFs in one envelope.** Send several documents to sign in a single request.
+- **One API for documents and templates.** Learn one set of endpoints instead of two misaligned ones.
+- **A better editor and signing experience** for you and your recipients.
+
+## How to migrate
+
+{/* prettier-ignore */}
+<Steps>
+  <Step>
+    ### Switch to the envelope endpoints
+
+    Replace each deprecated endpoint with its `/api/v2/envelope/*` equivalent from the [mapping tables](#endpoint-mapping-reference) below.
+  </Step>
+  <Step>
+    ### Set the envelope `type` on create
+
+    A single endpoint, `POST /api/v2/envelope/create`, can create both documents and templates. Set `type` to `DOCUMENT` or `TEMPLATE`. You can now upload more than one PDF using the `files` field.
+  </Step>
+  <Step>
+    ### Update how you store IDs
+
+    Envelope IDs are **strings** (for example `envelope_abc123`), not numbers. Update any code that stores, parses, or compares IDs.
+  </Step>
+  <Step>
+    ### Test, then remove the old calls
+
+    Verify the new flow against your account, then delete the deprecated calls.
+  </Step>
+</Steps>
+
+The main data differences are as follows:
+- ID format changed from number to string (e.g. `42` to `envelope_abc123`)
+- pageNumber becomes page
+- pageX becomes positionX
+- pageY becomes positionY
+
+See the [Documents API](/docs/developers/api/documents) and [Templates API](/docs/developers/api/templates) for the full envelope reference.
+
+### Deprecated V1 API Endpoints
+
+Full reference in the [V1 OpenAPI reference](https://openapi-v1.documenso.com).
+
+| Deprecated endpoint                                      | Replacement                                           |
+| -------------------------------------------------------- | ----------------------------------------------------- |
+| `GET /api/v1/documents`                                  | `GET /api/v2/envelope`                                |
+| `GET /api/v1/documents/{id}`                             | `GET /api/v2/envelope/{envelopeId}`                   |
+| `POST /api/v1/documents`                                 | `POST /api/v2/envelope/create`                        |
+| `POST /api/v1/documents/{id}/send`                       | `POST /api/v2/envelope/distribute`                    |
+| `POST /api/v1/documents/{id}/resend`                     | `POST /api/v2/envelope/redistribute`                  |
+| `DELETE /api/v1/documents/{id}`                          | `POST /api/v2/envelope/delete`                        |
+| `GET /api/v1/documents/{id}/download`                    | `GET /api/v2/envelope/item/{envelopeItemId}/download` |
+| `POST /api/v1/documents/{id}/recipients`                 | `POST /api/v2/envelope/recipient/create-many`         |
+| `PATCH /api/v1/documents/{id}/recipients/{recipientId}`  | `POST /api/v2/envelope/recipient/update-many`         |
+| `DELETE /api/v1/documents/{id}/recipients/{recipientId}` | `POST /api/v2/envelope/recipient/delete`              |
+| `POST /api/v1/documents/{id}/fields`                     | `POST /api/v2/envelope/field/create-many`             |
+| `PATCH /api/v1/documents/{id}/fields/{fieldId}`          | `POST /api/v2/envelope/field/update-many`             |
+| `DELETE /api/v1/documents/{id}/fields/{fieldId}`         | `POST /api/v2/envelope/field/delete`                  |
+| `GET /api/v1/templates`                                  | `GET /api/v2/envelope` (with `type=TEMPLATE`)         |
+| `GET /api/v1/templates/{id}`                             | `GET /api/v2/envelope/{envelopeId}`                   |
+| `POST /api/v1/templates`                                 | `POST /api/v2/envelope/create` (`type=TEMPLATE`)      |
+| `DELETE /api/v1/templates/{id}`                          | `POST /api/v2/envelope/delete`                        |
+| `POST /api/v1/templates/{templateId}/create-document`    | `POST /api/v2/envelope/use`                           |
+| `POST /api/v1/templates/{templateId}/generate-document`  | `POST /api/v2/envelope/use`                           |
+
+### Deprecated V2 API Endpoints
+
+Full reference in the [V2 OpenAPI reference](https://openapi.documenso.com).
+
+#### Documents
+
+| Deprecated endpoint                               | Replacement                                           |
+| ------------------------------------------------- | ----------------------------------------------------- |
+| `GET /api/v2/document`                            | `GET /api/v2/envelope`                                |
+| `GET /api/v2/document/{documentId}`               | `GET /api/v2/envelope/{envelopeId}`                   |
+| `POST /api/v2/document/get-many`                  | `POST /api/v2/envelope/get-many`                      |
+| `POST /api/v2/document/create`                    | `POST /api/v2/envelope/create`                        |
+| `POST /api/v2/document/create/beta`               | `POST /api/v2/envelope/create`                        |
+| `POST /api/v2/document/update`                    | `POST /api/v2/envelope/update`                        |
+| `POST /api/v2/document/delete`                    | `POST /api/v2/envelope/delete`                        |
+| `POST /api/v2/document/duplicate`                 | `POST /api/v2/envelope/duplicate`                     |
+| `POST /api/v2/document/distribute`                | `POST /api/v2/envelope/distribute`                    |
+| `POST /api/v2/document/redistribute`              | `POST /api/v2/envelope/redistribute`                  |
+| `GET /api/v2/document/attachment`                 | `GET /api/v2/envelope/attachment`                     |
+| `POST /api/v2/document/attachment/create`         | `POST /api/v2/envelope/attachment/create`             |
+| `POST /api/v2/document/attachment/update`         | `POST /api/v2/envelope/attachment/update`             |
+| `POST /api/v2/document/attachment/delete`         | `POST /api/v2/envelope/attachment/delete`             |
+| `GET /api/v2/document/{documentId}/download`      | `GET /api/v2/envelope/item/{envelopeItemId}/download` |
+| `GET /api/v2/document/{documentId}/download-beta` | `GET /api/v2/envelope/item/{envelopeItemId}/download` |
+
+#### Templates
+
+| Deprecated endpoint                   | Replacement                                      |
+| ------------------------------------- | ------------------------------------------------ |
+| `GET /api/v2/template`                | `GET /api/v2/envelope` (with `type=TEMPLATE`)    |
+| `GET /api/v2/template/{templateId}`   | `GET /api/v2/envelope/{envelopeId}`              |
+| `POST /api/v2/template/get-many`      | `POST /api/v2/envelope/get-many`                 |
+| `POST /api/v2/template/create`        | `POST /api/v2/envelope/create` (`type=TEMPLATE`) |
+| `POST /api/v2/template/create/beta`   | `POST /api/v2/envelope/create` (`type=TEMPLATE`) |
+| `POST /api/v2/template/update`        | `POST /api/v2/envelope/update`                   |
+| `POST /api/v2/template/duplicate`     | `POST /api/v2/envelope/duplicate`                |
+| `POST /api/v2/template/delete`        | `POST /api/v2/envelope/delete`                   |
+| `POST /api/v2/template/use`           | `POST /api/v2/envelope/use`                      |
+| `POST /api/v2/template/direct/create` | **Pending replacement**                               |
+| `POST /api/v2/template/direct/delete` | **Pending replacement**                               |
+| `POST /api/v2/template/direct/toggle` | **Pending replacement**                               |
+
+#### Document fields
+
+| Deprecated endpoint                       | Replacement                               |
+| ----------------------------------------- | ----------------------------------------- |
+| `GET /api/v2/document/field/{fieldId}`    | `GET /api/v2/envelope/field/{fieldId}`    |
+| `POST /api/v2/document/field/create`      | `POST /api/v2/envelope/field/create-many` |
+| `POST /api/v2/document/field/create-many` | `POST /api/v2/envelope/field/create-many` |
+| `POST /api/v2/document/field/update`      | `POST /api/v2/envelope/field/update-many` |
+| `POST /api/v2/document/field/update-many` | `POST /api/v2/envelope/field/update-many` |
+| `POST /api/v2/document/field/delete`      | `POST /api/v2/envelope/field/delete`      |
+
+#### Template fields
+
+| Deprecated endpoint                       | Replacement                               |
+| ----------------------------------------- | ----------------------------------------- |
+| `GET /api/v2/template/field/{fieldId}`    | `GET /api/v2/envelope/field/{fieldId}`    |
+| `POST /api/v2/template/field/create`      | `POST /api/v2/envelope/field/create-many` |
+| `POST /api/v2/template/field/create-many` | `POST /api/v2/envelope/field/create-many` |
+| `POST /api/v2/template/field/update`      | `POST /api/v2/envelope/field/update-many` |
+| `POST /api/v2/template/field/update-many` | `POST /api/v2/envelope/field/update-many` |
+| `POST /api/v2/template/field/delete`      | `POST /api/v2/envelope/field/delete`      |
+
+#### Document recipients
+
+| Deprecated endpoint                            | Replacement                                    |
+| ---------------------------------------------- | ---------------------------------------------- |
+| `GET /api/v2/document/recipient/{recipientId}` | `GET /api/v2/envelope/recipient/{recipientId}` |
+| `POST /api/v2/document/recipient/create`       | `POST /api/v2/envelope/recipient/create-many`  |
+| `POST /api/v2/document/recipient/create-many`  | `POST /api/v2/envelope/recipient/create-many`  |
+| `POST /api/v2/document/recipient/update`       | `POST /api/v2/envelope/recipient/update-many`  |
+| `POST /api/v2/document/recipient/update-many`  | `POST /api/v2/envelope/recipient/update-many`  |
+| `POST /api/v2/document/recipient/delete`       | `POST /api/v2/envelope/recipient/delete`       |
+
+#### Template recipients
+
+| Deprecated endpoint                            | Replacement                                    |
+| ---------------------------------------------- | ---------------------------------------------- |
+| `GET /api/v2/template/recipient/{recipientId}` | `GET /api/v2/envelope/recipient/{recipientId}` |
+| `POST /api/v2/template/recipient/create`       | `POST /api/v2/envelope/recipient/create-many`  |
+| `POST /api/v2/template/recipient/create-many`  | `POST /api/v2/envelope/recipient/create-many`  |
+| `POST /api/v2/template/recipient/update`       | `POST /api/v2/envelope/recipient/update-many`  |
+| `POST /api/v2/template/recipient/update-many`  | `POST /api/v2/envelope/recipient/update-many`  |
+| `POST /api/v2/template/recipient/delete`       | `POST /api/v2/envelope/recipient/delete`       |
+
+### Embedding components
+
+| Deprecated component    | Replacement           |
+| ----------------------- | --------------------- |
+| `EmbedCreateDocumentV1` | `EmbedCreateEnvelope` |
+| `EmbedCreateTemplateV1` | `EmbedCreateEnvelope` |
+| `EmbedUpdateDocumentV1` | `EmbedUpdateEnvelope` |
+| `EmbedUpdateTemplateV1` | `EmbedUpdateEnvelope` |
+
+See the [embedding guide](/docs/developers/embedding) for the envelope components.
+
+## FAQ
+
+<Accordions>
+  <Accordion title="What happens on 1 March 2027?">
+    The deprecated V1 API, the V2 endpoints listed above, and the V1 embedding components are removed.
+    Requests to them will fail, so migrate to the envelope API before that date.
+  </Accordion>
+  <Accordion title="Will my existing documents and templates keep working?">
+    Yes. Documents and templates you already created remain in your account and continue to work. They will automatically be converted to envelopes. Only
+    the deprecated endpoints you call are going away. Your data is not deleted.
+  </Accordion>
+  <Accordion title="Do I need a new API token?">
+    No. Authentication is unchanged. The same API token works for the envelope endpoints under
+    `https://app.documenso.com/api/v2`.
+  </Accordion>
+  <Accordion title="What is the difference between a document and a template now?">
+    Both are envelopes, distinguished by a `type` field of `DOCUMENT` or `TEMPLATE`. They share the same
+    endpoints, recipients, fields, and attachments.
+  </Accordion>
+  <Accordion title="I use an official SDK, what should I do?">
+    The function calls to the legacy endpoints will break on the 1st of March 2027. Update to the latest SDK version and switch to its envelope methods.
+    The deprecated document and template methods map to the envelope endpoints in the tables above.
+  </Accordion>
+  <Accordion title="I need more time or help migrating">
+    Reach out to [support@documenso.com](mailto:support@documenso.com) with your use case and we will
+    help you plan the migration.
+  </Accordion>
+</Accordions>
+
+## Getting help
+
+- [V2 OpenAPI reference](https://openapi.documenso.com): the up-to-date envelope API.
+- [V1 OpenAPI reference](https://openapi-v1.documenso.com): the deprecated V1 API.
+- [support@documenso.com](mailto:support@documenso.com): migration questions and extensions.
+
+## See also
+
+- [Documents API](/docs/developers/api/documents): create and manage envelopes
+- [Templates API](/docs/developers/api/templates): work with templates and direct links
+- [Fields API](/docs/developers/api/fields) and [Recipients API](/docs/developers/api/recipients)
+- [API Versioning](/docs/developers/api/versioning): how Documenso versions the public API

apps/docs/content/docs/developers/api/rate-limits.mdx

@@ -11,9 +11,14 @@ Documenso enforces rate limits on all API endpoints to ensure service stability.
 
 ## HTTP Rate Limits
 
-**Limit:** 100 requests per minute per IP address  
+**Limit:** 1000 requests per minute per IP address  
 **Response:** 429 Too Many Requests
 
+<Callout type="info">
+  This is the global per-IP ceiling. Your organisation may have its own rate limits configured below
+  this value, in which case you can be rate-limited before reaching the global limit.
+</Callout>
+
 ### Rate Limit Response
 
 ```json
@@ -65,3 +70,4 @@ When you exceed a resource limit:
 - [Authentication](/docs/developers/getting-started/authentication) - API authentication guide
 - [API Versioning](/docs/developers/api/versioning) - API version management
 - [First API Call](/docs/developers/getting-started/first-api-call) - Getting started with the API
+- [Organisation Limits](/docs/self-hosting/configuration/organisation-limits) - Admins: set per-organisation resource quotas and rate limits (the HTTP rate limit above is separate and not admin-settable)

apps/docs/content/docs/developers/api/templates.mdx

@@ -6,6 +6,8 @@ description: Create documents from reusable templates via API.
 import { Callout } from 'fumadocs-ui/components/callout';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
+<EnvelopeWarning />
+
 <Callout type="warn">
   This guide may not reflect the latest endpoints or parameters. For an always up-to-date reference,
   see the [OpenAPI Reference](https://openapi.documenso.com).

apps/docs/content/docs/developers/api/versioning.mdx

@@ -5,6 +5,8 @@ description: Versioning information for the Documenso public API.
 
 import { Callout } from 'fumadocs-ui/components/callout';
 
+<EnvelopeWarning />
+
 ## Overview
 
 Documenso uses API versioning to manage changes to the public API. This allows us to introduce new features, fix bugs, and make other changes without breaking existing integrations.
@@ -19,7 +21,16 @@ Also, we may deprecate certain features or endpoints in the API. When we depreca
 
 ---
 
+## Documents, Templates, and Envelopes
+
+Documenso has unified documents and templates into a single resource called an **envelope**. New integrations should create documents and templates through the `/envelope/*` endpoints. The `POST /document/create` and `POST /template/create` endpoints (including their `/beta` variants) are deprecated in favor of `POST /envelope/create`.
+
+See [Migrating to the Envelope API](/docs/developers/api/migrate-to-envelopes) for the rationale and step-by-step migration examples.
+
+---
+
 ## See Also
 
+- [Migrating to the Envelope API](/docs/developers/api/migrate-to-envelopes) - Move from the document and template create endpoints
 - [Authentication](/docs/developers/getting-started/authentication) - API authentication guide
 - [Rate Limits](/docs/developers/api/rate-limits) - API rate limit details

apps/docs/content/docs/developers/examples/common-workflows.mdx

@@ -8,6 +8,8 @@ import { Callout } from 'fumadocs-ui/components/callout';
 import { Step, Steps } from 'fumadocs-ui/components/steps';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
+<EnvelopeWarning />
+
 ## Workflow 1: Send a Document for Signature
 
 The most common workflow: upload a PDF, add recipients with signature fields, and send for signing.
@@ -472,7 +474,7 @@ Send the same document to multiple recipients in parallel. Useful for policy ack
     <code>distributeDocument: true</code>
   </Step>
   <Step>
-    Process in batches with a short delay to respect rate limits (e.g. 100 requests/minute)
+    Process in batches with a short delay to respect rate limits (e.g. 1000 requests/minute)
   </Step>
 </Steps>
 
@@ -638,8 +640,8 @@ done
 </Tabs>
 
 <Callout type="info">
-  The API allows 100 requests per minute. For large batches, implement rate limiting with delays
-  between requests to avoid hitting limits.
+  The API allows 1000 requests per minute (your organisation may have its own lower limit). For large
+  batches, implement rate limiting with delays between requests to avoid hitting limits.
 </Callout>
 
 ---

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

@@ -3,6 +3,8 @@ title: Examples
 description: Common integration patterns and end-to-end workflows.
 ---
 
+<EnvelopeWarning />
+
 <Cards>
   <Card
     title="Common Workflows"

apps/docs/content/docs/developers/getting-started/authentication.mdx

@@ -7,6 +7,8 @@ import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
 import { Callout } from 'fumadocs-ui/components/callout';
 import { Step, Steps } from 'fumadocs-ui/components/steps';
 
+<EnvelopeWarning />
+
 ## Prerequisites
 
 - A Documenso account (cloud or self-hosted)

apps/docs/content/docs/developers/getting-started/first-api-call.mdx

@@ -7,6 +7,8 @@ import { Callout } from 'fumadocs-ui/components/callout';
 import { Step, Steps } from 'fumadocs-ui/components/steps';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
+<EnvelopeWarning />
+
 ## Prerequisites
 
 Before starting, you need:
@@ -483,7 +485,7 @@ The API returns standard HTTP status codes and JSON error responses:
 
 ### Handling Rate Limits
 
-The API allows 100 requests per minute per IP address. When rate limited, wait at least 60 seconds before retrying:
+The API allows 1000 requests per minute per IP address. Your organisation may have its own lower rate limits. When rate limited, wait at least 60 seconds before retrying:
 
 ```javascript
 async function fetchWithRetry(url, options, maxRetries = 3) {

apps/docs/content/docs/developers/getting-started/index.mdx

@@ -3,6 +3,8 @@ title: Getting Started
 description: Get your API key and make your first API call.
 ---
 
+<EnvelopeWarning />
+
 <Cards>
   <Card
     title="Authentication"

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

@@ -3,6 +3,8 @@ title: Developer Guide
 description: Integrate Documenso into your applications using the REST API, webhooks, and embedding options.
 ---
 
+<EnvelopeWarning />
+
 ## Getting Started
 
 <Cards>

apps/docs/content/docs/policies/enterprise-edition.mdx

@@ -76,6 +76,8 @@ The Enterprise Edition is required when you:
     4. Restart your Documenso instance
     5. Verify the license is active in the **Admin Panel** under the **Stats** section
 
+    See [Apply Your License Key](/docs/self-hosting/configuration/license) for the full walkthrough, including how to enable individual features once licensed.
+
   </Accordion>
 </Accordions>
 
@@ -197,7 +199,7 @@ See [Support](/docs/policies/support) for complete support options.
     1. Sign the Enterprise license agreement
     2. Receive license key and access credentials
     3. Deploy using [self-hosting guides](/docs/self-hosting) or access Documenso Cloud
-    4. Configure Enterprise features with support assistance
+    4. Apply the key — see [Apply Your License Key](/docs/self-hosting/configuration/license) — and configure Enterprise features with support assistance
 
   </Step>
   <Step>
@@ -238,6 +240,7 @@ See [Support](/docs/policies/support) for complete support options.
 
 ## Related
 
+- [Apply Your License Key](/docs/self-hosting/configuration/license) - Step-by-step license activation
 - [Community Edition](/docs/policies/community-edition) - AGPL-3.0 open-source license
 - [Licenses](/docs/policies/licenses) - Complete licensing overview and FAQ
 - [Support](/docs/policies/support) - Support channels and response times

apps/docs/content/docs/policies/fair-use.mdx

@@ -41,12 +41,17 @@ When a limit is reached, requests return a `429 Too Many Requests` response with
 
 | Action | Limit | Window |
 | --- | --- | --- |
-| API requests (v1 and v2) | 100 requests | 1 minute |
+| API requests (v1 and v2) | 1000 requests | 1 minute |
 | File uploads | 20 requests | 1 minute |
 | AI features | 3 requests | 1 minute |
 
 Authentication endpoints (login, signup, password reset, etc.) are also rate-limited to protect against abuse.
 
+<Callout type="info">
+  The API request limit above is the global per-IP ceiling. Individual organisations also have their
+  own rate limits, which may be configured below this value.
+</Callout>
+
 <Callout type="info">
   Rate limits may vary by plan. Enterprise plans can include higher or custom limits. Contact
   [sales](https://documen.so/sales) for details.

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

@@ -272,6 +272,12 @@ For detailed certificate setup, see [Signing Certificate](/docs/self-hosting/con
 | `NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNUP`       | Block new accounts via Microsoft. Existing linked users can still sign in           | `false` |
 | `NEXT_PUBLIC_DISABLE_OIDC_SIGNUP`            | Block new accounts via OIDC, including the organisation portal                      | `false` |
 | `NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS`        | Comma-separated list of email domains allowed to sign up (e.g., `example.com,acme.org`) |         |
+| `NEXT_PUBLIC_DISABLE_SIGNIN`                 | Master switch. Disable all signin methods application-wide                          | `false` |
+| `NEXT_PUBLIC_DISABLE_EMAIL_PASSWORD_SIGNIN`  | Disable email/password signin. Also closes `/forgot-password` and `/reset-password` | `false` |
+| `NEXT_PUBLIC_DISABLE_GOOGLE_SIGNIN`          | Hide the Google signin button                                                       | `false` |
+| `NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNIN`       | Hide the Microsoft signin button                                                    | `false` |
+| `NEXT_PUBLIC_DISABLE_OIDC_SIGNIN`            | Hide the OIDC signin button                                                         | `false` |
+| `NEXT_PUBLIC_DISABLE_OIDC_AUTO_REDIRECT`     | Disable the automatic `/signin` redirect when OIDC is the only enabled transport    | `false` |
 | `NEXT_PUBLIC_POSTHOG_KEY`             | PostHog API key for analytics and feature flags                                     |         |
 | `NEXT_PUBLIC_FEATURE_BILLING_ENABLED` | Enable billing features                                                             | `false` |
 
@@ -303,6 +309,44 @@ NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNUP="true"
 NEXT_PUBLIC_DISABLE_SIGNUP="true"
 ```
 
+### Sign-in Restrictions
+
+You can control which methods are available for users to sign in with the following environment variables:
+
+- **`NEXT_PUBLIC_DISABLE_SIGNIN`** (master switch): Set to `true` to block all signin methods (email/password, Google, Microsoft, OIDC). Hides every signin entry point on `/signin` and rejects email/password signin server-side with a `SIGNIN_DISABLED` error.
+- **`NEXT_PUBLIC_DISABLE_EMAIL_PASSWORD_SIGNIN`**: Set to `true` to disable email/password signin only. The email/password form is hidden, the `/forgot-password` and `/reset-password` pages redirect to `/signin`, and the corresponding server endpoints reject requests. SSO signin is unaffected.
+- **`NEXT_PUBLIC_DISABLE_GOOGLE_SIGNIN`**, **`NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNIN`**, **`NEXT_PUBLIC_DISABLE_OIDC_SIGNIN`**: Set to `true` to hide the matching SSO button on the signin page. Useful when an SSO provider is kept configured for account linking but not advertised as a signin entry point.
+
+These flags are opt-in: when none are set, signin behaviour is unchanged from a stock Documenso instance.
+
+```bash
+# Allow only OIDC signin (e.g. enterprise SSO-only)
+NEXT_PUBLIC_DISABLE_EMAIL_PASSWORD_SIGNIN="true"
+NEXT_PUBLIC_DISABLE_GOOGLE_SIGNIN="true"
+NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNIN="true"
+
+# Or disable signin entirely
+NEXT_PUBLIC_DISABLE_SIGNIN="true"
+```
+
+### OIDC Auto-redirect
+
+When OIDC is the only enabled signin transport on your instance, `/signin` automatically redirects users straight to the OIDC provider instead of showing the signin form. The page renders a spinner while the redirect happens. No extra configuration is required — disabling every other signin method is enough to trigger it.
+
+- **`NEXT_PUBLIC_DISABLE_OIDC_AUTO_REDIRECT`**: Set to `true` to opt out of the automatic redirect and keep rendering the signin page even when OIDC is the only enabled transport.
+
+The redirect only triggers when OIDC is configured and email/password, Google, and Microsoft signin are all disabled. If any other transport remains enabled, the signin form is shown as normal.
+
+```bash
+# OIDC-only signin: disabling all other methods auto-redirects to the provider
+NEXT_PUBLIC_DISABLE_EMAIL_PASSWORD_SIGNIN="true"
+NEXT_PUBLIC_DISABLE_GOOGLE_SIGNIN="true"
+NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNIN="true"
+
+# Opt out of the auto-redirect while still OIDC-only
+# NEXT_PUBLIC_DISABLE_OIDC_AUTO_REDIRECT="true"
+```
+
 ---
 
 ## AI Features
@@ -399,11 +443,11 @@ Telemetry collects only: app version, installation ID, and node ID. No personal
 
 ## Enterprise Features
 
-These variables require an active [Enterprise Edition](/docs/policies/enterprise-edition) license. Obtain a license key from [license.documenso.com](https://license.documenso.com) and set it below to unlock enterprise features such as SSO, embed editor, and 21 CFR Part 11 compliance.
+These variables require an active [Enterprise Edition](/docs/policies/enterprise-edition) license. Obtain a license key from [license.documenso.com](https://license.documenso.com) and set it below to unlock enterprise features such as SSO, embed editor, and 21 CFR Part 11 compliance. See [Apply Your License Key](/docs/self-hosting/configuration/license) for step-by-step setup.
 
 | Variable                             | Description                                      |
 | ------------------------------------ | ------------------------------------------------ |
-| `NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY` | License key for enterprise features              |
+| `NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY` | License key for enterprise features — see [Apply Your License Key](/docs/self-hosting/configuration/license) for how to apply it |
 | `NEXT_PRIVATE_STRIPE_API_KEY`        | Stripe API key for billing                       |
 | `NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET` | Stripe webhook secret                            |
 | `NEXT_PRIVATE_SES_ACCESS_KEY_ID`     | AWS SES access key for email domain verification |
@@ -446,6 +490,16 @@ NEXT_PRIVATE_SIGNING_PASSPHRASE="your-certificate-password"
 # NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNUP="true"
 # NEXT_PUBLIC_DISABLE_OIDC_SIGNUP="true"
 # NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS="example.com,acme.org"
+
+# Sign-in restrictions (optional)
+# NEXT_PUBLIC_DISABLE_SIGNIN="true"
+# NEXT_PUBLIC_DISABLE_EMAIL_PASSWORD_SIGNIN="true"
+# NEXT_PUBLIC_DISABLE_GOOGLE_SIGNIN="true"
+# NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNIN="true"
+# NEXT_PUBLIC_DISABLE_OIDC_SIGNIN="true"
+
+# Opt out of the automatic OIDC redirect when OIDC is the only enabled transport (optional)
+# NEXT_PUBLIC_DISABLE_OIDC_AUTO_REDIRECT="true"
 ```
 
 ---
@@ -456,4 +510,5 @@ NEXT_PRIVATE_SIGNING_PASSPHRASE="your-certificate-password"
 - [Email Configuration](/docs/self-hosting/configuration/email) - Configure email delivery
 - [Storage Configuration](/docs/self-hosting/configuration/storage) - Set up S3 storage
 - [Signing Certificate](/docs/self-hosting/configuration/signing-certificate) - Configure document signing
+- [Organisation Limits](/docs/self-hosting/configuration/organisation-limits) - Set per-organisation document, email, and API limits from the admin panel
 - [Troubleshooting](/docs/self-hosting/maintenance/troubleshooting) - Common configuration issues

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

@@ -29,6 +29,11 @@ description: Configure your self-hosted Documenso instance with environment vari
     description="Digital signature certificate setup."
     href="/docs/self-hosting/configuration/signing-certificate"
   />
+  <Card
+    title="Organisation Limits"
+    description="Set per-organisation document, email, and API limits via the admin panel."
+    href="/docs/self-hosting/configuration/organisation-limits"
+  />
 </Cards>
 
 ## Required Configuration

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

@@ -0,0 +1,107 @@
+---
+title: Apply Your License Key
+description: Activate your Enterprise license key to unlock enterprise features on your self-hosted instance.
+---
+
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+A license key activates the Enterprise features available to your self-hosted instance, such as CSC signing, SSO, embed white-labelling, and 21 CFR Part 11 compliance.
+
+<Callout type="info">
+  The license key applies to your **whole instance**, not an individual user account. There's one
+  key per deployment.
+</Callout>
+
+## Prerequisites
+
+- An active Enterprise license key — contact [sales](https://documen.so/enterprise) to set up an
+  Enterprise subscription, then copy your key from [license.documenso.com](https://license.documenso.com).
+  See [Enterprise Edition](/docs/policies/enterprise-edition) for details.
+- A running self-hosted Documenso instance that you're able to restart
+
+## Step 1: Set the environment variable
+
+Set `NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY` to your license key.
+
+<Tabs items={['Docker Compose', 'docker run', '.env']}>
+<Tab value="Docker Compose">
+
+Add the variable to your `.env` file (or directly under `environment:` in `compose.yml`):
+
+```bash
+NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=your-license-key-here
+```
+
+Then apply it:
+
+```bash
+docker compose up -d
+```
+
+</Tab>
+<Tab value="docker run">
+
+```bash
+docker run -d \
+  --name documenso \
+  -e NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=your-license-key-here \
+  documenso/documenso:latest
+```
+
+</Tab>
+<Tab value=".env">
+
+If you're running Documenso directly (not in a container), add the variable to your `.env` file:
+
+```bash
+NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=your-license-key-here
+```
+
+</Tab>
+</Tabs>
+
+## Step 2: Restart the instance
+
+The license key is only read once, at process startup. Setting the variable in a running container or shell has no effect until the process restarts.
+
+```bash
+# Docker Compose
+docker compose restart documenso
+
+# Docker
+docker restart documenso
+```
+
+On startup, Documenso validates the key against the Documenso license server and caches the result locally for future startups, so a brief license-server outage won't lock you out.
+
+## What the license enables
+
+A valid license doesn't turn every enterprise feature on everywhere — activation depends on the feature:
+
+- **CSC signing** activates instance-wide automatically once the license is active and CSC transport is configured. See [CSC / QES Signing](/docs/self-hosting/configuration/signing-certificate/csc-qes) for the full setup.
+- **SSO, embed white-labelling, 21 CFR Part 11, and similar** are provisioned per organisation. Follow each feature's own guide to configure it once the license is active.
+
+## Troubleshooting
+
+<Accordions type="multiple">
+  <Accordion title="Enterprise features are still unavailable after applying the key">
+    - Confirm the key is present in the environment the running process actually reads — `docker
+      exec` into the container and check `env | grep LICENSE` if unsure.
+    - Confirm the instance was fully restarted after the variable was set, not just reloaded.
+    - Re-copy the key to rule out truncation or accidental whitespace.
+  </Accordion>
+  <Accordion title="A specific feature still isn't working">
+    Instance-wide features (like CSC signing) also need their own configuration — an active license
+    alone isn't enough. Check that feature's guide to confirm the required settings are in place.
+    Per-organisation features additionally need to be provisioned for the organisation that's using
+    them.
+  </Accordion>
+</Accordions>
+
+## See Also
+
+- [Environment Variables](/docs/self-hosting/configuration/environment) - Complete configuration reference
+- [Enterprise Edition](/docs/policies/enterprise-edition) - What's included and how to purchase a license
+- [CSC / QES Signing](/docs/self-hosting/configuration/signing-certificate/csc-qes) - Enable CSC-based signing

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

@@ -2,12 +2,14 @@
   "title": "Configuration",
   "pages": [
     "environment",
+    "license",
     "database",
     "email",
     "storage",
     "background-jobs",
     "signing-certificate",
     "telemetry",
+    "organisation-limits",
     "advanced"
   ]
 }

apps/docs/content/docs/self-hosting/configuration/organisation-limits.mdx

@@ -0,0 +1,111 @@
+---
+title: Organisation Limits
+description: View and set per-organisation document, email, and API limits on a self-hosted Documenso instance using the admin panel's subscription claims.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+Per-organisation limits — document, email, and API usage, plus feature toggles and team/member caps — are controlled by **subscription claims**. You configure them in the admin panel, not through environment variables.
+
+There are three distinct kinds of limit:
+
+| Limit                  | Caps                                              | Admin-settable          |
+| ---------------------- | ------------------------------------------------- | ----------------------- |
+| Resource quota         | Documents, emails, and API requests **per month** | Yes — per claim and org |
+| Resource rate limit    | The same resources over a short window (e.g. `1h`) | Yes — per claim and org |
+| Global HTTP rate limit | API requests per IP (1000/min, hardcoded)         | No — see [Limitations](#limitations) |
+
+## Prerequisites
+
+- A running self-hosted Documenso instance.
+- An account with the **`ADMIN`** role — an account-level role, separate from organisation and team roles. New accounts are created with the `USER` role only. Grant the first admin by adding `ADMIN` to that user's `roles` directly in the database; after that, an existing admin can grant the role to others under **Admin Panel > Users > _(user)_ > Roles > Update user**.
+
+Open the admin panel at `/admin`. The sidebar sections used below are **Claims**, **Organisations**, and **Organisation Stats**.
+
+## Viewing usage
+
+**One organisation:** open **Admin Panel > Organisations** and select it. The **Organisation usage** section shows the current period's document, email, and API usage against its quotas.
+
+**All organisations:** open **Admin Panel > Organisation Stats** to sort and filter monthly usage. Filter by **claim** and by **period** (a UTC calendar month, shown as `YYYY-MM`), and switch between **Show usage**, **Show usage with quotas**, and **Show daily averages**.
+
+<Callout type="warn">
+  Usage counts **attempts**, not only successful actions. A request that exceeds a quota is still counted before it is rejected, so displayed usage can read higher than the number of actions that succeeded.
+</Callout>
+
+## Subscription claims
+
+A subscription claim is a named bundle of limits and feature flags (for example `Free`, `Individual`, `Teams`, `Platform`, or `Enterprise`). Claims are **templates**: when an organisation is created it receives a private copy of its claim and reads from that copy afterwards. Editing a claim template therefore affects organisations created later, not existing ones — to change an existing organisation, [edit it directly](#change-limits-for-one-organisation).
+
+### Claim fields
+
+Under **Admin Panel > Claims** (`/admin/claims`), each claim has:
+
+| Field                   | Controls                                                                          |
+| ----------------------- | --------------------------------------------------------------------------------- |
+| **Name**                | The claim's display name.                                                         |
+| **Team Count**          | Teams allowed. `0` = unlimited.                                                   |
+| **Member Count**        | Members allowed. `0` = unlimited.                                                 |
+| **Envelope Item Count** | Uploaded files allowed per envelope. Minimum `1`.                                |
+| **Recipient Count**     | Recipients allowed per document. `0` = unlimited.                                |
+| **Feature Flags**       | Feature toggles (see [Feature flags](#feature-flags)).                            |
+| **Limits**              | Monthly quota and rate-limit windows for Documents, Emails, and API.              |
+| **Email transport**     | Transport the claim uses. *Default (system mailer)* uses the instance default.    |
+
+### Quotas and rate limits
+
+The **Limits** section has a column for **Documents**, **Emails**, and **API**, each with two controls:
+
+- **Monthly quota** — how many of that resource are allowed per calendar month. An **empty** field is unlimited; **`0`** blocks the resource entirely.
+- **Rate limit windows** — optional short-window caps, each a duration and a maximum. A window is a number and a unit (`s`, `m`, `h`, `d`), such as `5m`, `1h`, or `24h`, and must be unique within the resource.
+
+<Callout type="warn">
+  Quotas and counts use opposite conventions for "unlimited": an **empty** quota is unlimited (and `0` blocks the resource), whereas `0` in the **Team**, **Member**, and **Recipient Count** fields means unlimited.
+</Callout>
+
+### Feature flags
+
+The **Feature Flags** section toggles capabilities such as Unlimited documents, Branding, Hide Documenso branding, Email domains, Embed authoring, Embed signing, White label for embed authoring/signing, 21 CFR, HIPAA, Authentication portal, Allow Legacy Envelopes, Signing reminders, QES signing, and Disable emails.
+
+Some flags are Enterprise features. If your license does not include one, it is marked and cannot be enabled (you can still turn it off). See [Enterprise Edition](/docs/policies/enterprise-edition).
+
+### Create or edit a claim template
+
+1. Go to **Admin Panel > Claims**.
+2. Select **New claim**, or select an existing claim to edit it.
+3. Set the counts, feature flags, and the **Limits** section.
+4. Save. Changes apply to organisations created afterwards, not existing ones.
+
+### Change limits for one organisation
+
+To change limits for an existing organisation, edit it directly rather than its claim template.
+
+1. Go to **Admin Panel > Organisations** and open the organisation.
+2. Adjust its quota, rate-limit, feature-flag, or email-transport fields.
+3. Save. Changes take effect immediately.
+
+The organisation also shows the **Inherited subscription claim** it was created from.
+
+## Usage reset
+
+Monthly quota usage is keyed to the **UTC calendar month**. There is no scheduled reset job — when the month rolls over, the new period's counter starts at `0`.
+
+## Limitations
+
+The **global HTTP rate limit is not configurable.** Documenso enforces a hardcoded **1000 requests per minute per IP address** on its API endpoint groups (`/api/v1`, `/api/v2`, and the tRPC API are limited separately), returning `429 Too Many Requests`. It is a per-IP safeguard applied at the HTTP layer — not per-organisation, not stored on any claim, and not adjustable from the admin panel. See [Rate Limits](/docs/developers/api/rate-limits).
+
+## Troubleshooting
+
+| Symptom                                          | Cause and fix                                                                                                                    |
+| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
+| An organisation hit its limit unexpectedly       | Usage counts rejected over-quota attempts. Compare usage against the quota under **Organisation Stats > Show usage with quotas**. |
+| A resource is blocked entirely, not just capped  | The **Monthly quota** is `0`, which blocks the resource. Leave it empty for unlimited.                                           |
+| Emails are not sending for an organisation        | Check whether the **Disable emails** flag is enabled on the organisation's claim — it blocks all emails regardless of quota.     |
+| A claim template edit had no effect              | Template edits are not retroactive. Edit the organisation directly under **Admin Panel > Organisations**.                        |
+
+---
+
+## See Also
+
+- [Environment Variables](/docs/self-hosting/configuration/environment) - All configuration options
+- [Rate Limits](/docs/developers/api/rate-limits) - The global HTTP API rate limit (separate from claims)
+- [Enterprise Edition](/docs/policies/enterprise-edition) - Features unlocked by license flags

apps/docs/content/docs/self-hosting/configuration/signing-certificate/csc-qes.mdx

@@ -49,7 +49,7 @@ The callback URL is fixed — Documenso derives it from `NEXT_PUBLIC_WEBAPP_URL`
 
 ### Enterprise Edition license
 
-CSC mode is gated by the `instanceCscSigning` license flag. Without a valid Enterprise license, the transport refuses to start (`CSC_UNLICENSED`).
+CSC mode is gated by the `instanceCscSigning` license flag. Without a valid Enterprise license, the transport refuses to start (`CSC_UNLICENSED`). See [Apply Your License Key](/docs/self-hosting/configuration/license) to activate one.
 
 </Step>
 <Step>

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

@@ -163,6 +163,19 @@ NEXT_PUBLIC_DISABLE_SIGNUP=false
 # NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNUP=true
 # NEXT_PUBLIC_DISABLE_OIDC_SIGNUP=true
 # NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS=example.com,acme.org
+
+# Signin restrictions (optional)
+# Master switch — disables every signin method
+# NEXT_PUBLIC_DISABLE_SIGNIN=true
+# Per-method switches (optional). Each disables that signin path.
+# NEXT_PUBLIC_DISABLE_EMAIL_PASSWORD_SIGNIN=true
+# NEXT_PUBLIC_DISABLE_GOOGLE_SIGNIN=true
+# NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNIN=true
+# NEXT_PUBLIC_DISABLE_OIDC_SIGNIN=true
+
+# When OIDC is the only enabled transport, /signin auto-redirects to the provider.
+# Set this to opt out and keep showing the signin page (optional).
+# NEXT_PUBLIC_DISABLE_OIDC_AUTO_REDIRECT=true
 ```
 
 <Callout type="info">Generate secure secrets using: `openssl rand -base64 32`</Callout>

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

@@ -112,6 +112,12 @@ See [Email Configuration](/docs/self-hosting/configuration/email) for other tran
 | `NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNUP`      | Block new accounts via Microsoft OAuth                         | `false`                   |
 | `NEXT_PUBLIC_DISABLE_OIDC_SIGNUP`           | Block new accounts via OIDC (incl. organisation portal)        | `false`                   |
 | `NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS`       | Comma-separated list of allowed signup email domains           |                           |
+| `NEXT_PUBLIC_DISABLE_SIGNIN`                | Master switch — disable all signin methods                     | `false`                   |
+| `NEXT_PUBLIC_DISABLE_EMAIL_PASSWORD_SIGNIN` | Disable email/password signin only                             | `false`                   |
+| `NEXT_PUBLIC_DISABLE_GOOGLE_SIGNIN`         | Hide the Google signin button                                  | `false`                   |
+| `NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNIN`      | Hide the Microsoft signin button                               | `false`                   |
+| `NEXT_PUBLIC_DISABLE_OIDC_SIGNIN`           | Hide the OIDC signin button                                    | `false`                   |
+| `NEXT_PUBLIC_DISABLE_OIDC_AUTO_REDIRECT`    | Disable auto-redirect to OIDC when it is the only transport     | `false`                   |
 
 For the complete list, see [Environment Variables](/docs/self-hosting/configuration/environment).
 

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

@@ -159,6 +159,12 @@ NEXT_PRIVATE_SMTP_FROM_ADDRESS=noreply@yourdomain.com
 | `NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNUP`| Block new accounts via Microsoft OAuth                 | `false` |
 | `NEXT_PUBLIC_DISABLE_OIDC_SIGNUP`     | Block new accounts via OIDC (incl. organisation portal)| `false` |
 | `NEXT_PRIVATE_ALLOWED_SIGNUP_DOMAINS` | Comma-separated list of allowed signup email domains   |         |
+| `NEXT_PUBLIC_DISABLE_SIGNIN`          | Master switch — disable all signin methods             | `false` |
+| `NEXT_PUBLIC_DISABLE_EMAIL_PASSWORD_SIGNIN` | Disable email/password signin only                     | `false` |
+| `NEXT_PUBLIC_DISABLE_GOOGLE_SIGNIN`   | Hide the Google signin button                          | `false` |
+| `NEXT_PUBLIC_DISABLE_MICROSOFT_SIGNIN`| Hide the Microsoft signin button                       | `false` |
+| `NEXT_PUBLIC_DISABLE_OIDC_SIGNIN`     | Hide the OIDC signin button                            | `false` |
+| `NEXT_PUBLIC_DISABLE_OIDC_AUTO_REDIRECT` | Disable auto-redirect to OIDC when it is the only transport | `false` |
 | `NEXT_PRIVATE_SIGNING_PASSPHRASE`     | Passphrase for signing certificate                     | -       |
 | `DOCUMENSO_DISABLE_TELEMETRY`     | Disable anonymous telemetry        | `false` |
 

apps/docs/content/docs/self-hosting/index.mdx

@@ -141,7 +141,7 @@ See the [Quick Start guide](/docs/self-hosting/getting-started/quick-start) for
 
 Self-hosted Documenso includes full core functionality under the AGPL-3.0 license. If you need enterprise features such as SSO, embed editor white label, or 21 CFR Part 11 compliance, you can activate them with a license key.
 
-See [Enterprise Edition](/docs/policies/enterprise-edition) for details and [Licenses](/docs/policies/licenses) for a comparison.
+See [Enterprise Edition](/docs/policies/enterprise-edition) for details and [Licenses](/docs/policies/licenses) for a comparison. Already have a key? See [Apply Your License Key](/docs/self-hosting/configuration/license).
 
 ---
 

apps/docs/package.json

@@ -29,7 +29,7 @@
     "@types/node": "^25.1.0",
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.14",
+    "postcss": "^8.5.19",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3"
   }

apps/docs/src/app/global.css

@@ -83,7 +83,7 @@
   --accent: hsl(0 0% 27.8431%);
   --accent-foreground: hsl(95.0847 71.0843% 67.451%);
   --destructive: hsl(0 86.5979% 61.9608%);
-  --destructive-foreground: hsl(0 87.6289% 19.0196%);
+  --destructive-foreground: hsl(0 0% 98.0392%);
   --border: hsl(0 0% 27.8431%);
   --input: hsl(0 0% 27.8431%);
   --ring: hsl(95.0847 71.0843% 67.451%);

apps/docs/src/components/mdx/envelope-warning.tsx

@@ -0,0 +1,19 @@
+import { Callout } from 'fumadocs-ui/components/callout';
+
+const MIGRATION_GUIDE_HREF = '/docs/developers/api/migrate-to-envelopes';
+
+/**
+ * Deprecation banner steering API consumers away from the legacy document and
+ * template create endpoints and towards the unified Envelope API.
+ *
+ * Registered globally in `mdx-components.tsx`, so it can be used in any MDX page
+ * as `<EnvelopeWarning />` without an explicit import.
+ */
+export function EnvelopeWarning() {
+  return (
+    <Callout type="error">
+      <strong>Documents and templates are being deprecated and replaced by envelopes.</strong>{' '}
+      <a href={MIGRATION_GUIDE_HREF}>Read the migration guide here.</a>
+    </Callout>
+  );
+}

apps/docs/src/mdx-components.tsx

@@ -1,6 +1,7 @@
 import * as TabsComponents from 'fumadocs-ui/components/tabs';
 import defaultMdxComponents from 'fumadocs-ui/mdx';
 import type { MDXComponents } from 'mdx/types';
+import { EnvelopeWarning } from '@/components/mdx/envelope-warning';
 import { Mermaid } from '@/components/mdx/mermaid';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -9,6 +10,7 @@ export function getMDXComponents(components?: MDXComponents): any {
     ...defaultMdxComponents,
     ...TabsComponents,
     Mermaid,
+    EnvelopeWarning,
     ...components,
   };
 }

apps/remix/app/components/dialogs/branding-preferences-reset-dialog.tsx

@@ -0,0 +1,119 @@
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Trans } from '@lingui/react/macro';
+import { useState } from 'react';
+
+export type BrandingPreferencesResetDialogProps = {
+  hasAdvancedBranding: boolean;
+  isSubmitting: boolean;
+  onReset: () => Promise<void>;
+  trigger?: React.ReactNode;
+};
+
+export const BrandingPreferencesResetDialog = ({
+  hasAdvancedBranding,
+  isSubmitting,
+  onReset,
+  trigger,
+}: BrandingPreferencesResetDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [isResetting, setIsResetting] = useState(false);
+
+  const isLoading = isSubmitting || isResetting;
+
+  const handleResetToDefaults = async () => {
+    setIsResetting(true);
+
+    try {
+      await onReset();
+      setOpen(false);
+    } catch {
+      // The submit handler surfaces its own error toast. Keep the dialog open
+      // so the user can retry.
+    } finally {
+      setIsResetting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="destructive" type="button" size="sm" disabled={isLoading}>
+            <Trans>Reset to defaults</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Reset branding preferences</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              This will reset all branding preferences to their default values and save the changes immediately.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="warning">
+          <AlertDescription>
+            <p>
+              <Trans>Once confirmed, the following will be reset:</Trans>
+            </p>
+
+            <ul className="mt-0.5 list-inside list-disc">
+              <li>
+                <Trans>Custom branding enabled setting</Trans>
+              </li>
+              <li>
+                <Trans>Branding logo</Trans>
+              </li>
+              <li>
+                <Trans>Brand website and brand details</Trans>
+              </li>
+              <li>
+                <Trans>Brand colours, including background, foreground, primary, and border colours</Trans>
+              </li>
+
+              {hasAdvancedBranding && (
+                <>
+                  <li>
+                    <Trans>Border radius</Trans>
+                  </li>
+                  <li>
+                    <Trans>Custom CSS</Trans>
+                  </li>
+                </>
+              )}
+            </ul>
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isLoading}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button type="button" variant="destructive" loading={isLoading} onClick={() => void handleResetToDefaults()}>
+            <Trans>Reset to defaults</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/document-preferences-reset-dialog.tsx

@@ -0,0 +1,141 @@
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Trans } from '@lingui/react/macro';
+import { useState } from 'react';
+
+export type DocumentPreferencesResetDialogProps = {
+  isSubmitting: boolean;
+  onReset: () => Promise<void>;
+  showAiFeatures?: boolean;
+  showDocumentVisibility?: boolean;
+  showIncludeSenderDetails?: boolean;
+};
+
+export const DocumentPreferencesResetDialog = ({
+  isSubmitting,
+  onReset,
+  showAiFeatures = false,
+  showDocumentVisibility = false,
+  showIncludeSenderDetails = false,
+}: DocumentPreferencesResetDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [isResetting, setIsResetting] = useState(false);
+
+  const isLoading = isSubmitting || isResetting;
+
+  const handleResetToDefaults = async () => {
+    setIsResetting(true);
+
+    try {
+      await onReset();
+      setOpen(false);
+    } catch {
+      // The submit handler surfaces its own error toast. Keep the dialog open
+      // so the user can retry.
+    } finally {
+      setIsResetting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && setOpen(value)}>
+      <DialogTrigger asChild>
+        <Button variant="destructive" type="button" size="sm" disabled={isLoading}>
+          <Trans>Reset to defaults</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Reset document preferences</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              This will reset all document preferences to their default values and save the changes immediately.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="warning">
+          <AlertDescription>
+            <p>
+              <Trans>Once confirmed, the following will be reset:</Trans>
+            </p>
+
+            <ul className="mt-0.5 list-inside list-disc">
+              {showDocumentVisibility && (
+                <li>
+                  <Trans>Default document visibility</Trans>
+                </li>
+              )}
+              <li>
+                <Trans>Default document language</Trans>
+              </li>
+              <li>
+                <Trans>Default date format</Trans>
+              </li>
+              <li>
+                <Trans>Default time zone</Trans>
+              </li>
+              <li>
+                <Trans>Default signature settings</Trans>
+              </li>
+              {showIncludeSenderDetails && (
+                <li>
+                  <Trans>Send on behalf of team</Trans>
+                </li>
+              )}
+              <li>
+                <Trans>Include the signing certificate in the document</Trans>
+              </li>
+              <li>
+                <Trans>Include the audit logs in the document</Trans>
+              </li>
+              <li>
+                <Trans>Default recipients</Trans>
+              </li>
+              <li>
+                <Trans>Delegate document ownership</Trans>
+              </li>
+              <li>
+                <Trans>Default envelope expiration</Trans>
+              </li>
+              <li>
+                <Trans>Default signing reminders</Trans>
+              </li>
+              {showAiFeatures && (
+                <li>
+                  <Trans>AI features</Trans>
+                </li>
+              )}
+            </ul>
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isLoading}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button type="button" variant="destructive" loading={isLoading} onClick={() => void handleResetToDefaults()}>
+            <Trans>Reset to defaults</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -1,3 +1,4 @@
+import { ZNameSchema } from '@documenso/lib/types/name';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -23,7 +24,7 @@ import { useParams } from 'react-router';
 import { z } from 'zod';
 
 const ZCreateFolderFormSchema = z.object({
-  name: z.string().min(1, { message: 'Folder name is required' }),
+  name: ZNameSchema,
 });
 
 type TCreateFolderFormSchema = z.infer<typeof ZCreateFolderFormSchema>;
@@ -65,7 +66,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-delete-dialog.tsx

@@ -122,7 +122,7 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
                     <FormLabel>
                       <Trans>
                         Confirm by typing:{' '}
-                        <span className="font-semibold font-sm text-destructive">{deleteMessage}</span>
+                        <span className="font-semibold text-destructive text-sm">{deleteMessage}</span>
                       </Trans>
                     </FormLabel>
                     <FormControl>

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

@@ -1,5 +1,6 @@
 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';
@@ -23,8 +24,6 @@ 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;
@@ -32,7 +31,7 @@ export type FolderUpdateDialogProps = {
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
 export const ZUpdateFolderFormSchema = z.object({
-  name: z.string().min(1),
+  name: ZNameSchema,
   visibility: z.nativeEnum(DocumentVisibility).optional(),
 });
 
@@ -40,7 +39,6 @@ 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/organisation-create-dialog.tsx

@@ -336,7 +336,7 @@ const BillingPlanForm = ({ value, onChange, plans, canCreateFreeOrganisation }:
         >
           <div className="w-full text-left">
             <div className="flex items-center justify-between">
-              <p className="text-medium">
+              <p className="font-medium">
                 <Trans context="Plan price">Free</Trans>
               </p>
 

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

@@ -115,7 +115,7 @@ export const OrganisationEmailDomainDeleteDialog = ({
                     <FormLabel>
                       <Trans>
                         Confirm by typing{' '}
-                        <span className="font-semibold font-sm text-destructive">{deleteMessage}</span>
+                        <span className="font-semibold text-destructive text-sm">{deleteMessage}</span>
                       </Trans>
                     </FormLabel>
                     <FormControl>

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

@@ -370,7 +370,7 @@ export const OrganisationMemberInviteDialog = ({ trigger, ...props }: Organisati
                           <button
                             type="button"
                             className={cn(
-                              'justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
+                              'inline-flex h-10 w-10 items-center justify-start text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
                               index === 0 ? 'mt-8' : 'mt-0',
                             )}
                             disabled={organisationMemberInvites.length === 1}

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

@@ -1,5 +1,6 @@
 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';
@@ -25,14 +26,13 @@ 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: z.string().min(3),
+  passkeyName: ZNameSchema,
 });
 
 type TCreatePasskeyFormSchema = z.infer<typeof ZCreatePasskeyFormSchema>;

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

@@ -1,4 +1,5 @@
 import { trpc } from '@documenso/trpc/react';
+import { ZUpdateTeamEmailMutationSchema } from '@documenso/trpc/server/team-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -19,16 +20,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 { z } from 'zod';
+import type { z } from 'zod';
 
 export type TeamEmailUpdateDialogProps = {
   teamEmail: TeamEmail;
   trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
-const ZUpdateTeamEmailFormSchema = z.object({
-  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
-});
+const ZUpdateTeamEmailFormSchema = ZUpdateTeamEmailMutationSchema.pick({
+  data: true,
+}).shape.data;
 
 type TUpdateTeamEmailFormSchema = z.infer<typeof ZUpdateTeamEmailFormSchema>;
 
@@ -44,6 +45,7 @@ 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/token-create-dialog.tsx

@@ -0,0 +1,250 @@
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateApiTokenRequestSchema } from '@documenso/trpc/server/api-token-router/create-api-token.types';
+import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import type { z } from 'zod';
+
+import { useCurrentTeam } from '~/providers/team';
+
+const NEVER_EXPIRE = 'NEVER' as const;
+
+export const EXPIRATION_DATES = {
+  ONE_WEEK: msg`7 days`,
+  ONE_MONTH: msg`1 month`,
+  THREE_MONTHS: msg`3 months`,
+  SIX_MONTHS: msg`6 months`,
+  ONE_YEAR: msg`12 months`,
+  [NEVER_EXPIRE]: msg`Never`,
+} as const;
+
+const ZCreateTokenFormSchema = ZCreateApiTokenRequestSchema.pick({
+  tokenName: true,
+  expirationDate: true,
+});
+
+type TCreateTokenFormSchema = z.infer<typeof ZCreateTokenFormSchema>;
+
+export type TokenCreateDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const TokenCreateDialog = ({ trigger, ...props }: TokenCreateDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const team = useCurrentTeam();
+
+  const [open, setOpen] = useState(false);
+  const [createdToken, setCreatedToken] = useState<string | null>(null);
+
+  const form = useForm<TCreateTokenFormSchema>({
+    resolver: zodResolver(ZCreateTokenFormSchema),
+    defaultValues: {
+      tokenName: '',
+      expirationDate: 'THREE_MONTHS',
+    },
+  });
+
+  const { mutateAsync: createToken } = trpc.apiToken.create.useMutation();
+
+  const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenFormSchema) => {
+    try {
+      const { token } = await createToken({
+        teamId: team.id,
+        tokenName,
+        expirationDate: expirationDate === NEVER_EXPIRE ? null : expirationDate,
+      });
+
+      setCreatedToken(token);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(AppErrorCode.UNAUTHORIZED, () => msg`You do not have permission to create a token for this team.`)
+        .otherwise(() => msg`Something went wrong. Please try again later.`);
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+        duration: 5000,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      form.reset();
+      setCreatedToken(null);
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)} {...props}>
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button className="flex-shrink-0">
+            <Trans>Create token</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent
+        className="max-w-lg"
+        position="center"
+        onInteractOutside={(event) => {
+          // Prevent losing the created token by accidentally clicking outside the dialog.
+          if (createdToken) {
+            event.preventDefault();
+          }
+        }}
+      >
+        {createdToken ? (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Token created</Trans>
+              </DialogTitle>
+
+              <DialogDescription>
+                <Trans>Copy your token now. For security reasons you will not be able to see it again.</Trans>
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="relative">
+              <Input
+                className="pr-12 font-mono text-sm"
+                aria-label={_(msg`Your new API token`)}
+                name="createdToken"
+                readOnly
+                value={createdToken}
+              />
+              <div className="absolute top-0 right-2 bottom-0 flex items-center justify-center">
+                <CopyTextButton
+                  value={createdToken}
+                  onCopySuccess={() => toast({ title: _(msg`Token copied to clipboard`) })}
+                />
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button type="button" onClick={() => setOpen(false)}>
+                <Trans>Done</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        ) : (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Create API token</Trans>
+              </DialogTitle>
+
+              <DialogDescription>
+                <Trans>Use API tokens to authenticate with the Documenso API.</Trans>
+              </DialogDescription>
+            </DialogHeader>
+
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)}>
+                <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+                  <FormField
+                    control={form.control}
+                    name="tokenName"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel required>
+                          <Trans>Name</Trans>
+                        </FormLabel>
+
+                        <FormControl>
+                          <Input className="bg-background" {...field} />
+                        </FormControl>
+
+                        <FormDescription>
+                          <Trans>A name to help you identify this token later.</Trans>
+                        </FormDescription>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="expirationDate"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Expires in</Trans>
+                        </FormLabel>
+
+                        <FormControl>
+                          <Select value={field.value ?? NEVER_EXPIRE} onValueChange={field.onChange}>
+                            <SelectTrigger className="bg-background">
+                              <SelectValue />
+                            </SelectTrigger>
+
+                            <SelectContent>
+                              {Object.entries(EXPIRATION_DATES).map(([key, date]) => (
+                                <SelectItem key={key} value={key}>
+                                  {_(date)}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <DialogFooter>
+                    <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                      <Trans>Cancel</Trans>
+                    </Button>
+
+                    <Button type="submit" loading={form.formState.isSubmitting}>
+                      <Trans>Create token</Trans>
+                    </Button>
+                  </DialogFooter>
+                </fieldset>
+              </form>
+            </Form>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -105,7 +105,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
-            <Trans>Are you sure you want to delete this token?</Trans>
+            <Trans>Delete token</Trans>
           </DialogTitle>
 
           <DialogDescription>
@@ -126,7 +126,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
                     <FormLabel>
                       <Trans>
                         Confirm by typing:{' '}
-                        <span className="font-semibold font-sm text-destructive">{deleteMessage}</span>
+                        <span className="font-semibold text-destructive text-sm">{deleteMessage}</span>
                       </Trans>
                     </FormLabel>
 
@@ -139,21 +139,18 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
               />
 
               <DialogFooter>
-                <div className="flex w-full flex-nowrap gap-4">
-                  <Button type="button" variant="secondary" className="flex-1" onClick={() => setIsOpen(false)}>
-                    <Trans>Cancel</Trans>
-                  </Button>
+                <Button type="button" variant="secondary" onClick={() => setIsOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
 
-                  <Button
-                    type="submit"
-                    variant="destructive"
-                    className="flex-1"
-                    disabled={!form.formState.isValid}
-                    loading={form.formState.isSubmitting}
-                  >
-                    <Trans>I'm sure! Delete it</Trans>
-                  </Button>
-                </div>
+                <Button
+                  type="submit"
+                  variant="destructive"
+                  disabled={!form.formState.isValid}
+                  loading={form.formState.isSubmitting}
+                >
+                  <Trans>Delete</Trans>
+                </Button>
               </DialogFooter>
             </fieldset>
           </form>

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

@@ -117,7 +117,7 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
                     <FormLabel>
                       <Trans>
                         Confirm by typing:{' '}
-                        <span className="font-semibold font-sm text-destructive">{deleteMessage}</span>
+                        <span className="font-semibold text-destructive text-sm">{deleteMessage}</span>
                       </Trans>
                     </FormLabel>
                     <FormControl>

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

@@ -503,7 +503,7 @@ export const ConfigureFieldsView = ({
             {selectedField && (
               <div
                 className={cn(
-                  'pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white text-muted-foreground transition duration-200 [container-type:size] dark:text-muted-background',
+                  'pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white text-muted-foreground transition duration-200 [container-type:size] dark:text-muted',
                   selectedRecipientStyles.base,
                   {
                     '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,

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

@@ -1,7 +1,13 @@
 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 { normalizeBrandingColors } from '@documenso/lib/utils/normalize-branding-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@documenso/ui/primitives/accordion';
 import { Button } from '@documenso/ui/primitives/button';
@@ -18,18 +24,21 @@ import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { BrandingPreferencesResetDialog } from '~/components/dialogs/branding-preferences-reset-dialog';
 import { useOptionalCurrentTeam } from '~/providers/team';
 import { useCspNonce } from '~/utils/nonce';
 
-const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
-const ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
+import { FormStickySaveBar } from './form-sticky-save-bar';
 
 const ZBrandingPreferencesFormSchema = z.object({
   brandingEnabled: z.boolean().nullable(),
   brandingLogo: z
     .instanceof(File)
-    .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')
+    .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')
     .nullish(),
   brandingUrl: z.string().url().optional().or(z.literal('')),
   brandingCompanyDetails: z.string().max(500).optional(),
@@ -67,42 +76,123 @@ export function BrandingPreferencesForm({
 
   const [previewUrl, setPreviewUrl] = useState<string>('');
   const [hasLoadedPreview, setHasLoadedPreview] = useState(false);
+  const [colorPickerKey, setColorPickerKey] = useState(0);
 
   const parsedColors = ZCssVarsSchema.safeParse(settings.brandingColors);
   const initialColors = parsedColors.success ? parsedColors.data : {};
 
+  // The saved state the form maps to. Used both as the reactive `values` source and as
+  // the explicit target for a Reset (see handleReset).
+  const savedValues: TBrandingPreferencesFormSchema = {
+    brandingEnabled: settings.brandingEnabled ?? null,
+    brandingUrl: settings.brandingUrl ?? '',
+    brandingLogo: undefined,
+    brandingCompanyDetails: settings.brandingCompanyDetails ?? '',
+    brandingColors: initialColors,
+    brandingCss: settings.brandingCss ?? '',
+  };
+
   const form = useForm<TBrandingPreferencesFormSchema>({
-    values: {
-      brandingEnabled: settings.brandingEnabled ?? null,
-      brandingUrl: settings.brandingUrl ?? '',
-      brandingLogo: undefined,
-      brandingCompanyDetails: settings.brandingCompanyDetails ?? '',
-      brandingColors: initialColors,
-      brandingCss: settings.brandingCss ?? '',
-    },
+    values: savedValues,
     resolver: zodResolver(ZBrandingPreferencesFormSchema),
   });
 
   const isBrandingEnabled = form.watch('brandingEnabled');
 
+  const hasResetBrandingColors =
+    settings.brandingColors === null ||
+    settings.brandingColors === undefined ||
+    (parsedColors.success && normalizeBrandingColors(parsedColors.data) === null);
+
+  // Only show the reset action when the saved settings actually differ from the
+  // defaults, so it never renders as a pointless disabled button.
+  const isResetToDefaultsVisible =
+    settings.brandingEnabled !== (canInherit ? null : false) ||
+    !!settings.brandingLogo ||
+    !!settings.brandingUrl ||
+    !!settings.brandingCompanyDetails ||
+    !!settings.brandingCss ||
+    !hasResetBrandingColors;
+
+  const handleResetToDefaults = async () => {
+    const data: TBrandingPreferencesFormSchema = {
+      brandingEnabled: canInherit ? null : false,
+      brandingLogo: null,
+      brandingUrl: '',
+      brandingCompanyDetails: '',
+      brandingColors: {},
+      brandingCss: '',
+    };
+
+    await onFormSubmit(data);
+
+    if (previewUrl.startsWith('blob:')) {
+      URL.revokeObjectURL(previewUrl);
+    }
+
+    setPreviewUrl('');
+    setColorPickerKey((key) => key + 1);
+    form.reset(data);
+  };
+
+  const getSavedLogoPreviewUrl = () => {
+    if (!settings.brandingLogo) {
+      return '';
+    }
+
+    const file = JSON.parse(settings.brandingLogo);
+
+    if (!('type' in file) || !('data' in file)) {
+      return '';
+    }
+
+    const logoUrl =
+      context === 'Team'
+        ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/team/${team?.id}`
+        : `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/organisation/${organisation?.id}`;
+
+    return `${logoUrl}?v=${Date.now()}`;
+  };
+
   useEffect(() => {
-    if (settings.brandingLogo) {
-      const file = JSON.parse(settings.brandingLogo);
+    const savedLogoPreviewUrl = getSavedLogoPreviewUrl();
 
-      if ('type' in file && 'data' in file) {
-        const logoUrl =
-          context === 'Team'
-            ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/team/${team?.id}`
-            : `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/organisation/${organisation?.id}`;
-
-        setPreviewUrl(logoUrl + '?v=' + Date.now());
-        setHasLoadedPreview(true);
-      }
+    if (savedLogoPreviewUrl) {
+      setPreviewUrl(savedLogoPreviewUrl);
     }
 
     setHasLoadedPreview(true);
   }, [settings.brandingLogo]);
 
+  // Reset the form to the saved values. The form is driven by the `values` prop (no
+  // `defaultValues`), so `reset()` with no argument doesn't re-baseline the dirty check;
+  // passing the saved values clears the per-field dirty tracking (dirtyFields).
+  const handleReset = () => {
+    setPreviewUrl(getSavedLogoPreviewUrl());
+    form.reset(savedValues);
+  };
+
+  // `formState.isDirty` is unreliable for a `values`-driven form: after a reset (or a
+  // save + refetch) it can stay true even though every field already matches its saved
+  // value and `dirtyFields` is empty. Derive the flag from `dirtyFields` instead so the
+  // sticky save bar reliably disappears.
+  const hasUnsavedChanges = Object.keys(form.formState.dirtyFields).length > 0;
+
+  // Re-baseline the form to the just-saved state after a successful submit. The `values`
+  // prop re-syncs most fields once the route refetches, but write-only fields (the logo
+  // is a File that isn't reflected back into `values`) would otherwise stay dirty and
+  // keep the save bar visible. Relies on the page handler rethrowing on error so we only
+  // re-baseline on success.
+  const handleFormSubmit = form.handleSubmit(async (data) => {
+    try {
+      await onFormSubmit(data);
+    } catch {
+      return;
+    }
+
+    form.reset(form.getValues());
+  });
+
   // Cleanup ObjectURL on unmount or when previewUrl changes
   useEffect(() => {
     return () => {
@@ -114,7 +204,7 @@ export function BrandingPreferencesForm({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+      <form onSubmit={handleFormSubmit}>
         <fieldset className="flex h-full flex-col gap-y-4" disabled={form.formState.isSubmitting}>
           <FormField
             control={form.control}
@@ -167,7 +257,7 @@ export function BrandingPreferencesForm({
           />
 
           <div className="relative flex w-full flex-col gap-y-4">
-            {!isBrandingEnabled && <div className="absolute inset-0 z-[9998] bg-background/60" />}
+            {!isBrandingEnabled && <div className="absolute inset-0 z-30 bg-background/60" />}
 
             <FormField
               control={form.control}
@@ -199,7 +289,7 @@ export function BrandingPreferencesForm({
                       <FormControl className="relative">
                         <Input
                           type="file"
-                          accept={ACCEPTED_FILE_TYPES.join(',')}
+                          accept={BRANDING_LOGO_ALLOWED_TYPES.join(',')}
                           disabled={!isBrandingEnabled}
                           onChange={(e) => {
                             const file = e.target.files?.[0];
@@ -321,7 +411,7 @@ export function BrandingPreferencesForm({
 
           {hasAdvancedBranding && (
             <div className="relative flex w-full flex-col gap-y-6">
-              {!isBrandingEnabled && <div className="absolute inset-0 z-[9998] bg-background/60" />}
+              {!isBrandingEnabled && <div className="absolute inset-0 z-30 bg-background/60" />}
 
               <div>
                 <FormLabel>
@@ -346,6 +436,7 @@ export function BrandingPreferencesForm({
                         </FormDescription>
                         <FormControl>
                           <ColorPicker
+                            key={`background-${colorPickerKey}`}
                             nonce={nonce}
                             value={field.value ?? ''}
                             defaultValue={DEFAULT_BRAND_COLORS.background}
@@ -369,6 +460,7 @@ export function BrandingPreferencesForm({
                         </FormDescription>
                         <FormControl>
                           <ColorPicker
+                            key={`foreground-${colorPickerKey}`}
                             nonce={nonce}
                             value={field.value ?? ''}
                             defaultValue={DEFAULT_BRAND_COLORS.foreground}
@@ -392,6 +484,7 @@ export function BrandingPreferencesForm({
                         </FormDescription>
                         <FormControl>
                           <ColorPicker
+                            key={`primary-${colorPickerKey}`}
                             nonce={nonce}
                             value={field.value ?? ''}
                             defaultValue={DEFAULT_BRAND_COLORS.primary}
@@ -415,6 +508,7 @@ export function BrandingPreferencesForm({
                         </FormDescription>
                         <FormControl>
                           <ColorPicker
+                            key={`primary-foreground-${colorPickerKey}`}
                             nonce={nonce}
                             value={field.value ?? ''}
                             defaultValue={DEFAULT_BRAND_COLORS.primaryForeground}
@@ -438,6 +532,7 @@ export function BrandingPreferencesForm({
                         </FormDescription>
                         <FormControl>
                           <ColorPicker
+                            key={`border-${colorPickerKey}`}
                             nonce={nonce}
                             value={field.value ?? ''}
                             defaultValue={DEFAULT_BRAND_COLORS.border}
@@ -461,6 +556,7 @@ export function BrandingPreferencesForm({
                         </FormDescription>
                         <FormControl>
                           <ColorPicker
+                            key={`ring-${colorPickerKey}`}
                             nonce={nonce}
                             value={field.value ?? ''}
                             defaultValue={DEFAULT_BRAND_COLORS.ring}
@@ -538,11 +634,20 @@ export function BrandingPreferencesForm({
             </div>
           )}
 
-          <div className="flex flex-row justify-end space-x-4">
-            <Button type="submit" loading={form.formState.isSubmitting}>
-              <Trans>Update</Trans>
-            </Button>
-          </div>
+          <FormStickySaveBar
+            isDirty={hasUnsavedChanges}
+            isSubmitting={form.formState.isSubmitting}
+            onReset={handleReset}
+            resetToDefaults={
+              isResetToDefaultsVisible ? (
+                <BrandingPreferencesResetDialog
+                  hasAdvancedBranding={hasAdvancedBranding}
+                  isSubmitting={form.formState.isSubmitting}
+                  onReset={handleResetToDefaults}
+                />
+              ) : undefined
+            }
+          />
         </fieldset>
       </form>
     </Form>

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

@@ -11,17 +11,16 @@ import { isValidLanguageCode, SUPPORTED_LANGUAGE_CODES, SUPPORTED_LANGUAGES } fr
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import type { TDefaultRecipients } from '@documenso/lib/types/default-recipients';
 import { ZDefaultRecipientsSchema } from '@documenso/lib/types/default-recipients';
-import { type TDocumentMetaDateFormat, ZDocumentMetaTimezoneSchema } from '@documenso/lib/types/document-meta';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { type TDocumentMetaDateFormat, ZDocumentMetaDateFormatSchema } from '@documenso/lib/types/document-meta';
+import { generateDefaultOrganisationSettings, isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
-import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
+import { extractTeamSignatureSettings, generateDefaultTeamSettings } from '@documenso/lib/utils/teams';
 import { DocumentSignatureSettingsTooltip } from '@documenso/ui/components/document/document-signature-settings-tooltip';
 import { ExpirationPeriodPicker } from '@documenso/ui/components/document/expiration-period-picker';
 import { ReminderSettingsPicker } from '@documenso/ui/components/document/reminder-settings-picker';
 import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
 import { Alert } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
 import { Combobox } from '@documenso/ui/primitives/combobox';
 import {
   Form,
@@ -38,14 +37,15 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg, t } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { TeamGlobalSettings } from '@prisma/client';
-import { DocumentVisibility, OrganisationType, type RecipientRole } from '@prisma/client';
+import { DocumentVisibility, OrganisationType, type RecipientRole, type TeamGlobalSettings } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { DocumentPreferencesResetDialog } from '~/components/dialogs/document-preferences-reset-dialog';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 import { DefaultRecipientsMultiSelectCombobox } from '../general/default-recipients-multiselect-combobox';
+import { FormStickySaveBar } from './form-sticky-save-bar';
 
 /**
  * Can't infer this from the schema since we need to keep the schema inside the component to allow
@@ -93,6 +93,26 @@ export type DocumentPreferencesFormProps = {
   onFormSubmit: (data: TDocumentPreferencesFormSchema) => Promise<void>;
 };
 
+const getDocumentPreferencesFormValues = (settings: SettingsSubset): TDocumentPreferencesFormSchema => {
+  const parsedDocumentDateFormat = ZDocumentMetaDateFormatSchema.safeParse(settings.documentDateFormat);
+
+  return {
+    documentVisibility: settings.documentVisibility,
+    documentLanguage: isValidLanguageCode(settings.documentLanguage) ? settings.documentLanguage : null,
+    documentTimezone: settings.documentTimezone,
+    documentDateFormat: parsedDocumentDateFormat.success ? parsedDocumentDateFormat.data : null,
+    includeSenderDetails: settings.includeSenderDetails,
+    includeSigningCertificate: settings.includeSigningCertificate,
+    includeAuditLog: settings.includeAuditLog,
+    signatureTypes: extractTeamSignatureSettings({ ...settings }),
+    defaultRecipients: settings.defaultRecipients ? ZDefaultRecipientsSchema.parse(settings.defaultRecipients) : null,
+    delegateDocumentOwnership: settings.delegateDocumentOwnership,
+    aiFeaturesEnabled: settings.aiFeaturesEnabled,
+    envelopeExpirationPeriod: settings.envelopeExpirationPeriod ?? null,
+    reminderSettings: settings.reminderSettings ?? null,
+  };
+};
+
 export const DocumentPreferencesForm = ({
   settings,
   onFormSubmit,
@@ -113,7 +133,7 @@ export const DocumentPreferencesForm = ({
     documentVisibility: z.nativeEnum(DocumentVisibility).nullable(),
     documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES).nullable(),
     documentTimezone: z.string().nullable(),
-    documentDateFormat: ZDocumentMetaTimezoneSchema.nullable(),
+    documentDateFormat: ZDocumentMetaDateFormatSchema.nullable(),
     includeSenderDetails: z.boolean().nullable(),
     includeSigningCertificate: z.boolean().nullable(),
     includeAuditLog: z.boolean().nullable(),
@@ -127,29 +147,48 @@ export const DocumentPreferencesForm = ({
     reminderSettings: ZEnvelopeReminderSettings.nullable(),
   });
 
+  const defaultValues = getDocumentPreferencesFormValues(settings);
+  const defaultSettings = canInherit ? generateDefaultTeamSettings() : generateDefaultOrganisationSettings();
+  const baseResetValues = getDocumentPreferencesFormValues(defaultSettings);
+  const resetValues = {
+    ...baseResetValues,
+    aiFeaturesEnabled: isAiFeaturesConfigured ? baseResetValues.aiFeaturesEnabled : defaultValues.aiFeaturesEnabled,
+  };
+
   const form = useForm<TDocumentPreferencesFormSchema>({
-    defaultValues: {
-      documentVisibility: settings.documentVisibility,
-      documentLanguage: isValidLanguageCode(settings.documentLanguage) ? settings.documentLanguage : null,
-      documentTimezone: settings.documentTimezone,
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      documentDateFormat: settings.documentDateFormat as TDocumentMetaDateFormat | null,
-      includeSenderDetails: settings.includeSenderDetails,
-      includeSigningCertificate: settings.includeSigningCertificate,
-      includeAuditLog: settings.includeAuditLog,
-      signatureTypes: extractTeamSignatureSettings({ ...settings }),
-      defaultRecipients: settings.defaultRecipients ? ZDefaultRecipientsSchema.parse(settings.defaultRecipients) : null,
-      delegateDocumentOwnership: settings.delegateDocumentOwnership,
-      aiFeaturesEnabled: settings.aiFeaturesEnabled,
-      envelopeExpirationPeriod: settings.envelopeExpirationPeriod ?? null,
-      reminderSettings: settings.reminderSettings ?? null,
-    },
+    defaultValues,
     resolver: zodResolver(ZDocumentPreferencesFormSchema),
   });
 
+  // Parse both sides through the schema so we compare canonical representations
+  const parsedCurrentValues = ZDocumentPreferencesFormSchema.safeParse(defaultValues);
+  const parsedResetValues = ZDocumentPreferencesFormSchema.safeParse(resetValues);
+
+  const isResetToDefaultsVisible =
+    !parsedCurrentValues.success ||
+    !parsedResetValues.success ||
+    JSON.stringify(parsedCurrentValues.data) !== JSON.stringify(parsedResetValues.data);
+
+  const handleResetToDefaults = async () => {
+    await onFormSubmit(resetValues);
+    form.reset(resetValues);
+  };
+
+  const handleFormSubmit = form.handleSubmit(async (data) => {
+    try {
+      await onFormSubmit(data);
+    } catch {
+      // The page handler surfaces its own error toast. Keep the form dirty so
+      // the save bar stays visible and the user can retry.
+      return;
+    }
+
+    form.reset(data);
+  });
+
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+      <form onSubmit={handleFormSubmit}>
         <fieldset className="flex h-full max-w-2xl flex-col gap-y-6" disabled={form.formState.isSubmitting}>
           {!isPersonalLayoutMode && (
             <FormField
@@ -756,11 +795,22 @@ export const DocumentPreferencesForm = ({
             />
           )}
 
-          <div className="flex flex-row justify-end space-x-4">
-            <Button type="submit" loading={form.formState.isSubmitting}>
-              <Trans>Update</Trans>
-            </Button>
-          </div>
+          <FormStickySaveBar
+            isDirty={form.formState.isDirty}
+            isSubmitting={form.formState.isSubmitting}
+            onReset={() => form.reset()}
+            resetToDefaults={
+              isResetToDefaultsVisible ? (
+                <DocumentPreferencesResetDialog
+                  isSubmitting={form.formState.isSubmitting}
+                  onReset={handleResetToDefaults}
+                  showAiFeatures={isAiFeaturesConfigured}
+                  showDocumentVisibility={!isPersonalLayoutMode}
+                  showIncludeSenderDetails={!isPersonalLayoutMode && !isPersonalOrganisation}
+                />
+              ) : undefined
+            }
+          />
         </fieldset>
       </form>
     </Form>

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

@@ -4,7 +4,6 @@ import { DEFAULT_DOCUMENT_EMAIL_SETTINGS, ZDocumentEmailSettingsSchema } from '@
 import { zEmail } from '@documenso/lib/utils/zod';
 import { trpc } from '@documenso/trpc/react';
 import { DocumentEmailCheckboxes } from '@documenso/ui/components/document/document-email-checkboxes';
-import { Button } from '@documenso/ui/primitives/button';
 import {
   Form,
   FormControl,
@@ -22,6 +21,8 @@ import type { TeamGlobalSettings } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { FormStickySaveBar } from './form-sticky-save-bar';
+
 const ZEmailPreferencesFormSchema = z.object({
   emailId: z.string().nullable(),
   emailReplyTo: zEmail().nullable(),
@@ -59,9 +60,21 @@ export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: Ema
 
   const emails = emailData?.data || [];
 
+  const handleFormSubmit = form.handleSubmit(async (data) => {
+    try {
+      await onFormSubmit(data);
+    } catch {
+      // The page handler surfaces its own error toast. Keep the form dirty so
+      // the save bar stays visible and the user can retry.
+      return;
+    }
+
+    form.reset(data);
+  });
+
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+      <form onSubmit={handleFormSubmit}>
         <fieldset className="flex h-full max-w-2xl flex-col gap-y-6" disabled={form.formState.isSubmitting}>
           {organisation.organisationClaim.flags.emailDomains && (
             <FormField
@@ -203,11 +216,11 @@ export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: Ema
             )}
           />
 
-          <div className="flex flex-row justify-end space-x-4">
-            <Button type="submit" loading={form.formState.isSubmitting}>
-              <Trans>Update</Trans>
-            </Button>
-          </div>
+          <FormStickySaveBar
+            isDirty={form.formState.isDirty}
+            isSubmitting={form.formState.isSubmitting}
+            onReset={() => form.reset()}
+          />
         </fieldset>
       </form>
     </Form>

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

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

apps/remix/app/components/forms/form-sticky-save-bar.tsx

@@ -0,0 +1,126 @@
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { AnimatePresence, motion } from 'framer-motion';
+import { AlertTriangleIcon } from 'lucide-react';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+
+export type FormStickySaveBarProps = {
+  isDirty: boolean;
+  isSubmitting: boolean;
+  onReset: () => void;
+  /**
+   * Slot for a "reset to defaults" action, rendered before the Undo button. Hidden while
+   * the bar is floating so it never appears in the unsaved-changes island.
+   */
+  resetToDefaults?: ReactNode;
+};
+
+/**
+ * A single `position: sticky` bar rendered at the bottom of the form.
+ *
+ * - When the form's end is on screen it settles into place as a plain footer (just the
+ *   Reset / Save buttons).
+ * - When the form's end is scrolled off, it sticks to the bottom of the viewport and
+ *   shows the "unsaved changes" pill chrome.
+ *
+ * Because it's the same element in the form's flow, it auto-aligns to the form and the
+ * float <-> dock hand-off is a native, scroll-linked transition (no measurement, no
+ * shared-layout morph). A 1px sentinel below it detects the stuck state so we can toggle
+ * the pill chrome.
+ */
+export const FormStickySaveBar = ({ isDirty, isSubmitting, onReset, resetToDefaults }: FormStickySaveBarProps) => {
+  const { t } = useLingui();
+
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const [isStuck, setIsStuck] = useState(false);
+
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+
+    if (!sentinel) {
+      return;
+    }
+
+    // The sentinel sits at the bar's resting position (the end of the form). While the
+    // bar is stuck to the bottom of the viewport the sentinel is scrolled past (out of
+    // view); once you reach the form's end it comes into view and the bar settles.
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsStuck(!entry.isIntersecting);
+      },
+      {
+        root: null,
+        rootMargin: '0px 0px -24px 0px',
+        threshold: 0,
+      },
+    );
+
+    observer.observe(sentinel);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  // Show the floating pill chrome only when there are unsaved changes AND the form's
+  // end is off screen.
+  const isFloating = isDirty && isStuck;
+
+  return (
+    <>
+      <div
+        data-testid="form-sticky-save-bar"
+        className={cn(
+          'z-40 flex min-h-9 min-w-0 items-center gap-x-2 rounded-lg py-4 transition-[margin,padding,background-color,border-color,box-shadow] duration-200 md:gap-x-4',
+          isDirty ? 'sticky bottom-6' : '',
+          // On mobile the docked and floating states are geometrically identical (only
+          // paint changes): a horizontal bleed there overflows the narrow viewport and
+          // fights the IntersectionObserver (oscillation + partial hiding). From `sm` up
+          // there's room, so we restore the original chrome — the island bleeds 8px past
+          // the form when floating, and the buttons sit flush with the fields when docked.
+          isFloating
+            ? 'border border-border bg-background px-4 shadow-2xl sm:-mx-2'
+            : 'border border-transparent bg-transparent px-4 shadow-none sm:px-0',
+        )}
+      >
+        <AnimatePresence initial={false}>
+          {isFloating && (
+            <motion.div
+              key="notice"
+              role="region"
+              aria-label={t`Unsaved changes`}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.15 }}
+              className="flex min-h-9 min-w-0 items-center gap-x-2 text-sm"
+            >
+              <AlertTriangleIcon className="h-5 w-5 flex-shrink-0 text-destructive" />
+              <span className="font-medium text-xs md:text-sm">
+                <Trans>You have unsaved changes</Trans>
+              </span>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <div className="ml-auto flex flex-shrink-0 items-center gap-x-2">
+          {!isFloating && resetToDefaults}
+
+          {isDirty && (
+            <Button type="button" variant="secondary" size="sm" onClick={onReset} disabled={isSubmitting}>
+              <Trans>Undo</Trans>
+            </Button>
+          )}
+
+          <Button type="submit" className="shrink-0" size="sm" loading={isSubmitting} disabled={!isDirty}>
+            <Trans>Save changes</Trans>
+          </Button>
+        </div>
+      </div>
+
+      {/* Sentinel: detects when the sticky bar is floating (stuck) vs settled (docked). */}
+      <div ref={sentinelRef} aria-hidden className="pointer-events-none h-px w-full" />
+    </>
+  );
+};

apps/remix/app/components/forms/organisation-update-form.tsx

@@ -4,7 +4,6 @@ import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { ZUpdateOrganisationRequestSchema } from '@documenso/trpc/server/organisation-router/update-organisation.types';
-import { Button } from '@documenso/ui/primitives/button';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -12,11 +11,12 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { AnimatePresence, motion } from 'framer-motion';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import type { z } from 'zod';
 
+import { FormStickySaveBar } from './form-sticky-save-bar';
+
 const ZOrganisationUpdateFormSchema = ZUpdateOrganisationRequestSchema.shape.data.pick({
   name: true,
   url: true,
@@ -137,36 +137,11 @@ export const OrganisationUpdateForm = () => {
             )}
           />
 
-          <div className="flex flex-row justify-end space-x-4">
-            <AnimatePresence>
-              {form.formState.isDirty && (
-                <motion.div
-                  initial={{
-                    opacity: 0,
-                  }}
-                  animate={{
-                    opacity: 1,
-                  }}
-                  exit={{
-                    opacity: 0,
-                  }}
-                >
-                  <Button type="button" variant="secondary" onClick={() => form.reset()}>
-                    <Trans>Reset</Trans>
-                  </Button>
-                </motion.div>
-              )}
-            </AnimatePresence>
-
-            <Button
-              type="submit"
-              className="transition-opacity"
-              disabled={!form.formState.isDirty}
-              loading={form.formState.isSubmitting}
-            >
-              <Trans>Update organisation</Trans>
-            </Button>
-          </div>
+          <FormStickySaveBar
+            isDirty={form.formState.isDirty}
+            isSubmitting={form.formState.isSubmitting}
+            onReset={() => form.reset()}
+          />
         </fieldset>
       </form>
     </Form>

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/constants/auth';
+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';

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

@@ -58,6 +58,7 @@ export type TSignInFormSchema = z.infer<typeof ZSignInFormSchema>;
 export type SignInFormProps = {
   className?: string;
   initialEmail?: string;
+  isEmailPasswordSigninEnabled?: boolean;
   isGoogleSSOEnabled?: boolean;
   isMicrosoftSSOEnabled?: boolean;
   isOIDCSSOEnabled?: boolean;
@@ -68,6 +69,7 @@ export type SignInFormProps = {
 export const SignInForm = ({
   className,
   initialEmail,
+  isEmailPasswordSigninEnabled = true,
   isGoogleSSOEnabled,
   isMicrosoftSSOEnabled,
   isOIDCSSOEnabled,
@@ -324,66 +326,78 @@ export const SignInForm = ({
     <Form {...form}>
       <form className={cn('flex w-full flex-col gap-y-4', className)} onSubmit={form.handleSubmit(onFormSubmit)}>
         <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting || isPasskeyLoading}>
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans>Email</Trans>
-                </FormLabel>
+          {isEmailPasswordSigninEnabled && (
+            <>
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Email</Trans>
+                    </FormLabel>
 
-                <FormControl>
-                  <Input type="email" {...field} />
-                </FormControl>
+                    <FormControl>
+                      <Input type="email" {...field} />
+                    </FormControl>
 
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-          <FormField
-            control={form.control}
-            name="password"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans>Password</Trans>
-                </FormLabel>
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Password</Trans>
+                    </FormLabel>
 
-                <FormControl>
-                  <PasswordInput {...field} />
-                </FormControl>
+                    <FormControl>
+                      <PasswordInput {...field} />
+                    </FormControl>
 
-                <FormMessage />
+                    <FormMessage />
 
-                <p className="mt-2 text-right">
-                  <Link to="/forgot-password" className="text-muted-foreground text-sm duration-200 hover:opacity-70">
-                    <Trans>Forgot your password?</Trans>
-                  </Link>
-                </p>
-              </FormItem>
-            )}
-          />
+                    <p className="mt-2 text-right">
+                      <Link
+                        to="/forgot-password"
+                        className="text-muted-foreground text-sm duration-200 hover:opacity-70"
+                      >
+                        <Trans>Forgot your password?</Trans>
+                      </Link>
+                    </p>
+                  </FormItem>
+                )}
+              />
 
-          {turnstileSiteKey && !isTwoFactorAuthenticationDialogOpen && (
-            <Turnstile
-              ref={turnstileRef}
-              siteKey={turnstileSiteKey}
-              options={{
-                size: 'flexible',
-                appearance: 'always',
-              }}
-            />
+              {turnstileSiteKey && !isTwoFactorAuthenticationDialogOpen && (
+                <Turnstile
+                  ref={turnstileRef}
+                  siteKey={turnstileSiteKey}
+                  options={{
+                    size: 'flexible',
+                    appearance: 'always',
+                  }}
+                />
+              )}
+
+              <Button
+                type="submit"
+                size="lg"
+                loading={isSubmitting}
+                className="dark:bg-documenso dark:hover:opacity-90"
+              >
+                {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
+              </Button>
+            </>
           )}
 
-          <Button type="submit" size="lg" loading={isSubmitting} className="dark:bg-documenso dark:hover:opacity-90">
-            {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
-          </Button>
-
           {!isEmbeddedRedirect && (
             <>
-              {hasSocialAuthEnabled && (
+              {isEmailPasswordSigninEnabled && hasSocialAuthEnabled && (
                 <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
                   <div className="h-px flex-1 bg-border" />
                   <span className="bg-transparent text-muted-foreground">

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';
@@ -96,7 +96,7 @@ export const SignUpForm = ({
       password: '',
       signature: '',
     },
-    mode: 'onBlur',
+    mode: 'onChange',
     resolver: zodResolver(ZSignUpFormSchema),
   });
 

apps/remix/app/components/forms/team-update-form.tsx

@@ -2,7 +2,6 @@ import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { ZUpdateTeamRequestSchema } from '@documenso/trpc/server/team-router/update-team.types';
-import { Button } from '@documenso/ui/primitives/button';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -10,11 +9,12 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { AnimatePresence, motion } from 'framer-motion';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import type { z } from 'zod';
 
+import { FormStickySaveBar } from './form-sticky-save-bar';
+
 export type UpdateTeamDialogProps = {
   teamId: number;
   teamName: string;
@@ -135,36 +135,11 @@ export const TeamUpdateForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
             )}
           />
 
-          <div className="flex flex-row justify-end space-x-4">
-            <AnimatePresence>
-              {form.formState.isDirty && (
-                <motion.div
-                  initial={{
-                    opacity: 0,
-                  }}
-                  animate={{
-                    opacity: 1,
-                  }}
-                  exit={{
-                    opacity: 0,
-                  }}
-                >
-                  <Button type="button" variant="secondary" onClick={() => form.reset()}>
-                    <Trans>Reset</Trans>
-                  </Button>
-                </motion.div>
-              )}
-            </AnimatePresence>
-
-            <Button
-              type="submit"
-              className="transition-opacity"
-              disabled={!form.formState.isDirty}
-              loading={form.formState.isSubmitting}
-            >
-              <Trans>Update team</Trans>
-            </Button>
-          </div>
+          <FormStickySaveBar
+            isDirty={form.formState.isDirty}
+            isSubmitting={form.formState.isSubmitting}
+            onReset={() => form.reset()}
+          />
         </fieldset>
       </form>
     </Form>

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

@@ -1,254 +0,0 @@
-import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { trpc } from '@documenso/trpc/react';
-import { ZCreateApiTokenRequestSchema } from '@documenso/trpc/server/api-token-router/create-api-token.types';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
-import { Switch } from '@documenso/ui/primitives/switch';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type { ApiToken } from '@prisma/client';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { match } from 'ts-pattern';
-import type { z } from 'zod';
-
-import { useCurrentTeam } from '~/providers/team';
-
-export const EXPIRATION_DATES = {
-  ONE_WEEK: msg`7 days`,
-  ONE_MONTH: msg`1 month`,
-  THREE_MONTHS: msg`3 months`,
-  SIX_MONTHS: msg`6 months`,
-  ONE_YEAR: msg`12 months`,
-} as const;
-
-const ZCreateTokenFormSchema = ZCreateApiTokenRequestSchema.pick({
-  tokenName: true,
-  expirationDate: true,
-});
-
-type TCreateTokenFormSchema = z.infer<typeof ZCreateTokenFormSchema>;
-
-type NewlyCreatedToken = {
-  id: number;
-  token: string;
-};
-
-export type ApiTokenFormProps = {
-  className?: string;
-  tokens?: Pick<ApiToken, 'id'>[];
-};
-
-export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
-  const [, copy] = useCopyToClipboard();
-
-  const team = useCurrentTeam();
-
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const [newlyCreatedToken, setNewlyCreatedToken] = useState<NewlyCreatedToken | null>();
-  const [noExpirationDate, setNoExpirationDate] = useState(false);
-
-  const { mutateAsync: createTokenMutation } = trpc.apiToken.create.useMutation({
-    onSuccess(data) {
-      setNewlyCreatedToken(data);
-    },
-  });
-
-  const form = useForm<TCreateTokenFormSchema>({
-    resolver: zodResolver(ZCreateTokenFormSchema),
-    defaultValues: {
-      tokenName: '',
-      expirationDate: '',
-    },
-  });
-
-  const copyToken = async (token: string) => {
-    try {
-      const copied = await copy(token);
-
-      if (!copied) {
-        throw new Error('Unable to copy the token');
-      }
-
-      toast({
-        title: _(msg`Token copied to clipboard`),
-        description: _(msg`The token was copied to your clipboard.`),
-      });
-    } catch (error) {
-      toast({
-        title: _(msg`Unable to copy token`),
-        description: _(msg`We were unable to copy the token to your clipboard. Please try again.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenFormSchema) => {
-    try {
-      await createTokenMutation({
-        teamId: team.id,
-        tokenName,
-        expirationDate: noExpirationDate ? null : expirationDate,
-      });
-
-      toast({
-        title: _(msg`Token created`),
-        description: _(msg`A new token was created successfully.`),
-        duration: 5000,
-      });
-
-      form.reset();
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      const errorMessage = match(error.code)
-        .with(AppErrorCode.UNAUTHORIZED, () => msg`You do not have permission to create a token for this team.`)
-        .otherwise(() => msg`Something went wrong. Please try again later.`);
-
-      toast({
-        title: _(msg`An error occurred`),
-        description: _(errorMessage),
-        variant: 'destructive',
-        duration: 5000,
-      });
-    }
-  };
-
-  return (
-    <div className={cn(className)}>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          <fieldset className="mt-6 flex w-full flex-col gap-4" disabled={form.formState.isSubmitting}>
-            <FormField
-              control={form.control}
-              name="tokenName"
-              render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormLabel className="text-muted-foreground">
-                    <Trans>Token name</Trans>
-                  </FormLabel>
-
-                  <div className="flex items-center gap-x-4">
-                    <FormControl className="flex-1">
-                      <Input type="text" {...field} />
-                    </FormControl>
-                  </div>
-
-                  <FormDescription className="text-xs italic">
-                    <Trans>Please enter a meaningful name for your token. This will help you identify it later.</Trans>
-                  </FormDescription>
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="flex flex-col gap-4 md:flex-row">
-              <FormField
-                control={form.control}
-                name="expirationDate"
-                render={({ field }) => (
-                  <FormItem className="flex-1">
-                    <FormLabel className="text-muted-foreground">
-                      <Trans>Token expiration date</Trans>
-                    </FormLabel>
-
-                    <div className="flex items-center gap-x-4">
-                      <FormControl className="flex-1">
-                        <Select onValueChange={field.onChange} disabled={noExpirationDate}>
-                          <SelectTrigger className="w-full">
-                            <SelectValue placeholder={_(msg`Choose...`)} />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {Object.entries(EXPIRATION_DATES).map(([key, date]) => (
-                              <SelectItem key={key} value={key}>
-                                {_(date)}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                      </FormControl>
-                    </div>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <div>
-                <FormLabel className="mt-2 text-muted-foreground">
-                  <Trans>Never expire</Trans>
-                </FormLabel>
-                <div className="block md:py-1.5">
-                  <Switch
-                    className="mt-2 bg-background"
-                    checked={noExpirationDate}
-                    onCheckedChange={setNoExpirationDate}
-                  />
-                </div>
-              </div>
-            </div>
-
-            <Button type="submit" className="hidden md:inline-flex" loading={form.formState.isSubmitting}>
-              <Trans>Create token</Trans>
-            </Button>
-
-            <div className="md:hidden">
-              <Button type="submit" loading={form.formState.isSubmitting}>
-                <Trans>Create token</Trans>
-              </Button>
-            </div>
-          </fieldset>
-        </form>
-      </Form>
-
-      <AnimatePresence>
-        {newlyCreatedToken && tokens && tokens.find((token) => token.id === newlyCreatedToken.id) && (
-          <motion.div
-            className="mt-8"
-            initial={{ opacity: 0, y: -40 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: 40 }}
-          >
-            <Card gradient>
-              <CardContent className="p-4">
-                <p className="mt-2 text-muted-foreground text-sm">
-                  <Trans>
-                    Your token was created successfully! Make sure to copy it because you won't be able to see it again!
-                  </Trans>
-                </p>
-
-                <p className="my-4 rounded-md bg-muted-foreground/10 px-2.5 py-1 font-mono text-sm">
-                  {newlyCreatedToken.token}
-                </p>
-
-                <Button variant="outline" onClick={() => void copyToken(newlyCreatedToken.token)}>
-                  <Trans>Copy token</Trans>
-                </Button>
-              </CardContent>
-            </Card>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};

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

@@ -5,6 +5,7 @@ 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';
 
@@ -25,38 +26,72 @@ 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 }: AdminGlobalSettingsSectionProps) => {
+export const AdminGlobalSettingsSection = ({
+  settings,
+  isTeam = false,
+  inheritedSettings,
+}: AdminGlobalSettingsSectionProps) => {
   const { _ } = useLingui();
-  const notSetLabel = isTeam ? <Trans>Inherited</Trans> : <Trans>Not set</Trans>;
 
   if (!settings) {
     return null;
   }
 
-  const textValue = (value: string | null | undefined) => {
-    if (value === null || value === undefined) {
-      return notSetLabel;
+  const notSet = <Trans>Not set</Trans>;
+
+  const inheritedValue = (value: ReactNode) => {
+    if (!isTeam || value === null) {
+      return notSet;
     }
 
-    return value;
+    return (
+      <span className="flex items-center gap-1.5">
+        <span className="text-muted-foreground">
+          <Trans>Inherited</Trans>:
+        </span>
+        <span>{value}</span>
+      </span>
+    );
   };
 
-  const brandingTextValue = (value: string | null | undefined) => {
-    if (value === null || value === undefined || value.trim() === '') {
-      return notSetLabel;
+  const textValue = (value: string | null | undefined, inherited?: string | null) => {
+    if (value && value.trim() !== '') {
+      return value;
     }
 
-    return value;
+    if (inherited && inherited.trim() !== '') {
+      return inheritedValue(inherited);
+    }
+
+    return notSet;
   };
 
-  const booleanValue = (value: boolean | null | undefined) => {
-    if (value === null || value === undefined) {
-      return notSetLabel;
+  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);
     }
 
-    return value ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>;
+    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));
   };
 
   const parsedEmailSettings = ZDocumentEmailSettingsSchema.safeParse(settings.emailDocumentSettings);
@@ -65,70 +100,82 @@ export const AdminGlobalSettingsSection = ({ settings, isTeam = false }: AdminGl
     <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>
-          {settings.documentVisibility != null
-            ? _(DOCUMENT_VISIBILITY[settings.documentVisibility].value)
-            : notSetLabel}
+          {visibilityValue(settings.documentVisibility, inheritedSettings?.documentVisibility)}
         </DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Document language</Trans>}>
-        <DetailsValue>{textValue(settings.documentLanguage)}</DetailsValue>
+        <DetailsValue>{textValue(settings.documentLanguage, inheritedSettings?.documentLanguage)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Document timezone</Trans>}>
-        <DetailsValue>{textValue(settings.documentTimezone)}</DetailsValue>
+        <DetailsValue>{textValue(settings.documentTimezone, inheritedSettings?.documentTimezone)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Date format</Trans>}>
-        <DetailsValue>{textValue(settings.documentDateFormat)}</DetailsValue>
+        <DetailsValue>{textValue(settings.documentDateFormat, inheritedSettings?.documentDateFormat)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Include sender details</Trans>}>
-        <DetailsValue>{booleanValue(settings.includeSenderDetails)}</DetailsValue>
+        <DetailsValue>
+          {booleanValue(settings.includeSenderDetails, inheritedSettings?.includeSenderDetails)}
+        </DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Include signing certificate</Trans>}>
-        <DetailsValue>{booleanValue(settings.includeSigningCertificate)}</DetailsValue>
+        <DetailsValue>
+          {booleanValue(settings.includeSigningCertificate, inheritedSettings?.includeSigningCertificate)}
+        </DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Include audit log</Trans>}>
-        <DetailsValue>{booleanValue(settings.includeAuditLog)}</DetailsValue>
+        <DetailsValue>{booleanValue(settings.includeAuditLog, inheritedSettings?.includeAuditLog)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Delegate document ownership</Trans>}>
-        <DetailsValue>{booleanValue(settings.delegateDocumentOwnership)}</DetailsValue>
+        <DetailsValue>
+          {booleanValue(settings.delegateDocumentOwnership, inheritedSettings?.delegateDocumentOwnership)}
+        </DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Typed signature</Trans>}>
-        <DetailsValue>{booleanValue(settings.typedSignatureEnabled)}</DetailsValue>
+        <DetailsValue>
+          {booleanValue(settings.typedSignatureEnabled, inheritedSettings?.typedSignatureEnabled)}
+        </DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Upload signature</Trans>}>
-        <DetailsValue>{booleanValue(settings.uploadSignatureEnabled)}</DetailsValue>
+        <DetailsValue>
+          {booleanValue(settings.uploadSignatureEnabled, inheritedSettings?.uploadSignatureEnabled)}
+        </DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Draw signature</Trans>}>
-        <DetailsValue>{booleanValue(settings.drawSignatureEnabled)}</DetailsValue>
+        <DetailsValue>
+          {booleanValue(settings.drawSignatureEnabled, inheritedSettings?.drawSignatureEnabled)}
+        </DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Branding</Trans>}>
-        <DetailsValue>{booleanValue(settings.brandingEnabled)}</DetailsValue>
+        <DetailsValue>{booleanValue(settings.brandingEnabled, inheritedSettings?.brandingEnabled)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Branding logo</Trans>}>
-        <DetailsValue>{brandingTextValue(settings.brandingLogo)}</DetailsValue>
+        <DetailsValue>{textValue(settings.brandingLogo, inheritedSettings?.brandingLogo)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Branding URL</Trans>}>
-        <DetailsValue>{brandingTextValue(settings.brandingUrl)}</DetailsValue>
+        <DetailsValue>{textValue(settings.brandingUrl, inheritedSettings?.brandingUrl)}</DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Branding company details</Trans>}>
-        <DetailsValue>{brandingTextValue(settings.brandingCompanyDetails)}</DetailsValue>
+        <DetailsValue>
+          {textValue(settings.brandingCompanyDetails, inheritedSettings?.brandingCompanyDetails)}
+        </DetailsValue>
       </DetailsCard>
 
       <DetailsCard label={<Trans>Email reply-to</Trans>}>
-        <DetailsValue>{textValue(settings.emailReplyTo)}</DetailsValue>
+        <DetailsValue>{textValue(settings.emailReplyTo, inheritedSettings?.emailReplyTo)}</DetailsValue>
       </DetailsCard>
 
       {isTeam && parsedEmailSettings.success && (
@@ -145,7 +192,7 @@ export const AdminGlobalSettingsSection = ({ settings, isTeam = false }: AdminGl
       )}
 
       <DetailsCard label={<Trans>AI features</Trans>}>
-        <DetailsValue>{booleanValue(settings.aiFeaturesEnabled)}</DetailsValue>
+        <DetailsValue>{booleanValue(settings.aiFeaturesEnabled, inheritedSettings?.aiFeaturesEnabled)}</DetailsValue>
       </DetailsCard>
     </div>
   );

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

@@ -87,7 +87,7 @@ export const AdminLicenseCard = ({ licenseData }: AdminLicenseCardProps) => {
           <KeyRoundIcon className="h-4 w-4 text-muted-foreground" />
         </div>
 
-        <h3 className="mb-2 flex items-end font-medium text-primary-forground text-sm leading-tight">
+        <h3 className="mb-2 flex items-end font-medium text-foreground text-sm leading-tight">
           <Trans>Documenso License</Trans>
         </h3>
 

apps/remix/app/components/general/app-command-menu.types.ts

@@ -0,0 +1,36 @@
+import type { MessageDescriptor } from '@lingui/core';
+import type { LucideIcon } from 'lucide-react';
+
+export type PromptItem = {
+  id: string;
+  label: string | MessageDescriptor;
+  sublabel?: string;
+  path?: string;
+  onAction?: () => void;
+  icon?: LucideIcon;
+  initials?: string;
+  shortcut?: string;
+  isChecked?: boolean;
+};
+
+export type PromptCategory = {
+  id: string;
+  label: MessageDescriptor;
+  items: PromptItem[];
+  /**
+   * The number of actual results, excluding utility rows such as the
+   * "View all results" link.
+   */
+  count: number;
+  /**
+   * The count shown on the category chip, or null to not show a chip at all.
+   * Categories which only contain hardcoded page links have no chip.
+   */
+  chipCount: number | null;
+  isCapped: boolean;
+  /**
+   * Global admin categories are marked with a globe icon to distinguish them
+   * from the equally named personal categories.
+   */
+  isGlobal: boolean;
+};

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

@@ -1,6 +1,7 @@
 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';
@@ -19,7 +20,6 @@ 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: z.string().trim().min(1, { message: msg`Please enter a valid name.`.id }),
+    name: ZNameSchema,
     email: zEmail().min(1),
     password: ZPasswordSchema,
   })

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

@@ -1,11 +1,4 @@
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
+import { FormControl, 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';
@@ -13,6 +6,13 @@ 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,6 +20,12 @@ type ClaimLimitFieldsProps<T extends FieldValues> = {
   disabled?: boolean;
 };
 
+type LimitGroup = {
+  title: ReactNode;
+  quotaKey: string;
+  rateLimitKey: string;
+};
+
 export const ClaimLimitFields = <T extends FieldValues>({
   control,
   prefix = '',
@@ -30,13 +36,33 @@ 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 renderQuotaField = (key: string, label: ReactNode, description: ReactNode) => (
+  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) => (
     <FormField
       control={control}
-      name={name(key)}
+      name={name(group.quotaKey)}
       render={({ field }) => (
         <FormItem>
-          <FormLabel>{label}</FormLabel>
+          <FormLabel className="text-muted-foreground text-xs">
+            <Trans>Monthly quota</Trans>
+          </FormLabel>
           <FormControl>
             <Input
               type="number"
@@ -47,20 +73,18 @@ 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 = (key: string, label: ReactNode) => (
+  const renderRateLimitField = (group: LimitGroup) => (
     <FormField
       control={control}
-      name={name(key)}
+      name={name(group.rateLimitKey)}
       render={({ field }) => (
         <FormItem>
-          <FormLabel>{label}</FormLabel>
           <FormControl>
             <RateLimitArrayInput value={field.value ?? []} onChange={field.onChange} disabled={disabled} />
           </FormControl>
@@ -71,27 +95,30 @@ export const ClaimLimitFields = <T extends FieldValues>({
   );
 
   return (
-    <div className="space-y-4 rounded-md border p-4">
-      <FormLabel>
-        <Trans>Limits</Trans>
-      </FormLabel>
+    <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>
 
-      {renderQuotaField(
-        'documentQuota',
-        <Trans>Monthly document quota</Trans>,
-        <Trans>Empty = Unlimited, 0 = Blocked</Trans>,
-      )}
-      {renderRateLimitField('documentRateLimits', <Trans>Document rate limits</Trans>)}
+      <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(
-        '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>)}
+              {renderQuotaField(group)}
+              {renderRateLimitField(group)}
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 };

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

@@ -0,0 +1,23 @@
+import { Trans } from '@lingui/react/macro';
+import { AlertTriangleIcon } from 'lucide-react';
+
+export const DirectTemplateInvalidPageView = () => {
+  return (
+    <div className="mx-auto flex h-[70vh] w-full max-w-md flex-col items-center justify-center">
+      <div>
+        <AlertTriangleIcon className="h-10 w-10 text-destructive" />
+
+        <h1 className="mt-4 font-semibold text-3xl">
+          <Trans>Invalid direct link template</Trans>
+        </h1>
+
+        <p className="mt-2 text-muted-foreground text-sm">
+          <Trans>
+            This direct link template cannot be used because one or more signers do not have a signature field assigned.
+            Please contact the sender to update the template.
+          </Trans>
+        </p>
+      </div>
+    </div>
+  );
+};

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

@@ -1,3 +1,4 @@
+import { toSafeHref } from '@documenso/lib/utils/is-http-url';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
@@ -53,7 +54,7 @@ export const DocumentSigningAttachmentsPopover = ({
             {attachments?.data.map((attachment) => (
               <a
                 key={attachment.id}
-                href={attachment.data}
+                href={toSafeHref(attachment.data)}
                 title={attachment.data}
                 target="_blank"
                 rel="noopener noreferrer"

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

@@ -1,5 +1,6 @@
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError } from '@documenso/lib/errors/app-error';
+import { isHttpUrl, toSafeHref } from '@documenso/lib/utils/is-http-url';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -24,7 +25,7 @@ export type DocumentAttachmentsPopoverProps = {
 
 const ZAttachmentFormSchema = z.object({
   label: z.string().min(1, 'Label is required'),
-  url: z.string().url('Must be a valid URL'),
+  url: z.string().url('Must be a valid URL').refine(isHttpUrl, 'URL must use the http or https protocol'),
 });
 
 type TAttachmentFormSchema = z.infer<typeof ZAttachmentFormSchema>;
@@ -156,7 +157,7 @@ export const DocumentAttachmentsPopover = ({
                   <div className="min-w-0 flex-1">
                     <p className="truncate font-medium text-sm">{attachment.label}</p>
                     <a
-                      href={attachment.data}
+                      href={toSafeHref(attachment.data)}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="truncate text-muted-foreground text-xs underline hover:text-foreground"

apps/remix/app/components/general/document/embedded-editor-attachment-popover.tsx

@@ -1,5 +1,6 @@
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { nanoid } from '@documenso/lib/universal/id';
+import { isHttpUrl, toSafeHref } from '@documenso/lib/utils/is-http-url';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@documenso/ui/primitives/form/form';
@@ -22,7 +23,7 @@ export type EmbeddedEditorAttachmentPopoverProps = {
 
 const ZAttachmentFormSchema = z.object({
   label: z.string().min(1, 'Label is required'),
-  url: z.string().url('Must be a valid URL'),
+  url: z.string().url('Must be a valid URL').refine(isHttpUrl, 'URL must use the http or https protocol'),
 });
 
 type TAttachmentFormSchema = z.infer<typeof ZAttachmentFormSchema>;
@@ -117,7 +118,7 @@ export const EmbeddedEditorAttachmentPopover = ({
                   <div className="min-w-0 flex-1">
                     <p className="truncate font-medium text-sm">{attachment.label}</p>
                     <a
-                      href={attachment.data}
+                      href={toSafeHref(attachment.data)}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="truncate text-muted-foreground text-xs underline hover:text-foreground"

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

@@ -270,7 +270,7 @@ export const EnvelopeEditorFieldDragDrop = ({
       {selectedField && (
         <div
           className={cn(
-            'pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white font-noto text-muted-foreground ring-2 transition duration-200 [container-type:size] dark:text-muted-background',
+            'pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white font-noto text-muted-foreground ring-2 transition duration-200 [container-type:size] dark:text-muted',
             selectedRecipientStyles.base,
             selectedField === FieldType.SIGNATURE && 'font-signature',
             {

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

@@ -49,6 +49,13 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
   const [isFieldChanging, setIsFieldChanging] = useState(false);
   const [pendingFieldCreation, setPendingFieldCreation] = useState<Konva.Rect | null>(null);
 
+  /**
+   * Whether the field was automatically selected on creation (drag-drop or marquee).
+   *
+   * We purposefully supress the floating toolbar for newly created fields.
+   */
+  const [isAutoSelectedField, setIsAutoSelectedField] = useState(false);
+
   const { stage, pageLayer, konvaContainer, scaledViewport, unscaledViewport } = usePageRenderer(
     ({ stage, pageLayer }) => createPageCanvas(stage, pageLayer),
     pageData,
@@ -237,10 +244,26 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
     fieldGroup.off('transformend');
     fieldGroup.off('dragend');
 
-    // Set up field selection.
-    fieldGroup.on('click', () => {
+    // Set up field selection. Shift + click toggles this field in/out of the current
+    // multi-selection, so fields can be added to a group by clicking them --
+    // complementing marquee drag-selection. A plain click (no modifier) selects just
+    // this field.
+    fieldGroup.on('click', (event) => {
       removePendingField();
-      setSelectedFields([fieldGroup]);
+
+      const isMultiSelectModifier = event.evt.shiftKey;
+
+      if (isMultiSelectModifier) {
+        const currentNodes = interactiveTransformer.current?.nodes() ?? [];
+        const isAlreadySelected = currentNodes.includes(fieldGroup);
+
+        setSelectedFields(
+          isAlreadySelected ? currentNodes.filter((node) => node !== fieldGroup) : [...currentNodes, fieldGroup],
+        );
+      } else {
+        setSelectedFields([fieldGroup]);
+      }
+
       pageLayer.current?.batchDraw();
     });
 
@@ -445,43 +468,18 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
       }
     });
 
-    // Clicks should select/deselect shapes
+    // Clicking empty stage area clears the selection. Field clicks -- including
+    // Shift+click multi-select -- are handled by each field group's own click
+    // handler in `unsafeRenderFieldOnLayer`.
     currentStage.on('click tap', (e) => {
-      // if we are selecting with rect, do nothing
+      // If we are selecting with the marquee rectangle, do nothing.
       if (selectionRectangle.visible() && selectionRectangle.width() > 0 && selectionRectangle.height() > 0) {
         return;
       }
 
-      // If empty area clicked, remove all selections
+      // If empty area clicked, remove all selections.
       if (e.target === stage.current) {
         setSelectedFields([]);
-        return;
-      }
-
-      // Do nothing if field not clicked, or if field is not editable
-      if (!e.target.hasName('field-group') || e.target.draggable() === false) {
-        return;
-      }
-
-      // do we pressed shift or ctrl?
-      const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
-      const isSelected = transformer.nodes().indexOf(e.target) >= 0;
-
-      if (!metaPressed && !isSelected) {
-        // if no key pressed and the node is not selected
-        // select just one
-        setSelectedFields([e.target]);
-      } else if (metaPressed && isSelected) {
-        // if we pressed keys and node was selected
-        // we need to remove it from selection:
-        const nodes = transformer.nodes().slice(); // use slice to have new copy of array
-        // remove node from array
-        nodes.splice(nodes.indexOf(e.target), 1);
-        setSelectedFields(nodes);
-      } else if (metaPressed && !isSelected) {
-        // add the node into selection
-        const nodes = transformer.nodes().concat([e.target]);
-        setSelectedFields(nodes);
       }
     });
 
@@ -521,13 +519,48 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
       setSelectedFields(liveSelectedFieldGroups);
     }
 
+    // Mirror the editor's single selected field onto the canvas (Konva) selection.
+    //
+    // `addField` already marks a newly created field as the selected field, so this
+    // makes a field placed via the palette (drag-drop) or marquee creation show its
+    // resize handles immediately -- no second click needed. It also clears the canvas
+    // selection when the selected field is cleared (e.g. when the author starts
+    // placing another field), so the floating action toolbar can't intercept the next
+    // placement click. Runs after the render loop above so the field's group exists.
+    const selectedFormId = editorFields.selectedField?.formId ?? null;
+    const isSingleCanvasSelection = selectedKonvaFieldGroups.length === 1;
+
+    if (selectedFormId && localPageFields.some((field) => field.formId === selectedFormId)) {
+      const isAlreadySelected = isSingleCanvasSelection && selectedKonvaFieldGroups[0].id() === selectedFormId;
+
+      if (!isAlreadySelected) {
+        const fieldGroupToSelect = pageLayer.current.findOne(`#${selectedFormId}`);
+
+        if (fieldGroupToSelect instanceof Konva.Group) {
+          setSelectedFields([fieldGroupToSelect], { isAutoSelect: true });
+        }
+      }
+    } else if (selectedFormId === null && isSingleCanvasSelection) {
+      setSelectedFields([]);
+    }
+
     // Rerender the transformer
     interactiveTransformer.current?.forceUpdate();
 
     pageLayer.current.batchDraw();
-  }, [localPageFields, selectedKonvaFieldGroups, overlappingFieldFormIds, isFieldChanging]);
+  }, [
+    localPageFields,
+    selectedKonvaFieldGroups,
+    overlappingFieldFormIds,
+    isFieldChanging,
+    editorFields.selectedField?.formId,
+  ]);
+
+  const setSelectedFields = (nodes: Konva.Node[], options?: { isAutoSelect?: boolean }) => {
+    // Any explicit (user-driven) selection shows the action toolbar; only auto-selection
+    // on field creation suppresses it.
+    setIsAutoSelectedField(Boolean(options?.isAutoSelect));
 
-  const setSelectedFields = (nodes: Konva.Node[]) => {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const fieldGroups = nodes.filter(
       (node) => node.hasName('field-group') && Boolean(node.getStage()) && Boolean(node.getParent()),
@@ -663,25 +696,30 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
 
   return (
     <>
-      {selectedKonvaFieldGroups.length > 0 && interactiveTransformer.current && !isFieldChanging && (
-        <FieldActionButtons
-          handleDuplicateSelectedFields={duplicatedSelectedFields}
-          handleDuplicateSelectedFieldsOnAllPages={duplicatedSelectedFieldsOnAllPages}
-          handleDeleteSelectedFields={deletedSelectedFields}
-          handleChangeRecipient={changeSelectedFieldsRecipients}
-          handleChangeFieldType={changeSelectedFieldsType}
-          selectedFieldFormId={selectedKonvaFieldGroups.map((field) => field.id())}
-          style={{
-            position: 'absolute',
-            top: interactiveTransformer.current.y() + interactiveTransformer.current.getClientRect().height + 5 + 'px',
-            left: interactiveTransformer.current.x() + interactiveTransformer.current.getClientRect().width / 2 + 'px',
-            transform: 'translateX(-50%)',
-            gap: '8px',
-            pointerEvents: 'auto',
-            zIndex: 50,
-          }}
-        />
-      )}
+      {selectedKonvaFieldGroups.length > 0 &&
+        interactiveTransformer.current &&
+        !isFieldChanging &&
+        !isAutoSelectedField && (
+          <FieldActionButtons
+            handleDuplicateSelectedFields={duplicatedSelectedFields}
+            handleDuplicateSelectedFieldsOnAllPages={duplicatedSelectedFieldsOnAllPages}
+            handleDeleteSelectedFields={deletedSelectedFields}
+            handleChangeRecipient={changeSelectedFieldsRecipients}
+            handleChangeFieldType={changeSelectedFieldsType}
+            selectedFieldFormId={selectedKonvaFieldGroups.map((field) => field.id())}
+            style={{
+              position: 'absolute',
+              top:
+                interactiveTransformer.current.y() + interactiveTransformer.current.getClientRect().height + 5 + 'px',
+              left:
+                interactiveTransformer.current.x() + interactiveTransformer.current.getClientRect().width / 2 + 'px',
+              transform: 'translateX(-50%)',
+              gap: '8px',
+              pointerEvents: 'auto',
+              zIndex: 50,
+            }}
+          />
+        )}
 
       {pendingFieldCreation && (
         <div

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

@@ -54,6 +54,7 @@ import { useCurrentTeam } from '~/providers/team';
 
 import { EnvelopeEditorFieldDragDrop } from './envelope-editor-fields-drag-drop';
 import { EnvelopeEditorFieldsPageRenderer } from './envelope-editor-fields-page-renderer';
+import { EnvelopeEditorInvalidDirectTemplateAlert } from './envelope-editor-invalid-direct-template-alert';
 import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 import { EnvelopeRecipientSelector } from './envelope-recipient-selector';
 
@@ -238,6 +239,8 @@ export const EnvelopeEditorFieldsPage = () => {
           }
         />
 
+        <EnvelopeEditorInvalidDirectTemplateAlert />
+
         {/* Document View */}
         <div className="mt-4 flex h-full flex-col items-center justify-center">
           {envelope.recipients.length === 0 && (

apps/remix/app/components/general/envelope-editor/envelope-editor-invalid-direct-template-alert.tsx

@@ -0,0 +1,55 @@
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { getRecipientsWithMissingFields } from '@documenso/lib/utils/recipients';
+import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Trans } from '@lingui/react/macro';
+import { useMemo } from 'react';
+
+export type EnvelopeEditorInvalidDirectTemplateAlertProps = {
+  className?: string;
+};
+
+/**
+ * Warns that a direct link template cannot be used because one or more signers
+ * are missing a signature field.
+ */
+export const EnvelopeEditorInvalidDirectTemplateAlert = ({
+  className,
+}: EnvelopeEditorInvalidDirectTemplateAlertProps) => {
+  const { envelope, isTemplate } = useCurrentEnvelopeEditor();
+
+  const signersMissingSignatureFields = useMemo(() => {
+    if (!isTemplate || !envelope.directLink?.enabled) {
+      return [];
+    }
+
+    return getRecipientsWithMissingFields(envelope.recipients, envelope.fields);
+  }, [isTemplate, envelope.directLink, envelope.recipients, envelope.fields]);
+
+  if (signersMissingSignatureFields.length === 0) {
+    return null;
+  }
+
+  return (
+    <Alert
+      variant="destructive"
+      className={cn('mx-auto w-full max-w-[800px] flex-row items-start gap-3 rounded-sm', className)}
+    >
+      <AlertTitle>
+        <Trans>Invalid direct link template</Trans>
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans>
+          Recipients cannot use this direct link template because the following signers are missing a signature field
+        </Trans>
+
+        <ul className="list-disc pl-5">
+          {signersMissingSignatureFields.map((recipient, i) => (
+            <li key={recipient.id}>{recipient.email || recipient.name || `Recipient ${i + 1}`}</li>
+          ))}
+        </ul>
+      </AlertDescription>
+    </Alert>
+  );
+};

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

@@ -22,6 +22,7 @@ import { match } from 'ts-pattern';
 import { EnvelopeGenericPageRenderer } from '~/components/general/envelope-editor/envelope-generic-page-renderer';
 import { EnvelopePdfViewer } from '~/components/general/pdf-viewer/envelope-pdf-viewer';
 
+import { EnvelopeEditorInvalidDirectTemplateAlert } from './envelope-editor-invalid-direct-template-alert';
 import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 
 export const EnvelopeEditorPreviewPage = () => {
@@ -228,6 +229,8 @@ export const EnvelopeEditorPreviewPage = () => {
           {/* Horizontal envelope item selector */}
           <EnvelopeRendererFileSelector className="px-0" fields={editorFields.localFields} />
 
+          <EnvelopeEditorInvalidDirectTemplateAlert className="mb-4" />
+
           <Alert variant="warning" className="mx-auto max-w-[800px]">
             <AlertTitle>
               <Trans>Preview Mode</Trans>

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

@@ -26,6 +26,7 @@ import { ErrorCode as DropzoneErrorCode, type FileRejection, useDropzone } from
 
 import { EnvelopeItemDeleteDialog } from '~/components/dialogs/envelope-item-delete-dialog';
 
+import { EnvelopeEditorInvalidDirectTemplateAlert } from './envelope-editor-invalid-direct-template-alert';
 import { EnvelopeEditorRecipientForm } from './envelope-editor-recipient-form';
 import { EnvelopeItemTitleInput } from './envelope-editor-title-input';
 
@@ -449,6 +450,9 @@ export const EnvelopeEditorUploadPage = () => {
   return (
     <div className="mx-auto max-w-4xl space-y-6 p-8">
       <input {...getReplaceInputProps()} />
+
+      <EnvelopeEditorInvalidDirectTemplateAlert className="max-w-none" />
+
       <Card backdropBlur={false} className="border">
         <CardHeader className="pb-3">
           <CardTitle>

apps/remix/app/components/general/envelope/envelope-drop-zone-wrapper.tsx

@@ -174,7 +174,7 @@ export const EnvelopeDropZoneWrapper = ({ children, type, className }: EnvelopeD
               {type === EnvelopeType.DOCUMENT ? <Trans>Upload Document</Trans> : <Trans>Upload Template</Trans>}
             </h2>
 
-            <p className="mt-4 text-md text-muted-foreground">
+            <p className="mt-4 text-base text-muted-foreground">
               <Trans>Drag and drop your document here</Trans>
             </p>
 

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

@@ -1,13 +1,38 @@
 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 { useState } from 'react';
-import { match } from 'ts-pattern';
+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 { 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<
@@ -15,13 +40,151 @@ 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];
@@ -30,86 +193,105 @@ export const OrganisationUsagePanel = ({
   // current period), so only offer the reset action when viewing the current month.
   const isCurrentPeriod = selectedStat?.period === currentMonthlyPeriod();
 
-  const rows = [
+  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[] = [
     {
-      counter: 'document' as const,
+      counter: 'document',
       label: <Trans>Documents</Trans>,
+      icon: FileIcon,
       used: selectedStat?.documentCount ?? 0,
       effectiveLimit: organisationClaim.documentQuota,
     },
     {
-      counter: 'email' as const,
+      counter: 'email',
       label: <Trans>Emails</Trans>,
+      icon: MailIcon,
       used: selectedStat?.emailCount ?? 0,
       effectiveLimit: organisationClaim.emailQuota,
     },
     {
-      counter: 'api' as const,
+      counter: 'api',
       label: <Trans>API requests</Trans>,
+      icon: PlugIcon,
       used: selectedStat?.apiCount ?? 0,
       effectiveLimit: organisationClaim.apiQuota,
     },
   ];
 
   return (
-    <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="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}
 
-        {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>
+      <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>
 
-      {rows.map((row) => {
-        const percent =
-          row.effectiveLimit && row.effectiveLimit > 0
-            ? Math.min(100, Math.round((row.used / row.effectiveLimit) * 100))
-            : 0;
+          {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>
 
-        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>
+        <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
+              }
+            />
+          ))}
 
-            {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>
+          <UsageStatCard
+            label={<Trans>Reports</Trans>}
+            icon={MailOpenIcon}
+            used={selectedStat?.emailReports ?? 0}
+            limit={null}
+            countOnly
+            footnote={<Trans>Sent this period</Trans>}
+          />
         </div>
       </div>
     </div>

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

@@ -2,6 +2,7 @@ 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 = {
@@ -32,6 +33,7 @@ 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/rate-limit-array-input.tsx

@@ -1,7 +1,9 @@
+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 } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { PlusIcon, Trash2Icon } from 'lucide-react';
+import { useState } from 'react';
 
 type RateLimitEntryValue = { window: string; max: number };
 
@@ -11,50 +13,153 @@ 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 entries = value ?? [];
+  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 updateEntry = (index: number, patch: Partial<RateLimitEntryValue>) => {
-    const next = entries.map((entry, i) => (i === index ? { ...entry, ...patch } : entry));
-    onChange(next);
+    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 removeEntry = (index: number) => {
-    onChange(entries.filter((_, i) => i !== index));
+    if (index >= value.length) {
+      setDraftEntry(null);
+      return;
+    }
+
+    const next = value.filter((_, i) => i !== index);
+    onChange(persistEntries(next));
   };
 
   const addEntry = () => {
-    onChange([...entries, { window: '5m', max: 100 }]);
+    setDraftEntry(EMPTY_ENTRY);
   };
 
+  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">
-      {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>
-      ))}
+      <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>
 
-      <Button type="button" variant="secondary" size="sm" disabled={disabled} onClick={addEntry}>
+      {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}
+      >
         <PlusIcon className="mr-2 h-4 w-4" />
-        <Trans>Add rate limit</Trans>
+        <Trans>Add rate limit window</Trans>
       </Button>
     </div>
   );

apps/remix/app/components/general/use-admin-search-categories.ts

@@ -0,0 +1,144 @@
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION, SKIP_QUERY_BATCH_META } from '@documenso/lib/constants/trpc';
+import { isAdmin } from '@documenso/lib/utils/is-admin';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import type { TAdminSearchResultType } from '@documenso/trpc/server/admin-router/admin-search.types';
+import { ADMIN_SEARCH_MAX_QUERY_LENGTH } from '@documenso/trpc/server/admin-router/admin-search.types';
+
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { keepPreviousData } from '@tanstack/react-query';
+import type { LucideIcon } from 'lucide-react';
+import { ArrowRightIcon, Building2Icon, CreditCardIcon, FileTextIcon, UserIcon, UsersIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import type { PromptCategory, PromptItem } from './app-command-menu.types';
+
+/**
+ * The maximum number of results the admin search returns per resource type.
+ */
+const ADMIN_SEARCH_RESULTS_CAP = 5;
+
+const ADMIN_GROUP_LABELS: Record<TAdminSearchResultType, MessageDescriptor> = {
+  document: msg`Documents`,
+  user: msg`Users`,
+  organisation: msg`Organisations`,
+  team: msg`Teams`,
+  recipient: msg`Recipients`,
+  subscription: msg`Subscriptions`,
+};
+
+const ADMIN_GROUP_ICONS: Record<TAdminSearchResultType, LucideIcon> = {
+  document: FileTextIcon,
+  user: UserIcon,
+  organisation: Building2Icon,
+  team: UsersIcon,
+  recipient: UserIcon,
+  subscription: CreditCardIcon,
+};
+
+/**
+ * Admin list pages which support prefilling their search from the URL, used
+ * for the "View all results" links on capped groups. Teams, recipients and
+ * subscriptions have no admin list pages.
+ */
+const ADMIN_GROUP_LIST_PATHS: Partial<Record<TAdminSearchResultType, (_query: string) => string>> = {
+  document: (query) => `/admin/documents?term=${encodeURIComponent(query)}`,
+  user: (query) => `/admin/users?search=${encodeURIComponent(query)}`,
+  organisation: (query) => `/admin/organisations?query=${encodeURIComponent(query)}`,
+};
+
+export type UseAdminSearchCategoriesOptions = {
+  /**
+   * The trimmed, debounced search query.
+   */
+  query: string;
+  open: boolean;
+};
+
+/**
+ * The isolated admin portion of the command prompt: searches every admin
+ * resource and maps the results to prompt categories marked as global.
+ *
+ * Returns no categories and never queries for non admin users. The admin
+ * search endpoint is additionally guarded server side by the admin procedure.
+ */
+export const useAdminSearchCategories = ({ query, open }: UseAdminSearchCategoriesOptions) => {
+  const { user } = useSession();
+
+  const isUserAdmin = isAdmin(user);
+
+  // Admin searches hit every resource table, so require a longer query unless
+  // it is a number, which could be a resource ID of any length. Queries over
+  // the endpoint's length limit are skipped entirely instead of being sent
+  // and rejected.
+  const hasValidAdminSearch =
+    isUserAdmin && query.length <= ADMIN_SEARCH_MAX_QUERY_LENGTH && (query.length > 3 || /^\d+$/.test(query));
+
+  const {
+    data: adminSearchData,
+    isFetching,
+    isError,
+  } = trpcReact.admin.search.useQuery(
+    {
+      query,
+    },
+    {
+      enabled: open && hasValidAdminSearch,
+      placeholderData: keepPreviousData,
+      // Retyping is the retry in a search-as-you-type flow: fail fast so the
+      // prompt can surface an honest error state instead of retrying.
+      retry: false,
+      ...SKIP_QUERY_BATCH_META,
+      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    },
+  );
+
+  const categories = useMemo((): PromptCategory[] => {
+    if (!hasValidAdminSearch || !adminSearchData) {
+      return [];
+    }
+
+    return adminSearchData.groups.map((group) => {
+      const isCapped = group.results.length >= ADMIN_SEARCH_RESULTS_CAP;
+      const buildListPath = ADMIN_GROUP_LIST_PATHS[group.type];
+
+      const items: PromptItem[] = group.results.map((result) => ({
+        id: `admin-${group.type}-${result.value}`,
+        label: result.label,
+        sublabel: result.sublabel,
+        path: result.path,
+        icon: ADMIN_GROUP_ICONS[group.type],
+        initials: group.type === 'user' || group.type === 'recipient' ? extractInitials(result.label) : undefined,
+      }));
+
+      // Capped groups link to the full admin list page with the search
+      // prefilled so the cap is never a dead end.
+      if (isCapped && buildListPath) {
+        items.push({
+          id: `admin-${group.type}-view-all`,
+          label: msg`View all results`,
+          path: buildListPath(query),
+          icon: ArrowRightIcon,
+        });
+      }
+
+      return {
+        id: `admin-${group.type}`,
+        label: ADMIN_GROUP_LABELS[group.type],
+        items,
+        count: group.results.length,
+        chipCount: group.results.length,
+        isCapped,
+        isGlobal: true,
+      };
+    });
+  }, [hasValidAdminSearch, adminSearchData, query]);
+
+  return {
+    isUserAdmin,
+    categories,
+    isFetching,
+    isError,
+  };
+};

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

@@ -1,3 +1,4 @@
+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';
@@ -29,7 +30,7 @@ export type SettingsSecurityPasskeyTableActionsProps = {
 };
 
 const ZUpdatePasskeySchema = z.object({
-  name: z.string(),
+  name: ZNameSchema,
 });
 
 type TUpdatePasskeySchema = z.infer<typeof ZUpdatePasskeySchema>;

apps/remix/app/entry.client.tsx

@@ -3,27 +3,32 @@ import { dynamicActivate } from '@documenso/lib/utils/i18n';
 import { i18n } from '@lingui/core';
 import { detect, fromHtmlTag } from '@lingui/detect-locale';
 import { I18nProvider } from '@lingui/react';
-import { StrictMode, startTransition, useEffect } from 'react';
+import { StrictMode, startTransition } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { HydratedRouter } from 'react-router/dom';
 
 import './utils/polyfills/promise-with-resolvers';
 
-function PosthogInit() {
+/**
+ * Initialised imperatively (not as a component inside `hydrateRoot`) because
+ * rendering extra client-only siblings changes the React tree structure
+ * relative to the server render in `entry.server.tsx`. That shifts every
+ * `useId` value (used by Radix for `id`/`htmlFor`/`aria-*`), causing hydration
+ * mismatches which can abort hydration entirely when the user interacts with
+ * the page early, leaving dead event handlers (broken dropdowns, native form
+ * submits).
+ */
+function initPosthog() {
   const postHogConfig = extractPostHogConfig();
 
-  useEffect(() => {
-    if (postHogConfig) {
-      void import('posthog-js').then(({ default: posthog }) => {
-        posthog.init(postHogConfig.key, {
-          api_host: postHogConfig.host,
-          capture_exceptions: true,
-        });
+  if (postHogConfig) {
+    void import('posthog-js').then(({ default: posthog }) => {
+      posthog.init(postHogConfig.key, {
+        api_host: postHogConfig.host,
+        capture_exceptions: true,
       });
-    }
-  }, []);
-
-  return null;
+    });
+  }
 }
 
 async function main() {
@@ -38,11 +43,11 @@ async function main() {
         <I18nProvider i18n={i18n}>
           <HydratedRouter />
         </I18nProvider>
-
-        <PosthogInit />
       </StrictMode>,
     );
   });
+
+  void initPosthog();
 }
 
 // eslint-disable-next-line @typescript-eslint/no-floating-promises

apps/remix/app/root.tsx

@@ -119,7 +119,11 @@ export function LayoutContent({ children }: { children: React.ReactNode }) {
   const isRecipientRoute = matches.some((m) => m.id?.startsWith('routes/_recipient+'));
 
   return (
-    <html translate="no" lang={lang} data-theme={theme} className={theme ?? ''}>
+    // `suppressHydrationWarning` because `remix-themes` intentionally mutates
+    // `data-theme`/`class` on <html> before hydration (PreventFlashOnWrongTheme),
+    // so the server-rendered attributes never match the client render when the
+    // theme is resolved from the system preference. Attribute-only, one level deep.
+    <html translate="no" lang={lang} data-theme={theme} className={theme ?? ''} suppressHydrationWarning>
       <head>
         <meta charSet="utf-8" />
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
@@ -173,7 +177,11 @@ export function LayoutContent({ children }: { children: React.ReactNode }) {
         <script
           nonce={nonce(cspNonce)}
           dangerouslySetInnerHTML={{
-            __html: `window.__ENV__ = ${JSON.stringify(publicEnv)}`,
+            // `__webpack_nonce__` is read by `get-nonce` (used by
+            // react-remove-scroll / react-style-singleton inside Radix menus and
+            // dialogs) to stamp runtime-injected <style> elements. Without it the
+            // strict `style-src-elem` CSP blocks the scroll-lock styles.
+            __html: `window.__ENV__ = ${JSON.stringify(publicEnv)}; window.__webpack_nonce__ = ${JSON.stringify(cspNonce ?? '')}`,
           }}
         />
 

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

@@ -8,6 +8,7 @@ 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';
@@ -30,7 +31,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 } from '@prisma/client';
+import { OrganisationMemberRole, SubscriptionStatus } from '@prisma/client';
 import { ExternalLinkIcon, InfoIcon, Loader } from 'lucide-react';
 import { useMemo } from 'react';
 import { useForm } from 'react-hook-form';
@@ -42,7 +43,6 @@ 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,54 +268,32 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
 
       <GenericOrganisationAdminForm organisation={organisation} />
 
-      <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>
+      <SettingsHeader
+        title={t`Organisation usage`}
+        subtitle={t`Current usage against organisation limits.`}
+        className="mt-6"
+        hideDivider
+      />
 
-        <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>
+      <OrganisationUsagePanel
+        organisationId={organisation.id}
+        monthlyStats={organisation.monthlyStats}
+        organisationClaim={organisation.organisationClaim}
+        capacityUsage={{
+          members: organisation.members.length,
+          teams: organisation.teams.length,
+        }}
+      />
 
       <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-medium text-sm">
+                <p className="font-semibold text-base">
                   <Trans>Global Settings</Trans>
                 </p>
-                <p className="mt-1 font-normal text-muted-foreground text-sm">
+                <p className="mt-1 text-muted-foreground text-sm">
                   <Trans>Default settings applied to this organisation.</Trans>
                 </p>
               </div>
@@ -335,7 +313,15 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
         className="mt-16"
       />
 
-      <Alert className="my-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
+      <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"
+      >
         <div className="mb-4 sm:mb-0">
           <AlertTitle>
             <Trans>Subscription</Trans>
@@ -343,7 +329,12 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
 
           <AlertDescription className="mr-2">
             {organisation.subscription ? (
-              <span>{i18n._(SUBSCRIPTION_STATUS_MAP[organisation.subscription.status])} subscription found</span>
+              <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>
                 <Trans>No subscription found</Trans>
@@ -356,6 +347,7 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
           <div>
             <Button
               variant="outline"
+              className="bg-background"
               loading={isCreatingStripeCustomer}
               onClick={async () => createStripeCustomer({ organisationId })}
             >
@@ -366,7 +358,7 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
 
         {organisation.customerId && !organisation.subscription && (
           <div>
-            <Button variant="outline" asChild>
+            <Button variant="outline" className="bg-background" asChild>
               <Link
                 target="_blank"
                 to={`https://dashboard.stripe.com/customers/${organisation.customerId}?create=subscription&subscription_default_customer=${organisation.customerId}`}
@@ -383,13 +375,13 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
             <AdminOrganisationSyncSubscriptionDialog
               organisationId={organisationId}
               trigger={
-                <Button variant="outline">
+                <Button variant="outline" className="bg-background">
                   <Trans>Sync Stripe subscription</Trans>
                 </Button>
               }
             />
 
-            <Button variant="outline" asChild>
+            <Button variant="outline" className="bg-background" asChild>
               <Link
                 target="_blank"
                 to={`https://dashboard.stripe.com/subscriptions/${organisation.subscription.planId}`}
@@ -406,21 +398,27 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
 
       <div className="mt-16 space-y-10">
         <div>
-          <label className="font-medium text-sm leading-none">
+          <h3 className="font-semibold text-base">
             <Trans>Organisation Members</Trans>
-          </label>
+          </h3>
+          <p className="mt-1 text-muted-foreground text-sm">
+            <Trans>People with access to this organisation.</Trans>
+          </p>
 
-          <div className="my-2">
+          <div className="mt-3">
             <DataTable columns={organisationMembersColumns} data={organisation.members} />
           </div>
         </div>
 
         <div>
-          <label className="font-medium text-sm leading-none">
+          <h3 className="font-semibold text-base">
             <Trans>Organisation Teams</Trans>
-          </label>
+          </h3>
+          <p className="mt-1 text-muted-foreground text-sm">
+            <Trans>Teams that belong to this organisation.</Trans>
+          </p>
 
-          <div className="my-2">
+          <div className="mt-3">
             <DataTable columns={teamsColumns} data={organisation.teams} />
           </div>
         </div>
@@ -648,7 +646,7 @@ const OrganisationAdminForm = ({ organisation, licenseFlags }: OrganisationAdmin
               <FormLabel className="flex items-center">
                 <Trans>Inherited subscription claim</Trans>
                 <Tooltip>
-                  <TooltipTrigger>
+                  <TooltipTrigger type="button">
                     <InfoIcon className="mx-2 h-4 w-4" />
                   </TooltipTrigger>
 
@@ -681,10 +679,15 @@ const OrganisationAdminForm = ({ organisation, licenseFlags }: OrganisationAdmin
                   </TooltipContent>
                 </Tooltip>
               </FormLabel>
-              <FormControl>
-                <Input disabled {...field} />
-              </FormControl>
-              <FormMessage />
+              <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>
             </FormItem>
           )}
         />
@@ -715,108 +718,113 @@ const OrganisationAdminForm = ({ organisation, licenseFlags }: OrganisationAdmin
           )}
         />
 
-        <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>
-          )}
-        />
+        <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.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>
-          )}
-        />
+          <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>
 
         <div>
-          <FormLabel>
+          <h3 className="font-semibold text-base">
             <Trans>Feature Flags</Trans>
-          </FormLabel>
+          </h3>
+          <p className="mt-1 text-muted-foreground text-sm">
+            <Trans>Capabilities enabled for this organisation.</Trans>
+          </p>
 
-          <div className="mt-2 space-y-2 rounded-md border p-4">
+          <div className="mt-3 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,7 +287,11 @@ export default function AdminTeamPage({ params }: Route.ComponentProps) {
               </AccordionTrigger>
               <AccordionContent>
                 <div className="mt-4">
-                  <AdminGlobalSettingsSection settings={team.teamGlobalSettings} isTeam />
+                  <AdminGlobalSettingsSection
+                    settings={team.teamGlobalSettings}
+                    inheritedSettings={team.organisation.organisationGlobalSettings}
+                    isTeam
+                  />
                 </div>
               </AccordionContent>
             </AccordionItem>

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

@@ -1,7 +1,6 @@
 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';
@@ -49,26 +48,29 @@ 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;
 
-      let uploadedBrandingLogo: string | undefined;
+      // Upload (or clear) the logo through the dedicated, server-validated route.
+      if (brandingLogo instanceof File || brandingLogo === null) {
+        const formData = new FormData();
 
-      if (brandingLogo) {
-        uploadedBrandingLogo = JSON.stringify(await putFile(brandingLogo));
-      }
+        formData.append('payload', JSON.stringify({ organisationId: organisation.id }));
 
-      // Empty the branding logo if the user unsets it.
-      if (brandingLogo === null) {
-        uploadedBrandingLogo = '';
+        if (brandingLogo instanceof File) {
+          formData.append('brandingLogo', brandingLogo);
+        }
+
+        await updateOrganisationBrandingLogo(formData);
       }
 
       const result = await updateOrganisationSettings({
         organisationId: organisation.id,
         data: {
           brandingEnabled: brandingEnabled ?? undefined,
-          brandingLogo: uploadedBrandingLogo,
           brandingUrl,
           brandingCompanyDetails,
           brandingColors,
@@ -104,6 +106,9 @@ export default function OrganisationSettingsBrandingPage() {
         description: t`We were unable to update your branding preferences at this time, please try again later`,
         variant: 'destructive',
       });
+
+      // Rethrow so the form knows the save failed and keeps the unsaved changes.
+      throw err;
     }
   };
 

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

@@ -88,7 +88,7 @@ export default function OrganisationSettingsDocumentPage() {
           typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
           uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
           drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
-          delegateDocumentOwnership: delegateDocumentOwnership,
+          delegateDocumentOwnership,
           aiFeaturesEnabled,
           envelopeExpirationPeriod: envelopeExpirationPeriod ?? undefined,
           reminderSettings: reminderSettings ?? undefined,
@@ -105,6 +105,8 @@ export default function OrganisationSettingsDocumentPage() {
         description: t`We were unable to update your document preferences at this time, please try again later`,
         variant: 'destructive',
       });
+
+      throw err;
     }
   };
 

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

@@ -49,6 +49,8 @@ export default function OrganisationSettingsGeneral() {
         description: t`We were unable to update your email preferences at this time, please try again later`,
         variant: 'destructive',
       });
+
+      throw err;
     }
   };
 

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

@@ -3,6 +3,7 @@ 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';
@@ -28,7 +29,6 @@ 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,7 +36,6 @@ 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) {
@@ -113,7 +112,7 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen
 }
 
 const ZUpdateOrganisationGroupFormSchema = z.object({
-  name: z.string().min(1, msg`Name is required`.id),
+  name: ZNameSchema,
   organisationRole: z.nativeEnum(OrganisationMemberRole),
   memberIds: z.array(z.string()),
 });

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

@@ -1,14 +1,16 @@
 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';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 import { plural } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
 import { useState } from 'react';
+import { Link } from 'react-router';
 
 import {
   BrandingPreferencesForm,
@@ -35,6 +37,9 @@ 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();
 
   const canCustomBranding =
     organisation.organisationClaim.flags.embedSigningWhiteLabel === true || !IS_BILLING_ENABLED();
@@ -43,22 +48,23 @@ export default function TeamsSettingsPage() {
     try {
       const { brandingEnabled, brandingLogo, brandingUrl, brandingCompanyDetails, brandingColors, brandingCss } = data;
 
-      let uploadedBrandingLogo: string | undefined;
+      // Upload (or clear) the logo through the dedicated, server-validated route.
+      if (brandingLogo instanceof File || brandingLogo === null) {
+        const formData = new FormData();
 
-      if (brandingLogo) {
-        uploadedBrandingLogo = JSON.stringify(await putFile(brandingLogo));
-      }
+        formData.append('payload', JSON.stringify({ teamId: team.id }));
 
-      // Empty the branding logo if the user unsets it.
-      if (brandingLogo === null) {
-        uploadedBrandingLogo = '';
+        if (brandingLogo instanceof File) {
+          formData.append('brandingLogo', brandingLogo);
+        }
+
+        await updateTeamBrandingLogo(formData);
       }
 
       const result = await updateTeamSettings({
         teamId: team.id,
         data: {
           brandingEnabled,
-          brandingLogo: uploadedBrandingLogo,
           brandingUrl: brandingUrl || null,
           brandingCompanyDetails: brandingCompanyDetails || null,
           brandingColors,
@@ -94,6 +100,9 @@ export default function TeamsSettingsPage() {
         description: t`We were unable to update your branding preferences at this time, please try again later`,
         variant: 'destructive',
       });
+
+      // Rethrow so the form knows the save failed and keeps the unsaved changes.
+      throw err;
     }
   };
 
@@ -112,39 +121,61 @@ export default function TeamsSettingsPage() {
         subtitle={t`Here you can set preferences and defaults for branding.`}
       />
 
-      <section>
-        <BrandingPreferencesForm
-          canInherit={true}
-          hasAdvancedBranding={canCustomBranding}
-          context="Team"
-          settings={teamWithSettings.teamSettings}
-          onFormSubmit={onBrandingPreferencesFormSubmit}
-        />
+      {canConfigureBranding ? (
+        <section>
+          <BrandingPreferencesForm
+            canInherit={true}
+            hasAdvancedBranding={canCustomBranding}
+            context="Team"
+            settings={teamWithSettings.teamSettings}
+            onFormSubmit={onBrandingPreferencesFormSubmit}
+          />
 
-        {cssWarnings.length > 0 && (
-          <Alert variant="warning" className="mt-6">
+          {cssWarnings.length > 0 && (
+            <Alert variant="warning" className="mt-6">
+              <AlertTitle>
+                <Trans>CSS rules were dropped during sanitisation</Trans>
+              </AlertTitle>
+
+              <AlertDescription>
+                <ul className="list-disc pl-5">
+                  {cssWarnings.map((warning, index) => (
+                    <li key={index}>
+                      {warning.detail}
+                      {warning.line !== undefined && (
+                        <span className="text-muted-foreground">
+                          {' '}
+                          <Trans>(line {warning.line})</Trans>
+                        </span>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </AlertDescription>
+            </Alert>
+          )}
+        </section>
+      ) : (
+        <Alert className="mt-8 flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
+          <div className="mb-4 sm:mb-0">
             <AlertTitle>
-              <Trans>CSS rules were dropped during sanitisation</Trans>
+              <Trans>Branding Preferences</Trans>
             </AlertTitle>
 
-            <AlertDescription>
-              <ul className="list-disc pl-5">
-                {cssWarnings.map((warning, index) => (
-                  <li key={index}>
-                    {warning.detail}
-                    {warning.line !== undefined && (
-                      <span className="text-muted-foreground">
-                        {' '}
-                        <Trans>(line {warning.line})</Trans>
-                      </span>
-                    )}
-                  </li>
-                ))}
-              </ul>
+            <AlertDescription className="mr-2">
+              <Trans>Currently branding can only be configured for Teams and above plans.</Trans>
             </AlertDescription>
-          </Alert>
-        )}
-      </section>
+          </div>
+
+          {canExecuteOrganisationAction('MANAGE_BILLING', organisation.currentOrganisationRole) && (
+            <Button asChild variant="outline">
+              <Link to={`/o/${organisation.url}/settings/billing`}>
+                <Trans>Update Billing</Trans>
+              </Link>
+            </Button>
+          )}
+        </Alert>
+      )}
     </div>
   );
 }

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

@@ -82,7 +82,7 @@ export default function TeamsSettingsPage() {
                 uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
                 drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
               }),
-          delegateDocumentOwnership: delegateDocumentOwnership,
+          delegateDocumentOwnership,
         },
       });
 
@@ -96,6 +96,8 @@ export default function TeamsSettingsPage() {
         description: t`We were unable to update your document preferences at this time, please try again later`,
         variant: 'destructive',
       });
+
+      throw err;
     }
   };
 

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

@@ -49,6 +49,8 @@ export default function TeamEmailSettingsGeneral() {
         description: t`We were unable to update your email preferences at this time, please try again later`,
         variant: 'destructive',
       });
+
+      throw err;
     }
   };
 

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

@@ -1,14 +1,18 @@
 import { trpc } from '@documenso/trpc/react';
+import type { TGetApiTokensResponse } from '@documenso/trpc/server/api-token-router/get-api-tokens.types';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
+import { DataTable, type DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
 import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { TeamMemberRole } from '@prisma/client';
-import { DateTime } from 'luxon';
+import { useMemo } from 'react';
 
+import { TokenCreateDialog } from '~/components/dialogs/token-create-dialog';
 import TokenDeleteDialog from '~/components/dialogs/token-delete-dialog';
-import { ApiTokenForm } from '~/components/forms/token';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { useOptionalCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -18,33 +22,88 @@ export function meta() {
 }
 
 export default function ApiTokensPage() {
-  const { i18n } = useLingui();
-
-  const { data: tokens } = trpc.apiToken.getMany.useQuery();
+  const { t, i18n } = useLingui();
 
   const team = useOptionalCurrentTeam();
 
+  const isUnauthorized = !!team && team.currentTeamRole !== TeamMemberRole.ADMIN;
+
+  const {
+    data: tokens,
+    isLoading,
+    isError,
+  } = trpc.apiToken.getMany.useQuery(undefined, {
+    enabled: !isUnauthorized,
+  });
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: t`Name`,
+        cell: ({ row }) => <span className="font-medium text-foreground">{row.original.name}</span>,
+      },
+      {
+        header: t`Created`,
+        cell: ({ row }) => i18n.date(row.original.createdAt),
+      },
+      {
+        header: t`Expires`,
+        cell: ({ row }) => {
+          if (!row.original.expires) {
+            return (
+              <span className="text-muted-foreground">
+                <Trans>Never</Trans>
+              </span>
+            );
+          }
+
+          if (row.original.expires < new Date()) {
+            return (
+              <Badge variant="destructive" size="small">
+                <Trans>Expired</Trans>
+              </Badge>
+            );
+          }
+
+          return i18n.date(row.original.expires);
+        },
+      },
+      {
+        header: t`Actions`,
+        cell: ({ row }) => (
+          <TokenDeleteDialog token={row.original}>
+            <Button variant="destructive">
+              <Trans>Delete</Trans>
+            </Button>
+          </TokenDeleteDialog>
+        ),
+      },
+    ] satisfies DataTableColumnDef<TGetApiTokensResponse[number]>[];
+  }, []);
+
   return (
     <div>
       <SettingsHeader
         title={<Trans>API Tokens</Trans>}
         subtitle={
           <Trans>
-            On this page, you can create and manage API tokens. See our{' '}
+            Create and manage API tokens. See our{' '}
             <a
               className="text-primary underline"
               href={'https://docs.documenso.com/developers/public-api'}
               target="_blank"
               rel="noopener"
             >
-              Documentation
+              documentation
             </a>{' '}
             for more information.
           </Trans>
         }
-      />
+      >
+        {!isUnauthorized && <TokenCreateDialog />}
+      </SettingsHeader>
 
-      {team && team?.currentTeamRole !== TeamMemberRole.ADMIN ? (
+      {isUnauthorized ? (
         <Alert className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row" variant="warning">
           <div>
             <AlertTitle>
@@ -56,58 +115,43 @@ export default function ApiTokensPage() {
           </div>
         </Alert>
       ) : (
-        <>
-          <ApiTokenForm className="max-w-xl" tokens={tokens} />
-
-          <hr className="mt-8 mb-4" />
-
-          <h4 className="font-medium text-xl">
-            <Trans>Your existing tokens</Trans>
-          </h4>
-
-          {tokens && tokens.length === 0 && (
-            <div className="mb-4">
-              <p className="mt-2 text-muted-foreground text-sm italic">
-                <Trans>Your tokens will be shown here once you create them.</Trans>
+        <DataTable
+          columns={columns}
+          data={tokens ?? []}
+          perPage={0}
+          currentPage={0}
+          totalPages={0}
+          error={{
+            enable: isError,
+          }}
+          emptyState={
+            <div className="flex h-60 flex-col items-center justify-center gap-y-4 text-muted-foreground/60">
+              <p>
+                <Trans>You have no API tokens yet. Your tokens will be shown here once you create them.</Trans>
               </p>
             </div>
-          )}
-
-          {tokens && tokens.length > 0 && (
-            <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">
-                    <div>
-                      <h5 className="text-base">{token.name}</h5>
-
-                      <p className="mt-2 text-muted-foreground text-xs">
-                        <Trans>Created on {i18n.date(token.createdAt, DateTime.DATETIME_FULL)}</Trans>
-                      </p>
-                      {token.expires ? (
-                        <p className="mt-1 text-muted-foreground text-xs">
-                          <Trans>Expires on {i18n.date(token.expires, DateTime.DATETIME_FULL)}</Trans>
-                        </p>
-                      ) : (
-                        <p className="mt-1 text-muted-foreground text-xs">
-                          <Trans>Token doesn't have an expiration date</Trans>
-                        </p>
-                      )}
-                    </div>
-
-                    <div>
-                      <TokenDeleteDialog token={token}>
-                        <Button variant="destructive">
-                          <Trans>Delete</Trans>
-                        </Button>
-                      </TokenDeleteDialog>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </>
+          }
+          skeleton={{
+            enable: isLoading,
+            rows: 3,
+            component: (
+              <>
+                <TableCell>
+                  <Skeleton className="h-4 w-24 rounded-full" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-16 rounded-full" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-16 rounded-full" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-12 rounded-full" />
+                </TableCell>
+              </>
+            ),
+          }}
+        />
       )}
     </div>
   );

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

@@ -7,6 +7,7 @@ import { getEnvelopeForDirectTemplateSigning } from '@documenso/lib/server-only/
 import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
 import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { getRecipientsWithMissingFields } from '@documenso/lib/utils/recipients';
 import { prisma } from '@documenso/prisma';
 import { Plural } from '@lingui/react/macro';
 import { UsersIcon } from 'lucide-react';
@@ -14,6 +15,7 @@ import { redirect } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { Header as AuthenticatedHeader } from '~/components/general/app-header';
+import { DirectTemplateInvalidPageView } from '~/components/general/direct-template/direct-template-invalid-page';
 import { DirectTemplatePageView } from '~/components/general/direct-template/direct-template-page';
 import { DirectTemplateAuthPageView } from '~/components/general/direct-template/direct-template-signing-auth-page';
 import { DocumentSigningAuthPageView } from '~/components/general/document-signing/document-signing-auth-page';
@@ -70,8 +72,18 @@ const handleV1Loader = async ({ params, request }: Route.LoaderArgs) => {
     };
   }
 
+  const recipientsWithMissingFields = getRecipientsWithMissingFields(template.recipients, template.fields);
+
+  if (recipientsWithMissingFields.length > 0) {
+    return {
+      isAccessAuthValid: true,
+      isTemplateMissingSignatures: true,
+    } as const;
+  }
+
   return {
     isAccessAuthValid: true,
+    isTemplateMissingSignatures: false,
     template: {
       ...template,
       folder: null,
@@ -96,6 +108,7 @@ const handleV2Loader = async ({ params, request }: Route.LoaderArgs) => {
     .then((envelopeForSigning) => {
       return {
         isDocumentAccessValid: true,
+        isTemplateMissingSignatures: false,
         envelopeForSigning,
       } as const;
     })
@@ -108,6 +121,13 @@ const handleV2Loader = async ({ params, request }: Route.LoaderArgs) => {
         } as const;
       }
 
+      if (error.code === AppErrorCode.MISSING_SIGNATURE_FIELD) {
+        return {
+          isDocumentAccessValid: true,
+          isTemplateMissingSignatures: true,
+        } as const;
+      }
+
       throw new Response('Not Found', { status: 404 });
     });
 };
@@ -181,6 +201,10 @@ const DirectSigningPageV1 = ({ data }: { data: Awaited<ReturnType<typeof handleV
     return <DirectTemplateAuthPageView />;
   }
 
+  if (data.isTemplateMissingSignatures) {
+    return <DirectTemplateInvalidPageView />;
+  }
+
   const { template, directTemplateRecipient } = data;
 
   return (
@@ -235,6 +259,10 @@ const DirectSigningPageV2 = ({ data }: { data: Awaited<ReturnType<typeof handleV
     return <DocumentSigningAuthPageView email={''} emailHasAccount={true} />;
   }
 
+  if (data.isTemplateMissingSignatures) {
+    return <DirectTemplateInvalidPageView />;
+  }
+
   const { envelope, recipient } = data.envelopeForSigning;
 
   const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({

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

@@ -82,7 +82,7 @@ export default function WaitingForTurnToSignPage({ loaderData }: Route.Component
       <RecipientBranding branding={branding} cspNonce={cspNonce} />
       <div className="relative flex flex-col items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
         <div className="w-full max-w-md text-center">
-          <h2 className="font-bold text-3xl tracking-tigh">
+          <h2 className="font-bold text-3xl tracking-tight">
             <Trans>Waiting for Your Turn</Trans>
           </h2>
 

apps/remix/app/routes/_unauthenticated+/forgot-password.tsx

@@ -1,6 +1,7 @@
+import { isSigninEnabledForProvider } from '@documenso/lib/constants/auth';
 import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
-import { Link } from 'react-router';
+import { Link, redirect } from 'react-router';
 
 import { ForgotPasswordForm } from '~/components/forms/forgot-password';
 import { appMetaTags } from '~/utils/meta';
@@ -9,6 +10,14 @@ export function meta() {
   return appMetaTags(msg`Forgot Password`);
 }
 
+export async function loader() {
+  if (!isSigninEnabledForProvider('email')) {
+    throw redirect('/signin');
+  }
+
+  return null;
+}
+
 export default function ForgotPasswordPage() {
   return (
     <div className="w-screen max-w-lg px-4">

apps/remix/app/routes/_unauthenticated+/organisation.decline.$token.tsx

@@ -1,98 +1,15 @@
-import { prisma } from '@documenso/prisma';
-import { Button } from '@documenso/ui/primitives/button';
-import { Trans } from '@lingui/react/macro';
-import { OrganisationMemberInviteStatus } from '@prisma/client';
-import { Link } from 'react-router';
+import { redirect } from 'react-router';
 
 import type { Route } from './+types/organisation.decline.$token';
 
-export async function loader({ params }: Route.LoaderArgs) {
+export function loader({ params }: Route.LoaderArgs) {
   const { token } = params;
 
   if (!token) {
-    return {
-      state: 'InvalidLink',
-    } as const;
+    throw redirect('/');
   }
 
-  const organisationMemberInvite = await prisma.organisationMemberInvite.findUnique({
-    where: {
-      token,
-    },
-    include: {
-      organisation: {
-        select: {
-          name: true,
-        },
-      },
-    },
-  });
-
-  if (!organisationMemberInvite) {
-    return {
-      state: 'InvalidLink',
-    } as const;
-  }
-
-  if (organisationMemberInvite.status !== OrganisationMemberInviteStatus.DECLINED) {
-    await prisma.organisationMemberInvite.update({
-      where: {
-        id: organisationMemberInvite.id,
-      },
-      data: {
-        status: OrganisationMemberInviteStatus.DECLINED,
-      },
-    });
-  }
-
-  return {
-    state: 'Success',
-    organisationName: organisationMemberInvite.organisation.name,
-  } as const;
-}
-
-export default function DeclineInvitationPage({ loaderData }: Route.ComponentProps) {
-  const data = loaderData;
-
-  if (data.state === 'InvalidLink') {
-    return (
-      <div className="w-screen max-w-lg px-4">
-        <div className="w-full">
-          <h1 className="font-semibold text-4xl">
-            <Trans>Invalid token</Trans>
-          </h1>
-
-          <p className="mt-2 mb-4 text-muted-foreground text-sm">
-            <Trans>This token is invalid or has expired. No action is needed.</Trans>
-          </p>
-
-          <Button asChild>
-            <Link to="/">
-              <Trans>Return</Trans>
-            </Link>
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="w-screen max-w-lg px-4">
-      <h1 className="font-semibold text-4xl">
-        <Trans>Invitation declined</Trans>
-      </h1>
-
-      <p className="mt-2 mb-4 text-muted-foreground text-sm">
-        <Trans>
-          You have declined the invitation from <strong>{data.organisationName}</strong> to join their organisation.
-        </Trans>
-      </p>
-
-      <Button asChild>
-        <Link to="/">
-          <Trans>Return to Home</Trans>
-        </Link>
-      </Button>
-    </div>
-  );
+  // Declining now happens on the invite page via tRPC. Redirect there with the
+  // `action=decline` flag so it renders the decline-only view (no accept).
+  throw redirect(`/organisation/invite/${token}?action=decline`);
 }

apps/remix/app/routes/_unauthenticated+/organisation.invite.$token.tsx

@@ -1,9 +1,15 @@
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
-import { acceptOrganisationInvitation } from '@documenso/lib/server-only/organisation/accept-organisation-invitation';
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { prisma } from '@documenso/prisma';
+import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
-import { Trans } from '@lingui/react/macro';
-import { Link } from 'react-router';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { OrganisationMemberInviteStatus } from '@prisma/client';
+import { useState } from 'react';
+import { Link, useSearchParams } from 'react-router';
+import { match } from 'ts-pattern';
 
 import type { Route } from './+types/organisation.invite.$token';
 
@@ -37,6 +43,22 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     } as const;
   }
 
+  const organisationName = organisationMemberInvite.organisation.name;
+
+  if (organisationMemberInvite.status === OrganisationMemberInviteStatus.ACCEPTED) {
+    return {
+      state: 'AlreadyAccepted',
+      organisationName,
+    } as const;
+  }
+
+  if (organisationMemberInvite.status === OrganisationMemberInviteStatus.DECLINED) {
+    return {
+      state: 'AlreadyDeclined',
+      organisationName,
+    } as const;
+  }
+
   const user = await prisma.user.findFirst({
     where: {
       email: {
@@ -49,26 +71,13 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     },
   });
 
-  // Directly convert the team member invite to a team member if they already have an account.
-  if (user) {
-    await acceptOrganisationInvitation({ token: organisationMemberInvite.token });
-  }
-
-  if (!user) {
-    return {
-      state: 'LoginRequired',
-      email: organisationMemberInvite.email,
-      organisationName: organisationMemberInvite.organisation.name,
-    } as const;
-  }
-
-  const isSessionUserTheInvitedUser = user.id === session.user?.id;
-
   return {
-    state: 'Success',
+    state: 'Pending',
+    token: organisationMemberInvite.token,
     email: organisationMemberInvite.email,
-    organisationName: organisationMemberInvite.organisation.name,
-    isSessionUserTheInvitedUser,
+    organisationName,
+    userExists: user !== null,
+    isSessionUserTheInvitedUser: user !== null && user.id === session.user?.id,
   } as const;
 }
 
@@ -97,57 +106,253 @@ export default function AcceptInvitationPage({ loaderData }: Route.ComponentProp
     );
   }
 
-  if (data.state === 'LoginRequired') {
+  if (data.state === 'AlreadyAccepted') {
     return (
-      <div>
-        <h1 className="font-semibold text-4xl">
-          <Trans>Organisation invitation</Trans>
-        </h1>
+      <div className="w-screen max-w-lg px-4">
+        <div className="w-full">
+          <h1 className="font-semibold text-4xl">
+            <Trans>Invitation already accepted</Trans>
+          </h1>
 
-        <p className="mt-2 text-muted-foreground text-sm">
-          <Trans>
-            You have been invited by <strong>{data.organisationName}</strong> to join their organisation.
-          </Trans>
-        </p>
+          <p className="mt-2 mb-4 text-muted-foreground text-sm">
+            <Trans>
+              You are already a member of <strong>{data.organisationName}</strong>.
+            </Trans>
+          </p>
 
-        <p className="mt-1 mb-4 text-muted-foreground text-sm">
-          <Trans>To accept this invitation you must create an account.</Trans>
-        </p>
-
-        <Button asChild>
-          <Link to={`/signup#email=${encodeURIComponent(data.email)}`}>
-            <Trans>Create account</Trans>
-          </Link>
-        </Button>
+          <Button asChild>
+            <Link to="/">
+              <Trans>Continue</Trans>
+            </Link>
+          </Button>
+        </div>
       </div>
     );
   }
 
+  if (data.state === 'AlreadyDeclined') {
+    return <InvitationDeclined organisationName={data.organisationName} />;
+  }
+
   return (
-    <div>
-      <h1 className="font-semibold text-4xl">
-        <Trans>Invitation accepted!</Trans>
-      </h1>
-
-      <p className="mt-2 mb-4 text-muted-foreground text-sm">
-        <Trans>
-          You have accepted an invitation from <strong>{data.organisationName}</strong> to join their organisation.
-        </Trans>
-      </p>
-
-      {data.isSessionUserTheInvitedUser ? (
-        <Button asChild>
-          <Link to="/">
-            <Trans>Continue</Trans>
-          </Link>
-        </Button>
-      ) : (
-        <Button asChild>
-          <Link to={`/signin#email=${encodeURIComponent(data.email)}`}>
-            <Trans>Continue to login</Trans>
-          </Link>
-        </Button>
-      )}
-    </div>
+    <PendingInvitation
+      token={data.token}
+      email={data.email}
+      organisationName={data.organisationName}
+      userExists={data.userExists}
+      isSessionUserTheInvitedUser={data.isSessionUserTheInvitedUser}
+    />
   );
 }
+
+type PendingInvitationProps = {
+  token: string;
+  email: string;
+  organisationName: string;
+  userExists: boolean;
+  isSessionUserTheInvitedUser: boolean;
+};
+
+type InvitationResult = 'idle' | 'accepted' | 'declined';
+
+type AcceptFailureReason = 'CapExceeded' | 'SubscriptionInactive' | 'Unknown';
+
+const PendingInvitation = ({
+  token,
+  email,
+  organisationName,
+  userExists,
+  isSessionUserTheInvitedUser,
+}: PendingInvitationProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+  const { refreshSession } = useOptionalSession();
+
+  const [searchParams] = useSearchParams();
+  const actionIsDecline = searchParams.get('action') === 'decline';
+
+  const [result, setResult] = useState<InvitationResult>('idle');
+  const [acceptFailureReason, setAcceptFailureReason] = useState<AcceptFailureReason | null>(null);
+
+  const acceptInvitation = trpc.organisation.member.invite.accept.useMutation({
+    onSuccess: async () => {
+      await refreshSession();
+
+      setResult('accepted');
+    },
+    onError: (err) => {
+      const error = AppError.parseError(err);
+
+      const failureReason = match(error.code)
+        .with(AppErrorCode.LIMIT_EXCEEDED, () => 'CapExceeded' as const)
+        .with('SUBSCRIPTION_INACTIVE', () => 'SubscriptionInactive' as const)
+        .otherwise(() => 'Unknown' as const);
+
+      setAcceptFailureReason(failureReason);
+    },
+  });
+
+  const declineInvitation = trpc.organisation.member.invite.decline.useMutation({
+    onSuccess: async () => {
+      await refreshSession();
+
+      setResult('declined');
+    },
+    onError: () => {
+      toast({
+        title: t`Something went wrong`,
+        description: t`Unable to decline this invitation at this time.`,
+        variant: 'destructive',
+        duration: 10000,
+      });
+    },
+  });
+
+  if (result === 'accepted') {
+    return (
+      <div className="w-screen max-w-lg px-4">
+        <div className="w-full">
+          <h1 className="font-semibold text-4xl">
+            <Trans>Invitation accepted!</Trans>
+          </h1>
+
+          <p className="mt-2 mb-4 text-muted-foreground text-sm">
+            <Trans>
+              You have accepted an invitation from <strong>{organisationName}</strong> to join their organisation.
+            </Trans>
+          </p>
+
+          {isSessionUserTheInvitedUser ? (
+            <Button asChild>
+              <Link to="/">
+                <Trans>Continue</Trans>
+              </Link>
+            </Button>
+          ) : (
+            <Button asChild>
+              <Link to={`/signin#email=${encodeURIComponent(email)}`}>
+                <Trans>Continue to login</Trans>
+              </Link>
+            </Button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (result === 'declined') {
+    return <InvitationDeclined organisationName={organisationName} />;
+  }
+
+  // Accepting requires an account (acceptance keys off the invited email).
+  // Declining does not, so we only gate account creation on the accept flow.
+  if (!actionIsDecline && !userExists) {
+    return (
+      <div className="w-screen max-w-lg px-4">
+        <div className="w-full">
+          <h1 className="font-semibold text-4xl">
+            <Trans>Organisation invitation</Trans>
+          </h1>
+
+          <p className="mt-2 text-muted-foreground text-sm">
+            <Trans>
+              You have been invited by <strong>{organisationName}</strong> to join their organisation.
+            </Trans>
+          </p>
+
+          <p className="mt-1 mb-4 text-muted-foreground text-sm">
+            <Trans>To accept this invitation you must create an account.</Trans>
+          </p>
+
+          <Button asChild>
+            <Link to={`/signup#email=${encodeURIComponent(email)}`}>
+              <Trans>Create account</Trans>
+            </Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  const isPending = acceptInvitation.isPending || declineInvitation.isPending;
+
+  return (
+    <div className="w-screen max-w-lg px-4">
+      <div className="w-full">
+        <h1 className="font-semibold text-4xl">
+          <Trans>Organisation invitation</Trans>
+        </h1>
+
+        <p className="mt-2 mb-4 text-muted-foreground text-sm">
+          <Trans>
+            You have been invited to join <strong>{organisationName}</strong> on Documenso.
+          </Trans>
+        </p>
+
+        {acceptFailureReason && (
+          <p className="mt-2 mb-4 text-destructive text-sm">
+            {match(acceptFailureReason)
+              .with('CapExceeded', () => (
+                <Trans>
+                  <strong>{organisationName}</strong> has reached its member limit. Please contact the organisation
+                  administrator to upgrade their plan before accepting this invitation.
+                </Trans>
+              ))
+              .with('SubscriptionInactive', () => (
+                <Trans>
+                  <strong>{organisationName}</strong> does not have an active subscription. Please contact the
+                  organisation administrator to renew their plan before accepting this invitation.
+                </Trans>
+              ))
+              .with('Unknown', () => (
+                <Trans>
+                  We were unable to add you to <strong>{organisationName}</strong> at this time. Please try again later,
+                  or contact the organisation administrator.
+                </Trans>
+              ))
+              .exhaustive()}
+          </p>
+        )}
+
+        <div className="flex items-center gap-x-4">
+          <Button
+            variant="destructive"
+            onClick={async () => declineInvitation.mutateAsync({ token })}
+            loading={declineInvitation.isPending}
+            disabled={isPending}
+          >
+            <Trans>Decline</Trans>
+          </Button>
+
+          {!actionIsDecline && (
+            <Button
+              onClick={async () => acceptInvitation.mutateAsync({ token })}
+              loading={acceptInvitation.isPending}
+              disabled={isPending}
+            >
+              <Trans>Accept</Trans>
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const InvitationDeclined = ({ organisationName }: { organisationName: string }) => {
+  return (
+    <div className="w-screen max-w-lg px-4">
+      <div className="w-full">
+        <h1 className="font-semibold text-4xl">
+          <Trans>Invitation declined</Trans>
+        </h1>
+
+        <p className="mt-2 mb-4 text-muted-foreground text-sm">
+          <Trans>
+            You have declined the invitation from <strong>{organisationName}</strong> to join their organisation.
+          </Trans>
+        </p>
+      </div>
+    </div>
+  );
+};

apps/remix/app/routes/_unauthenticated+/reset-password.$token.tsx

@@ -1,3 +1,4 @@
+import { isSigninEnabledForProvider } from '@documenso/lib/constants/auth';
 import { getResetTokenValidity } from '@documenso/lib/server-only/user/get-reset-token-validity';
 import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
@@ -13,6 +14,10 @@ export function meta() {
 }
 
 export async function loader({ params }: Route.LoaderArgs) {
+  if (!isSigninEnabledForProvider('email')) {
+    throw redirect('/signin');
+  }
+
   const { token } = params;
 
   const isValid = await getResetTokenValidity({ token });

apps/remix/app/routes/_unauthenticated+/reset-password._index.tsx

@@ -1,7 +1,8 @@
+import { isSigninEnabledForProvider } from '@documenso/lib/constants/auth';
 import { Button } from '@documenso/ui/primitives/button';
 import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
-import { Link } from 'react-router';
+import { Link, redirect } from 'react-router';
 
 import { appMetaTags } from '~/utils/meta';
 
@@ -9,6 +10,14 @@ export function meta() {
   return appMetaTags(msg`Reset Password`);
 }
 
+export async function loader() {
+  if (!isSigninEnabledForProvider('email')) {
+    throw redirect('/signin');
+  }
+
+  return null;
+}
+
 export default function ResetPasswordPage() {
   return (
     <div className="w-screen max-w-lg px-4">

apps/remix/app/routes/_unauthenticated+/signin.tsx

@@ -1,8 +1,11 @@
+import { authClient } from '@documenso/auth/client';
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
 import {
   IS_GOOGLE_SSO_ENABLED,
   IS_MICROSOFT_SSO_ENABLED,
+  IS_OIDC_AUTO_REDIRECT_DISABLED,
   IS_OIDC_SSO_ENABLED,
+  isSigninEnabledForProvider,
   isSignupEnabledForProvider,
   OIDC_PROVIDER_LABEL,
 } from '@documenso/lib/constants/auth';
@@ -11,6 +14,7 @@ import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { Loader2Icon } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Link, redirect, useSearchParams } from 'react-router';
 
@@ -28,10 +32,20 @@ export async function loader({ request }: Route.LoaderArgs) {
   const { isAuthenticated } = await getOptionalSession(request);
 
   // SSR env variables.
-  const isGoogleSSOEnabled = IS_GOOGLE_SSO_ENABLED;
-  const isMicrosoftSSOEnabled = IS_MICROSOFT_SSO_ENABLED;
-  const isOIDCSSOEnabled = IS_OIDC_SSO_ENABLED;
+  const isEmailPasswordSigninEnabled = isSigninEnabledForProvider('email');
+  const isGoogleSSOEnabled = IS_GOOGLE_SSO_ENABLED && isSigninEnabledForProvider('google');
+  const isMicrosoftSSOEnabled = IS_MICROSOFT_SSO_ENABLED && isSigninEnabledForProvider('microsoft');
+  const isOIDCSSOEnabled = IS_OIDC_SSO_ENABLED && isSigninEnabledForProvider('oidc');
+
+  // Automatically redirect to OIDC when it is the only enabled signin transport,
+  // unless the redirect has been explicitly disabled via env.
+  const isOIDCOnlyTransport =
+    isOIDCSSOEnabled && !isEmailPasswordSigninEnabled && !isGoogleSSOEnabled && !isMicrosoftSSOEnabled;
+
+  const shouldAutoRedirectToOIDC = isOIDCOnlyTransport && !IS_OIDC_AUTO_REDIRECT_DISABLED;
+
   const oidcProviderLabel = OIDC_PROVIDER_LABEL;
+
   const isSignupEnabled =
     isSignupEnabledForProvider('email') ||
     (IS_GOOGLE_SSO_ENABLED && isSignupEnabledForProvider('google')) ||
@@ -47,18 +61,28 @@ export async function loader({ request }: Route.LoaderArgs) {
   }
 
   return {
+    isEmailPasswordSigninEnabled,
     isGoogleSSOEnabled,
     isMicrosoftSSOEnabled,
     isOIDCSSOEnabled,
     isSignupEnabled,
     oidcProviderLabel,
     returnTo,
+    shouldAutoRedirectToOIDC,
   };
 }
 
 export default function SignIn({ loaderData }: Route.ComponentProps) {
-  const { isGoogleSSOEnabled, isMicrosoftSSOEnabled, isOIDCSSOEnabled, isSignupEnabled, oidcProviderLabel, returnTo } =
-    loaderData;
+  const {
+    isEmailPasswordSigninEnabled,
+    isGoogleSSOEnabled,
+    isMicrosoftSSOEnabled,
+    isOIDCSSOEnabled,
+    isSignupEnabled,
+    oidcProviderLabel,
+    returnTo,
+    shouldAutoRedirectToOIDC,
+  } = loaderData;
 
   const { _ } = useLingui();
 
@@ -76,6 +100,27 @@ export default function SignIn({ loaderData }: Route.ComponentProps) {
     setIsEmbeddedRedirect(params.get('embedded') === 'true');
   }, []);
 
+  useEffect(() => {
+    if (!shouldAutoRedirectToOIDC) {
+      return;
+    }
+
+    void authClient.oidc.signIn({ redirectPath: returnTo ?? '/' });
+  }, [shouldAutoRedirectToOIDC, returnTo]);
+
+  if (shouldAutoRedirectToOIDC) {
+    return (
+      <div className="w-screen max-w-lg px-4">
+        <div className="flex flex-col items-center justify-center gap-y-4 py-12">
+          <Loader2Icon className="h-8 w-8 animate-spin text-muted-foreground" />
+          <p className="text-muted-foreground text-sm">
+            <Trans>Redirecting to {oidcProviderLabel || 'OIDC'}...</Trans>
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="w-screen max-w-lg px-4">
       <div className="z-10 rounded-xl border border-border bg-neutral-100 p-6 dark:bg-background">
@@ -95,6 +140,7 @@ export default function SignIn({ loaderData }: Route.ComponentProps) {
         <hr className="-mx-6 my-4" />
 
         <SignInForm
+          isEmailPasswordSigninEnabled={isEmailPasswordSigninEnabled}
           isGoogleSSOEnabled={isGoogleSSOEnabled}
           isMicrosoftSSOEnabled={isMicrosoftSSOEnabled}
           isOIDCSSOEnabled={isOIDCSSOEnabled}

apps/remix/app/utils/toast-error-messages.ts

@@ -32,6 +32,10 @@ export const getDirectTemplateErrorMessage = (code: string): ToastMessageDescrip
   return match(code)
     .with('RECIPIENT_LIMIT_EXCEEDED', () => RECIPIENT_LIMIT_EXCEEDED_ERROR_MESSAGE)
     .with(AppErrorCode.TOO_MANY_REQUESTS, () => FAIR_USE_LIMIT_EXCEEDED_ERROR_MESSAGE)
+    .with(AppErrorCode.MISSING_SIGNATURE_FIELD, () => ({
+      title: msg`Missing signature fields`,
+      description: msg`This direct link template cannot be used because one or more signers do not have a signature field assigned.`,
+    }))
     .otherwise(() => ({
       title: msg`Something went wrong`,
       description: msg`We were unable to submit this document at this time. Please try again later.`,
@@ -77,6 +81,10 @@ export const getTemplateUseErrorMessage = (code: string): ToastMessageDescriptor
       title: msg`Error`,
       description: msg`The document was created but could not be sent to recipients.`,
     }))
+    .with(AppErrorCode.MISSING_SIGNATURE_FIELD, () => ({
+      title: msg`Missing signature fields`,
+      description: msg`The document could not be sent because some signers do not have a signature field. Please edit the template and add a signature field for each signer.`,
+    }))
     .with(AppErrorCode.INVALID_BODY, AppErrorCode.INVALID_REQUEST, () => ({
       title: msg`Error`,
       description: msg`The document could not be created because of missing or invalid information. Please review the template's recipients and fields.`,