@geomak/ui 7.8.0 → 7.9.0

package/dist/index.js

@@ -5937,6 +5937,15 @@ async function sourceToBytes(source, remote) {
   }
   throw new Error("Unsupported source type");
 }
+function downloadBlob(blob, name) {
+  if (typeof document === "undefined") return;
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = name;
+  a.click();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
 function sourceName(source) {
   if (typeof File !== "undefined" && source instanceof File) return source.name;
   if (isUrlSource(source)) {
@@ -5947,17 +5956,45 @@ function sourceName(source) {
   return void 0;
 }
 var pdfjsPromise = null;
-function loadPdfjs() {
+function loadPdfjs(workerSrc) {
   if (pdfjsPromise) return pdfjsPromise;
   pdfjsPromise = import('pdfjs-dist').then((pdfjs) => {
     if (!pdfjs.GlobalWorkerOptions.workerSrc) {
-      pdfjs.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+      pdfjs.GlobalWorkerOptions.workerSrc = workerSrc ?? `https://cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
     }
     return pdfjs;
   });
   return pdfjsPromise;
 }
 var GAP = 12;
+var SEARCH_DEBOUNCE = 220;
+var TEXT_LAYER_STYLE_ID = "oxygen-pdf-textlayer";
+var TEXT_LAYER_CSS = `
+.oxy-textLayer{position:absolute;inset:0;overflow:clip;line-height:1;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0}
+.oxy-textLayer span,.oxy-textLayer br{color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0 0}
+.oxy-textLayer span.markedContent{top:0;height:0}
+.oxy-textLayer ::selection{background:color-mix(in srgb, var(--color-accent) 35%, transparent)}
+`;
+function ensureTextLayerStyles() {
+  if (typeof document === "undefined" || document.getElementById(TEXT_LAYER_STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = TEXT_LAYER_STYLE_ID;
+  el.textContent = TEXT_LAYER_CSS;
+  document.head.appendChild(el);
+}
+function pageIndexAt(offsets, y) {
+  let lo = 0;
+  let hi = offsets.length - 1;
+  let ans = 0;
+  while (lo <= hi) {
+    const mid = lo + hi >> 1;
+    if (offsets[mid] <= y) {
+      ans = mid;
+      lo = mid + 1;
+    } else hi = mid - 1;
+  }
+  return ans;
+}
 function PdfViewer({
   source,
   remote,
@@ -5966,6 +6003,7 @@ function PdfViewer({
   toolbar = true,
   thumbnails = false,
   textLayer = true,
+  workerSrc,
   onLoad,
   onError,
   onPageChange,
@@ -5976,6 +6014,7 @@ function PdfViewer({
   const [doc, setDoc] = useState(null);
   const [numPages, setNumPages] = useState(0);
   const [baseSize, setBaseSize] = useState(null);
+  const [sizes, setSizes] = useState([]);
   const [status, setStatus] = useState("loading");
   const [error, setError] = useState(null);
   const [reloadKey, setReloadKey] = useState(0);
@@ -5988,6 +6027,13 @@ function PdfViewer({
   const [query, setQuery] = useState("");
   const [matchPages, setMatchPages] = useState(null);
   const [matchIdx, setMatchIdx] = useState(0);
+  const [searching, setSearching] = useState(false);
+  const [pageDraft, setPageDraft] = useState("");
+  const pageEditing = useRef(false);
+  const pageText = useRef(/* @__PURE__ */ new Map());
+  const searchSeq = useRef(0);
+  const searchTimer = useRef(null);
+  const measured = useRef(/* @__PURE__ */ new Set());
   const tb = toolbar === true ? { zoom: true, pager: true, download: true, print: true, search: true } : toolbar || {};
   useEffect(() => {
     let cancelled = false;
@@ -5996,7 +6042,12 @@ function PdfViewer({
     setError(null);
     setDoc(null);
     setBaseSize(null);
-    loadPdfjs().then(async (pdfjs2) => {
+    setSizes([]);
+    pageText.current.clear();
+    measured.current = /* @__PURE__ */ new Set();
+    setMatchPages(null);
+    setMatchIdx(0);
+    loadPdfjs(workerSrc).then(async (pdfjs2) => {
       if (cancelled) return;
       setPdfjs(pdfjs2);
       const params = isUrlSource(source) ? { url: urlHref(source), httpHeaders: remote?.httpHeaders, withCredentials: remote?.withCredentials } : { data: source instanceof Uint8Array || source instanceof ArrayBuffer ? source : new Uint8Array(await source.arrayBuffer()) };
@@ -6009,9 +6060,12 @@ function PdfViewer({
       const first = await pdf.getPage(1);
       const vp = first.getViewport({ scale: 1 });
       if (cancelled) return;
+      const base = { width: vp.width, height: vp.height };
       setDoc(pdf);
       setNumPages(pdf.numPages);
-      setBaseSize({ width: vp.width, height: vp.height });
+      setBaseSize(base);
+      setSizes(Array.from({ length: pdf.numPages }, () => base));
+      measured.current.add(1);
       setStatus("ready");
       onLoad?.({ numPages: pdf.numPages });
     }).catch((err) => {
@@ -6024,7 +6078,7 @@ function PdfViewer({
       cancelled = true;
       task?.destroy?.();
     };
-  }, [source, remote, reloadKey]);
+  }, [source, remote, reloadKey, workerSrc]);
   useEffect(() => () => {
     doc?.destroy?.();
   }, [doc]);
@@ -6037,59 +6091,101 @@ function PdfViewer({
     ro.observe(el);
     return () => ro.disconnect();
   }, [status]);
+  const handleMeasure = useCallback((p, size) => {
+    setSizes((prev) => {
+      const cur = prev[p - 1];
+      if (cur && Math.abs(cur.width - size.width) < 0.5 && Math.abs(cur.height - size.height) < 0.5) return prev;
+      const next = prev.slice();
+      next[p - 1] = size;
+      return next;
+    });
+  }, []);
   const scale = useMemo(() => {
     if (!baseSize) return 1;
     if (typeof zoomMode === "number") return zoomMode;
-    const avail = Math.max(0, (viewport.w || baseSize.width) - 32);
+    const avail = Math.max(1, (viewport.w || baseSize.width) - 32);
     if (zoomMode === "page-width" || zoomMode === "auto") return avail / baseSize.width;
     if (zoomMode === "page-fit") {
-      const availH = Math.max(0, (viewport.h || baseSize.height) - 32);
+      const availH = Math.max(1, (viewport.h || baseSize.height) - 32);
       return Math.min(avail / baseSize.width, availH / baseSize.height);
     }
     return 1;
   }, [zoomMode, baseSize, viewport]);
-  const pageH = baseSize ? baseSize.height * scale + GAP : 0;
-  const pageW = baseSize ? baseSize.width * scale : 0;
-  const total = numPages * pageH;
+  const { offsets, total } = useMemo(() => {
+    const offs = new Array(sizes.length);
+    let acc = 0;
+    for (let i = 0; i < sizes.length; i++) {
+      offs[i] = acc;
+      acc += sizes[i].height * scale + GAP;
+    }
+    return { offsets: offs, total: acc };
+  }, [sizes, scale]);
   const overscan = 1;
-  const startIdx = pageH ? Math.max(0, Math.floor(scrollTop / pageH) - overscan) : 0;
-  const endIdx = pageH ? Math.min(numPages, Math.ceil((scrollTop + viewport.h) / pageH) + overscan) : 0;
+  const hasLayout = offsets.length > 0 && total > 0;
+  const startIdx = hasLayout ? Math.max(0, pageIndexAt(offsets, scrollTop) - overscan) : 0;
+  const endIdx = hasLayout ? Math.min(numPages, pageIndexAt(offsets, scrollTop + viewport.h) + 1 + overscan) : 0;
   const visiblePages = Array.from({ length: Math.max(0, endIdx - startIdx) }, (_, i) => startIdx + i + 1);
+  const scrollToPage = useCallback((p) => {
+    const el = scrollRef.current;
+    if (!el || !offsets.length) return;
+    const clamped = Math.min(offsets.length, Math.max(1, p));
+    el.scrollTo({ top: offsets[clamped - 1] ?? 0, behavior: "smooth" });
+  }, [offsets]);
   useEffect(() => {
-    if (!pageH) return;
-    const cur = Math.min(numPages, Math.max(1, Math.floor((scrollTop + viewport.h / 2) / pageH) + 1));
+    if (!hasLayout) return;
+    const cur = pageIndexAt(offsets, scrollTop + viewport.h / 2) + 1;
     if (cur !== page) {
       setPage(cur);
       onPageChange?.(cur);
     }
-  }, [scrollTop, pageH, viewport.h, numPages]);
-  const scrollToPage = useCallback((p) => {
-    const el = scrollRef.current;
-    if (!el || !pageH) return;
-    el.scrollTo({ top: (p - 1) * pageH, behavior: "smooth" });
-  }, [pageH]);
+  }, [scrollTop, offsets, viewport.h, numPages]);
   useEffect(() => {
     if (status === "ready" && initialPage > 1) scrollToPage(initialPage);
-  }, [status]);
+  }, [status, initialPage]);
   const runSearch = useCallback(async (q) => {
-    setQuery(q);
-    if (!doc || !q.trim()) {
+    const needle = q.trim().toLowerCase();
+    if (!doc || !needle) {
       setMatchPages(null);
       setMatchIdx(0);
+      setSearching(false);
       return;
     }
-    const needle = q.toLowerCase();
+    const seq = ++searchSeq.current;
+    setSearching(true);
     const hits = [];
     for (let p = 1; p <= numPages; p++) {
-      const pg = await doc.getPage(p);
-      const tc = await pg.getTextContent();
-      const text = tc.items.map((it) => "str" in it ? it.str : "").join(" ").toLowerCase();
+      let text = pageText.current.get(p);
+      if (text === void 0) {
+        const pg = await doc.getPage(p);
+        const tc = await pg.getTextContent();
+        const built = tc.items.map((it) => "str" in it ? it.str : "").join(" ").toLowerCase();
+        pageText.current.set(p, built);
+        text = built;
+      }
+      if (seq !== searchSeq.current) return;
       if (text.includes(needle)) hits.push(p);
     }
+    if (seq !== searchSeq.current) return;
     setMatchPages(hits);
     setMatchIdx(0);
+    setSearching(false);
     if (hits.length) scrollToPage(hits[0]);
   }, [doc, numPages, scrollToPage]);
+  const onQueryChange = useCallback((v) => {
+    setQuery(v);
+    if (searchTimer.current) clearTimeout(searchTimer.current);
+    if (!v.trim()) {
+      searchSeq.current++;
+      setMatchPages(null);
+      setMatchIdx(0);
+      setSearching(false);
+      return;
+    }
+    searchTimer.current = setTimeout(() => runSearch(v), SEARCH_DEBOUNCE);
+  }, [runSearch]);
+  useEffect(() => () => {
+    if (searchTimer.current) clearTimeout(searchTimer.current);
+  }, []);
   const gotoMatch = (dir) => {
     if (!matchPages?.length) return;
     const next = (matchIdx + dir + matchPages.length) % matchPages.length;
@@ -6103,15 +6199,9 @@ function PdfViewer({
     if (typeof Blob !== "undefined" && source instanceof Blob) return new Uint8Array(await source.arrayBuffer());
     throw new Error("No bytes available");
   }, [doc, source]);
-  const download2 = useCallback(async () => {
+  const download = useCallback(async () => {
     const bytes = await getBytes();
-    const blob = new Blob([bytes], { type: "application/pdf" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = sourceName(source) || "document.pdf";
-    a.click();
-    setTimeout(() => URL.revokeObjectURL(url), 1e3);
+    downloadBlob(new Blob([bytes], { type: "application/pdf" }), sourceName(source) || "document.pdf");
   }, [getBytes, source]);
   const print = useCallback(async () => {
     const bytes = await getBytes();
@@ -6137,6 +6227,12 @@ function PdfViewer({
     const cur = typeof zoomMode === "number" ? zoomMode : scale;
     setZoomMode(Math.min(5, Math.max(0.25, +(cur * factor).toFixed(2))));
   };
+  const zoomPct = Math.round(scale * 100);
+  const commitPageDraft = () => {
+    pageEditing.current = false;
+    const n = parseInt(pageDraft, 10);
+    if (Number.isFinite(n)) scrollToPage(n);
+  };
   if (status === "error") {
     return /* @__PURE__ */ jsxs("div", { className: cx("flex flex-col items-center justify-center gap-3 rounded-lg border border-border bg-surface p-8 text-center", className), style, children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-status-error", children: "Couldn\u2019t load the PDF" }),
@@ -6144,80 +6240,127 @@ function PdfViewer({
       /* @__PURE__ */ jsx(Button_default, { content: "Retry", size: "sm", variant: "outline", onClick: () => setReloadKey((k) => k + 1) })
     ] });
   }
+  const ready = status === "ready";
   return /* @__PURE__ */ jsxs("div", { className: cx("flex flex-col overflow-hidden rounded-lg border border-border bg-surface-raised", className), style: { height: 600, ...style }, children: [
-    toolbar !== false && /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 flex-wrap items-center gap-2 border-b border-border bg-surface px-2 py-1.5", children: [
-      tb.pager && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Previous page", onClick: () => scrollToPage(Math.max(1, page - 1)), icon: /* @__PURE__ */ jsx(Chevron5, { dir: "up" }), disabled: status !== "ready" }),
-        /* @__PURE__ */ jsxs("span", { className: "px-1 text-xs tabular-nums text-foreground-secondary select-none", children: [
-          status === "ready" ? page : "\u2013",
-          " / ",
-          numPages || "\u2013"
+    toolbar !== false && /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 flex-col border-b border-border bg-surface", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-2 py-1.5", children: [
+        tb.pager && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Previous page", onClick: () => scrollToPage(page - 1), icon: /* @__PURE__ */ jsx(Chevron5, { dir: "up" }), disabled: !ready || page <= 1 }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-foreground-secondary select-none", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: pageEditing.current ? pageDraft : ready ? String(page) : "\u2013",
+                onFocus: () => {
+                  pageEditing.current = true;
+                  setPageDraft(String(page));
+                },
+                onChange: (e) => setPageDraft(e.target.value.replace(/[^\d]/g, "")),
+                onBlur: commitPageDraft,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") e.target.blur();
+                },
+                disabled: !ready,
+                "aria-label": "Page number",
+                className: "h-6 w-9 rounded border border-border bg-surface-raised text-center tabular-nums text-foreground outline-none focus:border-accent disabled:opacity-50"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+              "/ ",
+              numPages || "\u2013"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Next page", onClick: () => scrollToPage(page + 1), icon: /* @__PURE__ */ jsx(Chevron5, { dir: "down" }), disabled: !ready || page >= numPages })
         ] }),
-        /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Next page", onClick: () => scrollToPage(Math.min(numPages, page + 1)), icon: /* @__PURE__ */ jsx(Chevron5, { dir: "down" }), disabled: status !== "ready" })
-      ] }),
-      tb.zoom && /* @__PURE__ */ jsxs("div", { className: "ml-1 flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Zoom out", onClick: () => setZoomNum(1 / 1.2), icon: /* @__PURE__ */ jsx("span", { className: "text-base leading-none", children: "\u2212" }), disabled: status !== "ready" }),
-        /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Zoom in", onClick: () => setZoomNum(1.2), icon: /* @__PURE__ */ jsx("span", { className: "text-base leading-none", children: "+" }), disabled: status !== "ready" }),
-        /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Fit width", onClick: () => setZoomMode("page-width"), icon: /* @__PURE__ */ jsx(FitWidthIcon, {}), disabled: status !== "ready" }),
-        /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Fit page", onClick: () => setZoomMode("page-fit"), icon: /* @__PURE__ */ jsx(FitPageIcon, {}), disabled: status !== "ready" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
-        tb.search && /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Search", onClick: () => setShowSearch((s) => !s), icon: /* @__PURE__ */ jsx(SearchIcon2, {}), disabled: status !== "ready" }),
-        tb.download && /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Download", onClick: download2, icon: /* @__PURE__ */ jsx(DownloadIcon, {}), disabled: status !== "ready" }),
-        tb.print && /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Print", onClick: print, icon: /* @__PURE__ */ jsx(PrintIcon, {}), disabled: status !== "ready" })
+        tb.pager && tb.zoom && /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-border", "aria-hidden": "true" }),
+        tb.zoom && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Zoom out", onClick: () => setZoomNum(1 / 1.2), icon: /* @__PURE__ */ jsx(MinusIcon, {}), disabled: !ready }),
+          /* @__PURE__ */ jsx("span", { className: "w-10 text-center text-xs tabular-nums text-foreground-secondary select-none", children: ready ? `${zoomPct}%` : "\u2013" }),
+          /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Zoom in", onClick: () => setZoomNum(1.2), icon: /* @__PURE__ */ jsx(PlusIcon, {}), disabled: !ready }),
+          /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Fit width", onClick: () => setZoomMode("page-width"), icon: /* @__PURE__ */ jsx(FitWidthIcon, {}), disabled: !ready }),
+          /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Fit page", onClick: () => setZoomMode("page-fit"), icon: /* @__PURE__ */ jsx(FitPageIcon, {}), disabled: !ready })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+          tb.search && /* @__PURE__ */ jsx(IconButton_default, { type: showSearch ? "bordered" : "ghost", size: "sm", title: "Search", onClick: () => setShowSearch((s) => !s), icon: /* @__PURE__ */ jsx(SearchIcon2, {}), disabled: !ready }),
+          tb.search && (tb.download || tb.print) && /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-border", "aria-hidden": "true" }),
+          tb.download && /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Download", onClick: download, icon: /* @__PURE__ */ jsx(DownloadIcon, {}), disabled: !ready }),
+          tb.print && /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Print", onClick: print, icon: /* @__PURE__ */ jsx(PrintIcon, {}), disabled: !ready })
+        ] })
       ] }),
-      tb.search && showSearch && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2 pt-1", children: [
+      tb.search && showSearch && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t border-border px-2 py-1.5", children: [
+        /* @__PURE__ */ jsx(SearchIcon2, {}),
         /* @__PURE__ */ jsx(
           "input",
           {
             autoFocus: true,
             value: query,
-            onChange: (e) => runSearch(e.target.value),
+            onChange: (e) => onQueryChange(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") gotoMatch(e.shiftKey ? -1 : 1);
+            },
             placeholder: "Find in document\u2026",
-            className: "h-7 flex-1 rounded-md border border-border bg-surface px-2 text-sm text-foreground outline-none focus:border-accent"
+            className: "h-7 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-foreground-muted"
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-foreground-muted", children: matchPages == null ? "" : matchPages.length ? `${matchIdx + 1}/${matchPages.length} pages` : "no matches" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-foreground-muted", children: searching ? "Searching\u2026" : matchPages == null ? "" : matchPages.length ? `${matchIdx + 1} of ${matchPages.length}` : "No matches" }),
         /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Previous match", onClick: () => gotoMatch(-1), icon: /* @__PURE__ */ jsx(Chevron5, { dir: "up" }), disabled: !matchPages?.length }),
-        /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Next match", onClick: () => gotoMatch(1), icon: /* @__PURE__ */ jsx(Chevron5, { dir: "down" }), disabled: !matchPages?.length })
+        /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Next match", onClick: () => gotoMatch(1), icon: /* @__PURE__ */ jsx(Chevron5, { dir: "down" }), disabled: !matchPages?.length }),
+        /* @__PURE__ */ jsx(IconButton_default, { type: "ghost", size: "sm", title: "Close search", onClick: () => {
+          setShowSearch(false);
+          onQueryChange("");
+        }, icon: /* @__PURE__ */ jsx(CloseIcon, {}) })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
-      thumbnails && status === "ready" && doc && baseSize && /* @__PURE__ */ jsx("div", { className: "w-32 flex-shrink-0 overflow-y-auto border-r border-border bg-surface p-2", children: Array.from({ length: numPages }, (_, i) => i + 1).map((p) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => scrollToPage(p),
-          className: cx(
-            "mb-2 block w-full overflow-hidden rounded border bg-surface-raised transition-colors",
-            p === page ? "border-accent ring-1 ring-accent" : "border-border hover:border-border-strong"
-          ),
-          style: { aspectRatio: `${baseSize.width} / ${baseSize.height}` },
-          "aria-label": `Page ${p}`,
-          children: Math.abs(p - page) <= 8 ? /* @__PURE__ */ jsx(PdfPage, { pdfjs, doc, page: p, scale: 112 / baseSize.width, textLayer: false }) : /* @__PURE__ */ jsx("span", { className: "block py-4 text-center text-xs text-foreground-muted", children: p })
-        },
-        p
-      )) }),
+      thumbnails && ready && doc && baseSize && /* @__PURE__ */ jsx("div", { className: "w-32 flex-shrink-0 overflow-y-auto border-r border-border bg-surface p-2", children: Array.from({ length: numPages }, (_, i) => i + 1).map((p) => {
+        const s = sizes[p - 1] ?? baseSize;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => scrollToPage(p),
+            className: cx(
+              "mb-2 block w-full overflow-hidden rounded border bg-surface-raised transition-colors",
+              p === page ? "border-accent ring-1 ring-accent" : "border-border hover:border-border-strong"
+            ),
+            style: { aspectRatio: `${s.width} / ${s.height}` },
+            "aria-label": `Page ${p}`,
+            "aria-current": p === page,
+            children: Math.abs(p - page) <= 8 ? /* @__PURE__ */ jsx(PdfPage, { pdfjs, doc, page: p, scale: 112 / s.width, textLayer: false }) : /* @__PURE__ */ jsx("span", { className: "block py-4 text-center text-xs text-foreground-muted", children: p })
+          },
+          p
+        );
+      }) }),
       /* @__PURE__ */ jsx(
         "div",
         {
           ref: scrollRef,
           onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
           className: "relative flex-1 overflow-auto bg-background",
-          children: status === "loading" || !baseSize ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-3 p-6", children: /* @__PURE__ */ jsx(SkeletonBox, { width: Math.min(viewport.w - 48, 560) || 480, height: 680, className: "rounded" }) }) : numPages === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center text-sm text-foreground-muted", children: "Empty document" }) : /* @__PURE__ */ jsx("div", { style: { height: total, position: "relative" }, children: visiblePages.map((p) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: { position: "absolute", top: (p - 1) * pageH, left: 0, right: 0, height: pageH, display: "flex", justifyContent: "center", paddingTop: GAP / 2, paddingBottom: GAP / 2 },
-              children: /* @__PURE__ */ jsx("div", { className: "relative shadow-md", style: { width: pageW, height: baseSize.height * scale }, children: /* @__PURE__ */ jsx(PdfPage, { pdfjs, doc, page: p, scale, textLayer }) })
-            },
-            p
-          )) })
+          children: !ready || !baseSize ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-3 p-6", children: /* @__PURE__ */ jsx(SkeletonBox, { width: Math.min((viewport.w || 528) - 48, 560), height: 680, className: "rounded" }) }) : numPages === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center text-sm text-foreground-muted", children: "Empty document" }) : /* @__PURE__ */ jsx("div", { style: { height: total, position: "relative" }, children: visiblePages.map((p) => {
+            const s = sizes[p - 1] ?? baseSize;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { position: "absolute", top: offsets[p - 1], left: 0, right: 0, display: "flex", justifyContent: "center", paddingTop: GAP / 2 },
+                children: /* @__PURE__ */ jsx("div", { className: "relative shadow-md", style: { width: s.width * scale, height: s.height * scale }, children: /* @__PURE__ */ jsx(PdfPage, { pdfjs, doc, page: p, scale, textLayer, onMeasure: handleMeasure }) })
+              },
+              p
+            );
+          }) })
         }
       )
     ] })
   ] });
 }
-function PdfPage({ pdfjs, doc, page, scale, textLayer }) {
+function PdfPage({
+  pdfjs,
+  doc,
+  page,
+  scale,
+  textLayer,
+  onMeasure
+}) {
   const canvasRef = useRef(null);
   const textRef = useRef(null);
   useEffect(() => {
@@ -6227,6 +6370,7 @@ function PdfPage({ pdfjs, doc, page, scale, textLayer }) {
       const pg = await doc.getPage(page);
       if (cancelled) return;
       const viewport = pg.getViewport({ scale });
+      onMeasure?.(page, { width: viewport.width / scale, height: viewport.height / scale });
       const canvas = canvasRef.current;
       if (!canvas) return;
       const ratio = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
@@ -6243,6 +6387,7 @@ function PdfPage({ pdfjs, doc, page, scale, textLayer }) {
       }
       if (cancelled || !textLayer || !textRef.current || !pdfjs?.TextLayer) return;
       try {
+        ensureTextLayerStyles();
         textRef.current.innerHTML = "";
         textRef.current.style.setProperty("--scale-factor", String(scale));
         const tl = new pdfjs.TextLayer({ textContentSource: pg.streamTextContent(), container: textRef.current, viewport });
@@ -6254,17 +6399,20 @@ function PdfPage({ pdfjs, doc, page, scale, textLayer }) {
       cancelled = true;
       renderTask?.cancel?.();
     };
-  }, [pdfjs, doc, page, scale, textLayer]);
+  }, [pdfjs, doc, page, scale, textLayer, onMeasure]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "block bg-white" }),
-    textLayer && /* @__PURE__ */ jsx("div", { ref: textRef, className: "textLayer pointer-events-auto absolute inset-0 overflow-hidden leading-none", style: { opacity: 0.25 }, "aria-hidden": "true" })
+    textLayer && /* @__PURE__ */ jsx("div", { ref: textRef, className: "oxy-textLayer", "aria-hidden": "true" })
   ] });
 }
 var Chevron5 = ({ dir }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: dir === "up" ? "m6 15 6-6 6 6" : "m6 9 6 6 6-6" }) });
-var SearchIcon2 = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: [
+var MinusIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M5 12h14" }) });
+var PlusIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M12 5v14M5 12h14" }) });
+var SearchIcon2 = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4 text-foreground-muted", "aria-hidden": "true", children: [
   /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
   /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "m21 21-4.3-4.3" })
 ] });
+var CloseIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M6 6l12 12M18 6 6 18" }) });
 var DownloadIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3v12m0 0 4-4m-4 4-4-4M4 21h16" }) });
 var PrintIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9V3h12v6M6 18H4v-7h16v7h-2M8 14h8v7H8z" }) });
 var FitWidthIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 12h18m0 0-4-4m4 4-4 4M3 12l4-4m-4 4 4 4" }) });
@@ -6275,10 +6423,10 @@ var FitPageIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill
 var DEFAULT_COL_WIDTH = 140;
 var GUTTER = 52;
 function resolveWidth(w) {
-  if (typeof w === "number") return w;
+  if (typeof w === "number" && Number.isFinite(w)) return w;
   if (typeof w === "string") {
-    const n = parseFloat(w);
-    if (!Number.isNaN(n) && /^\d/.test(w.trim())) return n;
+    const m = /^\s*(\d+(?:\.\d+)?)(px)?\s*$/.exec(w);
+    if (m) return parseFloat(m[1]);
   }
   return DEFAULT_COL_WIDTH;
 }
@@ -6471,13 +6619,16 @@ var xlsxPromise = null;
 var loadXlsx = () => xlsxPromise ??= import('xlsx');
 var jspdfPromise = null;
 var loadJspdf = () => jspdfPromise ??= import('jspdf');
-function download(blob, name) {
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = name;
-  a.click();
-  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+function coerceToCellType(prev, next) {
+  if (typeof prev === "number") {
+    const n = Number(next);
+    return next.trim() !== "" && Number.isFinite(n) ? n : next;
+  }
+  if (typeof prev === "boolean") {
+    if (/^(true|false)$/i.test(next.trim())) return next.trim().toLowerCase() === "true";
+    return next;
+  }
+  return next;
 }
 function Spreadsheet({
   source,
@@ -6545,20 +6696,23 @@ function Spreadsheet({
   const columns = useMemo(() => sheet ? toColumns(sheet.columns) : [], [sheet]);
   const plainRows = useMemo(() => sheet ? toPlainRows(sheet, columns) : [], [sheet, columns]);
   const handleCellEdit = useCallback(({ row, column, value }) => {
+    let coerced = value;
     setSheets((prev) => {
       if (!prev) return prev;
       const next = prev.map((s, i) => i === active ? { ...s, rows: s.rows.map((r) => ({ ...r })) } : s);
       const target = next[active];
       const existing = target.rows[row]?.[column];
+      const prevValue = cellValue(existing);
+      coerced = coerceToCellType(prevValue, value);
       if (existing != null && typeof existing === "object" && "value" in existing) {
-        target.rows[row][column] = { ...existing, value };
+        target.rows[row][column] = { ...existing, value: coerced };
       } else {
-        target.rows[row][column] = value;
+        target.rows[row][column] = coerced;
       }
       onChange?.(next);
       return next;
     });
-    onCellEdit?.({ sheet: sheets?.[active]?.name ?? "", row, column, value });
+    onCellEdit?.({ sheet: sheets?.[active]?.name ?? "", row, column, value: coerced });
   }, [active, onCellEdit, onChange, sheets]);
   const baseName = useMemo(
     () => (fileName || (typeof source === "object" && "name" in source ? sourceName(source) : null) || "spreadsheet").replace(/\.[^.]+$/, ""),
@@ -6579,7 +6733,7 @@ function Spreadsheet({
       XLSX.utils.book_append_sheet(wb, ws, (s.name || "Sheet").slice(0, 31));
     });
     const out = XLSX.write(wb, { bookType: "xlsx", type: "array" });
-    download(new Blob([out], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }), `${baseName}.xlsx`);
+    downloadBlob(new Blob([out], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }), `${baseName}.xlsx`);
   }, [sheets, sheetAoa, baseName]);
   const exportCsv = useCallback(() => {
     if (!sheet) return;
@@ -6589,7 +6743,7 @@ function Spreadsheet({
       return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
     };
     const csv = aoa.map((row) => row.map(esc).join(",")).join("\r\n");
-    download(new Blob([`\uFEFF${csv}`], { type: "text/csv;charset=utf-8" }), `${baseName}.csv`);
+    downloadBlob(new Blob([`\uFEFF${csv}`], { type: "text/csv;charset=utf-8" }), `${baseName}.csv`);
   }, [sheet, sheetAoa, baseName]);
   const exportPdf = useCallback(async () => {
     if (!sheet) return;
@@ -6645,9 +6799,14 @@ function Spreadsheet({
     ] });
   }
   const formats = exportFormats || [];
-  return /* @__PURE__ */ jsxs("div", { className: cx("flex flex-col gap-2", className), style, children: [
-    (sheets.length > 1 || formats.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-      sheets.length > 1 && /* @__PURE__ */ jsx("div", { role: "tablist", className: "flex flex-wrap items-center gap-1 rounded-lg border border-border bg-surface p-1", children: sheets.map((s, i) => /* @__PURE__ */ jsx(
+  const exportLabels = {
+    xlsx: "Excel workbook (.xlsx)",
+    csv: "CSV \u2014 this sheet (.csv)",
+    pdf: "PDF table (.pdf)"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("flex flex-col overflow-hidden rounded-lg border border-border bg-surface-raised", className), style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-2 border-b border-border bg-surface px-2 py-1.5", children: [
+      sheets.length > 1 ? /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "Sheets", className: "flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto", children: sheets.map((s, i) => /* @__PURE__ */ jsx(
         "button",
         {
           role: "tab",
@@ -6655,14 +6814,40 @@ function Spreadsheet({
           "aria-selected": i === active,
           onClick: () => setActive(i),
           className: cx(
-            "rounded-md px-3 py-1 text-sm transition-colors",
-            i === active ? "bg-accent text-accent-fg" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
+            "flex-shrink-0 rounded-md px-3 py-1 text-sm font-medium transition-colors",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+            i === active ? "bg-accent text-accent-fg shadow-sm" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
           ),
           children: s.name || `Sheet ${i + 1}`
         },
         `${s.name}-${i}`
-      )) }),
-      formats.length > 0 && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-1.5", children: formats.map((fmt) => /* @__PURE__ */ jsx(Button_default, { content: fmt.toUpperCase(), size: "sm", variant: "outline", onClick: () => runExport(fmt) }, fmt)) })
+      )) }) : /* @__PURE__ */ jsx("span", { className: "flex-1 truncate px-1 text-sm font-medium text-foreground", children: sheet?.name || "Sheet 1" }),
+      /* @__PURE__ */ jsxs("span", { className: "hidden flex-shrink-0 px-1 text-xs tabular-nums text-foreground-muted sm:inline", children: [
+        plainRows.length.toLocaleString(),
+        " ",
+        plainRows.length === 1 ? "row" : "rows",
+        " \xB7 ",
+        columns.length,
+        " cols"
+      ] }),
+      formats.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "h-5 w-px flex-shrink-0 bg-border", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(
+          MenuButton,
+          {
+            label: "Export",
+            size: "sm",
+            variant: "outline",
+            align: "end",
+            icon: /* @__PURE__ */ jsx(DownloadIcon2, {}),
+            items: formats.map((fmt) => ({
+              key: fmt,
+              label: exportLabels[fmt],
+              onSelect: () => runExport(fmt)
+            }))
+          }
+        )
+      ] })
     ] }),
     /* @__PURE__ */ jsx(
       DataGrid,
@@ -6671,11 +6856,13 @@ function Spreadsheet({
         rows: plainRows,
         editable,
         virtualize,
-        onCellEdit: handleCellEdit
+        onCellEdit: handleCellEdit,
+        className: "!rounded-none !border-0"
       }
     )
   ] });
 }
+var DownloadIcon2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3v12m0 0 4-4m-4 4-4-4M4 21h16" }) });
 function ThemeSwitch({ checked, onChange, label = "Toggle dark mode", className = "" }) {
   const id = useId();
   return /* @__PURE__ */ jsx("label", { htmlFor: id, className: `flex items-center gap-2 cursor-pointer select-none ${className}`.trim(), children: /* @__PURE__ */ jsx(