chore: merge main, resolve biome formatting conflicts

Merge origin/main into feat/external-2fa-codes. Resolve formatting conflicts caused by biome rollout; preserve both feature streams: PR's external 2FA token + signing-session 2FA proof additions plus main's RateLimit/RecipientExpired/signingReminders/date-auto-insert. In complete-document-with-token.ts, drop the duplicate early field-fetching block introduced when main moved that logic later with date auto-insert support; keep the EXTERNAL_TWO_FACTOR_AUTH check using derivedRecipientActionAuth.
2026-07-26 18:04:55 +10:00 · 2026-05-12 11:46:11 +00:00
parent 9194884fbe
commit 138d663c25
1959 changed files with 93488 additions and 47038 deletions
@@ -1,5 +1,14 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
+import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { FIELD_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
+import { nanoid } from '@documenso/lib/universal/id';
+import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
+import { SignatureIcon } from '@documenso/ui/icons/signature';
+import { getRecipientColorStyles } from '@documenso/ui/lib/recipient-colors';
+import { cn } from '@documenso/ui/lib/utils';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { FieldType } from '@prisma/client';
@@ -14,18 +23,7 @@ import {
  TextIcon,
  UserIcon,
 } from 'lucide-react';
-
-import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
-import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
-import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { FIELD_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
-import { nanoid } from '@documenso/lib/universal/id';
-import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
-import { SignatureIcon } from '@documenso/ui/icons/signature';
-import { RECIPIENT_COLOR_STYLES } from '@documenso/ui/lib/recipient-colors';
-import { cn } from '@documenso/ui/lib/utils';
-import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

 const MIN_HEIGHT_PX = 12;
 const MIN_WIDTH_PX = 36;
@@ -105,9 +103,7 @@ export const EnvelopeEditorFieldDragDrop = ({
  const { isWithinPageBounds, getPage } = useDocumentElement();

  const isFieldsDisabled = useMemo(() => {
-    const selectedSigner = envelope.recipients.find(
-      (recipient) => recipient.id === selectedRecipientId,
-    );
+    const selectedSigner = envelope.recipients.find((recipient) => recipient.id === selectedRecipientId);
    const fields = envelope.fields;

    if (!selectedSigner) {
@@ -136,12 +132,7 @@ export const EnvelopeEditorFieldDragDrop = ({
  const onMouseMove = useCallback(
    (event: MouseEvent) => {
      setIsFieldWithinBounds(
-        isWithinPageBounds(
-          event,
-          PDF_VIEWER_PAGE_SELECTOR,
-          fieldBounds.current.width,
-          fieldBounds.current.height,
-        ),
+        isWithinPageBounds(event, PDF_VIEWER_PAGE_SELECTOR, fieldBounds.current.width, fieldBounds.current.height),
      );

      setCoords({
@@ -162,12 +153,7 @@ export const EnvelopeEditorFieldDragDrop = ({

      if (
        !$page ||
-        !isWithinPageBounds(
-          event,
-          PDF_VIEWER_PAGE_SELECTOR,
-          fieldBounds.current.width,
-          fieldBounds.current.height,
-        )
+        !isWithinPageBounds(event, PDF_VIEWER_PAGE_SELECTOR, fieldBounds.current.width, fieldBounds.current.height)
      ) {
        setSelectedField(null);
        return;
@@ -175,15 +161,6 @@ export const EnvelopeEditorFieldDragDrop = ({

      const { top, left, height, width } = getBoundingClientRect($page);

-      console.log({
-        top,
-        left,
-        height,
-        width,
-        rawPageX: event.pageX,
-        rawPageY: event.pageY,
-      });
-
      const pageNumber = parseInt($page.getAttribute('data-page-number') ?? '1', 10);

      // Calculate x and y as a percentage of the page width and height
@@ -216,14 +193,7 @@ export const EnvelopeEditorFieldDragDrop = ({
      setIsFieldWithinBounds(false);
      setSelectedField(null);
    },
-    [
-      isWithinPageBounds,
-      selectedField,
-      selectedRecipientId,
-      selectedEnvelopeItemId,
-      getPage,
-      editorFields,
-    ],
+    [isWithinPageBounds, selectedField, selectedRecipientId, selectedEnvelopeItemId, getPage, editorFields],
  );

  useEffect(() => {
@@ -262,9 +232,10 @@ export const EnvelopeEditorFieldDragDrop = ({
    };
  }, [onMouseClick, onMouseMove, selectedField]);

-  const selectedRecipientColor = useMemo(() => {
-    return selectedRecipientId ? getRecipientColorKey(selectedRecipientId) : 'green';
-  }, [selectedRecipientId, getRecipientColorKey]);
+  const selectedRecipientStyles = useMemo(
+    () => getRecipientColorStyles(getRecipientColorKey(selectedRecipientId ?? -1)),
+    [selectedRecipientId, getRecipientColorKey],
+  );

  return (
    <>
@@ -278,22 +249,15 @@ export const EnvelopeEditorFieldDragDrop = ({
            onMouseDown={() => setSelectedField(field.type)}
            data-selected={selectedField === field.type ? true : undefined}
            className={cn(
-              'border-border group flex h-12 cursor-pointer items-center justify-center rounded-lg border px-4 transition-colors',
-              RECIPIENT_COLOR_STYLES[selectedRecipientColor].fieldButton,
+              'group flex h-12 cursor-pointer items-center justify-center rounded-lg border border-border px-4 transition-colors',
+              selectedRecipientStyles.fieldButton,
            )}
          >
            <p
              className={cn(
-                'text-muted-foreground font-noto group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                'flex items-center justify-center gap-x-1.5 font-normal font-noto text-muted-foreground text-sm group-data-[selected]:text-foreground',
                field.className,
-                {
-                  'group-hover:text-recipient-green': selectedRecipientColor === 'green',
-                  'group-hover:text-recipient-blue': selectedRecipientColor === 'blue',
-                  'group-hover:text-recipient-purple': selectedRecipientColor === 'purple',
-                  'group-hover:text-recipient-orange': selectedRecipientColor === 'orange',
-                  'group-hover:text-recipient-yellow': selectedRecipientColor === 'yellow',
-                  'group-hover:text-recipient-pink': selectedRecipientColor === 'pink',
-                },
+                selectedRecipientStyles.fieldButtonText,
              )}
            >
              {field.type !== FieldType.SIGNATURE && <field.icon className="h-4 w-4" />}
@@ -306,8 +270,8 @@ export const EnvelopeEditorFieldDragDrop = ({
      {selectedField && (
        <div
          className={cn(
-            'text-muted-foreground dark:text-muted-background font-noto pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white ring-2 transition duration-200 [container-type:size]',
-            RECIPIENT_COLOR_STYLES[selectedRecipientColor].base,
+            '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',
+            selectedRecipientStyles.base,
            selectedField === FieldType.SIGNATURE && 'font-signature',
            {
              '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
@@ -321,9 +285,7 @@ export const EnvelopeEditorFieldDragDrop = ({
            width: fieldBounds.current.width,
          }}
        >
-          <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
-            {t(FRIENDLY_FIELD_TYPE[selectedField])}
-          </span>
+          <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">{t(FRIENDLY_FIELD_TYPE[selectedField])}</span>
        </div>
      )}
    </>
@@ -1,31 +1,32 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-
+import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fields';
+import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import {
+  type PageRenderData,
+  useCurrentEnvelopeRender,
+} from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { FIELD_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
+import {
+  convertPixelToPercentage,
+  MIN_FIELD_HEIGHT_PX,
+  MIN_FIELD_WIDTH_PX,
+} from '@documenso/lib/universal/field-renderer/field-renderer';
+import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
+import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
+import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
+import { CommandDialog } from '@documenso/ui/primitives/command';
 import { useLingui } from '@lingui/react/macro';
 import type { FieldType } from '@prisma/client';
 import Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
 import type { Transformer } from 'konva/lib/shapes/Transformer';
 import { CopyPlusIcon, SquareStackIcon, TrashIcon, UserCircleIcon } from 'lucide-react';
-
-import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fields';
-import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
-import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
-import { FIELD_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
-import {
-  MIN_FIELD_HEIGHT_PX,
-  MIN_FIELD_WIDTH_PX,
-  convertPixelToPercentage,
-} from '@documenso/lib/universal/field-renderer/field-renderer';
-import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
-import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
-import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
-import { CommandDialog } from '@documenso/ui/primitives/command';
+import { useEffect, useMemo, useRef, useState } from 'react';

 import { fieldButtonList } from './envelope-editor-fields-drag-drop';
 import { EnvelopeRecipientSelectorCommand } from './envelope-recipient-selector';

-export default function EnvelopeEditorFieldsPageRenderer() {
+export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageRenderData }) => {
  const { t, i18n } = useLingui();
  const { envelope, editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
  const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
@@ -37,34 +38,22 @@ export default function EnvelopeEditorFieldsPageRenderer() {
  const [isFieldChanging, setIsFieldChanging] = useState(false);
  const [pendingFieldCreation, setPendingFieldCreation] = useState<Konva.Rect | null>(null);

-  const {
-    stage,
-    pageLayer,
-    canvasElement,
-    konvaContainer,
-    pageContext,
-    scaledViewport,
-    unscaledViewport,
-  } = usePageRenderer(({ stage, pageLayer }) => createPageCanvas(stage, pageLayer));
+  const { stage, pageLayer, konvaContainer, scaledViewport, unscaledViewport } = usePageRenderer(
+    ({ stage, pageLayer }) => createPageCanvas(stage, pageLayer),
+    pageData,
+  );

-  const { _className, scale } = pageContext;
+  const { scale, pageNumber } = pageData;

  const localPageFields = useMemo(
    () =>
      editorFields.localFields.filter(
-        (field) =>
-          field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
+        (field) => field.page === pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
      ),
-    [editorFields.localFields, pageContext.pageNumber],
+    [editorFields.localFields, pageNumber, currentEnvelopeItem?.id],
  );

  const handleResizeOrMove = (event: KonvaEventObject<Event>) => {
-    const { current: container } = canvasElement;
-
-    if (!container) {
-      return;
-    }
-
    const isDragEvent = event.type === 'dragend';

    const fieldGroup = event.target as Konva.Group;
@@ -121,8 +110,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
    }

    const recipient = envelope.recipients.find((r) => r.id === field.recipientId);
-    const isFieldEditable =
-      recipient !== undefined && canRecipientFieldsBeModified(recipient, envelope.fields);
+    const isFieldEditable = recipient !== undefined && canRecipientFieldsBeModified(recipient, envelope.fields);

    const { fieldGroup } = renderField({
      scale,
@@ -205,9 +193,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {

      setIsFieldChanging(e.type === 'dragstart');

-      const itemAlreadySelected = (interactiveTransformer.current?.nodes() || []).includes(
-        e.target,
-      );
+      const itemAlreadySelected = (interactiveTransformer.current?.nodes() || []).includes(e.target);

      // Do nothing and allow the transformer to handle it.
      // Required so when multiple items are selected, this won't deselect them.
@@ -235,10 +221,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
   * - Selecting multiple fields
   * - Selecting empty area to create fields
   */
-  const createInteractiveTransformer = (
-    currentStage: Konva.Stage,
-    currentPageLayer: Konva.Layer,
-  ) => {
+  const createInteractiveTransformer = (currentStage: Konva.Stage, currentPageLayer: Konva.Layer) => {
    const transformer = new Konva.Transformer({
      rotateEnabled: false,
      keepRatio: false,
@@ -344,7 +327,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
      // Create a field if no items are selected or the size is too small.
      if (
        selectedFieldGroups.length === 0 &&
-        canvasElement.current &&
        unscaledBoxWidth > MIN_FIELD_WIDTH_PX &&
        unscaledBoxHeight > MIN_FIELD_HEIGHT_PX &&
        editorFields.selectedRecipient &&
@@ -365,13 +347,9 @@ export default function EnvelopeEditorFieldsPageRenderer() {
    });

    // Clicks should select/deselect shapes
-    currentStage.on('click tap', function (e) {
+    currentStage.on('click tap', (e) => {
      // if we are selecting with rect, do nothing
-      if (
-        selectionRectangle.visible() &&
-        selectionRectangle.width() > 0 &&
-        selectionRectangle.height() > 0
-      ) {
+      if (selectionRectangle.visible() && selectionRectangle.width() > 0 && selectionRectangle.height() > 0) {
        return;
      }

@@ -421,10 +399,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {

    // If doesn't exist in localFields, destroy it since it's been deleted.
    pageLayer.current.find('Group').forEach((group) => {
-      if (
-        group.name() === 'field-group' &&
-        !localPageFields.some((field) => field.formId === group.id())
-      ) {
+      if (group.name() === 'field-group' && !localPageFields.some((field) => field.formId === group.id())) {
        group.destroy();
      }
    });
@@ -434,15 +409,30 @@ export default function EnvelopeEditorFieldsPageRenderer() {
      renderFieldOnLayer(field);
    });

+    // Reconcile selection state with live field nodes after flush/sync updates.
+    const liveSelectedFieldGroups = selectedKonvaFieldGroups.filter((fieldGroup) => {
+      if (!fieldGroup.getStage() || !fieldGroup.getParent()) {
+        return false;
+      }
+
+      return localPageFields.some((field) => field.formId === fieldGroup.id());
+    });
+
+    if (liveSelectedFieldGroups.length !== selectedKonvaFieldGroups.length) {
+      setSelectedFields(liveSelectedFieldGroups);
+    }
+
    // Rerender the transformer
    interactiveTransformer.current?.forceUpdate();

    pageLayer.current.batchDraw();
-  }, [localPageFields]);
+  }, [localPageFields, selectedKonvaFieldGroups]);

  const setSelectedFields = (nodes: Konva.Node[]) => {
    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const fieldGroups = nodes.filter((node) => node.hasName('field-group')) as Konva.Group[];
+    const fieldGroups = nodes.filter(
+      (node) => node.hasName('field-group') && Boolean(node.getStage()) && Boolean(node.getParent()),
+    ) as Konva.Group[];

    interactiveTransformer.current?.nodes(fieldGroups);
    setSelectedKonvaFieldGroups(fieldGroups);
@@ -461,9 +451,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
  };

  const deletedSelectedFields = () => {
-    const fieldFormids = selectedKonvaFieldGroups
-      .map((field) => field.id())
-      .filter((field) => field !== undefined);
+    const fieldFormids = selectedKonvaFieldGroups.map((field) => field.id()).filter((field) => field !== undefined);

    editorFields.removeFieldsByFormId(fieldFormids);

@@ -515,7 +503,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {

    removePendingField();

-    if (!canvasElement.current || !currentEnvelopeItem || !editorFields.selectedRecipient) {
+    if (!currentEnvelopeItem || !editorFields.selectedRecipient) {
      return;
    }

@@ -530,7 +518,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {

    editorFields.addField({
      envelopeItemId: currentEnvelopeItem.id,
-      page: pageContext.pageNumber,
+      page: pageNumber,
      type,
      positionX: fieldX,
      positionY: fieldY,
@@ -559,51 +547,32 @@ export default function EnvelopeEditorFieldsPageRenderer() {
  }

  return (
-    <div
-      className="relative w-full"
-      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
-    >
-      {selectedKonvaFieldGroups.length > 0 &&
-        interactiveTransformer.current &&
-        !isFieldChanging && (
-          <FieldActionButtons
-            handleDuplicateSelectedFields={duplicatedSelectedFields}
-            handleDuplicateSelectedFieldsOnAllPages={duplicatedSelectedFieldsOnAllPages}
-            handleDeleteSelectedFields={deletedSelectedFields}
-            handleChangeRecipient={changeSelectedFieldsRecipients}
-            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 && (
+        <FieldActionButtons
+          handleDuplicateSelectedFields={duplicatedSelectedFields}
+          handleDuplicateSelectedFieldsOnAllPages={duplicatedSelectedFieldsOnAllPages}
+          handleDeleteSelectedFields={deletedSelectedFields}
+          handleChangeRecipient={changeSelectedFieldsRecipients}
+          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
          style={{
            position: 'absolute',
-            top:
-              pendingFieldCreation.y() * scale +
-              pendingFieldCreation.getClientRect().height +
-              5 +
-              'px',
-            left:
-              pendingFieldCreation.x() * scale +
-              pendingFieldCreation.getClientRect().width / 2 +
-              'px',
+            top: pendingFieldCreation.y() * scale + pendingFieldCreation.getClientRect().height + 5 + 'px',
+            left: pendingFieldCreation.x() * scale + pendingFieldCreation.getClientRect().width / 2 + 'px',
            transform: 'translateX(-50%)',
            zIndex: 50,
          }}
@@ -624,17 +593,9 @@ export default function EnvelopeEditorFieldsPageRenderer() {

      {/* The element Konva will inject it's canvas into. */}
      <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>
-
-      {/* Canvas the PDF will be rendered on. */}
-      <canvas
-        className={`${_className}__canvas z-0`}
-        ref={canvasElement}
-        height={scaledViewport.height}
-        width={scaledViewport.width}
-      />
-    </div>
+    </>
  );
-}
+};

 type FieldActionButtonsProps = React.HTMLAttributes<HTMLDivElement> & {
  handleDuplicateSelectedFields: () => void;
@@ -670,13 +631,13 @@ const FieldActionButtons = ({
      return null;
    }

-    const fields = editorFields.localFields.filter((field) =>
-      selectedFieldFormId.includes(field.formId),
-    );
+    const fields = editorFields.localFields.filter((field) => selectedFieldFormId.includes(field.formId));

-    const recipient = envelope.recipients.find(
-      (recipient) => recipient.id === fields[0].recipientId,
-    );
+    if (fields.length === 0) {
+      return null;
+    }
+
+    const recipient = envelope.recipients.find((recipient) => recipient.id === fields[0].recipientId);

    if (!recipient) {
      return null;
@@ -689,7 +650,7 @@ const FieldActionButtons = ({
    }

    return null;
-  }, [editorFields.localFields]);
+  }, [editorFields.localFields, envelope.recipients, selectedFieldFormId]);

  return (
    <div className="flex flex-col items-center" {...props}>
@@ -731,11 +692,7 @@ const FieldActionButtons = ({
        </button>
      </div>

-      <CommandDialog
-        position="start"
-        open={showRecipientSelector}
-        onOpenChange={setShowRecipientSelector}
-      >
+      <CommandDialog position="start" open={showRecipientSelector} onOpenChange={setShowRecipientSelector}>
        <EnvelopeRecipientSelectorCommand
          placeholder={t`Select a recipient`}
          selectedRecipient={preselectedRecipient}
@@ -1,17 +1,6 @@
-import { lazy, useEffect, useMemo, useState } from 'react';
-
-import type { MessageDescriptor } from '@lingui/core';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
-import { FileTextIcon, SparklesIcon } from 'lucide-react';
-import { Link, useRevalidator, useSearchParams } from 'react-router';
-import { isDeepEqual } from 'remeda';
-import { match } from 'ts-pattern';
-
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { PDF_VIEWER_ERROR_MESSAGES } from '@documenso/lib/constants/pdf-viewer-i18n';
 import type { NormalizedFieldWithContext } from '@documenso/lib/server-only/ai/envelope/detect-fields/types';
 import {
  FIELD_META_DEFAULT_VALUES,
@@ -27,15 +16,27 @@ import {
  type TSignatureFieldMeta,
  type TTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
+import { getEnvelopeItemPermissions } from '@documenso/lib/utils/envelope';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
-import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
+import { cn } from '@documenso/ui/lib/utils';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
+import { FileTextIcon, PencilIcon, SparklesIcon } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useRevalidator, useSearchParams } from 'react-router';
+import { isDeepEqual } from 'remeda';
+import { match } from 'ts-pattern';

 import { AiFeaturesEnableDialog } from '~/components/dialogs/ai-features-enable-dialog';
 import { AiFieldDetectionDialog } from '~/components/dialogs/ai-field-detection-dialog';
+import { EnvelopeItemEditDialog } from '~/components/dialogs/envelope-item-edit-dialog';
 import { EditorFieldCheckboxForm } from '~/components/forms/editor/editor-field-checkbox-form';
 import { EditorFieldDateForm } from '~/components/forms/editor/editor-field-date-form';
 import { EditorFieldDropdownForm } from '~/components/forms/editor/editor-field-dropdown-form';
@@ -46,16 +47,14 @@ import { EditorFieldNumberForm } from '~/components/forms/editor/editor-field-nu
 import { EditorFieldRadioForm } from '~/components/forms/editor/editor-field-radio-form';
 import { EditorFieldSignatureForm } from '~/components/forms/editor/editor-field-signature-form';
 import { EditorFieldTextForm } from '~/components/forms/editor/editor-field-text-form';
+import { EnvelopePdfViewer } from '~/components/general/pdf-viewer/envelope-pdf-viewer';
 import { useCurrentTeam } from '~/providers/team';

 import { EnvelopeEditorFieldDragDrop } from './envelope-editor-fields-drag-drop';
+import { EnvelopeEditorFieldsPageRenderer } from './envelope-editor-fields-page-renderer';
 import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 import { EnvelopeRecipientSelector } from './envelope-recipient-selector';

-const EnvelopeEditorFieldsPageRenderer = lazy(
-  async () => import('~/components/general/envelope-editor/envelope-editor-fields-page-renderer'),
-);
-
 const FieldSettingsTypeTranslations: Record<FieldType, MessageDescriptor> = {
  [FieldType.SIGNATURE]: msg`Signature Settings`,
  [FieldType.FREE_SIGNATURE]: msg`Free Signature Settings`,
@@ -75,7 +74,9 @@ export const EnvelopeEditorFieldsPage = () => {

  const team = useCurrentTeam();

-  const { envelope, editorFields, relativePath } = useCurrentEnvelopeEditor();
+  const scrollableContainerRef = useRef<HTMLDivElement>(null);
+
+  const { envelope, editorFields, navigateToStep, editorConfig } = useCurrentEnvelopeEditor();

  const { currentEnvelopeItem } = useCurrentEnvelopeRender();

@@ -85,11 +86,13 @@ export const EnvelopeEditorFieldsPage = () => {
  const [isAiEnableDialogOpen, setIsAiEnableDialogOpen] = useState(false);
  const { revalidate } = useRevalidator();

-  const selectedField = useMemo(
-    () => structuredClone(editorFields.selectedField),
-    [editorFields.selectedField],
+  const envelopeItemPermissions = useMemo(
+    () => getEnvelopeItemPermissions(envelope, envelope.recipients),
+    [envelope, envelope.recipients],
  );

+  const selectedField = useMemo(() => structuredClone(editorFields.selectedField), [editorFields.selectedField]);
+
  const updateSelectedFieldMeta = (fieldMeta: TFieldMetaSchema) => {
    if (!selectedField) {
      return;
@@ -97,14 +100,10 @@ export const EnvelopeEditorFieldsPage = () => {

    const isMetaSame = isDeepEqual(selectedField.fieldMeta, fieldMeta);

-    // Todo: Envelopes - Clean up console logs.
    if (!isMetaSame) {
-      console.log('TRIGGER UPDATE');
      editorFields.updateFieldByFormId(selectedField.formId, {
        fieldMeta,
      });
-    } else {
-      console.log('DATA IS SAME, NO UPDATE');
    }
  };

@@ -131,8 +130,7 @@ export const EnvelopeEditorFieldsPage = () => {
   */
  useEffect(() => {
    const firstSelectableRecipient = envelope.recipients.find(
-      (recipient) =>
-        recipient.role === RecipientRole.SIGNER || recipient.role === RecipientRole.APPROVER,
+      (recipient) => recipient.role === RecipientRole.SIGNER || recipient.role === RecipientRole.APPROVER,
    );

    editorFields.setSelectedRecipient(firstSelectableRecipient?.id ?? null);
@@ -156,12 +154,43 @@ export const EnvelopeEditorFieldsPage = () => {

  return (
    <div className="relative flex h-full">
-      <div className="flex w-full flex-col overflow-y-auto">
+      <div className="flex h-full w-full flex-col overflow-y-auto px-2" ref={scrollableContainerRef}>
        {/* Horizontal envelope item selector */}
-        <EnvelopeRendererFileSelector fields={editorFields.localFields} />
+        <EnvelopeRendererFileSelector
+          className="px-0"
+          fields={editorFields.localFields}
+          renderItemAction={
+            editorConfig.envelopeItems !== null &&
+            editorConfig.envelopeItems.allowReplace &&
+            envelopeItemPermissions.canFileBeChanged
+              ? (item) => (
+                  <div className="relative flex h-5 w-5 flex-shrink-0 items-center justify-center">
+                    <div
+                      className={cn('h-2 w-2 rounded-full transition-opacity duration-150 group-hover:opacity-0', {
+                        'bg-green-500': currentEnvelopeItem?.id === item.id,
+                      })}
+                    />
+                    <EnvelopeItemEditDialog
+                      envelopeItem={item}
+                      allowConfigureTitle={editorConfig.envelopeItems?.allowConfigureTitle ?? false}
+                      trigger={
+                        <span
+                          className="absolute inset-0 flex cursor-pointer items-center justify-center opacity-0 transition-opacity duration-150 group-hover:opacity-100"
+                          onClick={(e) => e.stopPropagation()}
+                          data-testid={`envelope-item-edit-button-${item.id}`}
+                        >
+                          <PencilIcon className="h-3.5 w-3.5" />
+                        </span>
+                      }
+                    />
+                  </div>
+                )
+              : undefined
+          }
+        />

        {/* Document View */}
-        <div className="mt-4 flex flex-col items-center justify-center">
+        <div className="mt-4 flex h-full flex-col items-center justify-center">
          {envelope.recipients.length === 0 && (
            <Alert
              variant="neutral"
@@ -176,26 +205,25 @@ export const EnvelopeEditorFieldsPage = () => {
                </AlertDescription>
              </div>

-              <Button asChild variant="outline">
-                <Link to={`${relativePath.editorPath}`}>
-                  <Trans>Add Recipients</Trans>
-                </Link>
+              <Button variant="outline" onClick={() => void navigateToStep('upload')}>
+                <Trans>Add Recipients</Trans>
              </Button>
            </Alert>
          )}

          {currentEnvelopeItem !== null ? (
-            <PDFViewerKonvaLazy
-              renderer="editor"
+            <EnvelopePdfViewer
              customPageRenderer={EnvelopeEditorFieldsPageRenderer}
+              scrollParentRef={scrollableContainerRef}
+              errorMessage={PDF_VIEWER_ERROR_MESSAGES.editor}
            />
          ) : (
            <div className="flex flex-col items-center justify-center py-32">
              <FileTextIcon className="h-10 w-10 text-muted-foreground" />
-              <p className="mt-1 text-sm text-foreground">
+              <p className="mt-1 text-foreground text-sm">
                <Trans>No documents found</Trans>
              </p>
-              <p className="mt-1 text-sm text-muted-foreground">
+              <p className="mt-1 text-muted-foreground text-sm">
                <Trans>Please upload a document to continue</Trans>
              </p>
            </div>
@@ -205,18 +233,16 @@ export const EnvelopeEditorFieldsPage = () => {

      {/* Right Section - Form Fields Panel */}
      {currentEnvelopeItem && envelope.recipients.length > 0 && (
-        <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l border-border bg-background py-4">
+        <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-border border-l bg-background py-4">
          {/* Recipient selector section. */}
          <section className="px-4">
-            <h3 className="mb-2 text-sm font-semibold text-foreground">
+            <h3 className="mb-2 font-semibold text-foreground text-sm">
              <Trans>Selected Recipient</Trans>
            </h3>

            <EnvelopeRecipientSelector
              selectedRecipient={editorFields.selectedRecipient}
-              onSelectedRecipientChange={(recipient) =>
-                editorFields.setSelectedRecipient(recipient.id)
-              }
+              onSelectedRecipientChange={(recipient) => editorFields.setSelectedRecipient(recipient.id)}
              recipients={envelope.recipients}
              fields={envelope.fields}
              className="w-full"
@@ -228,8 +254,7 @@ export const EnvelopeEditorFieldsPage = () => {
                <Alert className="mt-4" variant="warning">
                  <AlertDescription>
                    <Trans>
-                      This recipient can no longer be modified as they have signed a field, or
-                      completed the document.
+                      This recipient can no longer be modified as they have signed a field, or completed the document.
                    </Trans>
                  </AlertDescription>
                </Alert>
@@ -240,7 +265,7 @@ export const EnvelopeEditorFieldsPage = () => {

          {/* Add fields section. */}
          <section className="px-4">
-            <h3 className="mb-2 text-sm font-semibold text-foreground">
+            <h3 className="mb-2 font-semibold text-foreground text-sm">
              <Trans>Add Fields</Trans>
            </h3>

@@ -249,36 +274,40 @@ export const EnvelopeEditorFieldsPage = () => {
              selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null}
            />

-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="mt-4 w-full"
-              onClick={onDetectClick}
-              disabled={envelope.status !== DocumentStatus.DRAFT}
-              title={
-                envelope.status !== DocumentStatus.DRAFT
-                  ? _(msg`You can only detect fields in draft envelopes`)
-                  : undefined
-              }
-            >
-              <SparklesIcon className="-ml-1 mr-2 h-4 w-4" />
-              <Trans>Detect with AI</Trans>
-            </Button>
+            {editorConfig.fields?.allowAIDetection && (
+              <>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="mt-4 w-full"
+                  onClick={onDetectClick}
+                  disabled={envelope.status !== DocumentStatus.DRAFT}
+                  title={
+                    envelope.status !== DocumentStatus.DRAFT
+                      ? _(msg`You can only detect fields in draft envelopes`)
+                      : undefined
+                  }
+                >
+                  <SparklesIcon className="mr-2 -ml-1 h-4 w-4" />
+                  <Trans>Detect with AI</Trans>
+                </Button>

-            <AiFieldDetectionDialog
-              open={isAiFieldDialogOpen}
-              onOpenChange={setIsAiFieldDialogOpen}
-              onComplete={onFieldDetectionComplete}
-              envelopeId={envelope.id}
-              teamId={envelope.teamId}
-            />
+                <AiFieldDetectionDialog
+                  open={isAiFieldDialogOpen}
+                  onOpenChange={setIsAiFieldDialogOpen}
+                  onComplete={onFieldDetectionComplete}
+                  envelopeId={envelope.id}
+                  teamId={envelope.teamId}
+                />

-            <AiFeaturesEnableDialog
-              open={isAiEnableDialogOpen}
-              onOpenChange={setIsAiEnableDialogOpen}
-              onEnabled={onAiFeaturesEnabled}
-            />
+                <AiFeaturesEnableDialog
+                  open={isAiEnableDialogOpen}
+                  onOpenChange={setIsAiEnableDialogOpen}
+                  onEnabled={onAiFeaturesEnabled}
+                />
+              </>
+            )}
          </section>

          {/* Field details section. */}
@@ -290,25 +319,47 @@ export const EnvelopeEditorFieldsPage = () => {
                {searchParams.get('devmode') && (
                  <>
                    <div className="px-4">
-                      <h3 className="mb-3 text-sm font-semibold text-foreground">
+                      <h3 className="mb-3 font-semibold text-foreground text-sm">
                        <Trans>Developer Mode</Trans>
                      </h3>

-                      <div className="space-y-2 rounded-md border border-border bg-muted/50 p-3 text-sm text-foreground">
+                      <div className="space-y-2 rounded-md border border-border bg-muted/50 p-3 text-foreground text-sm">
+                        {selectedField.id && (
+                          <p>
+                            <span className="min-w-12 text-muted-foreground">
+                              <Trans>Field ID:</Trans>
+                            </span>{' '}
+                            {selectedField.id}
+                          </p>
+                        )}
                        <p>
-                          <span className="min-w-12 text-muted-foreground">Pos X:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Recipient ID:</Trans>
+                          </span>{' '}
+                          {selectedField.recipientId}
+                        </p>
+                        <p>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Pos X:</Trans>
+                          </span>{' '}
                          {selectedField.positionX.toFixed(2)}
                        </p>
                        <p>
-                          <span className="min-w-12 text-muted-foreground">Pos Y:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Pos Y:</Trans>
+                          </span>{' '}
                          {selectedField.positionY.toFixed(2)}
                        </p>
                        <p>
-                          <span className="min-w-12 text-muted-foreground">Width:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Width:</Trans>
+                          </span>{' '}
                          {selectedField.width.toFixed(2)}
                        </p>
                        <p>
-                          <span className="min-w-12 text-muted-foreground">Height:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Height:</Trans>
+                          </span>{' '}
                          {selectedField.height.toFixed(2)}
                        </p>
                      </div>
@@ -318,10 +369,8 @@ export const EnvelopeEditorFieldsPage = () => {
                  </>
                )}

-                <div className="px-4 [&_label]:text-xs [&_label]:text-foreground/70">
-                  <h3 className="text-sm font-semibold">
-                    {_(FieldSettingsTypeTranslations[selectedField.type])}
-                  </h3>
+                <div className="px-4 [&_label]:text-foreground/70 [&_label]:text-xs">
+                  <h3 className="font-semibold text-sm">{_(FieldSettingsTypeTranslations[selectedField.type])}</h3>

                  {match(selectedField.type)
                    .with(FieldType.SIGNATURE, () => (
@@ -1,27 +1,29 @@
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { getEnvelopeItemPermissions, mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import { Separator } from '@documenso/ui/primitives/separator';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { DocumentStatus, EnvelopeType } from '@prisma/client';
+import { DocumentStatus, EnvelopeType, TemplateType } from '@prisma/client';
 import {
  AlertTriangleIcon,
+  Building2Icon,
  Globe2Icon,
  LockIcon,
  RefreshCwIcon,
  SendIcon,
  SettingsIcon,
 } from 'lucide-react';
+import { useMemo } from 'react';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';

-import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
-import { Badge } from '@documenso/ui/primitives/badge';
-import { Button } from '@documenso/ui/primitives/button';
-import { Separator } from '@documenso/ui/primitives/separator';
-
 import { EnvelopeDistributeDialog } from '~/components/dialogs/envelope-distribute-dialog';
 import { EnvelopeRedistributeDialog } from '~/components/dialogs/envelope-redistribute-dialog';
 import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
 import { BrandingLogo } from '~/components/general/branding-logo';
 import { DocumentAttachmentsPopover } from '~/components/general/document/document-attachments-popover';
+import { EmbeddedEditorAttachmentPopover } from '~/components/general/document/embedded-editor-attachment-popover';
 import { EnvelopeEditorSettingsDialog } from '~/components/general/envelope-editor/envelope-editor-settings-dialog';

 import { TemplateDirectLinkBadge } from '../template/template-direct-link-badge';
@@ -30,21 +32,58 @@ import { EnvelopeItemTitleInput } from './envelope-editor-title-input';
 export default function EnvelopeEditorHeader() {
  const { t } = useLingui();

-  const { envelope, isDocument, isTemplate, updateEnvelope, autosaveError, relativePath } =
-    useCurrentEnvelopeEditor();
+  const {
+    envelope,
+    isDocument,
+    isTemplate,
+    isEmbedded,
+    updateEnvelope,
+    autosaveError,
+    relativePath,
+    editorConfig,
+    flushAutosave,
+  } = useCurrentEnvelopeEditor();
+
+  const {
+    embedded,
+    general: { allowConfigureEnvelopeTitle },
+    actions: { allowAttachments, allowDistributing },
+  } = editorConfig;
+
+  const envelopeItemPermissions = useMemo(
+    () => getEnvelopeItemPermissions(envelope, envelope.recipients),
+    [envelope, envelope.recipients],
+  );
+
+  const handleCreateEmbeddedEnvelope = async () => {
+    const latestEnvelope = await flushAutosave();
+
+    embedded?.onCreate?.(latestEnvelope);
+  };
+
+  const handleUpdateEmbeddedEnvelope = async () => {
+    const latestEnvelope = await flushAutosave();
+
+    embedded?.onUpdate?.(latestEnvelope);
+  };

  return (
-    <nav className="w-full border-b border-border bg-background px-4 py-3 md:px-6">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-4">
-          <Link to="/">
-            <BrandingLogo className="h-6 w-auto" />
-          </Link>
-          <Separator orientation="vertical" className="h-6" />
+    <nav className="w-full border-border border-b bg-background px-4 py-3 md:px-6">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex min-w-0 flex-1 items-center space-x-4">
+          {editorConfig.embedded?.customBrandingLogo ? (
+            <img src={`/api/branding/logo/team/${envelope.teamId}`} alt="Logo" className="h-6 w-auto" />
+          ) : (
+            <Link to="/">
+              <BrandingLogo className="h-6 w-auto" />
+            </Link>
+          )}
+          <Separator orientation="vertical" className="h-6 shrink-0" />

-          <div className="flex items-center space-x-2">
+          <div className="flex min-w-0 items-center space-x-2">
            <EnvelopeItemTitleInput
-              disabled={envelope.status !== DocumentStatus.DRAFT}
+              dataTestId="envelope-title-input"
+              disabled={!envelopeItemPermissions.canTitleBeChanged || !allowConfigureEnvelopeTitle}
              value={envelope.title}
              onChange={(title) => {
                updateEnvelope({
@@ -58,13 +97,20 @@ export default function EnvelopeEditorHeader() {

            {envelope.type === EnvelopeType.TEMPLATE && (
              <>
-                {envelope.templateType === 'PRIVATE' ? (
-                  <Badge variant="secondary">
+                {envelope.templateType === TemplateType.PRIVATE && (
+                  <Badge variant="secondary" className="shrink-0">
                    <LockIcon className="mr-2 h-4 w-4 text-blue-600 dark:text-blue-300" />
                    <Trans>Private Template</Trans>
                  </Badge>
-                ) : (
-                  <Badge variant="default">
+                )}
+                {envelope.templateType === TemplateType.ORGANISATION && (
+                  <Badge variant="orange" className="shrink-0">
+                    <Building2Icon className="mr-2 size-4" />
+                    <Trans>Organisation Template</Trans>
+                  </Badge>
+                )}
+                {envelope.templateType === TemplateType.PUBLIC && (
+                  <Badge variant="default" className="shrink-0">
                    <Globe2Icon className="mr-2 h-4 w-4 text-green-500 dark:text-green-300" />
                    <Trans>Public Template</Trans>
                  </Badge>
@@ -72,7 +118,7 @@ export default function EnvelopeEditorHeader() {

                {envelope.directLink?.token && (
                  <TemplateDirectLinkBadge
-                    className="py-1"
+                    className="shrink-0 py-1"
                    token={envelope.directLink.token}
                    enabled={envelope.directLink.enabled}
                  />
@@ -83,22 +129,22 @@ export default function EnvelopeEditorHeader() {
            {envelope.type === EnvelopeType.DOCUMENT &&
              match(envelope.status)
                .with(DocumentStatus.DRAFT, () => (
-                  <Badge variant="warning">
+                  <Badge variant="warning" className="shrink-0">
                    <Trans>Draft</Trans>
                  </Badge>
                ))
                .with(DocumentStatus.PENDING, () => (
-                  <Badge variant="secondary">
+                  <Badge variant="secondary" className="shrink-0">
                    <Trans>Pending</Trans>
                  </Badge>
                ))
                .with(DocumentStatus.COMPLETED, () => (
-                  <Badge variant="default">
+                  <Badge variant="default" className="shrink-0">
                    <Trans>Completed</Trans>
                  </Badge>
                ))
                .with(DocumentStatus.REJECTED, () => (
-                  <Badge variant="destructive">
+                  <Badge variant="destructive" className="shrink-0">
                    <Trans>Rejected</Trans>
                  </Badge>
                ))
@@ -106,7 +152,7 @@ export default function EnvelopeEditorHeader() {

            {autosaveError && (
              <>
-                <Badge variant="destructive">
+                <Badge variant="destructive" className="shrink-0">
                  <AlertTriangleIcon className="mr-2 h-4 w-4" />
                  <Trans>Sync failed, changes not saved</Trans>
                </Badge>
@@ -116,7 +162,7 @@ export default function EnvelopeEditorHeader() {
                    window.location.reload();
                  }}
                >
-                  <Badge variant="destructive">
+                  <Badge variant="destructive" className="shrink-0">
                    <RefreshCwIcon className="mr-2 h-4 w-4" />
                    <Trans>Reload</Trans>
                  </Badge>
@@ -126,55 +172,76 @@ export default function EnvelopeEditorHeader() {
          </div>
        </div>

-        <div className="flex items-center space-x-2">
-          <DocumentAttachmentsPopover envelopeId={envelope.id} buttonSize="sm" />
+        <div className="flex shrink-0 items-center space-x-2">
+          {allowAttachments &&
+            (isEmbedded ? (
+              <EmbeddedEditorAttachmentPopover buttonSize="sm" />
+            ) : (
+              <DocumentAttachmentsPopover envelopeId={envelope.id} buttonSize="sm" />
+            ))}

-          <EnvelopeEditorSettingsDialog
-            trigger={
-              <Button variant="outline" size="sm">
-                <SettingsIcon className="h-4 w-4" />
-              </Button>
-            }
-          />
-
-          {isDocument && (
-            <>
-              <EnvelopeDistributeDialog
-                documentRootPath={relativePath.documentRootPath}
-                trigger={
-                  <Button size="sm">
-                    <SendIcon className="mr-2 h-4 w-4" />
-                    <Trans>Send Document</Trans>
-                  </Button>
-                }
-              />
-
-              <EnvelopeRedistributeDialog
-                envelope={envelope}
-                trigger={
-                  <Button size="sm">
-                    <SendIcon className="mr-2 h-4 w-4" />
-                    <Trans>Resend Document</Trans>
-                  </Button>
-                }
-              />
-            </>
-          )}
-
-          {isTemplate && (
-            <TemplateUseDialog
-              envelopeId={envelope.id}
-              templateId={mapSecondaryIdToTemplateId(envelope.secondaryId)}
-              templateSigningOrder={envelope.documentMeta?.signingOrder}
-              recipients={envelope.recipients}
-              documentRootPath={relativePath.documentRootPath}
+          {editorConfig.settings && (
+            <EnvelopeEditorSettingsDialog
              trigger={
-                <Button size="sm">
-                  <Trans>Use Template</Trans>
+                <Button variant="outline" size="sm">
+                  <SettingsIcon className="h-4 w-4" />
                </Button>
              }
            />
          )}
+
+          {match({ isEmbedded, isDocument, isTemplate, allowDistributing })
+            .with({ isEmbedded: false, isDocument: true, allowDistributing: true }, () => (
+              <>
+                <EnvelopeDistributeDialog
+                  documentRootPath={relativePath.documentRootPath}
+                  trigger={
+                    <Button size="sm">
+                      <SendIcon className="mr-2 h-4 w-4" />
+                      <Trans>Send Document</Trans>
+                    </Button>
+                  }
+                />
+
+                <EnvelopeRedistributeDialog
+                  envelope={envelope}
+                  trigger={
+                    <Button size="sm">
+                      <SendIcon className="mr-2 h-4 w-4" />
+                      <Trans>Resend Document</Trans>
+                    </Button>
+                  }
+                />
+              </>
+            ))
+            .with({ isEmbedded: false, isTemplate: true, allowDistributing: true }, () => (
+              <TemplateUseDialog
+                envelopeId={envelope.id}
+                templateId={mapSecondaryIdToTemplateId(envelope.secondaryId)}
+                templateSigningOrder={envelope.documentMeta?.signingOrder}
+                recipients={envelope.recipients}
+                documentRootPath={relativePath.documentRootPath}
+                trigger={
+                  <Button size="sm">
+                    <Trans>Use Template</Trans>
+                  </Button>
+                }
+              />
+            ))
+
+            .otherwise(() => null)}
+
+          {embedded?.mode === 'create' && (
+            <Button size="sm" onClick={handleCreateEmbeddedEnvelope}>
+              {isDocument ? <Trans>Create Document</Trans> : <Trans>Create Template</Trans>}
+            </Button>
+          )}
+
+          {embedded?.mode === 'edit' && (
+            <Button size="sm" onClick={handleUpdateEmbeddedEnvelope}>
+              {isDocument ? <Trans>Update Document</Trans> : <Trans>Update Template</Trans>}
+            </Button>
+          )}
        </div>
      </div>
    </nav>
@@ -1,43 +1,52 @@
-import { lazy, useEffect, useMemo, useState } from 'react';
-
-import { faker } from '@faker-js/faker/locale/en';
-import { Trans } from '@lingui/react/macro';
-import { FieldType, SigningStatus } from '@prisma/client';
-import { FileTextIcon } from 'lucide-react';
-import { match } from 'ts-pattern';
-
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import {
  EnvelopeRenderProvider,
  useCurrentEnvelopeRender,
 } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { PDF_VIEWER_ERROR_MESSAGES } from '@documenso/lib/constants/pdf-viewer-i18n';
 import { ZFieldAndMetaSchema } from '@documenso/lib/types/field-meta';
 import { extractFieldInsertionValues } from '@documenso/lib/utils/envelope-signing';
 import { toCheckboxCustomText } from '@documenso/lib/utils/fields';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
-import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
 import { Separator } from '@documenso/ui/primitives/separator';
+import type { Faker } from '@faker-js/faker';
+import { Trans } from '@lingui/react/macro';
+import { FieldType, SigningStatus } from '@prisma/client';
+import { FileTextIcon } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+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 { EnvelopeRendererFileSelector } from './envelope-file-selector';

-const EnvelopeGenericPageRenderer = lazy(
-  async () => import('~/components/general/envelope-editor/envelope-generic-page-renderer'),
-);
-
-// Todo: Envelopes - Dynamically import faker
 export const EnvelopeEditorPreviewPage = () => {
-  const { envelope, editorFields } = useCurrentEnvelopeEditor();
+  const { envelope, editorFields, editorConfig } = useCurrentEnvelopeEditor();

  const { currentEnvelopeItem, fields } = useCurrentEnvelopeRender();

-  const [selectedPreviewMode, setSelectedPreviewMode] = useState<'recipient' | 'signed'>(
-    'recipient',
-  );
+  const scrollableContainerRef = useRef<HTMLDivElement>(null);
+
+  const [selectedPreviewMode, setSelectedPreviewMode] = useState<'recipient' | 'signed'>('recipient');
+
+  const [fakerInstance, setFakerInstance] = useState<Faker | null>(null);
+
+  useEffect(() => {
+    void import('@faker-js/faker/locale/en').then((mod) => {
+      setFakerInstance(mod.faker);
+    });
+  }, []);

  const fieldsWithPlaceholders = useMemo(() => {
+    if (!fakerInstance) {
+      return [];
+    }
+
+    const faker = fakerInstance;
    return fields.map((field) => {
      const fieldMeta = ZFieldAndMetaSchema.parse(field);

@@ -188,7 +197,7 @@ export const EnvelopeEditorPreviewPage = () => {
          .exhaustive(),
      };
    });
-  }, [fields, envelope, envelope.recipients, envelope.documentMeta]);
+  }, [fields, envelope, envelope.recipients, envelope.documentMeta, fakerInstance]);

  /**
   * Set the selected recipient to the first recipient in the envelope.
@@ -200,45 +209,49 @@ export const EnvelopeEditorPreviewPage = () => {
  // Override the parent renderer provider so we can inject custom fields.
  return (
    <EnvelopeRenderProvider
+      version="current"
      envelope={envelope}
+      envelopeItems={envelope.envelopeItems}
      token={undefined}
      fields={fieldsWithPlaceholders}
      recipients={envelope.recipients.map((recipient) => ({
        ...recipient,
        signingStatus: SigningStatus.SIGNED,
      }))}
+      presignToken={editorConfig?.embedded?.presignToken}
      overrideSettings={{
        mode: 'export',
      }}
    >
      <div className="relative flex h-full">
-        <div className="flex w-full flex-col overflow-y-auto">
+        <div className="flex h-full w-full flex-col overflow-y-auto px-2" ref={scrollableContainerRef}>
          {/* Horizontal envelope item selector */}
-          <EnvelopeRendererFileSelector fields={editorFields.localFields} />
+          <EnvelopeRendererFileSelector className="px-0" fields={editorFields.localFields} />
+
+          <Alert variant="warning" className="mx-auto max-w-[800px]">
+            <AlertTitle>
+              <Trans>Preview Mode</Trans>
+            </AlertTitle>
+            <AlertDescription>
+              <Trans>Preview what the signed document will look like with placeholder data</Trans>
+            </AlertDescription>
+          </Alert>

          {/* Document View */}
-          <div className="mt-4 flex flex-col items-center justify-center">
-            <Alert variant="warning" className="mb-4 max-w-[800px]">
-              <AlertTitle>
-                <Trans>Preview Mode</Trans>
-              </AlertTitle>
-              <AlertDescription>
-                <Trans>Preview what the signed document will look like with placeholder data</Trans>
-              </AlertDescription>
-            </Alert>
-
+          <div className="mt-4 flex h-full flex-col items-center justify-center">
            {currentEnvelopeItem !== null ? (
-              <PDFViewerKonvaLazy
-                renderer="editor"
+              <EnvelopePdfViewer
                customPageRenderer={EnvelopeGenericPageRenderer}
+                scrollParentRef={scrollableContainerRef}
+                errorMessage={PDF_VIEWER_ERROR_MESSAGES.preview}
              />
            ) : (
              <div className="flex flex-col items-center justify-center py-32">
                <FileTextIcon className="h-10 w-10 text-muted-foreground" />
-                <p className="mt-1 text-sm text-foreground">
+                <p className="mt-1 text-foreground text-sm">
                  <Trans>No documents found</Trans>
                </p>
-                <p className="mt-1 text-sm text-muted-foreground">
+                <p className="mt-1 text-muted-foreground text-sm">
                  <Trans>Please upload a document to continue</Trans>
                </p>
              </div>
@@ -248,7 +261,7 @@ export const EnvelopeEditorPreviewPage = () => {

        {/* Right Section - Form Fields Panel */}
        {currentEnvelopeItem && false && (
-          <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l border-gray-200 bg-white py-4">
+          <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-gray-200 border-l bg-white py-4">
            {/* Add fields section. */}
            <section className="px-4">
              {/* <h3 className="mb-2 text-sm font-semibold text-gray-900">
@@ -260,9 +273,7 @@ export const EnvelopeEditorPreviewPage = () => {
                  <Trans>Preview Mode</Trans>
                </AlertTitle>
                <AlertDescription>
-                  <Trans>
-                    Preview what the signed document will look like with placeholder data
-                  </Trans>
+                  <Trans>Preview what the signed document will look like with placeholder data</Trans>
                </AlertDescription>
              </Alert>

@@ -315,15 +326,13 @@ export const EnvelopeEditorPreviewPage = () => {

                    {/* Recipient selector section. */}
                    <section className="px-4">
-                      <h3 className="mb-2 text-sm font-semibold text-gray-900">
+                      <h3 className="mb-2 font-semibold text-gray-900 text-sm">
                        <Trans>Selected Recipient</Trans>
                      </h3>

                      <RecipientSelector
                        selectedRecipient={editorFields.selectedRecipient}
-                        onSelectedRecipientChange={(recipient) =>
-                          editorFields.setSelectedRecipient(recipient.id)
-                        }
+                        onSelectedRecipientChange={(recipient) => editorFields.setSelectedRecipient(recipient.id)}
                        recipients={envelope.recipients}
                        className="w-full"
                        align="end"
@@ -0,0 +1,28 @@
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
+
+export const EnvelopeEditorRenderProviderWrapper = ({
+  children,
+  token,
+  presignedToken,
+}: {
+  children: React.ReactNode;
+  token?: string;
+  presignedToken?: string;
+}) => {
+  const { envelope } = useCurrentEnvelopeEditor();
+
+  return (
+    <EnvelopeRenderProvider
+      version="current"
+      envelope={envelope}
+      envelopeItems={envelope.envelopeItems}
+      fields={envelope.fields}
+      recipients={envelope.recipients}
+      token={token}
+      presignToken={presignedToken}
+    >
+      {children}
+    </EnvelopeRenderProvider>
+  );
+};
@@ -1,7 +1,9 @@
-import { useEffect, useRef, useState } from 'react';
-
 import { ZDocumentTitleSchema } from '@documenso/trpc/server/document-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
+import { useEffect, useRef, useState } from 'react';
+
+const MIN_INPUT_WIDTH = 100;
+const INPUT_WIDTH_PADDING = 16;

 export type EnvelopeItemTitleInputProps = {
  value: string;
@@ -9,6 +11,7 @@ export type EnvelopeItemTitleInputProps = {
  className?: string;
  placeholder?: string;
  disabled?: boolean;
+  dataTestId?: string;
 };

 export const EnvelopeItemTitleInput = ({
@@ -17,6 +20,7 @@ export const EnvelopeItemTitleInput = ({
  className,
  placeholder,
  disabled,
+  dataTestId,
 }: EnvelopeItemTitleInputProps) => {
  const [envelopeItemTitle, setEnvelopeItemTitle] = useState(value);
  const [isError, setIsError] = useState(false);
@@ -25,11 +29,12 @@ export const EnvelopeItemTitleInput = ({
  const inputRef = useRef<HTMLInputElement>(null);
  const measureRef = useRef<HTMLSpanElement>(null);

-  // Update input width based on content
  useEffect(() => {
    if (measureRef.current) {
      const width = measureRef.current.offsetWidth;
-      setInputWidth(Math.max(width + 16, 100)); // Add padding and minimum width
+      const nextInputWidth = Math.max(width + INPUT_WIDTH_PADDING, MIN_INPUT_WIDTH);
+
+      setInputWidth(nextInputWidth);
    }
  }, [envelopeItemTitle]);

@@ -53,16 +58,17 @@ export const EnvelopeItemTitleInput = ({
  };

  return (
-    <div className="relative">
+    <div className="relative min-w-0 max-w-full shrink">
      {/* Hidden span to measure text width */}
      <span
        ref={measureRef}
-        className="pointer-events-none absolute left-0 top-0 whitespace-nowrap text-sm font-medium text-gray-600 opacity-0"
+        className="pointer-events-none absolute top-0 left-0 whitespace-nowrap font-medium text-gray-600 text-sm opacity-0"
        style={{ font: 'inherit' }}
      >
        {envelopeItemTitle || placeholder}
      </span>
      <input
+        data-testid={dataTestId}
        data-1p-ignore
        autoComplete="off"
        ref={inputRef}
@@ -70,9 +76,9 @@ export const EnvelopeItemTitleInput = ({
        value={envelopeItemTitle}
        onChange={(e) => handleTitleChange(e.target.value)}
        disabled={disabled}
-        style={{ width: `${inputWidth}px` }}
+        style={{ width: `${inputWidth}px`, maxWidth: '100%' }}
        className={cn(
-          'text-foreground hover:outline-muted-foreground focus:outline-muted-foreground rounded-sm border-0 bg-transparent p-1 text-sm font-medium outline-none hover:outline hover:outline-1 focus:outline focus:outline-1',
+          'max-w-full rounded-sm border-0 bg-transparent p-1 font-medium text-foreground text-sm outline-none hover:outline hover:outline-1 hover:outline-muted-foreground focus:outline focus:outline-1 focus:outline-muted-foreground',
          className,
          {
            'outline-red-500': isError,
@@ -1,36 +1,28 @@
-import { useMemo, useState } from 'react';
-
-import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
-import type { DropResult } from '@hello-pangea/dnd';
-import { msg, plural } from '@lingui/core/macro';
-import { Trans, useLingui } from '@lingui/react/macro';
-import { DocumentStatus } from '@prisma/client';
-import { FileWarningIcon, GripVerticalIcon, Loader2 } from 'lucide-react';
-import { X } from 'lucide-react';
-import { ErrorCode as DropzoneErrorCode, type FileRejection } from 'react-dropzone';
-import { Link } from 'react-router';
-
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
-import {
-  useCurrentEnvelopeEditor,
-  useDebounceFunction,
-} from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { useEnvelopeAutosave } from '@documenso/lib/client-only/hooks/use-envelope-autosave';
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import type { TEditorEnvelope } from '@documenso/lib/types/envelope-editor';
 import { nanoid } from '@documenso/lib/universal/id';
-import { canEnvelopeItemsBeModified } from '@documenso/lib/utils/envelope';
+import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
+import { PRESIGNED_ENVELOPE_ITEM_ID_PREFIX } from '@documenso/lib/utils/embed-config';
+import { getEnvelopeItemPermissions } from '@documenso/lib/utils/envelope';
 import { trpc } from '@documenso/trpc/react';
 import type { TCreateEnvelopeItemsPayload } from '@documenso/trpc/server/envelope-router/create-envelope-items.types';
+import type { TReplaceEnvelopeItemPdfPayload } from '@documenso/trpc/server/envelope-router/replace-envelope-item-pdf.types';
+import { buildDropzoneRejectionDescription } from '@documenso/ui/lib/handle-dropzone-rejection';
 import { Button } from '@documenso/ui/primitives/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@documenso/ui/primitives/card';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@documenso/ui/primitives/card';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
 import { useToast } from '@documenso/ui/primitives/use-toast';
+import type { DropResult } from '@hello-pangea/dnd';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import { msg, plural } from '@lingui/core/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { FileWarningIcon, GripVerticalIcon, Loader2Icon, PencilIcon, XIcon } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ErrorCode as DropzoneErrorCode, type FileRejection, useDropzone } from 'react-dropzone';

 import { EnvelopeItemDeleteDialog } from '~/components/dialogs/envelope-item-delete-dialog';

@@ -42,17 +34,30 @@ type LocalFile = {
  title: string;
  envelopeItemId: string | null;
  isUploading: boolean;
+  isReplacing: boolean;
  isError: boolean;
 };

 export const EnvelopeEditorUploadPage = () => {
  const organisation = useCurrentOrganisation();

-  const { t } = useLingui();
-  const { envelope, setLocalEnvelope, relativePath, editorFields } = useCurrentEnvelopeEditor();
+  const { t, i18n } = useLingui();
  const { maximumEnvelopeItemCount, remaining } = useLimits();
  const { toast } = useToast();

+  const {
+    envelope,
+    setLocalEnvelope,
+    editorFields,
+    editorConfig,
+    isEmbedded,
+    navigateToStep,
+    registerExternalFlush,
+    registerPendingMutation,
+  } = useCurrentEnvelopeEditor();
+
+  const { envelopeItems: uploadConfig } = editorConfig;
+
  const [localFiles, setLocalFiles] = useState<LocalFile[]>(
    envelope.envelopeItems
      .sort((a, b) => a.order - b.order)
@@ -61,10 +66,36 @@ export const EnvelopeEditorUploadPage = () => {
        title: item.title,
        envelopeItemId: item.id,
        isUploading: false,
+        isReplacing: false,
        isError: false,
      })),
  );

+  const replacingItemIdRef = useRef<string | null>(null);
+
+  const { open: openReplaceFilePicker, getInputProps: getReplaceInputProps } = useDropzone({
+    accept: { 'application/pdf': ['.pdf'] },
+    maxFiles: 1,
+    maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
+    multiple: false,
+    noClick: true,
+    noKeyboard: true,
+    noDrag: true,
+    onDrop: (acceptedFiles) => {
+      const file = acceptedFiles[0];
+      const replacingItemId = replacingItemIdRef.current;
+
+      if (file && replacingItemId) {
+        void onReplacePdf(replacingItemId, file);
+        replacingItemIdRef.current = null;
+      }
+    },
+    onDropRejected: (fileRejections) => void onFileDropRejected(fileRejections),
+    onFileDialogCancel: () => {
+      replacingItemIdRef.current = null;
+    },
+  });
+
  const { mutateAsync: createEnvelopeItems, isPending: isCreatingEnvelopeItems } =
    trpc.envelope.item.createMany.useMutation({
      onSuccess: ({ data }) => {
@@ -97,23 +128,71 @@ export const EnvelopeEditorUploadPage = () => {
    },
  });

-  const canItemsBeModified = useMemo(
-    () => canEnvelopeItemsBeModified(envelope, envelope.recipients),
+  const envelopeItemPermissions = useMemo(
+    () => getEnvelopeItemPermissions(envelope, envelope.recipients),
    [envelope, envelope.recipients],
  );

+  const { mutateAsync: replaceEnvelopeItemPdf } = trpc.envelope.item.replacePdf.useMutation({
+    onSuccess: ({ data, fields }) => {
+      // Update the envelope item with the new documentDataId.
+      setLocalEnvelope({
+        envelopeItems: envelope.envelopeItems.map((item) =>
+          item.id === data.id ? { ...item, documentDataId: data.documentDataId } : item,
+        ),
+      });
+
+      // When fields were created or deleted during the replacement,
+      // the server returns the full updated field list.
+      if (fields) {
+        setLocalEnvelope({ fields });
+        editorFields.resetForm(fields);
+      }
+    },
+  });
+
  const onFileDrop = async (files: File[]) => {
-    const newUploadingFiles: (LocalFile & { file: File })[] = files.map((file) => ({
-      id: nanoid(),
-      envelopeItemId: null,
-      title: file.name,
-      file,
-      isUploading: true,
-      isError: false,
-    }));
+    const newUploadingFiles: (LocalFile & {
+      file: File;
+      data: TEditorEnvelope['envelopeItems'][number]['data'] | null;
+    })[] = await Promise.all(
+      files.map(async (file) => {
+        return {
+          id: nanoid(),
+          envelopeItemId: isEmbedded ? `${PRESIGNED_ENVELOPE_ITEM_ID_PREFIX}${nanoid()}` : null,
+          title: file.name,
+          file,
+          isUploading: isEmbedded ? false : true,
+          isReplacing: false,
+          // Clone the buffer so it can be read multiple times (File.arrayBuffer() consumes the stream once)
+          data: isEmbedded ? new Uint8Array((await file.arrayBuffer()).slice(0)) : null,
+          isError: false,
+        };
+      }),
+    );

    setLocalFiles((prev) => [...prev, ...newUploadingFiles]);

+    // Directly commit the files for embedded documents since those are not uploaded
+    // until the end of the embedded flow.
+    if (isEmbedded) {
+      setLocalEnvelope({
+        envelopeItems: [
+          ...envelope.envelopeItems,
+          ...newUploadingFiles.map((file) => ({
+            id: file.envelopeItemId!,
+            title: file.title,
+            order: envelope.envelopeItems.length + 1,
+            envelopeId: envelope.id,
+            data: file.data!,
+            documentDataId: '',
+          })),
+        ],
+      });
+
+      return;
+    }
+
    const payload = {
      envelopeId: envelope.id,
    } satisfies TCreateEnvelopeItemsPayload;
@@ -126,7 +205,11 @@ export const EnvelopeEditorUploadPage = () => {
      formData.append('files', file);
    }

-    const { data } = await createEnvelopeItems(formData).catch((error) => {
+    const createPromise = createEnvelopeItems(formData);
+
+    registerPendingMutation(createPromise);
+
+    const { data } = await createPromise.catch((error) => {
      console.error(error);

      // Set error state on files in batch upload.
@@ -143,8 +226,7 @@ export const EnvelopeEditorUploadPage = () => {

    setLocalFiles((prev) => {
      const filteredFiles = prev.filter(
-        (uploadingFile) =>
-          uploadingFile.id !== newUploadingFiles.find((file) => file.id === uploadingFile.id)?.id,
+        (uploadingFile) => uploadingFile.id !== newUploadingFiles.find((file) => file.id === uploadingFile.id)?.id,
      );

      return filteredFiles.concat(
@@ -153,21 +235,80 @@ export const EnvelopeEditorUploadPage = () => {
          envelopeItemId: item.id,
          title: item.title,
          isUploading: false,
+          isReplacing: false,
          isError: false,
        })),
      );
    });
  };

+  const onReplacePdf = async (envelopeItemId: string, file: File) => {
+    setLocalFiles((prev) => prev.map((f) => (f.envelopeItemId === envelopeItemId ? { ...f, isReplacing: true } : f)));
+
+    try {
+      if (isEmbedded) {
+        // For embedded mode, store the file data locally on the envelope item.
+        // The actual replacement will happen when the embed flow submits.
+        const arrayBuffer = await file.arrayBuffer();
+        const data = new Uint8Array(arrayBuffer.slice(0));
+
+        // Count pages in the new PDF to remove out-of-bounds fields.
+        const { PDF } = await import('@libpdf/core');
+        const pdfDoc = await PDF.load(data);
+        const newPageCount = pdfDoc.getPageCount();
+
+        // Remove fields that are on pages beyond the new PDF's page count.
+        const remainingFields = envelope.fields.filter(
+          (field) => field.envelopeItemId !== envelopeItemId || field.page <= newPageCount,
+        );
+
+        setLocalEnvelope({
+          envelopeItems: envelope.envelopeItems.map((item) => (item.id === envelopeItemId ? { ...item, data } : item)),
+          fields: remainingFields,
+        });
+
+        editorFields.resetForm(remainingFields);
+
+        return;
+      }
+
+      // Normal mode: upload immediately via tRPC.
+      const payload = {
+        envelopeId: envelope.id,
+        envelopeItemId,
+      } satisfies TReplaceEnvelopeItemPdfPayload;
+
+      const formData = new FormData();
+      formData.append('payload', JSON.stringify(payload));
+      formData.append('file', file);
+
+      const replacePromise = replaceEnvelopeItemPdf(formData);
+      registerPendingMutation(replacePromise);
+
+      await replacePromise;
+    } catch (error) {
+      console.error(error);
+
+      toast({
+        title: t`Replace failed`,
+        description: t`Something went wrong while replacing the PDF`,
+        duration: 5000,
+        variant: 'destructive',
+      });
+    } finally {
+      setLocalFiles((prev) =>
+        prev.map((f) => (f.envelopeItemId === envelopeItemId ? { ...f, isReplacing: false } : f)),
+      );
+    }
+  };
+
  /**
   * Hide the envelope item from the list on deletion.
   */
  const onFileDelete = (envelopeItemId: string) => {
-    setLocalFiles((prev) => prev.filter((uploadingFile) => uploadingFile.id !== envelopeItemId));
+    setLocalFiles((prev) => prev.filter((uploadingFile) => uploadingFile.envelopeItemId !== envelopeItemId));

-    const fieldsWithoutDeletedItem = envelope.fields.filter(
-      (field) => field.envelopeItemId !== envelopeItemId,
-    );
+    const fieldsWithoutDeletedItem = envelope.fields.filter((field) => field.envelopeItemId !== envelopeItemId);

    setLocalEnvelope({
      envelopeItems: envelope.envelopeItems.filter((item) => item.id !== envelopeItemId),
@@ -194,18 +335,59 @@ export const EnvelopeEditorUploadPage = () => {
    debouncedUpdateEnvelopeItems(items);
  };

-  const debouncedUpdateEnvelopeItems = useDebounceFunction((files: LocalFile[]) => {
-    void updateEnvelopeItems({
-      envelopeId: envelope.id,
-      data: files
-        .filter((item) => item.envelopeItemId)
-        .map((item, index) => ({
-          envelopeItemId: item.envelopeItemId || '',
-          order: index + 1,
-          title: item.title,
-        })),
-    });
-  }, 1000);
+  const { triggerSave: debouncedUpdateEnvelopeItems, flush: flushUpdateEnvelopeItems } = useEnvelopeAutosave(
+    async (files: LocalFile[]) => {
+      if (isEmbedded) {
+        const nextEnvelopeItems = files
+          .filter((item) => item.envelopeItemId)
+          .map((item, index) => {
+            const originalEnvelopeItem = envelope.envelopeItems.find(
+              (envelopeItem) => envelopeItem.id === item.envelopeItemId,
+            );
+
+            return {
+              id: item.envelopeItemId || '',
+              title: item.title,
+              order: index + 1,
+              envelopeId: envelope.id,
+              data: originalEnvelopeItem?.data,
+              documentDataId: originalEnvelopeItem?.documentDataId || '',
+            };
+          });
+
+        setLocalEnvelope({
+          envelopeItems: nextEnvelopeItems,
+        });
+
+        return;
+      }
+
+      await updateEnvelopeItems({
+        envelopeId: envelope.id,
+        data: files
+          .filter((item) => item.envelopeItemId)
+          .map((item, index) => ({
+            envelopeItemId: item.envelopeItemId || '',
+            order: index + 1,
+            title: item.title,
+          })),
+      });
+    },
+    isEmbedded ? 0 : 1000,
+  );
+
+  const flushUpdateEnvelopeItemsRef = useRef(flushUpdateEnvelopeItems);
+  flushUpdateEnvelopeItemsRef.current = flushUpdateEnvelopeItems;
+
+  // Register the flush callback with the provider so flushAutosave can await
+  // pending envelope item mutations. We intentionally do NOT unregister on unmount
+  // because the upload page is unmounted (replaced with a spinner) before
+  // flushAutosave runs during step transitions. The hook's internal refs survive
+  // unmounting, so the flush callback remains valid.
+  useEffect(() => {
+    registerExternalFlush('envelopeItems', async () => flushUpdateEnvelopeItemsRef.current());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);

  const onEnvelopeItemTitleChange = (envelopeItemId: string, title: string) => {
    const newLocalFilesValue = localFiles.map((uploadingFile) =>
@@ -217,7 +399,7 @@ export const EnvelopeEditorUploadPage = () => {
  };

  const dropzoneDisabledMessage = useMemo(() => {
-    if (!canItemsBeModified) {
+    if (!envelopeItemPermissions.canFileBeChanged) {
      return msg`Cannot upload items after the document has been sent`;
    }

@@ -258,7 +440,7 @@ export const EnvelopeEditorUploadPage = () => {

    toast({
      title: t`Upload failed`,
-      description: t`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`,
+      description: i18n._(buildDropzoneRejectionDescription(fileRejections)),
      duration: 5000,
      variant: 'destructive',
    });
@@ -266,6 +448,7 @@ export const EnvelopeEditorUploadPage = () => {

  return (
    <div className="mx-auto max-w-4xl space-y-6 p-8">
+      <input {...getReplaceInputProps()} />
      <Card backdropBlur={false} className="border">
        <CardHeader className="pb-3">
          <CardTitle>
@@ -277,32 +460,46 @@ export const EnvelopeEditorUploadPage = () => {
        </CardHeader>

        <CardContent>
-          <DocumentDropzone
-            onDrop={onFileDrop}
-            allowMultiple
-            className="pb-4 pt-6"
-            disabled={dropzoneDisabledMessage !== null}
-            disabledMessage={dropzoneDisabledMessage || undefined}
-            disabledHeading={msg`Upload disabled`}
-            maxFiles={maximumEnvelopeItemCount - localFiles.length}
-            onDropRejected={onFileDropRejected}
-          />
+          {uploadConfig?.allowUpload && (
+            <DocumentDropzone
+              data-testid="envelope-item-dropzone"
+              onDrop={onFileDrop}
+              allowMultiple
+              className="pt-6 pb-4"
+              disabled={dropzoneDisabledMessage !== null}
+              disabledMessage={dropzoneDisabledMessage || undefined}
+              disabledHeading={msg`Upload disabled`}
+              maxFiles={maximumEnvelopeItemCount - localFiles.length}
+              onDropRejected={onFileDropRejected}
+            />
+          )}

          {/* Uploaded Files List */}
          <div className="mt-4">
            <DragDropContext onDragEnd={onDragEnd}>
              <Droppable droppableId="files">
                {(provided) => (
-                  <div {...provided.droppableProps} ref={provided.innerRef} className="space-y-2">
+                  <div
+                    data-testid="envelope-items-list"
+                    {...provided.droppableProps}
+                    ref={provided.innerRef}
+                    className="space-y-2"
+                  >
                    {localFiles.map((localFile, index) => (
                      <Draggable
                        key={localFile.id}
-                        isDragDisabled={isCreatingEnvelopeItems || !canItemsBeModified}
+                        isDragDisabled={
+                          isCreatingEnvelopeItems ||
+                          !envelopeItemPermissions.canOrderBeChanged ||
+                          localFile.isReplacing ||
+                          !uploadConfig?.allowConfigureOrder
+                        }
                        draggableId={localFile.id}
                        index={index}
                      >
                        {(provided, snapshot) => (
                          <div
+                            data-testid={`envelope-item-row-${localFile.id}`}
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            style={provided.draggableProps.style}
@@ -310,42 +507,49 @@ export const EnvelopeEditorUploadPage = () => {
                              snapshot.isDragging ? 'shadow-md' : ''
                            }`}
                          >
-                            <div className="flex items-center space-x-3">
-                              <div
-                                {...provided.dragHandleProps}
-                                className="cursor-grab active:cursor-grabbing"
-                              >
-                                <GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
-                              </div>
+                            <div className="flex min-w-0 items-center space-x-3">
+                              {uploadConfig?.allowConfigureOrder && (
+                                <div
+                                  {...provided.dragHandleProps}
+                                  data-testid={`envelope-item-drag-handle-${localFile.id}`}
+                                  className="cursor-grab active:cursor-grabbing"
+                                >
+                                  <GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
+                                </div>
+                              )}

-                              <div>
+                              <div className="min-w-0">
                                {localFile.envelopeItemId !== null ? (
                                  <EnvelopeItemTitleInput
-                                    disabled={envelope.status !== DocumentStatus.DRAFT}
+                                    disabled={
+                                      !envelopeItemPermissions.canTitleBeChanged ||
+                                      !uploadConfig?.allowConfigureTitle ||
+                                      localFile.isReplacing
+                                    }
                                    value={localFile.title}
+                                    dataTestId={`envelope-item-title-input-${localFile.id}`}
                                    placeholder={t`Document Title`}
                                    onChange={(title) => {
                                      onEnvelopeItemTitleChange(localFile.envelopeItemId!, title);
                                    }}
                                  />
                                ) : (
-                                  <p className="text-sm font-medium">{localFile.title}</p>
+                                  <p className="font-medium text-sm">{localFile.title}</p>
                                )}

-                                <div className="text-xs text-muted-foreground">
+                                <div className="text-muted-foreground text-xs">
                                  {localFile.isUploading ? (
                                    <Trans>Uploading</Trans>
                                  ) : localFile.isError ? (
                                    <Trans>Something went wrong while uploading this file</Trans>
-                                  ) : // <div className="text-xs text-gray-500">2.4 MB • 3 pages</div>
-                                  null}
+                                  ) : null}
                                </div>
                              </div>
                            </div>
-                            <div className="flex items-center space-x-2">
+                            <div className="flex shrink-0 items-center space-x-2">
                              {localFile.isUploading && (
                                <div className="flex h-6 w-10 items-center justify-center">
-                                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                                  <Loader2Icon className="h-4 w-4 animate-spin text-muted-foreground" />
                                </div>
                              )}

@@ -355,20 +559,58 @@ export const EnvelopeEditorUploadPage = () => {
                                </div>
                              )}

-                              {!localFile.isUploading && localFile.envelopeItemId && (
-                                <EnvelopeItemDeleteDialog
-                                  canItemBeDeleted={canItemsBeModified}
-                                  envelopeId={envelope.id}
-                                  envelopeItemId={localFile.envelopeItemId}
-                                  envelopeItemTitle={localFile.title}
-                                  onDelete={onFileDelete}
-                                  trigger={
-                                    <Button variant="ghost" size="sm">
-                                      <X className="h-4 w-4" />
-                                    </Button>
-                                  }
-                                />
-                              )}
+                              {localFile.envelopeItemId &&
+                                envelopeItemPermissions.canFileBeChanged &&
+                                uploadConfig?.allowReplace && (
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    data-testid={`envelope-item-replace-button-${localFile.id}`}
+                                    disabled={localFile.isReplacing || localFile.isUploading}
+                                    onClick={() => {
+                                      replacingItemIdRef.current = localFile.envelopeItemId;
+                                      openReplaceFilePicker();
+                                    }}
+                                  >
+                                    {localFile.isReplacing ? (
+                                      <Loader2Icon className="h-4 w-4 animate-spin text-muted-foreground" />
+                                    ) : (
+                                      <PencilIcon className="h-4 w-4" />
+                                    )}
+                                  </Button>
+                                )}
+
+                              {localFile.envelopeItemId &&
+                                uploadConfig?.allowDelete &&
+                                (isEmbedded ? (
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    data-testid={`envelope-item-remove-button-${localFile.id}`}
+                                    onClick={() => onFileDelete(localFile.envelopeItemId!)}
+                                    disabled={localFile.isReplacing || localFile.isUploading}
+                                  >
+                                    <XIcon className="h-4 w-4" />
+                                  </Button>
+                                ) : (
+                                  <EnvelopeItemDeleteDialog
+                                    canItemBeDeleted={envelopeItemPermissions.canFileBeChanged}
+                                    envelopeId={envelope.id}
+                                    envelopeItemId={localFile.envelopeItemId}
+                                    envelopeItemTitle={localFile.title}
+                                    onDelete={onFileDelete}
+                                    trigger={
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        data-testid={`envelope-item-remove-button-${localFile.id}`}
+                                        disabled={localFile.isReplacing || localFile.isUploading}
+                                      >
+                                        <XIcon className="h-4 w-4" />
+                                      </Button>
+                                    }
+                                  />
+                                ))}
                            </div>
                          </div>
                        )}
@@ -386,13 +628,13 @@ export const EnvelopeEditorUploadPage = () => {
      {/* Recipients Section */}
      <EnvelopeEditorRecipientForm />

-      <div className="flex justify-end">
-        <Button asChild>
-          <Link to={`${relativePath.editorPath}?step=addFields`}>
+      {editorConfig.general.allowAddFieldsStep && (
+        <div className="flex justify-end">
+          <Button type="button" onClick={() => void navigateToStep('addFields')}>
            <Trans>Add Fields</Trans>
-          </Link>
-        </Button>
-      </div>
+          </Button>
+        </div>
+      )}
    </div>
  );
 };
@@ -1,40 +1,39 @@
-import { useEffect, useState } from 'react';
-
+import type { EnvelopeEditorStep } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Separator } from '@documenso/ui/primitives/separator';
+import { SpinnerBox } from '@documenso/ui/primitives/spinner';
+import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
+import { EnvelopeType } from '@prisma/client';
 import { motion } from 'framer-motion';
 import {
  ArrowLeftIcon,
  CopyPlusIcon,
  DownloadCloudIcon,
  EyeIcon,
+  FileOutputIcon,
  LinkIcon,
-  MousePointer,
+  type LucideIcon,
+  MousePointerIcon,
  SendIcon,
  SettingsIcon,
  Trash2Icon,
-  Upload,
+  UploadIcon,
 } from 'lucide-react';
-import { useNavigate, useSearchParams } from 'react-router';
-import { Link } from 'react-router';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Link, useNavigate, useSearchParams } from 'react-router';
 import { match } from 'ts-pattern';

-import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import {
-  mapSecondaryIdToDocumentId,
-  mapSecondaryIdToTemplateId,
-} from '@documenso/lib/utils/envelope';
-import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
-import { Button } from '@documenso/ui/primitives/button';
-import { Separator } from '@documenso/ui/primitives/separator';
-import { SpinnerBox } from '@documenso/ui/primitives/spinner';
-
-import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
+import { EnvelopeDeleteDialog } from '~/components/dialogs/envelope-delete-dialog';
 import { EnvelopeDistributeDialog } from '~/components/dialogs/envelope-distribute-dialog';
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 import { EnvelopeDuplicateDialog } from '~/components/dialogs/envelope-duplicate-dialog';
 import { EnvelopeRedistributeDialog } from '~/components/dialogs/envelope-redistribute-dialog';
-import { TemplateDeleteDialog } from '~/components/dialogs/template-delete-dialog';
+import { EnvelopeSaveAsTemplateDialog } from '~/components/dialogs/envelope-save-as-template-dialog';
 import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
 import { EnvelopeEditorSettingsDialog } from '~/components/general/envelope-editor/envelope-editor-settings-dialog';

@@ -43,52 +42,88 @@ import EnvelopeEditorHeader from './envelope-editor-header';
 import { EnvelopeEditorPreviewPage } from './envelope-editor-preview-page';
 import { EnvelopeEditorUploadPage } from './envelope-editor-upload-page';

-type EnvelopeEditorStep = 'upload' | 'addFields' | 'preview';
+type EnvelopeEditorStepData = {
+  id: string;
+  title: MessageDescriptor;
+  icon: LucideIcon;
+  description: MessageDescriptor;
+};

-const envelopeEditorSteps = [
-  {
-    id: 'upload',
-    order: 1,
-    title: msg`Document & Recipients`,
-    icon: Upload,
-    description: msg`Upload documents and add recipients`,
-  },
-  {
-    id: 'addFields',
-    order: 2,
-    title: msg`Add Fields`,
-    icon: MousePointer,
-    description: msg`Place and configure form fields in the document`,
-  },
-  {
-    id: 'preview',
-    order: 3,
-    title: msg`Preview`,
-    icon: EyeIcon,
-    description: msg`Preview the document before sending`,
-  },
-];
+const UPLOAD_STEP = {
+  id: 'upload',
+  title: msg`Document & Recipients`,
+  icon: UploadIcon,
+  description: msg`Upload documents and add recipients`,
+};

-export default function EnvelopeEditor() {
+const ADD_FIELDS_STEP = {
+  id: 'addFields',
+  title: msg`Add Fields`,
+  icon: MousePointerIcon,
+  description: msg`Place and configure form fields in the document`,
+};
+
+const PREVIEW_STEP = {
+  id: 'preview',
+  title: msg`Preview`,
+  icon: EyeIcon,
+  description: msg`Preview the document before sending`,
+};
+
+export const EnvelopeEditor = () => {
  const { t } = useLingui();

  const navigate = useNavigate();

  const {
    envelope,
+    editorConfig,
    isDocument,
    isTemplate,
-    isAutosaving,
-    flushAutosave,
    relativePath,
+    navigateToStep,
    syncEnvelope,
+    flushAutosave,
+    resetForms,
  } = useCurrentEnvelopeEditor();

  const [searchParams, setSearchParams] = useSearchParams();
-  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [isStepLoading, setIsStepLoading] = useState(false);

-  const [currentStep, setCurrentStep] = useState<EnvelopeEditorStep>(() => {
+  const {
+    general: { minimizeLeftSidebar, allowUploadAndRecipientStep, allowAddFieldsStep, allowPreviewStep },
+    actions: {
+      allowDistributing,
+      allowDirectLink,
+      allowDuplication,
+      allowSaveAsTemplate,
+      allowDownloadPDF,
+      allowDeletion,
+    },
+  } = editorConfig;
+
+  const envelopeEditorSteps = useMemo(() => {
+    const steps: EnvelopeEditorStepData[] = [];
+
+    if (allowUploadAndRecipientStep) {
+      steps.push(UPLOAD_STEP);
+    }
+
+    if (allowAddFieldsStep) {
+      steps.push(ADD_FIELDS_STEP);
+    }
+
+    if (allowPreviewStep) {
+      steps.push(PREVIEW_STEP);
+    }
+
+    return steps.map((step, index) => ({
+      ...step,
+      order: index + 1,
+    }));
+  }, [editorConfig]);
+
+  const searchParamsStep = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
    const searchParamStep = searchParams.get('step') as EnvelopeEditorStep | undefined;

    // Empty URL param equals upload, otherwise use the step URL param
@@ -103,31 +138,26 @@ export default function EnvelopeEditor() {
    }

    return 'upload';
-  });
+  }, [searchParams]);

-  const navigateToStep = (step: EnvelopeEditorStep) => {
-    setCurrentStep(step);
+  const [pageToRender, setPageToRender] = useState<EnvelopeEditorStep | 'loading'>(searchParamsStep);

-    void flushAutosave();
+  const latestStepChangeTime = useRef(0);

-    if (!isStepLoading && isAutosaving) {
-      setIsStepLoading(true);
-    }
+  const handleStepChange = async (step: EnvelopeEditorStep) => {
+    setPageToRender('loading');

-    // Update URL params: empty for upload, otherwise set the step
-    if (step === 'upload') {
-      setSearchParams((prev) => {
-        const newParams = new URLSearchParams(prev);
-        newParams.delete('step');
-        return newParams;
-      });
-    } else {
-      setSearchParams((prev) => {
-        const newParams = new URLSearchParams(prev);
-        newParams.set('step', step);
-        return newParams;
-      });
-    }
+    const currentTime = Date.now();
+    latestStepChangeTime.current = currentTime;
+
+    await flushAutosave().then(() => {
+      if (currentTime !== latestStepChangeTime.current) {
+        return;
+      }
+
+      resetForms();
+      setPageToRender(step);
+    });
  };

  // Watch the URL params and setStep if the step changes.
@@ -136,82 +166,134 @@ export default function EnvelopeEditor() {

    const foundStep = envelopeEditorSteps.find((step) => step.id === stepParam);

-    if (foundStep && foundStep.id !== currentStep) {
+    if (foundStep && foundStep.id !== pageToRender) {
      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      navigateToStep(foundStep.id as EnvelopeEditorStep);
+      void handleStepChange(foundStep.id as EnvelopeEditorStep);
    }
  }, [searchParams]);

-  useEffect(() => {
-    if (!isAutosaving) {
-      setIsStepLoading(false);
-    }
-  }, [isAutosaving]);
-
-  const currentStepData =
-    envelopeEditorSteps.find((step) => step.id === currentStep) || envelopeEditorSteps[0];
+  const currentStepData = envelopeEditorSteps.find((step) => step.id === searchParamsStep) || envelopeEditorSteps[0];

  return (
-    <div className="h-screen w-screen bg-gray-50 dark:bg-background">
+    <div className="h-screen w-screen bg-envelope-editor-background">
      <EnvelopeEditorHeader />

      {/* Main Content Area */}
      <div className="flex h-[calc(100vh-4rem)] w-screen">
        {/* Left Section - Step Navigation */}
-        <div className="flex w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-border bg-background py-4">
+        <div
+          className={cn('flex w-80 flex-shrink-0 flex-col overflow-y-auto border-border border-r bg-background py-4', {
+            'w-14': minimizeLeftSidebar,
+          })}
+        >
          {/* Left section step selector. */}
-          <div className="px-4">
-            <h3 className="flex items-end justify-between text-sm font-semibold text-foreground">
-              {isDocument ? <Trans>Document Editor</Trans> : <Trans>Template Editor</Trans>}
-
-              <span className="ml-2 rounded border bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground">
-                <Trans context="The step counter">
-                  Step {currentStepData.order}/{envelopeEditorSteps.length}
-                </Trans>
-              </span>
-            </h3>
-
-            <div className="relative my-4 h-[4px] rounded-md bg-muted">
-              <motion.div
-                layout="size"
-                layoutId="document-flow-container-step"
-                className="absolute inset-y-0 left-0 bg-primary"
-                style={{
-                  width: `${(100 / envelopeEditorSteps.length) * (currentStepData.order ?? 0)}%`,
-                }}
-              />
+          {minimizeLeftSidebar ? (
+            <div className="flex justify-center px-4">
+              <div className="relative flex h-10 w-10 items-center justify-center">
+                <svg className="size-10 -rotate-90" viewBox="0 0 40 40" aria-hidden>
+                  {/* Track circle */}
+                  <circle
+                    cx="20"
+                    cy="20"
+                    r="16"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="3"
+                    className="text-muted"
+                  />
+                  {/* Progress arc */}
+                  <motion.circle
+                    cx="20"
+                    cy="20"
+                    r="16"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="3"
+                    strokeLinecap="round"
+                    className="text-primary"
+                    strokeDasharray={2 * Math.PI * 16}
+                    initial={false}
+                    animate={{
+                      strokeDashoffset:
+                        2 * Math.PI * 16 * (1 - (currentStepData.order ?? 0) / envelopeEditorSteps.length),
+                    }}
+                    transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+                  />
+                </svg>
+                <span className="absolute inset-0 flex items-center justify-center font-semibold text-[10px] text-foreground">
+                  <Trans context="The step counter">
+                    {currentStepData.order}/{envelopeEditorSteps.length}
+                  </Trans>
+                </span>
+              </div>
            </div>
+          ) : (
+            <div className="px-4">
+              <h3 className="flex items-end justify-between font-semibold text-foreground text-sm">
+                {isDocument ? <Trans>Document Editor</Trans> : <Trans>Template Editor</Trans>}

-            <div className="space-y-3">
-              {envelopeEditorSteps.map((step) => {
-                const Icon = step.icon;
-                const isActive = currentStep === step.id;
+                <span className="ml-2 rounded border bg-muted/50 px-2 py-0.5 text-muted-foreground text-xs">
+                  <Trans context="The step counter">
+                    Step {currentStepData.order}/{envelopeEditorSteps.length}
+                  </Trans>
+                </span>
+              </h3>

-                return (
-                  <div
-                    key={step.id}
-                    className={`cursor-pointer rounded-lg p-3 transition-colors ${
+              <div className="relative my-4 h-[4px] rounded-md bg-muted">
+                <motion.div
+                  layout="size"
+                  layoutId="document-flow-container-step"
+                  className="absolute inset-y-0 left-0 bg-primary"
+                  style={{
+                    width: `${(100 / envelopeEditorSteps.length) * (currentStepData.order ?? 0)}%`,
+                  }}
+                />
+              </div>
+            </div>
+          )}
+
+          <div
+            className={cn('space-y-3', {
+              'px-4': !minimizeLeftSidebar,
+              'mt-4 flex flex-col items-center': minimizeLeftSidebar,
+            })}
+          >
+            {envelopeEditorSteps.map((step) => {
+              const Icon = step.icon;
+              const isActive = searchParamsStep === step.id;
+
+              return (
+                <button
+                  key={step.id}
+                  data-testid={`envelope-editor-step-${step.id}`}
+                  type="button"
+                  className={cn(
+                    `cursor-pointer rounded-lg text-left transition-colors ${
                      isActive
                        ? 'border border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10'
                        : 'border border-gray-200 hover:bg-gray-50 dark:border-gray-400/20 dark:hover:bg-gray-400/10'
-                    }`}
-                    onClick={() => navigateToStep(step.id as EnvelopeEditorStep)}
-                  >
-                    <div className="flex items-center space-x-3">
-                      <div
-                        className={`rounded border p-2 ${
-                          isActive
-                            ? 'border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10'
-                            : 'border-gray-100 bg-gray-100 dark:border-gray-400/20 dark:bg-gray-400/10'
-                        }`}
-                      >
-                        <Icon
-                          className={`h-4 w-4 ${isActive ? 'text-green-600' : 'text-gray-600'}`}
-                        />
-                      </div>
+                    }`,
+                    {
+                      'p-3': !minimizeLeftSidebar,
+                    },
+                  )}
+                  onClick={() => void navigateToStep(step.id as EnvelopeEditorStep)}
+                >
+                  <div className="flex items-center space-x-3">
+                    <div
+                      className={`rounded border p-2 ${
+                        isActive
+                          ? 'border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10'
+                          : 'border-gray-100 bg-gray-100 dark:border-gray-400/20 dark:bg-gray-400/10'
+                      }`}
+                    >
+                      <Icon className={`h-4 w-4 ${isActive ? 'text-green-600' : 'text-gray-600'}`} />
+                    </div>
+
+                    {!minimizeLeftSidebar && (
                      <div>
                        <div
-                          className={`text-sm font-medium ${
+                          className={`font-medium text-sm ${
                            isActive
                              ? 'text-green-900 dark:text-green-400'
                              : 'text-foreground dark:text-muted-foreground'
@@ -219,61 +301,84 @@ export default function EnvelopeEditor() {
                        >
                          {t(step.title)}
                        </div>
-                        <div className="text-xs text-muted-foreground">{t(step.description)}</div>
+                        <div className="text-muted-foreground text-xs">{t(step.description)}</div>
                      </div>
-                    </div>
+                    )}
                  </div>
-                );
-              })}
-            </div>
+                </button>
+              );
+            })}
          </div>

-          <Separator className="my-6" />
+          <Separator
+            className={cn('my-6', {
+              'mx-auto mb-4 w-4/5': minimizeLeftSidebar,
+            })}
+          />

          {/* Quick Actions. */}
-          <div className="space-y-3 px-4">
-            <h4 className="text-sm font-semibold text-foreground">
-              <Trans>Quick Actions</Trans>
-            </h4>
-            <EnvelopeEditorSettingsDialog
-              trigger={
-                <Button variant="ghost" size="sm" className="w-full justify-start">
-                  <SettingsIcon className="mr-2 h-4 w-4" />
-                  {isDocument ? <Trans>Document Settings</Trans> : <Trans>Template Settings</Trans>}
-                </Button>
-              }
-            />
+          <div
+            className={cn('space-y-3 px-4 [&_.lucide]:text-muted-foreground', {
+              'px-2': minimizeLeftSidebar,
+            })}
+          >
+            {!minimizeLeftSidebar && (
+              <h4 className="font-semibold text-foreground text-sm">
+                <Trans>Quick Actions</Trans>
+              </h4>
+            )}

-            {isDocument && (
-              <EnvelopeDistributeDialog
-                documentRootPath={relativePath.documentRootPath}
+            {editorConfig.settings && (
+              <EnvelopeEditorSettingsDialog
                trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start">
-                    <SendIcon className="mr-2 h-4 w-4" />
-                    <Trans>Send Document</Trans>
+                  <Button variant="ghost" size="sm" className="w-full justify-start" title={t(msg`Settings`)}>
+                    <SettingsIcon className="h-4 w-4" />
+
+                    {!minimizeLeftSidebar && (
+                      <span className="ml-2">
+                        {isDocument ? <Trans>Document Settings</Trans> : <Trans>Template Settings</Trans>}
+                      </span>
+                    )}
                  </Button>
                }
              />
            )}

-            {isDocument && (
-              <EnvelopeRedistributeDialog
-                envelope={envelope}
-                trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start">
-                    <SendIcon className="mr-2 h-4 w-4" />
-                    <Trans>Resend Document</Trans>
-                  </Button>
-                }
-              />
+            {isDocument && allowDistributing && (
+              <>
+                <EnvelopeDistributeDialog
+                  documentRootPath={relativePath.documentRootPath}
+                  trigger={
+                    <Button variant="ghost" size="sm" className="w-full justify-start" title={t(msg`Send Envelope`)}>
+                      <SendIcon className="h-4 w-4" />
+
+                      {!minimizeLeftSidebar && (
+                        <span className="ml-2">
+                          <Trans>Send Document</Trans>
+                        </span>
+                      )}
+                    </Button>
+                  }
+                />
+
+                <EnvelopeRedistributeDialog
+                  envelope={envelope}
+                  trigger={
+                    <Button variant="ghost" size="sm" className="w-full justify-start" title={t(msg`Resend Envelope`)}>
+                      <SendIcon className="h-4 w-4" />
+
+                      {!minimizeLeftSidebar && (
+                        <span className="ml-2">
+                          <Trans>Resend Document</Trans>
+                        </span>
+                      )}
+                    </Button>
+                  }
+                />
+              </>
            )}

-            {/* <Button variant="ghost" size="sm" className="w-full justify-start">
-              <FileText className="mr-2 h-4 w-4" />
-              Save as Template
-            </Button> */}
-
-            {isTemplate && (
+            {isTemplate && allowDirectLink && (
              <TemplateDirectLinkDialog
                templateId={mapSecondaryIdToTemplateId(envelope.secondaryId)}
                directLink={envelope.directLink}
@@ -281,100 +386,153 @@ export default function EnvelopeEditor() {
                onCreateSuccess={async () => await syncEnvelope()}
                onDeleteSuccess={async () => await syncEnvelope()}
                trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start">
-                    <LinkIcon className="mr-2 h-4 w-4" />
-                    <Trans>Direct Link</Trans>
+                  <Button variant="ghost" size="sm" className="w-full justify-start" title={t(msg`Direct Link`)}>
+                    <LinkIcon className="h-4 w-4" />
+
+                    {!minimizeLeftSidebar && (
+                      <span className="ml-2">
+                        <Trans>Direct Link</Trans>
+                      </span>
+                    )}
                  </Button>
                }
              />
            )}

-            <EnvelopeDuplicateDialog
-              envelopeId={envelope.id}
-              envelopeType={envelope.type}
-              trigger={
-                <Button variant="ghost" size="sm" className="w-full justify-start">
-                  <CopyPlusIcon className="mr-2 h-4 w-4" />
-                  {isDocument ? (
-                    <Trans>Duplicate Document</Trans>
-                  ) : (
-                    <Trans>Duplicate Template</Trans>
-                  )}
-                </Button>
-              }
-            />
+            {allowDuplication && (
+              <EnvelopeDuplicateDialog
+                envelopeId={envelope.id}
+                envelopeType={envelope.type}
+                trigger={
+                  <Button variant="ghost" size="sm" className="w-full justify-start" title={t(msg`Duplicate Envelope`)}>
+                    <CopyPlusIcon className="h-4 w-4" />

-            <EnvelopeDownloadDialog
-              envelopeId={envelope.id}
-              envelopeStatus={envelope.status}
-              envelopeItems={envelope.envelopeItems}
-              trigger={
-                <Button variant="ghost" size="sm" className="w-full justify-start">
-                  <DownloadCloudIcon className="mr-2 h-4 w-4" />
-                  <Trans>Download PDF</Trans>
-                </Button>
-              }
-            />
+                    {!minimizeLeftSidebar && (
+                      <span className="ml-2">
+                        {isDocument ? <Trans>Duplicate Document</Trans> : <Trans>Duplicate Template</Trans>}
+                      </span>
+                    )}
+                  </Button>
+                }
+              />
+            )}

-            <Button
-              variant="ghost"
-              size="sm"
-              className="w-full justify-start"
-              onClick={() => setDeleteDialogOpen(true)}
-            >
-              <Trash2Icon className="mr-2 h-4 w-4" />
-              {isDocument ? <Trans>Delete Document</Trans> : <Trans>Delete Template</Trans>}
-            </Button>
+            {allowSaveAsTemplate && isDocument && (
+              <EnvelopeSaveAsTemplateDialog
+                envelopeId={envelope.id}
+                trigger={
+                  <Button variant="ghost" size="sm" className="w-full justify-start" title={t(msg`Save as Template`)}>
+                    <FileOutputIcon className="h-4 w-4" />
+
+                    {!minimizeLeftSidebar && (
+                      <span className="ml-2">
+                        <Trans>Save as Template</Trans>
+                      </span>
+                    )}
+                  </Button>
+                }
+              />
+            )}
+
+            {allowDownloadPDF && (
+              <EnvelopeDownloadDialog
+                envelopeId={envelope.id}
+                envelopeStatus={envelope.status}
+                isLegacy={envelope.internalVersion === 1}
+                envelopeItems={envelope.envelopeItems}
+                trigger={
+                  <Button variant="ghost" size="sm" className="w-full justify-start" title={t(msg`Download PDF`)}>
+                    <DownloadCloudIcon className="h-4 w-4" />
+
+                    {!minimizeLeftSidebar && (
+                      <span className="ml-2">
+                        <Trans>Download PDF</Trans>
+                      </span>
+                    )}
+                  </Button>
+                }
+              />
+            )}
+
+            {/* Check envelope ID since it can be in embedded create mode. */}
+            {allowDeletion && envelope.id && (
+              <EnvelopeDeleteDialog
+                id={envelope.id}
+                type={envelope.type}
+                status={envelope.status}
+                title={envelope.title}
+                canManageDocument={true}
+                trigger={
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start"
+                    title={t(msg`Delete Envelope`)}
+                  >
+                    <Trash2Icon className="h-4 w-4" />
+
+                    {!minimizeLeftSidebar && (
+                      <span className="ml-2">
+                        {isDocument ? <Trans>Delete Document</Trans> : <Trans>Delete Template</Trans>}
+                      </span>
+                    )}
+                  </Button>
+                }
+                onDelete={async () => {
+                  await navigate(
+                    envelope.type === EnvelopeType.DOCUMENT
+                      ? relativePath.documentRootPath
+                      : relativePath.templateRootPath,
+                  );
+                }}
+              />
+            )}
          </div>

-          {isDocument ? (
-            <DocumentDeleteDialog
-              id={mapSecondaryIdToDocumentId(envelope.secondaryId)}
-              status={envelope.status}
-              documentTitle={envelope.title}
-              canManageDocument={true}
-              open={isDeleteDialogOpen}
-              onOpenChange={setDeleteDialogOpen}
-              onDelete={async () => {
-                await navigate(relativePath.documentRootPath);
-              }}
-            />
-          ) : (
-            <TemplateDeleteDialog
-              id={mapSecondaryIdToTemplateId(envelope.secondaryId)}
-              open={isDeleteDialogOpen}
-              onOpenChange={setDeleteDialogOpen}
-              onDelete={async () => {
-                await navigate(relativePath.templateRootPath);
-              }}
-            />
-          )}
-
          {/* Footer of left sidebar. */}
-          <div className="mt-auto px-4">
-            <Button variant="ghost" className="w-full justify-start" asChild>
-              <Link to={relativePath.basePath}>
-                <ArrowLeftIcon className="mr-2 h-4 w-4" />
-                {isDocument ? (
-                  <Trans>Return to documents</Trans>
-                ) : (
-                  <Trans>Return to templates</Trans>
-                )}
-              </Link>
-            </Button>
-          </div>
+          {!editorConfig.embedded && (
+            <div
+              className={cn('mt-auto px-4', {
+                'px-2': minimizeLeftSidebar,
+              })}
+            >
+              <Button
+                variant="ghost"
+                className={cn('w-full justify-start', {
+                  'flex items-center justify-center': minimizeLeftSidebar,
+                })}
+                asChild
+              >
+                <Link to={relativePath.basePath}>
+                  <ArrowLeftIcon className="h-4 w-4 flex-shrink-0" />
+
+                  {!minimizeLeftSidebar && (
+                    <span className="ml-2">
+                      {isDocument ? <Trans>Return to documents</Trans> : <Trans>Return to templates</Trans>}
+                    </span>
+                  )}
+                </Link>
+              </Button>
+            </div>
+          )}
        </div>

        {/* Main Content - Changes based on current step */}
-        <AnimateGenericFadeInOut className="flex-1 overflow-y-auto" key={currentStep}>
-          {match({ currentStep, isStepLoading })
-            .with({ isStepLoading: true }, () => <SpinnerBox className="py-32" />)
-            .with({ currentStep: 'upload' }, () => <EnvelopeEditorUploadPage />)
-            .with({ currentStep: 'addFields' }, () => <EnvelopeEditorFieldsPage />)
-            .with({ currentStep: 'preview' }, () => <EnvelopeEditorPreviewPage />)
-            .exhaustive()}
-        </AnimateGenericFadeInOut>
+        <div className="flex-1 overflow-y-auto">
+          {match({
+            pageToRender,
+            allowUploadAndRecipientStep,
+            allowAddFieldsStep,
+            allowPreviewStep,
+          })
+            .with({ pageToRender: 'loading' }, () => <SpinnerBox className="py-32" />)
+            .with({ pageToRender: 'upload', allowUploadAndRecipientStep: true }, () => <EnvelopeEditorUploadPage />)
+            .with({ pageToRender: 'addFields', allowAddFieldsStep: true }, () => <EnvelopeEditorFieldsPage />)
+            .with({ pageToRender: 'preview', allowPreviewStep: true }, () => <EnvelopeEditorPreviewPage />)
+            .otherwise(() => null)}
+        </div>
      </div>
    </div>
  );
-}
+};
@@ -1,7 +1,6 @@
-import { Plural } from '@lingui/react/macro';
-
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { cn } from '@documenso/ui/lib/utils';
+import { Plural } from '@lingui/react/macro';

 type EnvelopeItemSelectorProps = {
  number: number;
@@ -9,6 +8,7 @@ type EnvelopeItemSelectorProps = {
  secondaryText: React.ReactNode;
  isSelected: boolean;
  buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
+  actionSlot?: React.ReactNode;
 };

 export const EnvelopeItemSelector = ({
@@ -17,11 +17,12 @@ export const EnvelopeItemSelector = ({
  secondaryText,
  isSelected,
  buttonProps,
+  actionSlot,
 }: EnvelopeItemSelectorProps) => {
  return (
    <button
      title={typeof primaryText === 'string' ? primaryText : undefined}
-      className={`flex h-fit max-w-72 flex-shrink-0 cursor-pointer items-center space-x-3 rounded-lg border px-4 py-3 transition-colors ${
+      className={`group flex h-fit max-w-72 flex-shrink-0 cursor-pointer items-center space-x-3 rounded-lg border px-4 py-3 transition-colors ${
        isSelected
          ? 'border-green-200 bg-green-50 text-green-900 dark:border-green-400/30 dark:bg-green-400/10 dark:text-green-400'
          : 'border-border bg-muted/50 hover:bg-muted/70'
@@ -29,21 +30,23 @@ export const EnvelopeItemSelector = ({
      {...buttonProps}
    >
      <div
-        className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full text-xs font-medium ${
+        className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full font-medium text-xs ${
          isSelected ? 'bg-green-100 text-green-600' : 'bg-gray-200 text-gray-600'
        }`}
      >
        {number}
      </div>
      <div className="min-w-0 text-left">
-        <div className="truncate text-sm font-medium">{primaryText}</div>
-        <div className="text-xs text-gray-500">{secondaryText}</div>
+        <div className="truncate font-medium text-sm">{primaryText}</div>
+        <div className="text-gray-500 text-xs">{secondaryText}</div>
      </div>
-      <div
-        className={cn('h-2 w-2 flex-shrink-0 rounded-full', {
-          'bg-green-500': isSelected,
-        })}
-      ></div>
+      {actionSlot ?? (
+        <div
+          className={cn('h-2 w-2 flex-shrink-0 rounded-full', {
+            'bg-green-500': isSelected,
+          })}
+        />
+      )}
    </button>
  );
 };
@@ -52,17 +55,19 @@ type EnvelopeRendererFileSelectorProps = {
  fields: { envelopeItemId: string }[];
  className?: string;
  secondaryOverride?: React.ReactNode;
+  renderItemAction?: (item: { id: string; title: string }) => React.ReactNode;
 };

 export const EnvelopeRendererFileSelector = ({
  fields,
  className,
  secondaryOverride,
+  renderItemAction,
 }: EnvelopeRendererFileSelectorProps) => {
  const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();

  return (
-    <div className={cn('flex h-fit flex-shrink-0 space-x-2 overflow-x-auto p-4', className)}>
+    <div className={cn('scrollbar-hidden flex h-fit flex-shrink-0 space-x-2 overflow-x-auto p-4', className)}>
      {envelopeItems.map((doc, i) => (
        <EnvelopeItemSelector
          key={doc.id}
@@ -81,6 +86,7 @@ export const EnvelopeRendererFileSelector = ({
          buttonProps={{
            onClick: () => setCurrentEnvelopeItem(doc.id),
          }}
+          actionSlot={renderItemAction?.(doc)}
        />
      ))}
    </div>
@@ -1,46 +1,44 @@
-import { useEffect, useMemo } from 'react';
-
-import { useLingui } from '@lingui/react/macro';
-import { DocumentStatus, type Recipient, SigningStatus } from '@prisma/client';
-import type Konva from 'konva';
-
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
-import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import {
+  type PageRenderData,
+  useCurrentEnvelopeRender,
+} from '@documenso/lib/client-only/providers/envelope-render-provider';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 import { EnvelopeRecipientFieldTooltip } from '@documenso/ui/components/document/envelope-recipient-field-tooltip';
+import { useLingui } from '@lingui/react/macro';
+import { DocumentStatus, type Recipient, SigningStatus } from '@prisma/client';
+import type Konva from 'konva';
+import { useEffect, useMemo } from 'react';

 type GenericLocalField = TEnvelope['fields'][number] & {
  recipient: Pick<Recipient, 'id' | 'name' | 'email' | 'signingStatus'>;
 };

-export default function EnvelopeGenericPageRenderer() {
+export const EnvelopeGenericPageRenderer = ({ pageData }: { pageData: PageRenderData }) => {
  const { i18n } = useLingui();

  const {
    envelopeStatus,
    currentEnvelopeItem,
    fields,
+    signatures,
    recipients,
    getRecipientColorKey,
    setRenderError,
    overrideSettings,
  } = useCurrentEnvelopeRender();

-  const {
-    stage,
-    pageLayer,
-    canvasElement,
-    konvaContainer,
-    pageContext,
-    scaledViewport,
-    unscaledViewport,
-  } = usePageRenderer(({ stage, pageLayer }) => {
-    createPageCanvas(stage, pageLayer);
-  });
+  const signaturesByFieldId = useMemo(() => {
+    return new Map(signatures.map((signature) => [signature.fieldId, signature]));
+  }, [signatures]);

-  const { _className, scale } = pageContext;
+  const { stage, pageLayer, konvaContainer, unscaledViewport } = usePageRenderer(({ stage, pageLayer }) => {
+    createPageCanvas(stage, pageLayer);
+  }, pageData);
+
+  const { scale, pageNumber } = pageData;

  const localPageFields = useMemo((): GenericLocalField[] => {
    if (envelopeStatus === DocumentStatus.COMPLETED) {
@@ -48,10 +46,7 @@ export default function EnvelopeGenericPageRenderer() {
    }

    return fields
-      .filter(
-        (field) =>
-          field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
-      )
+      .filter((field) => field.page === pageNumber && field.envelopeItemId === currentEnvelopeItem?.id)
      .map((field) => {
        const recipient = recipients.find((recipient) => recipient.id === field.recipientId);

@@ -70,10 +65,9 @@ export default function EnvelopeGenericPageRenderer() {
      })
      .filter(
        ({ inserted, fieldMeta, recipient }) =>
-          (recipient.signingStatus === SigningStatus.SIGNED ? inserted : true) ||
-          fieldMeta?.readOnly,
+          (recipient.signingStatus === SigningStatus.SIGNED ? inserted : true) || fieldMeta?.readOnly,
      );
-  }, [fields, pageContext.pageNumber, currentEnvelopeItem?.id, recipients]);
+  }, [fields, pageNumber, currentEnvelopeItem?.id, recipients, envelopeStatus]);

  const unsafeRenderFieldOnLayer = (field: GenericLocalField) => {
    if (!pageLayer.current) {
@@ -83,6 +77,16 @@ export default function EnvelopeGenericPageRenderer() {

    const fieldTranslations = getClientSideFieldTranslations(i18n);

+    // Look up an inserted signature for this field. If we don't have one (e.g.
+    // the signatures haven't been loaded, or the field hasn't been signed yet)
+    // fall back to a placeholder so the field still renders something.
+    const insertedSignature = signaturesByFieldId.get(field.id);
+
+    const signature = insertedSignature ?? {
+      signatureImageAsBase64: '',
+      typedSignature: fieldTranslations.SIGNATURE,
+    };
+
    renderField({
      scale,
      pageLayer: pageLayer.current,
@@ -94,10 +98,7 @@ export default function EnvelopeGenericPageRenderer() {
        positionX: Number(field.positionX),
        positionY: Number(field.positionY),
        fieldMeta: field.fieldMeta,
-        signature: {
-          signatureImageAsBase64: '',
-          typedSignature: fieldTranslations.SIGNATURE,
-        },
+        signature,
      },
      translations: fieldTranslations,
      pageWidth: unscaledViewport.width,
@@ -139,10 +140,7 @@ export default function EnvelopeGenericPageRenderer() {

    // If doesn't exist in localFields, destroy it since it's been deleted.
    pageLayer.current.find('Group').forEach((group) => {
-      if (
-        group.name() === 'field-group' &&
-        !localPageFields.some((field) => field.id.toString() === group.id())
-      ) {
+      if (group.name() === 'field-group' && !localPageFields.some((field) => field.id.toString() === group.id())) {
        group.destroy();
      }
    });
@@ -153,18 +151,16 @@ export default function EnvelopeGenericPageRenderer() {
    });

    pageLayer.current.batchDraw();
-  }, [localPageFields]);
+  }, [localPageFields, signaturesByFieldId]);

  if (!currentEnvelopeItem) {
    return null;
  }

  return (
-    <div
-      className="relative w-full"
-      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
-    >
+    <>
      {overrideSettings?.showRecipientTooltip &&
+        pageData.imageLoadingState === 'loaded' &&
        localPageFields.map((field) => (
          <EnvelopeRecipientFieldTooltip
            key={field.id}
@@ -176,14 +172,6 @@ export default function EnvelopeGenericPageRenderer() {

      {/* The element Konva will inject it's canvas into. */}
      <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>
-
-      {/* Canvas the PDF will be rendered on. */}
-      <canvas
-        className={`${_className}__canvas z-0`}
-        ref={canvasElement}
-        height={scaledViewport.height}
-        width={scaledViewport.width}
-      />
-    </div>
+    </>
  );
-}
+};
@@ -1,34 +1,26 @@
-import { useCallback, useState } from 'react';
-
-import type { I18n } from '@lingui/core';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
-import type { Field, Recipient } from '@prisma/client';
-import { RecipientRole, SendStatus } from '@prisma/client';
-import { Check, ChevronsUpDown, Info } from 'lucide-react';
-import { sortBy } from 'remeda';
-
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { TEnvelopeRecipientLite } from '@documenso/lib/types/recipient';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { getRecipientColorStyles } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from '@documenso/ui/primitives/command';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '@documenso/ui/primitives/command';
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import type { I18n } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
+import type { Field } from '@prisma/client';
+import { RecipientRole, SendStatus } from '@prisma/client';
+import { Check, ChevronsUpDown, Info } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { sortBy } from 'remeda';

 export interface EnvelopeRecipientSelectorProps {
  className?: string;
-  selectedRecipient: Recipient | null;
-  onSelectedRecipientChange: (recipient: Recipient) => void;
-  recipients: Recipient[];
+  selectedRecipient: TEnvelopeRecipientLite | null;
+  onSelectedRecipientChange: (recipient: TEnvelopeRecipientLite) => void;
+  recipients: TEnvelopeRecipientLite[];
  fields: Field[];
  align?: 'center' | 'end' | 'start';
 }
@@ -46,7 +38,7 @@ export const EnvelopeRecipientSelector = ({
  const [showRecipientsSelector, setShowRecipientsSelector] = useState(false);

  const getRecipientLabel = useCallback(
-    (recipient: Recipient) => extractRecipientLabel(recipient, recipients, i18n),
+    (recipient: TEnvelopeRecipientLite) => extractRecipientLabel(recipient, recipients, i18n),
    [recipients],
  );

@@ -59,19 +51,12 @@ export const EnvelopeRecipientSelector = ({
          role="combobox"
          className={cn(
            'justify-between bg-background font-normal text-muted-foreground hover:text-foreground',
-            getRecipientColorStyles(
-              Math.max(
-                recipients.findIndex((r) => r.id === selectedRecipient?.id),
-                0,
-              ),
-            ).comboxBoxTrigger,
+            getRecipientColorStyles(recipients.findIndex((r) => r.id === selectedRecipient?.id)).comboBoxTrigger,
            className,
          )}
        >
          {selectedRecipient && (
-            <span className="flex-1 truncate text-left">
-              {getRecipientLabel(selectedRecipient)}
-            </span>
+            <span className="flex-1 truncate text-left">{getRecipientLabel(selectedRecipient)}</span>
          )}

          <ChevronsUpDown className="ml-2 h-4 w-4" />
@@ -95,9 +80,9 @@ export const EnvelopeRecipientSelector = ({

 interface EnvelopeRecipientSelectorCommandProps {
  className?: string;
-  selectedRecipient: Recipient | null;
-  onSelectedRecipientChange: (recipient: Recipient) => void;
-  recipients: Recipient[];
+  selectedRecipient: TEnvelopeRecipientLite | null;
+  onSelectedRecipientChange: (recipient: TEnvelopeRecipientLite) => void;
+  recipients: TEnvelopeRecipientLite[];
  fields: Field[];
  placeholder?: string;
 }
@@ -113,7 +98,7 @@ export const EnvelopeRecipientSelectorCommand = ({
  const { t, i18n } = useLingui();

  const recipientsByRole = useCallback(() => {
-    const recipientsByRole: Record<RecipientRole, Recipient[]> = {
+    const recipientsByRole: Record<RecipientRole, TEnvelopeRecipientLite[]> = {
      CC: [],
      VIEWER: [],
      SIGNER: [],
@@ -131,21 +116,14 @@ export const EnvelopeRecipientSelectorCommand = ({
  const recipientsByRoleToDisplay = useCallback(() => {
    return Object.entries(recipientsByRole())
      .filter(
-        ([role]) =>
-          role !== RecipientRole.CC &&
-          role !== RecipientRole.VIEWER &&
-          role !== RecipientRole.ASSISTANT,
+        ([role]) => role !== RecipientRole.CC && role !== RecipientRole.VIEWER && role !== RecipientRole.ASSISTANT,
      )
      .map(
        ([role, roleRecipients]) =>
          [
            role,
-            sortBy(
-              roleRecipients,
-              [(r) => r.signingOrder || Number.MAX_SAFE_INTEGER, 'asc'],
-              [(r) => r.id, 'asc'],
-            ),
-          ] as [RecipientRole, Recipient[]],
+            sortBy(roleRecipients, [(r) => r.signingOrder || Number.MAX_SAFE_INTEGER, 'asc'], [(r) => r.id, 'asc']),
+          ] as [RecipientRole, TEnvelopeRecipientLite[]],
      );
  }, [recipientsByRole]);

@@ -160,15 +138,12 @@ export const EnvelopeRecipientSelectorCommand = ({
  );

  const getRecipientLabel = useCallback(
-    (recipient: Recipient) => extractRecipientLabel(recipient, recipients, i18n),
+    (recipient: TEnvelopeRecipientLite) => extractRecipientLabel(recipient, recipients, i18n),
    [recipients],
  );

  return (
-    <Command
-      value={selectedRecipient ? selectedRecipient.id.toString() : undefined}
-      className={className}
-    >
+    <Command value={selectedRecipient ? selectedRecipient.id.toString() : undefined} className={className}>
      <CommandInput placeholder={placeholder} />

      <CommandEmpty>
@@ -179,15 +154,12 @@ export const EnvelopeRecipientSelectorCommand = ({

      {recipientsByRoleToDisplay().map(([role, roleRecipients], roleIndex) => (
        <CommandGroup key={roleIndex}>
-          <div className="mb-1 ml-2 mt-2 text-xs font-medium text-muted-foreground">
+          <div className="mt-2 mb-1 ml-2 font-medium text-muted-foreground text-xs">
            {t(RECIPIENT_ROLES_DESCRIPTION[role].roleNamePlural)}
          </div>

          {roleRecipients.length === 0 && (
-            <div
-              key={`${role}-empty`}
-              className="px-4 pb-4 pt-2.5 text-center text-xs text-muted-foreground/80"
-            >
+            <div key={`${role}-empty`} className="px-4 pt-2.5 pb-4 text-center text-muted-foreground/80 text-xs">
              <Trans>No recipients with this role</Trans>
            </div>
          )}
@@ -197,12 +169,7 @@ export const EnvelopeRecipientSelectorCommand = ({
              key={recipient.id}
              className={cn(
                'px-2 last:mb-1 [&:not(:first-child)]:mt-1',
-                getRecipientColorStyles(
-                  Math.max(
-                    recipients.findIndex((r) => r.id === recipient.id),
-                    0,
-                  ),
-                ).comboxBoxItem,
+                getRecipientColorStyles(recipients.findIndex((r) => r.id === recipient.id)).comboBoxItem,
                {
                  'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
                  'cursor-not-allowed': isRecipientDisabled(recipient.id),
@@ -240,8 +207,7 @@ export const EnvelopeRecipientSelectorCommand = ({

                    <TooltipContent className="max-w-xs text-muted-foreground">
                      <Trans>
-                        This document has already been sent to this recipient. You can no longer
-                        edit this recipient.
+                        This document has already been sent to this recipient. You can no longer edit this recipient.
                      </Trans>
                    </TooltipContent>
                  </Tooltip>
@@ -255,7 +221,7 @@ export const EnvelopeRecipientSelectorCommand = ({
  );
 };

-const extractRecipientLabel = (recipient: Recipient, recipients: Recipient[], i18n: I18n) => {
+const extractRecipientLabel = (recipient: TEnvelopeRecipientLite, recipients: TEnvelopeRecipientLite[], i18n: I18n) => {
  if (recipient.name && recipient.email) {
    return `${recipient.name} (${recipient.email})`;
  }