@geomak/ui 7.9.0 → 7.11.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",
         {
@@ -6007,6 +6015,8 @@ function PdfViewer({
   onLoad,
   onError,
   onPageChange,
+  height = 600,
+  width,
   className = "",
   style
 }) {
@@ -6241,7 +6251,7 @@ function PdfViewer({
     ] });
   }
   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: [
+  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: [
@@ -6422,6 +6432,15 @@ 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" && Number.isFinite(w)) return w;
   if (typeof w === "string") {
@@ -6440,10 +6459,15 @@ function DataGrid({
   rowHeight = 34,
   headerHeight = 38,
   height = 480,
+  width,
   editable = false,
+  sortable = false,
+  sort: sortProp,
+  onSortChange,
   virtualize = true,
   overscan = 4,
   rowNumbers = true,
+  trailingRows = 0,
   onCellEdit,
   className = "",
   style,
@@ -6454,7 +6478,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 = [];
@@ -6465,7 +6492,21 @@ function DataGrid({
     }
     return { widths: widths2, offsets: offsets2, totalWidth: acc };
   }, [columns]);
-  const totalHeight = rows.length * rowHeight;
+  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 displayRowCount = rows.length + Math.max(0, trailingRows);
+  const totalHeight = displayRowCount * rowHeight;
+  const rowIndexForDisp = (disp) => disp < rows.length ? order[disp] : disp;
   useEffect(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
@@ -6477,7 +6518,7 @@ function DataGrid({
   }, []);
   const bodyH = (viewport.h || (typeof height === "number" ? height : 480)) - headerHeight;
   const rowStart = virtualize ? Math.max(0, Math.floor(scroll.top / rowHeight) - overscan) : 0;
-  const rowEnd = virtualize ? Math.min(rows.length, Math.ceil((scroll.top + bodyH) / rowHeight) + overscan) : rows.length;
+  const rowEnd = virtualize ? Math.min(displayRowCount, Math.ceil((scroll.top + bodyH) / rowHeight) + overscan) : displayRowCount;
   let colStart = 0;
   let colEnd = columns.length;
   if (virtualize && viewport.w) {
@@ -6495,14 +6536,15 @@ function DataGrid({
   const commit = useCallback(() => {
     if (!editing) return;
     const col = columns[editing.col];
-    onCellEdit?.({ row: editing.row, column: col.key, value: draft });
+    const ri = editing.disp < rows.length ? order[editing.disp] : editing.disp;
+    onCellEdit?.({ row: ri, column: col.key, value: draft });
     setEditing(null);
-  }, [editing, columns, draft, onCellEdit]);
-  const startEdit = (row, col) => {
+  }, [editing, columns, draft, onCellEdit, order, rows.length]);
+  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[rowIndexForDisp(disp)]?.[c.key] ?? ""));
+    setEditing({ disp, col });
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -6510,12 +6552,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",
             {
@@ -6525,11 +6567,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,
@@ -6539,38 +6588,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 = rowIndexForDisp(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,
@@ -6591,16 +6644,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 })
+        displayRowCount === 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 });
 }
@@ -6608,6 +6667,18 @@ function cellValue(v) {
   if (v != null && typeof v === "object" && "value" in v) return v.value;
   return v;
 }
+function columnLetter(i) {
+  let s = "";
+  let n = i;
+  do {
+    s = String.fromCharCode(65 + n % 26) + s;
+    n = Math.floor(n / 26) - 1;
+  } while (n >= 0);
+  return s;
+}
+function blankSheet(name, cols = 8) {
+  return { name, columns: Array.from({ length: cols }, (_, i) => ({ key: columnLetter(i), label: columnLetter(i) })), rows: [] };
+}
 function toPlainRows(sheet, columns) {
   return sheet.rows.map((row) => {
     const out = {};
@@ -6639,9 +6710,15 @@ function Spreadsheet({
   export: exportFormats = ["xlsx", "csv", "pdf"],
   fileName,
   virtualize = true,
+  sortable = true,
+  emptyRows = 50,
+  allowAddSheet,
+  height = 480,
+  width,
   className = "",
   style
 }) {
+  const canAddSheet = allowAddSheet ?? editable;
   const [sheets, setSheets] = useState(Array.isArray(source) ? source : null);
   const [active, setActive] = useState(0);
   const [status, setStatus] = useState(Array.isArray(source) ? "ready" : "loading");
@@ -6701,6 +6778,7 @@ function Spreadsheet({
       if (!prev) return prev;
       const next = prev.map((s, i) => i === active ? { ...s, rows: s.rows.map((r) => ({ ...r })) } : s);
       const target = next[active];
+      while (target.rows.length <= row) target.rows.push({});
       const existing = target.rows[row]?.[column];
       const prevValue = cellValue(existing);
       coerced = coerceToCellType(prevValue, value);
@@ -6714,6 +6792,18 @@ function Spreadsheet({
     });
     onCellEdit?.({ sheet: sheets?.[active]?.name ?? "", row, column, value: coerced });
   }, [active, onCellEdit, onChange, sheets]);
+  const addSheet = useCallback(() => {
+    setSheets((prev) => {
+      const list = prev ?? [];
+      const used = new Set(list.map((s) => s.name));
+      let n = list.length + 1;
+      while (used.has(`Sheet ${n}`)) n++;
+      const next = [...list, blankSheet(`Sheet ${n}`)];
+      setActive(next.length - 1);
+      onChange?.(next);
+      return next;
+    });
+  }, [onChange]);
   const baseName = useMemo(
     () => (fileName || (typeof source === "object" && "name" in source ? sourceName(source) : null) || "spreadsheet").replace(/\.[^.]+$/, ""),
     [fileName, source]
@@ -6786,16 +6876,16 @@ 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 || [];
@@ -6804,25 +6894,10 @@ function Spreadsheet({
     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",
-          type: "button",
-          "aria-selected": i === active,
-          onClick: () => setActive(i),
-          className: cx(
-            "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}`
-      )) }) : /* @__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: [
+  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",
@@ -6849,17 +6924,53 @@ function Spreadsheet({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
       DataGrid,
       {
         columns,
         rows: plainRows,
         editable,
+        sortable,
         virtualize,
+        trailingRows: emptyRows,
         onCellEdit: handleCellEdit,
+        height: "100%",
         className: "!rounded-none !border-0"
-      }
-    )
+      },
+      active
+    ) }),
+    (sheets.length > 1 || canAddSheet) && /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-1 border-t border-border bg-surface px-2 py-1", children: [
+      /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "Sheets", className: "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto", children: sheets.map((s, i) => {
+        const activeTab = i === active;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            role: "tab",
+            type: "button",
+            "aria-selected": activeTab,
+            onClick: () => setActive(i),
+            className: cx(
+              "flex-shrink-0 rounded-t-md border-t-2 px-3 py-1 text-xs transition-colors",
+              "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+              activeTab ? "border-t-accent bg-surface-raised font-semibold text-foreground shadow-sm" : "border-t-transparent font-medium text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
+            ),
+            children: s.name || `Sheet ${i + 1}`
+          },
+          `${s.name}-${i}`
+        );
+      }) }),
+      canAddSheet && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: addSheet,
+          title: "Add sheet",
+          "aria-label": "Add sheet",
+          className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md text-foreground-muted transition-colors hover:bg-surface-raised hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+          children: /* @__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 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" }) });
@@ -6963,7 +7074,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);
@@ -6972,7 +7083,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,
@@ -7264,8 +7375,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",
@@ -7302,9 +7413,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;
@@ -7713,7 +7824,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(() => {
@@ -8526,8 +8637,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("");
@@ -8633,7 +8747,7 @@ function Dropdown({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(Popover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
               Popover.Content,
               {
                 align: "start",
@@ -10021,7 +10135,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",
       {
@@ -11080,7 +11194,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)) })