@casualoffice/sheets 0.9.0 → 0.10.0

package/dist/chrome.cjs

@@ -0,0 +1,2569 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/chrome/index.ts
+var chrome_exports = {};
+__export(chrome_exports, {
+  AutoSumPicker: () => AutoSumPicker,
+  BordersPicker: () => BordersPicker,
+  ChromeBottom: () => ChromeBottom,
+  ChromeTop: () => ChromeTop,
+  ColorPicker: () => ColorPicker,
+  FindReplace: () => FindReplace,
+  FormulaBar: () => FormulaBar,
+  Icon: () => Icon,
+  MenuBar: () => MenuBar,
+  NameBox: () => NameBox,
+  SheetTabs: () => SheetTabs,
+  StatusBar: () => StatusBar,
+  Toolbar: () => Toolbar,
+  ensureChromeFonts: () => ensureChromeFonts
+});
+module.exports = __toCommonJS(chrome_exports);
+
+// src/chrome/Toolbar.tsx
+var import_react4 = require("react");
+var import_core = require("@univerjs/core");
+
+// src/chrome/Icon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Icon({ name, size = 20, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: "material-symbols-outlined",
+      "aria-hidden": true,
+      style: {
+        fontFamily: "'Material Symbols Outlined'",
+        fontWeight: "normal",
+        fontStyle: "normal",
+        fontSize: size,
+        lineHeight: 1,
+        letterSpacing: "normal",
+        textTransform: "none",
+        display: "inline-block",
+        whiteSpace: "nowrap",
+        wordWrap: "normal",
+        direction: "ltr",
+        // Hint the variable-font axes so weight/optical-size are consistent.
+        fontVariationSettings: "'opsz' 20, 'wght' 400, 'FILL' 0, 'GRAD' 0",
+        ...style
+      },
+      children: name
+    }
+  );
+}
+
+// src/chrome/fonts.ts
+var LINKS = [
+  {
+    id: "cs-font-inter",
+    href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+  },
+  {
+    id: "cs-font-material-symbols",
+    href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300..700,0..1,-50..200&display=block"
+  }
+];
+var done = false;
+function ensureChromeFonts() {
+  if (done || typeof document === "undefined") return;
+  done = true;
+  const head = document.head;
+  for (const { id, href } of LINKS) {
+    if (document.getElementById(id)) continue;
+    if (document.querySelector(`link[href*="${href.split("?")[0]}"]`)) continue;
+    const link = document.createElement("link");
+    link.id = id;
+    link.rel = "stylesheet";
+    link.href = href;
+    head.appendChild(link);
+  }
+}
+
+// src/chrome/ColorPicker.tsx
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SWATCHES = [
+  { hex: "#000000", label: "Black" },
+  { hex: "#5f6368", label: "Dark gray" },
+  { hex: "#9aa0a6", label: "Gray" },
+  { hex: "#d9dce0", label: "Light gray" },
+  { hex: "#ffffff", label: "White" },
+  { hex: "#d13438", label: "Red" },
+  { hex: "#e8710a", label: "Orange" },
+  { hex: "#f2c811", label: "Yellow" },
+  { hex: "#107c10", label: "Green" },
+  { hex: "#0e7490", label: "Teal" },
+  { hex: "#1a73e8", label: "Blue" },
+  { hex: "#5b2a86", label: "Purple" },
+  { hex: "#c2185b", label: "Magenta" },
+  { hex: "#795548", label: "Brown" }
+];
+var ROW_STYLE = {
+  display: "inline-flex",
+  alignItems: "center",
+  position: "relative"
+};
+var BTN_STYLE = {
+  width: 30,
+  height: 30,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "none",
+  borderRadius: 6,
+  background: "transparent",
+  cursor: "pointer",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  padding: 0
+};
+var POPOVER_STYLE = {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  marginTop: 4,
+  zIndex: 1e3,
+  padding: 8,
+  borderRadius: 8,
+  border: "1px solid var(--cs-chrome-border, #e6e9ee)",
+  background: "var(--cs-chrome-input-bg, #fff)",
+  boxShadow: "0 6px 20px rgba(0,0,0,0.18)"
+};
+var GRID_STYLE = {
+  display: "grid",
+  gridTemplateColumns: "repeat(7, 22px)",
+  gap: 6
+};
+var SWATCH_STYLE = {
+  width: 22,
+  height: 22,
+  borderRadius: 4,
+  border: "1px solid var(--cs-chrome-border, rgba(0,0,0,0.18))",
+  cursor: "pointer",
+  padding: 0
+};
+var NONE_STYLE = {
+  marginTop: 8,
+  width: "100%",
+  height: 26,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 4,
+  border: "1px solid var(--cs-chrome-border, rgba(0,0,0,0.18))",
+  borderRadius: 6,
+  background: "var(--cs-chrome-input-bg, #fff)",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  font: "inherit",
+  fontSize: 12,
+  cursor: "pointer"
+};
+function ColorPicker({ api }) {
+  const [open, setOpen] = (0, import_react.useState)(null);
+  const rootRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(null);
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") setOpen(null);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  const pick = (kind, hex) => {
+    if (api) {
+      if (kind === "text") {
+        void api.executeCommand("sheet.command.set-range-text-color", { value: hex });
+      } else if (hex === null) {
+        void api.executeCommand("sheet.command.reset-background-color");
+      } else {
+        void api.executeCommand("sheet.command.set-background-color", { value: hex });
+      }
+    }
+    setOpen(null);
+  };
+  const toggle = (kind) => setOpen((cur) => cur === kind ? null : kind);
+  const renderButton = (kind, icon, label, testid) => {
+    const on = open === kind;
+    const baseBg = on ? "var(--cs-chrome-active, #e6f3f7)" : "transparent";
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        title: label,
+        "aria-label": label,
+        "aria-haspopup": "true",
+        "aria-expanded": on,
+        "data-testid": testid,
+        style: {
+          ...BTN_STYLE,
+          background: baseBg,
+          color: on ? "var(--cs-chrome-active-fg, #0e7490)" : BTN_STYLE.color
+        },
+        onMouseDown: (e) => {
+          e.preventDefault();
+          toggle(kind);
+        },
+        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_runtime2.jsx)(Icon, { name: icon, size: 20 })
+      }
+    );
+  };
+  const renderPopover = (kind) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: POPOVER_STYLE, "data-testid": "cs-color-popover", role: "menu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: GRID_STYLE, children: SWATCHES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        title: s.label,
+        "aria-label": s.label,
+        "data-color": s.hex,
+        style: { ...SWATCH_STYLE, background: s.hex },
+        onMouseDown: (e) => {
+          e.preventDefault();
+          pick(kind, s.hex);
+        }
+      },
+      s.hex
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        "data-color": "none",
+        style: NONE_STYLE,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          pick(kind, null);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "format_color_reset", size: 16 }),
+          "None"
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref: rootRef, style: ROW_STYLE, "data-testid": "cs-color-picker", children: [
+    renderButton("text", "format_color_text", "Text color", "cs-color-text"),
+    renderButton("fill", "format_color_fill", "Fill color", "cs-color-fill"),
+    open && renderPopover(open)
+  ] });
+}
+
+// src/chrome/BordersPicker.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var OPTIONS = [
+  { value: "all", icon: "border_all", label: "All borders" },
+  { value: "outside", icon: "border_outer", label: "Outside borders" },
+  { value: "inside", icon: "border_inner", label: "Inside borders" },
+  { value: "top", icon: "border_top", label: "Top border" },
+  { value: "bottom", icon: "border_bottom", label: "Bottom border" },
+  { value: "left", icon: "border_left", label: "Left border" },
+  { value: "right", icon: "border_right", label: "Right border" },
+  { value: "none", icon: "border_clear", label: "No border" }
+];
+var ROW_STYLE2 = {
+  display: "inline-flex",
+  alignItems: "center",
+  position: "relative"
+};
+var BTN_STYLE2 = {
+  width: 30,
+  height: 30,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "none",
+  borderRadius: 6,
+  background: "transparent",
+  cursor: "pointer",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  padding: 0
+};
+var POPOVER_STYLE2 = {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  marginTop: 4,
+  zIndex: 1e3,
+  padding: 4,
+  minWidth: 168,
+  borderRadius: 8,
+  border: "1px solid var(--cs-chrome-border, #e6e9ee)",
+  background: "var(--cs-chrome-input-bg, #fff)",
+  boxShadow: "0 6px 20px rgba(0,0,0,0.18)"
+};
+var ITEM_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  width: "100%",
+  height: 28,
+  padding: "0 8px",
+  border: "none",
+  borderRadius: 6,
+  background: "transparent",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  font: "inherit",
+  fontSize: 13,
+  cursor: "pointer",
+  textAlign: "left"
+};
+function BordersPicker({ api }) {
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const rootRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  const pick = (value) => {
+    void api?.executeCommand("sheet.command.set-border-position", { value });
+    setOpen(false);
+  };
+  const on = open;
+  const baseBg = on ? "var(--cs-chrome-active, #e6f3f7)" : "transparent";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: rootRef, style: ROW_STYLE2, "data-testid": "cs-borders", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        type: "button",
+        title: "Borders",
+        "aria-label": "Borders",
+        "aria-haspopup": "true",
+        "aria-expanded": on,
+        "data-testid": "cs-borders-button",
+        disabled: !api,
+        style: {
+          ...BTN_STYLE2,
+          background: baseBg,
+          color: on ? "var(--cs-chrome-active-fg, #0e7490)" : BTN_STYLE2.color
+        },
+        onMouseDown: (e) => {
+          e.preventDefault();
+          setOpen((v) => !v);
+        },
+        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_runtime3.jsx)(Icon, { name: "border_all", size: 20 })
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: POPOVER_STYLE2, "data-testid": "cs-borders-popover", role: "menu", children: OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        "data-border": o.value,
+        "data-testid": `cs-border-${o.value}`,
+        style: ITEM_STYLE,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.background = "var(--cs-chrome-hover, rgba(0,0,0,0.06))";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.background = "transparent";
+        },
+        onMouseDown: (e) => {
+          e.preventDefault();
+          pick(o.value);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: o.icon, size: 18 }),
+          o.label
+        ]
+      },
+      o.value
+    )) })
+  ] });
+}
+
+// src/chrome/AutoSumPicker.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FUNCS = [
+  { fn: "SUM", label: "Sum" },
+  { fn: "AVERAGE", label: "Average" },
+  { fn: "COUNT", label: "Count numbers" },
+  { fn: "MAX", label: "Max" },
+  { fn: "MIN", label: "Min" }
+];
+var ROW_STYLE3 = {
+  display: "inline-flex",
+  alignItems: "center",
+  position: "relative"
+};
+var BTN_STYLE3 = {
+  width: 30,
+  height: 30,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "none",
+  borderRadius: 6,
+  background: "transparent",
+  cursor: "pointer",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  padding: 0
+};
+var POPOVER_STYLE3 = {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  marginTop: 4,
+  zIndex: 1e3,
+  padding: 4,
+  minWidth: 160,
+  borderRadius: 8,
+  border: "1px solid var(--cs-chrome-border, #e6e9ee)",
+  background: "var(--cs-chrome-input-bg, #fff)",
+  boxShadow: "0 6px 20px rgba(0,0,0,0.18)"
+};
+var ITEM_STYLE2 = {
+  display: "block",
+  width: "100%",
+  textAlign: "left",
+  height: 28,
+  padding: "0 10px",
+  border: "none",
+  borderRadius: 6,
+  background: "transparent",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  font: "inherit",
+  fontSize: 13,
+  cursor: "pointer"
+};
+function AutoSumPicker({ api }) {
+  const [open, setOpen] = (0, import_react3.useState)(false);
+  const rootRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  const apply = (fn) => {
+    setOpen(false);
+    const sheet = api?.univer.getActiveWorkbook()?.getActiveSheet();
+    const range = sheet?.getActiveRange?.();
+    if (!sheet || !range) return;
+    const multi = range.getWidth() * range.getHeight() > 1;
+    if (multi) {
+      const target = sheet.getRange(range.getRow() + range.getHeight(), range.getColumn());
+      target.setValue({ f: `=${fn}(${range.getA1Notation()})` });
+      target.activate?.();
+    } else {
+      sheet.getRange(range.getRow(), range.getColumn()).setValue({ f: `=${fn}()` });
+    }
+  };
+  const on = open;
+  const baseBg = on ? "var(--cs-chrome-active, #e6f3f7)" : "transparent";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref: rootRef, style: ROW_STYLE3, "data-testid": "cs-autosum", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        type: "button",
+        title: "AutoSum",
+        "aria-label": "AutoSum",
+        "aria-haspopup": "true",
+        "aria-expanded": on,
+        "data-testid": "cs-autosum-button",
+        disabled: !api,
+        style: {
+          ...BTN_STYLE3,
+          background: baseBg,
+          color: on ? "var(--cs-chrome-active-fg, #0e7490)" : BTN_STYLE3.color
+        },
+        onMouseDown: (e) => {
+          e.preventDefault();
+          setOpen((v) => !v);
+        },
+        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_runtime4.jsx)(Icon, { name: "functions", size: 20 })
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: POPOVER_STYLE3, "data-testid": "cs-autosum-popover", role: "menu", children: FUNCS.map((f) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        "data-fn": f.fn,
+        "data-testid": `cs-autosum-${f.fn}`,
+        style: ITEM_STYLE2,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.background = "var(--cs-chrome-hover, rgba(0,0,0,0.06))";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.background = "transparent";
+        },
+        onMouseDown: (e) => {
+          e.preventDefault();
+          apply(f.fn);
+        },
+        children: f.label
+      },
+      f.fn
+    )) })
+  ] });
+}
+
+// src/chrome/Toolbar.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var NO_STYLE = {
+  bold: false,
+  italic: false,
+  underline: false,
+  strike: false,
+  ht: 0,
+  vt: 0,
+  tb: 0,
+  ff: "",
+  fs: 0
+};
+function readActiveStyle(api) {
+  const sel = api.getSelection();
+  const sheet = api.univer.getActiveWorkbook()?.getActiveSheet();
+  if (!sel || !sheet) return NO_STYLE;
+  const range = sheet.getRange(sel.range.startRow, sel.range.startColumn);
+  const s = range.getCellStyleData?.() ?? null;
+  return {
+    bold: s?.bl === 1,
+    italic: s?.it === 1,
+    underline: s?.ul?.s === 1,
+    strike: s?.st?.s === 1,
+    ht: typeof s?.ht === "number" ? s.ht : 0,
+    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
+  };
+}
+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 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"
+    }
+  ]
+];
+var BAR_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  gap: 2,
+  padding: "4px 8px",
+  borderBottom: "1px solid var(--cs-chrome-border, #e6e9ee)",
+  background: "var(--cs-chrome-bg, #eef1f5)",
+  flex: "0 0 auto",
+  userSelect: "none"
+};
+var BTN_STYLE4 = {
+  width: 30,
+  height: 30,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "none",
+  borderRadius: 6,
+  background: "transparent",
+  cursor: "pointer",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  padding: 0
+};
+var DIVIDER_STYLE = {
+  width: 1,
+  height: 18,
+  margin: "0 4px",
+  background: "var(--cs-chrome-border, #cdd3db)",
+  flex: "0 0 auto"
+};
+var SELECT_STYLE = {
+  height: 26,
+  border: "1px solid var(--cs-chrome-border, #cdd3db)",
+  borderRadius: 6,
+  background: "var(--cs-chrome-input-bg, #fff)",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  font: "inherit",
+  fontSize: 13,
+  padding: "0 4px",
+  cursor: "pointer"
+};
+function isActive(id, s) {
+  switch (id) {
+    case "bold":
+      return s.bold;
+    case "italic":
+      return s.italic;
+    case "underline":
+      return s.underline;
+    case "strikethrough":
+      return s.strike;
+    case "align-left":
+      return s.ht === 1;
+    case "align-center":
+      return s.ht === 2;
+    case "align-right":
+      return s.ht === 3;
+    case "align-top":
+      return s.vt === 1;
+    case "align-middle":
+      return s.vt === 2;
+    case "align-bottom":
+      return s.vt === 3;
+    case "wrap-text":
+      return s.tb === 3;
+    default:
+      return false;
+  }
+}
+function Toolbar({ api }) {
+  const [active, setActive] = (0, import_react4.useState)(NO_STYLE);
+  (0, import_react4.useEffect)(() => {
+    ensureChromeFonts();
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    if (!api) return;
+    const refresh = () => setActive(readActiveStyle(api));
+    refresh();
+    const injector = api.univer._injector;
+    const cmd = injector?.get(import_core.ICommandService);
+    const sub = cmd?.onCommandExecuted(() => refresh());
+    return () => sub?.dispose();
+  }, [api]);
+  const dispatch = (command, params) => void api?.executeCommand(command, params);
+  const familyValue = active.ff || "Arial";
+  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;
+  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 })
+  ] });
+}
+
+// src/chrome/FormulaBar.tsx
+var import_react6 = require("react");
+var import_core3 = require("@univerjs/core");
+
+// src/chrome/NameBox.tsx
+var import_react5 = require("react");
+var import_core2 = require("@univerjs/core");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function readDefinedNames(api) {
+  if (!api) return [];
+  try {
+    const wb = api.univer.getActiveWorkbook();
+    const names = wb?.getDefinedNames?.();
+    if (!names) return [];
+    return names.map((dn) => ({
+      name: dn.getName?.() ?? "",
+      ref: dn.getFormulaOrRefString?.() ?? ""
+    })).filter((e) => e.name !== "");
+  } catch {
+    return [];
+  }
+}
+function colToLetters(col) {
+  let s = "";
+  let n = col;
+  do {
+    s = String.fromCharCode(65 + n % 26) + s;
+    n = Math.floor(n / 26) - 1;
+  } while (n >= 0);
+  return s;
+}
+function readActiveRef(api) {
+  const sel = api.getSelection();
+  if (!sel) return "";
+  const { startRow, startColumn } = sel.range;
+  return colToLetters(startColumn) + (startRow + 1);
+}
+var BOX_STYLE = {
+  flex: "0 0 auto",
+  width: 80,
+  height: 24,
+  padding: "0 8px",
+  border: "1px solid var(--cs-chrome-border, #e6e9ee)",
+  borderRadius: 4,
+  background: "var(--cs-chrome-input-bg, #fff)",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  font: "inherit",
+  fontSize: 13,
+  textAlign: "center",
+  boxSizing: "border-box"
+};
+var ROOT_STYLE = {
+  flex: "0 0 auto",
+  display: "inline-flex",
+  alignItems: "center",
+  position: "relative"
+};
+var DROPDOWN_BTN_STYLE = {
+  flex: "0 0 auto",
+  width: 20,
+  height: 24,
+  marginLeft: 2,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "none",
+  borderRadius: 4,
+  background: "transparent",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  cursor: "pointer",
+  padding: 0
+};
+var MENU_STYLE = {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  marginTop: 4,
+  zIndex: 1e3,
+  minWidth: 160,
+  maxHeight: 280,
+  overflowY: "auto",
+  padding: 4,
+  borderRadius: 8,
+  border: "1px solid var(--cs-chrome-border, #e6e9ee)",
+  background: "var(--cs-chrome-input-bg, #fff)",
+  boxShadow: "0 6px 20px rgba(0,0,0,0.18)"
+};
+var MENU_ITEM_STYLE = {
+  display: "flex",
+  alignItems: "baseline",
+  justifyContent: "space-between",
+  gap: 12,
+  width: "100%",
+  height: 28,
+  padding: "0 8px",
+  border: "none",
+  borderRadius: 6,
+  background: "transparent",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  font: "inherit",
+  fontSize: 13,
+  textAlign: "left",
+  cursor: "pointer",
+  boxSizing: "border-box"
+};
+var MENU_EMPTY_STYLE = {
+  padding: "6px 8px",
+  color: "var(--cs-chrome-muted, #8a8886)",
+  fontSize: 12,
+  whiteSpace: "nowrap"
+};
+var ITEM_REF_STYLE = {
+  color: "var(--cs-chrome-muted, #8a8886)",
+  fontSize: 11,
+  flex: "0 0 auto"
+};
+function NameBox({ api }) {
+  const [ref, setRef] = (0, import_react5.useState)("");
+  const [draft, setDraft] = (0, import_react5.useState)(null);
+  const draftRef = (0, import_react5.useRef)(null);
+  draftRef.current = draft;
+  const inputRef = (0, import_react5.useRef)(null);
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const [names, setNames] = (0, import_react5.useState)([]);
+  const rootRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    if (!api) return;
+    const refresh = () => {
+      if (draftRef.current !== null) return;
+      setRef(readActiveRef(api));
+    };
+    refresh();
+    const injector = api.univer._injector;
+    const cmd = injector?.get(import_core2.ICommandService);
+    const sub = cmd?.onCommandExecuted(() => refresh());
+    return () => sub?.dispose();
+  }, [api]);
+  (0, import_react5.useEffect)(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    };
+    const onKeyDown2 = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown2);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown2);
+    };
+  }, [open]);
+  const navigate = (text) => {
+    const t = text.trim();
+    setDraft(null);
+    if (!api || t === "") {
+      setRef(readActiveRef(api ?? {}));
+      return;
+    }
+    const sheet = api.univer.getActiveWorkbook()?.getActiveSheet();
+    if (!sheet) return;
+    try {
+      const range = sheet.getRange(
+        t
+      );
+      range.activate();
+    } catch {
+      setRef(readActiveRef(api));
+    }
+  };
+  const toggleDropdown = () => {
+    setOpen((cur) => {
+      const next = !cur;
+      if (next) setNames(readDefinedNames(api));
+      return next;
+    });
+  };
+  const navigateName = (entry) => {
+    setOpen(false);
+    const raw = entry.ref.trim();
+    if (raw === "") return;
+    const afterSheet = raw.includes("!") ? raw.slice(raw.lastIndexOf("!") + 1) : raw;
+    const a1 = afterSheet.replace(/\$/g, "");
+    navigate(a1);
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      navigate(e.target.value);
+      e.target.blur();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setDraft(null);
+      setRef(api ? readActiveRef(api) : "");
+      e.target.blur();
+    }
+  };
+  const shown = draft ?? ref;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: rootRef, style: ROOT_STYLE, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        "aria-label": "Name box",
+        title: "Name box",
+        "data-testid": "cs-namebox-input",
+        style: BOX_STYLE,
+        value: shown,
+        disabled: !api,
+        onChange: (e) => setDraft(e.target.value),
+        onKeyDown,
+        onFocus: (e) => e.currentTarget.select(),
+        onBlur: () => {
+          if (draftRef.current !== null) {
+            setDraft(null);
+            setRef(api ? readActiveRef(api) : "");
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        type: "button",
+        title: "Defined names",
+        "aria-label": "Defined names",
+        "aria-haspopup": "true",
+        "aria-expanded": open,
+        "data-testid": "cs-namebox-dropdown",
+        style: {
+          ...DROPDOWN_BTN_STYLE,
+          background: open ? "var(--cs-chrome-active, #e6f3f7)" : "transparent",
+          color: open ? "var(--cs-chrome-active-fg, #0e7490)" : DROPDOWN_BTN_STYLE.color
+        },
+        disabled: !api,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          toggleDropdown();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "expand_more", size: 18 })
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: MENU_STYLE, role: "menu", "data-testid": "cs-namebox-menu", children: names.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: MENU_EMPTY_STYLE, children: "No names" }) : names.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        title: entry.ref || entry.name,
+        "data-testid": `cs-namebox-name-${i}`,
+        style: MENU_ITEM_STYLE,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          navigateName(entry);
+        },
+        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_runtime6.jsx)("span", { children: entry.name }),
+          entry.ref && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: ITEM_REF_STYLE, children: entry.ref })
+        ]
+      },
+      entry.name
+    )) })
+  ] });
+}
+
+// src/chrome/FormulaBar.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FUNCTIONS = [
+  "ABS",
+  "AND",
+  "AVERAGE",
+  "AVERAGEIF",
+  "AVERAGEIFS",
+  "CEILING",
+  "CHOOSE",
+  "COLUMN",
+  "COLUMNS",
+  "CONCAT",
+  "CONCATENATE",
+  "COUNT",
+  "COUNTA",
+  "COUNTBLANK",
+  "COUNTIF",
+  "COUNTIFS",
+  "DATE",
+  "DATEDIF",
+  "DAY",
+  "EDATE",
+  "EOMONTH",
+  "EXACT",
+  "FILTER",
+  "FIND",
+  "FLOOR",
+  "HLOOKUP",
+  "HOUR",
+  "IF",
+  "IFERROR",
+  "IFNA",
+  "IFS",
+  "INDEX",
+  "INDIRECT",
+  "INT",
+  "ISBLANK",
+  "ISERROR",
+  "ISNA",
+  "ISNUMBER",
+  "ISTEXT",
+  "LEFT",
+  "LEN",
+  "LOOKUP",
+  "LOWER",
+  "MATCH",
+  "MAX",
+  "MAXIFS",
+  "MEDIAN",
+  "MID",
+  "MIN",
+  "MINIFS",
+  "MINUTE",
+  "MOD",
+  "MONTH",
+  "NETWORKDAYS",
+  "NOT",
+  "NOW",
+  "OFFSET",
+  "OR",
+  "POWER",
+  "PRODUCT",
+  "PROPER",
+  "RAND",
+  "RANDBETWEEN",
+  "RANK",
+  "REPLACE",
+  "REPT",
+  "RIGHT",
+  "ROUND",
+  "ROUNDDOWN",
+  "ROUNDUP",
+  "ROW",
+  "ROWS",
+  "SEARCH",
+  "SECOND",
+  "SORT",
+  "SQRT",
+  "SUBSTITUTE",
+  "SUM",
+  "SUMIF",
+  "SUMIFS",
+  "SUMPRODUCT",
+  "SWITCH",
+  "TEXT",
+  "TEXTJOIN",
+  "TODAY",
+  "TRANSPOSE",
+  "TRIM",
+  "UNIQUE",
+  "UPPER",
+  "VALUE",
+  "VLOOKUP",
+  "WEEKDAY",
+  "WORKDAY",
+  "XLOOKUP",
+  "XMATCH",
+  "YEAR"
+];
+var TOKEN_RE = /([A-Za-z][A-Za-z0-9._]*)$/;
+function suggestFor(draft) {
+  if (!draft || !draft.startsWith("=")) return [];
+  const m = TOKEN_RE.exec(draft);
+  if (!m) return [];
+  const prefix = m[1].toUpperCase();
+  return FUNCTIONS.filter((f) => f.startsWith(prefix) && f !== prefix).slice(0, 8);
+}
+function colToLetters2(col) {
+  let s = "";
+  let n = col;
+  do {
+    s = String.fromCharCode(65 + n % 26) + s;
+    n = Math.floor(n / 26) - 1;
+  } while (n >= 0);
+  return s;
+}
+function readActiveCell(api) {
+  const sel = api.getSelection();
+  const sheet = api.univer.getActiveWorkbook()?.getActiveSheet();
+  if (!sel || !sheet) return null;
+  const { startRow, startColumn } = sel.range;
+  const range = sheet.getRange(startRow, startColumn);
+  const formula = range.getFormula?.() || "";
+  const raw = range.getValue?.();
+  return {
+    a1: colToLetters2(startColumn) + (startRow + 1),
+    text: formula || (raw == null ? "" : String(raw))
+  };
+}
+var BAR_STYLE2 = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  padding: "3px 6px",
+  borderBottom: "1px solid var(--cs-chrome-border, rgba(0,0,0,0.12))",
+  background: "var(--cs-chrome-bg, #f8f9fa)",
+  flex: "0 0 auto",
+  font: "inherit",
+  fontSize: 13
+};
+var FX_STYLE = {
+  flex: "0 0 auto",
+  fontStyle: "italic",
+  color: "var(--cs-chrome-muted, #6b7280)"
+};
+var INPUT_STYLE = {
+  width: "100%",
+  height: 24,
+  padding: "0 8px",
+  border: "1px solid var(--cs-chrome-border, rgba(0,0,0,0.18))",
+  borderRadius: 4,
+  background: "var(--cs-chrome-input-bg, #fff)",
+  color: "var(--cs-chrome-fg, #1f2329)",
+  font: "inherit",
+  fontSize: 13,
+  boxSizing: "border-box"
+};
+var INPUT_WRAP_STYLE = { position: "relative", flex: "1 1 auto", minWidth: 0 };
+var AC_STYLE = {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  marginTop: 2,
+  minWidth: 200,
+  maxHeight: 240,
+  overflowY: "auto",
+  zIndex: 1e3,
+  padding: 4,
+  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)"
+};
+var AC_ITEM_STYLE = {
+  display: "block",
+  width: "100%",
+  textAlign: "left",
+  height: 26,
+  padding: "0 8px",
+  border: "none",
+  borderRadius: 6,
+  background: "transparent",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  font: "inherit",
+  fontSize: 13,
+  cursor: "pointer"
+};
+function FormulaBar({ api }) {
+  const [cell, setCell] = (0, import_react6.useState)(null);
+  const [draft, setDraft] = (0, import_react6.useState)(null);
+  const draftRef = (0, import_react6.useRef)(null);
+  draftRef.current = draft;
+  const [acIdx, setAcIdx] = (0, import_react6.useState)(0);
+  const [acDismissed, setAcDismissed] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
+    if (!api) return;
+    const refresh = () => {
+      if (draftRef.current !== null) return;
+      setCell(readActiveCell(api));
+    };
+    refresh();
+    const injector = api.univer._injector;
+    const cmd = injector?.get(import_core3.ICommandService);
+    const sub = cmd?.onCommandExecuted(() => refresh());
+    return () => sub?.dispose();
+  }, [api]);
+  const suggestions = (0, import_react6.useMemo)(() => suggestFor(draft), [draft]);
+  const acOpen = !acDismissed && suggestions.length > 0;
+  const commit = (text) => {
+    setDraft(null);
+    setAcDismissed(false);
+    if (!api) return;
+    const sel = api.getSelection();
+    const sheet = api.univer.getActiveWorkbook()?.getActiveSheet();
+    if (!sel || !sheet) return;
+    const range = sheet.getRange(sel.range.startRow, sel.range.startColumn);
+    const t = text.trim();
+    if (t.startsWith("=")) range.setValue({ f: t });
+    else if (t !== "" && !Number.isNaN(Number(t))) range.setValue(Number(t));
+    else range.setValue(t);
+  };
+  const onType = (v) => {
+    setDraft(v);
+    setAcIdx(0);
+    setAcDismissed(false);
+  };
+  const complete = (fn) => {
+    const base = draft ?? "";
+    setDraft(base.replace(TOKEN_RE, `${fn}(`));
+    setAcIdx(0);
+  };
+  const onKeyDown = (e) => {
+    if (acOpen) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setAcIdx((i) => Math.min(i + 1, suggestions.length - 1));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setAcIdx((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (e.key === "Enter" || e.key === "Tab") {
+        e.preventDefault();
+        complete(suggestions[acIdx] ?? suggestions[0]);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setAcDismissed(true);
+        return;
+      }
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commit(e.target.value);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setDraft(null);
+      e.target.blur();
+    }
+  };
+  const shown = draft ?? cell?.text ?? "";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: BAR_STYLE2, "data-testid": "casual-sheets-formula-bar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NameBox, { api }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: FX_STYLE, "aria-hidden": true, children: "fx" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: INPUT_WRAP_STYLE, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
+          type: "text",
+          "aria-label": "Formula bar",
+          "data-testid": "casual-sheets-formula-input",
+          style: INPUT_STYLE,
+          value: shown,
+          onChange: (e) => onType(e.target.value),
+          onKeyDown,
+          onBlur: (e) => {
+            if (draftRef.current !== null) commit(e.target.value);
+          },
+          disabled: !api
+        }
+      ),
+      acOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: AC_STYLE, "data-testid": "cs-formula-suggestions", role: "listbox", children: suggestions.map((fn, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": i === acIdx,
+          "data-testid": `cs-formula-suggestion-${fn}`,
+          style: {
+            ...AC_ITEM_STYLE,
+            background: i === acIdx ? "var(--cs-chrome-active, #e6f3f7)" : "transparent",
+            color: i === acIdx ? "var(--cs-chrome-active-fg, #0e7490)" : AC_ITEM_STYLE.color
+          },
+          onMouseDown: (e) => {
+            e.preventDefault();
+            complete(fn);
+          },
+          onMouseEnter: () => setAcIdx(i),
+          children: fn
+        },
+        fn
+      )) })
+    ] })
+  ] });
+}
+
+// src/chrome/StatusBar.tsx
+var import_react7 = require("react");
+var import_core4 = require("@univerjs/core");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function readStats(api) {
+  const sel = api.getSelection();
+  const sheet = api.univer.getActiveWorkbook()?.getActiveSheet();
+  if (!sel || !sheet) return null;
+  const { startRow, startColumn, endRow, endColumn } = sel.range;
+  if (startRow === endRow && startColumn === endColumn) return null;
+  const values = sheet.getRange(sel.range).getValues?.();
+  if (!values) return null;
+  let count = 0;
+  let numCount = 0;
+  let sum = 0;
+  let min = Infinity;
+  let max = -Infinity;
+  for (const row of values) {
+    for (const v of row) {
+      if (v == null || v === "") continue;
+      count += 1;
+      if (typeof v === "number" && Number.isFinite(v)) {
+        numCount += 1;
+        sum += v;
+        if (v < min) min = v;
+        if (v > max) max = v;
+      }
+    }
+  }
+  if (count === 0) return null;
+  return { count, numCount, sum, avg: numCount ? sum / numCount : 0, min, max };
+}
+function readZoom(api) {
+  const sheet = api.univer.getActiveWorkbook()?.getActiveSheet();
+  const ws = sheet?.getSheet?.();
+  const z = ws?.getConfig?.().zoomRatio;
+  return typeof z === "number" && z > 0 ? z : 1;
+}
+function fmt(n) {
+  return Number(n.toFixed(10)).toLocaleString();
+}
+var BAR_STYLE3 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  gap: 16,
+  height: 24,
+  padding: "0 12px",
+  borderTop: "1px solid var(--cs-chrome-border, rgba(0,0,0,0.12))",
+  background: "var(--cs-chrome-bg, #f8f9fa)",
+  color: "var(--cs-chrome-muted, #4b5563)",
+  flex: "0 0 auto",
+  font: "inherit",
+  fontSize: 12,
+  userSelect: "none"
+};
+var ZOOM_GROUP_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  gap: 4
+};
+var ZOOM_BTN_STYLE = {
+  width: 20,
+  height: 18,
+  border: "none",
+  borderRadius: 4,
+  background: "transparent",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  cursor: "pointer",
+  fontSize: 14,
+  lineHeight: 1,
+  padding: 0
+};
+var ZOOM_LEVEL_STYLE = {
+  minWidth: 40,
+  height: 18,
+  border: "none",
+  borderRadius: 4,
+  background: "transparent",
+  color: "var(--cs-chrome-muted, #4b5563)",
+  cursor: "pointer",
+  font: "inherit",
+  fontSize: 12,
+  textAlign: "center"
+};
+function StatusBar({ api }) {
+  const [stats, setStats] = (0, import_react7.useState)(null);
+  const [zoom, setZoom] = (0, import_react7.useState)(1);
+  (0, import_react7.useEffect)(() => {
+    if (!api) return;
+    const refresh = () => {
+      setStats(readStats(api));
+      setZoom(readZoom(api));
+    };
+    refresh();
+    const injector = api.univer._injector;
+    const cmd = injector?.get(import_core4.ICommandService);
+    const sub = cmd?.onCommandExecuted(() => refresh());
+    return () => sub?.dispose();
+  }, [api]);
+  const setZoomRatio = (ratio) => {
+    const wb = api?.univer.getActiveWorkbook();
+    const sheet = wb?.getActiveSheet();
+    if (!wb || !sheet) return;
+    const clamped = Math.min(4, Math.max(0.1, ratio));
+    void api?.executeCommand("sheet.operation.set-zoom-ratio", {
+      unitId: wb.getId(),
+      subUnitId: sheet.getSheetId(),
+      zoomRatio: clamped
+    });
+    setZoom(clamped);
+  };
+  const zoomBy = (delta) => setZoomRatio(Math.round((zoom + delta) * 100) / 100);
+  const resetZoom = () => setZoomRatio(1);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: BAR_STYLE3, "data-testid": "casual-sheets-status-bar", children: [
+    stats && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      stats.numCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { "data-stat": "average", children: [
+        "Average: ",
+        fmt(stats.avg)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { "data-stat": "count", children: [
+        "Count: ",
+        stats.count
+      ] }),
+      stats.numCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { "data-stat": "num-count", children: [
+          "Numerical Count: ",
+          stats.numCount
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { "data-stat": "min", children: [
+          "Min: ",
+          fmt(stats.min)
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { "data-stat": "max", children: [
+          "Max: ",
+          fmt(stats.max)
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { "data-stat": "sum", children: [
+          "Sum: ",
+          fmt(stats.sum)
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: ZOOM_GROUP_STYLE, "data-testid": "cs-zoom", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          style: ZOOM_BTN_STYLE,
+          "aria-label": "Zoom out",
+          title: "Zoom out",
+          "data-testid": "cs-zoom-out",
+          disabled: !api,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            zoomBy(-0.1);
+          },
+          children: "\u2212"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "button",
+        {
+          type: "button",
+          style: ZOOM_LEVEL_STYLE,
+          "aria-label": "Reset zoom to 100%",
+          title: "Reset zoom to 100%",
+          "data-testid": "cs-zoom-level",
+          disabled: !api,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            resetZoom();
+          },
+          children: [
+            Math.round(zoom * 100),
+            "%"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          style: ZOOM_BTN_STYLE,
+          "aria-label": "Zoom in",
+          title: "Zoom in",
+          "data-testid": "cs-zoom-in",
+          disabled: !api,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            zoomBy(0.1);
+          },
+          children: "+"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/chrome/MenuBar.tsx
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var MENUS = [
+  {
+    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" }
+    ]
+  },
+  {
+    id: "insert",
+    label: "Insert",
+    items: [
+      {
+        id: "insert-row",
+        label: "Insert row above",
+        command: "sheet.command.insert-row-before",
+        icon: "add_row_above"
+      },
+      {
+        id: "insert-col",
+        label: "Insert column left",
+        command: "sheet.command.insert-col-before",
+        icon: "add_column_left"
+      },
+      {
+        id: "delete-row",
+        label: "Delete row",
+        command: "sheet.command.remove-row",
+        icon: "delete"
+      },
+      {
+        id: "delete-col",
+        label: "Delete column",
+        command: "sheet.command.remove-col",
+        icon: "delete"
+      }
+    ]
+  },
+  {
+    id: "format",
+    label: "Format",
+    items: [
+      { 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: "wrap-text",
+        label: "Wrap text",
+        command: "sheet.command.set-text-wrap",
+        icon: "wrap_text"
+      },
+      {
+        id: "clear-format",
+        label: "Clear formatting",
+        command: "sheet.command.clear-selection-format",
+        icon: "format_clear"
+      }
+    ]
+  },
+  {
+    id: "data",
+    label: "Data",
+    items: [
+      {
+        id: "sort-asc",
+        label: "Sort ascending",
+        command: "sheet.command.sort-range-asc",
+        icon: "arrow_upward"
+      },
+      {
+        id: "sort-desc",
+        label: "Sort descending",
+        command: "sheet.command.sort-range-desc",
+        icon: "arrow_downward"
+      },
+      {
+        id: "toggle-filter",
+        label: "Toggle filter",
+        command: "sheet.command.smart-toggle-filter",
+        icon: "filter_alt"
+      }
+    ]
+  },
+  {
+    id: "view",
+    label: "View",
+    items: [
+      {
+        id: "freeze",
+        label: "Freeze panes",
+        command: "sheet.command.set-selection-frozen",
+        icon: "table_view"
+      },
+      {
+        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"
+      }
+    ]
+  }
+];
+var BAR_STYLE4 = {
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  gap: 2,
+  padding: "2px 6px",
+  borderBottom: "1px solid var(--cs-chrome-border, #e6e9ee)",
+  background: "var(--cs-chrome-bg, #eef1f5)",
+  flex: "0 0 auto",
+  userSelect: "none",
+  font: "inherit",
+  fontSize: 13
+};
+var MENU_BTN_STYLE = {
+  height: 26,
+  display: "inline-flex",
+  alignItems: "center",
+  padding: "0 10px",
+  border: "none",
+  borderRadius: 6,
+  background: "transparent",
+  cursor: "pointer",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  font: "inherit",
+  fontSize: 13
+};
+var DROPDOWN_STYLE = {
+  position: "absolute",
+  top: "100%",
+  minWidth: 200,
+  marginTop: 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: 1e3
+};
+var ITEM_STYLE3 = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  width: "100%",
+  height: 30,
+  padding: "0 10px",
+  border: "none",
+  borderRadius: 6,
+  background: "transparent",
+  cursor: "pointer",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  font: "inherit",
+  fontSize: 13,
+  textAlign: "left"
+};
+function MenuBar({ api }) {
+  const [open, setOpen] = (0, import_react8.useState)(null);
+  const rootRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    ensureChromeFonts();
+  }, []);
+  (0, import_react8.useEffect)(() => {
+    if (open === null) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(null);
+    };
+    const onDown = (e) => {
+      if (!rootRef.current?.contains(e.target)) setOpen(null);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDown, true);
+    };
+  }, [open]);
+  const run = (item) => {
+    setOpen(null);
+    void api?.executeCommand(item.command, item.params);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      ref: rootRef,
+      style: BAR_STYLE4,
+      "data-testid": "cs-menubar",
+      role: "menubar",
+      "aria-label": "Menu bar",
+      children: MENUS.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)(
+            "button",
+            {
+              type: "button",
+              "data-menu": menu.id,
+              "aria-haspopup": "menu",
+              "aria-expanded": isOpen,
+              style: {
+                ...MENU_BTN_STYLE,
+                background: isOpen ? "var(--cs-chrome-active, #e6f3f7)" : "transparent",
+                color: isOpen ? "var(--cs-chrome-active-fg, #0e7490)" : MENU_BTN_STYLE.color
+              },
+              onMouseDown: (e) => {
+                e.preventDefault();
+                setOpen((cur) => cur === menu.id ? null : menu.id);
+              },
+              onMouseEnter: (e) => {
+                if (open !== null && open !== menu.id) setOpen(menu.id);
+                else if (!isOpen)
+                  e.currentTarget.style.background = "var(--cs-chrome-hover, rgba(0,0,0,0.06))";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.background = isOpen ? "var(--cs-chrome-active, #e6f3f7)" : "transparent";
+              },
+              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
+          )) })
+        ] }, menu.id);
+      })
+    }
+  );
+}
+
+// src/chrome/SheetTabs.tsx
+var import_react9 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var EMPTY = { tabs: [], activeId: null };
+var SHEET_LIST_MUTATIONS = /* @__PURE__ */ new Set([
+  "sheet.mutation.insert-sheet",
+  "sheet.mutation.remove-sheet",
+  "sheet.mutation.set-worksheet-name",
+  "sheet.mutation.set-worksheet-order",
+  "sheet.mutation.set-worksheet-hidden"
+]);
+function readSheets(api) {
+  const wb = api.univer.getActiveWorkbook();
+  if (!wb) return EMPTY;
+  const tabs = wb.getSheets().map((s) => ({
+    id: s.getSheetId(),
+    name: s.getSheetName(),
+    hidden: s.isSheetHidden?.() === true
+  }));
+  return { tabs, activeId: wb.getActiveSheet()?.getSheetId() ?? null };
+}
+var BAR_STYLE5 = {
+  display: "flex",
+  alignItems: "stretch",
+  gap: 2,
+  height: 30,
+  flex: "0 0 auto",
+  padding: "0 6px",
+  borderTop: "1px solid var(--cs-chrome-border, rgba(0,0,0,0.12))",
+  background: "var(--cs-chrome-bg, #f8f9fa)",
+  font: "inherit",
+  fontSize: 13,
+  overflowX: "auto",
+  overflowY: "hidden"
+};
+var ADD_BTN_STYLE = {
+  flex: "0 0 auto",
+  width: 28,
+  border: "none",
+  background: "transparent",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  cursor: "pointer",
+  fontSize: 18,
+  lineHeight: 1,
+  borderRadius: 4
+};
+var RENAME_INPUT_STYLE = {
+  height: 22,
+  alignSelf: "center",
+  padding: "0 6px",
+  border: "1px solid var(--cs-chrome-active-fg, #0e7490)",
+  borderRadius: 4,
+  background: "var(--cs-chrome-input-bg, #fff)",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  font: "inherit",
+  fontSize: 13,
+  width: 120
+};
+var MENU_STYLE2 = {
+  position: "fixed",
+  zIndex: 1e3,
+  minWidth: 140,
+  padding: 4,
+  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)"
+};
+var MENU_ITEM_STYLE2 = {
+  display: "block",
+  width: "100%",
+  textAlign: "left",
+  height: 28,
+  padding: "0 10px",
+  border: "none",
+  borderRadius: 6,
+  background: "transparent",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  font: "inherit",
+  fontSize: 13,
+  cursor: "pointer"
+};
+function SheetTabs({ api }) {
+  const [{ tabs, activeId }, setSnapshot] = (0, import_react9.useState)(EMPTY);
+  const [renaming, setRenaming] = (0, import_react9.useState)(null);
+  const [draft, setDraft] = (0, import_react9.useState)("");
+  const [menu, setMenu] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
+    if (!api) return;
+    const refresh = () => setSnapshot(readSheets(api));
+    refresh();
+    const f = api.univer;
+    const subs = [];
+    try {
+      subs.push(
+        f.addEvent(f.Event.SheetCreated, refresh),
+        f.addEvent(f.Event.SheetDeleted, refresh),
+        f.addEvent(f.Event.SheetNameChanged, refresh),
+        f.addEvent(f.Event.ActiveSheetChanged, refresh),
+        f.addEvent(f.Event.SheetMoved, refresh),
+        // Mutation-level fallback — catches collab/replay-driven changes that
+        // don't emit the higher-level facade events.
+        f.addEvent(f.Event.CommandExecuted, (e) => {
+          if (e?.id && SHEET_LIST_MUTATIONS.has(e.id)) refresh();
+        })
+      );
+      if (typeof f.onUniverSheetCreated === "function") {
+        subs.push(f.onUniverSheetCreated(() => queueMicrotask(refresh)));
+      }
+    } catch {
+    }
+    return () => {
+      for (const s of subs) s?.dispose?.();
+    };
+  }, [api]);
+  (0, import_react9.useEffect)(() => {
+    if (!menu) return;
+    const close = () => setMenu(null);
+    window.addEventListener("pointerdown", close);
+    window.addEventListener("keydown", close);
+    return () => {
+      window.removeEventListener("pointerdown", close);
+      window.removeEventListener("keydown", close);
+    };
+  }, [menu]);
+  if (!api) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: BAR_STYLE5, "data-testid": "casual-sheets-tabs" });
+  }
+  const visible = tabs.filter((t) => !t.hidden);
+  const wb = () => api.univer.getActiveWorkbook();
+  const switchTo = (id) => {
+    if (id === activeId) return;
+    wb()?.setActiveSheet(id);
+  };
+  const addSheet = () => {
+    const created = wb()?.insertSheet?.();
+    created?.activate?.();
+  };
+  const startRename = (tab) => {
+    setMenu(null);
+    setRenaming(tab.id);
+    setDraft(tab.name);
+  };
+  const commitRename = () => {
+    const id = renaming;
+    setRenaming(null);
+    if (!id) return;
+    const name = draft.trim();
+    if (!name) return;
+    const sheet = wb()?.getSheetBySheetId?.(id);
+    if (sheet && sheet.getSheetName?.() !== name) sheet.setName?.(name);
+  };
+  const deleteSheet = (id) => {
+    setMenu(null);
+    if (visible.length <= 1) return;
+    wb()?.deleteSheet?.(id);
+  };
+  const onRenameKey = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commitRename();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setRenaming(null);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: BAR_STYLE5, "data-testid": "casual-sheets-tabs", role: "tablist", children: [
+    visible.map((tab) => {
+      const active = tab.id === activeId;
+      if (renaming === tab.id) {
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "input",
+          {
+            autoFocus: true,
+            style: RENAME_INPUT_STYLE,
+            value: draft,
+            "data-testid": "cs-tab-rename-input",
+            onChange: (e) => setDraft(e.target.value),
+            onKeyDown: onRenameKey,
+            onBlur: commitRename
+          },
+          tab.id
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": active,
+          "data-testid": `cs-tab-${tab.id}`,
+          "data-active": active || void 0,
+          title: tab.name,
+          style: {
+            flex: "0 0 auto",
+            maxWidth: 160,
+            padding: "0 12px",
+            border: "none",
+            borderTop: active ? "2px solid var(--cs-chrome-active-fg, #0e7490)" : "2px solid transparent",
+            background: active ? "var(--cs-chrome-input-bg, #fff)" : "transparent",
+            color: active ? "var(--cs-chrome-active-fg, #0e7490)" : "var(--cs-chrome-fg, #201f1e)",
+            fontWeight: active ? 600 : 400,
+            font: "inherit",
+            fontSize: 13,
+            cursor: "pointer",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          },
+          onMouseDown: (e) => {
+            e.preventDefault();
+            switchTo(tab.id);
+          },
+          onDoubleClick: () => startRename(tab),
+          onContextMenu: (e) => {
+            e.preventDefault();
+            setMenu({ x: e.clientX, y: e.clientY, sheetId: tab.id });
+          },
+          children: tab.name
+        },
+        tab.id
+      );
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "button",
+      {
+        type: "button",
+        style: ADD_BTN_STYLE,
+        "aria-label": "Add sheet",
+        title: "Add sheet",
+        "data-testid": "cs-tab-add",
+        onMouseDown: (e) => {
+          e.preventDefault();
+          addSheet();
+        },
+        children: "+"
+      }
+    ),
+    menu && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        style: { ...MENU_STYLE2, left: menu.x, top: menu.y },
+        "data-testid": "cs-tab-menu",
+        role: "menu",
+        onPointerDown: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              style: MENU_ITEM_STYLE2,
+              "data-testid": "cs-tab-menu-rename",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                const tab = tabs.find((t) => t.id === menu.sheetId);
+                if (tab) startRename(tab);
+              },
+              children: "Rename"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              style: {
+                ...MENU_ITEM_STYLE2,
+                opacity: visible.length <= 1 ? 0.5 : 1,
+                cursor: visible.length <= 1 ? "not-allowed" : "pointer"
+              },
+              "data-testid": "cs-tab-menu-delete",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                deleteSheet(menu.sheetId);
+              },
+              children: "Delete"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/chrome/FindReplace.tsx
+var import_react10 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function findMatches(api, query, matchCase) {
+  if (!query) return [];
+  const snap = api.getSnapshot();
+  const sheetId = api.getSelection()?.sheetId ?? api.univer.getActiveWorkbook()?.getActiveSheet()?.getSheetId();
+  const sheet = sheetId ? snap?.sheets?.[sheetId] : void 0;
+  const cellData = sheet?.cellData;
+  if (!cellData) return [];
+  const needle = matchCase ? query : query.toLowerCase();
+  const out = [];
+  for (const rk of Object.keys(cellData).sort((a, b) => Number(a) - Number(b))) {
+    const rowObj = cellData[rk];
+    if (!rowObj) continue;
+    for (const ck of Object.keys(rowObj).sort((a, b) => Number(a) - Number(b))) {
+      const cell = rowObj[ck];
+      if (!cell) continue;
+      const hay = `${cell.v ?? ""}${cell.f ? ` ${cell.f}` : ""}`;
+      const cmp = matchCase ? hay : hay.toLowerCase();
+      if (cmp.includes(needle)) out.push({ row: Number(rk), col: Number(ck) });
+    }
+  }
+  return out;
+}
+var WRAP_STYLE = {
+  position: "absolute",
+  top: 8,
+  right: 12,
+  zIndex: 1100,
+  width: 320,
+  padding: 10,
+  borderRadius: 8,
+  border: "1px solid var(--cs-chrome-border, #e6e9ee)",
+  background: "var(--cs-chrome-input-bg, #fff)",
+  boxShadow: "0 8px 28px rgba(0,0,0,0.18)",
+  font: "inherit",
+  fontSize: 13,
+  color: "var(--cs-chrome-fg, #201f1e)"
+};
+var ROW_STYLE4 = { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 };
+var INPUT_STYLE2 = {
+  flex: "1 1 auto",
+  height: 26,
+  padding: "0 8px",
+  border: "1px solid var(--cs-chrome-border, #cdd3db)",
+  borderRadius: 4,
+  background: "var(--cs-chrome-input-bg, #fff)",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  font: "inherit",
+  fontSize: 13,
+  boxSizing: "border-box"
+};
+var BTN_STYLE5 = {
+  height: 26,
+  padding: "0 10px",
+  border: "1px solid var(--cs-chrome-border, #cdd3db)",
+  borderRadius: 4,
+  background: "var(--cs-chrome-bg, #f3f5f8)",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  font: "inherit",
+  fontSize: 12,
+  cursor: "pointer"
+};
+var ICON_BTN_STYLE = {
+  width: 26,
+  height: 26,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "none",
+  borderRadius: 4,
+  background: "transparent",
+  color: "var(--cs-chrome-fg, #201f1e)",
+  cursor: "pointer",
+  padding: 0
+};
+function FindReplace({ api }) {
+  const [open, setOpen] = (0, import_react10.useState)(false);
+  const [showReplace, setShowReplace] = (0, import_react10.useState)(false);
+  const [query, setQuery] = (0, import_react10.useState)("");
+  const [replaceText, setReplaceText] = (0, import_react10.useState)("");
+  const [matchCase, setMatchCase] = (0, import_react10.useState)(false);
+  const [idx, setIdx] = (0, import_react10.useState)(0);
+  const inputRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
+    const onKey = (e) => {
+      const mod = e.metaKey || e.ctrlKey;
+      if (mod && (e.key === "f" || e.key === "F")) {
+        e.preventDefault();
+        setShowReplace(false);
+        setOpen(true);
+        requestAnimationFrame(() => inputRef.current?.focus());
+      } else if (mod && (e.key === "h" || e.key === "H")) {
+        e.preventDefault();
+        setShowReplace(true);
+        setOpen(true);
+        requestAnimationFrame(() => inputRef.current?.focus());
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, []);
+  const matches = (0, import_react10.useMemo)(
+    () => api && open && query ? findMatches(api, query, matchCase) : [],
+    [api, open, query, matchCase]
+  );
+  (0, import_react10.useEffect)(() => {
+    setIdx((i) => matches.length === 0 ? 0 : Math.min(i, matches.length - 1));
+  }, [matches.length]);
+  if (!open || !api) return null;
+  const go = (delta) => {
+    if (matches.length === 0) return;
+    const next = (idx + delta + matches.length) % matches.length;
+    setIdx(next);
+    activate(matches[next]);
+  };
+  const activate = (m) => {
+    const sheet = api.univer.getActiveWorkbook()?.getActiveSheet();
+    sheet?.getRange(m.row, m.col)?.activate?.();
+  };
+  const replaceOne = () => {
+    if (matches.length === 0) return;
+    const m = matches[Math.min(idx, matches.length - 1)];
+    replaceAt(m);
+  };
+  const replaceAt = (m) => {
+    const sheet = api.univer.getActiveWorkbook()?.getActiveSheet();
+    if (!sheet) return;
+    const cur = String(sheet.getRange(m.row, m.col).getValue?.() ?? "");
+    const next = replaceInString(cur, query, replaceText, matchCase);
+    if (next !== cur) sheet.getRange(m.row, m.col).setValue(next);
+  };
+  const replaceAll = () => {
+    const sheet = api.univer.getActiveWorkbook()?.getActiveSheet();
+    if (!sheet) return;
+    for (const m of matches) {
+      const cur = String(sheet.getRange(m.row, m.col).getValue?.() ?? "");
+      const next = replaceInString(cur, query, replaceText, matchCase);
+      if (next !== cur) sheet.getRange(m.row, m.col).setValue(next);
+    }
+  };
+  const onInputKey = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      go(e.shiftKey ? -1 : 1);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+    }
+  };
+  const count = matches.length;
+  const position = count === 0 ? 0 : Math.min(idx, count - 1) + 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      style: WRAP_STYLE,
+      "data-testid": "cs-find-replace",
+      role: "dialog",
+      "aria-label": "Find and replace",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: ROW_STYLE4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              "aria-label": "Find",
+              placeholder: "Find",
+              "data-testid": "cs-find-input",
+              style: INPUT_STYLE2,
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              onKeyDown: onInputKey
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            "span",
+            {
+              style: { minWidth: 54, textAlign: "center", color: "var(--cs-chrome-muted, #6b7280)" },
+              "data-testid": "cs-find-count",
+              children: [
+                position,
+                "/",
+                count
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              type: "button",
+              style: ICON_BTN_STYLE,
+              "aria-label": "Previous match",
+              "data-testid": "cs-find-prev",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                go(-1);
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "keyboard_arrow_up", size: 18 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              type: "button",
+              style: ICON_BTN_STYLE,
+              "aria-label": "Next match",
+              "data-testid": "cs-find-next",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                go(1);
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "keyboard_arrow_down", size: 18 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              type: "button",
+              style: ICON_BTN_STYLE,
+              "aria-label": "Close",
+              "data-testid": "cs-find-close",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                setOpen(false);
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "close", size: 18 })
+            }
+          )
+        ] }),
+        showReplace && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: ROW_STYLE4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "input",
+            {
+              type: "text",
+              "aria-label": "Replace with",
+              placeholder: "Replace with",
+              "data-testid": "cs-replace-input",
+              style: INPUT_STYLE2,
+              value: replaceText,
+              onChange: (e) => setReplaceText(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              type: "button",
+              style: BTN_STYLE5,
+              "data-testid": "cs-replace-one",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                replaceOne();
+              },
+              children: "Replace"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              type: "button",
+              style: BTN_STYLE5,
+              "data-testid": "cs-replace-all",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                replaceAll();
+              },
+              children: "All"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: 4, cursor: "pointer" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                "data-testid": "cs-find-match-case",
+                checked: matchCase,
+                onChange: (e) => setMatchCase(e.target.checked)
+              }
+            ),
+            "Match case"
+          ] }),
+          !showReplace && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              type: "button",
+              style: {
+                ...BTN_STYLE5,
+                marginLeft: "auto",
+                border: "none",
+                background: "transparent",
+                color: "var(--cs-chrome-active-fg, #0e7490)"
+              },
+              "data-testid": "cs-find-toggle-replace",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                setShowReplace(true);
+              },
+              children: "Replace\u2026"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function replaceInString(text, query, replacement, matchCase) {
+  if (!query) return text;
+  if (matchCase) return text.split(query).join(replacement);
+  const lower = text.toLowerCase();
+  const needle = query.toLowerCase();
+  let out = "";
+  let i = 0;
+  while (i < text.length) {
+    if (lower.startsWith(needle, i)) {
+      out += replacement;
+      i += needle.length;
+    } else {
+      out += text[i];
+      i += 1;
+    }
+  }
+  return out;
+}
+
+// src/chrome/ChromeTop.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function ChromeTop({ api }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MenuBar, { api }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Toolbar, { api }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FormulaBar, { api })
+  ] });
+}
+
+// src/chrome/ChromeBottom.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ChromeBottom({ api }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SheetTabs, { api }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StatusBar, { api }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FindReplace, { api })
+  ] });
+}
+//# sourceMappingURL=chrome.cjs.map