@dxos/plugin-sheet 0.7.5-main.9d26e3a → 0.7.5-main.b19bfc8

package/package.json

@@ -1,23 +1,19 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.7.5-main.9d26e3a",
+  "version": "0.7.5-main.b19bfc8",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
-    "./meta": {
-      "types": "./dist/types/src/meta.d.ts",
-      "browser": "./dist/lib/browser/meta.mjs",
-      "node": "./dist/lib/node-esm/meta.mjs"
-    },
     "./types": {
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
@@ -27,9 +23,6 @@
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
-      "meta": [
-        "dist/types/src/meta.d.ts"
-      ],
       "types": [
         "dist/types/src/types.d.ts"
       ]
@@ -54,7 +47,7 @@
     "@lezer/lezer": "^1.1.2",
     "@lezer/lr": "^1.4.2",
     "@preact/signals-core": "^1.6.0",
-    "@radix-ui/react-context": "^1.0.0",
+    "@radix-ui/react-context": "1.1.1",
     "@tanstack/react-virtual": "^3.9.0",
     "codemirror-lang-spreadsheet": "^1.3.0",
     "date-fns": "^3.3.1",
@@ -62,37 +55,38 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^8.0.5",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.7.5-main.9d26e3a",
-    "@dxos/async": "0.7.5-main.9d26e3a",
-    "@dxos/client": "0.7.5-main.9d26e3a",
-    "@dxos/compute": "0.7.5-main.9d26e3a",
-    "@dxos/crypto": "0.7.5-main.9d26e3a",
-    "@dxos/context": "0.7.5-main.9d26e3a",
-    "@dxos/debug": "0.7.5-main.9d26e3a",
-    "@dxos/echo-schema": "0.7.5-main.9d26e3a",
-    "@dxos/invariant": "0.7.5-main.9d26e3a",
-    "@dxos/functions": "0.7.5-main.9d26e3a",
-    "@dxos/keys": "0.7.5-main.9d26e3a",
-    "@dxos/log": "0.7.5-main.9d26e3a",
-    "@dxos/live-object": "0.7.5-main.9d26e3a",
-    "@dxos/plugin-attention": "0.7.5-main.9d26e3a",
-    "@dxos/plugin-client": "0.7.5-main.9d26e3a",
-    "@dxos/plugin-graph": "0.7.5-main.9d26e3a",
-    "@dxos/plugin-markdown": "0.7.5-main.9d26e3a",
-    "@dxos/plugin-script": "0.7.5-main.9d26e3a",
-    "@dxos/plugin-space": "0.7.5-main.9d26e3a",
-    "@dxos/plugin-stack": "0.7.5-main.9d26e3a",
-    "@dxos/plugin-thread": "0.7.5-main.9d26e3a",
-    "@dxos/react-client": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-attention": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-editor": "0.7.5-main.9d26e3a",
-    "@dxos/react-hooks": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-form": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-grid": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-stack": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-list": "0.7.5-main.9d26e3a",
-    "@dxos/schema": "0.7.5-main.9d26e3a",
-    "@dxos/util": "0.7.5-main.9d26e3a"
+    "@dxos/app-framework": "0.7.5-main.b19bfc8",
+    "@dxos/client": "0.7.5-main.b19bfc8",
+    "@dxos/compute": "0.7.5-main.b19bfc8",
+    "@dxos/context": "0.7.5-main.b19bfc8",
+    "@dxos/functions": "0.7.5-main.b19bfc8",
+    "@dxos/crypto": "0.7.5-main.b19bfc8",
+    "@dxos/async": "0.7.5-main.b19bfc8",
+    "@dxos/debug": "0.7.5-main.b19bfc8",
+    "@dxos/invariant": "0.7.5-main.b19bfc8",
+    "@dxos/echo-schema": "0.7.5-main.b19bfc8",
+    "@dxos/keys": "0.7.5-main.b19bfc8",
+    "@dxos/live-object": "0.7.5-main.b19bfc8",
+    "@dxos/log": "0.7.5-main.b19bfc8",
+    "@dxos/plugin-attention": "0.7.5-main.b19bfc8",
+    "@dxos/plugin-client": "0.7.5-main.b19bfc8",
+    "@dxos/plugin-graph": "0.7.5-main.b19bfc8",
+    "@dxos/plugin-script": "0.7.5-main.b19bfc8",
+    "@dxos/plugin-stack": "0.7.5-main.b19bfc8",
+    "@dxos/plugin-space": "0.7.5-main.b19bfc8",
+    "@dxos/react-client": "0.7.5-main.b19bfc8",
+    "@dxos/plugin-thread": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-attention": "0.7.5-main.b19bfc8",
+    "@dxos/react-hooks": "0.7.5-main.b19bfc8",
+    "@dxos/plugin-markdown": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-editor": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-form": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-menu": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-list": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-grid": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-stack": "0.7.5-main.b19bfc8",
+    "@dxos/schema": "0.7.5-main.b19bfc8",
+    "@dxos/util": "0.7.5-main.b19bfc8"
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.1",
@@ -104,21 +98,21 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-generator": "0.7.5-main.9d26e3a",
-    "@dxos/lit-grid": "0.7.5-main.9d26e3a",
-    "@dxos/random": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-syntax-highlighter": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-types": "0.7.5-main.9d26e3a",
-    "@dxos/test-utils": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-theme": "0.7.5-main.9d26e3a",
-    "@dxos/storybook-utils": "0.7.5-main.9d26e3a"
+    "@dxos/echo-generator": "0.7.5-main.b19bfc8",
+    "@dxos/random": "0.7.5-main.b19bfc8",
+    "@dxos/lit-grid": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-syntax-highlighter": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-theme": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-types": "0.7.5-main.b19bfc8",
+    "@dxos/storybook-utils": "0.7.5-main.b19bfc8",
+    "@dxos/test-utils": "0.7.5-main.b19bfc8"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-theme": "0.7.5-main.9d26e3a"
+    "@dxos/react-ui": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-theme": "0.7.5-main.b19bfc8"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.tsx

@@ -2,119 +2,82 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
-
-import { createIntent, createResolver, createSurface, resolvePlugin, type PluginDefinition } from '@dxos/app-framework';
-import { type ComputeGraphRegistry } from '@dxos/compute';
+import { Capabilities, contributes, createIntent, defineModule, definePlugin, Events } from '@dxos/app-framework';
 import { FunctionType } from '@dxos/functions';
-import { invariant } from '@dxos/invariant';
-import { parseClientPlugin } from '@dxos/plugin-client/types';
-import { getSpace } from '@dxos/react-client/echo';
+import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
+import { MarkdownEvents } from '@dxos/plugin-markdown';
+import { SpaceCapabilities, ThreadEvents } from '@dxos/plugin-space';
+import { defineObjectForm } from '@dxos/plugin-space/types';
 
-import { ComputeGraphContextProvider, SheetContainer, SheetObjectSettings } from './components';
-import { computeGraphFacet } from './extensions';
-import meta, { SHEET_PLUGIN } from './meta';
+import { Markdown, Thread, ReactSurface, IntentResolver, ComputeGraphRegistry } from './capabilities';
+import { meta, SHEET_PLUGIN } from './meta';
 import { serializer } from './serializer';
 import translations from './translations';
-import { compareIndexPositions, createSheet, SheetAction, SheetType, type SheetPluginProvides } from './types';
-
-export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
-  let computeGraphRegistry: ComputeGraphRegistry | undefined;
-
-  return {
-    meta,
-    ready: async ({ plugins }) => {
-      const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-      invariant(client);
-      let remoteFunctionUrl: string | undefined;
-      if (client.config.values.runtime?.services?.edge?.url) {
-        const url = new URL('/functions', client.config.values.runtime?.services?.edge?.url);
-        url.protocol = 'https';
-        remoteFunctionUrl = url.toString();
-      }
+import { SheetAction, SheetType } from './types';
 
-      // Async import removes direct dependency on hyperformula.
-      const { defaultPlugins, ComputeGraphRegistry } = await import('@dxos/compute');
-      computeGraphRegistry = new ComputeGraphRegistry({ plugins: defaultPlugins, remoteFunctionUrl });
-    },
-    provides: {
-      context: ({ children }) => {
-        invariant(computeGraphRegistry);
-        return <ComputeGraphContextProvider registry={computeGraphRegistry}>{children}</ComputeGraphContextProvider>;
-      },
-      metadata: {
-        records: {
-          [SheetType.typename]: {
-            createObject: (props: { name?: string }) => createIntent(SheetAction.Create, props),
+export const SheetPlugin = () =>
+  definePlugin(meta, [
+    defineModule({
+      id: `${meta.id}/module/compute-graph-registry`,
+      activatesOn: ClientEvents.ClientReady,
+      activate: ComputeGraphRegistry,
+    }),
+    defineModule({
+      id: `${meta.id}/module/translations`,
+      activatesOn: Events.SetupTranslations,
+      activate: () => contributes(Capabilities.Translations, translations),
+    }),
+    defineModule({
+      id: `${meta.id}/module/metadata`,
+      activatesOn: Events.SetupMetadata,
+      activate: () =>
+        contributes(Capabilities.Metadata, {
+          id: SheetType.typename,
+          metadata: {
             label: (object: any) => (object instanceof SheetType ? object.name : undefined),
             placeholder: ['sheet title placeholder', { ns: SHEET_PLUGIN }],
             icon: 'ph--grid-nine--regular',
             serializer,
           },
-        },
-      },
-      translations,
-      echo: {
-        schema: [SheetType],
-        // TODO(wittjosiah): Factor out to common package/plugin.
-        //  FunctionType is currently registered here in case script plugin isn't enabled.
-        system: [FunctionType],
-      },
-      markdown: {
-        extensions: ({ document: doc }) => {
-          invariant(computeGraphRegistry);
-          const space = getSpace(doc);
-          if (space) {
-            const computeGraph = computeGraphRegistry.getOrCreateGraph(space);
-            return computeGraphFacet.of(computeGraph);
-          }
-        },
-      },
-      thread: {
-        predicate: (data) => data instanceof SheetType,
-        createSort: (sheet) => (indexA, indexB) =>
-          !indexA || !indexB ? 0 : compareIndexPositions(sheet, indexA, indexB),
-      },
-      surface: {
-        definitions: () => [
-          createSurface({
-            id: `${SHEET_PLUGIN}/sheet`,
-            role: ['article', 'section'],
-            filter: (data): data is { subject: SheetType } =>
-              data.subject instanceof SheetType && !!getSpace(data.subject),
-            component: ({ data, role }) => (
-              <SheetContainer space={getSpace(data.subject)!} sheet={data.subject} role={role} />
-            ),
-          }),
-          createSurface({
-            id: `${SHEET_PLUGIN}/settings`,
-            role: 'complementary--settings',
-            filter: (data): data is { subject: SheetType } => data.subject instanceof SheetType,
-            component: ({ data }) => <SheetObjectSettings sheet={data.subject} />,
-          }),
-        ],
-      },
-      intent: {
-        resolvers: () => [
-          createResolver(SheetAction.Create, ({ name }) => ({ data: { object: createSheet({ name }) } })),
-          createResolver(SheetAction.InsertAxis, ({ model, axis, index, count }) => {
-            const _indices = model[axis === 'col' ? 'insertColumns' : 'insertRows'](index, count);
-          }),
-          createResolver(SheetAction.DropAxis, ({ model, axis, axisIndex, deletionData }, undo) => {
-            if (!undo) {
-              const undoData = model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
-              return {
-                undoable: {
-                  message: (translations[0]['en-US'][SHEET_PLUGIN] as any)[`${axis} dropped label`],
-                  data: { ...undoData, model },
-                },
-              };
-            } else if (undo && deletionData) {
-              model[deletionData.axis === 'col' ? 'restoreColumn' : 'restoreRow'](deletionData);
-            }
+        }),
+    }),
+    defineModule({
+      id: `${meta.id}/module/object-form`,
+      activatesOn: ClientEvents.SetupSchema,
+      activate: () =>
+        contributes(
+          SpaceCapabilities.ObjectForm,
+          defineObjectForm({
+            objectSchema: SheetType,
+            getIntent: (props, options) => createIntent(SheetAction.Create, { ...props, space: options.space }),
           }),
-        ],
-      },
-    },
-  };
-};
+        ),
+    }),
+    // TODO(wittjosiah): Factor out to common package/plugin.
+    //  FunctionType is currently registered here in case script plugin isn't enabled.
+    defineModule({
+      id: `${meta.id}/module/schema`,
+      activatesOn: ClientEvents.SetupSchema,
+      activate: () => contributes(ClientCapabilities.Schema, [FunctionType]),
+    }),
+    defineModule({
+      id: `${meta.id}/module/markdown`,
+      activatesOn: MarkdownEvents.SetupExtensions,
+      activate: Markdown,
+    }),
+    defineModule({
+      id: `${meta.id}/module/thread`,
+      activatesOn: ThreadEvents.SetupThread,
+      activate: Thread,
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.SetupReactSurface,
+      activate: ReactSurface,
+    }),
+    defineModule({
+      id: `${meta.id}/module/intent-resolver`,
+      activatesOn: Events.SetupIntentResolver,
+      activate: IntentResolver,
+    }),
+  ]);

package/src/capabilities/capabilities.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { defineCapability } from '@dxos/app-framework';
+import { type ComputeGraphRegistry } from '@dxos/compute';
+
+import { SHEET_PLUGIN } from '../meta';
+
+export namespace SheetCapabilities {
+  export const ComputeGraphRegistry = defineCapability<ComputeGraphRegistry>(
+    `${SHEET_PLUGIN}/capability/compute-graph-registry`,
+  );
+}

package/src/capabilities/compute-graph-registry.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes, type PluginsContext } from '@dxos/app-framework';
+import { ClientCapabilities } from '@dxos/plugin-client';
+
+import { SheetCapabilities } from './capabilities';
+
+export default async (context: PluginsContext) => {
+  const client = context.requestCapability(ClientCapabilities.Client);
+  let remoteFunctionUrl: string | undefined;
+  if (client.config.values.runtime?.services?.edge?.url) {
+    const url = new URL('/functions', client.config.values.runtime?.services?.edge?.url);
+    url.protocol = 'https';
+    remoteFunctionUrl = url.toString();
+  }
+
+  // TODO(wittjosiah): This can probably be a module level import now due to lazy capability loading.
+  // Async import removes direct dependency on hyperformula.
+  const { defaultPlugins, ComputeGraphRegistry } = await import('@dxos/compute');
+  const computeGraphRegistry = new ComputeGraphRegistry({ plugins: defaultPlugins, remoteFunctionUrl });
+
+  return contributes(SheetCapabilities.ComputeGraphRegistry, computeGraphRegistry);
+};

package/src/capabilities/index.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { lazy } from '@dxos/app-framework';
+
+export const ComputeGraphRegistry = lazy(() => import('./compute-graph-registry'));
+export const IntentResolver = lazy(() => import('./intent-resolver'));
+export const Markdown = lazy(() => import('./markdown'));
+export const ReactSurface = lazy(() => import('./react-surface'));
+export const Thread = lazy(() => import('./thread'));
+
+export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes, Capabilities, createResolver } from '@dxos/app-framework';
+
+import { SHEET_PLUGIN } from '../meta';
+import { createSheet, SheetAction } from '../types';
+
+export default () =>
+  contributes(Capabilities.IntentResolver, [
+    createResolver({
+      intent: SheetAction.Create,
+      resolve: ({ name }) => ({ data: { object: createSheet({ name }) } }),
+    }),
+    createResolver({
+      intent: SheetAction.InsertAxis,
+      resolve: ({ model, axis, index, count }) => {
+        const _indices = model[axis === 'col' ? 'insertColumns' : 'insertRows'](index, count);
+      },
+    }),
+    createResolver({
+      intent: SheetAction.DropAxis,
+      resolve: ({ model, axis, axisIndex, deletionData }, undo) => {
+        if (!undo) {
+          const undoData = model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
+          return {
+            undoable: {
+              message: [`${axis} dropped label`, { ns: SHEET_PLUGIN }],
+              data: { ...undoData, model },
+            },
+          };
+        } else if (undo && deletionData) {
+          model[deletionData.axis === 'col' ? 'restoreColumn' : 'restoreRow'](deletionData);
+        }
+      },
+    }),
+  ]);

package/src/capabilities/markdown.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes, type PluginsContext } from '@dxos/app-framework';
+import { getSpace } from '@dxos/client/echo';
+import { MarkdownCapabilities } from '@dxos/plugin-markdown';
+
+import { SheetCapabilities } from './capabilities';
+import { computeGraphFacet } from '../extensions';
+
+export default (context: PluginsContext) =>
+  contributes(MarkdownCapabilities.Extensions, [
+    ({ document: doc }) => {
+      const computeGraphRegistry = context.requestCapability(SheetCapabilities.ComputeGraphRegistry);
+      const space = getSpace(doc);
+      if (space) {
+        const computeGraph = computeGraphRegistry.getOrCreateGraph(space);
+        return computeGraphFacet.of(computeGraph);
+      }
+    },
+  ]);

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { getSpace } from '@dxos/react-client/echo';
+
+import { SheetCapabilities } from './capabilities';
+import { ComputeGraphContextProvider, RangeList, SheetContainer } from '../components';
+import { SHEET_PLUGIN } from '../meta';
+import { SheetType } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${SHEET_PLUGIN}/sheet`,
+      role: ['article', 'section'],
+      filter: (data): data is { subject: SheetType } => data.subject instanceof SheetType && !!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: `${SHEET_PLUGIN}/settings`,
+      role: 'complementary--settings',
+      filter: (data): data is { subject: SheetType } => data.subject instanceof SheetType,
+      component: ({ data }) => <RangeList sheet={data.subject} />,
+    }),
+  ]);

package/src/capabilities/thread.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes } from '@dxos/app-framework';
+import { ThreadCapabilities } from '@dxos/plugin-space';
+
+import { compareIndexPositions, SheetType } from '../types';
+
+export default () =>
+  contributes(ThreadCapabilities.Thread, {
+    predicate: (data) => data instanceof SheetType,
+    createSort: (sheet) => (indexA, indexB) => (!indexA || !indexB ? 0 : compareIndexPositions(sheet, indexA, indexB)),
+  });

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

@@ -7,6 +7,7 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React from 'react';
 
+import { withPluginManager } from '@dxos/app-framework/testing';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
@@ -41,6 +42,7 @@ const meta: Meta = {
     withComputeGraphDecorator(),
     withTheme,
     withLayout({ fullscreen: true, tooltips: true, classNames: 'grid' }),
+    withPluginManager(),
   ],
   parameters: { translations },
 };

package/src/components/GridSheet/util.ts

@@ -89,7 +89,7 @@ const gridCellGetter = (model: SheetModel) => {
 
 export const rowLabelCell = (row: number) => ({
   value: rowToA1Notation(row),
-  className: 'text-end !pie-1 text-subdued',
+  className: 'text-end pie-1 text-subdued',
   resizeHandle: 'row',
 });
 

package/src/components/SheetContainer/SheetContainer.stories.tsx

@@ -7,10 +7,12 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React from 'react';
 
-import { type AnyIntentChain, type IntentContext, IntentProvider } from '@dxos/app-framework';
-import { todo } from '@dxos/debug';
-import { useSpace, create } from '@dxos/react-client/echo';
+import { Capabilities, contributes, createResolver, IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { fullyQualifiedId, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
+import { AttendableContainer } from '@dxos/react-ui-attention';
+import { withAttention } from '@dxos/react-ui-attention/testing';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { SheetContainer } from './SheetContainer';
@@ -20,22 +22,6 @@ import { SheetAction, SheetType } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
 import { RangeList } from '../RangeList';
 
-// TODO(thure via wittjosiah):  stories/components should be written such that the dependency on intents is external and provided via callback and then the story can implement it differently.
-const storybookIntentValue = create<IntentContext>({
-  dispatch: () => todo(),
-  dispatchPromise: async (intentChain: AnyIntentChain): Promise<any> => {
-    switch (intentChain.first.action) {
-      case SheetAction.DropAxis._tag: {
-        const { model, axis, axisIndex } = intentChain.first.data as SheetAction.DropAxis['input'];
-        model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
-      }
-    }
-  },
-  undo: () => todo(),
-  undoPromise: () => todo(),
-  registerResolver: () => () => {},
-});
-
 export const Basic = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
@@ -44,7 +30,11 @@ export const Basic = () => {
     return null;
   }
 
-  return <SheetContainer space={space} sheet={sheet} role='article' ignoreAttention />;
+  return (
+    <AttendableContainer id={fullyQualifiedId(sheet)} classNames='contents'>
+      <SheetContainer space={space} sheet={sheet} role='article' ignoreAttention />
+    </AttendableContainer>
+  );
 };
 
 export const Spec = () => {
@@ -56,14 +46,14 @@ export const Spec = () => {
   }
 
   return (
-    <IntentProvider value={storybookIntentValue}>
+    <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 />
         <div role='none' data-testid='grid.range-list'>
           <RangeList sheet={sheet} />
         </div>
       </div>
-    </IntentProvider>
+    </AttendableContainer>
   );
 };
 
@@ -79,6 +69,22 @@ const meta: Meta = {
       tooltips: true,
       classNames: 'grid',
     }),
+    withAttention,
+    // TODO(wittjosiah): Consider whether we should refactor component so story doesn't need to depend on intents.
+    withPluginManager({
+      plugins: [IntentPlugin()],
+      capabilities: [
+        contributes(
+          Capabilities.IntentResolver,
+          createResolver({
+            intent: SheetAction.DropAxis,
+            resolve: ({ model, axis, axisIndex }) => {
+              model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
+            },
+          }),
+        ),
+      ],
+    }),
   ],
   parameters: { translations },
 };

package/src/components/SheetContainer/SheetContainer.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { type Space } from '@dxos/react-client/echo';
+import { fullyQualifiedId, type Space } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
 
 import { type SheetType } from '../../types';
@@ -12,7 +12,7 @@ import { useComputeGraph } from '../ComputeGraph';
 import { FunctionEditor } from '../FunctionEditor';
 import { GridSheet } from '../GridSheet';
 import { SheetProvider } from '../SheetContext';
-import { Toolbar } from '../Toolbar';
+import { SheetToolbar } from '../SheetToolbar';
 
 export const SheetContainer = ({
   space,
@@ -30,12 +30,7 @@ export const SheetContainer = ({
   return graph ? (
     <SheetProvider sheet={sheet} graph={graph} ignoreAttention={ignoreAttention}>
       <StackItem.Content toolbar statusbar {...(role === 'section' && { classNames: 'aspect-video' })}>
-        <Toolbar.Root role={role}>
-          <Toolbar.Styles />
-          <Toolbar.Alignment />
-          <Toolbar.Separator />
-          <Toolbar.Actions />
-        </Toolbar.Root>
+        <SheetToolbar attendableId={fullyQualifiedId(sheet)} />
         <GridSheet />
         <FunctionEditor />
       </StackItem.Content>