@dxos/plugin-sheet 0.8.4-main.7ace549 → 0.8.4-main.8baae0fced

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' })),
     ],
   };
 };

package/src/components/SheetToolbar/style.ts

@@ -2,15 +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 StyleKey, type StyleValue, rangeFromIndex, rangeToIndex } from '#types';
 
-import { meta } from '../../meta';
 import { type SheetModel } from '../../model';
-import { type StyleKey, type StyleValue, rangeFromIndex, rangeToIndex } from '../../types';
-import { useSheetContext } from '../SheetContext';
+import { useSheetContext } from '../SheetRoot';
+import { type ToolbarState, type ToolbarStateAtom } from './useToolbarState';
 
 export type StyleState = Partial<Record<StyleValue, boolean>>;
 
@@ -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,32 +103,36 @@ const createStyleActions = (model: SheetModel, state: StyleState, cursorFallback
         ) {
           // this value should be unset
           if (index >= 0) {
-            model.sheet.ranges?.splice(index, 1);
+            Obj.update(model.sheet, (obj) => {
+              obj.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.update(model.sheet, (obj) => {
+            obj.ranges?.push(nextRangeEntity);
+          });
+          registry.set(stateAtom, { ...currentState, [nextRangeEntity.value]: true });
         }
       },
       {
         key: 'style',
         value: styleValue as StyleValue,
         icon,
-        label: [`range value ${styleValue} label`, { ns: meta.id }],
+        label: [`range-value.${styleValue}.label`, { ns: meta.id }],
         checked: !!state[styleValue as StyleValue],
       },
     );
   });
 
-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: [
-      { source: 'root', target: 'style' },
-      ...styleActions.map(({ id }) => ({ source: styleGroupAction.id, target: id })),
+      { source: 'root', target: 'style', relation: 'child' },
+      ...styleActions.map(({ id }) => ({ source: styleGroupAction.id, target: id, relation: 'child' })),
     ],
   };
 };

package/src/components/SheetToolbar/useToolbarState.ts

@@ -2,15 +2,32 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useMemo } from 'react';
-
-import { live } from '@dxos/live-object';
+import { Atom, type Registry, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import { useContext, useMemo } from 'react';
 
 import { type AlignState } from './align';
 import { type StyleState } from './style';
 
 export type ToolbarState = Partial<StyleState & AlignState>;
+export type ToolbarStateAtom = Atom.Writable<ToolbarState>;
+
+/**
+ * Creates a reactive toolbar state Atom.
+ */
+export const useToolbarState = (initialState: ToolbarState = {}): ToolbarStateAtom => {
+  return useMemo(() => Atom.make<ToolbarState>(initialState).pipe(Atom.keepAlive), []);
+};
+
+/**
+ * Hook to read the current toolbar state value.
+ */
+export const useToolbarStateValue = (stateAtom: ToolbarStateAtom): ToolbarState => {
+  return useAtomValue(stateAtom);
+};
 
-export const useToolbarState = (initialState: ToolbarState = {}) => {
-  return useMemo(() => live<ToolbarState>(initialState), []);
+/**
+ * Hook to get the registry for updating toolbar state.
+ */
+export const useToolbarStateRegistry = (): Registry.Registry => {
+  return useContext(RegistryContext);
 };

package/src/components/index.ts

@@ -2,11 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
 export * from './ComputeGraph';
-export * from './GridSheet';
-export * from './RangeList';
-export * from './SheetContext';
-
-export const SheetContainer = lazy(() => import('./SheetContainer'));
+export * from './Sheet';

package/src/{components → containers}/RangeList/RangeList.tsx

@@ -5,48 +5,53 @@
 import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
-import { rangeToA1Notation } from '@dxos/compute';
-import { Callout, useTranslation } from '@dxos/react-ui';
+import { rangeToA1Notation } from '@dxos/compute-hyperformula';
+import { useObject } from '@dxos/echo-react';
+import { Input, Message, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
-import { ghostHover } from '@dxos/react-ui-theme';
 
-import { meta } from '../../meta';
-import { rangeFromIndex } from '../../types';
-import { Sheet } from '../../types';
+import { meta } from '#meta';
+import { rangeFromIndex } from '#types';
+import { Sheet } from '#types';
 
 export type RangeListProps = {
   sheet: Sheet.Sheet;
 };
 
-export const RangeList = ({ sheet }: RangeListProps) => {
+export const RangeList = ({ sheet: sheetProp }: RangeListProps) => {
   const { t } = useTranslation(meta.id);
+  const [sheet, updateSheet] = useObject(sheetProp);
   // TODO(thure): Implement similar to comments, #8121
   const handleSelectRange = (range: Sheet.Range) => {};
   const handleDeleteRange = useCallback(
     (range: Sheet.Range) => {
       const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
-      sheet.ranges.splice(index, 1);
+      updateSheet((sheet) => {
+        sheet.ranges.splice(index, 1);
+      });
     },
-    [sheet],
+    [sheet, updateSheet],
   );
   return (
     <>
-      <h2 className='mbs-cardSpacingBlock mbe-labelSpacingBlock text-sm font-semibold'>{t('range list heading')}</h2>
+      <Input.Root>
+        <Input.Label>{t('range-list.heading')}</Input.Label>
+      </Input.Root>
       {sheet.ranges.length < 1 ? (
-        <Callout.Root>
-          <Callout.Title>{t('no ranges message')}</Callout.Title>
-        </Callout.Root>
+        <Message.Root>
+          <Message.Title>{t('no-ranges.message')}</Message.Title>
+        </Message.Root>
       ) : (
         <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]}>
+              <List.Item key={i} item={range}>
                 <List.ItemDragHandle />
                 <List.ItemTitle onClick={() => handleSelectRange(range)}>
-                  {t('range title', {
-                    position: rangeToA1Notation(rangeFromIndex(sheet, range.range)),
-                    key: t(`range key ${range.key} label`),
-                    value: t(`range value ${range.value} label`),
+                  {t('range.title', {
+                    position: rangeToA1Notation(rangeFromIndex(sheetProp, range.range)),
+                    key: t(`range-key.${range.key}.label`),
+                    value: t(`range-value.${range.value}.label`),
                   })}
                 </List.ItemTitle>
                 <List.ItemDeleteButton onClick={() => handleDeleteRange(range)} />

package/src/containers/RangeList/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export { RangeList as default } from './RangeList';

package/src/containers/SheetArticle/SheetArticle.stories.tsx

@@ -0,0 +1,110 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { useContext } from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Operation, OperationHandlerSet } from '@dxos/compute';
+import { Obj } from '@dxos/echo';
+import { corePlugins } from '@dxos/plugin-testing';
+import { useSpaces } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { AttendableContainer } from '@dxos/react-ui-attention';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { ComputeGraphContext, useComputeGraph } from '#components';
+import { createTestCells, useTestSheet, withComputeGraphDecorator } from '#testing';
+import { translations } from '#translations';
+import { SheetOperation } from '#types';
+import { Sheet } from '#types';
+
+import RangeList from '../RangeList';
+import { SheetArticle } from './SheetArticle';
+
+const meta = {
+  title: 'plugins/plugin-sheet/containers/SheetArticle',
+  component: SheetArticle,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withClientProvider({ types: [Sheet.Sheet], createSpace: true }),
+    withComputeGraphDecorator(),
+    withPluginManager({
+      plugins: [...corePlugins()],
+      capabilities: [
+        Capability.contributes(
+          Capabilities.OperationHandler,
+          OperationHandlerSet.make(
+            Operation.withHandler(SheetOperation.DropAxis, ({ model, axis, axisIndex }) =>
+              Effect.sync(() => {
+                model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
+                return { axis, axisIndex, index: 0, axisMeta: null, values: [] };
+              }),
+            ),
+          ),
+        ),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof SheetArticle>;
+
+export default meta;
+
+export const Default = () => {
+  const [space] = useSpaces();
+  const graph = useComputeGraph(space);
+  const { registry } = useContext(ComputeGraphContext) ?? {};
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
+  if (!sheet || !space || !registry) {
+    return null;
+  }
+
+  return (
+    <AttendableContainer id={Obj.getDXN(sheet).toString()} classNames='contents'>
+      <SheetArticle
+        role='article'
+        space={space}
+        subject={sheet}
+        attendableId='test'
+        registry={registry}
+        ignoreAttention
+      />
+    </AttendableContainer>
+  );
+};
+
+export const Spec = () => {
+  const [space] = useSpaces();
+  const graph = useComputeGraph(space);
+  const { registry } = useContext(ComputeGraphContext) ?? {};
+  const sheet = useTestSheet(space, graph, { cells: { A1: { value: 'Ready' } } });
+  if (!sheet || !space || !registry) {
+    return null;
+  }
+
+  return (
+    <AttendableContainer id={Obj.getDXN(sheet).toString()} classNames='contents'>
+      <div className='w-full grid grid-cols-[1fr_20rem]'>
+        <SheetArticle
+          role='article'
+          space={space}
+          subject={sheet}
+          attendableId='test'
+          registry={registry}
+          ignoreAttention
+        />
+        <div data-testid='grid.range-list'>
+          <RangeList sheet={sheet} />
+        </div>
+      </div>
+    </AttendableContainer>
+  );
+};

package/src/containers/SheetArticle/SheetArticle.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type ComputeGraphRegistry } from '@dxos/compute-hyperformula';
+import { type Space } from '@dxos/react-client/echo';
+import { Panel } from '@dxos/react-ui';
+
+import { ComputeGraphContextProvider, Sheet, useComputeGraph } from '#components';
+import { type Sheet as SheetType } from '#types';
+
+export type SheetArticleProps = AppSurface.ObjectArticleProps<
+  SheetType.Sheet,
+  {
+    space: Space;
+    registry: ComputeGraphRegistry;
+    ignoreAttention?: boolean;
+  }
+>;
+
+export const SheetArticle = ({ registry, ...props }: SheetArticleProps) => (
+  <ComputeGraphContextProvider registry={registry}>
+    <SheetArticleInner {...props} />
+  </ComputeGraphContextProvider>
+);
+
+const SheetArticleInner = ({
+  role,
+  subject: sheet,
+  attendableId,
+  space,
+  ignoreAttention,
+}: Omit<SheetArticleProps, 'registry'>) => {
+  const graph = useComputeGraph(space);
+  if (!graph) {
+    return null;
+  }
+
+  return (
+    <Sheet.Root graph={graph} sheet={sheet} attendableId={attendableId!} ignoreAttention={ignoreAttention}>
+      <Panel.Root classNames={role === 'section' && 'aspect-aquare'}>
+        <Panel.Toolbar asChild>
+          <Sheet.Toolbar />
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <Sheet.Content />
+        </Panel.Content>
+        <Panel.Statusbar asChild>
+          <Sheet.Statusbar />
+        </Panel.Statusbar>
+      </Panel.Root>
+    </Sheet.Root>
+  );
+};

package/src/containers/SheetArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { SheetArticle as default } from './SheetArticle';

package/src/containers/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const RangeList: ComponentType<any> = lazy(() => import('./RangeList'));
+export const SheetArticle: ComponentType<any> = lazy(() => import('./SheetArticle'));