@geomak/ui 7.11.0 → 7.12.0

package/dist/index.js

@@ -6804,6 +6804,13 @@ function Spreadsheet({
       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]
@@ -6890,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,
@@ -6939,41 +6928,76 @@ function Spreadsheet({
       },
       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(
+    /* @__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",
           {
-            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" }) })
-        }
-      )
+            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(