@dxos/plugin-sheet 0.7.4 → 0.7.5-labs.5f04cf6

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { getSpace } from '@dxos/react-client/echo';
+
+import { RangeList, SheetContainer } from '../components';
+import { SHEET_PLUGIN } from '../meta';
+import { SheetType } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${SHEET_PLUGIN}/sheet`,
+      role: ['article', 'section'],
+      filter: (data): data is { subject: SheetType } => data.subject instanceof SheetType && !!getSpace(data.subject),
+      component: ({ data, role }) => (
+        <SheetContainer space={getSpace(data.subject)!} sheet={data.subject} role={role} />
+      ),
+    }),
+    createSurface({
+      id: `${SHEET_PLUGIN}/settings`,
+      role: 'complementary--settings',
+      filter: (data): data is { subject: SheetType } => data.subject instanceof SheetType,
+      component: ({ data }) => <RangeList sheet={data.subject} />,
+    }),
+  ]);

package/src/capabilities/thread.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes } from '@dxos/app-framework';
+import { ThreadCapabilities } from '@dxos/plugin-space';
+
+import { compareIndexPositions, SheetType } from '../types';
+
+export default () =>
+  contributes(ThreadCapabilities.Thread, {
+    predicate: (data) => data instanceof SheetType,
+    createSort: (sheet) => (indexA, indexB) => (!indexA || !indexB ? 0 : compareIndexPositions(sheet, indexA, indexB)),
+  });

package/src/components/ComputeGraph/ComputeGraphContextProvider.tsx

@@ -4,12 +4,11 @@
 
 import React, { createContext, type PropsWithChildren, useContext } from 'react';
 
+import { type ComputeGraph, type ComputeGraphRegistry } from '@dxos/compute';
 import { raise } from '@dxos/debug';
 import { type Space } from '@dxos/react-client/echo';
 import { useAsyncState } from '@dxos/react-hooks';
 
-import { type ComputeGraph, type ComputeGraphRegistry } from '../../compute-graph';
-
 export type ComputeGraphContextType = {
   registry: ComputeGraphRegistry;
 };

package/src/{compute-graph → components/ComputeGraph}/compute-graph.stories.tsx

@@ -7,19 +7,18 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { FunctionType } from '@dxos/plugin-script/types';
+import { testFunctionPlugins } from '@dxos/compute/testing';
+import { FunctionType } from '@dxos/functions';
 import { create, useSpace, Filter } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Toolbar, Button, Input } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { testFunctionPlugins } from './testing';
-import { useComputeGraph } from '../components';
-import { createSheet } from '../defs';
-import { useSheetModel } from '../model';
-import { withComputeGraphDecorator } from '../testing';
-import { SheetType } from '../types';
+import { useComputeGraph } from './ComputeGraphContextProvider';
+import { useSheetModel } from '../../model';
+import { withComputeGraphDecorator } from '../../testing';
+import { createSheet, SheetType } from '../../types';
 
 const FUNCTION_NAME = 'TEST';
 

package/src/components/FunctionEditor/FunctionEditor.tsx

@@ -4,9 +4,10 @@
 
 import React from 'react';
 
+import { addressToA1Notation, isFormula, rangeToA1Notation } from '@dxos/compute';
 import { Icon } from '@dxos/react-ui';
 
-import { addressToA1Notation, isFormula, mapFormulaIndicesToRefs, rangeToA1Notation } from '../../defs';
+import { mapFormulaIndicesToRefs } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
 export const FunctionEditor = () => {

package/src/components/GridSheet/GridSheet.stories.tsx

@@ -7,6 +7,7 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React from 'react';
 
+import { withPluginManager } from '@dxos/app-framework/testing';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
@@ -41,6 +42,7 @@ const meta: Meta = {
     withComputeGraphDecorator(),
     withTheme,
     withLayout({ fullscreen: true, tooltips: true, classNames: 'grid' }),
+    withPluginManager(),
   ],
   parameters: { translations },
 };

package/src/components/GridSheet/GridSheet.tsx

@@ -13,7 +13,8 @@ import React, {
   useState,
 } from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { rangeToA1Notation, type CellRange } from '@dxos/compute';
 import { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
@@ -23,20 +24,19 @@ import {
   Grid,
   GridCellEditor,
   type DxGridElement,
+  type DxGridPosition,
+  type DxGridCellIndex,
   type EditorKeyHandler,
   type EditorBlurHandler,
   type GridContentProps,
-  type DxGridPosition,
-  type DxGridCellIndex,
   parseCellIndex,
 } from '@dxos/react-ui-grid';
 
 import { colLabelCell, rowLabelCell, useSheetModelDxGridProps } from './util';
-import { DEFAULT_COLUMNS, DEFAULT_ROWS, rangeToA1Notation, type CellRange } from '../../defs';
 import { rangeExtension, sheetExtension, type RangeController } from '../../extensions';
 import { useSelectThreadOnCellFocus, useUpdateFocusedCellOnThreadSelection } from '../../integrations';
 import { SHEET_PLUGIN } from '../../meta';
-import { SheetAction } from '../../types';
+import { DEFAULT_COLS, DEFAULT_ROWS, SheetAction } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
 const inertPosition: DxGridPosition = { plane: 'grid', col: 0, row: 0 };
@@ -72,7 +72,7 @@ export const GridSheet = () => {
   // a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.
   const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
   const [extraplanarFocus, setExtraplanarFocus] = useState<DxGridPosition | null>(null);
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const rangeController = useRef<RangeController>();
   const { hasAttention } = useAttention(id);
 
@@ -252,24 +252,21 @@ export const GridSheet = () => {
       switch (operation) {
         case 'insert-before':
         case 'insert-after':
-          return dispatch({
-            action: SheetAction.INSERT_AXIS,
-            data: {
+          return dispatch(
+            createIntent(SheetAction.InsertAxis, {
               model,
               axis: contextMenuAxis,
               index: contextMenuOpen![contextMenuAxis] + (operation === 'insert-before' ? 0 : 1),
-            } satisfies SheetAction.InsertAxis,
-          });
-          break;
+            }),
+          );
         case 'drop':
-          return dispatch({
-            action: SheetAction.DROP_AXIS,
-            data: {
+          return dispatch(
+            createIntent(SheetAction.DropAxis, {
               model,
               axis: contextMenuAxis,
               axisIndex: model.sheet[contextMenuAxis === 'row' ? 'rows' : 'columns'][contextMenuOpen![contextMenuAxis]],
-            } satisfies SheetAction.DropAxis,
-          });
+            }),
+          );
       }
     },
     [contextMenuAxis, contextMenuOpen, model, dispatch],
@@ -309,7 +306,7 @@ export const GridSheet = () => {
       <GridCellEditor getCellContent={getCellContent} extension={extension} onBlur={handleBlur} />
       <Grid.Content
         initialCells={initialCells}
-        limitColumns={DEFAULT_COLUMNS}
+        limitColumns={DEFAULT_COLS}
         limitRows={DEFAULT_ROWS}
         columns={columns}
         rows={rows}

package/src/components/GridSheet/SheetCellEditor.stories.tsx

@@ -9,21 +9,20 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { Client } from '@dxos/client';
 import { createDocAccessor, type ReactiveEchoObject } from '@dxos/client/echo';
+import { defaultFunctions } from '@dxos/compute';
+import { getRegisteredFunctionNames } from '@dxos/compute/testing';
 import { automerge } from '@dxos/react-ui-editor';
 import { CellEditor, type CellEditorProps } from '@dxos/react-ui-grid';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { HyperFormula } from '#hyperformula';
-import { defaultFunctions } from '../../compute-graph';
-import { createSheet } from '../../defs';
 import { sheetExtension } from '../../extensions';
-import { SheetType } from '../../types';
+import { createSheet, SheetType } from '../../types';
 
 type StoryProps = CellEditorProps;
 
 const Story = ({ value, ...props }: StoryProps) => {
   const extension = useMemo(() => {
-    const functionNames = HyperFormula.buildEmpty({ licenseKey: 'gpl-v3' }).getRegisteredFunctionNames();
+    const functionNames = getRegisteredFunctionNames();
     const functions = defaultFunctions.filter(({ name }) => functionNames.includes(name));
     return [sheetExtension({ functions })];
   }, []);
@@ -54,7 +53,7 @@ const AutomergeStory = ({ value, ...props }: StoryProps) => {
       return [];
     }
 
-    const functionNames = HyperFormula.buildEmpty({ licenseKey: 'gpl-v3' }).getRegisteredFunctionNames();
+    const functionNames = getRegisteredFunctionNames();
     const functions = defaultFunctions.filter(({ name }) => functionNames.includes(name));
     const accessor = createDocAccessor(object, ['cells', cell, 'value']);
     return [automerge(accessor), sheetExtension({ functions })];
@@ -87,8 +86,8 @@ export const Automerge = {
 const meta: Meta = {
   title: 'plugins/plugin-sheet/CellEditor',
   component: CellEditor,
-  render: (args: StoryProps) => <Story {...args} />,
   decorators: [withTheme],
+  render: (args: StoryProps) => <Story {...args} />,
 };
 
 export default meta;

package/src/components/GridSheet/util.ts

@@ -4,6 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
+import { inRange } from '@dxos/compute';
 import { createDocAccessor, fullyQualifiedId } from '@dxos/react-client/echo';
 import { parseValue, cellClassesForFieldType } from '@dxos/react-ui-form';
 import {
@@ -20,9 +21,9 @@ import {
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 
-import { inRange, cellClassNameForRange, rangeFromIndex } from '../../defs';
 import { parseThreadAnchorAsCellRange } from '../../integrations';
 import { type SheetModel } from '../../model';
+import { cellClassNameForRange, rangeFromIndex } from '../../types';
 
 const createDxGridColumns = (model: SheetModel): DxGridAxisMeta => {
   return model.sheet.columns.reduce(
@@ -54,7 +55,7 @@ const projectCellProps = (model: SheetModel, col: number, row: number): DxGridCe
   const ranges = model.sheet.ranges?.filter(({ range }) => inRange(rangeFromIndex(model.sheet, range), address));
   const threadRefs = model.sheet.threads
     ?.filter((thread) => {
-      const range = thread?.anchor && parseThreadAnchorAsCellRange(thread!.anchor);
+      const range = thread.target?.anchor && parseThreadAnchorAsCellRange(thread.target!.anchor);
       return thread && range ? inRange(range, address) : false;
     })
     .map((thread) => fullyQualifiedId(thread!))

package/src/components/RangeList/RangeList.tsx

@@ -4,13 +4,14 @@
 
 import React, { useCallback } from 'react';
 
+import { rangeToA1Notation } from '@dxos/compute';
 import { S } from '@dxos/echo-schema';
 import { useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { ghostHover } from '@dxos/react-ui-theme';
 
-import { rangeFromIndex, rangeToA1Notation } from '../../defs';
 import { SHEET_PLUGIN } from '../../meta';
+import { rangeFromIndex } from '../../types';
 import { Range, type SheetType } from '../../types';
 
 export type RangeListProps = {

package/src/components/SheetContainer/SheetContainer.stories.tsx

@@ -7,9 +7,12 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React from 'react';
 
-import { type Intent, IntentProvider } from '@dxos/app-framework';
-import { useSpace, create } from '@dxos/react-client/echo';
+import { Capabilities, contributes, createResolver, IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { fullyQualifiedId, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
+import { AttendableContainer } from '@dxos/react-ui-attention';
+import { withAttention } from '@dxos/react-ui-attention/testing';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { SheetContainer } from './SheetContainer';
@@ -19,24 +22,6 @@ import { SheetAction, SheetType } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
 import { RangeList } from '../RangeList';
 
-// TODO(thure via wittjosiah):  stories/components should be written such that the dependency on intents is external and provided via callback and then the story can implement it differently.
-const storybookIntentValue = create({
-  dispatch: async (intents: Intent | Intent[]) => {
-    const intent = Array.isArray(intents) ? intents[0] : intents;
-    switch (intent.action) {
-      case SheetAction.DROP_AXIS: {
-        if (!intent.undo) {
-          const { model, axis, axisIndex } = intent.data as SheetAction.DropAxis;
-          model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
-        }
-      }
-    }
-  },
-  undo: async () => ({}),
-  history: [],
-  registerResolver: () => () => {},
-});
-
 export const Basic = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
@@ -45,7 +30,11 @@ export const Basic = () => {
     return null;
   }
 
-  return <SheetContainer space={space} sheet={sheet} role='article' ignoreAttention />;
+  return (
+    <AttendableContainer id={fullyQualifiedId(sheet)} classNames='contents'>
+      <SheetContainer space={space} sheet={sheet} role='article' ignoreAttention />
+    </AttendableContainer>
+  );
 };
 
 export const Spec = () => {
@@ -57,14 +46,14 @@ export const Spec = () => {
   }
 
   return (
-    <IntentProvider value={storybookIntentValue}>
+    <AttendableContainer id={fullyQualifiedId(sheet)} classNames='contents'>
       <div role='none' className='grid grid-rows-[66%_33%] grid-cols-1'>
         <SheetContainer space={space} sheet={sheet} role='article' ignoreAttention />
         <div role='none' data-testid='grid.range-list'>
           <RangeList sheet={sheet} />
         </div>
       </div>
-    </IntentProvider>
+    </AttendableContainer>
   );
 };
 
@@ -80,6 +69,19 @@ const meta: Meta = {
       tooltips: true,
       classNames: 'grid',
     }),
+    withAttention,
+    // TODO(wittjosiah): Consider whether we should refactor component so story doesn't need to depend on intents.
+    withPluginManager({
+      plugins: [IntentPlugin()],
+      capabilities: [
+        contributes(
+          Capabilities.IntentResolver,
+          createResolver(SheetAction.DropAxis, ({ model, axis, axisIndex }) => {
+            model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
+          }),
+        ),
+      ],
+    }),
   ],
   parameters: { translations },
 };

package/src/components/SheetContainer/SheetContainer.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { type Space } from '@dxos/react-client/echo';
+import { fullyQualifiedId, type Space } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
 
 import { type SheetType } from '../../types';
@@ -12,7 +12,7 @@ import { useComputeGraph } from '../ComputeGraph';
 import { FunctionEditor } from '../FunctionEditor';
 import { GridSheet } from '../GridSheet';
 import { SheetProvider } from '../SheetContext';
-import { Toolbar } from '../Toolbar';
+import { SheetToolbar } from '../SheetToolbar';
 
 export const SheetContainer = ({
   space,
@@ -30,12 +30,7 @@ export const SheetContainer = ({
   return graph ? (
     <SheetProvider sheet={sheet} graph={graph} ignoreAttention={ignoreAttention}>
       <StackItem.Content toolbar statusbar {...(role === 'section' && { classNames: 'aspect-video' })}>
-        <Toolbar.Root role={role}>
-          <Toolbar.Styles />
-          <Toolbar.Alignment />
-          <Toolbar.Separator />
-          <Toolbar.Actions />
-        </Toolbar.Root>
+        <SheetToolbar attendableId={fullyQualifiedId(sheet)} />
         <GridSheet />
         <FunctionEditor />
       </StackItem.Content>

package/src/components/SheetContext/SheetContext.tsx

@@ -4,6 +4,7 @@
 
 import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
 
+import { type ComputeGraph, type CellAddress, type CellRange, type CompleteCellRange } from '@dxos/compute';
 import { invariant } from '@dxos/invariant';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 import {
@@ -14,8 +15,6 @@ import {
   useGridContext,
 } from '@dxos/react-ui-grid';
 
-import { type ComputeGraph } from '../../compute-graph';
-import { type CellAddress, type CellRange, type CompleteCellRange } from '../../defs';
 import { type SheetModel, useSheetModel } from '../../model';
 import { type SheetType } from '../../types';
 

package/src/components/{Toolbar/Toolbar.stories.tsx → SheetToolbar/SheetToolbar.stories.tsx}

@@ -10,22 +10,18 @@ import React from 'react';
 import { textBlockWidth } from '@dxos/react-ui-theme';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { Toolbar } from './Toolbar';
+import { SheetToolbar } from './SheetToolbar';
 import translations from '../../translations';
 
 const DefaultStory = () => {
-  return (
-    <Toolbar.Root classNames={textBlockWidth}>
-      <Toolbar.Alignment />
-    </Toolbar.Root>
-  );
+  return <SheetToolbar classNames={textBlockWidth} />;
 };
 
 export const Default = {};
 
-const meta: Meta<typeof Toolbar.Root> = {
+const meta: Meta = {
   title: 'plugins/plugin-sheet/Toolbar',
-  component: Toolbar.Root,
+  component: SheetToolbar,
   render: DefaultStory,
   decorators: [withTheme, withLayout({ tooltips: true })],
   parameters: { translations, layout: 'fullscreen' },

package/src/components/SheetToolbar/SheetToolbar.tsx

@@ -0,0 +1,48 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren, useCallback } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { createGapSeparator, MenuProvider, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
+
+import { createAlign, useAlignState } from './align';
+import { createComment, useCommentState } from './comment';
+import { createStyle, useStyleState } from './style';
+import { useToolbarAction } from './useToolbarAction';
+import { type ToolbarState, useToolbarState } from './useToolbarState';
+
+//
+// Root
+//
+
+export type SheetToolbarProps = ThemedClassName<PropsWithChildren<{ attendableId?: string }>>;
+
+const createToolbarActions = (state: ToolbarState) => {
+  const align = createAlign(state);
+  const style = createStyle(state);
+  const gap = createGapSeparator();
+  const comment = createComment(state);
+  return {
+    nodes: [...align.nodes, ...style.nodes, ...gap.nodes, ...comment.nodes],
+    edges: [...align.edges, ...style.edges, ...gap.edges, ...comment.edges],
+  };
+};
+
+export const SheetToolbar = ({ attendableId, classNames }: SheetToolbarProps) => {
+  const state = useToolbarState({});
+  useAlignState(state);
+  useStyleState(state);
+  useCommentState(state);
+
+  const actionsCreator = useCallback(() => createToolbarActions(state), [state]);
+  const menu = useMenuActions(actionsCreator);
+  const handleAction = useToolbarAction(state);
+
+  return (
+    <MenuProvider {...menu} attendableId={attendableId} onAction={handleAction}>
+      <ToolbarMenu classNames={classNames} />
+    </MenuProvider>
+  );
+};

package/src/components/SheetToolbar/align.ts

@@ -0,0 +1,68 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect } from 'react';
+
+import { inRange } from '@dxos/compute';
+import { createMenuAction, createMenuItemGroup, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+
+import { SHEET_PLUGIN } from '../../meta';
+import { type AlignKey, alignKey, type AlignValue, rangeFromIndex } from '../../types';
+import { useSheetContext } from '../SheetContext';
+
+export type AlignAction = { key: AlignKey; value: AlignValue };
+
+export type AlignState = { [alignKey]: AlignValue | undefined };
+
+const aligns: Record<AlignValue, string> = {
+  start: 'ph--text-align-left--regular',
+  center: 'ph--text-align-center--regular',
+  end: 'ph--text-align-right--regular',
+};
+
+export const useAlignState = (state: Partial<AlignState>) => {
+  const { cursor, model } = useSheetContext();
+  useEffect(() => {
+    // TODO(thure): Can this O(n) call be memoized?
+    state[alignKey] = (
+      cursor
+        ? model.sheet.ranges?.findLast(
+            ({ range, key }) => key === alignKey && inRange(rangeFromIndex(model.sheet, range), cursor),
+          )?.value
+        : undefined
+    ) as AlignValue | undefined;
+  }, [cursor, model.sheet]);
+};
+
+const createAlignGroupAction = (value?: AlignValue) =>
+  createMenuItemGroup('align', {
+    label: ['align label', { ns: SHEET_PLUGIN }],
+    variant: 'toggleGroup',
+    selectCardinality: 'single',
+    value: `${alignKey}--${value}`,
+  } as ToolbarMenuActionGroupProperties);
+
+const createAlignActions = (value?: AlignValue) =>
+  Object.entries(aligns).map(([alignValue, icon]) => {
+    return createMenuAction<AlignAction>(`${alignKey}--${alignValue}`, {
+      key: alignKey,
+      value: alignValue as AlignValue,
+      checked: value === alignValue,
+      label: [`range value ${alignValue} label`, { ns: SHEET_PLUGIN }],
+      icon,
+      testId: `grid.toolbar.${alignKey}.${alignValue}`,
+    });
+  });
+
+export const createAlign = ({ [alignKey]: alignValue }: Partial<AlignState>) => {
+  const alignGroup = createAlignGroupAction(alignValue);
+  const alignActions = createAlignActions(alignValue);
+  return {
+    nodes: [alignGroup, ...alignActions],
+    edges: [
+      { source: 'root', target: 'align' },
+      ...alignActions.map(({ id }) => ({ source: alignGroup.id, target: id })),
+    ],
+  };
+};

package/src/components/SheetToolbar/comment.ts

@@ -0,0 +1,56 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect, useMemo } from 'react';
+
+import { RefArray } from '@dxos/live-object';
+import { createMenuAction } from '@dxos/react-ui-menu';
+
+import { SHEET_PLUGIN } from '../../meta';
+import { commentKey, type CommentKey, type CommentValue, rangeToIndex } from '../../types';
+import { useSheetContext } from '../SheetContext';
+
+export type CommentAction = { key: CommentKey; value: CommentValue; cellContent?: string };
+
+export type CommentState = { commentEnabled: 'comment' | 'no cursor' | 'selection overlaps existing comment' };
+
+export const useCommentState = (state: Partial<CommentState>) => {
+  const { cursorFallbackRange, model } = useSheetContext();
+
+  // TODO(thure): Can this O(n) call be memoized?
+  const overlapsCommentAnchor = useMemo(
+    () =>
+      RefArray.allResolvedTargets(model.sheet.threads ?? [])
+        .filter((thread) => thread.status !== 'resolved')
+        .some((thread) => {
+          if (!cursorFallbackRange) {
+            return false;
+          }
+          return rangeToIndex(model.sheet, cursorFallbackRange) === thread.anchor;
+        }),
+    [cursorFallbackRange, model.sheet],
+  );
+
+  useEffect(() => {
+    state.commentEnabled = !cursorFallbackRange
+      ? 'no cursor'
+      : overlapsCommentAnchor
+        ? 'selection overlaps existing comment'
+        : 'comment';
+  }, [overlapsCommentAnchor, cursorFallbackRange]);
+};
+
+const createCommentAction = (state: Partial<CommentState>) =>
+  createMenuAction<Pick<CommentAction, 'key'>>('comment', {
+    key: commentKey,
+    testId: 'editor.toolbar.comment',
+    icon: 'ph--chat-text--regular',
+    label: [`${state.commentEnabled} label`, { ns: SHEET_PLUGIN }],
+    disabled: state.commentEnabled !== 'comment',
+  });
+
+export const createComment = (state: Partial<CommentState>) => ({
+  nodes: [createCommentAction(state)],
+  edges: [{ source: 'root', target: 'comment' }],
+});

package/src/components/{Toolbar → SheetToolbar}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './Toolbar';
+export * from './SheetToolbar';