@dxos/plugin-sheet 0.8.4-main.3eb6e50203 → 0.8.4-main.4a85c3132b

package/dist/lib/node-esm/{chunk-AYSEWH7N.mjs → SheetContainer-KUXNCSFP.mjs}

@@ -2,7 +2,7 @@ import { createRequire } from 'node:module';const require = createRequire(import
 import {
   rangeExtension,
   sheetExtension
-} from "./chunk-PPOYR7DK.mjs";
+} from "./chunk-M52YLLWU.mjs";
 import {
   DEFAULT_COLS,
   DEFAULT_ROWS,
@@ -10,17 +10,23 @@ import {
   MAX_ROWS,
   ReadonlyException,
   SheetOperation,
-  Sheet_exports,
   addressFromIndex,
   addressToIndex,
+  alignKey,
   cellClassNameForRange,
   initialize,
   insertIndices,
   mapFormulaIndicesToRefs,
   mapFormulaRefsToIndices,
   meta,
-  rangeFromIndex
-} from "./chunk-6J5L47IB.mjs";
+  rangeFromIndex,
+  rangeToIndex
+} from "./chunk-NKZ3O4OR.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";
@@ -49,70 +55,25 @@ var useComputeGraph = (space) => {
   return graph;
 };
 
-// src/components/RangeList/RangeList.tsx
-import * as Schema from "effect/Schema";
-import React2, { useCallback } from "react";
-import { rangeToA1Notation } from "@dxos/compute";
-import { Obj } from "@dxos/echo";
-import { Callout, useTranslation } from "@dxos/react-ui";
-import { List } from "@dxos/react-ui-list";
-import { ghostHover } from "@dxos/ui-theme";
-var RangeList = ({ sheet }) => {
-  const { t } = useTranslation(meta.id);
-  const handleSelectRange = (range) => {
-  };
-  const handleDeleteRange = useCallback((range) => {
-    const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
-    Obj.change(sheet, (obj) => {
-      obj.ranges.splice(index, 1);
-    });
-  }, [
-    sheet
-  ]);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("h2", {
-    className: "mbs-cardSpacingBlock mbe-labelSpacingBlock text-sm font-semibold"
-  }, t("range list heading")), sheet.ranges.length < 1 ? /* @__PURE__ */ React2.createElement(Callout.Root, null, /* @__PURE__ */ React2.createElement(Callout.Title, null, t("no ranges message"))) : /* @__PURE__ */ React2.createElement(List.Root, {
-    items: sheet.ranges,
-    isItem: Schema.is(Sheet_exports.Range)
-  }, ({ items: ranges }) => ranges.map((range, i) => /* @__PURE__ */ React2.createElement(List.Item, {
-    key: i,
-    item: range,
-    classNames: [
-      "p-2",
-      ghostHover
-    ]
-  }, /* @__PURE__ */ React2.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React2.createElement(List.ItemTitle, {
-    onClick: () => handleSelectRange(range)
-  }, t("range title", {
-    position: rangeToA1Notation(rangeFromIndex(sheet, range.range)),
-    key: t(`range key ${range.key} label`),
-    value: t(`range value ${range.value} label`)
-  })), /* @__PURE__ */ React2.createElement(List.ItemDeleteButton, {
-    onClick: () => handleDeleteRange(range)
-  })))));
-};
-
-// src/components/index.ts
-import { lazy } from "react";
-
-// src/components/GridSheet/GridSheet.tsx
-import React4, { useCallback as useCallback4, useMemo as useMemo2, useRef, useState as useState4 } from "react";
+// 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 as rangeToA1Notation2 } from "@dxos/compute";
-import { Obj as Obj5 } from "@dxos/echo";
+import { rangeToA1Notation } from "@dxos/compute";
+import { Obj as Obj4 } from "@dxos/echo";
 import { defaultColSize, defaultRowSize } from "@dxos/lit-grid";
-import { DropdownMenu, Icon, useTranslation as useTranslation2 } from "@dxos/react-ui";
+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 as useCallback2, useEffect, useMemo } from "react";
+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 as Obj2, Relation } from "@dxos/echo";
+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";
@@ -138,7 +99,7 @@ var parseThreadAnchorAsCellRange = (cursor) => {
 };
 var useUpdateFocusedCellOnThreadSelection = (grid) => {
   const { model, setActiveRefs } = useSheetContext();
-  const sheetId = Obj2.getDXN(model.sheet).toString();
+  const sheetId = Obj.getDXN(model.sheet).toString();
   const scrollIntoViewHandler = useMemo(() => OperationResolver.make({
     operation: LayoutOperation.ScrollIntoView,
     position: "hoist",
@@ -164,15 +125,15 @@ var useUpdateFocusedCellOnThreadSelection = (grid) => {
 var useSelectThreadOnCellFocus = () => {
   const { model, cursor } = useSheetContext();
   const { invokePromise } = useOperationInvoker();
-  const db = Obj2.getDatabase(model.sheet);
+  const db = Obj.getDatabase(model.sheet);
   const anchors = useQuery(db, Query.select(Filter.id(model.sheet.id)).targetOf(AnchoredTo.AnchoredTo));
-  const selectClosestThread = useCallback2((cellAddress) => {
+  const selectClosestThread = useCallback((cellAddress) => {
     if (!cellAddress) {
       return;
     }
     const closestThread = anchors.find((anchor) => {
       const source = Relation.getSource(anchor);
-      if (anchor.anchor && Obj2.instanceOf(Thread.Thread, source)) {
+      if (anchor.anchor && Obj.instanceOf(Thread.Thread, source)) {
         const range = parseThreadAnchorAsCellRange(anchor.anchor);
         return range ? inRange(range, cellAddress) : false;
       } else {
@@ -180,13 +141,12 @@ var useSelectThreadOnCellFocus = () => {
       }
     });
     if (closestThread) {
-      const primary = Obj2.getDXN(model.sheet).toString();
+      const primary = Obj.getDXN(model.sheet).toString();
       void (async () => {
         await invokePromise(ThreadOperation.Select, {
           current: Relation.getDXN(closestThread).toString()
         });
         await invokePromise(DeckOperation.ChangeCompanion, {
-          primary,
           companion: `${primary}${ATTENDABLE_PATH_SEPARATOR}comments`
         });
       })();
@@ -211,17 +171,17 @@ var useSelectThreadOnCellFocus = () => {
   ]);
 };
 
-// src/components/SheetContext/SheetContext.tsx
-import React3, { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useState as useState2 } from "react";
-import { Obj as Obj4 } from "@dxos/echo";
-import { invariant as invariant2 } from "@dxos/invariant";
+// 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 Obj3 } from "@dxos/echo";
+import { Obj as Obj2 } from "@dxos/echo";
 import { Format, TypeEnum } from "@dxos/echo/internal";
 import { invariant } from "@dxos/invariant";
 import { PublicKey } from "@dxos/keys";
@@ -309,7 +269,7 @@ var SheetModel = class extends Resource {
       S: this,
       C: (f, a) => f(...a)
     });
-    Obj3.change(this._sheet, (obj) => {
+    Obj2.change(this._sheet, (obj) => {
       initialize(obj);
     });
     this._graph.update.on((event) => {
@@ -318,7 +278,7 @@ var SheetModel = class extends Resource {
       }
     });
     this._node = this._graph.getOrCreateNode(createSheetName({
-      type: Obj3.getTypename(this._sheet),
+      type: Obj2.getTypename(this._sheet),
       id: this._sheet.id
     }));
     await this._node.open();
@@ -380,7 +340,7 @@ var SheetModel = class extends Resource {
   }
   insertRows(i, n = 1) {
     let idx = [];
-    Obj3.change(this._sheet, (obj) => {
+    Obj2.change(this._sheet, (obj) => {
       idx = insertIndices(obj.rows, i, n, MAX_ROWS);
     });
     this.reset();
@@ -388,7 +348,7 @@ var SheetModel = class extends Resource {
   }
   insertColumns(i, n = 1) {
     let idx = [];
-    Obj3.change(this._sheet, (obj) => {
+    Obj2.change(this._sheet, (obj) => {
       idx = insertIndices(obj.columns, i, n, MAX_COLS);
     });
     this.reset();
@@ -402,7 +362,7 @@ var SheetModel = class extends Resource {
     const values = this.getCellValues(range).flat();
     const index = this._sheet.rows.indexOf(rowIndex);
     this.clear(range);
-    Obj3.change(this._sheet, (obj) => {
+    Obj2.change(this._sheet, (obj) => {
       obj.rows.splice(index, 1);
       delete obj.rowMeta[rowIndex];
     });
@@ -423,7 +383,7 @@ var SheetModel = class extends Resource {
     const values = this.getCellValues(range).flat();
     const index = this._sheet.columns.indexOf(colIndex);
     this.clear(range);
-    Obj3.change(this._sheet, (obj) => {
+    Obj2.change(this._sheet, (obj) => {
       obj.columns.splice(index, 1);
       delete obj.columnMeta[colIndex];
     });
@@ -437,7 +397,7 @@ var SheetModel = class extends Resource {
     };
   }
   restoreRow({ index, axisIndex, axisMeta, values }) {
-    Obj3.change(this._sheet, (obj) => {
+    Obj2.change(this._sheet, (obj) => {
       obj.rows.splice(index, 0, axisIndex);
       values.forEach((value, col) => {
         if (value) {
@@ -453,7 +413,7 @@ var SheetModel = class extends Resource {
     this.reset();
   }
   restoreColumn({ index, axisIndex, axisMeta, values }) {
-    Obj3.change(this._sheet, (obj) => {
+    Obj2.change(this._sheet, (obj) => {
       obj.columns.splice(index, 0, axisIndex);
       values.forEach((value, row) => {
         if (value) {
@@ -488,7 +448,7 @@ var SheetModel = class extends Resource {
     const topLeft = getTopLeft(range);
     const values = this._iterRange(range, () => null);
     this._node.graph.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
-    Obj3.change(this._sheet, (obj) => {
+    Obj2.change(this._sheet, (obj) => {
       this._iterRange(range, (cell) => {
         const idx = addressToIndex(this._sheet, cell);
         delete obj.cells[idx];
@@ -506,7 +466,7 @@ var SheetModel = class extends Resource {
       ]
     });
     this._node.graph.hf.cut(toModelRange(this._node.sheetId, range));
-    Obj3.change(this._sheet, (obj) => {
+    Obj2.change(this._sheet, (obj) => {
       this._iterRange(range, (cell) => {
         const idx = addressToIndex(this._sheet, cell);
         delete obj.cells[idx];
@@ -537,7 +497,7 @@ var SheetModel = class extends Resource {
     });
     if (!this._node.graph.hf.isClipboardEmpty()) {
       const changes = this._node.graph.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
-      Obj3.change(this._sheet, (obj) => {
+      Obj2.change(this._sheet, (obj) => {
         for (const change of changes) {
           if (change instanceof ExportedCellChange) {
             const { address, newValue } = change;
@@ -673,13 +633,13 @@ var SheetModel = class extends Resource {
     }
     let refresh = false;
     if (cell.row >= this._sheet.rows.length) {
-      Obj3.change(this._sheet, (obj) => {
+      Obj2.change(this._sheet, (obj) => {
         insertIndices(obj.rows, cell.row, 1, MAX_ROWS);
       });
       refresh = true;
     }
     if (cell.col >= this._sheet.columns.length) {
-      Obj3.change(this._sheet, (obj) => {
+      Obj2.change(this._sheet, (obj) => {
         insertIndices(obj.columns, cell.col, 1, MAX_COLS);
       });
       refresh = true;
@@ -698,14 +658,14 @@ var SheetModel = class extends Resource {
     ]);
     const idx = addressToIndex(this._sheet, cell);
     if (value === void 0 || value === null) {
-      Obj3.change(this._sheet, (obj) => {
+      Obj2.change(this._sheet, (obj) => {
         delete obj.cells[idx];
       });
     } else {
       if (isFormula(value)) {
         value = this._graph.mapFunctionBindingToId(mapFormulaRefsToIndices(this._sheet, value));
       }
-      Obj3.change(this._sheet, (obj) => {
+      Obj2.change(this._sheet, (obj) => {
         obj.cells[idx] = {
           value
         };
@@ -852,21 +812,25 @@ var useSheetModel = (graph, sheet, { readonly } = {}) => {
   return model;
 };
 
-// src/components/SheetContext/SheetContext.tsx
-var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-sheet/src/components/SheetContext/SheetContext.tsx";
+// src/components/SheetRoot/SheetRoot.tsx
 var SheetContext = /* @__PURE__ */ createContext2(void 0);
 var useSheetContext = () => {
-  const context = useContext2(SheetContext);
-  invariant2(context, void 0, {
-    F: __dxlog_file2,
-    L: 54,
-    S: void 0,
-    A: [
-      "context",
-      ""
-    ]
+  return useContext2(SheetContext) ?? raise2(new Error("Missing SheetContext"));
+};
+var SheetRoot = ({ children, graph, sheet, readonly, ignoreAttention, onInfo }) => {
+  const model = useSheetModel(graph, sheet, {
+    readonly
   });
-  return context;
+  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);
@@ -874,7 +838,7 @@ var SheetProviderImpl = ({ __gridScope, children, ignoreAttention, model, onInfo
   const [range, setRangeInternal] = useState2();
   const [cursorFallbackRange, setCursorFallbackRange] = useState2();
   const [activeRefs, setActiveRefs] = useState2("");
-  const setCursor = useCallback3((nextCursor) => {
+  const setCursor = useCallback2((nextCursor) => {
     setCursorInternal(nextCursor);
     setCursorFallbackRange(range?.to ? range : nextCursor ? {
       from: nextCursor,
@@ -883,7 +847,7 @@ var SheetProviderImpl = ({ __gridScope, children, ignoreAttention, model, onInfo
   }, [
     range
   ]);
-  const setRange = useCallback3((nextRange) => {
+  const setRange = useCallback2((nextRange) => {
     setRangeInternal(nextRange);
     setCursorFallbackRange(nextRange?.to ? nextRange : cursor ? {
       from: cursor,
@@ -892,7 +856,7 @@ var SheetProviderImpl = ({ __gridScope, children, ignoreAttention, model, onInfo
   }, [
     cursor
   ]);
-  return /* @__PURE__ */ React3.createElement(SheetContext.Provider, {
+  return /* @__PURE__ */ React2.createElement(SheetContext.Provider, {
     value: {
       id,
       model,
@@ -905,26 +869,14 @@ var SheetProviderImpl = ({ __gridScope, children, ignoreAttention, model, onInfo
       cursorFallbackRange,
       activeRefs,
       setActiveRefs,
+      ignoreAttention,
       // TODO(burdon): Change to event.
-      onInfo,
-      ignoreAttention
+      onInfo
     }
   }, children);
 };
-var SheetProvider = ({ children, graph, sheet, readonly, ignoreAttention, onInfo }) => {
-  const model = useSheetModel(graph, sheet, {
-    readonly
-  });
-  return !model ? null : /* @__PURE__ */ React3.createElement(Grid.Root, {
-    id: Obj4.getDXN(sheet).toString()
-  }, /* @__PURE__ */ React3.createElement(SheetProviderImpl, {
-    model,
-    onInfo,
-    ignoreAttention
-  }, children));
-};
 
-// src/components/GridSheet/util.ts
+// 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";
@@ -1001,12 +953,12 @@ var gridCellGetter = (model) => {
 };
 var rowLabelCell = (row) => ({
   value: rowToA1Notation(row),
-  className: "!bg-toolbarSurface text-subdued text-end pie-1",
+  className: "!bg-toolbar-surface text-subdued text-end pe-1",
   resizeHandle: "row"
 });
 var colLabelCell = (col) => ({
   value: colToA1Notation(col),
-  className: "!bg-toolbarSurface text-subdued",
+  className: "!bg-toolbar-surface text-subdued",
   resizeHandle: "col"
 });
 var cellGetter = (model) => {
@@ -1018,7 +970,7 @@ var cellGetter = (model) => {
       case "fixedStartStart": {
         return {
           "0,0": {
-            className: "!bg-toolbarSurface"
+            className: "!bg-toolbar-surface"
           }
         };
       }
@@ -1095,7 +1047,7 @@ var useSheetModelDxGridProps = (dxGrid, model) => {
   };
 };
 
-// src/components/GridSheet/GridSheet.tsx
+// src/components/SheetContent/SheetContent.tsx
 var inertPosition = {
   plane: "grid",
   col: 0,
@@ -1142,15 +1094,16 @@ var sheetRowDefault = {
     resizeable: true
   }
 };
-var GridSheet = () => {
-  const { t } = useTranslation2(meta.id);
+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 handleFocus = useCallback4((event) => {
+  const { className, ...rest } = useComposableProps(props);
+  const handleFocus = useCallback3((event) => {
     if (!editing) {
       const cell = closestCell(event.target);
       if (cell) {
@@ -1170,7 +1123,7 @@ var GridSheet = () => {
   }, [
     editing
   ]);
-  const handleClose = useCallback4((_value, event) => {
+  const handleClose = useCallback3((_value, event) => {
     if (event) {
       const { key, shift } = event;
       const axis = [
@@ -1193,7 +1146,7 @@ var GridSheet = () => {
     editing,
     dxGrid
   ]);
-  const handleBlur = useCallback4((value) => {
+  const handleBlur = useCallback3((value) => {
     if (value !== void 0) {
       model.setValue(parseCellIndex(editing.index), value);
     }
@@ -1201,8 +1154,8 @@ var GridSheet = () => {
     model,
     editing
   ]);
-  const handleAxisResize = useCallback4(({ axis, size, index: numericIndex }) => {
-    Obj5.change(model.sheet, (sheet) => {
+  const handleAxisResize = useCallback3(({ axis, size, index: numericIndex }) => {
+    Obj4.change(model.sheet, (sheet) => {
       if (axis === "row") {
         const rowId = sheet.rows[parseInt(numericIndex)];
         sheet.rowMeta[rowId] ??= {};
@@ -1216,7 +1169,7 @@ var GridSheet = () => {
   }, [
     model
   ]);
-  const handleSelect = useCallback4(({ minCol, maxCol, minRow, maxRow }) => {
+  const handleSelect = useCallback3(({ minCol, maxCol, minRow, maxRow }) => {
     const range = {
       from: {
         col: minCol,
@@ -1230,14 +1183,14 @@ var GridSheet = () => {
       };
     }
     if (editing) {
-      rangeController.current?.setRange(rangeToA1Notation2(range));
+      rangeController.current?.setRange(rangeToA1Notation(range));
     } else {
       setRange(range.to ? range : void 0);
     }
   }, [
     editing
   ]);
-  const handleWheel = useCallback4((event) => {
+  const handleWheel = useCallback3((event) => {
     if (!ignoreAttention && !hasAttention) {
       event.stopPropagation();
     }
@@ -1245,7 +1198,7 @@ var GridSheet = () => {
     hasAttention,
     ignoreAttention
   ]);
-  const selectEntireAxis = useCallback4((pos) => {
+  const selectEntireAxis = useCallback3((pos) => {
     switch (pos.plane) {
       case "frozenRowsStart":
         return dxGrid?.setSelection({
@@ -1278,7 +1231,7 @@ var GridSheet = () => {
     dxGrid,
     model.sheet
   ]);
-  const handleClick = useCallback4((event) => {
+  const handleClick = useCallback3((event) => {
     const cell = closestCell(event.target);
     if (cell) {
       selectEntireAxis(cell);
@@ -1286,7 +1239,7 @@ var GridSheet = () => {
   }, [
     selectEntireAxis
   ]);
-  const handleKeyDown = useCallback4((event) => {
+  const handleKeyDown = useCallback3((event) => {
     switch (event.key) {
       case "Backspace":
       case "Delete":
@@ -1336,7 +1289,7 @@ var GridSheet = () => {
   const contextMenuAnchorRef = useRef(null);
   const [contextMenuOpen, setContextMenuOpen] = useState4(null);
   const contextMenuAxis = contextMenuOpen?.plane.startsWith("frozenRows") ? "col" : "row";
-  const handleContextMenu = useCallback4((event) => {
+  const handleContextMenu = useCallback3((event) => {
     const cell = closestCell(event.target);
     if (cell && cell.plane.startsWith("frozen")) {
       event.preventDefault();
@@ -1344,7 +1297,7 @@ var GridSheet = () => {
       setContextMenuOpen(cell);
     }
   }, []);
-  const handleAxisMenuAction = useCallback4((operation) => {
+  const handleAxisMenuAction = useCallback3((operation) => {
     switch (operation) {
       case "insert-before":
       case "insert-after":
@@ -1390,85 +1343,464 @@ var GridSheet = () => {
     handleClose,
     editing
   ]);
-  const getCellContent = useCallback4((index) => {
+  const getCellContent = useCallback3((index) => {
     return model.getCellText(parseCellIndex(index));
   }, [
     model
   ]);
   useUpdateFocusedCellOnThreadSelection(dxGrid);
   useSelectThreadOnCellFocus();
-  return (
-    // TODO(thure): Why are Table’s and Sheet’s editor boxes off by 1px?
-    /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: "relative min-bs-0 [&_.cm-editor]:!border-lb [&_.cm-editor]:!border-transparent"
-    }, /* @__PURE__ */ React4.createElement(GridCellEditor, {
-      getCellContent,
-      extensions,
-      onBlur: handleBlur
-    }), /* @__PURE__ */ React4.createElement(Grid2.Content, {
-      initialCells,
-      limitColumns: DEFAULT_COLS,
-      limitRows: DEFAULT_ROWS,
-      columns,
-      rows,
-      // TODO(burdon): `col` vs. `column`?
-      columnDefault: sheetColDefault,
-      rowDefault: sheetRowDefault,
-      frozen,
-      onAxisResize: handleAxisResize,
-      onSelect: handleSelect,
-      onFocus: handleFocus,
-      onWheelCapture: handleWheel,
-      onKeyDown: handleKeyDown,
-      onContextMenu: handleContextMenu,
-      onClick: handleClick,
-      overscroll: "trap",
-      className: "[--dx-grid-base:var(--baseSurface)] [&_.dx-grid]:absolute [&_.dx-grid]:inset-0",
-      activeRefs,
-      ref: setDxGrid
-    }), /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
-      modal: false,
-      open: !!contextMenuOpen,
-      onOpenChange: (nextOpen) => setContextMenuOpen(nextOpen ? inertPosition : null)
-    }, /* @__PURE__ */ React4.createElement(DropdownMenu.VirtualTrigger, {
-      virtualRef: contextMenuAnchorRef
-    }), /* @__PURE__ */ React4.createElement(DropdownMenu.Content, {
-      side: contextMenuAxis === "col" ? "bottom" : "right",
-      sideOffset: 4,
-      collisionPadding: 8
-    }, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-      onClick: () => handleAxisMenuAction("insert-before"),
-      "data-testid": `grid.${contextMenuAxis}.insert-before`
-    }, /* @__PURE__ */ React4.createElement(Icon, {
-      size: 5,
-      icon: contextMenuAxis === "col" ? "ph--columns-plus-left--regular" : "ph--rows-plus-top--regular"
-    }), /* @__PURE__ */ React4.createElement("span", null, t(`add ${contextMenuAxis} before label`))), /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-      onClick: () => handleAxisMenuAction("insert-after"),
-      "data-testid": `grid.${contextMenuAxis}.insert-after`
-    }, /* @__PURE__ */ React4.createElement(Icon, {
-      size: 5,
-      icon: contextMenuAxis === "col" ? "ph--columns-plus-right--regular" : "ph--rows-plus-bottom--regular"
-    }), /* @__PURE__ */ React4.createElement("span", null, t(`add ${contextMenuAxis} after label`))), /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-      onClick: () => handleAxisMenuAction("drop"),
-      "data-testid": `grid.${contextMenuAxis}.drop`
-    }, /* @__PURE__ */ React4.createElement(Icon, {
-      size: 5,
-      icon: "ph--backspace--regular"
-    }), /* @__PURE__ */ React4.createElement("span", null, t(`delete ${contextMenuAxis} label`)))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))))
-  );
+  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/index.ts
-var SheetContainer = lazy(() => import("./SheetContainer-7H5R7M54.mjs"));
+// 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 {
-  ComputeGraphContextProvider,
-  useComputeGraph,
-  useSheetContext,
-  SheetProvider,
-  GridSheet,
-  RangeList,
-  SheetContainer
+  SheetContainer_default as default
 };
-//# sourceMappingURL=chunk-AYSEWH7N.mjs.map
+//# sourceMappingURL=SheetContainer-KUXNCSFP.mjs.map