@geomak/ui 7.10.0 → 7.12.0

package/dist/index.d.cts

@@ -2745,7 +2745,13 @@ interface DataGridProps {
     overscan?: number;
     /** Show the left row-number gutter. Default true. */
     rowNumbers?: boolean;
-    /** `row` is the index into `rows` (stable across sorting). */
+    /**
+     * Blank rows rendered below the data, like a real spreadsheet's empty grid.
+     * Default 0. When `editable`, typing into one emits `onCellEdit` with a
+     * `row` index at/after `rows.length` so the consumer can append the row.
+     */
+    trailingRows?: number;
+    /** `row` is the index into `rows` (stable across sorting; may equal `rows.length`+ for a blank trailing row). */
     onCellEdit?: (e: {
         row: number;
         column: string;
@@ -2767,7 +2773,7 @@ interface DataGridProps {
  * `onCellEdit` on commit. Wrap it with {@link Spreadsheet} for multi-sheet
  * switching, file parsing and export.
  */
-declare function DataGrid({ columns, rows, rowHeight, headerHeight, height, width, editable, sortable, sort: sortProp, onSortChange, virtualize, overscan, rowNumbers, onCellEdit, className, style, emptyState, }: DataGridProps): react_jsx_runtime.JSX.Element;
+declare function DataGrid({ columns, rows, rowHeight, headerHeight, height, width, editable, sortable, sort: sortProp, onSortChange, virtualize, overscan, rowNumbers, trailingRows, onCellEdit, className, style, emptyState, }: DataGridProps): react_jsx_runtime.JSX.Element;
 
 interface Cell {
     value: CellValue;
@@ -2799,6 +2805,10 @@ interface SpreadsheetProps {
     virtualize?: boolean;
     /** Click column headers to sort. Default true. */
     sortable?: boolean;
+    /** Blank rows kept below the data (the spreadsheet "slack"). Default 50. */
+    emptyRows?: number;
+    /** Show a “+” to add a blank sheet. Defaults to `editable`. */
+    allowAddSheet?: boolean;
     /** Overall height. Default 480. */
     height?: number | string;
     /** Overall width. Defaults to filling the container. */
@@ -2815,7 +2825,7 @@ interface SpreadsheetProps {
  * Exports to multi-sheet `.xlsx`, `.csv` (active sheet, BOM-prefixed) or a
  * paginated table `.pdf` (jsPDF, lazy).
  */
-declare function Spreadsheet({ source, remote, editable, onCellEdit, onChange, export: exportFormats, fileName, virtualize, sortable, height, width, className, style, }: SpreadsheetProps): react_jsx_runtime.JSX.Element;
+declare function Spreadsheet({ source, remote, editable, onCellEdit, onChange, export: exportFormats, fileName, virtualize, sortable, emptyRows, allowAddSheet, height, width, className, style, }: SpreadsheetProps): react_jsx_runtime.JSX.Element;
 
 interface ThemeSwitchProps {
     checked: boolean;

package/dist/index.d.ts

@@ -2745,7 +2745,13 @@ interface DataGridProps {
     overscan?: number;
     /** Show the left row-number gutter. Default true. */
     rowNumbers?: boolean;
-    /** `row` is the index into `rows` (stable across sorting). */
+    /**
+     * Blank rows rendered below the data, like a real spreadsheet's empty grid.
+     * Default 0. When `editable`, typing into one emits `onCellEdit` with a
+     * `row` index at/after `rows.length` so the consumer can append the row.
+     */
+    trailingRows?: number;
+    /** `row` is the index into `rows` (stable across sorting; may equal `rows.length`+ for a blank trailing row). */
     onCellEdit?: (e: {
         row: number;
         column: string;
@@ -2767,7 +2773,7 @@ interface DataGridProps {
  * `onCellEdit` on commit. Wrap it with {@link Spreadsheet} for multi-sheet
  * switching, file parsing and export.
  */
-declare function DataGrid({ columns, rows, rowHeight, headerHeight, height, width, editable, sortable, sort: sortProp, onSortChange, virtualize, overscan, rowNumbers, onCellEdit, className, style, emptyState, }: DataGridProps): react_jsx_runtime.JSX.Element;
+declare function DataGrid({ columns, rows, rowHeight, headerHeight, height, width, editable, sortable, sort: sortProp, onSortChange, virtualize, overscan, rowNumbers, trailingRows, onCellEdit, className, style, emptyState, }: DataGridProps): react_jsx_runtime.JSX.Element;
 
 interface Cell {
     value: CellValue;
@@ -2799,6 +2805,10 @@ interface SpreadsheetProps {
     virtualize?: boolean;
     /** Click column headers to sort. Default true. */
     sortable?: boolean;
+    /** Blank rows kept below the data (the spreadsheet "slack"). Default 50. */
+    emptyRows?: number;
+    /** Show a “+” to add a blank sheet. Defaults to `editable`. */
+    allowAddSheet?: boolean;
     /** Overall height. Default 480. */
     height?: number | string;
     /** Overall width. Defaults to filling the container. */
@@ -2815,7 +2825,7 @@ interface SpreadsheetProps {
  * Exports to multi-sheet `.xlsx`, `.csv` (active sheet, BOM-prefixed) or a
  * paginated table `.pdf` (jsPDF, lazy).
  */
-declare function Spreadsheet({ source, remote, editable, onCellEdit, onChange, export: exportFormats, fileName, virtualize, sortable, height, width, className, style, }: SpreadsheetProps): react_jsx_runtime.JSX.Element;
+declare function Spreadsheet({ source, remote, editable, onCellEdit, onChange, export: exportFormats, fileName, virtualize, sortable, emptyRows, allowAddSheet, height, width, className, style, }: SpreadsheetProps): react_jsx_runtime.JSX.Element;
 
 interface ThemeSwitchProps {
     checked: boolean;

package/dist/index.js

@@ -6467,6 +6467,7 @@ function DataGrid({
   virtualize = true,
   overscan = 4,
   rowNumbers = true,
+  trailingRows = 0,
   onCellEdit,
   className = "",
   style,
@@ -6503,7 +6504,9 @@ function DataGrid({
     if (sortProp === void 0) setInternalSort(next);
     onSortChange?.(next);
   };
-  const totalHeight = rows.length * rowHeight;
+  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;
@@ -6515,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) {
@@ -6533,13 +6536,14 @@ function DataGrid({
   const commit = useCallback(() => {
     if (!editing) return;
     const col = columns[editing.col];
-    onCellEdit?.({ row: order[editing.disp], 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, order]);
+  }, [editing, columns, draft, onCellEdit, order, rows.length]);
   const startEdit = (disp, col) => {
     const c = columns[col];
     if (!(c.editable ?? editable)) return;
-    setDraft(displayValue(rows[order[disp]]?.[c.key] ?? ""));
+    setDraft(displayValue(rows[rowIndexForDisp(disp)]?.[c.key] ?? ""));
     setEditing({ disp, col });
   };
   return /* @__PURE__ */ jsxs(
@@ -6602,7 +6606,7 @@ function DataGrid({
             `g-${disp}`
           )),
           visibleRows.map((disp) => {
-            const ri = order[disp];
+            const ri = rowIndexForDisp(disp);
             return visibleCols.map((ci) => {
               const c = columns[ci];
               const isEditing = editing?.disp === disp && editing?.col === ci;
@@ -6645,7 +6649,7 @@ function DataGrid({
             });
           })
         ] }),
-        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 })
       ]
     }
   );
@@ -6663,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 = {};
@@ -6695,11 +6711,14 @@ function Spreadsheet({
   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");
@@ -6759,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);
@@ -6772,6 +6792,25 @@ 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 deleteSheet = useCallback((index) => {
+    if (!sheets || sheets.length <= 1) return;
+    const next = sheets.filter((_, i) => i !== index);
+    setSheets(next);
+    setActive((a) => Math.max(0, Math.min(index < a ? a - 1 : a, next.length - 1)));
+    onChange?.(next);
+  }, [sheets, onChange]);
   const baseName = useMemo(
     () => (fileName || (typeof source === "object" && "name" in source ? sourceName(source) : null) || "spreadsheet").replace(/\.[^.]+$/, ""),
     [fileName, source]
@@ -6858,39 +6897,21 @@ function Spreadsheet({
   }
   const formats = exportFormats || [];
   const exportLabels = {
-    xlsx: "Excel workbook (.xlsx)",
-    csv: "CSV \u2014 this sheet (.csv)",
-    pdf: "PDF table (.pdf)"
+    xlsx: "Export to Excel (.xlsx)",
+    csv: "Export to CSV (.csv)",
+    pdf: "Export to PDF (.pdf)"
   };
+  const fileItems = 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) }
+  ];
+  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: [
-    /* @__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)
-            }))
-          }
-        )
-      ] })
+    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 }),
+      editable && /* @__PURE__ */ jsx(MenuButton, { label: "Sheet", variant: "ghost", size: "sm", hideChevron: true, items: sheetItems })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
       DataGrid,
@@ -6900,31 +6921,83 @@ function Spreadsheet({
         editable,
         sortable,
         virtualize,
+        trailingRows: emptyRows,
         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}`
-    )) })
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-2 border-t border-border bg-surface px-2 py-1", children: [
+      /* @__PURE__ */ jsxs("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;
+          const name = s.name || `Sheet ${i + 1}`;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "tab",
+              tabIndex: 0,
+              "aria-selected": activeTab,
+              onClick: () => setActive(i),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setActive(i);
+                }
+              },
+              className: cx(
+                "group flex flex-shrink-0 cursor-pointer items-center gap-1 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: [
+                /* @__PURE__ */ jsx("span", { className: "max-w-[160px] truncate", children: name }),
+                canDeleteSheet && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    title: "Delete sheet",
+                    "aria-label": `Delete ${name}`,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      deleteSheet(i);
+                    },
+                    className: cx(
+                      "flex h-4 w-4 items-center justify-center rounded text-foreground-muted transition-opacity hover:text-status-error",
+                      activeTab ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                    ),
+                    children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, className: "h-3 w-3", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M6 6l12 12M18 6 6 18" }) })
+                  }
+                )
+              ]
+            },
+            `${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" }) })
+          }
+        )
+      ] }),
+      /* @__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"
+      ] })
+    ] })
   ] });
 }
-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(