@dxos/plugin-sheet 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.c351d160a8",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -14,15 +14,15 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs",
-      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts"
     },
     "./types": {
+      "source": "./src/types/index.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": "./dist/lib/node-esm/types/index.mjs",
-      "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts"
     }
   },
@@ -58,78 +58,78 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^10.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.8.4-main.bc674ce",
-    "@dxos/client": "0.8.4-main.bc674ce",
-    "@dxos/async": "0.8.4-main.bc674ce",
-    "@dxos/compute": "0.8.4-main.bc674ce",
-    "@dxos/context": "0.8.4-main.bc674ce",
-    "@dxos/crypto": "0.8.4-main.bc674ce",
-    "@dxos/echo": "0.8.4-main.bc674ce",
-    "@dxos/debug": "0.8.4-main.bc674ce",
-    "@dxos/echo-db": "0.8.4-main.bc674ce",
-    "@dxos/functions": "0.8.4-main.bc674ce",
-    "@dxos/keys": "0.8.4-main.bc674ce",
-    "@dxos/lit-grid": "0.8.4-main.bc674ce",
-    "@dxos/invariant": "0.8.4-main.bc674ce",
-    "@dxos/log": "0.8.4-main.bc674ce",
-    "@dxos/operation": "0.8.4-main.bc674ce",
-    "@dxos/plugin-automation": "0.8.4-main.bc674ce",
-    "@dxos/plugin-client": "0.8.4-main.bc674ce",
-    "@dxos/plugin-graph": "0.8.4-main.bc674ce",
-    "@dxos/plugin-markdown": "0.8.4-main.bc674ce",
-    "@dxos/plugin-script": "0.8.4-main.bc674ce",
-    "@dxos/plugin-space": "0.8.4-main.bc674ce",
-    "@dxos/plugin-deck": "0.8.4-main.bc674ce",
-    "@dxos/plugin-stack": "0.8.4-main.bc674ce",
-    "@dxos/plugin-thread": "0.8.4-main.bc674ce",
-    "@dxos/react-client": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-attention": "0.8.4-main.bc674ce",
-    "@dxos/react-hooks": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-editor": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-grid": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-form": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-menu": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-mosaic": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-stack": "0.8.4-main.bc674ce",
-    "@dxos/types": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-list": "0.8.4-main.bc674ce",
-    "@dxos/ui-editor": "0.8.4-main.bc674ce",
-    "@dxos/schema": "0.8.4-main.bc674ce",
-    "@dxos/util": "0.8.4-main.bc674ce",
-    "@dxos/plugin-attention": "0.8.4-main.bc674ce"
+    "@dxos/app-toolkit": "0.8.4-main.c351d160a8",
+    "@dxos/app-framework": "0.8.4-main.c351d160a8",
+    "@dxos/compute": "0.8.4-main.c351d160a8",
+    "@dxos/client": "0.8.4-main.c351d160a8",
+    "@dxos/async": "0.8.4-main.c351d160a8",
+    "@dxos/debug": "0.8.4-main.c351d160a8",
+    "@dxos/echo": "0.8.4-main.c351d160a8",
+    "@dxos/echo-db": "0.8.4-main.c351d160a8",
+    "@dxos/functions": "0.8.4-main.c351d160a8",
+    "@dxos/invariant": "0.8.4-main.c351d160a8",
+    "@dxos/keys": "0.8.4-main.c351d160a8",
+    "@dxos/log": "0.8.4-main.c351d160a8",
+    "@dxos/lit-grid": "0.8.4-main.c351d160a8",
+    "@dxos/operation": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-automation": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-client": "0.8.4-main.c351d160a8",
+    "@dxos/crypto": "0.8.4-main.c351d160a8",
+    "@dxos/context": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-deck": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-graph": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-script": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-space": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-stack": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-thread": "0.8.4-main.c351d160a8",
+    "@dxos/react-client": "0.8.4-main.c351d160a8",
+    "@dxos/react-hooks": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-attention": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-editor": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-attention": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-grid": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-form": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-list": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-menu": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-mosaic": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-stack": "0.8.4-main.c351d160a8",
+    "@dxos/schema": "0.8.4-main.c351d160a8",
+    "@dxos/ui-editor": "0.8.4-main.c351d160a8",
+    "@dxos/types": "0.8.4-main.c351d160a8",
+    "@dxos/util": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-markdown": "0.8.4-main.c351d160a8"
   },
   "devDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
     "@lezer/generator": "^1.7.1",
     "@tldraw/indices": "^2.0.0-alpha.14",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "@types/react-window": "^2.0.0",
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/lit-grid": "0.8.4-main.bc674ce",
-    "@dxos/echo-generator": "0.8.4-main.bc674ce",
-    "@dxos/random": "0.8.4-main.bc674ce",
-    "@dxos/plugin-testing": "0.8.4-main.bc674ce",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.bc674ce",
-    "@dxos/storybook-utils": "0.8.4-main.bc674ce",
-    "@dxos/test-utils": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce",
-    "@dxos/ui-types": "0.8.4-main.bc674ce"
+    "vite": "^7.1.11",
+    "@dxos/echo-generator": "0.8.4-main.c351d160a8",
+    "@dxos/lit-grid": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-testing": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui": "0.8.4-main.c351d160a8",
+    "@dxos/random": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.c351d160a8",
+    "@dxos/storybook-utils": "0.8.4-main.c351d160a8",
+    "@dxos/test-utils": "0.8.4-main.c351d160a8",
+    "@dxos/ui-types": "0.8.4-main.c351d160a8",
+    "@dxos/ui-theme": "0.8.4-main.c351d160a8"
   },
   "peerDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
-    "effect": "3.19.11",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce",
-    "@dxos/react-ui": "0.8.4-main.bc674ce"
+    "@dxos/react-ui": "0.8.4-main.c351d160a8",
+    "@dxos/ui-theme": "0.8.4-main.c351d160a8"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.tsx

@@ -3,50 +3,43 @@
 //
 
 import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
 
-import { ActivationEvent, Capability, Common, Plugin } from '@dxos/app-framework';
-import { Operation } from '@dxos/operation';
+import { ActivationEvent, Plugin } from '@dxos/app-framework';
+import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
+import { Annotation } from '@dxos/echo';
 import { AutomationEvents } from '@dxos/plugin-automation';
 import { ClientEvents } from '@dxos/plugin-client';
 import { MarkdownEvents } from '@dxos/plugin-markdown';
-import { SpaceCapabilities, SpaceEvents } from '@dxos/plugin-space';
 import { type CreateObject } from '@dxos/plugin-space/types';
 
 import { AnchorSort, ComputeGraphRegistry, Markdown, OperationResolver, ReactSurface } from './capabilities';
 import { meta } from './meta';
 import { serializer } from './serializer';
 import { translations } from './translations';
-import { Sheet, SheetOperation } from './types';
+import { Sheet } from './types';
 
 export const SheetPlugin = Plugin.define(meta).pipe(
-  Plugin.addModule({
-    activatesOn: ActivationEvent.allOf(ClientEvents.ClientReady, AutomationEvents.ComputeRuntimeReady),
-    activate: ComputeGraphRegistry,
-  }),
-  Common.Plugin.addTranslationsModule({ translations }),
-  Common.Plugin.addMetadataModule({
+  AppPlugin.addMetadataModule({
     metadata: {
       id: Sheet.Sheet.typename,
       metadata: {
         label: (object: Sheet.Sheet) => object.name,
-        icon: 'ph--grid-nine--regular',
-        iconHue: 'indigo',
+        icon: Annotation.IconAnnotation.get(Sheet.Sheet).pipe(Option.getOrThrow).icon,
+        iconHue: Annotation.IconAnnotation.get(Sheet.Sheet).pipe(Option.getOrThrow).hue ?? 'white',
         serializer,
         comments: 'anchored',
         createObject: ((props) => Effect.sync(() => Sheet.make(props))) satisfies CreateObject,
       },
     },
   }),
-  Common.Plugin.addSchemaModule({ schema: [Sheet.Sheet] }),
+  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addSchemaModule({ schema: [Sheet.Sheet] }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
   Plugin.addModule({
-    id: 'on-space-created',
-    activatesOn: SpaceEvents.SpaceCreated,
-    activate: () =>
-      Effect.succeed(
-        Capability.contributes(SpaceCapabilities.OnCreateSpace, (params) =>
-          Operation.invoke(SheetOperation.OnCreateSpace, params),
-        ),
-      ),
+    activatesOn: ActivationEvent.allOf(ClientEvents.ClientReady, AutomationEvents.ComputeRuntimeReady),
+    activate: ComputeGraphRegistry,
   }),
   Plugin.addModule({
     activatesOn: MarkdownEvents.SetupExtensions,
@@ -54,10 +47,8 @@ export const SheetPlugin = Plugin.define(meta).pipe(
   }),
   Plugin.addModule({
     // TODO(wittjosiah): More relevant event?
-    activatesOn: Common.ActivationEvent.AppGraphReady,
+    activatesOn: AppActivationEvents.AppGraphReady,
     activate: AnchorSort,
   }),
-  Common.Plugin.addSurfaceModule({ activate: ReactSurface }),
-  Common.Plugin.addOperationResolverModule({ activate: OperationResolver }),
   Plugin.make,
 );

package/src/capabilities/anchor-sort/anchor-sort.ts

@@ -4,14 +4,15 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
 import { Relation } from '@dxos/echo';
 
 import { Sheet, compareIndexPositions } from '../../types';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
-    Capability.contributes(Common.Capability.AnchorSort, {
+    Capability.contributes(AppCapabilities.AnchorSort, {
       key: Sheet.Sheet.typename,
       sort: (anchorA, anchorB) => {
         const sheet = Relation.getTarget(anchorA) as Sheet.Sheet;

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -4,17 +4,15 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common, UndoMapping } from '@dxos/app-framework';
-import { Obj, Ref, Type } from '@dxos/echo';
+import { Capabilities, Capability, UndoMapping } from '@dxos/app-framework';
 import { OperationResolver } from '@dxos/operation';
-import { Collection } from '@dxos/schema';
 
 import { meta } from '../../meta';
-import { Sheet, SheetOperation } from '../../types';
+import { SheetOperation } from '../../types';
 
 export default Capability.makeModule(() =>
   Effect.succeed([
-    Capability.contributes(Common.Capability.UndoMapping, [
+    Capability.contributes(Capabilities.UndoMapping, [
       UndoMapping.make({
         operation: SheetOperation.DropAxis,
         inverse: SheetOperation.RestoreAxis,
@@ -29,16 +27,7 @@ export default Capability.makeModule(() =>
         message: ['axis dropped label', { ns: meta.id }],
       }),
     ]),
-    Capability.contributes(Common.Capability.OperationResolver, [
-      OperationResolver.make({
-        operation: SheetOperation.OnCreateSpace,
-        handler: Effect.fnUntraced(function* ({ rootCollection }) {
-          const collection = Collection.makeManaged({ key: Type.getTypename(Sheet.Sheet) });
-          Obj.change(rootCollection, (c) => {
-            c.objects.push(Ref.make(collection));
-          });
-        }),
-      }),
+    Capability.contributes(Capabilities.OperationResolver, [
       OperationResolver.make({
         operation: SheetOperation.InsertAxis,
         handler: ({ model, axis, index, count }) =>

package/src/capabilities/react-surface/react-surface.tsx

@@ -5,35 +5,41 @@
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capability, Common } from '@dxos/app-framework';
-import { useCapability } from '@dxos/app-framework/react';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface, useCapability } from '@dxos/app-framework/ui';
 import { Obj } from '@dxos/echo';
 import { getSpace } from '@dxos/react-client/echo';
 
-import { ComputeGraphContextProvider, RangeList, SheetContainer } from '../../components';
+import { RangeList, SheetContainer } from '../../containers';
 import { meta } from '../../meta';
 import { Sheet, SheetCapabilities } from '../../types';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
-    Capability.contributes(Common.Capability.ReactSurface, [
-      Common.createSurface({
-        id: `${meta.id}/sheet`,
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: `${meta.id}.sheet`,
         role: ['article', 'section'],
-        filter: (data): data is { subject: Sheet.Sheet } =>
-          Obj.instanceOf(Sheet.Sheet, data.subject) && !!getSpace(data.subject),
+        filter: (data): data is { attendableId: string; subject: Sheet.Sheet } =>
+          typeof data.attendableId === 'string' &&
+          Obj.instanceOf(Sheet.Sheet, data.subject) &&
+          !!getSpace(data.subject),
         component: ({ data, role }) => {
           const computeGraphRegistry = useCapability(SheetCapabilities.ComputeGraphRegistry);
 
           return (
-            <ComputeGraphContextProvider registry={computeGraphRegistry}>
-              <SheetContainer role={role} subject={data.subject} space={getSpace(data.subject)!} />
-            </ComputeGraphContextProvider>
+            <SheetContainer
+              role={role}
+              subject={data.subject}
+              attendableId={data.attendableId}
+              space={getSpace(data.subject)!}
+              registry={computeGraphRegistry}
+            />
           );
         },
       }),
-      Common.createSurface({
-        id: `${meta.id}/object-settings`,
+      Surface.create({
+        id: `${meta.id}.object-settings`,
         role: 'object-settings',
         filter: (data): data is { subject: Sheet.Sheet } => Obj.instanceOf(Sheet.Sheet, data.subject),
         component: ({ data }) => <RangeList sheet={data.subject} />,

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

@@ -84,10 +84,10 @@ const DefaultStory = () => {
 export const Default: Story = {};
 
 const meta = {
-  title: 'plugins/plugin-sheet/functions',
+  title: 'plugins/plugin-sheet/components/functions',
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withClientProvider({ types: [Function.Function, Sheet.Sheet], createIdentity: true, createSpace: true }),
     withComputeGraphDecorator({ plugins: testFunctionPlugins }),
   ],

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

@@ -38,9 +38,9 @@ const AutomergeStory = ({ value, ...props }: CellEditorProps) => {
     const space = await client.spaces.create();
 
     const sheet = Sheet.make();
-    Obj.change(sheet, (s) => {
-      s.name = 'Test';
-      s.cells[cell] = { value };
+    Obj.change(sheet, (obj) => {
+      obj.name = 'Test';
+      obj.cells[cell] = { value };
     });
     space.db.add(sheet);
     setObject(sheet);
@@ -61,9 +61,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/{GridSheet/GridSheet.stories.tsx → SheetContent/SheetContent.stories.tsx}

@@ -10,15 +10,15 @@ 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 { withTheme } from '@dxos/react-ui/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 { SheetProvider } from '../SheetContext';
+import { SheetRoot } from '../SheetRoot';
 
-import { GridSheet } from './GridSheet';
+import { SheetContent } from './SheetContent';
 
 export const Basic = () => {
   const space = useSpace();
@@ -29,19 +29,20 @@ export const Basic = () => {
   }
 
   return (
-    <SheetProvider graph={graph} sheet={sheet} ignoreAttention>
-      <div role='none' className='grid bs-full is-full'>
-        <GridSheet />
+    <SheetRoot graph={graph} sheet={sheet} attendableId='test' ignoreAttention>
+      <div role='none' className='grid h-full w-full'>
+        <SheetContent />
       </div>
-    </SheetProvider>
+    </SheetRoot>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-sheet/GridSheet',
-  component: GridSheet,
+  title: 'plugins/plugin-sheet/components/SheetContent',
+  component: SheetContent,
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withClientProvider({ types: [Sheet.Sheet], createSpace: true }),
     withComputeGraphDecorator({ plugins: testFunctionPlugins }),
     withPluginManager({
@@ -52,7 +53,7 @@ const meta = {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<typeof GridSheet>;
+} satisfies Meta<typeof SheetContent>;
 
 export default meta;
 

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

@@ -4,6 +4,7 @@
 
 import React, {
   type FocusEvent,
+  forwardRef,
   type KeyboardEvent,
   type MouseEvent,
   type WheelEvent,
@@ -13,11 +14,11 @@ import React, {
   useState,
 } from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { type CellRange, rangeToA1Notation } from '@dxos/compute';
 import { Obj } from '@dxos/echo';
 import { defaultColSize, defaultRowSize } from '@dxos/lit-grid';
-import { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
+import { type ComposableProps, DropdownMenu, Icon, SlottableProps, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
   type DxGridCellIndex,
@@ -32,12 +33,13 @@ import {
   editorKeys,
   parseCellIndex,
 } from '@dxos/react-ui-grid';
+import { 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, SheetOperation } from '../../types';
-import { useSheetContext } from '../SheetContext';
+import { useSheetContext } from '../SheetRoot';
 
 import { colLabelCell, rowLabelCell, useSheetModelDxGridProps } from './util';
 
@@ -69,10 +71,13 @@ const sheetRowDefault = {
   grid: { size: defaultRowSize, resizeable: true },
 };
 
-export const GridSheet = () => {
+export type SheetContentProps = ComposableProps;
+
+export const SheetContent = forwardRef<HTMLDivElement, SheetContentProps>((props, forwardedRef) => {
   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);
@@ -317,19 +322,20 @@ export const GridSheet = () => {
   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, { role: 'none', className: '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}
@@ -337,9 +343,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
@@ -383,4 +386,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';

package/src/components/{GridSheet → SheetContent}/util.ts

@@ -96,13 +96,13 @@ const gridCellGetter = (model: SheetModel) => {
 
 export const rowLabelCell = (row: number) => ({
   value: rowToA1Notation(row),
-  className: '!bg-toolbarSurface text-subdued text-end pie-1',
+  className: '!bg-toolbar-surface text-subdued text-end pe-1',
   resizeHandle: 'row',
 });
 
 export const colLabelCell = (col: number) => ({
   value: colToA1Notation(col),
-  className: '!bg-toolbarSurface text-subdued',
+  className: '!bg-toolbar-surface text-subdued',
   resizeHandle: 'col',
 });
 
@@ -114,7 +114,7 @@ const cellGetter = (model: SheetModel) => {
         return getGridCells(nextBounds);
       case 'fixedStartStart': {
         return {
-          '0,0': { className: '!bg-toolbarSurface' },
+          '0,0': { className: '!bg-toolbar-surface' },
         };
       }
       case 'frozenColsStart':