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

package/dist/lib/browser/{SheetContainer-U4H5D34A.mjs → SheetContainer-Y7ZMFBAP.mjs}

@@ -1,24 +1,33 @@
 import {
   useComputeGraph
-} from "./chunk-APHOLYUB.mjs";
+} from "./chunk-PGKZPKUD.mjs";
 import {
   SheetModel,
   addressFromA1Notation,
+  addressFromIndex,
   addressToA1Notation,
+  addressToIndex,
+  closest,
   columnLetter,
   defaultFunctions,
   inRange,
   posEquals,
+  rangeFromIndex,
   rangeToA1Notation
-} from "./chunk-D5AGLXJP.mjs";
+} from "./chunk-GNNVBNCX.mjs";
 import {
   ValueTypeEnum
-} from "./chunk-FUAGSXA4.mjs";
-import "./chunk-JRL5LGCE.mjs";
+} from "./chunk-WUPTZUTX.mjs";
+import {
+  SHEET_PLUGIN
+} from "./chunk-JRL5LGCE.mjs";
 
 // packages/plugins/plugin-sheet/src/components/SheetContainer.tsx
-import React4 from "react";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import React7, { useCallback as useCallback2 } from "react";
+import { useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
+import { fullyQualifiedId as fullyQualifiedId4 } from "@dxos/react-client/echo";
+import { useIsDirectlyAttended } from "@dxos/react-ui-attention";
+import { focusRing, mx as mx4 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-sheet/src/components/Sheet/Sheet.tsx
 import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
@@ -26,14 +35,14 @@ import { restrictToHorizontalAxis, restrictToVerticalAxis } from "@dnd-kit/modif
 import { getEventCoordinates, useCombinedRefs } from "@dnd-kit/utilities";
 import { Function as FunctionIcon } from "@phosphor-icons/react";
 import { Resizable } from "re-resizable";
-import React3, { forwardRef, useEffect as useEffect3, useImperativeHandle, useMemo, useRef, useState as useState4 } from "react";
+import React4, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo3, useRef, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 import { useResizeDetector } from "react-resize-detector";
-import { debounce } from "@dxos/async";
-import { fullyQualifiedId as fullyQualifiedId2, createDocAccessor } from "@dxos/client/echo";
+import { debounce as debounce2 } from "@dxos/async";
+import { fullyQualifiedId as fullyQualifiedId3, createDocAccessor } from "@dxos/client/echo";
 import { log } from "@dxos/log";
 import { createAttendableAttributes, useHasAttention } from "@dxos/react-ui-attention";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+import { mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-sheet/src/components/Sheet/grid.ts
 import { useEffect, useState } from "react";
@@ -327,10 +336,49 @@ var useRangeSelect = (cb) => {
 };
 
 // packages/plugins/plugin-sheet/src/components/Sheet/sheet-context.tsx
-import React, { createContext, useContext, useState as useState3, useEffect as useEffect2 } from "react";
+import React, { createContext, useContext, useState as useState3, useEffect as useEffect2, useMemo } from "react";
 import { invariant } from "@dxos/invariant";
 import { fullyQualifiedId } from "@dxos/react-client/echo";
 
+// packages/plugins/plugin-sheet/src/components/Sheet/decorations.ts
+import { create } from "@dxos/echo-schema";
+var createDecorations = () => {
+  const { decorations } = create({
+    decorations: {}
+  });
+  const addDecoration = (cellIndex, decorator) => {
+    decorations[cellIndex] = [
+      ...decorations[cellIndex] || [],
+      decorator
+    ];
+  };
+  const removeDecoration = (cellIndex, type) => {
+    if (type) {
+      decorations[cellIndex] = (decorations[cellIndex] || []).filter((d) => d.type !== type);
+    } else {
+      delete decorations[cellIndex];
+    }
+  };
+  const getDecorationsForCell = (cellIndex) => {
+    return decorations[cellIndex];
+  };
+  const getAllDecorations = () => {
+    const result = [];
+    for (const decoratorArray of Object.values(decorations)) {
+      for (const decorator of decoratorArray) {
+        result.push(decorator);
+      }
+    }
+    return result;
+  };
+  return {
+    addDecoration,
+    removeDecoration,
+    getDecorationsForCell,
+    getAllDecorations
+  };
+};
+
 // packages/plugins/plugin-sheet/src/components/Sheet/formatting.ts
 var FormattingModel = class {
   constructor(model) {
@@ -345,13 +393,13 @@ var FormattingModel = class {
       return {};
     }
     const locales = void 0;
-    const idx = this.model.addressToIndex(cell);
+    const idx = addressToIndex(this.model.sheet, cell);
     let formatting = this.model.sheet.formatting?.[idx] ?? {};
     const classNames = [
       ...formatting?.classNames ?? []
     ];
     for (const [idx2, _formatting] of Object.entries(this.model.sheet.formatting)) {
-      const range = this.model.rangeFromIndex(idx2);
+      const range = rangeFromIndex(this.model.sheet, idx2);
       if (inRange(range, cell)) {
         if (_formatting.classNames) {
           classNames.push(..._formatting.classNames);
@@ -450,7 +498,7 @@ var useSheetContext = () => {
   const context = useContext(SheetContext);
   invariant(context, void 0, {
     F: __dxlog_file,
-    L: 45,
+    L: 49,
     S: void 0,
     A: [
       "context",
@@ -491,6 +539,7 @@ var SheetContextProvider = ({ children, sheet, space, readonly, onInfo, ...optio
   const [cursor, setCursor] = useState3();
   const [range, setRange] = useState3();
   const [editing, setEditing] = useState3(false);
+  const decorations = useMemo(() => createDecorations(), []);
   const [[model, formatting] = [], setModels] = useState3(void 0);
   useEffect2(() => {
     let model2;
@@ -530,11 +579,178 @@ var SheetContextProvider = ({ children, sheet, space, readonly, onInfo, ...optio
       editing,
       setEditing,
       // TODO(burdon): Change to event.
-      onInfo
+      onInfo,
+      decorations
     }
   }, children);
 };
 
+// packages/plugins/plugin-sheet/src/components/Sheet/threads.tsx
+import { effect } from "@preact/signals-core";
+import React2, { useCallback, useEffect as useEffect3, useMemo as useMemo2 } from "react";
+import { LayoutAction, useIntentDispatcher, useIntentResolver } from "@dxos/app-framework";
+import { debounce } from "@dxos/async";
+import { fullyQualifiedId as fullyQualifiedId2 } from "@dxos/react-client/echo";
+import { Icon, useTranslation } from "@dxos/react-ui";
+import { mx } from "@dxos/react-ui-theme";
+var CommentIndicator = () => {
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "absolute top-0 right-0 w-0 h-0 border-t-8 border-l-8 border-t-cmCommentSurface border-l-transparent"
+  });
+};
+var ThreadedCellWrapper = ({ children }) => {
+  const dispatch = useIntentDispatcher();
+  const [isHovered, setIsHovered] = React2.useState(true);
+  const { t } = useTranslation(SHEET_PLUGIN);
+  const handleClick = React2.useCallback((_event) => {
+    void dispatch({
+      action: LayoutAction.SET_LAYOUT,
+      data: {
+        element: "complementary",
+        state: true
+      }
+    });
+  }, [
+    dispatch
+  ]);
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: mx("relative h-full is-full"),
+    onMouseEnter: () => {
+      setIsHovered(true);
+    },
+    onMouseLeave: () => {
+      setIsHovered(false);
+    }
+  }, /* @__PURE__ */ React2.createElement(CommentIndicator, null), isHovered && /* @__PURE__ */ React2.createElement("div", {
+    className: "absolute inset-0 flex items-center justify-end pr-1"
+  }, /* @__PURE__ */ React2.createElement("button", {
+    className: "ch-button text-xs min-bs-0 p-1",
+    onClick: handleClick,
+    "aria-label": t("open comment for sheet cell")
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    icon: "ph--chat--regular",
+    "aria-hidden": true
+  }))), children);
+};
+var createThreadDecoration = (cellIndex, threadId, sheetId) => {
+  return {
+    type: "comment",
+    cellIndex,
+    decorate: (props) => /* @__PURE__ */ React2.createElement(ThreadedCellWrapper, props)
+  };
+};
+var useUpdateCursorOnThreadSelection = () => {
+  const { setCursor, model } = useSheetContext();
+  const handleScrollIntoView = useCallback(({ action, data }) => {
+    switch (action) {
+      case LayoutAction.SCROLL_INTO_VIEW: {
+        if (!data?.id || data?.cursor === void 0 || data?.id !== fullyQualifiedId2(model.sheet)) {
+          return;
+        }
+        const cellAddress = addressFromIndex(model.sheet, data.cursor);
+        setCursor(cellAddress);
+      }
+    }
+  }, [
+    model.sheet,
+    setCursor
+  ]);
+  useIntentResolver(SHEET_PLUGIN, handleScrollIntoView);
+};
+var useSelectThreadOnCursorChange = () => {
+  const { cursor, model } = useSheetContext();
+  const dispatch = useIntentDispatcher();
+  const activeThreads = useMemo2(() => model.sheet.threads?.filter((thread) => !!thread && thread.status === "active") ?? [], [
+    JSON.stringify(model.sheet.threads)
+  ]);
+  const activeThreadAddresses = useMemo2(() => activeThreads.map((thread) => thread.anchor).filter((anchor) => anchor !== void 0).map((anchor) => addressFromIndex(model.sheet, anchor)), [
+    activeThreads,
+    model.sheet
+  ]);
+  const selectClosestThread = useCallback((cellAddress) => {
+    if (!cellAddress || !activeThreads) {
+      return;
+    }
+    const closestThreadAnchor = closest(cellAddress, activeThreadAddresses);
+    if (closestThreadAnchor) {
+      const closestThread = activeThreads.find((thread) => thread && thread.anchor === addressToIndex(model.sheet, closestThreadAnchor));
+      if (closestThread) {
+        void dispatch([
+          {
+            action: "dxos.org/plugin/thread/action/select",
+            data: {
+              current: fullyQualifiedId2(closestThread)
+            }
+          }
+        ]);
+      }
+    }
+  }, [
+    dispatch,
+    activeThreads,
+    activeThreadAddresses,
+    model.sheet
+  ]);
+  const debounced = useMemo2(() => {
+    return debounce((cursor2) => requestAnimationFrame(() => selectClosestThread(cursor2)), 50);
+  }, [
+    selectClosestThread
+  ]);
+  useEffect3(() => {
+    if (!cursor) {
+      return;
+    }
+    debounced(cursor);
+  }, [
+    cursor,
+    selectClosestThread
+  ]);
+};
+var useThreadDecorations = () => {
+  const { decorations, model } = useSheetContext();
+  const sheet = useMemo2(() => model.sheet, [
+    model.sheet
+  ]);
+  const sheetId = useMemo2(() => fullyQualifiedId2(sheet), [
+    sheet
+  ]);
+  useEffect3(() => {
+    const unsubscribe = effect(() => {
+      const activeThreadAnchors = /* @__PURE__ */ new Set();
+      if (!sheet.threads) {
+        return;
+      }
+      for (const thread of sheet.threads) {
+        if (!thread || thread.anchor === void 0 || thread.status === "resolved") {
+          continue;
+        }
+        activeThreadAnchors.add(thread.anchor);
+        const index = thread.anchor;
+        const existingDecorations = decorations.getDecorationsForCell(index);
+        if (!existingDecorations || !existingDecorations.some((d) => d.type === "comment")) {
+          decorations.addDecoration(index, createThreadDecoration(index, thread.id, sheetId));
+        }
+      }
+      for (const decoration of decorations.getAllDecorations()) {
+        if (decoration.type !== "comment") {
+          continue;
+        }
+        if (!activeThreadAnchors.has(decoration.cellIndex)) {
+          decorations.removeDecoration(decoration.cellIndex, "comment");
+        }
+      }
+    });
+    return () => unsubscribe();
+  });
+};
+var useThreads = () => {
+  useUpdateCursorOnThreadSelection();
+  useSelectThreadOnCursorChange();
+  useThreadDecorations();
+};
+
 // packages/plugins/plugin-sheet/src/components/Sheet/util.ts
 var getRelativeClientRect = (root, element) => {
   const rootRect = root.getBoundingClientRect();
@@ -570,7 +786,7 @@ var scrollIntoView = (scrollContainer, el) => {
 
 // packages/plugins/plugin-sheet/src/components/CellEditor/CellEditor.tsx
 import { EditorView, keymap } from "@codemirror/view";
-import React2 from "react";
+import React3 from "react";
 import { useThemeContext } from "@dxos/react-ui";
 import { createBasicExtensions, createThemeExtensions, preventNewline, useTextEditor } from "@dxos/react-ui-editor";
 var editorKeys = ({ onNav, onClose }) => {
@@ -670,7 +886,7 @@ var CellEditor = ({ value, extension, autoFocus, onBlur }) => {
   }, [
     extension
   ]);
-  return /* @__PURE__ */ React2.createElement("div", {
+  return /* @__PURE__ */ React3.createElement("div", {
     ref: parentRef,
     className: "flex w-full"
   });
@@ -683,7 +899,7 @@ import { Facet } from "@codemirror/state";
 import { ViewPlugin, keymap as keymap2 } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
 import { spreadsheet } from "codemirror-lang-spreadsheet";
-import { mx } from "@dxos/react-ui-theme";
+import { mx as mx2 } from "@dxos/react-ui-theme";
 var highlightStyles = HighlightStyle.define([
   // Function.
   {
@@ -794,7 +1010,7 @@ var sheetExtension = ({ functions = [] }) => {
       // NOTE: Useful for debugging.
       closeOnBlur: false,
       icons: false,
-      tooltipClass: () => mx(
+      tooltipClass: () => mx2(
         // TODO(burdon): Factor out fragments.
         // TODO(burdon): Size to make width same as column.
         "!-left-[1px] !top-[33px] !-m-0 border !border-t-0 [&>ul]:!min-w-[198px]",
@@ -897,25 +1113,26 @@ var fragments = {
   cellSelected: "bg-gridCellSelected text-baseText border !border-accentSurface"
 };
 var SheetRoot = ({ children, ...props }) => {
-  return /* @__PURE__ */ React3.createElement(SheetContextProvider, props, children);
+  return /* @__PURE__ */ React4.createElement(SheetContextProvider, props, children);
 };
 var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numColumns }, forwardRef2) => {
   const { model, cursor, setCursor, setRange, setEditing } = useSheetContext();
   const { rowsRef, columnsRef, contentRef } = useScrollHandlers();
+  useThreads();
   const [rows, setRows] = useState4([
     ...model.sheet.rows
   ]);
   const [columns, setColumns] = useState4([
     ...model.sheet.columns
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     const rowsAccessor = createDocAccessor(model.sheet, [
       "rows"
     ]);
     const columnsAccessor = createDocAccessor(model.sheet, [
       "columns"
     ]);
-    const handleUpdate = debounce(() => {
+    const handleUpdate = debounce2(() => {
       setRows([
         ...model.sheet.rows
       ]);
@@ -933,29 +1150,29 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numColumns },
   }, [
     model
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     model.reset();
   }, [
     rows,
     columns
   ]);
   const handleMoveRows = (from, to, num = 1) => {
-    const cursorIdx = cursor ? model.addressToIndex(cursor) : void 0;
+    const cursorIdx = cursor ? addressToIndex(model.sheet, cursor) : void 0;
     const [rows2] = model.sheet.rows.splice(from, num);
     model.sheet.rows.splice(to, 0, rows2);
     if (cursorIdx) {
-      setCursor(model.addressFromIndex(cursorIdx));
+      setCursor(addressFromIndex(model.sheet, cursorIdx));
     }
     setRows([
       ...model.sheet.rows
     ]);
   };
   const handleMoveColumns = (from, to, num = 1) => {
-    const cursorIdx = cursor ? model.addressToIndex(cursor) : void 0;
+    const cursorIdx = cursor ? addressToIndex(model.sheet, cursor) : void 0;
     const columns2 = model.sheet.columns.splice(from, num);
     model.sheet.columns.splice(to, 0, ...columns2);
     if (cursorIdx) {
-      setCursor(model.addressFromIndex(cursorIdx));
+      setCursor(addressFromIndex(model.sheet, cursorIdx));
     }
     setColumns([
       ...model.sheet.columns
@@ -963,14 +1180,14 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numColumns },
   };
   const [rowSizes, setRowSizes] = useState4();
   const [columnSizes, setColumnSizes] = useState4();
-  useEffect3(() => {
+  useEffect4(() => {
     const rowAccessor = createDocAccessor(model.sheet, [
       "rowMeta"
     ]);
     const columnAccessor = createDocAccessor(model.sheet, [
       "columnMeta"
     ]);
-    const handleUpdate = debounce(() => {
+    const handleUpdate = debounce2(() => {
       const mapSizes = (values) => values.reduce((map, [idx, meta]) => {
         if (meta.size) {
           map[idx] = meta.size;
@@ -1012,16 +1229,16 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numColumns },
       }));
     }
   };
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: mx2("grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden", classNames)
-  }, /* @__PURE__ */ React3.createElement(GridCorner, {
+    className: mx3("grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden", classNames)
+  }, /* @__PURE__ */ React4.createElement(GridCorner, {
     onClick: () => {
       setCursor(void 0);
       setRange(void 0);
       setEditing(false);
     }
-  }), /* @__PURE__ */ React3.createElement(SheetColumns, {
+  }), /* @__PURE__ */ React4.createElement(SheetColumns, {
     ref: columnsRef,
     columns,
     sizes: columnSizes,
@@ -1032,7 +1249,7 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numColumns },
     }),
     onResize: handleResizeColumn,
     onMove: handleMoveColumns
-  }), /* @__PURE__ */ React3.createElement(SheetRows, {
+  }), /* @__PURE__ */ React4.createElement(SheetRows, {
     ref: rowsRef,
     rows,
     sizes: rowSizes,
@@ -1043,7 +1260,7 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numColumns },
     }),
     onResize: handleResizeRow,
     onMove: handleMoveRows
-  }), /* @__PURE__ */ React3.createElement(SheetGrid, {
+  }), /* @__PURE__ */ React4.createElement(SheetGrid, {
     ref: contentRef,
     size: {
       numRows: numRows ?? rows.length,
@@ -1053,13 +1270,13 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numColumns },
     columns,
     rowSizes,
     columnSizes
-  }), /* @__PURE__ */ React3.createElement(GridCorner, null), /* @__PURE__ */ React3.createElement(SheetStatusBar, null));
+  }), /* @__PURE__ */ React4.createElement(GridCorner, null), /* @__PURE__ */ React4.createElement(SheetStatusBar, null));
 });
 var useScrollHandlers = () => {
   const rowsRef = useRef(null);
   const columnsRef = useRef(null);
   const contentRef = useRef(null);
-  useEffect3(() => {
+  useEffect4(() => {
     const handleRowsScroll = (ev) => {
       const { scrollTop } = ev.target;
       if (!rowsRef.current.dataset.locked) {
@@ -1096,13 +1313,13 @@ var useScrollHandlers = () => {
   };
 };
 var GridCorner = (props) => {
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     className: fragments.axis,
     ...props
   });
 };
 var MovingOverlay = ({ label }) => {
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     className: "flex w-full h-full justify-center items-center text-sm p-1 bg-gridOverlay cursor-pointer"
   }, label);
 };
@@ -1146,18 +1363,18 @@ var SheetRows = /* @__PURE__ */ forwardRef(({ rows, sizes, selected, onSelect, o
     }
     return transform;
   };
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ React3.createElement("div", {
-    className: mx2("z-20 absolute inset-0 border-y border-gridLine pointer-events-none"),
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: mx3("z-20 absolute inset-0 border-y border-gridLine pointer-events-none"),
     style: {
       width: axisWidth
     }
-  }), /* @__PURE__ */ React3.createElement("div", {
+  }), /* @__PURE__ */ React4.createElement("div", {
     ref: forwardRef2,
     role: "rowheader",
     className: "grow overflow-y-auto scrollbar-none"
-  }, /* @__PURE__ */ React3.createElement(DndContext, {
+  }, /* @__PURE__ */ React4.createElement(DndContext, {
     sensors,
     modifiers: [
       restrictToVerticalAxis,
@@ -1165,12 +1382,12 @@ var SheetRows = /* @__PURE__ */ forwardRef(({ rows, sizes, selected, onSelect, o
     ],
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd
-  }, /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement("div", {
     className: "flex flex-col",
     style: {
       width: axisWidth
     }
-  }, rows.map((idx, index) => /* @__PURE__ */ React3.createElement(GridRowCell, {
+  }, rows.map((idx, index) => /* @__PURE__ */ React4.createElement(GridRowCell, {
     key: idx,
     idx,
     index,
@@ -1180,7 +1397,7 @@ var SheetRows = /* @__PURE__ */ forwardRef(({ rows, sizes, selected, onSelect, o
     selected: selected === index,
     onResize,
     onSelect
-  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React3.createElement(DragOverlay, null, active && /* @__PURE__ */ React3.createElement(MovingOverlay, {
+  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement(DragOverlay, null, active && /* @__PURE__ */ React4.createElement(MovingOverlay, {
     label: String(active.data.current.index + 1)
   })), document.body))));
 });
@@ -1221,7 +1438,7 @@ var GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onResi
     onResize?.(idx, initialSize + height, true);
     setResizing(false);
   };
-  return /* @__PURE__ */ React3.createElement(Resizable, {
+  return /* @__PURE__ */ React4.createElement(Resizable, {
     enable: {
       bottom: resize
     },
@@ -1233,17 +1450,17 @@ var GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onResi
     onResizeStart: handleResizeStart,
     onResize: handleResize,
     onResizeStop: handleResizeStop
-  }, /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement("div", {
     ref: setNodeRef,
     ...attributes,
     ...listeners,
-    className: mx2("flex h-full items-center justify-center cursor-pointer", "border-t border-gridLine focus-visible:outline-none", fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
+    className: mx3("flex h-full items-center justify-center cursor-pointer", "border-t border-gridLine focus-visible:outline-none", fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
     onClick: () => onSelect?.(index)
-  }, /* @__PURE__ */ React3.createElement("span", {
+  }, /* @__PURE__ */ React4.createElement("span", {
     className: "flex w-full justify-center"
-  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React3.createElement("div", {
+  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React4.createElement("div", {
     className: "z-20 absolute top-0 w-full min-h-[4px] border-b-4 border-accentSurface"
-  }), resizing && /* @__PURE__ */ React3.createElement("div", {
+  }), resizing && /* @__PURE__ */ React4.createElement("div", {
     className: "z-20 absolute bottom-0 w-full min-h-[4px] border-b-4 border-accentSurface"
   })));
 };
@@ -1280,18 +1497,18 @@ var SheetColumns = /* @__PURE__ */ forwardRef(({ columns, sizes, selected, onSel
     }
     return transform;
   };
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ React3.createElement("div", {
-    className: mx2("z-20 absolute inset-0 border-x border-gridLine pointer-events-none"),
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: mx3("z-20 absolute inset-0 border-x border-gridLine pointer-events-none"),
     style: {
       height: axisHeight
     }
-  }), /* @__PURE__ */ React3.createElement("div", {
+  }), /* @__PURE__ */ React4.createElement("div", {
     ref: forwardRef2,
     role: "columnheader",
     className: "grow overflow-x-auto scrollbar-none"
-  }, /* @__PURE__ */ React3.createElement(DndContext, {
+  }, /* @__PURE__ */ React4.createElement(DndContext, {
     autoScroll: {
       enabled: true
     },
@@ -1302,12 +1519,12 @@ var SheetColumns = /* @__PURE__ */ forwardRef(({ columns, sizes, selected, onSel
     ],
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd
-  }, /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement("div", {
     className: "flex h-full",
     style: {
       height: axisHeight
     }
-  }, columns.map((idx, index) => /* @__PURE__ */ React3.createElement(GridColumnCell, {
+  }, columns.map((idx, index) => /* @__PURE__ */ React4.createElement(GridColumnCell, {
     key: idx,
     idx,
     index,
@@ -1317,7 +1534,7 @@ var SheetColumns = /* @__PURE__ */ forwardRef(({ columns, sizes, selected, onSel
     selected: selected === index,
     onResize,
     onSelect
-  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React3.createElement(DragOverlay, null, active && /* @__PURE__ */ React3.createElement(MovingOverlay, {
+  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement(DragOverlay, null, active && /* @__PURE__ */ React4.createElement(MovingOverlay, {
     label: columnLetter(active.data.current.index)
   })), document.body))));
 });
@@ -1358,7 +1575,7 @@ var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onR
     onResize?.(idx, initialSize + width, true);
     setResizing(false);
   };
-  return /* @__PURE__ */ React3.createElement(Resizable, {
+  return /* @__PURE__ */ React4.createElement(Resizable, {
     enable: {
       right: resize
     },
@@ -1370,17 +1587,17 @@ var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onR
     onResizeStart: handleResizeStart,
     onResize: handleResize,
     onResizeStop: handleResizeStop
-  }, /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement("div", {
     ref: setNodeRef,
     ...attributes,
     ...listeners,
-    className: mx2("flex h-full items-center justify-center cursor-pointer", "border-l border-gridLine focus-visible:outline-none", fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
+    className: mx3("flex h-full items-center justify-center cursor-pointer", "border-l border-gridLine focus-visible:outline-none", fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
     onClick: () => onSelect?.(index)
-  }, /* @__PURE__ */ React3.createElement("span", {
+  }, /* @__PURE__ */ React4.createElement("span", {
     className: "flex w-full justify-center"
-  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React3.createElement("div", {
+  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React4.createElement("div", {
     className: "z-20 absolute left-0 h-full min-w-[4px] border-l-4 border-accentSurface"
-  }), resizing && /* @__PURE__ */ React3.createElement("div", {
+  }), resizing && /* @__PURE__ */ React4.createElement("div", {
     className: "z-20 absolute right-0 h-full min-h-[4px] border-l-4 border-accentSurface"
   })));
 };
@@ -1394,13 +1611,13 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
   const initialText = useRef();
   const quickEdit = useRef(false);
   const [, forceUpdate] = useState4({});
-  useEffect3(() => {
+  useEffect4(() => {
     const unsubscribe = model.update.on(() => {
       log("updated", {
         id: model.id
       }, {
         F: __dxlog_file2,
-        L: 730,
+        L: 737,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1517,19 +1734,19 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
     rowSizes,
     columnSizes
   });
-  const id = fullyQualifiedId2(model.sheet);
+  const id = fullyQualifiedId3(model.sheet);
   const attendableAttrs = createAttendableAttributes(id);
   const hasAttention = useHasAttention(id);
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     ref: containerRef,
     role: "grid",
     className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ React3.createElement("div", {
-    className: mx2("z-20 absolute inset-0 border border-gridLine pointer-events-none")
-  }), /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: mx3("z-20 absolute inset-0 border border-gridLine pointer-events-none")
+  }), /* @__PURE__ */ React4.createElement("div", {
     ref: scrollerRef,
-    className: mx2("grow", hasAttention && "overflow-auto scrollbar-thin")
-  }, /* @__PURE__ */ React3.createElement("div", {
+    className: mx3("grow", hasAttention && "overflow-auto scrollbar-thin")
+  }, /* @__PURE__ */ React4.createElement("div", {
     className: "relative select-none",
     style: {
       width,
@@ -1537,7 +1754,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
     },
     onClick: () => inputRef.current?.focus(),
     ...handlers
-  }, scrollerRef.current && /* @__PURE__ */ React3.createElement(SelectionOverlay, {
+  }, scrollerRef.current && /* @__PURE__ */ React4.createElement(SelectionOverlay, {
     root: scrollerRef.current
   }), rowRange.map(({ row, top, height: height2 }) => {
     return columnRange.map(({ column, left, width: width2 }) => {
@@ -1553,7 +1770,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
         column
       };
       const id2 = addressToA1Notation(cell);
-      const idx = model.addressToIndex(cell);
+      const idx = addressToIndex(model.sheet, cell);
       const active = posEquals(cursor, cell);
       if (active && editing) {
         const value = initialText.current ?? model.getCellText(cell) ?? "";
@@ -1586,7 +1803,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
           inputRef.current?.focus();
           setEditing(false);
         };
-        return /* @__PURE__ */ React3.createElement(GridCellEditor, {
+        return /* @__PURE__ */ React4.createElement(GridCellEditor, {
           key: idx,
           value,
           style,
@@ -1594,7 +1811,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
           onClose: handleClose
         });
       }
-      return /* @__PURE__ */ React3.createElement(SheetCell, {
+      return /* @__PURE__ */ React4.createElement(SheetCell, {
         key: id2,
         id: id2,
         cell,
@@ -1606,7 +1823,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
         }
       });
     });
-  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React3.createElement("input", {
+  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement("input", {
     ref: inputRef,
     autoFocus: true,
     className: "absolute w-[1px] h-[1px] bg-transparent outline-none border-none caret-transparent",
@@ -1627,20 +1844,34 @@ var SelectionOverlay = ({ root }) => {
   const b1 = getRelativeClientRect(root, c1);
   const b2 = getRelativeClientRect(root, c2);
   const bounds = getRectUnion(b1, b2);
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     style: bounds,
     className: "z-10 absolute pointer-events-none bg-gridSelectionOverlay border border-gridOverlay"
   });
 };
 var SheetCell = ({ id, cell, style, active, onSelect }) => {
-  const { formatting, editing, setRange } = useSheetContext();
+  const { formatting, editing, setRange, decorations, model: { sheet } } = useSheetContext();
   const { value, classNames } = formatting.getFormatting(cell);
-  return /* @__PURE__ */ React3.createElement("div", {
+  const decorationsForCell = decorations.getDecorationsForCell(addressToIndex(sheet, cell)) ?? [];
+  const decorationAddedClasses = useMemo3(() => decorationsForCell.flatMap((d) => d.classNames ?? []), [
+    decorationsForCell
+  ]);
+  const decoratedContent = decorationsForCell.reduce((children, { decorate }) => {
+    if (!decorate) {
+      return children;
+    }
+    const DecoratorComponent = decorate;
+    return /* @__PURE__ */ React4.createElement(DecoratorComponent, null, children);
+  }, /* @__PURE__ */ React4.createElement("div", {
+    role: "none",
+    className: mx3("flex flex-grow bs-full is-full px-2 items-center truncate cursor-pointer", ...decorationAddedClasses)
+  }, value));
+  return /* @__PURE__ */ React4.createElement("div", {
     [`data-${CELL_DATA_KEY}`]: id,
     role: "cell",
     style,
-    className: mx2("flex w-full h-full px-2 py-1 truncate items-center border border-gridLine cursor-pointer", fragments.cell, active && [
+    className: mx3("border border-gridLine cursor-pointer", fragments.cell, active && [
       "z-20",
       fragments.cellSelected
     ], classNames),
@@ -1654,19 +1885,19 @@ var SheetCell = ({ id, cell, style, active, onSelect }) => {
       }
     },
     onDoubleClick: () => onSelect?.(cell, true)
-  }, value);
+  }, decoratedContent);
 };
 var GridCellEditor = ({ style, value, onNav, onClose }) => {
   const { model, range } = useSheetContext();
   const notifier = useRef();
-  useEffect3(() => {
+  useEffect4(() => {
     if (range) {
       notifier.current?.(rangeToA1Notation(range));
     }
   }, [
     range
   ]);
-  const extension = useMemo(() => [
+  const extension = useMemo3(() => [
     editorKeys({
       onNav,
       onClose
@@ -1678,12 +1909,12 @@ var GridCellEditor = ({ style, value, onNav, onClose }) => {
   ], [
     model
   ]);
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     role: "cell",
     style,
-    className: mx2("z-20 flex", fragments.cellSelected),
+    className: mx3("z-20 flex", fragments.cellSelected),
     onClick: (ev) => ev.stopPropagation()
-  }, /* @__PURE__ */ React3.createElement(CellEditor, {
+  }, /* @__PURE__ */ React4.createElement(CellEditor, {
     autoFocus: true,
     value,
     extension
@@ -1702,24 +1933,24 @@ var SheetStatusBar = () => {
       value = String(value);
     }
   }
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: mx2("flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x border-gridLine")
-  }, /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
+    className: mx3("flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x border-gridLine")
+  }, /* @__PURE__ */ React4.createElement("div", {
     className: "flex gap-4 items-center"
-  }, /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement("div", {
     className: "flex w-16 items-center font-mono"
-  }, range && rangeToA1Notation(range) || cursor && addressToA1Notation(cursor)), /* @__PURE__ */ React3.createElement("div", {
+  }, range && rangeToA1Notation(range) || cursor && addressToA1Notation(cursor)), /* @__PURE__ */ React4.createElement("div", {
     className: "flex gap-2 items-center"
-  }, /* @__PURE__ */ React3.createElement(FunctionIcon, {
-    className: mx2("text-greenText", isFormula ? "visible" : "invisible")
-  }), /* @__PURE__ */ React3.createElement("span", {
+  }, /* @__PURE__ */ React4.createElement(FunctionIcon, {
+    className: mx3("text-greenText", isFormula ? "visible" : "invisible")
+  }), /* @__PURE__ */ React4.createElement("span", {
     className: "font-mono"
   }, value))));
 };
 var SheetDebug = () => {
   const { model, cursor, range } = useSheetContext();
   const [, forceUpdate] = useState4({});
-  useEffect3(() => {
+  useEffect4(() => {
     const accessor = createDocAccessor(model.sheet, []);
     const handleUpdate = () => forceUpdate({});
     accessor.handle.addListener("change", handleUpdate);
@@ -1730,9 +1961,9 @@ var SheetDebug = () => {
   }, [
     model
   ]);
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: mx2("z-20 absolute right-0 top-20 bottom-20 w-[30rem] overflow-auto scrollbar-thin", "border border-gridLine text-xs bg-neutral-50 dark:bg-black text-cyan-500 font-mono p-1 opacity-80")
-  }, /* @__PURE__ */ React3.createElement("pre", {
+  return /* @__PURE__ */ React4.createElement("div", {
+    className: mx3("z-20 absolute right-0 top-20 bottom-20 w-[30rem] overflow-auto scrollbar-thin", "border border-gridLine text-xs bg-neutral-50 dark:bg-black text-cyan-500 font-mono p-1 opacity-80")
+  }, /* @__PURE__ */ React4.createElement("pre", {
     className: "whitespace-pre-wrap"
   }, JSON.stringify({
     cursor,
@@ -1754,19 +1985,247 @@ var Sheet = {
   Debug: SheetDebug
 };
 
+// packages/plugins/plugin-sheet/src/components/Toolbar/Toolbar.tsx
+import { Calendar, ChatText, CurrencyDollar, Eraser, HighlighterCircle, TextAlignCenter, TextAlignLeft, TextAlignRight } from "@phosphor-icons/react";
+import { createContext as createContext2 } from "@radix-ui/react-context";
+import React6 from "react";
+import { DensityProvider, ElevationProvider, Toolbar as NaturalToolbar2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { nonNullable } from "@dxos/util";
+
+// packages/plugins/plugin-sheet/src/components/Toolbar/common.tsx
+import React5 from "react";
+import { Toolbar as NaturalToolbar, Tooltip } from "@dxos/react-ui";
+import { getSize } from "@dxos/react-ui-theme";
+var iconStyles = getSize(5);
+var buttonStyles = "min-bs-0 p-2";
+var tooltipProps = {
+  side: "top",
+  classNames: "z-10"
+};
+var ToolbarSeparator = () => /* @__PURE__ */ React5.createElement("div", {
+  role: "separator",
+  className: "grow"
+});
+var ToolbarButton = ({ Icon: Icon2, children, ...props }) => {
+  return /* @__PURE__ */ React5.createElement(Tooltip.Root, null, /* @__PURE__ */ React5.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(NaturalToolbar.Button, {
+    variant: "ghost",
+    ...props,
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React5.createElement(Icon2, {
+    className: iconStyles
+  }), /* @__PURE__ */ React5.createElement("span", {
+    className: "sr-only"
+  }, children))), /* @__PURE__ */ React5.createElement(Tooltip.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React5.createElement(Tooltip.Arrow, null))));
+};
+var ToolbarToggleButton = ({ Icon: Icon2, children, ...props }) => {
+  return /* @__PURE__ */ React5.createElement(Tooltip.Root, null, /* @__PURE__ */ React5.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(NaturalToolbar.ToggleGroupItem, {
+    variant: "ghost",
+    ...props,
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React5.createElement(Icon2, {
+    className: iconStyles
+  }), /* @__PURE__ */ React5.createElement("span", {
+    className: "sr-only"
+  }, children))), /* @__PURE__ */ React5.createElement(Tooltip.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React5.createElement(Tooltip.Arrow, null))));
+};
+
+// packages/plugins/plugin-sheet/src/components/Toolbar/Toolbar.tsx
+var [ToolbarContextProvider, useToolbarContext] = createContext2("Toolbar");
+var ToolbarRoot = ({ children, onAction, classNames }) => {
+  return /* @__PURE__ */ React6.createElement(ToolbarContextProvider, {
+    onAction
+  }, /* @__PURE__ */ React6.createElement(DensityProvider, {
+    density: "fine"
+  }, /* @__PURE__ */ React6.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, /* @__PURE__ */ React6.createElement(NaturalToolbar2.Root, {
+    classNames: [
+      "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1",
+      classNames
+    ]
+  }, children))));
+};
+var formatOptions = [
+  {
+    type: "date",
+    Icon: Calendar,
+    getState: (state) => false
+  },
+  {
+    type: "currency",
+    Icon: CurrencyDollar,
+    getState: (state) => false
+  }
+];
+var Format = () => {
+  const { onAction } = useToolbarContext("Format");
+  const { t } = useTranslation2(SHEET_PLUGIN);
+  return /* @__PURE__ */ React6.createElement(NaturalToolbar2.ToggleGroup, {
+    type: "single"
+  }, formatOptions.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ React6.createElement(ToolbarToggleButton, {
+    key: type,
+    value: type,
+    Icon: Icon2,
+    // disabled={state?.blockType === 'codeblock'}
+    // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
+    onClick: () => onAction?.({
+      type
+    })
+  }, t(`toolbar ${type} label`))));
+};
+var alignmentOptions = [
+  {
+    type: "left",
+    Icon: TextAlignLeft,
+    getState: (state) => false
+  },
+  {
+    type: "center",
+    Icon: TextAlignCenter,
+    getState: (state) => false
+  },
+  {
+    type: "right",
+    Icon: TextAlignRight,
+    getState: (state) => false
+  }
+];
+var Alignment = () => {
+  const { onAction } = useToolbarContext("Alignment");
+  const { t } = useTranslation2(SHEET_PLUGIN);
+  return /* @__PURE__ */ React6.createElement(NaturalToolbar2.ToggleGroup, {
+    type: "single"
+  }, alignmentOptions.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ React6.createElement(ToolbarToggleButton, {
+    key: type,
+    value: type,
+    Icon: Icon2,
+    // disabled={state?.blockType === 'codeblock'}
+    // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
+    onClick: () => onAction?.({
+      type
+    })
+  }, t(`toolbar ${type} label`))));
+};
+var styleOptions = [
+  {
+    type: "clear",
+    Icon: Eraser,
+    getState: (state) => false
+  },
+  {
+    type: "highlight",
+    Icon: HighlighterCircle,
+    getState: (state) => false
+  }
+];
+var Styles = () => {
+  const { onAction } = useToolbarContext("Alignment");
+  const { t } = useTranslation2(SHEET_PLUGIN);
+  return /* @__PURE__ */ React6.createElement(NaturalToolbar2.ToggleGroup, {
+    type: "single"
+  }, styleOptions.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ React6.createElement(ToolbarToggleButton, {
+    key: type,
+    value: type,
+    Icon: Icon2,
+    // disabled={state?.blockType === 'codeblock'}
+    // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
+    onClick: () => onAction?.({
+      type
+    })
+  }, t(`toolbar ${type} label`))));
+};
+var Actions = () => {
+  const { onAction } = useToolbarContext("Actions");
+  const { cursor, range, model } = useSheetContext();
+  const { t } = useTranslation2(SHEET_PLUGIN);
+  const overlapsCommentAnchor = (model.sheet.threads ?? []).filter(nonNullable).filter((thread) => thread.status !== "resolved").some((thread) => {
+    if (!cursor) {
+      return false;
+    }
+    return addressToIndex(model.sheet, cursor) === thread.anchor;
+  });
+  const hasCursor = !!cursor;
+  const cursorOnly = hasCursor && !range && !overlapsCommentAnchor;
+  const tooltipLabelKey = !hasCursor ? "no cursor label" : overlapsCommentAnchor ? "selection overlaps existing comment label" : range ? "comment ranges not supported label" : "comment label";
+  return /* @__PURE__ */ React6.createElement(ToolbarButton, {
+    value: "comment",
+    Icon: ChatText,
+    "data-testid": "editor.toolbar.comment",
+    onClick: () => {
+      if (!cursor) {
+        return;
+      }
+      return onAction?.({
+        type: "comment",
+        anchor: addressToIndex(model.sheet, cursor),
+        cellContent: model.getCellText(cursor)
+      });
+    },
+    disabled: !cursorOnly || overlapsCommentAnchor
+  }, t(tooltipLabelKey));
+};
+var Toolbar = {
+  Root: ToolbarRoot,
+  Separator: ToolbarSeparator,
+  Alignment,
+  Format,
+  Styles,
+  Actions
+};
+
 // packages/plugins/plugin-sheet/src/components/SheetContainer.tsx
+var attentionFragment = mx4("group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface", "group-focus-within/editor:border-separator");
+var sectionToolbarLayout = "bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity";
 var SheetContainer = ({ sheet, space, role, remoteFunctionUrl }) => {
-  return /* @__PURE__ */ React4.createElement("div", {
+  const dispatch = useIntentDispatcher2();
+  const id = fullyQualifiedId4(sheet);
+  const isDirectlyAttended = useIsDirectlyAttended(id);
+  const handleAction = useCallback2((action) => {
+    switch (action.type) {
+      case "comment": {
+        void dispatch({
+          action: "dxos.org/plugin/thread/action/create",
+          data: {
+            cursor: action.anchor,
+            name: action.cellContent,
+            subject: sheet
+          }
+        });
+      }
+    }
+  }, [
+    sheet,
+    dispatch
+  ]);
+  return /* @__PURE__ */ React7.createElement("div", {
     role: "none",
-    className: mx3("flex", role === "article" && "row-span-2", role === "section" && "aspect-square border-y border-is border-separator")
-  }, /* @__PURE__ */ React4.createElement(Sheet.Root, {
+    className: role === "article" ? "row-span-2 grid grid-rows-subgrid" : void 0
+  }, /* @__PURE__ */ React7.createElement(Sheet.Root, {
     sheet,
     space,
     remoteFunctionUrl
-  }, /* @__PURE__ */ React4.createElement(Sheet.Main, null)));
+  }, /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: mx4("flex flex-0 justify-center overflow-x-auto")
+  }, /* @__PURE__ */ React7.createElement(Toolbar.Root, {
+    onAction: handleAction,
+    classNames: mx4(role === "section" ? [
+      "z-[2] group-focus-within/section:visible",
+      !isDirectlyAttended && "invisible",
+      sectionToolbarLayout
+    ] : "group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator")
+  }, /* @__PURE__ */ React7.createElement(Toolbar.Separator, null), /* @__PURE__ */ React7.createElement(Toolbar.Actions, null))), /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: mx4(role === "section" && "aspect-square border-is border-bs border-be border-separator", role === "article" && "flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator", focusRing, attentionFragment)
+  }, /* @__PURE__ */ React7.createElement(Sheet.Main, null))));
 };
 var SheetContainer_default = SheetContainer;
 export {
-  SheetContainer_default as default
+  SheetContainer_default as default,
+  sectionToolbarLayout
 };
-//# sourceMappingURL=SheetContainer-U4H5D34A.mjs.map
+//# sourceMappingURL=SheetContainer-Y7ZMFBAP.mjs.map