@dxos/plugin-sheet 0.6.12-main.f9d0246 → 0.6.12-staging.0b4bb48

package/dist/lib/node/{chunk-6DQABRGJ.cjs → SheetContainer-AXQV3ZT5.cjs}

@@ -26,64 +26,38 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var chunk_6DQABRGJ_exports = {};
-__export(chunk_6DQABRGJ_exports, {
-  ComputeGraphContextProvider: () => ComputeGraphContextProvider,
-  Sheet: () => Sheet,
-  SheetContainer: () => SheetContainer,
-  addressToIndex: () => addressToIndex,
-  compareIndexPositions: () => compareIndexPositions,
-  createSheet: () => createSheet,
-  useComputeGraph: () => useComputeGraph,
-  useSheetContext: () => useSheetContext
+var SheetContainer_AXQV3ZT5_exports = {};
+__export(SheetContainer_AXQV3ZT5_exports, {
+  default: () => SheetContainer_default
 });
-module.exports = __toCommonJS(chunk_6DQABRGJ_exports);
-var import_chunk_AOP42UAA = require("./chunk-AOP42UAA.cjs");
-var import_chunk_BNARJ5GM = require("./chunk-BNARJ5GM.cjs");
-var import_chunk_P5QYYEHQ = require("./chunk-P5QYYEHQ.cjs");
+module.exports = __toCommonJS(SheetContainer_AXQV3ZT5_exports);
+var import_chunk_CN3RPESU = require("./chunk-CN3RPESU.cjs");
+var import_chunk_5KKJ4NPP = require("./chunk-5KKJ4NPP.cjs");
+var import_chunk_DSYKOI4E = require("./chunk-DSYKOI4E.cjs");
+var import_chunk_BJ6ZD7MN = require("./chunk-BJ6ZD7MN.cjs");
+var import_react = __toESM(require("react"));
+var import_react_ui_theme = require("@dxos/react-ui-theme");
 var import_core = require("@dnd-kit/core");
 var import_modifiers = require("@dnd-kit/modifiers");
 var import_utilities = require("@dnd-kit/utilities");
-var import_react = require("@phosphor-icons/react");
+var import_react2 = require("@phosphor-icons/react");
 var import_re_resizable = require("re-resizable");
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_react_resize_detector = require("react-resize-detector");
 var import_async = require("@dxos/async");
 var import_echo = require("@dxos/client/echo");
 var import_log = require("@dxos/log");
 var import_react_ui_attention = require("@dxos/react-ui-attention");
-var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_react3 = require("react");
-var import_invariant = require("@dxos/invariant");
-var import_crypto = require("@dxos/crypto");
-var import_echo_schema = require("@dxos/echo-schema");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var import_react4 = require("react");
-var import_react5 = __toESM(require("react"));
-var import_invariant2 = require("@dxos/invariant");
-var import_echo_schema2 = require("@dxos/echo-schema");
-var import_react6 = require("react");
-var import_debug = require("@dxos/debug");
-var import_react_hooks = require("@dxos/react-hooks");
-var import_react7 = __toESM(require("react"));
-var import_react8 = __toESM(require("react"));
-var import_react9 = require("react");
-var import_async2 = require("@dxos/async");
-var import_context = require("@dxos/context");
-var import_invariant3 = require("@dxos/invariant");
-var import_keys = require("@dxos/keys");
-var import_log2 = require("@dxos/log");
-var import_hyperformula = require("#hyperformula");
-var import_react10 = require("react");
-var import_signals_core = require("@preact/signals-core");
-var import_react11 = __toESM(require("react"));
-var import_app_framework = require("@dxos/app-framework");
-var import_async3 = require("@dxos/async");
+var import_react5 = require("react");
+var import_react6 = __toESM(require("react"));
+var import_invariant = require("@dxos/invariant");
 var import_echo2 = require("@dxos/react-client/echo");
-var import_react_ui = require("@dxos/react-ui");
 var import_view = require("@codemirror/view");
-var import_react12 = __toESM(require("react"));
-var import_react_ui2 = require("@dxos/react-ui");
+var import_react7 = __toESM(require("react"));
+var import_react_ui = require("@dxos/react-ui");
 var import_react_ui_editor = require("@dxos/react-ui-editor");
 var import_autocomplete = require("@codemirror/autocomplete");
 var import_language = require("@codemirror/language");
@@ -91,164 +65,7 @@ var import_state = require("@codemirror/state");
 var import_view2 = require("@codemirror/view");
 var import_highlight = require("@lezer/highlight");
 var import_codemirror_lang_spreadsheet = require("codemirror-lang-spreadsheet");
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-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_AOP42UAA.SheetType, {
-    name,
-    cells: {},
-    rows: [],
-    columns: [],
-    rowMeta: {},
-    columnMeta: {},
-    formatting: {}
-  });
-  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 rangeFromIndex = (sheet, idx) => {
-  const [from, to] = idx.split(":").map((index) => addressFromIndex(sheet, index));
-  return {
-    from,
-    to
-  };
-};
-var closest = (cursor, cells) => {
-  let closestCell;
-  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) {
-      closestCell = cell;
-      closestDistance = distance;
-    }
-  }
-  return closestCell;
-};
-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 import_react_ui_theme3 = require("@dxos/react-ui-theme");
 var axisWidth = "calc(var(--rail-size)-2px)";
 var axisHeight = 34;
 var minWidth = 40;
@@ -259,8 +76,8 @@ var defaultWidth = 200;
 var defaultHeight = minHeight;
 var CELL_DATA_KEY = "cell";
 var useGridLayout = ({ scroller, size, rows, columns, rowSizes, columnSizes }) => {
-  const [rowPositions, setRowPositions] = (0, import_react3.useState)([]);
-  (0, import_react3.useEffect)(() => {
+  const [rowPositions, setRowPositions] = (0, import_react4.useState)([]);
+  (0, import_react4.useEffect)(() => {
     if (!rowSizes) {
       return;
     }
@@ -279,8 +96,8 @@ var useGridLayout = ({ scroller, size, rows, columns, rowSizes, columnSizes }) =
     rows,
     rowSizes
   ]);
-  const [columnPositions, setColumnPositions] = (0, import_react3.useState)([]);
-  (0, import_react3.useEffect)(() => {
+  const [columnPositions, setColumnPositions] = (0, import_react4.useState)([]);
+  (0, import_react4.useEffect)(() => {
     if (!columns) {
       return;
     }
@@ -290,7 +107,7 @@ var useGridLayout = ({ scroller, size, rows, columns, rowSizes, columnSizes }) =
       const left = x;
       x += width2 - 1;
       return {
-        col: i,
+        column: i,
         left,
         width: width2
       };
@@ -301,11 +118,11 @@ var useGridLayout = ({ scroller, size, rows, columns, rowSizes, columnSizes }) =
   ]);
   const height = rowPositions.length ? rowPositions[rowPositions.length - 1].top + rowPositions[rowPositions.length - 1].height : 0;
   const width = columnPositions.length ? columnPositions[columnPositions.length - 1].left + columnPositions[columnPositions.length - 1].width : 0;
-  const [{ rowRange, columnRange }, setWindow] = (0, import_react3.useState)({
+  const [{ rowRange, columnRange }, setWindow] = (0, import_react4.useState)({
     rowRange: [],
     columnRange: []
   });
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleScroll = () => {
       if (!scroller) {
         return;
@@ -365,12 +182,12 @@ var getCellAtPointer = (event) => {
   if (root) {
     const value = root.dataset[CELL_DATA_KEY];
     if (value) {
-      return addressFromA1Notation(value);
+      return (0, import_chunk_5KKJ4NPP.addressFromA1Notation)(value);
     }
   }
 };
 var getCellElement = (root, cell) => {
-  const pos = addressToA1Notation(cell);
+  const pos = (0, import_chunk_5KKJ4NPP.addressToA1Notation)(cell);
   return root.querySelector(`[data-${CELL_DATA_KEY}="${pos}"]`);
 };
 var handleNav = (ev, cursor, range, size) => {
@@ -392,14 +209,14 @@ var handleNav = (ev, cursor, range, size) => {
         break;
       }
       case "ArrowLeft": {
-        if (opposite.col > 0) {
-          opposite.col -= 1;
+        if (opposite.column > 0) {
+          opposite.column -= 1;
         }
         break;
       }
       case "ArrowRight": {
-        if (opposite.col < size.numCols - 1) {
-          opposite.col += 1;
+        if (opposite.column < size.numColumns - 1) {
+          opposite.column += 1;
         }
         break;
       }
@@ -417,18 +234,18 @@ var handleNav = (ev, cursor, range, size) => {
     cursor: next
   };
 };
-var handleArrowNav = (ev, cursor, { numRows, numCols }) => {
+var handleArrowNav = (ev, cursor, { numRows, numColumns }) => {
   switch (ev.key) {
     case "ArrowUp":
       if (cursor === void 0) {
         return {
           row: 0,
-          col: 0
+          column: 0
         };
       } else if (cursor.row > 0) {
         return {
           row: ev.metaKey ? 0 : cursor.row - 1,
-          col: cursor.col
+          column: cursor.column
         };
       }
       break;
@@ -436,12 +253,12 @@ var handleArrowNav = (ev, cursor, { numRows, numCols }) => {
       if (cursor === void 0) {
         return {
           row: 0,
-          col: 0
+          column: 0
         };
       } else if (cursor.row < numRows - 1) {
         return {
           row: ev.metaKey ? numRows - 1 : cursor.row + 1,
-          col: cursor.col
+          column: cursor.column
         };
       }
       break;
@@ -449,12 +266,12 @@ var handleArrowNav = (ev, cursor, { numRows, numCols }) => {
       if (cursor === void 0) {
         return {
           row: 0,
-          col: 0
+          column: 0
         };
-      } else if (cursor.col > 0) {
+      } else if (cursor.column > 0) {
         return {
           row: cursor.row,
-          col: ev.metaKey ? 0 : cursor.col - 1
+          column: ev.metaKey ? 0 : cursor.column - 1
         };
       }
       break;
@@ -462,30 +279,30 @@ var handleArrowNav = (ev, cursor, { numRows, numCols }) => {
       if (cursor === void 0) {
         return {
           row: 0,
-          col: 0
+          column: 0
         };
-      } else if (cursor.col < numCols - 1) {
+      } else if (cursor.column < numColumns - 1) {
         return {
           row: cursor.row,
-          col: ev.metaKey ? numCols - 1 : cursor.col + 1
+          column: ev.metaKey ? numColumns - 1 : cursor.column + 1
         };
       }
       break;
     case "Home":
       return {
         row: 0,
-        col: 0
+        column: 0
       };
     case "End":
       return {
         row: numRows - 1,
-        col: numCols - 1
+        column: numColumns - 1
       };
   }
 };
 var useRangeSelect = (cb) => {
-  const [from, setFrom] = (0, import_react4.useState)();
-  const [to, setTo] = (0, import_react4.useState)();
+  const [from, setFrom] = (0, import_react5.useState)();
+  const [to, setTo] = (0, import_react5.useState)();
   const onMouseDown = (ev) => {
     const current = getCellAtPointer(ev);
     setFrom(current);
@@ -498,7 +315,7 @@ var useRangeSelect = (cb) => {
   const onMouseMove = (ev) => {
     if (from) {
       let current = getCellAtPointer(ev);
-      if (posEquals(current, from)) {
+      if ((0, import_chunk_5KKJ4NPP.posEquals)(current, from)) {
         current = void 0;
       }
       setTo(current);
@@ -511,7 +328,7 @@ var useRangeSelect = (cb) => {
   const onMouseUp = (ev) => {
     if (from) {
       let current = getCellAtPointer(ev);
-      if (posEquals(current, from)) {
+      if ((0, import_chunk_5KKJ4NPP.posEquals)(current, from)) {
         current = void 0;
       }
       setFrom(void 0);
@@ -534,80 +351,27 @@ var useRangeSelect = (cb) => {
     }
   };
 };
-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 ComputeGraphContext = /* @__PURE__ */ (0, import_react8.createContext)(void 0);
-var ComputeGraphContextProvider = ({ registry, children }) => {
-  return /* @__PURE__ */ import_react8.default.createElement(ComputeGraphContext.Provider, {
-    value: {
-      registry
-    }
-  }, children);
-};
-var SheetContainer = import_react7.default.lazy(() => import("./SheetContainer-2MEALQWW.cjs"));
-var useComputeGraph = (space) => {
-  const { registry } = (0, import_react6.useContext)(ComputeGraphContext) ?? (0, import_debug.raise)(new Error("Missing ComputeGraphContext"));
-  const [graph] = (0, import_react_hooks.useAsyncState)(async () => space && registry.getOrCreateGraph(space), [
-    space,
-    registry
-  ]);
-  return graph;
-};
 var FormattingModel = class {
-  constructor(_model) {
-    this._model = _model;
+  constructor(model) {
+    this.model = model;
   }
   /**
   * Get formatted string value and className for cell.
   */
   getFormatting(cell) {
-    const value = this._model.getValue(cell);
+    const value = this.model.getValue(cell);
     if (value === void 0 || value === null) {
       return {};
     }
     const locales = void 0;
-    const idx = addressToIndex(this._model.sheet, cell);
-    let formatting = this._model.sheet.formatting?.[idx] ?? {};
+    const idx = this.model.addressToIndex(cell);
+    let formatting = this.model.sheet.formatting?.[idx] ?? {};
     const classNames = [
       ...formatting?.classNames ?? []
     ];
-    for (const [idx2, _formatting] of Object.entries(this._model.sheet.formatting)) {
-      const range = rangeFromIndex(this._model.sheet, idx2);
-      if (inRange(range, cell)) {
+    for (const [idx2, _formatting] of Object.entries(this.model.sheet.formatting)) {
+      const range = this.model.rangeFromIndex(idx2);
+      if ((0, import_chunk_5KKJ4NPP.inRange)(range, cell)) {
         if (_formatting.classNames) {
           classNames.push(..._formatting.classNames);
         }
@@ -617,9 +381,9 @@ var FormattingModel = class {
       }
     }
     const defaultNumber = "justify-end font-mono";
-    const type = formatting?.type ?? this._model.getValueType(cell);
+    const type = formatting?.type ?? this.model.getValueType(cell);
     switch (type) {
-      case import_chunk_AOP42UAA.ValueTypeEnum.Boolean: {
+      case import_chunk_DSYKOI4E.ValueTypeEnum.Boolean: {
         return {
           value: value.toLocaleString().toUpperCase(),
           classNames: [
@@ -631,7 +395,7 @@ var FormattingModel = class {
       //
       // Numbers.
       //
-      case import_chunk_AOP42UAA.ValueTypeEnum.Number: {
+      case import_chunk_DSYKOI4E.ValueTypeEnum.Number: {
         return {
           value: value.toLocaleString(locales),
           classNames: [
@@ -640,7 +404,7 @@ var FormattingModel = class {
           ]
         };
       }
-      case import_chunk_AOP42UAA.ValueTypeEnum.Percent: {
+      case import_chunk_DSYKOI4E.ValueTypeEnum.Percent: {
         return {
           value: value * 100 + "%",
           classNames: [
@@ -649,7 +413,7 @@ var FormattingModel = class {
           ]
         };
       }
-      case import_chunk_AOP42UAA.ValueTypeEnum.Currency: {
+      case import_chunk_DSYKOI4E.ValueTypeEnum.Currency: {
         return {
           value: value.toLocaleString(locales, {
             style: "currency",
@@ -666,22 +430,22 @@ var FormattingModel = class {
       //
       // Dates.
       //
-      case import_chunk_AOP42UAA.ValueTypeEnum.DateTime: {
-        const date = this._model.toLocalDate(value);
+      case import_chunk_DSYKOI4E.ValueTypeEnum.DateTime: {
+        const date = this.model.toLocalDate(value);
         return {
           value: date.toLocaleString(locales),
           classNames
         };
       }
-      case import_chunk_AOP42UAA.ValueTypeEnum.Date: {
-        const date = this._model.toLocalDate(value);
+      case import_chunk_DSYKOI4E.ValueTypeEnum.Date: {
+        const date = this.model.toLocalDate(value);
         return {
           value: date.toLocaleDateString(locales),
           classNames
         };
       }
-      case import_chunk_AOP42UAA.ValueTypeEnum.Time: {
-        const date = this._model.toLocalDate(value);
+      case import_chunk_DSYKOI4E.ValueTypeEnum.Time: {
+        const date = this.model.toLocalDate(value);
         return {
           value: date.toLocaleTimeString(locales),
           classNames
@@ -696,535 +460,83 @@ var FormattingModel = class {
     }
   }
 };
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/model/sheet-model.ts";
-var typeMap = {
-  BOOLEAN: import_chunk_AOP42UAA.ValueTypeEnum.Boolean,
-  NUMBER_RAW: import_chunk_AOP42UAA.ValueTypeEnum.Number,
-  NUMBER_PERCENT: import_chunk_AOP42UAA.ValueTypeEnum.Percent,
-  NUMBER_CURRENCY: import_chunk_AOP42UAA.ValueTypeEnum.Currency,
-  NUMBER_DATETIME: import_chunk_AOP42UAA.ValueTypeEnum.DateTime,
-  NUMBER_DATE: import_chunk_AOP42UAA.ValueTypeEnum.Date,
-  NUMBER_TIME: import_chunk_AOP42UAA.ValueTypeEnum.Time
-};
-var getTopLeft = (range) => {
-  const to = range.to ?? range.from;
-  return {
-    row: Math.min(range.from.row, to.row),
-    col: Math.min(range.from.col, to.col)
-  };
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/components/Sheet/sheet-context.tsx";
+var OBJECT_ID_LENGTH = 60;
+var SheetContext = /* @__PURE__ */ (0, import_react6.createContext)(null);
+var useSheetContext = () => {
+  const context = (0, import_react6.useContext)(SheetContext);
+  (0, import_invariant.invariant)(context, void 0, {
+    F: __dxlog_file,
+    L: 45,
+    S: void 0,
+    A: [
+      "context",
+      ""
+    ]
+  });
+  return context;
 };
-var toSimpleCellAddress = (sheet, cell) => ({
-  sheet,
-  row: cell.row,
-  col: cell.col
-});
-var toModelRange = (sheet, range) => ({
-  start: toSimpleCellAddress(sheet, range.from),
-  end: toSimpleCellAddress(sheet, range.to ?? range.from)
-});
-var SheetModel = class extends import_context.Resource {
-  constructor(_graph, _sheet, _options = {}) {
-    super();
-    this._graph = _graph;
-    this._sheet = _sheet;
-    this._options = _options;
-    this.id = `model-${import_keys.PublicKey.random().truncate()}`;
-    this.update = new import_async2.Event();
-  }
-  get graph() {
-    return this._graph;
-  }
-  get sheet() {
-    return this._sheet;
-  }
-  get readonly() {
-    return this._options.readonly;
-  }
-  get bounds() {
-    return {
-      rows: this._sheet.rows.length,
-      columns: this._sheet.columns.length
-    };
-  }
-  /**
-  * Initialize sheet and engine.
-  */
-  async _open() {
-    (0, import_log2.log)("initialize", {
-      id: this.id
-    }, {
-      F: __dxlog_file2,
-      L: 103,
-      S: this,
-      C: (f, a) => f(...a)
-    });
-    initialize(this._sheet);
-    this._node = await this._graph.getOrCreateNode((0, import_chunk_P5QYYEHQ.createSheetName)(this._sheet.id));
-    const unsubscribe = this._node.update.on((event) => this.update.emit(event));
-    this._ctx.onDispose(unsubscribe);
-    this.reset();
-  }
-  /**
-  * Update engine.
-  * NOTE: This resets the undo history.
-  * @deprecated
-  */
-  reset() {
-    (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 122,
-      S: this,
-      A: [
-        "this._node",
-        ""
-      ]
-    });
-    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: 125,
-        S: this,
-        A: [
-          "this._node",
-          ""
-        ]
-      });
-      const { col, row } = addressFromIndex(this._sheet, key);
-      if (typeof value === "string" && value.charAt(0) === "=") {
-        value = this._graph.mapFormulaToNative(this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value)));
-      }
-      this._node.graph.hf.setCellContents({
-        sheet: this._node.sheetId,
-        row,
-        col
-      }, value);
-    });
-  }
-  /**
-  * Recalculate formulas.
-  * NOTE: This resets the undo history.
-  * https://hyperformula.handsontable.com/guide/volatile-functions.html#volatile-actions
-  * @deprecated
-  */
-  // TODO(burdon): Remove.
-  recalculate() {
-    this._node?.graph.hf.rebuildAndRecalculate();
-  }
-  insertRows(i, n = 1) {
-    insertIndices(this._sheet.rows, i, n, MAX_ROWS);
-    this.reset();
-  }
-  insertColumns(i, n = 1) {
-    insertIndices(this._sheet.columns, i, n, MAX_COLUMNS);
-    this.reset();
-  }
-  //
-  // Undoable actions.
-  // TODO(burdon): Group undoable methods; consistently update hf/sheet.
-  //
-  /**
-  * Clear range of values.
-  */
-  clear(range) {
-    (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 167,
-      S: this,
-      A: [
-        "this._node",
-        ""
-      ]
-    });
-    const topLeft = getTopLeft(range);
-    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);
-      delete this._sheet.cells[idx];
-    });
-  }
-  cut(range) {
-    (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 178,
-      S: this,
-      A: [
-        "this._node",
-        ""
-      ]
-    });
-    this._node.graph.hf.cut(toModelRange(this._node.sheetId, range));
-    this._iterRange(range, (cell) => {
-      const idx = addressToIndex(this._sheet, cell);
-      delete this._sheet.cells[idx];
-    });
-  }
-  copy(range) {
-    (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 187,
-      S: this,
-      A: [
-        "this._node",
-        ""
-      ]
-    });
-    this._node.graph.hf.copy(toModelRange(this._node.sheetId, range));
-  }
-  paste(cell) {
-    (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 192,
-      S: this,
-      A: [
-        "this._node",
-        ""
-      ]
-    });
-    if (!this._node.graph.hf.isClipboardEmpty()) {
-      const changes = this._node.graph.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
-      for (const change of changes) {
-        if (change instanceof import_hyperformula.ExportedCellChange) {
-          const { address, newValue } = change;
-          const idx = addressToIndex(this._sheet, {
-            row: address.row,
-            col: address.col
-          });
-          this._sheet.cells[idx] = {
-            value: newValue
-          };
-        }
-      }
-    }
-  }
-  // TODO(burdon): Display undo/redo state.
-  undo() {
-    (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 207,
-      S: this,
-      A: [
-        "this._node",
-        ""
-      ]
-    });
-    if (this._node.graph.hf.isThereSomethingToUndo()) {
-      this._node.graph.hf.undo();
-    }
-  }
-  redo() {
-    (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 215,
-      S: this,
-      A: [
-        "this._node",
-        ""
-      ]
-    });
-    if (this._node.graph.hf.isThereSomethingToRedo()) {
-      this._node.graph.hf.redo();
+var mapFormulaBindingToId = (functions) => (formula) => {
+  return formula.replace(/([a-zA-Z0-9]+)\((.*)\)/g, (match, binding, args) => {
+    if (import_chunk_5KKJ4NPP.defaultFunctions.find((fn2) => fn2.name === binding) || binding === "EDGE") {
+      return match;
     }
-  }
-  /**
-  * Get value from sheet.
-  */
-  getCellValue(cell) {
-    const idx = addressToIndex(this._sheet, cell);
-    return this._sheet.cells[idx]?.value ?? null;
-  }
-  /**
-  * Get value as a string for editing.
-  */
-  getCellText(cell) {
-    const value = this.getCellValue(cell);
-    if (value == null) {
-      return void 0;
-    }
-    if (typeof value === "string" && value.charAt(0) === "=") {
-      return this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value));
+    const fn = functions.find((fn2) => fn2.binding === binding);
+    if (fn) {
+      return `${(0, import_echo2.fullyQualifiedId)(fn)}(${args})`;
     } else {
-      return String(value);
+      return match;
     }
-  }
-  /**
-  * Get array of raw values from sheet.
-  */
-  getCellValues(range) {
-    return this._iterRange(range, (cell) => this.getCellValue(cell));
-  }
-  /**
-  * Gets the regular or computed value from the engine.
-  */
-  getValue(cell) {
-    (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 258,
-      S: this,
-      A: [
-        "this._node",
-        ""
-      ]
-    });
-    const value = this._node.graph.hf.getCellValue(toSimpleCellAddress(this._node.sheetId, cell));
-    if (value instanceof import_hyperformula.DetailedCellError) {
-      return value.toString();
-    }
-    return value;
-  }
-  /**
-  * Get value type.
-  */
-  getValueType(cell) {
-    (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 271,
-      S: this,
-      A: [
-        "this._node",
-        ""
-      ]
-    });
-    const addr = toSimpleCellAddress(this._node.sheetId, cell);
-    const type = this._node.graph.hf.getCellValueDetailedType(addr);
-    return typeMap[type];
-  }
-  /**
-  * Sets the value, updating the sheet and engine.
-  */
-  setValue(cell, value) {
-    (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 281,
-      S: this,
-      A: [
-        "this._node",
-        ""
-      ]
-    });
-    if (this._options.readonly) {
-      throw new ReadonlyException();
-    }
-    let refresh = false;
-    if (cell.row >= this._sheet.rows.length) {
-      insertIndices(this._sheet.rows, cell.row, 1, MAX_ROWS);
-      refresh = true;
-    }
-    if (cell.col >= this._sheet.columns.length) {
-      insertIndices(this._sheet.columns, cell.col, 1, MAX_COLUMNS);
-      refresh = true;
-    }
-    if (refresh) {
-      this.reset();
+  });
+};
+var mapFormulaBindingFromId = (functions) => (formula) => {
+  return formula.replace(/([a-zA-Z0-9]+):([a-zA-Z0-9]+)\((.*)\)/g, (match, spaceId, objectId, args) => {
+    const id = `${spaceId}:${objectId}`;
+    if (id.length !== OBJECT_ID_LENGTH) {
+      return match;
     }
-    this._node.graph.hf.setCellContents({
-      sheet: this._node.sheetId,
-      row: cell.row,
-      col: cell.col
-    }, [
-      [
-        typeof value === "string" && value.charAt(0) === "=" ? this._graph.mapFormulaToNative(value) : value
-      ]
-    ]);
-    const idx = addressToIndex(this._sheet, cell);
-    if (value === void 0 || value === null) {
-      delete this._sheet.cells[idx];
+    const fn = functions.find((fn2) => (0, import_echo2.fullyQualifiedId)(fn2) === id);
+    if (fn?.binding) {
+      return `${fn.binding}(${args})`;
     } else {
-      if (typeof value === "string" && value.charAt(0) === "=") {
-        value = this._graph.mapFunctionBindingToId(this.mapFormulaRefsToIndices(value));
-      }
-      this._sheet.cells[idx] = {
-        value
-      };
+      return match;
     }
-  }
-  /**
-  * Sets values from a simple map.
-  */
-  setValues(values) {
-    Object.entries(values).forEach(([key, { value }]) => {
-      this.setValue(addressFromA1Notation(key), value);
-    });
-  }
-  /**
-  * Iterate range.
-  */
-  _iterRange(range, cb) {
-    const to = range.to ?? range.from;
-    const rowRange = [
-      Math.min(range.from.row, to.row),
-      Math.max(range.from.row, to.row)
-    ];
-    const columnRange = [
-      Math.min(range.from.col, to.col),
-      Math.max(range.from.col, to.col)
-    ];
-    const rows = [];
-    for (let row = rowRange[0]; row <= rowRange[1]; row++) {
-      const rowCells = [];
-      for (let column = columnRange[0]; column <= columnRange[1]; column++) {
-        const value = cb({
-          row,
-          col: column
-        });
-        if (value !== void 0) {
-          rowCells.push(value);
-        }
-      }
-      rows.push(rowCells);
-    }
-    return rows;
-  }
-  // TODO(burdon): Delete index.
-  _deleteIndices(indices, i, n) {
-    throw new Error("Not implemented");
-  }
-  // TODO(burdon): Move. Cannot use fractional without changing. Switch back to using unique IDs?
-  _moveIndices(indices, i, j, n) {
-    throw new Error("Not implemented");
-  }
-  //
-  // Indices.
-  //
-  /**
-  * Map from A1 notation to indices.
-  */
-  mapFormulaRefsToIndices(formula) {
-    (0, import_invariant3.invariant)(formula.charAt(0) === "=", void 0, {
-      F: __dxlog_file2,
-      L: 370,
-      S: this,
-      A: [
-        "formula.charAt(0) === '='",
-        ""
-      ]
-    });
-    return formula.replace(/([a-zA-Z]+)([0-9]+)/g, (match) => {
-      return addressToIndex(this._sheet, addressFromA1Notation(match));
-    });
-  }
-  /**
-  * Map from indices to A1 notation.
-  */
-  mapFormulaIndicesToRefs(formula) {
-    (0, import_invariant3.invariant)(formula.charAt(0) === "=", void 0, {
-      F: __dxlog_file2,
-      L: 380,
-      S: this,
-      A: [
-        "formula.charAt(0) === '='",
-        ""
-      ]
-    });
-    return formula.replace(/([a-zA-Z0-9]+)@([a-zA-Z0-9]+)/g, (idx) => {
-      return addressToA1Notation(addressFromIndex(this._sheet, idx));
-    });
-  }
-  //
-  // Values
-  //
-  /**
-  * https://hyperformula.handsontable.com/guide/date-and-time-handling.html#example
-  * https://hyperformula.handsontable.com/api/interfaces/configparams.html#nulldate
-  * NOTE: TODAY() is number of FULL days since nullDate. It will typically be -1 days from NOW().
-  */
-  toLocalDate(num) {
-    const { year, month, day, hours, minutes, seconds } = this.toDateTime(num);
-    return new Date(year, month - 1, day, hours, minutes, seconds);
-  }
-  toDateTime(num) {
-    (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 401,
-      S: this,
-      A: [
-        "this._node",
-        ""
-      ]
-    });
-    return this._node.graph.hf.numberToDateTime(num);
-  }
-  toDate(num) {
-    (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 406,
-      S: this,
-      A: [
-        "this._node",
-        ""
-      ]
-    });
-    return this._node.graph.hf.numberToDate(num);
-  }
-  toTime(num) {
-    (0, import_invariant3.invariant)(this._node, void 0, {
-      F: __dxlog_file2,
-      L: 411,
-      S: this,
-      A: [
-        "this._node",
-        ""
-      ]
-    });
-    return this._node.graph.hf.numberToTime(num);
-  }
-};
-var useFormattingModel = (model) => {
-  return (0, import_react9.useMemo)(() => model && new FormattingModel(model), [
-    model
-  ]);
+  });
 };
-var useSheetModel = (graph, sheet, { readonly } = {}) => {
-  const [model, setModel] = (0, import_react10.useState)();
-  (0, import_react10.useEffect)(() => {
-    if (!graph || !sheet) {
-      return;
-    }
+var SheetContextProvider = ({ children, sheet, space, readonly, onInfo, ...options }) => {
+  const graph = (0, import_chunk_CN3RPESU.useComputeGraph)(space, options);
+  const [cursor, setCursor] = (0, import_react6.useState)();
+  const [range, setRange] = (0, import_react6.useState)();
+  const [editing, setEditing] = (0, import_react6.useState)(false);
+  const [[model, formatting] = [], setModels] = (0, import_react6.useState)(void 0);
+  (0, import_react6.useEffect)(() => {
     let model2;
+    let formatting2;
     const t = setTimeout(async () => {
-      model2 = new SheetModel(graph, sheet, {
-        readonly
+      model2 = new import_chunk_5KKJ4NPP.SheetModel(graph, sheet, space, {
+        readonly,
+        mapFormulaBindingToId,
+        mapFormulaBindingFromId
       });
-      await model2.open();
-      setModel(model2);
+      await model2.initialize();
+      formatting2 = new FormattingModel(model2);
+      setModels([
+        model2,
+        formatting2
+      ]);
     });
     return () => {
       clearTimeout(t);
-      void model2?.close();
+      void model2?.destroy();
     };
   }, [
     graph,
-    sheet,
     readonly
   ]);
-  return model;
-};
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/components/Sheet/sheet-context.tsx";
-var SheetContext = /* @__PURE__ */ (0, import_react5.createContext)(null);
-var useSheetContext = () => {
-  const context = (0, import_react5.useContext)(SheetContext);
-  (0, import_invariant2.invariant)(context, void 0, {
-    F: __dxlog_file3,
-    L: 43,
-    S: void 0,
-    A: [
-      "context",
-      ""
-    ]
-  });
-  return context;
-};
-var SheetContextProvider = ({ children, graph, sheet, readonly, onInfo }) => {
-  const model = useSheetModel(graph, sheet, {
-    readonly
-  });
-  const formatting = useFormattingModel(model);
-  const [cursor, setCursor] = (0, import_react5.useState)();
-  const [range, setRange] = (0, import_react5.useState)();
-  const [editing, setEditing] = (0, import_react5.useState)(false);
-  const decorations = (0, import_react5.useMemo)(() => createDecorations(), []);
-  return !model || !formatting ? null : /* @__PURE__ */ import_react5.default.createElement(SheetContext.Provider, {
+  if (!model || !formatting) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react6.default.createElement(SheetContext.Provider, {
     value: {
       model,
       formatting,
@@ -1235,168 +547,10 @@ var SheetContextProvider = ({ children, graph, sheet, readonly, onInfo }) => {
       editing,
       setEditing,
       // TODO(burdon): Change to event.
-      onInfo,
-      decorations
+      onInfo
     }
   }, children);
 };
-var CommentIndicator = () => {
-  return /* @__PURE__ */ import_react11.default.createElement("div", {
-    role: "none",
-    className: "absolute top-0 right-0 w-0 h-0 border-t-8 border-l-8 border-t-cmCommentSurface border-l-transparent"
-  });
-};
-var ThreadedCellWrapper = ({ children }) => {
-  const dispatch = (0, import_app_framework.useIntentDispatcher)();
-  const [isHovered, setIsHovered] = import_react11.default.useState(false);
-  const { t } = (0, import_react_ui.useTranslation)(import_chunk_BNARJ5GM.SHEET_PLUGIN);
-  const handleClick = import_react11.default.useCallback((_event) => {
-    void dispatch({
-      action: import_app_framework.LayoutAction.SET_LAYOUT,
-      data: {
-        element: "complementary",
-        state: true
-      }
-    });
-  }, [
-    dispatch
-  ]);
-  return /* @__PURE__ */ import_react11.default.createElement("div", {
-    role: "none",
-    className: "relative h-full is-full",
-    onMouseEnter: () => {
-      setIsHovered(true);
-    },
-    onMouseLeave: () => {
-      setIsHovered(false);
-    }
-  }, /* @__PURE__ */ import_react11.default.createElement(CommentIndicator, null), isHovered && /* @__PURE__ */ import_react11.default.createElement("div", {
-    className: "absolute inset-0 flex items-center justify-end pr-1"
-  }, /* @__PURE__ */ import_react11.default.createElement("button", {
-    className: "ch-button text-xs min-bs-0 p-1",
-    onClick: handleClick,
-    "aria-label": t("open comment for sheet cell")
-  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui.Icon, {
-    icon: "ph--chat--regular",
-    "aria-hidden": true
-  }))), children);
-};
-var createThreadDecoration = (cellIndex, threadId, sheetId) => {
-  return {
-    type: "comment",
-    cellIndex,
-    decorate: (props) => /* @__PURE__ */ import_react11.default.createElement(ThreadedCellWrapper, props)
-  };
-};
-var useUpdateCursorOnThreadSelection = () => {
-  const { setCursor, model } = useSheetContext();
-  const handleScrollIntoView = (0, import_react11.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)) {
-          return;
-        }
-        const cellAddress = addressFromIndex(model.sheet, data.cursor);
-        setCursor(cellAddress);
-      }
-    }
-  }, [
-    model.sheet,
-    setCursor
-  ]);
-  (0, import_app_framework.useIntentResolver)(import_chunk_BNARJ5GM.SHEET_PLUGIN, handleScrollIntoView);
-};
-var useSelectThreadOnCursorChange = () => {
-  const { cursor, model } = useSheetContext();
-  const dispatch = (0, import_app_framework.useIntentDispatcher)();
-  const activeThreads = (0, import_react11.useMemo)(() => model.sheet.threads?.filter((thread) => !!thread && thread.status === "active") ?? [], [
-    JSON.stringify(model.sheet.threads)
-  ]);
-  const activeThreadAddresses = (0, import_react11.useMemo)(() => activeThreads.map((thread) => thread.anchor).filter((anchor) => anchor !== void 0).map((anchor) => addressFromIndex(model.sheet, anchor)), [
-    activeThreads,
-    model.sheet
-  ]);
-  const selectClosestThread = (0, import_react11.useCallback)((cellAddress) => {
-    if (!cellAddress || !activeThreads) {
-      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)
-            }
-          }
-        ]);
-      }
-    }
-  }, [
-    dispatch,
-    activeThreads,
-    activeThreadAddresses,
-    model.sheet
-  ]);
-  const debounced = (0, import_react11.useMemo)(() => {
-    return (0, import_async3.debounce)((cursor2) => requestAnimationFrame(() => selectClosestThread(cursor2)), 50);
-  }, [
-    selectClosestThread
-  ]);
-  (0, import_react11.useEffect)(() => {
-    if (!cursor) {
-      return;
-    }
-    debounced(cursor);
-  }, [
-    cursor,
-    selectClosestThread
-  ]);
-};
-var useThreadDecorations = () => {
-  const { decorations, model } = useSheetContext();
-  const sheet = (0, import_react11.useMemo)(() => model.sheet, [
-    model.sheet
-  ]);
-  const sheetId = (0, import_react11.useMemo)(() => (0, import_echo2.fullyQualifiedId)(sheet), [
-    sheet
-  ]);
-  (0, import_react11.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 useThreads = () => {
-  useUpdateCursorOnThreadSelection();
-  useSelectThreadOnCursorChange();
-  useThreadDecorations();
-};
 var getRelativeClientRect = (root, element) => {
   const rootRect = root.getBoundingClientRect();
   const elementRect = element.getBoundingClientRect();
@@ -1473,61 +627,21 @@ var editorKeys = ({ onNav, onClose }) => {
     {
       key: "Enter",
       run: (editor) => {
-        onClose(editor.state.doc.toString(), {
-          key: "Enter"
-        });
-        return true;
-      },
-      shift: (editor) => {
-        onClose(editor.state.doc.toString(), {
-          key: "Enter",
-          shift: true
-        });
-        return true;
-      }
-    },
-    {
-      key: "Tab",
-      run: (editor) => {
-        onClose(editor.state.doc.toString(), {
-          key: "Tab"
-        });
-        return true;
-      },
-      shift: (editor) => {
-        onClose(editor.state.doc.toString(), {
-          key: "Tab",
-          shift: true
-        });
+        onClose(editor.state.doc.toString());
         return true;
       }
     },
     {
       key: "Escape",
       run: () => {
-        onClose(void 0, {
-          key: "Escape"
-        });
+        onClose(void 0);
         return true;
       }
     }
   ]);
 };
-var editorVariants = {
-  // TODO(thure): remove when legacy is no longer used.
-  legacy: {
-    root: "flex w-full",
-    editor: "flex w-full [&>.cm-scroller]:scrollbar-none",
-    content: "!px-2 !py-1"
-  },
-  grid: {
-    root: "absolute z-[1]",
-    editor: "[&>.cm-scroller]:scrollbar-none tabular-nums",
-    content: "!border !border-transparent !p-0.5"
-  }
-};
-var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box, gridId }) => {
-  const { themeMode } = (0, import_react_ui2.useThemeContext)();
+var CellEditor = ({ value, extension, autoFocus, onBlur }) => {
+  const { themeMode } = (0, import_react_ui.useThemeContext)();
   const { parentRef } = (0, import_react_ui_editor.useTextEditor)(() => {
     return {
       autoFocus,
@@ -1553,29 +667,21 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box
           themeMode,
           slots: {
             editor: {
-              className: editorVariants[variant].editor
+              className: "flex w-full [&>.cm-scroller]:scrollbar-none"
             },
             content: {
-              className: editorVariants[variant].content
+              className: "!px-2 !py-1"
             }
           }
         })
       ]
     };
   }, [
-    extension,
-    autoFocus,
-    value,
-    variant,
-    onBlur
+    extension
   ]);
-  return /* @__PURE__ */ import_react12.default.createElement("div", {
+  return /* @__PURE__ */ import_react7.default.createElement("div", {
     ref: parentRef,
-    className: editorVariants[variant].root,
-    style: box,
-    ...gridId && {
-      "data-grid": gridId
-    }
+    className: "flex w-full"
   });
 };
 var highlightStyles = import_language.HighlightStyle.define([
@@ -1688,7 +794,13 @@ var sheetExtension = ({ functions = [] }) => {
       // NOTE: Useful for debugging.
       closeOnBlur: false,
       icons: false,
-      tooltipClass: () => (0, import_react_ui_theme2.mx)("!-left-[1px] !top-[33px] !-m-0 border !border-t-0 [&>ul]:!min-w-[198px]", "[&>ul>li[aria-selected]]:!bg-accentSurface", "border-separator")
+      tooltipClass: () => (0, import_react_ui_theme3.mx)(
+        // TODO(burdon): Factor out fragments.
+        // TODO(burdon): Size to make width same as column.
+        "!-left-[1px] !top-[33px] !-m-0 border !border-t-0 [&>ul]:!min-w-[198px]",
+        "[&>ul>li[aria-selected]]:!bg-accentSurface",
+        "border-separator"
+      )
     }),
     import_view2.keymap.of([
       {
@@ -1775,7 +887,7 @@ var visitTree = (node, callback) => {
   }
   return false;
 };
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/components/Sheet/Sheet.tsx";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/components/Sheet/Sheet.tsx";
 var fragments = {
   axis: "bg-axisSurface text-axisText text-xs select-none",
   axisSelected: "bg-attention text-baseText",
@@ -1783,19 +895,18 @@ var fragments = {
   cellSelected: "bg-gridCellSelected text-baseText border !border-accentSurface"
 };
 var SheetRoot = ({ children, ...props }) => {
-  return /* @__PURE__ */ import_react2.default.createElement(SheetContextProvider, props, children);
+  return /* @__PURE__ */ import_react3.default.createElement(SheetContextProvider, props, children);
 };
-var SheetMain = /* @__PURE__ */ (0, import_react2.forwardRef)(({ classNames, numRows, numCols }, forwardRef2) => {
+var SheetMain = /* @__PURE__ */ (0, import_react3.forwardRef)(({ classNames, numRows, numColumns }, forwardRef2) => {
   const { model, cursor, setCursor, setRange, setEditing } = useSheetContext();
   const { rowsRef, columnsRef, contentRef } = useScrollHandlers();
-  useThreads();
-  const [rows, setRows] = (0, import_react2.useState)([
+  const [rows, setRows] = (0, import_react3.useState)([
     ...model.sheet.rows
   ]);
-  const [columns, setColumns] = (0, import_react2.useState)([
+  const [columns, setColumns] = (0, import_react3.useState)([
     ...model.sheet.columns
   ]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const rowsAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
       "rows"
     ]);
@@ -1820,37 +931,37 @@ var SheetMain = /* @__PURE__ */ (0, import_react2.forwardRef)(({ classNames, num
   }, [
     model
   ]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     model.reset();
   }, [
     rows,
     columns
   ]);
   const handleMoveRows = (from, to, num = 1) => {
-    const cursorIdx = cursor ? addressToIndex(model.sheet, cursor) : void 0;
+    const cursorIdx = cursor ? model.addressToIndex(cursor) : void 0;
     const [rows2] = model.sheet.rows.splice(from, num);
     model.sheet.rows.splice(to, 0, rows2);
     if (cursorIdx) {
-      setCursor(addressFromIndex(model.sheet, cursorIdx));
+      setCursor(model.addressFromIndex(cursorIdx));
     }
     setRows([
       ...model.sheet.rows
     ]);
   };
   const handleMoveColumns = (from, to, num = 1) => {
-    const cursorIdx = cursor ? addressToIndex(model.sheet, cursor) : void 0;
+    const cursorIdx = cursor ? model.addressToIndex(cursor) : void 0;
     const columns2 = model.sheet.columns.splice(from, num);
     model.sheet.columns.splice(to, 0, ...columns2);
     if (cursorIdx) {
-      setCursor(addressFromIndex(model.sheet, cursorIdx));
+      setCursor(model.addressFromIndex(cursorIdx));
     }
     setColumns([
       ...model.sheet.columns
     ]);
   };
-  const [rowSizes, setRowSizes] = (0, import_react2.useState)();
-  const [columnSizes, setColumnSizes] = (0, import_react2.useState)();
-  (0, import_react2.useEffect)(() => {
+  const [rowSizes, setRowSizes] = (0, import_react3.useState)();
+  const [columnSizes, setColumnSizes] = (0, import_react3.useState)();
+  (0, import_react3.useEffect)(() => {
     const rowAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
       "rowMeta"
     ]);
@@ -1899,54 +1010,54 @@ var SheetMain = /* @__PURE__ */ (0, import_react2.forwardRef)(({ classNames, num
       }));
     }
   };
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
     role: "none",
-    className: (0, import_react_ui_theme.mx)("grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden", classNames)
-  }, /* @__PURE__ */ import_react2.default.createElement(GridCorner, {
+    className: (0, import_react_ui_theme2.mx)("grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden", classNames)
+  }, /* @__PURE__ */ import_react3.default.createElement(GridCorner, {
     onClick: () => {
       setCursor(void 0);
       setRange(void 0);
       setEditing(false);
     }
-  }), /* @__PURE__ */ import_react2.default.createElement(SheetColumns, {
+  }), /* @__PURE__ */ import_react3.default.createElement(SheetColumns, {
     ref: columnsRef,
     columns,
     sizes: columnSizes,
-    selected: cursor?.col,
-    onSelect: (col) => setCursor(cursor?.col === col ? void 0 : {
+    selected: cursor?.column,
+    onSelect: (column) => setCursor(cursor?.column === column ? void 0 : {
       row: -1,
-      col
+      column
     }),
     onResize: handleResizeColumn,
     onMove: handleMoveColumns
-  }), /* @__PURE__ */ import_react2.default.createElement(SheetRows, {
+  }), /* @__PURE__ */ import_react3.default.createElement(SheetRows, {
     ref: rowsRef,
     rows,
     sizes: rowSizes,
     selected: cursor?.row,
     onSelect: (row) => setCursor(cursor?.row === row ? void 0 : {
       row,
-      col: -1
+      column: -1
     }),
     onResize: handleResizeRow,
     onMove: handleMoveRows
-  }), /* @__PURE__ */ import_react2.default.createElement(SheetGrid, {
+  }), /* @__PURE__ */ import_react3.default.createElement(SheetGrid, {
     ref: contentRef,
     size: {
       numRows: numRows ?? rows.length,
-      numCols: numCols ?? columns.length
+      numColumns: numColumns ?? columns.length
     },
     rows,
     columns,
     rowSizes,
     columnSizes
-  }), /* @__PURE__ */ import_react2.default.createElement(GridCorner, null), /* @__PURE__ */ import_react2.default.createElement(SheetStatusBar, null));
+  }), /* @__PURE__ */ import_react3.default.createElement(GridCorner, null), /* @__PURE__ */ import_react3.default.createElement(SheetStatusBar, null));
 });
 var useScrollHandlers = () => {
-  const rowsRef = (0, import_react2.useRef)(null);
-  const columnsRef = (0, import_react2.useRef)(null);
-  const contentRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
+  const rowsRef = (0, import_react3.useRef)(null);
+  const columnsRef = (0, import_react3.useRef)(null);
+  const contentRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
     const handleRowsScroll = (ev) => {
       const { scrollTop } = ev.target;
       if (!rowsRef.current.dataset.locked) {
@@ -1983,13 +1094,13 @@ var useScrollHandlers = () => {
   };
 };
 var GridCorner = (props) => {
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
     className: fragments.axis,
     ...props
   });
 };
 var MovingOverlay = ({ label }) => {
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "flex w-full h-full justify-center items-center text-sm p-1 bg-gridOverlay cursor-pointer"
   }, label);
 };
@@ -2000,7 +1111,7 @@ var touchConstraints = {
   delay: 250,
   tolerance: 5
 };
-var SheetRows = /* @__PURE__ */ (0, import_react2.forwardRef)(({ rows, sizes, selected, onSelect, onResize, onMove }, forwardRef2) => {
+var SheetRows = /* @__PURE__ */ (0, import_react3.forwardRef)(({ rows, sizes, selected, onSelect, onResize, onMove }, forwardRef2) => {
   const mouseSensor = (0, import_core.useSensor)(import_core.MouseSensor, {
     activationConstraint: mouseConstraints
   });
@@ -2009,7 +1120,7 @@ var SheetRows = /* @__PURE__ */ (0, import_react2.forwardRef)(({ rows, sizes, se
   });
   const keyboardSensor = (0, import_core.useSensor)(import_core.KeyboardSensor, {});
   const sensors = (0, import_core.useSensors)(mouseSensor, touchSensor, keyboardSensor);
-  const [active, setActive] = (0, import_react2.useState)(null);
+  const [active, setActive] = (0, import_react3.useState)(null);
   const handleDragStart = ({ active: active2 }) => {
     setActive(active2);
   };
@@ -2033,18 +1144,18 @@ var SheetRows = /* @__PURE__ */ (0, import_react2.forwardRef)(({ rows, sizes, se
     }
     return transform;
   };
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ import_react2.default.createElement("div", {
-    className: (0, import_react_ui_theme.mx)("z-20 absolute inset-0 border-y border-gridLine pointer-events-none"),
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: (0, import_react_ui_theme2.mx)("z-20 absolute inset-0 border-y border-gridLine pointer-events-none"),
     style: {
       width: axisWidth
     }
-  }), /* @__PURE__ */ import_react2.default.createElement("div", {
+  }), /* @__PURE__ */ import_react3.default.createElement("div", {
     ref: forwardRef2,
     role: "rowheader",
     className: "grow overflow-y-auto scrollbar-none"
-  }, /* @__PURE__ */ import_react2.default.createElement(import_core.DndContext, {
+  }, /* @__PURE__ */ import_react3.default.createElement(import_core.DndContext, {
     sensors,
     modifiers: [
       import_modifiers.restrictToVerticalAxis,
@@ -2052,12 +1163,12 @@ var SheetRows = /* @__PURE__ */ (0, import_react2.forwardRef)(({ rows, sizes, se
     ],
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd
-  }, /* @__PURE__ */ import_react2.default.createElement("div", {
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "flex flex-col",
     style: {
       width: axisWidth
     }
-  }, rows.map((idx, index) => /* @__PURE__ */ import_react2.default.createElement(GridRowCell, {
+  }, rows.map((idx, index) => /* @__PURE__ */ import_react3.default.createElement(GridRowCell, {
     key: idx,
     idx,
     index,
@@ -2067,7 +1178,7 @@ var SheetRows = /* @__PURE__ */ (0, import_react2.forwardRef)(({ rows, sizes, se
     selected: selected === index,
     onResize,
     onSelect
-  }))), /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react2.default.createElement(import_core.DragOverlay, null, active && /* @__PURE__ */ import_react2.default.createElement(MovingOverlay, {
+  }))), /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react3.default.createElement(import_core.DragOverlay, null, active && /* @__PURE__ */ import_react3.default.createElement(MovingOverlay, {
     label: String(active.data.current.index + 1)
   })), document.body))));
 });
@@ -2085,9 +1196,9 @@ var GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onResi
     }
   });
   const setNodeRef = (0, import_utilities.useCombinedRefs)(setDroppableNodeRef, setDraggableNodeRef);
-  const [initialSize, setInitialSize] = (0, import_react2.useState)(size);
-  const [resizing, setResizing] = (0, import_react2.useState)(false);
-  const scrollHandler = (0, import_react2.useRef)();
+  const [initialSize, setInitialSize] = (0, import_react3.useState)(size);
+  const [resizing, setResizing] = (0, import_react3.useState)(false);
+  const scrollHandler = (0, import_react3.useRef)();
   const handleResizeStart = (_ev, _dir, elementRef) => {
     const scrollContainer = elementRef.closest('[role="rowheader"]');
     const scrollTop = scrollContainer.scrollTop;
@@ -2108,7 +1219,7 @@ var GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onResi
     onResize?.(idx, initialSize + height, true);
     setResizing(false);
   };
-  return /* @__PURE__ */ import_react2.default.createElement(import_re_resizable.Resizable, {
+  return /* @__PURE__ */ import_react3.default.createElement(import_re_resizable.Resizable, {
     enable: {
       bottom: resize
     },
@@ -2120,21 +1231,21 @@ var GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onResi
     onResizeStart: handleResizeStart,
     onResize: handleResize,
     onResizeStop: handleResizeStop
-  }, /* @__PURE__ */ import_react2.default.createElement("div", {
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
     ref: setNodeRef,
     ...attributes,
     ...listeners,
-    className: (0, import_react_ui_theme.mx)("flex h-full items-center justify-center cursor-pointer", "border-t border-gridLine focus-visible:outline-none", fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
+    className: (0, import_react_ui_theme2.mx)("flex h-full items-center justify-center cursor-pointer", "border-t border-gridLine focus-visible:outline-none", fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
     onClick: () => onSelect?.(index)
-  }, /* @__PURE__ */ import_react2.default.createElement("span", {
+  }, /* @__PURE__ */ import_react3.default.createElement("span", {
     className: "flex w-full justify-center"
-  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ import_react2.default.createElement("div", {
+  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "z-20 absolute top-0 w-full min-h-[4px] border-b-4 border-accentSurface"
-  }), resizing && /* @__PURE__ */ import_react2.default.createElement("div", {
+  }), resizing && /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "z-20 absolute bottom-0 w-full min-h-[4px] border-b-4 border-accentSurface"
   })));
 };
-var SheetColumns = /* @__PURE__ */ (0, import_react2.forwardRef)(({ columns, sizes, selected, onSelect, onResize, onMove }, forwardRef2) => {
+var SheetColumns = /* @__PURE__ */ (0, import_react3.forwardRef)(({ columns, sizes, selected, onSelect, onResize, onMove }, forwardRef2) => {
   const mouseSensor = (0, import_core.useSensor)(import_core.MouseSensor, {
     activationConstraint: mouseConstraints
   });
@@ -2143,7 +1254,7 @@ var SheetColumns = /* @__PURE__ */ (0, import_react2.forwardRef)(({ columns, siz
   });
   const keyboardSensor = (0, import_core.useSensor)(import_core.KeyboardSensor, {});
   const sensors = (0, import_core.useSensors)(mouseSensor, touchSensor, keyboardSensor);
-  const [active, setActive] = (0, import_react2.useState)(null);
+  const [active, setActive] = (0, import_react3.useState)(null);
   const handleDragStart = ({ active: active2 }) => {
     setActive(active2);
   };
@@ -2167,18 +1278,18 @@ var SheetColumns = /* @__PURE__ */ (0, import_react2.forwardRef)(({ columns, siz
     }
     return transform;
   };
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ import_react2.default.createElement("div", {
-    className: (0, import_react_ui_theme.mx)("z-20 absolute inset-0 border-x border-gridLine pointer-events-none"),
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: (0, import_react_ui_theme2.mx)("z-20 absolute inset-0 border-x border-gridLine pointer-events-none"),
     style: {
       height: axisHeight
     }
-  }), /* @__PURE__ */ import_react2.default.createElement("div", {
+  }), /* @__PURE__ */ import_react3.default.createElement("div", {
     ref: forwardRef2,
     role: "columnheader",
     className: "grow overflow-x-auto scrollbar-none"
-  }, /* @__PURE__ */ import_react2.default.createElement(import_core.DndContext, {
+  }, /* @__PURE__ */ import_react3.default.createElement(import_core.DndContext, {
     autoScroll: {
       enabled: true
     },
@@ -2189,23 +1300,23 @@ var SheetColumns = /* @__PURE__ */ (0, import_react2.forwardRef)(({ columns, siz
     ],
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd
-  }, /* @__PURE__ */ import_react2.default.createElement("div", {
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "flex h-full",
     style: {
       height: axisHeight
     }
-  }, columns.map((idx, index) => /* @__PURE__ */ import_react2.default.createElement(GridColumnCell, {
+  }, columns.map((idx, index) => /* @__PURE__ */ import_react3.default.createElement(GridColumnCell, {
     key: idx,
     idx,
     index,
-    label: columnLetter(index),
+    label: (0, import_chunk_5KKJ4NPP.columnLetter)(index),
     size: sizes?.[idx] ?? defaultWidth,
     resize: index < columns.length - 1,
     selected: selected === index,
     onResize,
     onSelect
-  }))), /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react2.default.createElement(import_core.DragOverlay, null, active && /* @__PURE__ */ import_react2.default.createElement(MovingOverlay, {
-    label: columnLetter(active.data.current.index)
+  }))), /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react3.default.createElement(import_core.DragOverlay, null, active && /* @__PURE__ */ import_react3.default.createElement(MovingOverlay, {
+    label: (0, import_chunk_5KKJ4NPP.columnLetter)(active.data.current.index)
   })), document.body))));
 });
 var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onResize }) => {
@@ -2222,9 +1333,9 @@ var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onR
     }
   });
   const setNodeRef = (0, import_utilities.useCombinedRefs)(setDroppableNodeRef, setDraggableNodeRef);
-  const [initialSize, setInitialSize] = (0, import_react2.useState)(size);
-  const [resizing, setResizing] = (0, import_react2.useState)(false);
-  const scrollHandler = (0, import_react2.useRef)();
+  const [initialSize, setInitialSize] = (0, import_react3.useState)(size);
+  const [resizing, setResizing] = (0, import_react3.useState)(false);
+  const scrollHandler = (0, import_react3.useRef)();
   const handleResizeStart = (_ev, _dir, elementRef) => {
     const scrollContainer = elementRef.closest('[role="columnheader"]');
     const scrollLeft = scrollContainer.scrollLeft;
@@ -2245,7 +1356,7 @@ var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onR
     onResize?.(idx, initialSize + width, true);
     setResizing(false);
   };
-  return /* @__PURE__ */ import_react2.default.createElement(import_re_resizable.Resizable, {
+  return /* @__PURE__ */ import_react3.default.createElement(import_re_resizable.Resizable, {
     enable: {
       right: resize
     },
@@ -2257,37 +1368,37 @@ var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onR
     onResizeStart: handleResizeStart,
     onResize: handleResize,
     onResizeStop: handleResizeStop
-  }, /* @__PURE__ */ import_react2.default.createElement("div", {
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
     ref: setNodeRef,
     ...attributes,
     ...listeners,
-    className: (0, import_react_ui_theme.mx)("flex h-full items-center justify-center cursor-pointer", "border-l border-gridLine focus-visible:outline-none", fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
+    className: (0, import_react_ui_theme2.mx)("flex h-full items-center justify-center cursor-pointer", "border-l border-gridLine focus-visible:outline-none", fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
     onClick: () => onSelect?.(index)
-  }, /* @__PURE__ */ import_react2.default.createElement("span", {
+  }, /* @__PURE__ */ import_react3.default.createElement("span", {
     className: "flex w-full justify-center"
-  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ import_react2.default.createElement("div", {
+  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "z-20 absolute left-0 h-full min-w-[4px] border-l-4 border-accentSurface"
-  }), resizing && /* @__PURE__ */ import_react2.default.createElement("div", {
+  }), resizing && /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "z-20 absolute right-0 h-full min-h-[4px] border-l-4 border-accentSurface"
   })));
 };
-var SheetGrid = /* @__PURE__ */ (0, import_react2.forwardRef)(({ size, rows, columns, rowSizes, columnSizes }, forwardRef2) => {
+var SheetGrid = /* @__PURE__ */ (0, import_react3.forwardRef)(({ size, rows, columns, rowSizes, columnSizes }, forwardRef2) => {
   const { ref: containerRef, width: containerWidth = 0, height: containerHeight = 0 } = (0, import_react_resize_detector.useResizeDetector)({
     refreshRate: 200
   });
-  const scrollerRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useImperativeHandle)(forwardRef2, () => scrollerRef.current);
+  const scrollerRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useImperativeHandle)(forwardRef2, () => scrollerRef.current);
   const { model, cursor, range, editing, setCursor, setRange, setEditing, onInfo } = useSheetContext();
-  const initialText = (0, import_react2.useRef)();
-  const quickEdit = (0, import_react2.useRef)(false);
-  const [, forceUpdate] = (0, import_react2.useState)({});
-  (0, import_react2.useEffect)(() => {
+  const initialText = (0, import_react3.useRef)();
+  const quickEdit = (0, import_react3.useRef)(false);
+  const [, forceUpdate] = (0, import_react3.useState)({});
+  (0, import_react3.useEffect)(() => {
     const unsubscribe = model.update.on(() => {
       (0, import_log.log)("updated", {
         id: model.id
       }, {
-        F: __dxlog_file4,
-        L: 737,
+        F: __dxlog_file2,
+        L: 730,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2299,7 +1410,7 @@ var SheetGrid = /* @__PURE__ */ (0, import_react2.forwardRef)(({ size, rows, col
   }, [
     model
   ]);
-  const inputRef = (0, import_react2.useRef)(null);
+  const inputRef = (0, import_react3.useRef)(null);
   const handleKeyDown = (ev) => {
     const isMacOS = /Mac|iPhone|iPod|iPad/.test(navigator.userAgent);
     if (cursor && (isMacOS && ev.metaKey || ev.ctrlKey)) {
@@ -2407,16 +1518,16 @@ var SheetGrid = /* @__PURE__ */ (0, import_react2.forwardRef)(({ size, rows, col
   const id = (0, import_echo.fullyQualifiedId)(model.sheet);
   const attendableAttrs = (0, import_react_ui_attention.createAttendableAttributes)(id);
   const hasAttention = (0, import_react_ui_attention.useHasAttention)(id);
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
     ref: containerRef,
     role: "grid",
     className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ import_react2.default.createElement("div", {
-    className: (0, import_react_ui_theme.mx)("z-20 absolute inset-0 border border-gridLine pointer-events-none")
-  }), /* @__PURE__ */ import_react2.default.createElement("div", {
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: (0, import_react_ui_theme2.mx)("z-20 absolute inset-0 border border-gridLine pointer-events-none")
+  }), /* @__PURE__ */ import_react3.default.createElement("div", {
     ref: scrollerRef,
-    className: (0, import_react_ui_theme.mx)("grow", hasAttention && "overflow-auto scrollbar-thin")
-  }, /* @__PURE__ */ import_react2.default.createElement("div", {
+    className: (0, import_react_ui_theme2.mx)("grow", hasAttention && "overflow-auto scrollbar-thin")
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "relative select-none",
     style: {
       width,
@@ -2424,10 +1535,10 @@ var SheetGrid = /* @__PURE__ */ (0, import_react2.forwardRef)(({ size, rows, col
     },
     onClick: () => inputRef.current?.focus(),
     ...handlers
-  }, scrollerRef.current && /* @__PURE__ */ import_react2.default.createElement(SelectionOverlay, {
+  }, scrollerRef.current && /* @__PURE__ */ import_react3.default.createElement(SelectionOverlay, {
     root: scrollerRef.current
   }), rowRange.map(({ row, top, height: height2 }) => {
-    return columnRange.map(({ col, left, width: width2 }) => {
+    return columnRange.map(({ column, left, width: width2 }) => {
       const style = {
         position: "absolute",
         top,
@@ -2437,11 +1548,11 @@ var SheetGrid = /* @__PURE__ */ (0, import_react2.forwardRef)(({ size, rows, col
       };
       const cell = {
         row,
-        col
+        column
       };
-      const id2 = addressToA1Notation(cell);
-      const idx = addressToIndex(model.sheet, cell);
-      const active = posEquals(cursor, cell);
+      const id2 = (0, import_chunk_5KKJ4NPP.addressToA1Notation)(cell);
+      const idx = model.addressToIndex(cell);
+      const active = (0, import_chunk_5KKJ4NPP.posEquals)(cursor, cell);
       if (active && editing) {
         const value = initialText.current ?? model.getCellText(cell) ?? "";
         const handleClose = (value2) => {
@@ -2473,7 +1584,7 @@ var SheetGrid = /* @__PURE__ */ (0, import_react2.forwardRef)(({ size, rows, col
           inputRef.current?.focus();
           setEditing(false);
         };
-        return /* @__PURE__ */ import_react2.default.createElement(GridCellEditor, {
+        return /* @__PURE__ */ import_react3.default.createElement(GridCellEditor, {
           key: idx,
           value,
           style,
@@ -2481,7 +1592,7 @@ var SheetGrid = /* @__PURE__ */ (0, import_react2.forwardRef)(({ size, rows, col
           onClose: handleClose
         });
       }
-      return /* @__PURE__ */ import_react2.default.createElement(SheetCell, {
+      return /* @__PURE__ */ import_react3.default.createElement(SheetCell, {
         key: id2,
         id: id2,
         cell,
@@ -2493,7 +1604,7 @@ var SheetGrid = /* @__PURE__ */ (0, import_react2.forwardRef)(({ size, rows, col
         }
       });
     });
-  }))), /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react2.default.createElement("input", {
+  }))), /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react3.default.createElement("input", {
     ref: inputRef,
     autoFocus: true,
     className: "absolute w-[1px] h-[1px] bg-transparent outline-none border-none caret-transparent",
@@ -2514,34 +1625,20 @@ var SelectionOverlay = ({ root }) => {
   const b1 = getRelativeClientRect(root, c1);
   const b2 = getRelativeClientRect(root, c2);
   const bounds = getRectUnion(b1, b2);
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
     role: "none",
     style: bounds,
     className: "z-10 absolute pointer-events-none bg-gridSelectionOverlay border border-gridOverlay"
   });
 };
 var SheetCell = ({ id, cell, style, active, onSelect }) => {
-  const { formatting, editing, setRange, decorations, model: { sheet } } = useSheetContext();
+  const { formatting, editing, setRange } = useSheetContext();
   const { value, classNames } = formatting.getFormatting(cell);
-  const decorationsForCell = decorations.getDecorationsForCell(addressToIndex(sheet, cell)) ?? [];
-  const decorationAddedClasses = (0, import_react2.useMemo)(() => decorationsForCell.flatMap((d) => d.classNames ?? []), [
-    decorationsForCell
-  ]);
-  const decoratedContent = decorationsForCell.reduce((children, { decorate }) => {
-    if (!decorate) {
-      return children;
-    }
-    const DecoratorComponent = decorate;
-    return /* @__PURE__ */ import_react2.default.createElement(DecoratorComponent, null, children);
-  }, /* @__PURE__ */ import_react2.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme.mx)("flex flex-grow bs-full is-full px-2 items-center truncate cursor-pointer", ...decorationAddedClasses)
-  }, value));
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
     [`data-${CELL_DATA_KEY}`]: id,
     role: "cell",
     style,
-    className: (0, import_react_ui_theme.mx)("border border-gridLine cursor-pointer", fragments.cell, active && [
+    className: (0, import_react_ui_theme2.mx)("flex w-full h-full px-2 py-1 truncate items-center border border-gridLine cursor-pointer", fragments.cell, active && [
       "z-20",
       fragments.cellSelected
     ], classNames),
@@ -2555,36 +1652,36 @@ var SheetCell = ({ id, cell, style, active, onSelect }) => {
       }
     },
     onDoubleClick: () => onSelect?.(cell, true)
-  }, decoratedContent);
+  }, value);
 };
 var GridCellEditor = ({ style, value, onNav, onClose }) => {
   const { model, range } = useSheetContext();
-  const notifier = (0, import_react2.useRef)();
-  (0, import_react2.useEffect)(() => {
+  const notifier = (0, import_react3.useRef)();
+  (0, import_react3.useEffect)(() => {
     if (range) {
-      notifier.current?.(rangeToA1Notation(range));
+      notifier.current?.((0, import_chunk_5KKJ4NPP.rangeToA1Notation)(range));
     }
   }, [
     range
   ]);
-  const extension = (0, import_react2.useMemo)(() => [
+  const extension = (0, import_react3.useMemo)(() => [
     editorKeys({
       onNav,
       onClose
     }),
     sheetExtension({
-      functions: model.graph.getFunctions()
+      functions: model.functions
     }),
     rangeExtension((fn) => notifier.current = fn)
   ], [
     model
   ]);
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
     role: "cell",
     style,
-    className: (0, import_react_ui_theme.mx)("z-20 flex", fragments.cellSelected),
+    className: (0, import_react_ui_theme2.mx)("z-20 flex", fragments.cellSelected),
     onClick: (ev) => ev.stopPropagation()
-  }, /* @__PURE__ */ import_react2.default.createElement(CellEditor, {
+  }, /* @__PURE__ */ import_react3.default.createElement(CellEditor, {
     autoFocus: true,
     value,
     extension
@@ -2597,30 +1694,30 @@ var SheetStatusBar = () => {
   if (cursor) {
     value = model.getCellValue(cursor);
     if (typeof value === "string" && value.charAt(0) === "=") {
-      value = model.graph.mapFunctionBindingFromId(model.mapFormulaIndicesToRefs(value));
+      value = model.mapFormulaBindingFromId(model.mapFormulaIndicesToRefs(value));
       isFormula = true;
     } else if (value != null) {
       value = String(value);
     }
   }
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
-    className: (0, import_react_ui_theme.mx)("flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x border-gridLine")
-  }, /* @__PURE__ */ import_react2.default.createElement("div", {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: (0, import_react_ui_theme2.mx)("flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x border-gridLine")
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "flex gap-4 items-center"
-  }, /* @__PURE__ */ import_react2.default.createElement("div", {
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "flex w-16 items-center font-mono"
-  }, range && rangeToA1Notation(range) || cursor && addressToA1Notation(cursor)), /* @__PURE__ */ import_react2.default.createElement("div", {
+  }, range && (0, import_chunk_5KKJ4NPP.rangeToA1Notation)(range) || cursor && (0, import_chunk_5KKJ4NPP.addressToA1Notation)(cursor)), /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "flex gap-2 items-center"
-  }, /* @__PURE__ */ import_react2.default.createElement(import_react.Function, {
-    className: (0, import_react_ui_theme.mx)("text-greenText", isFormula ? "visible" : "invisible")
-  }), /* @__PURE__ */ import_react2.default.createElement("span", {
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react2.Function, {
+    className: (0, import_react_ui_theme2.mx)("text-greenText", isFormula ? "visible" : "invisible")
+  }), /* @__PURE__ */ import_react3.default.createElement("span", {
     className: "font-mono"
   }, value))));
 };
 var SheetDebug = () => {
   const { model, cursor, range } = useSheetContext();
-  const [, forceUpdate] = (0, import_react2.useState)({});
-  (0, import_react2.useEffect)(() => {
+  const [, forceUpdate] = (0, import_react3.useState)({});
+  (0, import_react3.useEffect)(() => {
     const accessor = (0, import_echo.createDocAccessor)(model.sheet, []);
     const handleUpdate = () => forceUpdate({});
     accessor.handle.addListener("change", handleUpdate);
@@ -2631,9 +1728,9 @@ var SheetDebug = () => {
   }, [
     model
   ]);
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
-    className: (0, import_react_ui_theme.mx)("z-20 absolute right-0 top-20 bottom-20 w-[30rem] overflow-auto scrollbar-thin", "border border-gridLine text-xs bg-neutral-50 dark:bg-black text-cyan-500 font-mono p-1 opacity-80")
-  }, /* @__PURE__ */ import_react2.default.createElement("pre", {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: (0, import_react_ui_theme2.mx)("z-20 absolute right-0 top-20 bottom-20 w-[30rem] overflow-auto scrollbar-thin", "border border-gridLine text-xs bg-neutral-50 dark:bg-black text-cyan-500 font-mono p-1 opacity-80")
+  }, /* @__PURE__ */ import_react3.default.createElement("pre", {
     className: "whitespace-pre-wrap"
   }, JSON.stringify({
     cursor,
@@ -2654,15 +1751,15 @@ var Sheet = {
   StatusBar: SheetStatusBar,
   Debug: SheetDebug
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ComputeGraphContextProvider,
-  Sheet,
-  SheetContainer,
-  addressToIndex,
-  compareIndexPositions,
-  createSheet,
-  useComputeGraph,
-  useSheetContext
-});
-//# sourceMappingURL=chunk-6DQABRGJ.cjs.map
+var SheetContainer = ({ sheet, space, role, remoteFunctionUrl }) => {
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme.mx)("flex", role === "article" && "row-span-2", role === "section" && "aspect-square border-y border-is border-separator")
+  }, /* @__PURE__ */ import_react.default.createElement(Sheet.Root, {
+    sheet,
+    space,
+    remoteFunctionUrl
+  }, /* @__PURE__ */ import_react.default.createElement(Sheet.Main, null)));
+};
+var SheetContainer_default = SheetContainer;
+//# sourceMappingURL=SheetContainer-AXQV3ZT5.cjs.map