@geomak/ui 7.12.0 → 7.14.0

package/dist/index.js

@@ -6,7 +6,7 @@ import React36, { useMemo, createContext, useState, useEffect, useId, useCallbac
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useReducedMotion, AnimatePresence, motion, useScroll, useTransform } from 'framer-motion';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -631,6 +631,39 @@ var Chevron = () => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" })
   }
 );
+var ChevronRight = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "ml-auto h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+var ITEM_CLASS = [
+  "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm outline-none cursor-pointer select-none transition-colors",
+  "data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
+].join(" ");
+var itemTone = (danger) => danger ? "text-status-error data-[highlighted]:bg-status-error/10" : "text-foreground data-[highlighted]:bg-surface-raised";
+var Label = ({ item }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  item.icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: item.icon }),
+  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label })
+] });
+function renderItem(item) {
+  if (item.children && item.children.length > 0) {
+    return /* @__PURE__ */ jsxs(DropdownMenu.Sub, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenu.SubTrigger, { disabled: item.disabled, className: `${ITEM_CLASS} ${itemTone(item.danger)}`, children: [
+        /* @__PURE__ */ jsx(Label, { item }),
+        /* @__PURE__ */ jsx(ChevronRight, {})
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
+        DropdownMenu.SubContent,
+        {
+          sideOffset: 4,
+          collisionPadding: 8,
+          className: "z-[400] min-w-[10rem] rounded-lg border border-border bg-surface p-1 shadow-lg data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          children: item.children.map((sub) => /* @__PURE__ */ jsxs(React36.Fragment, { children: [
+            sub.separatorBefore && /* @__PURE__ */ jsx(DropdownMenu.Separator, { className: "my-1 h-px bg-border" }),
+            renderItem(sub)
+          ] }, sub.key))
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(DropdownMenu.Item, { disabled: item.disabled, onSelect: () => item.onSelect?.(), className: `${ITEM_CLASS} ${itemTone(item.danger)}`, children: /* @__PURE__ */ jsx(Label, { item }) });
+}
 function MenuButton({
   label,
   items,
@@ -643,8 +676,8 @@ function MenuButton({
   side = "bottom",
   className = ""
 }) {
-  return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
       Button_default,
       {
         variant,
@@ -658,8 +691,8 @@ function MenuButton({
         ] })
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu2.Content,
+    /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu.Content,
       {
         align,
         side,
@@ -671,23 +704,8 @@ function MenuButton({
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
         ].join(" "),
         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,
-            {
-              disabled: item.disabled,
-              onSelect: () => item.onSelect?.(),
-              className: [
-                "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm outline-none cursor-pointer select-none transition-colors",
-                "data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
-                item.danger ? "text-status-error data-[highlighted]:bg-status-error/10" : "text-foreground data-[highlighted]:bg-surface-raised"
-              ].join(" "),
-              children: [
-                item.icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: item.icon }),
-                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label })
-              ]
-            }
-          )
+          item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenu.Separator, { className: "my-1 h-px bg-border" }),
+          renderItem(item)
         ] }, item.key))
       }
     ) })
@@ -1729,7 +1747,7 @@ function Stepper({
   const vertical = orientation === "vertical" || forcedVertical;
   const s = SIZES[size];
   const stateOf = (i) => i < current ? "completed" : i === current ? status : "pending";
-  const Label2 = ({ step, state, align }) => /* @__PURE__ */ jsxs("div", { className: align === "center" ? "mt-2 text-center" : "pt-0.5", children: [
+  const Label3 = ({ step, state, align }) => /* @__PURE__ */ jsxs("div", { className: align === "center" ? "mt-2 text-center" : "pt-0.5", children: [
     /* @__PURE__ */ jsx("div", { className: `font-medium leading-tight ${s.title} ${state === "pending" ? "text-foreground-muted" : "text-foreground"}`, children: step.title }),
     step.description && /* @__PURE__ */ jsx("div", { className: `mt-0.5 leading-snug text-foreground-muted ${s.desc}`, children: step.description })
   ] });
@@ -1744,7 +1762,7 @@ function Stepper({
           stepButton(i, /* @__PURE__ */ jsx(Indicator, { state, index: i, step, sizeKey: size })),
           !last && /* @__PURE__ */ jsx(VConnector, { filled: i < current, reduced })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: last ? "" : "pb-6", children: stepButton(i, /* @__PURE__ */ jsx(Label2, { step, state, align: "left" })) })
+        /* @__PURE__ */ jsx("div", { className: last ? "" : "pb-6", children: stepButton(i, /* @__PURE__ */ jsx(Label3, { step, state, align: "left" })) })
       ] }, step.key);
     }) });
   }
@@ -1763,7 +1781,7 @@ function Stepper({
       ) }),
       stepButton(i, /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
         /* @__PURE__ */ jsx(Indicator, { state, index: i, step, sizeKey: size }),
-        /* @__PURE__ */ jsx(Label2, { step, state, align: "center" })
+        /* @__PURE__ */ jsx(Label3, { step, state, align: "center" })
       ] }))
     ] }, step.key);
   }) });
@@ -4929,7 +4947,7 @@ function ContextMenu({ items, children, className = "" }) {
       {
         className: `${CONTENT_CLASSNAME} ${className}`.trim(),
         collisionPadding: 8,
-        children: items.map((item) => renderItem(item))
+        children: items.map((item) => renderItem2(item))
       }
     ) })
   ] });
@@ -4951,7 +4969,7 @@ var ITEM_CLASSNAME = [
   "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:bg-transparent data-[disabled]:text-foreground-muted",
   "focus:outline-none"
 ].join(" ");
-function renderItem(item) {
+function renderItem2(item) {
   if (item.children && item.children.length > 0) {
     return /* @__PURE__ */ jsxs(ContextMenuPrimitive.Sub, { children: [
       /* @__PURE__ */ jsxs(
@@ -4961,7 +4979,7 @@ function renderItem(item) {
           className: ITEM_CLASSNAME,
           children: [
             /* @__PURE__ */ jsx(ContextMenuLabel, { icon: item.icon, value: item.value }),
-            /* @__PURE__ */ jsx(ChevronRight, {})
+            /* @__PURE__ */ jsx(ChevronRight2, {})
           ]
         }
       ),
@@ -4972,7 +4990,7 @@ function renderItem(item) {
           sideOffset: 2,
           alignOffset: -4,
           collisionPadding: 8,
-          children: item.children.map((sub) => renderItem(sub))
+          children: item.children.map((sub) => renderItem2(sub))
         }
       ) })
     ] }, item.key);
@@ -4994,7 +5012,7 @@ function ContextMenuLabel({ icon, value }) {
     /* @__PURE__ */ jsx("span", { className: "truncate", children: value })
   ] });
 }
-function ChevronRight() {
+function ChevronRight2() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4 flex-shrink-0", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
 }
 function readDismissed(key) {
@@ -5847,7 +5865,7 @@ var useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEf
 function VirtualList({
   items,
   rowHeight,
-  renderItem: renderItem2,
+  renderItem: renderItem3,
   height = 400,
   getKey,
   overscan = 6,
@@ -5912,7 +5930,7 @@ function VirtualList({
               role: "listitem",
               style: { height: rowHeight },
               className: "box-border",
-              children: renderItem2(item, index)
+              children: renderItem3(item, index)
             },
             getKey ? getKey(item, index) : index
           );
@@ -6453,6 +6471,15 @@ function displayValue(v) {
   if (v == null) return "";
   return String(v);
 }
+function colLetter(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 DataGrid({
   columns,
   rows,
@@ -6468,7 +6495,12 @@ function DataGrid({
   overscan = 4,
   rowNumbers = true,
   trailingRows = 0,
+  trailingCols = 0,
   onCellEdit,
+  contextMenu = false,
+  onInsertRow,
+  onDeleteRow,
+  onInsertColumn,
   className = "",
   style,
   emptyState = "No data"
@@ -6476,14 +6508,25 @@ function DataGrid({
   const scrollRef = useRef(null);
   const [scroll, setScroll] = useState({ top: 0, left: 0 });
   const [viewport, setViewport] = useState({ w: 0, h: 0 });
+  const [selected, setSelected] = useState(null);
+  const [hoveredRow, setHoveredRow] = useState(null);
+  const [ctxTarget, setCtxTarget] = useState(null);
   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 cols = useMemo(() => {
+    if (trailingCols <= 0) return columns;
+    const extra = Array.from({ length: trailingCols }, (_, k) => {
+      const idx = columns.length + k;
+      return { key: `__c${idx}`, label: colLetter(idx), editable: false, sortable: false };
+    });
+    return [...columns, ...extra];
+  }, [columns, trailingCols]);
   const { widths, offsets, totalWidth } = useMemo(() => {
-    const widths2 = columns.map((c) => resolveWidth(c.width));
+    const widths2 = cols.map((c) => resolveWidth(c.width));
     const offsets2 = [];
     let acc = 0;
     for (const w of widths2) {
@@ -6491,7 +6534,7 @@ function DataGrid({
       acc += w;
     }
     return { widths: widths2, offsets: offsets2, totalWidth: acc };
-  }, [columns]);
+  }, [cols]);
   const order = useMemo(() => {
     const idx = rows.map((_, i) => i);
     if (!sort) return idx;
@@ -6520,140 +6563,213 @@ function DataGrid({
   const rowStart = virtualize ? Math.max(0, Math.floor(scroll.top / rowHeight) - overscan) : 0;
   const rowEnd = virtualize ? Math.min(displayRowCount, Math.ceil((scroll.top + bodyH) / rowHeight) + overscan) : displayRowCount;
   let colStart = 0;
-  let colEnd = columns.length;
+  let colEnd = cols.length;
   if (virtualize && viewport.w) {
     const viewLeft = scroll.left;
     const viewRight = scroll.left + (viewport.w - gutter);
     colStart = Math.max(0, offsets.findIndex((o, i) => o + widths[i] > viewLeft));
     if (colStart < 0) colStart = 0;
     colEnd = offsets.findIndex((o) => o > viewRight);
-    colEnd = colEnd === -1 ? columns.length : Math.min(columns.length, colEnd + 1);
+    colEnd = colEnd === -1 ? cols.length : Math.min(cols.length, colEnd + 1);
     colStart = Math.max(0, colStart - overscan);
-    colEnd = Math.min(columns.length, colEnd + overscan);
+    colEnd = Math.min(cols.length, colEnd + overscan);
   }
   const visibleRows = Array.from({ length: Math.max(0, rowEnd - rowStart) }, (_, i) => rowStart + i);
   const visibleCols = Array.from({ length: Math.max(0, colEnd - colStart) }, (_, i) => colStart + i);
   const commit = useCallback(() => {
     if (!editing) return;
-    const col = columns[editing.col];
+    const col = cols[editing.col];
     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, order, rows.length]);
+  }, [editing, cols, draft, onCellEdit, order, rows.length]);
   const startEdit = (disp, col) => {
-    const c = columns[col];
+    const c = cols[col];
     if (!(c.editable ?? editable)) return;
     setDraft(displayValue(rows[rowIndexForDisp(disp)]?.[c.key] ?? ""));
     setEditing({ disp, col });
   };
+  const cellText = (sel) => displayValue(rows[rowIndexForDisp(sel.disp)]?.[cols[sel.col].key] ?? "");
+  const copyCell = useCallback(async () => {
+    if (!selected) return;
+    try {
+      await navigator.clipboard?.writeText(cellText(selected));
+    } catch {
+    }
+  }, [selected, rows, cols, order]);
+  const cutCell = useCallback(async () => {
+    if (!selected) return;
+    await copyCell();
+    onCellEdit?.({ row: rowIndexForDisp(selected.disp), column: cols[selected.col].key, value: "" });
+  }, [selected, copyCell, onCellEdit, cols, order, rows.length]);
+  const pasteCell = useCallback(async () => {
+    if (!selected) return;
+    let text = "";
+    try {
+      text = await navigator.clipboard?.readText() ?? "";
+    } catch {
+      return;
+    }
+    onCellEdit?.({ row: rowIndexForDisp(selected.disp), column: cols[selected.col].key, value: text });
+  }, [selected, onCellEdit, cols, order, rows.length]);
+  const ctxItems = useMemo(() => {
+    if (ctxTarget?.kind === "header") {
+      const ci = ctxTarget.col;
+      return [
+        { key: "left", value: "Add column to the left", disabled: !onInsertColumn, onClick: () => onInsertColumn?.(ci) },
+        { key: "right", value: "Add column to the right", disabled: !onInsertColumn, onClick: () => onInsertColumn?.(ci + 1) }
+      ];
+    }
+    if (ctxTarget?.kind === "row") {
+      const ri = rowIndexForDisp(ctxTarget.disp);
+      const isData = ctxTarget.disp < rows.length;
+      return [
+        { key: "above", value: "Add row above", disabled: !onInsertRow, onClick: () => onInsertRow?.(ri) },
+        { key: "below", value: "Add row below", disabled: !onInsertRow, onClick: () => onInsertRow?.(Math.min(rows.length, ri + 1)) },
+        { key: "delete", value: "Delete row", disabled: !isData || !onDeleteRow, onClick: () => onDeleteRow?.(ri) }
+      ];
+    }
+    return [
+      { key: "copy", value: "Copy", onClick: () => void copyCell() },
+      { key: "cut", value: "Cut", disabled: !editable, onClick: () => void cutCell() },
+      { key: "paste", value: "Paste", disabled: !editable, onClick: () => void pasteCell() }
+    ];
+  }, [ctxTarget, rows.length, editable, onInsertRow, onDeleteRow, onInsertColumn, copyCell, cutCell, pasteCell, order]);
+  const rowHighlighted = (disp) => hoveredRow === disp || selected?.disp === disp;
+  const gridInner = /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: gutter + totalWidth + END_PAD, height: headerHeight + totalHeight + END_PAD }, children: [
+    rowNumbers && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "border-b border-r border-border bg-surface",
+        style: { position: "absolute", top: scroll.top, left: scroll.left, width: gutter, height: headerHeight, zIndex: 3 }
+      }
+    ),
+    visibleCols.map((ci) => {
+      const c = cols[ci];
+      const sortDir = sort?.key === c.key ? sort.dir : null;
+      const canSort = colSortable(c);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "columnheader",
+          "aria-sort": sortDir ? sortDir === "asc" ? "ascending" : "descending" : void 0,
+          onClick: canSort ? () => toggleSort(c.key) : void 0,
+          onContextMenu: contextMenu ? () => setCtxTarget({ kind: "header", col: ci }) : 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,
+            left: gutter + offsets[ci],
+            width: widths[ci],
+            height: headerHeight,
+            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 }),
+            canSort && /* @__PURE__ */ jsx(SortCaret, { dir: sortDir })
+          ]
+        },
+        `h-${c.key}`
+      );
+    }),
+    rowNumbers && visibleRows.map((disp) => {
+      const hi = rowHighlighted(disp);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          onMouseEnter: () => setHoveredRow(disp),
+          onContextMenu: contextMenu ? () => setCtxTarget({ kind: "row", disp }) : void 0,
+          className: cx(
+            "flex items-center justify-center border-b border-r border-border bg-surface text-xs tabular-nums",
+            hi ? "font-medium text-foreground" : "text-foreground-muted"
+          ),
+          style: { position: "absolute", left: scroll.left, top: headerHeight + disp * rowHeight, width: gutter, height: rowHeight, zIndex: 1, backgroundColor: hi ? HILITE : void 0 },
+          children: disp + 1
+        },
+        `g-${disp}`
+      );
+    }),
+    visibleRows.map((disp) => {
+      const ri = rowIndexForDisp(disp);
+      const hi = rowHighlighted(disp);
+      return visibleCols.map((ci) => {
+        const c = cols[ci];
+        const isEditing = editing?.disp === disp && editing?.col === ci;
+        const isSelected = selected?.disp === disp && selected?.col === ci;
+        const canEdit = c.editable ?? editable;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "gridcell",
+            "aria-selected": isSelected || void 0,
+            onClick: () => setSelected({ disp, col: ci }),
+            onDoubleClick: () => startEdit(disp, ci),
+            onMouseEnter: () => setHoveredRow(disp),
+            onContextMenu: contextMenu ? () => {
+              setSelected({ disp, col: ci });
+              setCtxTarget({ kind: "cell", disp });
+            } : void 0,
+            className: cx(
+              "flex items-center border-b border-r border-border px-3",
+              disp % 2 ? "bg-surface-raised" : "bg-surface",
+              canEdit ? "cursor-text" : "cursor-default"
+            ),
+            style: {
+              position: "absolute",
+              top: headerHeight + disp * rowHeight,
+              left: gutter + offsets[ci],
+              width: widths[ci],
+              height: rowHeight,
+              zIndex: isSelected ? 1 : void 0,
+              backgroundColor: isSelected ? SELECT_BG : hi ? HILITE : void 0,
+              boxShadow: isSelected ? SELECT_RING : void 0,
+              justifyContent: c.align === "right" ? "flex-end" : c.align === "center" ? "center" : "flex-start"
+            },
+            children: isEditing ? /* @__PURE__ */ jsx(
+              "input",
+              {
+                autoFocus: true,
+                value: draft,
+                onChange: (e) => setDraft(e.target.value),
+                onBlur: commit,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") commit();
+                  else if (e.key === "Escape") setEditing(null);
+                },
+                className: "h-full w-full bg-transparent text-foreground outline-none"
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "truncate text-foreground", children: displayValue(rows[ri]?.[c.key] ?? "") })
+          },
+          `${disp}-${c.key}`
+        );
+      });
+    })
+  ] });
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: scrollRef,
       onScroll: (e) => setScroll({ top: e.currentTarget.scrollTop, left: e.currentTarget.scrollLeft }),
+      onMouseLeave: () => setHoveredRow(null),
       className: cx("relative overflow-auto rounded-lg border border-border bg-surface-raised text-sm", className),
       style: { height, width, ...style },
       role: "grid",
       "aria-rowcount": rows.length,
       "aria-colcount": columns.length,
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: gutter + totalWidth + END_PAD, height: headerHeight + totalHeight + END_PAD }, children: [
-          rowNumbers && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "border-b border-r border-border bg-surface",
-              style: { position: "absolute", top: scroll.top, left: scroll.left, width: gutter, height: headerHeight, zIndex: 3 }
-            }
-          ),
-          visibleCols.map((ci) => {
-            const c = columns[ci];
-            const sortDir = sort?.key === c.key ? sort.dir : null;
-            const canSort = colSortable(c);
-            return /* @__PURE__ */ jsxs(
-              "div",
-              {
-                role: "columnheader",
-                "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,
-                  left: gutter + offsets[ci],
-                  width: widths[ci],
-                  height: headerHeight,
-                  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 }),
-                  canSort && /* @__PURE__ */ jsx(SortCaret, { dir: sortDir })
-                ]
-              },
-              `h-${c.key}`
-            );
-          }),
-          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 + disp * rowHeight, width: gutter, height: rowHeight, zIndex: 1 },
-              children: disp + 1
-            },
-            `g-${disp}`
-          )),
-          visibleRows.map((disp) => {
-            const ri = rowIndexForDisp(disp);
-            return visibleCols.map((ci) => {
-              const c = columns[ci];
-              const isEditing = editing?.disp === disp && editing?.col === ci;
-              const canEdit = c.editable ?? editable;
-              return /* @__PURE__ */ jsx(
-                "div",
-                {
-                  role: "gridcell",
-                  onDoubleClick: () => startEdit(disp, ci),
-                  className: cx(
-                    "flex items-center border-b border-r border-border px-3",
-                    disp % 2 ? "bg-surface-raised" : "bg-surface",
-                    canEdit && "cursor-text"
-                  ),
-                  style: {
-                    position: "absolute",
-                    top: headerHeight + disp * rowHeight,
-                    left: gutter + offsets[ci],
-                    width: widths[ci],
-                    height: rowHeight,
-                    justifyContent: c.align === "right" ? "flex-end" : c.align === "center" ? "center" : "flex-start"
-                  },
-                  children: isEditing ? /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      autoFocus: true,
-                      value: draft,
-                      onChange: (e) => setDraft(e.target.value),
-                      onBlur: commit,
-                      onKeyDown: (e) => {
-                        if (e.key === "Enter") commit();
-                        else if (e.key === "Escape") setEditing(null);
-                      },
-                      className: "h-full w-full bg-transparent text-foreground outline-none"
-                    }
-                  ) : /* @__PURE__ */ jsx("span", { className: "truncate text-foreground", children: displayValue(rows[ri]?.[c.key] ?? "") })
-                },
-                `${disp}-${c.key}`
-              );
-            });
-          })
-        ] }),
+        contextMenu ? /* @__PURE__ */ jsx(ContextMenu, { items: ctxItems, children: gridInner }) : gridInner,
         displayRowCount === 0 && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center text-foreground-muted", style: { top: headerHeight }, children: emptyState })
       ]
     }
   );
 }
+var HILITE = "color-mix(in srgb, var(--color-accent) 9%, transparent)";
+var SELECT_BG = "color-mix(in srgb, var(--color-accent) 16%, transparent)";
+var SELECT_RING = "inset 0 0 0 2px var(--color-accent)";
 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" }),
@@ -6676,8 +6792,44 @@ function columnLetter(i) {
   } while (n >= 0);
   return s;
 }
+function makeColumns(existing, count) {
+  const used = new Set(existing.map((c) => c.key));
+  const out = [];
+  let n = existing.length;
+  for (let k = 0; k < count; k++) {
+    let key = columnLetter(n);
+    while (used.has(key)) {
+      n++;
+      key = columnLetter(n);
+    }
+    used.add(key);
+    out.push({ key, label: key });
+    n++;
+  }
+  return out;
+}
 function blankSheet(name, cols = 8) {
-  return { name, columns: Array.from({ length: cols }, (_, i) => ({ key: columnLetter(i), label: columnLetter(i) })), rows: [] };
+  return { name, columns: makeColumns([], cols), rows: [] };
+}
+function parseWorkbook(XLSX, bytes) {
+  const wb = XLSX.read(bytes, { type: "array" });
+  return wb.SheetNames.map((name) => {
+    const ws = wb.Sheets[name];
+    const aoa = XLSX.utils.sheet_to_json(ws, { header: 1, blankrows: false, defval: null });
+    const headerRow = aoa[0] ?? [];
+    const columns = headerRow.map((h, i) => ({
+      key: h != null && String(h).length ? String(h) : `col_${i}`,
+      label: h != null && String(h).length ? String(h) : `Column ${i + 1}`
+    }));
+    const rows = aoa.slice(1).map((r) => {
+      const rec = {};
+      columns.forEach((c, i) => {
+        rec[c.key] = r[i] ?? null;
+      });
+      return rec;
+    });
+    return { name, columns, rows };
+  });
 }
 function toPlainRows(sheet, columns) {
   return sheet.rows.map((row) => {
@@ -6712,6 +6864,7 @@ function Spreadsheet({
   virtualize = true,
   sortable = true,
   emptyRows = 50,
+  emptyCols = 6,
   allowAddSheet,
   height = 480,
   width,
@@ -6737,24 +6890,7 @@ function Spreadsheet({
       try {
         const bytes = await sourceToBytes(source, remote);
         const XLSX = await loadXlsx();
-        const wb = XLSX.read(bytes, { type: "array" });
-        const parsed = wb.SheetNames.map((name) => {
-          const ws = wb.Sheets[name];
-          const aoa = XLSX.utils.sheet_to_json(ws, { header: 1, blankrows: false, defval: null });
-          const headerRow = aoa[0] ?? [];
-          const columns2 = headerRow.map((h, i) => ({
-            key: h != null && String(h).length ? String(h) : `col_${i}`,
-            label: h != null && String(h).length ? String(h) : `Column ${i + 1}`
-          }));
-          const rows = aoa.slice(1).map((r) => {
-            const rec = {};
-            columns2.forEach((c, i) => {
-              rec[c.key] = r[i] ?? null;
-            });
-            return rec;
-          });
-          return { name, columns: columns2, rows };
-        });
+        const parsed = parseWorkbook(XLSX, bytes);
         if (cancelled) return;
         setSheets(parsed);
         setActive(0);
@@ -6811,6 +6947,83 @@ function Spreadsheet({
     setActive((a) => Math.max(0, Math.min(index < a ? a - 1 : a, next.length - 1)));
     onChange?.(next);
   }, [sheets, onChange]);
+  const add100Rows = useCallback(() => {
+    setSheets((prev) => {
+      if (!prev) return prev;
+      const next = prev.map((s, i) => i === active ? { ...s, rows: [...s.rows, ...Array.from({ length: 100 }, () => ({}))] } : s);
+      onChange?.(next);
+      return next;
+    });
+  }, [active, onChange]);
+  const add10Columns = useCallback(() => {
+    setSheets((prev) => {
+      if (!prev) return prev;
+      const next = prev.map((s, i) => {
+        if (i !== active) return s;
+        const cols = toColumns(s.columns);
+        return { ...s, columns: [...cols, ...makeColumns(cols, 10)] };
+      });
+      onChange?.(next);
+      return next;
+    });
+  }, [active, onChange]);
+  const insertColumn = useCallback((index) => {
+    setSheets((prev) => {
+      if (!prev) return prev;
+      const next = prev.map((s, i) => {
+        if (i !== active) return s;
+        const cols = toColumns(s.columns);
+        const at = Math.max(0, Math.min(index, cols.length));
+        const out = [...cols];
+        out.splice(at, 0, makeColumns(cols, 1)[0]);
+        return { ...s, columns: out };
+      });
+      onChange?.(next);
+      return next;
+    });
+  }, [active, onChange]);
+  const insertRow = useCallback((index) => {
+    setSheets((prev) => {
+      if (!prev) return prev;
+      const next = prev.map((s, i) => {
+        if (i !== active) return s;
+        const rows = [...s.rows];
+        rows.splice(Math.max(0, Math.min(index, rows.length)), 0, {});
+        return { ...s, rows };
+      });
+      onChange?.(next);
+      return next;
+    });
+  }, [active, onChange]);
+  const deleteRow = useCallback((index) => {
+    setSheets((prev) => {
+      if (!prev) return prev;
+      const next = prev.map((s, i) => i === active && index < s.rows.length ? { ...s, rows: s.rows.filter((_, r) => r !== index) } : s);
+      onChange?.(next);
+      return next;
+    });
+  }, [active, onChange]);
+  const fileInputRef = useRef(null);
+  const openFile = () => fileInputRef.current?.click();
+  const onFilePicked = useCallback(async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file) return;
+    setStatus("loading");
+    setError(null);
+    try {
+      const bytes = new Uint8Array(await file.arrayBuffer());
+      const XLSX = await loadXlsx();
+      const parsed = parseWorkbook(XLSX, bytes);
+      setSheets(parsed);
+      setActive(0);
+      setStatus("ready");
+      onChange?.(parsed);
+    } catch (err) {
+      setError(err);
+      setStatus("error");
+    }
+  }, [onChange]);
   const baseName = useMemo(
     () => (fileName || (typeof source === "object" && "name" in source ? sourceName(source) : null) || "spreadsheet").replace(/\.[^.]+$/, ""),
     [fileName, source]
@@ -6897,22 +7110,38 @@ function Spreadsheet({
   }
   const formats = exportFormats || [];
   const exportLabels = {
-    xlsx: "Export to Excel (.xlsx)",
-    csv: "Export to CSV (.csv)",
-    pdf: "Export to PDF (.pdf)"
+    xlsx: "Excel (.xlsx)",
+    csv: "CSV (.csv)",
+    pdf: "PDF (.pdf)"
   };
-  const fileItems = formats.map((fmt) => ({ key: fmt, label: exportLabels[fmt], onSelect: () => runExport(fmt) }));
+  const fileItems = [
+    { key: "open", label: "Open", onSelect: openFile },
+    ...formats.length > 0 ? [{ key: "export", label: "Export", separatorBefore: true, children: formats.map((fmt) => ({ key: fmt, label: exportLabels[fmt], onSelect: () => runExport(fmt) })) }] : []
+  ];
   const sheetItems = [
-    { key: "insert", label: "Insert sheet", onSelect: addSheet },
-    { key: "delete", label: "Delete sheet", danger: true, disabled: sheets.length <= 1, separatorBefore: true, onSelect: () => deleteSheet(active) }
+    { key: "add", label: "Add Sheet", onSelect: addSheet },
+    { key: "delete", label: "Delete Sheet", danger: true, disabled: sheets.length <= 1, onSelect: () => deleteSheet(active) },
+    { key: "add100", label: "Add 100 rows", separatorBefore: true, onSelect: add100Rows },
+    { key: "add10cols", label: "Add 10 columns", onSelect: add10Columns }
   ];
-  const showMenuBar = fileItems.length > 0 || editable;
   const canDeleteSheet = editable && sheets.length > 1;
   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: [
-    showMenuBar && /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-0.5 border-b border-border bg-surface px-1.5 py-1", children: [
-      fileItems.length > 0 && /* @__PURE__ */ jsx(MenuButton, { label: "File", variant: "ghost", size: "sm", hideChevron: true, items: fileItems }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-0.5 border-b border-border bg-surface px-1.5 py-1", children: [
+      /* @__PURE__ */ jsx(MenuButton, { label: "File", variant: "ghost", size: "sm", hideChevron: true, items: fileItems }),
       editable && /* @__PURE__ */ jsx(MenuButton, { label: "Sheet", variant: "ghost", size: "sm", hideChevron: true, items: sheetItems })
     ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: ".xlsx,.xls,.csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        onChange: onFilePicked,
+        className: "hidden",
+        "aria-hidden": "true",
+        tabIndex: -1
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
       DataGrid,
       {
@@ -6922,6 +7151,11 @@ function Spreadsheet({
         sortable,
         virtualize,
         trailingRows: emptyRows,
+        trailingCols: emptyCols,
+        contextMenu: true,
+        onInsertRow: editable ? insertRow : void 0,
+        onDeleteRow: editable ? deleteRow : void 0,
+        onInsertColumn: editable ? insertColumn : void 0,
         onCellEdit: handleCellEdit,
         height: "100%",
         className: "!rounded-none !border-0"
@@ -7085,15 +7319,15 @@ function FlyoutItems({ items }) {
       child.badge !== void 0 && child.badge > 0 && /* @__PURE__ */ jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-full bg-status-error px-1 text-[9px] font-bold leading-none text-white", children: child.badge > 99 ? "99+" : child.badge })
     ] });
     if (child.items?.length) {
-      return /* @__PURE__ */ jsxs(DropdownMenu2.Sub, { children: [
-        /* @__PURE__ */ jsxs(DropdownMenu2.SubTrigger, { className: cls, children: [
+      return /* @__PURE__ */ jsxs(DropdownMenu.Sub, { children: [
+        /* @__PURE__ */ jsxs(DropdownMenu.SubTrigger, { className: cls, children: [
           label,
           /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-3.5 w-3.5 flex-shrink-0", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m9 6 6 6-6 6" }) })
         ] }),
-        /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu2.SubContent, { sideOffset: 6, collisionPadding: 8, className: FLYOUT_PANEL, children: /* @__PURE__ */ jsx(FlyoutItems, { items: child.items }) }) })
+        /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.SubContent, { sideOffset: 6, collisionPadding: 8, className: FLYOUT_PANEL, children: /* @__PURE__ */ jsx(FlyoutItems, { items: child.items }) }) })
       ] }, child.key);
     }
-    return /* @__PURE__ */ jsx(DropdownMenu2.Item, { onSelect: () => child.onClick?.(), className: cls, children: label }, child.key);
+    return /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: () => child.onClick?.(), className: cls, children: label }, child.key);
   }) });
 }
 function CollapsedFlyout({ item, trigger }) {
@@ -7108,9 +7342,9 @@ function CollapsedFlyout({ item, trigger }) {
     closeTimer.current = window.setTimeout(() => setOpen(false), 150);
   };
   React36.useEffect(() => () => window.clearTimeout(closeTimer.current), []);
-  return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { open, onOpenChange: setOpen, modal: false, children: [
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { open, onOpenChange: setOpen, modal: false, children: [
     /* @__PURE__ */ jsx(
-      DropdownMenu2.Trigger,
+      DropdownMenu.Trigger,
       {
         asChild: true,
         onPointerEnter: openNow,
@@ -7121,8 +7355,8 @@ function CollapsedFlyout({ item, trigger }) {
         children: trigger
       }
     ),
-    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs(
-      DropdownMenu2.Content,
+    /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(
+      DropdownMenu.Content,
       {
         side: "right",
         align: "start",
@@ -7132,7 +7366,7 @@ function CollapsedFlyout({ item, trigger }) {
         onPointerEnter: openNow,
         onPointerLeave: closeSoon,
         children: [
-          /* @__PURE__ */ jsx(DropdownMenu2.Label, { className: "px-2.5 pb-1 pt-1.5 text-xs font-semibold text-foreground-muted", children: item.label }),
+          /* @__PURE__ */ jsx(DropdownMenu.Label, { className: "px-2.5 pb-1 pt-1.5 text-xs font-semibold text-foreground-muted", children: item.label }),
           /* @__PURE__ */ jsx(FlyoutItems, { items: item.items })
         ]
       }
@@ -9650,7 +9884,7 @@ function DatePicker({
                     },
                     "aria-label": view === "days" ? "Next month" : view === "months" ? "Next year" : "Next decade",
                     className: "w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors",
-                    children: /* @__PURE__ */ jsx(ChevronRight2, {})
+                    children: /* @__PURE__ */ jsx(ChevronRight3, {})
                   }
                 )
               ] }),
@@ -9768,7 +10002,7 @@ function CalendarIcon() {
 function ChevronLeft() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) });
 }
-function ChevronRight2() {
+function ChevronRight3() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
 }
 var LINE_HEIGHT_PX = 21;