@dxos/plugin-sheet 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/dist/lib/browser/SheetContainer-I3NFVVDQ.mjs

@@ -0,0 +1,1805 @@
+import {
+  rangeExtension,
+  sheetExtension
+} from "./chunk-NNWF7EKC.mjs";
+import {
+  DEFAULT_COLS,
+  DEFAULT_ROWS,
+  MAX_COLS,
+  MAX_ROWS,
+  ReadonlyException,
+  SheetOperation,
+  addressFromIndex,
+  addressToIndex,
+  alignKey,
+  cellClassNameForRange,
+  initialize,
+  insertIndices,
+  mapFormulaIndicesToRefs,
+  mapFormulaRefsToIndices,
+  meta,
+  rangeFromIndex,
+  rangeToIndex
+} from "./chunk-S445OQGW.mjs";
+
+// src/containers/SheetContainer/SheetContainer.tsx
+import React6 from "react";
+import { Obj as Obj7 } from "@dxos/echo";
+import { Panel } from "@dxos/react-ui";
+
+// src/components/ComputeGraph/ComputeGraphContextProvider.tsx
+import React, { createContext, useContext } from "react";
+import { raise } from "@dxos/debug";
+import { useAsyncState } from "@dxos/react-hooks";
+var ComputeGraphContext = /* @__PURE__ */ createContext(void 0);
+var ComputeGraphContextProvider = ({ registry, children }) => {
+  return /* @__PURE__ */ React.createElement(ComputeGraphContext.Provider, {
+    value: {
+      registry
+    }
+  }, children);
+};
+var useComputeGraph = (space) => {
+  const { registry } = useContext(ComputeGraphContext) ?? raise(new Error("Missing ComputeGraphContext"));
+  const [graph] = useAsyncState(async () => {
+    if (space) {
+      const graph2 = registry.getOrCreateGraph(space);
+      await graph2.open();
+      return graph2;
+    }
+  }, [
+    space,
+    registry
+  ]);
+  return graph;
+};
+
+// src/components/SheetContent/SheetContent.tsx
+import React3, { useCallback as useCallback3, useMemo as useMemo2, useRef, useState as useState4 } from "react";
+import { useOperationInvoker as useOperationInvoker2 } from "@dxos/app-framework/ui";
+import { rangeToA1Notation } from "@dxos/compute";
+import { Obj as Obj4 } from "@dxos/echo";
+import { defaultColSize, defaultRowSize } from "@dxos/lit-grid";
+import { DropdownMenu, Icon, useTranslation } from "@dxos/react-ui";
+import { useAttention } from "@dxos/react-ui-attention";
+import { Grid as Grid2, GridCellEditor, closestCell, editorKeys, parseCellIndex } from "@dxos/react-ui-grid";
+import { mx as mx2, useComposableProps } from "@dxos/ui-theme";
+
+// src/integrations/thread-ranges.ts
+import * as Effect from "effect/Effect";
+import { useCallback, useEffect, useMemo } from "react";
+import { useOperationInvoker, useOperationResolver } from "@dxos/app-framework/ui";
+import { LayoutOperation } from "@dxos/app-toolkit";
+import { debounce } from "@dxos/async";
+import { inRange } from "@dxos/compute";
+import { Obj, Relation } from "@dxos/echo";
+import { OperationResolver } from "@dxos/operation";
+import { ATTENDABLE_PATH_SEPARATOR, DeckOperation } from "@dxos/plugin-deck/types";
+import { ThreadOperation } from "@dxos/plugin-thread/types";
+import { Filter, Query, useQuery } from "@dxos/react-client/echo";
+import { AnchoredTo, Thread } from "@dxos/types";
+var parseThreadAnchorAsCellRange = (cursor) => {
+  const coords = cursor.split(",");
+  if (coords.length !== 4) {
+    return null;
+  } else {
+    const [fromCol, fromRow, toCol, toRow] = coords;
+    return {
+      from: {
+        col: parseInt(fromCol),
+        row: parseInt(fromRow)
+      },
+      to: {
+        col: parseInt(toCol),
+        row: parseInt(toRow)
+      }
+    };
+  }
+};
+var useUpdateFocusedCellOnThreadSelection = (grid) => {
+  const { model, setActiveRefs } = useSheetContext();
+  const sheetId = Obj.getDXN(model.sheet).toString();
+  const scrollIntoViewHandler = useMemo(() => OperationResolver.make({
+    operation: LayoutOperation.ScrollIntoView,
+    position: "hoist",
+    filter: (input) => input.subject === sheetId && !!input.cursor,
+    handler: (input) => Effect.sync(() => {
+      const { cursor, ref } = input;
+      if (cursor) {
+        setActiveRefs(ref);
+        const range = parseThreadAnchorAsCellRange(cursor);
+        range && grid?.setFocus({
+          ...range.to,
+          plane: "grid"
+        }, true);
+      }
+    })
+  }), [
+    sheetId,
+    setActiveRefs,
+    grid
+  ]);
+  useOperationResolver(meta.id, scrollIntoViewHandler);
+};
+var useSelectThreadOnCellFocus = () => {
+  const { model, cursor } = useSheetContext();
+  const { invokePromise } = useOperationInvoker();
+  const db = Obj.getDatabase(model.sheet);
+  const anchors = useQuery(db, Query.select(Filter.id(model.sheet.id)).targetOf(AnchoredTo.AnchoredTo));
+  const selectClosestThread = useCallback((cellAddress) => {
+    if (!cellAddress) {
+      return;
+    }
+    const closestThread = anchors.find((anchor) => {
+      const source = Relation.getSource(anchor);
+      if (anchor.anchor && Obj.instanceOf(Thread.Thread, source)) {
+        const range = parseThreadAnchorAsCellRange(anchor.anchor);
+        return range ? inRange(range, cellAddress) : false;
+      } else {
+        return false;
+      }
+    });
+    if (closestThread) {
+      const primary = Obj.getDXN(model.sheet).toString();
+      void (async () => {
+        await invokePromise(ThreadOperation.Select, {
+          current: Relation.getDXN(closestThread).toString()
+        });
+        await invokePromise(DeckOperation.ChangeCompanion, {
+          companion: `${primary}${ATTENDABLE_PATH_SEPARATOR}comments`
+        });
+      })();
+    }
+  }, [
+    invokePromise,
+    anchors
+  ]);
+  const debounced = useMemo(() => {
+    return debounce((cellCoords) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
+  }, [
+    selectClosestThread
+  ]);
+  useEffect(() => {
+    if (!cursor) {
+      return;
+    }
+    debounced(cursor);
+  }, [
+    cursor,
+    debounced
+  ]);
+};
+
+// src/components/SheetRoot/SheetRoot.tsx
+import React2, { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useState as useState2 } from "react";
+import { raise as raise2 } from "@dxos/debug";
+import { Obj as Obj3 } from "@dxos/echo";
+import { Grid, useGridContext } from "@dxos/react-ui-grid";
+
+// src/model/sheet-model.ts
+import { Event } from "@dxos/async";
+import { DetailedCellError, ExportedCellChange, addressFromA1Notation, addressToA1Notation, createSheetName, isFormula } from "@dxos/compute";
+import { Resource } from "@dxos/context";
+import { Obj as Obj2 } from "@dxos/echo";
+import { Format, TypeEnum } from "@dxos/echo/internal";
+import { invariant } from "@dxos/invariant";
+import { PublicKey } from "@dxos/keys";
+import { log } from "@dxos/log";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-sheet/src/model/sheet-model.ts";
+var typeMap = {
+  BOOLEAN: {
+    type: TypeEnum.Boolean
+  },
+  NUMBER_RAW: {
+    type: TypeEnum.Number
+  },
+  NUMBER_PERCENT: {
+    type: TypeEnum.Number,
+    format: Format.TypeFormat.Percent
+  },
+  NUMBER_CURRENCY: {
+    type: TypeEnum.Number,
+    format: Format.TypeFormat.Currency
+  },
+  NUMBER_DATETIME: {
+    type: TypeEnum.String,
+    format: Format.TypeFormat.DateTime
+  },
+  NUMBER_DATE: {
+    type: TypeEnum.String,
+    format: Format.TypeFormat.Date
+  },
+  NUMBER_TIME: {
+    type: TypeEnum.String,
+    format: Format.TypeFormat.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 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 {
+  _graph;
+  _sheet;
+  _options;
+  id = `model-${PublicKey.random().truncate()}`;
+  // Wraps compute node.
+  update = new Event();
+  _node;
+  constructor(_graph, _sheet, _options = {}) {
+    super(), this._graph = _graph, this._sheet = _sheet, this._options = _options;
+  }
+  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_file,
+      L: 124,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    Obj2.change(this._sheet, (obj) => {
+      initialize(obj);
+    });
+    this._graph.update.on((event) => {
+      if (event.type === "functionsUpdated") {
+        this.reset();
+      }
+    });
+    this._node = this._graph.getOrCreateNode(createSheetName({
+      type: Obj2.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() {
+    invariant(this._node, void 0, {
+      F: __dxlog_file,
+      L: 154,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    this._node.graph.hf.clearSheet(this._node.sheetId);
+    Object.entries(this._sheet.cells).forEach(([key, { value }]) => {
+      invariant(this._node, void 0, {
+        F: __dxlog_file,
+        L: 157,
+        S: this,
+        A: [
+          "this._node",
+          ""
+        ]
+      });
+      const { col, row } = addressFromIndex(this._sheet, key);
+      if (isFormula(value)) {
+        const binding = this._graph.mapFunctionBindingFromId(mapFormulaIndicesToRefs(this._sheet, value));
+        if (binding) {
+          value = this._graph.mapFormulaToNative(binding);
+        } else {
+          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) {
+    let idx = [];
+    Obj2.change(this._sheet, (obj) => {
+      idx = insertIndices(obj.rows, i, n, MAX_ROWS);
+    });
+    this.reset();
+    return idx;
+  }
+  insertColumns(i, n = 1) {
+    let idx = [];
+    Obj2.change(this._sheet, (obj) => {
+      idx = insertIndices(obj.columns, i, n, MAX_COLS);
+    });
+    this.reset();
+    return idx;
+  }
+  dropRow(rowIndex) {
+    const range = {
+      from: addressFromIndex(this._sheet, `${this._sheet.columns[0]}@${rowIndex}`),
+      to: addressFromIndex(this._sheet, `${this._sheet.columns[this._sheet.columns.length - 1]}@${rowIndex}`)
+    };
+    const values = this.getCellValues(range).flat();
+    const index = this._sheet.rows.indexOf(rowIndex);
+    this.clear(range);
+    Obj2.change(this._sheet, (obj) => {
+      obj.rows.splice(index, 1);
+      delete obj.rowMeta[rowIndex];
+    });
+    this.reset();
+    return {
+      axis: "row",
+      index,
+      axisIndex: rowIndex,
+      axisMeta: this._sheet.rowMeta[rowIndex],
+      values
+    };
+  }
+  dropColumn(colIndex) {
+    const range = {
+      from: addressFromIndex(this._sheet, `${colIndex}@${this._sheet.rows[0]}`),
+      to: addressFromIndex(this._sheet, `${colIndex}@${this._sheet.rows[this._sheet.rows.length - 1]}`)
+    };
+    const values = this.getCellValues(range).flat();
+    const index = this._sheet.columns.indexOf(colIndex);
+    this.clear(range);
+    Obj2.change(this._sheet, (obj) => {
+      obj.columns.splice(index, 1);
+      delete obj.columnMeta[colIndex];
+    });
+    this.reset();
+    return {
+      axis: "col",
+      index,
+      axisIndex: colIndex,
+      axisMeta: this._sheet.rowMeta[colIndex],
+      values
+    };
+  }
+  restoreRow({ index, axisIndex, axisMeta, values }) {
+    Obj2.change(this._sheet, (obj) => {
+      obj.rows.splice(index, 0, axisIndex);
+      values.forEach((value, col) => {
+        if (value) {
+          obj.cells[`${obj.columns[col]}@${axisIndex}`] = {
+            value
+          };
+        }
+      });
+      if (axisMeta) {
+        obj.rowMeta[axisIndex] = axisMeta;
+      }
+    });
+    this.reset();
+  }
+  restoreColumn({ index, axisIndex, axisMeta, values }) {
+    Obj2.change(this._sheet, (obj) => {
+      obj.columns.splice(index, 0, axisIndex);
+      values.forEach((value, row) => {
+        if (value) {
+          obj.cells[`${axisIndex}@${obj.rows[row]}`] = {
+            value
+          };
+        }
+      });
+      if (axisMeta) {
+        obj.columnMeta[axisIndex] = axisMeta;
+      }
+    });
+    this.reset();
+  }
+  //
+  // Undoable actions.
+  // TODO(burdon): Group undoable methods; consistently update hf/sheet.
+  //
+  /**
+  * Clear range of values.
+  */
+  clear(range) {
+    invariant(this._node, void 0, {
+      F: __dxlog_file,
+      L: 276,
+      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);
+    Obj2.change(this._sheet, (obj) => {
+      this._iterRange(range, (cell) => {
+        const idx = addressToIndex(this._sheet, cell);
+        delete obj.cells[idx];
+      });
+    });
+  }
+  cut(range) {
+    invariant(this._node, void 0, {
+      F: __dxlog_file,
+      L: 289,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    this._node.graph.hf.cut(toModelRange(this._node.sheetId, range));
+    Obj2.change(this._sheet, (obj) => {
+      this._iterRange(range, (cell) => {
+        const idx = addressToIndex(this._sheet, cell);
+        delete obj.cells[idx];
+      });
+    });
+  }
+  copy(range) {
+    invariant(this._node, void 0, {
+      F: __dxlog_file,
+      L: 300,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    this._node.graph.hf.copy(toModelRange(this._node.sheetId, range));
+  }
+  paste(cell) {
+    invariant(this._node, void 0, {
+      F: __dxlog_file,
+      L: 305,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    if (!this._node.graph.hf.isClipboardEmpty()) {
+      const changes = this._node.graph.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
+      Obj2.change(this._sheet, (obj) => {
+        for (const change of changes) {
+          if (change instanceof ExportedCellChange) {
+            const { address, newValue } = change;
+            const idx = addressToIndex(this._sheet, {
+              row: address.row,
+              col: address.col
+            });
+            obj.cells[idx] = {
+              value: newValue
+            };
+          }
+        }
+      });
+    }
+  }
+  // TODO(burdon): Display undo/redo state.
+  undo() {
+    invariant(this._node, void 0, {
+      F: __dxlog_file,
+      L: 322,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    if (this._node.graph.hf.isThereSomethingToUndo()) {
+      this._node.graph.hf.undo();
+    }
+  }
+  redo() {
+    invariant(this._node, void 0, {
+      F: __dxlog_file,
+      L: 330,
+      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 (isFormula(value)) {
+      return this._graph.mapFunctionBindingFromId(mapFormulaIndicesToRefs(this._sheet, value));
+    } else {
+      return String(value);
+    }
+  }
+  /**
+  * 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) {
+    invariant(this._node, void 0, {
+      F: __dxlog_file,
+      L: 373,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    const address = toSimpleCellAddress(this._node.sheetId, cell);
+    const value = this._node.graph.hf.getCellValue(address);
+    if (value instanceof DetailedCellError) {
+      log.warn("cell error", {
+        cell,
+        error: value
+      }, {
+        F: __dxlog_file,
+        L: 378,
+        S: this,
+        C: (f, a) => f(...a)
+      });
+      return value.toString();
+    }
+    return value;
+  }
+  /**
+  * Get value type.
+  */
+  getValueDescription(cell) {
+    invariant(this._node, void 0, {
+      F: __dxlog_file,
+      L: 389,
+      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) {
+    invariant(this._node, void 0, {
+      F: __dxlog_file,
+      L: 399,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    if (this._options.readonly) {
+      throw new ReadonlyException();
+    }
+    let refresh = false;
+    if (cell.row >= this._sheet.rows.length) {
+      Obj2.change(this._sheet, (obj) => {
+        insertIndices(obj.rows, cell.row, 1, MAX_ROWS);
+      });
+      refresh = true;
+    }
+    if (cell.col >= this._sheet.columns.length) {
+      Obj2.change(this._sheet, (obj) => {
+        insertIndices(obj.columns, cell.col, 1, MAX_COLS);
+      });
+      refresh = true;
+    }
+    if (refresh) {
+      this.reset();
+    }
+    this._node.graph.hf.setCellContents({
+      sheet: this._node.sheetId,
+      row: cell.row,
+      col: cell.col
+    }, [
+      [
+        isFormula(value) ? this._graph.mapFormulaToNative(value) : value
+      ]
+    ]);
+    const idx = addressToIndex(this._sheet, cell);
+    if (value === void 0 || value === null) {
+      Obj2.change(this._sheet, (obj) => {
+        delete obj.cells[idx];
+      });
+    } else {
+      if (isFormula(value)) {
+        value = this._graph.mapFunctionBindingToId(mapFormulaRefsToIndices(this._sheet, value));
+      }
+      Obj2.change(this._sheet, (obj) => {
+        obj.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");
+  }
+  /**
+  * Map from indices to A1 notation.
+  */
+  mapFormulaIndicesToRefs(formula) {
+    invariant(isFormula(formula), void 0, {
+      F: __dxlog_file,
+      L: 492,
+      S: this,
+      A: [
+        "isFormula(formula)",
+        ""
+      ]
+    });
+    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) {
+    invariant(this._node, void 0, {
+      F: __dxlog_file,
+      L: 513,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    return this._node.graph.hf.numberToDateTime(num);
+  }
+  toDate(num) {
+    invariant(this._node, void 0, {
+      F: __dxlog_file,
+      L: 518,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    return this._node.graph.hf.numberToDate(num);
+  }
+  toTime(num) {
+    invariant(this._node, void 0, {
+      F: __dxlog_file,
+      L: 523,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    return this._node.graph.hf.numberToTime(num);
+  }
+};
+
+// src/model/useSheetModel.ts
+import { useEffect as useEffect2, useState } from "react";
+var useSheetModel = (graph, sheet, { readonly } = {}) => {
+  const [model, setModel] = useState();
+  useEffect2(() => {
+    if (!graph || !sheet) {
+      return;
+    }
+    let model2;
+    const t = setTimeout(async () => {
+      model2 = new SheetModel(graph, sheet, {
+        readonly
+      });
+      await model2.open();
+      setModel(model2);
+    });
+    return () => {
+      clearTimeout(t);
+      void model2?.close();
+    };
+  }, [
+    graph,
+    sheet,
+    readonly
+  ]);
+  return model;
+};
+
+// src/components/SheetRoot/SheetRoot.tsx
+var SheetContext = /* @__PURE__ */ createContext2(void 0);
+var useSheetContext = () => {
+  return useContext2(SheetContext) ?? raise2(new Error("Missing SheetContext"));
+};
+var SheetRoot = ({ children, graph, sheet, readonly, ignoreAttention, onInfo }) => {
+  const model = useSheetModel(graph, sheet, {
+    readonly
+  });
+  if (!model) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement(Grid.Root, {
+    id: Obj3.getDXN(sheet).toString()
+  }, /* @__PURE__ */ React2.createElement(SheetProviderImpl, {
+    model,
+    onInfo,
+    ignoreAttention
+  }, children));
+};
+var SheetProviderImpl = ({ __gridScope, children, ignoreAttention, model, onInfo }) => {
+  const { id, editing, setEditing } = useGridContext("SheetProvider", __gridScope);
+  const [cursor, setCursorInternal] = useState2();
+  const [range, setRangeInternal] = useState2();
+  const [cursorFallbackRange, setCursorFallbackRange] = useState2();
+  const [activeRefs, setActiveRefs] = useState2("");
+  const setCursor = useCallback2((nextCursor) => {
+    setCursorInternal(nextCursor);
+    setCursorFallbackRange(range?.to ? range : nextCursor ? {
+      from: nextCursor,
+      to: nextCursor
+    } : void 0);
+  }, [
+    range
+  ]);
+  const setRange = useCallback2((nextRange) => {
+    setRangeInternal(nextRange);
+    setCursorFallbackRange(nextRange?.to ? nextRange : cursor ? {
+      from: cursor,
+      to: cursor
+    } : void 0);
+  }, [
+    cursor
+  ]);
+  return /* @__PURE__ */ React2.createElement(SheetContext.Provider, {
+    value: {
+      id,
+      model,
+      editing,
+      setEditing,
+      cursor,
+      setCursor,
+      range,
+      setRange,
+      cursorFallbackRange,
+      activeRefs,
+      setActiveRefs,
+      ignoreAttention,
+      // TODO(burdon): Change to event.
+      onInfo
+    }
+  }, children);
+};
+
+// src/components/SheetContent/util.ts
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { inRange as inRange2 } from "@dxos/compute";
+import { createDocAccessor } from "@dxos/echo-db";
+import { cellClassesForFieldType, parseValue } from "@dxos/react-ui-form";
+import { colToA1Notation, commentedClassName, rowToA1Notation } from "@dxos/react-ui-grid";
+import { mx } from "@dxos/ui-theme";
+var createDxGridColumns = (model) => {
+  return model.sheet.columns.reduce((acc, columnId, numericIndex) => {
+    if (model.sheet.columnMeta[columnId] && model.sheet.columnMeta[columnId].size) {
+      acc.grid[numericIndex] = {
+        size: model.sheet.columnMeta[columnId].size,
+        resizeable: true
+      };
+    }
+    return acc;
+  }, {
+    grid: {}
+  });
+};
+var createDxGridRows = (model) => {
+  return model.sheet.rows.reduce((acc, rowId, numericIndex) => {
+    if (model.sheet.rowMeta[rowId] && model.sheet.rowMeta[rowId].size) {
+      acc.grid[numericIndex] = {
+        size: model.sheet.rowMeta[rowId].size,
+        resizeable: true
+      };
+    }
+    return acc;
+  }, {
+    grid: {}
+  });
+};
+var projectCellProps = (model, col, row) => {
+  const address = {
+    col,
+    row
+  };
+  const rawValue = model.getValue(address);
+  const ranges = model.sheet.ranges?.filter(({ range }) => inRange2(rangeFromIndex(model.sheet, range), address));
+  const threadRefs = void 0;
+  const description = model.getValueDescription(address);
+  const type = description?.type;
+  const format = description?.format;
+  const classNames = ranges?.map(cellClassNameForRange).reverse();
+  return {
+    value: parseValue({
+      type,
+      format,
+      value: rawValue
+    }),
+    className: mx(cellClassesForFieldType({
+      type,
+      format
+    }), threadRefs && commentedClassName, classNames),
+    dataRefs: threadRefs
+  };
+};
+var gridCellGetter = (model) => {
+  const cachedGridCells = {};
+  return (nextBounds) => {
+    [
+      ...Array(nextBounds.end.col - nextBounds.start.col)
+    ].forEach((_, c0) => {
+      return [
+        ...Array(nextBounds.end.row - nextBounds.start.row)
+      ].forEach((_2, r0) => {
+        const col = nextBounds.start.col + c0;
+        const row = nextBounds.start.row + r0;
+        cachedGridCells[`${col},${row}`] = projectCellProps(model, col, row);
+      });
+    });
+    return cachedGridCells;
+  };
+};
+var rowLabelCell = (row) => ({
+  value: rowToA1Notation(row),
+  className: "!bg-toolbar-surface text-subdued text-end pe-1",
+  resizeHandle: "row"
+});
+var colLabelCell = (col) => ({
+  value: colToA1Notation(col),
+  className: "!bg-toolbar-surface text-subdued",
+  resizeHandle: "col"
+});
+var cellGetter = (model) => {
+  const getGridCells = gridCellGetter(model);
+  return (nextBounds, plane) => {
+    switch (plane) {
+      case "grid":
+        return getGridCells(nextBounds);
+      case "fixedStartStart": {
+        return {
+          "0,0": {
+            className: "!bg-toolbar-surface"
+          }
+        };
+      }
+      case "frozenColsStart":
+        return [
+          ...Array(nextBounds.end.row - nextBounds.start.row)
+        ].reduce((acc, _, r0) => {
+          const r = nextBounds.start.row + r0;
+          acc[`0,${r}`] = rowLabelCell(r);
+          return acc;
+        }, {});
+      case "frozenRowsStart":
+        return [
+          ...Array(nextBounds.end.col - nextBounds.start.col)
+        ].reduce((acc, _, c0) => {
+          const c = nextBounds.start.col + c0;
+          acc[`${c},0`] = colLabelCell(c);
+          return acc;
+        }, {});
+      default:
+        return {};
+    }
+  };
+};
+var useSheetModelDxGridProps = (dxGrid, model) => {
+  const [columns, setColumns] = useState3(createDxGridColumns(model));
+  const [rows, setRows] = useState3(createDxGridRows(model));
+  useEffect3(() => {
+    const cellsAccessor = createDocAccessor(model.sheet, [
+      "cells"
+    ]);
+    if (dxGrid) {
+      dxGrid.getCells = cellGetter(model);
+    }
+    const handleCellsUpdate = () => {
+      dxGrid?.requestUpdate("initialCells");
+    };
+    cellsAccessor.handle.addListener("change", handleCellsUpdate);
+    const unsubscribe = model.graph.update.on(handleCellsUpdate);
+    return () => {
+      cellsAccessor.handle.removeListener("change", handleCellsUpdate);
+      unsubscribe();
+    };
+  }, [
+    model,
+    dxGrid
+  ]);
+  useEffect3(() => {
+    const columnMetaAccessor = createDocAccessor(model.sheet, [
+      "columnMeta"
+    ]);
+    const rowMetaAccessor = createDocAccessor(model.sheet, [
+      "rowMeta"
+    ]);
+    const handleColumnMetaUpdate = () => {
+      setColumns(createDxGridColumns(model));
+    };
+    const handleRowMetaUpdate = () => {
+      setRows(createDxGridRows(model));
+    };
+    columnMetaAccessor.handle.addListener("change", handleColumnMetaUpdate);
+    rowMetaAccessor.handle.addListener("change", handleRowMetaUpdate);
+    return () => {
+      columnMetaAccessor.handle.removeListener("change", handleColumnMetaUpdate);
+      rowMetaAccessor.handle.removeListener("change", handleRowMetaUpdate);
+    };
+  }, [
+    model,
+    dxGrid
+  ]);
+  return {
+    columns,
+    rows
+  };
+};
+
+// src/components/SheetContent/SheetContent.tsx
+var inertPosition = {
+  plane: "grid",
+  col: 0,
+  row: 0
+};
+var initialCells = {
+  grid: {},
+  frozenColsStart: [
+    ...Array(64)
+  ].reduce((acc, _, i) => {
+    acc[`0,${i}`] = rowLabelCell(i);
+    return acc;
+  }, {}),
+  frozenRowsStart: [
+    ...Array(12)
+  ].reduce((acc, _, i) => {
+    acc[`${i},0`] = colLabelCell(i);
+    return acc;
+  }, {})
+};
+var frozen = {
+  frozenColsStart: 1,
+  frozenRowsStart: 1
+};
+var sheetColDefault = {
+  frozenColsStart: {
+    size: 48,
+    readonly: true,
+    focusUnfurl: false
+  },
+  grid: {
+    size: defaultColSize,
+    resizeable: true
+  }
+};
+var sheetRowDefault = {
+  frozenRowsStart: {
+    size: defaultRowSize,
+    readonly: true,
+    focusUnfurl: false
+  },
+  grid: {
+    size: defaultRowSize,
+    resizeable: true
+  }
+};
+var SheetContent = (props) => {
+  const { t } = useTranslation(meta.id);
+  const { id, model, editing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs, ignoreAttention } = useSheetContext();
+  const [dxGrid, setDxGrid] = useState4(null);
+  const [extraplanarFocus, setExtraplanarFocus] = useState4(null);
+  const { invokePromise } = useOperationInvoker2();
+  const rangeController = useRef(null);
+  const { hasAttention } = useAttention(id);
+  const { className, ...rest } = useComposableProps(props);
+  const handleFocus = useCallback3((event) => {
+    if (!editing) {
+      const cell = closestCell(event.target);
+      if (cell) {
+        if (cell.plane === "grid") {
+          setCursor({
+            col: cell.col,
+            row: cell.row
+          });
+          setExtraplanarFocus(null);
+        } else {
+          setExtraplanarFocus(cell);
+        }
+      } else {
+        setExtraplanarFocus(null);
+      }
+    }
+  }, [
+    editing
+  ]);
+  const handleClose = useCallback3((_value, event) => {
+    if (event) {
+      const { key, shift } = event;
+      const axis = [
+        "Enter",
+        "ArrowUp",
+        "ArrowDown"
+      ].includes(key) ? "row" : [
+        "Tab",
+        "ArrowLeft",
+        "ArrowRight"
+      ].includes(key) ? "col" : void 0;
+      const delta = key.startsWith("Arrow") ? [
+        "ArrowUp",
+        "ArrowLeft"
+      ].includes(key) ? -1 : 1 : shift ? -1 : 1;
+      dxGrid?.refocus(axis, delta);
+    }
+  }, [
+    model,
+    editing,
+    dxGrid
+  ]);
+  const handleBlur = useCallback3((value) => {
+    if (value !== void 0) {
+      model.setValue(parseCellIndex(editing.index), value);
+    }
+  }, [
+    model,
+    editing
+  ]);
+  const handleAxisResize = useCallback3(({ axis, size, index: numericIndex }) => {
+    Obj4.change(model.sheet, (sheet) => {
+      if (axis === "row") {
+        const rowId = sheet.rows[parseInt(numericIndex)];
+        sheet.rowMeta[rowId] ??= {};
+        sheet.rowMeta[rowId].size = size;
+      } else {
+        const columnId = sheet.columns[parseInt(numericIndex)];
+        sheet.columnMeta[columnId] ??= {};
+        sheet.columnMeta[columnId].size = size;
+      }
+    });
+  }, [
+    model
+  ]);
+  const handleSelect = useCallback3(({ minCol, maxCol, minRow, maxRow }) => {
+    const range = {
+      from: {
+        col: minCol,
+        row: minRow
+      }
+    };
+    if (minCol !== maxCol || minRow !== maxRow) {
+      range.to = {
+        col: maxCol,
+        row: maxRow
+      };
+    }
+    if (editing) {
+      rangeController.current?.setRange(rangeToA1Notation(range));
+    } else {
+      setRange(range.to ? range : void 0);
+    }
+  }, [
+    editing
+  ]);
+  const handleWheel = useCallback3((event) => {
+    if (!ignoreAttention && !hasAttention) {
+      event.stopPropagation();
+    }
+  }, [
+    hasAttention,
+    ignoreAttention
+  ]);
+  const selectEntireAxis = useCallback3((pos) => {
+    switch (pos.plane) {
+      case "frozenRowsStart":
+        return dxGrid?.setSelection({
+          start: {
+            col: pos.col,
+            row: 0,
+            plane: "grid"
+          },
+          end: {
+            col: pos.col,
+            row: model.sheet.rows.length - 1,
+            plane: "grid"
+          }
+        });
+      case "frozenColsStart":
+        return dxGrid?.setSelection({
+          start: {
+            row: pos.row,
+            col: 0,
+            plane: "grid"
+          },
+          end: {
+            row: pos.row,
+            col: model.sheet.columns.length - 1,
+            plane: "grid"
+          }
+        });
+    }
+  }, [
+    dxGrid,
+    model.sheet
+  ]);
+  const handleClick = useCallback3((event) => {
+    const cell = closestCell(event.target);
+    if (cell) {
+      selectEntireAxis(cell);
+    }
+  }, [
+    selectEntireAxis
+  ]);
+  const handleKeyDown = useCallback3((event) => {
+    switch (event.key) {
+      case "Backspace":
+      case "Delete":
+        event.preventDefault();
+        return cursorFallbackRange && model.clear(cursorFallbackRange);
+      case "Enter":
+      case "Space":
+        if (dxGrid && extraplanarFocus) {
+          switch (extraplanarFocus.plane) {
+            case "frozenRowsStart":
+            case "frozenColsStart":
+              event.preventDefault();
+              return selectEntireAxis(extraplanarFocus);
+          }
+        }
+    }
+    if (event.metaKey || event.ctrlKey) {
+      switch (event.key) {
+        case "x":
+        case "X":
+          event.preventDefault();
+          return cursorFallbackRange && model.cut(cursorFallbackRange);
+        case "c":
+        case "C":
+          event.preventDefault();
+          return cursorFallbackRange && model.copy(cursorFallbackRange);
+        case "v":
+        case "V":
+          event.preventDefault();
+          return cursor && model.paste(cursor);
+        case "z":
+          event.preventDefault();
+          return event.shiftKey ? model.redo() : model.undo();
+        case "Z":
+        case "y":
+          event.preventDefault();
+          return model.redo();
+      }
+    }
+  }, [
+    cursorFallbackRange,
+    model,
+    cursor,
+    extraplanarFocus,
+    selectEntireAxis
+  ]);
+  const contextMenuAnchorRef = useRef(null);
+  const [contextMenuOpen, setContextMenuOpen] = useState4(null);
+  const contextMenuAxis = contextMenuOpen?.plane.startsWith("frozenRows") ? "col" : "row";
+  const handleContextMenu = useCallback3((event) => {
+    const cell = closestCell(event.target);
+    if (cell && cell.plane.startsWith("frozen")) {
+      event.preventDefault();
+      contextMenuAnchorRef.current = event.target;
+      setContextMenuOpen(cell);
+    }
+  }, []);
+  const handleAxisMenuAction = useCallback3((operation) => {
+    switch (operation) {
+      case "insert-before":
+      case "insert-after":
+        return invokePromise(SheetOperation.InsertAxis, {
+          model,
+          axis: contextMenuAxis,
+          index: contextMenuOpen[contextMenuAxis] + (operation === "insert-before" ? 0 : 1)
+        });
+      case "drop":
+        return invokePromise(SheetOperation.DropAxis, {
+          model,
+          axis: contextMenuAxis,
+          axisIndex: model.sheet[contextMenuAxis === "row" ? "rows" : "columns"][contextMenuOpen[contextMenuAxis]]
+        });
+    }
+  }, [
+    contextMenuAxis,
+    contextMenuOpen,
+    model,
+    invokePromise
+  ]);
+  const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
+  const extensions = useMemo2(() => [
+    editorKeys({
+      onClose: handleClose,
+      ...editing?.initialContent && {
+        onNav: handleClose
+      }
+    }),
+    sheetExtension({
+      functions: model.graph.getFunctions()
+    }),
+    rangeExtension({
+      onInit: (fn) => rangeController.current = fn,
+      onStateChange: (state) => {
+        if (dxGrid) {
+          dxGrid.mode = typeof state.activeRange === "undefined" ? "edit" : "edit-select";
+        }
+      }
+    })
+  ], [
+    model,
+    handleClose,
+    editing
+  ]);
+  const getCellContent = useCallback3((index) => {
+    return model.getCellText(parseCellIndex(index));
+  }, [
+    model
+  ]);
+  useUpdateFocusedCellOnThreadSelection(dxGrid);
+  useSelectThreadOnCellFocus();
+  return /* @__PURE__ */ React3.createElement("div", {
+    ...rest,
+    role: "none",
+    className: mx2("relative min-h-0", className)
+  }, /* @__PURE__ */ React3.createElement(GridCellEditor, {
+    getCellContent,
+    extensions,
+    onBlur: handleBlur
+  }), /* @__PURE__ */ React3.createElement(Grid2.Content, {
+    className: "[--dx-grid-base:var(--base-surface)] [&_.dx-grid]:absolute [&_.dx-grid]:inset-0",
+    initialCells,
+    limitColumns: DEFAULT_COLS,
+    limitRows: DEFAULT_ROWS,
+    columns,
+    rows,
+    columnDefault: sheetColDefault,
+    rowDefault: sheetRowDefault,
+    activeRefs,
+    frozen,
+    overscroll: "trap",
+    onAxisResize: handleAxisResize,
+    onSelect: handleSelect,
+    onFocus: handleFocus,
+    onWheelCapture: handleWheel,
+    onKeyDown: handleKeyDown,
+    onContextMenu: handleContextMenu,
+    onClick: handleClick,
+    ref: setDxGrid
+  }), /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
+    modal: false,
+    open: !!contextMenuOpen,
+    onOpenChange: (nextOpen) => setContextMenuOpen(nextOpen ? inertPosition : null)
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.VirtualTrigger, {
+    virtualRef: contextMenuAnchorRef
+  }), /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
+    side: contextMenuAxis === "col" ? "bottom" : "right",
+    sideOffset: 4,
+    collisionPadding: 8
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Viewport, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
+    onClick: () => handleAxisMenuAction("insert-before"),
+    "data-testid": `grid.${contextMenuAxis}.insert-before`
+  }, /* @__PURE__ */ React3.createElement(Icon, {
+    size: 5,
+    icon: contextMenuAxis === "col" ? "ph--columns-plus-left--regular" : "ph--rows-plus-top--regular"
+  }), /* @__PURE__ */ React3.createElement("span", null, t(`add ${contextMenuAxis} before label`))), /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
+    onClick: () => handleAxisMenuAction("insert-after"),
+    "data-testid": `grid.${contextMenuAxis}.insert-after`
+  }, /* @__PURE__ */ React3.createElement(Icon, {
+    size: 5,
+    icon: contextMenuAxis === "col" ? "ph--columns-plus-right--regular" : "ph--rows-plus-bottom--regular"
+  }), /* @__PURE__ */ React3.createElement("span", null, t(`add ${contextMenuAxis} after label`))), /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
+    onClick: () => handleAxisMenuAction("drop"),
+    "data-testid": `grid.${contextMenuAxis}.drop`
+  }, /* @__PURE__ */ React3.createElement(Icon, {
+    size: 5,
+    icon: "ph--backspace--regular"
+  }), /* @__PURE__ */ React3.createElement("span", null, t(`delete ${contextMenuAxis} label`)))), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null))));
+};
+
+// src/components/SheetStatusbar/SheetStatusbar.tsx
+import React4 from "react";
+import { addressToA1Notation as addressToA1Notation2, isFormula as isFormula2, rangeToA1Notation as rangeToA1Notation2 } from "@dxos/compute";
+import { Icon as Icon2 } from "@dxos/react-ui";
+var SheetStatusbar = (props) => {
+  const { model, cursor, range } = useSheetContext();
+  let value;
+  let formula = false;
+  if (cursor) {
+    value = model.getCellValue(cursor);
+    if (isFormula2(value)) {
+      value = model.graph.mapFunctionBindingFromId(mapFormulaIndicesToRefs(model.sheet, value));
+      formula = true;
+    } else if (value != null) {
+      value = String(value);
+    }
+  }
+  return /* @__PURE__ */ React4.createElement("div", {
+    ...props,
+    className: "flex shrink-0 justify-between items-center px-4 py-1 text-sm bg-toolbar-surface border-y !border-subdued-separator"
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: "flex gap-4 items-center"
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: "flex w-16 items-center font-mono"
+  }, range && rangeToA1Notation2(range) || cursor && addressToA1Notation2(cursor)), /* @__PURE__ */ React4.createElement("div", {
+    className: "flex gap-2 items-center"
+  }, /* @__PURE__ */ React4.createElement(Icon2, {
+    icon: "ph--function--regular",
+    classNames: [
+      "text-green-text",
+      formula ? "visible" : "invisible"
+    ]
+  }), /* @__PURE__ */ React4.createElement("span", {
+    className: "font-mono"
+  }, value))));
+};
+
+// src/components/SheetToolbar/SheetToolbar.tsx
+import { Atom as Atom2, RegistryContext as RegistryContext4 } from "@effect-atom/atom-react";
+import React5, { useContext as useContext6, useMemo as useMemo4 } from "react";
+import { useAppGraph } from "@dxos/app-toolkit/ui";
+import { Menu, createGapSeparator, useMenuActions } from "@dxos/react-ui-menu";
+
+// src/components/SheetToolbar/align.ts
+import { RegistryContext } from "@effect-atom/atom-react";
+import { useContext as useContext3, useEffect as useEffect4 } from "react";
+import { inRange as inRange3 } from "@dxos/compute";
+import { Obj as Obj5 } from "@dxos/echo";
+import { createMenuAction, createMenuItemGroup } from "@dxos/react-ui-menu";
+var aligns = {
+  start: "ph--text-align-left--regular",
+  center: "ph--text-align-center--regular",
+  end: "ph--text-align-right--regular"
+};
+var useAlignState = (stateAtom) => {
+  const registry = useContext3(RegistryContext);
+  const { cursor, model } = useSheetContext();
+  useEffect4(() => {
+    const alignValue = cursor ? model.sheet.ranges?.findLast(({ range, key }) => key === alignKey && inRange3(rangeFromIndex(model.sheet, range), cursor))?.value : void 0;
+    const prev = registry.get(stateAtom);
+    registry.set(stateAtom, {
+      ...prev,
+      [alignKey]: alignValue
+    });
+  }, [
+    cursor,
+    model.sheet,
+    registry,
+    stateAtom
+  ]);
+};
+var createAlignGroupAction = (value) => createMenuItemGroup("align", {
+  label: [
+    "align label",
+    {
+      ns: meta.id
+    }
+  ],
+  variant: "toggleGroup",
+  selectCardinality: "single",
+  value: `${alignKey}--${value}`
+});
+var createAlignActions = ({ model, state, stateAtom, registry, cursorFallbackRange }) => Object.entries(aligns).map(([alignValue, icon]) => {
+  return createMenuAction(`${alignKey}--${alignValue}`, () => {
+    if (!cursorFallbackRange) {
+      return;
+    }
+    const index = model.sheet.ranges?.findIndex((range) => range.key === alignKey && inRange3(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from)) ?? -1;
+    const nextRangeEntity = {
+      range: rangeToIndex(model.sheet, cursorFallbackRange),
+      key: alignKey,
+      value: alignValue
+    };
+    const currentState = registry.get(stateAtom);
+    if (index < 0) {
+      Obj5.change(model.sheet, (obj) => {
+        obj.ranges?.push(nextRangeEntity);
+      });
+      registry.set(stateAtom, {
+        ...currentState,
+        [alignKey]: nextRangeEntity.value
+      });
+    } else if (model.sheet.ranges[index].value === nextRangeEntity.value) {
+      Obj5.change(model.sheet, (obj) => {
+        obj.ranges?.splice(index, 1);
+      });
+      registry.set(stateAtom, {
+        ...currentState,
+        [alignKey]: void 0
+      });
+    } else {
+      Obj5.change(model.sheet, (obj) => {
+        obj.ranges?.splice(index, 1, nextRangeEntity);
+      });
+      registry.set(stateAtom, {
+        ...currentState,
+        [alignKey]: nextRangeEntity.value
+      });
+    }
+  }, {
+    key: alignKey,
+    value: alignValue,
+    checked: state[alignKey] === alignValue,
+    label: [
+      `range value ${alignValue} label`,
+      {
+        ns: meta.id
+      }
+    ],
+    icon,
+    testId: `grid.toolbar.${alignKey}.${alignValue}`
+  });
+});
+var createAlign = (context) => {
+  const alignGroup = createAlignGroupAction(context.state[alignKey]);
+  const alignActions = createAlignActions(context);
+  return {
+    nodes: [
+      alignGroup,
+      ...alignActions
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "align",
+        relation: "child"
+      },
+      ...alignActions.map(({ id }) => ({
+        source: alignGroup.id,
+        target: id,
+        relation: "child"
+      }))
+    ]
+  };
+};
+
+// src/components/SheetToolbar/style.ts
+import { RegistryContext as RegistryContext2 } from "@effect-atom/atom-react";
+import { useContext as useContext4, useEffect as useEffect5 } from "react";
+import { inRange as inRange4 } from "@dxos/compute";
+import { Obj as Obj6 } from "@dxos/echo";
+import { createMenuAction as createMenuAction2, createMenuItemGroup as createMenuItemGroup2 } from "@dxos/react-ui-menu";
+var styles = {
+  highlight: "ph--highlighter--regular",
+  softwrap: "ph--paragraph--regular"
+};
+var useStyleState = (stateAtom) => {
+  const registry = useContext4(RegistryContext2);
+  const { cursorFallbackRange, model } = useSheetContext();
+  useEffect5(() => {
+    let highlight = false;
+    let softwrap = false;
+    if (cursorFallbackRange && model.sheet.ranges) {
+      model.sheet.ranges.filter(({ range, key }) => key === "style" && inRange4(rangeFromIndex(model.sheet, range), cursorFallbackRange.from)).forEach(({ value }) => {
+        if (value === "highlight") {
+          highlight = true;
+        }
+        if (value === "softwrap") {
+          softwrap = true;
+        }
+      });
+    }
+    const prev = registry.get(stateAtom);
+    registry.set(stateAtom, {
+      ...prev,
+      highlight,
+      softwrap
+    });
+  }, [
+    cursorFallbackRange,
+    model.sheet,
+    registry,
+    stateAtom
+  ]);
+};
+var createStyleGroup = (state) => {
+  return createMenuItemGroup2("style", {
+    variant: "toggleGroup",
+    selectCardinality: "multiple",
+    value: Object.keys(styles).filter((key) => !!state[key]).map((styleValue) => `style--${styleValue}`)
+  });
+};
+var createStyleActions = ({ model, state, stateAtom, registry, cursorFallbackRange }) => Object.entries(styles).map(([styleValue, icon]) => {
+  return createMenuAction2(`style--${styleValue}`, () => {
+    if (!cursorFallbackRange) {
+      return;
+    }
+    const index = model.sheet.ranges?.findIndex((range) => range.key === "style" && inRange4(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from)) ?? -1;
+    const nextRangeEntity = {
+      range: rangeToIndex(model.sheet, cursorFallbackRange),
+      key: "style",
+      value: styleValue
+    };
+    const currentState = registry.get(stateAtom);
+    if (model.sheet.ranges.filter(({ range, key: rangeKey }) => rangeKey === "style" && inRange4(rangeFromIndex(model.sheet, range), cursorFallbackRange.from)).some(({ value: rangeValue }) => rangeValue === styleValue)) {
+      if (index >= 0) {
+        Obj6.change(model.sheet, (obj) => {
+          obj.ranges?.splice(index, 1);
+        });
+      }
+      registry.set(stateAtom, {
+        ...currentState,
+        [nextRangeEntity.value]: false
+      });
+    } else {
+      Obj6.change(model.sheet, (obj) => {
+        obj.ranges?.push(nextRangeEntity);
+      });
+      registry.set(stateAtom, {
+        ...currentState,
+        [nextRangeEntity.value]: true
+      });
+    }
+  }, {
+    key: "style",
+    value: styleValue,
+    icon,
+    label: [
+      `range value ${styleValue} label`,
+      {
+        ns: meta.id
+      }
+    ],
+    checked: !!state[styleValue]
+  });
+});
+var createStyle = (context) => {
+  const styleGroupAction = createStyleGroup(context.state);
+  const styleActions = createStyleActions(context);
+  return {
+    nodes: [
+      styleGroupAction,
+      ...styleActions
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "style",
+        relation: "child"
+      },
+      ...styleActions.map(({ id }) => ({
+        source: styleGroupAction.id,
+        target: id,
+        relation: "child"
+      }))
+    ]
+  };
+};
+
+// src/components/SheetToolbar/useToolbarState.ts
+import { Atom, RegistryContext as RegistryContext3, useAtomValue } from "@effect-atom/atom-react";
+import { useContext as useContext5, useMemo as useMemo3 } from "react";
+var useToolbarState = (initialState = {}) => {
+  return useMemo3(() => Atom.make(initialState).pipe(Atom.keepAlive), []);
+};
+
+// src/components/SheetToolbar/SheetToolbar.tsx
+var createToolbarActions = ({ model, stateAtom, registry, cursorFallbackRange, customActions }) => {
+  return Atom2.make((get) => {
+    const state = get(stateAtom);
+    const context = {
+      model,
+      state,
+      stateAtom,
+      registry,
+      cursorFallbackRange
+    };
+    const align = createAlign(context);
+    const style = createStyle(context);
+    const gap = createGapSeparator();
+    const graph = {
+      nodes: [
+        ...align.nodes,
+        ...style.nodes,
+        ...gap.nodes
+      ],
+      edges: [
+        ...align.edges,
+        ...style.edges,
+        ...gap.edges
+      ]
+    };
+    if (customActions) {
+      const custom = get(customActions);
+      graph.nodes.push(...custom.nodes);
+      graph.edges.push(...custom.edges);
+    }
+    return graph;
+  });
+};
+var SheetToolbar = ({ id, ...props }) => {
+  const { model, cursorFallbackRange } = useSheetContext();
+  const stateAtom = useToolbarState({});
+  const registry = useContext6(RegistryContext4);
+  useAlignState(stateAtom);
+  useStyleState(stateAtom);
+  const { graph } = useAppGraph();
+  const customActions = useMemo4(() => {
+    return Atom2.make((get) => {
+      const actions = get(graph.actions(id));
+      const nodes = actions.filter((action) => action.properties.disposition === "toolbar");
+      return {
+        nodes,
+        edges: nodes.map((node) => ({
+          source: "root",
+          target: node.id,
+          relation: "child"
+        }))
+      };
+    });
+  }, [
+    graph,
+    id
+  ]);
+  const actionsCreator = useMemo4(() => createToolbarActions({
+    model,
+    stateAtom,
+    registry,
+    cursorFallbackRange,
+    customActions
+  }), [
+    model,
+    stateAtom,
+    registry,
+    cursorFallbackRange,
+    customActions
+  ]);
+  const menu = useMenuActions(actionsCreator);
+  return /* @__PURE__ */ React5.createElement(Menu.Root, {
+    ...props,
+    ...menu,
+    attendableId: id
+  }, /* @__PURE__ */ React5.createElement(Menu.Toolbar, null));
+};
+
+// src/components/Sheet/Sheet.tsx
+var Sheet = {
+  Root: SheetRoot,
+  Toolbar: SheetToolbar,
+  Content: SheetContent,
+  Statusbar: SheetStatusbar
+};
+
+// src/containers/SheetContainer/SheetContainer.tsx
+var SheetContainer = ({ registry, ...props }) => /* @__PURE__ */ React6.createElement(ComputeGraphContextProvider, {
+  registry
+}, /* @__PURE__ */ React6.createElement(SheetContainerInner, props));
+var SheetContainerInner = ({ role, subject: sheet, space, ignoreAttention }) => {
+  const graph = useComputeGraph(space);
+  if (!graph) {
+    return null;
+  }
+  return /* @__PURE__ */ React6.createElement(Sheet.Root, {
+    graph,
+    sheet,
+    ignoreAttention
+  }, /* @__PURE__ */ React6.createElement(Panel.Root, {
+    classNames: role === "section" && "aspect-aquare"
+  }, /* @__PURE__ */ React6.createElement(Panel.Toolbar, {
+    asChild: true
+  }, /* @__PURE__ */ React6.createElement(Sheet.Toolbar, {
+    id: Obj7.getDXN(sheet).toString()
+  })), /* @__PURE__ */ React6.createElement(Panel.Content, {
+    asChild: true
+  }, /* @__PURE__ */ React6.createElement(Sheet.Content, null)), /* @__PURE__ */ React6.createElement(Panel.Statusbar, {
+    asChild: true
+  }, /* @__PURE__ */ React6.createElement(Sheet.Statusbar, null))));
+};
+
+// src/containers/SheetContainer/index.ts
+var SheetContainer_default = SheetContainer;
+export {
+  SheetContainer_default as default
+};
+//# sourceMappingURL=SheetContainer-I3NFVVDQ.mjs.map