@gridsheet/react-core 2.0.5-0 → 2.1.0

package/dist/index.js

@@ -505,21 +505,17 @@ const isXSheetFocused = (store) => {
 };
 const getCellRectPositions = (table, { y, x }) => {
   var _a, _b;
-  let { width, height } = table.getRectSize({
-    top: 1,
-    left: 1,
-    bottom: y,
-    right: x
-  });
-  width += table.headerWidth;
-  height += table.headerHeight;
-  const w = ((_a = table.getCellByPoint({ y: 0, x }, "SYSTEM")) == null ? void 0 : _a.width) || DEFAULT_WIDTH;
-  const h = ((_b = table.getCellByPoint({ y, x: 0 }, "SYSTEM")) == null ? void 0 : _b.height) || DEFAULT_HEIGHT;
+  const colCell = table.getCellByPoint({ y: 0, x }, "SYSTEM");
+  const rowCell = table.getCellByPoint({ y, x: 0 }, "SYSTEM");
+  const left = ((_a = colCell == null ? void 0 : colCell.system) == null ? void 0 : _a.offsetLeft) ?? 0;
+  const top = ((_b = rowCell == null ? void 0 : rowCell.system) == null ? void 0 : _b.offsetTop) ?? 0;
+  const w = (colCell == null ? void 0 : colCell.width) || DEFAULT_WIDTH;
+  const h = (rowCell == null ? void 0 : rowCell.height) || DEFAULT_HEIGHT;
   return {
-    top: height,
-    left: width,
-    bottom: height + h,
-    right: width + w,
+    top,
+    left,
+    bottom: top + h,
+    right: left + w,
     width: w,
     height: h
   };
@@ -3192,7 +3188,6 @@ class InsertRowsAboveAction extends CoreAction {
     });
     return {
       ...store,
-      ...table.getTotalSize(),
       tableReactive: { current: table }
     };
   }
@@ -3230,7 +3225,6 @@ class InsertRowsBelowAction extends CoreAction {
     });
     return {
       ...store,
-      ...table.getTotalSize(),
       selectingZone: nextSelectingZone,
       choosing: nextChoosing,
       tableReactive: { current: table }
@@ -3264,7 +3258,6 @@ class InsertColsLeftAction extends CoreAction {
     });
     return {
       ...store,
-      ...table.getTotalSize(),
       tableReactive: { current: table }
     };
   }
@@ -3304,7 +3297,6 @@ class InsertColsRightAction extends CoreAction {
     });
     return {
       ...store,
-      ...table.getTotalSize(),
       selectingZone: nextSelectingZone,
       choosing: nextChoosing,
       tableReactive: { current: table }
@@ -3338,7 +3330,6 @@ class RemoveRowsAction extends CoreAction {
     });
     return {
       ...store,
-      ...table.getTotalSize(),
       tableReactive: { current: table }
     };
   }
@@ -3370,7 +3361,6 @@ class RemoveColsAction extends CoreAction {
     });
     return {
       ...store,
-      ...table.getTotalSize(),
       tableReactive: { current: table }
     };
   }
@@ -4652,8 +4642,7 @@ const Resizer = () => {
     });
     dispatch(
       setStore({
-        tableReactive: { current: table },
-        ...table.getTotalSize()
+        tableReactive: { current: table }
       })
     );
     dispatch(setResizingPositionY([-1, -1, -1]));
@@ -7717,6 +7706,8 @@ class Table {
     this.prevSheetName = "";
     this.status = 0;
     this.idsToBeIdentified = [];
+    this.totalWidth = 0;
+    this.totalHeight = 0;
     this.version = 0;
     this.area = { top: 0, left: 0, bottom: 0, right: 0 };
     this.addressCaches = /* @__PURE__ */ new Map();
@@ -7893,42 +7884,63 @@ class Table {
     return (this.wire.cellHead++).toString(36);
   }
   getRectSize({ top, left, bottom, right }) {
-    var _a, _b;
-    let width = 0, height = 0;
-    for (let x = left || 1; x < right; x++) {
-      width += ((_a = this.getCellByPoint({ y: 0, x }, "SYSTEM")) == null ? void 0 : _a.width) || DEFAULT_WIDTH;
-    }
-    for (let y = top || 1; y < bottom; y++) {
-      height += ((_b = this.getCellByPoint({ y, x: 0 }, "SYSTEM")) == null ? void 0 : _b.height) || DEFAULT_HEIGHT;
-    }
+    var _a, _b, _c, _d;
+    const l = left || 1;
+    const t = top || 1;
+    const colRightCell = this.getCellByPoint({ y: 0, x: right }, "SYSTEM");
+    const colLeftCell = this.getCellByPoint({ y: 0, x: l }, "SYSTEM");
+    const rowBottomCell = this.getCellByPoint({ y: bottom, x: 0 }, "SYSTEM");
+    const rowTopCell = this.getCellByPoint({ y: t, x: 0 }, "SYSTEM");
+    const rw = ((_a = colRightCell == null ? void 0 : colRightCell.system) == null ? void 0 : _a.offsetLeft) ?? 0;
+    const lw = ((_b = colLeftCell == null ? void 0 : colLeftCell.system) == null ? void 0 : _b.offsetLeft) ?? 0;
+    const rh = ((_c = rowBottomCell == null ? void 0 : rowBottomCell.system) == null ? void 0 : _c.offsetTop) ?? 0;
+    const th = ((_d = rowTopCell == null ? void 0 : rowTopCell.system) == null ? void 0 : _d.offsetTop) ?? 0;
+    const width = Math.max(0, rw - lw);
+    const height = Math.max(0, rh - th);
     return { width, height };
   }
-  getTotalSize() {
-    const { bottom, right } = this.area;
-    const { width, height } = this.getRectSize({
-      top: 1,
-      left: 1,
-      bottom: bottom + 1,
-      right: right + 1
-    });
-    return {
-      totalWidth: width + this.headerWidth,
-      totalHeight: height + this.headerHeight
-    };
-  }
-  refresh(keepAddressCache = true) {
+  setTotalSize() {
+    const numCols = this.getNumCols();
+    const numRows = this.getNumRows();
+    const headerW = this.headerWidth;
+    const headerH = this.headerHeight;
+    let accW = 0;
+    for (let x = 1; x <= numCols; x++) {
+      const cell = this.getCellByPoint({ y: 0, x }, "SYSTEM");
+      const w = (cell == null ? void 0 : cell.width) || DEFAULT_WIDTH;
+      if (cell == null ? void 0 : cell.system) {
+        cell.system.offsetLeft = headerW + accW;
+      }
+      accW += w;
+    }
+    this.totalWidth = headerW + accW;
+    let accH = 0;
+    for (let y = 1; y <= numRows; y++) {
+      const cell = this.getCellByPoint({ y, x: 0 }, "SYSTEM");
+      const h = (cell == null ? void 0 : cell.height) || DEFAULT_HEIGHT;
+      if (cell == null ? void 0 : cell.system) {
+        cell.system.offsetTop = headerH + accH;
+      }
+      accH += h;
+    }
+    this.totalHeight = headerH + accH;
+  }
+  refresh(relocate = false, resize = false) {
     this.incrementVersion();
     this.lastChangedAt = this.changedAt;
     this.changedAt = /* @__PURE__ */ new Date();
     this.clearSolvedCaches();
-    if (!keepAddressCache) {
+    if (relocate) {
       this.addressCaches.clear();
     }
+    if (resize) {
+      this.setTotalSize();
+    }
     return this;
   }
-  clone(keepAddressCache = true) {
+  clone(relocate = false) {
     const copied = Object.assign(Object.create(Object.getPrototypeOf(this)), this);
-    return copied.refresh(keepAddressCache);
+    return copied.refresh(relocate);
   }
   getPointById(id, slideY = 0, slideX = 0) {
     const absCol = id.startsWith("$");
@@ -8446,7 +8458,7 @@ class Table {
       this.wire.onEdit({ table: srcTable.__raw__.trim(src) });
       this.wire.onEdit({ table: this.__raw__.trim(dst) });
     }
-    return this.refresh(false);
+    return this.refresh(true);
   }
   copy({
     srcTable = this,
@@ -8532,15 +8544,16 @@ class Table {
     const diffBefore = {};
     const diffAfter = {};
     const changedAt = /* @__PURE__ */ new Date();
+    let resized = false;
     Object.keys(diff).forEach((address) => {
       var _a, _b, _c, _d;
       const point = a2p(address);
       const id = this.getId(point);
       const original = this.wire.data[id];
-      let patch = { ...diff[address] };
       if (operator === "USER" && hasOperation(original.prevention, Update)) {
         return;
       }
+      let patch = { ...diff[address] };
       if (formulaIdentify) {
         patch.value = identifyFormula(patch.value, {
           table: this,
@@ -8570,6 +8583,9 @@ class Table {
       if (updateChangedAt) {
         this.setChangedAt(patch, changedAt);
       }
+      if (patch.width != null || patch.height != null) {
+        resized = true;
+      }
       diffBefore[id] = { ...original };
       const policy = this.policies[original.policy] ?? defaultPolicy;
       const p = policy.restrict({
@@ -8592,7 +8608,8 @@ class Table {
     }
     return {
       diffBefore,
-      diffAfter
+      diffAfter,
+      resized
     };
   }
   update({
@@ -8605,7 +8622,7 @@ class Table {
     undoReflection,
     redoReflection
   }) {
-    const { diffBefore, diffAfter } = this._update({
+    const { diffBefore, diffAfter, resized } = this._update({
       diff,
       partial,
       operator,
@@ -8625,7 +8642,7 @@ class Table {
         partial
       });
     }
-    return this.refresh(true);
+    return this.refresh(false, resized);
   }
   writeRawCellMatrix({
     point,
@@ -8755,7 +8772,7 @@ class Table {
       cloned.addressCaches = /* @__PURE__ */ new Map();
       this.wire.onInsertRows({ table: cloned, y, numRows });
     }
-    return this.refresh(false);
+    return this.refresh(true, true);
   }
   removeRows({
     y,
@@ -8817,7 +8834,7 @@ class Table {
       cloned.addressCaches = /* @__PURE__ */ new Map();
       this.wire.onRemoveRows({ table: cloned, ys: ys.reverse() });
     }
-    return this.refresh(false);
+    return this.refresh(true, true);
   }
   insertCols({
     x,
@@ -8883,7 +8900,7 @@ class Table {
       cloned.addressCaches = /* @__PURE__ */ new Map();
       this.wire.onInsertCols({ table: cloned, x, numCols });
     }
-    return this.refresh(false);
+    return this.refresh(true, true);
   }
   removeCols({
     x,
@@ -8948,7 +8965,7 @@ class Table {
       cloned.addressCaches = /* @__PURE__ */ new Map();
       this.wire.onRemoveCols({ table: cloned, xs: xs.reverse() });
     }
-    return this.refresh(false);
+    return this.refresh(true, true);
   }
   getHistories() {
     return [...this.wire.histories];
@@ -9108,7 +9125,7 @@ class Table {
         break;
       }
     }
-    this.refresh(!shouldTracking(history.operation));
+    this.refresh(shouldTracking(history.operation), true);
     return {
       history,
       callback: ({ tableReactive: tableRef }) => {
@@ -9180,7 +9197,7 @@ class Table {
         }
       }
     }
-    this.refresh(!shouldTracking(history.operation));
+    this.refresh(shouldTracking(history.operation), true);
     return {
       history,
       callback: ({ tableReactive: tableRef }) => {
@@ -9262,7 +9279,7 @@ const safePreventDefault = (e) => {
     e.preventDefault();
   }
 };
-const Cell = memo(({ y, x, operationStyle }) => {
+const Cell = memo(({ y, x }) => {
   const rowId = y2r(y);
   const colId = x2c(x);
   const address = `${colId}${rowId}`;
@@ -9498,8 +9515,7 @@ const Cell = memo(({ y, x, operationStyle }) => {
       "data-address": address,
       className: `gs-cell ${among(selectingArea, { y, x }) ? "gs-selecting" : ""} ${pointed ? "gs-choosing" : ""} ${editing ? "gs-editing" : ""}`,
       style: {
-        ...cell == null ? void 0 : cell.style,
-        ...operationStyle
+        ...cell == null ? void 0 : cell.style
       },
       onContextMenu,
       onDoubleClick,
@@ -10075,6 +10091,260 @@ const HeaderCellLeft = memo(({ y }) => {
     }
   );
 });
+const COLOR_POINTED = "#0077ff";
+const COLOR_SELECTED = "#0077ff";
+const SELECTING_FILL = "rgba(0, 128, 255, 0.2)";
+const COLOR_COPYING = "#0077ff";
+const COLOR_CUTTING = "#0077ff";
+const SEARCH_MATCHING_BACKGROUND = "rgba(0, 200, 100, 0.2)";
+const COLOR_SEARCH_MATCHING = "#00aa78";
+const COLOR_AUTOFILL = "#444444";
+const HEADER_COLORS = {
+  light: {
+    selecting: "rgba(0, 0, 0, 0.1)",
+    choosing: "rgba(0, 0, 0, 0.2)",
+    thSelecting: "rgba(0, 0, 0, 0.55)"
+  },
+  dark: {
+    selecting: "rgba(255, 255, 255, 0.08)",
+    choosing: "rgba(255, 255, 255, 0.18)",
+    thSelecting: "rgba(255, 255, 255, 0.4)"
+  }
+};
+const fillRect = (ctx, x, y, width, height, color) => {
+  ctx.fillStyle = color;
+  ctx.fillRect(x, y, width, height);
+};
+const drawRect = (ctx, x, y, width, height, color, lineWidth = 2, dashPattern = [], fillColor) => {
+  if (fillColor) {
+    ctx.fillStyle = fillColor;
+    ctx.fillRect(x, y, width, height);
+  }
+  ctx.strokeStyle = color;
+  ctx.lineWidth = lineWidth;
+  ctx.setLineDash(dashPattern);
+  ctx.strokeRect(x + lineWidth / 2, y + lineWidth / 2, width - lineWidth, height - lineWidth);
+  ctx.setLineDash([]);
+};
+const drawAreaRectViewport = (ctx, table, scrollTop, scrollLeft, viewW, viewH, area, color, lineWidth = 2, dashPattern = [], fillColor) => {
+  const { top, left, bottom, right } = area;
+  if (top === -1 || left === -1 || bottom === -1 || right === -1) {
+    return;
+  }
+  const topLeft = getCellRectPositions(table, { y: top, x: left });
+  const bottomRight = getCellRectPositions(table, { y: bottom, x: right });
+  const x1 = topLeft.left - scrollLeft;
+  const y1 = topLeft.top - scrollTop;
+  const x2 = bottomRight.right - scrollLeft;
+  const y2 = bottomRight.bottom - scrollTop;
+  if (x2 < 0 || x1 > viewW || y2 < 0 || y1 > viewH) {
+    return;
+  }
+  drawRect(ctx, x1, y1, x2 - x1, y2 - y1, color, lineWidth, dashPattern, fillColor);
+};
+const CellStateOverlay = ({ refs = {} }) => {
+  const { store } = useContext(Context);
+  const {
+    tableReactive,
+    tabularRef,
+    choosing,
+    selectingZone,
+    matchingCells,
+    matchingCellIndex,
+    autofillDraggingTo,
+    topHeaderSelecting,
+    leftHeaderSelecting,
+    mode,
+    dragging
+  } = store;
+  const table = tableReactive.current;
+  const canvasRef = useRef(null);
+  const rafIdRef = useRef(0);
+  const storeRef = useRef(store);
+  storeRef.current = store;
+  const drawCanvas = useCallback(() => {
+    if (!table || !tabularRef.current || !canvasRef.current) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    const container = tabularRef.current;
+    const dpr = window.devicePixelRatio || 1;
+    const w = container.clientWidth;
+    const h = container.clientHeight;
+    if (canvas.width !== w * dpr || canvas.height !== h * dpr) {
+      canvas.style.width = `${w}px`;
+      canvas.style.height = `${h}px`;
+      canvas.width = w * dpr;
+      canvas.height = h * dpr;
+    }
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, w, h);
+    const { wire } = table;
+    const scrollTop = container.scrollTop;
+    const scrollLeft = container.scrollLeft;
+    const headerW = table.headerWidth;
+    const headerH = table.headerHeight;
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(headerW, headerH, w - headerW, h - headerH);
+    ctx.clip();
+    const selectingArea = zoneToArea(selectingZone);
+    drawAreaRectViewport(ctx, table, scrollTop, scrollLeft, w, h, selectingArea, COLOR_SELECTED, 1, [], SELECTING_FILL);
+    if (autofillDraggingTo) {
+      const autofill = new Autofill(storeRef.current, autofillDraggingTo);
+      drawAreaRectViewport(ctx, table, scrollTop, scrollLeft, w, h, autofill.wholeArea, COLOR_AUTOFILL, 1, [5, 5]);
+    }
+    {
+      const { y, x } = choosing;
+      if (y !== -1 && x !== -1) {
+        const pos = getCellRectPositions(table, { y, x });
+        const vx = pos.left - scrollLeft;
+        const vy = pos.top - scrollTop;
+        drawRect(ctx, vx, vy, pos.width, pos.height, COLOR_POINTED, 2, []);
+      }
+    }
+    const { copyingSheetId, copyingZone, cutting } = wire;
+    if (table.sheetId === copyingSheetId) {
+      const copyingArea = zoneToArea(copyingZone);
+      const color = cutting ? COLOR_CUTTING : COLOR_COPYING;
+      const dashPattern = cutting ? [4, 4] : [6, 4];
+      drawAreaRectViewport(ctx, table, scrollTop, scrollLeft, w, h, copyingArea, color, 2.5, dashPattern);
+    }
+    Object.entries(refs).forEach(([ref, i]) => {
+      const palette = COLOR_PALETTE[i % COLOR_PALETTE.length];
+      try {
+        const refArea = table.rangeToArea(ref);
+        drawAreaRectViewport(ctx, table, scrollTop, scrollLeft, w, h, refArea, palette, 2, [5, 5]);
+      } catch (e) {
+      }
+    });
+    matchingCells.forEach((address, index) => {
+      const { y, x } = a2p(address);
+      const pos = getCellRectPositions(table, { y, x });
+      const vx = pos.left - scrollLeft;
+      const vy = pos.top - scrollTop;
+      if (vx + pos.width < 0 || vx > w || vy + pos.height < 0 || vy > h) {
+        return;
+      }
+      const isCurrentMatch = index === matchingCellIndex;
+      drawRect(
+        ctx,
+        vx,
+        vy,
+        pos.width,
+        pos.height,
+        isCurrentMatch ? COLOR_SEARCH_MATCHING : "transparent",
+        isCurrentMatch ? 2 : 0,
+        [],
+        SEARCH_MATCHING_BACKGROUND
+      );
+    });
+    ctx.restore();
+    const headerColors = HEADER_COLORS[mode] || HEADER_COLORS.light;
+    const numCols = table.getNumCols();
+    const numRows = table.getNumRows();
+    for (let x = 1; x <= numCols; x++) {
+      let color = null;
+      if (between({ start: selectingZone.startX, end: selectingZone.endX }, x)) {
+        color = topHeaderSelecting ? headerColors.thSelecting : headerColors.selecting;
+      }
+      if (choosing.x === x) {
+        color = headerColors.choosing;
+      }
+      if (!color) {
+        continue;
+      }
+      const pos = getCellRectPositions(table, { y: 1, x });
+      const left = pos.left - scrollLeft;
+      if (left + pos.width < headerW || left > w) {
+        continue;
+      }
+      fillRect(ctx, left, 0, pos.width, headerH, color);
+    }
+    for (let y = 1; y <= numRows; y++) {
+      let color = null;
+      if (between({ start: selectingZone.startY, end: selectingZone.endY }, y)) {
+        color = leftHeaderSelecting ? headerColors.thSelecting : headerColors.selecting;
+      }
+      if (choosing.y === y) {
+        color = headerColors.choosing;
+      }
+      if (!color) {
+        continue;
+      }
+      const pos = getCellRectPositions(table, { y, x: 1 });
+      const top = pos.top - scrollTop;
+      if (top + pos.height < headerH || top > h) {
+        continue;
+      }
+      fillRect(ctx, 0, top, headerW, pos.height, color);
+    }
+  }, [
+    table,
+    tabularRef,
+    choosing,
+    selectingZone,
+    matchingCells,
+    matchingCellIndex,
+    autofillDraggingTo,
+    topHeaderSelecting,
+    leftHeaderSelecting,
+    mode,
+    dragging,
+    refs
+  ]);
+  const scheduleDrawCanvas = useCallback(() => {
+    cancelAnimationFrame(rafIdRef.current);
+    rafIdRef.current = requestAnimationFrame(drawCanvas);
+  }, [drawCanvas]);
+  const handleScroll = useCallback(() => {
+    drawCanvas();
+  }, [drawCanvas]);
+  useEffect(() => {
+    scheduleDrawCanvas();
+    return () => cancelAnimationFrame(rafIdRef.current);
+  }, [scheduleDrawCanvas]);
+  useEffect(() => {
+    const container = tabularRef.current;
+    if (!container) {
+      return;
+    }
+    container.addEventListener("scroll", handleScroll);
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+    };
+  }, [tabularRef, handleScroll]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "sticky",
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+        overflow: "visible",
+        pointerEvents: "none",
+        zIndex: 10
+      },
+      children: /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          className: "gs-cell-state-overlay",
+          style: {
+            pointerEvents: "none",
+            display: "block"
+          }
+        }
+      )
+    }
+  );
+};
 const Tabular = () => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const [palette, setPalette] = useState({});
@@ -10089,9 +10359,7 @@ const Tabular = () => {
     sheetHeight,
     inputting,
     leftHeaderSelecting,
-    topHeaderSelecting,
-    totalWidth,
-    totalHeight
+    topHeaderSelecting
   } = store;
   const table = tableReactive.current;
   const [virtualized, setVirtualized] = useState(null);
@@ -10177,13 +10445,13 @@ const Tabular = () => {
     }
     setVirtualized(virtualize(table, tabularRef.current));
   }, [tabularRef.current, tableReactive, (_a = mainRef.current) == null ? void 0 : _a.clientHeight, (_b = mainRef.current) == null ? void 0 : _b.clientWidth]);
+  const mergedRefs = {
+    ...palette,
+    ...table ? table.wire.paletteBySheetName[table.sheetName] : {}
+  };
   if (!table || !table.wire.ready) {
     return null;
   }
-  const operationStyles = useOperationStyles(store, {
-    ...palette,
-    ...table.wire.paletteBySheetName[table.sheetName]
-  });
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -10195,212 +10463,81 @@ const Tabular = () => {
       ref: tabularRef,
       onMouseMove: handleMouseMove,
       onScroll: handleScroll,
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: "gs-tabular-inner",
           style: {
-            width: totalWidth + 1,
-            height: totalHeight + 1
+            width: table.totalWidth + 1,
+            height: table.totalHeight + 1
           },
-          children: /* @__PURE__ */ jsxs("table", { className: `gs-table`, children: [
-            /* @__PURE__ */ jsx("thead", { className: "gs-thead", style: { height: table.headerHeight }, children: /* @__PURE__ */ jsxs("tr", { className: "gs-row", children: [
-              /* @__PURE__ */ jsx(
-                "th",
-                {
-                  className: "gs-th gs-th-left gs-th-top",
-                  style: { position: "sticky", width: table.headerWidth, height: table.headerHeight },
-                  onClick: handleSelectAllClick,
-                  children: /* @__PURE__ */ jsx("div", { className: "gs-th-inner", children: /* @__PURE__ */ jsx(
-                    ScrollHandle,
-                    {
-                      className: leftHeaderSelecting || topHeaderSelecting ? "gs-hidden" : "",
-                      style: { position: "absolute" },
-                      horizontal: leftHeaderSelecting ? 0 : -1,
-                      vertical: topHeaderSelecting ? 0 : -1
-                    }
-                  ) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "th",
-                {
-                  className: "gs-adjuster gs-adjuster-horizontal gs-adjuster-horizontal-left",
-                  style: { width: ((_c = virtualized == null ? void 0 : virtualized.adjuster) == null ? void 0 : _c.left) ?? 1 }
-                }
-              ),
-              (_e = (_d = virtualized == null ? void 0 : virtualized.xs) == null ? void 0 : _d.map) == null ? void 0 : _e.call(_d, (x) => /* @__PURE__ */ jsx(HeaderCellTop, { x }, x)),
-              /* @__PURE__ */ jsx(
-                "th",
-                {
-                  className: "gs-adjuster gs-adjuster-horizontal gs-adjuster-horizontal-right",
-                  style: { width: (_f = virtualized == null ? void 0 : virtualized.adjuster) == null ? void 0 : _f.right }
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ jsx("tbody", { className: "gs-table-body-adjuster", children: /* @__PURE__ */ jsxs("tr", { className: "gs-row", children: [
-              /* @__PURE__ */ jsx(
-                "th",
-                {
-                  className: `gs-adjuster gs-adjuster-horizontal gs-adjuster-vertical`,
-                  style: { height: ((_g = virtualized == null ? void 0 : virtualized.adjuster) == null ? void 0 : _g.top) ?? 1 }
-                }
-              ),
-              /* @__PURE__ */ jsx("td", { className: "gs-adjuster gs-adjuster-vertical" }),
-              (_h = virtualized == null ? void 0 : virtualized.xs) == null ? void 0 : _h.map((x) => /* @__PURE__ */ jsx("td", { className: "gs-adjuster gs-adjuster-vertical" }, x)),
-              /* @__PURE__ */ jsx("th", { className: `gs-adjuster gs-adjuster-horizontal gs-adjuster-vertical` })
-            ] }) }),
-            /* @__PURE__ */ jsx("tbody", { className: "gs-table-body-data", children: (_i = virtualized == null ? void 0 : virtualized.ys) == null ? void 0 : _i.map((y) => {
-              var _a2;
-              return /* @__PURE__ */ jsxs("tr", { className: "gs-row", children: [
-                /* @__PURE__ */ jsx(HeaderCellLeft, { y }),
-                /* @__PURE__ */ jsx("td", { className: "gs-adjuster gs-adjuster-horizontal gs-adjuster-horizontal-left" }),
-                (_a2 = virtualized == null ? void 0 : virtualized.xs) == null ? void 0 : _a2.map((x) => /* @__PURE__ */ jsx(Cell, { y, x, operationStyle: operationStyles[p2a({ y, x })] }, x)),
-                /* @__PURE__ */ jsx("td", { className: "gs-adjuster gs-adjuster-horizontal gs-adjuster-horizontal-right" })
-              ] }, y);
-            }) })
-          ] })
+          children: [
+            /* @__PURE__ */ jsx(CellStateOverlay, { refs: mergedRefs }),
+            /* @__PURE__ */ jsxs("table", { className: `gs-table`, children: [
+              /* @__PURE__ */ jsx("thead", { className: "gs-thead", style: { height: table.headerHeight }, children: /* @__PURE__ */ jsxs("tr", { className: "gs-row", children: [
+                /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    className: "gs-th gs-th-left gs-th-top",
+                    style: { position: "sticky", width: table.headerWidth, height: table.headerHeight },
+                    onClick: handleSelectAllClick,
+                    children: /* @__PURE__ */ jsx("div", { className: "gs-th-inner", children: /* @__PURE__ */ jsx(
+                      ScrollHandle,
+                      {
+                        className: leftHeaderSelecting || topHeaderSelecting ? "gs-hidden" : "",
+                        style: { position: "absolute" },
+                        horizontal: leftHeaderSelecting ? 0 : -1,
+                        vertical: topHeaderSelecting ? 0 : -1
+                      }
+                    ) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    className: "gs-adjuster gs-adjuster-horizontal gs-adjuster-horizontal-left",
+                    style: { width: ((_c = virtualized == null ? void 0 : virtualized.adjuster) == null ? void 0 : _c.left) ?? 1 }
+                  }
+                ),
+                (_e = (_d = virtualized == null ? void 0 : virtualized.xs) == null ? void 0 : _d.map) == null ? void 0 : _e.call(_d, (x) => /* @__PURE__ */ jsx(HeaderCellTop, { x }, x)),
+                /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    className: "gs-adjuster gs-adjuster-horizontal gs-adjuster-horizontal-right",
+                    style: { width: (_f = virtualized == null ? void 0 : virtualized.adjuster) == null ? void 0 : _f.right }
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { className: "gs-table-body-adjuster", children: /* @__PURE__ */ jsxs("tr", { className: "gs-row", children: [
+                /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    className: `gs-adjuster gs-adjuster-horizontal gs-adjuster-vertical`,
+                    style: { height: ((_g = virtualized == null ? void 0 : virtualized.adjuster) == null ? void 0 : _g.top) ?? 1 }
+                  }
+                ),
+                /* @__PURE__ */ jsx("td", { className: "gs-adjuster gs-adjuster-vertical" }),
+                (_h = virtualized == null ? void 0 : virtualized.xs) == null ? void 0 : _h.map((x) => /* @__PURE__ */ jsx("td", { className: "gs-adjuster gs-adjuster-vertical" }, x)),
+                /* @__PURE__ */ jsx("th", { className: `gs-adjuster gs-adjuster-horizontal gs-adjuster-vertical` })
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { className: "gs-table-body-data", children: (_i = virtualized == null ? void 0 : virtualized.ys) == null ? void 0 : _i.map((y) => {
+                var _a2;
+                return /* @__PURE__ */ jsxs("tr", { className: "gs-row", children: [
+                  /* @__PURE__ */ jsx(HeaderCellLeft, { y }),
+                  /* @__PURE__ */ jsx("td", { className: "gs-adjuster gs-adjuster-horizontal gs-adjuster-horizontal-left" }),
+                  (_a2 = virtualized == null ? void 0 : virtualized.xs) == null ? void 0 : _a2.map((x) => /* @__PURE__ */ jsx(Cell, { y, x }, x)),
+                  /* @__PURE__ */ jsx("td", { className: "gs-adjuster gs-adjuster-horizontal gs-adjuster-horizontal-right" })
+                ] }, y);
+              }) })
+            ] })
+          ]
         }
       )
     }
   ) });
 };
-const BORDER_POINTED = "solid 2px #0077ff";
-const BORDER_SELECTED = "solid 1px #0077ff";
-const BORDER_CUTTING = "dotted 2px #0077ff";
-const BORDER_COPYING = "dashed 2px #0077ff";
-const SEARCH_MATCHING_BACKGROUND = "rgba(0,200,100,.2)";
-const SEARCH_MATCHING_BORDER = "solid 2px #00aa78";
-const AUTOFILL_BORDER = "dashed 1px #444444";
-const useOperationStyles = (store, refs) => {
-  const cellStyles = {};
-  const updateStyle = (point, style) => {
-    const address = p2a(point);
-    cellStyles[address] = cellStyles[address] || {};
-    Object.assign(cellStyles[address], style);
-  };
-  const {
-    choosing,
-    selectingZone,
-    matchingCells,
-    matchingCellIndex,
-    tableReactive,
-    autofillDraggingTo,
-    editingAddress
-  } = store;
-  const table = tableReactive.current;
-  if (!table) {
-    return {};
-  }
-  const { wire } = table;
-  const { copyingSheetId, copyingZone, cutting } = wire;
-  const editingAnywhere = !!(wire.editingAddress || editingAddress);
-  {
-    const { top, left, bottom, right } = zoneToArea(selectingZone);
-    if (!editingAnywhere) {
-      for (let y = top; y <= bottom; y++) {
-        updateStyle({ y, x: left - 1 }, { borderRight: BORDER_SELECTED });
-        updateStyle({ y, x: left }, { borderLeft: BORDER_SELECTED });
-        updateStyle({ y, x: right }, { borderRight: BORDER_SELECTED });
-        updateStyle({ y, x: right + 1 }, { borderLeft: BORDER_SELECTED });
-      }
-      for (let x = left; x <= right; x++) {
-        updateStyle({ y: top - 1, x }, { borderBottom: BORDER_SELECTED });
-        updateStyle({ y: top, x }, { borderTop: BORDER_SELECTED });
-        updateStyle({ y: bottom, x }, { borderBottom: BORDER_SELECTED });
-        updateStyle({ y: bottom + 1, x }, { borderTop: BORDER_SELECTED });
-      }
-    }
-  }
-  if (autofillDraggingTo) {
-    const autofill = new Autofill(store, autofillDraggingTo);
-    const { top, left, bottom, right } = autofill.wholeArea;
-    for (let y = top; y <= bottom; y++) {
-      updateStyle({ y, x: left - 1 }, { borderRight: AUTOFILL_BORDER });
-      updateStyle({ y, x: left }, { borderLeft: AUTOFILL_BORDER });
-      updateStyle({ y, x: right }, { borderRight: AUTOFILL_BORDER });
-      updateStyle({ y, x: right + 1 }, { borderLeft: AUTOFILL_BORDER });
-    }
-    for (let x = left; x <= right; x++) {
-      updateStyle({ y: top - 1, x }, { borderBottom: AUTOFILL_BORDER });
-      updateStyle({ y: top, x }, { borderTop: AUTOFILL_BORDER });
-      updateStyle({ y: bottom, x }, { borderBottom: AUTOFILL_BORDER });
-      updateStyle({ y: bottom + 1, x }, { borderTop: AUTOFILL_BORDER });
-    }
-  }
-  {
-    const { y, x } = choosing;
-    updateStyle(
-      { y, x },
-      {
-        borderLeft: BORDER_POINTED,
-        borderRight: BORDER_POINTED,
-        borderTop: BORDER_POINTED,
-        borderBottom: BORDER_POINTED
-      }
-    );
-    updateStyle({ y, x: x - 1 }, { borderRight: BORDER_POINTED });
-    updateStyle({ y, x: x + 1 }, { borderLeft: BORDER_POINTED });
-    updateStyle({ y: y - 1, x }, { borderBottom: BORDER_POINTED });
-    updateStyle({ y: y + 1, x }, { borderTop: BORDER_POINTED });
-  }
-  if (table.sheetId === copyingSheetId) {
-    const borderStyle = cutting ? BORDER_CUTTING : BORDER_COPYING;
-    const { top, left, bottom, right } = zoneToArea(copyingZone);
-    for (let y = top; y <= bottom; y++) {
-      updateStyle({ y, x: left - 1 }, { borderRight: borderStyle });
-      updateStyle({ y, x: left }, { borderLeft: borderStyle });
-      updateStyle({ y, x: right }, { borderRight: borderStyle });
-      updateStyle({ y, x: right + 1 }, { borderLeft: borderStyle });
-    }
-    for (let x = left; x <= right; x++) {
-      updateStyle({ y: top - 1, x }, { borderBottom: borderStyle });
-      updateStyle({ y: top, x }, { borderTop: borderStyle });
-      updateStyle({ y: bottom, x }, { borderBottom: borderStyle });
-      updateStyle({ y: bottom + 1, x }, { borderTop: borderStyle });
-    }
-  }
-  Object.entries(refs).forEach(([ref, i]) => {
-    const palette = COLOR_PALETTE[i % COLOR_PALETTE.length];
-    const borderStyle = `dashed 2px ${palette}`;
-    const { top, left, bottom, right } = table.rangeToArea(ref);
-    for (let y = top; y <= bottom; y++) {
-      updateStyle({ y, x: left - 1 }, { borderRight: borderStyle });
-      updateStyle({ y, x: left }, { borderLeft: borderStyle });
-      updateStyle({ y, x: right }, { borderRight: borderStyle });
-      updateStyle({ y, x: right + 1 }, { borderLeft: borderStyle });
-    }
-    for (let x = left; x <= right; x++) {
-      updateStyle({ y: top - 1, x }, { borderBottom: borderStyle });
-      updateStyle({ y: top, x }, { borderTop: borderStyle });
-      updateStyle({ y: bottom, x }, { borderBottom: borderStyle });
-      updateStyle({ y: bottom + 1, x }, { borderTop: borderStyle });
-    }
-  });
-  matchingCells.forEach((address) => {
-    const { y, x } = a2p(address);
-    updateStyle({ y, x }, { backgroundColor: SEARCH_MATCHING_BACKGROUND });
-  });
-  if (matchingCells.length > 0) {
-    const { y, x } = a2p(matchingCells[matchingCellIndex]);
-    updateStyle(
-      { y, x },
-      {
-        borderLeft: SEARCH_MATCHING_BORDER,
-        borderRight: SEARCH_MATCHING_BORDER,
-        borderTop: SEARCH_MATCHING_BORDER,
-        borderBottom: SEARCH_MATCHING_BORDER
-      }
-    );
-    updateStyle({ y, x: x - 1 }, { borderRight: SEARCH_MATCHING_BORDER });
-    updateStyle({ y, x: x + 1 }, { borderLeft: SEARCH_MATCHING_BORDER });
-    updateStyle({ y: y - 1, x }, { borderBottom: SEARCH_MATCHING_BORDER });
-    updateStyle({ y: y + 1, x }, { borderTop: SEARCH_MATCHING_BORDER });
-  }
-  return cellStyles;
-};
-const LAST_MODIFIED = 1753483021;
-const CSS = `.gs-root1{display:inline-block;position:relative;border-spacing:0;width:fit-content;max-width:100%;overflow:auto;font-family:"SF Pro Text","SF Pro Icons","Helvetica Neue",Helvetica,Arial,Meiryo,sans-serif;visibility:hidden;opacity:0}.gs-root1.gs-initialized{visibility:visible;opacity:1;transition:opacity .2s ease-in-out}.gs-root1 .gs-main{flex:1;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.gs-root1 .gs-resizing{width:100%;height:100%;position:absolute;background-color:rgba(0,127,255,.08);top:0;left:0;z-index:2}.gs-root1 .gs-line-horizontal{width:100%}.gs-root1 .gs-line-vertical{height:100%}.gs-root1 .gs-line{position:relative;top:0;left:0;border:dotted 1px #07f;box-sizing:border-box}.gs-root1 .gs-line span{font-size:10px;padding:3px;background-color:#07f;color:#fff;margin:0;position:absolute;top:0;left:0}.gs-root1 .gs-scroll-handle{width:100%;height:100%;cursor:cell}.gs-hidden{visibility:hidden;position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;pointer-events:none;z-index:-1}.gs-fixed{position:fixed;top:0;left:0;z-index:1}.gs-root1[data-mode=light]{background-color:#e2e2e2;color:#000}.gs-root1[data-mode=light] .gs-main{background-color:#e2e2e2;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd}.gs-root1[data-mode=light] .gs-tabular{background-color:#e2e2e2}.gs-root1[data-mode=light] .gs-formula-bar{background-color:#efefef}.gs-root1[data-mode=light] .gs-formula-bar-editor-inner{color:#555}.gs-root1[data-mode=light] .gs-cell{border-top:solid 1px #ddd;border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-adjuster{background-color:#ddd}.gs-root1[data-mode=light] .gs-tabular-inner{background-color:#f7f7f7}.gs-root1[data-mode=light] .gs-th{background-color:#efefef;color:#666}.gs-root1[data-mode=light] .gs-th.gs-selecting{background-color:#d2d2d2}.gs-root1[data-mode=light] .gs-th.gs-choosing{background-color:#bbb}.gs-root1[data-mode=light] .gs-th.gs-th-selecting{background-color:#555;color:#fff}.gs-root1[data-mode=light] .gs-th-top{border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-top .gs-th-inner{border-top:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-left{border-top:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-left .gs-th-inner{border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-search-bar{color:rgba(0,0,0,.3)}.gs-editor[data-mode=light].gs-editing textarea{caret-color:#000000}.gs-editor[data-mode=light].gs-editing .gs-editor-hl{background-color:#f7f7f7;color:#000}.gs-editor[data-mode=light] .gs-editor-options{color:#000;background-color:#f7f7f7;border:solid 1px #ddd}.gs-root1[data-mode=dark]{background-color:#5a5a5a;color:#eee}.gs-root1[data-mode=dark] .gs-main{background-color:#3f3f3f;border-right:solid 1px #5a5a5a;border-bottom:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-tabular{background-color:#3f3f3f}.gs-root1[data-mode=dark] .gs-formula-bar{background-color:#4f4f4f}.gs-root1[data-mode=dark] .gs-formula-bar-editor-inner{color:#bbb}.gs-root1[data-mode=dark] .gs-cell{border-top:solid 1px #5a5a5a;border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-adjuster{background-color:#5a5a5a}.gs-root1[data-mode=dark] .gs-tabular-inner{background-color:#212121}.gs-root1[data-mode=dark] .gs-large-editor textarea{color:#eee;caret-color:#eeeeee}.gs-root1[data-mode=dark] .gs-th{background-color:#4f4f4f;color:#eee}.gs-root1[data-mode=dark] .gs-th.gs-selecting{background-color:#606060}.gs-root1[data-mode=dark] .gs-th.gs-choosing{background-color:#777}.gs-root1[data-mode=dark] .gs-th.gs-th-selecting{background-color:#aaa;color:#444}.gs-root1[data-mode=dark] .gs-th-top{border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-top .gs-th-inner{border-top:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-left{border-top:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-left .gs-th-inner{border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-search-bar textarea{color:#eee;caret-color:#eeeeee}.gs-root1[data-mode=dark] .gs-search-bar{color:rgba(255,255,255,.3)}.gs-editor[data-mode=dark].gs-editing textarea{caret-color:#eeeeee}.gs-editor[data-mode=dark].gs-editing .gs-editor-hl{background-color:#212121;color:#eee}.gs-editor[data-mode=dark] .gs-editor-options{color:#eee;background-color:#5a5a5a;border:solid 1px #5a5a5a}.gs-cell{transition:border-color .2s ease;padding:0;margin:0;box-sizing:border-box;position:relative;font-size:13px;letter-spacing:1px;line-height:24px;cursor:cell;user-select:none;-webkit-user-select:none;-moz-user-select:none}.gs-cell .gs-cell-inner-wrap.gs-selecting{background-color:rgba(0,128,255,.2)}.gs-cell.gs-copying textarea:focus{outline:solid 1px #0077ff}.gs-cell.gs-selecting{z-index:1}.gs-cell.gs-selecting .gs-cell-inner{background-color:rgba(0,128,255,.2)}.gs-cell.gs-selecting .gs-cell-label{display:block}.gs-cell.gs-choosing{margin-top:-1px;margin-left:-1px;z-index:1}.gs-cell.gs-choosing.gs-editing{color:transparent}.gs-cell.gs-choosing .gs-cell-label{display:block}.gs-cell .gs-formula-error-triangle{position:absolute;top:0;right:0;border-top:3px solid rgba(200,0,0,.9);border-right:3px solid rgba(200,0,0,.9);border-bottom:3px solid transparent;border-left:3px solid transparent;z-index:1}.gs-cell .gs-cell-label{font-size:8px;font-weight:400;font-style:normal;font-family:math,monospace,serif;letter-spacing:1px;line-height:14px;position:absolute;top:0;right:0;background-color:rgba(0,128,255,.2);color:rgba(255,255,255,.6);padding:0 2px;display:none;opacity:.7}.gs-cell .gs-cell-inner-wrap{width:100%;height:100%;position:absolute;top:0;left:0}.gs-cell .gs-cell-inner{width:100%;height:100%;overflow:hidden;display:flex;box-sizing:border-box;border:none!important}.gs-cell .gs-cell-rendered{overflow:hidden;white-space:pre-wrap;cursor:cell;word-wrap:break-word;word-break:break-all;padding:0 2px;width:100%;height:100%}.gs-cell .gs-cell-rendered>*{position:relative}.gs-cell .gs-cell-rendered>.backface{z-index:0}.gs-cell .gs-autofill-drag{background-color:#07f;position:absolute;width:7px;height:7px;bottom:0;right:0;margin-right:-3.5px;margin-bottom:-3.5px;cursor:crosshair;z-index:1}.gs-th[data-x="1"] .gs-th-inner-wrap{border-left:none}.gs-th[data-y="1"] .gs-th-inner-wrap{border-top:none}.gs-cell[data-x="1"]{border-left:none}.gs-cell[data-y="1"]{border-top:none}.gs-contextmenu-modal{width:100%;height:100vh;z-index:3}.gs-contextmenu{z-index:3;position:fixed;background-color:#fff;padding:5px 0;border-radius:5px;box-shadow:rgba(60,64,67,.3) 0 1px 2px 0,rgba(60,64,67,.15) 0 1px 3px 1px}.gs-contextmenu ul{min-width:250px;color:#555;margin:0;padding:0}.gs-contextmenu li{padding:5px 10px;list-style-type:none;display:flex}.gs-contextmenu li.gs-enabled{cursor:pointer}.gs-contextmenu li.gs-enabled:hover{background-color:#eee}.gs-contextmenu li.gs-disabled{opacity:.5;cursor:not-allowed}.gs-contextmenu li.gs-menu-divider{background-color:#aaa;margin:10px 0;padding:0;height:1px}.gs-contextmenu li .gs-menu-name{flex:1;font-size:15px;letter-spacing:1px}.gs-contextmenu li .gs-menu-shortcut{font-size:10px;line-height:20px;color:#999}.gs-contextmenu li .gs-menu-shortcut:before{content:"( "}.gs-contextmenu li .gs-menu-shortcut:after{content:" )"}.gs-contextmenu li .gs-menu-shortcut .gs-menu-underline{text-decoration:underline}.gs-editor-hl{padding:0 2px!important;position:absolute;font-family:monospace,Arial;font-size:12px;line-height:24px;letter-spacing:1px}.gs-formula-bar-editor-inner{position:relative;display:table-cell}.gs-editor{opacity:0;z-index:-1}.gs-editor .gs-editor-inner{position:relative}.gs-editor .gs-editor-hl{box-sizing:content-box;border:solid 2px #07f;margin:-2px -1px}.gs-editor textarea{width:100%;padding:0 2px!important;position:absolute;font-size:12px;font-family:monospace,Arial;line-height:24px;letter-spacing:1px;top:0;left:0;border:none;outline:0;background-color:transparent;color:transparent;resize:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;overflow:hidden;cursor:default;white-space:pre;height:auto}.gs-editor.gs-editing{z-index:3;opacity:1}.gs-editor.gs-editing .gs-cell-label{pointer-events:none;font-family:math,monospace,serif;position:absolute;top:0;right:0;margin-top:-15px;margin-right:-2px;padding:0 2px;font-size:10px;background-color:rgba(0,119,255,.75);color:#fff;z-index:1}.gs-formula-bar{width:100%;position:relative;display:table;align-items:center;justify-content:center;border-top:solid 1px rgba(128,128,128,.3);border-left:solid 1px rgba(128,128,128,.3);border-right:solid 1px rgba(128,128,128,.3);box-sizing:border-box}.gs-formula-bar .gs-selecting-address{display:table-cell;vertical-align:middle;width:60px;color:rgba(200,200,200);font-size:13px;text-align:center}.gs-formula-bar .gs-fx{display:table-cell;vertical-align:middle;width:30px;color:rgba(200,200,200);font-style:italic;font-family:cursive;text-align:center;border-left:solid 1px rgba(128,128,128,.5);font-size:15px}.gs-formula-bar .gs-editor-hl{z-index:0;overflow-y:auto;box-sizing:border-box;white-space:pre-wrap;word-break:break-all}.gs-formula-bar textarea{position:relative;z-index:1;width:100%;vertical-align:bottom;color:transparent;border:none;background-color:transparent;padding:0 2px;box-sizing:border-box;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-size:12px;font-family:monospace,Arial;height:24px;line-height:24px;min-height:24px;letter-spacing:1px;resize:vertical;caret-color:rgba(128,128,128);white-space:pre-wrap;word-break:break-all}.gs-token-type-INVALID_REF{color:red}.gs-token-type-VALUE.gs-token-entity-type-boolean,.gs-token-type-VALUE.gs-token-entity-type-number{color:#39f}.gs-token-type-VALUE.gs-token-entity-type-string{color:#090}.gs-editor-options{padding:0;box-shadow:0 2px 8px rgba(0,0,0,.25);border:1px solid rgba(128,128,128,.2);border-radius:4px}.gs-editor-option{cursor:pointer;list-style:none;padding:5px;font-size:12px}.gs-editor-option:hover{background-color:rgba(128,128,128,.1)}.gs-editor-option-selected{background-color:rgba(128,128,128,.2)}.gs-adjuster{padding:0}.gs-table{margin:0}.gs-tabular{overflow:auto;display:block;box-sizing:border-box;overscroll-behavior-x:contain}.gs-tabular-inner>table{table-layout:fixed;border-collapse:collapse;border-spacing:0}.gs-th{z-index:2;padding:0;position:sticky;font-size:13px;font-weight:400;box-sizing:border-box;vertical-align:top}.gs-th .gs-resizer{position:absolute;border-color:transparent;box-sizing:border-box;z-index:2}.gs-th .gs-resizer:hover{background-color:#07f}.gs-th .gs-resizer.gs-protected{display:none}.gs-th-inner{height:100%;box-sizing:border-box;vertical-align:middle;overflow:hidden;display:flex;align-items:center;justify-content:center}.gs-th-inner-wrap{height:100%;box-sizing:border-box;background-color:transparent}.gs-th-top{top:0;overflow:hidden}.gs-th-top .gs-resizer{top:0;right:0;width:3px;cursor:e-resize}.gs-th-top .gs-resizer.gs-dragging{border-right-style:dotted;height:1000000px!important;cursor:e-resize}.gs-th-left{left:0;overflow:hidden;min-width:30px;border-top:solid 1px #ddd}.gs-th-left .gs-resizer{left:0;bottom:0;height:3px;cursor:n-resize}.gs-th-left .gs-resizer.gs-dragging{border-bottom-style:dotted;width:1000000px!important;cursor:n-resize}.gs-th-top.gs-th-left{top:0;left:0;z-index:3;border:none!important}.gs-search-bar{width:100%;display:table;align-items:center;justify-content:center;border-top:solid 1px rgba(128,128,128,.3);border-left:solid 1px rgba(128,128,128,.3);border-right:solid 1px rgba(128,128,128,.3);box-sizing:border-box;background-color:rgba(200,50,0,.2)}.gs-search-bar.gs-search-found{background-color:rgba(0,200,100,.2)}.gs-search-bar .gs-search-bar-inner{vertical-align:middle;border-left:solid 1px rgba(128,128,128,.5)}.gs-search-bar .gs-search-bar-icon{border-left:solid 1px rgba(128,128,128,.3);display:table-cell;vertical-align:middle;width:30px}.gs-search-bar textarea{background-color:transparent;border:none;padding:0 2px;box-sizing:border-box;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-size:12px;font-family:monospace,Arial;height:24px;line-height:24px;min-height:24px;letter-spacing:1px;caret-color:rgba(128,128,128);white-space:pre-wrap;word-break:break-all;display:table-cell;vertical-align:middle;width:100%;resize:none}.gs-search-progress{display:table-cell;color:#999;font-size:13px;width:60px;vertical-align:middle;white-space:nowrap;text-align:center}.gs-search-close{display:table-cell;cursor:pointer;vertical-align:middle;width:24px}.gs-search-casesensitive{display:table-cell;cursor:pointer;vertical-align:middle;width:30px}.gs-search-casesensitive span{font-size:14px;padding:0 3px}.gs-search-casesensitive span.gs-search-casesensitive-on{color:#07f;background-color:rgba(200,200,255,.5);border-radius:3px}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}`;
+const LAST_MODIFIED = 1770663713;
+const CSS = `.gs-root1{display:inline-block;position:relative;border-spacing:0;width:fit-content;max-width:100%;line-height:normal;overflow:auto;font-family:"SF Pro Text","SF Pro Icons","Helvetica Neue",Helvetica,Arial,Meiryo,sans-serif;visibility:hidden;opacity:0}.gs-root1.gs-initialized{visibility:visible;opacity:1;transition:opacity .2s ease-in-out}.gs-root1 .gs-main{flex:1;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.gs-root1 .gs-resizing{width:100%;height:100%;position:absolute;background-color:rgba(0,127,255,.08);top:0;left:0;z-index:2}.gs-root1 .gs-line-horizontal{width:100%}.gs-root1 .gs-line-vertical{height:100%}.gs-root1 .gs-line{position:relative;top:0;left:0;border:dotted 1px #07f;box-sizing:border-box}.gs-root1 .gs-line span{font-size:10px;padding:3px;background-color:#07f;color:#fff;margin:0;position:absolute;top:0;left:0}.gs-root1 .gs-scroll-handle{width:100%;height:100%;cursor:cell}.gs-hidden{visibility:hidden;position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;pointer-events:none;z-index:-1}.gs-fixed{position:fixed;top:0;left:0;z-index:1}.gs-root1[data-mode=light]{background-color:#e2e2e2;color:#000}.gs-root1[data-mode=light] .gs-main{background-color:#e2e2e2;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd}.gs-root1[data-mode=light] .gs-tabular{background-color:#e2e2e2}.gs-root1[data-mode=light] .gs-formula-bar{background-color:#efefef}.gs-root1[data-mode=light] .gs-formula-bar-editor-inner{color:#555}.gs-root1[data-mode=light] .gs-cell{border-top:solid 1px #ddd;border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-adjuster{background-color:#ddd}.gs-root1[data-mode=light] .gs-tabular-inner{background-color:#f7f7f7}.gs-root1[data-mode=light] .gs-th{background-color:#efefef;color:#666}.gs-root1[data-mode=light] .gs-th-top{border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-top .gs-th-inner{border-top:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-left{border-top:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-left .gs-th-inner{border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-search-bar{color:rgba(0,0,0,.3)}.gs-editor[data-mode=light].gs-editing textarea{caret-color:#000000}.gs-editor[data-mode=light].gs-editing .gs-editor-hl{background-color:#f7f7f7;color:#000}.gs-editor[data-mode=light] .gs-editor-options{color:#000;background-color:#f7f7f7;border:solid 1px #ddd}.gs-root1[data-mode=dark]{background-color:#5a5a5a;color:#eee}.gs-root1[data-mode=dark] .gs-main{background-color:#3f3f3f;border-right:solid 1px #5a5a5a;border-bottom:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-tabular{background-color:#3f3f3f}.gs-root1[data-mode=dark] .gs-formula-bar{background-color:#4f4f4f}.gs-root1[data-mode=dark] .gs-formula-bar-editor-inner{color:#bbb}.gs-root1[data-mode=dark] .gs-cell{border-top:solid 1px #5a5a5a;border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-adjuster{background-color:#5a5a5a}.gs-root1[data-mode=dark] .gs-tabular-inner{background-color:#212121}.gs-root1[data-mode=dark] .gs-large-editor textarea{color:#eee;caret-color:#eeeeee}.gs-root1[data-mode=dark] .gs-th{background-color:#4f4f4f;color:#eee}.gs-root1[data-mode=dark] .gs-th-top{border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-top .gs-th-inner{border-top:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-left{border-top:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-left .gs-th-inner{border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-search-bar textarea{color:#eee;caret-color:#eeeeee}.gs-root1[data-mode=dark] .gs-search-bar{color:rgba(255,255,255,.3)}.gs-editor[data-mode=dark].gs-editing textarea{caret-color:#eeeeee}.gs-editor[data-mode=dark].gs-editing .gs-editor-hl{background-color:#212121;color:#eee}.gs-editor[data-mode=dark] .gs-editor-options{color:#eee;background-color:#5a5a5a;border:solid 1px #5a5a5a}.gs-cell{transition:border-color .2s ease;padding:0;margin:0;box-sizing:border-box;position:relative;font-size:13px;letter-spacing:1px;line-height:24px;cursor:cell;user-select:none;-webkit-user-select:none;-moz-user-select:none}.gs-cell.gs-copying textarea:focus{outline:solid 1px #0077ff}.gs-cell.gs-selecting{z-index:1}.gs-cell.gs-selecting .gs-cell-label{display:block}.gs-cell.gs-choosing{margin-top:-1px;margin-left:-1px;z-index:1}.gs-cell.gs-choosing.gs-editing{color:transparent}.gs-cell.gs-choosing .gs-cell-label{display:block}.gs-cell .gs-formula-error-triangle{position:absolute;top:0;right:0;border-top:3px solid rgba(200,0,0,.9);border-right:3px solid rgba(200,0,0,.9);border-bottom:3px solid transparent;border-left:3px solid transparent;z-index:1}.gs-cell .gs-cell-label{font-size:8px;font-weight:400;font-style:normal;font-family:math,monospace,serif;letter-spacing:1px;line-height:14px;position:absolute;top:0;right:0;background-color:rgba(0,128,255,.2);color:rgba(255,255,255,.6);padding:0 2px;display:none;opacity:.7}.gs-cell .gs-cell-inner-wrap{width:100%;height:100%;position:absolute;top:0;left:0}.gs-cell .gs-cell-inner{width:100%;height:100%;overflow:hidden;display:flex;box-sizing:border-box;border:none!important}.gs-cell .gs-cell-rendered{overflow:hidden;white-space:pre-wrap;cursor:cell;word-wrap:break-word;word-break:break-all;padding:0 2px;width:100%;height:100%}.gs-cell .gs-cell-rendered>*{position:relative}.gs-cell .gs-cell-rendered>.backface{z-index:0}.gs-cell .gs-autofill-drag{background-color:#07f;position:absolute;width:7px;height:7px;bottom:0;right:0;margin-right:-3.5px;margin-bottom:-3.5px;cursor:crosshair;z-index:1}.gs-th[data-x="1"] .gs-th-inner-wrap{border-left:none}.gs-th[data-y="1"] .gs-th-inner-wrap{border-top:none}.gs-cell[data-x="1"]{border-left:none}.gs-cell[data-y="1"]{border-top:none}.gs-contextmenu-modal{width:100%;height:100vh;z-index:3}.gs-contextmenu{z-index:3;position:fixed;background-color:#fff;padding:5px 0;border-radius:5px;box-shadow:rgba(60,64,67,.3) 0 1px 2px 0,rgba(60,64,67,.15) 0 1px 3px 1px}.gs-contextmenu ul{min-width:250px;color:#555;margin:0;padding:0}.gs-contextmenu li{padding:5px 10px;list-style-type:none;display:flex}.gs-contextmenu li.gs-enabled{cursor:pointer}.gs-contextmenu li.gs-enabled:hover{background-color:#eee}.gs-contextmenu li.gs-disabled{opacity:.5;cursor:not-allowed}.gs-contextmenu li.gs-menu-divider{background-color:#aaa;margin:10px 0;padding:0;height:1px}.gs-contextmenu li .gs-menu-name{flex:1;font-size:15px;letter-spacing:1px}.gs-contextmenu li .gs-menu-shortcut{font-size:10px;line-height:20px;color:#999}.gs-contextmenu li .gs-menu-shortcut:before{content:"( "}.gs-contextmenu li .gs-menu-shortcut:after{content:" )"}.gs-contextmenu li .gs-menu-shortcut .gs-menu-underline{text-decoration:underline}.gs-editor-hl{padding:0 2px!important;position:absolute;font-family:monospace,Arial;font-size:12px;line-height:24px;letter-spacing:1px}.gs-formula-bar-editor-inner{position:relative;display:table-cell}.gs-editor{opacity:0;z-index:-1}.gs-editor .gs-editor-inner{position:relative}.gs-editor .gs-editor-hl{box-sizing:content-box;border:solid 2px #07f;margin:-2px -1px}.gs-editor textarea{width:100%;padding:0 2px!important;position:absolute;font-size:12px;font-family:monospace,Arial;line-height:24px;letter-spacing:1px;top:0;left:0;border:none;outline:0;background-color:transparent;color:transparent;resize:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;overflow:hidden;cursor:default;white-space:pre;height:auto}.gs-editor.gs-editing{z-index:11;opacity:1}.gs-editor.gs-editing .gs-cell-label{pointer-events:none;font-family:math,monospace,serif;position:absolute;top:0;right:0;margin-top:-15px;margin-right:-2px;padding:0 2px;font-size:10px;background-color:rgba(0,119,255,.75);color:#fff;z-index:1}.gs-formula-bar{width:100%;position:relative;display:table;align-items:center;justify-content:center;border-top:solid 1px rgba(128,128,128,.3);border-left:solid 1px rgba(128,128,128,.3);border-right:solid 1px rgba(128,128,128,.3);box-sizing:border-box}.gs-formula-bar .gs-selecting-address{display:table-cell;vertical-align:middle;width:60px;color:rgba(200,200,200);font-size:13px;text-align:center}.gs-formula-bar .gs-fx{display:table-cell;vertical-align:middle;width:30px;color:rgba(200,200,200);font-style:italic;font-family:cursive;text-align:center;border-left:solid 1px rgba(128,128,128,.5);font-size:15px}.gs-formula-bar .gs-editor-hl{z-index:0;overflow-y:auto;box-sizing:border-box;white-space:pre-wrap;word-break:break-all}.gs-formula-bar textarea{position:relative;z-index:1;width:100%;vertical-align:bottom;color:transparent;border:none;background-color:transparent;padding:0 2px;box-sizing:border-box;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-size:12px;font-family:monospace,Arial;height:24px;line-height:24px;min-height:24px;letter-spacing:1px;resize:vertical;caret-color:rgba(128,128,128);white-space:pre-wrap;word-break:break-all}.gs-token-type-INVALID_REF{color:red}.gs-token-type-VALUE.gs-token-entity-type-boolean,.gs-token-type-VALUE.gs-token-entity-type-number{color:#39f}.gs-token-type-VALUE.gs-token-entity-type-string{color:#090}.gs-editor-options{padding:0;box-shadow:0 2px 8px rgba(0,0,0,.25);border:1px solid rgba(128,128,128,.2);border-radius:4px}.gs-editor-option{cursor:pointer;list-style:none;padding:5px;font-size:12px}.gs-editor-option:hover{background-color:rgba(128,128,128,.1)}.gs-editor-option-selected{background-color:rgba(128,128,128,.2)}.gs-adjuster{padding:0}.gs-table{margin:0}.gs-tabular{overflow:auto;display:block;box-sizing:border-box;overscroll-behavior:none;position:relative}.gs-tabular-inner>table{table-layout:fixed;border-collapse:collapse;border-spacing:0}.gs-th{z-index:2;padding:0;position:sticky;font-size:13px;font-weight:400;box-sizing:border-box;vertical-align:top}.gs-th .gs-resizer{position:absolute;border-color:transparent;box-sizing:border-box;z-index:2}.gs-th .gs-resizer:hover{background-color:#07f}.gs-th .gs-resizer.gs-protected{display:none}.gs-th-inner{height:100%;box-sizing:border-box;vertical-align:middle;overflow:hidden;display:flex;align-items:center;justify-content:center}.gs-th-inner-wrap{height:100%;box-sizing:border-box;background-color:transparent}.gs-th-top{top:0;overflow:hidden}.gs-th-top .gs-resizer{top:0;right:0;width:3px;cursor:e-resize}.gs-th-top .gs-resizer.gs-dragging{border-right-style:dotted;height:1000000px!important;cursor:e-resize}.gs-th-left{left:0;overflow:hidden;min-width:30px;border-top:solid 1px #ddd}.gs-th-left .gs-resizer{left:0;bottom:0;height:3px;cursor:n-resize}.gs-th-left .gs-resizer.gs-dragging{border-bottom-style:dotted;width:1000000px!important;cursor:n-resize}.gs-th-top.gs-th-left{top:0;left:0;z-index:3;border:none!important}.gs-search-bar{width:100%;display:table;align-items:center;justify-content:center;border-top:solid 1px rgba(128,128,128,.3);border-left:solid 1px rgba(128,128,128,.3);border-right:solid 1px rgba(128,128,128,.3);box-sizing:border-box;background-color:rgba(200,50,0,.2)}.gs-search-bar.gs-search-found{background-color:rgba(0,200,100,.2)}.gs-search-bar .gs-search-bar-inner{vertical-align:middle;border-left:solid 1px rgba(128,128,128,.5)}.gs-search-bar .gs-search-bar-icon{border-left:solid 1px rgba(128,128,128,.3);display:table-cell;vertical-align:middle;width:30px}.gs-search-bar textarea{background-color:transparent;border:none;padding:0 2px;box-sizing:border-box;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-size:12px;font-family:monospace,Arial;height:24px;line-height:24px;min-height:24px;letter-spacing:1px;caret-color:rgba(128,128,128);white-space:pre-wrap;word-break:break-all;display:table-cell;vertical-align:middle;width:100%;resize:none}.gs-search-progress{display:table-cell;color:#999;font-size:13px;width:60px;vertical-align:middle;white-space:nowrap;text-align:center}.gs-search-close{display:table-cell;cursor:pointer;vertical-align:middle;width:24px}.gs-search-casesensitive{display:table-cell;cursor:pointer;vertical-align:middle;width:30px}.gs-search-casesensitive span{font-size:14px;padding:0 3px}.gs-search-casesensitive span.gs-search-casesensitive-on{color:#07f;background-color:rgba(200,200,255,.5);border-radius:3px}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}`;
 const embedStyle = () => {
   if (typeof window === "undefined") {
     return;
@@ -10735,6 +10872,7 @@ function GridSheet({
   style,
   hub: initialHub
 }) {
+  var _a, _b;
   const { sheetResize, showFormulaBar = true, mode = "light" } = options;
   const rootRef = useRef(null);
   const mainRef = useRef(null);
@@ -10754,7 +10892,7 @@ function GridSheet({
   const sheetId = sheetIdRef.current;
   const tableReactive = useRef(null);
   const [initialState] = useState(() => {
-    var _a;
+    var _a2;
     if (!sheetName) {
       sheetName = `Sheet${sheetId}`;
       console.debug("GridSheet: sheetName is not provided, using default name:", sheetName);
@@ -10771,7 +10909,8 @@ function GridSheet({
     table.sheetId = sheetId;
     wire.sheetIdsByName[sheetName] = sheetId;
     table.initialize(initialCells);
-    (_a = wire.onInit) == null ? void 0 : _a.call(wire, { table });
+    (_a2 = wire.onInit) == null ? void 0 : _a2.call(wire, { table });
+    table.setTotalSize();
     tableReactive.current = table;
     const store2 = {
       sheetId,
@@ -10807,8 +10946,7 @@ function GridSheet({
       maxNumRows: -1,
       minNumCols: 1,
       maxNumCols: -1,
-      mode: "light",
-      ...table.getTotalSize()
+      mode: "light"
     };
     return store2;
   });
@@ -10824,9 +10962,9 @@ function GridSheet({
   const [sheetWidth, setSheetWidth] = useState((options == null ? void 0 : options.sheetWidth) || estimateSheetWidth(initialCells));
   useEffect(() => {
     const intervalId = window.setInterval(() => {
-      var _a, _b;
-      setSheetHeight(((_a = mainRef.current) == null ? void 0 : _a.clientHeight) || 0);
-      setSheetWidth(((_b = mainRef.current) == null ? void 0 : _b.clientWidth) || 0);
+      var _a2, _b2;
+      setSheetHeight(((_a2 = mainRef.current) == null ? void 0 : _a2.clientHeight) || 0);
+      setSheetWidth(((_b2 = mainRef.current) == null ? void 0 : _b2.clientWidth) || 0);
     }, 1e3);
     return () => window.clearInterval(intervalId);
   }, []);
@@ -10859,8 +10997,8 @@ function GridSheet({
             ref: mainRef,
             style: {
               //width: '100%',
-              maxWidth: (store.totalWidth || 0) + 2,
-              maxHeight: (store.totalHeight || 0) + 2,
+              maxWidth: (((_a = store.tableReactive.current) == null ? void 0 : _a.totalWidth) || 0) + 2,
+              maxHeight: (((_b = store.tableReactive.current) == null ? void 0 : _b.totalHeight) || 0) + 2,
               overflow: "auto",
               resize: sheetResize,
               ...style