@casualoffice/sheets 0.12.0 → 0.14.0

package/dist/chrome.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/chrome/index.ts
@@ -575,7 +585,8 @@ var NO_STYLE = {
   vt: 0,
   tb: 0,
   ff: "",
-  fs: 0
+  fs: 0,
+  nf: ""
 };
 function readActiveStyle(api) {
   const sel = api.getSelection();
@@ -592,138 +603,236 @@ function readActiveStyle(api) {
     vt: typeof s?.vt === "number" ? s.vt : 0,
     tb: typeof s?.tb === "number" ? s.tb : 0,
     ff: typeof s?.ff === "string" ? s.ff : "",
-    fs: typeof s?.fs === "number" ? s.fs : 0
+    fs: typeof s?.fs === "number" ? s.fs : 0,
+    nf: typeof s?.n?.pattern === "string" ? s.n.pattern : ""
   };
 }
-var FONT_FAMILIES = ["Arial", "Calibri", "Times New Roman", "Courier New", "Georgia", "Verdana"];
-var FONT_SIZES = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 36, 48, 72];
+var FONT_FAMILIES = [
+  "Calibri",
+  "Arial",
+  "Helvetica",
+  "Inter",
+  "Times New Roman",
+  "Georgia",
+  "Verdana",
+  "Courier New",
+  "JetBrains Mono"
+];
+var FONT_SIZES = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
+var NUMBER_FORMAT_PATTERNS = {
+  general: "",
+  integer: "#,##0",
+  number: "#,##0.00",
+  currency: '"$"#,##0.00',
+  accounting: '_("$"* #,##0.00_);_("$"* (#,##0.00);_("$"* "-"??_);_(@_)',
+  percent: "0.00%",
+  date: "yyyy-mm-dd",
+  time: "hh:mm:ss",
+  scientific: "0.00E+00",
+  text: "@"
+};
+var NUMBER_FORMAT_OPTIONS = [
+  { value: "general", label: "General" },
+  { value: "integer", label: "Number (no decimals)" },
+  { value: "number", label: "Number (2 decimals)" },
+  { value: "currency", label: "Currency" },
+  { value: "accounting", label: "Accounting" },
+  { value: "percent", label: "Percent" },
+  { value: "date", label: "Date (yyyy-mm-dd)" },
+  { value: "time", label: "Time (hh:mm:ss)" },
+  { value: "scientific", label: "Scientific" },
+  { value: "text", label: "Text" }
+];
+function detectFormatKey(pattern) {
+  for (const k of Object.keys(NUMBER_FORMAT_PATTERNS)) {
+    if (NUMBER_FORMAT_PATTERNS[k] === pattern) return k;
+  }
+  return "general";
+}
 var GROUPS = [
-  [
-    { id: "undo", label: "Undo", command: "univer.command.undo", icon: "undo" },
-    { id: "redo", label: "Redo", command: "univer.command.redo", icon: "redo" }
-  ],
-  [
-    { id: "bold", label: "Bold", command: "sheet.command.set-range-bold", icon: "format_bold" },
-    {
-      id: "italic",
-      label: "Italic",
-      command: "sheet.command.set-range-italic",
-      icon: "format_italic"
-    },
-    {
-      id: "underline",
-      label: "Underline",
-      command: "sheet.command.set-range-underline",
-      icon: "format_underlined"
-    },
-    {
-      id: "strikethrough",
-      label: "Strikethrough",
-      command: "sheet.command.set-range-stroke",
-      icon: "format_strikethrough"
-    }
-  ],
-  [
-    {
-      id: "align-left",
-      label: "Align left",
-      command: "sheet.command.set-horizontal-text-align",
-      icon: "format_align_left",
-      params: { value: 1 }
-    },
-    {
-      id: "align-center",
-      label: "Align center",
-      command: "sheet.command.set-horizontal-text-align",
-      icon: "format_align_center",
-      params: { value: 2 }
-    },
-    {
-      id: "align-right",
-      label: "Align right",
-      command: "sheet.command.set-horizontal-text-align",
-      icon: "format_align_right",
-      params: { value: 3 }
-    }
-  ],
-  [
-    {
-      id: "align-top",
-      label: "Align top",
-      command: "sheet.command.set-vertical-text-align",
-      icon: "vertical_align_top",
-      params: { value: 1 }
-    },
-    {
-      id: "align-middle",
-      label: "Align middle",
-      command: "sheet.command.set-vertical-text-align",
-      icon: "vertical_align_center",
-      params: { value: 2 }
-    },
-    {
-      id: "align-bottom",
-      label: "Align bottom",
-      command: "sheet.command.set-vertical-text-align",
-      icon: "vertical_align_bottom",
-      params: { value: 3 }
-    },
-    {
-      id: "wrap-text",
-      label: "Wrap text",
-      command: "sheet.command.set-text-wrap",
-      icon: "wrap_text",
-      params: { value: 3 }
-    }
-  ],
-  [
-    {
-      id: "merge",
-      label: "Merge cells",
-      command: "sheet.command.add-worksheet-merge-all",
-      icon: "cell_merge"
-    },
-    {
-      id: "unmerge",
-      label: "Unmerge cells",
-      command: "sheet.command.remove-worksheet-merge",
-      icon: "splitscreen_vertical_add"
-    }
-  ],
-  [
-    {
-      id: "currency",
-      label: "Currency format",
-      command: "sheet.command.numfmt.set.currency",
-      icon: "attach_money"
-    },
-    {
-      id: "percent",
-      label: "Percent format",
-      command: "sheet.command.numfmt.set.percent",
-      icon: "percent"
-    },
-    {
-      id: "decimal-increase",
-      label: "Increase decimals",
-      command: "sheet.command.numfmt.add.decimal.command",
-      icon: "decimal_increase"
-    },
-    {
-      id: "decimal-decrease",
-      label: "Decrease decimals",
-      command: "sheet.command.numfmt.subtract.decimal.command",
-      icon: "decimal_decrease"
-    }
-  ],
-  [
-    {
-      id: "clear-format",
-      label: "Clear formatting",
-      command: "sheet.command.clear-selection-format",
-      icon: "format_clear"
-    }
-  ]
+  {
+    feature: "history",
+    actions: [
+      { id: "undo", label: "Undo (Ctrl+Z)", command: "univer.command.undo", icon: "undo" },
+      { id: "redo", label: "Redo (Ctrl+Y)", command: "univer.command.redo", icon: "redo" }
+    ]
+  },
+  {
+    feature: "clipboard",
+    actions: [
+      {
+        id: "paste",
+        label: "Paste (Ctrl+V)",
+        command: "univer.command.paste",
+        icon: "content_paste"
+      },
+      { id: "cut", label: "Cut (Ctrl+X)", command: "univer.command.cut", icon: "content_cut" },
+      { id: "copy", label: "Copy (Ctrl+C)", command: "univer.command.copy", icon: "content_copy" },
+      {
+        id: "paste-values",
+        label: "Paste values only",
+        command: "univer.command.paste",
+        icon: "content_paste_go",
+        params: { value: "special-paste-value" }
+      }
+    ]
+  },
+  {
+    feature: "format-painter",
+    actions: [
+      {
+        id: "format-painter",
+        label: "Format Painter",
+        command: "sheet.command.set-once-format-painter",
+        icon: "format_paint"
+      }
+    ]
+  },
+  {
+    feature: "font-style",
+    actions: [
+      {
+        id: "bold",
+        label: "Bold (Ctrl+B)",
+        command: "sheet.command.set-range-bold",
+        icon: "format_bold"
+      },
+      {
+        id: "italic",
+        label: "Italic (Ctrl+I)",
+        command: "sheet.command.set-range-italic",
+        icon: "format_italic"
+      },
+      {
+        id: "underline",
+        label: "Underline (Ctrl+U)",
+        command: "sheet.command.set-range-underline",
+        icon: "format_underlined"
+      },
+      {
+        id: "strikethrough",
+        label: "Strikethrough",
+        command: "sheet.command.set-range-stroke",
+        icon: "format_strikethrough"
+      }
+    ]
+  },
+  {
+    feature: "alignment",
+    actions: [
+      {
+        id: "align-left",
+        label: "Align left",
+        command: "sheet.command.set-horizontal-text-align",
+        icon: "format_align_left",
+        params: { value: 1 }
+      },
+      {
+        id: "align-center",
+        label: "Align center",
+        command: "sheet.command.set-horizontal-text-align",
+        icon: "format_align_center",
+        params: { value: 2 }
+      },
+      {
+        id: "align-right",
+        label: "Align right",
+        command: "sheet.command.set-horizontal-text-align",
+        icon: "format_align_right",
+        params: { value: 3 }
+      },
+      {
+        id: "wrap-text",
+        label: "Wrap text",
+        command: "sheet.command.set-text-wrap",
+        icon: "wrap_text",
+        params: { value: 3 }
+      }
+    ]
+  },
+  {
+    feature: "alignment",
+    actions: [
+      {
+        id: "align-top",
+        label: "Align top",
+        command: "sheet.command.set-vertical-text-align",
+        icon: "vertical_align_top",
+        params: { value: 1 }
+      },
+      {
+        id: "align-middle",
+        label: "Align middle",
+        command: "sheet.command.set-vertical-text-align",
+        icon: "vertical_align_center",
+        params: { value: 2 }
+      },
+      {
+        id: "align-bottom",
+        label: "Align bottom",
+        command: "sheet.command.set-vertical-text-align",
+        icon: "vertical_align_bottom",
+        params: { value: 3 }
+      }
+    ]
+  },
+  {
+    feature: "merge",
+    actions: [
+      {
+        id: "merge",
+        label: "Merge cells",
+        command: "sheet.command.add-worksheet-merge-all",
+        icon: "cell_merge"
+      },
+      {
+        id: "unmerge",
+        label: "Unmerge cells",
+        command: "sheet.command.remove-worksheet-merge",
+        icon: "splitscreen_vertical_add"
+      }
+    ]
+  },
+  {
+    feature: "number",
+    actions: [
+      {
+        id: "currency",
+        label: "Currency format",
+        command: "sheet.command.numfmt.set.currency",
+        icon: "attach_money"
+      },
+      {
+        id: "percent",
+        label: "Percent format",
+        command: "sheet.command.numfmt.set.percent",
+        icon: "percent"
+      },
+      {
+        id: "decimal-increase",
+        label: "Increase decimals",
+        command: "sheet.command.numfmt.add.decimal.command",
+        icon: "decimal_increase"
+      },
+      {
+        id: "decimal-decrease",
+        label: "Decrease decimals",
+        command: "sheet.command.numfmt.subtract.decimal.command",
+        icon: "decimal_decrease"
+      }
+    ]
+  },
+  {
+    feature: "clear-format",
+    actions: [
+      {
+        id: "clear-format",
+        label: "Clear formatting",
+        command: "sheet.command.clear-selection-format",
+        icon: "format_clear"
+      }
+    ]
+  }
 ];
 var BAR_STYLE = {
   display: "flex",
@@ -733,7 +842,8 @@ var BAR_STYLE = {
   borderBottom: "1px solid var(--cs-chrome-border, #e6e9ee)",
   background: "var(--cs-chrome-bg, #eef1f5)",
   flex: "0 0 auto",
-  userSelect: "none"
+  userSelect: "none",
+  flexWrap: "wrap"
 };
 var BTN_STYLE4 = {
   width: 30,
@@ -766,6 +876,9 @@ var SELECT_STYLE = {
   padding: "0 4px",
   cursor: "pointer"
 };
+function enabled(features, key) {
+  return features?.[key] !== false;
+}
 function isActive(id, s) {
   switch (id) {
     case "bold":
@@ -794,7 +907,7 @@ function isActive(id, s) {
       return false;
   }
 }
-function Toolbar({ api }) {
+function Toolbar({ api, features, onDialogRequest }) {
   const [active, setActive] = (0, import_react4.useState)(NO_STYLE);
   (0, import_react4.useEffect)(() => {
     ensureChromeFonts();
@@ -809,75 +922,194 @@ function Toolbar({ api }) {
     return () => sub?.dispose();
   }, [api]);
   const dispatch = (command, params) => void api?.executeCommand(command, params);
-  const familyValue = active.ff || "Arial";
+  const applyFontSize = (size) => {
+    if (!Number.isFinite(size) || size <= 0) return;
+    dispatch("sheet.command.set-range-fontsize", { value: size });
+  };
+  const adjustFontSize = (delta) => {
+    const current = active.fs && active.fs > 0 ? active.fs : 11;
+    const next = Math.max(6, Math.min(72, current + delta));
+    if (next === current) return;
+    applyFontSize(next);
+  };
+  const applyNumberFormat = (pattern) => {
+    const sheet = api?.univer.getActiveWorkbook()?.getActiveSheet();
+    const range = sheet?.getActiveRange?.();
+    range?.setNumberFormat?.(pattern);
+  };
+  const familyValue = active.ff || "Calibri";
   const familyOptions = active.ff && !FONT_FAMILIES.includes(active.ff) ? [active.ff, ...FONT_FAMILIES] : FONT_FAMILIES;
   const sizeValue = active.fs || 11;
   const sizeOptions = active.fs && !FONT_SIZES.includes(active.fs) ? [active.fs, ...FONT_SIZES] : FONT_SIZES;
+  const numberFormatValue = detectFormatKey(active.nf);
+  const renderActionButton = (a) => {
+    const on = isActive(a.id, active);
+    const baseBg = on ? "var(--cs-chrome-active, #e6f3f7)" : "transparent";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        title: a.label,
+        "aria-label": a.label,
+        "aria-pressed": on,
+        "data-action": a.id,
+        "data-testid": `cs-${a.id}`,
+        "data-active": on ? "true" : void 0,
+        disabled: !api,
+        style: {
+          ...BTN_STYLE4,
+          background: baseBg,
+          color: on ? "var(--cs-chrome-active-fg, #0e7490)" : BTN_STYLE4.color
+        },
+        onMouseDown: (e) => {
+          e.preventDefault();
+          dispatch(a.command, a.params);
+        },
+        onMouseEnter: (e) => {
+          if (!on) e.currentTarget.style.background = "var(--cs-chrome-hover, rgba(0,0,0,0.06))";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.background = baseBg;
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: a.icon, size: 20 })
+      },
+      a.id
+    );
+  };
+  const renderIconButton = (id, label, icon, onPress, testid) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
+    {
+      type: "button",
+      title: label,
+      "aria-label": label,
+      "data-action": id,
+      "data-testid": testid,
+      disabled: !api,
+      style: BTN_STYLE4,
+      onMouseDown: (e) => {
+        e.preventDefault();
+        onPress();
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = "var(--cs-chrome-hover, rgba(0,0,0,0.06))";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "transparent";
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: icon, size: 20 })
+    },
+    id
+  );
+  let firstGroupRendered = false;
+  const groupNodes = GROUPS.map((group, gi) => {
+    if (!enabled(features, group.feature)) return null;
+    const visible = group.actions.filter((a) => enabled(features, a.feature ?? group.feature));
+    if (visible.length === 0) return null;
+    const showDivider = firstGroupRendered;
+    firstGroupRendered = true;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { display: "inline-flex", alignItems: "center" }, children: [
+      showDivider && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: DIVIDER_STYLE, "aria-hidden": true }),
+      visible.map(renderActionButton)
+    ] }, gi);
+  });
+  const showFont = enabled(features, "font");
+  const showColor = enabled(features, "color");
+  const showBorders = enabled(features, "borders");
+  const showAutoSum = enabled(features, "autosum");
+  const showNumberDropdown = enabled(features, "number");
+  const showFormatCells = enabled(features, "format-cells") && !!onDialogRequest;
+  const showInsertChart = enabled(features, "insert-chart") && !!onDialogRequest;
+  const showPivotTable = enabled(features, "pivot-table") && !!onDialogRequest;
+  const showDialogGroup = showFormatCells || showInsertChart || showPivotTable;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: BAR_STYLE, "data-testid": "casual-sheets-toolbar", role: "toolbar", "aria-label": "Editor", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "select",
-      {
-        "aria-label": "Font family",
-        "data-testid": "cs-font-family",
-        style: { ...SELECT_STYLE, width: 116 },
-        value: familyValue,
-        onChange: (e) => dispatch("sheet.command.set-range-font-family", { value: e.target.value }),
-        children: familyOptions.map((f) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: f, children: f }, f))
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "select",
-      {
-        "aria-label": "Font size",
-        "data-testid": "cs-font-size",
-        style: { ...SELECT_STYLE, width: 56, marginLeft: 4 },
-        value: sizeValue,
-        onChange: (e) => dispatch("sheet.command.set-range-fontsize", { value: Number(e.target.value) }),
-        children: sizeOptions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: s, children: s }, s))
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: DIVIDER_STYLE, "aria-hidden": true }),
-    GROUPS.map((group, gi) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { display: "inline-flex", alignItems: "center" }, children: [
-      gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: DIVIDER_STYLE, "aria-hidden": true }),
-      group.map((a) => {
-        const on = isActive(a.id, active);
-        const baseBg = on ? "var(--cs-chrome-active, #e6f3f7)" : "transparent";
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "button",
-          {
-            type: "button",
-            title: a.label,
-            "aria-label": a.label,
-            "aria-pressed": on,
-            "data-action": a.id,
-            "data-active": on ? "true" : void 0,
-            style: {
-              ...BTN_STYLE4,
-              background: baseBg,
-              color: on ? "var(--cs-chrome-active-fg, #0e7490)" : BTN_STYLE4.color
-            },
-            onMouseDown: (e) => {
-              e.preventDefault();
-              dispatch(a.command, a.params);
-            },
-            onMouseEnter: (e) => {
-              if (!on)
-                e.currentTarget.style.background = "var(--cs-chrome-hover, rgba(0,0,0,0.06))";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.background = baseBg;
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: a.icon, size: 20 })
-          },
-          a.id
-        );
-      })
-    ] }, gi)),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: DIVIDER_STYLE, "aria-hidden": true }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColorPicker, { api }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BordersPicker, { api }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: DIVIDER_STYLE, "aria-hidden": true }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AutoSumPicker, { api })
+    showFont && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "select",
+        {
+          "aria-label": "Font family",
+          "data-testid": "cs-font-family",
+          style: { ...SELECT_STYLE, width: 130 },
+          value: familyValue,
+          disabled: !api,
+          onChange: (e) => dispatch("sheet.command.set-range-font-family", { value: e.target.value }),
+          children: familyOptions.map((f) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: f, children: f }, f))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "select",
+        {
+          "aria-label": "Font size",
+          "data-testid": "cs-font-size",
+          style: { ...SELECT_STYLE, width: 56, marginLeft: 4 },
+          value: sizeValue,
+          disabled: !api,
+          onChange: (e) => applyFontSize(Number(e.target.value)),
+          children: sizeOptions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: s, children: s }, s))
+        }
+      ),
+      renderIconButton(
+        "font-size-up",
+        "Increase font size",
+        "text_increase",
+        () => adjustFontSize(1),
+        "cs-font-size-up"
+      ),
+      renderIconButton(
+        "font-size-down",
+        "Decrease font size",
+        "text_decrease",
+        () => adjustFontSize(-1),
+        "cs-font-size-down"
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: DIVIDER_STYLE, "aria-hidden": true })
+    ] }),
+    groupNodes,
+    (showColor || showBorders) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: DIVIDER_STYLE, "aria-hidden": true }),
+    showColor && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColorPicker, { api }),
+    showBorders && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BordersPicker, { api }),
+    showNumberDropdown && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: DIVIDER_STYLE, "aria-hidden": true }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "select",
+        {
+          "aria-label": "Number format",
+          "data-testid": "cs-number-format",
+          style: { ...SELECT_STYLE, width: 124 },
+          value: numberFormatValue,
+          disabled: !api,
+          onChange: (e) => applyNumberFormat(NUMBER_FORMAT_PATTERNS[e.target.value]),
+          children: NUMBER_FORMAT_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: o.value, children: o.label }, o.value))
+        }
+      )
+    ] }),
+    showAutoSum && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: DIVIDER_STYLE, "aria-hidden": true }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AutoSumPicker, { api })
+    ] }),
+    showDialogGroup && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: DIVIDER_STYLE, "aria-hidden": true }),
+      showFormatCells && renderIconButton(
+        "format-cells",
+        "Format Cells\u2026",
+        "format_shapes",
+        () => onDialogRequest?.("format-cells"),
+        "cs-format-cells"
+      ),
+      showInsertChart && renderIconButton(
+        "insert-chart",
+        "Insert chart",
+        "bar_chart",
+        () => onDialogRequest?.("insert-chart"),
+        "cs-insert-chart"
+      ),
+      showPivotTable && renderIconButton(
+        "pivot-table",
+        "Insert PivotTable",
+        "pivot_table_chart",
+        () => onDialogRequest?.("pivot-table"),
+        "cs-pivot-table"
+      )
+    ] })
   ] });
 }
 
@@ -1663,17 +1895,639 @@ function StatusBar({ api }) {
 
 // src/chrome/MenuBar.tsx
 var import_react8 = require("react");
+var import_core5 = require("@univerjs/core");
+
+// src/univer/lazy-plugins.ts
+var LOADERS = {
+  cf: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-conditional-formatting"),
+      import("@univerjs/sheets-conditional-formatting-ui")
+    ]);
+    return [
+      [base.UniverSheetsConditionalFormattingPlugin],
+      [ui.UniverSheetsConditionalFormattingUIPlugin]
+    ];
+  },
+  dv: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-data-validation"),
+      import("@univerjs/sheets-data-validation-ui")
+    ]);
+    return [
+      [base.UniverSheetsDataValidationPlugin],
+      [ui.UniverSheetsDataValidationUIPlugin]
+    ];
+  },
+  hyperlink: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-hyper-link"),
+      import("@univerjs/sheets-hyper-link-ui")
+    ]);
+    return [
+      [base.UniverSheetsHyperLinkPlugin],
+      [ui.UniverSheetsHyperLinkUIPlugin]
+    ];
+  },
+  note: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-note"),
+      import("@univerjs/sheets-note-ui")
+    ]);
+    return [[base.UniverSheetsNotePlugin], [ui.UniverSheetsNoteUIPlugin]];
+  },
+  table: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-table"),
+      import("@univerjs/sheets-table-ui")
+    ]);
+    return [[base.UniverSheetsTablePlugin], [ui.UniverSheetsTableUIPlugin]];
+  },
+  threadComment: async () => {
+    const [tc, tcUi, sheetsTc, sheetsTcUi] = await Promise.all([
+      import("@univerjs/thread-comment"),
+      import("@univerjs/thread-comment-ui"),
+      import("@univerjs/sheets-thread-comment"),
+      import("@univerjs/sheets-thread-comment-ui")
+    ]);
+    return [
+      [tc.UniverThreadCommentPlugin],
+      [tcUi.UniverThreadCommentUIPlugin],
+      [sheetsTc.UniverSheetsThreadCommentPlugin],
+      [sheetsTcUi.UniverSheetsThreadCommentUIPlugin]
+    ];
+  },
+  drawing: async () => {
+    const [d, dUi, sd, sdUi] = await Promise.all([
+      import("@univerjs/drawing"),
+      import("@univerjs/drawing-ui"),
+      import("@univerjs/sheets-drawing"),
+      import("@univerjs/sheets-drawing-ui"),
+      // Side-effect imports: install FWorksheet.insertImage / getImages /
+      // updateImages on the facade prototype. Without these, code that
+      // reaches in via the FUniver facade (e2e specs, future shell glue)
+      // sees an undefined method even though the plugin is registered.
+      import("@univerjs/sheets-drawing/facade"),
+      import("@univerjs/sheets-drawing-ui/facade")
+    ]);
+    return [
+      [d.UniverDrawingPlugin],
+      [dUi.UniverDrawingUIPlugin],
+      [sd.UniverSheetsDrawingPlugin],
+      [sdUi.UniverSheetsDrawingUIPlugin]
+    ];
+  },
+  sort: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-sort"),
+      import("@univerjs/sheets-sort-ui")
+    ]);
+    return [[base.UniverSheetsSortPlugin], [ui.UniverSheetsSortUIPlugin]];
+  },
+  filter: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-filter"),
+      import("@univerjs/sheets-filter-ui")
+    ]);
+    return [[base.UniverSheetsFilterPlugin], [ui.UniverSheetsFilterUIPlugin]];
+  },
+  findReplace: async () => {
+    const [base, sheets] = await Promise.all([
+      import("@univerjs/find-replace"),
+      import("@univerjs/sheets-find-replace")
+    ]);
+    return [[base.UniverFindReplacePlugin], [sheets.UniverSheetsFindReplacePlugin]];
+  }
+};
+var loaded = /* @__PURE__ */ new Set();
+var inflight = /* @__PURE__ */ new Map();
+var currentUniver = null;
+function ensurePlugin(univer, group) {
+  if (loaded.has(group)) return Promise.resolve();
+  const existing = inflight.get(group);
+  if (existing) return existing;
+  const loader = LOADERS[group];
+  if (!loader) return Promise.resolve();
+  const p = loader().then((plugins) => {
+    for (const [PluginCtor, config] of plugins) {
+      univer.registerPlugin(PluginCtor, config);
+    }
+    loaded.add(group);
+    inflight.delete(group);
+  });
+  inflight.set(group, p);
+  return p;
+}
+function ensurePluginByName(group) {
+  if (loaded.has(group)) return Promise.resolve();
+  if (!currentUniver) return Promise.resolve();
+  return ensurePlugin(currentUniver, group);
+}
+
+// src/chrome/MenuBar.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
+function fmtShortcut(shortcut) {
+  const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/i.test(navigator.platform || "");
+  if (!isMac) return shortcut;
+  return shortcut.split("+").map((part) => {
+    switch (part) {
+      case "Ctrl":
+        return "\u2318";
+      case "Alt":
+        return "\u2325";
+      case "Shift":
+        return "\u21E7";
+      default:
+        return part;
+    }
+  }).join("");
+}
+function fu(api) {
+  return api.univer;
+}
+function activeRange(api) {
+  return fu(api).getActiveWorkbook()?.getActiveSheet()?.getActiveRange() ?? null;
+}
+function activeSheet(api) {
+  return fu(api).getActiveWorkbook()?.getActiveSheet() ?? null;
+}
+function selectionA1(api) {
+  const range = activeRange(api);
+  if (!range) return null;
+  try {
+    return range.getA1Notation();
+  } catch {
+    return null;
+  }
+}
+var undo = (api) => void api.executeCommand("univer.command.undo");
+var redo = (api) => void api.executeCommand("univer.command.redo");
+var cut = (api) => void api.executeCommand("univer.command.cut");
+var copy = (api) => void api.executeCommand("univer.command.copy");
+var paste = (api) => void api.executeCommand("univer.command.paste");
+var pasteFormattingOnly = (api) => void api.executeCommand("sheet.command.paste-format");
+var insertRowAbove = (api) => {
+  const range = activeRange(api);
+  const sheet = activeSheet(api);
+  if (!range || !sheet) return;
+  sheet.insertRowBefore(range.getRow());
+};
+var insertRowBelow = (api) => {
+  const range = activeRange(api);
+  const sheet = activeSheet(api);
+  if (!range || !sheet) return;
+  sheet.insertRowAfter(range.getRow() + range.getHeight() - 1);
+};
+var insertColumnLeft = (api) => {
+  const range = activeRange(api);
+  const sheet = activeSheet(api);
+  if (!range || !sheet) return;
+  sheet.insertColumnBefore(range.getColumn());
+};
+var insertColumnRight = (api) => {
+  const range = activeRange(api);
+  const sheet = activeSheet(api);
+  if (!range || !sheet) return;
+  sheet.insertColumnAfter(range.getColumn() + range.getWidth() - 1);
+};
+var deleteSelectedRow = (api) => {
+  const range = activeRange(api);
+  const sheet = activeSheet(api);
+  if (!range || !sheet) return;
+  sheet.deleteRows(range.getRow(), range.getHeight());
+};
+var deleteSelectedColumn = (api) => {
+  const range = activeRange(api);
+  const sheet = activeSheet(api);
+  if (!range || !sheet) return;
+  sheet.deleteColumns(range.getColumn(), range.getWidth());
+};
+var insertNewSheet = (api) => {
+  fu(api).getActiveWorkbook()?.insertSheet();
+};
+var insertImage = (api) => void api.executeCommand("sheet.command.insert-float-image");
+var insertHyperlink = (api) => void api.executeCommand("sheet.operation.insert-hyper-link");
+var insertComment = (api) => void api.executeCommand("sheet.operation.show-comment-modal");
+var insertTodayDate = (api) => {
+  const range = activeRange(api);
+  if (!range) return;
+  const today = /* @__PURE__ */ new Date();
+  const pad = (n) => n.toString().padStart(2, "0");
+  const v = `${today.getFullYear()}-${pad(today.getMonth() + 1)}-${pad(today.getDate())}`;
+  range.setValue({ v });
+};
+var insertCurrentTime = (api) => {
+  const range = activeRange(api);
+  if (!range) return;
+  const now = /* @__PURE__ */ new Date();
+  const pad = (n) => n.toString().padStart(2, "0");
+  const v = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
+  range.setValue({ v });
+};
+var insertTable = (api) => {
+  void (async () => {
+    const range = activeRange(api);
+    const sheet = activeSheet(api);
+    const wb = fu(api).getActiveWorkbook();
+    if (!range || !sheet || !wb) return;
+    await ensurePluginByName("table");
+    await api.executeCommand("sheet.command.add-table", {
+      unitId: wb.getId(),
+      subUnitId: sheet.getSheetId(),
+      range: {
+        startRow: range.getRow(),
+        startColumn: range.getColumn(),
+        endRow: range.getRow() + range.getHeight() - 1,
+        endColumn: range.getColumn() + range.getWidth() - 1
+      }
+    });
+  })();
+};
+var autoFitColumns = (api) => {
+  const range = activeRange(api);
+  const sheet = activeSheet(api);
+  if (!range || !sheet) return;
+  const withAutoWidth = sheet;
+  withAutoWidth.setColumnAutoWidth?.(range.getColumn(), range.getWidth());
+};
+var AUTO_FIT_ROW_CAP = 500;
+var autoFitRows = (api) => {
+  const range = activeRange(api);
+  const sheet = activeSheet(api);
+  if (!range || !sheet) return;
+  const start = range.getRow();
+  const count = Math.min(range.getHeight(), AUTO_FIT_ROW_CAP);
+  for (let r = 0; r < count; r++) sheet.autoFitRow(start + r);
+};
+var NUMBER_FORMAT_PATTERNS2 = {
+  general: "",
+  number: "#,##0.00",
+  integer: "#,##0",
+  currency: '"$"#,##0.00',
+  accounting: '_("$"* #,##0.00_);_("$"* (#,##0.00);_("$"* "-"??_);_(@_)',
+  percent: "0.00%",
+  date: "yyyy-mm-dd",
+  time: "hh:mm:ss",
+  scientific: "0.00E+00",
+  text: "@"
+};
+var NUM_FORMAT_ORDER = [
+  "general",
+  "number",
+  "integer",
+  "currency",
+  "accounting",
+  "percent",
+  "date",
+  "time",
+  "scientific",
+  "text"
+];
+var NUM_FORMAT_SHORTCUT = {
+  number: "Ctrl+Shift+1",
+  time: "Ctrl+Shift+2",
+  date: "Ctrl+Shift+3",
+  currency: "Ctrl+Shift+4",
+  percent: "Ctrl+Shift+5",
+  scientific: "Ctrl+Shift+6"
+};
+function setNumberFormatByKey(api, key) {
+  const range = activeRange(api);
+  range?.setNumberFormat?.(NUMBER_FORMAT_PATTERNS2[key]);
+}
+var increaseDecimal = (api) => void api.executeCommand("sheet.command.numfmt.add.decimal.command");
+var decreaseDecimal = (api) => void api.executeCommand("sheet.command.numfmt.subtract.decimal.command");
+var clearFormat = (api) => void api.executeCommand("sheet.command.clear-selection-format");
+function applyBorders(api, choice) {
+  const range = activeRange(api);
+  if (!range) return;
+  const type = choice === "all" ? import_core5.BorderType.ALL : choice === "outside" ? import_core5.BorderType.OUTSIDE : import_core5.BorderType.NONE;
+  const style = choice === "none" ? import_core5.BorderStyleTypes.NONE : import_core5.BorderStyleTypes.THIN;
+  range.setBorder(type, style, "#000000");
+}
+function rowSpan(api) {
+  const wb = fu(api).getActiveWorkbook();
+  const sheet = activeSheet(api);
+  const range = activeRange(api);
+  if (!wb || !sheet || !range) return null;
+  const startRow = range.getRow();
+  const endRow = startRow + range.getHeight() - 1;
+  const maxCol = sheet.getMaxColumns?.() ?? 1;
+  return { wb, sheet, startRow, endRow, maxCol };
+}
+function colSpan(api) {
+  const wb = fu(api).getActiveWorkbook();
+  const sheet = activeSheet(api);
+  const range = activeRange(api);
+  if (!wb || !sheet || !range) return null;
+  const startColumn = range.getColumn();
+  const endColumn = startColumn + range.getWidth() - 1;
+  const maxRow = sheet.getMaxRows?.() ?? 1;
+  return { wb, sheet, startColumn, endColumn, maxRow };
+}
+var hideSelectedRows = (api) => {
+  const s = rowSpan(api);
+  if (!s) return;
+  void api.executeCommand("sheet.command.set-rows-hidden", {
+    unitId: s.wb.getId(),
+    subUnitId: s.sheet.getSheetId(),
+    ranges: [
+      {
+        startRow: s.startRow,
+        endRow: s.endRow,
+        startColumn: 0,
+        endColumn: Math.max(0, s.maxCol - 1),
+        rangeType: 1
+      }
+    ]
+  });
+};
+var unhideSelectedRows = (api) => {
+  const s = rowSpan(api);
+  if (!s) return;
+  void api.executeCommand("sheet.command.set-specific-rows-visible", {
+    unitId: s.wb.getId(),
+    subUnitId: s.sheet.getSheetId(),
+    ranges: [
+      {
+        startRow: s.startRow,
+        endRow: s.endRow,
+        startColumn: 0,
+        endColumn: Math.max(0, s.maxCol - 1),
+        rangeType: 1
+      }
+    ]
+  });
+};
+var hideSelectedColumns = (api) => {
+  const s = colSpan(api);
+  if (!s) return;
+  void api.executeCommand("sheet.command.set-col-hidden", {
+    unitId: s.wb.getId(),
+    subUnitId: s.sheet.getSheetId(),
+    ranges: [
+      {
+        startRow: 0,
+        endRow: Math.max(0, s.maxRow - 1),
+        startColumn: s.startColumn,
+        endColumn: s.endColumn,
+        rangeType: 2
+      }
+    ]
+  });
+};
+var unhideSelectedColumns = (api) => {
+  const s = colSpan(api);
+  if (!s) return;
+  void api.executeCommand("sheet.command.set-col-visible-on-cols", {
+    unitId: s.wb.getId(),
+    subUnitId: s.sheet.getSheetId(),
+    ranges: [
+      {
+        startRow: 0,
+        endRow: Math.max(0, s.maxRow - 1),
+        startColumn: s.startColumn,
+        endColumn: s.endColumn,
+        rangeType: 2
+      }
+    ]
+  });
+};
+var freezeFirstRow = (api) => {
+  activeSheet(api)?.setFrozenRows(1);
+};
+var freezeFirstColumn = (api) => {
+  activeSheet(api)?.setFrozenColumns(1);
+};
+var freezeAtSelection = (api) => void api.executeCommand("sheet.command.set-selection-frozen");
+var unfreezePanes = (api) => void api.executeCommand("sheet.command.cancel-frozen");
+var toggleGridlines = (api) => {
+  const wb = fu(api).getActiveWorkbook();
+  const sheet = activeSheet(api);
+  if (!wb || !sheet) return;
+  void api.executeCommand("sheet.command.toggle-gridlines", {
+    unitId: wb.getId(),
+    subUnitId: sheet.getSheetId(),
+    showGridlines: 0
+  });
+};
+var toggleCommentPanel = (api) => void api.executeCommand("sheet.operation.toggle-comment-panel");
+var jumpToFirstCell = (api) => {
+  activeSheet(api)?.getRange(0, 0).activate();
+};
+var switchToPreviousSheet = (api) => switchSheetByDelta(api, -1);
+var switchToNextSheet = (api) => switchSheetByDelta(api, 1);
+function switchSheetByDelta(api, delta) {
+  const wb = fu(api).getActiveWorkbook();
+  const active = wb?.getActiveSheet();
+  if (!wb || !active) return;
+  const sheets = wb.getSheets();
+  const activeId = active.getSheetId();
+  const idx = sheets.findIndex((s) => s.getSheetId() === activeId);
+  if (idx < 0) return;
+  const nextIdx = idx + delta;
+  if (nextIdx < 0 || nextIdx >= sheets.length) return;
+  wb.setActiveSheet(sheets[nextIdx]);
+}
+var showFormulas = (api) => void api.executeCommand("sheet.command.set-show-formula", {});
+var sortAsc = (api) => sortRange(api, true);
+var sortDesc = (api) => sortRange(api, false);
+function sortRange(api, ascending) {
+  const range = activeRange(api);
+  if (!range) return;
+  const withSort = range;
+  withSort.sort?.({ column: range.getColumn(), ascending });
+}
+var toggleFilter = (api) => {
+  void (async () => {
+    await ensurePluginByName("filter");
+    const wb = fu(api).getActiveWorkbook();
+    const sheet = activeSheet(api);
+    const range = activeRange(api);
+    if (!wb || !sheet || !range) return;
+    const sheetWithFilter = sheet;
+    if (sheetWithFilter.getFilter?.()) {
+      await api.executeCommand("sheet.command.remove-sheet-filter", {
+        unitId: wb.getId(),
+        subUnitId: sheet.getSheetId()
+      });
+      return;
+    }
+    await api.executeCommand("sheet.command.set-filter-range", {
+      unitId: wb.getId(),
+      subUnitId: sheet.getSheetId(),
+      range: {
+        startRow: range.getRow(),
+        startColumn: range.getColumn(),
+        endRow: range.getRow() + range.getHeight() - 1,
+        endColumn: range.getColumn() + range.getWidth() - 1
+      }
+    });
+  })();
+};
+var splitTextToColumns = (api) => void api.executeCommand("sheet.command.split-text-to-columns");
+var forceRecalculate = (api) => void api.executeCommand("formula.mutation.set-formula-calculation-start", {
+  forceCalculation: true
+});
 var MENUS = [
+  {
+    id: "file",
+    label: "File",
+    feature: "file",
+    items: [
+      { kind: "item", id: "properties", label: "Properties\u2026", icon: "info", dialog: "properties" },
+      {
+        kind: "item",
+        id: "about",
+        label: "About casual sheets",
+        icon: "help_outline",
+        dialog: "about"
+      }
+    ]
+  },
   {
     id: "edit",
     label: "Edit",
     items: [
-      { id: "undo", label: "Undo", command: "univer.command.undo", icon: "undo" },
-      { id: "redo", label: "Redo", command: "univer.command.redo", icon: "redo" },
-      { id: "cut", label: "Cut", command: "univer.command.cut", icon: "content_cut" },
-      { id: "copy", label: "Copy", command: "univer.command.copy", icon: "content_copy" },
-      { id: "paste", label: "Paste", command: "univer.command.paste", icon: "content_paste" }
+      { kind: "item", id: "undo", label: "Undo", icon: "undo", shortcut: "Ctrl+Z", run: undo },
+      { kind: "item", id: "redo", label: "Redo", icon: "redo", shortcut: "Ctrl+Y", run: redo },
+      { kind: "separator", id: "sep-clip" },
+      { kind: "item", id: "cut", label: "Cut", icon: "content_cut", shortcut: "Ctrl+X", run: cut },
+      {
+        kind: "item",
+        id: "copy",
+        label: "Copy",
+        icon: "content_copy",
+        shortcut: "Ctrl+C",
+        run: copy
+      },
+      {
+        kind: "item",
+        id: "paste",
+        label: "Paste",
+        icon: "content_paste",
+        shortcut: "Ctrl+V",
+        run: paste
+      },
+      {
+        kind: "item",
+        id: "paste-format",
+        label: "Paste formatting only",
+        icon: "content_paste",
+        shortcut: "Ctrl+Shift+V",
+        run: pasteFormattingOnly
+      },
+      {
+        kind: "item",
+        id: "paste-special",
+        label: "Paste Special\u2026",
+        icon: "content_paste_go",
+        shortcut: "Ctrl+Alt+V",
+        dialog: "paste-special"
+      },
+      { kind: "separator", id: "sep-find" },
+      {
+        kind: "item",
+        id: "find-replace",
+        label: "Find & Replace\u2026",
+        icon: "search",
+        shortcut: "Ctrl+F",
+        dialog: "find-replace"
+      },
+      { kind: "separator", id: "sep-cells" },
+      {
+        kind: "item",
+        id: "edit-insert-cells",
+        label: "Insert cells\u2026",
+        icon: "add_box",
+        shortcut: "Ctrl++",
+        dialog: "insert-cells"
+      },
+      {
+        kind: "item",
+        id: "edit-delete-cells",
+        label: "Delete cells\u2026",
+        icon: "indeterminate_check_box",
+        shortcut: "Ctrl+-",
+        dialog: "delete-cells"
+      }
+    ]
+  },
+  {
+    id: "view",
+    label: "View",
+    items: [
+      {
+        kind: "item",
+        id: "show-formulas",
+        label: "Show formulas",
+        icon: "description",
+        shortcut: "Ctrl+`",
+        run: showFormulas
+      },
+      {
+        kind: "item",
+        id: "toggle-gridlines",
+        label: "Toggle gridlines",
+        icon: "grid_on",
+        run: toggleGridlines
+      },
+      { kind: "separator", id: "sep-freeze" },
+      {
+        kind: "item",
+        id: "freeze-row",
+        label: "Freeze top row",
+        icon: "border_horizontal",
+        run: freezeFirstRow
+      },
+      {
+        kind: "item",
+        id: "freeze-col",
+        label: "Freeze first column",
+        icon: "border_vertical",
+        run: freezeFirstColumn
+      },
+      {
+        kind: "item",
+        id: "freeze-selection",
+        label: "Freeze panes (at selection)",
+        icon: "grid_4x4",
+        run: freezeAtSelection
+      },
+      { kind: "item", id: "unfreeze", label: "Unfreeze", icon: "grid_off", run: unfreezePanes },
+      { kind: "separator", id: "sep-nav" },
+      {
+        kind: "item",
+        id: "jump-home",
+        label: "Jump to A1",
+        icon: "home",
+        shortcut: "Ctrl+Home",
+        run: jumpToFirstCell
+      },
+      {
+        kind: "item",
+        id: "prev-sheet",
+        label: "Previous sheet",
+        icon: "navigate_before",
+        shortcut: "Ctrl+PageUp",
+        run: switchToPreviousSheet
+      },
+      {
+        kind: "item",
+        id: "next-sheet",
+        label: "Next sheet",
+        icon: "navigate_next",
+        shortcut: "Ctrl+PageDown",
+        run: switchToNextSheet
+      },
+      { kind: "separator", id: "sep-panels" },
+      {
+        kind: "item",
+        id: "comments-panel",
+        label: "Comments panel",
+        icon: "forum",
+        run: toggleCommentPanel
+      }
     ]
   },
   {
@@ -1681,28 +2535,140 @@ var MENUS = [
     label: "Insert",
     items: [
       {
-        id: "insert-row",
-        label: "Insert row above",
-        command: "sheet.command.insert-row-before",
-        icon: "add_row_above"
+        kind: "item",
+        id: "new-sheet",
+        label: "New sheet",
+        icon: "add_box",
+        shortcut: "Shift+F11",
+        run: insertNewSheet
       },
       {
-        id: "insert-col",
-        label: "Insert column left",
-        command: "sheet.command.insert-col-before",
-        icon: "add_column_left"
+        kind: "item",
+        id: "insert-table",
+        label: "Table",
+        icon: "table_rows",
+        shortcut: "Ctrl+L",
+        run: insertTable,
+        feature: "tables"
       },
       {
-        id: "delete-row",
-        label: "Delete row",
-        command: "sheet.command.remove-row",
-        icon: "delete"
+        kind: "item",
+        id: "insert-chart",
+        label: "Chart\u2026",
+        icon: "bar_chart",
+        dialog: "insert-chart",
+        feature: "charts"
       },
       {
-        id: "delete-col",
-        label: "Delete column",
-        command: "sheet.command.remove-col",
-        icon: "delete"
+        kind: "item",
+        id: "insert-sparkline",
+        label: "Sparkline\u2026",
+        icon: "show_chart",
+        dialog: "insert-sparkline",
+        feature: "sparklines"
+      },
+      {
+        kind: "item",
+        id: "insert-pivot",
+        label: "PivotTable\u2026",
+        icon: "pivot_table_chart",
+        dialog: "insert-pivot",
+        feature: "pivots"
+      },
+      { kind: "separator", id: "sep-objects" },
+      { kind: "item", id: "insert-image", label: "Image\u2026", icon: "image", run: insertImage },
+      {
+        kind: "item",
+        id: "insert-function",
+        label: "Function\u2026",
+        icon: "functions",
+        shortcut: "Shift+F3",
+        dialog: "insert-function"
+      },
+      {
+        kind: "item",
+        id: "insert-link",
+        label: "Hyperlink\u2026",
+        icon: "link",
+        shortcut: "Ctrl+K",
+        run: insertHyperlink
+      },
+      {
+        kind: "item",
+        id: "insert-comment",
+        label: "Comment",
+        icon: "comment",
+        shortcut: "Shift+F2",
+        run: insertComment
+      },
+      { kind: "separator", id: "sep-rowcol" },
+      {
+        kind: "submenu",
+        id: "insert-rowcol",
+        label: "Rows & columns",
+        icon: "grid_on",
+        items: [
+          {
+            kind: "item",
+            id: "insert-row-above",
+            label: "Row above",
+            icon: "vertical_align_top",
+            run: insertRowAbove
+          },
+          {
+            kind: "item",
+            id: "insert-row-below",
+            label: "Row below",
+            icon: "vertical_align_bottom",
+            run: insertRowBelow
+          },
+          {
+            kind: "item",
+            id: "insert-col-left",
+            label: "Column left",
+            icon: "keyboard_tab_rtl",
+            run: insertColumnLeft
+          },
+          {
+            kind: "item",
+            id: "insert-col-right",
+            label: "Column right",
+            icon: "keyboard_tab",
+            run: insertColumnRight
+          }
+        ]
+      },
+      { kind: "separator", id: "sep-autofit" },
+      {
+        kind: "item",
+        id: "autofit-col",
+        label: "Auto-fit column width",
+        icon: "settings_ethernet",
+        run: autoFitColumns
+      },
+      {
+        kind: "item",
+        id: "autofit-row",
+        label: "Auto-fit row height",
+        icon: "height",
+        run: autoFitRows
+      },
+      { kind: "separator", id: "sep-date" },
+      {
+        kind: "item",
+        id: "insert-today",
+        label: "Today's date",
+        icon: "today",
+        shortcut: "Ctrl+;",
+        run: insertTodayDate
+      },
+      {
+        kind: "item",
+        id: "insert-time",
+        label: "Current time",
+        icon: "schedule",
+        shortcut: "Ctrl+Shift+:",
+        run: insertCurrentTime
       }
     ]
   },
@@ -1710,30 +2676,177 @@ var MENUS = [
     id: "format",
     label: "Format",
     items: [
-      { id: "bold", label: "Bold", command: "sheet.command.set-range-bold", icon: "format_bold" },
       {
+        kind: "item",
+        id: "format-cells",
+        label: "Format cells\u2026",
+        icon: "format_shapes",
+        shortcut: "Ctrl+1",
+        dialog: "format-cells"
+      },
+      { kind: "separator", id: "sep-format-cells" },
+      {
+        kind: "item",
+        id: "bold",
+        label: "Bold",
+        icon: "format_bold",
+        shortcut: "Ctrl+B",
+        run: (api) => void api.executeCommand("sheet.command.set-range-bold")
+      },
+      {
+        kind: "item",
         id: "italic",
         label: "Italic",
-        command: "sheet.command.set-range-italic",
-        icon: "format_italic"
+        icon: "format_italic",
+        shortcut: "Ctrl+I",
+        run: (api) => void api.executeCommand("sheet.command.set-range-italic")
       },
       {
+        kind: "item",
         id: "underline",
         label: "Underline",
-        command: "sheet.command.set-range-underline",
-        icon: "format_underlined"
+        icon: "format_underlined",
+        shortcut: "Ctrl+U",
+        run: (api) => void api.executeCommand("sheet.command.set-range-underline")
       },
       {
+        kind: "item",
         id: "wrap-text",
         label: "Wrap text",
-        command: "sheet.command.set-text-wrap",
-        icon: "wrap_text"
+        icon: "wrap_text",
+        run: (api) => void api.executeCommand("sheet.command.set-text-wrap", { value: 3 })
+      },
+      { kind: "separator", id: "sep-numfmt" },
+      {
+        kind: "submenu",
+        id: "num-format",
+        label: "Number format",
+        icon: "looks_one",
+        items: NUM_FORMAT_ORDER.map((k) => ({
+          kind: "item",
+          id: `num-${k}`,
+          label: k[0].toUpperCase() + k.slice(1),
+          icon: "looks_one",
+          shortcut: NUM_FORMAT_SHORTCUT[k],
+          run: (api) => setNumberFormatByKey(api, k)
+        }))
       },
       {
+        kind: "item",
+        id: "decimal-up",
+        label: "Increase decimals",
+        icon: "decimal_increase",
+        run: increaseDecimal
+      },
+      {
+        kind: "item",
+        id: "decimal-down",
+        label: "Decrease decimals",
+        icon: "decimal_decrease",
+        run: decreaseDecimal
+      },
+      { kind: "separator", id: "sep-borders" },
+      {
+        kind: "submenu",
+        id: "borders",
+        label: "Borders",
+        icon: "border_all",
+        items: [
+          {
+            kind: "item",
+            id: "border-all",
+            label: "All borders",
+            icon: "border_all",
+            run: (api) => applyBorders(api, "all")
+          },
+          {
+            kind: "item",
+            id: "border-outside",
+            label: "Outside borders",
+            icon: "border_outer",
+            run: (api) => applyBorders(api, "outside")
+          },
+          {
+            kind: "item",
+            id: "border-none",
+            label: "No border",
+            icon: "border_clear",
+            run: (api) => applyBorders(api, "none")
+          }
+        ]
+      },
+      { kind: "separator", id: "sep-cond" },
+      {
+        kind: "item",
+        id: "conditional-formatting",
+        label: "Conditional formatting\u2026",
+        icon: "palette",
+        dialog: "conditional-formatting",
+        feature: "conditionalFormatting"
+      },
+      { kind: "separator", id: "sep-visibility" },
+      {
+        kind: "submenu",
+        id: "visibility",
+        label: "Visibility",
+        icon: "visibility",
+        items: [
+          {
+            kind: "item",
+            id: "hide-row",
+            label: "Hide row",
+            icon: "visibility_off",
+            shortcut: "Ctrl+9",
+            run: hideSelectedRows
+          },
+          {
+            kind: "item",
+            id: "unhide-row",
+            label: "Unhide row",
+            icon: "visibility",
+            shortcut: "Ctrl+Shift+9",
+            run: unhideSelectedRows
+          },
+          {
+            kind: "item",
+            id: "hide-col",
+            label: "Hide column",
+            icon: "visibility_off",
+            shortcut: "Ctrl+0",
+            run: hideSelectedColumns
+          },
+          {
+            kind: "item",
+            id: "unhide-col",
+            label: "Unhide column",
+            icon: "visibility",
+            shortcut: "Ctrl+Shift+0",
+            run: unhideSelectedColumns
+          }
+        ]
+      },
+      { kind: "separator", id: "sep-clear" },
+      {
+        kind: "item",
         id: "clear-format",
         label: "Clear formatting",
-        command: "sheet.command.clear-selection-format",
-        icon: "format_clear"
+        icon: "format_clear",
+        run: clearFormat
+      },
+      { kind: "separator", id: "sep-delete" },
+      {
+        kind: "item",
+        id: "delete-row",
+        label: "Delete row",
+        icon: "delete_sweep",
+        run: deleteSelectedRow
+      },
+      {
+        kind: "item",
+        id: "delete-col",
+        label: "Delete column",
+        icon: "folder_delete",
+        run: deleteSelectedColumn
       }
     ]
   },
@@ -1742,46 +2855,97 @@ var MENUS = [
     label: "Data",
     items: [
       {
+        kind: "item",
         id: "sort-asc",
         label: "Sort ascending",
-        command: "sheet.command.sort-range-asc",
-        icon: "arrow_upward"
+        icon: "arrow_upward",
+        run: sortAsc
       },
       {
+        kind: "item",
         id: "sort-desc",
         label: "Sort descending",
-        command: "sheet.command.sort-range-desc",
-        icon: "arrow_downward"
+        icon: "arrow_downward",
+        run: sortDesc
+      },
+      {
+        kind: "item",
+        id: "sort-custom",
+        label: "Sort range\u2026",
+        icon: "sort",
+        dialog: "custom-sort"
       },
       {
+        kind: "item",
         id: "toggle-filter",
         label: "Toggle filter",
-        command: "sheet.command.smart-toggle-filter",
-        icon: "filter_alt"
+        icon: "filter_alt",
+        shortcut: "Ctrl+Shift+L",
+        run: toggleFilter,
+        feature: "filter"
+      },
+      { kind: "separator", id: "sep-tools" },
+      {
+        kind: "item",
+        id: "data-validation",
+        label: "Data validation\u2026",
+        icon: "rule",
+        dialog: "data-validation",
+        feature: "dataValidation"
+      },
+      {
+        kind: "item",
+        id: "name-manager",
+        label: "Name Manager\u2026",
+        icon: "bookmark_add",
+        shortcut: "Ctrl+F3",
+        dialog: "name-manager"
+      },
+      {
+        kind: "item",
+        id: "goal-seek",
+        label: "Goal Seek\u2026",
+        icon: "analytics",
+        dialog: "goal-seek"
+      },
+      { kind: "separator", id: "sep-clean" },
+      {
+        kind: "item",
+        id: "text-to-columns",
+        label: "Text to Columns",
+        icon: "splitscreen",
+        run: splitTextToColumns
+      },
+      {
+        kind: "item",
+        id: "recalculate",
+        label: "Recalculate",
+        icon: "autorenew",
+        shortcut: "F9",
+        run: forceRecalculate
       }
     ]
   },
   {
-    id: "view",
-    label: "View",
+    id: "help",
+    label: "Help",
     items: [
       {
-        id: "freeze",
-        label: "Freeze panes",
-        command: "sheet.command.set-selection-frozen",
-        icon: "table_view"
+        kind: "item",
+        id: "keyboard-shortcuts",
+        label: "Keyboard shortcuts",
+        icon: "info",
+        shortcut: "Ctrl+/",
+        dialog: "keyboard-shortcuts"
       },
+      { kind: "separator", id: "sep-help" },
+      { kind: "item", id: "about", label: "About casual sheets", icon: "info", dialog: "about" },
       {
-        id: "unfreeze",
-        label: "Unfreeze panes",
-        command: "sheet.command.cancel-frozen",
-        icon: "grid_off"
-      },
-      {
-        id: "toggle-gridlines",
-        label: "Toggle gridlines",
-        command: "sheet.command.toggle-gridlines",
-        icon: "grid_on"
+        kind: "item",
+        id: "github",
+        label: "View on GitHub",
+        icon: "open_in_new",
+        run: () => window.open("https://github.com/CasualOffice/sheets", "_blank")
       }
     ]
   }
@@ -1815,7 +2979,7 @@ var MENU_BTN_STYLE = {
 var DROPDOWN_STYLE = {
   position: "absolute",
   top: "100%",
-  minWidth: 200,
+  minWidth: 220,
   marginTop: 2,
   padding: 4,
   display: "flex",
@@ -1842,8 +3006,63 @@ var ITEM_STYLE3 = {
   fontSize: 13,
   textAlign: "left"
 };
-function MenuBar({ api }) {
+var SEPARATOR_STYLE = {
+  height: 1,
+  margin: "4px 6px",
+  background: "var(--cs-chrome-border, #e6e9ee)"
+};
+var SHORTCUT_STYLE = {
+  marginLeft: "auto",
+  paddingLeft: 16,
+  fontSize: 11,
+  color: "var(--cs-chrome-muted, #6b7280)"
+};
+var SUBMENU_PANEL_STYLE = {
+  position: "absolute",
+  top: -4,
+  left: "100%",
+  minWidth: 200,
+  marginLeft: 2,
+  padding: 4,
+  display: "flex",
+  flexDirection: "column",
+  border: "1px solid var(--cs-chrome-border, #e6e9ee)",
+  borderRadius: 8,
+  background: "var(--cs-chrome-input-bg, #fff)",
+  boxShadow: "0 6px 20px rgba(0,0,0,0.16)",
+  zIndex: 1001
+};
+function featureOn(feature, features) {
+  if (!feature) return true;
+  return features[feature] !== false;
+}
+function keepItem(item, features, hasDialogHost) {
+  if (!featureOn(item.feature, features)) return null;
+  if (item.kind === "separator") return item;
+  if (item.kind === "submenu") {
+    const items = filterItems(item.items, features, hasDialogHost);
+    if (items.length === 0) return null;
+    return { ...item, items };
+  }
+  if (item.dialog && !hasDialogHost) return null;
+  return item;
+}
+function filterItems(items, features, hasDialogHost) {
+  const kept = items.map((i) => keepItem(i, features, hasDialogHost)).filter((i) => i !== null);
+  const out = [];
+  for (const item of kept) {
+    if (item.kind === "separator") {
+      if (out.length === 0) continue;
+      if (out[out.length - 1].kind === "separator") continue;
+    }
+    out.push(item);
+  }
+  while (out.length > 0 && out[out.length - 1].kind === "separator") out.pop();
+  return out;
+}
+function MenuBar({ api, features = {}, onDialogRequest }) {
   const [open, setOpen] = (0, import_react8.useState)(null);
+  const [openSubmenu, setOpenSubmenu] = (0, import_react8.useState)(null);
   const rootRef = (0, import_react8.useRef)(null);
   (0, import_react8.useEffect)(() => {
     ensureChromeFonts();
@@ -1851,10 +3070,16 @@ function MenuBar({ api }) {
   (0, import_react8.useEffect)(() => {
     if (open === null) return;
     const onKey = (e) => {
-      if (e.key === "Escape") setOpen(null);
+      if (e.key === "Escape") {
+        setOpen(null);
+        setOpenSubmenu(null);
+      }
     };
     const onDown = (e) => {
-      if (!rootRef.current?.contains(e.target)) setOpen(null);
+      if (!rootRef.current?.contains(e.target)) {
+        setOpen(null);
+        setOpenSubmenu(null);
+      }
     };
     document.addEventListener("keydown", onKey);
     document.addEventListener("pointerdown", onDown, true);
@@ -1863,10 +3088,90 @@ function MenuBar({ api }) {
       document.removeEventListener("pointerdown", onDown, true);
     };
   }, [open]);
-  const run = (item) => {
+  const close = () => {
     setOpen(null);
-    void api?.executeCommand(item.command, item.params);
+    setOpenSubmenu(null);
+  };
+  const runItem = (item) => {
+    close();
+    if (!api) return;
+    if (item.dialog) {
+      const seeded = item.dialog === "insert-chart" || item.dialog === "insert-pivot" || item.dialog === "insert-sparkline" || item.dialog === "insert-cells" || item.dialog === "delete-cells";
+      onDialogRequest?.(item.dialog, seeded ? selectionA1(api) : void 0);
+      return;
+    }
+    item.run?.(api);
   };
+  const hasDialogHost = !!onDialogRequest;
+  const visibleMenus = MENUS.map((menu) => ({
+    ...menu,
+    items: filterItems(menu.items, features, hasDialogHost)
+  })).filter((menu) => featureOn(menu.feature, features) && menu.items.length > 0);
+  const renderItems = (items) => items.map((item) => {
+    if (item.kind === "separator") {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: SEPARATOR_STYLE, role: "separator", "aria-hidden": true }, item.id);
+    }
+    if (item.kind === "submenu") {
+      const isSubOpen = openSubmenu === item.id;
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "div",
+        {
+          style: { position: "relative" },
+          onMouseEnter: () => setOpenSubmenu(item.id),
+          onMouseLeave: () => setOpenSubmenu((cur) => cur === item.id ? null : cur),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                "data-testid": `cs-menuitem-${item.id}`,
+                "aria-haspopup": "menu",
+                "aria-expanded": isSubOpen,
+                disabled: !api,
+                style: { ...ITEM_STYLE3, opacity: api ? 1 : 0.5 },
+                onMouseDown: (e) => e.preventDefault(),
+                children: [
+                  item.icon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: item.icon, size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { width: 18 }, "aria-hidden": true }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: item.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "chevron_right", size: 18, style: { marginLeft: "auto" } })
+                ]
+              }
+            ),
+            isSubOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: SUBMENU_PANEL_STYLE, role: "menu", "aria-label": item.label, children: renderItems(item.items) })
+          ]
+        },
+        item.id
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        "data-testid": `cs-menuitem-${item.id}`,
+        disabled: !api,
+        style: { ...ITEM_STYLE3, opacity: api ? 1 : 0.5 },
+        onMouseDown: (e) => {
+          e.preventDefault();
+          runItem(item);
+        },
+        onMouseEnter: (e) => {
+          setOpenSubmenu(null);
+          e.currentTarget.style.background = "var(--cs-chrome-hover, rgba(0,0,0,0.06))";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.background = "transparent";
+        },
+        children: [
+          item.icon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: item.icon, size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { width: 18 }, "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: item.label }),
+          item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: SHORTCUT_STYLE, children: fmtShortcut(item.shortcut) })
+        ]
+      },
+      item.id
+    );
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
@@ -1875,7 +3180,7 @@ function MenuBar({ api }) {
       "data-testid": "cs-menubar",
       role: "menubar",
       "aria-label": "Menu bar",
-      children: MENUS.map((menu) => {
+      children: visibleMenus.map((menu) => {
         const isOpen = open === menu.id;
         return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { position: "relative" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1883,6 +3188,7 @@ function MenuBar({ api }) {
             {
               type: "button",
               "data-menu": menu.id,
+              "data-testid": `cs-menu-${menu.id}`,
               "aria-haspopup": "menu",
               "aria-expanded": isOpen,
               style: {
@@ -1892,11 +3198,14 @@ function MenuBar({ api }) {
               },
               onMouseDown: (e) => {
                 e.preventDefault();
+                setOpenSubmenu(null);
                 setOpen((cur) => cur === menu.id ? null : menu.id);
               },
               onMouseEnter: (e) => {
-                if (open !== null && open !== menu.id) setOpen(menu.id);
-                else if (!isOpen)
+                if (open !== null && open !== menu.id) {
+                  setOpen(menu.id);
+                  setOpenSubmenu(null);
+                } else if (!isOpen)
                   e.currentTarget.style.background = "var(--cs-chrome-hover, rgba(0,0,0,0.06))";
               },
               onMouseLeave: (e) => {
@@ -1905,31 +3214,7 @@ function MenuBar({ api }) {
               children: menu.label
             }
           ),
-          isOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: DROPDOWN_STYLE, role: "menu", "aria-label": menu.label, children: menu.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-            "button",
-            {
-              type: "button",
-              role: "menuitem",
-              "data-testid": `cs-menuitem-${item.id}`,
-              disabled: !api,
-              style: { ...ITEM_STYLE3, opacity: api ? 1 : 0.5 },
-              onMouseDown: (e) => {
-                e.preventDefault();
-                run(item);
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.background = "var(--cs-chrome-hover, rgba(0,0,0,0.06))";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.background = "transparent";
-              },
-              children: [
-                item.icon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: item.icon, size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { width: 18 }, "aria-hidden": true }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: item.label })
-              ]
-            },
-            item.id
-          )) })
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: DROPDOWN_STYLE, role: "menu", "aria-label": menu.label, children: renderItems(menu.items) })
         ] }, menu.id);
       })
     }