@dxos/plugin-sheet 0.6.12-main.15a606f → 0.6.12-main.2d19bf1

package/src/model/sheet-model.ts

@@ -8,9 +8,11 @@ import { type SimpleDate, type SimpleDateTime } from 'hyperformula/typings/DateT
 
 import { Event } from '@dxos/async';
 import { Resource } from '@dxos/context';
+import { getTypename } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
+import { FieldValueType } from '@dxos/schema';
 
 import { DetailedCellError, ExportedCellChange } from '#hyperformula';
 import {
@@ -22,17 +24,18 @@ import {
   MAX_ROWS,
 } from '../defs';
 import { addressFromIndex, addressToIndex, initialize, insertIndices, ReadonlyException } from '../defs';
-import { type ComputeNode, type ComputeGraph, createSheetName } from '../graph';
-import { type CellScalarValue, type CellValue, type SheetType, ValueTypeEnum } from '../types';
-
-const typeMap: Record<string, ValueTypeEnum> = {
-  BOOLEAN: ValueTypeEnum.Boolean,
-  NUMBER_RAW: ValueTypeEnum.Number,
-  NUMBER_PERCENT: ValueTypeEnum.Percent,
-  NUMBER_CURRENCY: ValueTypeEnum.Currency,
-  NUMBER_DATETIME: ValueTypeEnum.DateTime,
-  NUMBER_DATE: ValueTypeEnum.Date,
-  NUMBER_TIME: ValueTypeEnum.Time,
+import { type ComputeNode, type ComputeGraph, createSheetName, type ComputeNodeEvent } from '../graph';
+import { type CellScalarValue, type CellValue, type SheetType } from '../types';
+
+// Map sheet types to system types.
+const typeMap: Record<string, FieldValueType> = {
+  BOOLEAN: FieldValueType.Boolean,
+  NUMBER_RAW: FieldValueType.Number,
+  NUMBER_PERCENT: FieldValueType.Percent,
+  NUMBER_CURRENCY: FieldValueType.Currency,
+  NUMBER_DATETIME: FieldValueType.DateTime,
+  NUMBER_DATE: FieldValueType.Date,
+  NUMBER_TIME: FieldValueType.Time,
 };
 
 const getTopLeft = (range: CellRange): CellAddress => {
@@ -60,13 +63,14 @@ export type SheetModelOptions = {
  *
  * [ComputeGraphContext] > [SheetContext]:[SheetModel] > [Sheet.Root]
  */
-// TODO(burdon): Factor out commonality with ComputeNode.
+// TODO(burdon): Factor out commonality with ComputeNode. Factor out HF.
 export class SheetModel extends Resource {
   public readonly id = `model-${PublicKey.random().truncate()}`;
 
-  public readonly update = new Event();
+  // Wraps compute node.
+  public readonly update = new Event<ComputeNodeEvent>();
 
-  private readonly _node: ComputeNode;
+  private _node?: ComputeNode;
 
   constructor(
     private readonly _graph: ComputeGraph,
@@ -74,9 +78,6 @@ export class SheetModel extends Resource {
     private readonly _options: SheetModelOptions = {},
   ) {
     super();
-    // TODO(burdon): SheetModel should extend ComputeNode and be constructed via the graph.
-    this._node = this._graph.getOrCreateNode(createSheetName(this._sheet.id));
-    this.reset();
   }
 
   get graph() {
@@ -104,12 +105,16 @@ export class SheetModel extends Resource {
   protected override async _open() {
     log('initialize', { id: this.id });
     initialize(this._sheet);
-    this.reset();
 
-    // TODO(burdon): Event hierarchy?
+    // TODO(burdon): SheetModel should extend ComputeNode and be constructed via the graph.
+    this._node = this._graph.getOrCreateNode(createSheetName({ type: getTypename(this._sheet)!, id: this._sheet.id }));
+    await this._node.open();
+
     // Listen for model updates (e.g., async calculations).
-    const unsubscribe = this._graph.update.on(() => this.update.emit());
+    const unsubscribe = this._node.update.on((event) => this.update.emit(event));
     this._ctx.onDispose(unsubscribe);
+
+    this.reset();
   }
 
   /**
@@ -118,8 +123,10 @@ export class SheetModel extends Resource {
    * @deprecated
    */
   reset() {
-    this._node.hf.clearSheet(this._node.sheetId);
+    invariant(this._node);
+    this._node.graph.hf.clearSheet(this._node.sheetId);
     Object.entries(this._sheet.cells).forEach(([key, { value }]) => {
+      invariant(this._node);
       const { col, row } = addressFromIndex(this._sheet, key);
       if (typeof value === 'string' && value.charAt(0) === '=') {
         value = this._graph.mapFormulaToNative(
@@ -127,7 +134,7 @@ export class SheetModel extends Resource {
         );
       }
 
-      this._node.hf.setCellContents({ sheet: this._node.sheetId, row, col }, value);
+      this._node.graph.hf.setCellContents({ sheet: this._node.sheetId, row, col }, value);
     });
   }
 
@@ -139,7 +146,7 @@ export class SheetModel extends Resource {
    */
   // TODO(burdon): Remove.
   recalculate() {
-    this._node.hf.rebuildAndRecalculate();
+    this._node?.graph.hf.rebuildAndRecalculate();
   }
 
   insertRows(i: number, n = 1) {
@@ -161,9 +168,10 @@ export class SheetModel extends Resource {
    * Clear range of values.
    */
   clear(range: CellRange) {
+    invariant(this._node);
     const topLeft = getTopLeft(range);
     const values = this._iterRange(range, () => null);
-    this._node.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
+    this._node.graph.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
     this._iterRange(range, (cell) => {
       const idx = addressToIndex(this._sheet, cell);
       delete this._sheet.cells[idx];
@@ -171,7 +179,8 @@ export class SheetModel extends Resource {
   }
 
   cut(range: CellRange) {
-    this._node.hf.cut(toModelRange(this._node.sheetId, range));
+    invariant(this._node);
+    this._node.graph.hf.cut(toModelRange(this._node.sheetId, range));
     this._iterRange(range, (cell) => {
       const idx = addressToIndex(this._sheet, cell);
       delete this._sheet.cells[idx];
@@ -179,12 +188,14 @@ export class SheetModel extends Resource {
   }
 
   copy(range: CellRange) {
-    this._node.hf.copy(toModelRange(this._node.sheetId, range));
+    invariant(this._node);
+    this._node.graph.hf.copy(toModelRange(this._node.sheetId, range));
   }
 
   paste(cell: CellAddress) {
-    if (!this._node.hf.isClipboardEmpty()) {
-      const changes = this._node.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
+    invariant(this._node);
+    if (!this._node.graph.hf.isClipboardEmpty()) {
+      const changes = this._node.graph.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
       for (const change of changes) {
         if (change instanceof ExportedCellChange) {
           const { address, newValue } = change;
@@ -197,16 +208,18 @@ export class SheetModel extends Resource {
 
   // TODO(burdon): Display undo/redo state.
   undo() {
-    if (this._node.hf.isThereSomethingToUndo()) {
-      this._node.hf.undo();
-      this.update.emit();
+    invariant(this._node);
+    if (this._node.graph.hf.isThereSomethingToUndo()) {
+      this._node.graph.hf.undo();
+      // this.update.emit();
     }
   }
 
   redo() {
-    if (this._node.hf.isThereSomethingToRedo()) {
-      this._node.hf.redo();
-      this.update.emit();
+    invariant(this._node);
+    if (this._node.graph.hf.isThereSomethingToRedo()) {
+      this._node.graph.hf.redo();
+      // this.update.emit();
     }
   }
 
@@ -246,7 +259,8 @@ export class SheetModel extends Resource {
    */
   getValue(cell: CellAddress): CellScalarValue {
     // Applies rounding and post-processing.
-    const value = this._node.hf.getCellValue(toSimpleCellAddress(this._node.sheetId, cell));
+    invariant(this._node);
+    const value = this._node.graph.hf.getCellValue(toSimpleCellAddress(this._node.sheetId, cell));
     if (value instanceof DetailedCellError) {
       return value.toString();
     }
@@ -257,9 +271,10 @@ export class SheetModel extends Resource {
   /**
    * Get value type.
    */
-  getValueType(cell: CellAddress): ValueTypeEnum {
+  getValueType(cell: CellAddress): FieldValueType {
+    invariant(this._node);
     const addr = toSimpleCellAddress(this._node.sheetId, cell);
-    const type = this._node.hf.getCellValueDetailedType(addr);
+    const type = this._node.graph.hf.getCellValueDetailedType(addr);
     return typeMap[type];
   }
 
@@ -267,6 +282,7 @@ export class SheetModel extends Resource {
    * Sets the value, updating the sheet and engine.
    */
   setValue(cell: CellAddress, value: CellScalarValue) {
+    invariant(this._node);
     if (this._options.readonly) {
       throw new ReadonlyException();
     }
@@ -288,7 +304,7 @@ export class SheetModel extends Resource {
     }
 
     // Insert into engine.
-    this._node.hf.setCellContents({ sheet: this._node.sheetId, row: cell.row, col: cell.col }, [
+    this._node.graph.hf.setCellContents({ sheet: this._node.sheetId, row: cell.row, col: cell.col }, [
       [typeof value === 'string' && value.charAt(0) === '=' ? this._graph.mapFormulaToNative(value) : value],
     ]);
 
@@ -386,14 +402,17 @@ export class SheetModel extends Resource {
   }
 
   toDateTime(num: number): SimpleDateTime {
-    return this._node.hf.numberToDateTime(num) as SimpleDateTime;
+    invariant(this._node);
+    return this._node.graph.hf.numberToDateTime(num) as SimpleDateTime;
   }
 
   toDate(num: number): SimpleDate {
-    return this._node.hf.numberToDate(num) as SimpleDate;
+    invariant(this._node);
+    return this._node.graph.hf.numberToDate(num) as SimpleDate;
   }
 
   toTime(num: number): SimpleDate {
-    return this._node.hf.numberToTime(num) as SimpleDate;
+    invariant(this._node);
+    return this._node.graph.hf.numberToTime(num) as SimpleDate;
   }
 }

package/src/testing/testing.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import type { Decorator } from '@storybook/react';
+import { type Decorator } from '@storybook/react';
 import React, { useState } from 'react';
 
 import { type Space } from '@dxos/react-client/echo';
@@ -10,14 +10,13 @@ import { useAsyncState } from '@dxos/react-hooks';
 
 import { ComputeGraphContextProvider } from '../components';
 import { createSheet } from '../defs';
-import { type ComputeGraph, ComputeGraphRegistry } from '../graph';
+import { type ComputeGraph, type ComputeGraphOptions, ComputeGraphRegistry } from '../graph';
 import { type CellValue, type CreateSheetOptions } from '../types';
 
-export const testSheetName = 'test';
+const testSheetName = 'test';
 
-// TODO(thure): Remove this from the `/testing` entrypoint.
-export const createCells = (): Record<string, CellValue> => ({
-  B1: { value: 'Qty' },
+export const createTestCells = (): Record<string, CellValue> => ({
+  B1: { value: 'Qty2' },
   B3: { value: 1 },
   B4: { value: 2 },
   B5: { value: 3 },
@@ -45,7 +44,7 @@ export const createCells = (): Record<string, CellValue> => ({
 });
 
 export const useTestSheet = (space?: Space, graph?: ComputeGraph, options?: CreateSheetOptions) => {
-  return useAsyncState(async () => {
+  const [sheet] = useAsyncState(async () => {
     if (!space || !graph) {
       return;
     }
@@ -54,13 +53,16 @@ export const useTestSheet = (space?: Space, graph?: ComputeGraph, options?: Crea
     space.db.add(sheet);
     return sheet;
   }, [space, graph]);
+  return sheet;
 };
 
-export const withGraphDecorator: Decorator = (Story) => {
-  const [registry] = useState(new ComputeGraphRegistry());
-  return (
-    <ComputeGraphContextProvider registry={registry}>
-      <Story />
-    </ComputeGraphContextProvider>
-  );
-};
+export const withComputeGraphDecorator =
+  (options?: ComputeGraphOptions): Decorator =>
+  (Story) => {
+    const [registry] = useState(new ComputeGraphRegistry(options));
+    return (
+      <ComputeGraphContextProvider registry={registry}>
+        <Story />
+      </ComputeGraphContextProvider>
+    );
+  };

package/src/types.ts

@@ -15,6 +15,7 @@ import { type MarkdownExtensionProvides } from '@dxos/plugin-markdown';
 import { type SpaceInitProvides } from '@dxos/plugin-space';
 import { ThreadType } from '@dxos/plugin-space/types';
 import { type StackProvides } from '@dxos/plugin-stack';
+import { FieldValueType } from '@dxos/schema';
 
 import { SHEET_PLUGIN } from './meta';
 
@@ -51,41 +52,15 @@ export const CellValue = S.Struct({
   // TODO(burdon): How to store dates (datetime, date, time), percentages, etc.
   //  Consider import/export; natural access for other plugins. Special handling for currency (precision).
   // TODO(burdon): Automerge (long string) or short string or number.
-  // TODO(burdon): Arrays?
   value: S.Any,
 });
 
 export type CellValue = S.Schema.Type<typeof CellValue>;
 
-/**
- * https://www.tutorialsteacher.com/typescript/typescript-number
- */
-// TODO(burdon): Format vs. value.
-export enum ValueTypeEnum {
-  Null = 0,
-  Number = 1,
-  Boolean = 2,
-  String = 3,
-
-  // Special numbers.
-  Percent = 10,
-  Currency = 11,
-
-  // Dates.
-  DateTime = 20,
-  Date = 21,
-  Time = 22,
-
-  // Validated string types.
-  // TODO(burdon): Define effect types.
-  URL = 30,
-  DID = 31,
-}
-
-export const ValueType = S.Enums(ValueTypeEnum);
-
+// TODO(burdon): IMPORTANT: Reconcile with Field definition.
 export const Formatting = S.Struct({
-  type: S.optional(ValueType),
+  range: S.String,
+  type: S.optional(S.Enums(FieldValueType)),
   format: S.optional(S.String),
   precision: S.optional(S.Number),
   classNames: S.optional(S.Array(S.String)),
@@ -99,13 +74,11 @@ export const RowColumnMeta = S.Struct({
 });
 
 // TODO(burdon): Index to all updates when rows/columns are inserted/deleted.
-// TODO(wittjosiah): Migrate typename to remove `Type` suffix.
-// TODO(wittjosiah): Rename title to name to align with other schemas.
 export class SheetType extends TypedObject({ typename: 'dxos.org/type/SheetType', version: '0.1.0' })({
-  title: S.optional(S.String),
+  name: S.optional(S.String),
 
   // Sparse map of cells referenced by index.
-  cells: S.mutable(S.Record(S.String, S.mutable(CellValue))),
+  cells: S.mutable(S.Record({ key: S.String, value: S.mutable(CellValue) })),
 
   // Ordered row indices.
   rows: S.mutable(S.Array(S.String)),
@@ -114,13 +87,14 @@ export class SheetType extends TypedObject({ typename: 'dxos.org/type/SheetType'
   columns: S.mutable(S.Array(S.String)),
 
   // Row metadata referenced by index.
-  rowMeta: S.mutable(S.Record(S.String, S.mutable(RowColumnMeta))),
+  rowMeta: S.mutable(S.Record({ key: S.String, value: S.mutable(RowColumnMeta) })),
 
   // Column metadata referenced by index.
-  columnMeta: S.mutable(S.Record(S.String, S.mutable(RowColumnMeta))),
+  columnMeta: S.mutable(S.Record({ key: S.String, value: S.mutable(RowColumnMeta) })),
 
+  // TODO(burdon): Change to array.
   // Cell formatting referenced by indexed range.
-  formatting: S.mutable(S.Record(S.String, S.mutable(Formatting))),
+  formatting: S.mutable(S.Array(Formatting)),
 
   // Threads associated with the sheet
   threads: S.optional(S.mutable(S.Array(ref(ThreadType)))),
@@ -132,6 +106,6 @@ export type SheetSize = {
 };
 
 export type CreateSheetOptions = {
-  // TODO(burdon): Standardize as name.
-  title?: string;
+  name?: string;
+  cells?: Record<string, CellValue>;
 } & Partial<SheetSize>;

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

@@ -1,261 +0,0 @@
-import {
-  Sheet,
-  addressToIndex,
-  useSheetContext
-} from "./chunk-U2JHW3L6.mjs";
-import "./chunk-T3NJFTD4.mjs";
-import {
-  SHEET_PLUGIN
-} from "./chunk-QILRZNE5.mjs";
-import "./chunk-6ZMQVB4Z.mjs";
-
-// packages/plugins/plugin-sheet/src/components/SheetContainer.tsx
-import React3, { useCallback } from "react";
-import { useIntentDispatcher } from "@dxos/app-framework";
-import { fullyQualifiedId } from "@dxos/react-client/echo";
-import { useIsDirectlyAttended } from "@dxos/react-ui-attention";
-import { focusRing, mx } from "@dxos/react-ui-theme";
-
-// packages/plugins/plugin-sheet/src/components/Toolbar/Toolbar.tsx
-import { Calendar, ChatText, CurrencyDollar, Eraser, HighlighterCircle, TextAlignCenter, TextAlignLeft, TextAlignRight } from "@phosphor-icons/react";
-import { createContext } from "@radix-ui/react-context";
-import React2 from "react";
-import { DensityProvider, ElevationProvider, Toolbar as NaturalToolbar2, useTranslation } from "@dxos/react-ui";
-import { nonNullable } from "@dxos/util";
-
-// packages/plugins/plugin-sheet/src/components/Toolbar/common.tsx
-import React 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__ */ React.createElement("div", {
-  role: "separator",
-  className: "grow"
-});
-var ToolbarButton = ({ Icon, children, ...props }) => {
-  return /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(NaturalToolbar.Button, {
-    variant: "ghost",
-    ...props,
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    className: iconStyles
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: "sr-only"
-  }, children))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
-};
-var ToolbarToggleButton = ({ Icon, children, ...props }) => {
-  return /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(NaturalToolbar.ToggleGroupItem, {
-    variant: "ghost",
-    ...props,
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    className: iconStyles
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: "sr-only"
-  }, children))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
-};
-
-// packages/plugins/plugin-sheet/src/components/Toolbar/Toolbar.tsx
-var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
-var ToolbarRoot = ({ children, onAction, classNames }) => {
-  return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
-    onAction
-  }, /* @__PURE__ */ React2.createElement(DensityProvider, {
-    density: "fine"
-  }, /* @__PURE__ */ React2.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, /* @__PURE__ */ React2.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 } = useTranslation(SHEET_PLUGIN);
-  return /* @__PURE__ */ React2.createElement(NaturalToolbar2.ToggleGroup, {
-    type: "single"
-  }, formatOptions.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
-    key: type,
-    value: type,
-    Icon,
-    // 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 } = useTranslation(SHEET_PLUGIN);
-  return /* @__PURE__ */ React2.createElement(NaturalToolbar2.ToggleGroup, {
-    type: "single"
-  }, alignmentOptions.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
-    key: type,
-    value: type,
-    Icon,
-    // 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 } = useTranslation(SHEET_PLUGIN);
-  return /* @__PURE__ */ React2.createElement(NaturalToolbar2.ToggleGroup, {
-    type: "single"
-  }, styleOptions.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
-    key: type,
-    value: type,
-    Icon,
-    // 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 } = useTranslation(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__ */ React2.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 = 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 }) => {
-  const dispatch = useIntentDispatcher();
-  const id = fullyQualifiedId(sheet);
-  const isDirectlyAttended = useIsDirectlyAttended(id);
-  const handleAction = 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__ */ React3.createElement("div", {
-    role: "none",
-    className: role === "article" ? "row-span-2 grid grid-rows-subgrid" : void 0
-  }, /* @__PURE__ */ React3.createElement(Sheet.Root, {
-    space,
-    sheet
-  }, /* @__PURE__ */ React3.createElement("div", {
-    role: "none",
-    className: mx("flex flex-0 justify-center overflow-x-auto")
-  }, /* @__PURE__ */ React3.createElement(Toolbar.Root, {
-    onAction: handleAction,
-    classNames: 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__ */ React3.createElement(Toolbar.Separator, null), /* @__PURE__ */ React3.createElement(Toolbar.Actions, null))), /* @__PURE__ */ React3.createElement("div", {
-    role: "none",
-    className: 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", focusRing, attentionFragment)
-  }, /* @__PURE__ */ React3.createElement(Sheet.Main, null))));
-};
-var SheetContainer_default = SheetContainer;
-export {
-  SheetContainer_default as default,
-  sectionToolbarLayout
-};
-//# sourceMappingURL=SheetContainer-V4GCCZTX.mjs.map