@dxos/plugin-sheet 0.8.4-main.28f8d3d → 0.8.4-main.2c6827d

package/src/components/GridSheet/GridSheet.tsx

@@ -13,7 +13,8 @@ import React, {
   useState,
 } from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } 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';
@@ -34,7 +35,7 @@ import {
 
 import { type RangeController, rangeExtension, sheetExtension } from '../../extensions';
 import { useSelectThreadOnCellFocus, useUpdateFocusedCellOnThreadSelection } from '../../integrations';
-import { SHEET_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { DEFAULT_COLS, DEFAULT_ROWS, SheetAction } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
@@ -60,16 +61,16 @@ const frozen = {
 };
 
 const sheetColDefault = {
-  frozenColsStart: { size: 48, readonly: true },
+  frozenColsStart: { size: 48, readonly: true, focusUnfurl: false },
   grid: { size: defaultColSize, resizeable: true },
 };
 const sheetRowDefault = {
-  frozenRowsStart: { size: defaultRowSize, readonly: true },
+  frozenRowsStart: { size: defaultRowSize, readonly: true, focusUnfurl: false },
   grid: { size: defaultRowSize, resizeable: true },
 };
 
 export const GridSheet = () => {
-  const { t } = useTranslation(SHEET_PLUGIN);
+  const { t } = useTranslation(meta.id);
   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
@@ -77,7 +78,7 @@ export const GridSheet = () => {
   const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
   const [extraplanarFocus, setExtraplanarFocus] = useState<DxGridPosition | null>(null);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const rangeController = useRef<RangeController>();
+  const rangeController = useRef<RangeController>(null);
   const { hasAttention } = useAttention(id);
 
   const handleFocus = useCallback(
@@ -172,12 +173,20 @@ export const GridSheet = () => {
         case 'frozenRowsStart':
           return dxGrid?.setSelection({
             start: { col: pos.col, row: 0, plane: 'grid' },
-            end: { col: pos.col, row: model.sheet.rows.length - 1, plane: 'grid' },
+            end: {
+              col: pos.col,
+              row: model.sheet.rows.length - 1,
+              plane: 'grid',
+            },
           });
         case 'frozenColsStart':
           return dxGrid?.setSelection({
             start: { row: pos.row, col: 0, plane: 'grid' },
-            end: { row: pos.row, col: model.sheet.columns.length - 1, plane: 'grid' },
+            end: {
+              row: pos.row,
+              col: model.sheet.columns.length - 1,
+              plane: 'grid',
+            },
           });
       }
     },
@@ -279,9 +288,12 @@ export const GridSheet = () => {
 
   const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
 
-  const extension = useMemo(
+  const extensions = useMemo(
     () => [
-      editorKeys({ onClose: handleClose, ...(editing?.initialContent && { onNav: handleClose }) }),
+      editorKeys({
+        onClose: handleClose,
+        ...(editing?.initialContent && { onNav: handleClose }),
+      }),
       sheetExtension({ functions: model.graph.getFunctions() }),
       rangeExtension({
         onInit: (fn) => (rangeController.current = fn),
@@ -308,8 +320,8 @@ export const GridSheet = () => {
 
   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 '>
-      <GridCellEditor getCellContent={getCellContent} extension={extension} onBlur={handleBlur} />
+    <div role='none' className='relative min-bs-0 [&_.cm-editor]:!border-lb [&_.cm-editor]:!border-transparent'>
+      <GridCellEditor getCellContent={getCellContent} extensions={extensions} onBlur={handleBlur} />
       <Grid.Content
         initialCells={initialCells}
         limitColumns={DEFAULT_COLS}

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

@@ -2,53 +2,48 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-import React, { useEffect, useMemo, useState } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo, useState } from 'react';
 
 import { Client } from '@dxos/client';
 import { createDocAccessor } from '@dxos/client/echo';
 import { defaultFunctions } from '@dxos/compute';
 import { getRegisteredFunctionNames } from '@dxos/compute/testing';
+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 { withTheme } from '@dxos/storybook-utils';
 
 import { sheetExtension } from '../../extensions';
-import { SheetType, createSheet } from '../../types';
-
-type StoryProps = CellEditorProps;
+import { Sheet } from '../../types';
 
-const Story = ({ value, ...props }: StoryProps) => {
-  const extension = useMemo(() => {
+const DefaultStory = ({ value, ...props }: CellEditorProps) => {
+  const extensions = useMemo(() => {
     const functionNames = getRegisteredFunctionNames();
     const functions = defaultFunctions.filter(({ name }) => functionNames.includes(name));
     return [sheetExtension({ functions })];
   }, []);
 
-  return <CellEditor {...props} value={value} extension={extension} />;
+  return <CellEditor {...props} value={value} extensions={extensions} />;
 };
 
-const AutomergeStory = ({ value, ...props }: StoryProps) => {
+const AutomergeStory = ({ value, ...props }: CellEditorProps) => {
   const cell = 'A1';
-  const [object, setObject] = useState<SheetType>();
-  useEffect(() => {
-    setTimeout(async () => {
-      const client = new Client({ types: [SheetType] });
-      await client.initialize();
-      await client.halo.createIdentity();
-      const space = await client.spaces.create();
-
-      const sheet = createSheet();
-      sheet.name = 'Test';
-      sheet.cells[cell] = { value };
-      space.db.add(sheet);
-      setObject(sheet);
-    });
+  const [object, setObject] = useState<Sheet.Sheet>();
+  useAsyncEffect(async () => {
+    const client = new Client({ types: [Sheet.Sheet] });
+    await client.initialize();
+    await client.halo.createIdentity();
+    const space = await client.spaces.create();
+
+    const sheet = Sheet.make();
+    sheet.name = 'Test';
+    sheet.cells[cell] = { value };
+    space.db.add(sheet);
+    setObject(sheet);
   }, [value]);
 
-  const extension = useMemo(() => {
+  const extensions = useMemo(() => {
     if (!object) {
       return [];
     }
@@ -59,35 +54,38 @@ const AutomergeStory = ({ value, ...props }: StoryProps) => {
     return [automerge(accessor), sheetExtension({ functions })];
   }, [object]);
 
-  return <CellEditor {...props} value={value} extension={extension} />;
+  return <CellEditor {...props} value={value} extensions={extensions} />;
 };
 
-export const Default = {};
+const meta = {
+  title: 'plugins/plugin-sheet/CellEditor',
+
+  decorators: [withTheme],
+  component: CellEditor,
+  render: DefaultStory,
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const AutoComplete = {
+export const Default: Story = {};
+
+export const AutoComplete: Story = {
   args: {
     value: '=SUM',
   },
 };
 
-export const Formatting = {
+export const Formatting: Story = {
   args: {
     value: '=SUM(A1:A2, 100, TRUE, "100", SUM(A1:A2, B1:B2))',
   },
 };
 
-export const Automerge = {
-  render: (args: StoryProps) => <AutomergeStory {...args} />,
+export const Automerge: Story = {
+  render: AutomergeStory,
   args: {
     value: '=SUM(A1:A2, 100, TRUE, "100", SUM(A1:A2, B1:B2))',
   },
 };
-
-const meta: Meta = {
-  title: 'plugins/plugin-sheet/CellEditor',
-  component: CellEditor,
-  decorators: [withTheme],
-  render: (args: StoryProps) => <Story {...args} />,
-};
-
-export default meta;

package/src/components/GridSheet/util.ts

@@ -28,7 +28,10 @@ const createDxGridColumns = (model: SheetModel): DxGridAxisMeta => {
   return model.sheet.columns.reduce(
     (acc: DxGridAxisMeta, columnId, numericIndex) => {
       if (model.sheet.columnMeta[columnId] && model.sheet.columnMeta[columnId].size) {
-        acc.grid[numericIndex] = { size: model.sheet.columnMeta[columnId].size, resizeable: true };
+        acc.grid[numericIndex] = {
+          size: model.sheet.columnMeta[columnId].size,
+          resizeable: true,
+        };
       }
       return acc;
     },
@@ -40,7 +43,10 @@ const createDxGridRows = (model: SheetModel): DxGridAxisMeta => {
   return model.sheet.rows.reduce(
     (acc: DxGridAxisMeta, rowId, numericIndex) => {
       if (model.sheet.rowMeta[rowId] && model.sheet.rowMeta[rowId].size) {
-        acc.grid[numericIndex] = { size: model.sheet.rowMeta[rowId].size, resizeable: true };
+        acc.grid[numericIndex] = {
+          size: model.sheet.rowMeta[rowId].size,
+          resizeable: true,
+        };
       }
       return acc;
     },
@@ -59,7 +65,7 @@ const projectCellProps = (model: SheetModel, col: number, row: number): DxGridCe
   //     const range = thread.target?.anchor && parseThreadAnchorAsCellRange(thread.target!.anchor);
   //     return thread && range ? inRange(range, address) : false;
   //   })
-  //   .map((thread) => fullyQualifiedId(thread!))
+  //   .map((thread) => Obj.getDXN(thread!).toString())
   //   .join(' ');
 
   const description = model.getValueDescription(address);

package/src/components/RangeList/RangeList.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
 import { rangeToA1Notation } from '@dxos/compute';
@@ -10,20 +10,20 @@ import { Callout, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { ghostHover } from '@dxos/react-ui-theme';
 
-import { SHEET_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { rangeFromIndex } from '../../types';
-import { Range, type SheetType } from '../../types';
+import { Sheet } from '../../types';
 
 export type RangeListProps = {
-  sheet: SheetType;
+  sheet: Sheet.Sheet;
 };
 
 export const RangeList = ({ sheet }: RangeListProps) => {
-  const { t } = useTranslation(SHEET_PLUGIN);
+  const { t } = useTranslation(meta.id);
   // TODO(thure): Implement similar to comments, #8121
-  const handleSelectRange = (range: Range) => {};
+  const handleSelectRange = (range: Sheet.Range) => {};
   const handleDeleteRange = useCallback(
-    (range: Range) => {
+    (range: Sheet.Range) => {
       const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
       sheet.ranges.splice(index, 1);
     },
@@ -37,7 +37,7 @@ export const RangeList = ({ sheet }: RangeListProps) => {
           <Callout.Title>{t('no ranges message')}</Callout.Title>
         </Callout.Root>
       ) : (
-        <List.Root<Range> items={sheet.ranges} isItem={Schema.is(Range)}>
+        <List.Root<Sheet.Range> items={sheet.ranges} isItem={Schema.is(Sheet.Range)}>
           {({ items: ranges }) =>
             ranges.map((range, i) => (
               <List.Item key={i} item={range} classNames={['p-2', ghostHover]}>

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

@@ -2,29 +2,60 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta } from '@storybook/react-vite';
 import React from 'react';
 
 import { Capabilities, IntentPlugin, contributes, createResolver } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { Obj } from '@dxos/echo';
 import { GraphPlugin } from '@dxos/plugin-graph';
-import { fullyQualifiedId, useSpace } from '@dxos/react-client/echo';
+import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
 import { AttendableContainer } from '@dxos/react-ui-attention';
 import { withAttention } from '@dxos/react-ui-attention/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
 import { translations } from '../../translations';
-import { SheetAction, SheetType } from '../../types';
+import { Sheet, SheetAction } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
 import { RangeList } from '../RangeList';
 
 import { SheetContainer } from './SheetContainer';
 
-export const Basic = () => {
+const meta = {
+  title: 'plugins/plugin-sheet/SheetContainer',
+  component: SheetContainer,
+  decorators: [
+    withTheme,
+    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()],
+      capabilities: [
+        contributes(
+          Capabilities.IntentResolver,
+          createResolver({
+            intent: SheetAction.DropAxis,
+            resolve: ({ model, axis, axisIndex }) => {
+              model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
+            },
+          }),
+        ),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof SheetContainer>;
+
+export default meta;
+
+export const Default = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
   const sheet = useTestSheet(space, graph, { cells: createTestCells() });
@@ -33,8 +64,8 @@ export const Basic = () => {
   }
 
   return (
-    <AttendableContainer id={fullyQualifiedId(sheet)} classNames='contents'>
-      <SheetContainer space={space} sheet={sheet} role='article' ignoreAttention />
+    <AttendableContainer id={Obj.getDXN(sheet).toString()} classNames='contents'>
+      <SheetContainer space={space} sheet={sheet} role='story' ignoreAttention />
     </AttendableContainer>
   );
 };
@@ -42,15 +73,17 @@ export const Basic = () => {
 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={fullyQualifiedId(sheet)} classNames='contents'>
-      <div role='none' className='grid grid-rows-[66%_33%] grid-cols-1'>
-        <SheetContainer space={space} sheet={sheet} role='article' ignoreAttention />
+    <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' data-testid='grid.range-list'>
           <RangeList sheet={sheet} />
         </div>
@@ -58,33 +91,3 @@ export const Spec = () => {
     </AttendableContainer>
   );
 };
-
-const meta: Meta = {
-  title: 'plugins/plugin-sheet/SheetContainer',
-  component: SheetContainer,
-  decorators: [
-    withClientProvider({ types: [SheetType], createSpace: true }),
-    withComputeGraphDecorator(),
-    withTheme,
-    withLayout({ fullscreen: true, classNames: 'grid' }),
-    withAttention,
-    // TODO(wittjosiah): Consider whether we should refactor component so story doesn't need to depend on intents.
-    withPluginManager({
-      plugins: [IntentPlugin(), GraphPlugin()],
-      capabilities: [
-        contributes(
-          Capabilities.IntentResolver,
-          createResolver({
-            intent: SheetAction.DropAxis,
-            resolve: ({ model, axis, axisIndex }) => {
-              model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
-            },
-          }),
-        ),
-      ],
-    }),
-  ],
-  parameters: { translations },
-};
-
-export default meta;

package/src/components/SheetContainer/SheetContainer.tsx

@@ -4,10 +4,11 @@
 
 import React from 'react';
 
-import { type Space, fullyQualifiedId } from '@dxos/react-client/echo';
+import { Obj } from '@dxos/echo';
+import { type Space } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { type SheetType } from '../../types';
+import { type Sheet } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
 import { FunctionEditor } from '../FunctionEditor';
 import { GridSheet } from '../GridSheet';
@@ -16,7 +17,7 @@ import { SheetToolbar } from '../SheetToolbar';
 
 export type SheetContainerProps = {
   space: Space;
-  sheet: SheetType;
+  sheet: Sheet.Sheet;
   role?: string;
   ignoreAttention?: boolean;
 };
@@ -26,8 +27,12 @@ export const SheetContainer = ({ space, sheet, role, ignoreAttention }: SheetCon
 
   return graph ? (
     <SheetProvider sheet={sheet} graph={graph} ignoreAttention={ignoreAttention}>
-      <StackItem.Content toolbar statusbar {...(role === 'section' && { classNames: 'aspect-video' })}>
-        <SheetToolbar id={fullyQualifiedId(sheet)} />
+      <StackItem.Content
+        toolbar
+        statusbar
+        classNames={[role === 'section' && 'aspect-video', role === 'story' && 'bs-full']}
+      >
+        <SheetToolbar id={Obj.getDXN(sheet).toString()} />
         <GridSheet />
         <FunctionEditor />
       </StackItem.Content>

package/src/components/SheetContext/SheetContext.tsx

@@ -5,8 +5,8 @@
 import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
 
 import { type CellAddress, type CellRange, type CompleteCellRange, type ComputeGraph } from '@dxos/compute';
+import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
 import {
   Grid,
   type GridContentProps,
@@ -16,7 +16,7 @@ import {
 } from '@dxos/react-ui-grid';
 
 import { type SheetModel, useSheetModel } from '../../model';
-import { type SheetType } from '../../types';
+import { type Sheet } from '../../types';
 
 export type SheetContextValue = {
   id: string;
@@ -114,7 +114,7 @@ const SheetProviderImpl = ({
 
 export type SheetProviderProps = {
   graph: ComputeGraph;
-  sheet: SheetType;
+  sheet: Sheet.Sheet;
   readonly?: boolean;
   ignoreAttention?: boolean;
 } & Pick<SheetContextValue, 'onInfo'>;
@@ -130,7 +130,7 @@ export const SheetProvider = ({
   const model = useSheetModel(graph, sheet, { readonly });
 
   return !model ? null : (
-    <Grid.Root id={fullyQualifiedId(sheet)}>
+    <Grid.Root id={Obj.getDXN(sheet).toString()}>
       <SheetProviderImpl model={model} onInfo={onInfo} ignoreAttention={ignoreAttention}>
         {children}
       </SheetProviderImpl>

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

@@ -2,29 +2,34 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
 
 import { SheetToolbar } from './SheetToolbar';
 
 const DefaultStory = () => {
-  return <SheetToolbar id='test' />;
+  // TODO(wittjosiah): Depends on SheetProvider.
+  // return <SheetToolbar id='test' />;
+  return <>TODO</>;
 };
 
-export const Default = {};
-
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-sheet/Toolbar',
-  component: SheetToolbar,
+  component: SheetToolbar as any,
   render: DefaultStory,
-  decorators: [withTheme, withLayout()],
-  parameters: { translations, layout: 'fullscreen' },
-};
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/SheetToolbar/SheetToolbar.tsx

@@ -2,20 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 import React, { type PropsWithChildren, useMemo } from 'react';
 
-import { useAppGraph } from '@dxos/app-framework';
+import { useAppGraph } from '@dxos/app-framework/react';
 import { type CompleteCellRange } from '@dxos/compute';
-import { type ThemedClassName } from '@dxos/react-ui';
 import {
-  type ActionGraphEdges,
-  type ActionGraphNodes,
   type ActionGraphProps,
   MenuProvider,
   ToolbarMenu,
+  atomFromSignal,
   createGapSeparator,
-  rxFromSignal,
   useMenuActions,
 } from '@dxos/react-ui-menu';
 
@@ -26,37 +23,35 @@ import { createAlign, useAlignState } from './align';
 import { createStyle, useStyleState } from './style';
 import { type ToolbarState, useToolbarState } from './useToolbarState';
 
-//
-// Root
-//
-
-export type SheetToolbarProps = ThemedClassName<PropsWithChildren<{ id: string }>>;
-
 const createToolbarActions = (
   model: SheetModel,
   state: ToolbarState,
   cursorFallbackRange?: CompleteCellRange,
-  customActions?: Rx.Rx<ActionGraphProps>,
-) => {
-  return Rx.make((get) => {
-    const align = get(rxFromSignal(() => createAlign(model, state, cursorFallbackRange)));
-    const style = get(rxFromSignal(() => createStyle(model, state, cursorFallbackRange)));
+  customActions?: Atom.Atom<ActionGraphProps>,
+): Atom.Atom<ActionGraphProps> => {
+  return Atom.make((get) => {
+    const align = get(atomFromSignal(() => createAlign(model, state, cursorFallbackRange)));
+    const style = get(atomFromSignal(() => createStyle(model, state, cursorFallbackRange)));
     const gap = createGapSeparator();
-    const nodes: ActionGraphNodes = [...align.nodes, ...style.nodes, ...gap.nodes];
-    const edges: ActionGraphEdges = [...align.edges, ...style.edges, ...gap.edges];
+
+    const graph: ActionGraphProps = {
+      nodes: [...align.nodes, ...style.nodes, ...gap.nodes],
+      edges: [...align.edges, ...style.edges, ...gap.edges],
+    };
+
     if (customActions) {
       const custom = get(customActions);
-      nodes.push(...custom.nodes);
-      edges.push(...custom.edges);
+      graph.nodes.push(...custom.nodes);
+      graph.edges.push(...custom.edges);
     }
-    return {
-      nodes,
-      edges,
-    };
+
+    return graph;
   });
 };
 
-export const SheetToolbar = ({ id, classNames }: SheetToolbarProps) => {
+export type SheetToolbarProps = PropsWithChildren<{ id: string }>;
+
+export const SheetToolbar = ({ id }: SheetToolbarProps) => {
   const { model, cursorFallbackRange } = useSheetContext();
   const state = useToolbarState({});
   useAlignState(state);
@@ -64,10 +59,13 @@ export const SheetToolbar = ({ id, classNames }: SheetToolbarProps) => {
 
   const { graph } = useAppGraph();
   const customActions = useMemo(() => {
-    return Rx.make((get) => {
+    return Atom.make((get) => {
       const actions = get(graph.actions(id));
       const nodes = actions.filter((action) => action.properties.disposition === 'toolbar');
-      return { nodes, edges: nodes.map((node) => ({ source: 'root', target: node.id })) };
+      return {
+        nodes,
+        edges: nodes.map((node) => ({ source: 'root', target: node.id })),
+      };
     });
   }, [graph]);
 
@@ -79,7 +77,7 @@ export const SheetToolbar = ({ id, classNames }: SheetToolbarProps) => {
 
   return (
     <MenuProvider {...menu} attendableId={id}>
-      <ToolbarMenu classNames={classNames} />
+      <ToolbarMenu />
     </MenuProvider>
   );
 };