viewdoc 0.1.1 → 0.2.1

package/dist/chunk-US2KTONG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/viewers/PdfPage.tsx","../src/viewers/usePdfDocument.ts","../src/viewers/useVisiblePage.ts","../src/viewers/PdfViewer.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport type { PDFDocumentProxy } from 'pdfjs-dist'\n\nexport interface PdfPageProps {\n  doc: PDFDocumentProxy\n  pageNumber: number\n  /** Render resolution multiplier. Higher = crisper at deep zoom, more memory. Default: 1.5 */\n  renderScale?: number\n}\n\nexport function PdfPage({ doc, pageNumber, renderScale = 1.5 }: PdfPageProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const renderTaskRef = useRef<{ cancel: () => void } | null>(null)\n\n  useEffect(() => {\n    let cancelled = false\n\n    doc.getPage(pageNumber).then((page) => {\n      if (cancelled) return\n      const viewport = page.getViewport({ scale: renderScale })\n      const canvas = canvasRef.current\n      if (!canvas) return\n      const context = canvas.getContext('2d')\n      if (!context) return\n\n      canvas.width = viewport.width\n      canvas.height = viewport.height\n      canvas.style.width = `${viewport.width / renderScale}px`\n      canvas.style.height = `${viewport.height / renderScale}px`\n\n      const renderTask = page.render({ canvasContext: context, viewport, canvas })\n      renderTaskRef.current = renderTask\n      renderTask.promise.catch(() => {\n        // ignore cancellation errors from rapid re-renders\n      })\n    })\n\n    return () => {\n      cancelled = true\n      renderTaskRef.current?.cancel()\n    }\n  }, [doc, pageNumber, renderScale])\n\n  return <canvas ref={canvasRef} className=\"vd-pdf-page\" data-page-number={pageNumber} />\n}\n","import { useEffect, useState } from 'react'\nimport * as pdfjsLib from 'pdfjs-dist'\nimport type { PDFDocumentLoadingTask, PDFDocumentProxy } from 'pdfjs-dist'\n\npdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString()\n\nexport interface UsePdfDocumentResult {\n  doc: PDFDocumentProxy | null\n  numPages: number\n  error: Error | null\n  loading: boolean\n}\n\nexport function usePdfDocument(uri: string): UsePdfDocumentResult {\n  const [doc, setDoc] = useState<PDFDocumentProxy | null>(null)\n  const [error, setError] = useState<Error | null>(null)\n  const [loading, setLoading] = useState(true)\n\n  useEffect(() => {\n    let cancelled = false\n    setLoading(true)\n    setError(null)\n    setDoc(null)\n\n    const loadingTask: PDFDocumentLoadingTask = pdfjsLib.getDocument({ url: uri })\n    loadingTask.promise\n      .then((pdf) => {\n        if (cancelled) return\n        setDoc(pdf)\n        setLoading(false)\n      })\n      .catch((err: Error) => {\n        if (!cancelled) {\n          setError(err)\n          setLoading(false)\n        }\n      })\n\n    return () => {\n      cancelled = true\n      loadingTask.destroy()\n    }\n  }, [uri])\n\n  return { doc, numPages: doc?.numPages ?? 0, error, loading }\n}\n","import { useEffect, useState } from 'react'\n\n/** Tracks which page (by data-page-number) is most visible inside the given scroll container. */\nexport function useVisiblePage(containerRef: React.RefObject<HTMLElement>, numPages: number): number {\n  const [currentPage, setCurrentPage] = useState(1)\n\n  useEffect(() => {\n    const root = containerRef.current\n    if (!root || numPages === 0) return\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const mostVisible = entries\n          .filter((e) => e.isIntersecting)\n          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]\n        if (mostVisible) {\n          const page = Number((mostVisible.target as HTMLElement).dataset.pageNumber)\n          if (page) setCurrentPage(page)\n        }\n      },\n      { root, threshold: [0.25, 0.5, 0.75] }\n    )\n\n    const pages = root.querySelectorAll('[data-page-number]')\n    pages.forEach((el) => observer.observe(el))\n\n    return () => observer.disconnect()\n  }, [containerRef, numPages])\n\n  return currentPage\n}\n","import type { CSSProperties } from 'react'\nimport { ViewerShell } from '../core/ViewerShell'\nimport type { ViewerTheme } from '../core/theme'\nimport type { Position } from '../core/useDraggable'\nimport { useZoomPan } from '../core/useZoomPan'\nimport { PdfPage } from './PdfPage'\nimport { usePdfDocument } from './usePdfDocument'\nimport { useVisiblePage } from './useVisiblePage'\n\nexport interface PdfViewerProps {\n  /** URL or data URI of the PDF to display. */\n  uri: string\n  /** Used as the suggested filename on download. */\n  fileName?: string\n  className?: string\n  style?: CSSProperties\n\n  /** Width of the viewer. Accepts any CSS size (e.g. 1200, '1200px', '100%'). Default: 1200. */\n  width?: number | string\n  /** Height of the viewer. Accepts any CSS size (e.g. 700, '700px', '100vh'). Default: 700. */\n  height?: number | string\n\n  /** Minimum zoom scale. Default: 0.25 */\n  minScale?: number\n  /** Maximum zoom scale. Default: 5 */\n  maxScale?: number\n  /** Zoom increment per step (buttons / Ctrl+scroll). Default: 0.25 */\n  zoomStep?: number\n  /** Canvas render resolution multiplier (crispness at high zoom). Default: 1.5 */\n  renderScale?: number\n\n  /** Show zoom in/out and reset-to-100% controls. Default: true. */\n  enableZoomControls?: boolean\n  /** Allow Ctrl/Cmd + scroll wheel to zoom. Default: true. */\n  enableWheelZoom?: boolean\n  /** Show the fullscreen toggle button. Default: true. */\n  enableFullscreen?: boolean\n  /** Show the download button. Default: true. */\n  enableDownload?: boolean\n  /** Called when the download button is clicked. If omitted, downloads `uri` directly. */\n  onDownload?: () => void\n  /** Colors/radii to override the default look (toolbar background, text color, etc). */\n  theme?: ViewerTheme\n\n  /** Render as a floating window (position: fixed) that can be dragged, instead of filling the parent. Default: true. */\n  floating?: boolean\n  /** When floating, allow dragging the window by its toolbar. Default: true. */\n  windowDraggable?: boolean\n  /** Initial position when floating. Default: centered in the viewport. */\n  defaultPosition?: Position\n}\n\nfunction defaultDownload(uri: string, fileName?: string) {\n  const link = document.createElement('a')\n  link.href = uri\n  link.download = fileName ?? ''\n  link.rel = 'noopener'\n  document.body.appendChild(link)\n  link.click()\n  document.body.removeChild(link)\n}\n\nexport function PdfViewer({\n  uri,\n  fileName,\n  className,\n  style,\n  width,\n  height,\n  minScale = 0.25,\n  maxScale = 5,\n  zoomStep,\n  renderScale,\n  enableZoomControls = true,\n  enableWheelZoom = true,\n  enableFullscreen = true,\n  enableDownload = true,\n  onDownload,\n  theme,\n  floating = true,\n  windowDraggable = true,\n  defaultPosition,\n}: PdfViewerProps) {\n  const zoomPan = useZoomPan({\n    minScale,\n    maxScale,\n    zoomStep,\n    enablePan: false,\n    enableDragScroll: true,\n    enableWheelZoom,\n  })\n  const { doc, numPages, error, loading } = usePdfDocument(uri)\n  const currentPage = useVisiblePage(zoomPan.containerRef, numPages)\n\n  const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload(uri, fileName)) : undefined\n\n  const wrapperStyle: CSSProperties = floating\n    ? { ...style }\n    : { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', ...style }\n\n  return (\n    <div className={className} style={wrapperStyle}>\n      <ViewerShell\n        zoomPan={zoomPan}\n        onDownload={handleDownload}\n        enableZoomControls={enableZoomControls}\n        enableFullscreen={enableFullscreen}\n        enablePan={false}\n        theme={theme}\n        width={width}\n        height={height}\n        floating={floating}\n        draggable={windowDraggable}\n        defaultPosition={defaultPosition}\n        transformOrigin=\"top center\"\n        toolbarExtra={\n          numPages > 0 ? (\n            <span className=\"vd-pdf-page-indicator\">\n              Page {currentPage} / {numPages}\n            </span>\n          ) : undefined\n        }\n      >\n        {loading && <span className=\"vd-doc-status\">Loading PDF…</span>}\n        {error && <span className=\"vd-doc-status\">Failed to load PDF: {error.message}</span>}\n        {doc && (\n          <div className=\"vd-pdf-pages\">\n            {Array.from({ length: numPages }, (_, i) => (\n              <PdfPage key={i + 1} doc={doc} pageNumber={i + 1} renderScale={renderScale} />\n            ))}\n          </div>\n        )}\n      </ViewerShell>\n    </div>\n  )\n}\n"],"mappings":"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","names":["useEffect","useEffect","useState","jsx"]}

package/dist/docx.cjs

@@ -0,0 +1,570 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/entry-docx.ts
+var entry_docx_exports = {};
+__export(entry_docx_exports, {
+  DocxViewer: () => DocxViewer
+});
+module.exports = __toCommonJS(entry_docx_exports);
+
+// src/core/ViewerShell.tsx
+var import_react2 = require("react");
+
+// src/core/useDraggable.ts
+var import_react = require("react");
+function useDraggable(options = {}) {
+  const { defaultPosition = { x: 80, y: 80 }, draggable = true } = options;
+  const [position, setPosition] = (0, import_react.useState)(defaultPosition);
+  const onDragHandlePointerDown = (0, import_react.useCallback)(
+    (e) => {
+      if (!draggable) return;
+      e.preventDefault();
+      const startX = e.clientX;
+      const startY = e.clientY;
+      setPosition((current) => {
+        const originX = current.x;
+        const originY = current.y;
+        const onMove = (ev) => {
+          setPosition({ x: originX + (ev.clientX - startX), y: originY + (ev.clientY - startY) });
+        };
+        const onUp = () => {
+          window.removeEventListener("pointermove", onMove);
+          window.removeEventListener("pointerup", onUp);
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+        return current;
+      });
+    },
+    [draggable]
+  );
+  return { position, onDragHandlePointerDown };
+}
+
+// src/core/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Svg(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props
+    }
+  );
+}
+function ZoomOutIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+  ] });
+}
+function ZoomInIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+  ] });
+}
+function DownloadIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3v12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 10l5 5 5-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 21h14" })
+  ] });
+}
+function FullscreenEnterIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "9 21 3 21 3 15" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+  ] });
+}
+function ResetIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 12a9 9 0 1 0 3-6.7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "3 3 3 8 8 8" })
+  ] });
+}
+function GripIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "5 9 2 12 5 15" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "9 5 12 2 15 5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "15 19 12 22 9 19" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "19 9 22 12 19 15" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "2", x2: "12", y2: "22" })
+  ] });
+}
+function FullscreenExitIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "9 3 9 9 3 9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "15 21 15 15 21 15" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "9", y1: "9", x2: "3", y2: "3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "15", y1: "15", x2: "21", y2: "21" })
+  ] });
+}
+
+// src/core/Toolbar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Toolbar({
+  scale,
+  onZoomIn,
+  onZoomOut,
+  onReset,
+  onFullscreen,
+  onDownload,
+  isFullscreen = false,
+  showZoomControls = true,
+  dragHandle,
+  onDragHandlePointerDown,
+  extra
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vd-toolbar", role: "toolbar", "aria-label": "Document viewer controls", children: [
+    dragHandle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "span",
+      {
+        className: "vd-toolbar-drag-handle",
+        onPointerDown: onDragHandlePointerDown,
+        title: "Drag to move",
+        "aria-label": "Drag to move",
+        children: dragHandle
+      }
+    ),
+    showZoomControls && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "vd-toolbar-btn",
+          onClick: onZoomOut,
+          "aria-label": "Zoom out",
+          title: "Zoom out",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ZoomOutIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "vd-toolbar-scale", "aria-live": "polite", children: [
+        Math.round(scale * 100),
+        "%"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "vd-toolbar-btn", onClick: onZoomIn, "aria-label": "Zoom in", title: "Zoom in", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ZoomInIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "vd-toolbar-btn",
+          onClick: onReset,
+          "aria-label": "Reset zoom to 100%",
+          title: "Reset zoom to 100%",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ResetIcon, {})
+        }
+      )
+    ] }),
+    extra,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vd-toolbar-spacer" }),
+    onDownload && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "vd-toolbar-btn",
+        onClick: onDownload,
+        "aria-label": "Download file",
+        title: "Download file",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DownloadIcon, {})
+      }
+    ),
+    onFullscreen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "vd-toolbar-btn",
+        onClick: onFullscreen,
+        "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+        title: isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+        children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FullscreenExitIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FullscreenEnterIcon, {})
+      }
+    )
+  ] });
+}
+
+// src/core/theme.ts
+var THEME_VAR_MAP = {
+  background: "--vd-bg",
+  toolbarBackground: "--vd-toolbar-bg",
+  toolbarBorderColor: "--vd-toolbar-border-color",
+  toolbarButtonHoverBackground: "--vd-toolbar-btn-hover-bg",
+  textColor: "--vd-text-color",
+  borderRadius: "--vd-border-radius",
+  toolbarButtonRadius: "--vd-toolbar-btn-radius"
+};
+function themeToStyle(theme) {
+  if (!theme) return void 0;
+  const style = {};
+  for (const key of Object.keys(theme)) {
+    const value = theme[key];
+    if (value) style[THEME_VAR_MAP[key]] = value;
+  }
+  return style;
+}
+
+// src/core/ViewerShell.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ViewerShell({
+  zoomPan,
+  onDownload,
+  toolbarExtra,
+  children,
+  enableZoomControls = true,
+  enableFullscreen = true,
+  enablePan = true,
+  theme,
+  width,
+  height,
+  floating = true,
+  draggable = true,
+  defaultPosition,
+  transformOrigin
+}) {
+  const rootRef = (0, import_react2.useRef)(null);
+  const [isFullscreen, setIsFullscreen] = (0, import_react2.useState)(false);
+  const effectiveWidth = typeof width === "number" ? width : 1200;
+  const effectiveHeight = typeof height === "number" ? height : 700;
+  const resolvedDefaultPosition = defaultPosition ?? (typeof window !== "undefined" ? {
+    x: Math.max(0, (window.innerWidth - effectiveWidth) / 2),
+    y: Math.max(0, (window.innerHeight - effectiveHeight) / 2)
+  } : { x: 80, y: 80 });
+  const { position, onDragHandlePointerDown } = useDraggable({
+    defaultPosition: resolvedDefaultPosition,
+    draggable
+  });
+  (0, import_react2.useEffect)(() => {
+    const onChange = () => setIsFullscreen(document.fullscreenElement === rootRef.current);
+    document.addEventListener("fullscreenchange", onChange);
+    return () => document.removeEventListener("fullscreenchange", onChange);
+  }, []);
+  const onFullscreen = (0, import_react2.useCallback)(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      el.requestFullscreen();
+    }
+  }, []);
+  const sizeStyle = {
+    width: width ?? 1200,
+    height: height ?? 700
+  };
+  const floatingStyle = floating ? { position: "fixed", left: position.x, top: position.y } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: `vd-shell${floating ? " vd-shell--floating" : ""}`,
+      ref: rootRef,
+      style: { ...themeToStyle(theme), ...sizeStyle, ...floatingStyle },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Toolbar,
+          {
+            scale: zoomPan.scale,
+            onZoomIn: zoomPan.zoomIn,
+            onZoomOut: zoomPan.zoomOut,
+            onReset: zoomPan.resetZoom,
+            onFullscreen: enableFullscreen ? onFullscreen : void 0,
+            onDownload,
+            isFullscreen,
+            showZoomControls: enableZoomControls,
+            dragHandle: floating && draggable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GripIcon, {}) : void 0,
+            onDragHandlePointerDown: floating && draggable ? onDragHandlePointerDown : void 0,
+            extra: toolbarExtra
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: `vd-canvas${enablePan ? "" : " vd-canvas--no-pan"}`,
+            ref: zoomPan.containerRef,
+            onWheel: zoomPan.handlers.onWheel,
+            onPointerDown: zoomPan.handlers.onPointerDown,
+            onPointerMove: zoomPan.handlers.onPointerMove,
+            onPointerUp: zoomPan.handlers.onPointerUp,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: "vd-canvas-content",
+                style: {
+                  transform: `translate(${zoomPan.translateX}px, ${zoomPan.translateY}px) scale(${zoomPan.scale})`,
+                  transformOrigin
+                },
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/core/useZoomPan.ts
+var import_react3 = require("react");
+var DEFAULT_MIN = 0.1;
+var DEFAULT_MAX = 8;
+var DEFAULT_STEP = 0.25;
+function useZoomPan(options = {}) {
+  const {
+    minScale = DEFAULT_MIN,
+    maxScale = DEFAULT_MAX,
+    zoomStep = DEFAULT_STEP,
+    enablePan = true,
+    enableWheelZoom = true,
+    enableDragScroll = false
+  } = options;
+  const [state, setState] = (0, import_react3.useState)({ scale: 1, translateX: 0, translateY: 0 });
+  const containerRef = (0, import_react3.useRef)(null);
+  const dragState = (0, import_react3.useRef)({
+    dragging: false,
+    startX: 0,
+    startY: 0,
+    originX: 0,
+    originY: 0
+  });
+  const scrollDragState = (0, import_react3.useRef)(
+    { dragging: false, startX: 0, startY: 0, originLeft: 0, originTop: 0 }
+  );
+  const clamp = (0, import_react3.useCallback)(
+    (value) => Math.min(maxScale, Math.max(minScale, value)),
+    [minScale, maxScale]
+  );
+  const setScale = (0, import_react3.useCallback)(
+    (scale) => setState((prev) => ({ ...prev, scale: clamp(scale) })),
+    [clamp]
+  );
+  const zoomIn = (0, import_react3.useCallback)(() => setScale(state.scale + zoomStep), [setScale, state.scale, zoomStep]);
+  const zoomOut = (0, import_react3.useCallback)(() => setScale(state.scale - zoomStep), [setScale, state.scale, zoomStep]);
+  const resetZoom = (0, import_react3.useCallback)(() => setState({ scale: 1, translateX: 0, translateY: 0 }), []);
+  const onWheel = (0, import_react3.useCallback)(
+    (e) => {
+      if (!enableWheelZoom) return;
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? -zoomStep : zoomStep;
+      setScale(state.scale + delta);
+    },
+    [enableWheelZoom, setScale, state.scale, zoomStep]
+  );
+  const onPointerDown = (0, import_react3.useCallback)(
+    (e) => {
+      if (enablePan) {
+        dragState.current = {
+          dragging: true,
+          startX: e.clientX,
+          startY: e.clientY,
+          originX: state.translateX,
+          originY: state.translateY
+        };
+        e.target.setPointerCapture(e.pointerId);
+      } else if (enableDragScroll && containerRef.current) {
+        scrollDragState.current = {
+          dragging: true,
+          startX: e.clientX,
+          startY: e.clientY,
+          originLeft: containerRef.current.scrollLeft,
+          originTop: containerRef.current.scrollTop
+        };
+        e.target.setPointerCapture(e.pointerId);
+      }
+    },
+    [enablePan, enableDragScroll, state.translateX, state.translateY]
+  );
+  const onPointerMove = (0, import_react3.useCallback)(
+    (e) => {
+      if (enablePan) {
+        if (!dragState.current.dragging) return;
+        const dx = e.clientX - dragState.current.startX;
+        const dy = e.clientY - dragState.current.startY;
+        setState((prev) => ({
+          ...prev,
+          translateX: dragState.current.originX + dx,
+          translateY: dragState.current.originY + dy
+        }));
+      } else if (enableDragScroll) {
+        if (!scrollDragState.current.dragging || !containerRef.current) return;
+        const dx = e.clientX - scrollDragState.current.startX;
+        const dy = e.clientY - scrollDragState.current.startY;
+        containerRef.current.scrollLeft = scrollDragState.current.originLeft - dx;
+        containerRef.current.scrollTop = scrollDragState.current.originTop - dy;
+      }
+    },
+    [enablePan, enableDragScroll]
+  );
+  const onPointerUp = (0, import_react3.useCallback)(
+    (e) => {
+      if (enablePan) {
+        dragState.current.dragging = false;
+        e.target.releasePointerCapture(e.pointerId);
+      } else if (enableDragScroll) {
+        scrollDragState.current.dragging = false;
+        e.target.releasePointerCapture(e.pointerId);
+      }
+    },
+    [enablePan, enableDragScroll]
+  );
+  return {
+    ...state,
+    containerRef,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    setScale,
+    handlers: { onWheel, onPointerDown, onPointerMove, onPointerUp }
+  };
+}
+
+// src/viewers/useDocxHtml.ts
+var import_react4 = require("react");
+var import_mammoth = __toESM(require("mammoth"), 1);
+function useDocxHtml(uri) {
+  const [html, setHtml] = (0, import_react4.useState)(null);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const [loading, setLoading] = (0, import_react4.useState)(true);
+  (0, import_react4.useEffect)(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    setHtml(null);
+    fetch(uri).then((res) => {
+      if (!res.ok) throw new Error(`Failed to fetch document: ${res.status} ${res.statusText}`);
+      return res.arrayBuffer();
+    }).then(
+      (arrayBuffer) => import_mammoth.default.convertToHtml({ arrayBuffer }).catch(() => {
+        throw new Error("This file could not be read as a Word document (.docx).");
+      })
+    ).then((result) => {
+      if (cancelled) return;
+      setHtml(result.value);
+      setLoading(false);
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err);
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [uri]);
+  return { html, error, loading };
+}
+
+// src/viewers/DocxViewer.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function defaultDownload(uri, fileName) {
+  const link = document.createElement("a");
+  link.href = uri;
+  link.download = fileName ?? "";
+  link.rel = "noopener";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+function DocxViewer({
+  uri,
+  fileName,
+  className,
+  style,
+  width,
+  height,
+  minScale = 0.5,
+  maxScale = 3,
+  zoomStep,
+  enableZoomControls = true,
+  enableWheelZoom = true,
+  enableFullscreen = true,
+  enableDownload = true,
+  onDownload,
+  theme,
+  floating = true,
+  windowDraggable = true,
+  defaultPosition
+}) {
+  const zoomPan = useZoomPan({
+    minScale,
+    maxScale,
+    zoomStep,
+    enablePan: false,
+    enableDragScroll: true,
+    enableWheelZoom
+  });
+  const { html, error, loading } = useDocxHtml(uri);
+  const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload(uri, fileName)) : void 0;
+  const wrapperStyle = floating ? { ...style } : { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", ...style };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    ViewerShell,
+    {
+      zoomPan,
+      onDownload: handleDownload,
+      enableZoomControls,
+      enableFullscreen,
+      enablePan: false,
+      theme,
+      width,
+      height,
+      floating,
+      draggable: windowDraggable,
+      defaultPosition,
+      transformOrigin: "top center",
+      children: [
+        loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vd-doc-status", children: "Loading document\u2026" }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "vd-doc-status", children: [
+          "Failed to load document: ",
+          error.message
+        ] }),
+        html && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vd-docx-page", dangerouslySetInnerHTML: { __html: html } })
+      ]
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DocxViewer
+});
+//# sourceMappingURL=docx.cjs.map