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.

packages/lib/client-only/hooks/use-analytics.ts

@@ -1,7 +1,15 @@
-import { posthog } from 'posthog-js';
-
 import { extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
 
+let posthogPromise: Promise<typeof import('posthog-js')> | null = null;
+
+const getPosthog = async () => {
+  if (!posthogPromise) {
+    posthogPromise = import('posthog-js');
+  }
+
+  return posthogPromise;
+};
+
 export function useAnalytics() {
   // const featureFlags = useFeatureFlags();
   const isPostHogEnabled = extractPostHogConfig();
@@ -17,7 +25,9 @@ export function useAnalytics() {
       return;
     }
 
-    posthog.capture(event, properties);
+    void getPosthog().then(({ default: posthog }) => {
+      posthog.capture(event, properties);
+    });
   };
 
   /**
@@ -31,7 +41,9 @@ export function useAnalytics() {
       return;
     }
 
-    posthog.captureException(error, properties);
+    void getPosthog().then(({ default: posthog }) => {
+      posthog.captureException(error, properties);
+    });
   };
 
   /**

packages/lib/client-only/hooks/use-autosave.ts

@@ -5,10 +5,7 @@ type SaveRequest<T, R> = {
   onResponse?: (response: R) => void;
 };
 
-export const useAutoSave = <T, R = void>(
-  onSave: (data: T) => Promise<R>,
-  options: { delay?: number } = {},
-) => {
+export const useAutoSave = <T, R = void>(onSave: (data: T) => Promise<R>, options: { delay?: number } = {}) => {
   const { delay = 2000 } = options;
 
   const saveTimeoutRef = useRef<NodeJS.Timeout>();

packages/lib/client-only/hooks/use-copy-share-link.ts

@@ -11,8 +11,7 @@ export type UseCopyShareLinkOptions = {
 export function useCopyShareLink({ onSuccess, onError }: UseCopyShareLinkOptions) {
   const [, copyToClipboard] = useCopyToClipboard();
 
-  const { mutateAsync: createOrGetShareLink, isPending: isCreatingShareLink } =
-    trpc.document.share.useMutation();
+  const { mutateAsync: createOrGetShareLink, isPending: isCreatingShareLink } = trpc.document.share.useMutation();
 
   /**
    * Copy a newly created, or pre-existing share link to the user's clipboard.

packages/lib/client-only/hooks/use-copy-to-clipboard.ts

@@ -18,9 +18,7 @@ export function useCopyToClipboard(): [CopiedValue, CopyFn] {
 
     // Try to save to clipboard then save it in the state if worked
     try {
-      isClipboardApiSupported
-        ? await handleClipboardApiCopy(text, blobType)
-        : await handleWriteTextCopy(text);
+      isClipboardApiSupported ? await handleClipboardApiCopy(text, blobType) : await handleWriteTextCopy(text);
 
       setCopiedText(await text);
       return true;

packages/lib/client-only/hooks/use-document-element.ts

@@ -1,6 +1,5 @@
-import { useCallback } from 'react';
-
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+import { useCallback } from 'react';
 
 export const useDocumentElement = () => {
   /**
@@ -14,7 +13,8 @@ export const useDocumentElement = () => {
     const target = event.target;
 
     const $page =
-      target.closest<HTMLElement>(pageSelector) ?? target.querySelector<HTMLElement>(pageSelector);
+      target.closest<HTMLElement>(pageSelector) ??
+      document.elementsFromPoint(event.clientX, event.clientY).find((el) => el.matches(pageSelector));
 
     if (!$page) {
       return null;
@@ -28,19 +28,9 @@ export const useDocumentElement = () => {
    * as a percentage of the page width and height.
    */
   const getFieldPosition = (page: HTMLElement, field: HTMLElement) => {
-    const {
-      top: pageTop,
-      left: pageLeft,
-      height: pageHeight,
-      width: pageWidth,
-    } = getBoundingClientRect(page);
+    const { top: pageTop, left: pageLeft, height: pageHeight, width: pageWidth } = getBoundingClientRect(page);
 
-    const {
-      top: fieldTop,
-      left: fieldLeft,
-      height: fieldHeight,
-      width: fieldWidth,
-    } = getBoundingClientRect(field);
+    const { top: fieldTop, left: fieldLeft, height: fieldHeight, width: fieldWidth } = getBoundingClientRect(field);
 
     return {
       x: ((fieldLeft - pageLeft) / pageWidth) * 100,
@@ -57,31 +47,28 @@ export const useDocumentElement = () => {
    * @param mouseWidth The artifical width of the mouse.
    * @param mouseHeight The artifical height of the mouse.
    */
-  const isWithinPageBounds = useCallback(
-    (event: MouseEvent, pageSelector: string, mouseWidth = 0, mouseHeight = 0) => {
-      const $page = getPage(event, pageSelector);
+  const isWithinPageBounds = useCallback((event: MouseEvent, pageSelector: string, mouseWidth = 0, mouseHeight = 0) => {
+    const $page = getPage(event, pageSelector);
 
-      if (!$page) {
-        return false;
-      }
+    if (!$page) {
+      return false;
+    }
 
-      const { top, left, height, width } = $page.getBoundingClientRect();
+    const { top, left, height, width } = $page.getBoundingClientRect();
 
-      const halfMouseWidth = mouseWidth / 2;
-      const halfMouseHeight = mouseHeight / 2;
+    const halfMouseWidth = mouseWidth / 2;
+    const halfMouseHeight = mouseHeight / 2;
 
-      if (event.clientY > top + height - halfMouseHeight || event.clientY < top + halfMouseHeight) {
-        return false;
-      }
+    if (event.clientY > top + height - halfMouseHeight || event.clientY < top + halfMouseHeight) {
+      return false;
+    }
 
-      if (event.clientX > left + width - halfMouseWidth || event.clientX < left + halfMouseWidth) {
-        return false;
-      }
+    if (event.clientX > left + width - halfMouseWidth || event.clientX < left + halfMouseWidth) {
+      return false;
+    }
 
-      return true;
-    },
-    [],
-  );
+    return true;
+  }, []);
 
   return {
     getPage,

packages/lib/client-only/hooks/use-editor-fields.ts

@@ -1,15 +1,13 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import type { Field, Recipient } from '@prisma/client';
-import { FieldType } from '@prisma/client';
-import { useFieldArray, useForm } from 'react-hook-form';
-import { z } from 'zod';
-
+import { getPdfPagesCount } from '@documenso/lib/constants/pdf-viewer';
+import type { TEditorEnvelope } from '@documenso/lib/types/envelope-editor';
 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import { nanoid } from '@documenso/lib/universal/id';
-
-import type { TEnvelope } from '../../types/envelope';
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { Field } from '@prisma/client';
+import { FieldType } from '@prisma/client';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 export const ZLocalFieldSchema = z.object({
   // This is the actual ID of the field if created.
@@ -37,7 +35,7 @@ const ZEditorFieldsFormSchema = z.object({
 export type TEditorFieldsFormSchema = z.infer<typeof ZEditorFieldsFormSchema>;
 
 type EditorFieldsProps = {
-  envelope: TEnvelope;
+  envelope: TEditorEnvelope;
   handleFieldsUpdate: (fields: TLocalField[]) => unknown;
 };
 
@@ -61,16 +59,13 @@ type UseEditorFieldsResponse = {
   getFieldsByRecipient: (recipientId: number) => TLocalField[];
 
   // Selected recipient
-  selectedRecipient: Recipient | null;
+  selectedRecipient: TEditorEnvelope['recipients'][number] | null;
   setSelectedRecipient: (recipientId: number | null) => void;
 
   resetForm: (fields?: Field[]) => void;
 };
 
-export const useEditorFields = ({
-  envelope,
-  handleFieldsUpdate,
-}: EditorFieldsProps): UseEditorFieldsResponse => {
+export const useEditorFields = ({ envelope, handleFieldsUpdate }: EditorFieldsProps): UseEditorFieldsResponse => {
   const [selectedFieldFormId, setSelectedFieldFormId] = useState<string | null>(null);
   const [selectedRecipientId, setSelectedRecipientId] = useState<number | null>(null);
 
@@ -123,9 +118,7 @@ export const useEditorFields = ({
     }
 
     const foundField = localFields.find((field) => field.formId === formId);
-    const recipient = envelope.recipients.find(
-      (recipient) => recipient.id === foundField?.recipientId,
-    );
+    const recipient = envelope.recipients.find((recipient) => recipient.id === foundField?.recipientId);
 
     if (recipient) {
       setSelectedRecipient(recipient.id);
@@ -222,14 +215,16 @@ export const useEditorFields = ({
 
   const duplicateFieldToAllPages = useCallback(
     (field: TLocalField): TLocalField[] => {
-      const pages = Array.from(document.querySelectorAll('[data-page-number]'));
+      const totalPages = getPdfPagesCount();
       const newFields: TLocalField[] = [];
 
-      pages.forEach((_, index) => {
-        const pageNumber = index + 1;
+      if (totalPages < 1) {
+        return newFields;
+      }
 
+      for (let pageNumber = 1; pageNumber <= totalPages; pageNumber += 1) {
         if (pageNumber === field.page) {
-          return;
+          continue;
         }
 
         const newField: TLocalField = {
@@ -241,7 +236,7 @@ export const useEditorFields = ({
 
         append(newField);
         newFields.push(newField);
-      });
+      }
 
       triggerFieldsUpdate();
       return newFields;
@@ -317,9 +312,7 @@ export const useEditorFields = ({
   };
 };
 
-const restrictFieldPosValues = (
-  field: Pick<TLocalField, 'positionX' | 'positionY' | 'width' | 'height'>,
-) => {
+const restrictFieldPosValues = (field: Pick<TLocalField, 'positionX' | 'positionY' | 'width' | 'height'>) => {
   return {
     positionX: Math.max(0, Math.min(100, field.positionX)),
     positionY: Math.max(0, Math.min(100, field.positionY)),

packages/lib/client-only/hooks/use-editor-recipients.ts

@@ -1,20 +1,14 @@
-import { useId } from 'react';
-
+import { ZRecipientActionAuthTypesSchema, ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
+import type { TEditorEnvelope } from '@documenso/lib/types/envelope-editor';
+import { ZRecipientEmailSchema } from '@documenso/lib/types/recipient';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { DocumentSigningOrder, type Recipient, RecipientRole } from '@prisma/client';
+import { DocumentSigningOrder, RecipientRole } from '@prisma/client';
+import { useId } from 'react';
 import type { UseFormReturn } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import { prop, sortBy } from 'remeda';
 import { z } from 'zod';
 
-import {
-  ZRecipientActionAuthTypesSchema,
-  ZRecipientAuthOptionsSchema,
-} from '@documenso/lib/types/document-auth';
-import { ZRecipientEmailSchema } from '@documenso/lib/types/recipient';
-
-import type { TEnvelope } from '../../types/envelope';
-
 const LocalRecipientSchema = z.object({
   formId: z.string().min(1),
   id: z.number().optional(),
@@ -36,12 +30,12 @@ export const ZEditorRecipientsFormSchema = z.object({
 export type TEditorRecipientsFormSchema = z.infer<typeof ZEditorRecipientsFormSchema>;
 
 type EditorRecipientsProps = {
-  envelope: TEnvelope;
+  envelope: TEditorEnvelope;
 };
 
 type ResetFormOptions = {
-  recipients?: Recipient[];
-  documentMeta?: TEnvelope['documentMeta'];
+  recipients?: TEditorEnvelope['recipients'];
+  documentMeta?: TEditorEnvelope['documentMeta'];
 };
 
 type UseEditorRecipientsResponse = {
@@ -49,9 +43,7 @@ type UseEditorRecipientsResponse = {
   resetForm: (options?: ResetFormOptions) => void;
 };
 
-export const useEditorRecipients = ({
-  envelope,
-}: EditorRecipientsProps): UseEditorRecipientsResponse => {
+export const useEditorRecipients = ({ envelope }: EditorRecipientsProps): UseEditorRecipientsResponse => {
   const initialId = useId();
 
   const generateDefaultValues = (options?: ResetFormOptions) => {
@@ -84,8 +76,7 @@ export const useEditorRecipients = ({
     return {
       signers,
       signingOrder: documentMeta?.signingOrder ?? envelope.documentMeta.signingOrder,
-      allowDictateNextSigner:
-        documentMeta?.allowDictateNextSigner ?? envelope.documentMeta.allowDictateNextSigner,
+      allowDictateNextSigner: documentMeta?.allowDictateNextSigner ?? envelope.documentMeta.allowDictateNextSigner,
     };
   };
 

packages/lib/client-only/hooks/use-element-bounds.ts

@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
-
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+import { useCallback, useEffect, useState } from 'react';
 
 export const useElementBounds = (elementOrSelector: HTMLElement | string, withScroll = false) => {
   const [bounds, setBounds] = useState({
@@ -17,7 +16,7 @@ export const useElementBounds = (elementOrSelector: HTMLElement | string, withSc
         : elementOrSelector;
 
     if (!$el) {
-      throw new Error('Element not found');
+      return { top: 0, left: 0, width: 0, height: 0 };
     }
 
     if (withScroll) {
@@ -36,7 +35,7 @@ export const useElementBounds = (elementOrSelector: HTMLElement | string, withSc
 
   useEffect(() => {
     setBounds(calculateBounds());
-  }, []);
+  }, [calculateBounds]);
 
   useEffect(() => {
     const onResize = () => {
@@ -48,7 +47,7 @@ export const useElementBounds = (elementOrSelector: HTMLElement | string, withSc
     return () => {
       window.removeEventListener('resize', onResize);
     };
-  }, []);
+  }, [calculateBounds]);
 
   useEffect(() => {
     const $el =
@@ -69,7 +68,7 @@ export const useElementBounds = (elementOrSelector: HTMLElement | string, withSc
     return () => {
       observer.disconnect();
     };
-  }, []);
+  }, [elementOrSelector, calculateBounds]);
 
   return bounds;
 };

packages/lib/client-only/hooks/use-element-scale-size.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/consistent-type-assertions */
-import { RefObject, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 /**
  * Calculate the width and height of a text element.

packages/lib/client-only/hooks/use-envelope-autosave.ts

@@ -15,7 +15,9 @@ export function useEnvelopeAutosave<T>(saveFn: (data: T) => Promise<void>, delay
       // A debounce or promise means something is pending
       setIsPending(true);
 
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
 
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       timeoutRef.current = setTimeout(async () => {

packages/lib/client-only/hooks/use-field-page-coords.ts

@@ -1,13 +1,9 @@
+import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+import { PDF_VIEWER_CONTENT_SELECTOR, PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import type { Field } from '@prisma/client';
 import { useCallback, useEffect, useState } from 'react';
 
-import type { Field } from '@prisma/client';
-
-import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
-import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-
-export const useFieldPageCoords = (
-  field: Pick<Field, 'positionX' | 'positionY' | 'width' | 'height' | 'page'>,
-) => {
+export const useFieldPageCoords = (field: Pick<Field, 'positionX' | 'positionY' | 'width' | 'height' | 'page'>) => {
   const [coords, setCoords] = useState({
     x: 0,
     y: 0,
@@ -16,9 +12,7 @@ export const useFieldPageCoords = (
   });
 
   const calculateCoords = useCallback(() => {
-    const $page = document.querySelector<HTMLElement>(
-      `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.page}"]`,
-    );
+    const $page = document.querySelector<HTMLElement>(`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.page}"]`);
 
     if (!$page) {
       return;
@@ -57,23 +51,65 @@ export const useFieldPageCoords = (
     };
   }, [calculateCoords]);
 
+  // Watch for the page element to appear in the DOM (e.g. after a virtual list
+  // scroll) and recalculate coords. Also attach a ResizeObserver once the page
+  // element exists.
   useEffect(() => {
-    const $page = document.querySelector<HTMLElement>(
-      `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.page}"]`,
-    );
+    const pageSelector = `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.page}"]`;
 
-    if (!$page) {
-      return;
+    let resizeObserver: ResizeObserver | null = null;
+    let observedElement: HTMLElement | null = null;
+
+    const attachResizeObserver = ($page: HTMLElement) => {
+      if ($page === observedElement) {
+        return;
+      }
+
+      resizeObserver?.disconnect();
+      resizeObserver = new ResizeObserver(() => {
+        calculateCoords();
+      });
+      resizeObserver.observe($page);
+      observedElement = $page;
+    };
+
+    // Try to attach immediately if the page already exists.
+    const existingPage = document.querySelector<HTMLElement>(pageSelector);
+
+    if (existingPage) {
+      attachResizeObserver(existingPage);
     }
 
-    const observer = new ResizeObserver(() => {
+    // Watch for DOM mutations to detect when the page element appears (e.g.
+    // after the virtual list scrolls to a new page and renders it).
+    // Scope to the PDF viewer content container to avoid firing on unrelated
+    // DOM changes elsewhere in the document.
+    const mutationObserver = new MutationObserver(() => {
+      const $page = document.querySelector<HTMLElement>(pageSelector);
+
+      if (!$page) {
+        return;
+      }
+
+      if ($page === observedElement) {
+        return;
+      }
+
       calculateCoords();
+      attachResizeObserver($page);
     });
 
-    observer.observe($page);
+    const $container = document.querySelector(PDF_VIEWER_CONTENT_SELECTOR) ?? document.body;
+
+    mutationObserver.observe($container, {
+      childList: true,
+      subtree: true,
+    });
 
     return () => {
-      observer.disconnect();
+      mutationObserver.disconnect();
+      resizeObserver?.disconnect();
+      observedElement = null;
     };
   }, [calculateCoords, field.page]);
 

packages/lib/client-only/hooks/use-is-page-in-dom.ts

@@ -0,0 +1,35 @@
+import { PDF_VIEWER_CONTENT_SELECTOR, PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { useEffect, useState } from 'react';
+
+/**
+ * Returns whether the PDF page element for the given page number is currently
+ * present in the DOM. With virtual list rendering only pages near the viewport
+ * are mounted, so this hook lets consumers skip rendering when their page is
+ * virtualised away.
+ */
+export const useIsPageInDom = (pageNumber: number) => {
+  const [isPageInDom, setIsPageInDom] = useState(false);
+
+  useEffect(() => {
+    const selector = `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${pageNumber}"]`;
+
+    setIsPageInDom(document.querySelector(selector) !== null);
+
+    const observer = new MutationObserver(() => {
+      setIsPageInDom(document.querySelector(selector) !== null);
+    });
+
+    const $container = document.querySelector(PDF_VIEWER_CONTENT_SELECTOR) ?? document.body;
+
+    observer.observe($container, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [pageNumber]);
+
+  return isPageInDom;
+};

packages/lib/client-only/hooks/use-page-renderer.ts

@@ -1,135 +1,85 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-
 import Konva from 'konva';
-import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
-import { usePageContext } from 'react-pdf';
+import { useEffect, useMemo, useRef } from 'react';
+
+import type { PageRenderData } from '../providers/envelope-render-provider';
 
 type RenderFunction = (props: { stage: Konva.Stage; pageLayer: Konva.Layer }) => void;
 
-export function usePageRenderer(renderFunction: RenderFunction) {
-  const pageContext = usePageContext();
+export const usePageRenderer = (renderFunction: RenderFunction, pageData: PageRenderData) => {
+  const { pageWidth, pageHeight, scale, imageLoadingState, pageNumber } = pageData;
 
-  if (!pageContext) {
-    throw new Error('Unable to find Page context.');
-  }
-
-  const { page, rotate, scale } = pageContext;
-
-  if (!page) {
-    throw new Error('Attempted to render page canvas, but no page was specified.');
-  }
-
-  const canvasElement = useRef<HTMLCanvasElement>(null);
   const konvaContainer = useRef<HTMLDivElement>(null);
 
   const stage = useRef<Konva.Stage | null>(null);
   const pageLayer = useRef<Konva.Layer | null>(null);
 
-  const [renderError, setRenderError] = useState<boolean>(false);
-
   /**
    * The raw viewport with no scaling. Basically the actual PDF size.
    */
   const unscaledViewport = useMemo(
-    () => page.getViewport({ scale: 1, rotation: rotate }),
-    [page, rotate, scale],
+    () => ({
+      scale: 1,
+      width: pageWidth,
+      height: pageHeight,
+    }),
+    [pageWidth, pageHeight],
   );
 
   /**
    * The viewport scaled according to page width.
    */
   const scaledViewport = useMemo(
-    () => page.getViewport({ scale, rotation: rotate }),
-    [page, rotate, scale],
+    () => ({
+      scale,
+      width: pageWidth * scale,
+      height: pageHeight * scale,
+    }),
+    [pageWidth, pageHeight, scale],
   );
 
-  /**
-   * Viewport with the device pixel ratio applied so we can render the PDF
-   * in a higher resolution.
-   */
-  const renderViewport = useMemo(
-    () => page.getViewport({ scale: scale * window.devicePixelRatio, rotation: rotate }),
-    [page, rotate, scale],
-  );
+  useEffect(() => {
+    const { current: container } = konvaContainer;
 
-  /**
-   * Render the PDF and create the scaled Konva stage.
-   */
-  useEffect(
-    function drawPageOnCanvas() {
-      if (!page) {
-        return;
-      }
+    if (!container || imageLoadingState !== 'loaded') {
+      return;
+    }
 
-      const { current: canvas } = canvasElement;
-      const { current: kContainer } = konvaContainer;
+    stage.current = new Konva.Stage({
+      container,
+      id: `page-${pageNumber}`,
+      width: scaledViewport.width,
+      height: scaledViewport.height,
+      scale: {
+        x: scale,
+        y: scale,
+      },
+    });
 
-      if (!canvas || !kContainer) {
-        return;
-      }
+    // Create the main layer for interactive elements.
+    pageLayer.current = new Konva.Layer();
 
-      canvas.width = renderViewport.width;
-      canvas.height = renderViewport.height;
+    stage.current.add(pageLayer.current);
 
-      canvas.style.width = `${Math.floor(scaledViewport.width)}px`;
-      canvas.style.height = `${Math.floor(scaledViewport.height)}px`;
+    renderFunction({
+      stage: stage.current,
+      pageLayer: pageLayer.current,
+    });
 
-      const renderContext: RenderParameters = {
-        canvas,
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        canvasContext: canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D,
-        viewport: renderViewport,
-      };
+    void document.fonts.ready.then(() => {
+      pageLayer.current?.batchDraw();
+    });
 
-      const cancellable = page.render(renderContext);
-      const runningTask = cancellable;
-
-      cancellable.promise.catch(() => {
-        // Intentionally empty
-      });
-
-      void cancellable.promise.then(() => {
-        stage.current = new Konva.Stage({
-          container: kContainer,
-          width: scaledViewport.width,
-          height: scaledViewport.height,
-          scale: {
-            x: scale,
-            y: scale,
-          },
-        });
-
-        // Create the main layer for interactive elements.
-        pageLayer.current = new Konva.Layer();
-
-        stage.current.add(pageLayer.current);
-
-        renderFunction({
-          stage: stage.current,
-          pageLayer: pageLayer.current,
-        });
-
-        void document.fonts.ready.then(function () {
-          pageLayer.current?.batchDraw();
-        });
-      });
-
-      return () => {
-        runningTask.cancel();
-      };
-    },
-    [page, scaledViewport],
-  );
+    return () => {
+      stage.current?.destroy();
+      stage.current = null;
+    };
+  }, [imageLoadingState, scaledViewport]);
 
   return {
-    canvasElement,
     konvaContainer,
     stage,
     pageLayer,
     unscaledViewport,
     scaledViewport,
-    pageContext,
-    renderError,
-    setRenderError,
   };
-}
+};

packages/lib/client-only/hooks/use-session-storage.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import type { Dispatch, SetStateAction } from 'react';
+import * as React from 'react';
 
 function dispatchStorageEvent(key: string, newValue: string | null) {
   window.dispatchEvent(new StorageEvent('storage', { key, newValue }));
@@ -25,20 +25,13 @@ const useSessionStorageSubscribe = (callback: (event: StorageEvent) => void) =>
   return () => window.removeEventListener('storage', callback);
 };
 
-export function useSessionStorage<T>(
-  key: string,
-  initialValue: T,
-): [T, Dispatch<SetStateAction<T>>] {
+export function useSessionStorage<T>(key: string, initialValue: T): [T, Dispatch<SetStateAction<T>>] {
   const serializedInitialValue = JSON.stringify(initialValue);
 
   const getSnapshot = () => getSessionStorageItem(key);
   const getServerSnapshot = () => serializedInitialValue;
 
-  const store = React.useSyncExternalStore(
-    useSessionStorageSubscribe,
-    getSnapshot,
-    getServerSnapshot,
-  );
+  const store = React.useSyncExternalStore(useSessionStorageSubscribe, getSnapshot, getServerSnapshot);
 
   const setState: Dispatch<SetStateAction<T>> = React.useCallback(
     (v) => {