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

package/dist/lib/node/{SheetContainer-IQT6TR4Z.cjs → SheetContainer-KEOKUKAQ.cjs}

@@ -26,16 +26,20 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var SheetContainer_IQT6TR4Z_exports = {};
-__export(SheetContainer_IQT6TR4Z_exports, {
-  default: () => SheetContainer_default
+var SheetContainer_KEOKUKAQ_exports = {};
+__export(SheetContainer_KEOKUKAQ_exports, {
+  default: () => SheetContainer_default,
+  sectionToolbarLayout: () => sectionToolbarLayout
 });
-module.exports = __toCommonJS(SheetContainer_IQT6TR4Z_exports);
-var import_chunk_727C6YNP = require("./chunk-727C6YNP.cjs");
-var import_chunk_SVAIIXWQ = require("./chunk-SVAIIXWQ.cjs");
-var import_chunk_DSYKOI4E = require("./chunk-DSYKOI4E.cjs");
+module.exports = __toCommonJS(SheetContainer_KEOKUKAQ_exports);
+var import_chunk_6LWBQAQZ = require("./chunk-6LWBQAQZ.cjs");
+var import_chunk_ZRQZFV5T = require("./chunk-ZRQZFV5T.cjs");
+var import_chunk_VJU3NPUJ = require("./chunk-VJU3NPUJ.cjs");
 var import_chunk_BJ6ZD7MN = require("./chunk-BJ6ZD7MN.cjs");
 var import_react = __toESM(require("react"));
+var import_app_framework = require("@dxos/app-framework");
+var import_echo = require("@dxos/react-client/echo");
+var import_react_ui_attention = require("@dxos/react-ui-attention");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
 var import_core = require("@dnd-kit/core");
 var import_modifiers = require("@dnd-kit/modifiers");
@@ -46,18 +50,26 @@ var import_react3 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_react_resize_detector = require("react-resize-detector");
 var import_async = require("@dxos/async");
-var import_echo = require("@dxos/client/echo");
+var import_echo2 = require("@dxos/client/echo");
 var import_log = require("@dxos/log");
-var import_react_ui_attention = require("@dxos/react-ui-attention");
+var import_react_ui_attention2 = require("@dxos/react-ui-attention");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var import_react4 = require("react");
 var import_react5 = require("react");
 var import_react6 = __toESM(require("react"));
 var import_invariant = require("@dxos/invariant");
-var import_echo2 = require("@dxos/react-client/echo");
-var import_view = require("@codemirror/view");
+var import_echo3 = require("@dxos/react-client/echo");
+var import_echo_schema = require("@dxos/echo-schema");
+var import_signals_core = require("@preact/signals-core");
 var import_react7 = __toESM(require("react"));
+var import_app_framework2 = require("@dxos/app-framework");
+var import_async2 = require("@dxos/async");
+var import_echo4 = require("@dxos/react-client/echo");
 var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_view = require("@codemirror/view");
+var import_react8 = __toESM(require("react"));
+var import_react_ui2 = require("@dxos/react-ui");
 var import_react_ui_editor = require("@dxos/react-ui-editor");
 var import_autocomplete = require("@codemirror/autocomplete");
 var import_language = require("@codemirror/language");
@@ -65,7 +77,15 @@ var import_state = require("@codemirror/state");
 var import_view2 = require("@codemirror/view");
 var import_highlight = require("@lezer/highlight");
 var import_codemirror_lang_spreadsheet = require("codemirror-lang-spreadsheet");
-var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_react_ui_theme4 = require("@dxos/react-ui-theme");
+var import_react9 = require("@phosphor-icons/react");
+var import_react_context = require("@radix-ui/react-context");
+var import_react10 = __toESM(require("react"));
+var import_react_ui3 = require("@dxos/react-ui");
+var import_util = require("@dxos/util");
+var import_react11 = __toESM(require("react"));
+var import_react_ui4 = require("@dxos/react-ui");
+var import_react_ui_theme5 = require("@dxos/react-ui-theme");
 var axisWidth = "calc(var(--rail-size)-2px)";
 var axisHeight = 34;
 var minWidth = 40;
@@ -182,12 +202,12 @@ var getCellAtPointer = (event) => {
   if (root) {
     const value = root.dataset[CELL_DATA_KEY];
     if (value) {
-      return (0, import_chunk_SVAIIXWQ.addressFromA1Notation)(value);
+      return (0, import_chunk_ZRQZFV5T.addressFromA1Notation)(value);
     }
   }
 };
 var getCellElement = (root, cell) => {
-  const pos = (0, import_chunk_SVAIIXWQ.addressToA1Notation)(cell);
+  const pos = (0, import_chunk_ZRQZFV5T.addressToA1Notation)(cell);
   return root.querySelector(`[data-${CELL_DATA_KEY}="${pos}"]`);
 };
 var handleNav = (ev, cursor, range, size) => {
@@ -315,7 +335,7 @@ var useRangeSelect = (cb) => {
   const onMouseMove = (ev) => {
     if (from) {
       let current = getCellAtPointer(ev);
-      if ((0, import_chunk_SVAIIXWQ.posEquals)(current, from)) {
+      if ((0, import_chunk_ZRQZFV5T.posEquals)(current, from)) {
         current = void 0;
       }
       setTo(current);
@@ -328,7 +348,7 @@ var useRangeSelect = (cb) => {
   const onMouseUp = (ev) => {
     if (from) {
       let current = getCellAtPointer(ev);
-      if ((0, import_chunk_SVAIIXWQ.posEquals)(current, from)) {
+      if ((0, import_chunk_ZRQZFV5T.posEquals)(current, from)) {
         current = void 0;
       }
       setFrom(void 0);
@@ -351,6 +371,42 @@ var useRangeSelect = (cb) => {
     }
   };
 };
+var createDecorations = () => {
+  const { decorations } = (0, import_echo_schema.create)({
+    decorations: {}
+  });
+  const addDecoration = (cellIndex, decorator) => {
+    decorations[cellIndex] = [
+      ...decorations[cellIndex] || [],
+      decorator
+    ];
+  };
+  const removeDecoration = (cellIndex, type) => {
+    if (type) {
+      decorations[cellIndex] = (decorations[cellIndex] || []).filter((d) => d.type !== type);
+    } else {
+      delete decorations[cellIndex];
+    }
+  };
+  const getDecorationsForCell = (cellIndex) => {
+    return decorations[cellIndex];
+  };
+  const getAllDecorations = () => {
+    const result = [];
+    for (const decoratorArray of Object.values(decorations)) {
+      for (const decorator of decoratorArray) {
+        result.push(decorator);
+      }
+    }
+    return result;
+  };
+  return {
+    addDecoration,
+    removeDecoration,
+    getDecorationsForCell,
+    getAllDecorations
+  };
+};
 var FormattingModel = class {
   constructor(model) {
     this.model = model;
@@ -364,14 +420,14 @@ var FormattingModel = class {
       return {};
     }
     const locales = void 0;
-    const idx = this.model.addressToIndex(cell);
+    const idx = (0, import_chunk_ZRQZFV5T.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);
-      if ((0, import_chunk_SVAIIXWQ.inRange)(range, cell)) {
+      const range = (0, import_chunk_ZRQZFV5T.rangeFromIndex)(this.model.sheet, idx2);
+      if ((0, import_chunk_ZRQZFV5T.inRange)(range, cell)) {
         if (_formatting.classNames) {
           classNames.push(..._formatting.classNames);
         }
@@ -383,7 +439,7 @@ var FormattingModel = class {
     const defaultNumber = "justify-end font-mono";
     const type = formatting?.type ?? this.model.getValueType(cell);
     switch (type) {
-      case import_chunk_DSYKOI4E.ValueTypeEnum.Boolean: {
+      case import_chunk_VJU3NPUJ.ValueTypeEnum.Boolean: {
         return {
           value: value.toLocaleString().toUpperCase(),
           classNames: [
@@ -392,7 +448,10 @@ var FormattingModel = class {
           ]
         };
       }
-      case import_chunk_DSYKOI4E.ValueTypeEnum.Number: {
+      //
+      // Numbers.
+      //
+      case import_chunk_VJU3NPUJ.ValueTypeEnum.Number: {
         return {
           value: value.toLocaleString(locales),
           classNames: [
@@ -401,7 +460,7 @@ var FormattingModel = class {
           ]
         };
       }
-      case import_chunk_DSYKOI4E.ValueTypeEnum.Percent: {
+      case import_chunk_VJU3NPUJ.ValueTypeEnum.Percent: {
         return {
           value: value * 100 + "%",
           classNames: [
@@ -410,7 +469,7 @@ var FormattingModel = class {
           ]
         };
       }
-      case import_chunk_DSYKOI4E.ValueTypeEnum.Currency: {
+      case import_chunk_VJU3NPUJ.ValueTypeEnum.Currency: {
         return {
           value: value.toLocaleString(locales, {
             style: "currency",
@@ -424,21 +483,24 @@ var FormattingModel = class {
           ]
         };
       }
-      case import_chunk_DSYKOI4E.ValueTypeEnum.DateTime: {
+      //
+      // Dates.
+      //
+      case import_chunk_VJU3NPUJ.ValueTypeEnum.DateTime: {
         const date = this.model.toLocalDate(value);
         return {
           value: date.toLocaleString(locales),
           classNames
         };
       }
-      case import_chunk_DSYKOI4E.ValueTypeEnum.Date: {
+      case import_chunk_VJU3NPUJ.ValueTypeEnum.Date: {
         const date = this.model.toLocalDate(value);
         return {
           value: date.toLocaleDateString(locales),
           classNames
         };
       }
-      case import_chunk_DSYKOI4E.ValueTypeEnum.Time: {
+      case import_chunk_VJU3NPUJ.ValueTypeEnum.Time: {
         const date = this.model.toLocalDate(value);
         return {
           value: date.toLocaleTimeString(locales),
@@ -461,7 +523,7 @@ var useSheetContext = () => {
   const context = (0, import_react6.useContext)(SheetContext);
   (0, import_invariant.invariant)(context, void 0, {
     F: __dxlog_file,
-    L: 45,
+    L: 49,
     S: void 0,
     A: [
       "context",
@@ -472,12 +534,12 @@ var useSheetContext = () => {
 };
 var mapFormulaBindingToId = (functions) => (formula) => {
   return formula.replace(/([a-zA-Z0-9]+)\((.*)\)/g, (match, binding, args) => {
-    if (import_chunk_SVAIIXWQ.defaultFunctions.find((fn2) => fn2.name === binding) || binding === "EDGE") {
+    if (import_chunk_ZRQZFV5T.defaultFunctions.find((fn2) => fn2.name === binding) || binding === "EDGE") {
       return match;
     }
     const fn = functions.find((fn2) => fn2.binding === binding);
     if (fn) {
-      return `${(0, import_echo2.fullyQualifiedId)(fn)}(${args})`;
+      return `${(0, import_echo3.fullyQualifiedId)(fn)}(${args})`;
     } else {
       return match;
     }
@@ -489,7 +551,7 @@ var mapFormulaBindingFromId = (functions) => (formula) => {
     if (id.length !== OBJECT_ID_LENGTH) {
       return match;
     }
-    const fn = functions.find((fn2) => (0, import_echo2.fullyQualifiedId)(fn2) === id);
+    const fn = functions.find((fn2) => (0, import_echo3.fullyQualifiedId)(fn2) === id);
     if (fn?.binding) {
       return `${fn.binding}(${args})`;
     } else {
@@ -498,16 +560,17 @@ var mapFormulaBindingFromId = (functions) => (formula) => {
   });
 };
 var SheetContextProvider = ({ children, sheet, space, readonly, onInfo, ...options }) => {
-  const graph = (0, import_chunk_727C6YNP.useComputeGraph)(space, options);
+  const graph = (0, import_chunk_6LWBQAQZ.useComputeGraph)(space, options);
   const [cursor, setCursor] = (0, import_react6.useState)();
   const [range, setRange] = (0, import_react6.useState)();
   const [editing, setEditing] = (0, import_react6.useState)(false);
+  const decorations = (0, import_react6.useMemo)(() => createDecorations(), []);
   const [[model, formatting] = [], setModels] = (0, import_react6.useState)(void 0);
   (0, import_react6.useEffect)(() => {
     let model2;
     let formatting2;
     const t = setTimeout(async () => {
-      model2 = new import_chunk_SVAIIXWQ.SheetModel(graph, sheet, space, {
+      model2 = new import_chunk_ZRQZFV5T.SheetModel(graph, sheet, space, {
         readonly,
         mapFormulaBindingToId,
         mapFormulaBindingFromId
@@ -541,10 +604,168 @@ var SheetContextProvider = ({ children, sheet, space, readonly, onInfo, ...optio
       editing,
       setEditing,
       // TODO(burdon): Change to event.
-      onInfo
+      onInfo,
+      decorations
     }
   }, children);
 };
+var CommentIndicator = () => {
+  return /* @__PURE__ */ import_react7.default.createElement("div", {
+    role: "none",
+    className: "absolute top-0 right-0 w-0 h-0 border-t-8 border-l-8 border-t-cmCommentSurface border-l-transparent"
+  });
+};
+var ThreadedCellWrapper = ({ children }) => {
+  const dispatch = (0, import_app_framework2.useIntentDispatcher)();
+  const [isHovered, setIsHovered] = import_react7.default.useState(true);
+  const { t } = (0, import_react_ui.useTranslation)(import_chunk_BJ6ZD7MN.SHEET_PLUGIN);
+  const handleClick = import_react7.default.useCallback((_event) => {
+    void dispatch({
+      action: import_app_framework2.LayoutAction.SET_LAYOUT,
+      data: {
+        element: "complementary",
+        state: true
+      }
+    });
+  }, [
+    dispatch
+  ]);
+  return /* @__PURE__ */ import_react7.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme3.mx)("relative h-full is-full"),
+    onMouseEnter: () => {
+      setIsHovered(true);
+    },
+    onMouseLeave: () => {
+      setIsHovered(false);
+    }
+  }, /* @__PURE__ */ import_react7.default.createElement(CommentIndicator, null), isHovered && /* @__PURE__ */ import_react7.default.createElement("div", {
+    className: "absolute inset-0 flex items-center justify-end pr-1"
+  }, /* @__PURE__ */ import_react7.default.createElement("button", {
+    className: "ch-button text-xs min-bs-0 p-1",
+    onClick: handleClick,
+    "aria-label": t("open comment for sheet cell")
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui.Icon, {
+    icon: "ph--chat--regular",
+    "aria-hidden": true
+  }))), children);
+};
+var createThreadDecoration = (cellIndex, threadId, sheetId) => {
+  return {
+    type: "comment",
+    cellIndex,
+    decorate: (props) => /* @__PURE__ */ import_react7.default.createElement(ThreadedCellWrapper, props)
+  };
+};
+var useUpdateCursorOnThreadSelection = () => {
+  const { setCursor, model } = useSheetContext();
+  const handleScrollIntoView = (0, import_react7.useCallback)(({ action, data }) => {
+    switch (action) {
+      case import_app_framework2.LayoutAction.SCROLL_INTO_VIEW: {
+        if (!data?.id || data?.cursor === void 0 || data?.id !== (0, import_echo4.fullyQualifiedId)(model.sheet)) {
+          return;
+        }
+        const cellAddress = (0, import_chunk_ZRQZFV5T.addressFromIndex)(model.sheet, data.cursor);
+        setCursor(cellAddress);
+      }
+    }
+  }, [
+    model.sheet,
+    setCursor
+  ]);
+  (0, import_app_framework2.useIntentResolver)(import_chunk_BJ6ZD7MN.SHEET_PLUGIN, handleScrollIntoView);
+};
+var useSelectThreadOnCursorChange = () => {
+  const { cursor, model } = useSheetContext();
+  const dispatch = (0, import_app_framework2.useIntentDispatcher)();
+  const activeThreads = (0, import_react7.useMemo)(() => model.sheet.threads?.filter((thread) => !!thread && thread.status === "active") ?? [], [
+    JSON.stringify(model.sheet.threads)
+  ]);
+  const activeThreadAddresses = (0, import_react7.useMemo)(() => activeThreads.map((thread) => thread.anchor).filter((anchor) => anchor !== void 0).map((anchor) => (0, import_chunk_ZRQZFV5T.addressFromIndex)(model.sheet, anchor)), [
+    activeThreads,
+    model.sheet
+  ]);
+  const selectClosestThread = (0, import_react7.useCallback)((cellAddress) => {
+    if (!cellAddress || !activeThreads) {
+      return;
+    }
+    const closestThreadAnchor = (0, import_chunk_ZRQZFV5T.closest)(cellAddress, activeThreadAddresses);
+    if (closestThreadAnchor) {
+      const closestThread = activeThreads.find((thread) => thread && thread.anchor === (0, import_chunk_ZRQZFV5T.addressToIndex)(model.sheet, closestThreadAnchor));
+      if (closestThread) {
+        void dispatch([
+          {
+            action: "dxos.org/plugin/thread/action/select",
+            data: {
+              current: (0, import_echo4.fullyQualifiedId)(closestThread)
+            }
+          }
+        ]);
+      }
+    }
+  }, [
+    dispatch,
+    activeThreads,
+    activeThreadAddresses,
+    model.sheet
+  ]);
+  const debounced = (0, import_react7.useMemo)(() => {
+    return (0, import_async2.debounce)((cursor2) => requestAnimationFrame(() => selectClosestThread(cursor2)), 50);
+  }, [
+    selectClosestThread
+  ]);
+  (0, import_react7.useEffect)(() => {
+    if (!cursor) {
+      return;
+    }
+    debounced(cursor);
+  }, [
+    cursor,
+    selectClosestThread
+  ]);
+};
+var useThreadDecorations = () => {
+  const { decorations, model } = useSheetContext();
+  const sheet = (0, import_react7.useMemo)(() => model.sheet, [
+    model.sheet
+  ]);
+  const sheetId = (0, import_react7.useMemo)(() => (0, import_echo4.fullyQualifiedId)(sheet), [
+    sheet
+  ]);
+  (0, import_react7.useEffect)(() => {
+    const unsubscribe = (0, import_signals_core.effect)(() => {
+      const activeThreadAnchors = /* @__PURE__ */ new Set();
+      if (!sheet.threads) {
+        return;
+      }
+      for (const thread of sheet.threads) {
+        if (!thread || thread.anchor === void 0 || thread.status === "resolved") {
+          continue;
+        }
+        activeThreadAnchors.add(thread.anchor);
+        const index = thread.anchor;
+        const existingDecorations = decorations.getDecorationsForCell(index);
+        if (!existingDecorations || !existingDecorations.some((d) => d.type === "comment")) {
+          decorations.addDecoration(index, createThreadDecoration(index, thread.id, sheetId));
+        }
+      }
+      for (const decoration of decorations.getAllDecorations()) {
+        if (decoration.type !== "comment") {
+          continue;
+        }
+        if (!activeThreadAnchors.has(decoration.cellIndex)) {
+          decorations.removeDecoration(decoration.cellIndex, "comment");
+        }
+      }
+    });
+    return () => unsubscribe();
+  });
+};
+var useThreads = () => {
+  useUpdateCursorOnThreadSelection();
+  useSelectThreadOnCursorChange();
+  useThreadDecorations();
+};
 var getRelativeClientRect = (root, element) => {
   const rootRect = root.getBoundingClientRect();
   const elementRect = element.getBoundingClientRect();
@@ -635,7 +856,7 @@ var editorKeys = ({ onNav, onClose }) => {
   ]);
 };
 var CellEditor = ({ value, extension, autoFocus, onBlur }) => {
-  const { themeMode } = (0, import_react_ui.useThemeContext)();
+  const { themeMode } = (0, import_react_ui2.useThemeContext)();
   const { parentRef } = (0, import_react_ui_editor.useTextEditor)(() => {
     return {
       autoFocus,
@@ -673,7 +894,7 @@ var CellEditor = ({ value, extension, autoFocus, onBlur }) => {
   }, [
     extension
   ]);
-  return /* @__PURE__ */ import_react7.default.createElement("div", {
+  return /* @__PURE__ */ import_react8.default.createElement("div", {
     ref: parentRef,
     className: "flex w-full"
   });
@@ -788,7 +1009,7 @@ var sheetExtension = ({ functions = [] }) => {
       // NOTE: Useful for debugging.
       closeOnBlur: false,
       icons: false,
-      tooltipClass: () => (0, import_react_ui_theme3.mx)(
+      tooltipClass: () => (0, import_react_ui_theme4.mx)(
         // TODO(burdon): Factor out fragments.
         // TODO(burdon): Size to make width same as column.
         "!-left-[1px] !top-[33px] !-m-0 border !border-t-0 [&>ul]:!min-w-[198px]",
@@ -886,8 +1107,7 @@ var fragments = {
   axis: "bg-axisSurface text-axisText text-xs select-none",
   axisSelected: "bg-attention text-baseText",
   cell: "bg-gridCell",
-  cellSelected: "bg-gridCellSelected text-baseText border !border-accentSurface",
-  border: "border-gridLine"
+  cellSelected: "bg-gridCellSelected text-baseText border !border-accentSurface"
 };
 var SheetRoot = ({ children, ...props }) => {
   return /* @__PURE__ */ import_react3.default.createElement(SheetContextProvider, props, children);
@@ -895,6 +1115,7 @@ var SheetRoot = ({ children, ...props }) => {
 var SheetMain = /* @__PURE__ */ (0, import_react3.forwardRef)(({ classNames, numRows, numColumns }, forwardRef2) => {
   const { model, cursor, setCursor, setRange, setEditing } = useSheetContext();
   const { rowsRef, columnsRef, contentRef } = useScrollHandlers();
+  useThreads();
   const [rows, setRows] = (0, import_react3.useState)([
     ...model.sheet.rows
   ]);
@@ -902,10 +1123,10 @@ var SheetMain = /* @__PURE__ */ (0, import_react3.forwardRef)(({ classNames, num
     ...model.sheet.columns
   ]);
   (0, import_react3.useEffect)(() => {
-    const rowsAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
+    const rowsAccessor = (0, import_echo2.createDocAccessor)(model.sheet, [
       "rows"
     ]);
-    const columnsAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
+    const columnsAccessor = (0, import_echo2.createDocAccessor)(model.sheet, [
       "columns"
     ]);
     const handleUpdate = (0, import_async.debounce)(() => {
@@ -933,22 +1154,22 @@ var SheetMain = /* @__PURE__ */ (0, import_react3.forwardRef)(({ classNames, num
     columns
   ]);
   const handleMoveRows = (from, to, num = 1) => {
-    const cursorIdx = cursor ? model.addressToIndex(cursor) : void 0;
+    const cursorIdx = cursor ? (0, import_chunk_ZRQZFV5T.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((0, import_chunk_ZRQZFV5T.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 ? (0, import_chunk_ZRQZFV5T.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((0, import_chunk_ZRQZFV5T.addressFromIndex)(model.sheet, cursorIdx));
     }
     setColumns([
       ...model.sheet.columns
@@ -957,10 +1178,10 @@ var SheetMain = /* @__PURE__ */ (0, import_react3.forwardRef)(({ classNames, num
   const [rowSizes, setRowSizes] = (0, import_react3.useState)();
   const [columnSizes, setColumnSizes] = (0, import_react3.useState)();
   (0, import_react3.useEffect)(() => {
-    const rowAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
+    const rowAccessor = (0, import_echo2.createDocAccessor)(model.sheet, [
       "rowMeta"
     ]);
-    const columnAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
+    const columnAccessor = (0, import_echo2.createDocAccessor)(model.sheet, [
       "columnMeta"
     ]);
     const handleUpdate = (0, import_async.debounce)(() => {
@@ -1007,7 +1228,7 @@ var SheetMain = /* @__PURE__ */ (0, import_react3.forwardRef)(({ classNames, num
   };
   return /* @__PURE__ */ import_react3.default.createElement("div", {
     role: "none",
-    className: (0, import_react_ui_theme2.mx)("grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden", fragments.border, classNames)
+    className: (0, import_react_ui_theme2.mx)("grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden", classNames)
   }, /* @__PURE__ */ import_react3.default.createElement(GridCorner, {
     onClick: () => {
       setCursor(void 0);
@@ -1142,7 +1363,7 @@ var SheetRows = /* @__PURE__ */ (0, import_react3.forwardRef)(({ rows, sizes, se
   return /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "relative flex grow overflow-hidden"
   }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: (0, import_react_ui_theme2.mx)("z-20 absolute inset-0 border-y pointer-events-none", fragments.border),
+    className: (0, import_react_ui_theme2.mx)("z-20 absolute inset-0 border-y border-gridLine pointer-events-none"),
     style: {
       width: axisWidth
     }
@@ -1230,7 +1451,7 @@ var GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onResi
     ref: setNodeRef,
     ...attributes,
     ...listeners,
-    className: (0, import_react_ui_theme2.mx)("flex h-full items-center justify-center cursor-pointer", "border-t focus-visible:outline-none", fragments.border, fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
+    className: (0, import_react_ui_theme2.mx)("flex h-full items-center justify-center cursor-pointer", "border-t border-gridLine focus-visible:outline-none", fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
     onClick: () => onSelect?.(index)
   }, /* @__PURE__ */ import_react3.default.createElement("span", {
     className: "flex w-full justify-center"
@@ -1276,7 +1497,7 @@ var SheetColumns = /* @__PURE__ */ (0, import_react3.forwardRef)(({ columns, siz
   return /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "relative flex grow overflow-hidden"
   }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: (0, import_react_ui_theme2.mx)("z-20 absolute inset-0 border-x pointer-events-none", fragments.border),
+    className: (0, import_react_ui_theme2.mx)("z-20 absolute inset-0 border-x border-gridLine pointer-events-none"),
     style: {
       height: axisHeight
     }
@@ -1304,14 +1525,14 @@ var SheetColumns = /* @__PURE__ */ (0, import_react3.forwardRef)(({ columns, siz
     key: idx,
     idx,
     index,
-    label: (0, import_chunk_SVAIIXWQ.columnLetter)(index),
+    label: (0, import_chunk_ZRQZFV5T.columnLetter)(index),
     size: sizes?.[idx] ?? defaultWidth,
     resize: index < columns.length - 1,
     selected: selected === index,
     onResize,
     onSelect
   }))), /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react3.default.createElement(import_core.DragOverlay, null, active && /* @__PURE__ */ import_react3.default.createElement(MovingOverlay, {
-    label: (0, import_chunk_SVAIIXWQ.columnLetter)(active.data.current.index)
+    label: (0, import_chunk_ZRQZFV5T.columnLetter)(active.data.current.index)
   })), document.body))));
 });
 var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onResize }) => {
@@ -1367,7 +1588,7 @@ var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onR
     ref: setNodeRef,
     ...attributes,
     ...listeners,
-    className: (0, import_react_ui_theme2.mx)("flex h-full items-center justify-center cursor-pointer", "border-l focus-visible:outline-none", fragments.border, fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
+    className: (0, import_react_ui_theme2.mx)("flex h-full items-center justify-center cursor-pointer", "border-l border-gridLine focus-visible:outline-none", fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
     onClick: () => onSelect?.(index)
   }, /* @__PURE__ */ import_react3.default.createElement("span", {
     className: "flex w-full justify-center"
@@ -1393,7 +1614,7 @@ var SheetGrid = /* @__PURE__ */ (0, import_react3.forwardRef)(({ size, rows, col
         id: model.id
       }, {
         F: __dxlog_file2,
-        L: 735,
+        L: 737,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1510,18 +1731,18 @@ var SheetGrid = /* @__PURE__ */ (0, import_react3.forwardRef)(({ size, rows, col
     rowSizes,
     columnSizes
   });
-  const qualifiedSubjectId = (0, import_echo.fullyQualifiedId)(model.sheet);
-  const attendableAttrs = (0, import_react_ui_attention.createAttendableAttributes)(qualifiedSubjectId);
-  const attended = true;
+  const id = (0, import_echo2.fullyQualifiedId)(model.sheet);
+  const attendableAttrs = (0, import_react_ui_attention2.createAttendableAttributes)(id);
+  const hasAttention = (0, import_react_ui_attention2.useHasAttention)(id);
   return /* @__PURE__ */ import_react3.default.createElement("div", {
     ref: containerRef,
     role: "grid",
     className: "relative flex grow overflow-hidden"
   }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: (0, import_react_ui_theme2.mx)("z-20 absolute inset-0 border pointer-events-none", fragments.border)
+    className: (0, import_react_ui_theme2.mx)("z-20 absolute inset-0 border border-gridLine pointer-events-none")
   }), /* @__PURE__ */ import_react3.default.createElement("div", {
     ref: scrollerRef,
-    className: (0, import_react_ui_theme2.mx)("grow", attended && "overflow-auto scrollbar-thin")
+    className: (0, import_react_ui_theme2.mx)("grow", hasAttention && "overflow-auto scrollbar-thin")
   }, /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "relative select-none",
     style: {
@@ -1545,9 +1766,9 @@ var SheetGrid = /* @__PURE__ */ (0, import_react3.forwardRef)(({ size, rows, col
         row,
         column
       };
-      const id = (0, import_chunk_SVAIIXWQ.addressToA1Notation)(cell);
-      const idx = model.addressToIndex(cell);
-      const active = (0, import_chunk_SVAIIXWQ.posEquals)(cursor, cell);
+      const id2 = (0, import_chunk_ZRQZFV5T.addressToA1Notation)(cell);
+      const idx = (0, import_chunk_ZRQZFV5T.addressToIndex)(model.sheet, cell);
+      const active = (0, import_chunk_ZRQZFV5T.posEquals)(cursor, cell);
       if (active && editing) {
         const value = initialText.current ?? model.getCellText(cell) ?? "";
         const handleClose = (value2) => {
@@ -1588,8 +1809,8 @@ var SheetGrid = /* @__PURE__ */ (0, import_react3.forwardRef)(({ size, rows, col
         });
       }
       return /* @__PURE__ */ import_react3.default.createElement(SheetCell, {
-        key: id,
-        id,
+        key: id2,
+        id: id2,
         cell,
         active,
         style,
@@ -1627,13 +1848,27 @@ var SelectionOverlay = ({ root }) => {
   });
 };
 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);
+  const decorationsForCell = decorations.getDecorationsForCell((0, import_chunk_ZRQZFV5T.addressToIndex)(sheet, cell)) ?? [];
+  const decorationAddedClasses = (0, import_react3.useMemo)(() => decorationsForCell.flatMap((d) => d.classNames ?? []), [
+    decorationsForCell
+  ]);
+  const decoratedContent = decorationsForCell.reduce((children, { decorate }) => {
+    if (!decorate) {
+      return children;
+    }
+    const DecoratorComponent = decorate;
+    return /* @__PURE__ */ import_react3.default.createElement(DecoratorComponent, null, children);
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme2.mx)("flex flex-grow bs-full is-full px-2 items-center truncate cursor-pointer", ...decorationAddedClasses)
+  }, value));
   return /* @__PURE__ */ import_react3.default.createElement("div", {
     [`data-${CELL_DATA_KEY}`]: id,
     role: "cell",
     style,
-    className: (0, import_react_ui_theme2.mx)("flex w-full h-full truncate items-center border cursor-pointer", "px-2 py-1", fragments.cell, fragments.border, active && [
+    className: (0, import_react_ui_theme2.mx)("border border-gridLine cursor-pointer", fragments.cell, active && [
       "z-20",
       fragments.cellSelected
     ], classNames),
@@ -1647,14 +1882,14 @@ 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 = (0, import_react3.useRef)();
   (0, import_react3.useEffect)(() => {
     if (range) {
-      notifier.current?.((0, import_chunk_SVAIIXWQ.rangeToA1Notation)(range));
+      notifier.current?.((0, import_chunk_ZRQZFV5T.rangeToA1Notation)(range));
     }
   }, [
     range
@@ -1696,12 +1931,12 @@ var SheetStatusBar = () => {
     }
   }
   return /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: (0, import_react_ui_theme2.mx)("flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x", fragments.border)
+    className: (0, import_react_ui_theme2.mx)("flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x border-gridLine")
   }, /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "flex gap-4 items-center"
   }, /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "flex w-16 items-center font-mono"
-  }, range && (0, import_chunk_SVAIIXWQ.rangeToA1Notation)(range) || cursor && (0, import_chunk_SVAIIXWQ.addressToA1Notation)(cursor)), /* @__PURE__ */ import_react3.default.createElement("div", {
+  }, range && (0, import_chunk_ZRQZFV5T.rangeToA1Notation)(range) || cursor && (0, import_chunk_ZRQZFV5T.addressToA1Notation)(cursor)), /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "flex gap-2 items-center"
   }, /* @__PURE__ */ import_react3.default.createElement(import_react2.Function, {
     className: (0, import_react_ui_theme2.mx)("text-greenText", isFormula ? "visible" : "invisible")
@@ -1713,7 +1948,7 @@ var SheetDebug = () => {
   const { model, cursor, range } = useSheetContext();
   const [, forceUpdate] = (0, import_react3.useState)({});
   (0, import_react3.useEffect)(() => {
-    const accessor = (0, import_echo.createDocAccessor)(model.sheet, []);
+    const accessor = (0, import_echo2.createDocAccessor)(model.sheet, []);
     const handleUpdate = () => forceUpdate({});
     accessor.handle.addListener("change", handleUpdate);
     handleUpdate();
@@ -1724,7 +1959,7 @@ var SheetDebug = () => {
     model
   ]);
   return /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: (0, import_react_ui_theme2.mx)("z-20 absolute right-0 top-20 bottom-20 w-[30rem] overflow-auto scrollbar-thin", "border text-xs bg-neutral-50 dark:bg-black text-cyan-500 font-mono p-1 opacity-80", fragments.border)
+    className: (0, import_react_ui_theme2.mx)("z-20 absolute right-0 top-20 bottom-20 w-[30rem] overflow-auto scrollbar-thin", "border border-gridLine text-xs bg-neutral-50 dark:bg-black text-cyan-500 font-mono p-1 opacity-80")
   }, /* @__PURE__ */ import_react3.default.createElement("pre", {
     className: "whitespace-pre-wrap"
   }, JSON.stringify({
@@ -1746,18 +1981,232 @@ var Sheet = {
   StatusBar: SheetStatusBar,
   Debug: SheetDebug
 };
-var SheetContainer = ({ sheet, space, role, coordinate = {
-  part: "main",
-  entryId: ""
-}, remoteFunctionUrl }) => {
+var iconStyles = (0, import_react_ui_theme5.getSize)(5);
+var buttonStyles = "min-bs-0 p-2";
+var tooltipProps = {
+  side: "top",
+  classNames: "z-10"
+};
+var ToolbarSeparator = () => /* @__PURE__ */ import_react11.default.createElement("div", {
+  role: "separator",
+  className: "grow"
+});
+var ToolbarButton = ({ Icon: Icon2, children, ...props }) => {
+  return /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Tooltip.Root, null, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Toolbar.Button, {
+    variant: "ghost",
+    ...props,
+    classNames: buttonStyles
+  }, /* @__PURE__ */ import_react11.default.createElement(Icon2, {
+    className: iconStyles
+  }), /* @__PURE__ */ import_react11.default.createElement("span", {
+    className: "sr-only"
+  }, children))), /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Tooltip.Portal, null, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Tooltip.Content, tooltipProps, children, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Tooltip.Arrow, null))));
+};
+var ToolbarToggleButton = ({ Icon: Icon2, children, ...props }) => {
+  return /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Tooltip.Root, null, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Toolbar.ToggleGroupItem, {
+    variant: "ghost",
+    ...props,
+    classNames: buttonStyles
+  }, /* @__PURE__ */ import_react11.default.createElement(Icon2, {
+    className: iconStyles
+  }), /* @__PURE__ */ import_react11.default.createElement("span", {
+    className: "sr-only"
+  }, children))), /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Tooltip.Portal, null, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Tooltip.Content, tooltipProps, children, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Tooltip.Arrow, null))));
+};
+var [ToolbarContextProvider, useToolbarContext] = (0, import_react_context.createContext)("Toolbar");
+var ToolbarRoot = ({ children, onAction, classNames }) => {
+  return /* @__PURE__ */ import_react10.default.createElement(ToolbarContextProvider, {
+    onAction
+  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui3.DensityProvider, {
+    density: "fine"
+  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui3.ElevationProvider, {
+    elevation: "chrome"
+  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui3.Toolbar.Root, {
+    classNames: [
+      "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1",
+      classNames
+    ]
+  }, children))));
+};
+var formatOptions = [
+  {
+    type: "date",
+    Icon: import_react9.Calendar,
+    getState: (state) => false
+  },
+  {
+    type: "currency",
+    Icon: import_react9.CurrencyDollar,
+    getState: (state) => false
+  }
+];
+var Format = () => {
+  const { onAction } = useToolbarContext("Format");
+  const { t } = (0, import_react_ui3.useTranslation)(import_chunk_BJ6ZD7MN.SHEET_PLUGIN);
+  return /* @__PURE__ */ import_react10.default.createElement(import_react_ui3.Toolbar.ToggleGroup, {
+    type: "single"
+  }, formatOptions.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ import_react10.default.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: import_react9.TextAlignLeft,
+    getState: (state) => false
+  },
+  {
+    type: "center",
+    Icon: import_react9.TextAlignCenter,
+    getState: (state) => false
+  },
+  {
+    type: "right",
+    Icon: import_react9.TextAlignRight,
+    getState: (state) => false
+  }
+];
+var Alignment = () => {
+  const { onAction } = useToolbarContext("Alignment");
+  const { t } = (0, import_react_ui3.useTranslation)(import_chunk_BJ6ZD7MN.SHEET_PLUGIN);
+  return /* @__PURE__ */ import_react10.default.createElement(import_react_ui3.Toolbar.ToggleGroup, {
+    type: "single"
+  }, alignmentOptions.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ import_react10.default.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: import_react9.Eraser,
+    getState: (state) => false
+  },
+  {
+    type: "highlight",
+    Icon: import_react9.HighlighterCircle,
+    getState: (state) => false
+  }
+];
+var Styles = () => {
+  const { onAction } = useToolbarContext("Alignment");
+  const { t } = (0, import_react_ui3.useTranslation)(import_chunk_BJ6ZD7MN.SHEET_PLUGIN);
+  return /* @__PURE__ */ import_react10.default.createElement(import_react_ui3.Toolbar.ToggleGroup, {
+    type: "single"
+  }, styleOptions.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ import_react10.default.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 } = (0, import_react_ui3.useTranslation)(import_chunk_BJ6ZD7MN.SHEET_PLUGIN);
+  const overlapsCommentAnchor = (model.sheet.threads ?? []).filter(import_util.nonNullable).filter((thread) => thread.status !== "resolved").some((thread) => {
+    if (!cursor) {
+      return false;
+    }
+    return (0, import_chunk_ZRQZFV5T.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__ */ import_react10.default.createElement(ToolbarButton, {
+    value: "comment",
+    Icon: import_react9.ChatText,
+    "data-testid": "editor.toolbar.comment",
+    onClick: () => {
+      if (!cursor) {
+        return;
+      }
+      return onAction?.({
+        type: "comment",
+        anchor: (0, import_chunk_ZRQZFV5T.addressToIndex)(model.sheet, cursor),
+        cellContent: model.getCellText(cursor)
+      });
+    },
+    disabled: !cursorOnly || overlapsCommentAnchor
+  }, t(tooltipLabelKey));
+};
+var Toolbar = {
+  Root: ToolbarRoot,
+  Separator: ToolbarSeparator,
+  Alignment,
+  Format,
+  Styles,
+  Actions
+};
+var attentionFragment = (0, import_react_ui_theme.mx)("group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface", "group-focus-within/editor:border-separator");
+var sectionToolbarLayout = "bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity";
+var SheetContainer = ({ sheet, space, role, remoteFunctionUrl }) => {
+  const dispatch = (0, import_app_framework.useIntentDispatcher)();
+  const id = (0, import_echo.fullyQualifiedId)(sheet);
+  const isDirectlyAttended = (0, import_react_ui_attention.useIsDirectlyAttended)(id);
+  const handleAction = (0, import_react.useCallback)((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__ */ import_react.default.createElement("div", {
     role: "none",
-    className: (0, import_react_ui_theme.mx)("flex", role === "article" && "row-span-2", role === "section" && "aspect-square border-y border-is border-separator", coordinate.part !== "solo" && "border-is border-separator")
+    className: role === "article" ? "row-span-2 grid grid-rows-subgrid" : void 0
   }, /* @__PURE__ */ import_react.default.createElement(Sheet.Root, {
     sheet,
     space,
     remoteFunctionUrl
-  }, /* @__PURE__ */ import_react.default.createElement(Sheet.Main, null)));
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme.mx)("flex flex-0 justify-center overflow-x-auto")
+  }, /* @__PURE__ */ import_react.default.createElement(Toolbar.Root, {
+    onAction: handleAction,
+    classNames: (0, import_react_ui_theme.mx)(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__ */ import_react.default.createElement(Toolbar.Separator, null), /* @__PURE__ */ import_react.default.createElement(Toolbar.Actions, null))), /* @__PURE__ */ import_react.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme.mx)(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", import_react_ui_theme.focusRing, attentionFragment)
+  }, /* @__PURE__ */ import_react.default.createElement(Sheet.Main, null))));
 };
 var SheetContainer_default = SheetContainer;
-//# sourceMappingURL=SheetContainer-IQT6TR4Z.cjs.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  sectionToolbarLayout
+});
+//# sourceMappingURL=SheetContainer-KEOKUKAQ.cjs.map