@geomak/ui 7.13.0 → 7.15.0

package/dist/index.cjs

@@ -6507,6 +6507,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,
@@ -6522,10 +6531,13 @@ function DataGrid({
   overscan = 4,
   rowNumbers = true,
   trailingRows = 0,
+  trailingCols = 0,
   onCellEdit,
   contextMenu = false,
   onInsertRow,
   onDeleteRow,
+  onInsertColumn,
+  onHeaderEdit,
   className = "",
   style,
   emptyState = "No data"
@@ -6538,12 +6550,22 @@ function DataGrid({
   const [ctxTarget, setCtxTarget] = React36.useState(null);
   const [editing, setEditing] = React36.useState(null);
   const [draft, setDraft] = React36.useState("");
+  const [editingHeader, setEditingHeader] = React36.useState(null);
+  const [headerDraft, setHeaderDraft] = React36.useState("");
   const [internalSort, setInternalSort] = React36.useState(null);
   const sort = sortProp !== void 0 ? sortProp : internalSort;
   const gutter = rowNumbers ? GUTTER : 0;
   const colSortable = (c) => c.sortable ?? sortable;
+  const cols = React36.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 } = React36.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) {
@@ -6551,7 +6573,7 @@ function DataGrid({
       acc += w;
     }
     return { widths: widths2, offsets: offsets2, totalWidth: acc };
-  }, [columns]);
+  }, [cols]);
   const order = React36.useMemo(() => {
     const idx = rows.map((_, i) => i);
     if (!sort) return idx;
@@ -6580,45 +6602,56 @@ 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 = React36.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)]?.[columns[sel.col].key] ?? "");
+  const startHeaderEdit = (col) => {
+    if (!onHeaderEdit) return;
+    const c = cols[col];
+    setHeaderDraft(typeof c.label === "string" ? c.label : String(c.key));
+    setEditingHeader(col);
+  };
+  const commitHeader = () => {
+    if (editingHeader == null) return;
+    onHeaderEdit?.(editingHeader, headerDraft);
+    setEditingHeader(null);
+  };
+  const cellText = (sel) => displayValue(rows[rowIndexForDisp(sel.disp)]?.[cols[sel.col].key] ?? "");
   const copyCell = React36.useCallback(async () => {
     if (!selected) return;
     try {
       await navigator.clipboard?.writeText(cellText(selected));
     } catch {
     }
-  }, [selected, rows, columns, order]);
+  }, [selected, rows, cols, order]);
   const cutCell = React36.useCallback(async () => {
     if (!selected) return;
     await copyCell();
-    onCellEdit?.({ row: rowIndexForDisp(selected.disp), column: columns[selected.col].key, value: "" });
-  }, [selected, copyCell, onCellEdit, columns, order, rows.length]);
+    onCellEdit?.({ row: rowIndexForDisp(selected.disp), column: cols[selected.col].key, value: "" });
+  }, [selected, copyCell, onCellEdit, cols, order, rows.length]);
   const pasteCell = React36.useCallback(async () => {
     if (!selected) return;
     let text = "";
@@ -6627,9 +6660,17 @@ function DataGrid({
     } catch {
       return;
     }
-    onCellEdit?.({ row: rowIndexForDisp(selected.disp), column: columns[selected.col].key, value: text });
-  }, [selected, onCellEdit, columns, order, rows.length]);
+    onCellEdit?.({ row: rowIndexForDisp(selected.disp), column: cols[selected.col].key, value: text });
+  }, [selected, onCellEdit, cols, order, rows.length]);
   const ctxItems = React36.useMemo(() => {
+    if (ctxTarget?.kind === "header") {
+      const ci = ctxTarget.col;
+      return [
+        { key: "rename", value: "Rename column", disabled: !onHeaderEdit, onClick: () => startHeaderEdit(ci) },
+        { key: "left", value: "Add column to the left", disabled: !onInsertColumn, separatorBefore: true, 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;
@@ -6644,7 +6685,7 @@ function DataGrid({
       { key: "cut", value: "Cut", disabled: !editable, onClick: () => void cutCell() },
       { key: "paste", value: "Paste", disabled: !editable, onClick: () => void pasteCell() }
     ];
-  }, [ctxTarget, rows.length, editable, onInsertRow, onDeleteRow, copyCell, cutCell, pasteCell, order]);
+  }, [ctxTarget, rows.length, editable, onInsertRow, onDeleteRow, onInsertColumn, onHeaderEdit, copyCell, cutCell, pasteCell, order]);
   const rowHighlighted = (disp) => hoveredRow === disp || selected?.disp === disp;
   const gridInner = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: gutter + totalWidth + END_PAD, height: headerHeight + totalHeight + END_PAD }, children: [
     rowNumbers && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6655,18 +6696,23 @@ function DataGrid({
       }
     ),
     visibleCols.map((ci) => {
-      const c = columns[ci];
+      const c = cols[ci];
       const sortDir = sort?.key === c.key ? sort.dir : null;
       const canSort = colSortable(c);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
+      const renamable = !!onHeaderEdit;
+      const isEditingHeader = editingHeader === ci;
+      return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           role: "columnheader",
           "aria-sort": sortDir ? sortDir === "asc" ? "ascending" : "descending" : void 0,
-          onClick: canSort ? () => toggleSort(c.key) : void 0,
+          onClick: canSort && !renamable ? () => toggleSort(c.key) : void 0,
+          onDoubleClick: renamable ? () => startHeaderEdit(ci) : 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"
+            canSort && !renamable && "cursor-pointer select-none hover:text-foreground",
+            renamable && "cursor-default select-none"
           ),
           style: {
             position: "absolute",
@@ -6677,10 +6723,27 @@ function DataGrid({
             zIndex: 2,
             justifyContent: c.align === "right" ? "flex-end" : c.align === "center" ? "center" : "flex-start"
           },
-          children: [
+          children: isEditingHeader ? /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              autoFocus: true,
+              value: headerDraft,
+              onChange: (e) => setHeaderDraft(e.target.value),
+              onBlur: commitHeader,
+              onClick: (e) => e.stopPropagation(),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") commitHeader();
+                else if (e.key === "Escape") setEditingHeader(null);
+              },
+              className: "h-full w-full bg-transparent font-medium text-foreground outline-none"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: c.label ?? c.key }),
-            canSort && /* @__PURE__ */ jsxRuntime.jsx(SortCaret, { dir: sortDir })
-          ]
+            canSort && (renamable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", title: "Sort", onClick: (e) => {
+              e.stopPropagation();
+              toggleSort(c.key);
+            }, className: "flex-shrink-0 rounded hover:text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(SortCaret, { dir: sortDir }) }) : /* @__PURE__ */ jsxRuntime.jsx(SortCaret, { dir: sortDir }))
+          ] })
         },
         `h-${c.key}`
       );
@@ -6706,7 +6769,7 @@ function DataGrid({
       const ri = rowIndexForDisp(disp);
       const hi = rowHighlighted(disp);
       return visibleCols.map((ci) => {
-        const c = columns[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;
@@ -6801,8 +6864,24 @@ 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" });
@@ -6857,6 +6936,7 @@ function Spreadsheet({
   virtualize = true,
   sortable = true,
   emptyRows = 50,
+  emptyCols = 6,
   allowAddSheet,
   height = 480,
   width,
@@ -6900,12 +6980,21 @@ function Spreadsheet({
   const sheet = sheets?.[active];
   const columns = React36.useMemo(() => sheet ? toColumns(sheet.columns) : [], [sheet]);
   const plainRows = React36.useMemo(() => sheet ? toPlainRows(sheet, columns) : [], [sheet, columns]);
+  const displayColumns = React36.useMemo(
+    () => [...columns, ...makeColumns(columns, Math.max(0, emptyCols)).map((c) => ({ ...c, sortable: false }))],
+    [columns, emptyCols]
+  );
+  const isSlackKey = (key) => !columns.some((c) => c.key === key);
   const handleCellEdit = React36.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 next = prev.map((s, i) => i === active ? { ...s, columns: toColumns(s.columns), rows: s.rows.map((r) => ({ ...r })) } : s);
       const target = next[active];
+      if (isSlackKey(column)) {
+        const j = displayColumns.findIndex((c) => c.key === column);
+        if (j >= 0) target.columns = displayColumns.slice(0, j + 1).map((c) => ({ key: c.key, label: c.label }));
+      }
       while (target.rows.length <= row) target.rows.push({});
       const existing = target.rows[row]?.[column];
       const prevValue = cellValue(existing);
@@ -6919,7 +7008,22 @@ function Spreadsheet({
       return next;
     });
     onCellEdit?.({ sheet: sheets?.[active]?.name ?? "", row, column, value: coerced });
-  }, [active, onCellEdit, onChange, sheets]);
+  }, [active, onCellEdit, onChange, sheets, displayColumns, columns]);
+  const renameColumn = React36.useCallback((index, label) => {
+    setSheets((prev) => {
+      if (!prev) return prev;
+      const next = prev.map((s, i) => i === active ? { ...s, columns: toColumns(s.columns) } : s);
+      const target = next[active];
+      let tcols = target.columns;
+      if (index >= tcols.length) {
+        tcols = displayColumns.slice(0, index + 1).map((c) => ({ key: c.key, label: c.label }));
+        target.columns = tcols;
+      }
+      if (tcols[index]) tcols[index] = { ...tcols[index], label };
+      onChange?.(next);
+      return next;
+    });
+  }, [active, onChange, displayColumns]);
   const addSheet = React36.useCallback(() => {
     setSheets((prev) => {
       const list = prev ?? [];
@@ -6947,6 +7051,33 @@ function Spreadsheet({
       return next;
     });
   }, [active, onChange]);
+  const add10Columns = React36.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 = React36.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 = React36.useCallback((index) => {
     setSheets((prev) => {
       if (!prev) return prev;
@@ -7086,7 +7217,8 @@ function Spreadsheet({
   const sheetItems = [
     { 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: "add100", label: "Add 100 rows", separatorBefore: true, onSelect: add100Rows },
+    { key: "add10cols", label: "Add 10 columns", onSelect: add10Columns }
   ];
   const canDeleteSheet = editable && sheets.length > 1;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex flex-col overflow-hidden rounded-lg border border-border bg-surface-raised", className), style: { height, width, ...style }, children: [
@@ -7109,7 +7241,7 @@ function Spreadsheet({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
       DataGrid,
       {
-        columns,
+        columns: displayColumns,
         rows: plainRows,
         editable,
         sortable,
@@ -7118,6 +7250,8 @@ function Spreadsheet({
         contextMenu: true,
         onInsertRow: editable ? insertRow : void 0,
         onDeleteRow: editable ? deleteRow : void 0,
+        onInsertColumn: editable ? insertColumn : void 0,
+        onHeaderEdit: editable ? renameColumn : void 0,
         onCellEdit: handleCellEdit,
         height: "100%",
         className: "!rounded-none !border-0"