@dxos/plugin-sheet 0.7.4 → 0.7.5-labs.401163d

package/src/SheetPlugin.tsx

@@ -2,190 +2,71 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import { Capabilities, contributes, createIntent, defineModule, definePlugin, Events } from '@dxos/app-framework';
+import { FunctionType } from '@dxos/functions';
+import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
 
-import { NavigationAction, parseIntentPlugin, resolvePlugin, type PluginDefinition } from '@dxos/app-framework';
-import { invariant } from '@dxos/invariant';
-import { parseClientPlugin } from '@dxos/plugin-client';
-import { createExtension, isActionGroup, type ActionGroup } from '@dxos/plugin-graph';
-import { FunctionType } from '@dxos/plugin-script/types';
-import { SpaceAction } from '@dxos/plugin-space';
-import { getSpace, isEchoObject } from '@dxos/react-client/echo';
-import { Icon } from '@dxos/react-ui';
-
-import { ComputeGraphContextProvider, SheetContainer, SheetObjectSettings } from './components';
-import { type ComputeGraphRegistry } from './compute-graph';
-import { compareIndexPositions, createSheet } from './defs';
-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 { SheetAction, SheetType, type SheetPluginProvides } from './types';
-
-export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
-  let computeGraphRegistry: ComputeGraphRegistry | undefined;
+import { SheetAction, SheetType } from './types';
 
-  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();
-      }
-
-      // Async import removes direct dependency on hyperformula.
-      const { defaultPlugins, ComputeGraphRegistry } = await import('./compute-graph');
-      computeGraphRegistry = new ComputeGraphRegistry({ plugins: defaultPlugins, remoteFunctionUrl });
-    },
-    provides: {
-      context: ({ children }) => {
-        invariant(computeGraphRegistry);
-        return <ComputeGraphContextProvider registry={computeGraphRegistry}>{children}</ComputeGraphContextProvider>;
-      },
-      metadata: {
-        records: {
-          [SheetType.typename]: {
-            createObject: SheetAction.CREATE,
+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: {
+            createObject: (props: { name?: string }) => createIntent(SheetAction.Create, props),
             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],
+        }),
+    }),
+    defineModule({
+      id: `${meta.id}/module/schema`,
+      activatesOn: ClientEvents.SetupSchema,
+      activate: () => [
+        contributes(ClientCapabilities.Schema, [SheetType]),
         // TODO(wittjosiah): Factor out to common package/plugin.
         //  FunctionType is currently registered here in case script plugin isn't enabled.
-        system: [FunctionType],
-      },
-      graph: {
-        builder: (plugins) => {
-          const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
-          if (!client || !dispatch) {
-            return [];
-          }
-
-          return createExtension({
-            id: SheetAction.CREATE,
-            filter: (node): node is ActionGroup => isActionGroup(node) && node.id.startsWith(SpaceAction.ADD_OBJECT),
-            actions: ({ node }) => {
-              const id = node.id.split('/').at(-1);
-              const [spaceId, objectId] = id?.split(':') ?? [];
-              const space = client.spaces.get().find((space) => space.id === spaceId);
-              const object = objectId && space?.db.getObjectById(objectId);
-              const target = objectId ? object : space;
-              if (!target) {
-                return;
-              }
-
-              return [
-                {
-                  id: `${SHEET_PLUGIN}/create/${node.id}`,
-                  data: async () => {
-                    await dispatch([
-                      { plugin: SHEET_PLUGIN, action: SheetAction.CREATE, data: { space } },
-                      { action: SpaceAction.ADD_OBJECT, data: { target } },
-                      { action: NavigationAction.OPEN },
-                    ]);
-                  },
-                  properties: {
-                    label: ['create sheet label', { ns: SHEET_PLUGIN }],
-                    icon: 'ph--grid-nine--regular',
-                    testId: 'sheetPlugin.createObject',
-                  },
-                },
-              ];
-            },
-          });
-        },
-      },
-      markdown: {
-        extensions: ({ document: doc }) => {
-          invariant(computeGraphRegistry);
-          const space = getSpace(doc);
-          if (space) {
-            const computeGraph = computeGraphRegistry.getOrCreateGraph(space);
-            return computeGraphFacet.of(computeGraph);
-          }
-        },
-      },
-      stack: {
-        creators: [
-          {
-            id: 'create-stack-section-sheet',
-            testId: 'sheetPlugin.createSection',
-            type: ['plugin name', { ns: SHEET_PLUGIN }],
-            label: ['create sheet section label', { ns: SHEET_PLUGIN }],
-            // TODO(thure): Refactor to use strings
-            icon: (props: any) => <Icon icon='ph--grid-nine--regular' {...props} />,
-            intent: {
-              plugin: SHEET_PLUGIN,
-              action: SheetAction.CREATE,
-            },
-          },
-        ],
-      },
-      thread: {
-        predicate: (data) => data instanceof SheetType,
-        createSort: (sheet) => (indexA, indexB) =>
-          !indexA || !indexB ? 0 : compareIndexPositions(sheet, indexA, indexB),
-      },
-      surface: {
-        component: ({ data, role }) => {
-          const space = isEchoObject(data.object) ? getSpace(data.object) : undefined;
-          switch (role) {
-            case 'article':
-            case 'section':
-              if (space && data.object instanceof SheetType) {
-                return <SheetContainer space={space} sheet={data.object} role={role} />;
-              }
-              break;
-            case 'complementary--settings':
-              if (data.subject instanceof SheetType) {
-                return <SheetObjectSettings sheet={data.subject} />;
-              }
-              break;
-          }
-
-          return null;
-        },
-      },
-      intent: {
-        resolver: async (intent) => {
-          switch (intent.action) {
-            case SheetAction.CREATE: {
-              return { data: createSheet() };
-            }
-            case SheetAction.INSERT_AXIS: {
-              const { model, axis, index, count } = intent.data as SheetAction.InsertAxis;
-              const _indices = model[axis === 'col' ? 'insertColumns' : 'insertRows'](index, count);
-              return;
-            }
-            case SheetAction.DROP_AXIS: {
-              if (!intent.undo) {
-                const { model, axis, axisIndex } = intent.data as SheetAction.DropAxis;
-                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 {
-                const { model, ...undoData } = intent.data as SheetAction.DropAxisRestore;
-                model[undoData.axis === 'col' ? 'restoreColumn' : 'restoreRow'](undoData);
-              }
-            }
-          }
-        },
-      },
-    },
-  };
-};
+        contributes(ClientCapabilities.SystemSchema, [FunctionType]),
+      ],
+    }),
+    defineModule({
+      id: `${meta.id}/module/markdown`,
+      activatesOn: Events.Startup,
+      activate: Markdown,
+    }),
+    defineModule({
+      id: `${meta.id}/module/thread`,
+      activatesOn: Events.Startup,
+      activate: Thread,
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.SetupSurfaces,
+      activate: ReactSurface,
+    }),
+    defineModule({
+      id: `${meta.id}/module/intent-resolver`,
+      activatesOn: Events.SetupIntents,
+      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/ComputeGraph/ComputeGraphContextProvider.tsx

@@ -4,12 +4,11 @@
 
 import React, { createContext, type PropsWithChildren, useContext } from 'react';
 
+import { type ComputeGraph, type ComputeGraphRegistry } from '@dxos/compute';
 import { raise } from '@dxos/debug';
 import { type Space } from '@dxos/react-client/echo';
 import { useAsyncState } from '@dxos/react-hooks';
 
-import { type ComputeGraph, type ComputeGraphRegistry } from '../../compute-graph';
-
 export type ComputeGraphContextType = {
   registry: ComputeGraphRegistry;
 };

package/src/{compute-graph → components/ComputeGraph}/compute-graph.stories.tsx

@@ -7,19 +7,18 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { FunctionType } from '@dxos/plugin-script/types';
+import { testFunctionPlugins } from '@dxos/compute/testing';
+import { FunctionType } from '@dxos/functions';
 import { create, useSpace, Filter } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Toolbar, Button, Input } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { testFunctionPlugins } from './testing';
-import { useComputeGraph } from '../components';
-import { createSheet } from '../defs';
-import { useSheetModel } from '../model';
-import { withComputeGraphDecorator } from '../testing';
-import { SheetType } from '../types';
+import { useComputeGraph } from './ComputeGraphContextProvider';
+import { useSheetModel } from '../../model';
+import { withComputeGraphDecorator } from '../../testing';
+import { createSheet, SheetType } from '../../types';
 
 const FUNCTION_NAME = 'TEST';
 

package/src/components/FunctionEditor/FunctionEditor.tsx

@@ -4,9 +4,10 @@
 
 import React from 'react';
 
+import { addressToA1Notation, isFormula, rangeToA1Notation } from '@dxos/compute';
 import { Icon } from '@dxos/react-ui';
 
-import { addressToA1Notation, isFormula, mapFormulaIndicesToRefs, rangeToA1Notation } from '../../defs';
+import { mapFormulaIndicesToRefs } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
 export const FunctionEditor = () => {

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/GridSheet.tsx

@@ -13,7 +13,8 @@ import React, {
   useState,
 } from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { rangeToA1Notation, type CellRange } from '@dxos/compute';
 import { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
@@ -23,20 +24,19 @@ import {
   Grid,
   GridCellEditor,
   type DxGridElement,
+  type DxGridPosition,
+  type DxGridCellIndex,
   type EditorKeyHandler,
   type EditorBlurHandler,
   type GridContentProps,
-  type DxGridPosition,
-  type DxGridCellIndex,
   parseCellIndex,
 } from '@dxos/react-ui-grid';
 
 import { colLabelCell, rowLabelCell, useSheetModelDxGridProps } from './util';
-import { DEFAULT_COLUMNS, DEFAULT_ROWS, rangeToA1Notation, type CellRange } from '../../defs';
 import { rangeExtension, sheetExtension, type RangeController } from '../../extensions';
 import { useSelectThreadOnCellFocus, useUpdateFocusedCellOnThreadSelection } from '../../integrations';
 import { SHEET_PLUGIN } from '../../meta';
-import { SheetAction } from '../../types';
+import { DEFAULT_COLS, DEFAULT_ROWS, SheetAction } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
 const inertPosition: DxGridPosition = { plane: 'grid', col: 0, row: 0 };
@@ -72,7 +72,7 @@ export const GridSheet = () => {
   // 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 dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const rangeController = useRef<RangeController>();
   const { hasAttention } = useAttention(id);
 
@@ -252,24 +252,21 @@ export const GridSheet = () => {
       switch (operation) {
         case 'insert-before':
         case 'insert-after':
-          return dispatch({
-            action: SheetAction.INSERT_AXIS,
-            data: {
+          return dispatch(
+            createIntent(SheetAction.InsertAxis, {
               model,
               axis: contextMenuAxis,
               index: contextMenuOpen![contextMenuAxis] + (operation === 'insert-before' ? 0 : 1),
-            } satisfies SheetAction.InsertAxis,
-          });
-          break;
+            }),
+          );
         case 'drop':
-          return dispatch({
-            action: SheetAction.DROP_AXIS,
-            data: {
+          return dispatch(
+            createIntent(SheetAction.DropAxis, {
               model,
               axis: contextMenuAxis,
               axisIndex: model.sheet[contextMenuAxis === 'row' ? 'rows' : 'columns'][contextMenuOpen![contextMenuAxis]],
-            } satisfies SheetAction.DropAxis,
-          });
+            }),
+          );
       }
     },
     [contextMenuAxis, contextMenuOpen, model, dispatch],
@@ -309,7 +306,7 @@ export const GridSheet = () => {
       <GridCellEditor getCellContent={getCellContent} extension={extension} onBlur={handleBlur} />
       <Grid.Content
         initialCells={initialCells}
-        limitColumns={DEFAULT_COLUMNS}
+        limitColumns={DEFAULT_COLS}
         limitRows={DEFAULT_ROWS}
         columns={columns}
         rows={rows}

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

@@ -9,21 +9,20 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { Client } from '@dxos/client';
 import { createDocAccessor, type ReactiveEchoObject } from '@dxos/client/echo';
+import { defaultFunctions } from '@dxos/compute';
+import { getRegisteredFunctionNames } from '@dxos/compute/testing';
 import { automerge } from '@dxos/react-ui-editor';
 import { CellEditor, type CellEditorProps } from '@dxos/react-ui-grid';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { HyperFormula } from '#hyperformula';
-import { defaultFunctions } from '../../compute-graph';
-import { createSheet } from '../../defs';
 import { sheetExtension } from '../../extensions';
-import { SheetType } from '../../types';
+import { createSheet, SheetType } from '../../types';
 
 type StoryProps = CellEditorProps;
 
 const Story = ({ value, ...props }: StoryProps) => {
   const extension = useMemo(() => {
-    const functionNames = HyperFormula.buildEmpty({ licenseKey: 'gpl-v3' }).getRegisteredFunctionNames();
+    const functionNames = getRegisteredFunctionNames();
     const functions = defaultFunctions.filter(({ name }) => functionNames.includes(name));
     return [sheetExtension({ functions })];
   }, []);
@@ -54,7 +53,7 @@ const AutomergeStory = ({ value, ...props }: StoryProps) => {
       return [];
     }
 
-    const functionNames = HyperFormula.buildEmpty({ licenseKey: 'gpl-v3' }).getRegisteredFunctionNames();
+    const functionNames = getRegisteredFunctionNames();
     const functions = defaultFunctions.filter(({ name }) => functionNames.includes(name));
     const accessor = createDocAccessor(object, ['cells', cell, 'value']);
     return [automerge(accessor), sheetExtension({ functions })];
@@ -87,8 +86,8 @@ export const Automerge = {
 const meta: Meta = {
   title: 'plugins/plugin-sheet/CellEditor',
   component: CellEditor,
-  render: (args: StoryProps) => <Story {...args} />,
   decorators: [withTheme],
+  render: (args: StoryProps) => <Story {...args} />,
 };
 
 export default meta;

package/src/components/GridSheet/util.ts

@@ -4,6 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
+import { inRange } from '@dxos/compute';
 import { createDocAccessor, fullyQualifiedId } from '@dxos/react-client/echo';
 import { parseValue, cellClassesForFieldType } from '@dxos/react-ui-form';
 import {
@@ -20,9 +21,9 @@ import {
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 
-import { inRange, cellClassNameForRange, rangeFromIndex } from '../../defs';
 import { parseThreadAnchorAsCellRange } from '../../integrations';
 import { type SheetModel } from '../../model';
+import { cellClassNameForRange, rangeFromIndex } from '../../types';
 
 const createDxGridColumns = (model: SheetModel): DxGridAxisMeta => {
   return model.sheet.columns.reduce(
@@ -54,7 +55,7 @@ const projectCellProps = (model: SheetModel, col: number, row: number): DxGridCe
   const ranges = model.sheet.ranges?.filter(({ range }) => inRange(rangeFromIndex(model.sheet, range), address));
   const threadRefs = model.sheet.threads
     ?.filter((thread) => {
-      const range = thread?.anchor && parseThreadAnchorAsCellRange(thread!.anchor);
+      const range = thread.target?.anchor && parseThreadAnchorAsCellRange(thread.target!.anchor);
       return thread && range ? inRange(range, address) : false;
     })
     .map((thread) => fullyQualifiedId(thread!))
@@ -88,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',
 });