@dxos/plugin-sheet 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

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

@@ -5,8 +5,7 @@
 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 { raise } from '@dxos/debug';
 import {
   Grid,
   type GridContentProps,
@@ -20,6 +19,7 @@ import { type Sheet } from '../../types';
 
 export type SheetContextValue = {
   id: string;
+  attendableId: string;
 
   model: SheetModel;
 
@@ -39,29 +39,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,
-}: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'ignoreAttention' | 'model' | 'onInfo'>>>) => {
+}: GridScopedProps<
+  PropsWithChildren<Pick<SheetContextValue, 'attendableId' | 'ignoreAttention' | 'model' | 'onInfo'>>
+>) => {
   const { id, editing, setEditing } = useGridContext('SheetProvider', __gridScope);
 
   const [cursor, setCursorInternal] = useState<CellAddress>();
@@ -92,6 +125,7 @@ const SheetProviderImpl = ({
     <SheetContext.Provider
       value={{
         id,
+        attendableId,
         model,
         editing,
         setEditing,
@@ -102,38 +136,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}

@@ -2,15 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import { addressToA1Notation, isFormula, rangeToA1Notation } from '@dxos/compute';
-import { Icon } from '@dxos/react-ui';
+import { type ComposableProps, Icon } from '@dxos/react-ui';
 
 import { mapFormulaIndicesToRefs } from '../../types';
-import { useSheetContext } from '../SheetContext';
+import { useSheetContext } from '../SheetRoot';
+import { composableProps, mx } from '@dxos/ui-theme';
 
-export const FunctionEditor = () => {
+export type SheetStatusbarProps = ComposableProps;
+
+export const SheetStatusbar = forwardRef<HTMLDivElement, SheetStatusbarProps>((props, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
   const { model, cursor, range } = useSheetContext();
 
   let value;
@@ -26,16 +30,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 { 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

@@ -5,18 +5,18 @@
 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 { useAppGraph } from '@dxos/app-toolkit/ui';
 import { type CompleteCellRange } from '@dxos/compute';
 import {
   type ActionGraphProps,
-  MenuProvider,
-  ToolbarMenu,
+  Menu,
+  type MenuRootProps,
   createGapSeparator,
   useMenuActions,
 } from '@dxos/react-ui-menu';
 
 import { type SheetModel } from '../../model';
-import { useSheetContext } from '../SheetContext';
+import { useSheetContext } from '../SheetRoot';
 
 import { createAlign, useAlignState } from './align';
 import { createStyle, useStyleState } from './style';
@@ -59,9 +59,10 @@ const createToolbarActions = ({
   });
 };
 
-export type SheetToolbarProps = PropsWithChildren<{ id: string }>;
+export type SheetToolbarProps = { id: string } & Partial<MenuRootProps> &
+  PropsWithChildren<{ id: string } & Partial<MenuRootProps>>;
 
-export const SheetToolbar = ({ id }: SheetToolbarProps) => {
+export const SheetToolbar = ({ id, ...props }: SheetToolbarProps) => {
   const { model, cursorFallbackRange } = useSheetContext();
   const stateAtom = useToolbarState({});
   const registry = useContext(RegistryContext);
@@ -75,7 +76,7 @@ export const SheetToolbar = ({ id }: SheetToolbarProps) => {
       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, id]);
@@ -87,8 +88,8 @@ export const SheetToolbar = ({ id }: SheetToolbarProps) => {
   const menu = useMenuActions(actionsCreator);
 
   return (
-    <MenuProvider {...menu} attendableId={id}>
-      <ToolbarMenu />
-    </MenuProvider>
+    <Menu.Root {...props} {...menu} attendableId={id}>
+      <Menu.Toolbar />
+    </Menu.Root>
   );
 };

package/src/components/SheetToolbar/align.ts

@@ -17,7 +17,7 @@ import {
 import { meta } from '../../meta';
 import { type SheetModel } from '../../model';
 import { type AlignKey, type AlignValue, alignKey, rangeFromIndex, rangeToIndex } from '../../types';
-import { useSheetContext } from '../SheetContext';
+import { useSheetContext } from '../SheetRoot';
 
 import { type ToolbarState, type ToolbarStateAtom } from './useToolbarState';
 
@@ -84,18 +84,18 @@ const createAlignActions = ({ model, state, stateAtom, registry, cursorFallbackR
         };
         const currentState = registry.get(stateAtom);
         if (index < 0) {
-          Obj.change(model.sheet, (s) => {
-            s.ranges?.push(nextRangeEntity);
+          Obj.change(model.sheet, (obj) => {
+            obj.ranges?.push(nextRangeEntity);
           });
           registry.set(stateAtom, { ...currentState, [alignKey]: nextRangeEntity.value });
         } else if (model.sheet.ranges![index].value === nextRangeEntity.value) {
-          Obj.change(model.sheet, (s) => {
-            s.ranges?.splice(index, 1);
+          Obj.change(model.sheet, (obj) => {
+            obj.ranges?.splice(index, 1);
           });
           registry.set(stateAtom, { ...currentState, [alignKey]: undefined });
         } else {
-          Obj.change(model.sheet, (s) => {
-            s.ranges?.splice(index, 1, nextRangeEntity);
+          Obj.change(model.sheet, (obj) => {
+            obj.ranges?.splice(index, 1, nextRangeEntity);
           });
           registry.set(stateAtom, { ...currentState, [alignKey]: nextRangeEntity.value });
         }
@@ -117,8 +117,8 @@ export const createAlign = (context: AlignActionsContext): ActionGraphProps => {
   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

@@ -17,7 +17,7 @@ import {
 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';
 
@@ -103,14 +103,14 @@ const createStyleActions = ({ model, state, stateAtom, registry, cursorFallbackR
         ) {
           // this value should be unset
           if (index >= 0) {
-            Obj.change(model.sheet, (s) => {
-              s.ranges?.splice(index, 1);
+            Obj.change(model.sheet, (obj) => {
+              obj.ranges?.splice(index, 1);
             });
           }
           registry.set(stateAtom, { ...currentState, [nextRangeEntity.value]: false });
         } else {
-          Obj.change(model.sheet, (s) => {
-            s.ranges?.push(nextRangeEntity);
+          Obj.change(model.sheet, (obj) => {
+            obj.ranges?.push(nextRangeEntity);
           });
           registry.set(stateAtom, { ...currentState, [nextRangeEntity.value]: true });
         }
@@ -131,8 +131,8 @@ export const createStyle = (context: StyleActionsContext): ActionGraphProps => {
   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/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

@@ -7,7 +7,7 @@ import React, { useCallback } from 'react';
 
 import { rangeToA1Notation } from '@dxos/compute';
 import { Obj } from '@dxos/echo';
-import { Callout, useTranslation } from '@dxos/react-ui';
+import { Input, Message, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { ghostHover } from '@dxos/ui-theme';
 
@@ -26,19 +26,21 @@ export const RangeList = ({ sheet }: RangeListProps) => {
   const handleDeleteRange = useCallback(
     (range: Sheet.Range) => {
       const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
-      Obj.change(sheet, (s) => {
-        s.ranges.splice(index, 1);
+      Obj.change(sheet, (obj) => {
+        obj.ranges.splice(index, 1);
       });
     },
     [sheet],
   );
   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 }) =>

package/src/containers/RangeList/index.ts

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

package/src/{components → containers}/SheetContainer/SheetContainer.stories.tsx

@@ -4,9 +4,9 @@
 
 import { type Meta } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
-import React from 'react';
+import React, { useContext } from 'react';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj } from '@dxos/echo';
 import { OperationResolver } from '@dxos/operation';
@@ -16,33 +16,31 @@ import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { AttendableContainer } from '@dxos/react-ui-attention';
 
+import { ComputeGraphContext, useComputeGraph } from '../../components';
 import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
 import { translations } from '../../translations';
 import { Sheet, SheetOperation } from '../../types';
-import { useComputeGraph } from '../ComputeGraph';
-import { RangeList } from '../RangeList';
+import RangeList from '../RangeList';
 
 import { SheetContainer } from './SheetContainer';
 
 const meta = {
-  title: 'plugins/plugin-sheet/SheetContainer',
+  title: 'plugins/plugin-sheet/containers/SheetContainer',
   component: SheetContainer,
   decorators: [
-    withTheme,
+    withTheme(),
     withLayout({ layout: 'fullscreen' }),
     withClientProvider({ types: [Sheet.Sheet], createSpace: true }),
     withComputeGraphDecorator(),
-    // TODO(wittjosiah): Consider whether we should refactor component so story doesn't need to depend on intents.
     withPluginManager({
       plugins: [...corePlugins()],
       capabilities: [
-        Capability.contributes(Common.Capability.OperationResolver, [
+        Capability.contributes(Capabilities.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: [] };
               }),
           }),
@@ -61,49 +59,46 @@ export default meta;
 export const Default = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
+  const { registry } = useContext(ComputeGraphContext) ?? {};
   const sheet = useTestSheet(space, graph, { cells: createTestCells() });
-  if (!sheet || !space) {
+  if (!sheet || !space || !registry) {
     return null;
   }
 
   return (
     <AttendableContainer id={Obj.getDXN(sheet).toString()} classNames='contents'>
-      <SheetContainer role='article' space={space} subject={sheet} ignoreAttention />
+      <SheetContainer
+        role='article'
+        space={space}
+        subject={sheet}
+        attendableId='test'
+        registry={registry}
+        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 { registry } = useContext(ComputeGraphContext) ?? {};
   const sheet = useTestSheet(space, graph, { cells: { A1: { value: 'Ready' } } });
-  if (!sheet || !space) {
+  if (!sheet || !space || !registry) {
     return null;
   }
 
   return (
     <AttendableContainer id={Obj.getDXN(sheet).toString()} classNames='contents'>
-      <div role='none' className='is-full grid grid-cols-[1fr_20rem]'>
-        <SheetContainer role='article' space={space} subject={sheet} ignoreAttention />
+      <div role='none' className='w-full grid grid-cols-[1fr_20rem]'>
+        <SheetContainer
+          role='article'
+          space={space}
+          subject={sheet}
+          attendableId='test'
+          registry={registry}
+          ignoreAttention
+        />
         <div role='none' data-testid='grid.range-list'>
           <RangeList sheet={sheet} />
         </div>

package/src/containers/SheetContainer/SheetContainer.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { type ComputeGraphRegistry } from '@dxos/compute';
+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 SheetContainerProps = SurfaceComponentProps<
+  SheetType.Sheet,
+  {
+    space: Space;
+    registry: ComputeGraphRegistry;
+    ignoreAttention?: boolean;
+  }
+>;
+
+export const SheetContainer = ({ registry, ...props }: SheetContainerProps) => (
+  <ComputeGraphContextProvider registry={registry}>
+    <SheetContainerInner {...props} />
+  </ComputeGraphContextProvider>
+);
+
+const SheetContainerInner = ({
+  role,
+  subject: sheet,
+  attendableId,
+  space,
+  ignoreAttention,
+}: Omit<SheetContainerProps, '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 id={attendableId!} />
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <Sheet.Content />
+        </Panel.Content>
+        <Panel.Statusbar asChild>
+          <Sheet.Statusbar />
+        </Panel.Statusbar>
+      </Panel.Root>
+    </Sheet.Root>
+  );
+};

package/src/{components → containers}/SheetContainer/index.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2023 DXOS.org
 //
 
 import { SheetContainer } from './SheetContainer';

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 SheetContainer: ComponentType<any> = lazy(() => import('./SheetContainer'));