@ricsam/react-spreadsheets 0.0.0 → 0.0.1

package/dist/cjs/lib.cjs

@@ -0,0 +1,4045 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  if (mod && typeof mod === "object" || typeof mod === "function") {
+    for (let key of __getOwnPropNames(mod))
+      if (!__hasOwnProp.call(to, key))
+        __defProp(to, key, {
+          get: __accessProp.bind(mod, key),
+          enumerable: true
+        });
+  }
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __toCommonJS = (from) => {
+  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (var key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(entry, key))
+        __defProp(entry, key, {
+          get: __accessProp.bind(from, key),
+          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+        });
+  }
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __moduleCache;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+
+// src/lib.ts
+var exports_lib = {};
+__export(exports_lib, {
+  CONTROLLED_ZOOM_FACTOR: () => CONTROLLED_ZOOM_FACTOR,
+  ClipboardUtils: () => ClipboardUtils,
+  DEFAULT_CELL_HEIGHT: () => DEFAULT_CELL_HEIGHT,
+  DEFAULT_CELL_WIDTH: () => DEFAULT_CELL_WIDTH,
+  DEFAULT_ZOOM: () => DEFAULT_ZOOM,
+  FormulaSheet: () => FormulaSheet,
+  FormulaWorkbook: () => FormulaWorkbook,
+  HEADER_HEIGHT: () => HEADER_HEIGHT,
+  HEADER_WIDTH: () => HEADER_WIDTH,
+  MAX_ZOOM: () => MAX_ZOOM,
+  MIN_ZOOM: () => MIN_ZOOM,
+  Spreadsheet: () => Spreadsheet,
+  ViewportStream: () => ViewportStream,
+  WorkbookClipboardManager: () => WorkbookClipboardManager,
+  WorkbookSelectionManager: () => WorkbookSelectionManager,
+  ZOOM_FACTOR: () => ZOOM_FACTOR,
+  cn: () => cn,
+  coerceCellInput: () => coerceCellInput,
+  columnToIndex: () => columnToIndex,
+  extractColumn: () => extractColumn,
+  extractColumnByHeader: () => extractColumnByHeader,
+  findCell: () => findCell,
+  getCellDisplayText: () => getCellDisplayText,
+  getCellDisplayValue: () => getCellDisplayValue,
+  getCellReference: () => getCellReference,
+  getCellSnapAnchorFromRect: () => getCellSnapAnchorFromRect,
+  getColumnEdgePosition: () => getColumnEdgePosition,
+  getNearestColumnEdgeIndex: () => getNearestColumnEdgeIndex,
+  getNearestRowEdgeIndex: () => getNearestRowEdgeIndex,
+  getRectFromCellSnapAnchor: () => getRectFromCellSnapAnchor,
+  getRowEdgePosition: () => getRowEdgePosition,
+  getRowNumber: () => getRowNumber,
+  hasAnyBorderSide: () => hasAnyBorderSide,
+  indexToColumn: () => indexToColumn,
+  letterToRow: () => letterToRow,
+  moveCellSnapAnchorToNearestOrigin: () => moveCellSnapAnchorToNearestOrigin,
+  normalizeBorderSides: () => normalizeBorderSides,
+  normalizeCellSnapAnchor: () => normalizeCellSnapAnchor,
+  onCellEditError: () => onCellEditError,
+  parseCellReference: () => parseCellReference,
+  queueCellEditError: () => queueCellEditError,
+  resizeCellSnapAnchorToNearestEdges: () => resizeCellSnapAnchorToNearestEdges,
+  rowToLetter: () => rowToLetter,
+  useClickAway: () => useClickAway,
+  useColorScheme: () => useColorScheme,
+  useResizeObserver: () => useResizeObserver
+});
+module.exports = __toCommonJS(exports_lib);
+
+// src/spreadsheet/spreadsheet.tsx
+var import_selection_manager = require("@ricsam/selection-manager");
+var import_react4 = __toESM(require("react"));
+
+// src/utils/use-resize-observer.ts
+var import_react = require("react");
+function useResizeObserver() {
+  const [size, setSize] = import_react.useState({
+    width: 0,
+    height: 0
+  });
+  const observerRef = import_react.useRef(null);
+  const ref = import_react.useCallback((element) => {
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+    if (!element)
+      return;
+    const rect = element.getBoundingClientRect();
+    setSize((previous) => previous.width === rect.width && previous.height === rect.height ? previous : { width: rect.width, height: rect.height });
+    if (typeof ResizeObserver === "undefined")
+      return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry)
+        return;
+      const { width, height } = entry.contentRect;
+      setSize((previous) => previous.width === width && previous.height === height ? previous : { width, height });
+    });
+    observer.observe(element);
+    observerRef.current = observer;
+  }, []);
+  return [size, ref];
+}
+
+// src/utils/use-color-scheme.ts
+var import_react2 = require("react");
+function useColorScheme(element) {
+  const [scheme, setScheme] = import_react2.useState("light");
+  import_react2.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia)
+      return;
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    const resolve = () => {
+      if (element && typeof getComputedStyle === "function") {
+        const declared = getComputedStyle(element).colorScheme;
+        if (declared === "dark")
+          return "dark";
+        if (declared === "light")
+          return "light";
+      }
+      return query.matches ? "dark" : "light";
+    };
+    setScheme(resolve());
+    const onChange = () => setScheme(resolve());
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, [element]);
+  return scheme;
+}
+
+// src/utils/cn.ts
+function cn(...values) {
+  const out = [];
+  const walk = (value) => {
+    if (!value && value !== 0)
+      return;
+    if (typeof value === "string" || typeof value === "number") {
+      out.push(String(value));
+      return;
+    }
+    if (Array.isArray(value)) {
+      value.forEach(walk);
+      return;
+    }
+    if (typeof value === "object") {
+      for (const [key, enabled] of Object.entries(value)) {
+        if (enabled)
+          out.push(key);
+      }
+    }
+  };
+  values.forEach(walk);
+  return out.join(" ");
+}
+
+// src/spreadsheet/constants.ts
+var DEFAULT_CELL_WIDTH = 100;
+var DEFAULT_CELL_HEIGHT = 30;
+var HEADER_WIDTH = 50;
+var HEADER_HEIGHT = 30;
+
+// src/spreadsheet/utils.ts
+var columnToIndex = (col) => {
+  let result = 0;
+  for (let i = 0;i < col.length; i++) {
+    result = result * 26 + (col.charCodeAt(i) - 64);
+  }
+  return result - 1;
+};
+var indexToColumn = (index) => {
+  let result = "";
+  let num = index + 1;
+  while (num > 0) {
+    const remainder = (num - 1) % 26;
+    result = String.fromCharCode(65 + remainder) + result;
+    num = Math.floor((num - 1) / 26);
+  }
+  return result;
+};
+function getRowNumber(index) {
+  return index + 1;
+}
+function getCellReference({ rowIndex, colIndex }) {
+  return `${indexToColumn(colIndex)}${getRowNumber(rowIndex)}`;
+}
+function rowToLetter(row) {
+  let result = "";
+  let num = row - 1;
+  do {
+    result = String.fromCharCode(65 + num % 26) + result;
+    num = Math.floor(num / 26) - 1;
+  } while (num >= 0);
+  return result;
+}
+function letterToRow(letter) {
+  let result = 0;
+  for (let i = 0;i < letter.length; i++) {
+    result = result * 26 + (letter.charCodeAt(i) - 64);
+  }
+  return result;
+}
+var parseCellReference = (cellReference) => {
+  const match = cellReference.match(/^([A-Z]+)(\d+)$/);
+  const column = match?.[1];
+  const rowText = match?.[2];
+  if (!column || !rowText) {
+    throw new Error(`Invalid cell reference: ${cellReference}`);
+  }
+  const row = parseInt(rowText, 10);
+  const columnIndex = columnToIndex(column);
+  const rowIndex = row - 1;
+  return {
+    column,
+    row,
+    columnIndex,
+    rowIndex
+  };
+};
+function findCell(map, search) {
+  for (const [key, cell] of map) {
+    if (cell === search) {
+      const parsed = parseCellReference(key);
+      if (!parsed) {
+        return;
+      }
+      return {
+        cellReference: cell,
+        ...parsed
+      };
+    }
+  }
+}
+function extractColumnByHeader(map, header) {
+  for (const [cell, value] of map) {
+    if (value === header) {
+      const parsed = parseCellReference(cell);
+      if (!parsed) {
+        return [];
+      }
+      return extractColumn(map, parsed.columnIndex, parsed.rowIndex + 1);
+    }
+  }
+  return [];
+}
+function extractColumn(map, colIndex, rowIndex = 0, handleEmpty) {
+  const rows = [];
+  for (const [cell, value] of map) {
+    const parsed = parseCellReference(cell);
+    if (!parsed)
+      continue;
+    if (parsed.columnIndex === colIndex && parsed.rowIndex >= rowIndex) {
+      rows.push([parsed.rowIndex, value]);
+    }
+  }
+  rows.sort((a, b) => a[0] - b[0]);
+  if (!handleEmpty) {
+    return rows.map(([, value]) => value);
+  }
+  if (rows.length === 0) {
+    return [];
+  }
+  const result = [];
+  const lastRow = rows[rows.length - 1];
+  if (!lastRow) {
+    return [];
+  }
+  const maxRowIndex = lastRow[0];
+  const rowMap = new Map(rows);
+  for (let currentRow = rowIndex;currentRow <= maxRowIndex; currentRow++) {
+    if (rowMap.has(currentRow)) {
+      result.push(rowMap.get(currentRow));
+    } else {
+      result.push(handleEmpty(currentRow));
+    }
+  }
+  return result;
+}
+
+// src/clipboard/clipboard-manager.ts
+class ClipboardUtils {
+  extractCellsFromSelection(selectionManager, cellData) {
+    const state = selectionManager.getState();
+    const selection = state.selections[state.selections.length - 1];
+    if (!selection)
+      return;
+    const finiteEndRow = selection.end.row.type === "number" ? selection.end.row.value : undefined;
+    const finiteEndCol = selection.end.col.type === "number" ? selection.end.col.value : undefined;
+    const startRow = Math.min(selection.start.row, finiteEndRow ?? selection.start.row);
+    const startCol = Math.min(selection.start.col, finiteEndCol ?? selection.start.col);
+    let endRow = startRow;
+    let endCol = startCol;
+    const cells = [];
+    cellData.forEach((value, key) => {
+      let parsed;
+      try {
+        parsed = parseCellReference(key);
+      } catch {
+        return;
+      }
+      const { rowIndex, columnIndex } = parsed;
+      if (rowIndex < startRow || columnIndex < startCol)
+        return;
+      if (finiteEndRow !== undefined && rowIndex > finiteEndRow)
+        return;
+      if (finiteEndCol !== undefined && columnIndex > finiteEndCol)
+        return;
+      endRow = Math.max(endRow, rowIndex);
+      endCol = Math.max(endCol, columnIndex);
+      cells.push({
+        relative: {
+          rowIndex: rowIndex - startRow,
+          columnIndex: columnIndex - startCol
+        },
+        absolute: { rowIndex, columnIndex },
+        value,
+        key
+      });
+    });
+    if (finiteEndRow !== undefined)
+      endRow = finiteEndRow;
+    if (finiteEndCol !== undefined)
+      endCol = finiteEndCol;
+    return {
+      width: endCol - startCol + 1,
+      height: endRow - startRow + 1,
+      cells
+    };
+  }
+  createExportGrid(width, height) {
+    return Array.from({ length: Math.max(0, height) }, () => Array.from({ length: Math.max(0, width) }).fill(""));
+  }
+  getTsvString(grid) {
+    return grid.map((row) => row.map((cell) => cell === undefined ? "" : String(cell)).join("\t")).join(`
+`);
+  }
+  writeToOsClipboard(grid) {
+    const text = this.getTsvString(grid);
+    if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+      navigator.clipboard.writeText(text).catch(() => {});
+    }
+    return text;
+  }
+}
+
+// src/grid/frame.tsx
+var import_react3 = require("react");
+
+// src/grid/icons.tsx
+var jsx_runtime = require("react/jsx-runtime");
+var iconBase = (size) => ({
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "currentColor",
+  "aria-hidden": true,
+  focusable: false
+});
+function DeleteIcon({ size = 16, ...props }) {
+  return /* @__PURE__ */ jsx_runtime.jsx("svg", {
+    ...iconBase(size),
+    ...props,
+    children: /* @__PURE__ */ jsx_runtime.jsx("path", {
+      d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+    })
+  });
+}
+function GridOnIcon({ size = 16, ...props }) {
+  return /* @__PURE__ */ jsx_runtime.jsx("svg", {
+    ...iconBase(size),
+    ...props,
+    children: /* @__PURE__ */ jsx_runtime.jsx("path", {
+      d: "M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z"
+    })
+  });
+}
+function GridOffIcon({ size = 16, ...props }) {
+  return /* @__PURE__ */ jsx_runtime.jsx("svg", {
+    ...iconBase(size),
+    ...props,
+    children: /* @__PURE__ */ jsx_runtime.jsx("path", {
+      d: "M8 4v1.45l2 2V4h4v4h-3.45l2 2H14v1.45l2 2V10h4v4h-3.45l2 2H20v1.45l1.71 1.71c.18-.28.29-.6.29-.96V4c0-1.1-.9-2-2-2H4.55L6.55 4H8zm12 0v4h-4V4h4zM1.27 1.27L0 2.55l2 2V20c0 1.1.9 2 2 2h15.46l2 2 1.27-1.27L1.27 1.27zM10 12.55L11.45 14H10v-1.45zm-6-6L5.45 8H4V6.55zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm6 6h-4v-4h4v4zm2 0v-1.45L17.45 20H16z"
+    })
+  });
+}
+
+// src/grid/frame.tsx
+var jsx_runtime2 = require("react/jsx-runtime");
+function Frame({
+  child,
+  isSelected,
+  zoom,
+  viewport$,
+  onMove,
+  onResize,
+  onSnapToCellsToggle,
+  onReset,
+  onMinimize,
+  onMaximize,
+  onClose,
+  onInteractionEnd
+}) {
+  const [isDragging, setIsDragging] = import_react3.useState(false);
+  const [isResizing, setIsResizing] = import_react3.useState(null);
+  const [isHoveringHandle, setIsHoveringHandle] = import_react3.useState(null);
+  const [isHoveringFrame, setIsHoveringFrame] = import_react3.useState(false);
+  const titleBarRef = import_react3.useRef(null);
+  const onMoveRef = import_react3.useRef(onMove);
+  const onResizeRef = import_react3.useRef(onResize);
+  const onInteractionEndRef = import_react3.useRef(onInteractionEnd);
+  const dragStartRef = import_react3.useRef({
+    x: 0,
+    y: 0,
+    viewportX: 0,
+    viewportY: 0,
+    viewportZoom: 1,
+    interactionScale: 1
+  });
+  const resizeStartRef = import_react3.useRef({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    viewportX: 0,
+    viewportY: 0,
+    viewportZoom: 1,
+    interactionScale: 1
+  });
+  import_react3.useEffect(() => {
+    onMoveRef.current = onMove;
+    onResizeRef.current = onResize;
+    onInteractionEndRef.current = onInteractionEnd;
+  }, [onMove, onResize, onInteractionEnd]);
+  const getInteractionScale = import_react3.useCallback(() => {
+    const renderedWidth = titleBarRef.current?.getBoundingClientRect().width;
+    if (!renderedWidth || !Number.isFinite(renderedWidth) || child.width <= 0) {
+      return zoom;
+    }
+    return renderedWidth / child.width;
+  }, [child.width, zoom]);
+  const handleMouseDown = import_react3.useCallback((e) => {
+    if (!isSelected)
+      return;
+    const viewport = viewport$.currentViewport;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    dragStartRef.current = {
+      x: e.clientX,
+      y: e.clientY,
+      viewportX: viewport.x,
+      viewportY: viewport.y,
+      viewportZoom: viewport.zoom,
+      interactionScale: getInteractionScale()
+    };
+  }, [getInteractionScale, isSelected, viewport$]);
+  const handleResizeMouseDown = import_react3.useCallback((e, handle) => {
+    if (!isSelected)
+      return;
+    const viewport = viewport$.currentViewport;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(handle);
+    resizeStartRef.current = {
+      x: e.clientX,
+      y: e.clientY,
+      width: child.width,
+      height: child.height,
+      viewportX: viewport.x,
+      viewportY: viewport.y,
+      viewportZoom: viewport.zoom,
+      interactionScale: getInteractionScale()
+    };
+  }, [getInteractionScale, isSelected, child.width, child.height, viewport$]);
+  import_react3.useEffect(() => {
+    if (!isDragging && !isResizing)
+      return;
+    const handleMouseMove = (e) => {
+      const viewport = viewport$.currentViewport;
+      if (isDragging) {
+        const mouseDeltaX = (e.clientX - dragStartRef.current.x) / dragStartRef.current.interactionScale;
+        const mouseDeltaY = (e.clientY - dragStartRef.current.y) / dragStartRef.current.interactionScale;
+        const viewportDeltaX = (viewport.x - dragStartRef.current.viewportX) / viewport.zoom;
+        const viewportDeltaY = (viewport.y - dragStartRef.current.viewportY) / viewport.zoom;
+        const totalDeltaX = mouseDeltaX - viewportDeltaX;
+        const totalDeltaY = mouseDeltaY - viewportDeltaY;
+        onMoveRef.current(totalDeltaX, totalDeltaY);
+        dragStartRef.current = {
+          x: e.clientX,
+          y: e.clientY,
+          viewportX: viewport.x,
+          viewportY: viewport.y,
+          viewportZoom: viewport.zoom,
+          interactionScale: dragStartRef.current.interactionScale
+        };
+      } else if (isResizing) {
+        const mouseDeltaX = (e.clientX - resizeStartRef.current.x) / resizeStartRef.current.interactionScale;
+        const mouseDeltaY = (e.clientY - resizeStartRef.current.y) / resizeStartRef.current.interactionScale;
+        const viewportDeltaX = (viewport.x - resizeStartRef.current.viewportX) / zoom;
+        const viewportDeltaY = (viewport.y - resizeStartRef.current.viewportY) / zoom;
+        const totalDeltaX = mouseDeltaX - viewportDeltaX;
+        const totalDeltaY = mouseDeltaY - viewportDeltaY;
+        let deltaWidth = 0;
+        let deltaHeight = 0;
+        switch (isResizing) {
+          case "right":
+            deltaWidth = totalDeltaX;
+            break;
+          case "left":
+            deltaWidth = -totalDeltaX;
+            break;
+          case "bottom":
+            deltaHeight = totalDeltaY;
+            break;
+          case "top":
+            deltaHeight = -totalDeltaY;
+            break;
+          case "bottom-right":
+            deltaWidth = totalDeltaX;
+            deltaHeight = totalDeltaY;
+            break;
+          case "bottom-left":
+            deltaWidth = -totalDeltaX;
+            deltaHeight = totalDeltaY;
+            break;
+          case "top-right":
+            deltaWidth = totalDeltaX;
+            deltaHeight = -totalDeltaY;
+            break;
+          case "top-left":
+            deltaWidth = -totalDeltaX;
+            deltaHeight = -totalDeltaY;
+            break;
+        }
+        onResizeRef.current(deltaWidth, deltaHeight, e.shiftKey, isResizing);
+        resizeStartRef.current.x = e.clientX;
+        resizeStartRef.current.y = e.clientY;
+        resizeStartRef.current.viewportX = viewport.x;
+        resizeStartRef.current.viewportY = viewport.y;
+        resizeStartRef.current.viewportZoom = viewport.zoom;
+      }
+    };
+    const handleViewportChange = (newViewport) => {
+      if (isDragging) {
+        const zoomChanged = newViewport.zoom !== dragStartRef.current.viewportZoom;
+        if (!zoomChanged) {
+          const viewportDeltaX = (newViewport.x - dragStartRef.current.viewportX) / newViewport.zoom;
+          const viewportDeltaY = (newViewport.y - dragStartRef.current.viewportY) / newViewport.zoom;
+          onMoveRef.current(-viewportDeltaX, -viewportDeltaY);
+        }
+        dragStartRef.current.viewportX = newViewport.x;
+        dragStartRef.current.viewportY = newViewport.y;
+        dragStartRef.current.viewportZoom = newViewport.zoom;
+      } else if (isResizing) {
+        const zoomChanged = newViewport.zoom !== resizeStartRef.current.viewportZoom;
+        if (!zoomChanged) {
+          const viewportDeltaX = (newViewport.x - resizeStartRef.current.viewportX) / newViewport.zoom;
+          const viewportDeltaY = (newViewport.y - resizeStartRef.current.viewportY) / newViewport.zoom;
+          let deltaWidth = 0;
+          let deltaHeight = 0;
+          switch (isResizing) {
+            case "right":
+              deltaWidth = -viewportDeltaX;
+              break;
+            case "left":
+              deltaWidth = viewportDeltaX;
+              break;
+            case "bottom":
+              deltaHeight = -viewportDeltaY;
+              break;
+            case "top":
+              deltaHeight = viewportDeltaY;
+              break;
+            case "bottom-right":
+              deltaWidth = -viewportDeltaX;
+              deltaHeight = -viewportDeltaY;
+              break;
+            case "bottom-left":
+              deltaWidth = viewportDeltaX;
+              deltaHeight = -viewportDeltaY;
+              break;
+            case "top-right":
+              deltaWidth = -viewportDeltaX;
+              deltaHeight = viewportDeltaY;
+              break;
+            case "top-left":
+              deltaWidth = viewportDeltaX;
+              deltaHeight = viewportDeltaY;
+              break;
+          }
+          if (deltaWidth !== 0 || deltaHeight !== 0) {
+            onResizeRef.current(deltaWidth, deltaHeight, false, isResizing);
+          }
+        }
+        resizeStartRef.current.viewportX = newViewport.x;
+        resizeStartRef.current.viewportY = newViewport.y;
+        resizeStartRef.current.viewportZoom = newViewport.zoom;
+      }
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      setIsResizing(null);
+      onInteractionEndRef.current?.();
+    };
+    const unsubscribe = viewport$.subscribe(handleViewportChange);
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      unsubscribe();
+    };
+  }, [isDragging, isResizing, zoom, viewport$]);
+  const isTextBox = child.component === "RichText";
+  const isSnappedToCells = Boolean(child.snapToCells);
+  if (!isSelected && (!child.minimized || isTextBox))
+    return null;
+  const handleSize = 4;
+  const textBoxHandleSize = 8;
+  const textBoxEdgeSize = 8;
+  const titleBarHeight = 32;
+  const getResizeHandleStyle = (handle, baseStyle) => ({
+    ...baseStyle,
+    background: isHoveringHandle === handle || isResizing === handle ? "rgba(102, 126, 234, 1)" : "rgba(102, 126, 234, 0.4)",
+    transition: "all 0.2s ease-in-out",
+    opacity: 1,
+    zIndex: isHoveringHandle === handle || isResizing === handle ? 30 : handle.includes("-") ? 20 : 10
+  });
+  const getTextBoxResizeHandleStyle = (handle, baseStyle) => ({
+    ...baseStyle,
+    position: "absolute",
+    width: textBoxHandleSize,
+    height: textBoxHandleSize,
+    boxSizing: "border-box",
+    border: "1px solid #1a73e8",
+    background: isHoveringHandle === handle || isResizing === handle ? "#e8f0fe" : "#ffffff",
+    borderRadius: 1,
+    pointerEvents: "auto",
+    zIndex: 30
+  });
+  const getTextBoxDragEdgeStyle = (baseStyle) => ({
+    ...baseStyle,
+    position: "absolute",
+    background: "transparent",
+    cursor: isDragging ? "grabbing" : "move",
+    pointerEvents: "auto",
+    zIndex: 20
+  });
+  if (isTextBox) {
+    return /* @__PURE__ */ jsx_runtime2.jsxs("div", {
+      ref: titleBarRef,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        border: "1px solid #1a73e8",
+        boxSizing: "border-box",
+        zIndex: 20
+      },
+      children: [
+        onSnapToCellsToggle && /* @__PURE__ */ jsx_runtime2.jsx("button", {
+          type: "button",
+          title: isSnappedToCells ? "Disable cell snapping" : "Snap to cells",
+          "aria-pressed": isSnappedToCells,
+          onMouseDown: (ev) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+          },
+          onMouseUp: (ev) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+          },
+          onClick: (e) => {
+            console.log("123");
+            e.preventDefault();
+            e.stopPropagation();
+            onSnapToCellsToggle(!isSnappedToCells);
+          },
+          style: {
+            position: "absolute",
+            top: -30,
+            right: 0,
+            width: 26,
+            height: 26,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: 0,
+            border: "1px solid #1a73e8",
+            borderRadius: 4,
+            background: isSnappedToCells ? "#e8f0fe" : "#ffffff",
+            color: "#1a73e8",
+            cursor: "pointer",
+            pointerEvents: "auto",
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)",
+            zIndex: 40
+          },
+          children: isSnappedToCells ? /* @__PURE__ */ jsx_runtime2.jsx(GridOnIcon, {
+            size: 16
+          }) : /* @__PURE__ */ jsx_runtime2.jsx(GridOffIcon, {
+            size: 16
+          })
+        }),
+        child.canClose && /* @__PURE__ */ jsx_runtime2.jsx("button", {
+          type: "button",
+          title: "Delete text box",
+          onMouseDown: (ev) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+          },
+          onMouseUp: (ev) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+          },
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onClose();
+          },
+          style: {
+            position: "absolute",
+            top: -30,
+            right: onSnapToCellsToggle ? 30 : 0,
+            width: 26,
+            height: 26,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: 0,
+            border: "1px solid #d93025",
+            borderRadius: 4,
+            background: "#ffffff",
+            color: "#d93025",
+            cursor: "pointer",
+            pointerEvents: "auto",
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)",
+            zIndex: 40
+          },
+          children: /* @__PURE__ */ jsx_runtime2.jsx(DeleteIcon, {
+            size: 16
+          })
+        }),
+        /* @__PURE__ */ jsx_runtime2.jsx("div", {
+          style: getTextBoxDragEdgeStyle({
+            top: -textBoxEdgeSize / 2,
+            left: textBoxHandleSize,
+            right: textBoxHandleSize,
+            height: textBoxEdgeSize
+          }),
+          onMouseDown: handleMouseDown
+        }),
+        /* @__PURE__ */ jsx_runtime2.jsx("div", {
+          style: getTextBoxDragEdgeStyle({
+            bottom: -textBoxEdgeSize / 2,
+            left: textBoxHandleSize,
+            right: textBoxHandleSize,
+            height: textBoxEdgeSize
+          }),
+          onMouseDown: handleMouseDown
+        }),
+        /* @__PURE__ */ jsx_runtime2.jsx("div", {
+          style: getTextBoxDragEdgeStyle({
+            top: textBoxHandleSize,
+            bottom: textBoxHandleSize,
+            left: -textBoxEdgeSize / 2,
+            width: textBoxEdgeSize
+          }),
+          onMouseDown: handleMouseDown
+        }),
+        /* @__PURE__ */ jsx_runtime2.jsx("div", {
+          style: getTextBoxDragEdgeStyle({
+            top: textBoxHandleSize,
+            bottom: textBoxHandleSize,
+            right: -textBoxEdgeSize / 2,
+            width: textBoxEdgeSize
+          }),
+          onMouseDown: handleMouseDown
+        }),
+        /* @__PURE__ */ jsx_runtime2.jsx("div", {
+          style: getTextBoxResizeHandleStyle("top-left", {
+            top: -textBoxHandleSize / 2,
+            left: -textBoxHandleSize / 2,
+            cursor: "nw-resize"
+          }),
+          onMouseDown: (e) => handleResizeMouseDown(e, "top-left"),
+          onMouseEnter: () => setIsHoveringHandle("top-left"),
+          onMouseLeave: () => setIsHoveringHandle(null)
+        }),
+        /* @__PURE__ */ jsx_runtime2.jsx("div", {
+          style: getTextBoxResizeHandleStyle("top", {
+            top: -textBoxHandleSize / 2,
+            left: "50%",
+            marginLeft: -textBoxHandleSize / 2,
+            cursor: "n-resize"
+          }),
+          onMouseDown: (e) => handleResizeMouseDown(e, "top"),
+          onMouseEnter: () => setIsHoveringHandle("top"),
+          onMouseLeave: () => setIsHoveringHandle(null)
+        }),
+        /* @__PURE__ */ jsx_runtime2.jsx("div", {
+          style: getTextBoxResizeHandleStyle("top-right", {
+            top: -textBoxHandleSize / 2,
+            right: -textBoxHandleSize / 2,
+            cursor: "ne-resize"
+          }),
+          onMouseDown: (e) => handleResizeMouseDown(e, "top-right"),
+          onMouseEnter: () => setIsHoveringHandle("top-right"),
+          onMouseLeave: () => setIsHoveringHandle(null)
+        }),
+        /* @__PURE__ */ jsx_runtime2.jsx("div", {
+          style: getTextBoxResizeHandleStyle("right", {
+            top: "50%",
+            right: -textBoxHandleSize / 2,
+            marginTop: -textBoxHandleSize / 2,
+            cursor: "e-resize"
+          }),
+          onMouseDown: (e) => handleResizeMouseDown(e, "right"),
+          onMouseEnter: () => setIsHoveringHandle("right"),
+          onMouseLeave: () => setIsHoveringHandle(null)
+        }),
+        /* @__PURE__ */ jsx_runtime2.jsx("div", {
+          style: getTextBoxResizeHandleStyle("bottom-right", {
+            bottom: -textBoxHandleSize / 2,
+            right: -textBoxHandleSize / 2,
+            cursor: "se-resize"
+          }),
+          onMouseDown: (e) => handleResizeMouseDown(e, "bottom-right"),
+          onMouseEnter: () => setIsHoveringHandle("bottom-right"),
+          onMouseLeave: () => setIsHoveringHandle(null)
+        }),
+        /* @__PURE__ */ jsx_runtime2.jsx("div", {
+          style: getTextBoxResizeHandleStyle("bottom", {
+            bottom: -textBoxHandleSize / 2,
+            left: "50%",
+            marginLeft: -textBoxHandleSize / 2,
+            cursor: "s-resize"
+          }),
+          onMouseDown: (e) => handleResizeMouseDown(e, "bottom"),
+          onMouseEnter: () => setIsHoveringHandle("bottom"),
+          onMouseLeave: () => setIsHoveringHandle(null)
+        }),
+        /* @__PURE__ */ jsx_runtime2.jsx("div", {
+          style: getTextBoxResizeHandleStyle("bottom-left", {
+            bottom: -textBoxHandleSize / 2,
+            left: -textBoxHandleSize / 2,
+            cursor: "sw-resize"
+          }),
+          onMouseDown: (e) => handleResizeMouseDown(e, "bottom-left"),
+          onMouseEnter: () => setIsHoveringHandle("bottom-left"),
+          onMouseLeave: () => setIsHoveringHandle(null)
+        }),
+        /* @__PURE__ */ jsx_runtime2.jsx("div", {
+          style: getTextBoxResizeHandleStyle("left", {
+            top: "50%",
+            left: -textBoxHandleSize / 2,
+            marginTop: -textBoxHandleSize / 2,
+            cursor: "w-resize"
+          }),
+          onMouseDown: (e) => handleResizeMouseDown(e, "left"),
+          onMouseEnter: () => setIsHoveringHandle("left"),
+          onMouseLeave: () => setIsHoveringHandle(null)
+        })
+      ]
+    });
+  }
+  return /* @__PURE__ */ jsx_runtime2.jsxs(jsx_runtime2.Fragment, {
+    children: [
+      /* @__PURE__ */ jsx_runtime2.jsxs("div", {
+        ref: titleBarRef,
+        style: {
+          position: "absolute",
+          top: -titleBarHeight,
+          left: 0,
+          right: 0,
+          height: titleBarHeight,
+          background: child.minimized && !isSelected ? "linear-gradient(135deg, rgba(107, 114, 128, 0.95) 0%, rgba(75, 85, 99, 0.95) 100%)" : "linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%)",
+          backdropFilter: "blur(12px)",
+          border: "1px solid rgba(255, 255, 255, 0.2)",
+          borderBottom: "1px solid rgba(102, 126, 234, 0.4)",
+          color: "white",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "0 16px",
+          cursor: isDragging ? "grabbing" : "grab",
+          userSelect: "none",
+          fontSize: "13px",
+          fontWeight: 600,
+          letterSpacing: "0.025em",
+          opacity: child.minimized && !isSelected ? 0.9 : 1,
+          transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)"
+        },
+        onMouseDown: handleMouseDown,
+        children: [
+          /* @__PURE__ */ jsx_runtime2.jsx("span", {
+            style: {
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              textShadow: "0 1px 2px rgba(0, 0, 0, 0.3)"
+            },
+            children: child.title
+          }),
+          /* @__PURE__ */ jsx_runtime2.jsxs("div", {
+            style: { display: "flex", gap: "6px", alignItems: "center" },
+            children: [
+              /* @__PURE__ */ jsx_runtime2.jsx("button", {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onMinimize();
+                },
+                style: {
+                  background: "rgba(255, 255, 255, 0.1)",
+                  border: "1px solid rgba(255, 255, 255, 0.2)",
+                  borderRadius: "6px",
+                  color: "white",
+                  cursor: "pointer",
+                  padding: "4px 8px",
+                  fontSize: "12px",
+                  fontWeight: "600",
+                  lineHeight: 1,
+                  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                  backdropFilter: "blur(8px)"
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)";
+                  e.currentTarget.style.transform = "translateY(-1px)";
+                  e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.2)";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.background = "rgba(255, 255, 255, 0.1)";
+                  e.currentTarget.style.transform = "translateY(0)";
+                  e.currentTarget.style.boxShadow = "none";
+                },
+                title: child.minimized ? "Restore" : "Minimize",
+                children: child.minimized ? "□" : "−"
+              }),
+              onMaximize && /* @__PURE__ */ jsx_runtime2.jsx("button", {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onMaximize();
+                },
+                style: {
+                  background: "rgba(255, 255, 255, 0.1)",
+                  border: "1px solid rgba(255, 255, 255, 0.2)",
+                  borderRadius: "6px",
+                  color: "white",
+                  cursor: "pointer",
+                  padding: "4px 8px",
+                  fontSize: "12px",
+                  fontWeight: "600",
+                  lineHeight: 1,
+                  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                  backdropFilter: "blur(8px)"
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)";
+                  e.currentTarget.style.transform = "translateY(-1px)";
+                  e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.2)";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.background = "rgba(255, 255, 255, 0.1)";
+                  e.currentTarget.style.transform = "translateY(0)";
+                  e.currentTarget.style.boxShadow = "none";
+                },
+                title: child.maximized ? "Restore" : "Maximize",
+                children: child.maximized ? "◱" : "⤢"
+              }),
+              /* @__PURE__ */ jsx_runtime2.jsx("button", {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onReset();
+                },
+                style: {
+                  background: "rgba(255, 255, 255, 0.1)",
+                  border: "1px solid rgba(255, 255, 255, 0.2)",
+                  borderRadius: "6px",
+                  color: "white",
+                  cursor: child.initial ? "pointer" : "auto",
+                  padding: "4px 8px",
+                  fontSize: "12px",
+                  fontWeight: "600",
+                  lineHeight: 1,
+                  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                  backdropFilter: "blur(8px)",
+                  opacity: child.initial ? 1 : 0.2
+                },
+                disabled: !child.initial,
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)";
+                  e.currentTarget.style.transform = "translateY(-1px)";
+                  e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.2)";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.background = "rgba(255, 255, 255, 0.1)";
+                  e.currentTarget.style.transform = "translateY(0)";
+                  e.currentTarget.style.boxShadow = "none";
+                },
+                title: "Reset",
+                children: "↻"
+              }),
+              child.canClose && /* @__PURE__ */ jsx_runtime2.jsx("button", {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onClose();
+                },
+                style: {
+                  background: "rgba(255, 255, 255, 0.1)",
+                  border: "1px solid rgba(255, 255, 255, 0.2)",
+                  borderRadius: "6px",
+                  color: "white",
+                  cursor: "pointer",
+                  padding: "4px 8px",
+                  fontSize: "12px",
+                  fontWeight: "600",
+                  lineHeight: 1,
+                  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                  backdropFilter: "blur(8px)"
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)";
+                  e.currentTarget.style.transform = "translateY(-1px)";
+                  e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.2)";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.background = "rgba(255, 255, 255, 0.1)";
+                  e.currentTarget.style.transform = "translateY(0)";
+                  e.currentTarget.style.boxShadow = "none";
+                },
+                title: "Close",
+                children: "×"
+              })
+            ]
+          })
+        ]
+      }),
+      isSelected && !child.minimized && /* @__PURE__ */ jsx_runtime2.jsxs("div", {
+        onMouseEnter: () => !isResizing && !isDragging && setIsHoveringFrame(true),
+        onMouseLeave: () => !isResizing && !isDragging && setIsHoveringFrame(false),
+        children: [
+          /* @__PURE__ */ jsx_runtime2.jsx("div", {
+            style: getResizeHandleStyle("top", {
+              position: "absolute",
+              top: -titleBarHeight - handleSize,
+              left: 0,
+              right: 0,
+              height: handleSize,
+              cursor: "n-resize"
+            }),
+            onMouseDown: (e) => handleResizeMouseDown(e, "top"),
+            onMouseEnter: () => setIsHoveringHandle("top"),
+            onMouseLeave: () => setIsHoveringHandle(null)
+          }),
+          /* @__PURE__ */ jsx_runtime2.jsx("div", {
+            style: getResizeHandleStyle("bottom", {
+              position: "absolute",
+              bottom: -handleSize,
+              left: 0,
+              right: 0,
+              height: handleSize,
+              cursor: "s-resize"
+            }),
+            onMouseDown: (e) => handleResizeMouseDown(e, "bottom"),
+            onMouseEnter: () => setIsHoveringHandle("bottom"),
+            onMouseLeave: () => setIsHoveringHandle(null)
+          }),
+          /* @__PURE__ */ jsx_runtime2.jsx("div", {
+            style: getResizeHandleStyle("left", {
+              position: "absolute",
+              top: -titleBarHeight,
+              left: -handleSize,
+              bottom: 0,
+              width: handleSize,
+              cursor: "w-resize"
+            }),
+            onMouseDown: (e) => handleResizeMouseDown(e, "left"),
+            onMouseEnter: () => setIsHoveringHandle("left"),
+            onMouseLeave: () => setIsHoveringHandle(null)
+          }),
+          /* @__PURE__ */ jsx_runtime2.jsx("div", {
+            style: getResizeHandleStyle("right", {
+              position: "absolute",
+              top: -titleBarHeight,
+              right: -handleSize,
+              bottom: 0,
+              width: handleSize,
+              cursor: "e-resize"
+            }),
+            onMouseDown: (e) => handleResizeMouseDown(e, "right"),
+            onMouseEnter: () => setIsHoveringHandle("right"),
+            onMouseLeave: () => setIsHoveringHandle(null)
+          }),
+          /* @__PURE__ */ jsx_runtime2.jsx("div", {
+            style: getResizeHandleStyle("top-left", {
+              position: "absolute",
+              top: -titleBarHeight - handleSize,
+              left: -handleSize,
+              width: handleSize,
+              height: handleSize,
+              cursor: "nw-resize"
+            }),
+            onMouseDown: (e) => handleResizeMouseDown(e, "top-left"),
+            onMouseEnter: () => setIsHoveringHandle("top-left"),
+            onMouseLeave: () => setIsHoveringHandle(null)
+          }),
+          /* @__PURE__ */ jsx_runtime2.jsx("div", {
+            style: getResizeHandleStyle("top-right", {
+              position: "absolute",
+              top: -titleBarHeight - handleSize,
+              right: -handleSize,
+              width: handleSize,
+              height: handleSize,
+              cursor: "ne-resize"
+            }),
+            onMouseDown: (e) => handleResizeMouseDown(e, "top-right"),
+            onMouseEnter: () => setIsHoveringHandle("top-right"),
+            onMouseLeave: () => setIsHoveringHandle(null)
+          }),
+          /* @__PURE__ */ jsx_runtime2.jsx("div", {
+            style: getResizeHandleStyle("bottom-left", {
+              position: "absolute",
+              bottom: -handleSize,
+              left: -handleSize,
+              width: handleSize,
+              height: handleSize,
+              cursor: "sw-resize"
+            }),
+            onMouseDown: (e) => handleResizeMouseDown(e, "bottom-left"),
+            onMouseEnter: () => setIsHoveringHandle("bottom-left"),
+            onMouseLeave: () => setIsHoveringHandle(null)
+          }),
+          /* @__PURE__ */ jsx_runtime2.jsx("div", {
+            style: getResizeHandleStyle("bottom-right", {
+              position: "absolute",
+              bottom: -handleSize,
+              right: -handleSize,
+              width: handleSize,
+              height: handleSize,
+              cursor: "se-resize"
+            }),
+            onMouseDown: (e) => handleResizeMouseDown(e, "bottom-right"),
+            onMouseEnter: () => setIsHoveringHandle("bottom-right"),
+            onMouseLeave: () => setIsHoveringHandle(null)
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/grid/types.ts
+class ViewportStream {
+  currentViewport;
+  constructor(initialViewport) {
+    this.currentViewport = initialViewport;
+  }
+  subscribers = [];
+  subscribe(callback) {
+    this.subscribers.push(callback);
+    return () => {
+      const index = this.subscribers.indexOf(callback);
+      if (index > -1) {
+        this.subscribers.splice(index, 1);
+      }
+    };
+  }
+  next(nextViewport) {
+    this.currentViewport = nextViewport;
+    this.subscribers.forEach((callback) => callback(nextViewport));
+  }
+}
+
+// src/spreadsheet/snapping.ts
+var normalizeCellSnapAnchor = (anchor) => {
+  const startCol = Math.max(0, Math.floor(anchor.startCol));
+  const startRow = Math.max(0, Math.floor(anchor.startRow));
+  return {
+    startCol,
+    startRow,
+    endCol: Math.max(startCol + 1, Math.floor(anchor.endCol)),
+    endRow: Math.max(startRow + 1, Math.floor(anchor.endRow))
+  };
+};
+var getColumnWidthByIndex = (colIndex, columnWidths) => {
+  const width = columnWidths.get(indexToColumn(colIndex));
+  return typeof width === "number" && Number.isFinite(width) && width > 0 ? width : DEFAULT_CELL_WIDTH;
+};
+var getRowHeightByIndex = (rowIndex, rowHeights) => {
+  const height = rowHeights.get(rowIndex + 1);
+  return typeof height === "number" && Number.isFinite(height) && height > 0 ? height : DEFAULT_CELL_HEIGHT;
+};
+var getColumnEdgePosition = (edgeIndex, columnWidths) => {
+  const safeEdgeIndex = Math.max(0, Math.floor(edgeIndex));
+  let x = 0;
+  for (let colIndex = 0;colIndex < safeEdgeIndex; colIndex++) {
+    x += getColumnWidthByIndex(colIndex, columnWidths);
+  }
+  return x;
+};
+var getRowEdgePosition = (edgeIndex, rowHeights) => {
+  const safeEdgeIndex = Math.max(0, Math.floor(edgeIndex));
+  let y = 0;
+  for (let rowIndex = 0;rowIndex < safeEdgeIndex; rowIndex++) {
+    y += getRowHeightByIndex(rowIndex, rowHeights);
+  }
+  return y;
+};
+var getNearestColumnEdgeIndex = (x, columnWidths) => {
+  const targetX = Math.max(0, x);
+  let edgeIndex = 0;
+  let currentX = 0;
+  while (true) {
+    const nextX = currentX + getColumnWidthByIndex(edgeIndex, columnWidths);
+    if (targetX <= nextX) {
+      return targetX - currentX <= nextX - targetX ? edgeIndex : edgeIndex + 1;
+    }
+    currentX = nextX;
+    edgeIndex++;
+  }
+};
+var getNearestRowEdgeIndex = (y, rowHeights) => {
+  const targetY = Math.max(0, y);
+  let edgeIndex = 0;
+  let currentY = 0;
+  while (true) {
+    const nextY = currentY + getRowHeightByIndex(edgeIndex, rowHeights);
+    if (targetY <= nextY) {
+      return targetY - currentY <= nextY - targetY ? edgeIndex : edgeIndex + 1;
+    }
+    currentY = nextY;
+    edgeIndex++;
+  }
+};
+var getCellSnapAnchorFromRect = (rect, columnWidths, rowHeights) => {
+  const startCol = getNearestColumnEdgeIndex(rect.x, columnWidths);
+  const startRow = getNearestRowEdgeIndex(rect.y, rowHeights);
+  const endCol = getNearestColumnEdgeIndex(rect.x + Math.max(0, rect.width), columnWidths);
+  const endRow = getNearestRowEdgeIndex(rect.y + Math.max(0, rect.height), rowHeights);
+  return normalizeCellSnapAnchor({
+    startCol,
+    startRow,
+    endCol,
+    endRow
+  });
+};
+var getRectFromCellSnapAnchor = (anchor, columnWidths, rowHeights) => {
+  const normalizedAnchor = normalizeCellSnapAnchor(anchor);
+  const x = getColumnEdgePosition(normalizedAnchor.startCol, columnWidths);
+  const y = getRowEdgePosition(normalizedAnchor.startRow, rowHeights);
+  const right = getColumnEdgePosition(normalizedAnchor.endCol, columnWidths);
+  const bottom = getRowEdgePosition(normalizedAnchor.endRow, rowHeights);
+  return {
+    x,
+    y,
+    width: right - x,
+    height: bottom - y
+  };
+};
+var moveCellSnapAnchorToNearestOrigin = (anchor, rect, columnWidths, rowHeights) => {
+  const normalizedAnchor = normalizeCellSnapAnchor(anchor);
+  const colSpan = normalizedAnchor.endCol - normalizedAnchor.startCol;
+  const rowSpan = normalizedAnchor.endRow - normalizedAnchor.startRow;
+  const startCol = getNearestColumnEdgeIndex(rect.x, columnWidths);
+  const startRow = getNearestRowEdgeIndex(rect.y, rowHeights);
+  return {
+    startCol,
+    startRow,
+    endCol: startCol + colSpan,
+    endRow: startRow + rowSpan
+  };
+};
+var handleIncludesLeft = (handle) => handle === "left" || handle === "top-left" || handle === "bottom-left";
+var handleIncludesRight = (handle) => handle === "right" || handle === "top-right" || handle === "bottom-right";
+var handleIncludesTop = (handle) => handle === "top" || handle === "top-left" || handle === "top-right";
+var handleIncludesBottom = (handle) => handle === "bottom" || handle === "bottom-left" || handle === "bottom-right";
+var resizeCellSnapAnchorToNearestEdges = (anchor, rect, handle, columnWidths, rowHeights) => {
+  const nextAnchor = normalizeCellSnapAnchor(anchor);
+  if (handleIncludesLeft(handle)) {
+    nextAnchor.startCol = getNearestColumnEdgeIndex(rect.x, columnWidths);
+  }
+  if (handleIncludesRight(handle)) {
+    nextAnchor.endCol = getNearestColumnEdgeIndex(rect.x + Math.max(0, rect.width), columnWidths);
+  }
+  if (handleIncludesTop(handle)) {
+    nextAnchor.startRow = getNearestRowEdgeIndex(rect.y, rowHeights);
+  }
+  if (handleIncludesBottom(handle)) {
+    nextAnchor.endRow = getNearestRowEdgeIndex(rect.y + Math.max(0, rect.height), rowHeights);
+  }
+  if (nextAnchor.startCol >= nextAnchor.endCol) {
+    if (handleIncludesLeft(handle) && !handleIncludesRight(handle)) {
+      nextAnchor.startCol = Math.max(0, nextAnchor.endCol - 1);
+    } else {
+      nextAnchor.endCol = nextAnchor.startCol + 1;
+    }
+  }
+  if (nextAnchor.startRow >= nextAnchor.endRow) {
+    if (handleIncludesTop(handle) && !handleIncludesBottom(handle)) {
+      nextAnchor.startRow = Math.max(0, nextAnchor.endRow - 1);
+    } else {
+      nextAnchor.endRow = nextAnchor.startRow + 1;
+    }
+  }
+  return nextAnchor;
+};
+
+// src/spreadsheet/spreadsheet.tsx
+var jsx_runtime3 = require("react/jsx-runtime");
+var resolveGridLineColor = (element, colorScheme) => {
+  const fallback = colorScheme === "dark" ? "#4b5563" : "#e1e5e9";
+  if (!element || typeof getComputedStyle !== "function") {
+    return fallback;
+  }
+  const declared = getComputedStyle(element).getPropertyValue("--rsp-gridline").trim();
+  if (!declared || declared.includes("light-dark(")) {
+    return fallback;
+  }
+  return declared;
+};
+var hasBorderStyle = (style) => Boolean(style?.borderColor || style?.borderTopColor || style?.borderRightColor || style?.borderBottomColor || style?.borderLeftColor);
+var CellComponent = import_react4.default.memo(({
+  value,
+  row,
+  col,
+  selectionManager,
+  cellToPixelBase,
+  getColumnWidth,
+  getRowHeight,
+  customCellStyle,
+  customCellRenderer,
+  inputValue,
+  editInputVersion,
+  width,
+  height
+}) => {
+  const cellRef = import_react4.useCallback((el) => {
+    if (el) {
+      const rowIndex2 = row - 1;
+      const colIndex2 = columnToIndex(col);
+      return selectionManager.setupCellElement(el, {
+        row: rowIndex2,
+        col: colIndex2
+      });
+    }
+  }, [row, col, selectionManager]);
+  const colIndex = columnToIndex(col);
+  const rowIndex = row - 1;
+  const isSelected = import_selection_manager.useSelectionManager(selectionManager, () => selectionManager.isSelected({ row: rowIndex, col: colIndex }));
+  const isBeingEdited = import_selection_manager.useSelectionManager(selectionManager, () => selectionManager.isEditingCell(rowIndex, colIndex));
+  const { x, y } = cellToPixelBase(row, col);
+  const cellStyleCallbackData = {
+    id: `${col}${row}`,
+    row: getRowNumber(row),
+    col,
+    rowIndex: row - 1,
+    colIndex: columnToIndex(col),
+    value,
+    isSelected,
+    isBeingEdited: isBeingEdited || false
+  };
+  const customStyle = customCellStyle?.(cellStyleCallbackData);
+  const canHaveFillHandle = import_selection_manager.useSelectionManager(selectionManager, () => {
+    return selectionManager.canCellHaveFillHandle({
+      row: rowIndex,
+      col: colIndex
+    });
+  });
+  const inputRef = import_react4.useCallback((el) => {
+    if (el) {
+      const rowIndex2 = row - 1;
+      const colIndex2 = columnToIndex(col);
+      return selectionManager.setupInputElement(el, {
+        rowIndex: rowIndex2,
+        colIndex: colIndex2
+      });
+    }
+  }, [row, col, selectionManager]);
+  return /* @__PURE__ */ jsx_runtime3.jsxs("div", {
+    ref: cellRef,
+    className: cn("rsp-cell", {
+      "rsp-cell-multiline": typeof value === "string" && value.includes(`
+`),
+      "rsp-cell-selected": isSelected,
+      "rsp-cell-editing": isBeingEdited,
+      "rsp-cell-plain": !(hasBorderStyle(customStyle) && !customStyle?.backgroundColor)
+    }),
+    "data-testid": `spreadsheet-cell-${col}${row}`,
+    style: {
+      left: x,
+      top: y,
+      width: getColumnWidth(col) - 1,
+      height: getRowHeight(row) - 1,
+      ...customStyle
+    },
+    children: [
+      isBeingEdited ? /* @__PURE__ */ jsx_runtime3.jsx("textarea", {
+        className: "rsp-cell-editor",
+        "data-testid": `spreadsheet-cell-input-${col}${row}`,
+        ref: inputRef,
+        defaultValue: inputValue?.toString() ?? "",
+        onKeyDownCapture: (event) => {
+          if (event.key === "Enter")
+            event.preventDefault();
+        },
+        style: {
+          left: x + 4,
+          top: y + 4,
+          width,
+          height
+        }
+      }, editInputVersion) : customCellRenderer ? customCellRenderer(cellStyleCallbackData) : value,
+      canHaveFillHandle && /* @__PURE__ */ jsx_runtime3.jsx("div", {
+        className: "rsp-fill-handle",
+        "data-fill-handle": true,
+        "data-testid": `spreadsheet-fill-handle-${col}${row}`
+      })
+    ]
+  });
+});
+CellComponent.displayName = "CellComponent";
+var HeaderComponent = import_react4.default.memo(({
+  index,
+  type,
+  selectionManager,
+  reverseHeaders,
+  getColumnWidth,
+  getRowHeight,
+  handleColumnResizeStart,
+  handleColumnResizeDoubleClick,
+  handleRowResizeStart,
+  handleRowResizeDoubleClick
+}) => {
+  const headerRef = import_react4.useCallback((el) => {
+    if (el) {
+      return selectionManager.setupHeaderElement(el, index, type);
+    }
+  }, [index, type, selectionManager]);
+  const { position, size } = import_react4.default.useMemo(() => {
+    if (type === "col") {
+      const col = indexToColumn(index);
+      const width = getColumnWidth(col);
+      const height = HEADER_HEIGHT;
+      let x = 0;
+      for (let i = 0;i < index; i++) {
+        const colKey = indexToColumn(i);
+        x += getColumnWidth(colKey);
+      }
+      return {
+        position: { x, y: 0 },
+        size: { width, height }
+      };
+    } else {
+      const row = index + 1;
+      const width = HEADER_WIDTH;
+      const height = getRowHeight(row);
+      let y = 0;
+      for (let i = 1;i <= index; i++) {
+        y += getRowHeight(i);
+      }
+      return {
+        position: { x: 0, y },
+        size: { width, height }
+      };
+    }
+  }, [index, type, getColumnWidth, getRowHeight]);
+  const isSelected = import_selection_manager.useSelectionManager(selectionManager, () => {
+    if (type === "col") {
+      return selectionManager.isWholeColSelected(index);
+    } else {
+      return selectionManager.isWholeRowSelected(index);
+    }
+  });
+  const content = type === "col" ? reverseHeaders ? index + 1 : indexToColumn(index) : reverseHeaders ? rowToLetter(index + 1) : index + 1;
+  return /* @__PURE__ */ jsx_runtime3.jsxs("div", {
+    ref: headerRef,
+    className: cn("rsp-header", `rsp-header-${type}`, {
+      "rsp-header-selected": isSelected
+    }),
+    "data-testid": `spreadsheet-${type}-header-${type === "col" ? indexToColumn(index) : index + 1}`,
+    style: {
+      left: position.x,
+      top: position.y,
+      width: size.width - 1,
+      height: size.height - 1
+    },
+    children: [
+      content,
+      type === "col" && /* @__PURE__ */ jsx_runtime3.jsx("div", {
+        className: "rsp-col-resize-handle",
+        "data-testid": `spreadsheet-column-resize-handle-${indexToColumn(index)}`,
+        onMouseDown: (e) => handleColumnResizeStart(e, indexToColumn(index)),
+        onDoubleClick: (e) => handleColumnResizeDoubleClick(e, indexToColumn(index))
+      }),
+      type === "row" && /* @__PURE__ */ jsx_runtime3.jsx("div", {
+        className: "rsp-row-resize-handle",
+        "data-testid": `spreadsheet-row-resize-handle-${index + 1}`,
+        onMouseDown: (e) => handleRowResizeStart(e, index + 1),
+        onDoubleClick: (e) => handleRowResizeDoubleClick(e, index + 1)
+      })
+    ]
+  });
+});
+HeaderComponent.displayName = "HeaderComponent";
+var isEditableKeyboardTarget = (target) => {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+  return Boolean(target.closest('input, textarea, select, [contenteditable="true"]'));
+};
+var columnWidthsRecordToMap = (columnWidths) => {
+  return new Map(Object.entries(columnWidths || {}).filter((entry) => {
+    const width = entry[1];
+    return typeof width === "number" && Number.isFinite(width) && width > 0;
+  }));
+};
+var columnWidthsMapToRecord = (columnWidths) => {
+  const result = {};
+  columnWidths.forEach((width, column) => {
+    if (Number.isFinite(width) && width > 0) {
+      result[column] = width;
+    }
+  });
+  return result;
+};
+var rowHeightsRecordToMap = (rowHeights) => {
+  const entries = Object.entries(rowHeights || {}).flatMap(([row, height]) => {
+    const rowNumber = Number(row);
+    if (Number.isInteger(rowNumber) && rowNumber > 0 && Number.isFinite(height) && height > 0) {
+      return [[rowNumber, height]];
+    }
+    return [];
+  });
+  return new Map(entries);
+};
+var rowHeightsMapToRecord = (rowHeights) => {
+  const result = {};
+  rowHeights.forEach((height, row) => {
+    if (Number.isInteger(row) && row > 0 && Number.isFinite(height) && height > 0) {
+      result[row] = height;
+    }
+  });
+  return result;
+};
+var isSnappedTextBox = (child) => child.component === "RichText" && Boolean(child.snapToCells);
+var areCellSnapAnchorsEqual = (a, b) => a.startCol === b.startCol && a.startRow === b.startRow && a.endCol === b.endCol && a.endRow === b.endRow;
+var applyCellSnapAnchorToTextBox = (child, anchor, columnWidths, rowHeights) => {
+  const normalizedAnchor = normalizeCellSnapAnchor(anchor);
+  const rect = getRectFromCellSnapAnchor(normalizedAnchor, columnWidths, rowHeights);
+  return {
+    ...child,
+    snapToCells: true,
+    cellAnchor: normalizedAnchor,
+    x: rect.x,
+    y: rect.y,
+    width: rect.width,
+    height: rect.height
+  };
+};
+var syncSnappedTextBoxRects = (children, columnWidths, rowHeights) => {
+  let changed = false;
+  const nextChildren = children.map((child) => {
+    if (!isSnappedTextBox(child)) {
+      return child;
+    }
+    const fallbackAnchor = getCellSnapAnchorFromRect(child, columnWidths, rowHeights);
+    const anchor = child.cellAnchor ? normalizeCellSnapAnchor(child.cellAnchor) : fallbackAnchor;
+    const rect = getRectFromCellSnapAnchor(anchor, columnWidths, rowHeights);
+    const currentAnchor = child.cellAnchor ? normalizeCellSnapAnchor(child.cellAnchor) : undefined;
+    const anchorChanged = !currentAnchor || !areCellSnapAnchorsEqual(currentAnchor, anchor);
+    const rectChanged = child.x !== rect.x || child.y !== rect.y || child.width !== rect.width || child.height !== rect.height;
+    if (!anchorChanged && !rectChanged) {
+      return child;
+    }
+    changed = true;
+    return {
+      ...child,
+      cellAnchor: anchor,
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height
+    };
+  });
+  return changed ? nextChildren : children;
+};
+var isCellSnapResizeHandle = (handle) => {
+  return handle === "top" || handle === "right" || handle === "bottom" || handle === "left" || handle === "top-left" || handle === "top-right" || handle === "bottom-left" || handle === "bottom-right";
+};
+
+class SpreadsheetClipboardManager extends ClipboardUtils {
+  cellDataRef;
+  selectionManager;
+  constructor(cellDataRef, selectionManager) {
+    super();
+    this.cellDataRef = cellDataRef;
+    this.selectionManager = selectionManager;
+  }
+  triggerCopy() {
+    const extractedCells = this.extractCellsFromSelection(this.selectionManager, this.cellDataRef.current);
+    if (!extractedCells)
+      return;
+    const { width, height, cells } = extractedCells;
+    const exportGrid = this.createExportGrid(width, height);
+    cells.forEach(({ relative, value }) => {
+      const row = exportGrid[relative.rowIndex];
+      if (!row)
+        return;
+      row[relative.columnIndex] = value === undefined ? "" : String(value);
+    });
+    this.writeToOsClipboard(exportGrid);
+  }
+  triggerPaste(updates) {
+    this.selectionManager.saveCellValues(updates);
+  }
+}
+var Spreadsheet = import_react4.forwardRef(({
+  style,
+  className,
+  containerProps,
+  cellData: controlledCellData,
+  onCellDataChange,
+  onCellDataChangeError,
+  columnWidths: controlledColumnWidths,
+  onColumnWidthsChange,
+  rowHeights: controlledRowHeights,
+  onRowHeightsChange,
+  customCellStyle,
+  customCellRenderer,
+  parseValue,
+  selection,
+  components,
+  overlayChildren: controlledOverlayChildren,
+  selectedOverlayId: controlledSelectedOverlayId,
+  onOverlaySelect,
+  onOverlayChildrenChange,
+  overlayPlaceholder,
+  parentSelected = true,
+  disableClipboard = false
+}, ref) => {
+  const [{ width, height }, containerRef] = useResizeObserver();
+  const [containerDivRef, setContainerDivRef] = import_react4.useState(null);
+  const colorScheme = useColorScheme(containerDivRef);
+  const selectionManager = import_selection_manager.useInitializeSelectionManager({
+    getNumCols: () => ({ type: "infinity" }),
+    getNumRows: () => ({ type: "infinity" }),
+    initialState: selection?.initialState,
+    state: selection?.state,
+    onStateChange: selection?.onStateChange,
+    containerElement: containerDivRef,
+    formats: selection?.formats,
+    disableAutoClipboard: true
+  });
+  const effects = selection?.effects;
+  import_react4.useEffect(() => {
+    if (effects) {
+      return effects(selectionManager);
+    }
+  }, [selectionManager, effects]);
+  const [internalCellData, setInternalCellData] = import_react4.useState(new Map);
+  const [retryingEdit, setRetryingEdit] = import_react4.useState(null);
+  const retryingEditVersionRef = import_react4.useRef(0);
+  const cellData = controlledCellData ?? internalCellData;
+  const cellDataRef = import_react4.useRef(cellData);
+  cellDataRef.current = cellData;
+  const isControlled = controlledCellData !== undefined;
+  const prevIsControlledRef = import_react4.useRef(isControlled);
+  selectionManager.getCellsWithData = (area) => {
+    const cells = [];
+    cellData.forEach((value, key) => {
+      const { rowIndex, columnIndex } = parseCellReference(key);
+      if (columnIndex >= area.start.col && (area.end.col.type === "infinity" || columnIndex <= area.end.col.value) && rowIndex >= area.start.row && (area.end.row.type === "infinity" || rowIndex <= area.end.row.value)) {
+        cells.push({ rowIndex, colIndex: columnIndex });
+      }
+    });
+    return cells;
+  };
+  import_react4.default.useEffect(() => {
+    if (isControlled !== prevIsControlledRef.current) {
+      prevIsControlledRef.current = isControlled;
+      console.warn(`The component went from ${prevIsControlledRef.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}, this is not supported`);
+    }
+  }, [controlledCellData, isControlled]);
+  const [viewport, setViewport] = import_react4.useState({
+    scrollX: 0,
+    scrollY: 0,
+    zoom: 1
+  });
+  const controlledColumnWidthsMap = import_react4.useMemo(() => controlledColumnWidths ? columnWidthsRecordToMap(controlledColumnWidths) : undefined, [controlledColumnWidths]);
+  const [internalColumnWidths, setInternalColumnWidths] = import_react4.useState(() => columnWidthsRecordToMap(controlledColumnWidths));
+  const [transientColumnWidths, setTransientColumnWidths] = import_react4.useState(null);
+  const columnWidths = transientColumnWidths ?? controlledColumnWidthsMap ?? internalColumnWidths;
+  const columnWidthsRef = import_react4.useRef(columnWidths);
+  columnWidthsRef.current = columnWidths;
+  const previousControlledColumnWidthsRef = import_react4.useRef(controlledColumnWidths);
+  import_react4.useEffect(() => {
+    if (controlledColumnWidths !== previousControlledColumnWidthsRef.current) {
+      previousControlledColumnWidthsRef.current = controlledColumnWidths;
+      setTransientColumnWidths(null);
+    }
+  }, [controlledColumnWidths]);
+  const controlledRowHeightsMap = import_react4.useMemo(() => controlledRowHeights ? rowHeightsRecordToMap(controlledRowHeights) : undefined, [controlledRowHeights]);
+  const [internalRowHeights, setInternalRowHeights] = import_react4.useState(() => rowHeightsRecordToMap(controlledRowHeights));
+  const [transientRowHeights, setTransientRowHeights] = import_react4.useState(null);
+  const rowHeights = transientRowHeights ?? controlledRowHeightsMap ?? internalRowHeights;
+  const rowHeightsRef = import_react4.useRef(rowHeights);
+  rowHeightsRef.current = rowHeights;
+  const previousControlledRowHeightsRef = import_react4.useRef(controlledRowHeights);
+  import_react4.useEffect(() => {
+    if (controlledRowHeights !== previousControlledRowHeightsRef.current) {
+      previousControlledRowHeightsRef.current = controlledRowHeights;
+      setTransientRowHeights(null);
+    }
+  }, [controlledRowHeights]);
+  const [isResizingColumn, setIsResizingColumn] = import_react4.useState(null);
+  const [isResizingRow, setIsResizingRow] = import_react4.useState(null);
+  const [resizeStartX, setResizeStartX] = import_react4.useState(0);
+  const [resizeStartY, setResizeStartY] = import_react4.useState(0);
+  const [resizeStartSize, setResizeStartSize] = import_react4.useState(0);
+  const [internalOverlayChildren, setInternalOverlayChildren] = import_react4.useState([]);
+  const [transientOverlayChildren, setTransientOverlayChildren] = import_react4.useState(null);
+  const [internalSelectedOverlayId, setInternalSelectedOverlayId] = import_react4.useState(null);
+  const [mountedPersistentOverlayIds, setMountedPersistentOverlayIds] = import_react4.useState(new Set);
+  const [placeholderPos, setPlaceholderPos] = import_react4.useState(null);
+  const overlayChildren = transientOverlayChildren ?? controlledOverlayChildren ?? internalOverlayChildren;
+  const selectedOverlayId = controlledSelectedOverlayId !== undefined ? controlledSelectedOverlayId : internalSelectedOverlayId;
+  const previousControlledOverlayChildrenRef = import_react4.useRef(controlledOverlayChildren);
+  import_react4.useEffect(() => {
+    if (controlledOverlayChildren !== previousControlledOverlayChildrenRef.current) {
+      previousControlledOverlayChildrenRef.current = controlledOverlayChildren;
+      setTransientOverlayChildren(null);
+    }
+  }, [controlledOverlayChildren]);
+  const overlayChildrenRef = import_react4.useRef(overlayChildren);
+  overlayChildrenRef.current = overlayChildren;
+  const overlayInteractionDraftRectsRef = import_react4.useRef({});
+  const pendingSnappedTextBoxLayoutCommitRef = import_react4.useRef(false);
+  const canvasRef = import_react4.useRef(null);
+  const overlayContainerRef = import_react4.useRef(null);
+  const viewportStreamRef = import_react4.useRef(new ViewportStream({
+    x: viewport.scrollX,
+    y: viewport.scrollY,
+    zoom: viewport.zoom
+  }));
+  import_react4.default.useEffect(() => {
+    viewportStreamRef.current.next({
+      x: viewport.scrollX,
+      y: viewport.scrollY,
+      zoom: viewport.zoom
+    });
+  }, [viewport.scrollX, viewport.scrollY, viewport.zoom]);
+  const gridDims = import_react4.useMemo(() => ({
+    cellWidth: DEFAULT_CELL_WIDTH * viewport.zoom,
+    cellHeight: DEFAULT_CELL_HEIGHT * viewport.zoom,
+    headerWidth: HEADER_WIDTH * viewport.zoom,
+    headerHeight: HEADER_HEIGHT * viewport.zoom
+  }), [viewport.zoom]);
+  import_react4.default.useEffect(() => {
+    if (!overlayPlaceholder || !containerDivRef)
+      return;
+    const handleMouseMove = (e) => {
+      const rect = containerDivRef.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      if (mouseX >= gridDims.headerWidth && mouseY >= gridDims.headerHeight) {
+        const sheetX = (mouseX - gridDims.headerWidth + viewport.scrollX) / viewport.zoom - overlayPlaceholder.width / 2;
+        const sheetY = (mouseY - gridDims.headerHeight + viewport.scrollY) / viewport.zoom - overlayPlaceholder.height / 2;
+        const clampedX = Math.max(0, sheetX);
+        const clampedY = Math.max(0, sheetY);
+        setPlaceholderPos({ x: clampedX, y: clampedY });
+      } else {
+        setPlaceholderPos(null);
+      }
+    };
+    const handleClick = (e) => {
+      if (placeholderPos) {
+        e.stopPropagation();
+        const finalX = Math.max(0, placeholderPos.x);
+        const finalY = Math.max(0, placeholderPos.y);
+        overlayPlaceholder.onPlaced(finalX, finalY);
+        setPlaceholderPos(null);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        overlayPlaceholder.onCancel?.();
+        setPlaceholderPos(null);
+      }
+    };
+    const handleContextMenu = (e) => {
+      e.preventDefault();
+      overlayPlaceholder.onCancel?.();
+      setPlaceholderPos(null);
+    };
+    containerDivRef.addEventListener("mousemove", handleMouseMove);
+    containerDivRef.addEventListener("click", handleClick);
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("contextmenu", handleContextMenu);
+    return () => {
+      containerDivRef.removeEventListener("mousemove", handleMouseMove);
+      containerDivRef.removeEventListener("click", handleClick);
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("contextmenu", handleContextMenu);
+    };
+  }, [overlayPlaceholder, containerDivRef, viewport, gridDims, placeholderPos]);
+  const effectsRefOb = {
+    onCellDataChange,
+    onCellDataChangeError,
+    controlledCellData,
+    parseValue,
+    cellData,
+    viewport,
+    gridDims,
+    height
+  };
+  const effectsRef = import_react4.useRef(effectsRefOb);
+  effectsRef.current = effectsRefOb;
+  const setupCanvas = import_react4.useCallback((canvas, width2, height2) => {
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+      return null;
+    const devicePixelRatio = window.devicePixelRatio || 1;
+    canvas.width = width2 * devicePixelRatio;
+    canvas.height = height2 * devicePixelRatio;
+    canvas.style.width = width2 + "px";
+    canvas.style.height = height2 + "px";
+    ctx.scale(devicePixelRatio, devicePixelRatio);
+    return ctx;
+  }, []);
+  const drawGrid = import_react4.useCallback(() => {
+    if (!canvasRef.current || !width || !height)
+      return;
+    const ctx = setupCanvas(canvasRef.current, width, height);
+    if (!ctx)
+      return;
+    ctx.clearRect(0, 0, width, height);
+    ctx.strokeStyle = resolveGridLineColor(canvasRef.current, colorScheme);
+    ctx.lineWidth = 1;
+    let x = gridDims.headerWidth;
+    let colIndex = 0;
+    while (x < viewport.scrollX + gridDims.headerWidth) {
+      const colWidth = (columnWidths.get(indexToColumn(colIndex)) || DEFAULT_CELL_WIDTH) * viewport.zoom;
+      if (x + colWidth > viewport.scrollX + gridDims.headerWidth) {
+        break;
+      }
+      x += colWidth;
+      colIndex++;
+    }
+    while (x - viewport.scrollX < width) {
+      const drawX = x - viewport.scrollX;
+      if (drawX >= gridDims.headerWidth && drawX <= width) {
+        ctx.beginPath();
+        ctx.moveTo(drawX, gridDims.headerHeight);
+        ctx.lineTo(drawX, height);
+        ctx.stroke();
+      }
+      const colWidth = (columnWidths.get(indexToColumn(colIndex)) || DEFAULT_CELL_WIDTH) * viewport.zoom;
+      x += colWidth;
+      colIndex++;
+    }
+    let y = gridDims.headerHeight;
+    let rowNum = 1;
+    while (y < viewport.scrollY + gridDims.headerHeight) {
+      const rowHeight = (rowHeights.get(rowNum) || DEFAULT_CELL_HEIGHT) * viewport.zoom;
+      if (y + rowHeight > viewport.scrollY + gridDims.headerHeight) {
+        break;
+      }
+      y += rowHeight;
+      rowNum++;
+    }
+    while (y - viewport.scrollY < height) {
+      const drawY = y - viewport.scrollY;
+      if (drawY >= gridDims.headerHeight && drawY <= height) {
+        ctx.beginPath();
+        ctx.moveTo(gridDims.headerWidth, drawY);
+        ctx.lineTo(width, drawY);
+        ctx.stroke();
+      }
+      const rowHeight = (rowHeights.get(rowNum) || DEFAULT_CELL_HEIGHT) * viewport.zoom;
+      y += rowHeight;
+      rowNum++;
+    }
+  }, [
+    columnWidths,
+    gridDims.headerHeight,
+    gridDims.headerWidth,
+    height,
+    rowHeights,
+    setupCanvas,
+    viewport.scrollX,
+    viewport.scrollY,
+    viewport.zoom,
+    width,
+    colorScheme
+  ]);
+  const getVisibleCells = import_react4.useCallback(() => {
+    if (!width || !height)
+      return [];
+    const cells = [];
+    let x = 0;
+    let startCol = 0;
+    while (x < viewport.scrollX) {
+      const colWidth = (columnWidths.get(indexToColumn(startCol)) || DEFAULT_CELL_WIDTH) * viewport.zoom;
+      if (x + colWidth > viewport.scrollX) {
+        break;
+      }
+      x += colWidth;
+      startCol++;
+    }
+    let y = 0;
+    let startRow = 0;
+    while (y < viewport.scrollY) {
+      const rowHeight = (rowHeights.get(startRow + 1) || DEFAULT_CELL_HEIGHT) * viewport.zoom;
+      if (y + rowHeight > viewport.scrollY) {
+        break;
+      }
+      y += rowHeight;
+      startRow++;
+    }
+    let rowY = y;
+    let row = startRow;
+    while (rowY < viewport.scrollY + height) {
+      let colX = x;
+      let col = startCol;
+      while (colX < viewport.scrollX + width) {
+        const colKey = indexToColumn(col);
+        const rowNum = getRowNumber(row);
+        const cellKey = `${colKey}${rowNum}`;
+        cells.push({
+          value: cellData.get(cellKey) ?? "",
+          row: rowNum,
+          col: colKey
+        });
+        const colWidth = (columnWidths.get(colKey) || DEFAULT_CELL_WIDTH) * viewport.zoom;
+        colX += colWidth;
+        col++;
+      }
+      const rowHeight = (rowHeights.get(row + 1) || DEFAULT_CELL_HEIGHT) * viewport.zoom;
+      rowY += rowHeight;
+      row++;
+    }
+    return cells;
+  }, [
+    cellData,
+    columnWidths,
+    height,
+    rowHeights,
+    viewport.scrollX,
+    viewport.scrollY,
+    viewport.zoom,
+    width
+  ]);
+  const getColumnWidth = import_react4.useCallback((col) => {
+    return columnWidths.get(col) || DEFAULT_CELL_WIDTH;
+  }, [columnWidths]);
+  const getRowHeight = import_react4.useCallback((row) => {
+    return rowHeights.get(row) || DEFAULT_CELL_HEIGHT;
+  }, [rowHeights]);
+  const cellToPixelBase = import_react4.useCallback((row, col) => {
+    const colIndex = columnToIndex(col);
+    const rowIndex = row - 1;
+    let x = HEADER_WIDTH;
+    for (let i = 0;i < colIndex; i++) {
+      const colKey = indexToColumn(i);
+      x += columnWidths.get(colKey) || DEFAULT_CELL_WIDTH;
+    }
+    let y = HEADER_HEIGHT;
+    for (let i = 1;i <= rowIndex; i++) {
+      y += rowHeights.get(i) || DEFAULT_CELL_HEIGHT;
+    }
+    return { x, y };
+  }, [columnWidths, rowHeights]);
+  import_react4.default.useEffect(() => {
+    return selectionManager.listenToUpdateData((updates) => {
+      const editingState = selectionManager.isEditing;
+      try {
+        const { cellData: cellData2, onCellDataChange: onCellDataChange2 } = effectsRef.current;
+        const newData = new Map(cellData2);
+        updates.forEach(({ value, rowIndex, colIndex }) => {
+          const key = `${indexToColumn(colIndex)}${rowIndex + 1}`;
+          const parseValue2 = effectsRef.current.parseValue;
+          if (value === "") {
+            newData.delete(key);
+          } else {
+            let parsedValue = value;
+            if (parseValue2 && typeof value === "string") {
+              const match = key.match(/^([A-Z]+)(\d+)$/);
+              const col = match?.[1];
+              const rowText = match?.[2];
+              if (col && rowText) {
+                const row = parseInt(rowText, 10);
+                const colIndex2 = columnToIndex(col);
+                const rowIndex2 = row - 1;
+                parsedValue = parseValue2(value, {
+                  id: key,
+                  row,
+                  col,
+                  rowIndex: rowIndex2,
+                  colIndex: colIndex2
+                });
+              }
+            }
+            newData.set(key, parsedValue);
+          }
+        });
+        onCellDataChange2?.(newData);
+        setInternalCellData(newData);
+      } catch (error) {
+        console.error("Failed to update spreadsheet cell data:", error);
+        effectsRef.current.onCellDataChangeError?.(error);
+        const rejectedUpdate = updates.length === 1 ? updates[0] : undefined;
+        if (editingState.type === "cell" && rejectedUpdate && rejectedUpdate.rowIndex === editingState.row && rejectedUpdate.colIndex === editingState.col) {
+          const rejectedValue = rejectedUpdate.value === undefined ? "" : String(rejectedUpdate.value);
+          queueMicrotask(() => {
+            retryingEditVersionRef.current += 1;
+            setRetryingEdit({
+              rowIndex: editingState.row,
+              colIndex: editingState.col,
+              version: retryingEditVersionRef.current
+            });
+            selectionManager.editCell(editingState.row, editingState.col, rejectedValue);
+          });
+        }
+      }
+    });
+  }, [selectionManager]);
+  const clipboardManager = import_react4.useMemo(() => {
+    return new SpreadsheetClipboardManager(cellDataRef, selectionManager);
+  }, [selectionManager]);
+  import_react4.default.useEffect(() => {
+    if (disableClipboard)
+      return;
+    selectionManager.listenToCopy(() => {
+      clipboardManager.triggerCopy();
+    });
+  }, [selectionManager, clipboardManager, disableClipboard]);
+  import_react4.default.useEffect(() => {
+    if (disableClipboard)
+      return;
+    selectionManager.listenToPaste(({ updates }) => {
+      clipboardManager.triggerPaste(updates);
+    });
+  }, [selectionManager, clipboardManager, disableClipboard]);
+  const handleWheel = import_react4.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setViewport((prev) => ({
+      ...prev,
+      scrollX: Math.max(0, prev.scrollX + e.deltaX),
+      scrollY: Math.max(0, prev.scrollY + e.deltaY)
+    }));
+  }, []);
+  const commitOverlayChildren = import_react4.useCallback((children) => {
+    overlayChildrenRef.current = children;
+    if (onOverlayChildrenChange) {
+      onOverlayChildrenChange(children);
+      setTransientOverlayChildren(children);
+      return;
+    }
+    setInternalOverlayChildren(children);
+    setTransientOverlayChildren(null);
+  }, [onOverlayChildrenChange]);
+  const updateOverlayChildrenLocally = import_react4.useCallback((updater) => {
+    const nextChildren = updater(overlayChildrenRef.current);
+    overlayChildrenRef.current = nextChildren;
+    setTransientOverlayChildren(nextChildren);
+    if (!onOverlayChildrenChange) {
+      setInternalOverlayChildren(nextChildren);
+    }
+  }, [onOverlayChildrenChange]);
+  const updateSnappedTextBoxRectsLocally = import_react4.useCallback((nextColumnWidths, nextRowHeights) => {
+    const nextChildren = syncSnappedTextBoxRects(overlayChildrenRef.current, nextColumnWidths, nextRowHeights);
+    if (nextChildren === overlayChildrenRef.current) {
+      return;
+    }
+    overlayChildrenRef.current = nextChildren;
+    pendingSnappedTextBoxLayoutCommitRef.current = true;
+    setTransientOverlayChildren(nextChildren);
+    if (!onOverlayChildrenChange) {
+      setInternalOverlayChildren(nextChildren);
+    }
+  }, [onOverlayChildrenChange]);
+  const commitSnappedTextBoxRects = import_react4.useCallback((nextColumnWidths, nextRowHeights) => {
+    const nextChildren = syncSnappedTextBoxRects(overlayChildrenRef.current, nextColumnWidths, nextRowHeights);
+    if (nextChildren !== overlayChildrenRef.current) {
+      commitOverlayChildren(nextChildren);
+      pendingSnappedTextBoxLayoutCommitRef.current = false;
+      return;
+    }
+    if (pendingSnappedTextBoxLayoutCommitRef.current) {
+      commitOverlayChildren(overlayChildrenRef.current);
+      pendingSnappedTextBoxLayoutCommitRef.current = false;
+    }
+  }, [commitOverlayChildren]);
+  const updateColumnWidthsLocally = import_react4.useCallback((updater) => {
+    const nextColumnWidths = updater(columnWidthsRef.current);
+    columnWidthsRef.current = nextColumnWidths;
+    setTransientColumnWidths(nextColumnWidths);
+    updateSnappedTextBoxRectsLocally(nextColumnWidths, rowHeightsRef.current);
+    if (!onColumnWidthsChange) {
+      setInternalColumnWidths(nextColumnWidths);
+    }
+  }, [onColumnWidthsChange, updateSnappedTextBoxRectsLocally]);
+  const commitColumnWidths = import_react4.useCallback((nextColumnWidths) => {
+    columnWidthsRef.current = nextColumnWidths;
+    if (onColumnWidthsChange) {
+      onColumnWidthsChange(columnWidthsMapToRecord(nextColumnWidths));
+      setTransientColumnWidths(nextColumnWidths);
+      commitSnappedTextBoxRects(nextColumnWidths, rowHeightsRef.current);
+      return;
+    }
+    setInternalColumnWidths(nextColumnWidths);
+    setTransientColumnWidths(null);
+    commitSnappedTextBoxRects(nextColumnWidths, rowHeightsRef.current);
+  }, [commitSnappedTextBoxRects, onColumnWidthsChange]);
+  const updateRowHeightsLocally = import_react4.useCallback((updater) => {
+    const nextRowHeights = updater(rowHeightsRef.current);
+    rowHeightsRef.current = nextRowHeights;
+    setTransientRowHeights(nextRowHeights);
+    updateSnappedTextBoxRectsLocally(columnWidthsRef.current, nextRowHeights);
+    if (!onRowHeightsChange) {
+      setInternalRowHeights(nextRowHeights);
+    }
+  }, [onRowHeightsChange, updateSnappedTextBoxRectsLocally]);
+  const commitRowHeights = import_react4.useCallback((nextRowHeights) => {
+    rowHeightsRef.current = nextRowHeights;
+    if (onRowHeightsChange) {
+      onRowHeightsChange(rowHeightsMapToRecord(nextRowHeights));
+      setTransientRowHeights(nextRowHeights);
+      commitSnappedTextBoxRects(columnWidthsRef.current, nextRowHeights);
+      return;
+    }
+    setInternalRowHeights(nextRowHeights);
+    setTransientRowHeights(null);
+    commitSnappedTextBoxRects(columnWidthsRef.current, nextRowHeights);
+  }, [commitSnappedTextBoxRects, onRowHeightsChange]);
+  const handleColumnResizeStart = import_react4.useCallback((e, col) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizingColumn(col);
+    setResizeStartX(e.clientX);
+    setResizeStartSize(getColumnWidth(col));
+  }, [getColumnWidth]);
+  const handleRowResizeStart = import_react4.useCallback((e, row) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizingRow(row);
+    setResizeStartY(e.clientY);
+    setResizeStartSize(getRowHeight(row));
+  }, [getRowHeight]);
+  const handleResizeMove = import_react4.useCallback((e) => {
+    if (isResizingColumn) {
+      const delta = e.clientX - resizeStartX;
+      const newWidth = Math.max(20, resizeStartSize + delta / viewport.zoom);
+      updateColumnWidthsLocally((prev) => new Map(prev).set(isResizingColumn, newWidth));
+    } else if (isResizingRow !== null) {
+      const delta = e.clientY - resizeStartY;
+      const newHeight = Math.max(20, resizeStartSize + delta / viewport.zoom);
+      updateRowHeightsLocally((prev) => new Map(prev).set(isResizingRow, newHeight));
+    }
+  }, [
+    isResizingColumn,
+    isResizingRow,
+    resizeStartX,
+    resizeStartY,
+    resizeStartSize,
+    updateColumnWidthsLocally,
+    updateRowHeightsLocally,
+    viewport.zoom
+  ]);
+  const handleResizeEnd = import_react4.useCallback(() => {
+    if (isResizingColumn) {
+      commitColumnWidths(columnWidthsRef.current);
+    }
+    if (isResizingRow !== null) {
+      commitRowHeights(rowHeightsRef.current);
+    }
+    setIsResizingColumn(null);
+    setIsResizingRow(null);
+  }, [commitColumnWidths, commitRowHeights, isResizingColumn, isResizingRow]);
+  const handleColumnResizeDoubleClick = import_react4.useCallback((e, col) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const { viewport: viewport2, gridDims: gridDims2, height: height2, cellData: cellData2 } = effectsRef.current;
+    let maxWidth = 50;
+    const startRow = Math.max(0, Math.floor(viewport2.scrollY / gridDims2.cellHeight));
+    const endRow = Math.ceil((viewport2.scrollY + height2) / gridDims2.cellHeight) + 1;
+    for (let row = startRow;row <= endRow; row++) {
+      const cellKey = `${col}${getRowNumber(row)}`;
+      const content = cellData2.get(cellKey) ?? "";
+      if (content) {
+        const estimatedWidth = String(content).length * 8 + 20;
+        maxWidth = Math.max(maxWidth, estimatedWidth);
+      }
+    }
+    commitColumnWidths(new Map(columnWidthsRef.current).set(col, maxWidth));
+  }, [commitColumnWidths]);
+  const handleRowResizeDoubleClick = import_react4.useCallback((e, row) => {
+    e.preventDefault();
+    e.stopPropagation();
+    commitRowHeights(new Map(rowHeightsRef.current).set(row, DEFAULT_CELL_HEIGHT));
+  }, [commitRowHeights]);
+  const commitCurrentOverlayChildren = import_react4.useCallback(() => {
+    overlayInteractionDraftRectsRef.current = {};
+    commitOverlayChildren(overlayChildrenRef.current);
+  }, [commitOverlayChildren]);
+  const setSelectedOverlay = import_react4.useCallback((childId) => {
+    if (onOverlaySelect) {
+      onOverlaySelect(childId);
+    }
+    setInternalSelectedOverlayId(childId);
+  }, [onOverlaySelect]);
+  const handleOverlayClick = import_react4.useCallback((childId, e) => {
+    e.stopPropagation();
+    if (!parentSelected) {
+      return;
+    }
+    selectionManager.blur();
+    setSelectedOverlay(childId);
+  }, [setSelectedOverlay, selectionManager, parentSelected]);
+  const handleOverlayBackgroundClick = import_react4.useCallback(() => {
+    setSelectedOverlay(null);
+  }, [setSelectedOverlay]);
+  const getOverlayInteractionDraftRect = import_react4.useCallback((child) => {
+    const currentDraft = overlayInteractionDraftRectsRef.current[child.id];
+    if (currentDraft) {
+      return currentDraft;
+    }
+    const draft = {
+      x: child.x,
+      y: child.y,
+      width: child.width,
+      height: child.height
+    };
+    overlayInteractionDraftRectsRef.current[child.id] = draft;
+    return draft;
+  }, []);
+  const handleOverlayMove = import_react4.useCallback((childId, deltaX, deltaY) => {
+    updateOverlayChildrenLocally((children) => children.map((child) => {
+      if (child.id !== childId)
+        return child;
+      if (isSnappedTextBox(child)) {
+        const draft = getOverlayInteractionDraftRect(child);
+        draft.x = Math.max(0, draft.x + deltaX);
+        draft.y = Math.max(0, draft.y + deltaY);
+        const baseAnchor = child.cellAnchor ?? getCellSnapAnchorFromRect(child, columnWidthsRef.current, rowHeightsRef.current);
+        const nextAnchor = moveCellSnapAnchorToNearestOrigin(baseAnchor, draft, columnWidthsRef.current, rowHeightsRef.current);
+        return applyCellSnapAnchorToTextBox(child, nextAnchor, columnWidthsRef.current, rowHeightsRef.current);
+      }
+      const newX = Math.max(0, child.x + deltaX);
+      const newY = Math.max(0, child.y + deltaY);
+      return { ...child, x: newX, y: newY };
+    }));
+  }, [getOverlayInteractionDraftRect, updateOverlayChildrenLocally]);
+  const handleOverlayResize = import_react4.useCallback((childId, deltaWidth, deltaHeight, shiftKey, handle) => {
+    updateOverlayChildrenLocally((children) => children.map((child) => {
+      if (child.id !== childId)
+        return child;
+      if (isSnappedTextBox(child) && isCellSnapResizeHandle(handle)) {
+        const draft = getOverlayInteractionDraftRect(child);
+        let nextX = draft.x;
+        let nextY = draft.y;
+        let nextWidth = draft.width;
+        let nextHeight = draft.height;
+        if (handle === "left" || handle === "top-left" || handle === "bottom-left") {
+          nextX = draft.x - deltaWidth;
+          nextWidth = draft.width + deltaWidth;
+        }
+        if (handle === "right" || handle === "top-right" || handle === "bottom-right") {
+          nextWidth = draft.width + deltaWidth;
+        }
+        if (handle === "top" || handle === "top-left" || handle === "top-right") {
+          nextY = draft.y - deltaHeight;
+          nextHeight = draft.height + deltaHeight;
+        }
+        if (handle === "bottom" || handle === "bottom-left" || handle === "bottom-right") {
+          nextHeight = draft.height + deltaHeight;
+        }
+        if (nextX < 0) {
+          nextWidth += nextX;
+          nextX = 0;
+        }
+        if (nextY < 0) {
+          nextHeight += nextY;
+          nextY = 0;
+        }
+        draft.x = nextX;
+        draft.y = nextY;
+        draft.width = Math.max(1, nextWidth);
+        draft.height = Math.max(1, nextHeight);
+        const baseAnchor = child.cellAnchor ?? getCellSnapAnchorFromRect(child, columnWidthsRef.current, rowHeightsRef.current);
+        const nextAnchor = resizeCellSnapAnchorToNearestEdges(baseAnchor, draft, handle, columnWidthsRef.current, rowHeightsRef.current);
+        return applyCellSnapAnchorToTextBox(child, nextAnchor, columnWidthsRef.current, rowHeightsRef.current);
+      }
+      if (shiftKey && (deltaWidth !== 0 || deltaHeight !== 0)) {
+        const currentZoom = child.zoom || 1;
+        const currentVisualWidth = child.width;
+        const currentVisualHeight = child.height;
+        const widthScale = deltaWidth !== 0 ? 1 + deltaWidth / currentVisualWidth : 1;
+        const heightScale = deltaHeight !== 0 ? 1 + deltaHeight / currentVisualHeight : 1;
+        let scaleDelta;
+        if (handle.includes("-")) {
+          scaleDelta = Math.abs(widthScale - 1) > Math.abs(heightScale - 1) ? widthScale : heightScale;
+        } else if (handle === "left" || handle === "right") {
+          scaleDelta = widthScale;
+        } else if (handle === "top" || handle === "bottom") {
+          scaleDelta = heightScale;
+        } else {
+          scaleDelta = Math.max(widthScale, heightScale);
+        }
+        const newZoom = currentZoom * scaleDelta;
+        const newWidth = child.width * scaleDelta;
+        const newHeight = child.height * scaleDelta;
+        const deltaX = newWidth - child.width;
+        const deltaY = newHeight - child.height;
+        let newX = child.x;
+        let newY = child.y;
+        if (handle === "left" || handle === "bottom-left") {
+          newX = child.x - deltaX;
+        }
+        if (handle === "top" || handle === "top-right") {
+          newY = child.y - deltaY;
+        }
+        if (handle === "top-left") {
+          newX = child.x - deltaX;
+          newY = child.y - deltaY;
+        }
+        newX = Math.max(0, newX);
+        newY = Math.max(0, newY);
+        return {
+          ...child,
+          x: newX,
+          y: newY,
+          width: newWidth,
+          height: newHeight,
+          zoom: newZoom
+        };
+      } else {
+        let newX = child.x;
+        let newY = child.y;
+        if (handle === "left" || handle === "bottom-left") {
+          newX = child.x - deltaWidth;
+        }
+        if (handle === "top" || handle === "top-right") {
+          newY = child.y - deltaHeight;
+        }
+        if (handle === "top-left") {
+          newX = child.x - deltaWidth;
+          newY = child.y - deltaHeight;
+        }
+        newX = Math.max(0, newX);
+        newY = Math.max(0, newY);
+        return {
+          ...child,
+          x: newX,
+          y: newY,
+          width: child.width + deltaWidth,
+          height: child.height + deltaHeight,
+          zoom: child.zoom
+        };
+      }
+    }));
+  }, [getOverlayInteractionDraftRect, updateOverlayChildrenLocally]);
+  const handleOverlaySnapToCellsToggle = import_react4.useCallback((childId, enabled) => {
+    overlayInteractionDraftRectsRef.current = {};
+    commitOverlayChildren(overlayChildrenRef.current.map((child) => {
+      if (child.id !== childId || child.component !== "RichText") {
+        return child;
+      }
+      if (!enabled) {
+        return {
+          ...child,
+          snapToCells: false,
+          cellAnchor: undefined
+        };
+      }
+      const anchor = getCellSnapAnchorFromRect(child, columnWidthsRef.current, rowHeightsRef.current);
+      return applyCellSnapAnchorToTextBox(child, anchor, columnWidthsRef.current, rowHeightsRef.current);
+    }));
+  }, [commitOverlayChildren]);
+  const handleOverlayReset = import_react4.useCallback((childId) => {
+    commitOverlayChildren(overlayChildrenRef.current.map((child) => {
+      if (child.id !== childId || !child.initial)
+        return child;
+      return {
+        ...child,
+        x: child.initial.x,
+        y: child.initial.y,
+        width: child.initial.width,
+        height: child.initial.height,
+        zoom: child.initial.zoom || 1,
+        minimized: false
+      };
+    }));
+  }, [commitOverlayChildren]);
+  const handleOverlayMinimize = import_react4.useCallback((childId) => {
+    commitOverlayChildren(overlayChildrenRef.current.map((child) => child.id === childId && child.component !== "RichText" ? { ...child, minimized: !child.minimized } : child));
+  }, [commitOverlayChildren]);
+  const handleOverlayClose = import_react4.useCallback((childId) => {
+    commitOverlayChildren(overlayChildrenRef.current.filter((child) => child.id !== childId));
+  }, [commitOverlayChildren]);
+  import_react4.useEffect(() => {
+    const handleOverlayDeleteKeyDown = (event) => {
+      if (!selectedOverlayId || event.key !== "Backspace" && event.key !== "Delete") {
+        return;
+      }
+      if (isEditableKeyboardTarget(event.target)) {
+        return;
+      }
+      const selectedOverlay = overlayChildrenRef.current.find((child) => child.id === selectedOverlayId);
+      if (selectedOverlay?.component !== "RichText") {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      setSelectedOverlay(null);
+      handleOverlayClose(selectedOverlayId);
+    };
+    document.addEventListener("keydown", handleOverlayDeleteKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleOverlayDeleteKeyDown);
+    };
+  }, [handleOverlayClose, selectedOverlayId, setSelectedOverlay]);
+  import_react4.useEffect(() => {
+    drawGrid();
+  }, [drawGrid]);
+  import_react4.useEffect(() => {
+    if (isResizingColumn || isResizingRow !== null) {
+      document.addEventListener("mousemove", handleResizeMove);
+      document.addEventListener("mouseup", handleResizeEnd);
+      document.body.style.cursor = isResizingColumn ? "col-resize" : "row-resize";
+      return () => {
+        document.removeEventListener("mousemove", handleResizeMove);
+        document.removeEventListener("mouseup", handleResizeEnd);
+        document.body.style.cursor = "";
+      };
+    }
+  }, [isResizingColumn, isResizingRow, handleResizeMove, handleResizeEnd]);
+  import_react4.useEffect(() => {
+    const editingCleanup = selectionManager.observeStateChange((state) => state.isEditing.type, (type) => {
+      if (type !== "none") {
+        const handleEditingKeydown = (e) => {
+          if ((e.metaKey || e.ctrlKey) && e.key === "v") {
+            return;
+          }
+          if (e.key === "Delete" || e.key === "Backspace") {
+            return;
+          }
+        };
+        window.addEventListener("keydown", handleEditingKeydown);
+        return () => {
+          window.removeEventListener("keydown", handleEditingKeydown);
+        };
+      }
+    }, true);
+    return editingCleanup;
+  }, [selectionManager]);
+  import_react4.default.useEffect(() => {
+    return selectionManager.observeStateChange((state) => state.hasFocus, (hasFocus2) => {
+      if (hasFocus2 && selectedOverlayId) {
+        setSelectedOverlay(null);
+      }
+    });
+  }, [selectionManager, selectedOverlayId, setSelectedOverlay]);
+  const getVisibleColumnHeaders = import_react4.useCallback(() => {
+    if (!width)
+      return [];
+    const headers = [];
+    let x = 0;
+    let startCol = 0;
+    while (x < viewport.scrollX) {
+      const col = indexToColumn(startCol);
+      const colWidth = getColumnWidth(col) * viewport.zoom;
+      if (x + colWidth > viewport.scrollX) {
+        break;
+      }
+      x += colWidth;
+      startCol++;
+    }
+    while (x < viewport.scrollX + width) {
+      const col = indexToColumn(startCol);
+      const colWidth = getColumnWidth(col) * viewport.zoom;
+      headers.push({
+        col,
+        colIndex: startCol
+      });
+      x += colWidth;
+      startCol++;
+    }
+    return headers;
+  }, [width, viewport, getColumnWidth]);
+  const getVisibleRowHeaders = import_react4.useCallback(() => {
+    if (!height)
+      return [];
+    const headers = [];
+    let y = 0;
+    let rowNum = 1;
+    while (y < viewport.scrollY) {
+      const rowHeight = getRowHeight(rowNum) * viewport.zoom;
+      if (y + rowHeight > viewport.scrollY) {
+        break;
+      }
+      y += rowHeight;
+      rowNum++;
+    }
+    while (y < viewport.scrollY + height) {
+      const rowHeight = getRowHeight(rowNum) * viewport.zoom;
+      headers.push({
+        row: rowNum,
+        rowIndex: rowNum - 1
+      });
+      y += rowHeight;
+      rowNum++;
+    }
+    return headers;
+  }, [height, viewport, getRowHeight]);
+  const { visibleOverlays, overlaysToRender } = import_react4.useMemo(() => {
+    if (!width || !height || !overlayChildren) {
+      return { visibleOverlays: [], overlaysToRender: [] };
+    }
+    const visible = [];
+    const toRender = [];
+    const newMountedPersistentIds = new Set(mountedPersistentOverlayIds);
+    overlayChildren.forEach((child) => {
+      const childLeft = child.x * viewport.zoom - viewport.scrollX + gridDims.headerWidth;
+      const childTop = child.y * viewport.zoom - viewport.scrollY + gridDims.headerHeight;
+      const childRight = childLeft + child.width * viewport.zoom;
+      const childBottom = childTop + child.height * viewport.zoom;
+      const margin = 100;
+      const viewportLeft = gridDims.headerWidth - margin;
+      const viewportTop = gridDims.headerHeight - margin;
+      const viewportRight = width + margin;
+      const viewportBottom = height + margin;
+      const isVisible = childRight >= viewportLeft && childLeft <= viewportRight && childBottom >= viewportTop && childTop <= viewportBottom;
+      if (isVisible) {
+        visible.push(child);
+        toRender.push(child);
+        if (child.persistent) {
+          newMountedPersistentIds.add(child.id);
+        }
+      } else if (child.persistent && mountedPersistentOverlayIds.has(child.id)) {
+        toRender.push(child);
+      }
+    });
+    if (newMountedPersistentIds.size !== mountedPersistentOverlayIds.size || [...newMountedPersistentIds].some((id) => !mountedPersistentOverlayIds.has(id))) {
+      setMountedPersistentOverlayIds(newMountedPersistentIds);
+    }
+    return { visibleOverlays: visible, overlaysToRender: toRender };
+  }, [
+    overlayChildren,
+    viewport.zoom,
+    viewport.scrollX,
+    viewport.scrollY,
+    width,
+    height,
+    gridDims.headerWidth,
+    gridDims.headerHeight,
+    mountedPersistentOverlayIds
+  ]);
+  const visibleCells = import_react4.default.useMemo(() => getVisibleCells(), [getVisibleCells]);
+  const visibleColumnHeaders = import_react4.default.useMemo(() => getVisibleColumnHeaders(), [getVisibleColumnHeaders]);
+  const visibleRowHeaders = import_react4.default.useMemo(() => getVisibleRowHeaders(), [getVisibleRowHeaders]);
+  const hasFocus = import_selection_manager.useSelectionManager(selectionManager, () => selectionManager.hasFocus);
+  import_react4.default.useEffect(() => {
+    if (!containerDivRef || !hasFocus || !parentSelected) {
+      return;
+    }
+    containerDivRef.addEventListener("wheel", handleWheel, {
+      passive: false
+    });
+    return () => {
+      containerDivRef.removeEventListener("wheel", handleWheel);
+    };
+  }, [containerDivRef, handleWheel, hasFocus, parentSelected]);
+  import_react4.useImperativeHandle(ref, () => ({
+    focus: () => {
+      selectionManager.focus();
+    },
+    blur: () => {
+      selectionManager.blur();
+    }
+  }), [selectionManager]);
+  return /* @__PURE__ */ jsx_runtime3.jsx("div", {
+    className: cn("rsp-root", className),
+    style: { position: "relative", ...style },
+    ...containerProps,
+    children: /* @__PURE__ */ jsx_runtime3.jsx("div", {
+      style: { position: "absolute", inset: 0 },
+      ref: containerRef,
+      children: Boolean(width && height) && /* @__PURE__ */ jsx_runtime3.jsxs("div", {
+        ref: setContainerDivRef,
+        className: cn("rsp-container", { "rsp-focused": hasFocus }),
+        "data-testid": "spreadsheet-container",
+        style: {
+          width,
+          height
+        },
+        tabIndex: 0,
+        children: [
+          /* @__PURE__ */ jsx_runtime3.jsx("canvas", {
+            ref: canvasRef,
+            className: "rsp-canvas",
+            "data-testid": "spreadsheet-canvas",
+            style: { width, height }
+          }),
+          /* @__PURE__ */ jsx_runtime3.jsx("div", {
+            className: "rsp-column-headers",
+            "data-testid": "spreadsheet-column-headers",
+            style: {
+              left: gridDims.headerWidth,
+              right: 0,
+              height: gridDims.headerHeight,
+              zIndex: 20
+            },
+            children: /* @__PURE__ */ jsx_runtime3.jsx("div", {
+              style: {
+                transform: `translateX(${-viewport.scrollX}px) scale(${viewport.zoom})`,
+                transformOrigin: "0 0"
+              },
+              children: visibleColumnHeaders.map(({ col, colIndex }) => {
+                return /* @__PURE__ */ jsx_runtime3.jsx(HeaderComponent, {
+                  index: colIndex,
+                  type: "col",
+                  selectionManager,
+                  getColumnWidth,
+                  getRowHeight,
+                  handleColumnResizeStart,
+                  handleColumnResizeDoubleClick,
+                  handleRowResizeStart,
+                  handleRowResizeDoubleClick
+                }, col);
+              })
+            })
+          }),
+          /* @__PURE__ */ jsx_runtime3.jsx("div", {
+            className: "rsp-row-headers",
+            "data-testid": "spreadsheet-row-headers",
+            style: {
+              top: gridDims.headerHeight,
+              bottom: 0,
+              width: gridDims.headerWidth,
+              zIndex: 20
+            },
+            children: /* @__PURE__ */ jsx_runtime3.jsx("div", {
+              style: {
+                transform: `translateY(${-viewport.scrollY}px) scale(${viewport.zoom})`,
+                transformOrigin: "0 0"
+              },
+              children: visibleRowHeaders.map(({ row, rowIndex }) => {
+                return /* @__PURE__ */ jsx_runtime3.jsx(HeaderComponent, {
+                  index: rowIndex,
+                  type: "row",
+                  selectionManager,
+                  getColumnWidth,
+                  getRowHeight,
+                  handleColumnResizeStart,
+                  handleColumnResizeDoubleClick,
+                  handleRowResizeStart,
+                  handleRowResizeDoubleClick
+                }, row);
+              })
+            })
+          }),
+          /* @__PURE__ */ jsx_runtime3.jsx("div", {
+            className: "rsp-corner-header",
+            "data-testid": "spreadsheet-corner-header",
+            style: {
+              width: gridDims.headerWidth,
+              height: gridDims.headerHeight,
+              zIndex: 40
+            }
+          }),
+          /* @__PURE__ */ jsx_runtime3.jsx("div", {
+            className: "rsp-cells",
+            "data-testid": "spreadsheet-cells",
+            style: {
+              transform: `translate(${-viewport.scrollX}px, ${-viewport.scrollY}px) scale(${viewport.zoom})`,
+              transformOrigin: "0 0"
+            },
+            children: visibleCells.map((cell) => /* @__PURE__ */ jsx_runtime3.jsx(CellComponent, {
+              value: cellData.get(`${cell.col}${cell.row}`) ?? "",
+              row: cell.row,
+              col: cell.col,
+              selectionManager,
+              cellToPixelBase,
+              getColumnWidth,
+              getRowHeight,
+              customCellStyle,
+              customCellRenderer,
+              inputValue: cellData.get(`${cell.col}${cell.row}`) ?? "",
+              editInputVersion: retryingEdit?.rowIndex === cell.row - 1 && retryingEdit?.colIndex === columnToIndex(cell.col) ? retryingEdit.version : 0,
+              width,
+              height
+            }, `${cell.col}${cell.row}`))
+          }),
+          components && overlayChildren && overlayChildren.length > 0 && /* @__PURE__ */ jsx_runtime3.jsxs("div", {
+            ref: overlayContainerRef,
+            className: "rsp-overlays",
+            "data-testid": "spreadsheet-overlays",
+            onClick: handleOverlayBackgroundClick,
+            children: [
+              overlaysToRender.map((child) => {
+                const isChildVisible = visibleOverlays.includes(child);
+                const isSelected = selectedOverlayId === child.id;
+                const childZoom = child.zoom || 1;
+                const isTextBox = child.component === "RichText";
+                const isMinimized = Boolean(child.minimized && !isTextBox);
+                return /* @__PURE__ */ jsx_runtime3.jsxs("div", {
+                  style: {
+                    position: "absolute",
+                    width: child.width,
+                    height: isMinimized ? 0 : child.height,
+                    transform: `translate(${child.x * viewport.zoom - viewport.scrollX + gridDims.headerWidth}px, ${child.y * viewport.zoom - viewport.scrollY + gridDims.headerHeight}px) scale(${viewport.zoom})`,
+                    transformOrigin: "0 0",
+                    display: isChildVisible ? "block" : "none",
+                    pointerEvents: "auto",
+                    zIndex: isSelected ? 50 : 5
+                  },
+                  onClick: (e) => handleOverlayClick(child.id, e),
+                  children: [
+                    /* @__PURE__ */ jsx_runtime3.jsx(Frame, {
+                      child,
+                      isSelected,
+                      zoom: viewport.zoom,
+                      viewport$: viewportStreamRef.current,
+                      onMove: (dx, dy) => handleOverlayMove(child.id, dx, dy),
+                      onResize: (dw, dh, shift, handle) => handleOverlayResize(child.id, dw, dh, shift, handle),
+                      onSnapToCellsToggle: (enabled) => handleOverlaySnapToCellsToggle(child.id, enabled),
+                      onReset: () => handleOverlayReset(child.id),
+                      onMinimize: () => handleOverlayMinimize(child.id),
+                      onClose: () => handleOverlayClose(child.id),
+                      onInteractionEnd: commitCurrentOverlayChildren
+                    }),
+                    !isMinimized && /* @__PURE__ */ jsx_runtime3.jsx("div", {
+                      style: {
+                        transform: childZoom !== 1 ? `scale(${childZoom})` : undefined,
+                        transformOrigin: "0 0",
+                        width: child.width / childZoom,
+                        height: child.height / childZoom,
+                        position: "absolute",
+                        overflow: "hidden",
+                        top: 0,
+                        left: 0
+                      },
+                      children: components[child.component]?.(child, {
+                        isSelected,
+                        isMinimized: !!child.minimized
+                      })
+                    })
+                  ]
+                }, child.id);
+              }),
+              overlayPlaceholder && placeholderPos && /* @__PURE__ */ jsx_runtime3.jsx("div", {
+                className: "rsp-overlay-placeholder",
+                style: {
+                  width: overlayPlaceholder.width,
+                  height: overlayPlaceholder.height,
+                  transform: `translate(${placeholderPos.x * viewport.zoom - viewport.scrollX + gridDims.headerWidth}px, ${placeholderPos.y * viewport.zoom - viewport.scrollY + gridDims.headerHeight}px) scale(${viewport.zoom})`,
+                  transformOrigin: "0 0"
+                },
+                children: /* @__PURE__ */ jsx_runtime3.jsx("div", {
+                  className: "rsp-overlay-placeholder-label",
+                  children: overlayPlaceholder.title
+                })
+              })
+            ]
+          })
+        ]
+      })
+    })
+  });
+});
+Spreadsheet.displayName = "Spreadsheet";
+// src/workbook/workbook.tsx
+var import_formula_engine2 = require("@ricsam/formula-engine");
+var import_react5 = __toESM(require("react"));
+
+// src/workbook/border-sides.ts
+function normalizeBorderSides(sides, defaultAllWhenUnset = false) {
+  if (!sides) {
+    return {
+      top: defaultAllWhenUnset,
+      right: defaultAllWhenUnset,
+      bottom: defaultAllWhenUnset,
+      left: defaultAllWhenUnset
+    };
+  }
+  return {
+    top: Boolean(sides.top),
+    right: Boolean(sides.right),
+    bottom: Boolean(sides.bottom),
+    left: Boolean(sides.left)
+  };
+}
+function hasAnyBorderSide(sides) {
+  return sides.top || sides.right || sides.bottom || sides.left;
+}
+
+// src/workbook/cell-data-type.ts
+var TRUE_LITERALS = new Set(["true", "yes"]);
+var FALSE_LITERALS = new Set(["false", "no"]);
+var parseNumeric = (value) => {
+  const trimmed = value.trim();
+  if (trimmed === "")
+    return;
+  const normalized = trimmed.includes(",") && !trimmed.includes(".") && trimmed.split(",").length === 2 ? trimmed.replace(",", ".") : trimmed;
+  const parsed = Number(normalized);
+  return Number.isFinite(parsed) ? parsed : undefined;
+};
+function coerceCellInput(value, dataType = "general") {
+  if (value === "")
+    return;
+  if (value.startsWith("="))
+    return value;
+  switch (dataType) {
+    case "text":
+      return value;
+    case "number": {
+      const parsed = parseNumeric(value);
+      return parsed === undefined ? value : parsed;
+    }
+    case "boolean": {
+      const lower = value.trim().toLowerCase();
+      if (TRUE_LITERALS.has(lower))
+        return true;
+      if (FALSE_LITERALS.has(lower))
+        return false;
+      return value;
+    }
+    case "general":
+    default: {
+      const lower = value.trim().toLowerCase();
+      if (TRUE_LITERALS.has(lower))
+        return true;
+      if (FALSE_LITERALS.has(lower))
+        return false;
+      const parsed = parseNumeric(value);
+      if (parsed !== undefined && String(parsed) === value.trim()) {
+        return parsed;
+      }
+      return value;
+    }
+  }
+}
+function getCellDisplayText(value) {
+  if (value === undefined)
+    return "";
+  if (typeof value === "boolean")
+    return value ? "TRUE" : "FALSE";
+  if (typeof value === "number") {
+    return value.toLocaleString("en-US", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 10
+    });
+  }
+  return String(value);
+}
+function getCellDisplayValue(value) {
+  if (value === undefined)
+    return "";
+  if (typeof value === "boolean")
+    return value ? "TRUE" : "FALSE";
+  return String(value);
+}
+
+// src/workbook/cell-edit-error.ts
+var listeners = new Set;
+function onCellEditError(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function queueCellEditError(error) {
+  if (listeners.size === 0) {
+    console.error("Cell edit rejected:", error);
+    return;
+  }
+  listeners.forEach((listener) => {
+    try {
+      listener(error);
+    } catch (listenerError) {
+      console.error("Cell edit error listener threw:", listenerError);
+    }
+  });
+}
+
+// src/workbook/workbook-selection-manager.ts
+var import_formula_engine = require("@ricsam/formula-engine");
+
+class WorkbookSelectionManager {
+  managers = new Map;
+  lastFocusedManager = null;
+  listeners = new Set;
+  cleanupFunctions = new Map;
+  smAreaToSpreadsheetRange(area) {
+    const rowEnd = area.end.row.type === "infinity" ? { type: "infinity", sign: "positive" } : { type: "number", value: area.end.row.value };
+    const colEnd = area.end.col.type === "infinity" ? { type: "infinity", sign: "positive" } : { type: "number", value: area.end.col.value };
+    return {
+      start: {
+        col: area.start.col,
+        row: area.start.row
+      },
+      end: {
+        row: rowEnd,
+        col: colEnd
+      }
+    };
+  }
+  add(manager, context) {
+    this.managers.set(manager, context);
+    const focusCleanup = manager.observeStateChange((state) => state.hasFocus, (hasFocus) => {
+      if (hasFocus) {
+        this.lastFocusedManager = { sm: manager, context };
+        this.emitChange();
+      }
+    });
+    const selectionCleanup = manager.observeStateChange((state) => JSON.stringify(state.selections), (selectionsJson) => {
+      const selections = JSON.parse(selectionsJson);
+      if (selections && selections.length > 0) {
+        this.lastFocusedManager = { sm: manager, context };
+        this.emitChange();
+      }
+    });
+    const cleanup = () => {
+      focusCleanup();
+      selectionCleanup();
+      this.managers.delete(manager);
+      this.cleanupFunctions.delete(manager);
+      if (this.lastFocusedManager?.sm === manager) {
+        this.lastFocusedManager = null;
+      }
+    };
+    this.cleanupFunctions.set(manager, cleanup);
+    return cleanup;
+  }
+  getLastFocusedSelectionManager() {
+    return this.lastFocusedManager;
+  }
+  getSelections() {
+    if (!this.lastFocusedManager) {
+      return [];
+    }
+    const { sm, context } = this.lastFocusedManager;
+    const state = sm.getState();
+    return state.selections.map((area) => ({
+      workbookName: context.workbookName,
+      sheetName: context.sheetName,
+      range: this.smAreaToSpreadsheetRange(area)
+    }));
+  }
+  getLastSelection() {
+    const selections = this.getSelections();
+    return selections[selections.length - 1] ?? null;
+  }
+  onSelectionChange(callback) {
+    this.listeners.add(callback);
+    return () => {
+      this.listeners.delete(callback);
+    };
+  }
+  formatLastSelectionAsRange() {
+    const lastSelection = this.getLastSelection();
+    if (!lastSelection) {
+      return "";
+    }
+    const { workbookName, sheetName, range } = lastSelection;
+    const startCol = import_formula_engine.indexToColumn(range.start.col);
+    const startRow = range.start.row + 1;
+    let endCol;
+    let endRow;
+    if (range.end.col.type === "infinity") {
+      endCol = "∞";
+    } else {
+      endCol = import_formula_engine.indexToColumn(range.end.col.value);
+    }
+    if (range.end.row.type === "infinity") {
+      endRow = "∞";
+    } else {
+      endRow = String(range.end.row.value + 1);
+    }
+    let rangeStr;
+    const isColInfinity = range.end.col.type === "infinity";
+    const isRowInfinity = range.end.row.type === "infinity";
+    if (isColInfinity && isRowInfinity) {
+      rangeStr = `${startCol}${startRow}:INFINITY`;
+    } else if (isColInfinity) {
+      rangeStr = `${startCol}${startRow}:${endRow}`;
+    } else if (isRowInfinity) {
+      rangeStr = `${startCol}${startRow}:${endCol}`;
+    } else {
+      rangeStr = `${startCol}${startRow}:${endCol}${endRow}`;
+    }
+    const needsQuotes = /[ '!]/.test(sheetName);
+    const sheetRef = needsQuotes ? `'${sheetName.replace(/'/g, "''")}'` : sheetName;
+    return `[${workbookName}]${sheetRef}!${rangeStr}`;
+  }
+  blur() {
+    this.managers.forEach((context, manager) => {
+      manager.clearSelections();
+      manager.blur();
+    });
+    this.lastFocusedManager = null;
+    this.emitChange();
+  }
+  focusWorkbook(workbookName) {
+    for (const [manager, context] of this.managers) {
+      if (context.workbookName === workbookName) {
+        manager.focus();
+        this.lastFocusedManager = { sm: manager, context };
+        this.emitChange();
+        return;
+      }
+    }
+  }
+  focusSheet(workbookName, sheetName) {
+    for (const [manager, context] of this.managers) {
+      if (context.workbookName === workbookName && context.sheetName === sheetName) {
+        manager.focus();
+        this.lastFocusedManager = { sm: manager, context };
+        this.emitChange();
+        return true;
+      }
+    }
+    return false;
+  }
+  focusCell(workbookName, sheetName, row, col) {
+    for (const [manager, context] of this.managers) {
+      if (context.workbookName === workbookName && context.sheetName === sheetName) {
+        const selection = {
+          start: { row, col },
+          end: {
+            row: { type: "number", value: row },
+            col: { type: "number", value: col }
+          }
+        };
+        manager.setState({ selections: [selection] });
+        manager.focus();
+        this.lastFocusedManager = { sm: manager, context };
+        this.emitChange();
+        return true;
+      }
+    }
+    return false;
+  }
+  emitChange() {
+    const currentSelection = this.getLastSelection();
+    const selections = currentSelection ? [currentSelection] : [];
+    this.listeners.forEach((listener) => {
+      listener(selections);
+    });
+  }
+}
+
+// src/workbook/workbook.tsx
+var jsx_runtime4 = require("react/jsx-runtime");
+var getWrapCellStyle = (style) => style?.wrapText ? {
+  whiteSpace: "pre-wrap",
+  overflowWrap: "anywhere",
+  wordBreak: "normal",
+  textOverflow: "clip",
+  alignItems: "flex-start"
+} : {};
+var getWrapContentStyle = (style) => style?.wrapText ? {
+  whiteSpace: "pre-wrap",
+  overflowWrap: "anywhere",
+  wordBreak: "normal",
+  textOverflow: "clip",
+  width: "100%",
+  minWidth: 0
+} : {};
+var getBorderCellStyle = (style) => (() => {
+  if (!style?.borderColor) {
+    return {};
+  }
+  const borderSides = normalizeBorderSides(style.borderSides, true);
+  if (!hasAnyBorderSide(borderSides)) {
+    return {};
+  }
+  return {
+    ...borderSides.top && { borderTopColor: style.borderColor },
+    ...borderSides.right && { borderRightColor: style.borderColor },
+    ...borderSides.bottom && { borderBottomColor: style.borderColor },
+    ...borderSides.left && { borderLeftColor: style.borderColor }
+  };
+})();
+var Edit2Icon = ({ className = "", ...props }) => /* @__PURE__ */ jsx_runtime4.jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  className,
+  ...props,
+  children: [
+    /* @__PURE__ */ jsx_runtime4.jsx("path", {
+      d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"
+    }),
+    /* @__PURE__ */ jsx_runtime4.jsx("path", {
+      d: "m15 5 4 4"
+    })
+  ]
+});
+var Trash2Icon = ({ className = "", ...props }) => /* @__PURE__ */ jsx_runtime4.jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  className,
+  ...props,
+  children: [
+    /* @__PURE__ */ jsx_runtime4.jsx("path", {
+      d: "M3 6h18"
+    }),
+    /* @__PURE__ */ jsx_runtime4.jsx("path", {
+      d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+    }),
+    /* @__PURE__ */ jsx_runtime4.jsx("path", {
+      d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+    }),
+    /* @__PURE__ */ jsx_runtime4.jsx("line", {
+      x1: "10",
+      x2: "10",
+      y1: "11",
+      y2: "17"
+    }),
+    /* @__PURE__ */ jsx_runtime4.jsx("line", {
+      x1: "14",
+      x2: "14",
+      y1: "11",
+      y2: "17"
+    })
+  ]
+});
+var PlusIcon = ({ className = "", ...props }) => /* @__PURE__ */ jsx_runtime4.jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  className,
+  ...props,
+  children: [
+    /* @__PURE__ */ jsx_runtime4.jsx("path", {
+      d: "M5 12h14"
+    }),
+    /* @__PURE__ */ jsx_runtime4.jsx("path", {
+      d: "M12 5v14"
+    })
+  ]
+});
+var MinusIcon = ({ className = "", ...props }) => /* @__PURE__ */ jsx_runtime4.jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  className,
+  ...props,
+  children: /* @__PURE__ */ jsx_runtime4.jsx("path", {
+    d: "M5 12h14"
+  })
+});
+function useEngine(engine) {
+  const [state, setState] = import_react5.useState(() => engine.getState());
+  import_react5.default.useEffect(() => {
+    return engine.onUpdate(() => {
+      setState(engine.getState());
+    });
+  }, [engine]);
+  return state;
+}
+
+class WorkbookClipboardManager extends ClipboardUtils {
+  engine;
+  constructor(engine) {
+    super();
+    this.engine = engine;
+  }
+  copiedCells = [];
+  signature = "";
+  isCut = false;
+  triggerCopy(context) {
+    const cellData = this.engine.getSheet({
+      workbookName: context.workbookName,
+      sheetName: context.sheetName
+    })?.content;
+    if (!cellData)
+      return;
+    const extractedCells = this.extractCellsFromSelection(context.selectionManager, cellData);
+    if (!extractedCells)
+      return;
+    const { width, height, cells } = extractedCells;
+    const valueExportGrid = this.createExportGrid(width, height);
+    const formulaExportGrid = this.createExportGrid(width, height);
+    this.copiedCells = [];
+    this.isCut = context.cut ?? false;
+    cells.forEach(({ relative, absolute }) => {
+      const cellAddress = {
+        workbookName: context.workbookName,
+        sheetName: context.sheetName,
+        colIndex: absolute.columnIndex,
+        rowIndex: absolute.rowIndex
+      };
+      this.copiedCells.push(cellAddress);
+      const value = this.engine.getCellValue(cellAddress, false);
+      const formula = cellData.get(import_formula_engine2.getCellReference(cellAddress));
+      valueExportGrid[relative.rowIndex][relative.columnIndex] = getCellDisplayValue(value);
+      formulaExportGrid[relative.rowIndex][relative.columnIndex] = formula;
+    });
+    this.signature = this.getTsvString(context.copyType === "formula" ? formulaExportGrid : valueExportGrid);
+    this.writeToOsClipboard(context.copyType === "formula" ? formulaExportGrid : valueExportGrid);
+  }
+  triggerPaste(context) {
+    if (context.rawString === this.signature) {
+      const selections = context.selectionManager.selections;
+      if (!selections || selections.length === 0)
+        return;
+      const convertSMAreaToSpreadsheetRange = (area) => {
+        return {
+          start: {
+            col: area.start.col,
+            row: area.start.row
+          },
+          end: {
+            col: area.end.col.type === "infinity" ? { type: "infinity", sign: "positive" } : { type: "number", value: area.end.col.value },
+            row: area.end.row.type === "infinity" ? { type: "infinity", sign: "positive" } : { type: "number", value: area.end.row.value }
+          }
+        };
+      };
+      const areas = selections.map(convertSMAreaToSpreadsheetRange);
+      console.log("pasting", { cut: this.isCut });
+      this.engine.smartPaste(this.copiedCells, {
+        workbookName: context.workbookName,
+        sheetName: context.sheetName,
+        areas
+      }, {
+        cut: this.isCut,
+        type: context.pasteType,
+        include: "all"
+      });
+      this.isCut = false;
+    } else {
+      context.selectionManager.saveCellValues(context.updates);
+    }
+  }
+}
+function FormulaSheet({
+  sheetName,
+  workbookName,
+  engine,
+  verboseErrors = false,
+  selection,
+  selectionManager,
+  customCellStyle,
+  customCellRenderer,
+  onCellDataChangeError = queueCellEditError,
+  components,
+  overlayChildren,
+  selectedOverlayId,
+  onOverlaySelect,
+  onOverlayChildrenChange,
+  overlayPlaceholder,
+  clipboardManager: controlledClipboardManager,
+  isSelected = false,
+  toolbar,
+  showFormulas = false,
+  ...rest
+}) {
+  const [selectedArea, setSelectedArea] = import_react5.useState(null);
+  const clipboardManager = import_react5.default.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
+  const state = useEngine(engine);
+  const sheet = state.workbooks.get(workbookName)?.sheets.get(sheetName);
+  const onCellDataChange = import_react5.useCallback((updatedSpreadsheet) => {
+    const data = new Map(updatedSpreadsheet);
+    data.forEach((value, key) => {
+      if (typeof value === "string") {
+        const { colIndex, rowIndex } = import_formula_engine2.parseCellReference(key);
+        const coercedValue = coerceCellInput(value, engine.getCellDataType({ workbookName, sheetName, colIndex, rowIndex }));
+        if (coercedValue === undefined) {
+          data.delete(key);
+        } else {
+          data.set(key, coercedValue);
+        }
+      }
+    });
+    engine.setSheetContent({ sheetName, workbookName }, data);
+  }, [sheetName, engine, workbookName]);
+  const passedSelectionEffects = selection?.effects;
+  const selectionManagerEffects = import_react5.useCallback((spreadsheetSelectionManager) => {
+    const convertSmAreaToSpreadsheetRange = (area) => {
+      const rowEnd = area.end.row.type === "infinity" ? {
+        type: "infinity",
+        sign: "positive"
+      } : {
+        type: "number",
+        value: area.end.row.value
+      };
+      const colEnd = area.end.col.type === "infinity" ? {
+        type: "infinity",
+        sign: "positive"
+      } : {
+        type: "number",
+        value: area.end.col.value
+      };
+      return {
+        start: {
+          col: area.start.col,
+          row: area.start.row
+        },
+        end: {
+          row: rowEnd,
+          col: colEnd
+        }
+      };
+    };
+    const cleanups = [
+      spreadsheetSelectionManager.listenToCopy((cut) => {
+        console.log("cut??", cut);
+        clipboardManager.triggerCopy({
+          workbookName,
+          sheetName,
+          selectionManager: spreadsheetSelectionManager,
+          copyType: showFormulas ? "formula" : "value",
+          cut
+        });
+      }),
+      spreadsheetSelectionManager.listenToPaste(({ updates, rawString }) => {
+        clipboardManager.triggerPaste({
+          workbookName,
+          sheetName,
+          selectionManager: spreadsheetSelectionManager,
+          updates,
+          rawString,
+          pasteType: "formula"
+        });
+      }),
+      spreadsheetSelectionManager.listenToFill((ev) => {
+        if (ev.type === "extend") {
+          engine.autoFill({ sheetName, workbookName }, convertSmAreaToSpreadsheetRange(ev.seedRange), [convertSmAreaToSpreadsheetRange(ev.fillRange)], ev.direction);
+        } else {
+          engine.clearSpreadsheetRange({
+            sheetName,
+            workbookName,
+            range: convertSmAreaToSpreadsheetRange(ev.rangeToClear)
+          });
+        }
+      }),
+      spreadsheetSelectionManager.observeStateChange((state2) => {
+        const currentSelection = state2.selections.length === 1 ? state2.selections[0] : undefined;
+        return currentSelection;
+      }, (selection2) => {
+        setSelectedArea(selection2 ?? null);
+      })
+    ];
+    const handleUndoRedoKeyDown = (event) => {
+      if (!spreadsheetSelectionManager.hasFocus)
+        return;
+      if (spreadsheetSelectionManager.isEditing.type !== "none")
+        return;
+      const target = event.target;
+      if (target instanceof HTMLElement) {
+        const isEditableTarget = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable || Boolean(target.closest('[contenteditable="true"]'));
+        if (isEditableTarget)
+          return;
+      }
+      if (!event.metaKey && !event.ctrlKey)
+        return;
+      const key = event.key.toLowerCase();
+      const isUndo = key === "z" && !event.shiftKey;
+      const isRedo = key === "y" || key === "z" && event.shiftKey;
+      if (!isUndo && !isRedo)
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (isUndo) {
+        engine.undo();
+      } else {
+        engine.redo();
+      }
+    };
+    document.addEventListener("keydown", handleUndoRedoKeyDown);
+    cleanups.push(() => {
+      document.removeEventListener("keydown", handleUndoRedoKeyDown);
+    });
+    if (selectionManager) {
+      const workbookManagerCleanup = selectionManager.add(spreadsheetSelectionManager, {
+        workbookName,
+        sheetName
+      });
+      cleanups.push(workbookManagerCleanup);
+    }
+    let userCleanup;
+    if (passedSelectionEffects) {
+      userCleanup = passedSelectionEffects(spreadsheetSelectionManager);
+    }
+    return () => {
+      cleanups.forEach((cleanup) => cleanup());
+      if (userCleanup) {
+        userCleanup();
+      }
+    };
+  }, [
+    clipboardManager,
+    engine,
+    passedSelectionEffects,
+    selectionManager,
+    sheetName,
+    showFormulas,
+    workbookName
+  ]);
+  if (!sheet) {
+    return /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+      className: "rsp-root rsp-workbook",
+      children: [
+        toolbar,
+        /* @__PURE__ */ jsx_runtime4.jsx("div", {
+          style: { flex: 1 }
+        })
+      ]
+    });
+  }
+  return /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+    className: "rsp-root rsp-workbook",
+    children: [
+      toolbar,
+      /* @__PURE__ */ jsx_runtime4.jsx("div", {
+        className: "rsp-workbook-body",
+        children: /* @__PURE__ */ jsx_runtime4.jsx(Spreadsheet, {
+          disableClipboard: true,
+          style: { height: "100%", width: "100%" },
+          cellData: sheet?.content,
+          onCellDataChange,
+          onCellDataChangeError,
+          ...rest,
+          components,
+          overlayChildren,
+          selectedOverlayId,
+          onOverlaySelect,
+          onOverlayChildrenChange,
+          overlayPlaceholder,
+          parentSelected: isSelected,
+          selection: {
+            ...selection,
+            effects: selectionManagerEffects
+          },
+          containerProps: isSelected && selectedArea ? {
+            "data-grid-no-interaction": "true"
+          } : {},
+          customCellStyle: (cell) => {
+            const conditionalStyle = engine.getCellStyle({
+              sheetName,
+              colIndex: cell.colIndex,
+              rowIndex: cell.rowIndex,
+              workbookName
+            });
+            const tableInfo = engine.isCellInTable({
+              sheetName,
+              colIndex: cell.colIndex,
+              rowIndex: cell.rowIndex,
+              workbookName
+            });
+            if (!tableInfo) {
+              if (conditionalStyle) {
+                return {
+                  ...conditionalStyle.backgroundColor && {
+                    backgroundColor: conditionalStyle.backgroundColor
+                  },
+                  ...conditionalStyle.color && {
+                    color: conditionalStyle.color
+                  },
+                  ...conditionalStyle.fontSize && {
+                    fontSize: conditionalStyle.fontSize
+                  },
+                  ...conditionalStyle.bold && {
+                    fontWeight: "bold"
+                  },
+                  ...conditionalStyle.italic && {
+                    fontStyle: "italic"
+                  },
+                  ...conditionalStyle.underline && {
+                    textDecoration: "underline"
+                  },
+                  ...getBorderCellStyle(conditionalStyle),
+                  ...getWrapCellStyle(conditionalStyle)
+                };
+              }
+              return {};
+            }
+            const isHeaderRow = cell.rowIndex === tableInfo.start.rowIndex;
+            const isFirstColumn = cell.colIndex === tableInfo.start.colIndex;
+            const isLastColumn = cell.colIndex === tableInfo.start.colIndex + tableInfo.headers.size - 1;
+            const isLastRow = tableInfo.endRow.type === "number" ? cell.rowIndex === tableInfo.endRow.value : false;
+            const style = {
+              border: "1px solid var(--table-border-light)"
+            };
+            if (isHeaderRow) {
+              style.backgroundColor = "var(--table-header-bg)";
+              style.color = "var(--table-header-color)";
+              style.fontWeight = "bold";
+              style.borderBottom = "2px solid var(--table-header-border)";
+            } else {
+              const dataRowIndex = cell.rowIndex - tableInfo.start.rowIndex - 1;
+              if (dataRowIndex % 2 === 0) {
+                style.backgroundColor = "var(--table-even-row-bg)";
+              } else {
+                style.backgroundColor = "var(--table-odd-row-bg)";
+              }
+            }
+            if (isFirstColumn) {
+              style.borderLeft = "2px solid var(--table-border-color)";
+            }
+            if (isLastColumn) {
+              style.borderRight = "2px solid var(--table-border-color)";
+            }
+            if (isHeaderRow) {
+              style.borderTop = "2px solid var(--table-border-color)";
+            }
+            if (isLastRow) {
+              style.borderBottom = "2px solid var(--table-border-color)";
+            }
+            if (conditionalStyle?.backgroundColor) {
+              style.backgroundColor = conditionalStyle.backgroundColor;
+            }
+            if (conditionalStyle?.color) {
+              style.color = conditionalStyle.color;
+            }
+            if (conditionalStyle?.fontSize) {
+              style.fontSize = conditionalStyle.fontSize;
+            }
+            if (conditionalStyle?.bold) {
+              style.fontWeight = "bold";
+            }
+            if (conditionalStyle?.italic) {
+              style.fontStyle = "italic";
+            }
+            if (conditionalStyle?.underline) {
+              style.textDecoration = "underline";
+            }
+            Object.assign(style, getBorderCellStyle(conditionalStyle));
+            Object.assign(style, getWrapCellStyle(conditionalStyle));
+            if (customCellStyle) {
+              return customCellStyle(cell, style);
+            }
+            return style;
+          },
+          customCellRenderer: (cell) => {
+            const cellRef = import_formula_engine2.getCellReference({
+              colIndex: cell.colIndex,
+              rowIndex: cell.rowIndex
+            });
+            const value = showFormulas ? sheet?.content.get(cellRef) : engine.getCellValue({
+              sheetName,
+              workbookName,
+              colIndex: cell.colIndex,
+              rowIndex: cell.rowIndex
+            }, verboseErrors);
+            const conditionalStyle = engine.getCellStyle({
+              sheetName,
+              colIndex: cell.colIndex,
+              rowIndex: cell.rowIndex,
+              workbookName
+            });
+            const conditionalStyleProps = {};
+            if (conditionalStyle?.backgroundColor) {
+              conditionalStyleProps.backgroundColor = conditionalStyle.backgroundColor;
+            }
+            if (conditionalStyle?.color) {
+              conditionalStyleProps.color = conditionalStyle.color;
+            }
+            if (conditionalStyle?.fontSize) {
+              conditionalStyleProps.fontSize = conditionalStyle.fontSize;
+            }
+            if (conditionalStyle?.bold) {
+              conditionalStyleProps.fontWeight = "bold";
+            }
+            if (conditionalStyle?.italic) {
+              conditionalStyleProps.fontStyle = "italic";
+            }
+            if (conditionalStyle?.underline) {
+              conditionalStyleProps.textDecoration = "underline";
+            }
+            Object.assign(conditionalStyleProps, getWrapContentStyle(conditionalStyle));
+            let defaultElement;
+            if (showFormulas) {
+              defaultElement = /* @__PURE__ */ jsx_runtime4.jsx("div", {
+                "data-conditional-background": conditionalStyle?.backgroundColor,
+                "data-conditional-text-color": conditionalStyle?.color,
+                style: conditionalStyleProps,
+                children: getCellDisplayText(value)
+              });
+            } else if (typeof value === "boolean") {
+              defaultElement = /* @__PURE__ */ jsx_runtime4.jsx("div", {
+                "data-conditional-background": conditionalStyle?.backgroundColor,
+                "data-conditional-text-color": conditionalStyle?.color,
+                "data-type": "boolean",
+                style: {
+                  ...conditionalStyleProps,
+                  width: "100%",
+                  textAlign: "center",
+                  fontFamily: "'Courier New', monospace"
+                },
+                children: value ? "TRUE" : "FALSE"
+              });
+            } else if (typeof value === "number") {
+              defaultElement = /* @__PURE__ */ jsx_runtime4.jsx("div", {
+                "data-conditional-background": conditionalStyle?.backgroundColor,
+                "data-conditional-text-color": conditionalStyle?.color,
+                "data-type": "number",
+                style: { ...conditionalStyleProps, width: "100%", textAlign: "right" },
+                children: value.toLocaleString("en-US", {
+                  minimumFractionDigits: 0,
+                  maximumFractionDigits: 10
+                })
+              });
+            } else {
+              defaultElement = /* @__PURE__ */ jsx_runtime4.jsx("div", {
+                "data-conditional-background": conditionalStyle?.backgroundColor,
+                "data-conditional-text-color": conditionalStyle?.color,
+                style: { ...conditionalStyleProps, width: "100%", textAlign: "left" },
+                children: getCellDisplayText(value)
+              });
+            }
+            if (customCellRenderer) {
+              return customCellRenderer(cell, defaultElement);
+            }
+            return defaultElement;
+          }
+        })
+      })
+    ]
+  });
+}
+function FormulaWorkbook({
+  clipboardManager: controlledClipboardManager,
+  workbookName,
+  engine,
+  activeSheet: controlledActiveSheet,
+  onActiveSheetChange,
+  verboseErrors = false,
+  selectionManager,
+  components,
+  sheetOverlayChildren,
+  sheetSelectedOverlayIds,
+  sheetLayouts,
+  onSheetColumnWidthsChange,
+  onSheetRowHeightsChange,
+  onOverlaySelect,
+  onOverlayChildrenChange,
+  overlayPlaceholder,
+  isSelected = false,
+  toolbar,
+  showFormulas = false,
+  ...rest
+}) {
+  const state = useEngine(engine);
+  const [renamingSheet, setRenamingSheet] = import_react5.useState(null);
+  const [newSheetName, setNewSheetName] = import_react5.useState("");
+  const [spreadsheetZoom, setSpreadsheetZoom] = import_react5.useState(1);
+  const renameCommittedRef = import_react5.useRef(false);
+  const clipboardManager = import_react5.default.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
+  const sheetNames = engine.getOrderedSheetNames(workbookName);
+  const [internalActiveSheet, setInternalActiveSheet] = import_react5.useState(() => {
+    return sheetNames[0] || "";
+  });
+  const isControlledRef = import_react5.useRef(controlledActiveSheet !== undefined);
+  import_react5.default.useEffect(() => {
+    const isCurrentlyControlled = controlledActiveSheet !== undefined;
+    if (isControlledRef.current !== isCurrentlyControlled) {
+      console.error(`FormulaWorkbook: Component changed from ${isControlledRef.current ? "controlled" : "uncontrolled"} to ${isCurrentlyControlled ? "controlled" : "uncontrolled"} mode. ` + `A component should not switch between controlled and uncontrolled modes. ` + `Decide between using activeSheet and onActiveSheetChange props (controlled) or neither (uncontrolled) for the lifetime of the component.`);
+    }
+    isControlledRef.current = isCurrentlyControlled;
+  }, [controlledActiveSheet]);
+  const activeSheet = controlledActiveSheet ?? internalActiveSheet;
+  const handleActiveSheetChange = import_react5.useCallback((sheetName) => {
+    if (onActiveSheetChange) {
+      onActiveSheetChange(sheetName);
+    } else {
+      setInternalActiveSheet(sheetName);
+    }
+  }, [onActiveSheetChange]);
+  const activeSheetOverlayChildren = sheetOverlayChildren?.[activeSheet];
+  const activeSheetSelectedOverlayId = sheetSelectedOverlayIds?.[activeSheet];
+  const activeSheetColumnWidths = sheetLayouts?.[activeSheet]?.columnWidths;
+  const activeSheetRowHeights = sheetLayouts?.[activeSheet]?.rowHeights;
+  const handleOverlaySelect = import_react5.useCallback((overlayId) => {
+    onOverlaySelect?.(activeSheet, overlayId);
+  }, [onOverlaySelect, activeSheet]);
+  const handleOverlayChildrenChange = import_react5.useCallback((children) => {
+    onOverlayChildrenChange?.(activeSheet, children);
+  }, [onOverlayChildrenChange, activeSheet]);
+  const handleColumnWidthsChange = import_react5.useCallback((columnWidths) => {
+    onSheetColumnWidthsChange?.(activeSheet, columnWidths);
+  }, [activeSheet, onSheetColumnWidthsChange]);
+  const handleRowHeightsChange = import_react5.useCallback((rowHeights) => {
+    onSheetRowHeightsChange?.(activeSheet, rowHeights);
+  }, [activeSheet, onSheetRowHeightsChange]);
+  const addSheet = () => {
+    try {
+      const newSheet = engine.createSheet({
+        workbookName
+      });
+      handleActiveSheetChange(newSheet.name);
+    } catch (error) {
+      console.error("Failed to add sheet:", error);
+    }
+  };
+  const startRenaming = (sheetName) => {
+    renameCommittedRef.current = false;
+    setRenamingSheet(sheetName);
+    setNewSheetName(sheetName);
+  };
+  const cancelRenaming = () => {
+    setRenamingSheet(null);
+    setNewSheetName("");
+  };
+  const renameSheet = (oldName, newName) => {
+    if (renameCommittedRef.current) {
+      cancelRenaming();
+      return;
+    }
+    if (!newName.trim() || newName.trim() === oldName) {
+      cancelRenaming();
+      return;
+    }
+    try {
+      renameCommittedRef.current = true;
+      engine.renameSheet({
+        workbookName,
+        sheetName: oldName,
+        newSheetName: newName.trim()
+      });
+      if (activeSheet === oldName) {
+        handleActiveSheetChange(newName.trim());
+      }
+      cancelRenaming();
+    } catch (error) {
+      console.error("Failed to rename sheet:", error);
+      cancelRenaming();
+    }
+  };
+  const deleteSheet = (sheetName) => {
+    if (sheetNames.length <= 1) {
+      console.error("Cannot delete the last sheet");
+      return;
+    }
+    try {
+      engine.removeSheet({ workbookName, sheetName });
+      if (activeSheet === sheetName) {
+        const remainingSheets = sheetNames.filter((name) => name !== sheetName);
+        const nextSheet = remainingSheets[0];
+        if (nextSheet) {
+          handleActiveSheetChange(nextSheet);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to delete sheet:", error);
+    }
+  };
+  return /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+    className: "rsp-root rsp-workbook",
+    children: [
+      toolbar,
+      /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+        className: "rsp-workbook-header",
+        children: [
+          /* @__PURE__ */ jsx_runtime4.jsx("div", {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              flex: 1,
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            children: /* @__PURE__ */ jsx_runtime4.jsx("span", {
+              className: "rsp-workbook-name",
+              "data-testid": `workbook-name-${workbookName}`,
+              children: workbookName
+            })
+          }),
+          /* @__PURE__ */ jsx_runtime4.jsxs("span", {
+            className: "rsp-zoom-value",
+            "data-testid": `sheet-count-${workbookName}`,
+            children: [
+              "Sheets: ",
+              sheetNames.length
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx_runtime4.jsx("div", {
+        style: { flex: 1, overflow: "hidden" },
+        children: /* @__PURE__ */ jsx_runtime4.jsx("div", {
+          style: {
+            transform: spreadsheetZoom !== 1 ? `scale(${spreadsheetZoom})` : undefined,
+            transformOrigin: "0 0",
+            width: spreadsheetZoom !== 1 ? `${100 / spreadsheetZoom}%` : "100%",
+            height: spreadsheetZoom !== 1 ? `${100 / spreadsheetZoom}%` : "100%"
+          },
+          children: /* @__PURE__ */ jsx_runtime4.jsx(FormulaSheet, {
+            sheetName: activeSheet,
+            workbookName,
+            engine,
+            verboseErrors,
+            selectionManager,
+            ...rest,
+            components,
+            overlayChildren: activeSheetOverlayChildren,
+            selectedOverlayId: activeSheetSelectedOverlayId,
+            columnWidths: activeSheetColumnWidths,
+            onColumnWidthsChange: handleColumnWidthsChange,
+            rowHeights: activeSheetRowHeights,
+            onRowHeightsChange: handleRowHeightsChange,
+            onOverlaySelect: handleOverlaySelect,
+            onOverlayChildrenChange: handleOverlayChildrenChange,
+            overlayPlaceholder,
+            clipboardManager,
+            isSelected,
+            showFormulas
+          }, `${workbookName}-${activeSheet}`)
+        })
+      }),
+      /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+        className: "rsp-sheet-tabs",
+        children: [
+          /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+            className: "rsp-sheet-tabs-scroll",
+            children: [
+              /* @__PURE__ */ jsx_runtime4.jsx("div", {
+                style: { display: "flex", alignItems: "center", gap: 4 },
+                children: sheetNames.map((sheetName) => {
+                  const isRenaming = renamingSheet === sheetName;
+                  const isActive = activeSheet === sheetName;
+                  return /* @__PURE__ */ jsx_runtime4.jsx("div", {
+                    children: isRenaming ? /* @__PURE__ */ jsx_runtime4.jsx("div", {
+                      style: { display: "flex", alignItems: "center", gap: 4 },
+                      children: /* @__PURE__ */ jsx_runtime4.jsx("input", {
+                        className: "rsp-sheet-tab-input",
+                        type: "text",
+                        value: newSheetName,
+                        onChange: (e) => setNewSheetName(e.target.value),
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter") {
+                            renameSheet(sheetName, newSheetName);
+                          } else if (e.key === "Escape") {
+                            cancelRenaming();
+                          }
+                        },
+                        onBlur: () => {
+                          if (newSheetName.trim() && newSheetName.trim() !== sheetName) {
+                            renameSheet(sheetName, newSheetName);
+                          } else {
+                            cancelRenaming();
+                          }
+                        },
+                        autoFocus: true,
+                        "data-testid": `rename-sheet-input-${sheetName}`
+                      })
+                    }) : /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+                      className: cn("rsp-sheet-tab", {
+                        "rsp-sheet-tab-active": isActive
+                      }),
+                      onClick: () => handleActiveSheetChange(sheetName),
+                      onDoubleClick: () => startRenaming(sheetName),
+                      "data-testid": `sheet-tab-${sheetName}`,
+                      children: [
+                        /* @__PURE__ */ jsx_runtime4.jsx("span", {
+                          children: sheetName
+                        }),
+                        /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+                          className: "sheet-tab-actions",
+                          children: [
+                            /* @__PURE__ */ jsx_runtime4.jsx("button", {
+                              type: "button",
+                              className: "rsp-icon-button",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                startRenaming(sheetName);
+                              },
+                              title: "Rename Sheet",
+                              "data-testid": `rename-sheet-${sheetName}`,
+                              children: /* @__PURE__ */ jsx_runtime4.jsx(Edit2Icon, {
+                                style: { width: 12, height: 12 }
+                              })
+                            }),
+                            sheetNames.length > 1 && /* @__PURE__ */ jsx_runtime4.jsx("button", {
+                              type: "button",
+                              className: "rsp-icon-button rsp-icon-button-delete",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                if (confirm(`Are you sure you want to delete sheet "${sheetName}"?`)) {
+                                  deleteSheet(sheetName);
+                                }
+                              },
+                              title: "Delete Sheet",
+                              "data-testid": `delete-sheet-${sheetName}`,
+                              children: /* @__PURE__ */ jsx_runtime4.jsx(Trash2Icon, {
+                                style: { width: 12, height: 12 }
+                              })
+                            })
+                          ]
+                        })
+                      ]
+                    })
+                  }, sheetName);
+                })
+              }),
+              /* @__PURE__ */ jsx_runtime4.jsx("button", {
+                type: "button",
+                className: "rsp-add-sheet-button",
+                onClick: addSheet,
+                title: "Add Sheet",
+                "data-testid": `add-sheet-${workbookName}`,
+                children: /* @__PURE__ */ jsx_runtime4.jsx(PlusIcon, {
+                  style: { width: 12, height: 12 }
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+            className: "rsp-zoom-controls",
+            children: [
+              /* @__PURE__ */ jsx_runtime4.jsx("button", {
+                type: "button",
+                className: "rsp-icon-button",
+                onClick: () => setSpreadsheetZoom(Math.max(0.5, spreadsheetZoom - 0.1)),
+                disabled: spreadsheetZoom <= 0.5,
+                title: "Zoom Out",
+                style: { opacity: spreadsheetZoom <= 0.5 ? 0.5 : 1 },
+                children: /* @__PURE__ */ jsx_runtime4.jsx(MinusIcon, {
+                  style: { width: 12, height: 12 }
+                })
+              }),
+              /* @__PURE__ */ jsx_runtime4.jsxs("span", {
+                className: "rsp-zoom-value",
+                children: [
+                  Math.round(spreadsheetZoom * 100),
+                  "%"
+                ]
+              }),
+              /* @__PURE__ */ jsx_runtime4.jsx("button", {
+                type: "button",
+                className: "rsp-icon-button",
+                onClick: () => setSpreadsheetZoom(Math.min(2, spreadsheetZoom + 0.1)),
+                disabled: spreadsheetZoom >= 2,
+                title: "Zoom In",
+                style: { opacity: spreadsheetZoom >= 2 ? 0.5 : 1 },
+                children: /* @__PURE__ */ jsx_runtime4.jsx(PlusIcon, {
+                  style: { width: 12, height: 12 }
+                })
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+// src/spreadsheet/zoom-constants.ts
+var ZOOM_FACTOR = 0.05;
+var CONTROLLED_ZOOM_FACTOR = 0.01;
+var DEFAULT_ZOOM = 1;
+var MIN_ZOOM = 0.5;
+var MAX_ZOOM = 3;
+// src/utils/use-click-away.ts
+var import_react6 = require("react");
+var useClickAway = (ref, callback) => {
+  import_react6.useEffect(() => {
+    const handleClickAway = (event) => {
+      if (ref) {
+        const away = !ref.contains(event.target);
+        callback(away);
+      }
+    };
+    document.addEventListener("mousedown", handleClickAway);
+    return () => {
+      document.removeEventListener("mousedown", handleClickAway);
+    };
+  }, [ref, callback]);
+};
+
+//# debugId=2D3DCCBBF4E8DCA364756E2164756E21