@dxos/plugin-sheet 0.6.12-main.5cc132e → 0.6.12-main.89e9959

package/dist/lib/node-esm/{SheetContainer-Y7ZMFBAP.mjs → chunk-KK3XL37M.mjs}

@@ -1,33 +1,14 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 import {
-  useComputeGraph
-} from "./chunk-PGKZPKUD.mjs";
-import {
-  SheetModel,
-  addressFromA1Notation,
-  addressFromIndex,
-  addressToA1Notation,
-  addressToIndex,
-  closest,
-  columnLetter,
-  defaultFunctions,
-  inRange,
-  posEquals,
-  rangeFromIndex,
-  rangeToA1Notation
-} from "./chunk-GNNVBNCX.mjs";
-import {
+  SheetType,
   ValueTypeEnum
-} from "./chunk-WUPTZUTX.mjs";
+} from "./chunk-RR2AO4SM.mjs";
 import {
   SHEET_PLUGIN
-} from "./chunk-JRL5LGCE.mjs";
-
-// packages/plugins/plugin-sheet/src/components/SheetContainer.tsx
-import React7, { useCallback as useCallback2 } from "react";
-import { useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
-import { fullyQualifiedId as fullyQualifiedId4 } from "@dxos/react-client/echo";
-import { useIsDirectlyAttended } from "@dxos/react-ui-attention";
-import { focusRing, mx as mx4 } from "@dxos/react-ui-theme";
+} from "./chunk-IU2L277A.mjs";
+import {
+  createSheetName
+} from "./chunk-5WPZCXNS.mjs";
 
 // packages/plugins/plugin-sheet/src/components/Sheet/Sheet.tsx
 import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
@@ -35,17 +16,183 @@ import { restrictToHorizontalAxis, restrictToVerticalAxis } from "@dnd-kit/modif
 import { getEventCoordinates, useCombinedRefs } from "@dnd-kit/utilities";
 import { Function as FunctionIcon } from "@phosphor-icons/react";
 import { Resizable } from "re-resizable";
-import React4, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo3, useRef, useState as useState4 } from "react";
+import React6, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo4, useRef, useState as useState5 } from "react";
 import { createPortal } from "react-dom";
 import { useResizeDetector } from "react-resize-detector";
 import { debounce as debounce2 } from "@dxos/async";
-import { fullyQualifiedId as fullyQualifiedId3, createDocAccessor } from "@dxos/client/echo";
-import { log } from "@dxos/log";
-import { createAttendableAttributes, useHasAttention } from "@dxos/react-ui-attention";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { fullyQualifiedId as fullyQualifiedId2, createDocAccessor } from "@dxos/client/echo";
+import { log as log2 } from "@dxos/log";
+import { ATTENABLE_ATTRIBUTE, useAttendableAttributes, useAttention, useAttentionPath } from "@dxos/react-ui-attention";
+import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-sheet/src/components/Sheet/grid.ts
 import { useEffect, useState } from "react";
+
+// packages/plugins/plugin-sheet/src/defs/types.ts
+import { invariant } from "@dxos/invariant";
+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) => {
+  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+)/);
+  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;
+};
+
+// packages/plugins/plugin-sheet/src/defs/util.ts
+import { randomBytes } from "@dxos/crypto";
+import { create } from "@dxos/echo-schema";
+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 = 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 = create(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;
+  }
+};
+
+// packages/plugins/plugin-sheet/src/components/Sheet/grid.ts
 var axisWidth = "calc(var(--rail-size)-2px)";
 var axisHeight = 34;
 var minWidth = 40;
@@ -87,7 +234,7 @@ var useGridLayout = ({ scroller, size, rows, columns, rowSizes, columnSizes }) =
       const left = x;
       x += width2 - 1;
       return {
-        column: i,
+        col: i,
         left,
         width: width2
       };
@@ -192,14 +339,14 @@ var handleNav = (ev, cursor, range, size) => {
         break;
       }
       case "ArrowLeft": {
-        if (opposite.column > 0) {
-          opposite.column -= 1;
+        if (opposite.col > 0) {
+          opposite.col -= 1;
         }
         break;
       }
       case "ArrowRight": {
-        if (opposite.column < size.numColumns - 1) {
-          opposite.column += 1;
+        if (opposite.col < size.numCols - 1) {
+          opposite.col += 1;
         }
         break;
       }
@@ -217,18 +364,18 @@ var handleNav = (ev, cursor, range, size) => {
     cursor: next
   };
 };
-var handleArrowNav = (ev, cursor, { numRows, numColumns }) => {
+var handleArrowNav = (ev, cursor, { numRows, numCols }) => {
   switch (ev.key) {
     case "ArrowUp":
       if (cursor === void 0) {
         return {
           row: 0,
-          column: 0
+          col: 0
         };
       } else if (cursor.row > 0) {
         return {
           row: ev.metaKey ? 0 : cursor.row - 1,
-          column: cursor.column
+          col: cursor.col
         };
       }
       break;
@@ -236,12 +383,12 @@ var handleArrowNav = (ev, cursor, { numRows, numColumns }) => {
       if (cursor === void 0) {
         return {
           row: 0,
-          column: 0
+          col: 0
         };
       } else if (cursor.row < numRows - 1) {
         return {
           row: ev.metaKey ? numRows - 1 : cursor.row + 1,
-          column: cursor.column
+          col: cursor.col
         };
       }
       break;
@@ -249,12 +396,12 @@ var handleArrowNav = (ev, cursor, { numRows, numColumns }) => {
       if (cursor === void 0) {
         return {
           row: 0,
-          column: 0
+          col: 0
         };
-      } else if (cursor.column > 0) {
+      } else if (cursor.col > 0) {
         return {
           row: cursor.row,
-          column: ev.metaKey ? 0 : cursor.column - 1
+          col: ev.metaKey ? 0 : cursor.col - 1
         };
       }
       break;
@@ -262,24 +409,24 @@ var handleArrowNav = (ev, cursor, { numRows, numColumns }) => {
       if (cursor === void 0) {
         return {
           row: 0,
-          column: 0
+          col: 0
         };
-      } else if (cursor.column < numColumns - 1) {
+      } else if (cursor.col < numCols - 1) {
         return {
           row: cursor.row,
-          column: ev.metaKey ? numColumns - 1 : cursor.column + 1
+          col: ev.metaKey ? numCols - 1 : cursor.col + 1
         };
       }
       break;
     case "Home":
       return {
         row: 0,
-        column: 0
+        col: 0
       };
     case "End":
       return {
         row: numRows - 1,
-        column: numColumns - 1
+        col: numCols - 1
       };
   }
 };
@@ -336,14 +483,13 @@ var useRangeSelect = (cb) => {
 };
 
 // packages/plugins/plugin-sheet/src/components/Sheet/sheet-context.tsx
-import React, { createContext, useContext, useState as useState3, useEffect as useEffect2, useMemo } from "react";
-import { invariant } from "@dxos/invariant";
-import { fullyQualifiedId } from "@dxos/react-client/echo";
+import React3, { createContext as createContext2, useContext as useContext2, useMemo as useMemo2, useState as useState4 } from "react";
+import { invariant as invariant3 } from "@dxos/invariant";
 
 // packages/plugins/plugin-sheet/src/components/Sheet/decorations.ts
-import { create } from "@dxos/echo-schema";
+import { create as create2 } from "@dxos/echo-schema";
 var createDecorations = () => {
-  const { decorations } = create({
+  const { decorations } = create2({
     decorations: {}
   });
   const addDecoration = (cellIndex, decorator) => {
@@ -379,27 +525,68 @@ var createDecorations = () => {
   };
 };
 
-// packages/plugins/plugin-sheet/src/components/Sheet/formatting.ts
+// packages/plugins/plugin-sheet/src/hooks/useComputeGraph.ts
+import { useContext } from "react";
+import { raise } from "@dxos/debug";
+import { useAsyncState } from "@dxos/react-hooks";
+
+// packages/plugins/plugin-sheet/src/components/index.ts
+import React2 from "react";
+
+// packages/plugins/plugin-sheet/src/components/ComputeGraph/ComputeGraphContextProvider.tsx
+import React, { createContext } from "react";
+var ComputeGraphContext = /* @__PURE__ */ createContext(void 0);
+var ComputeGraphContextProvider = ({ registry, children }) => {
+  return /* @__PURE__ */ React.createElement(ComputeGraphContext.Provider, {
+    value: {
+      registry
+    }
+  }, children);
+};
+
+// packages/plugins/plugin-sheet/src/components/index.ts
+var SheetContainer = React2.lazy(() => import("./SheetContainer-4XS2G25Z.mjs"));
+
+// packages/plugins/plugin-sheet/src/hooks/useComputeGraph.ts
+var useComputeGraph = (space) => {
+  const { registry } = useContext(ComputeGraphContext) ?? raise(new Error("Missing ComputeGraphContext"));
+  const [graph] = useAsyncState(async () => {
+    if (space) {
+      const graph2 = registry.getOrCreateGraph(space);
+      await graph2.open();
+      return graph2;
+    }
+  }, [
+    space,
+    registry
+  ]);
+  return graph;
+};
+
+// packages/plugins/plugin-sheet/src/hooks/useFormattingModel.ts
+import { useMemo } from "react";
+
+// packages/plugins/plugin-sheet/src/model/formatting-model.ts
 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 = addressToIndex(this._model.sheet, 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);
+    for (const [idx2, _formatting] of Object.entries(this._model.sheet.formatting)) {
+      const range = rangeFromIndex(this._model.sheet, idx2);
       if (inRange(range, cell)) {
         if (_formatting.classNames) {
           classNames.push(..._formatting.classNames);
@@ -410,7 +597,7 @@ 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 ValueTypeEnum.Boolean: {
         return {
@@ -460,21 +647,21 @@ var FormattingModel = class {
       // Dates.
       //
       case ValueTypeEnum.DateTime: {
-        const date = this.model.toLocalDate(value);
+        const date = this._model.toLocalDate(value);
         return {
           value: date.toLocaleString(locales),
           classNames
         };
       }
       case ValueTypeEnum.Date: {
-        const date = this.model.toLocalDate(value);
+        const date = this._model.toLocalDate(value);
         return {
           value: date.toLocaleDateString(locales),
           classNames
         };
       }
       case ValueTypeEnum.Time: {
-        const date = this.model.toLocalDate(value);
+        const date = this._model.toLocalDate(value);
         return {
           value: date.toLocaleTimeString(locales),
           classNames
@@ -490,85 +677,554 @@ var FormattingModel = class {
   }
 };
 
-// packages/plugins/plugin-sheet/src/components/Sheet/sheet-context.tsx
-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__ */ createContext(null);
-var useSheetContext = () => {
-  const context = useContext(SheetContext);
-  invariant(context, void 0, {
-    F: __dxlog_file,
-    L: 49,
-    S: void 0,
-    A: [
-      "context",
-      ""
-    ]
-  });
-  return context;
+// packages/plugins/plugin-sheet/src/model/sheet-model.ts
+import { Event } from "@dxos/async";
+import { Resource } from "@dxos/context";
+import { getTypename } from "@dxos/echo-schema";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { PublicKey } from "@dxos/keys";
+import { log } from "@dxos/log";
+import { DetailedCellError, ExportedCellChange } from "#hyperformula";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/model/sheet-model.ts";
+var typeMap = {
+  BOOLEAN: ValueTypeEnum.Boolean,
+  NUMBER_RAW: ValueTypeEnum.Number,
+  NUMBER_PERCENT: ValueTypeEnum.Percent,
+  NUMBER_CURRENCY: ValueTypeEnum.Currency,
+  NUMBER_DATETIME: ValueTypeEnum.DateTime,
+  NUMBER_DATE: ValueTypeEnum.Date,
+  NUMBER_TIME: ValueTypeEnum.Time
 };
-var mapFormulaBindingToId = (functions) => (formula) => {
-  return formula.replace(/([a-zA-Z0-9]+)\((.*)\)/g, (match, binding, args) => {
-    if (defaultFunctions.find((fn2) => fn2.name === binding) || binding === "EDGE") {
-      return match;
+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 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 Resource {
+  constructor(_graph, _sheet, _options = {}) {
+    super();
+    this._graph = _graph;
+    this._sheet = _sheet;
+    this._options = _options;
+    this.id = `model-${PublicKey.random().truncate()}`;
+    this.update = new 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() {
+    log("initialize", {
+      id: this.id
+    }, {
+      F: __dxlog_file2,
+      L: 104,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    initialize(this._sheet);
+    this._node = this._graph.getOrCreateNode(createSheetName({
+      type: getTypename(this._sheet),
+      id: this._sheet.id
+    }));
+    await this._node.open();
+    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() {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 124,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    this._node.graph.hf.clearSheet(this._node.sheetId);
+    Object.entries(this._sheet.cells).forEach(([key, { value }]) => {
+      invariant2(this._node, void 0, {
+        F: __dxlog_file2,
+        L: 127,
+        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) {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 169,
+      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) {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 180,
+      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) {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 189,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    this._node.graph.hf.copy(toModelRange(this._node.sheetId, range));
+  }
+  paste(cell) {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 194,
+      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 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() {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 209,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    if (this._node.graph.hf.isThereSomethingToUndo()) {
+      this._node.graph.hf.undo();
     }
-    const fn = functions.find((fn2) => fn2.binding === binding);
-    if (fn) {
-      return `${fullyQualifiedId(fn)}(${args})`;
+  }
+  redo() {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 217,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    if (this._node.graph.hf.isThereSomethingToRedo()) {
+      this._node.graph.hf.redo();
+    }
+  }
+  /**
+  * 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));
     } else {
-      return match;
+      return String(value);
     }
-  });
-};
-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;
+  }
+  /**
+  * 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) {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 260,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    const value = this._node.graph.hf.getCellValue(toSimpleCellAddress(this._node.sheetId, cell));
+    if (value instanceof DetailedCellError) {
+      return value.toString();
+    }
+    return value;
+  }
+  /**
+  * Get value type.
+  */
+  getValueType(cell) {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 273,
+      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) {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 283,
+      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;
     }
-    const fn = functions.find((fn2) => fullyQualifiedId(fn2) === id);
-    if (fn?.binding) {
-      return `${fn.binding}(${args})`;
+    if (refresh) {
+      this.reset();
+    }
+    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];
     } else {
-      return match;
+      if (typeof value === "string" && value.charAt(0) === "=") {
+        value = this._graph.mapFunctionBindingToId(this.mapFormulaRefsToIndices(value));
+      }
+      this._sheet.cells[idx] = {
+        value
+      };
     }
-  });
+  }
+  /**
+  * 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) {
+    invariant2(formula.charAt(0) === "=", void 0, {
+      F: __dxlog_file2,
+      L: 372,
+      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) {
+    invariant2(formula.charAt(0) === "=", void 0, {
+      F: __dxlog_file2,
+      L: 382,
+      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) {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 403,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    return this._node.graph.hf.numberToDateTime(num);
+  }
+  toDate(num) {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 408,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    return this._node.graph.hf.numberToDate(num);
+  }
+  toTime(num) {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 413,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    return this._node.graph.hf.numberToTime(num);
+  }
+};
+
+// packages/plugins/plugin-sheet/src/hooks/useFormattingModel.ts
+var useFormattingModel = (model) => {
+  return useMemo(() => model && new FormattingModel(model), [
+    model
+  ]);
 };
-var SheetContextProvider = ({ children, sheet, space, readonly, onInfo, ...options }) => {
-  const graph = useComputeGraph(space, options);
-  const [cursor, setCursor] = useState3();
-  const [range, setRange] = useState3();
-  const [editing, setEditing] = useState3(false);
-  const decorations = useMemo(() => createDecorations(), []);
-  const [[model, formatting] = [], setModels] = useState3(void 0);
+
+// packages/plugins/plugin-sheet/src/hooks/useSheetModel.ts
+import { useEffect as useEffect2, useState as useState3 } from "react";
+var useSheetModel = (graph, sheet, { readonly } = {}) => {
+  const [model, setModel] = useState3();
   useEffect2(() => {
+    if (!graph || !sheet) {
+      return;
+    }
     let model2;
-    let formatting2;
     const t = setTimeout(async () => {
-      model2 = new SheetModel(graph, sheet, space, {
-        readonly,
-        mapFormulaBindingToId,
-        mapFormulaBindingFromId
+      model2 = new SheetModel(graph, sheet, {
+        readonly
       });
-      await model2.initialize();
-      formatting2 = new FormattingModel(model2);
-      setModels([
-        model2,
-        formatting2
-      ]);
+      await model2.open();
+      setModel(model2);
     });
     return () => {
       clearTimeout(t);
-      void model2?.destroy();
+      void model2?.close();
     };
   }, [
     graph,
+    sheet,
     readonly
   ]);
-  if (!model || !formatting) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(SheetContext.Provider, {
+  return model;
+};
+
+// packages/plugins/plugin-sheet/src/components/Sheet/sheet-context.tsx
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/components/Sheet/sheet-context.tsx";
+var SheetContext = /* @__PURE__ */ createContext2(null);
+var useSheetContext = () => {
+  const context = useContext2(SheetContext);
+  invariant3(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] = useState4();
+  const [range, setRange] = useState4();
+  const [editing, setEditing] = useState4(false);
+  const decorations = useMemo2(() => createDecorations(), []);
+  return !model || !formatting ? null : /* @__PURE__ */ React3.createElement(SheetContext.Provider, {
     value: {
       model,
       formatting,
@@ -587,23 +1243,22 @@ var SheetContextProvider = ({ children, sheet, space, readonly, onInfo, ...optio
 
 // packages/plugins/plugin-sheet/src/components/Sheet/threads.tsx
 import { effect } from "@preact/signals-core";
-import React2, { useCallback, useEffect as useEffect3, useMemo as useMemo2 } from "react";
+import React4, { useCallback, useEffect as useEffect3, useMemo as useMemo3 } from "react";
 import { LayoutAction, useIntentDispatcher, useIntentResolver } from "@dxos/app-framework";
 import { debounce } from "@dxos/async";
-import { fullyQualifiedId as fullyQualifiedId2 } from "@dxos/react-client/echo";
+import { fullyQualifiedId } from "@dxos/react-client/echo";
 import { Icon, useTranslation } from "@dxos/react-ui";
-import { mx } from "@dxos/react-ui-theme";
 var CommentIndicator = () => {
-  return /* @__PURE__ */ React2.createElement("div", {
+  return /* @__PURE__ */ React4.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 = useIntentDispatcher();
-  const [isHovered, setIsHovered] = React2.useState(true);
+  const [isHovered, setIsHovered] = React4.useState(false);
   const { t } = useTranslation(SHEET_PLUGIN);
-  const handleClick = React2.useCallback((_event) => {
+  const handleClick = React4.useCallback((_event) => {
     void dispatch({
       action: LayoutAction.SET_LAYOUT,
       data: {
@@ -614,22 +1269,22 @@ var ThreadedCellWrapper = ({ children }) => {
   }, [
     dispatch
   ]);
-  return /* @__PURE__ */ React2.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: mx("relative h-full is-full"),
+    className: "relative h-full is-full",
     onMouseEnter: () => {
       setIsHovered(true);
     },
     onMouseLeave: () => {
       setIsHovered(false);
     }
-  }, /* @__PURE__ */ React2.createElement(CommentIndicator, null), isHovered && /* @__PURE__ */ React2.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement(CommentIndicator, null), isHovered && /* @__PURE__ */ React4.createElement("div", {
     className: "absolute inset-0 flex items-center justify-end pr-1"
-  }, /* @__PURE__ */ React2.createElement("button", {
+  }, /* @__PURE__ */ React4.createElement("button", {
     className: "ch-button text-xs min-bs-0 p-1",
     onClick: handleClick,
     "aria-label": t("open comment for sheet cell")
-  }, /* @__PURE__ */ React2.createElement(Icon, {
+  }, /* @__PURE__ */ React4.createElement(Icon, {
     icon: "ph--chat--regular",
     "aria-hidden": true
   }))), children);
@@ -638,7 +1293,7 @@ var createThreadDecoration = (cellIndex, threadId, sheetId) => {
   return {
     type: "comment",
     cellIndex,
-    decorate: (props) => /* @__PURE__ */ React2.createElement(ThreadedCellWrapper, props)
+    decorate: (props) => /* @__PURE__ */ React4.createElement(ThreadedCellWrapper, props)
   };
 };
 var useUpdateCursorOnThreadSelection = () => {
@@ -646,7 +1301,7 @@ var useUpdateCursorOnThreadSelection = () => {
   const handleScrollIntoView = useCallback(({ action, data }) => {
     switch (action) {
       case LayoutAction.SCROLL_INTO_VIEW: {
-        if (!data?.id || data?.cursor === void 0 || data?.id !== fullyQualifiedId2(model.sheet)) {
+        if (!data?.id || data?.cursor === void 0 || data?.id !== fullyQualifiedId(model.sheet)) {
           return;
         }
         const cellAddress = addressFromIndex(model.sheet, data.cursor);
@@ -662,10 +1317,10 @@ var useUpdateCursorOnThreadSelection = () => {
 var useSelectThreadOnCursorChange = () => {
   const { cursor, model } = useSheetContext();
   const dispatch = useIntentDispatcher();
-  const activeThreads = useMemo2(() => model.sheet.threads?.filter((thread) => !!thread && thread.status === "active") ?? [], [
+  const activeThreads = useMemo3(() => model.sheet.threads?.filter((thread) => !!thread && thread.status === "active") ?? [], [
     JSON.stringify(model.sheet.threads)
   ]);
-  const activeThreadAddresses = useMemo2(() => activeThreads.map((thread) => thread.anchor).filter((anchor) => anchor !== void 0).map((anchor) => addressFromIndex(model.sheet, anchor)), [
+  const activeThreadAddresses = useMemo3(() => activeThreads.map((thread) => thread.anchor).filter((anchor) => anchor !== void 0).map((anchor) => addressFromIndex(model.sheet, anchor)), [
     activeThreads,
     model.sheet
   ]);
@@ -681,7 +1336,7 @@ var useSelectThreadOnCursorChange = () => {
           {
             action: "dxos.org/plugin/thread/action/select",
             data: {
-              current: fullyQualifiedId2(closestThread)
+              current: fullyQualifiedId(closestThread)
             }
           }
         ]);
@@ -693,7 +1348,7 @@ var useSelectThreadOnCursorChange = () => {
     activeThreadAddresses,
     model.sheet
   ]);
-  const debounced = useMemo2(() => {
+  const debounced = useMemo3(() => {
     return debounce((cursor2) => requestAnimationFrame(() => selectClosestThread(cursor2)), 50);
   }, [
     selectClosestThread
@@ -710,10 +1365,10 @@ var useSelectThreadOnCursorChange = () => {
 };
 var useThreadDecorations = () => {
   const { decorations, model } = useSheetContext();
-  const sheet = useMemo2(() => model.sheet, [
+  const sheet = useMemo3(() => model.sheet, [
     model.sheet
   ]);
-  const sheetId = useMemo2(() => fullyQualifiedId2(sheet), [
+  const sheetId = useMemo3(() => fullyQualifiedId(sheet), [
     sheet
   ]);
   useEffect3(() => {
@@ -786,7 +1441,7 @@ var scrollIntoView = (scrollContainer, el) => {
 
 // packages/plugins/plugin-sheet/src/components/CellEditor/CellEditor.tsx
 import { EditorView, keymap } from "@codemirror/view";
-import React3 from "react";
+import React5 from "react";
 import { useThemeContext } from "@dxos/react-ui";
 import { createBasicExtensions, createThemeExtensions, preventNewline, useTextEditor } from "@dxos/react-ui-editor";
 var editorKeys = ({ onNav, onClose }) => {
@@ -834,20 +1489,60 @@ var editorKeys = ({ onNav, onClose }) => {
     {
       key: "Enter",
       run: (editor) => {
-        onClose(editor.state.doc.toString());
+        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
+        });
         return true;
       }
     },
     {
       key: "Escape",
       run: () => {
-        onClose(void 0);
+        onClose(void 0, {
+          key: "Escape"
+        });
         return true;
       }
     }
   ]);
 };
-var CellEditor = ({ value, extension, autoFocus, onBlur }) => {
+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 } = useThemeContext();
   const { parentRef } = useTextEditor(() => {
     return {
@@ -874,32 +1569,40 @@ var CellEditor = ({ value, extension, autoFocus, onBlur }) => {
           themeMode,
           slots: {
             editor: {
-              className: "flex w-full [&>.cm-scroller]:scrollbar-none"
+              className: editorVariants[variant].editor
             },
             content: {
-              className: "!px-2 !py-1"
+              className: editorVariants[variant].content
             }
           }
         })
       ]
     };
   }, [
-    extension
+    extension,
+    autoFocus,
+    value,
+    variant,
+    onBlur
   ]);
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     ref: parentRef,
-    className: "flex w-full"
+    className: editorVariants[variant].root,
+    style: box,
+    ...gridId && {
+      "data-grid": gridId
+    }
   });
 };
 
 // packages/plugins/plugin-sheet/src/components/CellEditor/extension.ts
 import { acceptCompletion, autocompletion, completionStatus, startCompletion } from "@codemirror/autocomplete";
 import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { Facet } from "@codemirror/state";
 import { ViewPlugin, keymap as keymap2 } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
 import { spreadsheet } from "codemirror-lang-spreadsheet";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+import { singleValueFacet } from "@dxos/react-ui-editor/state";
+import { mx } from "@dxos/react-ui-theme";
 var highlightStyles = HighlightStyle.define([
   // Function.
   {
@@ -930,7 +1633,7 @@ var highlightStyles = HighlightStyle.define([
     class: "text-unAccent"
   }
 ]);
-var languageFacet = Facet.define();
+var languageFacet = singleValueFacet();
 var sheetExtension = ({ functions = [] }) => {
   const { extension, language } = spreadsheet({
     idiom: "en-US",
@@ -1010,13 +1713,7 @@ var sheetExtension = ({ functions = [] }) => {
       // NOTE: Useful for debugging.
       closeOnBlur: false,
       icons: false,
-      tooltipClass: () => mx2(
-        // 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"
-      )
+      tooltipClass: () => mx("!-left-[1px] !top-[33px] !-m-0 border !border-t-0 [&>ul]:!min-w-[198px]", "[&>ul>li[aria-selected]]:!bg-accentSurface", "border-separator")
     }),
     keymap2.of([
       {
@@ -1053,7 +1750,7 @@ var rangeExtension = (onInit) => {
     update(view2) {
       const { anchor } = view2.state.selection.ranges[0];
       activeRange = void 0;
-      const [language] = view2.state.facet(languageFacet);
+      const language = view2.state.facet(languageFacet);
       const { topNode } = language.parser.parse(view2.state.doc.toString());
       visitTree(topNode, ({ type, from, to }) => {
         if (from <= anchor && to >= anchor) {
@@ -1105,7 +1802,7 @@ var visitTree = (node, callback) => {
 };
 
 // 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 __dxlog_file4 = "/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",
@@ -1113,16 +1810,16 @@ var fragments = {
   cellSelected: "bg-gridCellSelected text-baseText border !border-accentSurface"
 };
 var SheetRoot = ({ children, ...props }) => {
-  return /* @__PURE__ */ React4.createElement(SheetContextProvider, props, children);
+  return /* @__PURE__ */ React6.createElement(SheetContextProvider, props, children);
 };
-var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numColumns }, forwardRef2) => {
+var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numCols }, forwardRef2) => {
   const { model, cursor, setCursor, setRange, setEditing } = useSheetContext();
   const { rowsRef, columnsRef, contentRef } = useScrollHandlers();
   useThreads();
-  const [rows, setRows] = useState4([
+  const [rows, setRows] = useState5([
     ...model.sheet.rows
   ]);
-  const [columns, setColumns] = useState4([
+  const [columns, setColumns] = useState5([
     ...model.sheet.columns
   ]);
   useEffect4(() => {
@@ -1178,8 +1875,8 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numColumns },
       ...model.sheet.columns
     ]);
   };
-  const [rowSizes, setRowSizes] = useState4();
-  const [columnSizes, setColumnSizes] = useState4();
+  const [rowSizes, setRowSizes] = useState5();
+  const [columnSizes, setColumnSizes] = useState5();
   useEffect4(() => {
     const rowAccessor = createDocAccessor(model.sheet, [
       "rowMeta"
@@ -1229,48 +1926,48 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numColumns },
       }));
     }
   };
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     role: "none",
-    className: mx3("grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden", classNames)
-  }, /* @__PURE__ */ React4.createElement(GridCorner, {
+    className: mx2("grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden", classNames)
+  }, /* @__PURE__ */ React6.createElement(GridCorner, {
     onClick: () => {
       setCursor(void 0);
       setRange(void 0);
       setEditing(false);
     }
-  }), /* @__PURE__ */ React4.createElement(SheetColumns, {
+  }), /* @__PURE__ */ React6.createElement(SheetColumns, {
     ref: columnsRef,
     columns,
     sizes: columnSizes,
-    selected: cursor?.column,
-    onSelect: (column) => setCursor(cursor?.column === column ? void 0 : {
+    selected: cursor?.col,
+    onSelect: (col) => setCursor(cursor?.col === col ? void 0 : {
       row: -1,
-      column
+      col
     }),
     onResize: handleResizeColumn,
     onMove: handleMoveColumns
-  }), /* @__PURE__ */ React4.createElement(SheetRows, {
+  }), /* @__PURE__ */ React6.createElement(SheetRows, {
     ref: rowsRef,
     rows,
     sizes: rowSizes,
     selected: cursor?.row,
     onSelect: (row) => setCursor(cursor?.row === row ? void 0 : {
       row,
-      column: -1
+      col: -1
     }),
     onResize: handleResizeRow,
     onMove: handleMoveRows
-  }), /* @__PURE__ */ React4.createElement(SheetGrid, {
+  }), /* @__PURE__ */ React6.createElement(SheetGrid, {
     ref: contentRef,
     size: {
       numRows: numRows ?? rows.length,
-      numColumns: numColumns ?? columns.length
+      numCols: numCols ?? columns.length
     },
     rows,
     columns,
     rowSizes,
     columnSizes
-  }), /* @__PURE__ */ React4.createElement(GridCorner, null), /* @__PURE__ */ React4.createElement(SheetStatusBar, null));
+  }), /* @__PURE__ */ React6.createElement(GridCorner, null), /* @__PURE__ */ React6.createElement(SheetStatusBar, null));
 });
 var useScrollHandlers = () => {
   const rowsRef = useRef(null);
@@ -1313,13 +2010,13 @@ var useScrollHandlers = () => {
   };
 };
 var GridCorner = (props) => {
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     className: fragments.axis,
     ...props
   });
 };
 var MovingOverlay = ({ label }) => {
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     className: "flex w-full h-full justify-center items-center text-sm p-1 bg-gridOverlay cursor-pointer"
   }, label);
 };
@@ -1339,7 +2036,7 @@ var SheetRows = /* @__PURE__ */ forwardRef(({ rows, sizes, selected, onSelect, o
   });
   const keyboardSensor = useSensor(KeyboardSensor, {});
   const sensors = useSensors(mouseSensor, touchSensor, keyboardSensor);
-  const [active, setActive] = useState4(null);
+  const [active, setActive] = useState5(null);
   const handleDragStart = ({ active: active2 }) => {
     setActive(active2);
   };
@@ -1363,18 +2060,18 @@ var SheetRows = /* @__PURE__ */ forwardRef(({ rows, sizes, selected, onSelect, o
     }
     return transform;
   };
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ React4.createElement("div", {
-    className: mx3("z-20 absolute inset-0 border-y border-gridLine pointer-events-none"),
+  }, /* @__PURE__ */ React6.createElement("div", {
+    className: mx2("z-20 absolute inset-0 border-y border-gridLine pointer-events-none"),
     style: {
       width: axisWidth
     }
-  }), /* @__PURE__ */ React4.createElement("div", {
+  }), /* @__PURE__ */ React6.createElement("div", {
     ref: forwardRef2,
     role: "rowheader",
     className: "grow overflow-y-auto scrollbar-none"
-  }, /* @__PURE__ */ React4.createElement(DndContext, {
+  }, /* @__PURE__ */ React6.createElement(DndContext, {
     sensors,
     modifiers: [
       restrictToVerticalAxis,
@@ -1382,12 +2079,12 @@ var SheetRows = /* @__PURE__ */ forwardRef(({ rows, sizes, selected, onSelect, o
     ],
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React6.createElement("div", {
     className: "flex flex-col",
     style: {
       width: axisWidth
     }
-  }, rows.map((idx, index) => /* @__PURE__ */ React4.createElement(GridRowCell, {
+  }, rows.map((idx, index) => /* @__PURE__ */ React6.createElement(GridRowCell, {
     key: idx,
     idx,
     index,
@@ -1397,7 +2094,7 @@ var SheetRows = /* @__PURE__ */ forwardRef(({ rows, sizes, selected, onSelect, o
     selected: selected === index,
     onResize,
     onSelect
-  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement(DragOverlay, null, active && /* @__PURE__ */ React4.createElement(MovingOverlay, {
+  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React6.createElement(DragOverlay, null, active && /* @__PURE__ */ React6.createElement(MovingOverlay, {
     label: String(active.data.current.index + 1)
   })), document.body))));
 });
@@ -1415,8 +2112,8 @@ var GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onResi
     }
   });
   const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
-  const [initialSize, setInitialSize] = useState4(size);
-  const [resizing, setResizing] = useState4(false);
+  const [initialSize, setInitialSize] = useState5(size);
+  const [resizing, setResizing] = useState5(false);
   const scrollHandler = useRef();
   const handleResizeStart = (_ev, _dir, elementRef) => {
     const scrollContainer = elementRef.closest('[role="rowheader"]');
@@ -1438,7 +2135,7 @@ var GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onResi
     onResize?.(idx, initialSize + height, true);
     setResizing(false);
   };
-  return /* @__PURE__ */ React4.createElement(Resizable, {
+  return /* @__PURE__ */ React6.createElement(Resizable, {
     enable: {
       bottom: resize
     },
@@ -1450,17 +2147,17 @@ var GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onResi
     onResizeStart: handleResizeStart,
     onResize: handleResize,
     onResizeStop: handleResizeStop
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React6.createElement("div", {
     ref: setNodeRef,
     ...attributes,
     ...listeners,
-    className: mx3("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: mx2("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__ */ React4.createElement("span", {
+  }, /* @__PURE__ */ React6.createElement("span", {
     className: "flex w-full justify-center"
-  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React4.createElement("div", {
+  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React6.createElement("div", {
     className: "z-20 absolute top-0 w-full min-h-[4px] border-b-4 border-accentSurface"
-  }), resizing && /* @__PURE__ */ React4.createElement("div", {
+  }), resizing && /* @__PURE__ */ React6.createElement("div", {
     className: "z-20 absolute bottom-0 w-full min-h-[4px] border-b-4 border-accentSurface"
   })));
 };
@@ -1473,7 +2170,7 @@ var SheetColumns = /* @__PURE__ */ forwardRef(({ columns, sizes, selected, onSel
   });
   const keyboardSensor = useSensor(KeyboardSensor, {});
   const sensors = useSensors(mouseSensor, touchSensor, keyboardSensor);
-  const [active, setActive] = useState4(null);
+  const [active, setActive] = useState5(null);
   const handleDragStart = ({ active: active2 }) => {
     setActive(active2);
   };
@@ -1497,18 +2194,18 @@ var SheetColumns = /* @__PURE__ */ forwardRef(({ columns, sizes, selected, onSel
     }
     return transform;
   };
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ React4.createElement("div", {
-    className: mx3("z-20 absolute inset-0 border-x border-gridLine pointer-events-none"),
+  }, /* @__PURE__ */ React6.createElement("div", {
+    className: mx2("z-20 absolute inset-0 border-x border-gridLine pointer-events-none"),
     style: {
       height: axisHeight
     }
-  }), /* @__PURE__ */ React4.createElement("div", {
+  }), /* @__PURE__ */ React6.createElement("div", {
     ref: forwardRef2,
     role: "columnheader",
     className: "grow overflow-x-auto scrollbar-none"
-  }, /* @__PURE__ */ React4.createElement(DndContext, {
+  }, /* @__PURE__ */ React6.createElement(DndContext, {
     autoScroll: {
       enabled: true
     },
@@ -1519,12 +2216,12 @@ var SheetColumns = /* @__PURE__ */ forwardRef(({ columns, sizes, selected, onSel
     ],
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React6.createElement("div", {
     className: "flex h-full",
     style: {
       height: axisHeight
     }
-  }, columns.map((idx, index) => /* @__PURE__ */ React4.createElement(GridColumnCell, {
+  }, columns.map((idx, index) => /* @__PURE__ */ React6.createElement(GridColumnCell, {
     key: idx,
     idx,
     index,
@@ -1534,7 +2231,7 @@ var SheetColumns = /* @__PURE__ */ forwardRef(({ columns, sizes, selected, onSel
     selected: selected === index,
     onResize,
     onSelect
-  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement(DragOverlay, null, active && /* @__PURE__ */ React4.createElement(MovingOverlay, {
+  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React6.createElement(DragOverlay, null, active && /* @__PURE__ */ React6.createElement(MovingOverlay, {
     label: columnLetter(active.data.current.index)
   })), document.body))));
 });
@@ -1552,8 +2249,8 @@ var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onR
     }
   });
   const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
-  const [initialSize, setInitialSize] = useState4(size);
-  const [resizing, setResizing] = useState4(false);
+  const [initialSize, setInitialSize] = useState5(size);
+  const [resizing, setResizing] = useState5(false);
   const scrollHandler = useRef();
   const handleResizeStart = (_ev, _dir, elementRef) => {
     const scrollContainer = elementRef.closest('[role="columnheader"]');
@@ -1575,7 +2272,7 @@ var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onR
     onResize?.(idx, initialSize + width, true);
     setResizing(false);
   };
-  return /* @__PURE__ */ React4.createElement(Resizable, {
+  return /* @__PURE__ */ React6.createElement(Resizable, {
     enable: {
       right: resize
     },
@@ -1587,17 +2284,17 @@ var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onR
     onResizeStart: handleResizeStart,
     onResize: handleResize,
     onResizeStop: handleResizeStop
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React6.createElement("div", {
     ref: setNodeRef,
     ...attributes,
     ...listeners,
-    className: mx3("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: mx2("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__ */ React4.createElement("span", {
+  }, /* @__PURE__ */ React6.createElement("span", {
     className: "flex w-full justify-center"
-  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React4.createElement("div", {
+  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React6.createElement("div", {
     className: "z-20 absolute left-0 h-full min-w-[4px] border-l-4 border-accentSurface"
-  }), resizing && /* @__PURE__ */ React4.createElement("div", {
+  }), resizing && /* @__PURE__ */ React6.createElement("div", {
     className: "z-20 absolute right-0 h-full min-h-[4px] border-l-4 border-accentSurface"
   })));
 };
@@ -1610,14 +2307,14 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
   const { model, cursor, range, editing, setCursor, setRange, setEditing, onInfo } = useSheetContext();
   const initialText = useRef();
   const quickEdit = useRef(false);
-  const [, forceUpdate] = useState4({});
+  const [, forceUpdate] = useState5({});
   useEffect4(() => {
     const unsubscribe = model.update.on(() => {
-      log("updated", {
+      log2("updated", {
         id: model.id
       }, {
-        F: __dxlog_file2,
-        L: 737,
+        F: __dxlog_file4,
+        L: 738,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1734,19 +2431,18 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
     rowSizes,
     columnSizes
   });
-  const id = fullyQualifiedId3(model.sheet);
-  const attendableAttrs = createAttendableAttributes(id);
-  const hasAttention = useHasAttention(id);
-  return /* @__PURE__ */ React4.createElement("div", {
+  const id = fullyQualifiedId2(model.sheet);
+  const { hasAttention } = useAttention(id);
+  return /* @__PURE__ */ React6.createElement("div", {
     ref: containerRef,
     role: "grid",
     className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ React4.createElement("div", {
-    className: mx3("z-20 absolute inset-0 border border-gridLine pointer-events-none")
-  }), /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React6.createElement("div", {
+    className: mx2("z-20 absolute inset-0 border border-gridLine pointer-events-none")
+  }), /* @__PURE__ */ React6.createElement("div", {
     ref: scrollerRef,
-    className: mx3("grow", hasAttention && "overflow-auto scrollbar-thin")
-  }, /* @__PURE__ */ React4.createElement("div", {
+    className: mx2("grow", hasAttention && "overflow-auto scrollbar-thin")
+  }, /* @__PURE__ */ React6.createElement("div", {
     className: "relative select-none",
     style: {
       width,
@@ -1754,10 +2450,10 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
     },
     onClick: () => inputRef.current?.focus(),
     ...handlers
-  }, scrollerRef.current && /* @__PURE__ */ React4.createElement(SelectionOverlay, {
+  }, scrollerRef.current && /* @__PURE__ */ React6.createElement(SelectionOverlay, {
     root: scrollerRef.current
   }), rowRange.map(({ row, top, height: height2 }) => {
-    return columnRange.map(({ column, left, width: width2 }) => {
+    return columnRange.map(({ col, left, width: width2 }) => {
       const style = {
         position: "absolute",
         top,
@@ -1767,7 +2463,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
       };
       const cell = {
         row,
-        column
+        col
       };
       const id2 = addressToA1Notation(cell);
       const idx = addressToIndex(model.sheet, cell);
@@ -1803,7 +2499,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
           inputRef.current?.focus();
           setEditing(false);
         };
-        return /* @__PURE__ */ React4.createElement(GridCellEditor, {
+        return /* @__PURE__ */ React6.createElement(GridCellEditor, {
           key: idx,
           value,
           style,
@@ -1811,7 +2507,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
           onClose: handleClose
         });
       }
-      return /* @__PURE__ */ React4.createElement(SheetCell, {
+      return /* @__PURE__ */ React6.createElement(SheetCell, {
         key: id2,
         id: id2,
         cell,
@@ -1823,13 +2519,25 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
         }
       });
     });
-  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement("input", {
+  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React6.createElement(SheetInput, {
     ref: inputRef,
-    autoFocus: true,
+    id,
+    onKeyDown: handleKeyDown
+  }), document.body));
+});
+var SheetInput = /* @__PURE__ */ forwardRef(({ id, onKeyDown }, forwardedRef) => {
+  const path = useAttentionPath();
+  const attendableAttrs = useAttendableAttributes(id);
+  return path.toReversed().reduce((acc, part) => {
+    return /* @__PURE__ */ React6.createElement("div", {
+      [ATTENABLE_ATTRIBUTE]: part
+    }, acc);
+  }, /* @__PURE__ */ React6.createElement("input", {
+    ref: forwardedRef,
     className: "absolute w-[1px] h-[1px] bg-transparent outline-none border-none caret-transparent",
-    onKeyDown: handleKeyDown,
+    onKeyDown,
     ...attendableAttrs
-  }), document.body));
+  }));
 });
 var SelectionOverlay = ({ root }) => {
   const { range } = useSheetContext();
@@ -1844,7 +2552,7 @@ var SelectionOverlay = ({ root }) => {
   const b1 = getRelativeClientRect(root, c1);
   const b2 = getRelativeClientRect(root, c2);
   const bounds = getRectUnion(b1, b2);
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     style: bounds,
     className: "z-10 absolute pointer-events-none bg-gridSelectionOverlay border border-gridOverlay"
@@ -1854,7 +2562,7 @@ var SheetCell = ({ id, cell, style, active, onSelect }) => {
   const { formatting, editing, setRange, decorations, model: { sheet } } = useSheetContext();
   const { value, classNames } = formatting.getFormatting(cell);
   const decorationsForCell = decorations.getDecorationsForCell(addressToIndex(sheet, cell)) ?? [];
-  const decorationAddedClasses = useMemo3(() => decorationsForCell.flatMap((d) => d.classNames ?? []), [
+  const decorationAddedClasses = useMemo4(() => decorationsForCell.flatMap((d) => d.classNames ?? []), [
     decorationsForCell
   ]);
   const decoratedContent = decorationsForCell.reduce((children, { decorate }) => {
@@ -1862,16 +2570,16 @@ var SheetCell = ({ id, cell, style, active, onSelect }) => {
       return children;
     }
     const DecoratorComponent = decorate;
-    return /* @__PURE__ */ React4.createElement(DecoratorComponent, null, children);
-  }, /* @__PURE__ */ React4.createElement("div", {
+    return /* @__PURE__ */ React6.createElement(DecoratorComponent, null, children);
+  }, /* @__PURE__ */ React6.createElement("div", {
     role: "none",
-    className: mx3("flex flex-grow bs-full is-full px-2 items-center truncate cursor-pointer", ...decorationAddedClasses)
+    className: mx2("flex flex-grow bs-full is-full px-2 items-center truncate cursor-pointer", ...decorationAddedClasses)
   }, value));
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     [`data-${CELL_DATA_KEY}`]: id,
     role: "cell",
     style,
-    className: mx3("border border-gridLine cursor-pointer", fragments.cell, active && [
+    className: mx2("border border-gridLine cursor-pointer", fragments.cell, active && [
       "z-20",
       fragments.cellSelected
     ], classNames),
@@ -1897,24 +2605,24 @@ var GridCellEditor = ({ style, value, onNav, onClose }) => {
   }, [
     range
   ]);
-  const extension = useMemo3(() => [
+  const extension = useMemo4(() => [
     editorKeys({
       onNav,
       onClose
     }),
     sheetExtension({
-      functions: model.functions
+      functions: model.graph.getFunctions()
     }),
     rangeExtension((fn) => notifier.current = fn)
   ], [
     model
   ]);
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     role: "cell",
     style,
-    className: mx3("z-20 flex", fragments.cellSelected),
+    className: mx2("z-20 flex", fragments.cellSelected),
     onClick: (ev) => ev.stopPropagation()
-  }, /* @__PURE__ */ React4.createElement(CellEditor, {
+  }, /* @__PURE__ */ React6.createElement(CellEditor, {
     autoFocus: true,
     value,
     extension
@@ -1927,29 +2635,29 @@ var SheetStatusBar = () => {
   if (cursor) {
     value = model.getCellValue(cursor);
     if (typeof value === "string" && value.charAt(0) === "=") {
-      value = model.mapFormulaBindingFromId(model.mapFormulaIndicesToRefs(value));
+      value = model.graph.mapFunctionBindingFromId(model.mapFormulaIndicesToRefs(value));
       isFormula = true;
     } else if (value != null) {
       value = String(value);
     }
   }
-  return /* @__PURE__ */ React4.createElement("div", {
-    className: mx3("flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x border-gridLine")
-  }, /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
+    className: mx2("flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x border-gridLine")
+  }, /* @__PURE__ */ React6.createElement("div", {
     className: "flex gap-4 items-center"
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React6.createElement("div", {
     className: "flex w-16 items-center font-mono"
-  }, range && rangeToA1Notation(range) || cursor && addressToA1Notation(cursor)), /* @__PURE__ */ React4.createElement("div", {
+  }, range && rangeToA1Notation(range) || cursor && addressToA1Notation(cursor)), /* @__PURE__ */ React6.createElement("div", {
     className: "flex gap-2 items-center"
-  }, /* @__PURE__ */ React4.createElement(FunctionIcon, {
-    className: mx3("text-greenText", isFormula ? "visible" : "invisible")
-  }), /* @__PURE__ */ React4.createElement("span", {
+  }, /* @__PURE__ */ React6.createElement(FunctionIcon, {
+    className: mx2("text-greenText", isFormula ? "visible" : "invisible")
+  }), /* @__PURE__ */ React6.createElement("span", {
     className: "font-mono"
   }, value))));
 };
 var SheetDebug = () => {
   const { model, cursor, range } = useSheetContext();
-  const [, forceUpdate] = useState4({});
+  const [, forceUpdate] = useState5({});
   useEffect4(() => {
     const accessor = createDocAccessor(model.sheet, []);
     const handleUpdate = () => forceUpdate({});
@@ -1961,9 +2669,9 @@ var SheetDebug = () => {
   }, [
     model
   ]);
-  return /* @__PURE__ */ React4.createElement("div", {
-    className: mx3("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__ */ React4.createElement("pre", {
+  return /* @__PURE__ */ React6.createElement("div", {
+    className: mx2("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__ */ React6.createElement("pre", {
     className: "whitespace-pre-wrap"
   }, JSON.stringify({
     cursor,
@@ -1985,247 +2693,14 @@ var Sheet = {
   Debug: SheetDebug
 };
 
-// packages/plugins/plugin-sheet/src/components/Toolbar/Toolbar.tsx
-import { Calendar, ChatText, CurrencyDollar, Eraser, HighlighterCircle, TextAlignCenter, TextAlignLeft, TextAlignRight } from "@phosphor-icons/react";
-import { createContext as createContext2 } from "@radix-ui/react-context";
-import React6 from "react";
-import { DensityProvider, ElevationProvider, Toolbar as NaturalToolbar2, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { nonNullable } from "@dxos/util";
-
-// packages/plugins/plugin-sheet/src/components/Toolbar/common.tsx
-import React5 from "react";
-import { Toolbar as NaturalToolbar, Tooltip } from "@dxos/react-ui";
-import { getSize } from "@dxos/react-ui-theme";
-var iconStyles = getSize(5);
-var buttonStyles = "min-bs-0 p-2";
-var tooltipProps = {
-  side: "top",
-  classNames: "z-10"
-};
-var ToolbarSeparator = () => /* @__PURE__ */ React5.createElement("div", {
-  role: "separator",
-  className: "grow"
-});
-var ToolbarButton = ({ Icon: Icon2, children, ...props }) => {
-  return /* @__PURE__ */ React5.createElement(Tooltip.Root, null, /* @__PURE__ */ React5.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React5.createElement(NaturalToolbar.Button, {
-    variant: "ghost",
-    ...props,
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React5.createElement(Icon2, {
-    className: iconStyles
-  }), /* @__PURE__ */ React5.createElement("span", {
-    className: "sr-only"
-  }, children))), /* @__PURE__ */ React5.createElement(Tooltip.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React5.createElement(Tooltip.Arrow, null))));
-};
-var ToolbarToggleButton = ({ Icon: Icon2, children, ...props }) => {
-  return /* @__PURE__ */ React5.createElement(Tooltip.Root, null, /* @__PURE__ */ React5.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React5.createElement(NaturalToolbar.ToggleGroupItem, {
-    variant: "ghost",
-    ...props,
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React5.createElement(Icon2, {
-    className: iconStyles
-  }), /* @__PURE__ */ React5.createElement("span", {
-    className: "sr-only"
-  }, children))), /* @__PURE__ */ React5.createElement(Tooltip.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React5.createElement(Tooltip.Arrow, null))));
-};
-
-// packages/plugins/plugin-sheet/src/components/Toolbar/Toolbar.tsx
-var [ToolbarContextProvider, useToolbarContext] = createContext2("Toolbar");
-var ToolbarRoot = ({ children, onAction, classNames }) => {
-  return /* @__PURE__ */ React6.createElement(ToolbarContextProvider, {
-    onAction
-  }, /* @__PURE__ */ React6.createElement(DensityProvider, {
-    density: "fine"
-  }, /* @__PURE__ */ React6.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, /* @__PURE__ */ React6.createElement(NaturalToolbar2.Root, {
-    classNames: [
-      "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1",
-      classNames
-    ]
-  }, children))));
-};
-var formatOptions = [
-  {
-    type: "date",
-    Icon: Calendar,
-    getState: (state) => false
-  },
-  {
-    type: "currency",
-    Icon: CurrencyDollar,
-    getState: (state) => false
-  }
-];
-var Format = () => {
-  const { onAction } = useToolbarContext("Format");
-  const { t } = useTranslation2(SHEET_PLUGIN);
-  return /* @__PURE__ */ React6.createElement(NaturalToolbar2.ToggleGroup, {
-    type: "single"
-  }, formatOptions.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ React6.createElement(ToolbarToggleButton, {
-    key: type,
-    value: type,
-    Icon: Icon2,
-    // disabled={state?.blockType === 'codeblock'}
-    // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-    onClick: () => onAction?.({
-      type
-    })
-  }, t(`toolbar ${type} label`))));
-};
-var alignmentOptions = [
-  {
-    type: "left",
-    Icon: TextAlignLeft,
-    getState: (state) => false
-  },
-  {
-    type: "center",
-    Icon: TextAlignCenter,
-    getState: (state) => false
-  },
-  {
-    type: "right",
-    Icon: TextAlignRight,
-    getState: (state) => false
-  }
-];
-var Alignment = () => {
-  const { onAction } = useToolbarContext("Alignment");
-  const { t } = useTranslation2(SHEET_PLUGIN);
-  return /* @__PURE__ */ React6.createElement(NaturalToolbar2.ToggleGroup, {
-    type: "single"
-  }, alignmentOptions.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ React6.createElement(ToolbarToggleButton, {
-    key: type,
-    value: type,
-    Icon: Icon2,
-    // disabled={state?.blockType === 'codeblock'}
-    // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-    onClick: () => onAction?.({
-      type
-    })
-  }, t(`toolbar ${type} label`))));
-};
-var styleOptions = [
-  {
-    type: "clear",
-    Icon: Eraser,
-    getState: (state) => false
-  },
-  {
-    type: "highlight",
-    Icon: HighlighterCircle,
-    getState: (state) => false
-  }
-];
-var Styles = () => {
-  const { onAction } = useToolbarContext("Alignment");
-  const { t } = useTranslation2(SHEET_PLUGIN);
-  return /* @__PURE__ */ React6.createElement(NaturalToolbar2.ToggleGroup, {
-    type: "single"
-  }, styleOptions.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ React6.createElement(ToolbarToggleButton, {
-    key: type,
-    value: type,
-    Icon: Icon2,
-    // disabled={state?.blockType === 'codeblock'}
-    // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-    onClick: () => onAction?.({
-      type
-    })
-  }, t(`toolbar ${type} label`))));
-};
-var Actions = () => {
-  const { onAction } = useToolbarContext("Actions");
-  const { cursor, range, model } = useSheetContext();
-  const { t } = useTranslation2(SHEET_PLUGIN);
-  const overlapsCommentAnchor = (model.sheet.threads ?? []).filter(nonNullable).filter((thread) => thread.status !== "resolved").some((thread) => {
-    if (!cursor) {
-      return false;
-    }
-    return addressToIndex(model.sheet, cursor) === thread.anchor;
-  });
-  const hasCursor = !!cursor;
-  const cursorOnly = hasCursor && !range && !overlapsCommentAnchor;
-  const tooltipLabelKey = !hasCursor ? "no cursor label" : overlapsCommentAnchor ? "selection overlaps existing comment label" : range ? "comment ranges not supported label" : "comment label";
-  return /* @__PURE__ */ React6.createElement(ToolbarButton, {
-    value: "comment",
-    Icon: ChatText,
-    "data-testid": "editor.toolbar.comment",
-    onClick: () => {
-      if (!cursor) {
-        return;
-      }
-      return onAction?.({
-        type: "comment",
-        anchor: addressToIndex(model.sheet, cursor),
-        cellContent: model.getCellText(cursor)
-      });
-    },
-    disabled: !cursorOnly || overlapsCommentAnchor
-  }, t(tooltipLabelKey));
-};
-var Toolbar = {
-  Root: ToolbarRoot,
-  Separator: ToolbarSeparator,
-  Alignment,
-  Format,
-  Styles,
-  Actions
-};
-
-// packages/plugins/plugin-sheet/src/components/SheetContainer.tsx
-var attentionFragment = mx4("group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface", "group-focus-within/editor:border-separator");
-var sectionToolbarLayout = "bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity";
-var SheetContainer = ({ sheet, space, role, remoteFunctionUrl }) => {
-  const dispatch = useIntentDispatcher2();
-  const id = fullyQualifiedId4(sheet);
-  const isDirectlyAttended = useIsDirectlyAttended(id);
-  const handleAction = useCallback2((action) => {
-    switch (action.type) {
-      case "comment": {
-        void dispatch({
-          action: "dxos.org/plugin/thread/action/create",
-          data: {
-            cursor: action.anchor,
-            name: action.cellContent,
-            subject: sheet
-          }
-        });
-      }
-    }
-  }, [
-    sheet,
-    dispatch
-  ]);
-  return /* @__PURE__ */ React7.createElement("div", {
-    role: "none",
-    className: role === "article" ? "row-span-2 grid grid-rows-subgrid" : void 0
-  }, /* @__PURE__ */ React7.createElement(Sheet.Root, {
-    sheet,
-    space,
-    remoteFunctionUrl
-  }, /* @__PURE__ */ React7.createElement("div", {
-    role: "none",
-    className: mx4("flex flex-0 justify-center overflow-x-auto")
-  }, /* @__PURE__ */ React7.createElement(Toolbar.Root, {
-    onAction: handleAction,
-    classNames: mx4(role === "section" ? [
-      "z-[2] group-focus-within/section:visible",
-      !isDirectlyAttended && "invisible",
-      sectionToolbarLayout
-    ] : "group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator")
-  }, /* @__PURE__ */ React7.createElement(Toolbar.Separator, null), /* @__PURE__ */ React7.createElement(Toolbar.Actions, null))), /* @__PURE__ */ React7.createElement("div", {
-    role: "none",
-    className: mx4(role === "section" && "aspect-square border-is border-bs border-be border-separator", role === "article" && "flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator", focusRing, attentionFragment)
-  }, /* @__PURE__ */ React7.createElement(Sheet.Main, null))));
-};
-var SheetContainer_default = SheetContainer;
 export {
-  SheetContainer_default as default,
-  sectionToolbarLayout
+  ComputeGraphContextProvider,
+  createSheet,
+  addressToIndex,
+  compareIndexPositions,
+  useComputeGraph,
+  useSheetContext,
+  Sheet,
+  SheetContainer
 };
-//# sourceMappingURL=SheetContainer-Y7ZMFBAP.mjs.map
+//# sourceMappingURL=chunk-KK3XL37M.mjs.map