@drawnagency/primitives 0.1.101 → 0.1.103

package/dist/{chunk-6SLGKRLW.js → chunk-CXQWLG6X.js}

@@ -1,3 +1,7 @@
+import {
+  EditableRichText,
+  defineHeadingSection
+} from "./chunk-EWNDBKYK.js";
 import {
   brandGuideSectionDefs,
   duplicateChildAt,
@@ -9,7 +13,17 @@ import {
   stripHtmlToPlainText,
   trimTrailingSpacers,
   truncate
-} from "./chunk-P3NNI3QI.js";
+} from "./chunk-X4PRBGB3.js";
+import {
+  EditablePlainText,
+  ImageDropZone,
+  MAX_CONTAINER_COLUMNS,
+  MediaBlock,
+  colSpanClass,
+  containerGridClass,
+  masonryColumnsClass,
+  spacerHiddenClass
+} from "./chunk-MUTHF2GT.js";
 import {
   DeleteButton,
   DragHandle,
@@ -23,21 +37,7 @@ import {
   buildBlockDropData,
   canDropBlock,
   isBlockDragData
-} from "./chunk-LBHQWIVL.js";
-import {
-  EditableRichText,
-  defineHeadingSection
-} from "./chunk-EWNDBKYK.js";
-import {
-  EditablePlainText,
-  ImageDropZone,
-  MAX_CONTAINER_COLUMNS,
-  MediaBlock,
-  colSpanClass,
-  containerGridClass,
-  masonryColumnsClass,
-  spacerHiddenClass
-} from "./chunk-MUTHF2GT.js";
+} from "./chunk-WA6QPDJI.js";
 import {
   useMediaLibrary,
   useResolvedMedia

package/dist/components/docfile/DocFilePane.d.ts

@@ -8,6 +8,10 @@ import type { SiteDocument } from "../../lib/documents";
  * BELOW the nav and docked chat (z-40) and the mobile nav header / chat sheet
  * (z-50), so all chrome stays reachable. `editor` adds top clearance for the
  * edit route's always-fixed h-16 toolbar.
+ *
+ * PDFs render in PdfCanvasViewer (pdf.js) — themed chrome, identical in every
+ * browser; HTML keeps the sandboxed iframe. The top bar carries the paging and
+ * zoom controls the native viewer chrome used to provide.
  */
 export default function DocFilePane({ doc, onClose, editor, }: {
     doc: SiteDocument;

package/dist/components/docfile/DocFilePane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocFilePane.d.ts","sourceRoot":"","sources":["../../../src/components/docfile/DocFilePane.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAOxD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,GAAG,EACH,OAAO,EACP,MAAc,GACf,EAAE;IAAE,GAAG,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,2CA6G9D"}
+{"version":3,"file":"DocFilePane.d.ts","sourceRoot":"","sources":["../../../src/components/docfile/DocFilePane.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAexD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,GAAG,EACH,OAAO,EACP,MAAc,GACf,EAAE;IAAE,GAAG,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,2CAwL9D"}

package/dist/components/docfile/PdfCanvasViewer.d.ts

@@ -0,0 +1,28 @@
+import type { MutableRefObject } from "react";
+export interface PdfCanvasViewerHandle {
+    goToPage(n: number): void;
+    nextPage(): void;
+    prevPage(): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    fitWidth(): void;
+}
+interface PdfCanvasViewerProps {
+    url: string;
+    /** Plain mutable ref (not forwardRef) so React.lazy stays trivial. */
+    handleRef?: MutableRefObject<PdfCanvasViewerHandle | null>;
+    onReady: (numPages: number) => void;
+    onError: () => void;
+    /** 1-based, fired only on change; feeds the pane top bar's page indicator. */
+    onPageChange: (page: number) => void;
+}
+/**
+ * Canvas-based PDF viewer: continuous vertical scroll of all pages, fit-width
+ * by default, virtualized rendering. Owns its scroll container; chrome (page
+ * indicator, zoom buttons, close) belongs to DocFilePane's top bar, driven
+ * through `handleRef`. Page CONTENT is rendered untinted in both themes — a
+ * brand guide's colours are the product — only the surround follows `.dark`.
+ */
+export default function PdfCanvasViewer({ url, handleRef, onReady, onError, onPageChange, }: PdfCanvasViewerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PdfCanvasViewer.d.ts.map

package/dist/components/docfile/PdfCanvasViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdfCanvasViewer.d.ts","sourceRoot":"","sources":["../../../src/components/docfile/PdfCanvasViewer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAyC7D,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,IAAI,IAAI,CAAC;IACjB,QAAQ,IAAI,IAAI,CAAC;IACjB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,IAAI,CAAC;IAChB,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,UAAU,oBAAoB;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,sEAAsE;IACtE,SAAS,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,GAAG,IAAI,CAAC,CAAC;IAC3D,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8EAA8E;IAC9E,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAiBD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,GAAG,EACH,SAAS,EACT,OAAO,EACP,OAAO,EACP,YAAY,GACb,EAAE,oBAAoB,2CAiXtB"}

package/dist/components/editor/index.js

@@ -11,9 +11,9 @@ import {
   buildBlockDropData,
   canDropBlock,
   isBlockDragData
-} from "../../chunk-LBHQWIVL.js";
-import "../../chunk-5THS4K5D.js";
+} from "../../chunk-WA6QPDJI.js";
 import "../../chunk-ZSPCE6MZ.js";
+import "../../chunk-5THS4K5D.js";
 import {
   AddIcon,
   IconButton

package/dist/components/sections/brand-guide.js

@@ -2,9 +2,9 @@ import {
   ColorItemSchema,
   ColorSpaceSchema,
   brandGuideSectionDefs
-} from "../../chunk-P3NNI3QI.js";
-import "../../chunk-5THS4K5D.js";
+} from "../../chunk-X4PRBGB3.js";
 import "../../chunk-MUTHF2GT.js";
+import "../../chunk-5THS4K5D.js";
 import "../../chunk-26ALJO4K.js";
 import "../../chunk-3COSXTOY.js";
 import "../../chunk-PZJL2S3Z.js";

package/dist/components/sections/register-schemas.js

@@ -1,20 +1,20 @@
 import {
   allSectionDefs
-} from "../../chunk-6SLGKRLW.js";
-import "../../chunk-P3NNI3QI.js";
-import "../../chunk-LBHQWIVL.js";
-import "../../chunk-5THS4K5D.js";
+} from "../../chunk-CXQWLG6X.js";
 import "../../chunk-EWNDBKYK.js";
+import "../../chunk-X4PRBGB3.js";
 import "../../chunk-MUTHF2GT.js";
+import "../../chunk-WA6QPDJI.js";
 import "../../chunk-ZSPCE6MZ.js";
+import "../../chunk-5THS4K5D.js";
 import "../../chunk-26ALJO4K.js";
 import "../../chunk-Y4JQGO6G.js";
 import "../../chunk-3COSXTOY.js";
 import "../../chunk-PZJL2S3Z.js";
 import "../../chunk-BS5AQHZG.js";
+import "../../chunk-72CG6AA2.js";
 import "../../chunk-WDSVHKAH.js";
 import "../../chunk-PTOLUMGV.js";
-import "../../chunk-72CG6AA2.js";
 import "../../chunk-7EOSDFS3.js";
 import "../../chunk-TGNS7D4F.js";
 import "../../chunk-TZQPOR5A.js";

package/dist/components/sections/register.js

@@ -1,20 +1,20 @@
 import {
   allSectionDefs
-} from "../../chunk-6SLGKRLW.js";
-import "../../chunk-P3NNI3QI.js";
-import "../../chunk-LBHQWIVL.js";
-import "../../chunk-5THS4K5D.js";
+} from "../../chunk-CXQWLG6X.js";
 import "../../chunk-EWNDBKYK.js";
+import "../../chunk-X4PRBGB3.js";
 import "../../chunk-MUTHF2GT.js";
+import "../../chunk-WA6QPDJI.js";
 import "../../chunk-ZSPCE6MZ.js";
+import "../../chunk-5THS4K5D.js";
 import "../../chunk-26ALJO4K.js";
 import "../../chunk-Y4JQGO6G.js";
 import "../../chunk-3COSXTOY.js";
 import "../../chunk-PZJL2S3Z.js";
 import "../../chunk-BS5AQHZG.js";
+import "../../chunk-72CG6AA2.js";
 import "../../chunk-WDSVHKAH.js";
 import "../../chunk-PTOLUMGV.js";
-import "../../chunk-72CG6AA2.js";
 import "../../chunk-7EOSDFS3.js";
 import "../../chunk-TGNS7D4F.js";
 import "../../chunk-TZQPOR5A.js";

package/dist/index.js

@@ -111,6 +111,12 @@ import {
   requireSessionSecret,
   safeNextPath
 } from "./chunk-S2L3BPLS.js";
+import {
+  ensureSanitizer,
+  generateNavLinks,
+  sanitizeHtml,
+  toSectionId
+} from "./chunk-72CG6AA2.js";
 import {
   curatedIcons,
   getIcon
@@ -121,12 +127,6 @@ import {
   editModeEvent,
   navChangeEvent
 } from "./chunk-PTOLUMGV.js";
-import {
-  ensureSanitizer,
-  generateNavLinks,
-  sanitizeHtml,
-  toSectionId
-} from "./chunk-72CG6AA2.js";
 import {
   cn
 } from "./chunk-7EOSDFS3.js";

package/dist/lib/index.js

@@ -20,6 +20,12 @@ import {
   wcagLevel
 } from "../chunk-CZLYECHC.js";
 import "../chunk-S2L3BPLS.js";
+import {
+  ensureSanitizer,
+  generateNavLinks,
+  sanitizeHtml,
+  toSectionId
+} from "../chunk-72CG6AA2.js";
 import {
   curatedIcons,
   getIcon
@@ -30,12 +36,6 @@ import {
   editModeEvent,
   navChangeEvent
 } from "../chunk-PTOLUMGV.js";
-import {
-  ensureSanitizer,
-  generateNavLinks,
-  sanitizeHtml,
-  toSectionId
-} from "../chunk-72CG6AA2.js";
 import {
   cn
 } from "../chunk-7EOSDFS3.js";

package/dist/lib/pdfjs-assets.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The URL contract for pdf.js's runtime assets, shared by the viewer
+ * (PdfCanvasViewer builds getDocument() URLs from it) and by core (its dev
+ * middleware serves, and its build hook copies, the pdfjs-dist package's asset
+ * directories under this path). Self-served from the portal's own origin — a
+ * deliberate decision (2026-08-02) over CDN URLs, so opening a PDF never makes
+ * a third-party request from a client-facing portal.
+ */
+export declare const PDFJS_ASSET_BASE = "/_pdfjs/";
+/** Served at PDFJS_ASSET_BASE + PDFJS_WORKER_FILE; copied from pdfjs-dist/build/. */
+export declare const PDFJS_WORKER_FILE = "pdf.worker.min.mjs";
+/**
+ * Asset directories mirrored verbatim from the pdfjs-dist package root.
+ * cmaps: CJK text; standard_fonts: the standard 14 fonts when not embedded;
+ * wasm: JPX/JBIG2 image decoding + ICC + JS-action sandbox; iccs: ICC profiles.
+ */
+export declare const PDFJS_ASSET_DIRS: readonly ["cmaps", "iccs", "standard_fonts", "wasm"];
+//# sourceMappingURL=pdfjs-assets.d.ts.map

package/dist/lib/pdfjs-assets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdfjs-assets.d.ts","sourceRoot":"","sources":["../../src/lib/pdfjs-assets.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAE3C,qFAAqF;AACrF,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,sDAAuD,CAAC"}

package/dist/lib/pdfjs-assets.js

@@ -0,0 +1,11 @@
+import "../chunk-JSBRDJBE.js";
+
+// src/lib/pdfjs-assets.ts
+var PDFJS_ASSET_BASE = "/_pdfjs/";
+var PDFJS_WORKER_FILE = "pdf.worker.min.mjs";
+var PDFJS_ASSET_DIRS = ["cmaps", "iccs", "standard_fonts", "wasm"];
+export {
+  PDFJS_ASSET_BASE,
+  PDFJS_ASSET_DIRS,
+  PDFJS_WORKER_FILE
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.101",
+  "version": "0.1.103",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
@@ -68,6 +68,10 @@
       "types": "./dist/lib/index-ops.d.ts",
       "default": "./dist/lib/index-ops.js"
     },
+    "./lib/pdfjs-assets": {
+      "types": "./dist/lib/pdfjs-assets.d.ts",
+      "default": "./dist/lib/pdfjs-assets.js"
+    },
     "./lib/media-folders": {
       "types": "./dist/lib/media-folders.d.ts",
       "default": "./dist/lib/media-folders.js"
@@ -143,6 +147,7 @@
     "jose": "^6.2.2",
     "lucide-react": "^1.7.0",
     "marked": "^18.0.5",
+    "pdfjs-dist": "^6.2.108",
     "tailwind-merge": "^3.5.0",
     "zod": "^4.3.6"
   },

package/src/components/docfile/DocFilePane.tsx

@@ -1,12 +1,28 @@
-import { useEffect, useRef, useState } from "react";
-import { Download, X } from "lucide-react";
+import { lazy, Suspense, useEffect, useRef, useState } from "react";
+import {
+  ChevronDown,
+  ChevronUp,
+  Download,
+  MoveHorizontal,
+  X,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react";
 import type { SiteDocument } from "../../lib/documents";
 import { documentFileUrl } from "../../schemas/documents";
 import { lockBodyScroll } from "../../lib/scroll-lock";
+import type { PdfCanvasViewerHandle } from "./PdfCanvasViewer";
 
-/** How long a frame may sit on "loading" before we offer a retry. */
+/** How long a document may sit on "loading" before we offer a retry. */
 const LOAD_TIMEOUT_MS = 15_000;
 
+// Second lazy layer below DocFileOverlay's: opening an HTML document must not
+// pull the pdf.js-backed viewer (or pdf.js itself) over the wire.
+const PdfCanvasViewer = lazy(() => import("./PdfCanvasViewer"));
+
+const barButtonClass =
+  "cursor-pointer rounded-inner p-1.5 text-base-contrast/60 transition-colors hover:text-primary disabled:cursor-default disabled:opacity-40 disabled:hover:text-base-contrast/60";
+
 /**
  * The solid stage: an opaque, flat, bordered pane between the nav edge and the
  * chat edge. Geometry lives in base.css (.doc-file-pane) because it is calc()
@@ -16,6 +32,10 @@ const LOAD_TIMEOUT_MS = 15_000;
  * BELOW the nav and docked chat (z-40) and the mobile nav header / chat sheet
  * (z-50), so all chrome stays reachable. `editor` adds top clearance for the
  * edit route's always-fixed h-16 toolbar.
+ *
+ * PDFs render in PdfCanvasViewer (pdf.js) — themed chrome, identical in every
+ * browser; HTML keeps the sandboxed iframe. The top bar carries the paging and
+ * zoom controls the native viewer chrome used to provide.
  */
 export default function DocFilePane({
   doc,
@@ -24,7 +44,10 @@ export default function DocFilePane({
 }: { doc: SiteDocument; onClose: () => void; editor?: boolean }) {
   const [attempt, setAttempt] = useState(0);
   const [state, setState] = useState<"loading" | "ready" | "error">("loading");
+  const [page, setPage] = useState(1);
+  const [numPages, setNumPages] = useState(0);
   const frameRef = useRef<HTMLIFrameElement | null>(null);
+  const viewerRef = useRef<PdfCanvasViewerHandle | null>(null);
 
   useEffect(() => lockBodyScroll(), []);
 
@@ -40,6 +63,8 @@ export default function DocFilePane({
 
   useEffect(() => {
     setState("loading");
+    setPage(1);
+    setNumPages(0);
     const timer = setTimeout(() => setState((s) => (s === "loading" ? "error" : s)), LOAD_TIMEOUT_MS);
     return () => clearTimeout(timer);
   }, [attempt, doc.url]);
@@ -57,6 +82,8 @@ export default function DocFilePane({
     return () => frame.removeEventListener("error", onError);
   }, [attempt, doc.url]);
 
+  const isPdf = doc.kind === "pdf";
+
   return (
     <div
       role="dialog"
@@ -69,6 +96,59 @@ export default function DocFilePane({
           <span className="truncate text-sm font-medium text-base-contrast">{doc.title}</span>
           <span className="truncate font-mono text-xs text-base-contrast/70">{doc.filename}</span>
         </div>
+        {isPdf && state === "ready" && numPages > 0 && (
+          <div className="flex shrink-0 items-center gap-1">
+            <button
+              type="button"
+              onClick={() => viewerRef.current?.prevPage()}
+              disabled={page <= 1}
+              aria-label="Previous page"
+              className={barButtonClass}
+            >
+              <ChevronUp size={16} aria-hidden="true" />
+            </button>
+            <span
+              aria-label={`Page ${page} of ${numPages}`}
+              className="font-mono text-xs tabular-nums text-base-contrast/70"
+            >
+              {page} / {numPages}
+            </span>
+            <button
+              type="button"
+              onClick={() => viewerRef.current?.nextPage()}
+              disabled={page >= numPages}
+              aria-label="Next page"
+              className={barButtonClass}
+            >
+              <ChevronDown size={16} aria-hidden="true" />
+            </button>
+            <span aria-hidden="true" className="mx-1 h-4 w-px bg-base-200" />
+            <button
+              type="button"
+              onClick={() => viewerRef.current?.zoomOut()}
+              aria-label="Zoom out"
+              className={barButtonClass}
+            >
+              <ZoomOut size={16} aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              onClick={() => viewerRef.current?.fitWidth()}
+              aria-label="Fit to width"
+              className={barButtonClass}
+            >
+              <MoveHorizontal size={16} aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              onClick={() => viewerRef.current?.zoomIn()}
+              aria-label="Zoom in"
+              className={barButtonClass}
+            >
+              <ZoomIn size={16} aria-hidden="true" />
+            </button>
+          </div>
+        )}
         <div className="flex shrink-0 items-center gap-1">
           <a
             // Built by documentFileUrl's `download` option, never by appending
@@ -108,21 +188,36 @@ export default function DocFilePane({
             Retry
           </button>
         </div>
+      ) : isPdf ? (
+        <Suspense
+          fallback={
+            <div className="flex min-h-0 flex-1 items-center justify-center bg-base">
+              <p className="text-sm text-base-contrast/60">Loading document…</p>
+            </div>
+          }
+        >
+          <PdfCanvasViewer
+            key={attempt}
+            url={doc.url}
+            handleRef={viewerRef}
+            onReady={(n) => {
+              setNumPages(n);
+              setState("ready");
+            }}
+            onError={() => setState("error")}
+            onPageChange={setPage}
+          />
+        </Suspense>
       ) : (
         <iframe
           key={attempt}
           ref={frameRef}
-          // PDF open-parameters hide the native viewer's toolbar/side panel in
-          // Chromium so the pane's own top bar is the only chrome; Firefox and
-          // Safari ignore them harmlessly. A client-side fragment: it survives
-          // the gated route's 302 and works on pre-save blob: URLs too.
-          src={doc.kind === "pdf" ? `${doc.url}#toolbar=0&navpanes=0` : doc.url}
+          src={doc.url}
           title={doc.title}
           // Opaque origin for authored HTML: no portal cookies, storage or
           // parent DOM. The ATTRIBUTE applies regardless of origin, so
           // containment survives the bucket tier's 302 to a presigned R2 GET,
-          // where no CSP header comes back. PDFs get the browser's native
-          // viewer, which a sandbox would break.
+          // where no CSP header comes back.
           sandbox={doc.kind === "html" ? "allow-scripts" : undefined}
           onLoad={() => setState("ready")}
           className="min-h-0 w-full flex-1 border-0 bg-base"

package/src/components/docfile/PdfCanvasViewer.tsx

@@ -0,0 +1,459 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { CSSProperties, MutableRefObject } from "react";
+import type { PDFDocumentProxy, PDFPageProxy, RenderTask } from "pdfjs-dist";
+import { PDFJS_ASSET_BASE, PDFJS_WORKER_FILE } from "../../lib/pdfjs-assets";
+
+type PdfjsModule = typeof import("pdfjs-dist");
+
+/**
+ * pdf.js is imported dynamically and only in the browser: primitives is
+ * noExternal in the Astro SSR build, and a static import would pull the
+ * library into the server bundle. The worker and its runtime assets (wasm,
+ * fonts, cmaps) are fetched by URL from /_pdfjs/ — served by core's dev
+ * middleware and copied into the client build output by core's integration —
+ * which sidesteps `new URL(..., import.meta.url)` entirely; that pattern is
+ * fragile under the .portal/ symlink dev architecture.
+ */
+let pdfjsPromise: Promise<PdfjsModule> | null = null;
+function loadPdfjs(): Promise<PdfjsModule> {
+  pdfjsPromise ??= import("pdfjs-dist").then((lib) => {
+    lib.GlobalWorkerOptions.workerSrc = new URL(
+      PDFJS_ASSET_BASE + PDFJS_WORKER_FILE,
+      window.location.origin,
+    ).href;
+    return lib;
+  });
+  return pdfjsPromise;
+}
+
+const ZOOM_MIN = 0.5;
+const ZOOM_MAX = 4;
+const ZOOM_STEP = 1.25;
+/** Content padding of the scroll area (p-4), subtracted for the fit-width scale. */
+const GUTTER_PX = 32;
+/** Debounce for re-rendering canvases while the pane is being resized. */
+const RERENDER_DEBOUNCE_MS = 120;
+/**
+ * Backing-store ceiling per canvas. 2^24 is Safari's canvas area limit — the
+ * pane is desktop-only today, but iPads at >=1024px pass the desktop gate. Past
+ * the cap the canvas renders at reduced resolution and CSS upscales it.
+ */
+const MAX_CANVAS_PIXELS = 16_777_216;
+
+export interface PdfCanvasViewerHandle {
+  goToPage(n: number): void;
+  nextPage(): void;
+  prevPage(): void;
+  zoomIn(): void;
+  zoomOut(): void;
+  fitWidth(): void;
+}
+
+interface PdfCanvasViewerProps {
+  url: string;
+  /** Plain mutable ref (not forwardRef) so React.lazy stays trivial. */
+  handleRef?: MutableRefObject<PdfCanvasViewerHandle | null>;
+  onReady: (numPages: number) => void;
+  onError: () => void;
+  /** 1-based, fired only on change; feeds the pane top bar's page indicator. */
+  onPageChange: (page: number) => void;
+}
+
+interface PageSlot {
+  /** Backing-store scale of the last completed or in-flight render. */
+  renderedKey: string | null;
+  pendingKey: string | null;
+  task: RenderTask | null;
+  textLayerStarted: boolean;
+}
+
+const emptySlot = (): PageSlot => ({
+  renderedKey: null,
+  pendingKey: null,
+  task: null,
+  textLayerStarted: false,
+});
+
+/**
+ * Canvas-based PDF viewer: continuous vertical scroll of all pages, fit-width
+ * by default, virtualized rendering. Owns its scroll container; chrome (page
+ * indicator, zoom buttons, close) belongs to DocFilePane's top bar, driven
+ * through `handleRef`. Page CONTENT is rendered untinted in both themes — a
+ * brand guide's colours are the product — only the surround follows `.dark`.
+ */
+export default function PdfCanvasViewer({
+  url,
+  handleRef,
+  onReady,
+  onError,
+  onPageChange,
+}: PdfCanvasViewerProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const wrapperRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const canvasRefs = useRef<(HTMLCanvasElement | null)[]>([]);
+  const textRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const slots = useRef<PageSlot[]>([]);
+  const libRef = useRef<PdfjsModule | null>(null);
+  const pagesRef = useRef<PDFPageProxy[]>([]);
+  const currentPageRef = useRef(1);
+
+  const [doc, setDoc] = useState<PDFDocumentProxy | null>(null);
+  const [dims, setDims] = useState<{ w: number; h: number }[] | null>(null);
+  const [containerWidth, setContainerWidth] = useState<number | null>(null);
+  const [zoom, setZoom] = useState(1);
+  const [visible, setVisible] = useState<ReadonlySet<number>>(new Set());
+
+  // Parent callbacks are kept in refs so inline lambdas in DocFilePane don't
+  // re-trigger the load effect.
+  const callbacks = useRef({ onReady, onError, onPageChange });
+  callbacks.current = { onReady, onError, onPageChange };
+
+  useEffect(() => {
+    let cancelled = false;
+    let loadingTask: ReturnType<PdfjsModule["getDocument"]> | null = null;
+    void (async () => {
+      try {
+        const lib = await loadPdfjs();
+        if (cancelled) return;
+        libRef.current = lib;
+        const base = new URL(PDFJS_ASSET_BASE, window.location.origin).href;
+        loadingTask = lib.getDocument({
+          url,
+          cMapUrl: `${base}cmaps/`,
+          standardFontDataUrl: `${base}standard_fonts/`,
+          wasmUrl: `${base}wasm/`,
+          iccUrl: `${base}iccs/`,
+        });
+        const pdf = await loadingTask.promise;
+        if (cancelled) return;
+        // All page proxies up front: their scale-1 viewports give every
+        // placeholder its true aspect ratio, so the scroll height is stable
+        // from the first paint. Page parsing stays off-thread in the worker.
+        const pages = await Promise.all(
+          Array.from({ length: pdf.numPages }, (_, i) => pdf.getPage(i + 1)),
+        );
+        if (cancelled) return;
+        pagesRef.current = pages;
+        slots.current = pages.map(emptySlot);
+        setDoc(pdf);
+        setDims(
+          pages.map((p) => {
+            const v = p.getViewport({ scale: 1 });
+            return { w: v.width, h: v.height };
+          }),
+        );
+        callbacks.current.onReady(pdf.numPages);
+      } catch {
+        if (!cancelled) callbacks.current.onError();
+      }
+    })();
+    return () => {
+      cancelled = true;
+      for (const slot of slots.current) slot.task?.cancel();
+      slots.current = [];
+      pagesRef.current = [];
+      // Destroys the document and its worker channel too.
+      void loadingTask?.destroy();
+    };
+  }, [url]);
+
+  // Deps on `dims`: the scroll container only exists once the document has
+  // loaded (the early "Loading document…" return renders no container), so an
+  // on-mount observer would attach to nothing.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (typeof ResizeObserver === "undefined") {
+      setContainerWidth(el.getBoundingClientRect().width || null);
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width;
+      if (width) setContainerWidth(width);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [dims]);
+
+  // Virtualization: only pages within ~one viewport of the visible band get a
+  // canvas and text layer; the rest stay as correctly-sized placeholders.
+  useEffect(() => {
+    if (!dims) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setVisible(new Set(dims.map((_, i) => i)));
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        setVisible((prev) => {
+          const next = new Set(prev);
+          for (const entry of entries) {
+            const idx = Number((entry.target as HTMLElement).dataset.pageIndex);
+            if (entry.isIntersecting) next.add(idx);
+            else next.delete(idx);
+          }
+          return next;
+        });
+      },
+      { root: containerRef.current, rootMargin: "100% 0px 100% 0px" },
+    );
+    for (const el of wrapperRefs.current) if (el) observer.observe(el);
+    return () => observer.disconnect();
+  }, [dims]);
+
+  const fitScale = useMemo(() => {
+    if (!dims?.length || !containerWidth) return null;
+    const maxW = Math.max(...dims.map((d) => d.w));
+    return Math.max(0.1, (containerWidth - GUTTER_PX) / maxW);
+  }, [dims, containerWidth]);
+  const scale = fitScale == null ? null : fitScale * zoom;
+
+  // Wrapper geometry and the text layer's --total-scale-factor track `scale`
+  // live; the expensive canvas re-render trails behind a debounce. While it
+  // lags, CSS stretches the stale bitmap — same behaviour as every pdf.js
+  // viewer mid-pinch. The first scale renders immediately.
+  const [renderScale, setRenderScale] = useState<number | null>(null);
+  const renderScaleRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (scale == null || scale === renderScaleRef.current) return;
+    const apply = () => {
+      renderScaleRef.current = scale;
+      setRenderScale(scale);
+    };
+    if (renderScaleRef.current == null) {
+      apply();
+      return;
+    }
+    const t = setTimeout(apply, RERENDER_DEBOUNCE_MS);
+    return () => clearTimeout(t);
+  }, [scale]);
+
+  useEffect(() => {
+    if (!doc || !dims || renderScale == null) return;
+    const lib = libRef.current;
+    if (!lib) return;
+
+    const renderPage = (i: number) => {
+      const slot = slots.current[i];
+      const canvas = canvasRefs.current[i];
+      const page = pagesRef.current[i];
+      if (!slot || !canvas || !page) return;
+
+      const dpr = (typeof window !== "undefined" && window.devicePixelRatio) || 1;
+      let backingScale = renderScale * dpr;
+      const px = dims[i].w * backingScale * (dims[i].h * backingScale);
+      if (px > MAX_CANVAS_PIXELS) backingScale *= Math.sqrt(MAX_CANVAS_PIXELS / px);
+      const key = backingScale.toFixed(4);
+      if (slot.renderedKey === key || slot.pendingKey === key) return;
+
+      slot.task?.cancel();
+      const viewport = page.getViewport({ scale: backingScale });
+      canvas.width = Math.floor(viewport.width);
+      canvas.height = Math.floor(viewport.height);
+      slot.pendingKey = key;
+      const task = page.render({ canvas, viewport });
+      slot.task = task;
+      task.promise.then(
+        () => {
+          slot.renderedKey = key;
+          slot.pendingKey = null;
+          slot.task = null;
+        },
+        () => {
+          // Cancelled (scale changed / page scrolled away) — a successor
+          // render owns the canvas now.
+          slot.pendingKey = null;
+        },
+      );
+
+      // The text layer is scale-independent: spans are positioned in
+      // percentages and sized via --total-scale-factor, so it is built once
+      // per page and zoom is handled entirely by the CSS variable.
+      const textDiv = textRefs.current[i];
+      if (textDiv && !slot.textLayerStarted) {
+        slot.textLayerStarted = true;
+        const textLayer = new lib.TextLayer({
+          textContentSource: page.streamTextContent(),
+          container: textDiv,
+          viewport: page.getViewport({ scale: renderScale }),
+        });
+        textLayer.render().catch(() => {
+          slot.textLayerStarted = false;
+        });
+      }
+    };
+
+    for (const i of visible) renderPage(i);
+    // Pages that scrolled out of the margin lost their canvas/text-layer DOM
+    // (React unmounted them) — reset bookkeeping so a return renders fresh.
+    slots.current.forEach((slot, i) => {
+      if (visible.has(i)) return;
+      slot.task?.cancel();
+      Object.assign(slot, emptySlot());
+    });
+  }, [doc, dims, renderScale, visible]);
+
+  // Zoom preserves the reading position: wrappers resized this commit, so
+  // scale the scroll offsets by the same ratio (the fixed 16px gaps make it
+  // approximate, but within a fraction of a page). The scrollTop write fires a
+  // scroll event, which also keeps the page indicator honest.
+  const prevScaleRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (scale == null) return;
+    const prev = prevScaleRef.current;
+    prevScaleRef.current = scale;
+    const container = containerRef.current;
+    if (!container || prev == null || prev === scale) return;
+    const ratio = scale / prev;
+    container.scrollTop *= ratio;
+    container.scrollLeft *= ratio;
+  }, [scale]);
+
+  const goToPage = (n: number) => {
+    const total = pagesRef.current.length;
+    const clamped = Math.min(Math.max(n, 1), total || 1);
+    const wrapper = wrapperRefs.current[clamped - 1];
+    const container = containerRef.current;
+    if (!wrapper || !container) return;
+    container.scrollTo({ top: wrapper.offsetTop - 16 });
+    // Update eagerly rather than waiting for the scroll handler's rAF, so a
+    // rapid prev/next click series advances one page per click, every click.
+    if (clamped !== currentPageRef.current) {
+      currentPageRef.current = clamped;
+      callbacks.current.onPageChange(clamped);
+    }
+  };
+  const nextPage = () => goToPage(currentPageRef.current + 1);
+  const prevPage = () => goToPage(currentPageRef.current - 1);
+  const clampZoom = (z: number) => Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, z));
+  const zoomIn = () => setZoom((z) => clampZoom(z * ZOOM_STEP));
+  const zoomOut = () => setZoom((z) => clampZoom(z / ZOOM_STEP));
+  const fitWidth = () => setZoom(1);
+
+  useEffect(() => {
+    if (!handleRef) return;
+    handleRef.current = { goToPage, nextPage, prevPage, zoomIn, zoomOut, fitWidth };
+    return () => {
+      handleRef.current = null;
+    };
+  });
+
+  // Escape stays DocFilePane's: it closes the pane. Everything here bails on
+  // modifier chords so browser zoom (Ctrl/Cmd +/-) keeps working.
+  useEffect(() => {
+    if (!doc) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return;
+      const target = e.target as HTMLElement | null;
+      if (
+        target &&
+        (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)
+      ) {
+        return;
+      }
+      switch (e.key) {
+        case "PageDown":
+          nextPage();
+          break;
+        case "PageUp":
+          prevPage();
+          break;
+        case "Home":
+          goToPage(1);
+          break;
+        case "End":
+          goToPage(pagesRef.current.length);
+          break;
+        case "+":
+        case "=":
+          zoomIn();
+          break;
+        case "-":
+        case "_":
+          zoomOut();
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [doc]);
+
+  const scrollRaf = useRef(0);
+  const onScroll = () => {
+    if (scrollRaf.current) return;
+    scrollRaf.current = requestAnimationFrame(() => {
+      scrollRaf.current = 0;
+      const container = containerRef.current;
+      if (!container) return;
+      // Current page = the last one whose top has passed the upper 40% of the
+      // viewport — matches how the native viewer flips its indicator.
+      const threshold = container.scrollTop + container.clientHeight * 0.4;
+      let current = 1;
+      wrapperRefs.current.forEach((el, i) => {
+        if (el && el.offsetTop <= threshold) current = i + 1;
+      });
+      if (current !== currentPageRef.current) {
+        currentPageRef.current = current;
+        callbacks.current.onPageChange(current);
+      }
+    });
+  };
+  useEffect(() => () => cancelAnimationFrame(scrollRaf.current), []);
+
+  if (!dims) {
+    return (
+      <div className="flex min-h-0 flex-1 items-center justify-center bg-base">
+        <p className="text-sm text-base-contrast/60">Loading document…</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      onScroll={onScroll}
+      tabIndex={-1}
+      data-testid="pdf-canvas-viewer"
+      className="relative min-h-0 flex-1 overflow-auto bg-base outline-none"
+    >
+      <div className="mx-auto flex w-max min-w-full flex-col items-center gap-4 p-4">
+        {dims.map((d, i) => (
+          <div
+            key={i}
+            ref={(el) => {
+              wrapperRefs.current[i] = el;
+            }}
+            data-page-index={i}
+            className="relative border border-base-200 bg-white shadow-sm"
+            style={{
+              width: Math.floor(d.w * (scale ?? 1)),
+              height: Math.floor(d.h * (scale ?? 1)),
+            }}
+          >
+            {visible.has(i) && (
+              <>
+                <canvas
+                  ref={(el) => {
+                    canvasRefs.current[i] = el;
+                  }}
+                  aria-hidden="true"
+                  className="absolute inset-0 h-full w-full"
+                />
+                <div
+                  ref={(el) => {
+                    textRefs.current[i] = el;
+                  }}
+                  className="pdf-text-layer"
+                  style={{ "--total-scale-factor": String(scale ?? 1) } as CSSProperties}
+                />
+              </>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/lib/pdfjs-assets.ts

@@ -0,0 +1,19 @@
+/**
+ * The URL contract for pdf.js's runtime assets, shared by the viewer
+ * (PdfCanvasViewer builds getDocument() URLs from it) and by core (its dev
+ * middleware serves, and its build hook copies, the pdfjs-dist package's asset
+ * directories under this path). Self-served from the portal's own origin — a
+ * deliberate decision (2026-08-02) over CDN URLs, so opening a PDF never makes
+ * a third-party request from a client-facing portal.
+ */
+export const PDFJS_ASSET_BASE = "/_pdfjs/";
+
+/** Served at PDFJS_ASSET_BASE + PDFJS_WORKER_FILE; copied from pdfjs-dist/build/. */
+export const PDFJS_WORKER_FILE = "pdf.worker.min.mjs";
+
+/**
+ * Asset directories mirrored verbatim from the pdfjs-dist package root.
+ * cmaps: CJK text; standard_fonts: the standard 14 fonts when not embedded;
+ * wasm: JPX/JBIG2 image decoding + ICC + JS-action sandbox; iccs: ICC profiles.
+ */
+export const PDFJS_ASSET_DIRS = ["cmaps", "iccs", "standard_fonts", "wasm"] as const;

package/dist/{chunk-LBHQWIVL.js → chunk-WA6QPDJI.js}

@@ -1,12 +1,12 @@
+import {
+  Button,
+  usePages
+} from "./chunk-ZSPCE6MZ.js";
 import {
   Checkbox,
   FormLabel,
   Input
 } from "./chunk-5THS4K5D.js";
-import {
-  Button,
-  usePages
-} from "./chunk-ZSPCE6MZ.js";
 import {
   DeleteIcon,
   DragHandle,

package/dist/{chunk-P3NNI3QI.js → chunk-X4PRBGB3.js}

@@ -1,8 +1,3 @@
-import {
-  Checkbox,
-  FormLabel,
-  Input
-} from "./chunk-5THS4K5D.js";
 import {
   EditableGrid,
   EditablePlainText,
@@ -10,6 +5,11 @@ import {
   containerGridClass,
   useEditableCollection
 } from "./chunk-MUTHF2GT.js";
+import {
+  Checkbox,
+  FormLabel,
+  Input
+} from "./chunk-5THS4K5D.js";
 import {
   AddIcon,
   DeleteIcon,