@geomak/ui 7.8.0 → 7.10.0

package/dist/index.js

@@ -2,7 +2,7 @@ import { X, Error as Error$1, Warning, CheckCircle, Info } from './chunk-KAFJJO5
 export { icons_default as Icon, createIcon } from './chunk-KAFJJO5O.js';
 import { colors_default } from './chunk-DXOWXLKK.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-DXOWXLKK.js';
-import React34, { useMemo, createContext, useState, useEffect, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
+import React36, { useMemo, createContext, useState, useEffect, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -453,7 +453,7 @@ function Typography({
     }
   );
 }
-var IconButton = React34.forwardRef(function IconButton2({
+var IconButton = React36.forwardRef(function IconButton2({
   icon,
   onClick,
   type = "primary",
@@ -562,7 +562,7 @@ var SIZE_CLASSES = {
   md: "h-9  px-4   text-sm  gap-1.5 rounded-lg",
   lg: "h-11 px-5   text-sm  gap-2   rounded-xl"
 };
-var Button = React34.forwardRef(function Button2({
+var Button = React36.forwardRef(function Button2({
   content,
   variant = "primary",
   size = "md",
@@ -670,7 +670,7 @@ function MenuButton({
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
         ].join(" "),
-        children: items.map((item) => /* @__PURE__ */ jsxs(React34.Fragment, { children: [
+        children: items.map((item) => /* @__PURE__ */ jsxs(React36.Fragment, { children: [
           item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenu2.Separator, { className: "my-1 h-px bg-border" }),
           /* @__PURE__ */ jsxs(
             DropdownMenu2.Item,
@@ -693,6 +693,10 @@ function MenuButton({
     ) })
   ] });
 }
+var DialogContainerContext = createContext(null);
+function useDialogContainer() {
+  return useContext(DialogContainerContext);
+}
 var SIZE_MAP = {
   sm: 400,
   md: 600,
@@ -717,6 +721,7 @@ function Modal({
   className = ""
 }) {
   const reduced = useReducedMotion();
+  const [panelEl, setPanelEl] = useState(null);
   const maxWidth = width ?? SIZE_MAP[size];
   return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange: (next) => {
     if (!next) onClose?.();
@@ -734,6 +739,7 @@ function Modal({
     /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, children: /* @__PURE__ */ jsxs(
       motion.div,
       {
+        ref: setPanelEl,
         className: `fixed left-1/2 top-1/2 z-modal flex flex-col w-[calc(100%-2rem)] max-h-[90dvh] bg-surface rounded-2xl shadow-xl overflow-hidden focus:outline-none ${className}`.trim(),
         style: {
           maxWidth,
@@ -761,7 +767,7 @@ function Modal({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: `flex-1 overflow-y-auto p-5 ${hasFooter ? "" : "pb-5"}`, children }),
+          /* @__PURE__ */ jsx("div", { className: `flex-1 overflow-y-auto p-5 ${hasFooter ? "" : "pb-5"}`, children: /* @__PURE__ */ jsx(DialogContainerContext.Provider, { value: panelEl, children }) }),
           hasFooter && /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-end gap-3 border-t border-border px-5 py-3", children: [
             /* @__PURE__ */ jsx(
               Button_default,
@@ -812,6 +818,7 @@ function Drawer({
   className = ""
 }) {
   const reduced = useReducedMotion();
+  const [panelEl, setPanelEl] = useState(null);
   const isRight = placement === "right";
   const hiddenX = isRight ? "100%" : "-100%";
   const resolvedWidth = width ?? SIZE_MAP2[size];
@@ -832,6 +839,7 @@ function Drawer({
     /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, children: /* @__PURE__ */ jsxs(
       motion.div,
       {
+        ref: setPanelEl,
         className: `fixed top-0 bottom-0 ${isRight ? "right-0" : "left-0"} z-modal flex flex-col bg-surface shadow-xl focus:outline-none ${className}`.trim(),
         style: { width: `min(calc(100vw - 1rem), ${widthCss})` },
         initial: { x: reduced ? 0 : hiddenX, opacity: reduced ? 0 : 1 },
@@ -858,7 +866,7 @@ function Drawer({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-5", children }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-5", children: /* @__PURE__ */ jsx(DialogContainerContext.Provider, { value: panelEl, children }) }),
           hasFooter && /* @__PURE__ */ jsxs("div", { className: `flex flex-shrink-0 items-center gap-3 border-t border-border px-5 py-3 ${isRight ? "justify-start" : "justify-end"}`, children: [
             /* @__PURE__ */ jsx(Button_default, { style: { width: 90 }, variant: cancelVariant, content: cancelText, onClick: onCancel }),
             /* @__PURE__ */ jsx(Button_default, { style: { width: 90 }, variant: okVariant, content: okText, onClick: onOk })
@@ -1817,7 +1825,7 @@ function Kbd({
   style
 }) {
   if (keys && keys.length > 0) {
-    return /* @__PURE__ */ jsx("span", { className: cx("inline-flex items-center gap-1", className), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React34.Fragment, { children: [
+    return /* @__PURE__ */ jsx("span", { className: cx("inline-flex items-center gap-1", className), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React36.Fragment, { children: [
       i > 0 && /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
       /* @__PURE__ */ jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
     ] }, `${k}-${i}`)) });
@@ -1909,7 +1917,7 @@ function FlatCarousel({
   style
 }) {
   const scrollerRef = useRef(null);
-  const slides = React34.Children.toArray(children);
+  const slides = React36.Children.toArray(children);
   const [active, setActive] = useState(0);
   const [atStart, setAtStart] = useState(true);
   const [atEnd, setAtEnd] = useState(false);
@@ -1964,7 +1972,7 @@ function RotatingCarousel({
   className = "",
   style
 }) {
-  const slides = React34.Children.toArray(children);
+  const slides = React36.Children.toArray(children);
   const count = slides.length;
   const [active, setActive] = useState(0);
   const reduced = useReducedMotion();
@@ -5245,7 +5253,7 @@ function Wizard({
   ] });
 }
 var SearchIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) });
-var SearchInput = React34.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+var SearchInput = React36.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
   return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5562,7 +5570,7 @@ function TableBody({
   return /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
     const rowKey = getRowKey(row, i);
     const isExpanded = expanded.has(rowKey);
-    return /* @__PURE__ */ jsxs(React34.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React36.Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "tr",
         {
@@ -5937,6 +5945,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 +5964,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,9 +6011,12 @@ function PdfViewer({
   toolbar = true,
   thumbnails = false,
   textLayer = true,
+  workerSrc,
   onLoad,
   onError,
   onPageChange,
+  height = 600,
+  width,
   className = "",
   style
 }) {
@@ -5976,6 +6024,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 +6037,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 +6052,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 +6070,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 +6088,7 @@ function PdfViewer({
       cancelled = true;
       task?.destroy?.();
     };
-  }, [source, remote, reloadKey]);
+  }, [source, remote, reloadKey, workerSrc]);
   useEffect(() => () => {
     doc?.destroy?.();
   }, [doc]);
@@ -6037,59 +6101,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 +6209,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 +6237,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 +6250,127 @@ function PdfViewer({
       /* @__PURE__ */ jsx(Button_default, { content: "Retry", size: "sm", variant: "outline", onClick: () => setReloadKey((k) => k + 1) })
     ] });
   }
-  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"
+  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, width, ...style }, children: [
+    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 +6380,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 +6397,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 +6409,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" }) });
@@ -6274,11 +6432,20 @@ var FitPageIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill
 ] });
 var DEFAULT_COL_WIDTH = 140;
 var GUTTER = 52;
+var END_PAD = 12;
+function compareValues2(a, b) {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (typeof a === "boolean" && typeof b === "boolean") return a === b ? 0 : a ? 1 : -1;
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+}
 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;
 }
@@ -6292,7 +6459,11 @@ function DataGrid({
   rowHeight = 34,
   headerHeight = 38,
   height = 480,
+  width,
   editable = false,
+  sortable = false,
+  sort: sortProp,
+  onSortChange,
   virtualize = true,
   overscan = 4,
   rowNumbers = true,
@@ -6306,7 +6477,10 @@ function DataGrid({
   const [viewport, setViewport] = useState({ w: 0, h: 0 });
   const [editing, setEditing] = useState(null);
   const [draft, setDraft] = useState("");
+  const [internalSort, setInternalSort] = useState(null);
+  const sort = sortProp !== void 0 ? sortProp : internalSort;
   const gutter = rowNumbers ? GUTTER : 0;
+  const colSortable = (c) => c.sortable ?? sortable;
   const { widths, offsets, totalWidth } = useMemo(() => {
     const widths2 = columns.map((c) => resolveWidth(c.width));
     const offsets2 = [];
@@ -6317,6 +6491,18 @@ function DataGrid({
     }
     return { widths: widths2, offsets: offsets2, totalWidth: acc };
   }, [columns]);
+  const order = useMemo(() => {
+    const idx = rows.map((_, i) => i);
+    if (!sort) return idx;
+    const dir = sort.dir === "asc" ? 1 : -1;
+    return idx.sort((ia, ib) => dir * compareValues2(rows[ia]?.[sort.key] ?? null, rows[ib]?.[sort.key] ?? null));
+  }, [rows, sort]);
+  const toggleSort = (key) => {
+    const nextDir = sort?.key !== key ? "asc" : sort.dir === "asc" ? "desc" : null;
+    const next = nextDir ? { key, dir: nextDir } : null;
+    if (sortProp === void 0) setInternalSort(next);
+    onSortChange?.(next);
+  };
   const totalHeight = rows.length * rowHeight;
   useEffect(() => {
     const el = scrollRef.current;
@@ -6347,14 +6533,14 @@ function DataGrid({
   const commit = useCallback(() => {
     if (!editing) return;
     const col = columns[editing.col];
-    onCellEdit?.({ row: editing.row, column: col.key, value: draft });
+    onCellEdit?.({ row: order[editing.disp], column: col.key, value: draft });
     setEditing(null);
-  }, [editing, columns, draft, onCellEdit]);
-  const startEdit = (row, col) => {
+  }, [editing, columns, draft, onCellEdit, order]);
+  const startEdit = (disp, col) => {
     const c = columns[col];
     if (!(c.editable ?? editable)) return;
-    setDraft(displayValue(rows[row]?.[c.key] ?? ""));
-    setEditing({ row, col });
+    setDraft(displayValue(rows[order[disp]]?.[c.key] ?? ""));
+    setEditing({ disp, col });
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -6362,12 +6548,12 @@ function DataGrid({
       ref: scrollRef,
       onScroll: (e) => setScroll({ top: e.currentTarget.scrollTop, left: e.currentTarget.scrollLeft }),
       className: cx("relative overflow-auto rounded-lg border border-border bg-surface-raised text-sm", className),
-      style: { height, ...style },
+      style: { height, width, ...style },
       role: "grid",
       "aria-rowcount": rows.length,
       "aria-colcount": columns.length,
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: gutter + totalWidth, height: headerHeight + totalHeight }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: gutter + totalWidth + END_PAD, height: headerHeight + totalHeight + END_PAD }, children: [
           rowNumbers && /* @__PURE__ */ jsx(
             "div",
             {
@@ -6377,11 +6563,18 @@ function DataGrid({
           ),
           visibleCols.map((ci) => {
             const c = columns[ci];
-            return /* @__PURE__ */ jsx(
+            const sortDir = sort?.key === c.key ? sort.dir : null;
+            const canSort = colSortable(c);
+            return /* @__PURE__ */ jsxs(
               "div",
               {
                 role: "columnheader",
-                className: "flex items-center border-b border-r border-border bg-surface px-3 font-medium text-foreground-secondary",
+                "aria-sort": sortDir ? sortDir === "asc" ? "ascending" : "descending" : void 0,
+                onClick: canSort ? () => toggleSort(c.key) : void 0,
+                className: cx(
+                  "flex items-center gap-1 border-b border-r border-border bg-surface px-3 font-medium text-foreground-secondary",
+                  canSort && "cursor-pointer select-none hover:text-foreground"
+                ),
                 style: {
                   position: "absolute",
                   top: scroll.top,
@@ -6391,38 +6584,42 @@ function DataGrid({
                   zIndex: 2,
                   justifyContent: c.align === "right" ? "flex-end" : c.align === "center" ? "center" : "flex-start"
                 },
-                children: /* @__PURE__ */ jsx("span", { className: "truncate", children: c.label ?? c.key })
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: c.label ?? c.key }),
+                  canSort && /* @__PURE__ */ jsx(SortCaret, { dir: sortDir })
+                ]
               },
               `h-${c.key}`
             );
           }),
-          rowNumbers && visibleRows.map((ri) => /* @__PURE__ */ jsx(
+          rowNumbers && visibleRows.map((disp) => /* @__PURE__ */ jsx(
             "div",
             {
               className: "flex items-center justify-center border-b border-r border-border bg-surface text-xs tabular-nums text-foreground-muted",
-              style: { position: "absolute", left: scroll.left, top: headerHeight + ri * rowHeight, width: gutter, height: rowHeight, zIndex: 1 },
-              children: ri + 1
+              style: { position: "absolute", left: scroll.left, top: headerHeight + disp * rowHeight, width: gutter, height: rowHeight, zIndex: 1 },
+              children: disp + 1
             },
-            `g-${ri}`
+            `g-${disp}`
           )),
-          visibleRows.map(
-            (ri) => visibleCols.map((ci) => {
+          visibleRows.map((disp) => {
+            const ri = order[disp];
+            return visibleCols.map((ci) => {
               const c = columns[ci];
-              const isEditing = editing?.row === ri && editing?.col === ci;
+              const isEditing = editing?.disp === disp && editing?.col === ci;
               const canEdit = c.editable ?? editable;
               return /* @__PURE__ */ jsx(
                 "div",
                 {
                   role: "gridcell",
-                  onDoubleClick: () => startEdit(ri, ci),
+                  onDoubleClick: () => startEdit(disp, ci),
                   className: cx(
                     "flex items-center border-b border-r border-border px-3",
-                    ri % 2 ? "bg-surface-raised" : "bg-surface",
+                    disp % 2 ? "bg-surface-raised" : "bg-surface",
                     canEdit && "cursor-text"
                   ),
                   style: {
                     position: "absolute",
-                    top: headerHeight + ri * rowHeight,
+                    top: headerHeight + disp * rowHeight,
                     left: gutter + offsets[ci],
                     width: widths[ci],
                     height: rowHeight,
@@ -6443,16 +6640,22 @@ function DataGrid({
                     }
                   ) : /* @__PURE__ */ jsx("span", { className: "truncate text-foreground", children: displayValue(rows[ri]?.[c.key] ?? "") })
                 },
-                `${ri}-${c.key}`
+                `${disp}-${c.key}`
               );
-            })
-          )
+            });
+          })
         ] }),
         rows.length === 0 && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center text-foreground-muted", style: { top: headerHeight }, children: emptyState })
       ]
     }
   );
 }
+function SortCaret({ dir }) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", className: "h-3 w-3 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 1.75, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 6.5 8 3.5l3 3", className: dir === "asc" ? "text-accent" : "text-foreground-muted opacity-50" }),
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 9.5 8 12.5l3-3", className: dir === "desc" ? "text-accent" : "text-foreground-muted opacity-50" })
+  ] });
+}
 function toColumns(cols) {
   return cols.map((c) => typeof c === "string" ? { key: c, label: c } : { ...c, label: c.label ?? c.key });
 }
@@ -6471,13 +6674,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,
@@ -6488,6 +6694,9 @@ function Spreadsheet({
   export: exportFormats = ["xlsx", "csv", "pdf"],
   fileName,
   virtualize = true,
+  sortable = true,
+  height = 480,
+  width,
   className = "",
   style
 }) {
@@ -6545,20 +6754,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 +6791,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 +6801,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;
@@ -6632,50 +6844,87 @@ function Spreadsheet({
     else void exportPdf();
   };
   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: [
+    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: { height, width, ...style }, children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-status-error", children: "Couldn\u2019t load the spreadsheet" }),
       error?.message && /* @__PURE__ */ jsx("p", { className: "max-w-md text-xs text-foreground-muted", children: error.message }),
       /* @__PURE__ */ jsx(Button_default, { content: "Retry", size: "sm", variant: "outline", onClick: () => setReloadKey((k) => k + 1) })
     ] });
   }
   if (status === "loading" || !sheets) {
-    return /* @__PURE__ */ jsxs("div", { className: cx("rounded-lg border border-border bg-surface-raised p-4", className), style, children: [
+    return /* @__PURE__ */ jsxs("div", { className: cx("overflow-hidden rounded-lg border border-border bg-surface-raised p-4", className), style: { height, width, ...style }, children: [
       /* @__PURE__ */ jsx(SkeletonBox, { height: 32, className: "mb-3 rounded" }),
-      /* @__PURE__ */ jsx(SkeletonBox, { height: 360, className: "rounded" })
+      /* @__PURE__ */ jsx(SkeletonBox, { height: "calc(100% - 44px)", className: "rounded" })
     ] });
   }
   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(
-        "button",
-        {
-          role: "tab",
-          type: "button",
-          "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"
-          ),
-          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)) })
+  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: { height, width, ...style }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-2 border-b border-border bg-surface px-3 py-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground", children: sheet?.name || "Sheet 1" }),
+      /* @__PURE__ */ jsxs("span", { className: "hidden flex-shrink-0 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(
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
       DataGrid,
       {
         columns,
         rows: plainRows,
         editable,
+        sortable,
         virtualize,
-        onCellEdit: handleCellEdit
-      }
-    )
+        onCellEdit: handleCellEdit,
+        height: "100%",
+        className: "!rounded-none !border-0"
+      },
+      active
+    ) }),
+    sheets.length > 1 && /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "Sheets", className: "flex flex-shrink-0 items-center gap-1 overflow-x-auto border-t border-border bg-surface px-2 py-1", children: sheets.map((s, i) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        role: "tab",
+        type: "button",
+        "aria-selected": i === active,
+        onClick: () => setActive(i),
+        className: cx(
+          "flex-shrink-0 rounded-md px-3 py-1 text-xs font-medium transition-colors",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+          i === active ? "bg-surface-raised text-foreground shadow-sm" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
+        ),
+        children: s.name || `Sheet ${i + 1}`
+      },
+      `${s.name}-${i}`
+    )) })
   ] });
 }
+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(
@@ -6776,7 +7025,7 @@ function FlyoutItems({ items }) {
 }
 function CollapsedFlyout({ item, trigger }) {
   const [open, setOpen] = useState(false);
-  const closeTimer = React34.useRef(void 0);
+  const closeTimer = React36.useRef(void 0);
   const openNow = () => {
     window.clearTimeout(closeTimer.current);
     setOpen(true);
@@ -6785,7 +7034,7 @@ function CollapsedFlyout({ item, trigger }) {
     window.clearTimeout(closeTimer.current);
     closeTimer.current = window.setTimeout(() => setOpen(false), 150);
   };
-  React34.useEffect(() => () => window.clearTimeout(closeTimer.current), []);
+  React36.useEffect(() => () => window.clearTimeout(closeTimer.current), []);
   return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { open, onOpenChange: setOpen, modal: false, children: [
     /* @__PURE__ */ jsx(
       DropdownMenu2.Trigger,
@@ -7077,8 +7326,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
 function MegaMenuFeatured({ children, className = "" }) {
   return /* @__PURE__ */ jsx("div", { className: cx("min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className), children });
 }
-var elementsOfType = (children, type) => React34.Children.toArray(children).filter(
-  (c) => React34.isValidElement(c) && c.type === type
+var elementsOfType = (children, type) => React36.Children.toArray(children).filter(
+  (c) => React36.isValidElement(c) && c.type === type
 );
 var MOBILE_CHEVRON = /* @__PURE__ */ jsx(
   "svg",
@@ -7115,9 +7364,9 @@ function MobileLinkRow({ link, onNavigate }) {
   );
 }
 function MobilePanel({ panel, onNavigate }) {
-  const nodes = React34.Children.toArray(panel.props.children);
+  const nodes = React36.Children.toArray(panel.props.children);
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
-    if (!React34.isValidElement(node)) return null;
+    if (!React36.isValidElement(node)) return null;
     const el = node;
     if (el.type === MegaMenuSection) {
       const { title, children } = el.props;
@@ -7526,7 +7775,7 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React34.useId().replace(/:/g, "");
+  const id = React36.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
   const divRef = useRef(null);
   useEffect(() => {
@@ -8339,8 +8588,11 @@ function Dropdown({
   labelStyle = {},
   placeholder,
   size = "md",
-  className = ""
+  className = "",
+  container
 }) {
+  const dialogContainer = useDialogContainer();
+  const portalContainer = container ?? dialogContainer ?? void 0;
   const [open, setOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
   const [searchTerm, setSearchTerm] = useState("");
@@ -8446,7 +8698,7 @@ function Dropdown({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(Popover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
               Popover.Content,
               {
                 align: "start",
@@ -9834,7 +10086,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React34.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React36.Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -10893,7 +11145,7 @@ function Blog({
           post.tag != null && !post.image && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { tone: "accent", variant: "soft", size: "sm", children: post.tag }) }),
           /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold leading-snug text-foreground transition-colors group-hover:text-accent", children: post.title }),
           post.excerpt != null && /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-sm leading-relaxed text-foreground-secondary", children: post.excerpt }),
-          meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-3 text-xs text-foreground-muted", children: meta.map((m, j) => /* @__PURE__ */ jsxs(React34.Fragment, { children: [
+          meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-3 text-xs text-foreground-muted", children: meta.map((m, j) => /* @__PURE__ */ jsxs(React36.Fragment, { children: [
             j > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
             /* @__PURE__ */ jsx("span", { children: m })
           ] }, j)) })