@dxos/plugin-sheet 0.8.4-main.7ace549 → 0.8.4-main.937b3ca

package/src/components/GridSheet/GridSheet.tsx

@@ -13,8 +13,7 @@ import React, {
   useState,
 } from 'react';
 
-import { createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/react';
 import { type CellRange, rangeToA1Notation } from '@dxos/compute';
 import { defaultColSize, defaultRowSize } from '@dxos/lit-grid';
 import { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
@@ -36,7 +35,7 @@ import {
 import { type RangeController, rangeExtension, sheetExtension } from '../../extensions';
 import { useSelectThreadOnCellFocus, useUpdateFocusedCellOnThreadSelection } from '../../integrations';
 import { meta } from '../../meta';
-import { DEFAULT_COLS, DEFAULT_ROWS, SheetAction } from '../../types';
+import { DEFAULT_COLS, DEFAULT_ROWS, SheetOperation } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
 import { colLabelCell, rowLabelCell, useSheetModelDxGridProps } from './util';
@@ -77,7 +76,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 { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const rangeController = useRef<RangeController>(null);
   const { hasAttention } = useAttention(id);
 
@@ -266,24 +265,20 @@ export const GridSheet = () => {
       switch (operation) {
         case 'insert-before':
         case 'insert-after':
-          return dispatch(
-            createIntent(SheetAction.InsertAxis, {
-              model,
-              axis: contextMenuAxis,
-              index: contextMenuOpen![contextMenuAxis] + (operation === 'insert-before' ? 0 : 1),
-            }),
-          );
+          return invokePromise(SheetOperation.InsertAxis, {
+            model,
+            axis: contextMenuAxis,
+            index: contextMenuOpen![contextMenuAxis] + (operation === 'insert-before' ? 0 : 1),
+          });
         case 'drop':
-          return dispatch(
-            createIntent(SheetAction.DropAxis, {
-              model,
-              axis: contextMenuAxis,
-              axisIndex: model.sheet[contextMenuAxis === 'row' ? 'rows' : 'columns'][contextMenuOpen![contextMenuAxis]],
-            }),
-          );
+          return invokePromise(SheetOperation.DropAxis, {
+            model,
+            axis: contextMenuAxis,
+            axisIndex: model.sheet[contextMenuAxis === 'row' ? 'rows' : 'columns'][contextMenuOpen![contextMenuAxis]],
+          });
       }
     },
-    [contextMenuAxis, contextMenuOpen, model, dispatch],
+    [contextMenuAxis, contextMenuOpen, model, invokePromise],
   );
 
   const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);

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

@@ -8,11 +8,12 @@ import React, { useMemo, useState } from 'react';
 import { Client } from '@dxos/client';
 import { defaultFunctions } from '@dxos/compute';
 import { getRegisteredFunctionNames } from '@dxos/compute/testing';
+import { Obj } from '@dxos/echo';
 import { createDocAccessor } from '@dxos/echo-db';
 import { useAsyncEffect } from '@dxos/react-hooks';
 import { withTheme } from '@dxos/react-ui/testing';
-import { automerge } from '@dxos/react-ui-editor';
 import { CellEditor, type CellEditorProps } from '@dxos/react-ui-grid';
+import { automerge } from '@dxos/ui-editor';
 
 import { sheetExtension } from '../../extensions';
 import { Sheet } from '../../types';
@@ -37,8 +38,10 @@ const AutomergeStory = ({ value, ...props }: CellEditorProps) => {
     const space = await client.spaces.create();
 
     const sheet = Sheet.make();
-    sheet.name = 'Test';
-    sheet.cells[cell] = { value };
+    Obj.change(sheet, (s) => {
+      s.name = 'Test';
+      s.cells[cell] = { value };
+    });
     space.db.add(sheet);
     setObject(sheet);
   }, [value]);

package/src/components/GridSheet/util.ts

@@ -19,7 +19,7 @@ import {
   commentedClassName,
   rowToA1Notation,
 } from '@dxos/react-ui-grid';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { type SheetModel } from '../../model';
 import { cellClassNameForRange, rangeFromIndex } from '../../types';

package/src/components/RangeList/RangeList.tsx

@@ -6,9 +6,10 @@ import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
 import { rangeToA1Notation } from '@dxos/compute';
+import { Obj } from '@dxos/echo';
 import { Callout, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
-import { ghostHover } from '@dxos/react-ui-theme';
+import { ghostHover } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 import { rangeFromIndex } from '../../types';
@@ -25,7 +26,9 @@ export const RangeList = ({ sheet }: RangeListProps) => {
   const handleDeleteRange = useCallback(
     (range: Sheet.Range) => {
       const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
-      sheet.ranges.splice(index, 1);
+      Obj.change(sheet, (s) => {
+        s.ranges.splice(index, 1);
+      });
     },
     [sheet],
   );

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

@@ -3,21 +3,22 @@
 //
 
 import { type Meta } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capabilities, IntentPlugin, contributes, createResolver } from '@dxos/app-framework';
+import { Capability, Common } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj } from '@dxos/echo';
-import { GraphPlugin } from '@dxos/plugin-graph';
+import { OperationResolver } from '@dxos/operation';
+import { corePlugins } from '@dxos/plugin-testing';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { AttendableContainer } from '@dxos/react-ui-attention';
-import { withAttention } from '@dxos/react-ui-attention/testing';
 
 import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
 import { translations } from '../../translations';
-import { Sheet, SheetAction } from '../../types';
+import { Sheet, SheetOperation } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
 import { RangeList } from '../RangeList';
 
@@ -28,22 +29,24 @@ const meta = {
   component: SheetContainer,
   decorators: [
     withTheme,
+    withLayout({ layout: 'fullscreen' }),
     withClientProvider({ types: [Sheet.Sheet], createSpace: true }),
     withComputeGraphDecorator(),
-    withAttention,
     // TODO(wittjosiah): Consider whether we should refactor component so story doesn't need to depend on intents.
     withPluginManager({
-      plugins: [IntentPlugin(), GraphPlugin()],
+      plugins: [...corePlugins()],
       capabilities: [
-        contributes(
-          Capabilities.IntentResolver,
-          createResolver({
-            intent: SheetAction.DropAxis,
-            resolve: ({ model, axis, axisIndex }) => {
-              model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
-            },
+        Capability.contributes(Common.Capability.OperationResolver, [
+          OperationResolver.make({
+            operation: SheetOperation.DropAxis,
+            handler: ({ model, axis, axisIndex }) =>
+              Effect.sync(() => {
+                model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
+                // Return stub output for story purposes.
+                return { axis, axisIndex, index: 0, axisMeta: null, values: [] };
+              }),
           }),
-        ),
+        ]),
       ],
     }),
   ],
@@ -65,25 +68,42 @@ export const Default = () => {
 
   return (
     <AttendableContainer id={Obj.getDXN(sheet).toString()} classNames='contents'>
-      <SheetContainer space={space} sheet={sheet} role='story' ignoreAttention />
+      <SheetContainer role='article' space={space} subject={sheet} ignoreAttention />
     </AttendableContainer>
   );
 };
 
+export const Section = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
+  if (!sheet || !space) {
+    return null;
+  }
+
+  return (
+    <div className='is-full flex justify-center'>
+      <div className='is-[40rem]'>
+        <AttendableContainer id={Obj.getDXN(sheet).toString()} classNames='contents'>
+          <SheetContainer role='section' space={space} subject={sheet} ignoreAttention />
+        </AttendableContainer>
+      </div>
+    </div>
+  );
+};
+
 export const Spec = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph, {
-    cells: { A1: { value: 'Ready' } },
-  });
+  const sheet = useTestSheet(space, graph, { cells: { A1: { value: 'Ready' } } });
   if (!sheet || !space) {
     return null;
   }
 
   return (
     <AttendableContainer id={Obj.getDXN(sheet).toString()} classNames='contents'>
-      <div role='none' className='grid grid-rows-[66%_33%] bs-full grid-cols-1'>
-        <SheetContainer space={space} sheet={sheet} role='story' ignoreAttention />
+      <div role='none' className='is-full grid grid-cols-[1fr_20rem]'>
+        <SheetContainer role='article' space={space} subject={sheet} ignoreAttention />
         <div role='none' data-testid='grid.range-list'>
           <RangeList sheet={sheet} />
         </div>

package/src/components/SheetContainer/SheetContainer.tsx

@@ -2,11 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import React, { Fragment } from 'react';
 
+import { type SurfaceComponentProps } from '@dxos/app-framework/react';
 import { Obj } from '@dxos/echo';
 import { type Space } from '@dxos/react-client/echo';
-import { StackItem } from '@dxos/react-ui-stack';
+import { Layout, type LayoutFlexProps } from '@dxos/react-ui-mosaic';
 
 import { type Sheet } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
@@ -15,27 +16,33 @@ import { GridSheet } from '../GridSheet';
 import { SheetProvider } from '../SheetContext';
 import { SheetToolbar } from '../SheetToolbar';
 
-export type SheetContainerProps = {
-  space: Space;
-  sheet: Sheet.Sheet;
-  role?: string;
-  ignoreAttention?: boolean;
-};
+export type SheetContainerProps = SurfaceComponentProps<
+  Sheet.Sheet,
+  {
+    space: Space;
+    ignoreAttention?: boolean;
+  }
+>;
 
-export const SheetContainer = ({ space, sheet, role, ignoreAttention }: SheetContainerProps) => {
+export const SheetContainer = ({ role, subject: sheet, space, ignoreAttention }: SheetContainerProps) => {
   const graph = useComputeGraph(space);
+  if (!graph) {
+    return null;
+  }
+
+  const Root = role === 'section' ? Container : Fragment;
 
-  return graph ? (
+  return (
     <SheetProvider sheet={sheet} graph={graph} ignoreAttention={ignoreAttention}>
-      <StackItem.Content
-        toolbar
-        statusbar
-        classNames={[role === 'section' && 'aspect-video', role === 'story' && 'bs-full']}
-      >
-        <SheetToolbar id={Obj.getDXN(sheet).toString()} />
-        <GridSheet />
-        <FunctionEditor />
-      </StackItem.Content>
+      <Root>
+        <Layout.Main toolbar statusbar>
+          <SheetToolbar id={Obj.getDXN(sheet).toString()} />
+          <GridSheet />
+          <FunctionEditor />
+        </Layout.Main>
+      </Root>
     </SheetProvider>
-  ) : null;
+  );
 };
+
+const Container = (props: LayoutFlexProps) => <Layout.Flex {...props} classNames='aspect-square' />;

package/src/components/SheetContext/SheetContext.tsx

@@ -56,12 +56,12 @@ export const useSheetContext = (): SheetContextValue => {
 };
 
 const SheetProviderImpl = ({
+  __gridScope,
+  children,
+  ignoreAttention,
   model,
   onInfo,
-  ignoreAttention,
-  children,
-  __gridScope,
-}: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'onInfo' | 'model' | 'ignoreAttention'>>>) => {
+}: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'ignoreAttention' | 'model' | 'onInfo'>>>) => {
   const { id, editing, setEditing } = useGridContext('SheetProvider', __gridScope);
 
   const [cursor, setCursorInternal] = useState<CellAddress>();

package/src/components/SheetToolbar/SheetToolbar.tsx

@@ -2,8 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Atom } from '@effect-atom/atom-react';
-import React, { type PropsWithChildren, useMemo } from 'react';
+import { Atom, type Registry, RegistryContext } from '@effect-atom/atom-react';
+import React, { type PropsWithChildren, useContext, useMemo } from 'react';
 
 import { useAppGraph } from '@dxos/app-framework/react';
 import { type CompleteCellRange } from '@dxos/compute';
@@ -11,7 +11,6 @@ import {
   type ActionGraphProps,
   MenuProvider,
   ToolbarMenu,
-  atomFromSignal,
   createGapSeparator,
   useMenuActions,
 } from '@dxos/react-ui-menu';
@@ -21,17 +20,28 @@ import { useSheetContext } from '../SheetContext';
 
 import { createAlign, useAlignState } from './align';
 import { createStyle, useStyleState } from './style';
-import { type ToolbarState, useToolbarState } from './useToolbarState';
+import { type ToolbarStateAtom, useToolbarState } from './useToolbarState';
 
-const createToolbarActions = (
-  model: SheetModel,
-  state: ToolbarState,
-  cursorFallbackRange?: CompleteCellRange,
-  customActions?: Atom.Atom<ActionGraphProps>,
-): Atom.Atom<ActionGraphProps> => {
+type ToolbarActionsContext = {
+  model: SheetModel;
+  stateAtom: ToolbarStateAtom;
+  registry: Registry.Registry;
+  cursorFallbackRange?: CompleteCellRange;
+  customActions?: Atom.Atom<ActionGraphProps>;
+};
+
+const createToolbarActions = ({
+  model,
+  stateAtom,
+  registry,
+  cursorFallbackRange,
+  customActions,
+}: ToolbarActionsContext): Atom.Atom<ActionGraphProps> => {
   return Atom.make((get) => {
-    const align = get(atomFromSignal(() => createAlign(model, state, cursorFallbackRange)));
-    const style = get(atomFromSignal(() => createStyle(model, state, cursorFallbackRange)));
+    const state = get(stateAtom);
+    const context = { model, state, stateAtom, registry, cursorFallbackRange };
+    const align = createAlign(context);
+    const style = createStyle(context);
     const gap = createGapSeparator();
 
     const graph: ActionGraphProps = {
@@ -53,9 +63,10 @@ export type SheetToolbarProps = PropsWithChildren<{ id: string }>;
 
 export const SheetToolbar = ({ id }: SheetToolbarProps) => {
   const { model, cursorFallbackRange } = useSheetContext();
-  const state = useToolbarState({});
-  useAlignState(state);
-  useStyleState(state);
+  const stateAtom = useToolbarState({});
+  const registry = useContext(RegistryContext);
+  useAlignState(stateAtom);
+  useStyleState(stateAtom);
 
   const { graph } = useAppGraph();
   const customActions = useMemo(() => {
@@ -67,11 +78,11 @@ export const SheetToolbar = ({ id }: SheetToolbarProps) => {
         edges: nodes.map((node) => ({ source: 'root', target: node.id })),
       };
     });
-  }, [graph]);
+  }, [graph, id]);
 
   const actionsCreator = useMemo(
-    () => createToolbarActions(model, state, cursorFallbackRange, customActions),
-    [model, state, cursorFallbackRange, customActions],
+    () => createToolbarActions({ model, stateAtom, registry, cursorFallbackRange, customActions }),
+    [model, stateAtom, registry, cursorFallbackRange, customActions],
   );
   const menu = useMenuActions(actionsCreator);
 

package/src/components/SheetToolbar/align.ts

@@ -2,17 +2,24 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useEffect } from 'react';
+import { type Registry, RegistryContext } from '@effect-atom/atom-react';
+import { useContext, useEffect } from 'react';
 
 import { type CompleteCellRange, inRange } from '@dxos/compute';
-import { type ToolbarMenuActionGroupProperties, createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
+import { Obj } from '@dxos/echo';
+import {
+  type ActionGraphProps,
+  type ToolbarMenuActionGroupProperties,
+  createMenuAction,
+  createMenuItemGroup,
+} from '@dxos/react-ui-menu';
 
 import { meta } from '../../meta';
 import { type SheetModel } from '../../model';
 import { type AlignKey, type AlignValue, alignKey, rangeFromIndex, rangeToIndex } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
-import { type ToolbarState } from './useToolbarState';
+import { type ToolbarState, type ToolbarStateAtom } from './useToolbarState';
 
 export type AlignAction = { key: AlignKey; value: AlignValue };
 
@@ -24,18 +31,21 @@ const aligns: Record<AlignValue, string> = {
   end: 'ph--text-align-right--regular',
 };
 
-export const useAlignState = (state: Partial<AlignState>) => {
+export const useAlignState = (stateAtom: ToolbarStateAtom) => {
+  const registry = useContext(RegistryContext);
   const { cursor, model } = useSheetContext();
   useEffect(() => {
     // TODO(thure): Can this O(n) call be memoized?
-    state[alignKey] = (
+    const alignValue = (
       cursor
         ? model.sheet.ranges?.findLast(
             ({ range, key }) => key === alignKey && inRange(rangeFromIndex(model.sheet, range), cursor),
           )?.value
         : undefined
     ) as AlignValue | undefined;
-  }, [cursor, model.sheet]);
+    const prev = registry.get(stateAtom);
+    registry.set(stateAtom, { ...prev, [alignKey]: alignValue });
+  }, [cursor, model.sheet, registry, stateAtom]);
 };
 
 const createAlignGroupAction = (value?: AlignValue) =>
@@ -46,7 +56,15 @@ const createAlignGroupAction = (value?: AlignValue) =>
     value: `${alignKey}--${value}`,
   } as ToolbarMenuActionGroupProperties);
 
-const createAlignActions = (model: SheetModel, state: ToolbarState, cursorFallbackRange?: CompleteCellRange) =>
+type AlignActionsContext = {
+  model: SheetModel;
+  state: ToolbarState;
+  stateAtom: ToolbarStateAtom;
+  registry: Registry.Registry;
+  cursorFallbackRange?: CompleteCellRange;
+};
+
+const createAlignActions = ({ model, state, stateAtom, registry, cursorFallbackRange }: AlignActionsContext) =>
   Object.entries(aligns).map(([alignValue, icon]) => {
     return createMenuAction<AlignAction>(
       `${alignKey}--${alignValue}`,
@@ -64,15 +82,22 @@ const createAlignActions = (model: SheetModel, state: ToolbarState, cursorFallba
           key: alignKey,
           value: alignValue as AlignValue,
         };
+        const currentState = registry.get(stateAtom);
         if (index < 0) {
-          model.sheet.ranges?.push(nextRangeEntity);
-          state[alignKey] = nextRangeEntity.value;
+          Obj.change(model.sheet, (s) => {
+            s.ranges?.push(nextRangeEntity);
+          });
+          registry.set(stateAtom, { ...currentState, [alignKey]: nextRangeEntity.value });
         } else if (model.sheet.ranges![index].value === nextRangeEntity.value) {
-          model.sheet.ranges?.splice(index, 1);
-          state[alignKey] = undefined;
+          Obj.change(model.sheet, (s) => {
+            s.ranges?.splice(index, 1);
+          });
+          registry.set(stateAtom, { ...currentState, [alignKey]: undefined });
         } else {
-          model.sheet.ranges?.splice(index, 1, nextRangeEntity);
-          state[alignKey] = nextRangeEntity.value;
+          Obj.change(model.sheet, (s) => {
+            s.ranges?.splice(index, 1, nextRangeEntity);
+          });
+          registry.set(stateAtom, { ...currentState, [alignKey]: nextRangeEntity.value });
         }
       },
       {
@@ -86,9 +111,9 @@ const createAlignActions = (model: SheetModel, state: ToolbarState, cursorFallba
     );
   });
 
-export const createAlign = (model: SheetModel, state: ToolbarState, cursorFallbackRange?: CompleteCellRange) => {
-  const alignGroup = createAlignGroupAction(state[alignKey]);
-  const alignActions = createAlignActions(model, state, cursorFallbackRange);
+export const createAlign = (context: AlignActionsContext): ActionGraphProps => {
+  const alignGroup = createAlignGroupAction(context.state[alignKey]);
+  const alignActions = createAlignActions(context);
   return {
     nodes: [alignGroup, ...alignActions],
     edges: [

package/src/components/SheetToolbar/style.ts

@@ -2,16 +2,25 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useEffect } from 'react';
+import { type Registry, RegistryContext } from '@effect-atom/atom-react';
+import { useContext, useEffect } from 'react';
 
 import { type CompleteCellRange, inRange } from '@dxos/compute';
-import { type ToolbarMenuActionGroupProperties, createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
+import { Obj } from '@dxos/echo';
+import {
+  type ActionGraphProps,
+  type ToolbarMenuActionGroupProperties,
+  createMenuAction,
+  createMenuItemGroup,
+} from '@dxos/react-ui-menu';
 
 import { meta } from '../../meta';
 import { type SheetModel } from '../../model';
 import { type StyleKey, type StyleValue, rangeFromIndex, rangeToIndex } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
+import { type ToolbarState, type ToolbarStateAtom } from './useToolbarState';
+
 export type StyleState = Partial<Record<StyleValue, boolean>>;
 
 export type StyleAction = { key: StyleKey; value: StyleValue };
@@ -21,22 +30,30 @@ const styles: Record<StyleValue, string> = {
   softwrap: 'ph--paragraph--regular',
 };
 
-export const useStyleState = (state: StyleState) => {
+export const useStyleState = (stateAtom: ToolbarStateAtom) => {
+  const registry = useContext(RegistryContext);
   const { cursorFallbackRange, model } = useSheetContext();
 
   useEffect(() => {
-    state.highlight = false;
-    state.softwrap = false;
+    let highlight = false;
+    let softwrap = false;
     if (cursorFallbackRange && model.sheet.ranges) {
       model.sheet.ranges
         .filter(
           ({ range, key }) => key === 'style' && inRange(rangeFromIndex(model.sheet, range), cursorFallbackRange.from),
         )
         .forEach(({ value }) => {
-          state[value as StyleValue] = true;
+          if (value === 'highlight') {
+            highlight = true;
+          }
+          if (value === 'softwrap') {
+            softwrap = true;
+          }
         });
     }
-  }, [cursorFallbackRange, model.sheet]);
+    const prev = registry.get(stateAtom);
+    registry.set(stateAtom, { ...prev, highlight, softwrap });
+  }, [cursorFallbackRange, model.sheet, registry, stateAtom]);
 };
 
 const createStyleGroup = (state: StyleState) => {
@@ -49,7 +66,15 @@ const createStyleGroup = (state: StyleState) => {
   } as ToolbarMenuActionGroupProperties);
 };
 
-const createStyleActions = (model: SheetModel, state: StyleState, cursorFallbackRange?: CompleteCellRange) =>
+type StyleActionsContext = {
+  model: SheetModel;
+  state: ToolbarState;
+  stateAtom: ToolbarStateAtom;
+  registry: Registry.Registry;
+  cursorFallbackRange?: CompleteCellRange;
+};
+
+const createStyleActions = ({ model, state, stateAtom, registry, cursorFallbackRange }: StyleActionsContext) =>
   Object.entries(styles).map(([styleValue, icon]) => {
     return createMenuAction<StyleAction>(
       `style--${styleValue}`,
@@ -67,6 +92,7 @@ const createStyleActions = (model: SheetModel, state: StyleState, cursorFallback
           key: 'style',
           value: styleValue as StyleValue,
         };
+        const currentState = registry.get(stateAtom);
         if (
           model.sheet.ranges
             .filter(
@@ -77,12 +103,16 @@ const createStyleActions = (model: SheetModel, state: StyleState, cursorFallback
         ) {
           // this value should be unset
           if (index >= 0) {
-            model.sheet.ranges?.splice(index, 1);
+            Obj.change(model.sheet, (s) => {
+              s.ranges?.splice(index, 1);
+            });
           }
-          state[nextRangeEntity.value] = false;
+          registry.set(stateAtom, { ...currentState, [nextRangeEntity.value]: false });
         } else {
-          model.sheet.ranges?.push(nextRangeEntity);
-          state[nextRangeEntity.value] = true;
+          Obj.change(model.sheet, (s) => {
+            s.ranges?.push(nextRangeEntity);
+          });
+          registry.set(stateAtom, { ...currentState, [nextRangeEntity.value]: true });
         }
       },
       {
@@ -95,9 +125,9 @@ const createStyleActions = (model: SheetModel, state: StyleState, cursorFallback
     );
   });
 
-export const createStyle = (model: SheetModel, state: StyleState, cursorFallbackRange?: CompleteCellRange) => {
-  const styleGroupAction = createStyleGroup(state);
-  const styleActions = createStyleActions(model, state, cursorFallbackRange);
+export const createStyle = (context: StyleActionsContext): ActionGraphProps => {
+  const styleGroupAction = createStyleGroup(context.state);
+  const styleActions = createStyleActions(context);
   return {
     nodes: [styleGroupAction, ...styleActions],
     edges: [