@dxos/plugin-sheet 0.6.14-main.7bd9c89 → 0.6.14-staging.9e90729

package/dist/lib/node/{chunk-53BMSUIK.cjs → chunk-7AWAC3R3.cjs}

@@ -26,74 +26,69 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var chunk_53BMSUIK_exports = {};
-__export(chunk_53BMSUIK_exports, {
+var chunk_7AWAC3R3_exports = {};
+__export(chunk_7AWAC3R3_exports, {
   ComputeGraphContextProvider: () => ComputeGraphContextProvider,
   GridSheet: () => GridSheet,
+  RangeList: () => RangeList,
   SheetContainer: () => SheetContainer,
   SheetProvider: () => SheetProvider,
-  addressToA1Notation: () => addressToA1Notation,
-  addressToIndex: () => addressToIndex,
-  compareIndexPositions: () => compareIndexPositions,
+  completeCellRangeToThreadCursor: () => completeCellRangeToThreadCursor,
   computeGraphFacet: () => computeGraphFacet,
-  createSheet: () => createSheet,
-  inRange: () => inRange,
-  rangeToA1Notation: () => rangeToA1Notation,
   useComputeGraph: () => useComputeGraph,
   useSheetContext: () => useSheetContext
 });
-module.exports = __toCommonJS(chunk_53BMSUIK_exports);
-var import_chunk_NZARD7UP = require("./chunk-NZARD7UP.cjs");
+module.exports = __toCommonJS(chunk_7AWAC3R3_exports);
+var import_chunk_QNFMTK3X = require("./chunk-QNFMTK3X.cjs");
+var import_chunk_V7E5JZBD = require("./chunk-V7E5JZBD.cjs");
 var import_chunk_QIFIGEKV = require("./chunk-QIFIGEKV.cjs");
-var import_chunk_5XPK2V4A = require("./chunk-5XPK2V4A.cjs");
 var import_react = __toESM(require("react"));
-var import_crypto = require("@dxos/crypto");
-var import_echo_schema = require("@dxos/echo-schema");
-var import_invariant = require("@dxos/invariant");
+var import_debug = require("@dxos/debug");
+var import_react_hooks = require("@dxos/react-hooks");
 var import_language = require("@codemirror/language");
 var import_state = require("@codemirror/state");
 var import_view = require("@codemirror/view");
 var import_async = require("@dxos/async");
-var import_invariant2 = require("@dxos/invariant");
-var import_state2 = require("@dxos/react-ui-editor/state");
+var import_invariant = require("@dxos/invariant");
+var import_react_ui_editor = require("@dxos/react-ui-editor");
 var import_autocomplete = require("@codemirror/autocomplete");
 var import_language2 = require("@codemirror/language");
 var import_view2 = require("@codemirror/view");
 var import_highlight = require("@lezer/highlight");
 var import_codemirror_lang_spreadsheet = require("codemirror-lang-spreadsheet");
-var import_state3 = require("@dxos/react-ui-editor/state");
+var import_react_ui_editor2 = require("@dxos/react-ui-editor");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_react2 = require("react");
-var import_debug = require("@dxos/debug");
-var import_react_hooks = require("@dxos/react-hooks");
-var import_react3 = require("react");
-var import_react4 = __toESM(require("react"));
-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_react2 = __toESM(require("react"));
+var import_invariant2 = require("@dxos/invariant");
 var import_echo = require("@dxos/react-client/echo");
-var import_react_ui_data = require("@dxos/react-ui-data");
-var import_react_ui_grid2 = require("@dxos/react-ui-grid");
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_react6 = require("react");
-var import_echo_schema2 = require("@dxos/echo-schema");
+var import_react_ui_grid = require("@dxos/react-ui-grid");
 var import_async2 = require("@dxos/async");
 var import_context = require("@dxos/context");
-var import_echo_schema3 = require("@dxos/echo-schema");
+var import_echo_schema = require("@dxos/echo-schema");
 var import_invariant3 = require("@dxos/invariant");
 var import_keys = require("@dxos/keys");
 var import_log = require("@dxos/log");
 var import_schema = require("@dxos/schema");
 var import_hyperformula = require("#hyperformula");
-var import_signals_core = require("@preact/signals-core");
-var import_react7 = require("react");
+var import_react3 = require("react");
+var import_react4 = __toESM(require("react"));
+var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_attention = require("@dxos/react-ui-attention");
+var import_react_ui_grid2 = require("@dxos/react-ui-grid");
+var import_react5 = require("react");
+var import_echo2 = require("@dxos/react-client/echo");
+var import_react_ui_data = require("@dxos/react-ui-data");
+var import_react_ui_grid3 = require("@dxos/react-ui-grid");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_react6 = require("react");
 var import_app_framework = require("@dxos/app-framework");
 var import_async3 = require("@dxos/async");
-var import_echo2 = require("@dxos/react-client/echo");
-var import_react8 = __toESM(require("react"));
-var import_invariant4 = require("@dxos/invariant");
 var import_echo3 = require("@dxos/react-client/echo");
-var import_react_ui_grid3 = require("@dxos/react-ui-grid");
+var import_react7 = require("react");
+var import_react8 = __toESM(require("react"));
+var import_echo_schema2 = require("@dxos/echo-schema");
+var import_react_ui_list = require("@dxos/react-ui-list");
+var import_react_ui_theme3 = require("@dxos/react-ui-theme");
 var ComputeGraphContext = /* @__PURE__ */ (0, import_react.createContext)(void 0);
 var ComputeGraphContextProvider = ({ registry, children }) => {
   return /* @__PURE__ */ import_react.default.createElement(ComputeGraphContext.Provider, {
@@ -102,184 +97,22 @@ var ComputeGraphContextProvider = ({ registry, children }) => {
     }
   }, children);
 };
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/defs/types.ts";
-var DEFAULT_ROWS = 50;
-var DEFAULT_COLUMNS = 26;
-var MAX_ROWS = 500;
-var MAX_COLUMNS = 26 * 2;
-var posEquals = (a, b) => {
-  return a?.col === b?.col && a?.row === b?.row;
-};
-var columnLetter = (col) => {
-  (0, import_invariant.invariant)(col < MAX_COLUMNS, `Invalid column: ${col}`, {
-    F: __dxlog_file,
-    L: 26,
-    S: void 0,
-    A: [
-      "col < MAX_COLUMNS",
-      "`Invalid column: ${col}`"
-    ]
-  });
-  return (col >= 26 ? String.fromCharCode("A".charCodeAt(0) + Math.floor(col / 26) - 1) : "") + String.fromCharCode("A".charCodeAt(0) + col % 26);
-};
-var addressToA1Notation = ({ col, row }) => {
-  return `${columnLetter(col)}${row + 1}`;
-};
-var addressFromA1Notation = (ref) => {
-  const match = ref.match(/([A-Z]+)(\d+)/);
-  (0, import_invariant.invariant)(match, `Invalid notation: ${ref}`, {
-    F: __dxlog_file,
-    L: 40,
-    S: void 0,
-    A: [
-      "match",
-      "`Invalid notation: ${ref}`"
-    ]
-  });
-  return {
-    row: parseInt(match[2], 10) - 1,
-    col: match[1].split("").reduce((acc, c) => acc * 26 + c.charCodeAt(0) - "A".charCodeAt(0) + 1, 0) - 1
-  };
-};
-var rangeToA1Notation = (range) => {
-  return [
-    range?.from && addressToA1Notation(range?.from),
-    range?.to && addressToA1Notation(range?.to)
-  ].filter(Boolean).join(":");
-};
-var inRange = (range, cell) => {
-  if (!range) {
-    return false;
-  }
-  const { from, to } = range;
-  if (from && posEquals(from, cell) || to && posEquals(to, cell)) {
-    return true;
-  }
-  if (!from || !to) {
-    return false;
-  }
-  const { col: c1, row: r1 } = from;
-  const { col: c2, row: r2 } = to;
-  const cMin = Math.min(c1, c2);
-  const cMax = Math.max(c1, c2);
-  const rMin = Math.min(r1, r2);
-  const rMax = Math.max(r1, r2);
-  const { col, row } = cell;
-  return col >= cMin && col <= cMax && row >= rMin && row <= rMax;
-};
-var ApiError = class extends Error {
-};
-var ReadonlyException = class extends ApiError {
-};
-var RangeException = class extends ApiError {
-  constructor(n) {
-    super();
-  }
-};
-var createIndex = (length = 8) => {
-  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  const charactersLength = characters.length;
-  const randomBuffer = (0, import_crypto.randomBytes)(length);
-  return Array.from(randomBuffer, (byte) => characters[byte % charactersLength]).join("");
-};
-var createIndices = (length) => Array.from({
-  length
-}).map(() => createIndex());
-var insertIndices = (indices, i, n, max) => {
-  if (i + n > max) {
-    throw new RangeException(i + n);
-  }
-  const idx = createIndices(n);
-  indices.splice(i, 0, ...idx);
-};
-var initialize = (sheet, { rows = DEFAULT_ROWS, columns = DEFAULT_COLUMNS } = {}) => {
-  if (!sheet.rows.length) {
-    insertIndices(sheet.rows, 0, rows, MAX_ROWS);
-  }
-  if (!sheet.columns.length) {
-    insertIndices(sheet.columns, 0, columns, MAX_COLUMNS);
-  }
-};
-var createSheet = ({ name, cells, ...size } = {}) => {
-  const sheet = (0, import_echo_schema.create)(import_chunk_NZARD7UP.SheetType, {
-    name,
-    cells: {},
-    rows: [],
-    columns: [],
-    rowMeta: {},
-    columnMeta: {},
-    ranges: []
-  });
-  initialize(sheet, size);
-  if (cells) {
-    Object.entries(cells).forEach(([key, { value }]) => {
-      const idx = addressToIndex(sheet, addressFromA1Notation(key));
-      sheet.cells[idx] = {
-        value
-      };
-    });
-  }
-  return sheet;
-};
-var addressToIndex = (sheet, cell) => {
-  return `${sheet.columns[cell.col]}@${sheet.rows[cell.row]}`;
-};
-var addressFromIndex = (sheet, idx) => {
-  const [column, row] = idx.split("@");
-  return {
-    col: sheet.columns.indexOf(column),
-    row: sheet.rows.indexOf(row)
-  };
-};
-var closest = (cursor, cells) => {
-  let closestCell2;
-  let closestDistance = Number.MAX_SAFE_INTEGER;
-  for (const cell of cells) {
-    const distance = Math.abs(cell.row - cursor.row) + Math.abs(cell.col - cursor.col);
-    if (distance < closestDistance) {
-      closestCell2 = cell;
-      closestDistance = distance;
+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;
     }
-  }
-  return closestCell2;
-};
-var compareIndexPositions = (sheet, indexA, indexB) => {
-  const { row: rowA, col: columnA } = addressFromIndex(sheet, indexA);
-  const { row: rowB, col: columnB } = addressFromIndex(sheet, indexB);
-  if (rowA !== rowB) {
-    return rowA - rowB;
-  } else {
-    return columnA - columnB;
-  }
-};
-var cellClassNameForRange = ({ key, value }) => {
-  switch (key) {
-    case "align":
-      switch (value) {
-        case "start":
-          return "text-start";
-        case "center":
-          return "text-center";
-        case "end":
-          return "text-end";
-        default:
-          return void 0;
-      }
-    case "comment":
-      return "bg-gridComment";
-    case "style":
-      switch (value) {
-        case "highlight":
-          return "bg-gridHighlight";
-        default:
-          return void 0;
-      }
-    default:
-      return void 0;
-  }
+  }, [
+    space,
+    registry
+  ]);
+  return graph;
 };
 var updateAllDecorations = import_state.StateEffect.define();
-var computeGraphFacet = (0, import_state2.singleValueFacet)();
+var computeGraphFacet = (0, import_react_ui_editor.singleValueFacet)();
 var highlightStyles = import_language2.HighlightStyle.define([
   // Function.
   {
@@ -310,7 +143,7 @@ var highlightStyles = import_language2.HighlightStyle.define([
     class: "text-unAccent"
   }
 ]);
-var languageFacet = (0, import_state3.singleValueFacet)();
+var languageFacet = (0, import_react_ui_editor2.singleValueFacet)();
 var sheetExtension = ({ functions = [] }) => {
   const { extension, language } = (0, import_codemirror_lang_spreadsheet.spreadsheet)({
     idiom: "en-US",
@@ -402,27 +235,29 @@ var sheetExtension = ({ functions = [] }) => {
     ])
   ];
 };
-var rangeExtension = (onInit) => {
+var rangeExtension = ({ onInit, onStateChange }) => {
   let view;
   let activeRange;
-  const provider = (range) => {
-    if (activeRange) {
-      view.dispatch(view.state.update({
-        changes: {
-          ...activeRange,
-          insert: range.toString()
-        },
-        selection: {
-          anchor: activeRange.from + range.length
-        }
-      }));
+  const notifier = {
+    setRange: (range) => {
+      if (activeRange) {
+        view.dispatch(view.state.update({
+          changes: {
+            ...activeRange,
+            insert: range.toString()
+          },
+          selection: {
+            anchor: activeRange.from + range.length
+          }
+        }));
+      }
+      view.focus();
     }
-    view.focus();
   };
   return import_view2.ViewPlugin.fromClass(class {
     constructor(_view) {
       view = _view;
-      onInit(provider);
+      onInit?.(notifier);
     }
     update(view2) {
       const { anchor } = view2.state.selection.ranges[0];
@@ -432,20 +267,18 @@ var rangeExtension = (onInit) => {
       visitTree(topNode, ({ type, from, to }) => {
         if (from <= anchor && to >= anchor) {
           switch (type.name) {
-            case "Function": {
+            case "Function":
               activeRange = {
                 from: to,
                 to
               };
               break;
-            }
-            case "CloseParen": {
+            case "CloseParen":
               activeRange = {
                 from,
                 to: from
               };
               break;
-            }
             case "RangeToken":
             case "CellToken":
               activeRange = {
@@ -458,11 +291,17 @@ var rangeExtension = (onInit) => {
         return false;
       });
       if (!activeRange && view2.state.doc.toString()[0] === "=") {
-        activeRange = {
-          from: 1,
-          to: view2.state.doc.toString().length
-        };
+        const str = view2.state.doc.sliceString(1);
+        if (import_chunk_QNFMTK3X.RANGE_NOTATION.test(str)) {
+          activeRange = {
+            from: 1,
+            to: str.length + 1
+          };
+        }
       }
+      onStateChange?.({
+        activeRange: activeRange ? view2.state.doc.sliceString(activeRange.from, activeRange.to) : void 0
+      });
     }
   });
 };
@@ -477,193 +316,7 @@ var visitTree = (node, callback) => {
   }
   return false;
 };
-var dxGridCellIndexToSheetCellAddress = (index) => {
-  const [colStr, rowStr] = index.split(",");
-  return {
-    col: parseInt(colStr),
-    row: parseInt(rowStr)
-  };
-};
-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);
-  if (rawValue === void 0 || rawValue === null) {
-    return {
-      value: ""
-    };
-  }
-  const ranges = model.sheet.ranges?.filter(({ range }) => inRange(range, address));
-  const type = model.getValueType(address);
-  const classNames = ranges?.map(cellClassNameForRange).reverse();
-  return {
-    value: (0, import_react_ui_data.parseValue)(type, rawValue),
-    className: (0, import_react_ui_theme2.mx)((0, import_react_ui_data.cellClassesForFieldType)(type), classNames)
-  };
-};
-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: "text-end !pie-1",
-  resizeHandle: "row"
-});
-var colLabelCell = (col) => ({
-  value: (0, import_react_ui_grid2.colToA1Notation)(col),
-  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 = (dxGridRef, model) => {
-  const [columns, setColumns] = (0, import_react5.useState)(createDxGridColumns(model));
-  const [rows, setRows] = (0, import_react5.useState)(createDxGridColumns(model));
-  (0, import_react5.useLayoutEffect)(() => {
-    const cellsAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
-      "cells"
-    ]);
-    if (dxGridRef.current) {
-      dxGridRef.current.getCells = cellGetter(model);
-    }
-    const handleCellsUpdate = () => {
-      dxGridRef.current?.requestUpdate("initialCells");
-    };
-    cellsAccessor.handle.addListener("change", handleCellsUpdate);
-    return () => cellsAccessor.handle.removeListener("change", handleCellsUpdate);
-  }, [
-    model
-  ]);
-  (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
-  ]);
-  return {
-    columns,
-    rows
-  };
-};
-var createDecorations = () => {
-  const { decorations } = (0, import_echo_schema2.create)({
-    decorations: {}
-  });
-  const addDecoration = (cellIndex, decorator) => {
-    decorations[cellIndex] = [
-      ...decorations[cellIndex] || [],
-      decorator
-    ];
-  };
-  const removeDecoration = (cellIndex, type) => {
-    if (type) {
-      decorations[cellIndex] = (decorations[cellIndex] || []).filter((d) => d.type !== type);
-    } else {
-      delete decorations[cellIndex];
-    }
-  };
-  const getDecorationsForCell = (cellIndex) => {
-    return decorations[cellIndex];
-  };
-  const getAllDecorations = () => {
-    const result = [];
-    for (const decoratorArray of Object.values(decorations)) {
-      for (const decorator of decoratorArray) {
-        result.push(decorator);
-      }
-    }
-    return result;
-  };
-  return {
-    addDecoration,
-    removeDecoration,
-    getDecorationsForCell,
-    getAllDecorations
-  };
-};
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/model/sheet-model.ts";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/model/sheet-model.ts";
 var typeMap = {
   BOOLEAN: import_schema.FieldValueType.Boolean,
   NUMBER_RAW: import_schema.FieldValueType.Number,
@@ -720,14 +373,14 @@ var SheetModel = class extends import_context.Resource {
     (0, import_log.log)("initialize", {
       id: this.id
     }, {
-      F: __dxlog_file2,
-      L: 106,
+      F: __dxlog_file,
+      L: 111,
       S: this,
       C: (f, a) => f(...a)
     });
-    initialize(this._sheet);
-    this._node = this._graph.getOrCreateNode((0, import_chunk_5XPK2V4A.createSheetName)({
-      type: (0, import_echo_schema3.getTypename)(this._sheet),
+    (0, import_chunk_QNFMTK3X.initialize)(this._sheet);
+    this._node = this._graph.getOrCreateNode((0, import_chunk_QNFMTK3X.createSheetName)({
+      type: (0, import_echo_schema.getTypename)(this._sheet),
       id: this._sheet.id
     }));
     await this._node.open();
@@ -742,8 +395,8 @@ var SheetModel = class extends import_context.Resource {
   */
   reset() {
     (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 126,
+      F: __dxlog_file,
+      L: 131,
       S: this,
       A: [
         "this._node",
@@ -753,16 +406,16 @@ var SheetModel = class extends import_context.Resource {
     this._node.graph.hf.clearSheet(this._node.sheetId);
     Object.entries(this._sheet.cells).forEach(([key, { value }]) => {
       (0, import_invariant3.invariant)(this._node, void 0, {
-        F: __dxlog_file2,
-        L: 129,
+        F: __dxlog_file,
+        L: 134,
         S: this,
         A: [
           "this._node",
           ""
         ]
       });
-      const { col, row } = addressFromIndex(this._sheet, key);
-      if (typeof value === "string" && value.charAt(0) === "=") {
+      const { col, row } = (0, import_chunk_QNFMTK3X.addressFromIndex)(this._sheet, key);
+      if ((0, import_chunk_QNFMTK3X.isFormula)(value)) {
         value = this._graph.mapFormulaToNative(this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value)));
       }
       this._node.graph.hf.setCellContents({
@@ -783,11 +436,11 @@ var SheetModel = class extends import_context.Resource {
     this._node?.graph.hf.rebuildAndRecalculate();
   }
   insertRows(i, n = 1) {
-    insertIndices(this._sheet.rows, i, n, MAX_ROWS);
+    (0, import_chunk_QNFMTK3X.insertIndices)(this._sheet.rows, i, n, import_chunk_QNFMTK3X.MAX_ROWS);
     this.reset();
   }
   insertColumns(i, n = 1) {
-    insertIndices(this._sheet.columns, i, n, MAX_COLUMNS);
+    (0, import_chunk_QNFMTK3X.insertIndices)(this._sheet.columns, i, n, import_chunk_QNFMTK3X.MAX_COLUMNS);
     this.reset();
   }
   //
@@ -799,8 +452,8 @@ var SheetModel = class extends import_context.Resource {
   */
   clear(range) {
     (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 171,
+      F: __dxlog_file,
+      L: 176,
       S: this,
       A: [
         "this._node",
@@ -811,14 +464,14 @@ var SheetModel = class extends import_context.Resource {
     const values = this._iterRange(range, () => null);
     this._node.graph.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
     this._iterRange(range, (cell) => {
-      const idx = addressToIndex(this._sheet, cell);
+      const idx = (0, import_chunk_QNFMTK3X.addressToIndex)(this._sheet, cell);
       delete this._sheet.cells[idx];
     });
   }
   cut(range) {
     (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 182,
+      F: __dxlog_file,
+      L: 187,
       S: this,
       A: [
         "this._node",
@@ -827,14 +480,14 @@ var SheetModel = class extends import_context.Resource {
     });
     this._node.graph.hf.cut(toModelRange(this._node.sheetId, range));
     this._iterRange(range, (cell) => {
-      const idx = addressToIndex(this._sheet, cell);
+      const idx = (0, import_chunk_QNFMTK3X.addressToIndex)(this._sheet, cell);
       delete this._sheet.cells[idx];
     });
   }
   copy(range) {
     (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 191,
+      F: __dxlog_file,
+      L: 196,
       S: this,
       A: [
         "this._node",
@@ -845,8 +498,8 @@ var SheetModel = class extends import_context.Resource {
   }
   paste(cell) {
     (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 196,
+      F: __dxlog_file,
+      L: 201,
       S: this,
       A: [
         "this._node",
@@ -858,7 +511,7 @@ var SheetModel = class extends import_context.Resource {
       for (const change of changes) {
         if (change instanceof import_hyperformula.ExportedCellChange) {
           const { address, newValue } = change;
-          const idx = addressToIndex(this._sheet, {
+          const idx = (0, import_chunk_QNFMTK3X.addressToIndex)(this._sheet, {
             row: address.row,
             col: address.col
           });
@@ -872,8 +525,8 @@ var SheetModel = class extends import_context.Resource {
   // TODO(burdon): Display undo/redo state.
   undo() {
     (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 211,
+      F: __dxlog_file,
+      L: 216,
       S: this,
       A: [
         "this._node",
@@ -886,8 +539,8 @@ var SheetModel = class extends import_context.Resource {
   }
   redo() {
     (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 219,
+      F: __dxlog_file,
+      L: 224,
       S: this,
       A: [
         "this._node",
@@ -902,7 +555,7 @@ var SheetModel = class extends import_context.Resource {
   * Get value from sheet.
   */
   getCellValue(cell) {
-    const idx = addressToIndex(this._sheet, cell);
+    const idx = (0, import_chunk_QNFMTK3X.addressToIndex)(this._sheet, cell);
     return this._sheet.cells[idx]?.value ?? null;
   }
   /**
@@ -913,7 +566,7 @@ var SheetModel = class extends import_context.Resource {
     if (value == null) {
       return void 0;
     }
-    if (typeof value === "string" && value.charAt(0) === "=") {
+    if ((0, import_chunk_QNFMTK3X.isFormula)(value)) {
       return this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value));
     } else {
       return String(value);
@@ -930,8 +583,8 @@ var SheetModel = class extends import_context.Resource {
   */
   getValue(cell) {
     (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 262,
+      F: __dxlog_file,
+      L: 267,
       S: this,
       A: [
         "this._node",
@@ -949,8 +602,8 @@ var SheetModel = class extends import_context.Resource {
   */
   getValueType(cell) {
     (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 275,
+      F: __dxlog_file,
+      L: 280,
       S: this,
       A: [
         "this._node",
@@ -966,8 +619,8 @@ var SheetModel = class extends import_context.Resource {
   */
   setValue(cell, value) {
     (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 285,
+      F: __dxlog_file,
+      L: 290,
       S: this,
       A: [
         "this._node",
@@ -975,15 +628,15 @@ var SheetModel = class extends import_context.Resource {
       ]
     });
     if (this._options.readonly) {
-      throw new ReadonlyException();
+      throw new import_chunk_QNFMTK3X.ReadonlyException();
     }
     let refresh = false;
     if (cell.row >= this._sheet.rows.length) {
-      insertIndices(this._sheet.rows, cell.row, 1, MAX_ROWS);
+      (0, import_chunk_QNFMTK3X.insertIndices)(this._sheet.rows, cell.row, 1, import_chunk_QNFMTK3X.MAX_ROWS);
       refresh = true;
     }
     if (cell.col >= this._sheet.columns.length) {
-      insertIndices(this._sheet.columns, cell.col, 1, MAX_COLUMNS);
+      (0, import_chunk_QNFMTK3X.insertIndices)(this._sheet.columns, cell.col, 1, import_chunk_QNFMTK3X.MAX_COLUMNS);
       refresh = true;
     }
     if (refresh) {
@@ -995,14 +648,14 @@ var SheetModel = class extends import_context.Resource {
       col: cell.col
     }, [
       [
-        typeof value === "string" && value.charAt(0) === "=" ? this._graph.mapFormulaToNative(value) : value
+        (0, import_chunk_QNFMTK3X.isFormula)(value) ? this._graph.mapFormulaToNative(value) : value
       ]
     ]);
-    const idx = addressToIndex(this._sheet, cell);
+    const idx = (0, import_chunk_QNFMTK3X.addressToIndex)(this._sheet, cell);
     if (value === void 0 || value === null) {
       delete this._sheet.cells[idx];
     } else {
-      if (typeof value === "string" && value.charAt(0) === "=") {
+      if ((0, import_chunk_QNFMTK3X.isFormula)(value)) {
         value = this._graph.mapFunctionBindingToId(this.mapFormulaRefsToIndices(value));
       }
       this._sheet.cells[idx] = {
@@ -1015,7 +668,7 @@ var SheetModel = class extends import_context.Resource {
   */
   setValues(values) {
     Object.entries(values).forEach(([key, { value }]) => {
-      this.setValue(addressFromA1Notation(key), value);
+      this.setValue((0, import_chunk_QNFMTK3X.addressFromA1Notation)(key), value);
     });
   }
   /**
@@ -1062,34 +715,34 @@ var SheetModel = class extends import_context.Resource {
   * Map from A1 notation to indices.
   */
   mapFormulaRefsToIndices(formula) {
-    (0, import_invariant3.invariant)(formula.charAt(0) === "=", void 0, {
-      F: __dxlog_file2,
-      L: 374,
+    (0, import_invariant3.invariant)((0, import_chunk_QNFMTK3X.isFormula)(formula), void 0, {
+      F: __dxlog_file,
+      L: 379,
       S: this,
       A: [
-        "formula.charAt(0) === '='",
+        "isFormula(formula)",
         ""
       ]
     });
     return formula.replace(/([a-zA-Z]+)([0-9]+)/g, (match) => {
-      return addressToIndex(this._sheet, addressFromA1Notation(match));
+      return (0, import_chunk_QNFMTK3X.addressToIndex)(this._sheet, (0, import_chunk_QNFMTK3X.addressFromA1Notation)(match));
     });
   }
   /**
   * Map from indices to A1 notation.
   */
   mapFormulaIndicesToRefs(formula) {
-    (0, import_invariant3.invariant)(formula.charAt(0) === "=", void 0, {
-      F: __dxlog_file2,
-      L: 384,
+    (0, import_invariant3.invariant)((0, import_chunk_QNFMTK3X.isFormula)(formula), void 0, {
+      F: __dxlog_file,
+      L: 389,
       S: this,
       A: [
-        "formula.charAt(0) === '='",
+        "isFormula(formula)",
         ""
       ]
     });
     return formula.replace(/([a-zA-Z0-9]+)@([a-zA-Z0-9]+)/g, (idx) => {
-      return addressToA1Notation(addressFromIndex(this._sheet, idx));
+      return (0, import_chunk_QNFMTK3X.addressToA1Notation)((0, import_chunk_QNFMTK3X.addressFromIndex)(this._sheet, idx));
     });
   }
   //
@@ -1106,8 +759,8 @@ var SheetModel = class extends import_context.Resource {
   }
   toDateTime(num) {
     (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 405,
+      F: __dxlog_file,
+      L: 410,
       S: this,
       A: [
         "this._node",
@@ -1118,8 +771,8 @@ var SheetModel = class extends import_context.Resource {
   }
   toDate(num) {
     (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 410,
+      F: __dxlog_file,
+      L: 415,
       S: this,
       A: [
         "this._node",
@@ -1130,8 +783,8 @@ var SheetModel = class extends import_context.Resource {
   }
   toTime(num) {
     (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 415,
+      F: __dxlog_file,
+      L: 420,
       S: this,
       A: [
         "this._node",
@@ -1142,8 +795,8 @@ var SheetModel = class extends import_context.Resource {
   }
 };
 var useSheetModel = (graph, sheet, { readonly } = {}) => {
-  const [model, setModel] = (0, import_react6.useState)();
-  (0, import_react6.useEffect)(() => {
+  const [model, setModel] = (0, import_react3.useState)();
+  (0, import_react3.useEffect)(() => {
     if (!graph || !sheet) {
       return;
     }
@@ -1166,167 +819,339 @@ var useSheetModel = (graph, sheet, { readonly } = {}) => {
   ]);
   return model;
 };
-var useUpdateFocusedCellOnThreadSelection = (model, grid) => {
-  const handleScrollIntoView = (0, import_react7.useCallback)(({ action, data }) => {
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/components/SheetContext/SheetContext.tsx";
+var SheetContext = /* @__PURE__ */ (0, import_react2.createContext)(void 0);
+var useSheetContext = () => {
+  const context = (0, import_react2.useContext)(SheetContext);
+  (0, import_invariant2.invariant)(context, void 0, {
+    F: __dxlog_file2,
+    L: 52,
+    S: void 0,
+    A: [
+      "context",
+      ""
+    ]
+  });
+  return context;
+};
+var SheetProviderImpl = ({ model, onInfo, children, __gridScope }) => {
+  const { id, editing, setEditing } = (0, import_react_ui_grid.useGridContext)("SheetProvider", __gridScope);
+  const [cursor, setCursorInternal] = (0, import_react2.useState)();
+  const [range, setRangeInternal] = (0, import_react2.useState)();
+  const [cursorFallbackRange, setCursorFallbackRange] = (0, import_react2.useState)();
+  const [activeRefs, setActiveRefs] = (0, import_react2.useState)("");
+  const setCursor = (0, import_react2.useCallback)((nextCursor) => {
+    setCursorInternal(nextCursor);
+    setCursorFallbackRange(range?.to ? range : nextCursor ? {
+      from: nextCursor,
+      to: nextCursor
+    } : void 0);
+  }, [
+    range
+  ]);
+  const setRange = (0, import_react2.useCallback)((nextRange) => {
+    setRangeInternal(nextRange);
+    setCursorFallbackRange(nextRange?.to ? nextRange : cursor ? {
+      from: cursor,
+      to: cursor
+    } : void 0);
+  }, [
+    cursor
+  ]);
+  return /* @__PURE__ */ import_react2.default.createElement(SheetContext.Provider, {
+    value: {
+      id,
+      model,
+      editing,
+      setEditing,
+      cursor,
+      setCursor,
+      range,
+      setRange,
+      cursorFallbackRange,
+      activeRefs,
+      setActiveRefs,
+      // TODO(burdon): Change to event.
+      onInfo
+    }
+  }, children);
+};
+var SheetProvider = ({ children, graph, sheet, readonly, onInfo }) => {
+  const model = useSheetModel(graph, sheet, {
+    readonly
+  });
+  return !model ? null : /* @__PURE__ */ import_react2.default.createElement(import_react_ui_grid.Grid.Root, {
+    id: (0, import_echo.fullyQualifiedId)(sheet)
+  }, /* @__PURE__ */ import_react2.default.createElement(SheetProviderImpl, {
+    model,
+    onInfo
+  }, children));
+};
+var RangeList = ({ sheet, onSelect, onDelete }) => {
+  return /* @__PURE__ */ import_react8.default.createElement("div", {
+    className: "flex flex-col"
+  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui_list.List.Root, {
+    items: sheet.ranges,
+    isItem: import_echo_schema2.S.is(import_chunk_V7E5JZBD.Range)
+  }, ({ items }) => items.map((item, i) => /* @__PURE__ */ import_react8.default.createElement(import_react_ui_list.List.Item, {
+    key: i,
+    item,
+    classNames: [
+      "p-2",
+      import_react_ui_theme3.ghostHover
+    ]
+  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui_list.List.ItemDragHandle, null), /* @__PURE__ */ import_react8.default.createElement(import_react_ui_list.List.ItemTitle, {
+    onClick: () => onSelect?.(item)
+  }, (0, import_chunk_QNFMTK3X.rangeToA1Notation)((0, import_chunk_QNFMTK3X.rangeFromIndex)(sheet, item.range))), onDelete && /* @__PURE__ */ import_react8.default.createElement(import_react_ui_list.List.ItemDeleteButton, {
+    onClick: () => onDelete(item)
+  })))));
+};
+var SheetContainer = (0, import_react7.lazy)(() => import("./SheetContainer-L37HUFCF.cjs"));
+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 handleScrollIntoView = (0, import_react6.useCallback)(({ action, data }) => {
     switch (action) {
       case import_app_framework.LayoutAction.SCROLL_INTO_VIEW: {
-        if (!data?.id || data?.cursor === void 0 || data?.id !== (0, import_echo2.fullyQualifiedId)(model.sheet)) {
+        if (!data?.id || data?.cursor === void 0 || data?.id !== (0, import_echo3.fullyQualifiedId)(model.sheet)) {
           return;
         }
-        const cellAddress = addressFromIndex(model.sheet, data.cursor);
-        grid.current?.setFocus({
-          ...cellAddress,
+        setActiveRefs(data.thread);
+        const range = parseThreadAnchorAsCellRange(data.cursor);
+        range && grid.current?.setFocus({
+          ...range.to,
           plane: "grid"
         }, true);
       }
     }
   }, [
-    model.sheet
+    model.sheet,
+    setActiveRefs
   ]);
   (0, import_app_framework.useIntentResolver)(import_chunk_QIFIGEKV.SHEET_PLUGIN, handleScrollIntoView);
 };
-var useSelectThreadOnCellFocus = (model, cursor) => {
+var useSelectThreadOnCellFocus = () => {
+  const { model, cursor } = useSheetContext();
   const dispatch = (0, import_app_framework.useIntentDispatcher)();
-  const activeThreads = (0, import_react7.useMemo)(() => model.sheet.threads?.filter((thread) => !!thread && thread.status === "active") ?? [], [
+  const threads = (0, import_react6.useMemo)(() => model.sheet.threads?.filter((thread) => !!thread) ?? [], [
     // TODO(thure): Surely we can find a better dependency for this…
     JSON.stringify(model.sheet.threads)
   ]);
-  const activeThreadAddresses = (0, import_react7.useMemo)(() => activeThreads.map((thread) => thread.anchor).filter((anchor) => anchor !== void 0).map((anchor) => addressFromIndex(model.sheet, anchor)), [
-    activeThreads,
-    model.sheet
-  ]);
-  const selectClosestThread = (0, import_react7.useCallback)((cellAddress) => {
-    if (!cellAddress || !activeThreads) {
+  const selectClosestThread = (0, import_react6.useCallback)((cellAddress) => {
+    if (!cellAddress || !threads) {
       return;
     }
-    const closestThreadAnchor = closest(cellAddress, activeThreadAddresses);
-    if (closestThreadAnchor) {
-      const closestThread = activeThreads.find((thread) => thread && thread.anchor === addressToIndex(model.sheet, closestThreadAnchor));
-      if (closestThread) {
-        void dispatch([
-          {
-            action: "dxos.org/plugin/thread/action/select",
-            data: {
-              current: (0, import_echo2.fullyQualifiedId)(closestThread)
-            }
-          }
-        ]);
+    const closestThread = threads?.find(({ anchor }) => {
+      if (anchor) {
+        const range = parseThreadAnchorAsCellRange(anchor);
+        return range ? (0, import_chunk_QNFMTK3X.inRange)(range, cellAddress) : false;
+      } else {
+        return false;
       }
+    });
+    if (closestThread) {
+      void dispatch([
+        {
+          action: "dxos.org/plugin/thread/action/select",
+          data: {
+            current: (0, import_echo3.fullyQualifiedId)(closestThread)
+          }
+        }
+      ]);
     }
   }, [
     dispatch,
-    activeThreads,
-    activeThreadAddresses,
-    model.sheet
+    threads
   ]);
-  const debounced = (0, import_react7.useMemo)(() => {
+  const debounced = (0, import_react6.useMemo)(() => {
     return (0, import_async3.debounce)((cellCoords) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
   }, [
     selectClosestThread
   ]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!cursor) {
       return;
     }
     debounced(cursor);
   }, [
     cursor,
-    selectClosestThread
+    debounced
   ]);
 };
-var createThreadDecoration = (cellIndex, threadId, sheetId) => {
+var dxGridCellIndexToSheetCellAddress = (index) => {
+  const [colStr, rowStr] = index.split(",");
   return {
-    type: "comment",
-    classNames: [
-      "bg-greenFill"
-    ],
-    cellIndex
+    col: parseInt(colStr),
+    row: parseInt(rowStr)
   };
 };
-var useThreadDecorations = (model, decorations) => {
-  const sheet = (0, import_react7.useMemo)(() => model.sheet, [
-    model.sheet
-  ]);
-  const sheetId = (0, import_react7.useMemo)(() => (0, import_echo2.fullyQualifiedId)(sheet), [
-    sheet
-  ]);
-  (0, import_react7.useEffect)(() => {
-    const unsubscribe = (0, import_signals_core.effect)(() => {
-      const activeThreadAnchors = /* @__PURE__ */ new Set();
-      if (!sheet.threads) {
-        return;
-      }
-      for (const thread of sheet.threads) {
-        if (!thread || thread.anchor === void 0 || thread.status === "resolved") {
-          continue;
-        }
-        activeThreadAnchors.add(thread.anchor);
-        const index = thread.anchor;
-        const existingDecorations = decorations.getDecorationsForCell(index);
-        if (!existingDecorations || !existingDecorations.some((d) => d.type === "comment")) {
-          decorations.addDecoration(index, createThreadDecoration(index, thread.id, sheetId));
-        }
-      }
-      for (const decoration of decorations.getAllDecorations()) {
-        if (decoration.type !== "comment") {
-          continue;
-        }
-        if (!activeThreadAnchors.has(decoration.cellIndex)) {
-          decorations.removeDecoration(decoration.cellIndex, "comment");
-        }
-      }
-    });
-    return () => unsubscribe();
+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 __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/components/SheetContext/SheetContext.tsx";
-var SheetContext = /* @__PURE__ */ (0, import_react8.createContext)(void 0);
-var useSheetContext = () => {
-  const context = (0, import_react8.useContext)(SheetContext);
-  (0, import_invariant4.invariant)(context, void 0, {
-    F: __dxlog_file3,
-    L: 45,
-    S: void 0,
-    A: [
-      "context",
-      ""
-    ]
+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: {}
   });
-  return context;
 };
-var SheetProviderImpl = ({ model, onInfo, children, __gridScope }) => {
-  const { id, editing, setEditing } = (0, import_react_ui_grid3.useGridContext)("SheetProvider", __gridScope);
-  const decorations = (0, import_react8.useMemo)(() => createDecorations(), []);
-  const [cursor, setCursor] = (0, import_react8.useState)();
-  const [range, setRange] = (0, import_react8.useState)();
-  useSelectThreadOnCellFocus(model, cursor);
-  useThreadDecorations(model, decorations);
-  return /* @__PURE__ */ import_react8.default.createElement(SheetContext.Provider, {
-    value: {
-      id,
-      model,
-      editing,
-      setEditing,
-      cursor,
-      setCursor,
-      range,
-      setRange,
-      // TODO(burdon): Change to event.
-      onInfo,
-      decorations
+var projectCellProps = (model, col, row) => {
+  const address = {
+    col,
+    row
+  };
+  const rawValue = model.getValue(address);
+  const ranges = model.sheet.ranges?.filter(({ range }) => (0, import_chunk_QNFMTK3X.inRange)((0, import_chunk_QNFMTK3X.rangeFromIndex)(model.sheet, range), address));
+  const threadRefs = model.sheet.threads?.filter((thread) => {
+    const range = thread?.anchor && parseThreadAnchorAsCellRange(thread.anchor);
+    return thread && range ? (0, import_chunk_QNFMTK3X.inRange)(range, address) : false;
+  }).map((thread) => (0, import_echo2.fullyQualifiedId)(thread)).join(" ");
+  const type = model.getValueType(address);
+  const classNames = ranges?.map(import_chunk_QNFMTK3X.cellClassNameForRange).reverse();
+  return {
+    value: (0, import_react_ui_data.parseValue)(type, rawValue),
+    className: (0, import_react_ui_theme2.mx)((0, import_react_ui_data.cellClassesForFieldType)(type), threadRefs && import_react_ui_grid3.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_grid3.rowToA1Notation)(row),
+  className: "text-end !pie-1",
+  resizeHandle: "row"
+});
+var colLabelCell = (col) => ({
+  value: (0, import_react_ui_grid3.colToA1Notation)(col),
+  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 {};
     }
-  }, children);
+  };
 };
-var SheetProvider = ({ children, graph, sheet, readonly, onInfo }) => {
-  const model = useSheetModel(graph, sheet, {
-    readonly
-  });
-  return !model ? null : /* @__PURE__ */ import_react8.default.createElement(import_react_ui_grid3.Grid.Root, {
-    id: (0, import_echo3.fullyQualifiedId)(sheet)
-  }, /* @__PURE__ */ import_react8.default.createElement(SheetProviderImpl, {
-    model,
-    onInfo
-  }, children));
+var useSheetModelDxGridProps = (dxGridRef, model) => {
+  const [columns, setColumns] = (0, import_react5.useState)(createDxGridColumns(model));
+  const [rows, setRows] = (0, import_react5.useState)(createDxGridColumns(model));
+  (0, import_react5.useLayoutEffect)(() => {
+    const cellsAccessor = (0, import_echo2.createDocAccessor)(model.sheet, [
+      "cells"
+    ]);
+    if (dxGridRef.current) {
+      dxGridRef.current.getCells = cellGetter(model);
+    }
+    const handleCellsUpdate = () => {
+      dxGridRef.current?.requestUpdate("initialCells");
+    };
+    cellsAccessor.handle.addListener("change", handleCellsUpdate);
+    return () => cellsAccessor.handle.removeListener("change", handleCellsUpdate);
+  }, [
+    model
+  ]);
+  (0, import_react5.useEffect)(() => {
+    const columnMetaAccessor = (0, import_echo2.createDocAccessor)(model.sheet, [
+      "columnMeta"
+    ]);
+    const rowMetaAccessor = (0, import_echo2.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
+  ]);
+  return {
+    columns,
+    rows
+  };
+};
+var inertPosition = {
+  plane: "grid",
+  col: 0,
+  row: 0
 };
 var initialCells = {
   grid: {},
@@ -1368,13 +1193,14 @@ var sheetColDefault = {
   }
 };
 var GridSheet = () => {
-  const { id, model, editing, setEditing, setCursor, setRange, range, cursor } = useSheetContext();
+  const { t } = (0, import_react_ui.useTranslation)(import_chunk_QIFIGEKV.SHEET_PLUGIN);
+  const { id, model, editing, setEditing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs } = useSheetContext();
   const dxGrid = (0, import_react4.useRef)(null);
-  const rangeNotifier = (0, import_react4.useRef)();
+  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);
+      const cell = (0, import_react_ui_grid2.closestCell)(event.target);
       if (cell && cell.plane === "grid") {
         setCursor({
           col: cell.col,
@@ -1406,8 +1232,16 @@ var GridSheet = () => {
     dxGrid.current?.refocus(axis, delta);
   }, [
     model,
-    editing,
-    setEditing
+    editing
+  ]);
+  const handleBlur = (0, import_react4.useCallback)((value) => {
+    if (value !== void 0) {
+      model.setValue(dxGridCellIndexToSheetCellAddress(editing.index), value);
+    }
+    setEditing(null);
+  }, [
+    model,
+    editing
   ]);
   const handleAxisResize = (0, import_react4.useCallback)(({ axis, size, index: numericIndex }) => {
     if (axis === "row") {
@@ -1423,22 +1257,22 @@ var GridSheet = () => {
     model
   ]);
   const handleSelect = (0, import_react4.useCallback)(({ minCol, maxCol, minRow, maxRow }) => {
-    const range2 = {
+    const range = {
       from: {
         col: minCol,
         row: minRow
       }
     };
     if (minCol !== maxCol || minRow !== maxRow) {
-      range2.to = {
+      range.to = {
         col: maxCol,
         row: maxRow
       };
     }
     if (editing) {
-      rangeNotifier.current?.(rangeToA1Notation(range2));
+      rangeController.current?.setRange((0, import_chunk_QNFMTK3X.rangeToA1Notation)(range));
     } else {
-      setRange(range2.to ? range2 : void 0);
+      setRange(range.to ? range : void 0);
     }
   }, [
     editing
@@ -1451,10 +1285,6 @@ var GridSheet = () => {
     hasAttention
   ]);
   const handleKeyDown = (0, import_react4.useCallback)((event) => {
-    const cursorFallbackRange = range ?? cursor ? {
-      from: cursor,
-      to: cursor
-    } : null;
     switch (event.key) {
       case "Backspace":
       case "Delete":
@@ -1485,13 +1315,37 @@ var GridSheet = () => {
       }
     }
   }, [
-    range,
+    cursorFallbackRange,
     model,
     cursor
   ]);
+  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_grid2.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 "add-before":
+      case "add-after":
+        model[contextMenuAxis === "col" ? "insertColumns" : "insertRows"](contextMenuOpen[contextMenuAxis] + (operation === "add-before" ? 0 : 1), 1);
+        break;
+      case "remove":
+    }
+  }, [
+    contextMenuAxis,
+    contextMenuOpen,
+    model
+  ]);
   const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
   const extension = (0, import_react4.useMemo)(() => [
-    (0, import_react_ui_grid.editorKeys)({
+    (0, import_react_ui_grid2.editorKeys)({
       onClose: handleClose,
       ...editing?.initialContent && {
         onNav: handleClose
@@ -1500,7 +1354,14 @@ var GridSheet = () => {
     sheetExtension({
       functions: model.graph.getFunctions()
     }),
-    rangeExtension((fn) => rangeNotifier.current = fn)
+    rangeExtension({
+      onInit: (fn) => rangeController.current = fn,
+      onStateChange: (state) => {
+        if (dxGrid.current) {
+          dxGrid.current.mode = typeof state.activeRange === "undefined" ? "edit" : "edit-select";
+        }
+      }
+    })
   ], [
     model,
     handleClose,
@@ -1512,14 +1373,16 @@ var GridSheet = () => {
   }, [
     model
   ]);
-  useUpdateFocusedCellOnThreadSelection(model, dxGrid);
-  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui_grid.GridCellEditor, {
+  useUpdateFocusedCellOnThreadSelection(dxGrid);
+  useSelectThreadOnCellFocus();
+  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui_grid2.GridCellEditor, {
     getCellContent,
-    extension
-  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui_grid.Grid.Content, {
+    extension,
+    onBlur: handleBlur
+  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui_grid2.Grid.Content, {
     initialCells,
-    limitColumns: DEFAULT_COLUMNS,
-    limitRows: DEFAULT_ROWS,
+    limitColumns: import_chunk_QNFMTK3X.DEFAULT_COLUMNS,
+    limitRows: import_chunk_QNFMTK3X.DEFAULT_ROWS,
     columns,
     rows,
     onAxisResize: handleAxisResize,
@@ -1530,40 +1393,49 @@ var GridSheet = () => {
     onFocus: handleFocus,
     onWheelCapture: handleWheel,
     onKeyDown: handleKeyDown,
+    onContextMenu: handleContextMenu,
     overscroll: "inline",
     className: "[--dx-grid-base:var(--surface-bg)]",
+    activeRefs,
     ref: dxGrid
-  }));
-};
-var SheetContainer = (0, import_react3.lazy)(() => import("./SheetContainer-N5IQGEFL.cjs"));
-var useComputeGraph = (space) => {
-  const { registry } = (0, import_react2.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;
+  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui.DropdownMenu.Root, {
+    modal: false,
+    open: !!contextMenuOpen,
+    onOpenChange: (nextOpen) => setContextMenuOpen(nextOpen ? inertPosition : null)
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui.DropdownMenu.VirtualTrigger, {
+    virtualRef: contextMenuAnchorRef
+  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui.DropdownMenu.Content, {
+    side: contextMenuAxis === "col" ? "bottom" : "right",
+    sideOffset: 4,
+    collisionPadding: 8
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui.DropdownMenu.Item, {
+    onClick: () => handleAxisMenuAction("add-before")
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui.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_ui.DropdownMenu.Item, {
+    onClick: () => handleAxisMenuAction("add-after")
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui.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_ui.DropdownMenu.Item, {
+    disabled: true,
+    onClick: () => handleAxisMenuAction("remove")
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui.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_ui.DropdownMenu.Arrow, null))));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ComputeGraphContextProvider,
   GridSheet,
+  RangeList,
   SheetContainer,
   SheetProvider,
-  addressToA1Notation,
-  addressToIndex,
-  compareIndexPositions,
+  completeCellRangeToThreadCursor,
   computeGraphFacet,
-  createSheet,
-  inRange,
-  rangeToA1Notation,
   useComputeGraph,
   useSheetContext
 });
-//# sourceMappingURL=chunk-53BMSUIK.cjs.map
+//# sourceMappingURL=chunk-7AWAC3R3.cjs.map