@dxos/plugin-sheet 0.8.4-main.1da679c → 0.8.4-main.21d9917

package/src/components/ComputeGraph/compute-graph.stories.tsx

@@ -2,23 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { testFunctionPlugins } from '@dxos/compute/testing';
-import { Filter, Obj } from '@dxos/echo';
-import { FunctionType } from '@dxos/functions';
+import { Filter } from '@dxos/echo';
+import { Function } from '@dxos/functions';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Button, Input, Toolbar } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { withTheme } from '@dxos/storybook-utils';
 
 import { useSheetModel } from '../../model';
 import { withComputeGraphDecorator } from '../../testing';
-import { SheetType, createSheet } from '../../types';
+import { Sheet } from '../../types';
 
 import { useComputeGraph } from './ComputeGraphContextProvider';
 
@@ -27,13 +25,13 @@ const FUNCTION_NAME = 'TEST';
 const DefaultStory = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const [sheet, setSheet] = useState<SheetType>();
+  const [sheet, setSheet] = useState<Sheet.Sheet>();
   const [text, setText] = useState(`${FUNCTION_NAME}(100)`);
   const [result, setResult] = useState<any>();
   const model = useSheetModel(graph, sheet);
   useEffect(() => {
     if (space) {
-      const sheet = space.db.add(createSheet());
+      const sheet = space.db.add(Sheet.make());
       setSheet(sheet);
     }
   }, [space]);
@@ -46,14 +44,14 @@ const DefaultStory = () => {
         setResult({ functions: { standard: f1.length, echo: f2.length } });
       });
 
-      space.db.add(Obj.make(FunctionType, { name: 'test', version: '0.0.1', binding: FUNCTION_NAME }));
+      space.db.add(Function.make({ name: 'test', version: '0.0.1', binding: FUNCTION_NAME }));
     }
   }, [space, graph]);
 
   const inputRef = useRef<HTMLInputElement | null>(null);
   const handleTest = async () => {
     if (space && graph) {
-      const { objects } = await space.db.query(Filter.type(FunctionType)).run();
+      const objects = await space.db.query(Filter.type(Function.Function)).run();
       const mapped = graph.mapFunctionBindingToId(text);
       const unmapped = graph.mapFunctionBindingFromId(mapped);
       const internal = graph.mapFormulaToNative(text);
@@ -89,9 +87,9 @@ const meta = {
   title: 'plugins/plugin-sheet/functions',
   render: DefaultStory,
   decorators: [
-    withClientProvider({ types: [FunctionType, SheetType], createIdentity: true, createSpace: true }),
-    withComputeGraphDecorator({ plugins: testFunctionPlugins }),
     withTheme,
+    withClientProvider({ types: [Function.Function, Sheet.Sheet], createIdentity: true, createSpace: true }),
+    withComputeGraphDecorator({ plugins: testFunctionPlugins }),
   ],
 } satisfies Meta<typeof DefaultStory>;
 

package/src/components/FunctionEditor/FunctionEditor.tsx

@@ -26,9 +26,9 @@ export const FunctionEditor = () => {
   }
 
   return (
-    <div className='flex shrink-0 justify-between items-center px-4 py-1 text-sm bg-toolbarSurface border-bs !border-subduedSeparator'>
+    <div className='flex shrink-0 justify-between items-center pli-4 plb-1 text-sm bg-toolbarSurface border-bs !border-subduedSeparator'>
       <div className='flex gap-4 items-center'>
-        <div className='flex w-16 items-center font-mono'>
+        <div className='flex is-16 items-center font-mono'>
           {(range && rangeToA1Notation(range)) || (cursor && addressToA1Notation(cursor))}
         </div>
         <div className='flex gap-2 items-center'>

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

@@ -2,20 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { testFunctionPlugins } from '@dxos/compute/testing';
+import { OperationPlugin, RuntimePlugin } from '@dxos/plugin-testing';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
 import { translations } from '../../translations';
-import { SheetType } from '../../types';
+import { Sheet } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
 import { SheetProvider } from '../SheetContext';
 
@@ -31,7 +30,9 @@ export const Basic = () => {
 
   return (
     <SheetProvider graph={graph} sheet={sheet} ignoreAttention>
-      <GridSheet />
+      <div role='none' className='grid bs-full is-full'>
+        <GridSheet />
+      </div>
     </SheetProvider>
   );
 };
@@ -40,15 +41,17 @@ const meta = {
   title: 'plugins/plugin-sheet/GridSheet',
   component: GridSheet,
   decorators: [
-    withClientProvider({ types: [SheetType], createSpace: true }),
-    withComputeGraphDecorator(),
     withTheme,
-    withLayout({ fullscreen: true, classNames: 'grid' }),
+    withClientProvider({ types: [Sheet.Sheet], createSpace: true }),
+    withComputeGraphDecorator({ plugins: testFunctionPlugins }),
     withPluginManager({
-      plugins: [IntentPlugin()],
+      plugins: [OperationPlugin(), RuntimePlugin()],
     }),
   ],
-  parameters: { translations },
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
 } satisfies Meta<typeof GridSheet>;
 
 export default meta;

package/src/components/GridSheet/GridSheet.tsx

@@ -13,7 +13,7 @@ import React, {
   useState,
 } from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+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';
@@ -34,8 +34,8 @@ import {
 
 import { type RangeController, rangeExtension, sheetExtension } from '../../extensions';
 import { useSelectThreadOnCellFocus, useUpdateFocusedCellOnThreadSelection } from '../../integrations';
-import { SHEET_PLUGIN } from '../../meta';
-import { DEFAULT_COLS, DEFAULT_ROWS, SheetAction } from '../../types';
+import { meta } from '../../meta';
+import { DEFAULT_COLS, DEFAULT_ROWS, SheetOperation } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
 import { colLabelCell, rowLabelCell, useSheetModelDxGridProps } from './util';
@@ -69,15 +69,15 @@ const sheetRowDefault = {
 };
 
 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
   //  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 rangeController = useRef<RangeController>();
+  const { invokePromise } = useOperationInvoker();
+  const rangeController = useRef<RangeController>(null);
   const { hasAttention } = useAttention(id);
 
   const handleFocus = useCallback(
@@ -172,12 +172,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',
+            },
           });
       }
     },
@@ -257,31 +265,30 @@ 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);
 
   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,7 +315,7 @@ 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 '>
+    <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}

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

@@ -2,22 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 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 { Obj } from '@dxos/echo';
+import { createDocAccessor } from '@dxos/echo-db';
 import { useAsyncEffect } from '@dxos/react-hooks';
-import { automerge } from '@dxos/react-ui-editor';
+import { withTheme } from '@dxos/react-ui/testing';
 import { CellEditor, type CellEditorProps } from '@dxos/react-ui-grid';
-import { withTheme } from '@dxos/storybook-utils';
+import { automerge } from '@dxos/ui-editor';
 
 import { sheetExtension } from '../../extensions';
-import { SheetType, createSheet } from '../../types';
+import { Sheet } from '../../types';
 
 const DefaultStory = ({ value, ...props }: CellEditorProps) => {
   const extensions = useMemo(() => {
@@ -31,16 +30,18 @@ const DefaultStory = ({ value, ...props }: CellEditorProps) => {
 
 const AutomergeStory = ({ value, ...props }: CellEditorProps) => {
   const cell = 'A1';
-  const [object, setObject] = useState<SheetType>();
+  const [object, setObject] = useState<Sheet.Sheet>();
   useAsyncEffect(async () => {
-    const client = new Client({ types: [SheetType] });
+    const client = new Client({ types: [Sheet.Sheet] });
     await client.initialize();
     await client.halo.createIdentity();
     const space = await client.spaces.create();
 
-    const sheet = createSheet();
-    sheet.name = 'Test';
-    sheet.cells[cell] = { value };
+    const sheet = Sheet.make();
+    Obj.change(sheet, (s) => {
+      s.name = 'Test';
+      s.cells[cell] = { value };
+    });
     space.db.add(sheet);
     setObject(sheet);
   }, [value]);
@@ -61,9 +62,10 @@ const AutomergeStory = ({ value, ...props }: CellEditorProps) => {
 
 const meta = {
   title: 'plugins/plugin-sheet/CellEditor',
+
+  decorators: [withTheme],
   component: CellEditor,
   render: DefaultStory,
-  decorators: [withTheme],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/GridSheet/util.ts

@@ -5,7 +5,7 @@
 import { useEffect, useState } from 'react';
 
 import { inRange } from '@dxos/compute';
-import { createDocAccessor } from '@dxos/react-client/echo';
+import { createDocAccessor } from '@dxos/echo-db';
 import { cellClassesForFieldType, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
@@ -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';
@@ -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,30 +2,33 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+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 { 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);
+      Obj.change(sheet, (s) => {
+        s.ranges.splice(index, 1);
+      });
     },
     [sheet],
   );
@@ -37,7 +40,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,63 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
+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 { GraphPlugin } from '@dxos/plugin-graph';
-import { fullyQualifiedId, useSpace } from '@dxos/react-client/echo';
+import { Obj } from '@dxos/echo';
+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 { withLayout, 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, SheetOperation } 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,
+    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, [
+          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: [] };
+              }),
+          }),
+        ]),
+      ],
+    }),
+  ],
+  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,12 +67,31 @@ 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 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);
@@ -48,9 +101,9 @@ export const Spec = () => {
   }
 
   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='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>
@@ -58,35 +111,3 @@ export const Spec = () => {
     </AttendableContainer>
   );
 };
-
-const 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 },
-} satisfies Meta<typeof SheetContainer>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;

package/src/components/SheetContainer/SheetContainer.tsx

@@ -2,35 +2,47 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import React, { Fragment } from 'react';
 
-import { type Space, fullyQualifiedId } from '@dxos/react-client/echo';
-import { StackItem } from '@dxos/react-ui-stack';
+import { type SurfaceComponentProps } from '@dxos/app-framework/react';
+import { Obj } from '@dxos/echo';
+import { type Space } from '@dxos/react-client/echo';
+import { Layout, type LayoutFlexProps } from '@dxos/react-ui-mosaic';
 
-import { type SheetType } from '../../types';
+import { type Sheet } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
 import { FunctionEditor } from '../FunctionEditor';
 import { GridSheet } from '../GridSheet';
 import { SheetProvider } from '../SheetContext';
 import { SheetToolbar } from '../SheetToolbar';
 
-export type SheetContainerProps = {
-  space: Space;
-  sheet: SheetType;
-  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 {...(role === 'section' && { classNames: 'aspect-video' })}>
-        <SheetToolbar id={fullyQualifiedId(sheet)} />
-        <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' />;