@dxos/plugin-sheet 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/dist/lib/node/chunk-GBCCPMOO.cjs

@@ -0,0 +1,856 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var chunk_GBCCPMOO_exports = {};
+__export(chunk_GBCCPMOO_exports, {
+  ComputeGraphContextProvider: () => ComputeGraphContextProvider,
+  GridSheet: () => GridSheet,
+  RangeList: () => RangeList,
+  SheetContainer: () => SheetContainer,
+  SheetProvider: () => SheetProvider,
+  useComputeGraph: () => useComputeGraph,
+  useSheetContext: () => useSheetContext
+});
+module.exports = __toCommonJS(chunk_GBCCPMOO_exports);
+var import_chunk_76NESQLB = require("./chunk-76NESQLB.cjs");
+var import_chunk_FIM6EZ6M = require("./chunk-FIM6EZ6M.cjs");
+var import_chunk_JSIDCZHB = require("./chunk-JSIDCZHB.cjs");
+var import_tracking = require("@preact-signals/safe-react/tracking");
+var import_react = __toESM(require("react"));
+var import_debug = require("@dxos/debug");
+var import_react_hooks = require("@dxos/react-hooks");
+var import_tracking2 = require("@preact-signals/safe-react/tracking");
+var import_effect = require("effect");
+var import_react2 = __toESM(require("react"));
+var import_compute = require("@dxos/compute");
+var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_list = require("@dxos/react-ui-list");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_react3 = require("react");
+var import_tracking3 = require("@preact-signals/safe-react/tracking");
+var import_react4 = __toESM(require("react"));
+var import_app_framework = require("@dxos/app-framework");
+var import_compute2 = require("@dxos/compute");
+var import_lit_grid = require("@dxos/lit-grid");
+var import_react_ui2 = require("@dxos/react-ui");
+var import_react_ui_attention = require("@dxos/react-ui-attention");
+var import_react_ui_grid = require("@dxos/react-ui-grid");
+var import_react5 = require("react");
+var import_compute3 = require("@dxos/compute");
+var import_echo = require("@dxos/react-client/echo");
+var import_react_ui_form = require("@dxos/react-ui-form");
+var import_react_ui_grid2 = require("@dxos/react-ui-grid");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_effect2 = require("effect");
+var import_react6 = require("react");
+var import_app_framework2 = require("@dxos/app-framework");
+var import_async = require("@dxos/async");
+var import_compute4 = require("@dxos/compute");
+var import_echo2 = require("@dxos/echo");
+var import_echo_schema = require("@dxos/echo-schema");
+var import_types = require("@dxos/plugin-deck/types");
+var import_types2 = require("@dxos/plugin-thread/types");
+var import_echo3 = require("@dxos/react-client/echo");
+var import_schema = require("@dxos/schema");
+var import_tracking4 = require("@preact-signals/safe-react/tracking");
+var import_react7 = __toESM(require("react"));
+var import_invariant = require("@dxos/invariant");
+var import_echo4 = require("@dxos/react-client/echo");
+var import_react_ui_grid3 = require("@dxos/react-ui-grid");
+var ComputeGraphContext = /* @__PURE__ */ (0, import_react.createContext)(void 0);
+var ComputeGraphContextProvider = ({ registry, children }) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react.default.createElement(ComputeGraphContext.Provider, {
+      value: {
+        registry
+      }
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var useComputeGraph = (space) => {
+  const { registry } = (0, import_react.useContext)(ComputeGraphContext) ?? (0, import_debug.raise)(new Error("Missing ComputeGraphContext"));
+  const [graph] = (0, import_react_hooks.useAsyncState)(async () => {
+    if (space) {
+      const graph2 = registry.getOrCreateGraph(space);
+      await graph2.open();
+      return graph2;
+    }
+  }, [
+    space,
+    registry
+  ]);
+  return graph;
+};
+var RangeList = ({ sheet }) => {
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const { t } = (0, import_react_ui.useTranslation)(import_chunk_JSIDCZHB.SHEET_PLUGIN);
+    const handleSelectRange = (range) => {
+    };
+    const handleDeleteRange = (0, import_react2.useCallback)((range) => {
+      const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
+      sheet.ranges.splice(index, 1);
+    }, [
+      sheet
+    ]);
+    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("h2", {
+      className: "p-2 text-sm font-semibold"
+    }, t("range list heading")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui_list.List.Root, {
+      items: sheet.ranges,
+      isItem: import_effect.Schema.is(import_chunk_76NESQLB.Range)
+    }, ({ items: ranges }) => ranges.map((range, i) => /* @__PURE__ */ import_react2.default.createElement(import_react_ui_list.List.Item, {
+      key: i,
+      item: range,
+      classNames: [
+        "p-2",
+        import_react_ui_theme.ghostHover
+      ]
+    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_list.List.ItemDragHandle, null), /* @__PURE__ */ import_react2.default.createElement(import_react_ui_list.List.ItemTitle, {
+      onClick: () => handleSelectRange(range)
+    }, t("range title", {
+      position: (0, import_compute.rangeToA1Notation)((0, import_chunk_76NESQLB.rangeFromIndex)(sheet, range.range)),
+      key: t(`range key ${range.key} label`),
+      value: t(`range value ${range.value} label`)
+    })), /* @__PURE__ */ import_react2.default.createElement(import_react_ui_list.List.ItemDeleteButton, {
+      onClick: () => handleDeleteRange(range)
+    })))));
+  } finally {
+    _effect.f();
+  }
+};
+var createDxGridColumns = (model) => {
+  return model.sheet.columns.reduce((acc, columnId, numericIndex) => {
+    if (model.sheet.columnMeta[columnId] && model.sheet.columnMeta[columnId].size) {
+      acc.grid[numericIndex] = {
+        size: model.sheet.columnMeta[columnId].size,
+        resizeable: true
+      };
+    }
+    return acc;
+  }, {
+    grid: {}
+  });
+};
+var createDxGridRows = (model) => {
+  return model.sheet.rows.reduce((acc, rowId, numericIndex) => {
+    if (model.sheet.rowMeta[rowId] && model.sheet.rowMeta[rowId].size) {
+      acc.grid[numericIndex] = {
+        size: model.sheet.rowMeta[rowId].size,
+        resizeable: true
+      };
+    }
+    return acc;
+  }, {
+    grid: {}
+  });
+};
+var projectCellProps = (model, col, row) => {
+  const address = {
+    col,
+    row
+  };
+  const rawValue = model.getValue(address);
+  const ranges = model.sheet.ranges?.filter(({ range }) => (0, import_compute3.inRange)((0, import_chunk_76NESQLB.rangeFromIndex)(model.sheet, range), address));
+  const threadRefs = void 0;
+  const description = model.getValueDescription(address);
+  const type = description?.type;
+  const format = description?.format;
+  const classNames = ranges?.map(import_chunk_76NESQLB.cellClassNameForRange).reverse();
+  return {
+    value: (0, import_react_ui_form.parseValue)({
+      type,
+      format,
+      value: rawValue
+    }),
+    className: (0, import_react_ui_theme2.mx)((0, import_react_ui_form.cellClassesForFieldType)({
+      type,
+      format
+    }), threadRefs && import_react_ui_grid2.commentedClassName, classNames),
+    dataRefs: threadRefs
+  };
+};
+var gridCellGetter = (model) => {
+  const cachedGridCells = {};
+  return (nextBounds) => {
+    [
+      ...Array(nextBounds.end.col - nextBounds.start.col)
+    ].forEach((_, c0) => {
+      return [
+        ...Array(nextBounds.end.row - nextBounds.start.row)
+      ].forEach((_2, r0) => {
+        const col = nextBounds.start.col + c0;
+        const row = nextBounds.start.row + r0;
+        cachedGridCells[`${col},${row}`] = projectCellProps(model, col, row);
+      });
+    });
+    return cachedGridCells;
+  };
+};
+var rowLabelCell = (row) => ({
+  value: (0, import_react_ui_grid2.rowToA1Notation)(row),
+  className: "!bg-toolbarSurface text-subdued text-end pie-1",
+  resizeHandle: "row"
+});
+var colLabelCell = (col) => ({
+  value: (0, import_react_ui_grid2.colToA1Notation)(col),
+  className: "!bg-toolbarSurface text-subdued",
+  resizeHandle: "col"
+});
+var cellGetter = (model) => {
+  const getGridCells = gridCellGetter(model);
+  return (nextBounds, plane) => {
+    switch (plane) {
+      case "grid":
+        return getGridCells(nextBounds);
+      case "fixedStartStart": {
+        return {
+          "0,0": {
+            className: "!bg-toolbarSurface"
+          }
+        };
+      }
+      case "frozenColsStart":
+        return [
+          ...Array(nextBounds.end.row - nextBounds.start.row)
+        ].reduce((acc, _, r0) => {
+          const r = nextBounds.start.row + r0;
+          acc[`0,${r}`] = rowLabelCell(r);
+          return acc;
+        }, {});
+      case "frozenRowsStart":
+        return [
+          ...Array(nextBounds.end.col - nextBounds.start.col)
+        ].reduce((acc, _, c0) => {
+          const c = nextBounds.start.col + c0;
+          acc[`${c},0`] = colLabelCell(c);
+          return acc;
+        }, {});
+      default:
+        return {};
+    }
+  };
+};
+var useSheetModelDxGridProps = (dxGrid, model) => {
+  const [columns, setColumns] = (0, import_react5.useState)(createDxGridColumns(model));
+  const [rows, setRows] = (0, import_react5.useState)(createDxGridRows(model));
+  (0, import_react5.useEffect)(() => {
+    const cellsAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
+      "cells"
+    ]);
+    if (dxGrid) {
+      dxGrid.getCells = cellGetter(model);
+    }
+    const handleCellsUpdate = () => {
+      dxGrid?.requestUpdate("initialCells");
+    };
+    cellsAccessor.handle.addListener("change", handleCellsUpdate);
+    const unsubscribe = model.graph.update.on(handleCellsUpdate);
+    return () => {
+      cellsAccessor.handle.removeListener("change", handleCellsUpdate);
+      unsubscribe();
+    };
+  }, [
+    model,
+    dxGrid
+  ]);
+  (0, import_react5.useEffect)(() => {
+    const columnMetaAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
+      "columnMeta"
+    ]);
+    const rowMetaAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
+      "rowMeta"
+    ]);
+    const handleColumnMetaUpdate = () => {
+      setColumns(createDxGridColumns(model));
+    };
+    const handleRowMetaUpdate = () => {
+      setRows(createDxGridRows(model));
+    };
+    columnMetaAccessor.handle.addListener("change", handleColumnMetaUpdate);
+    rowMetaAccessor.handle.addListener("change", handleRowMetaUpdate);
+    return () => {
+      columnMetaAccessor.handle.removeListener("change", handleColumnMetaUpdate);
+      rowMetaAccessor.handle.removeListener("change", handleRowMetaUpdate);
+    };
+  }, [
+    model,
+    dxGrid
+  ]);
+  return {
+    columns,
+    rows
+  };
+};
+var parseThreadAnchorAsCellRange = (cursor) => {
+  const coords = cursor.split(",");
+  if (coords.length !== 4) {
+    return null;
+  } else {
+    const [fromCol, fromRow, toCol, toRow] = coords;
+    return {
+      from: {
+        col: parseInt(fromCol),
+        row: parseInt(fromRow)
+      },
+      to: {
+        col: parseInt(toCol),
+        row: parseInt(toRow)
+      }
+    };
+  }
+};
+var useUpdateFocusedCellOnThreadSelection = (grid) => {
+  const { model, setActiveRefs } = useSheetContext();
+  const scrollIntoViewResolver = (0, import_react6.useMemo)(() => (0, import_app_framework2.createResolver)({
+    intent: import_app_framework2.LayoutAction.ScrollIntoView,
+    position: "hoist",
+    filter: (data) => {
+      if (!import_effect2.Schema.is(import_app_framework2.LayoutAction.ScrollIntoView.fields.input)(data)) {
+        return false;
+      }
+      return data.subject === (0, import_echo3.fullyQualifiedId)(model.sheet) && !!data.options?.cursor;
+    },
+    resolve: ({ options: { cursor, ref } }) => {
+      setActiveRefs(ref);
+      const range = parseThreadAnchorAsCellRange(cursor);
+      range && grid?.setFocus({
+        ...range.to,
+        plane: "grid"
+      }, true);
+    }
+  }), [
+    model.sheet,
+    setActiveRefs
+  ]);
+  (0, import_app_framework2.useIntentResolver)(import_chunk_JSIDCZHB.SHEET_PLUGIN, scrollIntoViewResolver);
+};
+var useSelectThreadOnCellFocus = () => {
+  const { model, cursor } = useSheetContext();
+  const { dispatchPromise: dispatch } = (0, import_app_framework2.useIntentDispatcher)();
+  const space = (0, import_echo3.getSpace)(model.sheet);
+  const anchors = (0, import_echo3.useQuery)(space, import_echo3.Query.select(import_echo3.Filter.ids(model.sheet.id)).targetOf(import_schema.AnchoredTo));
+  const selectClosestThread = (0, import_react6.useCallback)((cellAddress) => {
+    if (!cellAddress) {
+      return;
+    }
+    const closestThread = anchors.find((anchor) => {
+      const source = import_echo2.Relation.getSource(anchor);
+      if (anchor.anchor && (0, import_echo_schema.isInstanceOf)(import_types2.ThreadType, source)) {
+        const range = parseThreadAnchorAsCellRange(anchor.anchor);
+        return range ? (0, import_compute4.inRange)(range, cellAddress) : false;
+      } else {
+        return false;
+      }
+    });
+    if (closestThread) {
+      const primary = (0, import_echo3.fullyQualifiedId)(model.sheet);
+      const intent = (0, import_effect2.pipe)((0, import_app_framework2.createIntent)(import_types2.ThreadAction.Select, {
+        current: (0, import_echo3.fullyQualifiedId)(closestThread)
+      }), (0, import_app_framework2.chain)(import_types.DeckAction.ChangeCompanion, {
+        primary,
+        companion: `${primary}${import_types.ATTENDABLE_PATH_SEPARATOR}comments`
+      }));
+      void dispatch(intent);
+    }
+  }, [
+    dispatch,
+    anchors
+  ]);
+  const debounced = (0, import_react6.useMemo)(() => {
+    return (0, import_async.debounce)((cellCoords) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
+  }, [
+    selectClosestThread
+  ]);
+  (0, import_react6.useEffect)(() => {
+    if (!cursor) {
+      return;
+    }
+    debounced(cursor);
+  }, [
+    cursor,
+    debounced
+  ]);
+};
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/components/SheetContext/SheetContext.tsx";
+var SheetContext = /* @__PURE__ */ (0, import_react7.createContext)(void 0);
+var useSheetContext = () => {
+  const context = (0, import_react7.useContext)(SheetContext);
+  (0, import_invariant.invariant)(context, void 0, {
+    F: __dxlog_file,
+    L: 54,
+    S: void 0,
+    A: [
+      "context",
+      ""
+    ]
+  });
+  return context;
+};
+var SheetProviderImpl = ({ model, onInfo, ignoreAttention, children, __gridScope }) => {
+  var _effect = (0, import_tracking4.useSignals)();
+  try {
+    const { id, editing, setEditing } = (0, import_react_ui_grid3.useGridContext)("SheetProvider", __gridScope);
+    const [cursor, setCursorInternal] = (0, import_react7.useState)();
+    const [range, setRangeInternal] = (0, import_react7.useState)();
+    const [cursorFallbackRange, setCursorFallbackRange] = (0, import_react7.useState)();
+    const [activeRefs, setActiveRefs] = (0, import_react7.useState)("");
+    const setCursor = (0, import_react7.useCallback)((nextCursor) => {
+      setCursorInternal(nextCursor);
+      setCursorFallbackRange(range?.to ? range : nextCursor ? {
+        from: nextCursor,
+        to: nextCursor
+      } : void 0);
+    }, [
+      range
+    ]);
+    const setRange = (0, import_react7.useCallback)((nextRange) => {
+      setRangeInternal(nextRange);
+      setCursorFallbackRange(nextRange?.to ? nextRange : cursor ? {
+        from: cursor,
+        to: cursor
+      } : void 0);
+    }, [
+      cursor
+    ]);
+    return /* @__PURE__ */ import_react7.default.createElement(SheetContext.Provider, {
+      value: {
+        id,
+        model,
+        editing,
+        setEditing,
+        cursor,
+        setCursor,
+        range,
+        setRange,
+        cursorFallbackRange,
+        activeRefs,
+        setActiveRefs,
+        // TODO(burdon): Change to event.
+        onInfo,
+        ignoreAttention
+      }
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var SheetProvider = ({ children, graph, sheet, readonly, ignoreAttention, onInfo }) => {
+  var _effect = (0, import_tracking4.useSignals)();
+  try {
+    const model = (0, import_chunk_76NESQLB.useSheetModel)(graph, sheet, {
+      readonly
+    });
+    return !model ? null : /* @__PURE__ */ import_react7.default.createElement(import_react_ui_grid3.Grid.Root, {
+      id: (0, import_echo4.fullyQualifiedId)(sheet)
+    }, /* @__PURE__ */ import_react7.default.createElement(SheetProviderImpl, {
+      model,
+      onInfo,
+      ignoreAttention
+    }, children));
+  } finally {
+    _effect.f();
+  }
+};
+var inertPosition = {
+  plane: "grid",
+  col: 0,
+  row: 0
+};
+var initialCells = {
+  grid: {},
+  frozenColsStart: [
+    ...Array(64)
+  ].reduce((acc, _, i) => {
+    acc[`0,${i}`] = rowLabelCell(i);
+    return acc;
+  }, {}),
+  frozenRowsStart: [
+    ...Array(12)
+  ].reduce((acc, _, i) => {
+    acc[`${i},0`] = colLabelCell(i);
+    return acc;
+  }, {})
+};
+var frozen = {
+  frozenColsStart: 1,
+  frozenRowsStart: 1
+};
+var sheetColDefault = {
+  frozenColsStart: {
+    size: 48,
+    readonly: true
+  },
+  grid: {
+    size: import_lit_grid.defaultColSize,
+    resizeable: true
+  }
+};
+var sheetRowDefault = {
+  frozenRowsStart: {
+    size: import_lit_grid.defaultRowSize,
+    readonly: true
+  },
+  grid: {
+    size: import_lit_grid.defaultRowSize,
+    resizeable: true
+  }
+};
+var GridSheet = () => {
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    const { t } = (0, import_react_ui2.useTranslation)(import_chunk_JSIDCZHB.SHEET_PLUGIN);
+    const { id, model, editing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs, ignoreAttention } = useSheetContext();
+    const [dxGrid, setDxGrid] = (0, import_react4.useState)(null);
+    const [extraplanarFocus, setExtraplanarFocus] = (0, import_react4.useState)(null);
+    const { dispatchPromise: dispatch } = (0, import_app_framework.useIntentDispatcher)();
+    const rangeController = (0, import_react4.useRef)();
+    const { hasAttention } = (0, import_react_ui_attention.useAttention)(id);
+    const handleFocus = (0, import_react4.useCallback)((event) => {
+      if (!editing) {
+        const cell = (0, import_react_ui_grid.closestCell)(event.target);
+        if (cell) {
+          if (cell.plane === "grid") {
+            setCursor({
+              col: cell.col,
+              row: cell.row
+            });
+            setExtraplanarFocus(null);
+          } else {
+            setExtraplanarFocus(cell);
+          }
+        } else {
+          setExtraplanarFocus(null);
+        }
+      }
+    }, [
+      editing
+    ]);
+    const handleClose = (0, import_react4.useCallback)((_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);
+      }
+    }, [
+      model,
+      editing,
+      dxGrid
+    ]);
+    const handleBlur = (0, import_react4.useCallback)((value) => {
+      if (value !== void 0) {
+        model.setValue((0, import_react_ui_grid.parseCellIndex)(editing.index), value);
+      }
+    }, [
+      model,
+      editing
+    ]);
+    const handleAxisResize = (0, import_react4.useCallback)(({ axis, size, index: numericIndex }) => {
+      if (axis === "row") {
+        const rowId = model.sheet.rows[parseInt(numericIndex)];
+        model.sheet.rowMeta[rowId] ??= {};
+        model.sheet.rowMeta[rowId].size = size;
+      } else {
+        const columnId = model.sheet.columns[parseInt(numericIndex)];
+        model.sheet.columnMeta[columnId] ??= {};
+        model.sheet.columnMeta[columnId].size = size;
+      }
+    }, [
+      model
+    ]);
+    const handleSelect = (0, import_react4.useCallback)(({ minCol, maxCol, minRow, maxRow }) => {
+      const range = {
+        from: {
+          col: minCol,
+          row: minRow
+        }
+      };
+      if (minCol !== maxCol || minRow !== maxRow) {
+        range.to = {
+          col: maxCol,
+          row: maxRow
+        };
+      }
+      if (editing) {
+        rangeController.current?.setRange((0, import_compute2.rangeToA1Notation)(range));
+      } else {
+        setRange(range.to ? range : void 0);
+      }
+    }, [
+      editing
+    ]);
+    const handleWheel = (0, import_react4.useCallback)((event) => {
+      if (!ignoreAttention && !hasAttention) {
+        event.stopPropagation();
+      }
+    }, [
+      hasAttention,
+      ignoreAttention
+    ]);
+    const selectEntireAxis = (0, import_react4.useCallback)((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 = (0, import_react4.useCallback)((event) => {
+      const cell = (0, import_react_ui_grid.closestCell)(event.target);
+      if (cell) {
+        selectEntireAxis(cell);
+      }
+    }, [
+      selectEntireAxis
+    ]);
+    const handleKeyDown = (0, import_react4.useCallback)((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) {
+          case "x":
+          case "X":
+            event.preventDefault();
+            return cursorFallbackRange && model.cut(cursorFallbackRange);
+          case "c":
+          case "C":
+            event.preventDefault();
+            return cursorFallbackRange && model.copy(cursorFallbackRange);
+          case "v":
+          case "V":
+            event.preventDefault();
+            return cursor && model.paste(cursor);
+          case "z":
+            event.preventDefault();
+            return event.shiftKey ? model.redo() : model.undo();
+          case "Z":
+          case "y":
+            event.preventDefault();
+            return model.redo();
+        }
+      }
+    }, [
+      cursorFallbackRange,
+      model,
+      cursor,
+      extraplanarFocus,
+      selectEntireAxis
+    ]);
+    const contextMenuAnchorRef = (0, import_react4.useRef)(null);
+    const [contextMenuOpen, setContextMenuOpen] = (0, import_react4.useState)(null);
+    const contextMenuAxis = contextMenuOpen?.plane.startsWith("frozenRows") ? "col" : "row";
+    const handleContextMenu = (0, import_react4.useCallback)((event) => {
+      const cell = (0, import_react_ui_grid.closestCell)(event.target);
+      if (cell && cell.plane.startsWith("frozen")) {
+        event.preventDefault();
+        contextMenuAnchorRef.current = event.target;
+        setContextMenuOpen(cell);
+      }
+    }, []);
+    const handleAxisMenuAction = (0, import_react4.useCallback)((operation) => {
+      switch (operation) {
+        case "insert-before":
+        case "insert-after":
+          return dispatch((0, import_app_framework.createIntent)(import_chunk_76NESQLB.SheetAction.InsertAxis, {
+            model,
+            axis: contextMenuAxis,
+            index: contextMenuOpen[contextMenuAxis] + (operation === "insert-before" ? 0 : 1)
+          }));
+        case "drop":
+          return dispatch((0, import_app_framework.createIntent)(import_chunk_76NESQLB.SheetAction.DropAxis, {
+            model,
+            axis: contextMenuAxis,
+            axisIndex: model.sheet[contextMenuAxis === "row" ? "rows" : "columns"][contextMenuOpen[contextMenuAxis]]
+          }));
+      }
+    }, [
+      contextMenuAxis,
+      contextMenuOpen,
+      model,
+      dispatch
+    ]);
+    const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
+    const extension = (0, import_react4.useMemo)(() => [
+      (0, import_react_ui_grid.editorKeys)({
+        onClose: handleClose,
+        ...editing?.initialContent && {
+          onNav: handleClose
+        }
+      }),
+      (0, import_chunk_FIM6EZ6M.sheetExtension)({
+        functions: model.graph.getFunctions()
+      }),
+      (0, import_chunk_FIM6EZ6M.rangeExtension)({
+        onInit: (fn) => rangeController.current = fn,
+        onStateChange: (state) => {
+          if (dxGrid) {
+            dxGrid.mode = typeof state.activeRange === "undefined" ? "edit" : "edit-select";
+          }
+        }
+      })
+    ], [
+      model,
+      handleClose,
+      editing
+    ]);
+    const getCellContent = (0, import_react4.useCallback)((index) => {
+      return model.getCellText((0, import_react_ui_grid.parseCellIndex)(index));
+    }, [
+      model
+    ]);
+    useUpdateFocusedCellOnThreadSelection(dxGrid);
+    useSelectThreadOnCellFocus();
+    return (
+      // TODO(thure): Why are Table’s and Sheet’s editor boxes off by 1px?
+      /* @__PURE__ */ import_react4.default.createElement("div", {
+        role: "none",
+        className: "relative min-bs-0 [&_.cm-editor]:!border-lb [&_.cm-editor]:!border-transparent "
+      }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui_grid.GridCellEditor, {
+        getCellContent,
+        extension,
+        onBlur: handleBlur
+      }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui_grid.Grid.Content, {
+        initialCells,
+        limitColumns: import_chunk_76NESQLB.DEFAULT_COLS,
+        limitRows: import_chunk_76NESQLB.DEFAULT_ROWS,
+        columns,
+        rows,
+        // TODO(burdon): `col` vs. `column`?
+        columnDefault: sheetColDefault,
+        rowDefault: sheetRowDefault,
+        frozen,
+        onAxisResize: handleAxisResize,
+        onSelect: handleSelect,
+        onFocus: handleFocus,
+        onWheelCapture: handleWheel,
+        onKeyDown: handleKeyDown,
+        onContextMenu: handleContextMenu,
+        onClick: handleClick,
+        overscroll: "trap",
+        className: "[--dx-grid-base:var(--baseSurface)] [&_.dx-grid]:border-bs [&_.dx-grid]:border-be [&_.dx-grid]:absolute [&_.dx-grid]:inset-0 [&_.dx-grid]:border-separator",
+        activeRefs,
+        ref: setDxGrid
+      }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Root, {
+        modal: false,
+        open: !!contextMenuOpen,
+        onOpenChange: (nextOpen) => setContextMenuOpen(nextOpen ? inertPosition : null)
+      }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.VirtualTrigger, {
+        virtualRef: contextMenuAnchorRef
+      }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Content, {
+        side: contextMenuAxis === "col" ? "bottom" : "right",
+        sideOffset: 4,
+        collisionPadding: 8
+      }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Item, {
+        onClick: () => handleAxisMenuAction("insert-before"),
+        "data-testid": `grid.${contextMenuAxis}.insert-before`
+      }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Icon, {
+        size: 5,
+        icon: contextMenuAxis === "col" ? "ph--columns-plus-left--regular" : "ph--rows-plus-top--regular"
+      }), /* @__PURE__ */ import_react4.default.createElement("span", null, t(`add ${contextMenuAxis} before label`))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Item, {
+        onClick: () => handleAxisMenuAction("insert-after"),
+        "data-testid": `grid.${contextMenuAxis}.insert-after`
+      }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Icon, {
+        size: 5,
+        icon: contextMenuAxis === "col" ? "ph--columns-plus-right--regular" : "ph--rows-plus-bottom--regular"
+      }), /* @__PURE__ */ import_react4.default.createElement("span", null, t(`add ${contextMenuAxis} after label`))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Item, {
+        onClick: () => handleAxisMenuAction("drop"),
+        "data-testid": `grid.${contextMenuAxis}.drop`
+      }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Icon, {
+        size: 5,
+        icon: "ph--backspace--regular"
+      }), /* @__PURE__ */ import_react4.default.createElement("span", null, t(`delete ${contextMenuAxis} label`)))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Arrow, null))))
+    );
+  } finally {
+    _effect.f();
+  }
+};
+var SheetContainer = (0, import_react3.lazy)(() => import("./SheetContainer-TPB2ZBQF.cjs"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ComputeGraphContextProvider,
+  GridSheet,
+  RangeList,
+  SheetContainer,
+  SheetProvider,
+  useComputeGraph,
+  useSheetContext
+});
+//# sourceMappingURL=chunk-GBCCPMOO.cjs.map