@dxos/plugin-sheet 0.7.4 → 0.7.5-labs.a279d8c

package/dist/lib/browser/chunk-H23JW3DX.mjs

@@ -0,0 +1,800 @@
+import {
+  DEFAULT_COLS,
+  DEFAULT_ROWS,
+  Range,
+  SheetAction,
+  cellClassNameForRange,
+  rangeFromIndex,
+  useSheetModel
+} from "./chunk-T3IVPMRX.mjs";
+import {
+  rangeExtension,
+  sheetExtension
+} from "./chunk-FOO6NGBM.mjs";
+import {
+  SHEET_PLUGIN
+} from "./chunk-K6EUYKWT.mjs";
+
+// packages/plugins/plugin-sheet/src/components/ComputeGraph/ComputeGraphContextProvider.tsx
+import React, { createContext, useContext } from "react";
+import { raise } from "@dxos/debug";
+import { useAsyncState } from "@dxos/react-hooks";
+var ComputeGraphContext = /* @__PURE__ */ createContext(void 0);
+var ComputeGraphContextProvider = ({ registry, children }) => {
+  return /* @__PURE__ */ React.createElement(ComputeGraphContext.Provider, {
+    value: {
+      registry
+    }
+  }, children);
+};
+var useComputeGraph = (space) => {
+  const { registry } = useContext(ComputeGraphContext) ?? raise(new Error("Missing ComputeGraphContext"));
+  const [graph] = useAsyncState(async () => {
+    if (space) {
+      const graph2 = registry.getOrCreateGraph(space);
+      await graph2.open();
+      return graph2;
+    }
+  }, [
+    space,
+    registry
+  ]);
+  return graph;
+};
+
+// packages/plugins/plugin-sheet/src/components/RangeList/RangeList.tsx
+import React2, { useCallback } from "react";
+import { rangeToA1Notation } from "@dxos/compute";
+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 }) => {
+  const { t } = useTranslation(SHEET_PLUGIN);
+  const handleSelectRange = (range) => {
+  };
+  const handleDeleteRange = useCallback((range) => {
+    const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
+    sheet.ranges.splice(index, 1);
+  }, [
+    sheet
+  ]);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("h2", {
+    className: "p-2 text-sm font-semibold"
+  }, t("range list heading")), /* @__PURE__ */ React2.createElement(List.Root, {
+    items: sheet.ranges,
+    isItem: S.is(Range)
+  }, ({ items: ranges }) => ranges.map((range, i) => /* @__PURE__ */ React2.createElement(List.Item, {
+    key: i,
+    item: range,
+    classNames: [
+      "p-2",
+      ghostHover
+    ]
+  }, /* @__PURE__ */ React2.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React2.createElement(List.ItemTitle, {
+    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__ */ React2.createElement(List.ItemDeleteButton, {
+    onClick: () => handleDeleteRange(range)
+  })))));
+};
+
+// packages/plugins/plugin-sheet/src/components/index.ts
+import { lazy } from "react";
+
+// packages/plugins/plugin-sheet/src/components/GridSheet/GridSheet.tsx
+import React4, { useCallback as useCallback4, useMemo as useMemo2, useRef, useState as useState3 } from "react";
+import { createIntent as createIntent2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
+import { rangeToA1Notation as rangeToA1Notation2 } from "@dxos/compute";
+import { DropdownMenu, Icon, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { useAttention } from "@dxos/react-ui-attention";
+import { closestCell, defaultSizeRow, editorKeys, Grid as Grid2, GridCellEditor, parseCellIndex } from "@dxos/react-ui-grid";
+
+// packages/plugins/plugin-sheet/src/components/GridSheet/util.ts
+import { useEffect as useEffect2, useState } from "react";
+import { inRange as inRange2 } from "@dxos/compute";
+import { createDocAccessor, fullyQualifiedId as fullyQualifiedId2 } from "@dxos/react-client/echo";
+import { parseValue, cellClassesForFieldType } from "@dxos/react-ui-form";
+import { colToA1Notation, rowToA1Notation, commentedClassName } from "@dxos/react-ui-grid";
+import { mx } from "@dxos/react-ui-theme";
+
+// packages/plugins/plugin-sheet/src/integrations/thread-ranges.ts
+import { useCallback as useCallback2, useEffect, useMemo } from "react";
+import { createIntent, createResolver, LayoutAction, useIntentDispatcher, useIntentResolver } from "@dxos/app-framework";
+import { debounce } from "@dxos/async";
+import { inRange } from "@dxos/compute";
+import { ThreadAction } from "@dxos/plugin-thread/types";
+import { fullyQualifiedId } from "@dxos/react-client/echo";
+var completeCellRangeToThreadCursor = (range) => {
+  return `${range.from.col},${range.from.row},${range.to.col},${range.to.row}`;
+};
+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 = useMemo(() => createResolver(LayoutAction.ScrollIntoView, ({ cursor, ref }) => {
+    setActiveRefs(ref);
+    const range = parseThreadAnchorAsCellRange(cursor);
+    range && grid?.setFocus({
+      ...range.to,
+      plane: "grid"
+    }, true);
+  }, {
+    disposition: "hoist",
+    filter: (data) => data.id === fullyQualifiedId(model.sheet) && !!data.cursor
+  }), [
+    model.sheet,
+    setActiveRefs
+  ]);
+  useIntentResolver(SHEET_PLUGIN, scrollIntoViewResolver);
+};
+var useSelectThreadOnCellFocus = () => {
+  const { model, cursor } = useSheetContext();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const threads = useMemo(() => model.sheet.threads?.filter((thread) => !!thread) ?? [], [
+    // TODO(thure): Surely we can find a better dependency for this…
+    JSON.stringify(model.sheet.threads)
+  ]);
+  const selectClosestThread = useCallback2((cellAddress) => {
+    if (!cellAddress || !threads) {
+      return;
+    }
+    const closestThread = threads?.find((ref) => {
+      if (ref.target?.anchor) {
+        const range = parseThreadAnchorAsCellRange(ref.target.anchor);
+        return range ? inRange(range, cellAddress) : false;
+      } else {
+        return false;
+      }
+    });
+    if (closestThread) {
+      void dispatch(createIntent(ThreadAction.Select, {
+        current: fullyQualifiedId(closestThread)
+      }));
+    }
+  }, [
+    dispatch,
+    threads
+  ]);
+  const debounced = useMemo(() => {
+    return debounce((cellCoords) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
+  }, [
+    selectClosestThread
+  ]);
+  useEffect(() => {
+    if (!cursor) {
+      return;
+    }
+    debounced(cursor);
+  }, [
+    cursor,
+    debounced
+  ]);
+};
+
+// packages/plugins/plugin-sheet/src/components/GridSheet/util.ts
+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 }) => inRange2(rangeFromIndex(model.sheet, range), address));
+  const threadRefs = model.sheet.threads?.filter((thread) => {
+    const range = thread.target?.anchor && parseThreadAnchorAsCellRange(thread.target.anchor);
+    return thread && range ? inRange2(range, address) : false;
+  }).map((thread) => fullyQualifiedId2(thread)).join(" ");
+  const description = model.getValueDescription(address);
+  const type = description?.type;
+  const format = description?.format;
+  const classNames = ranges?.map(cellClassNameForRange).reverse();
+  return {
+    value: parseValue({
+      type,
+      format,
+      value: rawValue
+    }),
+    className: mx(cellClassesForFieldType({
+      type,
+      format
+    }), threadRefs && 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: rowToA1Notation(row),
+  className: "text-end !pie-1 text-subdued",
+  resizeHandle: "row"
+});
+var colLabelCell = (col) => ({
+  value: colToA1Notation(col),
+  className: "text-subdued",
+  resizeHandle: "col"
+});
+var cellGetter = (model) => {
+  const getGridCells = gridCellGetter(model);
+  return (nextBounds, plane) => {
+    switch (plane) {
+      case "grid":
+        return getGridCells(nextBounds);
+      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] = useState(createDxGridColumns(model));
+  const [rows, setRows] = useState(createDxGridRows(model));
+  useEffect2(() => {
+    const cellsAccessor = 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
+  ]);
+  useEffect2(() => {
+    const columnMetaAccessor = createDocAccessor(model.sheet, [
+      "columnMeta"
+    ]);
+    const rowMetaAccessor = 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
+  };
+};
+
+// packages/plugins/plugin-sheet/src/components/SheetContext/SheetContext.tsx
+import React3, { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useState as useState2 } from "react";
+import { invariant } from "@dxos/invariant";
+import { fullyQualifiedId as fullyQualifiedId3 } from "@dxos/react-client/echo";
+import { Grid, useGridContext } from "@dxos/react-ui-grid";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/components/SheetContext/SheetContext.tsx";
+var SheetContext = /* @__PURE__ */ createContext2(void 0);
+var useSheetContext = () => {
+  const context = useContext2(SheetContext);
+  invariant(context, void 0, {
+    F: __dxlog_file,
+    L: 54,
+    S: void 0,
+    A: [
+      "context",
+      ""
+    ]
+  });
+  return context;
+};
+var SheetProviderImpl = ({ model, onInfo, ignoreAttention, children, __gridScope }) => {
+  const { id, editing, setEditing } = useGridContext("SheetProvider", __gridScope);
+  const [cursor, setCursorInternal] = useState2();
+  const [range, setRangeInternal] = useState2();
+  const [cursorFallbackRange, setCursorFallbackRange] = useState2();
+  const [activeRefs, setActiveRefs] = useState2("");
+  const setCursor = useCallback3((nextCursor) => {
+    setCursorInternal(nextCursor);
+    setCursorFallbackRange(range?.to ? range : nextCursor ? {
+      from: nextCursor,
+      to: nextCursor
+    } : void 0);
+  }, [
+    range
+  ]);
+  const setRange = useCallback3((nextRange) => {
+    setRangeInternal(nextRange);
+    setCursorFallbackRange(nextRange?.to ? nextRange : cursor ? {
+      from: cursor,
+      to: cursor
+    } : void 0);
+  }, [
+    cursor
+  ]);
+  return /* @__PURE__ */ React3.createElement(SheetContext.Provider, {
+    value: {
+      id,
+      model,
+      editing,
+      setEditing,
+      cursor,
+      setCursor,
+      range,
+      setRange,
+      cursorFallbackRange,
+      activeRefs,
+      setActiveRefs,
+      // TODO(burdon): Change to event.
+      onInfo,
+      ignoreAttention
+    }
+  }, children);
+};
+var SheetProvider = ({ children, graph, sheet, readonly, ignoreAttention, onInfo }) => {
+  const model = useSheetModel(graph, sheet, {
+    readonly
+  });
+  return !model ? null : /* @__PURE__ */ React3.createElement(Grid.Root, {
+    id: fullyQualifiedId3(sheet)
+  }, /* @__PURE__ */ React3.createElement(SheetProviderImpl, {
+    model,
+    onInfo,
+    ignoreAttention
+  }, children));
+};
+
+// packages/plugins/plugin-sheet/src/components/GridSheet/GridSheet.tsx
+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 sheetRowDefault = {
+  frozenRowsStart: {
+    size: defaultSizeRow,
+    readonly: true
+  },
+  grid: {
+    size: defaultSizeRow,
+    resizeable: true
+  }
+};
+var sheetColDefault = {
+  frozenColsStart: {
+    size: 48,
+    readonly: true
+  },
+  grid: {
+    size: 180,
+    resizeable: true
+  }
+};
+var GridSheet = () => {
+  const { t } = useTranslation2(SHEET_PLUGIN);
+  const { id, model, editing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs, ignoreAttention } = useSheetContext();
+  const [dxGrid, setDxGrid] = useState3(null);
+  const [extraplanarFocus, setExtraplanarFocus] = useState3(null);
+  const { dispatchPromise: dispatch } = useIntentDispatcher2();
+  const rangeController = useRef();
+  const { hasAttention } = useAttention(id);
+  const handleFocus = useCallback4((event) => {
+    if (!editing) {
+      const cell = 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 = 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);
+    }
+  }, [
+    model,
+    editing,
+    dxGrid
+  ]);
+  const handleBlur = useCallback4((value) => {
+    if (value !== void 0) {
+      model.setValue(parseCellIndex(editing.index), value);
+    }
+  }, [
+    model,
+    editing
+  ]);
+  const handleAxisResize = useCallback4(({ 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 = useCallback4(({ 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(rangeToA1Notation2(range));
+    } else {
+      setRange(range.to ? range : void 0);
+    }
+  }, [
+    editing
+  ]);
+  const handleWheel = useCallback4((event) => {
+    if (!ignoreAttention && !hasAttention) {
+      event.stopPropagation();
+    }
+  }, [
+    hasAttention,
+    ignoreAttention
+  ]);
+  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) {
+        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 = useRef(null);
+  const [contextMenuOpen, setContextMenuOpen] = useState3(null);
+  const contextMenuAxis = contextMenuOpen?.plane.startsWith("frozenRows") ? "col" : "row";
+  const handleContextMenu = useCallback4((event) => {
+    const cell = closestCell(event.target);
+    if (cell && cell.plane.startsWith("frozen")) {
+      event.preventDefault();
+      contextMenuAnchorRef.current = event.target;
+      setContextMenuOpen(cell);
+    }
+  }, []);
+  const handleAxisMenuAction = useCallback4((operation) => {
+    switch (operation) {
+      case "insert-before":
+      case "insert-after":
+        return dispatch(createIntent2(SheetAction.InsertAxis, {
+          model,
+          axis: contextMenuAxis,
+          index: contextMenuOpen[contextMenuAxis] + (operation === "insert-before" ? 0 : 1)
+        }));
+      case "drop":
+        return dispatch(createIntent2(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 = useMemo2(() => [
+    editorKeys({
+      onClose: handleClose,
+      ...editing?.initialContent && {
+        onNav: handleClose
+      }
+    }),
+    sheetExtension({
+      functions: model.graph.getFunctions()
+    }),
+    rangeExtension({
+      onInit: (fn) => rangeController.current = fn,
+      onStateChange: (state) => {
+        if (dxGrid) {
+          dxGrid.mode = typeof state.activeRange === "undefined" ? "edit" : "edit-select";
+        }
+      }
+    })
+  ], [
+    model,
+    handleClose,
+    editing
+  ]);
+  const getCellContent = useCallback4((index) => {
+    return model.getCellText(parseCellIndex(index));
+  }, [
+    model
+  ]);
+  useUpdateFocusedCellOnThreadSelection(dxGrid);
+  useSelectThreadOnCellFocus();
+  return /* @__PURE__ */ React4.createElement("div", {
+    role: "none",
+    className: "relative min-bs-0"
+  }, /* @__PURE__ */ React4.createElement(GridCellEditor, {
+    getCellContent,
+    extension,
+    onBlur: handleBlur
+  }), /* @__PURE__ */ React4.createElement(Grid2.Content, {
+    initialCells,
+    limitColumns: DEFAULT_COLS,
+    limitRows: DEFAULT_ROWS,
+    columns,
+    rows,
+    onAxisResize: handleAxisResize,
+    onSelect: handleSelect,
+    rowDefault: sheetRowDefault,
+    columnDefault: sheetColDefault,
+    frozen,
+    onFocus: handleFocus,
+    onWheelCapture: handleWheel,
+    onKeyDown: handleKeyDown,
+    onContextMenu: handleContextMenu,
+    onClick: handleClick,
+    overscroll: "trap",
+    className: "[--dx-grid-base:var(--surface-bg)] [&_.dx-grid]:border-bs [&_.dx-grid]:absolute [&_.dx-grid]:inset-0 [&_.dx-grid]:border-separator",
+    activeRefs,
+    ref: setDxGrid
+  }), /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
+    modal: false,
+    open: !!contextMenuOpen,
+    onOpenChange: (nextOpen) => setContextMenuOpen(nextOpen ? inertPosition : null)
+  }, /* @__PURE__ */ React4.createElement(DropdownMenu.VirtualTrigger, {
+    virtualRef: contextMenuAnchorRef
+  }), /* @__PURE__ */ React4.createElement(DropdownMenu.Content, {
+    side: contextMenuAxis === "col" ? "bottom" : "right",
+    sideOffset: 4,
+    collisionPadding: 8
+  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+    onClick: () => handleAxisMenuAction("insert-before"),
+    "data-testid": `grid.${contextMenuAxis}.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("insert-after"),
+    "data-testid": `grid.${contextMenuAxis}.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, {
+    onClick: () => handleAxisMenuAction("drop"),
+    "data-testid": `grid.${contextMenuAxis}.drop`
+  }, /* @__PURE__ */ React4.createElement(Icon, {
+    size: 5,
+    icon: "ph--backspace--regular"
+  }), /* @__PURE__ */ React4.createElement("span", null, t(`delete ${contextMenuAxis} label`)))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))));
+};
+
+// packages/plugins/plugin-sheet/src/components/index.ts
+var SheetContainer = lazy(() => import("./SheetContainer-CM4CO3DC.mjs"));
+
+export {
+  ComputeGraphContextProvider,
+  useComputeGraph,
+  completeCellRangeToThreadCursor,
+  useSheetContext,
+  SheetProvider,
+  GridSheet,
+  RangeList,
+  SheetContainer
+};
+//# sourceMappingURL=chunk-H23JW3DX.mjs.map