@pixerate/editor-react 0.12.0 → 0.13.0

package/dist/spreadsheet/index.cjs

@@ -0,0 +1,1134 @@
+"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)
+    __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 __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/spreadsheet/index.ts
+var spreadsheet_exports = {};
+__export(spreadsheet_exports, {
+  FormulaHints: () => FormulaHints,
+  SpreadsheetContextMenu: () => SpreadsheetContextMenu,
+  SpreadsheetEditor: () => SpreadsheetEditor,
+  SpreadsheetGroupRow: () => SpreadsheetGroupRow,
+  useFillHandle: () => useFillHandle,
+  useSpreadsheetClipboard: () => useSpreadsheetClipboard,
+  useSpreadsheetEditor: () => useSpreadsheetEditor
+});
+module.exports = __toCommonJS(spreadsheet_exports);
+
+// src/spreadsheet/useSpreadsheetEditor.ts
+var import_react = require("react");
+var import_spreadsheet = require("@pixerate/editor/spreadsheet");
+function useSpreadsheetEditor(options = {}) {
+  const optionsRef = (0, import_react.useRef)(options);
+  optionsRef.current = options;
+  const settersRef = (0, import_react.useRef)({});
+  const [controller] = (0, import_react.useState)(
+    () => new import_spreadsheet.SpreadsheetController({
+      ...options,
+      onDocumentChange: (updated) => {
+        settersRef.current.setDoc?.({ ...updated });
+        optionsRef.current.onDocumentChange?.(updated);
+      },
+      onSelectionChange: (active, range) => {
+        settersRef.current.setActiveCell?.(active);
+        settersRef.current.setSelectedRange?.(range);
+        optionsRef.current.onSelectionChange?.(active, range);
+      },
+      onCellCommit: (rowId, colId, raw, value) => {
+        optionsRef.current.onCellCommit?.(rowId, colId, raw, value);
+      }
+    })
+  );
+  const [doc, setDoc] = (0, import_react.useState)(() => ({ ...controller.document }));
+  const [activeCell, setActiveCell] = (0, import_react.useState)(controller.activeCell);
+  const [selectedRange, setSelectedRange] = (0, import_react.useState)(controller.selectedRange);
+  const [editingCell, setEditingCell] = (0, import_react.useState)(null);
+  const [draftValue, setDraftValue] = (0, import_react.useState)("");
+  settersRef.current = { setDoc, setActiveCell, setSelectedRange };
+  const setCellValue = (0, import_react.useCallback)((rowId, colId, raw) => {
+    controller.setCellValue(rowId, colId, raw);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const selectCell = (0, import_react.useCallback)((row, col, extendSelection = false) => {
+    controller.selectCell(row, col, extendSelection);
+    setActiveCell(controller.activeCell);
+    setSelectedRange(controller.selectedRange);
+  }, [controller]);
+  const selectRange = (0, import_react.useCallback)((range) => {
+    controller.selectRange(range);
+    setSelectedRange(controller.selectedRange);
+  }, [controller]);
+  const startEditing = (0, import_react.useCallback)((row, col, initialVal) => {
+    controller.startEditing(row, col, initialVal);
+    setActiveCell(controller.activeCell);
+    setEditingCell(controller.editingCell);
+    setDraftValue(controller.draftValue);
+  }, [controller]);
+  const commitEditing = (0, import_react.useCallback)((val) => {
+    controller.commitEditing(val);
+    setEditingCell(null);
+    setDraftValue("");
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const cancelEditing = (0, import_react.useCallback)(() => {
+    controller.cancelEditing();
+    setEditingCell(null);
+    setDraftValue("");
+  }, [controller]);
+  const moveCursor = (0, import_react.useCallback)((dir, extend = false) => {
+    controller.moveCursor(dir, extend);
+    setActiveCell(controller.activeCell);
+    setSelectedRange(controller.selectedRange);
+  }, [controller]);
+  const insertColumn = (0, import_react.useCallback)((index, config) => {
+    controller.insertColumn(index, config);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const deleteColumn = (0, import_react.useCallback)((colId) => {
+    controller.deleteColumn(colId);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const insertRow = (0, import_react.useCallback)((index, config) => {
+    controller.insertRow(index, config);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const deleteRow = (0, import_react.useCallback)((rowId) => {
+    controller.deleteRow(rowId);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const setColumnWidth = (0, import_react.useCallback)((colId, width) => {
+    controller.setColumnWidth(colId, width);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const autoFitColumnWidth = (0, import_react.useCallback)((colId, customWidth) => {
+    controller.autoFitColumnWidth(colId, customWidth);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const registerDataSource = (0, import_react.useCallback)((ds) => {
+    controller.registerDataSource(ds);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const setPrimaryDataSource = (0, import_react.useCallback)((id) => {
+    controller.setPrimaryDataSource(id);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const recalculateAll = (0, import_react.useCallback)(() => {
+    controller.recalculateAll();
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const undo = (0, import_react.useCallback)(() => {
+    controller.undo();
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const redo = (0, import_react.useCallback)(() => {
+    controller.redo();
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const tableActions = (0, import_react.useMemo)(() => (0, import_spreadsheet.bindSpreadsheetTableActions)(controller), [controller]);
+  const viewModel = (0, import_react.useMemo)(() => controller.getViewModel(), [controller, doc]);
+  return {
+    document: doc,
+    activeCell,
+    selectedRange,
+    editingCell,
+    draftValue,
+    setDraftValue,
+    controller,
+    getCell: (rowId, colId) => controller.getCell(rowId, colId),
+    setCellValue,
+    selectCell,
+    selectRange,
+    startEditing,
+    commitEditing,
+    cancelEditing,
+    moveCursor,
+    insertColumn,
+    deleteColumn,
+    insertRow,
+    deleteRow,
+    setColumnWidth,
+    autoFitColumnWidth,
+    loadDocument: (document2) => {
+      controller.loadDocument(document2);
+      setDoc({ ...controller.document });
+      setActiveCell(null);
+      setSelectedRange(null);
+      setEditingCell(null);
+      setDraftValue("");
+    },
+    syncWithDataSource: () => {
+      controller.syncWithDataSource();
+      controller.recalculateAll();
+      setDoc({ ...controller.document });
+    },
+    registerDataSource,
+    setPrimaryDataSource,
+    recalculateAll,
+    exportToTsv: (range) => controller.exportToTsv(range),
+    importFromTsv: (data) => {
+      controller.importFromTsv(data);
+      setDoc({ ...controller.document });
+    },
+    ...tableActions,
+    viewModel,
+    undo,
+    redo
+  };
+}
+
+// src/spreadsheet/SpreadsheetEditor.tsx
+var import_react5 = require("react");
+var import_spreadsheet4 = require("@pixerate/editor/spreadsheet");
+
+// src/spreadsheet/SpreadsheetContextMenu.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
+  const menuRef = (0, import_react2.useRef)(null);
+  const onCloseRef = (0, import_react2.useRef)(onClose);
+  onCloseRef.current = onClose;
+  (0, import_react2.useEffect)(() => {
+    const handlePointer = (e) => {
+      if (!menuRef.current?.contains(e.target)) onCloseRef.current();
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") onCloseRef.current();
+    };
+    window.addEventListener("mousedown", handlePointer);
+    window.addEventListener("keydown", handleKey);
+    return () => {
+      window.removeEventListener("mousedown", handlePointer);
+      window.removeEventListener("keydown", handleKey);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: menuRef,
+      role: "menu",
+      "aria-label": "Table actions",
+      className: "fixed z-50 min-w-[14rem] rounded-md border border-border bg-popover py-1 text-xs text-popover-foreground shadow-lg",
+      style: { left: x, top: y, background: "var(--popover, var(--background, #fff))" },
+      onContextMenu: (e) => e.preventDefault(),
+      onKeyDown: (e) => e.stopPropagation(),
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.default.Fragment, { children: [
+        item.separatorBefore && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "separator", className: "my-1 h-px bg-border" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            "data-action": item.id,
+            disabled: item.disabled,
+            className: "block w-full px-3 py-1 text-left hover:bg-muted disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent",
+            onClick: () => {
+              onClose();
+              item.run();
+            },
+            children: item.label
+          }
+        )
+      ] }, item.id))
+    }
+  );
+};
+
+// src/spreadsheet/SpreadsheetGroupRow.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var formatSummary = (value) => value === null ? "\u2013" : String(value);
+var SpreadsheetGroupRow = ({
+  group,
+  columns,
+  groupColId,
+  onToggle,
+  trailingCell
+}) => {
+  const labelColId = columns.some((c) => c.column.id === groupColId) ? groupColId : columns[0]?.column.id;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { className: "border-b border-border bg-muted/40 font-semibold", "data-group-key": group.key, style: { height: 28 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted/60 border-r border-border text-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": `${group.collapsed ? "Expand" : "Collapse"} group ${group.label}`,
+        "aria-expanded": !group.collapsed,
+        className: "h-5 w-5 rounded text-[10px] text-muted-foreground hover:bg-muted",
+        onClick: (e) => {
+          e.stopPropagation();
+          onToggle(group.key);
+        },
+        children: group.collapsed ? "\u25B8" : "\u25BE"
+      }
+    ) }),
+    columns.map(({ column }) => {
+      const summary = group.summaries[column.id];
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "border-r border-border px-2 py-1 truncate max-w-0 text-foreground", style: { maxWidth: 0, overflow: "hidden" }, children: column.id === labelColId ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "truncate", children: [
+        group.label,
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "font-normal text-muted-foreground", children: [
+          "(",
+          group.rowIndices.length,
+          ")"
+        ] })
+      ] }) : summary !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", "data-summary": column.id, children: formatSummary(summary) }) : null }, column.id);
+    }),
+    trailingCell && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
+  ] });
+};
+
+// src/spreadsheet/useSpreadsheetTableInteractions.ts
+var import_react3 = require("react");
+var import_spreadsheet2 = require("@pixerate/editor/spreadsheet");
+function gridHasFocus(grid) {
+  if (!grid || typeof document === "undefined") return false;
+  const active = document.activeElement;
+  if (!active || !grid.contains(active)) return false;
+  return !(active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement);
+}
+function useSpreadsheetClipboard(gridRef, state, readOnly) {
+  const stateRef = (0, import_react3.useRef)(state);
+  stateRef.current = state;
+  const readOnlyRef = (0, import_react3.useRef)(readOnly);
+  readOnlyRef.current = readOnly;
+  const copiedRef = (0, import_react3.useRef)(false);
+  (0, import_react3.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    const handleCopy = (e) => {
+      const s = stateRef.current;
+      if (!gridHasFocus(gridRef.current) || s.editingCell || !e.clipboardData || !s.selectedRange) return;
+      for (const [type, data] of Object.entries(s.copyToClipboardData(s.selectedRange))) {
+        e.clipboardData.setData(type, data);
+      }
+      copiedRef.current = true;
+      e.preventDefault();
+    };
+    const handlePaste = (e) => {
+      const s = stateRef.current;
+      if (readOnlyRef.current || !gridHasFocus(gridRef.current) || s.editingCell || !e.clipboardData) return;
+      if (s.pasteClipboardData(e.clipboardData)) e.preventDefault();
+    };
+    document.addEventListener("copy", handleCopy);
+    document.addEventListener("paste", handlePaste);
+    return () => {
+      document.removeEventListener("copy", handleCopy);
+      document.removeEventListener("paste", handlePaste);
+    };
+  }, [gridRef]);
+  const copyShortcutFallback = (0, import_react3.useCallback)(() => {
+    copiedRef.current = false;
+    setTimeout(() => {
+      if (copiedRef.current) return;
+      const s = stateRef.current;
+      navigator.clipboard?.writeText(s.exportToTsv(s.selectedRange));
+    }, 0);
+  }, []);
+  return { copyShortcutFallback };
+}
+function useFillHandle(state) {
+  const [drag, setDrag] = (0, import_react3.useState)(null);
+  const dragRef = (0, import_react3.useRef)(drag);
+  dragRef.current = drag;
+  const stateRef = (0, import_react3.useRef)(state);
+  stateRef.current = state;
+  const dragging = drag !== null;
+  (0, import_react3.useEffect)(() => {
+    if (!dragging) return;
+    const handleMouseUp = () => {
+      const current = dragRef.current;
+      setDrag(null);
+      if (current?.target) stateRef.current.autofill(current.source, current.target);
+    };
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => window.removeEventListener("mouseup", handleMouseUp);
+  }, [dragging]);
+  const startFill = (0, import_react3.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const range = stateRef.current.selectedRange;
+    if (range) setDrag({ source: (0, import_spreadsheet2.normalizeRange)(range), target: null });
+  }, []);
+  const extendFill = (0, import_react3.useCallback)((row, col) => {
+    const current = dragRef.current;
+    if (!current) return;
+    setDrag({ source: current.source, target: (0, import_spreadsheet2.computeFillTarget)(current.source, { row, col }) });
+  }, []);
+  return { fillTarget: drag?.target ?? null, isFilling: dragging, startFill, extendFill };
+}
+
+// src/spreadsheet/FormulaHints.tsx
+var import_react4 = require("react");
+var import_spreadsheet3 = require("@pixerate/editor/spreadsheet");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
+  const [caret, setCaret] = (0, import_react4.useState)(null);
+  const [focused, setFocused] = (0, import_react4.useState)(false);
+  const [selected, setSelected] = (0, import_react4.useState)(0);
+  const [dismissed, setDismissed] = (0, import_react4.useState)(false);
+  const [position, setPosition] = (0, import_react4.useState)(null);
+  const pendingCaret = (0, import_react4.useRef)(null);
+  const hints = (0, import_react4.useMemo)(
+    () => (0, import_spreadsheet3.getFormulaHints)(value, caret ?? value.length, { limit }),
+    [value, caret, limit]
+  );
+  const suggestions = dismissed ? [] : hints.suggestions;
+  const selectedIndex = Math.max(0, Math.min(selected, suggestions.length - 1));
+  const visible = focused && value.trimStart().startsWith("=") && (suggestions.length > 0 || !!hints.activeCall);
+  const latest = (0, import_react4.useRef)({ suggestions, selected: selectedIndex, value, caret, onAccept });
+  latest.current = { suggestions, selected: selectedIndex, value, caret, onAccept };
+  const accept = (index) => {
+    const { suggestions: list, value: current, caret: at, onAccept: commit } = latest.current;
+    const suggestion = list[index];
+    if (!suggestion) return;
+    const next = (0, import_spreadsheet3.applyFormulaSuggestion)(current, at ?? current.length, suggestion.name);
+    pendingCaret.current = next.caret;
+    commit(next.value);
+  };
+  (0, import_react4.useEffect)(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const syncCaret = () => setCaret(input.selectionStart ?? input.value.length);
+    const onInput = () => {
+      setDismissed(false);
+      setSelected(0);
+      syncCaret();
+    };
+    const onFocus = () => {
+      setFocused(true);
+      syncCaret();
+    };
+    const onBlur = () => setFocused(false);
+    const onKeyDown = (e) => {
+      const { suggestions: list } = latest.current;
+      if (list.length === 0) return;
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        e.stopPropagation();
+        const step = e.key === "ArrowDown" ? 1 : -1;
+        setSelected((i) => (i + step + list.length) % list.length);
+      } else if (e.key === "Tab" && !e.shiftKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        accept(latest.current.selected);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        setDismissed(true);
+      }
+    };
+    input.addEventListener("input", onInput);
+    input.addEventListener("keyup", syncCaret);
+    input.addEventListener("click", syncCaret);
+    input.addEventListener("select", syncCaret);
+    input.addEventListener("focus", onFocus);
+    input.addEventListener("blur", onBlur);
+    input.addEventListener("keydown", onKeyDown);
+    if (typeof document !== "undefined" && document.activeElement === input) onFocus();
+    return () => {
+      input.removeEventListener("input", onInput);
+      input.removeEventListener("keyup", syncCaret);
+      input.removeEventListener("click", syncCaret);
+      input.removeEventListener("select", syncCaret);
+      input.removeEventListener("focus", onFocus);
+      input.removeEventListener("blur", onBlur);
+      input.removeEventListener("keydown", onKeyDown);
+    };
+  }, [inputRef]);
+  (0, import_react4.useLayoutEffect)(() => {
+    const input = inputRef.current;
+    const at = pendingCaret.current;
+    if (!input || at === null || input.value !== value) return;
+    pendingCaret.current = null;
+    input.setSelectionRange(at, at);
+    setCaret(at);
+    setSelected(0);
+  }, [value, inputRef]);
+  (0, import_react4.useLayoutEffect)(() => {
+    const input = inputRef.current;
+    if (!visible || !input) return;
+    const rect = input.getBoundingClientRect();
+    setPosition({ top: rect.bottom + 2, left: rect.left, width: rect.width });
+  }, [visible, value, inputRef]);
+  if (!visible) return null;
+  const { activeCall } = hints;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      "data-formula-hints": "",
+      className: "rounded-md border border-border bg-popover text-popover-foreground shadow-md text-xs font-sans overflow-hidden",
+      style: {
+        position: "fixed",
+        top: position?.top ?? 0,
+        left: position?.left ?? 0,
+        minWidth: Math.max(260, position?.width ?? 0),
+        maxWidth: 440,
+        zIndex: 50,
+        visibility: position ? "visible" : "hidden"
+      },
+      onMouseDown: (e) => e.preventDefault(),
+      children: [
+        activeCall && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { "data-formula-signature": "", className: "px-2 py-1.5 border-b border-border bg-muted/30", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "font-mono", children: activeCall.parts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "span",
+            {
+              "data-active": part.active ? "" : void 0,
+              className: part.active ? "font-bold text-primary underline" : "",
+              children: part.text
+            },
+            i
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-0.5 text-muted-foreground", children: activeCall.argument ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "font-semibold", children: activeCall.argument.name }),
+            ": ",
+            activeCall.argument.description
+          ] }) : activeCall.description })
+        ] }),
+        suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { role: "listbox", "aria-label": "Formula suggestions", className: "max-h-64 overflow-auto py-1 m-0 list-none p-0", children: suggestions.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "li",
+          {
+            role: "option",
+            "aria-selected": i === selectedIndex,
+            className: `cursor-pointer px-2 py-1 ${i === selectedIndex ? "bg-primary/10" : "hover:bg-muted/50"}`,
+            onMouseEnter: () => setSelected(i),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              accept(i);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "font-mono font-semibold text-foreground", children: s.signature }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-muted-foreground truncate", children: s.description })
+            ]
+          },
+          s.name
+        )) })
+      ]
+    }
+  );
+};
+
+// src/spreadsheet/SpreadsheetEditor.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var COLUMN_HEADER_HEIGHT = 28;
+var ROW_HEADER_WIDTH = 48;
+function frozenCellStyle(viewRow, viewCol) {
+  if (!viewRow.frozen && !viewCol.frozen) return void 0;
+  return {
+    position: "sticky",
+    ...viewRow.frozen ? { top: COLUMN_HEADER_HEIGHT + viewRow.stickyTop } : {},
+    ...viewCol.frozen ? { left: ROW_HEADER_WIDTH + viewCol.stickyLeft } : {},
+    zIndex: viewRow.frozen && viewCol.frozen ? 14 : viewRow.frozen ? 12 : 11,
+    background: "var(--background, #fff)"
+  };
+}
+var SpreadsheetEditor = ({
+  state: externalState,
+  readOnly = false,
+  customCellRenderer,
+  onAddColumnClick,
+  onColumnHeaderClick,
+  onColumnResize
+}) => {
+  const defaultState = useSpreadsheetEditor();
+  const state = externalState || defaultState;
+  const gridRef = (0, import_react5.useRef)(null);
+  const formulaBarRef = (0, import_react5.useRef)(null);
+  const cellInputRef = (0, import_react5.useRef)(null);
+  const [resizingColId, setResizingColId] = (0, import_react5.useState)(null);
+  const [hoveredColId, setHoveredColId] = (0, import_react5.useState)(null);
+  const [resizeStartX, setResizeStartX] = (0, import_react5.useState)(0);
+  const [resizeStartWidth, setResizeStartWidth] = (0, import_react5.useState)(0);
+  const view = state.viewModel;
+  const { copyShortcutFallback } = useSpreadsheetClipboard(gridRef, state, readOnly);
+  const { fillTarget, startFill, extendFill } = useFillHandle(state);
+  const [menu, setMenu] = (0, import_react5.useState)(null);
+  const filter = state.document.table?.filter;
+  const filteredColIds = (0, import_react5.useMemo)(
+    () => new Set(filter?.enabled ? filter.rules.map((r) => r.colId) : []),
+    [filter]
+  );
+  const handleCellContextMenu = (0, import_react5.useCallback)((rIdx, cIdx, e) => {
+    if (readOnly) return;
+    e.preventDefault();
+    if (state.editingCell) state.commitEditing();
+    if (!state.selectedRange || !(0, import_spreadsheet4.rangeContains)(state.selectedRange, rIdx, cIdx)) {
+      state.selectCell(rIdx, cIdx);
+    }
+    setMenu({ x: e.clientX, y: e.clientY, items: (0, import_spreadsheet4.getSpreadsheetMenuItems)(state.controller, { row: rIdx, col: cIdx }) });
+  }, [readOnly, state]);
+  const activeRawValue = (0, import_react5.useMemo)(() => {
+    if (!state.activeCell) return "";
+    const row = state.document.rows[state.activeCell.row];
+    const col = state.document.columns[state.activeCell.col];
+    if (!row || !col) return "";
+    return state.getCell(row.id, col.id).raw;
+  }, [state.activeCell, state.document]);
+  const coordLabel = (0, import_react5.useMemo)(() => {
+    if (!state.activeCell) return "--";
+    const colName = (0, import_spreadsheet4.indexToColName)(state.activeCell.col);
+    return `${colName}${state.activeCell.row + 1}`;
+  }, [state.activeCell]);
+  const [formulaDraft, setFormulaDraft] = (0, import_react5.useState)(null);
+  const activeColumn = state.activeCell ? state.document.columns[state.activeCell.col] : void 0;
+  const formulaBarReadOnly = readOnly || !state.activeCell || !!activeColumn?.readOnly;
+  (0, import_react5.useEffect)(() => {
+    setFormulaDraft(null);
+  }, [state.activeCell?.row, state.activeCell?.col]);
+  const commitFormulaBar = () => {
+    if (state.editingCell) {
+      state.commitEditing();
+      return;
+    }
+    if (formulaDraft === null || !state.activeCell) return;
+    const row = state.document.rows[state.activeCell.row];
+    const col = state.document.columns[state.activeCell.col];
+    if (row && col && !formulaBarReadOnly && formulaDraft !== activeRawValue) {
+      state.setCellValue(row.id, col.id, formulaDraft);
+    }
+    setFormulaDraft(null);
+  };
+  const handleCellClick = (0, import_react5.useCallback)((rIdx, cIdx, e) => {
+    if (state.editingCell && (state.editingCell.row !== rIdx || state.editingCell.col !== cIdx)) {
+      state.commitEditing();
+    }
+    state.selectCell(rIdx, cIdx, e.shiftKey);
+  }, [state]);
+  const handleCellDblClick = (0, import_react5.useCallback)((rIdx, cIdx) => {
+    if (readOnly) return;
+    const col = state.document.columns[cIdx];
+    if (col?.readOnly) return;
+    state.startEditing(rIdx, cIdx);
+  }, [readOnly, state]);
+  const handleKeyDown = (0, import_react5.useCallback)((e) => {
+    if (state.editingCell) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        state.commitEditing();
+        state.moveCursor("down");
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        state.cancelEditing();
+      } else if (e.key === "Tab") {
+        e.preventDefault();
+        state.commitEditing();
+        state.moveCursor(e.shiftKey ? "left" : "right");
+      }
+      return;
+    }
+    if (!state.activeCell) return;
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      state.moveCursor("up", e.shiftKey);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      state.moveCursor("down", e.shiftKey);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      state.moveCursor("left", e.shiftKey);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      state.moveCursor("right", e.shiftKey);
+    } else if (e.key === "Tab") {
+      e.preventDefault();
+      state.moveCursor(e.shiftKey ? "left" : "right");
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const col = state.document.columns[state.activeCell.col];
+      if (!readOnly && !col?.readOnly) {
+        state.startEditing();
+      }
+    } else if (e.key === "Backspace" || e.key === "Delete") {
+      if (readOnly) return;
+      const row = state.document.rows[state.activeCell.row];
+      const col = state.document.columns[state.activeCell.col];
+      if (row && col && !col.readOnly) {
+        e.preventDefault();
+        state.setCellValue(row.id, col.id, "");
+      }
+    } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z") {
+      e.preventDefault();
+      if (e.shiftKey) {
+        state.redo();
+      } else {
+        state.undo();
+      }
+    } else if (e.ctrlKey && !e.metaKey && e.key.toLowerCase() === "y") {
+      e.preventDefault();
+      state.redo();
+    } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "c") {
+      copyShortcutFallback();
+    } else if (!readOnly && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      const col = state.document.columns[state.activeCell.col];
+      if (!col?.readOnly) {
+        state.startEditing(state.activeCell.row, state.activeCell.col, e.key);
+      }
+    }
+  }, [readOnly, state, copyShortcutFallback]);
+  const stateRef = (0, import_react5.useRef)(state);
+  stateRef.current = state;
+  const onColumnResizeRef = (0, import_react5.useRef)(onColumnResize);
+  onColumnResizeRef.current = onColumnResize;
+  (0, import_react5.useEffect)(() => {
+    if (!resizingColId) return;
+    if (typeof document !== "undefined") {
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    }
+    let rafId = null;
+    let pendingWidth = resizeStartWidth;
+    let hasDragged = false;
+    const handleMouseMove = (e) => {
+      const delta = e.clientX - resizeStartX;
+      if (Math.abs(delta) > 2) {
+        hasDragged = true;
+      }
+      pendingWidth = Math.max(30, resizeStartWidth + delta);
+      if (rafId === null) {
+        rafId = requestAnimationFrame(() => {
+          rafId = null;
+          stateRef.current.setColumnWidth(resizingColId, pendingWidth);
+        });
+      }
+    };
+    const handleMouseUp = () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      if (hasDragged) {
+        stateRef.current.setColumnWidth(resizingColId, pendingWidth);
+        onColumnResizeRef.current?.(resizingColId, pendingWidth);
+      }
+      setResizingColId(null);
+      if (typeof document !== "undefined") {
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      }
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+      if (typeof document !== "undefined") {
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      }
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [resizingColId, resizeStartX, resizeStartWidth]);
+  const measureElementContentWidth = (0, import_react5.useCallback)((el, container) => {
+    if (typeof document === "undefined") return 0;
+    let maxW = el.scrollWidth || 0;
+    const firstChild = el.firstElementChild;
+    if (firstChild && firstChild.scrollWidth > maxW) {
+      maxW = firstChild.scrollWidth;
+    }
+    const truncated = el.querySelectorAll(".truncate, [title], span, div");
+    truncated.forEach((node) => {
+      if (node.scrollWidth > maxW) {
+        maxW = node.scrollWidth;
+      }
+    });
+    try {
+      const clone = firstChild ? firstChild.cloneNode(true) : el.cloneNode(true);
+      clone.style.cssText = `
+        position: absolute !important;
+        visibility: hidden !important;
+        width: max-content !important;
+        min-width: max-content !important;
+        max-width: none !important;
+        overflow: visible !important;
+        white-space: nowrap !important;
+        pointer-events: none !important;
+        top: -9999px !important;
+        left: -9999px !important;
+      `;
+      const allNodes = clone.querySelectorAll("*");
+      allNodes.forEach((node) => {
+        node.style.maxWidth = "none";
+        node.style.overflow = "visible";
+        node.style.textOverflow = "clip";
+        node.style.whiteSpace = "nowrap";
+        if (node.classList.contains("truncate") || node.classList.contains("min-w-0") || node.classList.contains("w-full") || node.classList.contains("max-w-0") || node.classList.contains("flex-1")) {
+          node.style.width = "max-content";
+          node.style.minWidth = "max-content";
+        }
+      });
+      container.appendChild(clone);
+      const rect = clone.getBoundingClientRect();
+      container.removeChild(clone);
+      if (rect.width > maxW) {
+        maxW = rect.width;
+      }
+    } catch {
+    }
+    return maxW;
+  }, []);
+  const autoFitColumn = (0, import_react5.useCallback)((colId, colIndex) => {
+    const col = state.document.columns.find((c) => c.id === colId);
+    if (!col) return;
+    let calculatedWidth = 0;
+    if (gridRef.current && typeof document !== "undefined") {
+      const table = gridRef.current.querySelector("table");
+      if (table) {
+        const th = table.querySelector(`thead th[data-col="${colIndex}"]`);
+        if (th) {
+          const headerInner = th.firstElementChild || th;
+          const headerW = measureElementContentWidth(headerInner, gridRef.current);
+          calculatedWidth = Math.max(calculatedWidth, headerW + 28);
+        }
+        const rows = table.querySelectorAll("tbody tr");
+        const sampleLimit = Math.min(rows.length, 150);
+        for (let r = 0; r < sampleLimit; r++) {
+          const tr = rows[r];
+          const td = tr.querySelector(`td[data-col="${colIndex}"][colspan="1"]`);
+          if (td) {
+            const cellW = measureElementContentWidth(td, gridRef.current);
+            calculatedWidth = Math.max(calculatedWidth, cellW + 20);
+          }
+        }
+      }
+    }
+    if (calculatedWidth > 0) {
+      const finalWidth = Math.min(600, Math.max(50, Math.ceil(calculatedWidth)));
+      state.setColumnWidth(colId, finalWidth);
+    } else {
+      state.autoFitColumnWidth?.(colId);
+    }
+    const updatedCol = state.document.columns.find((c) => c.id === colId);
+    if (updatedCol && onColumnResize) {
+      onColumnResize(updatedCol.id, updatedCol.width || 130);
+    }
+  }, [state, measureElementContentWidth, onColumnResize]);
+  const handleResizeDblClick = (0, import_react5.useCallback)((colId, colIndex, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    autoFitColumn(colId, colIndex);
+  }, [autoFitColumn]);
+  const handleHeaderDblClick = (0, import_react5.useCallback)((colId, colIndex, e) => {
+    const target = e.currentTarget;
+    if (target) {
+      const rect = target.getBoundingClientRect();
+      if (rect.right - e.clientX <= 12) {
+        e.preventDefault();
+        e.stopPropagation();
+        autoFitColumn(colId, colIndex);
+      }
+    }
+  }, [autoFitColumn]);
+  const isCellSelected = (rIdx, cIdx) => {
+    if (!state.selectedRange) return false;
+    const minR = Math.min(state.selectedRange.startRow, state.selectedRange.endRow);
+    const maxR = Math.max(state.selectedRange.startRow, state.selectedRange.endRow);
+    const minC = Math.min(state.selectedRange.startCol, state.selectedRange.endCol);
+    const maxC = Math.max(state.selectedRange.startCol, state.selectedRange.endCol);
+    return rIdx >= minR && rIdx <= maxR && cIdx >= minC && cIdx <= maxC;
+  };
+  const isActiveCell = (rIdx, cIdx) => {
+    return state.activeCell?.row === rIdx && state.activeCell?.col === cIdx;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      ref: gridRef,
+      className: "flex flex-col h-full w-full overflow-hidden border border-border bg-background select-none outline-none text-foreground font-sans text-xs",
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      role: "grid",
+      "aria-label": "Spreadsheet",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 text-xs font-mono", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex h-6 min-w-[3rem] items-center justify-center rounded border border-border bg-background px-1.5 font-semibold text-foreground", children: coordLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center text-muted-foreground select-none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "italic font-serif font-bold text-sm text-primary", children: "fx" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            {
+              ref: formulaBarRef,
+              type: "text",
+              className: "flex-1 bg-transparent px-2 py-0.5 outline-none font-sans text-xs text-foreground placeholder:text-muted-foreground/60 focus:bg-background focus:ring-1 focus:ring-primary rounded",
+              placeholder: "Enter a value or formula (e.g. =SUM(A1:A5))",
+              "aria-label": "Formula bar",
+              readOnly: formulaBarReadOnly,
+              value: state.editingCell ? state.draftValue : formulaDraft ?? activeRawValue,
+              onFocus: () => {
+                if (!state.editingCell) setFormulaDraft(activeRawValue);
+              },
+              onChange: (e) => {
+                if (state.editingCell) {
+                  state.setDraftValue(e.target.value);
+                } else if (state.activeCell) {
+                  setFormulaDraft(e.target.value);
+                }
+              },
+              onBlur: () => commitFormulaBar(),
+              onKeyDown: (e) => {
+                e.stopPropagation();
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  commitFormulaBar();
+                } else if (e.key === "Escape") {
+                  e.preventDefault();
+                  setFormulaDraft(null);
+                  if (state.editingCell) state.cancelEditing();
+                }
+              }
+            }
+          ),
+          !formulaBarReadOnly && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            FormulaHints,
+            {
+              inputRef: formulaBarRef,
+              value: state.editingCell ? state.draftValue : formulaDraft ?? activeRawValue,
+              onAccept: (next) => state.editingCell ? state.setDraftValue(next) : setFormulaDraft(next)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "relative flex-1 overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("table", { className: "border-collapse table-fixed w-max min-w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: "h-7 bg-muted/60 sticky top-0 z-20 border-b border-border shadow-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { className: "w-12 min-w-[3rem] sticky left-0 z-30 bg-muted/90 border-r border-border text-center text-[10px] text-muted-foreground font-medium", children: "#" }),
+            view.columns.map(({ column: col, index: cIdx, frozen, stickyLeft }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "th",
+              {
+                "data-col": cIdx,
+                className: `relative border-r border-border px-2 text-left font-medium text-muted-foreground hover:bg-muted/90 transition-colors group overflow-hidden max-w-0 ${onColumnHeaderClick ? "cursor-pointer" : "cursor-default"}`,
+                style: {
+                  width: col.width || 130,
+                  minWidth: col.width || 130,
+                  maxWidth: col.width || 130,
+                  overflow: "hidden",
+                  ...frozen ? { position: "sticky", left: ROW_HEADER_WIDTH + stickyLeft, zIndex: 25, background: "var(--muted, #f4f4f5)" } : {}
+                },
+                onClick: () => onColumnHeaderClick?.(col),
+                onDoubleClick: (e) => handleHeaderDblClick(col.id, cIdx, e),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between gap-1 min-w-0 overflow-hidden truncate", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate font-semibold text-foreground text-xs min-w-0", children: col.title }),
+                    filteredColIds.has(col.id) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[10px] text-primary shrink-0", title: "Filtered", "data-filtered": "true", children: "\u23F7" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-[10px] text-muted-foreground/70 font-mono font-normal shrink-0", children: [
+                      "(",
+                      col.key,
+                      ")"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "div",
+                    {
+                      className: "col-resize-handle",
+                      style: { position: "absolute", top: 0, bottom: 0, width: 12, right: -6, cursor: "col-resize", zIndex: 20, display: "flex", justifyContent: "center", touchAction: "none" },
+                      onMouseEnter: () => setHoveredColId(col.id),
+                      onMouseLeave: () => setHoveredColId((cur) => cur === col.id ? null : cur),
+                      onMouseDown: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setResizingColId(col.id);
+                        setResizeStartX(e.clientX);
+                        setResizeStartWidth(col.width || 130);
+                      },
+                      onDoubleClick: (e) => handleResizeDblClick(col.id, cIdx, e),
+                      role: "separator",
+                      "aria-orientation": "vertical",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "div",
+                        {
+                          className: "col-resize-handle-line",
+                          style: {
+                            width: 2,
+                            height: "100%",
+                            pointerEvents: "none",
+                            transition: "background-color 150ms ease",
+                            backgroundColor: resizingColId === col.id ? "var(--primary, #6366f1)" : hoveredColId === col.id ? "color-mix(in srgb, var(--primary, #6366f1) 75%, transparent)" : "transparent"
+                          }
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              col.id
+            )),
+            onAddColumnClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "th",
+              {
+                className: "w-10 min-w-[2.5rem] px-1 text-center bg-muted/40 hover:bg-muted cursor-pointer transition-colors",
+                onClick: onAddColumnClick,
+                title: "Add Column",
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-xs font-bold text-muted-foreground", children: "+" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { children: view.rows.map((viewRow) => {
+            if (viewRow.kind === "group") {
+              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                SpreadsheetGroupRow,
+                {
+                  group: viewRow.group,
+                  columns: view.columns,
+                  groupColId: state.document.table?.grouping?.colId ?? "",
+                  onToggle: state.toggleGroupCollapsed,
+                  trailingCell: !!onAddColumnClick
+                },
+                `group:${viewRow.group.key}`
+              );
+            }
+            const displayRowIndex = viewRow.index;
+            const selection = state.selectedRange ? (0, import_spreadsheet4.normalizeRange)(state.selectedRange) : null;
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "tr",
+              {
+                "data-row": displayRowIndex,
+                className: `border-b border-border hover:bg-muted/10 transition-colors ${viewRow.section !== "body" ? "bg-muted/30 font-semibold" : ""}`,
+                style: { height: viewRow.row.height || 32 },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "td",
+                    {
+                      className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted/50 border-r border-border text-center text-[10px] text-muted-foreground font-mono select-none",
+                      style: viewRow.frozen ? { top: COLUMN_HEADER_HEIGHT + viewRow.stickyTop, zIndex: 15 } : void 0,
+                      children: displayRowIndex + 1
+                    }
+                  ),
+                  view.columns.map((viewCol) => {
+                    const span = view.getCellSpan(displayRowIndex, viewCol.index);
+                    if (!span) return null;
+                    const rIdx = span.source.row;
+                    const cIdx = span.source.col;
+                    const row = state.document.rows[rIdx];
+                    const col = state.document.columns[cIdx];
+                    const cell = state.getCell(row.id, col.id);
+                    const selected = isCellSelected(rIdx, cIdx);
+                    const active = isActiveCell(rIdx, cIdx);
+                    const isEditing = state.editingCell?.row === rIdx && state.editingCell?.col === cIdx;
+                    const inFillPreview = !!fillTarget && !selected && (0, import_spreadsheet4.rangeContains)(fillTarget, displayRowIndex, viewCol.index);
+                    const showFillHandle = !readOnly && !isEditing && !!selection && (span.merge ? (0, import_spreadsheet4.rangeContains)(span.merge, selection.endRow, selection.endCol) : selection.endRow === rIdx && selection.endCol === cIdx);
+                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                      "td",
+                      {
+                        "data-row": rIdx,
+                        "data-col": cIdx,
+                        rowSpan: span.rowSpan,
+                        colSpan: span.colSpan,
+                        className: `relative border-r border-border px-2 py-1 truncate max-w-0 text-foreground transition-colors ${selected ? "bg-primary/10" : ""} ${active ? "ring-2 ring-primary ring-inset z-10" : ""} ${viewCol.header ? "font-semibold" : ""}`,
+                        style: {
+                          maxWidth: 0,
+                          overflow: "hidden",
+                          ...frozenCellStyle(viewRow, viewCol),
+                          ...inFillPreview ? { outline: "1px dashed var(--primary, #6366f1)", outlineOffset: -1 } : {}
+                        },
+                        onClick: (e) => handleCellClick(rIdx, cIdx, e),
+                        onDoubleClick: () => handleCellDblClick(rIdx, cIdx),
+                        onContextMenu: (e) => handleCellContextMenu(rIdx, cIdx, e),
+                        onMouseOver: () => extendFill(displayRowIndex, viewCol.index),
+                        children: [
+                          isEditing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                              "input",
+                              {
+                                ref: cellInputRef,
+                                type: "text",
+                                className: "absolute inset-0 w-full h-full px-2 py-1 bg-background text-foreground outline-none font-sans text-xs border-2 border-primary z-20",
+                                value: state.draftValue,
+                                onChange: (e) => state.setDraftValue(e.target.value),
+                                onBlur: () => state.commitEditing(),
+                                autoFocus: true
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormulaHints, { inputRef: cellInputRef, value: state.draftValue, onAccept: state.setDraftValue })
+                          ] }) : customCellRenderer ? customCellRenderer({ row, col, cell }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            "span",
+                            {
+                              className: `truncate block max-w-full ${cell.error ? "text-destructive font-semibold" : ""}`,
+                              title: cell.error ? cell.errorMessage ?? cell.error : void 0,
+                              children: cell.error || (cell.value ?? "")
+                            }
+                          ),
+                          showFillHandle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            "div",
+                            {
+                              className: "spreadsheet-fill-handle",
+                              "aria-label": "Fill handle",
+                              onMouseDown: startFill,
+                              onClick: (e) => e.stopPropagation(),
+                              style: { position: "absolute", right: 0, bottom: 0, width: 7, height: 7, background: "var(--primary, #6366f1)", cursor: "crosshair", zIndex: 25 }
+                            }
+                          )
+                        ]
+                      },
+                      viewCol.column.id
+                    );
+                  }),
+                  onAddColumnClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
+                ]
+              },
+              viewRow.row.id
+            );
+          }) })
+        ] }) }),
+        menu && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          SpreadsheetContextMenu,
+          {
+            items: menu.items,
+            x: menu.x,
+            y: menu.y,
+            onClose: () => {
+              setMenu(null);
+              gridRef.current?.focus();
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
+        .col-resize-handle:hover .col-resize-handle-line {
+          background-color: var(--primary, #6366f1);
+          opacity: 0.75;
+        }
+        .col-resize-handle.active .col-resize-handle-line {
+          background-color: var(--primary, #6366f1);
+          opacity: 1;
+        }
+        table.table-fixed th {
+          overflow: hidden;
+        }
+        table.table-fixed td {
+          max-width: 0;
+          overflow: hidden;
+        }
+      ` })
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormulaHints,
+  SpreadsheetContextMenu,
+  SpreadsheetEditor,
+  SpreadsheetGroupRow,
+  useFillHandle,
+  useSpreadsheetClipboard,
+  useSpreadsheetEditor
+});
+//# sourceMappingURL=index.cjs.map