@dxos/plugin-sheet 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.8.2-main.fbd8ed0",
+  "version": "0.8.2-staging.7ac8446",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -53,73 +53,67 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^8.0.5",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.8.2-main.fbd8ed0",
-    "@dxos/client": "0.8.2-main.fbd8ed0",
-    "@dxos/async": "0.8.2-main.fbd8ed0",
-    "@dxos/compute": "0.8.2-main.fbd8ed0",
-    "@dxos/debug": "0.8.2-main.fbd8ed0",
-    "@dxos/context": "0.8.2-main.fbd8ed0",
-    "@dxos/echo": "0.8.2-main.fbd8ed0",
-    "@dxos/crypto": "0.8.2-main.fbd8ed0",
-    "@dxos/functions": "0.8.2-main.fbd8ed0",
-    "@dxos/echo-schema": "0.8.2-main.fbd8ed0",
-    "@dxos/invariant": "0.8.2-main.fbd8ed0",
-    "@dxos/keys": "0.8.2-main.fbd8ed0",
-    "@dxos/lit-grid": "0.8.2-main.fbd8ed0",
-    "@dxos/live-object": "0.8.2-main.fbd8ed0",
-    "@dxos/plugin-client": "0.8.2-main.fbd8ed0",
-    "@dxos/plugin-attention": "0.8.2-main.fbd8ed0",
-    "@dxos/log": "0.8.2-main.fbd8ed0",
-    "@dxos/plugin-deck": "0.8.2-main.fbd8ed0",
-    "@dxos/plugin-markdown": "0.8.2-main.fbd8ed0",
-    "@dxos/plugin-graph": "0.8.2-main.fbd8ed0",
-    "@dxos/plugin-script": "0.8.2-main.fbd8ed0",
-    "@dxos/plugin-space": "0.8.2-main.fbd8ed0",
-    "@dxos/plugin-thread": "0.8.2-main.fbd8ed0",
-    "@dxos/plugin-stack": "0.8.2-main.fbd8ed0",
-    "@dxos/react-client": "0.8.2-main.fbd8ed0",
-    "@dxos/react-hooks": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-form": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-attention": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-editor": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-grid": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-menu": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-list": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-stack": "0.8.2-main.fbd8ed0",
-    "@dxos/schema": "0.8.2-main.fbd8ed0",
-    "@dxos/util": "0.8.2-main.fbd8ed0"
+    "@dxos/app-framework": "0.8.2-staging.7ac8446",
+    "@dxos/async": "0.8.2-staging.7ac8446",
+    "@dxos/client": "0.8.2-staging.7ac8446",
+    "@dxos/context": "0.8.2-staging.7ac8446",
+    "@dxos/compute": "0.8.2-staging.7ac8446",
+    "@dxos/debug": "0.8.2-staging.7ac8446",
+    "@dxos/echo-schema": "0.8.2-staging.7ac8446",
+    "@dxos/crypto": "0.8.2-staging.7ac8446",
+    "@dxos/functions": "0.8.2-staging.7ac8446",
+    "@dxos/invariant": "0.8.2-staging.7ac8446",
+    "@dxos/keys": "0.8.2-staging.7ac8446",
+    "@dxos/log": "0.8.2-staging.7ac8446",
+    "@dxos/live-object": "0.8.2-staging.7ac8446",
+    "@dxos/plugin-graph": "0.8.2-staging.7ac8446",
+    "@dxos/plugin-attention": "0.8.2-staging.7ac8446",
+    "@dxos/plugin-deck": "0.8.2-staging.7ac8446",
+    "@dxos/plugin-markdown": "0.8.2-staging.7ac8446",
+    "@dxos/plugin-client": "0.8.2-staging.7ac8446",
+    "@dxos/plugin-script": "0.8.2-staging.7ac8446",
+    "@dxos/plugin-space": "0.8.2-staging.7ac8446",
+    "@dxos/plugin-stack": "0.8.2-staging.7ac8446",
+    "@dxos/plugin-thread": "0.8.2-staging.7ac8446",
+    "@dxos/react-client": "0.8.2-staging.7ac8446",
+    "@dxos/react-hooks": "0.8.2-staging.7ac8446",
+    "@dxos/react-ui-editor": "0.8.2-staging.7ac8446",
+    "@dxos/react-ui-grid": "0.8.2-staging.7ac8446",
+    "@dxos/react-ui-attention": "0.8.2-staging.7ac8446",
+    "@dxos/react-ui-list": "0.8.2-staging.7ac8446",
+    "@dxos/react-ui-form": "0.8.2-staging.7ac8446",
+    "@dxos/react-ui-menu": "0.8.2-staging.7ac8446",
+    "@dxos/react-ui-stack": "0.8.2-staging.7ac8446",
+    "@dxos/util": "0.8.2-staging.7ac8446",
+    "@dxos/schema": "0.8.2-staging.7ac8446"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
     "@lezer/generator": "^1.7.1",
     "@tldraw/indices": "^2.0.0-alpha.14",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "@types/react-window": "^1.8.8",
-    "effect": "3.14.21",
+    "effect": "3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/lit-grid": "0.8.2-main.fbd8ed0",
-    "@dxos/echo-generator": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui": "0.8.2-main.fbd8ed0",
-    "@dxos/random": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-syntax-highlighter": "0.8.2-main.fbd8ed0",
-    "@dxos/storybook-utils": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-types": "0.8.2-main.fbd8ed0",
-    "@dxos/test-utils": "0.8.2-main.fbd8ed0"
+    "@dxos/echo-generator": "0.8.2-staging.7ac8446",
+    "@dxos/random": "0.8.2-staging.7ac8446",
+    "@dxos/lit-grid": "0.8.2-staging.7ac8446",
+    "@dxos/react-ui": "0.8.2-staging.7ac8446",
+    "@dxos/react-ui-types": "0.8.2-staging.7ac8446",
+    "@dxos/react-ui-theme": "0.8.2-staging.7ac8446",
+    "@dxos/storybook-utils": "0.8.2-staging.7ac8446",
+    "@dxos/test-utils": "0.8.2-staging.7ac8446",
+    "@dxos/react-ui-syntax-highlighter": "0.8.2-staging.7ac8446"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "effect": "^3.13.3",
+    "effect": "3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0"
+    "@dxos/react-ui-theme": "0.8.2-staging.7ac8446",
+    "@dxos/react-ui": "0.8.2-staging.7ac8446"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/compute-graph-registry.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, type PluginContext } from '@dxos/app-framework';
+import { contributes, type PluginsContext } from '@dxos/app-framework';
 import { ClientCapabilities } from '@dxos/plugin-client';
 
 import { SheetCapabilities } from './capabilities';
@@ -11,8 +11,8 @@ const isSecure = (protocol: string) => {
   return protocol === 'https:' || protocol === 'wss:';
 };
 
-export default async (context: PluginContext) => {
-  const client = context.getCapability(ClientCapabilities.Client);
+export default async (context: PluginsContext) => {
+  const client = context.requestCapability(ClientCapabilities.Client);
   let remoteFunctionUrl: string | undefined;
   if (client.config.values.runtime?.services?.edge?.url) {
     const url = new URL('/functions', client.config.values.runtime?.services?.edge?.url);

package/src/capabilities/markdown.ts

@@ -2,17 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, type PluginContext } from '@dxos/app-framework';
+import { contributes, type PluginsContext } from '@dxos/app-framework';
 import { getSpace } from '@dxos/client/echo';
 import { MarkdownCapabilities } from '@dxos/plugin-markdown';
 
 import { SheetCapabilities } from './capabilities';
 import { computeGraphFacet } from '../extensions';
 
-export default (context: PluginContext) =>
+export default (context: PluginsContext) =>
   contributes(MarkdownCapabilities.Extensions, [
     ({ document: doc }) => {
-      const computeGraphRegistry = context.getCapability(SheetCapabilities.ComputeGraphRegistry);
+      const computeGraphRegistry = context.requestCapability(SheetCapabilities.ComputeGraphRegistry);
       const space = getSpace(doc);
       if (space) {
         const computeGraph = computeGraphRegistry.getOrCreateGraph(space);

package/src/components/ComputeGraph/compute-graph.stories.tsx

@@ -8,8 +8,8 @@ import { type Meta } from '@storybook/react';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { testFunctionPlugins } from '@dxos/compute/testing';
-import { FunctionType } from '@dxos/functions';
-import { live, useSpace, Filter } from '@dxos/react-client/echo';
+import { FunctionType } from '@dxos/functions/types';
+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';
@@ -44,14 +44,14 @@ const Story = () => {
         setResult({ functions: { standard: f1.length, echo: f2.length } });
       });
 
-      space.db.add(live(FunctionType, { name: 'test', version: '0.0.1', binding: FUNCTION_NAME }));
+      space.db.add(create(FunctionType, { name: 'test', version: '0.0.1', binding: FUNCTION_NAME }));
     }
   }, [space, graph]);
 
   const inputRef = useRef<HTMLInputElement | null>(null);
   const handleTest = async () => {
     if (space && graph) {
-      const { objects } = await space.db.query(Filter.type(FunctionType)).run();
+      const { objects } = await space.db.query(Filter.schema(FunctionType)).run();
       const mapped = graph.mapFunctionBindingToId(text);
       const unmapped = graph.mapFunctionBindingFromId(mapped);
       const internal = graph.mapFormulaToNative(text);

package/src/components/FunctionEditor/FunctionEditor.tsx

@@ -26,7 +26,7 @@ export const FunctionEditor = () => {
   }
 
   return (
-    <div className='flex shrink-0 justify-between items-center px-4 py-1 text-sm bg-toolbarSurface border-bs !border-separator'>
+    <div className='flex shrink-0 justify-between items-center px-4 py-1 text-sm attention-surface border-bs !border-separator'>
       <div className='flex gap-4 items-center'>
         <div className='flex w-16 items-center font-mono'>
           {(range && rangeToA1Notation(range)) || (cursor && addressToA1Notation(cursor))}

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

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

package/src/components/GridSheet/GridSheet.tsx

@@ -6,22 +6,21 @@ import React, {
   useCallback,
   useMemo,
   useRef,
-  useState,
   type FocusEvent,
   type KeyboardEvent,
   type WheelEvent,
   type MouseEvent,
+  useState,
 } from 'react';
 
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { rangeToA1Notation, type CellRange } from '@dxos/compute';
-import { defaultColSize, defaultRowSize } from '@dxos/lit-grid';
 import { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
   closestCell,
+  defaultSizeRow,
   editorKeys,
-  parseCellIndex,
   Grid,
   GridCellEditor,
   type DxGridElement,
@@ -30,6 +29,7 @@ import {
   type EditorKeyHandler,
   type EditorBlurHandler,
   type GridContentProps,
+  parseCellIndex,
 } from '@dxos/react-ui-grid';
 
 import { colLabelCell, rowLabelCell, useSheetModelDxGridProps } from './util';
@@ -58,21 +58,18 @@ const frozen = {
   frozenRowsStart: 1,
 };
 
-const sheetColDefault = {
-  frozenColsStart: { size: 48, readonly: true },
-  grid: { size: defaultColSize, resizeable: true },
-};
 const sheetRowDefault = {
-  frozenRowsStart: { size: defaultRowSize, readonly: true },
-  grid: { size: defaultRowSize, resizeable: true },
+  frozenRowsStart: { size: defaultSizeRow, readonly: true },
+  grid: { size: defaultSizeRow, resizeable: true },
 };
+const sheetColDefault = { frozenColsStart: { size: 48, readonly: true }, grid: { size: 180, resizeable: true } };
 
 export const GridSheet = () => {
   const { t } = useTranslation(SHEET_PLUGIN);
   const { id, model, editing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs, ignoreAttention } =
     useSheetContext();
   // NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us
-  //  a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.
+  // 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 { dispatchPromise: dispatch } = useIntentDispatcher();
@@ -155,7 +152,6 @@ export const GridSheet = () => {
     },
     [editing],
   );
-
   const handleWheel = useCallback(
     (event: WheelEvent) => {
       if (!ignoreAttention && !hasAttention) {
@@ -306,8 +302,7 @@ export const GridSheet = () => {
   useSelectThreadOnCellFocus();
 
   return (
-    // TODO(thure): Why are Table’s and Sheet’s editor boxes off by 1px?
-    <div role='none' className='relative min-bs-0 [&_.cm-editor]:!border-lb [&_.cm-editor]:!border-transparent '>
+    <div role='none' className='relative min-bs-0'>
       <GridCellEditor getCellContent={getCellContent} extension={extension} onBlur={handleBlur} />
       <Grid.Content
         initialCells={initialCells}
@@ -315,19 +310,18 @@ export const GridSheet = () => {
         limitRows={DEFAULT_ROWS}
         columns={columns}
         rows={rows}
-        // TODO(burdon): `col` vs. `column`?
-        columnDefault={sheetColDefault}
-        rowDefault={sheetRowDefault}
-        frozen={frozen}
         onAxisResize={handleAxisResize}
         onSelect={handleSelect}
+        rowDefault={sheetRowDefault}
+        columnDefault={sheetColDefault}
+        frozen={frozen}
         onFocus={handleFocus}
         onWheelCapture={handleWheel}
         onKeyDown={handleKeyDown}
         onContextMenu={handleContextMenu}
         onClick={handleClick}
         overscroll='trap'
-        className='[--dx-grid-base:var(--baseSurface)] [&_.dx-grid]:border-bs [&_.dx-grid]:border-be [&_.dx-grid]:absolute [&_.dx-grid]:inset-0 [&_.dx-grid]:border-separator'
+        className='[--dx-grid-base:var(--surface-bg)] [&_.dx-grid]:border-bs [&_.dx-grid]:absolute [&_.dx-grid]:inset-0 [&_.dx-grid]:border-separator'
         activeRefs={activeRefs}
         ref={setDxGrid}
       />

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

@@ -8,7 +8,7 @@ import { type Meta } from '@storybook/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Client } from '@dxos/client';
-import { createDocAccessor, type AnyLiveObject } from '@dxos/client/echo';
+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';
@@ -32,7 +32,7 @@ const Story = ({ value, ...props }: StoryProps) => {
 
 const AutomergeStory = ({ value, ...props }: StoryProps) => {
   const cell = 'A1';
-  const [object, setObject] = useState<AnyLiveObject<SheetType>>();
+  const [object, setObject] = useState<ReactiveEchoObject<SheetType>>();
   useEffect(() => {
     setTimeout(async () => {
       const client = new Client({ types: [SheetType] });

package/src/components/GridSheet/util.ts

@@ -89,13 +89,13 @@ const gridCellGetter = (model: SheetModel) => {
 
 export const rowLabelCell = (row: number) => ({
   value: rowToA1Notation(row),
-  className: '!bg-toolbarSurface text-subdued text-end pie-1',
+  className: 'text-end pie-1 text-subdued',
   resizeHandle: 'row',
 });
 
 export const colLabelCell = (col: number) => ({
   value: colToA1Notation(col),
-  className: '!bg-toolbarSurface text-subdued',
+  className: 'text-subdued',
   resizeHandle: 'col',
 });
 
@@ -105,11 +105,6 @@ const cellGetter = (model: SheetModel) => {
     switch (plane) {
       case 'grid':
         return getGridCells(nextBounds);
-      case 'fixedStartStart': {
-        return {
-          '0,0': { className: '!bg-toolbarSurface' },
-        };
-      }
       case 'frozenColsStart':
         return [...Array(nextBounds.end.row - nextBounds.start.row)].reduce((acc, _, r0) => {
           const r = nextBounds.start.row + r0;

package/src/components/RangeList/RangeList.tsx

@@ -2,10 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
 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';
@@ -32,7 +32,7 @@ export const RangeList = ({ sheet }: RangeListProps) => {
   return (
     <>
       <h2 className='p-2 text-sm font-semibold'>{t('range list heading')}</h2>
-      <List.Root<Range> items={sheet.ranges} isItem={Schema.is(Range)}>
+      <List.Root<Range> items={sheet.ranges} isItem={S.is(Range)}>
         {({ items: ranges }) =>
           ranges.map((range, i) => (
             <List.Item key={i} item={range} classNames={['p-2', ghostHover]}>

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

@@ -64,7 +64,11 @@ const meta: Meta = {
     withClientProvider({ types: [SheetType], createSpace: true }),
     withComputeGraphDecorator(),
     withTheme,
-    withLayout({ fullscreen: true, classNames: 'grid' }),
+    withLayout({
+      fullscreen: true,
+      tooltips: true,
+      classNames: 'grid',
+    }),
     withAttention,
     // TODO(wittjosiah): Consider whether we should refactor component so story doesn't need to depend on intents.
     withPluginManager({

package/src/components/SheetContainer/SheetContainer.tsx

@@ -14,14 +14,17 @@ import { GridSheet } from '../GridSheet';
 import { SheetProvider } from '../SheetContext';
 import { SheetToolbar } from '../SheetToolbar';
 
-export type SheetContainerProps = {
+export const SheetContainer = ({
+  space,
+  sheet,
+  role,
+  ignoreAttention,
+}: {
   space: Space;
   sheet: SheetType;
   role?: string;
   ignoreAttention?: boolean;
-};
-
-export const SheetContainer = ({ space, sheet, role, ignoreAttention }: SheetContainerProps) => {
+}) => {
   const graph = useComputeGraph(space);
 
   return graph ? (

package/src/components/SheetToolbar/SheetToolbar.stories.tsx

@@ -23,7 +23,7 @@ const meta: Meta = {
   title: 'plugins/plugin-sheet/Toolbar',
   component: SheetToolbar,
   render: DefaultStory,
-  decorators: [withTheme, withLayout()],
+  decorators: [withTheme, withLayout({ tooltips: true })],
   parameters: { translations, layout: 'fullscreen' },
 };
 

package/src/components/SheetToolbar/SheetToolbar.tsx

@@ -4,18 +4,14 @@
 
 import React, { type PropsWithChildren, useCallback } from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { type CompleteCellRange } from '@dxos/compute';
-import { ThreadAction } from '@dxos/plugin-thread/types';
 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';
-import { type SheetModel } from '../../model';
-import { useSheetContext } from '../SheetContext';
 
 //
 // Root
@@ -23,16 +19,11 @@ import { useSheetContext } from '../SheetContext';
 
 export type SheetToolbarProps = ThemedClassName<PropsWithChildren<{ attendableId?: string }>>;
 
-const createToolbarActions = (
-  model: SheetModel,
-  state: ToolbarState,
-  onComment: (cellContent: string, cursor: string) => void,
-  cursorFallbackRange?: CompleteCellRange,
-) => {
-  const align = createAlign(model, state, cursorFallbackRange);
-  const style = createStyle(model, state, cursorFallbackRange);
+const createToolbarActions = (state: ToolbarState) => {
+  const align = createAlign(state);
+  const style = createStyle(state);
   const gap = createGapSeparator();
-  const comment = createComment(model, state, onComment, cursorFallbackRange);
+  const comment = createComment(state);
   return {
     nodes: [...align.nodes, ...style.nodes, ...gap.nodes, ...comment.nodes],
     edges: [...align.edges, ...style.edges, ...gap.edges, ...comment.edges],
@@ -40,33 +31,17 @@ const createToolbarActions = (
 };
 
 export const SheetToolbar = ({ attendableId, classNames }: SheetToolbarProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { model, cursorFallbackRange } = useSheetContext();
   const state = useToolbarState({});
   useAlignState(state);
   useStyleState(state);
   useCommentState(state);
 
-  const handleComment = useCallback(
-    (name: string, cursor: string) =>
-      dispatch(
-        createIntent(ThreadAction.Create, {
-          cursor,
-          name,
-          subject: model.sheet,
-        }),
-      ),
-    [model.sheet, dispatch],
-  );
-
-  const actionsCreator = useCallback(
-    () => createToolbarActions(model, state, handleComment, cursorFallbackRange),
-    [model, state, handleComment, cursorFallbackRange],
-  );
+  const actionsCreator = useCallback(() => createToolbarActions(state), [state]);
   const menu = useMenuActions(actionsCreator);
+  const handleAction = useToolbarAction(state);
 
   return (
-    <MenuProvider {...menu} attendableId={attendableId}>
+    <MenuProvider {...menu} attendableId={attendableId} onAction={handleAction}>
       <ToolbarMenu classNames={classNames} />
     </MenuProvider>
   );

package/src/components/SheetToolbar/align.ts

@@ -4,13 +4,11 @@
 
 import { useEffect } from 'react';
 
-import { type CompleteCellRange, inRange } from '@dxos/compute';
+import { inRange } from '@dxos/compute';
 import { createMenuAction, createMenuItemGroup, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
-import { type ToolbarState } from './useToolbarState';
 import { SHEET_PLUGIN } from '../../meta';
-import { type SheetModel } from '../../model';
-import { type AlignKey, alignKey, type AlignValue, rangeFromIndex, rangeToIndex } from '../../types';
+import { type AlignKey, alignKey, type AlignValue, rangeFromIndex } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
 export type AlignAction = { key: AlignKey; value: AlignValue };
@@ -45,49 +43,21 @@ const createAlignGroupAction = (value?: AlignValue) =>
     value: `${alignKey}--${value}`,
   } as ToolbarMenuActionGroupProperties);
 
-const createAlignActions = (model: SheetModel, state: ToolbarState, cursorFallbackRange?: CompleteCellRange) =>
+const createAlignActions = (value?: AlignValue) =>
   Object.entries(aligns).map(([alignValue, icon]) => {
-    return createMenuAction<AlignAction>(
-      `${alignKey}--${alignValue}`,
-      () => {
-        if (!cursorFallbackRange) {
-          return;
-        }
-        const index =
-          model.sheet.ranges?.findIndex(
-            (range) =>
-              range.key === alignKey && inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),
-          ) ?? -1;
-        const nextRangeEntity = {
-          range: rangeToIndex(model.sheet, cursorFallbackRange),
-          key: alignKey,
-          value: alignValue as AlignValue,
-        };
-        if (index < 0) {
-          model.sheet.ranges?.push(nextRangeEntity);
-          state[alignKey] = nextRangeEntity.value;
-        } else if (model.sheet.ranges![index].value === nextRangeEntity.value) {
-          model.sheet.ranges?.splice(index, 1);
-          state[alignKey] = undefined;
-        } else {
-          model.sheet.ranges?.splice(index, 1, nextRangeEntity);
-          state[alignKey] = nextRangeEntity.value;
-        }
-      },
-      {
-        key: alignKey,
-        value: alignValue as AlignValue,
-        checked: state[alignKey] === alignValue,
-        label: [`range value ${alignValue} label`, { ns: SHEET_PLUGIN }],
-        icon,
-        testId: `grid.toolbar.${alignKey}.${alignValue}`,
-      },
-    );
+    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 = (model: SheetModel, state: ToolbarState, cursorFallbackRange?: CompleteCellRange) => {
-  const alignGroup = createAlignGroupAction(state[alignKey]);
-  const alignActions = createAlignActions(model, state, cursorFallbackRange);
+export const createAlign = ({ [alignKey]: alignValue }: Partial<AlignState>) => {
+  const alignGroup = createAlignGroupAction(alignValue);
+  const alignActions = createAlignActions(alignValue);
   return {
     nodes: [alignGroup, ...alignActions],
     edges: [