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

package/src/capabilities/{undo-mappings/undo-mappings.ts → undo-mappings.ts}

@@ -6,8 +6,8 @@ import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability, UndoMapping } from '@dxos/app-framework';
 
-import { meta } from '../../meta';
-import { SheetOperation } from '../../operations';
+import { meta } from '#meta';
+import { SheetOperation } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
@@ -23,7 +23,7 @@ export default Capability.makeModule(() =>
           axisMeta: output.axisMeta,
           values: output.values,
         }),
-        message: ['axis dropped label', { ns: meta.id }],
+        message: ['axis-dropped.label', { ns: meta.id }],
       }),
     ]),
   ),

package/src/components/ComputeGraph/ComputeGraphContextProvider.tsx

@@ -4,7 +4,7 @@
 
 import React, { type PropsWithChildren, createContext, useContext } from 'react';
 
-import { type ComputeGraph, type ComputeGraphRegistry } from '@dxos/compute';
+import { type ComputeGraph, type ComputeGraphRegistry } from '@dxos/compute-hyperformula';
 import { raise } from '@dxos/debug';
 import { type Space } from '@dxos/react-client/echo';
 import { useAsyncState } from '@dxos/react-hooks';

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

@@ -5,26 +5,25 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { testFunctionPlugins } from '@dxos/compute/testing';
-import { Filter } from '@dxos/echo';
-import { Obj } from '@dxos/echo';
-import { Operation } from '@dxos/operation';
-import { useSpace } from '@dxos/react-client/echo';
+import { Operation } from '@dxos/compute';
+import { testFunctionPlugins } from '@dxos/compute-hyperformula/testing';
+import { Filter, Obj } from '@dxos/echo';
+import { useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Button, Input, Toolbar } from '@dxos/react-ui';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/react-ui/testing';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 
-import { useSheetModel } from '../../model';
-import { withComputeGraphDecorator } from '../../testing';
-import { Sheet } from '../../types';
+import { withComputeGraphDecorator } from '#testing';
+import { Sheet } from '#types';
 
+import { useSheetModel } from '../../model';
 import { useComputeGraph } from './ComputeGraphContextProvider';
 
 const FUNCTION_NAME = 'TEST';
 
 const DefaultStory = () => {
-  const space = useSpace();
+  const [space] = useSpaces();
   const graph = useComputeGraph(space);
   const [sheet, setSheet] = useState<Sheet.Sheet>();
   const [text, setText] = useState(`${FUNCTION_NAME}(100)`);
@@ -45,7 +44,13 @@ const DefaultStory = () => {
         setResult({ functions: { standard: f1.length, echo: f2.length } });
       });
 
-      space.db.add(Obj.make(Operation.PersistentOperation, { name: 'test', version: '0.0.1', binding: FUNCTION_NAME }));
+      space.db.add(
+        Obj.make(Operation.PersistentOperation, {
+          [Obj.Meta]: { version: '0.0.1' },
+          name: 'test',
+          binding: FUNCTION_NAME,
+        }),
+      );
     }
   }, [space, graph]);
 
@@ -75,9 +80,7 @@ const DefaultStory = () => {
         </Input.Root>
         <Button onClick={handleTest}>Test</Button>
       </Toolbar.Root>
-      <SyntaxHighlighter language='json'>
-        {JSON.stringify({ space: space?.id, graph: graph?.id, sheet: sheet?.id, model: model?.id, result }, null, 2)}
-      </SyntaxHighlighter>
+      <JsonHighlighter data={{ space: space?.id, graph: graph?.id, sheet: sheet?.id, model: model?.id, result }} />
     </div>
   );
 };

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

@@ -6,17 +6,18 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo, useState } from 'react';
 
 import { Client } from '@dxos/client';
-import { defaultFunctions } from '@dxos/compute';
-import { getRegisteredFunctionNames } from '@dxos/compute/testing';
+import { defaultFunctions } from '@dxos/compute-hyperformula';
+import { getRegisteredFunctionNames } from '@dxos/compute-hyperformula/testing';
 import { Obj } from '@dxos/echo';
 import { createDocAccessor } from '@dxos/echo-db';
 import { useAsyncEffect } from '@dxos/react-hooks';
-import { withTheme } from '@dxos/react-ui/testing';
 import { CellEditor, type CellEditorProps } from '@dxos/react-ui-grid';
+import { withTheme } from '@dxos/react-ui/testing';
 import { automerge } from '@dxos/ui-editor';
 
+import { Sheet } from '#types';
+
 import { sheetExtension } from '../../extensions';
-import { Sheet } from '../../types';
 
 const DefaultStory = ({ value, ...props }: CellEditorProps) => {
   const extensions = useMemo(() => {
@@ -38,9 +39,9 @@ const AutomergeStory = ({ value, ...props }: CellEditorProps) => {
     const space = await client.spaces.create();
 
     const sheet = Sheet.make();
-    Obj.change(sheet, (obj) => {
-      obj.name = 'Test';
-      obj.cells[cell] = { value };
+    Obj.update(sheet, (sheet) => {
+      sheet.name = 'Test';
+      sheet.cells[cell] = { value };
     });
     space.db.add(sheet);
     setObject(sheet);

package/src/components/SheetContent/SheetContent.stories.tsx

@@ -5,23 +5,23 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { ProcessManagerPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { testFunctionPlugins } from '@dxos/compute/testing';
-import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
-import { useSpace } from '@dxos/react-client/echo';
+import { testFunctionPlugins } from '@dxos/compute-hyperformula/testing';
+import { useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
-import { translations } from '../../translations';
-import { Sheet } from '../../types';
+import { createTestCells, useTestSheet, withComputeGraphDecorator } from '#testing';
+import { translations } from '#translations';
+import { Sheet } from '#types';
+
 import { useComputeGraph } from '../ComputeGraph';
 import { SheetRoot } from '../SheetRoot';
-
 import { SheetContent } from './SheetContent';
 
 export const Basic = () => {
-  const space = useSpace();
+  const [space] = useSpaces();
   const graph = useComputeGraph(space);
   const sheet = useTestSheet(space, graph, { cells: createTestCells() });
   if (!sheet || !graph) {
@@ -30,7 +30,7 @@ export const Basic = () => {
 
   return (
     <SheetRoot graph={graph} sheet={sheet} attendableId='test' ignoreAttention>
-      <div role='none' className='grid h-full w-full'>
+      <div className='grid h-full w-full'>
         <SheetContent />
       </div>
     </SheetRoot>
@@ -46,7 +46,7 @@ const meta = {
     withClientProvider({ types: [Sheet.Sheet], createSpace: true }),
     withComputeGraphDecorator({ plugins: testFunctionPlugins }),
     withPluginManager({
-      plugins: [OperationPlugin(), RuntimePlugin()],
+      plugins: [ProcessManagerPlugin()],
     }),
   ],
   parameters: {

package/src/components/SheetContent/SheetContent.tsx

@@ -15,7 +15,7 @@ import React, {
 } from 'react';
 
 import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
-import { type CellRange, rangeToA1Notation } from '@dxos/compute';
+import { type CellRange, rangeToA1Notation } from '@dxos/compute-hyperformula';
 import { Obj } from '@dxos/echo';
 import { defaultColSize, defaultRowSize } from '@dxos/lit-grid';
 import { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
@@ -35,13 +35,13 @@ import {
 } from '@dxos/react-ui-grid';
 import { composable, composableProps } from '@dxos/ui-theme';
 
+import { meta } from '#meta';
+import { SheetOperation } from '#types';
+import { DEFAULT_COLS, DEFAULT_ROWS, SheetCapabilities } from '#types';
+
 import { type RangeController, rangeExtension, sheetExtension } from '../../extensions';
 import { useSelectThreadOnCellFocus } from '../../integrations';
-import { meta } from '../../meta';
-import { DEFAULT_COLS, DEFAULT_ROWS, SheetCapabilities } from '../../types';
-import { SheetOperation } from '../../operations';
 import { useSheetContext } from '../SheetRoot';
-
 import { colLabelCell, rowLabelCell, useSheetModelDxGridProps } from './util';
 
 const inertPosition: DxGridPosition = { plane: 'grid', col: 0, row: 0 };
@@ -145,7 +145,7 @@ export const SheetContent = composable<HTMLDivElement, SheetContentProps>((props
 
   const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
     ({ axis, size, index: numericIndex }) => {
-      Obj.change(model.sheet, (sheet) => {
+      Obj.update(model.sheet, (sheet) => {
         if (axis === 'row') {
           const rowId = sheet.rows[parseInt(numericIndex)];
           sheet.rowMeta[rowId] ??= {};
@@ -341,7 +341,7 @@ export const SheetContent = composable<HTMLDivElement, SheetContentProps>((props
   useSelectThreadOnCellFocus();
 
   return (
-    <div ref={forwardedRef} {...composableProps(props, { role: 'none', classNames: 'relative min-h-0' })}>
+    <div ref={forwardedRef} {...composableProps(props, { classNames: 'relative min-h-0' })}>
       <GridCellEditor getCellContent={getCellContent} extensions={extensions} onBlur={handleBlur} />
       <Grid.Content
         className='[--dx-grid-base:var(--base-surface)] [&_.dx-grid]:absolute [&_.dx-grid]:inset-0'
@@ -379,7 +379,7 @@ export const SheetContent = composable<HTMLDivElement, SheetContentProps>((props
               <Icon
                 icon={contextMenuAxis === 'col' ? 'ph--columns-plus-left--regular' : 'ph--rows-plus-top--regular'}
               />
-              <span>{t(`add ${contextMenuAxis} before label`)}</span>
+              <span>{t(`add-${contextMenuAxis}-before.label`)}</span>
             </DropdownMenu.Item>
             <DropdownMenu.Item
               onClick={() => handleAxisMenuAction('insert-after')}
@@ -388,14 +388,14 @@ export const SheetContent = composable<HTMLDivElement, SheetContentProps>((props
               <Icon
                 icon={contextMenuAxis === 'col' ? 'ph--columns-plus-right--regular' : 'ph--rows-plus-bottom--regular'}
               />
-              <span>{t(`add ${contextMenuAxis} after label`)}</span>
+              <span>{t(`add-${contextMenuAxis}-after.label`)}</span>
             </DropdownMenu.Item>
             <DropdownMenu.Item
               onClick={() => handleAxisMenuAction('drop')}
               data-testid={`grid.${contextMenuAxis}.drop`}
             >
               <Icon icon='ph--backspace--regular' />
-              <span>{t(`delete ${contextMenuAxis} label`)}</span>
+              <span>{t(`delete-${contextMenuAxis}.label`)}</span>
             </DropdownMenu.Item>
           </DropdownMenu.Viewport>
           <DropdownMenu.Arrow />

package/src/components/SheetContent/util.ts

@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { inRange } from '@dxos/compute';
+import { inRange } from '@dxos/compute-hyperformula';
 import { createDocAccessor } from '@dxos/echo-db';
 import { cellClassesForFieldType, parseValue } from '@dxos/react-ui-form';
 import {
@@ -21,8 +21,9 @@ import {
 } from '@dxos/react-ui-grid';
 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(

package/src/components/SheetRoot/SheetRoot.tsx

@@ -4,7 +4,12 @@
 
 import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
 
-import { type CellAddress, type CellRange, type CompleteCellRange, type ComputeGraph } from '@dxos/compute';
+import {
+  type CellAddress,
+  type CellRange,
+  type CompleteCellRange,
+  type ComputeGraph,
+} from '@dxos/compute-hyperformula';
 import { raise } from '@dxos/debug';
 import {
   Grid,
@@ -14,8 +19,9 @@ 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;

package/src/components/SheetStatusbar/SheetStatusbar.tsx

@@ -4,12 +4,12 @@
 
 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 { mapFormulaIndicesToRefs } from '#types';
+
 import { useSheetContext } from '../SheetRoot';
 
 export type SheetStatusbarProps = {};

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

@@ -7,7 +7,7 @@ import React from 'react';
 
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
 import { SheetToolbar } from './SheetToolbar';
 

package/src/components/SheetToolbar/SheetToolbar.tsx

@@ -6,13 +6,12 @@ import { Atom, type Registry, RegistryContext } from '@effect-atom/atom-react';
 import React, { useContext, useMemo } from 'react';
 
 import { useAppGraph } from '@dxos/app-toolkit/ui';
-import { type CompleteCellRange } from '@dxos/compute';
+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 '../SheetRoot';
-
 import { createAlign, useAlignState } from './align';
 import { createStyle, useStyleState } from './style';
 import { type ToolbarStateAtom, useToolbarState } from './useToolbarState';

package/src/components/SheetToolbar/align.ts

@@ -5,7 +5,7 @@
 import { type Registry, RegistryContext } from '@effect-atom/atom-react';
 import { useContext, useEffect } from 'react';
 
-import { type CompleteCellRange, inRange } from '@dxos/compute';
+import { type CompleteCellRange, inRange } from '@dxos/compute-hyperformula';
 import { Obj } from '@dxos/echo';
 import {
   type ActionGraphProps,
@@ -14,11 +14,11 @@ import {
   createMenuItemGroup,
 } from '@dxos/react-ui-menu';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
+import { type AlignKey, type AlignValue, alignKey, rangeFromIndex, rangeToIndex } from '#types';
+
 import { type SheetModel } from '../../model';
-import { type AlignKey, type AlignValue, alignKey, rangeFromIndex, rangeToIndex } from '../../types';
 import { useSheetContext } from '../SheetRoot';
-
 import { type ToolbarState, type ToolbarStateAtom } from './useToolbarState';
 
 export type AlignAction = { key: AlignKey; value: AlignValue };
@@ -50,7 +50,7 @@ export const useAlignState = (stateAtom: ToolbarStateAtom) => {
 
 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}`,
@@ -84,17 +84,17 @@ const createAlignActions = ({ model, state, stateAtom, registry, cursorFallbackR
         };
         const currentState = registry.get(stateAtom);
         if (index < 0) {
-          Obj.change(model.sheet, (obj) => {
+          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) {
-          Obj.change(model.sheet, (obj) => {
+          Obj.update(model.sheet, (obj) => {
             obj.ranges?.splice(index, 1);
           });
           registry.set(stateAtom, { ...currentState, [alignKey]: undefined });
         } else {
-          Obj.change(model.sheet, (obj) => {
+          Obj.update(model.sheet, (obj) => {
             obj.ranges?.splice(index, 1, nextRangeEntity);
           });
           registry.set(stateAtom, { ...currentState, [alignKey]: nextRangeEntity.value });
@@ -104,7 +104,7 @@ const createAlignActions = ({ model, state, stateAtom, registry, cursorFallbackR
         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}`,
       },

package/src/components/SheetToolbar/style.ts

@@ -5,7 +5,7 @@
 import { type Registry, RegistryContext } from '@effect-atom/atom-react';
 import { useContext, useEffect } from 'react';
 
-import { type CompleteCellRange, inRange } from '@dxos/compute';
+import { type CompleteCellRange, inRange } from '@dxos/compute-hyperformula';
 import { Obj } from '@dxos/echo';
 import {
   type ActionGraphProps,
@@ -14,11 +14,11 @@ import {
   createMenuItemGroup,
 } from '@dxos/react-ui-menu';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
+import { type StyleKey, type StyleValue, rangeFromIndex, rangeToIndex } from '#types';
+
 import { type SheetModel } from '../../model';
-import { type StyleKey, type StyleValue, rangeFromIndex, rangeToIndex } from '../../types';
 import { useSheetContext } from '../SheetRoot';
-
 import { type ToolbarState, type ToolbarStateAtom } from './useToolbarState';
 
 export type StyleState = Partial<Record<StyleValue, boolean>>;
@@ -103,13 +103,13 @@ const createStyleActions = ({ model, state, stateAtom, registry, cursorFallbackR
         ) {
           // this value should be unset
           if (index >= 0) {
-            Obj.change(model.sheet, (obj) => {
+            Obj.update(model.sheet, (obj) => {
               obj.ranges?.splice(index, 1);
             });
           }
           registry.set(stateAtom, { ...currentState, [nextRangeEntity.value]: false });
         } else {
-          Obj.change(model.sheet, (obj) => {
+          Obj.update(model.sheet, (obj) => {
             obj.ranges?.push(nextRangeEntity);
           });
           registry.set(stateAtom, { ...currentState, [nextRangeEntity.value]: true });
@@ -119,7 +119,7 @@ const createStyleActions = ({ model, state, stateAtom, registry, cursorFallbackR
         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],
       },
     );

package/src/containers/RangeList/RangeList.tsx

@@ -5,40 +5,41 @@
 import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
-import { rangeToA1Notation } from '@dxos/compute';
-import { Obj } from '@dxos/echo';
+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 { 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);
-      Obj.change(sheet, (obj) => {
-        obj.ranges.splice(index, 1);
+      updateSheet((sheet) => {
+        sheet.ranges.splice(index, 1);
       });
     },
-    [sheet],
+    [sheet, updateSheet],
   );
   return (
     <>
       <Input.Root>
-        <Input.Label>{t('range list heading')}</Input.Label>
+        <Input.Label>{t('range-list.heading')}</Input.Label>
       </Input.Root>
       {sheet.ranges.length < 1 ? (
         <Message.Root>
-          <Message.Title>{t('no ranges message')}</Message.Title>
+          <Message.Title>{t('no-ranges.message')}</Message.Title>
         </Message.Root>
       ) : (
         <List.Root<Sheet.Range> items={sheet.ranges} isItem={Schema.is(Sheet.Range)}>
@@ -47,10 +48,10 @@ export const RangeList = ({ sheet }: RangeListProps) => {
               <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

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { RangeList } from './RangeList';
-
-export default RangeList;
+export { RangeList as default } from './RangeList';

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

@@ -8,27 +8,28 @@ 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 { Operation, OperationHandlerSet } from '@dxos/operation';
 import { corePlugins } from '@dxos/plugin-testing';
-import { useSpace } from '@dxos/react-client/echo';
+import { useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout } from '@dxos/react-ui/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 { Sheet } from '../../types';
-import { SheetOperation } from '../../operations';
-import RangeList from '../RangeList';
+import { ComputeGraphContext, useComputeGraph } from '#components';
+import { createTestCells, useTestSheet, withComputeGraphDecorator } from '#testing';
+import { translations } from '#translations';
+import { SheetOperation } from '#types';
+import { Sheet } from '#types';
 
-import { SheetContainer } from './SheetContainer';
+import RangeList from '../RangeList';
+import { SheetArticle } from './SheetArticle';
 
 const meta = {
-  title: 'plugins/plugin-sheet/containers/SheetContainer',
-  component: SheetContainer,
+  title: 'plugins/plugin-sheet/containers/SheetArticle',
+  component: SheetArticle,
   decorators: [
+    withTheme(),
     withLayout({ layout: 'fullscreen' }),
     withClientProvider({ types: [Sheet.Sheet], createSpace: true }),
     withComputeGraphDecorator(),
@@ -53,12 +54,12 @@ const meta = {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<typeof SheetContainer>;
+} satisfies Meta<typeof SheetArticle>;
 
 export default meta;
 
 export const Default = () => {
-  const space = useSpace();
+  const [space] = useSpaces();
   const graph = useComputeGraph(space);
   const { registry } = useContext(ComputeGraphContext) ?? {};
   const sheet = useTestSheet(space, graph, { cells: createTestCells() });
@@ -68,7 +69,7 @@ export const Default = () => {
 
   return (
     <AttendableContainer id={Obj.getDXN(sheet).toString()} classNames='contents'>
-      <SheetContainer
+      <SheetArticle
         role='article'
         space={space}
         subject={sheet}
@@ -81,7 +82,7 @@ export const Default = () => {
 };
 
 export const Spec = () => {
-  const space = useSpace();
+  const [space] = useSpaces();
   const graph = useComputeGraph(space);
   const { registry } = useContext(ComputeGraphContext) ?? {};
   const sheet = useTestSheet(space, graph, { cells: { A1: { value: 'Ready' } } });
@@ -91,8 +92,8 @@ export const Spec = () => {
 
   return (
     <AttendableContainer id={Obj.getDXN(sheet).toString()} classNames='contents'>
-      <div role='none' className='w-full grid grid-cols-[1fr_20rem]'>
-        <SheetContainer
+      <div className='w-full grid grid-cols-[1fr_20rem]'>
+        <SheetArticle
           role='article'
           space={space}
           subject={sheet}
@@ -100,7 +101,7 @@ export const Spec = () => {
           registry={registry}
           ignoreAttention
         />
-        <div role='none' data-testid='grid.range-list'>
+        <div data-testid='grid.range-list'>
           <RangeList sheet={sheet} />
         </div>
       </div>