@dxos/plugin-sheet 0.6.14-staging.9e90729 → 0.6.14-staging.c117501

package/dist/lib/browser/{chunk-XXDHBYZQ.mjs → chunk-4LKIURJA.mjs}

@@ -17,13 +17,14 @@ import {
   isFormula,
   rangeFromIndex,
   rangeToA1Notation
-} from "./chunk-2ZK3YMZG.mjs";
+} from "./chunk-VMSX6Z4X.mjs";
 import {
-  Range
-} from "./chunk-3QWIMZZJ.mjs";
+  Range,
+  SheetAction
+} from "./chunk-BVUN7SHF.mjs";
 import {
   SHEET_PLUGIN
-} from "./chunk-D3QTX46O.mjs";
+} from "./chunk-RABELMEQ.mjs";
 
 // packages/plugins/plugin-sheet/src/components/ComputeGraph/ComputeGraphContextProvider.tsx
 import React, { createContext, useContext } from "react";
@@ -283,21 +284,39 @@ import { Grid, useGridContext } from "@dxos/react-ui-grid";
 // packages/plugins/plugin-sheet/src/model/sheet-model.ts
 import { Event } from "@dxos/async";
 import { Resource } from "@dxos/context";
-import { getTypename } from "@dxos/echo-schema";
+import { getTypename, FormatEnum, TypeEnum } from "@dxos/echo-schema";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { PublicKey } from "@dxos/keys";
 import { log } from "@dxos/log";
-import { FieldValueType } from "@dxos/schema";
 import { DetailedCellError, ExportedCellChange } from "#hyperformula";
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/model/sheet-model.ts";
 var typeMap = {
-  BOOLEAN: FieldValueType.Boolean,
-  NUMBER_RAW: FieldValueType.Number,
-  NUMBER_PERCENT: FieldValueType.Percent,
-  NUMBER_CURRENCY: FieldValueType.Currency,
-  NUMBER_DATETIME: FieldValueType.DateTime,
-  NUMBER_DATE: FieldValueType.Date,
-  NUMBER_TIME: FieldValueType.Time
+  BOOLEAN: {
+    type: TypeEnum.Boolean
+  },
+  NUMBER_RAW: {
+    type: TypeEnum.Number
+  },
+  NUMBER_PERCENT: {
+    type: TypeEnum.Number,
+    format: FormatEnum.Percent
+  },
+  NUMBER_CURRENCY: {
+    type: TypeEnum.Number,
+    format: FormatEnum.Currency
+  },
+  NUMBER_DATETIME: {
+    type: TypeEnum.String,
+    format: FormatEnum.DateTime
+  },
+  NUMBER_DATE: {
+    type: TypeEnum.String,
+    format: FormatEnum.Date
+  },
+  NUMBER_TIME: {
+    type: TypeEnum.String,
+    format: FormatEnum.Time
+  }
 };
 var getTopLeft = (range) => {
   const to = range.to ?? range.from;
@@ -347,11 +366,16 @@ var SheetModel = class extends Resource {
       id: this.id
     }, {
       F: __dxlog_file,
-      L: 111,
+      L: 113,
       S: this,
       C: (f, a) => f(...a)
     });
     initialize(this._sheet);
+    this._graph.update.on((event) => {
+      if (event.type === "functionsUpdated") {
+        this.reset();
+      }
+    });
     this._node = this._graph.getOrCreateNode(createSheetName({
       type: getTypename(this._sheet),
       id: this._sheet.id
@@ -369,7 +393,7 @@ var SheetModel = class extends Resource {
   reset() {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 131,
+      L: 139,
       S: this,
       A: [
         "this._node",
@@ -380,7 +404,7 @@ var SheetModel = class extends Resource {
     Object.entries(this._sheet.cells).forEach(([key, { value }]) => {
       invariant2(this._node, void 0, {
         F: __dxlog_file,
-        L: 134,
+        L: 142,
         S: this,
         A: [
           "this._node",
@@ -389,7 +413,12 @@ var SheetModel = class extends Resource {
       });
       const { col, row } = addressFromIndex(this._sheet, key);
       if (isFormula(value)) {
-        value = this._graph.mapFormulaToNative(this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value)));
+        const binding = this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value));
+        if (binding) {
+          value = this._graph.mapFormulaToNative(binding);
+        } else {
+          value = "";
+        }
       }
       this._node.graph.hf.setCellContents({
         sheet: this._node.sheetId,
@@ -409,11 +438,79 @@ var SheetModel = class extends Resource {
     this._node?.graph.hf.rebuildAndRecalculate();
   }
   insertRows(i, n = 1) {
-    insertIndices(this._sheet.rows, i, n, MAX_ROWS);
+    const idx = insertIndices(this._sheet.rows, i, n, MAX_ROWS);
     this.reset();
+    return idx;
   }
   insertColumns(i, n = 1) {
-    insertIndices(this._sheet.columns, i, n, MAX_COLUMNS);
+    const idx = insertIndices(this._sheet.columns, i, n, MAX_COLUMNS);
+    this.reset();
+    return idx;
+  }
+  dropRow(rowIndex) {
+    const range = {
+      from: addressFromIndex(this._sheet, `${this._sheet.columns[0]}@${rowIndex}`),
+      to: addressFromIndex(this._sheet, `${this._sheet.columns[this._sheet.columns.length - 1]}@${rowIndex}`)
+    };
+    const values = this.getCellValues(range).flat();
+    const index = this._sheet.rows.indexOf(rowIndex);
+    this.clear(range);
+    this._sheet.rows.splice(index, 1);
+    delete this._sheet.rowMeta[rowIndex];
+    this.reset();
+    return {
+      axis: "row",
+      index,
+      axisIndex: rowIndex,
+      axisMeta: this._sheet.rowMeta[rowIndex],
+      values
+    };
+  }
+  dropColumn(colIndex) {
+    const range = {
+      from: addressFromIndex(this._sheet, `${colIndex}@${this._sheet.rows[0]}`),
+      to: addressFromIndex(this._sheet, `${colIndex}@${this._sheet.rows[this._sheet.rows.length - 1]}`)
+    };
+    const values = this.getCellValues(range).flat();
+    const index = this._sheet.columns.indexOf(colIndex);
+    this.clear(range);
+    this._sheet.columns.splice(index, 1);
+    delete this._sheet.columnMeta[colIndex];
+    this.reset();
+    return {
+      axis: "col",
+      index,
+      axisIndex: colIndex,
+      axisMeta: this._sheet.rowMeta[colIndex],
+      values
+    };
+  }
+  restoreRow({ index, axisIndex, axisMeta, values }) {
+    this._sheet.rows.splice(index, 0, axisIndex);
+    values.forEach((value, col) => {
+      if (value) {
+        this._sheet.cells[`${this._sheet.columns[col]}@${axisIndex}`] = {
+          value
+        };
+      }
+    });
+    if (axisMeta) {
+      this._sheet.rowMeta[axisIndex] = axisMeta;
+    }
+    this.reset();
+  }
+  restoreColumn({ index, axisIndex, axisMeta, values }) {
+    this._sheet.columns.splice(index, 0, axisIndex);
+    values.forEach((value, row) => {
+      if (value) {
+        this._sheet.cells[`${axisIndex}@${this._sheet.rows[row]}`] = {
+          value
+        };
+      }
+    });
+    if (axisMeta) {
+      this._sheet.columnMeta[axisIndex] = axisMeta;
+    }
     this.reset();
   }
   //
@@ -426,7 +523,7 @@ var SheetModel = class extends Resource {
   clear(range) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 176,
+      L: 245,
       S: this,
       A: [
         "this._node",
@@ -444,7 +541,7 @@ var SheetModel = class extends Resource {
   cut(range) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 187,
+      L: 256,
       S: this,
       A: [
         "this._node",
@@ -460,7 +557,7 @@ var SheetModel = class extends Resource {
   copy(range) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 196,
+      L: 265,
       S: this,
       A: [
         "this._node",
@@ -472,7 +569,7 @@ var SheetModel = class extends Resource {
   paste(cell) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 201,
+      L: 270,
       S: this,
       A: [
         "this._node",
@@ -499,7 +596,7 @@ var SheetModel = class extends Resource {
   undo() {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 216,
+      L: 285,
       S: this,
       A: [
         "this._node",
@@ -513,7 +610,7 @@ var SheetModel = class extends Resource {
   redo() {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 224,
+      L: 293,
       S: this,
       A: [
         "this._node",
@@ -557,15 +654,25 @@ var SheetModel = class extends Resource {
   getValue(cell) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 267,
+      L: 336,
       S: this,
       A: [
         "this._node",
         ""
       ]
     });
-    const value = this._node.graph.hf.getCellValue(toSimpleCellAddress(this._node.sheetId, cell));
+    const address = toSimpleCellAddress(this._node.sheetId, cell);
+    const value = this._node.graph.hf.getCellValue(address);
     if (value instanceof DetailedCellError) {
+      log.info("cell error", {
+        cell,
+        error: value
+      }, {
+        F: __dxlog_file,
+        L: 341,
+        S: this,
+        C: (f, a) => f(...a)
+      });
       return value.toString();
     }
     return value;
@@ -573,10 +680,10 @@ var SheetModel = class extends Resource {
   /**
   * Get value type.
   */
-  getValueType(cell) {
+  getValueDescription(cell) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 280,
+      L: 352,
       S: this,
       A: [
         "this._node",
@@ -593,7 +700,7 @@ var SheetModel = class extends Resource {
   setValue(cell, value) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 290,
+      L: 362,
       S: this,
       A: [
         "this._node",
@@ -690,7 +797,7 @@ var SheetModel = class extends Resource {
   mapFormulaRefsToIndices(formula) {
     invariant2(isFormula(formula), void 0, {
       F: __dxlog_file,
-      L: 379,
+      L: 451,
       S: this,
       A: [
         "isFormula(formula)",
@@ -707,7 +814,7 @@ var SheetModel = class extends Resource {
   mapFormulaIndicesToRefs(formula) {
     invariant2(isFormula(formula), void 0, {
       F: __dxlog_file,
-      L: 389,
+      L: 461,
       S: this,
       A: [
         "isFormula(formula)",
@@ -733,7 +840,7 @@ var SheetModel = class extends Resource {
   toDateTime(num) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 410,
+      L: 482,
       S: this,
       A: [
         "this._node",
@@ -745,7 +852,7 @@ var SheetModel = class extends Resource {
   toDate(num) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 415,
+      L: 487,
       S: this,
       A: [
         "this._node",
@@ -757,7 +864,7 @@ var SheetModel = class extends Resource {
   toTime(num) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 420,
+      L: 492,
       S: this,
       A: [
         "this._node",
@@ -867,20 +974,21 @@ var SheetProvider = ({ children, graph, sheet, readonly, onInfo }) => {
 };
 
 // packages/plugins/plugin-sheet/src/components/GridSheet/GridSheet.tsx
-import React4, { useCallback as useCallback3, useMemo as useMemo2, useRef, useState as useState4 } from "react";
-import { DropdownMenu, Icon, useTranslation } from "@dxos/react-ui";
+import React4, { useCallback as useCallback4, useMemo as useMemo2, useRef, useState as useState4 } from "react";
+import { useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
+import { DropdownMenu, Icon, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { useAttention } from "@dxos/react-ui-attention";
-import { closestCell, editorKeys, Grid as Grid2, GridCellEditor } from "@dxos/react-ui-grid";
+import { closestCell, defaultSizeRow, editorKeys, Grid as Grid2, GridCellEditor } from "@dxos/react-ui-grid";
 
 // packages/plugins/plugin-sheet/src/components/GridSheet/util.ts
-import { useEffect as useEffect3, useLayoutEffect, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 import { createDocAccessor, fullyQualifiedId as fullyQualifiedId3 } from "@dxos/react-client/echo";
 import { parseValue, cellClassesForFieldType } from "@dxos/react-ui-data";
 import { colToA1Notation, rowToA1Notation, commentedClassName } from "@dxos/react-ui-grid";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-sheet/src/integrations/thread-ranges.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo } from "react";
 import { LayoutAction, useIntentDispatcher, useIntentResolver } from "@dxos/app-framework";
 import { debounce as debounce2 } from "@dxos/async";
 import { fullyQualifiedId as fullyQualifiedId2 } from "@dxos/react-client/echo";
@@ -889,32 +997,46 @@ import { fullyQualifiedId as fullyQualifiedId2 } from "@dxos/react-client/echo";
 import { lazy } from "react";
 
 // packages/plugins/plugin-sheet/src/components/RangeList/RangeList.tsx
-import React3 from "react";
+import React3, { useCallback as useCallback2 } from "react";
 import { S } from "@dxos/echo-schema";
+import { useTranslation } from "@dxos/react-ui";
 import { List } from "@dxos/react-ui-list";
 import { ghostHover } from "@dxos/react-ui-theme";
-var RangeList = ({ sheet, onSelect, onDelete }) => {
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: "flex flex-col"
-  }, /* @__PURE__ */ React3.createElement(List.Root, {
+var RangeList = ({ sheet }) => {
+  const { t } = useTranslation(SHEET_PLUGIN);
+  const handleSelectRange = (range) => {
+  };
+  const handleDeleteRange = useCallback2((range) => {
+    const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
+    sheet.ranges.splice(index, 1);
+  }, [
+    sheet
+  ]);
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("h2", {
+    className: "p-2 text-sm font-semibold"
+  }, t("range list heading")), /* @__PURE__ */ React3.createElement(List.Root, {
     items: sheet.ranges,
     isItem: S.is(Range)
-  }, ({ items }) => items.map((item, i) => /* @__PURE__ */ React3.createElement(List.Item, {
+  }, ({ items: ranges }) => ranges.map((range, i) => /* @__PURE__ */ React3.createElement(List.Item, {
     key: i,
-    item,
+    item: range,
     classNames: [
       "p-2",
       ghostHover
     ]
   }, /* @__PURE__ */ React3.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React3.createElement(List.ItemTitle, {
-    onClick: () => onSelect?.(item)
-  }, rangeToA1Notation(rangeFromIndex(sheet, item.range))), onDelete && /* @__PURE__ */ React3.createElement(List.ItemDeleteButton, {
-    onClick: () => onDelete(item)
+    onClick: () => handleSelectRange(range)
+  }, t("range title", {
+    position: rangeToA1Notation(rangeFromIndex(sheet, range.range)),
+    key: t(`range key ${range.key} label`),
+    value: t(`range value ${range.value} label`)
+  })), /* @__PURE__ */ React3.createElement(List.ItemDeleteButton, {
+    onClick: () => handleDeleteRange(range)
   })))));
 };
 
 // packages/plugins/plugin-sheet/src/components/index.ts
-var SheetContainer = lazy(() => import("./SheetContainer-JBB7W52Y.mjs"));
+var SheetContainer = lazy(() => import("./SheetContainer-P3NF5KEI.mjs"));
 
 // packages/plugins/plugin-sheet/src/integrations/thread-ranges.ts
 var completeCellRangeToThreadCursor = (range) => {
@@ -940,7 +1062,7 @@ var parseThreadAnchorAsCellRange = (cursor) => {
 };
 var useUpdateFocusedCellOnThreadSelection = (grid) => {
   const { model, setActiveRefs } = useSheetContext();
-  const handleScrollIntoView = useCallback2(({ action, data }) => {
+  const handleScrollIntoView = useCallback3(({ action, data }) => {
     switch (action) {
       case LayoutAction.SCROLL_INTO_VIEW: {
         if (!data?.id || data?.cursor === void 0 || data?.id !== fullyQualifiedId2(model.sheet)) {
@@ -948,7 +1070,7 @@ var useUpdateFocusedCellOnThreadSelection = (grid) => {
         }
         setActiveRefs(data.thread);
         const range = parseThreadAnchorAsCellRange(data.cursor);
-        range && grid.current?.setFocus({
+        range && grid?.setFocus({
           ...range.to,
           plane: "grid"
         }, true);
@@ -967,7 +1089,7 @@ var useSelectThreadOnCellFocus = () => {
     // TODO(thure): Surely we can find a better dependency for this…
     JSON.stringify(model.sheet.threads)
   ]);
-  const selectClosestThread = useCallback2((cellAddress) => {
+  const selectClosestThread = useCallback3((cellAddress) => {
     if (!cellAddress || !threads) {
       return;
     }
@@ -1054,11 +1176,20 @@ var projectCellProps = (model, col, row) => {
     const range = thread?.anchor && parseThreadAnchorAsCellRange(thread.anchor);
     return thread && range ? inRange(range, address) : false;
   }).map((thread) => fullyQualifiedId3(thread)).join(" ");
-  const type = model.getValueType(address);
+  const description = model.getValueDescription(address);
+  const type = description?.type;
+  const format = description?.format;
   const classNames = ranges?.map(cellClassNameForRange).reverse();
   return {
-    value: parseValue(type, rawValue),
-    className: mx2(cellClassesForFieldType(type), threadRefs && commentedClassName, classNames),
+    value: parseValue({
+      type,
+      format,
+      value: rawValue
+    }),
+    className: mx2(cellClassesForFieldType({
+      type,
+      format
+    }), threadRefs && commentedClassName, classNames),
     dataRefs: threadRefs
   };
 };
@@ -1081,11 +1212,12 @@ var gridCellGetter = (model) => {
 };
 var rowLabelCell = (row) => ({
   value: rowToA1Notation(row),
-  className: "text-end !pie-1",
+  className: "text-end !pie-1 text-subdued",
   resizeHandle: "row"
 });
 var colLabelCell = (col) => ({
   value: colToA1Notation(col),
+  className: "text-subdued",
   resizeHandle: "col"
 });
 var cellGetter = (model) => {
@@ -1115,23 +1247,28 @@ var cellGetter = (model) => {
     }
   };
 };
-var useSheetModelDxGridProps = (dxGridRef, model) => {
+var useSheetModelDxGridProps = (dxGrid, model) => {
   const [columns, setColumns] = useState3(createDxGridColumns(model));
-  const [rows, setRows] = useState3(createDxGridColumns(model));
-  useLayoutEffect(() => {
+  const [rows, setRows] = useState3(createDxGridRows(model));
+  useEffect3(() => {
     const cellsAccessor = createDocAccessor(model.sheet, [
       "cells"
     ]);
-    if (dxGridRef.current) {
-      dxGridRef.current.getCells = cellGetter(model);
+    if (dxGrid) {
+      dxGrid.getCells = cellGetter(model);
     }
     const handleCellsUpdate = () => {
-      dxGridRef.current?.requestUpdate("initialCells");
+      dxGrid?.requestUpdate("initialCells");
     };
     cellsAccessor.handle.addListener("change", handleCellsUpdate);
-    return () => cellsAccessor.handle.removeListener("change", handleCellsUpdate);
+    const unsubscribe = model.graph.update.on(handleCellsUpdate);
+    return () => {
+      cellsAccessor.handle.removeListener("change", handleCellsUpdate);
+      unsubscribe();
+    };
   }, [
-    model
+    model,
+    dxGrid
   ]);
   useEffect3(() => {
     const columnMetaAccessor = createDocAccessor(model.sheet, [
@@ -1153,7 +1290,8 @@ var useSheetModelDxGridProps = (dxGridRef, model) => {
       rowMetaAccessor.handle.removeListener("change", handleRowMetaUpdate);
     };
   }, [
-    model
+    model,
+    dxGrid
   ]);
   return {
     columns,
@@ -1188,11 +1326,11 @@ var frozen = {
 };
 var sheetRowDefault = {
   frozenRowsStart: {
-    size: 32,
+    size: defaultSizeRow,
     readonly: true
   },
   grid: {
-    size: 32,
+    size: defaultSizeRow,
     resizeable: true
   }
 };
@@ -1207,57 +1345,65 @@ var sheetColDefault = {
   }
 };
 var GridSheet = () => {
-  const { t } = useTranslation(SHEET_PLUGIN);
-  const { id, model, editing, setEditing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs } = useSheetContext();
-  const dxGrid = useRef(null);
+  const { t } = useTranslation2(SHEET_PLUGIN);
+  const { id, model, editing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs } = useSheetContext();
+  const [dxGrid, setDxGrid] = useState4(null);
+  const [extraplanarFocus, setExtraplanarFocus] = useState4(null);
+  const dispatch = useIntentDispatcher2();
   const rangeController = useRef();
   const { hasAttention } = useAttention(id);
-  const handleFocus = useCallback3((event) => {
+  const handleFocus = useCallback4((event) => {
     if (!editing) {
       const cell = closestCell(event.target);
-      if (cell && cell.plane === "grid") {
-        setCursor({
-          col: cell.col,
-          row: cell.row
-        });
+      if (cell) {
+        if (cell.plane === "grid") {
+          setCursor({
+            col: cell.col,
+            row: cell.row
+          });
+          setExtraplanarFocus(null);
+        } else {
+          setExtraplanarFocus(cell);
+        }
+      } else {
+        setExtraplanarFocus(null);
       }
     }
   }, [
     editing
   ]);
-  const handleClose = useCallback3((value, { key, shift }) => {
-    if (value !== void 0) {
-      model.setValue(dxGridCellIndexToSheetCellAddress(editing.index), value);
+  const handleClose = useCallback4((_value, event) => {
+    if (event) {
+      const { key, shift } = event;
+      const axis = [
+        "Enter",
+        "ArrowUp",
+        "ArrowDown"
+      ].includes(key) ? "row" : [
+        "Tab",
+        "ArrowLeft",
+        "ArrowRight"
+      ].includes(key) ? "col" : void 0;
+      const delta = key.startsWith("Arrow") ? [
+        "ArrowUp",
+        "ArrowLeft"
+      ].includes(key) ? -1 : 1 : shift ? -1 : 1;
+      dxGrid?.refocus(axis, delta);
     }
-    setEditing(null);
-    const axis = [
-      "Enter",
-      "ArrowUp",
-      "ArrowDown"
-    ].includes(key) ? "row" : [
-      "Tab",
-      "ArrowLeft",
-      "ArrowRight"
-    ].includes(key) ? "col" : void 0;
-    const delta = key.startsWith("Arrow") ? [
-      "ArrowUp",
-      "ArrowLeft"
-    ].includes(key) ? -1 : 1 : shift ? -1 : 1;
-    dxGrid.current?.refocus(axis, delta);
   }, [
     model,
-    editing
+    editing,
+    dxGrid
   ]);
-  const handleBlur = useCallback3((value) => {
+  const handleBlur = useCallback4((value) => {
     if (value !== void 0) {
       model.setValue(dxGridCellIndexToSheetCellAddress(editing.index), value);
     }
-    setEditing(null);
   }, [
     model,
     editing
   ]);
-  const handleAxisResize = useCallback3(({ axis, size, index: numericIndex }) => {
+  const handleAxisResize = useCallback4(({ axis, size, index: numericIndex }) => {
     if (axis === "row") {
       const rowId = model.sheet.rows[parseInt(numericIndex)];
       model.sheet.rowMeta[rowId] ??= {};
@@ -1270,7 +1416,7 @@ var GridSheet = () => {
   }, [
     model
   ]);
-  const handleSelect = useCallback3(({ minCol, maxCol, minRow, maxRow }) => {
+  const handleSelect = useCallback4(({ minCol, maxCol, minRow, maxRow }) => {
     const range = {
       from: {
         col: minCol,
@@ -1291,19 +1437,70 @@ var GridSheet = () => {
   }, [
     editing
   ]);
-  const handleWheel = useCallback3((event) => {
+  const handleWheel = useCallback4((event) => {
     if (!hasAttention) {
       event.stopPropagation();
     }
   }, [
     hasAttention
   ]);
-  const handleKeyDown = useCallback3((event) => {
+  const selectEntireAxis = useCallback4((pos) => {
+    switch (pos.plane) {
+      case "frozenRowsStart":
+        return dxGrid?.setSelection({
+          start: {
+            col: pos.col,
+            row: 0,
+            plane: "grid"
+          },
+          end: {
+            col: pos.col,
+            row: model.sheet.rows.length - 1,
+            plane: "grid"
+          }
+        });
+      case "frozenColsStart":
+        return dxGrid?.setSelection({
+          start: {
+            row: pos.row,
+            col: 0,
+            plane: "grid"
+          },
+          end: {
+            row: pos.row,
+            col: model.sheet.columns.length - 1,
+            plane: "grid"
+          }
+        });
+    }
+  }, [
+    dxGrid,
+    model.sheet
+  ]);
+  const handleClick = useCallback4((event) => {
+    const cell = closestCell(event.target);
+    if (cell) {
+      selectEntireAxis(cell);
+    }
+  }, [
+    selectEntireAxis
+  ]);
+  const handleKeyDown = useCallback4((event) => {
     switch (event.key) {
       case "Backspace":
       case "Delete":
         event.preventDefault();
         return cursorFallbackRange && model.clear(cursorFallbackRange);
+      case "Enter":
+      case "Space":
+        if (dxGrid && extraplanarFocus) {
+          switch (extraplanarFocus.plane) {
+            case "frozenRowsStart":
+            case "frozenColsStart":
+              event.preventDefault();
+              return selectEntireAxis(extraplanarFocus);
+          }
+        }
     }
     if (event.metaKey || event.ctrlKey) {
       switch (event.key) {
@@ -1331,12 +1528,14 @@ var GridSheet = () => {
   }, [
     cursorFallbackRange,
     model,
-    cursor
+    cursor,
+    extraplanarFocus,
+    selectEntireAxis
   ]);
   const contextMenuAnchorRef = useRef(null);
   const [contextMenuOpen, setContextMenuOpen] = useState4(null);
   const contextMenuAxis = contextMenuOpen?.plane.startsWith("frozenRows") ? "col" : "row";
-  const handleContextMenu = useCallback3((event) => {
+  const handleContextMenu = useCallback4((event) => {
     const cell = closestCell(event.target);
     if (cell && cell.plane.startsWith("frozen")) {
       event.preventDefault();
@@ -1344,18 +1543,34 @@ var GridSheet = () => {
       setContextMenuOpen(cell);
     }
   }, []);
-  const handleAxisMenuAction = useCallback3((operation) => {
+  const handleAxisMenuAction = useCallback4((operation) => {
     switch (operation) {
-      case "add-before":
-      case "add-after":
-        model[contextMenuAxis === "col" ? "insertColumns" : "insertRows"](contextMenuOpen[contextMenuAxis] + (operation === "add-before" ? 0 : 1), 1);
+      case "insert-before":
+      case "insert-after":
+        return dispatch({
+          action: SheetAction.INSERT_AXIS,
+          data: {
+            model,
+            axis: contextMenuAxis,
+            index: contextMenuOpen[contextMenuAxis] + (operation === "insert-before" ? 0 : 1)
+          }
+        });
         break;
-      case "remove":
+      case "drop":
+        return dispatch({
+          action: SheetAction.DROP_AXIS,
+          data: {
+            model,
+            axis: contextMenuAxis,
+            axisIndex: model.sheet[contextMenuAxis === "row" ? "rows" : "columns"][contextMenuOpen[contextMenuAxis]]
+          }
+        });
     }
   }, [
     contextMenuAxis,
     contextMenuOpen,
-    model
+    model,
+    dispatch
   ]);
   const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
   const extension = useMemo2(() => [
@@ -1371,8 +1586,8 @@ var GridSheet = () => {
     rangeExtension({
       onInit: (fn) => rangeController.current = fn,
       onStateChange: (state) => {
-        if (dxGrid.current) {
-          dxGrid.current.mode = typeof state.activeRange === "undefined" ? "edit" : "edit-select";
+        if (dxGrid) {
+          dxGrid.mode = typeof state.activeRange === "undefined" ? "edit" : "edit-select";
         }
       }
     })
@@ -1381,7 +1596,7 @@ var GridSheet = () => {
     handleClose,
     editing
   ]);
-  const getCellContent = useCallback3((index) => {
+  const getCellContent = useCallback4((index) => {
     const cell = dxGridCellIndexToSheetCellAddress(index);
     return model.getCellText(cell);
   }, [
@@ -1408,10 +1623,11 @@ var GridSheet = () => {
     onWheelCapture: handleWheel,
     onKeyDown: handleKeyDown,
     onContextMenu: handleContextMenu,
-    overscroll: "inline",
-    className: "[--dx-grid-base:var(--surface-bg)]",
+    onClick: handleClick,
+    overscroll: "trap",
+    className: "[--dx-grid-base:var(--surface-bg)] [&_.dx-grid]:border-bs [&_.dx-grid]:border-separator",
     activeRefs,
-    ref: dxGrid
+    ref: setDxGrid
   }), /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
     modal: false,
     open: !!contextMenuOpen,
@@ -1423,18 +1639,17 @@ var GridSheet = () => {
     sideOffset: 4,
     collisionPadding: 8
   }, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    onClick: () => handleAxisMenuAction("add-before")
+    onClick: () => handleAxisMenuAction("insert-before")
   }, /* @__PURE__ */ React4.createElement(Icon, {
     size: 5,
     icon: contextMenuAxis === "col" ? "ph--columns-plus-left--regular" : "ph--rows-plus-top--regular"
   }), /* @__PURE__ */ React4.createElement("span", null, t(`add ${contextMenuAxis} before label`))), /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    onClick: () => handleAxisMenuAction("add-after")
+    onClick: () => handleAxisMenuAction("insert-after")
   }, /* @__PURE__ */ React4.createElement(Icon, {
     size: 5,
     icon: contextMenuAxis === "col" ? "ph--columns-plus-right--regular" : "ph--rows-plus-bottom--regular"
   }), /* @__PURE__ */ React4.createElement("span", null, t(`add ${contextMenuAxis} after label`))), /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    disabled: true,
-    onClick: () => handleAxisMenuAction("remove")
+    onClick: () => handleAxisMenuAction("drop")
   }, /* @__PURE__ */ React4.createElement(Icon, {
     size: 5,
     icon: "ph--backspace--regular"
@@ -1452,4 +1667,4 @@ export {
   RangeList,
   SheetContainer
 };
-//# sourceMappingURL=chunk-XXDHBYZQ.mjs.map
+//# sourceMappingURL=chunk-4LKIURJA.mjs.map