@gridsheet/react-core 2.0.5 → 2.2.0-rc.0

package/dist/index.js

@@ -465,6 +465,8 @@ const shouldTracking = (operation2) => {
       return true;
     case "MOVE":
       return true;
+    case "SORT_ROWS":
+      return true;
   }
   return false;
 };
@@ -505,21 +507,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.filtered) ? 0 : (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
   };
@@ -550,6 +548,9 @@ const virtualize = (table, e) => {
     }
   }
   for (let y = 1; y <= table.getNumRows(); y++) {
+    if (table.isRowFiltered(y)) {
+      continue;
+    }
     const h = ((_b = table.getCellByPoint({ y, x: 0 }, "SYSTEM")) == null ? void 0 : _b.height) || DEFAULT_HEIGHT;
     height += h;
     if (boundaryTop === 0 && height > top) {
@@ -560,7 +561,7 @@ const virtualize = (table, e) => {
       break;
     }
   }
-  const ys = range(boundaryTop, boundaryBottom);
+  const ys = boundaryTop === 0 ? [] : range(boundaryTop, boundaryBottom).filter((y) => !table.isRowFiltered(y));
   const xs = range(boundaryLeft, boundaryRight);
   const before = table.getRectSize({
     top: 1,
@@ -662,14 +663,20 @@ const Resize = 1024;
 const SetRenderer = 2048;
 const SetParser = 4096;
 const SetPolicy = 16384;
+const Sort = 32768;
+const Filter = 65536;
+const SetLabel = 131072;
+const SetLabeler = 262144;
 const NoOperation = 0;
 const Move = MoveFrom | MoveTo;
-const Update = Write | Style | Copy | Resize | SetRenderer | SetParser | SetPolicy;
+const Update = Write | Style | Copy | Resize | SetRenderer | SetParser | SetPolicy | SetLabel | SetLabeler;
 const InsertRows = InsertRowsAbove | InsertRowsBelow;
 const InsertCols = InsertColsLeft | InsertColsRight;
 const Add = InsertRows | InsertCols;
 const Delete = RemoveRows | RemoveCols;
 const ReadOnly = Update | Delete | Add | Move;
+const ColumnMenu$1 = Filter | Sort | SetLabel;
+const ViewOnly = ReadOnly | ColumnMenu$1;
 const hasOperation = (operation2, flag) => {
   if (operation2 === void 0) {
     return false;
@@ -717,13 +724,27 @@ const debugOperations = (prevention) => {
   if (hasOperation(prevention, SetParser)) {
     operations2.push("SetParser");
   }
+  if (hasOperation(prevention, SetPolicy)) {
+    operations2.push("SetPolicy");
+  }
+  if (hasOperation(prevention, SetLabel)) {
+    operations2.push("SetLabel");
+  }
+  if (hasOperation(prevention, Sort)) {
+    operations2.push("Sort");
+  }
+  if (hasOperation(prevention, Filter)) {
+    operations2.push("Filter");
+  }
   return operations2;
 };
 const operation = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Add,
+  ColumnMenu: ColumnMenu$1,
   Copy,
   Delete,
+  Filter,
   InsertCols,
   InsertColsLeft,
   InsertColsRight,
@@ -738,11 +759,15 @@ const operation = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
   RemoveCols,
   RemoveRows,
   Resize,
+  SetLabel,
+  SetLabeler,
   SetParser,
   SetPolicy,
   SetRenderer,
+  Sort,
   Style,
   Update,
+  ViewOnly,
   Write,
   debugOperations,
   hasOperation
@@ -1888,6 +1913,9 @@ class TimeDelta {
     result = result.replace("S", String(tokens[3]).padStart(1, "0").substring(0, 1));
     return result;
   }
+  toMilliseconds() {
+    return this.date1.getTime() - this.date2.getTime();
+  }
   toJSON() {
     return this.stringify();
   }
@@ -3033,13 +3061,23 @@ class ArrowAction extends CoreAction {
     if (nextY < 1 || numRows < nextY || nextX < 1 || numCols < nextX) {
       return store;
     }
+    let resolvedY = nextY;
+    if (table.isRowFiltered(resolvedY)) {
+      const dir = deltaY >= 0 ? 1 : -1;
+      while (resolvedY >= 1 && resolvedY <= numRows && table.isRowFiltered(resolvedY)) {
+        resolvedY += dir;
+      }
+      if (resolvedY < 1 || resolvedY > numRows) {
+        return store;
+      }
+    }
     let { y: editorTop, x: editorLeft, height, width } = store.editorRect;
     if (deltaY > 0) {
-      for (let i = y; i < nextY; i++) {
+      for (let i = y; i < resolvedY; i++) {
         editorTop += ((_a = table.getCellByPoint({ y: i, x: 0 }, "SYSTEM")) == null ? void 0 : _a.height) || DEFAULT_HEIGHT;
       }
     } else if (deltaY < 0) {
-      for (let i = y - 1; i >= nextY; i--) {
+      for (let i = y - 1; i >= resolvedY; i--) {
         editorTop -= ((_b = table.getCellByPoint({ y: i, x: 0 }, "SYSTEM")) == null ? void 0 : _b.height) || DEFAULT_HEIGHT;
       }
     }
@@ -3052,14 +3090,14 @@ class ArrowAction extends CoreAction {
         editorLeft -= ((_d = table.getCellByPoint({ y: 0, x: i }, "SYSTEM")) == null ? void 0 : _d.width) || DEFAULT_WIDTH;
       }
     }
-    const cell = table.getCellByPoint({ y: nextY, x: nextX }, "SYSTEM");
+    const cell = table.getCellByPoint({ y: resolvedY, x: nextX }, "SYSTEM");
     height = (cell == null ? void 0 : cell.height) || DEFAULT_HEIGHT;
     width = (cell == null ? void 0 : cell.width) || DEFAULT_WIDTH;
-    smartScroll(table, tabularRef.current, { y: nextY, x: nextX });
+    smartScroll(table, tabularRef.current, { y: resolvedY, x: nextX });
     return {
       ...store,
       selectingZone: { startY: -1, startX: -1, endY: -1, endX: -1 },
-      choosing: { y: nextY, x: nextX },
+      choosing: { y: resolvedY, x: nextX },
       editorRect: { y: editorTop, x: editorLeft, height, width }
     };
   }
@@ -3127,6 +3165,17 @@ class WalkAction extends CoreAction {
     if (nextY < 1 || numRows < nextY || nextX < 1 || numCols < nextX) {
       return store;
     }
+    if (table.isRowFiltered(nextY)) {
+      const dir = deltaY >= 0 ? 1 : -1;
+      const lo = top !== -1 ? top : 1;
+      const hi = bottom !== -1 ? bottom : numRows;
+      while (nextY >= lo && nextY <= hi && table.isRowFiltered(nextY)) {
+        nextY += dir;
+      }
+      if (nextY < lo || nextY > hi || table.isRowFiltered(nextY)) {
+        return store;
+      }
+    }
     if (deltaY > 0) {
       for (let i = y; i < nextY; i++) {
         editorTop += ((_a = table.getCellByPoint({ y: i, x: 0 }, "SYSTEM")) == null ? void 0 : _a.height) || DEFAULT_HEIGHT;
@@ -3370,6 +3419,152 @@ class RemoveColsAction extends CoreAction {
   }
 }
 const removeCols = new RemoveColsAction().bind();
+class SortRowsAction extends CoreAction {
+  reduce(store, payload) {
+    const { x, direction } = payload;
+    const { tableReactive: tableRef, selectingZone, choosing } = store;
+    const table = tableRef.current;
+    if (table == null) {
+      return store;
+    }
+    table.sortRows({
+      x,
+      direction,
+      undoReflection: {
+        sheetId: table.sheetId,
+        selectingZone,
+        choosing
+      },
+      redoReflection: {
+        sheetId: table.sheetId,
+        selectingZone,
+        choosing
+      }
+    });
+    return {
+      ...store,
+      tableReactive: { current: table }
+    };
+  }
+}
+const sortRows = new SortRowsAction().bind();
+class FilterRowsAction extends CoreAction {
+  reduce(store, payload) {
+    const { x, filter } = payload;
+    const { tableReactive: tableRef, selectingZone, choosing } = store;
+    const table = tableRef.current;
+    if (table == null) {
+      return store;
+    }
+    table.filterRows({
+      x,
+      filter,
+      undoReflection: {
+        sheetId: table.sheetId,
+        selectingZone,
+        choosing
+      },
+      redoReflection: {
+        sheetId: table.sheetId,
+        selectingZone,
+        choosing
+      }
+    });
+    let newChoosing = choosing;
+    if (table.isRowFiltered(choosing.y)) {
+      for (let y = 1; y <= table.getNumRows(); y++) {
+        if (!table.isRowFiltered(y)) {
+          newChoosing = { y, x: choosing.x };
+          break;
+        }
+      }
+    }
+    return {
+      ...store,
+      choosing: newChoosing,
+      selectingZone: newChoosing !== choosing ? resetZone : selectingZone,
+      tableReactive: { current: table }
+    };
+  }
+}
+const filterRows = new FilterRowsAction().bind();
+class ClearFilterRowsAction extends CoreAction {
+  reduce(store, payload) {
+    const { x } = payload;
+    const { tableReactive: tableRef, selectingZone, choosing } = store;
+    const table = tableRef.current;
+    if (table == null) {
+      return store;
+    }
+    table.clearFilterRows(
+      x,
+      {
+        sheetId: table.sheetId,
+        selectingZone,
+        choosing
+      },
+      {
+        sheetId: table.sheetId,
+        selectingZone,
+        choosing
+      }
+    );
+    let newChoosing = choosing;
+    if (table.isRowFiltered(choosing.y)) {
+      for (let y = 1; y <= table.getNumRows(); y++) {
+        if (!table.isRowFiltered(y)) {
+          newChoosing = { y, x: choosing.x };
+          break;
+        }
+      }
+    }
+    return {
+      ...store,
+      choosing: newChoosing,
+      selectingZone: newChoosing !== choosing ? resetZone : selectingZone,
+      tableReactive: { current: table }
+    };
+  }
+}
+const clearFilterRows = new ClearFilterRowsAction().bind();
+class SetColumnMenuAction extends CoreAction {
+  reduce(store, payload) {
+    return {
+      ...store,
+      columnMenuState: payload
+    };
+  }
+}
+const setColumnMenu = new SetColumnMenuAction().bind();
+class SetColLabelAction extends CoreAction {
+  reduce(store, payload) {
+    const { x, label } = payload;
+    const { tableReactive: tableRef, selectingZone, choosing } = store;
+    const table = tableRef.current;
+    if (table == null) {
+      return store;
+    }
+    table.setColLabel({
+      x,
+      label,
+      undoReflection: {
+        sheetId: table.sheetId,
+        selectingZone,
+        choosing
+      },
+      redoReflection: {
+        sheetId: table.sheetId,
+        selectingZone,
+        choosing
+      }
+    });
+    return {
+      ...store,
+      tableReactive: { current: table }
+    };
+  }
+}
+const setColLabel = new SetColLabelAction().bind();
 class setStoreAction extends CoreAction {
   reduce(store, payload) {
     return {
@@ -3402,7 +3597,11 @@ const userActions = {
   insertColsLeft,
   insertColsRight,
   removeRows,
-  removeCols
+  removeCols,
+  sortRows,
+  filterRows,
+  clearFilterRows,
+  setColLabel
 };
 const clip = (store) => {
   const { selectingZone, choosing, editorRef, tableReactive: tableRef } = store;
@@ -4819,6 +5018,26 @@ const colsRemover = async ({ store, dispatch }) => {
   dispatch(removeCols({ numCols, x: left, operator: "USER" }));
   (_a = editorRef.current) == null ? void 0 : _a.focus();
 };
+const rowsSorterAsc = async ({ store, dispatch }, x) => {
+  var _a;
+  dispatch(sortRows({ x, direction: "asc" }));
+  (_a = store.editorRef.current) == null ? void 0 : _a.focus();
+};
+const rowsSorterDesc = async ({ store, dispatch }, x) => {
+  var _a;
+  dispatch(sortRows({ x, direction: "desc" }));
+  (_a = store.editorRef.current) == null ? void 0 : _a.focus();
+};
+const rowsFilterer = async ({ store, dispatch }, x, filter) => {
+  var _a;
+  dispatch(filterRows({ x, filter }));
+  (_a = store.editorRef.current) == null ? void 0 : _a.focus();
+};
+const rowsFilterClearer = async ({ store, dispatch }, x) => {
+  var _a;
+  dispatch(clearFilterRows({ x }));
+  (_a = store.editorRef.current) == null ? void 0 : _a.focus();
+};
 const syncers = {
   copy: copier,
   cut: cutter,
@@ -4830,7 +5049,11 @@ const syncers = {
   insertColsLeft: colsInserterLeft,
   insertColsRight: colsInserterRight,
   removeRows: rowsRemover,
-  removeCols: colsRemover
+  removeCols: colsRemover,
+  sortRowsAsc: rowsSorterAsc,
+  sortRowsDesc: rowsSorterDesc,
+  filterRows: rowsFilterer,
+  clearFilter: rowsFilterClearer
 };
 const ContextMenu = () => {
   const { store, dispatch } = useContext(Context);
@@ -5124,6 +5347,310 @@ const defaultContextMenuItems = [
   UndoItem,
   RedoItem
 ];
+const METHOD_LABELS = {
+  eq: "=",
+  ne: "≠",
+  gt: ">",
+  gte: "≥",
+  lt: "<",
+  lte: "≤",
+  blank: "Blank",
+  nonblank: "Nonblank",
+  includes: "Includes",
+  excludes: "Excludes"
+};
+const NO_VALUE_METHODS = ["blank", "nonblank"];
+const DEFAULT_CONDITION = { method: "eq", value: [""] };
+const ColumnMenu = () => {
+  const { store, dispatch } = useContext(Context);
+  const { columnMenuState, tableReactive: tableRef, editorRef } = store;
+  const table = tableRef.current;
+  const [conditions, setConditions] = useState([{ ...DEFAULT_CONDITION }]);
+  const [mode, setMode] = useState("or");
+  const [label, setLabel] = useState("");
+  const labelInputRef = useRef(null);
+  const x = columnMenuState == null ? void 0 : columnMenuState.x;
+  const position = columnMenuState == null ? void 0 : columnMenuState.position;
+  useEffect(() => {
+    if (x != null && table) {
+      const colCell2 = table.getCellByPoint({ y: 0, x }, "SYSTEM");
+      const existing = colCell2 == null ? void 0 : colCell2.filter;
+      if (existing && existing.conditions.length > 0) {
+        setConditions(existing.conditions.map((c) => ({ ...c, value: [...c.value] })));
+        setMode(existing.mode || "or");
+      } else {
+        setConditions([{ ...DEFAULT_CONDITION, value: [""] }]);
+        setMode("or");
+      }
+      setLabel((colCell2 == null ? void 0 : colCell2.label) ?? "");
+    }
+  }, [x]);
+  const handleClose = useCallback(() => {
+    var _a;
+    dispatch(setColumnMenu(null));
+    (_a = editorRef.current) == null ? void 0 : _a.focus();
+  }, [dispatch, editorRef]);
+  const handleApplyLabel = useCallback(() => {
+    var _a;
+    if (x == null) {
+      return;
+    }
+    dispatch(setColLabel({ x, label }));
+    dispatch(setColumnMenu(null));
+    (_a = editorRef.current) == null ? void 0 : _a.focus();
+  }, [dispatch, x, label, editorRef]);
+  const handleSortAsc = useCallback(() => {
+    var _a;
+    if (x == null) {
+      return;
+    }
+    dispatch(sortRows({ x, direction: "asc" }));
+    dispatch(setColumnMenu(null));
+    (_a = editorRef.current) == null ? void 0 : _a.focus();
+  }, [dispatch, x, editorRef]);
+  const handleSortDesc = useCallback(() => {
+    var _a;
+    if (x == null) {
+      return;
+    }
+    dispatch(sortRows({ x, direction: "desc" }));
+    dispatch(setColumnMenu(null));
+    (_a = editorRef.current) == null ? void 0 : _a.focus();
+  }, [dispatch, x, editorRef]);
+  const handleApplyFilter = useCallback(() => {
+    var _a;
+    if (x == null) {
+      return;
+    }
+    const valid = conditions.filter((c) => {
+      if (NO_VALUE_METHODS.includes(c.method)) {
+        return true;
+      }
+      return c.value.some((v) => v.trim() !== "");
+    });
+    if (valid.length === 0) {
+      dispatch(clearFilterRows({ x }));
+    } else {
+      dispatch(
+        filterRows({
+          x,
+          filter: { mode, conditions: valid }
+        })
+      );
+    }
+    dispatch(setColumnMenu(null));
+    (_a = editorRef.current) == null ? void 0 : _a.focus();
+  }, [dispatch, x, conditions, mode, editorRef]);
+  const handleResetColumn = useCallback(() => {
+    var _a;
+    if (x == null) return;
+    dispatch(clearFilterRows({ x }));
+    setConditions([{ ...DEFAULT_CONDITION, value: [""] }]);
+    setMode("or");
+    dispatch(setColumnMenu(null));
+    (_a = editorRef.current) == null ? void 0 : _a.focus();
+  }, [dispatch, x, editorRef]);
+  const handleResetAll = useCallback(() => {
+    var _a;
+    dispatch(clearFilterRows({}));
+    setConditions([{ ...DEFAULT_CONDITION, value: [""] }]);
+    setMode("or");
+    dispatch(setColumnMenu(null));
+    (_a = editorRef.current) == null ? void 0 : _a.focus();
+  }, [dispatch, editorRef]);
+  const updateCondition = useCallback((index, patch) => {
+    setConditions((prev) => {
+      const next = [...prev];
+      next[index] = { ...next[index], ...patch };
+      return next;
+    });
+  }, []);
+  const addCondition = useCallback(() => {
+    setConditions((prev) => [...prev, { ...DEFAULT_CONDITION, value: [""] }]);
+  }, []);
+  const removeCondition = useCallback((index) => {
+    setConditions((prev) => {
+      if (prev.length <= 1) {
+        return [{ ...DEFAULT_CONDITION, value: [""] }];
+      }
+      return prev.filter((_, i) => i !== index);
+    });
+  }, []);
+  if (!columnMenuState || !table || x == null || !position) {
+    return null;
+  }
+  const hasAnyFilter = table.hasActiveFilters();
+  const colCell = table.getCellByPoint({ y: 0, x }, "SYSTEM");
+  const sortDisabled = hasOperation(colCell == null ? void 0 : colCell.prevention, Sort);
+  const filterDisabled = hasOperation(colCell == null ? void 0 : colCell.prevention, Filter);
+  const labelDisabled = hasOperation(colCell == null ? void 0 : colCell.prevention, SetLabel);
+  const labelPlaceholder = table.getLabel(void 0, colCell == null ? void 0 : colCell.labeler, x) ?? x2c(x);
+  const insertDisabled = table.maxNumCols !== -1 && table.getNumCols() + 1 > table.maxNumCols;
+  insertDisabled || hasOperation(colCell == null ? void 0 : colCell.prevention, InsertColsLeft);
+  insertDisabled || hasOperation(colCell == null ? void 0 : colCell.prevention, InsertColsRight);
+  table.minNumCols !== -1 && table.getNumCols() - 1 < table.minNumCols || hasOperation(colCell == null ? void 0 : colCell.prevention, RemoveCols);
+  return /* @__PURE__ */ jsx(
+    Fixed,
+    {
+      className: "gs-column-menu-modal",
+      onClick: (e) => {
+        e.preventDefault();
+        handleClose();
+        return false;
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "gs-column-menu",
+          style: { top: position.y, left: position.x },
+          onClick: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ jsxs("ul", { children: [
+            /* @__PURE__ */ jsxs("li", { className: `gs-column-menu-filter${filterDisabled ? " gs-disabled" : ""}`, children: [
+              /* @__PURE__ */ jsxs("div", { className: "gs-filter-header", children: [
+                /* @__PURE__ */ jsx("div", { className: "gs-menu-name", children: "Filter" }),
+                /* @__PURE__ */ jsx("button", { className: "gs-filter-add-btn", onClick: addCondition, disabled: filterDisabled, children: "+ ADD" }),
+                /* @__PURE__ */ jsxs("div", { className: `gs-filter-mode-toggle${conditions.length <= 1 ? " gs-disabled" : ""}`, children: [
+                  /* @__PURE__ */ jsxs("label", { className: mode === "and" ? "gs-active" : "", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "radio",
+                        name: "gs-filter-mode",
+                        checked: mode === "and",
+                        onChange: () => setMode("and"),
+                        disabled: filterDisabled || conditions.length <= 1
+                      }
+                    ),
+                    "AND"
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { className: mode === "or" ? "gs-active" : "", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "radio",
+                        name: "gs-filter-mode",
+                        checked: mode === "or",
+                        onChange: () => setMode("or"),
+                        disabled: filterDisabled || conditions.length <= 1
+                      }
+                    ),
+                    "OR"
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "gs-filter-conditions", children: conditions.map((cond, i) => /* @__PURE__ */ jsxs("div", { className: "gs-filter-condition-row", children: [
+                /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    className: "gs-filter-method-select",
+                    value: cond.method,
+                    disabled: filterDisabled,
+                    onChange: (e) => updateCondition(i, {
+                      method: e.target.value
+                    }),
+                    children: Object.keys(METHOD_LABELS).map((m) => /* @__PURE__ */ jsx("option", { value: m, children: METHOD_LABELS[m] }, m))
+                  }
+                ),
+                !NO_VALUE_METHODS.includes(cond.method) && /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: "gs-filter-value-input",
+                    type: "text",
+                    placeholder: "Value",
+                    value: cond.value[0] || "",
+                    disabled: filterDisabled,
+                    onChange: (e) => updateCondition(i, { value: [e.target.value] }),
+                    onKeyDown: (e) => {
+                      if (e.nativeEvent.isComposing) {
+                        return;
+                      }
+                      if (e.key === "Enter") {
+                        handleApplyFilter();
+                      }
+                      if (e.key === "Escape") {
+                        handleClose();
+                      }
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "gs-filter-remove-btn",
+                    onClick: () => removeCondition(i),
+                    disabled: filterDisabled,
+                    title: "Remove condition",
+                    children: "✕"
+                  }
+                )
+              ] }, i)) }),
+              /* @__PURE__ */ jsxs("div", { className: "gs-filter-actions", children: [
+                hasAnyFilter && /* @__PURE__ */ jsx("button", { className: "gs-filter-reset-all-btn", onClick: handleResetAll, disabled: filterDisabled, children: "RESET ALL" }),
+                /* @__PURE__ */ jsxs("div", { className: "gs-filter-actions-right", children: [
+                  (colCell == null ? void 0 : colCell.filter) && /* @__PURE__ */ jsx("button", { className: "gs-filter-reset-btn", onClick: handleResetColumn, disabled: filterDisabled, children: "RESET" }),
+                  /* @__PURE__ */ jsx("button", { className: "gs-filter-apply-btn", onClick: handleApplyFilter, disabled: filterDisabled, children: "APPLY" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("li", { className: "gs-menu-divider" }),
+            /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: sortDisabled ? "gs-disabled" : "gs-enabled",
+                onClick: () => {
+                  if (!sortDisabled) {
+                    handleSortAsc();
+                  }
+                },
+                children: /* @__PURE__ */ jsx("div", { className: "gs-menu-name", children: "Sort A to Z" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: sortDisabled ? "gs-disabled" : "gs-enabled",
+                onClick: () => {
+                  if (!sortDisabled) {
+                    handleSortDesc();
+                  }
+                },
+                children: /* @__PURE__ */ jsx("div", { className: "gs-menu-name", children: "Sort Z to A" })
+              }
+            ),
+            /* @__PURE__ */ jsx("li", { className: "gs-menu-divider" }),
+            /* @__PURE__ */ jsx("li", { className: `gs-column-menu-label${labelDisabled ? " gs-disabled" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "gs-label-input-row", children: [
+              /* @__PURE__ */ jsx("div", { className: "gs-menu-name", children: "Label:" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: labelInputRef,
+                  className: "gs-label-input",
+                  type: "text",
+                  placeholder: labelPlaceholder,
+                  value: label,
+                  disabled: labelDisabled,
+                  onChange: (e) => setLabel(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.nativeEvent.isComposing) {
+                      return;
+                    }
+                    if (e.key === "Enter") {
+                      handleApplyLabel();
+                    }
+                    if (e.key === "Escape") {
+                      handleClose();
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("button", { className: "gs-label-apply-btn", onClick: handleApplyLabel, disabled: labelDisabled, children: "UPDATE" })
+            ] }) })
+          ] })
+        }
+      )
+    }
+  );
+};
 var utc$2 = { exports: {} };
 var utc$1 = utc$2.exports;
 var hasRequiredUtc;
@@ -5279,11 +5806,103 @@ var timezoneExports = requireTimezone();
 const timezone = /* @__PURE__ */ getDefaultExportFromCjs(timezoneExports);
 dayjs.extend(timezone);
 dayjs.extend(utc);
-const BOOLS = { true: true, false: false };
 const NUMS = /* @__PURE__ */ new Set(["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]);
 const NUMS_Z = /* @__PURE__ */ new Set([...NUMS, "Z", "z"]);
 const JFMASOND = /* @__PURE__ */ new Set(["J", "F", "M", "A", "S", "O", "N", "D", ...NUMS]);
 const NBRYNLGPTVC = /* @__PURE__ */ new Set(["N", "B", "R", "Y", "N", "L", "G", "P", "T", "V", "C", ...NUMS_Z]);
+const DATE_WORDS = /* @__PURE__ */ new Set([
+  "jan",
+  "feb",
+  "mar",
+  "apr",
+  "may",
+  "jun",
+  "jul",
+  "aug",
+  "sep",
+  "oct",
+  "nov",
+  "dec",
+  "january",
+  "february",
+  "march",
+  "april",
+  "june",
+  "july",
+  "august",
+  "september",
+  "october",
+  "november",
+  "december",
+  "mon",
+  "tue",
+  "wed",
+  "thu",
+  "fri",
+  "sat",
+  "sun",
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+  "sunday",
+  "am",
+  "pm",
+  "utc",
+  "gmt",
+  "est",
+  "cst",
+  "mst",
+  "pst",
+  "jst",
+  "cet",
+  "eet",
+  "ist",
+  "aest",
+  "edt",
+  "cdt",
+  "mdt",
+  "pdt",
+  "bst",
+  "hst",
+  "akst",
+  "akdt",
+  "nzst",
+  "nzdt",
+  "t",
+  "z"
+]);
+function parseDate(value) {
+  const first = value[0];
+  if (first == null || !JFMASOND.has(first.toUpperCase())) {
+    return;
+  }
+  if (!NBRYNLGPTVC.has(value[value.length - 1].toUpperCase())) {
+    return;
+  }
+  if (value.match(/[=*&#@!?[\]{}"'()|%\\<>~+\r\n]/)) {
+    return;
+  }
+  const words = value.split(/[\s,/\-:.]+/).filter(Boolean);
+  for (const word of words) {
+    if (/^[a-zA-Z]+$/.test(word) && !DATE_WORDS.has(word.toLowerCase())) {
+      return;
+    }
+  }
+  let timeZone = "UTC";
+  try {
+    timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  } catch (e) {
+  }
+  try {
+    const day = dayjs.tz(value, timeZone);
+    return day.toDate();
+  } catch (e) {
+  }
+}
+const BOOLS = { true: true, false: false };
 class Parser2 {
   constructor(props) {
     this.applyMixins(props == null ? void 0 : props.mixins);
@@ -5371,26 +5990,7 @@ class Parser2 {
     return TimeDelta.parse(value);
   }
   date(value, cell) {
-    const first = value[0];
-    if (first == null || !JFMASOND.has(first.toUpperCase())) {
-      return;
-    }
-    if (!NBRYNLGPTVC.has(value[value.length - 1].toUpperCase())) {
-      return;
-    }
-    if (value.match(/[=*&#@!?[\]{}"'()|%\\<>~+\r\n]/)) {
-      return;
-    }
-    let timeZone = "UTC";
-    try {
-      timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    } catch (e) {
-    }
-    try {
-      const day = dayjs.tz(value, timeZone);
-      return day.toDate();
-    } catch (e) {
-    }
+    return parseDate(value);
   }
 }
 const defaultParser = new Parser2();
@@ -7661,6 +8261,174 @@ class Policy {
   }
 }
 const defaultPolicy = new Policy();
+const _str = (v) => v == null ? "" : String(v);
+function detectType(cellValue) {
+  if (typeof cellValue === "number") {
+    return "number";
+  }
+  if (cellValue instanceof Date) {
+    return "date";
+  }
+  if (TimeDelta.is(cellValue)) {
+    return "timedelta";
+  }
+  if (typeof cellValue === "boolean") {
+    return "boolean";
+  }
+  return "string";
+}
+function parseAsType(v, type) {
+  switch (type) {
+    case "number": {
+      let s = v.replace(/[,_]/g, "");
+      let scale = 1;
+      if (s.endsWith("%")) {
+        s = s.slice(0, -1);
+        scale = 0.01;
+      }
+      const n = Number(s);
+      return { ok: !isNaN(n), num: n * scale };
+    }
+    case "date": {
+      const d = parseDate(v);
+      if (!d) {
+        return { ok: false, num: NaN };
+      }
+      return { ok: true, num: d.getTime() };
+    }
+    case "timedelta": {
+      const td = TimeDelta.parse(v);
+      return td ? { ok: true, num: td.toMilliseconds() } : { ok: false, num: NaN };
+    }
+    case "boolean": {
+      const bv = v.toLowerCase();
+      if (bv === "true") {
+        return { ok: true, num: 1 };
+      }
+      if (bv === "false") {
+        return { ok: true, num: 0 };
+      }
+      return { ok: false, num: NaN };
+    }
+    default:
+      return { ok: false, num: NaN };
+  }
+}
+function toNumeric(cellValue, type) {
+  switch (type) {
+    case "number":
+      return cellValue;
+    case "date":
+      return cellValue.getTime();
+    case "timedelta":
+      return TimeDelta.ensure(cellValue).toMilliseconds();
+    case "boolean":
+      return cellValue ? 1 : 0;
+    default:
+      return NaN;
+  }
+}
+const filterEq = (condition, cellValue) => {
+  const vt = detectType(cellValue);
+  if (vt === "string") {
+    const s = _str(cellValue);
+    return condition.value.some((v) => s === v);
+  }
+  const cellNum = toNumeric(cellValue, vt);
+  return condition.value.some((v) => {
+    const parsed = parseAsType(v, vt);
+    return parsed.ok && cellNum === parsed.num;
+  });
+};
+const filterNe = (condition, cellValue) => {
+  const vt = detectType(cellValue);
+  if (vt === "string") {
+    const s = _str(cellValue);
+    return !condition.value.some((v) => s === v);
+  }
+  const cellNum = toNumeric(cellValue, vt);
+  return !condition.value.some((v) => {
+    const parsed = parseAsType(v, vt);
+    return parsed.ok && cellNum === parsed.num;
+  });
+};
+const filterGt = (condition, cellValue) => {
+  const vt = detectType(cellValue);
+  if (vt === "string") {
+    return _str(cellValue) > condition.value[0];
+  }
+  const cellNum = toNumeric(cellValue, vt);
+  const parsed = parseAsType(condition.value[0], vt);
+  return parsed.ok && cellNum > parsed.num;
+};
+const filterGte = (condition, cellValue) => {
+  const vt = detectType(cellValue);
+  if (vt === "string") {
+    return _str(cellValue) >= condition.value[0];
+  }
+  const cellNum = toNumeric(cellValue, vt);
+  const parsed = parseAsType(condition.value[0], vt);
+  return parsed.ok && cellNum >= parsed.num;
+};
+const filterLt = (condition, cellValue) => {
+  const vt = detectType(cellValue);
+  if (vt === "string") {
+    return _str(cellValue) < condition.value[0];
+  }
+  const cellNum = toNumeric(cellValue, vt);
+  const parsed = parseAsType(condition.value[0], vt);
+  return parsed.ok && cellNum < parsed.num;
+};
+const filterLte = (condition, cellValue) => {
+  const vt = detectType(cellValue);
+  if (vt === "string") {
+    return _str(cellValue) <= condition.value[0];
+  }
+  const cellNum = toNumeric(cellValue, vt);
+  const parsed = parseAsType(condition.value[0], vt);
+  return parsed.ok && cellNum <= parsed.num;
+};
+const filterBlank = (_condition, cellValue) => {
+  return cellValue == null || _str(cellValue) === "";
+};
+const filterNonblank = (_condition, cellValue) => {
+  return cellValue != null && _str(cellValue) !== "";
+};
+const filterIncludes = (condition, cellValue) => {
+  const s = _str(cellValue).toLowerCase();
+  return condition.value.some((v) => s.includes(v.toLowerCase()));
+};
+const filterExcludes = (condition, cellValue) => {
+  const s = _str(cellValue).toLowerCase();
+  return !condition.value.some((v) => s.includes(v.toLowerCase()));
+};
+const filterFunctions = {
+  eq: filterEq,
+  ne: filterNe,
+  gt: filterGt,
+  gte: filterGte,
+  lt: filterLt,
+  lte: filterLte,
+  blank: filterBlank,
+  nonblank: filterNonblank,
+  includes: filterIncludes,
+  excludes: filterExcludes
+};
+function evaluateFilterCondition(condition, cellValue) {
+  const fn = filterFunctions[condition.method];
+  return fn ? fn(condition, cellValue) : true;
+}
+function evaluateFilterConfig(filter, cellValue) {
+  const mode = filter.mode ?? "or";
+  if (filter.conditions.length === 0) {
+    return true;
+  }
+  if (mode === "and") {
+    return filter.conditions.every((c) => evaluateFilterCondition(c, cellValue));
+  } else {
+    return filter.conditions.some((c) => evaluateFilterCondition(c, cellValue));
+  }
+}
 class ReferencePreserver {
   constructor(table) {
     this.map = {};
@@ -7712,6 +8480,7 @@ class Table {
     this.idsToBeIdentified = [];
     this.totalWidth = 0;
     this.totalHeight = 0;
+    this.fullHeight = 0;
     this.version = 0;
     this.area = { top: 0, left: 0, bottom: 0, right: 0 };
     this.addressCaches = /* @__PURE__ */ new Map();
@@ -7746,6 +8515,278 @@ class Table {
       historicize
     });
   }
+  /** Get the raw (mutable) cell data for a point. Unlike getCellByPoint, this returns the actual wire.data reference. */
+  _getRawCellByPoint({ y, x }) {
+    var _a;
+    const id = (_a = this.idMatrix[y]) == null ? void 0 : _a[x];
+    if (id == null) {
+      return void 0;
+    }
+    return this.wire.data[id];
+  }
+  isRowFiltered(y) {
+    var _a;
+    return !!((_a = this._getRawCellByPoint({ y, x: 0 })) == null ? void 0 : _a.filtered);
+  }
+  hasActiveFilters() {
+    const numCols = this.getNumCols();
+    for (let col = 1; col <= numCols; col++) {
+      const colCell = this._getRawCellByPoint({ y: 0, x: col });
+      if ((colCell == null ? void 0 : colCell.filter) && colCell.filter.conditions.length > 0) {
+        return true;
+      }
+    }
+    return false;
+  }
+  /** Capture the current state of all filter-related cells (column headers + row headers) as a CellsByIdType snapshot */
+  /** Capture the full cell state of all filter-related header cells as a CellsByIdType snapshot */
+  _captureFilterCellStates() {
+    var _a, _b;
+    const snapshot = {};
+    const numCols = this.getNumCols();
+    const numRows = this.getNumRows();
+    for (let col = 1; col <= numCols; col++) {
+      const id = (_a = this.idMatrix[0]) == null ? void 0 : _a[col];
+      if (id != null) {
+        snapshot[id] = { ...this.wire.data[id] };
+      }
+    }
+    for (let y = 1; y <= numRows; y++) {
+      const id = (_b = this.idMatrix[y]) == null ? void 0 : _b[0];
+      if (id != null) {
+        snapshot[id] = { ...this.wire.data[id] };
+      }
+    }
+    return snapshot;
+  }
+  filterRows({
+    x,
+    filter,
+    undoReflection,
+    redoReflection
+  }) {
+    const diffBefore = this._captureFilterCellStates();
+    const colCell = this._getRawCellByPoint({ y: 0, x });
+    if (colCell) {
+      colCell.filter = filter;
+    }
+    this._reapplyFilters();
+    const diffAfter = this._captureFilterCellStates();
+    this.pushHistory({
+      applyed: true,
+      operation: "UPDATE",
+      srcSheetId: this.sheetId,
+      dstSheetId: this.sheetId,
+      undoReflection,
+      redoReflection,
+      diffBefore,
+      diffAfter,
+      partial: false
+    });
+    return this.refresh(false, true);
+  }
+  setColLabel({
+    x,
+    label,
+    undoReflection,
+    redoReflection
+  }) {
+    var _a;
+    const id = (_a = this.idMatrix[0]) == null ? void 0 : _a[x];
+    const diffBefore = {};
+    if (id != null) {
+      diffBefore[id] = { ...this.wire.data[id] };
+    }
+    const colCell = this._getRawCellByPoint({ y: 0, x });
+    if (colCell) {
+      if (label === "") {
+        delete colCell.label;
+      } else {
+        colCell.label = label;
+      }
+    }
+    const diffAfter = {};
+    if (id != null) {
+      diffAfter[id] = { ...this.wire.data[id] };
+    }
+    const changed = Object.keys(diffBefore).some(
+      (id2) => JSON.stringify(diffBefore[id2]) !== JSON.stringify(diffAfter[id2])
+    );
+    if (changed) {
+      this.pushHistory({
+        applyed: true,
+        operation: "UPDATE",
+        srcSheetId: this.sheetId,
+        dstSheetId: this.sheetId,
+        undoReflection,
+        redoReflection,
+        diffBefore,
+        diffAfter,
+        partial: false
+      });
+    }
+    return this.refresh(false, true);
+  }
+  clearFilterRows(x, undoReflection, redoReflection) {
+    const diffBefore = this._captureFilterCellStates();
+    if (x != null) {
+      const colCell = this._getRawCellByPoint({ y: 0, x });
+      if (colCell) {
+        delete colCell.filter;
+      }
+    } else {
+      const numCols = this.getNumCols();
+      for (let col = 1; col <= numCols; col++) {
+        const colCell = this._getRawCellByPoint({ y: 0, x: col });
+        if (colCell == null ? void 0 : colCell.filter) {
+          delete colCell.filter;
+        }
+      }
+    }
+    this._reapplyFilters();
+    const diffAfter = this._captureFilterCellStates();
+    const changed = Object.keys(diffBefore).some(
+      (id) => JSON.stringify(diffBefore[id]) !== JSON.stringify(diffAfter[id])
+    );
+    if (changed) {
+      this.pushHistory({
+        applyed: true,
+        operation: "UPDATE",
+        srcSheetId: this.sheetId,
+        dstSheetId: this.sheetId,
+        undoReflection,
+        redoReflection,
+        diffBefore,
+        diffAfter,
+        partial: false
+      });
+    }
+    return this.refresh(false, true);
+  }
+  _evaluateFilterConfig(filter, cellValue) {
+    return evaluateFilterConfig(filter, cellValue);
+  }
+  _reapplyFilters() {
+    const numCols = this.getNumCols();
+    const activeFilters = [];
+    for (let col = 1; col <= numCols; col++) {
+      const colCell = this._getRawCellByPoint({ y: 0, x: col });
+      if ((colCell == null ? void 0 : colCell.filter) && colCell.filter.conditions.length > 0) {
+        activeFilters.push({ x: col, filter: colCell.filter });
+      }
+    }
+    const numRows = this.getNumRows();
+    for (let y = 1; y <= numRows; y++) {
+      const rowCell = this._getRawCellByPoint({ y, x: 0 });
+      if (rowCell) {
+        delete rowCell.filtered;
+      }
+    }
+    if (activeFilters.length === 0) {
+      return;
+    }
+    for (let y = 1; y <= numRows; y++) {
+      let visible = true;
+      for (const { x: col, filter } of activeFilters) {
+        const cell = this.getCellByPoint({ y, x: col }, "COMPLETE");
+        if (!this._evaluateFilterConfig(filter, cell == null ? void 0 : cell.value)) {
+          visible = false;
+          break;
+        }
+      }
+      if (!visible) {
+        const rowCell = this._getRawCellByPoint({ y, x: 0 });
+        if (rowCell) {
+          rowCell.filtered = true;
+        }
+      }
+    }
+  }
+  sortRows({
+    x,
+    direction,
+    undoReflection,
+    redoReflection
+  }) {
+    const numRows = this.getNumRows();
+    if (numRows <= 1) {
+      return this;
+    }
+    const rowsBefore = [];
+    for (let y = 1; y <= numRows; y++) {
+      rowsBefore.push([...this.idMatrix[y]]);
+    }
+    const rowIndices = [];
+    for (let y = 1; y <= numRows; y++) {
+      rowIndices.push(y);
+    }
+    rowIndices.sort((a, b) => {
+      const cellA = this.getCellByPoint({ y: a, x }, "COMPLETE");
+      const cellB = this.getCellByPoint({ y: b, x }, "COMPLETE");
+      const valA = cellA == null ? void 0 : cellA.value;
+      const valB = cellB == null ? void 0 : cellB.value;
+      if (valA == null && valB == null) {
+        return 0;
+      }
+      if (valA == null) {
+        return 1;
+      }
+      if (valB == null) {
+        return -1;
+      }
+      let cmp = 0;
+      if (typeof valA === "number" && typeof valB === "number") {
+        cmp = valA - valB;
+      } else if (valA instanceof Date && valB instanceof Date) {
+        cmp = valA.getTime() - valB.getTime();
+      } else {
+        cmp = String(valA).localeCompare(String(valB));
+      }
+      return direction === "asc" ? cmp : -cmp;
+    });
+    let changed = false;
+    for (let i = 0; i < rowIndices.length; i++) {
+      if (rowIndices[i] !== i + 1) {
+        changed = true;
+        break;
+      }
+    }
+    if (!changed) {
+      return this;
+    }
+    this._applySortOrder(rowIndices);
+    const rowsAfter = [];
+    for (let y = 1; y <= numRows; y++) {
+      rowsAfter.push([...this.idMatrix[y]]);
+    }
+    this.pushHistory({
+      applyed: true,
+      operation: "SORT_ROWS",
+      srcSheetId: this.sheetId,
+      dstSheetId: this.sheetId,
+      undoReflection,
+      redoReflection,
+      rowsBefore,
+      rowsAfter
+    });
+    return this.refresh(true, true);
+  }
+  _applySortOrder(newOrder) {
+    const savedRows = [];
+    for (let i = 0; i < newOrder.length; i++) {
+      savedRows.push(this.idMatrix[newOrder[i]]);
+    }
+    for (let i = 0; i < newOrder.length; i++) {
+      this.idMatrix[i + 1] = savedRows[i];
+    }
+    this.addressCaches.clear();
+  }
+  _restoreRows(rows) {
+    for (let i = 0; i < rows.length; i++) {
+      this.idMatrix[i + 1] = [...rows[i]];
+    }
+    this.addressCaches.clear();
+  }
   get isInitialized() {
     return this.status === 2;
   }
@@ -7869,6 +8910,7 @@ class Table {
         } else {
           delete stacked.height;
           delete stacked.width;
+          delete stacked.label;
           delete stacked.labeler;
         }
         stacked.system = { id, changedAt, dependents: /* @__PURE__ */ new Set(), sheetId: this.sheetId };
@@ -7888,26 +8930,51 @@ 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 };
   }
   setTotalSize() {
-    const { bottom, right } = this.area;
-    const { width, height } = this.getRectSize({
-      top: 1,
-      left: 1,
-      bottom: bottom + 1,
-      right: right + 1
-    });
-    this.totalWidth = width + this.headerWidth;
-    this.totalHeight = height + this.headerHeight;
+    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;
+    let fullH = 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;
+      }
+      if (!(cell == null ? void 0 : cell.filtered)) {
+        accH += h;
+      }
+      fullH += h;
+    }
+    this.totalHeight = headerH + accH;
+    this.fullHeight = headerH + fullH;
   }
   refresh(relocate = false, resize = false) {
     this.incrementVersion();
@@ -8520,7 +9587,7 @@ class Table {
     diff,
     partial = true,
     updateChangedAt = true,
-    ignoreFields = ["labeler"],
+    ignoreFields = ["label", "labeler"],
     operator = "SYSTEM",
     operation: op = Update,
     formulaIdentify = true
@@ -9043,7 +10110,7 @@ class Table {
         break;
       case "INSERT_ROWS": {
         if (history.diffBefore) {
-          dstTable.applyDiff(history.diffBefore, history.partial);
+          dstTable.applyDiff(history.diffBefore, false);
         }
         const { height } = matrixShape({ matrix: history.idMatrix });
         dstTable.idMatrix.splice(history.y, height);
@@ -9108,6 +10175,11 @@ class Table {
         }
         break;
       }
+      case "SORT_ROWS": {
+        dstTable._restoreRows(history.rowsBefore);
+        dstTable._reapplyFilters();
+        break;
+      }
     }
     this.refresh(shouldTracking(history.operation), true);
     return {
@@ -9132,11 +10204,11 @@ class Table {
     }
     switch (history.operation) {
       case "UPDATE":
-        dstTable.applyDiff(history.diffAfter, history.partial);
+        dstTable.applyDiff(history.diffAfter, false);
         break;
       case "INSERT_ROWS": {
         if (history.diffAfter) {
-          dstTable.applyDiff(history.diffAfter, history.partial);
+          dstTable.applyDiff(history.diffAfter, false);
         }
         const { height } = matrixShape({ matrix: history.idMatrix });
         dstTable.idMatrix.splice(history.y, 0, ...history.idMatrix);
@@ -9145,7 +10217,7 @@ class Table {
       }
       case "INSERT_COLS": {
         if (history.diffAfter) {
-          dstTable.applyDiff(history.diffAfter, history.partial);
+          dstTable.applyDiff(history.diffAfter, false);
         }
         const { width } = matrixShape({ matrix: history.idMatrix });
         dstTable.idMatrix.map((row, i) => {
@@ -9179,6 +10251,12 @@ class Table {
         if (srcTable) {
           dstTable.move({ srcTable, src, dst, operator: "USER", historicize: false });
         }
+        break;
+      }
+      case "SORT_ROWS": {
+        dstTable._restoreRows(history.rowsAfter);
+        dstTable._reapplyFilters();
+        break;
       }
     }
     this.refresh(shouldTracking(history.operation), true);
@@ -9193,12 +10271,18 @@ class Table {
   getFunction(name) {
     return this.functions[name];
   }
-  getLabel(key, n) {
-    if (key == null) {
+  getLabel(label, labelerKey, n) {
+    if (label != null) {
+      return label;
+    }
+    if (labelerKey == null) {
       return null;
     }
-    const labeler = this.labelers[key];
-    return labeler == null ? void 0 : labeler(n);
+    const labeler = this.labelers[labelerKey];
+    if (labeler) {
+      return labeler(n);
+    }
+    return null;
   }
   getBase() {
     return this;
@@ -9263,7 +10347,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}`;
@@ -9499,8 +10583,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,
@@ -9720,11 +10803,13 @@ const HeaderCellTop = memo(({ x }) => {
     editorRef,
     autofillDraggingTo,
     dragging,
-    contextMenuItems
+    contextMenuItems,
+    columnMenuState
   } = store;
   const table = tableRef.current;
   const col = table == null ? void 0 : table.getCellByPoint({ y: 0, x }, "SYSTEM");
   const width = (col == null ? void 0 : col.width) || DEFAULT_WIDTH;
+  const hasFilter = !!((col == null ? void 0 : col.filter) && col.filter.conditions.length > 0);
   const xSheetFocused = isXSheetFocused(store);
   const lastFocused = table == null ? void 0 : table.wire.lastFocused;
   const editingAnywhere = !!((table == null ? void 0 : table.wire.editingAddress) || editingAddress);
@@ -9873,7 +10958,25 @@ const HeaderCellTop = memo(({ x }) => {
                 vertical: -1
               }
             ),
-            table.getLabel(col == null ? void 0 : col.labeler, x) ?? colId,
+            table.getLabel(col == null ? void 0 : col.label, col == null ? void 0 : col.labeler, x) ?? colId,
+            !hasOperation(col == null ? void 0 : col.prevention, ColumnMenu$1) && /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: `gs-column-menu-btn ${hasFilter ? "gs-filtered" : ""} ${(columnMenuState == null ? void 0 : columnMenuState.x) === x ? "gs-active" : ""}`,
+                onMouseDown: (e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  const rect = e.target.getBoundingClientRect();
+                  if ((columnMenuState == null ? void 0 : columnMenuState.x) === x) {
+                    dispatch(setColumnMenu(null));
+                  } else {
+                    dispatch(setColumnMenu({ x, position: { y: rect.bottom, x: rect.left } }));
+                  }
+                },
+                title: "Sort & Filter",
+                children: "⋮"
+              }
+            ),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -10058,7 +11161,7 @@ const HeaderCellLeft = memo(({ y }) => {
                 horizontal: -1
               }
             ),
-            table.getLabel(row == null ? void 0 : row.labeler, y) ?? rowId,
+            table.getLabel(row == null ? void 0 : row.label, row == null ? void 0 : row.labeler, y) ?? rowId,
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -10076,6 +11179,263 @@ 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++) {
+      if (table.isRowFiltered(y)) {
+        continue;
+      }
+      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({});
@@ -10176,13 +11536,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",
     {
@@ -10194,7 +11554,7 @@ const Tabular = () => {
       ref: tabularRef,
       onMouseMove: handleMouseMove,
       onScroll: handleScroll,
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: "gs-tabular-inner",
@@ -10202,204 +11562,73 @@ const Tabular = () => {
             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 = 1771145572;
+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{background-color:#f7f7f7;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:#ddd}.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{background-color:#212121;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:#5a5a5a}.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,.6);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:12}.gs-contextmenu{z-index:12;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{color:#555;margin:0;padding:0;min-width:250px}.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-name{font-size:13px;letter-spacing:1px}.gs-contextmenu li.gs-menu-divider{background-color:#aaa;padding:0;height:1px;margin:10px 0}.gs-contextmenu li .gs-menu-name{flex:1}.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-column-menu-modal{width:100%;height:100vh;z-index:12}.gs-column-menu{z-index:12;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-column-menu ul{color:#555;margin:0;padding:0;min-width:200px}.gs-column-menu li{padding:5px 10px;list-style-type:none}.gs-column-menu li.gs-enabled{cursor:pointer}.gs-column-menu li.gs-enabled:hover{background-color:#eee}.gs-column-menu li.gs-disabled{opacity:.5;cursor:not-allowed}.gs-column-menu li .gs-menu-name{font-size:13px;letter-spacing:1px}.gs-column-menu li.gs-menu-divider{background-color:#aaa;padding:0;height:1px;margin:5px 0}.gs-column-menu .gs-column-menu-label{padding:5px 10px}.gs-column-menu .gs-label-input-row{display:flex;gap:4px;align-items:center}.gs-column-menu .gs-label-input{flex:1;font-size:13px;padding:4px 6px;border:none;border-bottom:1px solid #ccc;border-radius:0;outline:0;min-width:0;background-color:transparent;box-shadow:none}.gs-column-menu .gs-label-input:focus{border-bottom-color:#07f;outline:0;box-shadow:none}.gs-column-menu .gs-label-apply-btn{font-size:12px;padding:3px 13px;border:1px solid transparent;border-radius:3px;background-color:transparent;color:#1a8a1a;cursor:pointer;font-weight:700;letter-spacing:1px}.gs-column-menu .gs-label-apply-btn:hover{border-color:#1a8a1a}.gs-column-menu .gs-column-menu-filter{padding:5px 10px}.gs-column-menu .gs-filter-header{display:flex;align-items:center;gap:8px}.gs-column-menu .gs-filter-header .gs-filter-add-btn{font-size:12px;padding:3px 9px;border:1px solid transparent;border-radius:3px;background-color:transparent;cursor:pointer;color:#555;letter-spacing:1px}.gs-column-menu .gs-filter-header .gs-filter-add-btn:hover{border-color:#555}.gs-column-menu .gs-filter-mode-toggle{display:flex;gap:6px;margin-left:auto}.gs-column-menu .gs-filter-mode-toggle label{display:flex;align-items:center;gap:3px;font-size:11px;font-weight:700;letter-spacing:.5px;color:#888;cursor:pointer;user-select:none}.gs-column-menu .gs-filter-mode-toggle label input[type=radio]{margin:0;cursor:pointer}.gs-column-menu .gs-filter-mode-toggle label.gs-active{color:#07f}.gs-column-menu .gs-filter-mode-toggle.gs-disabled{opacity:.4;pointer-events:none}.gs-column-menu .gs-filter-conditions{display:flex;flex-direction:column;gap:5px;margin-top:6px;max-height:200px;overflow-y:auto}.gs-column-menu .gs-filter-condition-row{display:flex;gap:4px;align-items:normal}.gs-column-menu .gs-filter-method-select{font-size:12px;padding:4px 4px;border:none;border-bottom:1px solid #ccc;border-radius:0;outline:0;background-color:#fff;box-shadow:none;min-width:40px;max-width:80px;cursor:pointer}.gs-column-menu .gs-filter-method-select:focus{border-bottom-color:#07f;outline:0;box-shadow:none}.gs-column-menu .gs-filter-value-input{flex:1;font-size:13px;padding:4px 6px;border:none;border-bottom:1px solid #ccc;border-radius:0;outline:0;min-width:0;width:80px;background-color:transparent;box-shadow:none}.gs-column-menu .gs-filter-value-input:focus{border-bottom-color:#07f;outline:0;box-shadow:none}.gs-column-menu .gs-filter-remove-btn{font-size:12px;padding:0;border:none;border-radius:3px;background-color:transparent;cursor:pointer;color:#999;line-height:1;flex-shrink:0}.gs-column-menu .gs-filter-remove-btn:hover{color:#c33}.gs-column-menu .gs-filter-actions{display:flex;gap:4px;margin-top:10px;align-items:center}.gs-column-menu .gs-filter-actions .gs-filter-reset-all-btn{font-size:12px;padding:3px 9px;border:1px solid transparent;border-radius:3px;background-color:transparent;cursor:pointer;color:#c33;font-weight:700;letter-spacing:1px}.gs-column-menu .gs-filter-actions .gs-filter-reset-all-btn:hover{border-color:#c33}.gs-column-menu .gs-filter-actions .gs-filter-actions-right{display:flex;gap:4px;margin-left:auto}.gs-column-menu .gs-filter-actions .gs-filter-reset-btn{font-size:12px;padding:3px 9px;border:1px solid transparent;border-radius:3px;background-color:transparent;cursor:pointer;color:#e08000;font-weight:700;letter-spacing:1px}.gs-column-menu .gs-filter-actions .gs-filter-reset-btn:hover{border-color:#e08000}.gs-column-menu .gs-filter-actions .gs-filter-apply-btn{font-size:12px;padding:3px 13px;border:1px solid transparent;border-radius:3px;background-color:transparent;color:#07f;cursor:pointer;font-weight:700;letter-spacing:1px}.gs-column-menu .gs-filter-actions .gs-filter-apply-btn:hover{border-color:#07f}.gs-column-menu-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);background-color:rgba(128,128,128,.3);border:1px solid #ccc;border-radius:50%;cursor:pointer;font-size:12px;font-weight:700;line-height:1;color:#888;width:18px;height:18px;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease;z-index:2}.gs-column-menu-btn.gs-filtered{opacity:1;background-color:#e0edff;border-color:#07f;color:#07f}.gs-column-menu-btn.gs-active{opacity:1;background-color:#d0e0ff;border-color:#07f;color:#07f}.gs-th-top:hover .gs-column-menu-btn{opacity:1}.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;
@@ -10804,6 +12033,7 @@ function GridSheet({
       contextMenuItems: contextMenuItems ?? defaultContextMenuItems,
       resizingPositionY: [-1, -1, -1],
       resizingPositionX: [-1, -1, -1],
+      columnMenuState: null,
       minNumRows: 1,
       maxNumRows: -1,
       minNumCols: 1,
@@ -10860,7 +12090,7 @@ function GridSheet({
             style: {
               //width: '100%',
               maxWidth: (((_a = store.tableReactive.current) == null ? void 0 : _a.totalWidth) || 0) + 2,
-              maxHeight: (((_b = store.tableReactive.current) == null ? void 0 : _b.totalHeight) || 0) + 2,
+              maxHeight: (((_b = store.tableReactive.current) == null ? void 0 : _b.fullHeight) || 0) + 2,
               overflow: "auto",
               resize: sheetResize,
               ...style
@@ -10870,6 +12100,7 @@ function GridSheet({
               /* @__PURE__ */ jsx(Tabular, {}),
               /* @__PURE__ */ jsx(StoreObserver, { ...{ ...options, sheetHeight, sheetWidth, sheetName, connector } }),
               /* @__PURE__ */ jsx(ContextMenu, {}),
+              /* @__PURE__ */ jsx(ColumnMenu, {}),
               /* @__PURE__ */ jsx(Resizer, {}),
               /* @__PURE__ */ jsx(Emitter, {})
             ]