viewdoc 0.1.1 → 0.2.0

package/dist/chunk-OA35SYM6.js

@@ -0,0 +1,432 @@
+// src/core/useDraggable.ts
+import { useCallback, useState } from "react";
+function useDraggable(options = {}) {
+  const { defaultPosition = { x: 80, y: 80 }, draggable = true } = options;
+  const [position, setPosition] = useState(defaultPosition);
+  const onDragHandlePointerDown = 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
+import { jsx, jsxs } from "react/jsx-runtime";
+function Svg(props) {
+  return /* @__PURE__ */ 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__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+  ] });
+}
+function ZoomInIcon() {
+  return /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+    /* @__PURE__ */ jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+  ] });
+}
+function DownloadIcon() {
+  return /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 3v12" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 10l5 5 5-5" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 21h14" })
+  ] });
+}
+function FullscreenEnterIcon() {
+  return /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+    /* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
+    /* @__PURE__ */ jsx("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+  ] });
+}
+function ResetIcon() {
+  return /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 3-6.7" }),
+    /* @__PURE__ */ jsx("polyline", { points: "3 3 3 8 8 8" })
+  ] });
+}
+function GripIcon() {
+  return /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("polyline", { points: "5 9 2 12 5 15" }),
+    /* @__PURE__ */ jsx("polyline", { points: "9 5 12 2 15 5" }),
+    /* @__PURE__ */ jsx("polyline", { points: "15 19 12 22 9 19" }),
+    /* @__PURE__ */ jsx("polyline", { points: "19 9 22 12 19 15" }),
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "22" })
+  ] });
+}
+function FullscreenExitIcon() {
+  return /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("polyline", { points: "9 3 9 9 3 9" }),
+    /* @__PURE__ */ jsx("polyline", { points: "15 21 15 15 21 15" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "3", y2: "3" }),
+    /* @__PURE__ */ jsx("line", { x1: "15", y1: "15", x2: "21", y2: "21" })
+  ] });
+}
+
+// src/core/Toolbar.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Toolbar({
+  scale,
+  onZoomIn,
+  onZoomOut,
+  onReset,
+  onFullscreen,
+  onDownload,
+  isFullscreen = false,
+  showZoomControls = true,
+  dragHandle,
+  onDragHandlePointerDown,
+  extra
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "vd-toolbar", role: "toolbar", "aria-label": "Document viewer controls", children: [
+    dragHandle && /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: "vd-toolbar-drag-handle",
+        onPointerDown: onDragHandlePointerDown,
+        title: "Drag to move",
+        "aria-label": "Drag to move",
+        children: dragHandle
+      }
+    ),
+    showZoomControls && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "vd-toolbar-btn",
+          onClick: onZoomOut,
+          "aria-label": "Zoom out",
+          title: "Zoom out",
+          children: /* @__PURE__ */ jsx2(ZoomOutIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsxs2("span", { className: "vd-toolbar-scale", "aria-live": "polite", children: [
+        Math.round(scale * 100),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "vd-toolbar-btn", onClick: onZoomIn, "aria-label": "Zoom in", title: "Zoom in", children: /* @__PURE__ */ jsx2(ZoomInIcon, {}) }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "vd-toolbar-btn",
+          onClick: onReset,
+          "aria-label": "Reset zoom to 100%",
+          title: "Reset zoom to 100%",
+          children: /* @__PURE__ */ jsx2(ResetIcon, {})
+        }
+      )
+    ] }),
+    extra,
+    /* @__PURE__ */ jsx2("span", { className: "vd-toolbar-spacer" }),
+    onDownload && /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: "vd-toolbar-btn",
+        onClick: onDownload,
+        "aria-label": "Download file",
+        title: "Download file",
+        children: /* @__PURE__ */ jsx2(DownloadIcon, {})
+      }
+    ),
+    onFullscreen && /* @__PURE__ */ jsx2(
+      "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__ */ jsx2(FullscreenExitIcon, {}) : /* @__PURE__ */ jsx2(FullscreenEnterIcon, {})
+      }
+    )
+  ] });
+}
+
+// src/core/ViewerShell.tsx
+import { useCallback as useCallback2, useEffect, useRef, useState as useState2 } from "react";
+
+// 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
+import { jsx as jsx3, jsxs as jsxs3 } from "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 = useRef(null);
+  const [isFullscreen, setIsFullscreen] = useState2(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
+  });
+  useEffect(() => {
+    const onChange = () => setIsFullscreen(document.fullscreenElement === rootRef.current);
+    document.addEventListener("fullscreenchange", onChange);
+    return () => document.removeEventListener("fullscreenchange", onChange);
+  }, []);
+  const onFullscreen = useCallback2(() => {
+    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__ */ jsxs3(
+    "div",
+    {
+      className: `vd-shell${floating ? " vd-shell--floating" : ""}`,
+      ref: rootRef,
+      style: { ...themeToStyle(theme), ...sizeStyle, ...floatingStyle },
+      children: [
+        /* @__PURE__ */ jsx3(
+          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__ */ jsx3(GripIcon, {}) : void 0,
+            onDragHandlePointerDown: floating && draggable ? onDragHandlePointerDown : void 0,
+            extra: toolbarExtra
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "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__ */ jsx3(
+              "div",
+              {
+                className: "vd-canvas-content",
+                style: {
+                  transform: `translate(${zoomPan.translateX}px, ${zoomPan.translateY}px) scale(${zoomPan.scale})`,
+                  transformOrigin
+                },
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/core/useZoomPan.ts
+import { useCallback as useCallback3, useRef as useRef2, useState as useState3 } from "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] = useState3({ scale: 1, translateX: 0, translateY: 0 });
+  const containerRef = useRef2(null);
+  const dragState = useRef2({
+    dragging: false,
+    startX: 0,
+    startY: 0,
+    originX: 0,
+    originY: 0
+  });
+  const scrollDragState = useRef2(
+    { dragging: false, startX: 0, startY: 0, originLeft: 0, originTop: 0 }
+  );
+  const clamp = useCallback3(
+    (value) => Math.min(maxScale, Math.max(minScale, value)),
+    [minScale, maxScale]
+  );
+  const setScale = useCallback3(
+    (scale) => setState((prev) => ({ ...prev, scale: clamp(scale) })),
+    [clamp]
+  );
+  const zoomIn = useCallback3(() => setScale(state.scale + zoomStep), [setScale, state.scale, zoomStep]);
+  const zoomOut = useCallback3(() => setScale(state.scale - zoomStep), [setScale, state.scale, zoomStep]);
+  const resetZoom = useCallback3(() => setState({ scale: 1, translateX: 0, translateY: 0 }), []);
+  const onWheel = useCallback3(
+    (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 = useCallback3(
+    (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 = useCallback3(
+    (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 = useCallback3(
+    (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 }
+  };
+}
+
+export {
+  useDraggable,
+  Toolbar,
+  ViewerShell,
+  useZoomPan
+};
+//# sourceMappingURL=chunk-OA35SYM6.js.map

package/dist/chunk-OA35SYM6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/useDraggable.ts","../src/core/icons.tsx","../src/core/Toolbar.tsx","../src/core/ViewerShell.tsx","../src/core/theme.ts","../src/core/useZoomPan.ts"],"sourcesContent":["import { useCallback, useState } from 'react'\n\nexport interface Position {\n  x: number\n  y: number\n}\n\nexport interface UseDraggableOptions {\n  defaultPosition?: Position\n  /** Allow dragging via the returned handle props. Default: true. */\n  draggable?: boolean\n}\n\nexport interface DraggableControls {\n  position: Position\n  onDragHandlePointerDown: (e: React.PointerEvent) => void\n}\n\nexport function useDraggable(options: UseDraggableOptions = {}): DraggableControls {\n  const { defaultPosition = { x: 80, y: 80 }, draggable = true } = options\n  const [position, setPosition] = useState<Position>(defaultPosition)\n\n  const onDragHandlePointerDown = useCallback(\n    (e: React.PointerEvent) => {\n      if (!draggable) return\n      e.preventDefault()\n      const startX = e.clientX\n      const startY = e.clientY\n\n      setPosition((current) => {\n        const originX = current.x\n        const originY = current.y\n\n        const onMove = (ev: PointerEvent) => {\n          setPosition({ x: originX + (ev.clientX - startX), y: originY + (ev.clientY - startY) })\n        }\n        const onUp = () => {\n          window.removeEventListener('pointermove', onMove)\n          window.removeEventListener('pointerup', onUp)\n        }\n        window.addEventListener('pointermove', onMove)\n        window.addEventListener('pointerup', onUp)\n\n        return current\n      })\n    },\n    [draggable]\n  )\n\n  return { position, onDragHandlePointerDown }\n}\n","import type { SVGProps } from 'react'\n\nfunction Svg(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      {...props}\n    />\n  )\n}\n\nexport function ZoomOutIcon() {\n  return (\n    <Svg>\n      <circle cx=\"11\" cy=\"11\" r=\"7\" />\n      <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n      <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" />\n    </Svg>\n  )\n}\n\nexport function ZoomInIcon() {\n  return (\n    <Svg>\n      <circle cx=\"11\" cy=\"11\" r=\"7\" />\n      <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n      <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\" />\n      <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" />\n    </Svg>\n  )\n}\n\nexport function DownloadIcon() {\n  return (\n    <Svg>\n      <path d=\"M12 3v12\" />\n      <path d=\"M7 10l5 5 5-5\" />\n      <path d=\"M5 21h14\" />\n    </Svg>\n  )\n}\n\nexport function FullscreenEnterIcon() {\n  return (\n    <Svg>\n      <polyline points=\"15 3 21 3 21 9\" />\n      <polyline points=\"9 21 3 21 3 15\" />\n      <line x1=\"21\" y1=\"3\" x2=\"14\" y2=\"10\" />\n      <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\" />\n    </Svg>\n  )\n}\n\nexport function ResetIcon() {\n  return (\n    <Svg>\n      <path d=\"M3 12a9 9 0 1 0 3-6.7\" />\n      <polyline points=\"3 3 3 8 8 8\" />\n    </Svg>\n  )\n}\n\nexport function GripIcon() {\n  return (\n    <Svg>\n      <polyline points=\"5 9 2 12 5 15\" />\n      <polyline points=\"9 5 12 2 15 5\" />\n      <polyline points=\"15 19 12 22 9 19\" />\n      <polyline points=\"19 9 22 12 19 15\" />\n      <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\" />\n      <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"22\" />\n    </Svg>\n  )\n}\n\nexport function FullscreenExitIcon() {\n  return (\n    <Svg>\n      <polyline points=\"9 3 9 9 3 9\" />\n      <polyline points=\"15 21 15 15 21 15\" />\n      <line x1=\"9\" y1=\"9\" x2=\"3\" y2=\"3\" />\n      <line x1=\"15\" y1=\"15\" x2=\"21\" y2=\"21\" />\n    </Svg>\n  )\n}\n","import type { ReactNode } from 'react'\nimport { DownloadIcon, FullscreenEnterIcon, FullscreenExitIcon, ResetIcon, ZoomInIcon, ZoomOutIcon } from './icons'\n\nexport interface ToolbarProps {\n  scale: number\n  onZoomIn: () => void\n  onZoomOut: () => void\n  onReset: () => void\n  onFullscreen?: () => void\n  onDownload?: () => void\n  /** Whether the viewer is currently in fullscreen mode (controls which icon is shown). */\n  isFullscreen?: boolean\n  /** Show zoom in/out/reset controls. Default: true. */\n  showZoomControls?: boolean\n  /** Icon shown at the start of the toolbar; pointer-down on it starts dragging. */\n  dragHandle?: ReactNode\n  /** Pointer-down handler attached to the drag handle icon. */\n  onDragHandlePointerDown?: (e: React.PointerEvent) => void\n  extra?: ReactNode\n}\n\nexport function Toolbar({\n  scale,\n  onZoomIn,\n  onZoomOut,\n  onReset,\n  onFullscreen,\n  onDownload,\n  isFullscreen = false,\n  showZoomControls = true,\n  dragHandle,\n  onDragHandlePointerDown,\n  extra,\n}: ToolbarProps) {\n  return (\n    <div className=\"vd-toolbar\" role=\"toolbar\" aria-label=\"Document viewer controls\">\n      {dragHandle && (\n        <span\n          className=\"vd-toolbar-drag-handle\"\n          onPointerDown={onDragHandlePointerDown}\n          title=\"Drag to move\"\n          aria-label=\"Drag to move\"\n        >\n          {dragHandle}\n        </span>\n      )}\n      {showZoomControls && (\n        <>\n          <button\n            type=\"button\"\n            className=\"vd-toolbar-btn\"\n            onClick={onZoomOut}\n            aria-label=\"Zoom out\"\n            title=\"Zoom out\"\n          >\n            <ZoomOutIcon />\n          </button>\n          <span className=\"vd-toolbar-scale\" aria-live=\"polite\">\n            {Math.round(scale * 100)}%\n          </span>\n          <button type=\"button\" className=\"vd-toolbar-btn\" onClick={onZoomIn} aria-label=\"Zoom in\" title=\"Zoom in\">\n            <ZoomInIcon />\n          </button>\n          <button\n            type=\"button\"\n            className=\"vd-toolbar-btn\"\n            onClick={onReset}\n            aria-label=\"Reset zoom to 100%\"\n            title=\"Reset zoom to 100%\"\n          >\n            <ResetIcon />\n          </button>\n        </>\n      )}\n      {extra}\n      <span className=\"vd-toolbar-spacer\" />\n      {onDownload && (\n        <button\n          type=\"button\"\n          className=\"vd-toolbar-btn\"\n          onClick={onDownload}\n          aria-label=\"Download file\"\n          title=\"Download file\"\n        >\n          <DownloadIcon />\n        </button>\n      )}\n      {onFullscreen && (\n        <button\n          type=\"button\"\n          className=\"vd-toolbar-btn\"\n          onClick={onFullscreen}\n          aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}\n          title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}\n        >\n          {isFullscreen ? <FullscreenExitIcon /> : <FullscreenEnterIcon />}\n        </button>\n      )}\n    </div>\n  )\n}\n","import { useCallback, useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'\nimport { useDraggable, type Position } from './useDraggable'\nimport { GripIcon } from './icons'\nimport { Toolbar } from './Toolbar'\nimport { themeToStyle, type ViewerTheme } from './theme'\nimport type { ZoomPanControls } from './useZoomPan'\n\nexport interface ViewerShellProps {\n  zoomPan: ZoomPanControls\n  onDownload?: () => void\n  toolbarExtra?: ReactNode\n  children: ReactNode\n  /** Show the zoom in/out/reset-to-100% controls. Default: true. */\n  enableZoomControls?: boolean\n  /** Show the fullscreen toggle button. Default: true. */\n  enableFullscreen?: boolean\n  /** Allow click-drag-release panning of the content. Default: true. */\n  enablePan?: boolean\n  /** Colors/radii to override the default look. Any field left out keeps the default. */\n  theme?: ViewerTheme\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  /** Render as a floating window (position: fixed) that can be dragged, instead of filling the parent container. Default: true. */\n  floating?: boolean\n  /** When floating, allow dragging the window by its toolbar. Default: true. */\n  draggable?: boolean\n  /** Initial position when floating. Default: centered in the viewport. */\n  defaultPosition?: Position\n  /** CSS transform-origin for the zoomed content. Default: 'center center'. */\n  transformOrigin?: string\n}\n\nexport function ViewerShell({\n  zoomPan,\n  onDownload,\n  toolbarExtra,\n  children,\n  enableZoomControls = true,\n  enableFullscreen = true,\n  enablePan = true,\n  theme,\n  width,\n  height,\n  floating = true,\n  draggable = true,\n  defaultPosition,\n  transformOrigin,\n}: ViewerShellProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const [isFullscreen, setIsFullscreen] = useState(false)\n\n  const effectiveWidth = typeof width === 'number' ? width : 1200\n  const effectiveHeight = typeof height === 'number' ? height : 700\n  const resolvedDefaultPosition =\n    defaultPosition ??\n    (typeof window !== 'undefined'\n      ? {\n          x: Math.max(0, (window.innerWidth - effectiveWidth) / 2),\n          y: Math.max(0, (window.innerHeight - effectiveHeight) / 2),\n        }\n      : { x: 80, y: 80 })\n\n  const { position, onDragHandlePointerDown } = useDraggable({\n    defaultPosition: resolvedDefaultPosition,\n    draggable,\n  })\n\n  useEffect(() => {\n    const onChange = () => setIsFullscreen(document.fullscreenElement === rootRef.current)\n    document.addEventListener('fullscreenchange', onChange)\n    return () => document.removeEventListener('fullscreenchange', onChange)\n  }, [])\n\n  const onFullscreen = useCallback(() => {\n    const el = rootRef.current\n    if (!el) return\n    if (document.fullscreenElement) {\n      document.exitFullscreen()\n    } else {\n      el.requestFullscreen()\n    }\n  }, [])\n\n  const sizeStyle: CSSProperties = {\n    width: width ?? 1200,\n    height: height ?? 700,\n  }\n  const floatingStyle: CSSProperties | undefined = floating\n    ? { position: 'fixed', left: position.x, top: position.y }\n    : undefined\n\n  return (\n    <div\n      className={`vd-shell${floating ? ' vd-shell--floating' : ''}`}\n      ref={rootRef}\n      style={{ ...themeToStyle(theme), ...sizeStyle, ...floatingStyle }}\n    >\n      <Toolbar\n        scale={zoomPan.scale}\n        onZoomIn={zoomPan.zoomIn}\n        onZoomOut={zoomPan.zoomOut}\n        onReset={zoomPan.resetZoom}\n        onFullscreen={enableFullscreen ? onFullscreen : undefined}\n        onDownload={onDownload}\n        isFullscreen={isFullscreen}\n        showZoomControls={enableZoomControls}\n        dragHandle={floating && draggable ? <GripIcon /> : undefined}\n        onDragHandlePointerDown={floating && draggable ? onDragHandlePointerDown : undefined}\n        extra={toolbarExtra}\n      />\n      <div\n        className={`vd-canvas${enablePan ? '' : ' vd-canvas--no-pan'}`}\n        ref={zoomPan.containerRef}\n        onWheel={zoomPan.handlers.onWheel}\n        onPointerDown={zoomPan.handlers.onPointerDown}\n        onPointerMove={zoomPan.handlers.onPointerMove}\n        onPointerUp={zoomPan.handlers.onPointerUp}\n      >\n        <div\n          className=\"vd-canvas-content\"\n          style={{\n            transform: `translate(${zoomPan.translateX}px, ${zoomPan.translateY}px) scale(${zoomPan.scale})`,\n            transformOrigin,\n          }}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n","import type { CSSProperties } from 'react'\n\nexport interface ViewerTheme {\n  /** Background color of the viewer canvas area. */\n  background?: string\n  /** Background color of the toolbar strip. */\n  toolbarBackground?: string\n  /** Border color under the toolbar. */\n  toolbarBorderColor?: string\n  /** Hover background for toolbar buttons. */\n  toolbarButtonHoverBackground?: string\n  /** Text/icon color used across the toolbar. */\n  textColor?: string\n  /** Corner radius of the outer viewer container. */\n  borderRadius?: string\n  /** Corner radius of individual toolbar buttons. */\n  toolbarButtonRadius?: string\n}\n\nconst THEME_VAR_MAP: Record<keyof ViewerTheme, string> = {\n  background: '--vd-bg',\n  toolbarBackground: '--vd-toolbar-bg',\n  toolbarBorderColor: '--vd-toolbar-border-color',\n  toolbarButtonHoverBackground: '--vd-toolbar-btn-hover-bg',\n  textColor: '--vd-text-color',\n  borderRadius: '--vd-border-radius',\n  toolbarButtonRadius: '--vd-toolbar-btn-radius',\n}\n\n/** Converts a ViewerTheme into inline CSS custom properties overriding the defaults in styles.css. */\nexport function themeToStyle(theme?: ViewerTheme): CSSProperties | undefined {\n  if (!theme) return undefined\n  const style: Record<string, string> = {}\n  for (const key of Object.keys(theme) as (keyof ViewerTheme)[]) {\n    const value = theme[key]\n    if (value) style[THEME_VAR_MAP[key]] = value\n  }\n  return style as CSSProperties\n}\n","import { useCallback, useRef, useState } from 'react'\n\nexport interface ZoomPanState {\n  scale: number\n  translateX: number\n  translateY: number\n}\n\nexport interface ZoomPanOptions {\n  minScale?: number\n  maxScale?: number\n  zoomStep?: number\n  /** Allow click-drag-release panning by transforming the content. Default: true. */\n  enablePan?: boolean\n  /** Allow Ctrl/Cmd + scroll wheel zoom. Default: true. */\n  enableWheelZoom?: boolean\n  /** Allow click-drag-release scrolling of a natively-scrollable container (used instead of enablePan for scrollable content like PDF pages). Default: false. */\n  enableDragScroll?: boolean\n}\n\nexport interface ZoomPanControls extends ZoomPanState {\n  containerRef: React.RefObject<HTMLDivElement>\n  zoomIn: () => void\n  zoomOut: () => void\n  resetZoom: () => void\n  setScale: (scale: number) => void\n  handlers: {\n    onWheel: (e: React.WheelEvent) => void\n    onPointerDown: (e: React.PointerEvent) => void\n    onPointerMove: (e: React.PointerEvent) => void\n    onPointerUp: (e: React.PointerEvent) => void\n  }\n}\n\nconst DEFAULT_MIN = 0.1\nconst DEFAULT_MAX = 8\nconst DEFAULT_STEP = 0.25\n\nexport function useZoomPan(options: ZoomPanOptions = {}): ZoomPanControls {\n  const {\n    minScale = DEFAULT_MIN,\n    maxScale = DEFAULT_MAX,\n    zoomStep = DEFAULT_STEP,\n    enablePan = true,\n    enableWheelZoom = true,\n    enableDragScroll = false,\n  } = options\n\n  const [state, setState] = useState<ZoomPanState>({ scale: 1, translateX: 0, translateY: 0 })\n  const containerRef = useRef<HTMLDivElement>(null)\n  const dragState = useRef<{ dragging: boolean; startX: number; startY: number; originX: number; originY: number }>({\n    dragging: false,\n    startX: 0,\n    startY: 0,\n    originX: 0,\n    originY: 0,\n  })\n  const scrollDragState = useRef<{ dragging: boolean; startX: number; startY: number; originLeft: number; originTop: number }>(\n    { dragging: false, startX: 0, startY: 0, originLeft: 0, originTop: 0 }\n  )\n\n  const clamp = useCallback(\n    (value: number) => Math.min(maxScale, Math.max(minScale, value)),\n    [minScale, maxScale]\n  )\n\n  const setScale = useCallback(\n    (scale: number) => setState((prev) => ({ ...prev, scale: clamp(scale) })),\n    [clamp]\n  )\n\n  const zoomIn = useCallback(() => setScale(state.scale + zoomStep), [setScale, state.scale, zoomStep])\n  const zoomOut = useCallback(() => setScale(state.scale - zoomStep), [setScale, state.scale, zoomStep])\n  const resetZoom = useCallback(() => setState({ scale: 1, translateX: 0, translateY: 0 }), [])\n\n  const onWheel = useCallback(\n    (e: React.WheelEvent) => {\n      if (!enableWheelZoom) return\n      if (!e.ctrlKey && !e.metaKey) return\n      e.preventDefault()\n      const delta = e.deltaY > 0 ? -zoomStep : zoomStep\n      setScale(state.scale + delta)\n    },\n    [enableWheelZoom, setScale, state.scale, zoomStep]\n  )\n\n  const onPointerDown = useCallback(\n    (e: React.PointerEvent) => {\n      if (enablePan) {\n        dragState.current = {\n          dragging: true,\n          startX: e.clientX,\n          startY: e.clientY,\n          originX: state.translateX,\n          originY: state.translateY,\n        }\n        ;(e.target as HTMLElement).setPointerCapture(e.pointerId)\n      } else if (enableDragScroll && containerRef.current) {\n        scrollDragState.current = {\n          dragging: true,\n          startX: e.clientX,\n          startY: e.clientY,\n          originLeft: containerRef.current.scrollLeft,\n          originTop: containerRef.current.scrollTop,\n        }\n        ;(e.target as HTMLElement).setPointerCapture(e.pointerId)\n      }\n    },\n    [enablePan, enableDragScroll, state.translateX, state.translateY]\n  )\n\n  const onPointerMove = useCallback(\n    (e: React.PointerEvent) => {\n      if (enablePan) {\n        if (!dragState.current.dragging) return\n        const dx = e.clientX - dragState.current.startX\n        const dy = e.clientY - dragState.current.startY\n        setState((prev) => ({\n          ...prev,\n          translateX: dragState.current.originX + dx,\n          translateY: dragState.current.originY + dy,\n        }))\n      } else if (enableDragScroll) {\n        if (!scrollDragState.current.dragging || !containerRef.current) return\n        const dx = e.clientX - scrollDragState.current.startX\n        const dy = e.clientY - scrollDragState.current.startY\n        containerRef.current.scrollLeft = scrollDragState.current.originLeft - dx\n        containerRef.current.scrollTop = scrollDragState.current.originTop - dy\n      }\n    },\n    [enablePan, enableDragScroll]\n  )\n\n  const onPointerUp = useCallback(\n    (e: React.PointerEvent) => {\n      if (enablePan) {\n        dragState.current.dragging = false\n        ;(e.target as HTMLElement).releasePointerCapture(e.pointerId)\n      } else if (enableDragScroll) {\n        scrollDragState.current.dragging = false\n        ;(e.target as HTMLElement).releasePointerCapture(e.pointerId)\n      }\n    },\n    [enablePan, enableDragScroll]\n  )\n\n  return {\n    ...state,\n    containerRef,\n    zoomIn,\n    zoomOut,\n    resetZoom,\n    setScale,\n    handlers: { onWheel, onPointerDown, onPointerMove, onPointerUp },\n  }\n}\n"],"mappings":"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","names":["jsx","jsxs","useCallback","useState","jsx","jsxs","useState","useCallback","useCallback","useRef","useState"]}