@dxos/plugin-sheet 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.8.4-main.21d9917",
+  "version": "0.8.4-main.2244d791bb",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -58,78 +58,79 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^10.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/async": "0.8.4-main.21d9917",
-    "@dxos/compute": "0.8.4-main.21d9917",
-    "@dxos/app-framework": "0.8.4-main.21d9917",
-    "@dxos/client": "0.8.4-main.21d9917",
-    "@dxos/context": "0.8.4-main.21d9917",
-    "@dxos/crypto": "0.8.4-main.21d9917",
-    "@dxos/debug": "0.8.4-main.21d9917",
-    "@dxos/echo": "0.8.4-main.21d9917",
-    "@dxos/functions": "0.8.4-main.21d9917",
-    "@dxos/echo-db": "0.8.4-main.21d9917",
-    "@dxos/invariant": "0.8.4-main.21d9917",
-    "@dxos/keys": "0.8.4-main.21d9917",
-    "@dxos/log": "0.8.4-main.21d9917",
-    "@dxos/lit-grid": "0.8.4-main.21d9917",
-    "@dxos/operation": "0.8.4-main.21d9917",
-    "@dxos/plugin-attention": "0.8.4-main.21d9917",
-    "@dxos/plugin-automation": "0.8.4-main.21d9917",
-    "@dxos/plugin-deck": "0.8.4-main.21d9917",
-    "@dxos/plugin-graph": "0.8.4-main.21d9917",
-    "@dxos/plugin-client": "0.8.4-main.21d9917",
-    "@dxos/plugin-script": "0.8.4-main.21d9917",
-    "@dxos/plugin-stack": "0.8.4-main.21d9917",
-    "@dxos/plugin-space": "0.8.4-main.21d9917",
-    "@dxos/plugin-thread": "0.8.4-main.21d9917",
-    "@dxos/react-client": "0.8.4-main.21d9917",
-    "@dxos/plugin-markdown": "0.8.4-main.21d9917",
-    "@dxos/react-hooks": "0.8.4-main.21d9917",
-    "@dxos/react-ui-attention": "0.8.4-main.21d9917",
-    "@dxos/react-ui-form": "0.8.4-main.21d9917",
-    "@dxos/react-ui-editor": "0.8.4-main.21d9917",
-    "@dxos/react-ui-grid": "0.8.4-main.21d9917",
-    "@dxos/react-ui-list": "0.8.4-main.21d9917",
-    "@dxos/react-ui-mosaic": "0.8.4-main.21d9917",
-    "@dxos/react-ui-menu": "0.8.4-main.21d9917",
-    "@dxos/react-ui-stack": "0.8.4-main.21d9917",
-    "@dxos/schema": "0.8.4-main.21d9917",
-    "@dxos/types": "0.8.4-main.21d9917",
-    "@dxos/ui-editor": "0.8.4-main.21d9917",
-    "@dxos/util": "0.8.4-main.21d9917"
+    "@dxos/app-framework": "0.8.4-main.2244d791bb",
+    "@dxos/app-toolkit": "0.8.4-main.2244d791bb",
+    "@dxos/client": "0.8.4-main.2244d791bb",
+    "@dxos/async": "0.8.4-main.2244d791bb",
+    "@dxos/compute": "0.8.4-main.2244d791bb",
+    "@dxos/debug": "0.8.4-main.2244d791bb",
+    "@dxos/crypto": "0.8.4-main.2244d791bb",
+    "@dxos/context": "0.8.4-main.2244d791bb",
+    "@dxos/echo-db": "0.8.4-main.2244d791bb",
+    "@dxos/invariant": "0.8.4-main.2244d791bb",
+    "@dxos/keys": "0.8.4-main.2244d791bb",
+    "@dxos/echo": "0.8.4-main.2244d791bb",
+    "@dxos/functions": "0.8.4-main.2244d791bb",
+    "@dxos/lit-grid": "0.8.4-main.2244d791bb",
+    "@dxos/log": "0.8.4-main.2244d791bb",
+    "@dxos/operation": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-attention": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-automation": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-client": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-deck": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-graph": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-markdown": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-script": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-space": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-stack": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-thread": "0.8.4-main.2244d791bb",
+    "@dxos/react-client": "0.8.4-main.2244d791bb",
+    "@dxos/react-hooks": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-attention": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-grid": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-list": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-form": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-mosaic": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-stack": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-menu": "0.8.4-main.2244d791bb",
+    "@dxos/schema": "0.8.4-main.2244d791bb",
+    "@dxos/types": "0.8.4-main.2244d791bb",
+    "@dxos/ui-editor": "0.8.4-main.2244d791bb",
+    "@dxos/util": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-editor": "0.8.4-main.2244d791bb"
   },
   "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.21d9917",
-    "@dxos/random": "0.8.4-main.21d9917",
-    "@dxos/echo-generator": "0.8.4-main.21d9917",
-    "@dxos/react-ui": "0.8.4-main.21d9917",
-    "@dxos/plugin-testing": "0.8.4-main.21d9917",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.21d9917",
-    "@dxos/storybook-utils": "0.8.4-main.21d9917",
-    "@dxos/test-utils": "0.8.4-main.21d9917",
-    "@dxos/ui-types": "0.8.4-main.21d9917",
-    "@dxos/ui-theme": "0.8.4-main.21d9917"
+    "@dxos/echo-generator": "0.8.4-main.2244d791bb",
+    "@dxos/lit-grid": "0.8.4-main.2244d791bb",
+    "@dxos/random": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-testing": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/storybook-utils": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.2244d791bb",
+    "@dxos/test-utils": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb",
+    "@dxos/ui-types": "0.8.4-main.2244d791bb"
   },
   "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/react-ui": "0.8.4-main.21d9917",
-    "@dxos/ui-theme": "0.8.4-main.21d9917"
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.tsx

@@ -4,7 +4,8 @@
 
 import * as Effect from 'effect/Effect';
 
-import { ActivationEvent, Capability, Common, Plugin } from '@dxos/app-framework';
+import { ActivationEvent, Capability, Plugin } from '@dxos/app-framework';
+import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/operation';
 import { AutomationEvents } from '@dxos/plugin-automation';
 import { ClientEvents } from '@dxos/plugin-client';
@@ -19,12 +20,7 @@ import { translations } from './translations';
 import { Sheet, SheetOperation } 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: {
@@ -37,7 +33,14 @@ export const SheetPlugin = Plugin.define(meta).pipe(
       },
     },
   }),
-  Common.Plugin.addSchemaModule({ schema: [Sheet.Sheet] }),
+  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addSchemaModule({ schema: [Sheet.Sheet] }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
+  Plugin.addModule({
+    activatesOn: ActivationEvent.allOf(ClientEvents.ClientReady, AutomationEvents.ComputeRuntimeReady),
+    activate: ComputeGraphRegistry,
+  }),
   Plugin.addModule({
     id: 'on-space-created',
     activatesOn: SpaceEvents.SpaceCreated,
@@ -54,10 +57,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,7 +4,7 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common, UndoMapping } from '@dxos/app-framework';
+import { Capabilities, Capability, UndoMapping } from '@dxos/app-framework';
 import { Obj, Ref, Type } from '@dxos/echo';
 import { OperationResolver } from '@dxos/operation';
 import { Collection } from '@dxos/schema';
@@ -14,7 +14,7 @@ import { Sheet, 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,7 +29,7 @@ export default Capability.makeModule(() =>
         message: ['axis dropped label', { ns: meta.id }],
       }),
     ]),
-    Capability.contributes(Common.Capability.OperationResolver, [
+    Capability.contributes(Capabilities.OperationResolver, [
       OperationResolver.make({
         operation: SheetOperation.OnCreateSpace,
         handler: Effect.fnUntraced(function* ({ rootCollection }) {

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

@@ -5,8 +5,8 @@
 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';
 
@@ -16,8 +16,8 @@ import { Sheet, SheetCapabilities } from '../../types';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
-    Capability.contributes(Common.Capability.ReactSurface, [
-      Common.createSurface({
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
         id: `${meta.id}/sheet`,
         role: ['article', 'section'],
         filter: (data): data is { subject: Sheet.Sheet } =>
@@ -32,7 +32,7 @@ export default Capability.makeModule(() =>
           );
         },
       }),
-      Common.createSurface({
+      Surface.create({
         id: `${meta.id}/object-settings`,
         role: 'object-settings',
         filter: (data): data is { subject: Sheet.Sheet } => Obj.instanceOf(Sheet.Sheet, data.subject),

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

@@ -87,7 +87,7 @@ const meta = {
   title: 'plugins/plugin-sheet/functions',
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withClientProvider({ types: [Function.Function, Sheet.Sheet], createIdentity: true, createSpace: true }),
     withComputeGraphDecorator({ plugins: testFunctionPlugins }),
   ],

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

@@ -41,7 +41,7 @@ const meta = {
   title: 'plugins/plugin-sheet/GridSheet',
   component: GridSheet,
   decorators: [
-    withTheme,
+    withTheme(),
     withClientProvider({ types: [Sheet.Sheet], createSpace: true }),
     withComputeGraphDecorator({ plugins: testFunctionPlugins }),
     withPluginManager({

package/src/components/GridSheet/GridSheet.tsx

@@ -13,8 +13,9 @@ 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 { useAttention } from '@dxos/react-ui-attention';
@@ -127,15 +128,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.change(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],
   );

package/src/components/GridSheet/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);
@@ -63,7 +63,7 @@ const AutomergeStory = ({ value, ...props }: CellEditorProps) => {
 const meta = {
   title: 'plugins/plugin-sheet/CellEditor',
 
-  decorators: [withTheme],
+  decorators: [withTheme()],
   component: CellEditor,
   render: DefaultStory,
 } satisfies Meta<typeof DefaultStory>;

package/src/components/RangeList/RangeList.tsx

@@ -26,8 +26,8 @@ export const RangeList = ({ sheet }: RangeListProps) => {
   const handleDeleteRange = useCallback(
     (range: Sheet.Range) => {
       const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
-      Obj.change(sheet, (s) => {
-        s.ranges.splice(index, 1);
+      Obj.change(sheet, (obj) => {
+        obj.ranges.splice(index, 1);
       });
     },
     [sheet],

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

@@ -6,7 +6,7 @@ import { type Meta } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj } from '@dxos/echo';
 import { OperationResolver } from '@dxos/operation';
@@ -28,7 +28,7 @@ const meta = {
   title: 'plugins/plugin-sheet/SheetContainer',
   component: SheetContainer,
   decorators: [
-    withTheme,
+    withTheme(),
     withLayout({ layout: 'fullscreen' }),
     withClientProvider({ types: [Sheet.Sheet], createSpace: true }),
     withComputeGraphDecorator(),
@@ -36,7 +36,7 @@ const meta = {
     withPluginManager({
       plugins: [...corePlugins()],
       capabilities: [
-        Capability.contributes(Common.Capability.OperationResolver, [
+        Capability.contributes(Capabilities.OperationResolver, [
           OperationResolver.make({
             operation: SheetOperation.DropAxis,
             handler: ({ model, axis, axisIndex }) =>

package/src/components/SheetContainer/SheetContainer.tsx

@@ -4,10 +4,10 @@
 
 import React, { Fragment } from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { type Space } from '@dxos/react-client/echo';
-import { Layout, type LayoutFlexProps } from '@dxos/react-ui-mosaic';
+import { Flex, type FlexProps, Layout } from '@dxos/react-ui';
 
 import { type Sheet } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
@@ -45,4 +45,4 @@ export const SheetContainer = ({ role, subject: sheet, space, ignoreAttention }:
   );
 };
 
-const Container = (props: LayoutFlexProps) => <Layout.Flex {...props} classNames='aspect-square' />;
+const Container = (props: FlexProps) => <Flex {...props} classNames='aspect-square' />;

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

@@ -21,7 +21,7 @@ const meta = {
   title: 'plugins/plugin-sheet/Toolbar',
   component: SheetToolbar as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/SheetToolbar/SheetToolbar.tsx

@@ -5,7 +5,7 @@
 import { Atom, type Registry, RegistryContext } from '@effect-atom/atom-react';
 import React, { type PropsWithChildren, useContext, useMemo } from 'react';
 
-import { useAppGraph } from '@dxos/app-framework/react';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { type CompleteCellRange } from '@dxos/compute';
 import {
   type ActionGraphProps,

package/src/components/SheetToolbar/align.ts

@@ -84,18 +84,18 @@ const createAlignActions = ({ model, state, stateAtom, registry, cursorFallbackR
         };
         const currentState = registry.get(stateAtom);
         if (index < 0) {
-          Obj.change(model.sheet, (s) => {
-            s.ranges?.push(nextRangeEntity);
+          Obj.change(model.sheet, (obj) => {
+            obj.ranges?.push(nextRangeEntity);
           });
           registry.set(stateAtom, { ...currentState, [alignKey]: nextRangeEntity.value });
         } else if (model.sheet.ranges![index].value === nextRangeEntity.value) {
-          Obj.change(model.sheet, (s) => {
-            s.ranges?.splice(index, 1);
+          Obj.change(model.sheet, (obj) => {
+            obj.ranges?.splice(index, 1);
           });
           registry.set(stateAtom, { ...currentState, [alignKey]: undefined });
         } else {
-          Obj.change(model.sheet, (s) => {
-            s.ranges?.splice(index, 1, nextRangeEntity);
+          Obj.change(model.sheet, (obj) => {
+            obj.ranges?.splice(index, 1, nextRangeEntity);
           });
           registry.set(stateAtom, { ...currentState, [alignKey]: nextRangeEntity.value });
         }

package/src/components/SheetToolbar/style.ts

@@ -103,14 +103,14 @@ const createStyleActions = ({ model, state, stateAtom, registry, cursorFallbackR
         ) {
           // this value should be unset
           if (index >= 0) {
-            Obj.change(model.sheet, (s) => {
-              s.ranges?.splice(index, 1);
+            Obj.change(model.sheet, (obj) => {
+              obj.ranges?.splice(index, 1);
             });
           }
           registry.set(stateAtom, { ...currentState, [nextRangeEntity.value]: false });
         } else {
-          Obj.change(model.sheet, (s) => {
-            s.ranges?.push(nextRangeEntity);
+          Obj.change(model.sheet, (obj) => {
+            obj.ranges?.push(nextRangeEntity);
           });
           registry.set(stateAtom, { ...currentState, [nextRangeEntity.value]: true });
         }

package/src/extensions/compute.stories.tsx

@@ -107,7 +107,7 @@ const GraphStory = (props: EditorProps) => {
 const meta = {
   title: 'plugins/plugin-sheet/extensions',
   decorators: [
-    withTheme,
+    withTheme(),
     withClientProvider({
       types: [Sheet.Sheet],
       createIdentity: true,

package/src/integrations/thread-ranges.ts

@@ -5,8 +5,8 @@
 import * as Effect from 'effect/Effect';
 import { useCallback, useEffect, useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useOperationInvoker, useOperationResolver } from '@dxos/app-framework/react';
+import { useOperationInvoker, useOperationResolver } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { debounce } from '@dxos/async';
 import { type CellAddress, type CompleteCellRange, inRange } from '@dxos/compute';
 import { Obj, Relation } from '@dxos/echo';
@@ -44,7 +44,7 @@ export const useUpdateFocusedCellOnThreadSelection = (grid: DxGridElement | null
   const scrollIntoViewHandler = useMemo(
     () =>
       OperationResolver.make({
-        operation: Common.LayoutOperation.ScrollIntoView,
+        operation: LayoutOperation.ScrollIntoView,
         position: 'hoist',
         filter: (input) => input.subject === sheetId && !!input.cursor,
         handler: (input) =>