@dxos/plugin-sheet 0.8.4-main.72ec0f3 → 0.8.4-main.765dc60934

package/src/components/{GridSheet → SheetContent}/util.ts

@@ -4,8 +4,8 @@
 
 import { useEffect, useState } from 'react';
 
-import { inRange } from '@dxos/compute';
-import { createDocAccessor } from '@dxos/react-client/echo';
+import { inRange } from '@dxos/compute-hyperformula';
+import { createDocAccessor } from '@dxos/echo-db';
 import { cellClassesForFieldType, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
@@ -19,10 +19,11 @@ import {
   commentedClassName,
   rowToA1Notation,
 } from '@dxos/react-ui-grid';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
+
+import { cellClassNameForRange, rangeFromIndex } from '#types';
 
 import { type SheetModel } from '../../model';
-import { cellClassNameForRange, rangeFromIndex } from '../../types';
 
 const createDxGridColumns = (model: SheetModel): DxGridAxisMeta => {
   return model.sheet.columns.reduce(
@@ -96,13 +97,13 @@ const gridCellGetter = (model: SheetModel) => {
 
 export const rowLabelCell = (row: number) => ({
   value: rowToA1Notation(row),
-  className: '!bg-toolbarSurface text-subdued text-end pie-1',
+  className: '!bg-toolbar-surface text-subdued text-end pe-1',
   resizeHandle: 'row',
 });
 
 export const colLabelCell = (col: number) => ({
   value: colToA1Notation(col),
-  className: '!bg-toolbarSurface text-subdued',
+  className: '!bg-toolbar-surface text-subdued',
   resizeHandle: 'col',
 });
 
@@ -114,7 +115,7 @@ const cellGetter = (model: SheetModel) => {
         return getGridCells(nextBounds);
       case 'fixedStartStart': {
         return {
-          '0,0': { className: '!bg-toolbarSurface' },
+          '0,0': { className: '!bg-toolbar-surface' },
         };
       }
       case 'frozenColsStart':

package/src/components/{SheetContext/SheetContext.tsx → SheetRoot/SheetRoot.tsx}

@@ -4,9 +4,13 @@
 
 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 {
+  type CellAddress,
+  type CellRange,
+  type CompleteCellRange,
+  type ComputeGraph,
+} from '@dxos/compute-hyperformula';
+import { raise } from '@dxos/debug';
 import {
   Grid,
   type GridContentProps,
@@ -15,12 +19,13 @@ import {
   useGridContext,
 } from '@dxos/react-ui-grid';
 
+import { type Sheet } from '#types';
+
 import { type SheetModel, useSheetModel } from '../../model';
-import { type Sheet } from '../../types';
 
 export type SheetContextValue = {
   id: string;
-
+  attendableId: string;
   model: SheetModel;
 
   // Cursor state.
@@ -39,29 +44,62 @@ export type SheetContextValue = {
   activeRefs: GridContentProps['activeRefs'];
   setActiveRefs: (activeRefs: GridContentProps['activeRefs']) => void;
 
+  // Flags
+  ignoreAttention?: boolean;
+
   // Events.
   // TODO(burdon): Generalize.
   onInfo?: () => void;
-
-  // Flags
-  ignoreAttention?: boolean;
 };
 
+// TODO(burdon): Use radix context.
 const SheetContext = createContext<SheetContextValue | undefined>(undefined);
 
 export const useSheetContext = (): SheetContextValue => {
-  const context = useContext(SheetContext);
-  invariant(context);
-  return context;
+  return useContext(SheetContext) ?? raise(new Error('Missing SheetContext'));
+};
+
+export type SheetRootProps = {
+  graph: ComputeGraph;
+  sheet: Sheet.Sheet;
+  attendableId: string;
+  readonly?: boolean;
+  ignoreAttention?: boolean;
+} & Pick<SheetContextValue, 'onInfo'>;
+
+export const SheetRoot = ({
+  children,
+  graph,
+  sheet,
+  attendableId,
+  readonly,
+  ignoreAttention,
+  onInfo,
+}: PropsWithChildren<SheetRootProps>) => {
+  const model = useSheetModel(graph, sheet, { readonly });
+  if (!model) {
+    return null;
+  }
+
+  return (
+    <Grid.Root id={attendableId}>
+      <SheetProviderImpl model={model} attendableId={attendableId} onInfo={onInfo} ignoreAttention={ignoreAttention}>
+        {children}
+      </SheetProviderImpl>
+    </Grid.Root>
+  );
 };
 
 const SheetProviderImpl = ({
+  __gridScope,
+  children,
+  attendableId,
+  ignoreAttention,
   model,
   onInfo,
-  ignoreAttention,
-  children,
-  __gridScope,
-}: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'onInfo' | 'model' | 'ignoreAttention'>>>) => {
+}: GridScopedProps<
+  PropsWithChildren<Pick<SheetContextValue, 'attendableId' | 'ignoreAttention' | 'model' | 'onInfo'>>
+>) => {
   const { id, editing, setEditing } = useGridContext('SheetProvider', __gridScope);
 
   const [cursor, setCursorInternal] = useState<CellAddress>();
@@ -92,6 +130,7 @@ const SheetProviderImpl = ({
     <SheetContext.Provider
       value={{
         id,
+        attendableId,
         model,
         editing,
         setEditing,
@@ -102,38 +141,12 @@ const SheetProviderImpl = ({
         cursorFallbackRange,
         activeRefs,
         setActiveRefs,
+        ignoreAttention,
         // TODO(burdon): Change to event.
         onInfo,
-        ignoreAttention,
       }}
     >
       {children}
     </SheetContext.Provider>
   );
 };
-
-export type SheetProviderProps = {
-  graph: ComputeGraph;
-  sheet: Sheet.Sheet;
-  readonly?: boolean;
-  ignoreAttention?: boolean;
-} & Pick<SheetContextValue, 'onInfo'>;
-
-export const SheetProvider = ({
-  children,
-  graph,
-  sheet,
-  readonly,
-  ignoreAttention,
-  onInfo,
-}: PropsWithChildren<SheetProviderProps>) => {
-  const model = useSheetModel(graph, sheet, { readonly });
-
-  return !model ? null : (
-    <Grid.Root id={Obj.getDXN(sheet).toString()}>
-      <SheetProviderImpl model={model} onInfo={onInfo} ignoreAttention={ignoreAttention}>
-        {children}
-      </SheetProviderImpl>
-    </Grid.Root>
-  );
-};

package/src/components/{GridSheet → SheetRoot}/index.ts

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

package/src/components/{FunctionEditor/FunctionEditor.tsx → SheetStatusbar/SheetStatusbar.tsx}

@@ -4,13 +4,18 @@
 
 import React from 'react';
 
-import { addressToA1Notation, isFormula, rangeToA1Notation } from '@dxos/compute';
+import { addressToA1Notation, isFormula, rangeToA1Notation } from '@dxos/compute-hyperformula';
 import { Icon } from '@dxos/react-ui';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
 
-import { mapFormulaIndicesToRefs } from '../../types';
-import { useSheetContext } from '../SheetContext';
+import { mapFormulaIndicesToRefs } from '#types';
 
-export const FunctionEditor = () => {
+import { useSheetContext } from '../SheetRoot';
+
+export type SheetStatusbarProps = {};
+
+export const SheetStatusbar = composable<HTMLDivElement, SheetStatusbarProps>((props, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
   const { model, cursor, range } = useSheetContext();
 
   let value;
@@ -26,16 +31,23 @@ export const FunctionEditor = () => {
   }
 
   return (
-    <div className='flex shrink-0 justify-between items-center pli-4 plb-1 text-sm bg-toolbarSurface border-bs !border-subduedSeparator'>
+    <div
+      ref={forwardedRef}
+      {...rest}
+      className={mx(
+        'flex shrink-0 justify-between items-center px-4 py-1 text-sm bg-toolbar-surface border-y !border-subdued-separator',
+        className,
+      )}
+    >
       <div className='flex gap-4 items-center'>
-        <div className='flex is-16 items-center font-mono'>
+        <div className='flex w-16 items-center font-mono'>
           {(range && rangeToA1Notation(range)) || (cursor && addressToA1Notation(cursor))}
         </div>
         <div className='flex gap-2 items-center'>
-          <Icon icon='ph--function--regular' classNames={['text-greenText', formula ? 'visible' : 'invisible']} />
+          <Icon icon='ph--function--regular' classNames={['text-green-text', formula ? 'visible' : 'invisible']} />
           <span className='font-mono'>{value}</span>
         </div>
       </div>
     </div>
   );
-};
+});

package/src/components/{FunctionEditor → SheetStatusbar}/index.ts

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

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

@@ -5,23 +5,23 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
 import { SheetToolbar } from './SheetToolbar';
 
 const DefaultStory = () => {
-  // TODO(wittjosiah): Depends on SheetProvider.
+  // TODO(wittjosiah): Depends on SheetRoot.
   // return <SheetToolbar id='test' />;
   return <>TODO</>;
 };
 
 const meta = {
-  title: 'plugins/plugin-sheet/Toolbar',
+  title: 'plugins/plugin-sheet/components/Toolbar',
   component: SheetToolbar as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/SheetToolbar/SheetToolbar.tsx

@@ -2,36 +2,40 @@
 // 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, { useContext, useMemo } from 'react';
 
-import { useAppGraph } from '@dxos/app-framework/react';
-import { type CompleteCellRange } from '@dxos/compute';
-import {
-  type ActionGraphProps,
-  MenuProvider,
-  ToolbarMenu,
-  atomFromSignal,
-  createGapSeparator,
-  useMenuActions,
-} from '@dxos/react-ui-menu';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { type CompleteCellRange } from '@dxos/compute-hyperformula';
+import { type ActionGraphProps, Menu, createGapSeparator, useMenuActions } from '@dxos/react-ui-menu';
+import { composable, composableProps } from '@dxos/ui-theme';
 
 import { type SheetModel } from '../../model';
-import { useSheetContext } from '../SheetContext';
-
+import { useSheetContext } from '../SheetRoot';
 import { createAlign, useAlignState } from './align';
 import { createStyle, useStyleState } from './style';
-import { type ToolbarState, useToolbarState } from './useToolbarState';
+import { type ToolbarStateAtom, useToolbarState } from './useToolbarState';
+
+type ToolbarActionsContext = {
+  model: SheetModel;
+  stateAtom: ToolbarStateAtom;
+  registry: Registry.Registry;
+  cursorFallbackRange?: CompleteCellRange;
+  customActions?: Atom.Atom<ActionGraphProps>;
+};
 
-const createToolbarActions = (
-  model: SheetModel,
-  state: ToolbarState,
-  cursorFallbackRange?: CompleteCellRange,
-  customActions?: Atom.Atom<ActionGraphProps>,
-): 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 = {
@@ -49,35 +53,38 @@ const createToolbarActions = (
   });
 };
 
-export type SheetToolbarProps = PropsWithChildren<{ id: string }>;
+export type SheetToolbarProps = {};
 
-export const SheetToolbar = ({ id }: SheetToolbarProps) => {
-  const { model, cursorFallbackRange } = useSheetContext();
-  const state = useToolbarState({});
-  useAlignState(state);
-  useStyleState(state);
+export const SheetToolbar = composable<HTMLDivElement, SheetToolbarProps>((props, forwardedRef) => {
+  const { attendableId, model, cursorFallbackRange } = useSheetContext();
+  const stateAtom = useToolbarState({});
+  const registry = useContext(RegistryContext);
+  useAlignState(stateAtom);
+  useStyleState(stateAtom);
 
   const { graph } = useAppGraph();
   const customActions = useMemo(() => {
     return Atom.make((get) => {
-      const actions = get(graph.actions(id));
+      const actions = get(graph.actions(attendableId));
       const nodes = actions.filter((action) => action.properties.disposition === 'toolbar');
       return {
         nodes,
-        edges: nodes.map((node) => ({ source: 'root', target: node.id })),
+        edges: nodes.map((node) => ({ source: 'root', target: node.id, relation: 'child' })),
       };
     });
-  }, [graph]);
+  }, [graph, attendableId]);
 
   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);
+  const menuActions = useMenuActions(actionsCreator);
 
   return (
-    <MenuProvider {...menu} attendableId={id}>
-      <ToolbarMenu />
-    </MenuProvider>
+    <Menu.Root {...menuActions} attendableId={attendableId}>
+      <Menu.Toolbar {...composableProps(props)} ref={forwardedRef} />
+    </Menu.Root>
   );
-};
+});
+
+SheetToolbar.displayName = 'SheetToolbar';

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 { type CompleteCellRange, inRange } from '@dxos/compute-hyperformula';
+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 { meta } from '#meta';
+import { type AlignKey, type AlignValue, alignKey, rangeFromIndex, rangeToIndex } from '#types';
 
-import { type ToolbarState } from './useToolbarState';
+import { type SheetModel } from '../../model';
+import { useSheetContext } from '../SheetRoot';
+import { type ToolbarState, type ToolbarStateAtom } from './useToolbarState';
 
 export type AlignAction = { key: AlignKey; value: AlignValue };
 
@@ -24,29 +31,40 @@ 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) =>
   createMenuItemGroup('align', {
-    label: ['align label', { ns: meta.id }],
+    label: ['align.label', { ns: meta.id }],
     variant: 'toggleGroup',
     selectCardinality: 'single',
     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,36 +82,43 @@ 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.update(model.sheet, (obj) => {
+            obj.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.update(model.sheet, (obj) => {
+            obj.ranges?.splice(index, 1);
+          });
+          registry.set(stateAtom, { ...currentState, [alignKey]: undefined });
         } else {
-          model.sheet.ranges?.splice(index, 1, nextRangeEntity);
-          state[alignKey] = nextRangeEntity.value;
+          Obj.update(model.sheet, (obj) => {
+            obj.ranges?.splice(index, 1, nextRangeEntity);
+          });
+          registry.set(stateAtom, { ...currentState, [alignKey]: nextRangeEntity.value });
         }
       },
       {
         key: alignKey,
         value: alignValue as AlignValue,
         checked: state[alignKey] === alignValue,
-        label: [`range value ${alignValue} label`, { ns: meta.id }],
+        label: [`range-value.${alignValue}.label`, { ns: meta.id }],
         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 = (context: AlignActionsContext): ActionGraphProps => {
+  const alignGroup = createAlignGroupAction(context.state[alignKey]);
+  const alignActions = createAlignActions(context);
   return {
     nodes: [alignGroup, ...alignActions],
     edges: [
-      { source: 'root', target: 'align' },
-      ...alignActions.map(({ id }) => ({ source: alignGroup.id, target: id })),
+      { source: 'root', target: 'align', relation: 'child' },
+      ...alignActions.map(({ id }) => ({ source: alignGroup.id, target: id, relation: 'child' })),
     ],
   };
 };