@dxos/plugin-sheet 0.8.4-main.406dc2a → 0.8.4-main.4f23b4e393

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/compute';
+
+import { SheetOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, SheetOperationHandlerSet);
+  }),
+);

package/src/capabilities/react-surface.tsx

@@ -2,39 +2,48 @@
 // Copyright 2025 DXOS.org
 //
 
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface, useCapability } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { getSpace } from '@dxos/react-client/echo';
 
-import { ComputeGraphContextProvider, RangeList, SheetContainer } from '../components';
-import { meta } from '../meta';
-import { SheetType } from '../types';
+import { RangeList, SheetContainer } from '#containers';
+import { Sheet, SheetCapabilities } from '#types';
 
-import { SheetCapabilities } from './capabilities';
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'sheet',
+        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
+        role: ['article', 'section'],
+        filter: (data): data is { attendableId: string; subject: Sheet.Sheet } =>
+          typeof data.attendableId === 'string' &&
+          Obj.instanceOf(Sheet.Sheet, data.subject) &&
+          !!Obj.getDatabase(data.subject),
+        component: ({ data, role }) => {
+          const computeGraphRegistry = useCapability(SheetCapabilities.ComputeGraphRegistry);
 
-export default () =>
-  contributes(Capabilities.ReactSurface, [
-    createSurface({
-      id: `${meta.id}/sheet`,
-      role: ['article', 'section'],
-      filter: (data): data is { subject: SheetType } =>
-        Obj.instanceOf(SheetType, data.subject) && !!getSpace(data.subject),
-      component: ({ data, role }) => {
-        const computeGraphRegistry = useCapability(SheetCapabilities.ComputeGraphRegistry);
-
-        return (
-          <ComputeGraphContextProvider registry={computeGraphRegistry}>
-            <SheetContainer space={getSpace(data.subject)!} sheet={data.subject} role={role} />
-          </ComputeGraphContextProvider>
-        );
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/object-settings`,
-      role: 'object-settings',
-      filter: (data): data is { subject: SheetType } => Obj.instanceOf(SheetType, data.subject),
-      component: ({ data }) => <RangeList sheet={data.subject} />,
-    }),
-  ]);
+          return (
+            <SheetContainer
+              role={role}
+              subject={data.subject}
+              attendableId={data.attendableId}
+              space={getSpace(data.subject)!}
+              registry={computeGraphRegistry}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'object-properties',
+        filter: AppSurface.object(AppSurface.ObjectProperties, Sheet.Sheet),
+        component: ({ data }) => <RangeList sheet={data.subject} />,
+      }),
+    ]),
+  ),
+);

package/src/capabilities/state.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+
+import { SheetCapabilities } from '#types';
+
+const createGridRegistry = (): SheetCapabilities.GridRegistry => {
+  const grids = new Map<string, SheetCapabilities.GridEntry>();
+  return {
+    register: (attendableId, grid, setActiveRefs) => {
+      grids.set(attendableId, { grid, setActiveRefs });
+    },
+    unregister: (attendableId) => {
+      grids.delete(attendableId);
+    },
+    get: (attendableId) => grids.get(attendableId),
+  };
+};
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const gridInstances = createGridRegistry();
+    return Capability.contributes(SheetCapabilities.GridInstances, gridInstances);
+  }),
+);

package/src/capabilities/undo-mappings.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability, UndoMapping } from '@dxos/app-framework';
+
+import { meta } from '#meta';
+import { SheetOperation } from '#types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.UndoMapping, [
+      UndoMapping.make({
+        operation: SheetOperation.DropAxis,
+        inverse: SheetOperation.RestoreAxis,
+        deriveContext: (input, output) => ({
+          model: input.model,
+          axis: output.axis,
+          axisIndex: output.axisIndex,
+          index: output.index,
+          axisMeta: output.axisMeta,
+          values: output.values,
+        }),
+        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,33 +5,33 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { testFunctionPlugins } from '@dxos/compute/testing';
+import { Operation } from '@dxos/compute';
+import { testFunctionPlugins } from '@dxos/compute-hyperformula/testing';
 import { Filter, Obj } from '@dxos/echo';
-import { FunctionType } from '@dxos/functions';
-import { useSpace } from '@dxos/react-client/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 { SheetType, createSheet } 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<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]);
@@ -44,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(Obj.make(Operation.PersistentOperation, { 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(Operation.PersistentOperation)).run();
       const mapped = graph.mapFunctionBindingToId(text);
       const unmapped = graph.mapFunctionBindingFromId(mapped);
       const internal = graph.mapFormulaToNative(text);
@@ -74,9 +74,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>
   );
 };
@@ -84,11 +82,15 @@ const DefaultStory = () => {
 export const Default: Story = {};
 
 const meta = {
-  title: 'plugins/plugin-sheet/functions',
+  title: 'plugins/plugin-sheet/components/functions',
   render: DefaultStory,
   decorators: [
-    withTheme,
-    withClientProvider({ types: [FunctionType, SheetType], createIdentity: true, createSpace: true }),
+    withTheme(),
+    withClientProvider({
+      types: [Operation.PersistentOperation, Sheet.Sheet],
+      createIdentity: true,
+      createSpace: true,
+    }),
     withComputeGraphDecorator({ plugins: testFunctionPlugins }),
   ],
 } satisfies Meta<typeof DefaultStory>;

package/src/components/Sheet/Sheet.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { SheetContent } from '../SheetContent';
+import { SheetRoot } from '../SheetRoot';
+import { SheetStatusbar } from '../SheetStatusbar';
+import { SheetToolbar } from '../SheetToolbar';
+
+export { useSheetContext, type SheetContextValue, type SheetRootProps } from '../SheetRoot';
+export { type SheetContentProps } from '../SheetContent';
+export { type SheetToolbarProps } from '../SheetToolbar';
+export { type SheetStatusbarProps } from '../SheetStatusbar';
+
+export const Sheet = {
+  Root: SheetRoot,
+  Toolbar: SheetToolbar,
+  Content: SheetContent,
+  Statusbar: SheetStatusbar,
+};

package/src/components/Sheet/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Sheet';

package/src/components/{GridSheet → SheetContent}/SheetCellEditor.stories.tsx

@@ -6,16 +6,18 @@ 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 { 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 { automerge } from '@dxos/react-ui-editor';
 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 { SheetType, createSheet } from '../../types';
 
 const DefaultStory = ({ value, ...props }: CellEditorProps) => {
   const extensions = useMemo(() => {
@@ -29,16 +31,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.update(sheet, (sheet) => {
+      sheet.name = 'Test';
+      sheet.cells[cell] = { value };
+    });
     space.db.add(sheet);
     setObject(sheet);
   }, [value]);
@@ -58,9 +62,9 @@ const AutomergeStory = ({ value, ...props }: CellEditorProps) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-sheet/CellEditor',
+  title: 'plugins/plugin-sheet/components/CellEditor',
 
-  decorators: [withTheme],
+  decorators: [withTheme()],
   component: CellEditor,
   render: DefaultStory,
 } satisfies Meta<typeof DefaultStory>;

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

@@ -0,0 +1,60 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+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 { useComputeGraph } from '../ComputeGraph';
+import { SheetRoot } from '../SheetRoot';
+import { SheetContent } from './SheetContent';
+
+export const Basic = () => {
+  const [space] = useSpaces();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
+  if (!sheet || !graph) {
+    return null;
+  }
+
+  return (
+    <SheetRoot graph={graph} sheet={sheet} attendableId='test' ignoreAttention>
+      <div className='grid h-full w-full'>
+        <SheetContent />
+      </div>
+    </SheetRoot>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-sheet/components/SheetContent',
+  component: SheetContent,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withClientProvider({ types: [Sheet.Sheet], createSpace: true }),
+    withComputeGraphDecorator({ plugins: testFunctionPlugins }),
+    withPluginManager({
+      plugins: [OperationPlugin(), RuntimePlugin()],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof SheetContent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;

package/src/components/{GridSheet/GridSheet.tsx → SheetContent/SheetContent.tsx}

@@ -8,13 +8,15 @@ import React, {
   type MouseEvent,
   type WheelEvent,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { type CellRange, rangeToA1Notation } from '@dxos/compute';
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+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';
 import { useAttention } from '@dxos/react-ui-attention';
@@ -31,13 +33,15 @@ import {
   editorKeys,
   parseCellIndex,
 } from '@dxos/react-ui-grid';
+import { composable, composableProps } from '@dxos/ui-theme';
 
-import { type RangeController, rangeExtension, sheetExtension } from '../../extensions';
-import { useSelectThreadOnCellFocus, useUpdateFocusedCellOnThreadSelection } from '../../integrations';
-import { meta } from '../../meta';
-import { DEFAULT_COLS, DEFAULT_ROWS, SheetAction } from '../../types';
-import { useSheetContext } from '../SheetContext';
+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 { useSheetContext } from '../SheetRoot';
 import { colLabelCell, rowLabelCell, useSheetModelDxGridProps } from './util';
 
 const inertPosition: DxGridPosition = { plane: 'grid', col: 0, row: 0 };
@@ -68,15 +72,29 @@ const sheetRowDefault = {
   grid: { size: defaultRowSize, resizeable: true },
 };
 
-export const GridSheet = () => {
+export type SheetContentProps = {};
+
+export const SheetContent = composable<HTMLDivElement, SheetContentProps>((props, forwardedRef) => {
   const { t } = useTranslation(meta.id);
-  const { id, model, editing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs, ignoreAttention } =
-    useSheetContext();
+  const {
+    id,
+    attendableId,
+    model,
+    editing,
+    setCursor,
+    setRange,
+    cursor,
+    cursorFallbackRange,
+    activeRefs,
+    setActiveRefs,
+    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 { invokePromise } = useOperationInvoker();
   const rangeController = useRef<RangeController>(null);
   const { hasAttention } = useAttention(id);
 
@@ -127,15 +145,17 @@ export const GridSheet = () => {
 
   const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
     ({ axis, size, index: numericIndex }) => {
-      if (axis === 'row') {
-        const rowId = model.sheet.rows[parseInt(numericIndex)];
-        model.sheet.rowMeta[rowId] ??= {};
-        model.sheet.rowMeta[rowId].size = size;
-      } else {
-        const columnId = model.sheet.columns[parseInt(numericIndex)];
-        model.sheet.columnMeta[columnId] ??= {};
-        model.sheet.columnMeta[columnId].size = size;
-      }
+      Obj.update(model.sheet, (sheet) => {
+        if (axis === 'row') {
+          const rowId = sheet.rows[parseInt(numericIndex)];
+          sheet.rowMeta[rowId] ??= {};
+          sheet.rowMeta[rowId].size = size;
+        } else {
+          const columnId = sheet.columns[parseInt(numericIndex)];
+          sheet.columnMeta[columnId] ??= {};
+          sheet.columnMeta[columnId].size = size;
+        }
+      });
     },
     [model],
   );
@@ -172,12 +192,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 +285,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),
@@ -303,23 +330,31 @@ export const GridSheet = () => {
     [model],
   );
 
-  useUpdateFocusedCellOnThreadSelection(dxGrid);
+  const [gridInstances] = useCapabilities(SheetCapabilities.GridInstances);
+  useEffect(() => {
+    if (dxGrid && gridInstances) {
+      gridInstances.register(attendableId, dxGrid, setActiveRefs);
+      return () => gridInstances.unregister(attendableId);
+    }
+  }, [dxGrid, gridInstances, attendableId, setActiveRefs]);
+
   useSelectThreadOnCellFocus();
 
   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 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'
         initialCells={initialCells}
         limitColumns={DEFAULT_COLS}
         limitRows={DEFAULT_ROWS}
         columns={columns}
         rows={rows}
-        // TODO(burdon): `col` vs. `column`?
         columnDefault={sheetColDefault}
         rowDefault={sheetRowDefault}
+        activeRefs={activeRefs}
         frozen={frozen}
+        overscroll='trap'
         onAxisResize={handleAxisResize}
         onSelect={handleSelect}
         onFocus={handleFocus}
@@ -327,9 +362,6 @@ export const GridSheet = () => {
         onKeyDown={handleKeyDown}
         onContextMenu={handleContextMenu}
         onClick={handleClick}
-        overscroll='trap'
-        className='[--dx-grid-base:var(--baseSurface)] [&_.dx-grid]:absolute [&_.dx-grid]:inset-0'
-        activeRefs={activeRefs}
         ref={setDxGrid}
       />
       <DropdownMenu.Root
@@ -345,27 +377,25 @@ export const GridSheet = () => {
               data-testid={`grid.${contextMenuAxis}.insert-before`}
             >
               <Icon
-                size={5}
                 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')}
               data-testid={`grid.${contextMenuAxis}.insert-after`}
             >
               <Icon
-                size={5}
                 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 size={5} icon='ph--backspace--regular' />
-              <span>{t(`delete ${contextMenuAxis} label`)}</span>
+              <Icon icon='ph--backspace--regular' />
+              <span>{t(`delete-${contextMenuAxis}.label`)}</span>
             </DropdownMenu.Item>
           </DropdownMenu.Viewport>
           <DropdownMenu.Arrow />
@@ -373,4 +403,4 @@ export const GridSheet = () => {
       </DropdownMenu.Root>
     </div>
   );
-};
+});

package/src/components/{RangeList → SheetContent}/index.ts

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