@dxos/plugin-sheet 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.8.4-main.406dc2a",
+  "version": "0.8.4-main.548089c",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -56,73 +56,74 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^10.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/async": "0.8.4-main.406dc2a",
-    "@dxos/client": "0.8.4-main.406dc2a",
-    "@dxos/context": "0.8.4-main.406dc2a",
-    "@dxos/compute": "0.8.4-main.406dc2a",
-    "@dxos/app-framework": "0.8.4-main.406dc2a",
-    "@dxos/crypto": "0.8.4-main.406dc2a",
-    "@dxos/debug": "0.8.4-main.406dc2a",
-    "@dxos/echo": "0.8.4-main.406dc2a",
-    "@dxos/functions": "0.8.4-main.406dc2a",
-    "@dxos/invariant": "0.8.4-main.406dc2a",
-    "@dxos/keys": "0.8.4-main.406dc2a",
-    "@dxos/lit-grid": "0.8.4-main.406dc2a",
-    "@dxos/live-object": "0.8.4-main.406dc2a",
-    "@dxos/plugin-attention": "0.8.4-main.406dc2a",
-    "@dxos/plugin-automation": "0.8.4-main.406dc2a",
-    "@dxos/plugin-client": "0.8.4-main.406dc2a",
-    "@dxos/log": "0.8.4-main.406dc2a",
-    "@dxos/plugin-deck": "0.8.4-main.406dc2a",
-    "@dxos/plugin-graph": "0.8.4-main.406dc2a",
-    "@dxos/plugin-markdown": "0.8.4-main.406dc2a",
-    "@dxos/plugin-script": "0.8.4-main.406dc2a",
-    "@dxos/plugin-space": "0.8.4-main.406dc2a",
-    "@dxos/react-client": "0.8.4-main.406dc2a",
-    "@dxos/react-hooks": "0.8.4-main.406dc2a",
-    "@dxos/plugin-thread": "0.8.4-main.406dc2a",
-    "@dxos/plugin-stack": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-attention": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-editor": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-form": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-grid": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-list": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-menu": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-stack": "0.8.4-main.406dc2a",
-    "@dxos/schema": "0.8.4-main.406dc2a",
-    "@dxos/util": "0.8.4-main.406dc2a"
+    "@dxos/app-framework": "0.8.4-main.548089c",
+    "@dxos/compute": "0.8.4-main.548089c",
+    "@dxos/async": "0.8.4-main.548089c",
+    "@dxos/client": "0.8.4-main.548089c",
+    "@dxos/crypto": "0.8.4-main.548089c",
+    "@dxos/debug": "0.8.4-main.548089c",
+    "@dxos/context": "0.8.4-main.548089c",
+    "@dxos/echo": "0.8.4-main.548089c",
+    "@dxos/functions": "0.8.4-main.548089c",
+    "@dxos/keys": "0.8.4-main.548089c",
+    "@dxos/invariant": "0.8.4-main.548089c",
+    "@dxos/lit-grid": "0.8.4-main.548089c",
+    "@dxos/live-object": "0.8.4-main.548089c",
+    "@dxos/log": "0.8.4-main.548089c",
+    "@dxos/plugin-automation": "0.8.4-main.548089c",
+    "@dxos/plugin-client": "0.8.4-main.548089c",
+    "@dxos/plugin-attention": "0.8.4-main.548089c",
+    "@dxos/plugin-deck": "0.8.4-main.548089c",
+    "@dxos/plugin-graph": "0.8.4-main.548089c",
+    "@dxos/plugin-markdown": "0.8.4-main.548089c",
+    "@dxos/plugin-script": "0.8.4-main.548089c",
+    "@dxos/plugin-space": "0.8.4-main.548089c",
+    "@dxos/plugin-stack": "0.8.4-main.548089c",
+    "@dxos/plugin-thread": "0.8.4-main.548089c",
+    "@dxos/react-client": "0.8.4-main.548089c",
+    "@dxos/react-hooks": "0.8.4-main.548089c",
+    "@dxos/react-ui-attention": "0.8.4-main.548089c",
+    "@dxos/react-ui-form": "0.8.4-main.548089c",
+    "@dxos/react-ui-list": "0.8.4-main.548089c",
+    "@dxos/react-ui-grid": "0.8.4-main.548089c",
+    "@dxos/react-ui-editor": "0.8.4-main.548089c",
+    "@dxos/react-ui-menu": "0.8.4-main.548089c",
+    "@dxos/schema": "0.8.4-main.548089c",
+    "@dxos/react-ui-stack": "0.8.4-main.548089c",
+    "@dxos/types": "0.8.4-main.548089c",
+    "@dxos/util": "0.8.4-main.548089c"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.42.4",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "0.92.1",
     "@lezer/generator": "^1.7.1",
     "@tldraw/indices": "^2.0.0-alpha.14",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
+    "@types/react-dom": "~19.2.2",
     "@types/react-window": "^1.8.8",
     "effect": "3.18.3",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/lit-grid": "0.8.4-main.406dc2a",
-    "@dxos/echo-generator": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.406dc2a",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-types": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
-    "@dxos/storybook-utils": "0.8.4-main.406dc2a",
-    "@dxos/test-utils": "0.8.4-main.406dc2a",
-    "@dxos/random": "0.8.4-main.406dc2a"
+    "@dxos/echo-generator": "0.8.4-main.548089c",
+    "@dxos/random": "0.8.4-main.548089c",
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/lit-grid": "0.8.4-main.548089c",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/react-ui-types": "0.8.4-main.548089c",
+    "@dxos/test-utils": "0.8.4-main.548089c",
+    "@dxos/storybook-utils": "0.8.4-main.548089c"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a"
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.tsx

@@ -21,7 +21,7 @@ import { AnchorSort, ComputeGraphRegistry, IntentResolver, Markdown, ReactSurfac
 import { meta } from './meta';
 import { serializer } from './serializer';
 import { translations } from './translations';
-import { SheetAction, SheetType } from './types';
+import { Sheet, SheetAction } from './types';
 
 export const SheetPlugin = definePlugin(meta, () => [
   defineModule({
@@ -39,10 +39,11 @@ export const SheetPlugin = definePlugin(meta, () => [
     activatesOn: Events.SetupMetadata,
     activate: () =>
       contributes(Capabilities.Metadata, {
-        id: SheetType.typename,
+        id: Sheet.Sheet.typename,
         metadata: {
-          label: (object: SheetType) => object.name,
+          label: (object: Sheet.Sheet) => object.name,
           icon: 'ph--grid-nine--regular',
+          iconHue: 'indigo',
           serializer,
           comments: 'anchored',
         },
@@ -55,8 +56,8 @@ export const SheetPlugin = definePlugin(meta, () => [
       contributes(
         SpaceCapabilities.ObjectForm,
         defineObjectForm({
-          objectSchema: SheetType,
-          getIntent: (props, options) => createIntent(SheetAction.Create, { ...props, space: options.space }),
+          objectSchema: Sheet.Sheet,
+          getIntent: (props) => createIntent(SheetAction.Create, { ...props }),
         }),
       ),
   }),

package/src/capabilities/anchor-sort.ts

@@ -2,18 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes } from '@dxos/app-framework';
-import { Type } from '@dxos/echo';
-import { getTarget } from '@dxos/react-client/echo';
+import { Capabilities, type Capability, contributes } from '@dxos/app-framework';
+import { Relation } from '@dxos/echo';
 
-import { SheetType, compareIndexPositions } from '../types';
+import { Sheet, compareIndexPositions } from '../types';
 
-export default () =>
+export default (): Capability<typeof Capabilities.AnchorSort> =>
   contributes(Capabilities.AnchorSort, {
-    key: Type.getTypename(SheetType)!,
+    key: Sheet.Sheet.typename,
     sort: (anchorA, anchorB) => {
-      const sheet = getTarget(anchorA) as SheetType;
-      if (sheet !== getTarget(anchorB)) {
+      const sheet = Relation.getTarget(anchorA) as Sheet.Sheet;
+      if (sheet !== Relation.getTarget(anchorB)) {
         return 0;
       }
 

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

@@ -14,10 +14,10 @@ export default async (context: PluginContext) => {
   // Async import removes direct dependency on hyperformula.
   const { defaultPlugins, ComputeGraphRegistry } = await import('@dxos/compute');
   const computeRuntimeResolver = context.getCapability(AutomationCapabilities.ComputeRuntime);
-
   const computeGraphRegistry = new ComputeGraphRegistry({
     plugins: defaultPlugins,
     computeRuntime: computeRuntimeResolver,
   });
+
   return contributes(SheetCapabilities.ComputeGraphRegistry, computeGraphRegistry);
 };

package/src/capabilities/intent-resolver.ts

@@ -5,13 +5,13 @@
 import { Capabilities, contributes, createResolver } from '@dxos/app-framework';
 
 import { meta } from '../meta';
-import { SheetAction, createSheet } from '../types';
+import { Sheet, SheetAction } from '../types';
 
 export default () =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
       intent: SheetAction.Create,
-      resolve: ({ name }) => ({ data: { object: createSheet({ name }) } }),
+      resolve: ({ name }) => ({ data: { object: Sheet.make({ name }) } }),
     }),
     createResolver({
       intent: SheetAction.InsertAxis,

package/src/capabilities/react-surface.tsx

@@ -4,13 +4,14 @@
 
 import React from 'react';
 
-import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/react';
 import { Obj } from '@dxos/echo';
 import { getSpace } from '@dxos/react-client/echo';
 
 import { ComputeGraphContextProvider, RangeList, SheetContainer } from '../components';
 import { meta } from '../meta';
-import { SheetType } from '../types';
+import { Sheet } from '../types';
 
 import { SheetCapabilities } from './capabilities';
 
@@ -19,8 +20,8 @@ export default () =>
     createSurface({
       id: `${meta.id}/sheet`,
       role: ['article', 'section'],
-      filter: (data): data is { subject: SheetType } =>
-        Obj.instanceOf(SheetType, data.subject) && !!getSpace(data.subject),
+      filter: (data): data is { subject: Sheet.Sheet } =>
+        Obj.instanceOf(Sheet.Sheet, data.subject) && !!getSpace(data.subject),
       component: ({ data, role }) => {
         const computeGraphRegistry = useCapability(SheetCapabilities.ComputeGraphRegistry);
 
@@ -34,7 +35,7 @@ export default () =>
     createSurface({
       id: `${meta.id}/object-settings`,
       role: 'object-settings',
-      filter: (data): data is { subject: SheetType } => Obj.instanceOf(SheetType, data.subject),
+      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

@@ -6,8 +6,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { testFunctionPlugins } from '@dxos/compute/testing';
-import { Filter, Obj } from '@dxos/echo';
-import { FunctionType } from '@dxos/functions';
+import { Filter } from '@dxos/echo';
+import { Function } from '@dxos/functions';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Button, Input, Toolbar } from '@dxos/react-ui';
@@ -16,7 +16,7 @@ import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 
 import { useSheetModel } from '../../model';
 import { withComputeGraphDecorator } from '../../testing';
-import { SheetType, createSheet } from '../../types';
+import { Sheet } from '../../types';
 
 import { useComputeGraph } from './ComputeGraphContextProvider';
 
@@ -25,13 +25,13 @@ const FUNCTION_NAME = 'TEST';
 const DefaultStory = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const [sheet, setSheet] = useState<SheetType>();
+  const [sheet, setSheet] = useState<Sheet.Sheet>();
   const [text, setText] = useState(`${FUNCTION_NAME}(100)`);
   const [result, setResult] = useState<any>();
   const model = useSheetModel(graph, sheet);
   useEffect(() => {
     if (space) {
-      const sheet = space.db.add(createSheet());
+      const sheet = space.db.add(Sheet.make());
       setSheet(sheet);
     }
   }, [space]);
@@ -44,14 +44,14 @@ const DefaultStory = () => {
         setResult({ functions: { standard: f1.length, echo: f2.length } });
       });
 
-      space.db.add(Obj.make(FunctionType, { name: 'test', version: '0.0.1', binding: FUNCTION_NAME }));
+      space.db.add(Function.make({ name: 'test', version: '0.0.1', binding: FUNCTION_NAME }));
     }
   }, [space, graph]);
 
   const inputRef = useRef<HTMLInputElement | null>(null);
   const handleTest = async () => {
     if (space && graph) {
-      const { objects } = await space.db.query(Filter.type(FunctionType)).run();
+      const { objects } = await space.db.query(Filter.type(Function.Function)).run();
       const mapped = graph.mapFunctionBindingToId(text);
       const unmapped = graph.mapFunctionBindingFromId(mapped);
       const internal = graph.mapFormulaToNative(text);
@@ -88,7 +88,7 @@ const meta = {
   render: DefaultStory,
   decorators: [
     withTheme,
-    withClientProvider({ types: [FunctionType, SheetType], createIdentity: true, createSpace: true }),
+    withClientProvider({ types: [Function.Function, Sheet.Sheet], createIdentity: true, createSpace: true }),
     withComputeGraphDecorator({ plugins: testFunctionPlugins }),
   ],
 } satisfies Meta<typeof DefaultStory>;

package/src/components/FunctionEditor/FunctionEditor.tsx

@@ -26,7 +26,7 @@ export const FunctionEditor = () => {
   }
 
   return (
-    <div className='flex shrink-0 justify-between items-center px-4 py-1 text-sm bg-toolbarSurface border-bs !border-subduedSeparator'>
+    <div className='flex shrink-0 justify-between items-center pli-4 plb-1 text-sm bg-toolbarSurface border-bs !border-subduedSeparator'>
       <div className='flex gap-4 items-center'>
         <div className='flex w-16 items-center font-mono'>
           {(range && rangeToA1Notation(range)) || (cursor && addressToA1Notation(cursor))}

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

@@ -14,7 +14,7 @@ import { withTheme } from '@dxos/react-ui/testing';
 
 import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
 import { translations } from '../../translations';
-import { SheetType } from '../../types';
+import { Sheet } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
 import { SheetProvider } from '../SheetContext';
 
@@ -42,7 +42,7 @@ const meta = {
   component: GridSheet,
   decorators: [
     withTheme,
-    withClientProvider({ types: [SheetType], createSpace: true }),
+    withClientProvider({ types: [Sheet.Sheet], createSpace: true }),
     withComputeGraphDecorator({ plugins: testFunctionPlugins }),
     withPluginManager({
       plugins: [IntentPlugin()],

package/src/components/GridSheet/GridSheet.tsx

@@ -13,7 +13,8 @@ import React, {
   useState,
 } from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 import { type CellRange, rangeToA1Notation } from '@dxos/compute';
 import { defaultColSize, defaultRowSize } from '@dxos/lit-grid';
 import { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
@@ -172,12 +173,20 @@ export const GridSheet = () => {
         case 'frozenRowsStart':
           return dxGrid?.setSelection({
             start: { col: pos.col, row: 0, plane: 'grid' },
-            end: { col: pos.col, row: model.sheet.rows.length - 1, plane: 'grid' },
+            end: {
+              col: pos.col,
+              row: model.sheet.rows.length - 1,
+              plane: 'grid',
+            },
           });
         case 'frozenColsStart':
           return dxGrid?.setSelection({
             start: { row: pos.row, col: 0, plane: 'grid' },
-            end: { row: pos.row, col: model.sheet.columns.length - 1, plane: 'grid' },
+            end: {
+              row: pos.row,
+              col: model.sheet.columns.length - 1,
+              plane: 'grid',
+            },
           });
       }
     },
@@ -281,7 +290,10 @@ export const GridSheet = () => {
 
   const extensions = useMemo(
     () => [
-      editorKeys({ onClose: handleClose, ...(editing?.initialContent && { onNav: handleClose }) }),
+      editorKeys({
+        onClose: handleClose,
+        ...(editing?.initialContent && { onNav: handleClose }),
+      }),
       sheetExtension({ functions: model.graph.getFunctions() }),
       rangeExtension({
         onInit: (fn) => (rangeController.current = fn),

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

@@ -15,7 +15,7 @@ import { automerge } from '@dxos/react-ui-editor';
 import { CellEditor, type CellEditorProps } from '@dxos/react-ui-grid';
 
 import { sheetExtension } from '../../extensions';
-import { SheetType, createSheet } from '../../types';
+import { Sheet } from '../../types';
 
 const DefaultStory = ({ value, ...props }: CellEditorProps) => {
   const extensions = useMemo(() => {
@@ -29,14 +29,14 @@ const DefaultStory = ({ value, ...props }: CellEditorProps) => {
 
 const AutomergeStory = ({ value, ...props }: CellEditorProps) => {
   const cell = 'A1';
-  const [object, setObject] = useState<SheetType>();
+  const [object, setObject] = useState<Sheet.Sheet>();
   useAsyncEffect(async () => {
-    const client = new Client({ types: [SheetType] });
+    const client = new Client({ types: [Sheet.Sheet] });
     await client.initialize();
     await client.halo.createIdentity();
     const space = await client.spaces.create();
 
-    const sheet = createSheet();
+    const sheet = Sheet.make();
     sheet.name = 'Test';
     sheet.cells[cell] = { value };
     space.db.add(sheet);

package/src/components/GridSheet/util.ts

@@ -28,7 +28,10 @@ const createDxGridColumns = (model: SheetModel): DxGridAxisMeta => {
   return model.sheet.columns.reduce(
     (acc: DxGridAxisMeta, columnId, numericIndex) => {
       if (model.sheet.columnMeta[columnId] && model.sheet.columnMeta[columnId].size) {
-        acc.grid[numericIndex] = { size: model.sheet.columnMeta[columnId].size, resizeable: true };
+        acc.grid[numericIndex] = {
+          size: model.sheet.columnMeta[columnId].size,
+          resizeable: true,
+        };
       }
       return acc;
     },
@@ -40,7 +43,10 @@ const createDxGridRows = (model: SheetModel): DxGridAxisMeta => {
   return model.sheet.rows.reduce(
     (acc: DxGridAxisMeta, rowId, numericIndex) => {
       if (model.sheet.rowMeta[rowId] && model.sheet.rowMeta[rowId].size) {
-        acc.grid[numericIndex] = { size: model.sheet.rowMeta[rowId].size, resizeable: true };
+        acc.grid[numericIndex] = {
+          size: model.sheet.rowMeta[rowId].size,
+          resizeable: true,
+        };
       }
       return acc;
     },
@@ -59,7 +65,7 @@ const projectCellProps = (model: SheetModel, col: number, row: number): DxGridCe
   //     const range = thread.target?.anchor && parseThreadAnchorAsCellRange(thread.target!.anchor);
   //     return thread && range ? inRange(range, address) : false;
   //   })
-  //   .map((thread) => fullyQualifiedId(thread!))
+  //   .map((thread) => Obj.getDXN(thread!).toString())
   //   .join(' ');
 
   const description = model.getValueDescription(address);

package/src/components/RangeList/RangeList.tsx

@@ -12,18 +12,18 @@ import { ghostHover } from '@dxos/react-ui-theme';
 
 import { meta } from '../../meta';
 import { rangeFromIndex } from '../../types';
-import { Range, type SheetType } from '../../types';
+import { Sheet } from '../../types';
 
 export type RangeListProps = {
-  sheet: SheetType;
+  sheet: Sheet.Sheet;
 };
 
 export const RangeList = ({ sheet }: RangeListProps) => {
   const { t } = useTranslation(meta.id);
   // TODO(thure): Implement similar to comments, #8121
-  const handleSelectRange = (range: Range) => {};
+  const handleSelectRange = (range: Sheet.Range) => {};
   const handleDeleteRange = useCallback(
-    (range: Range) => {
+    (range: Sheet.Range) => {
       const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
       sheet.ranges.splice(index, 1);
     },
@@ -37,7 +37,7 @@ export const RangeList = ({ sheet }: RangeListProps) => {
           <Callout.Title>{t('no ranges message')}</Callout.Title>
         </Callout.Root>
       ) : (
-        <List.Root<Range> items={sheet.ranges} isItem={Schema.is(Range)}>
+        <List.Root<Sheet.Range> items={sheet.ranges} isItem={Schema.is(Sheet.Range)}>
           {({ items: ranges }) =>
             ranges.map((range, i) => (
               <List.Item key={i} item={range} classNames={['p-2', ghostHover]}>

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

@@ -7,8 +7,9 @@ import React from 'react';
 
 import { Capabilities, IntentPlugin, contributes, createResolver } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { Obj } from '@dxos/echo';
 import { GraphPlugin } from '@dxos/plugin-graph';
-import { fullyQualifiedId, useSpace } from '@dxos/react-client/echo';
+import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/react-ui/testing';
 import { AttendableContainer } from '@dxos/react-ui-attention';
@@ -16,7 +17,7 @@ import { withAttention } from '@dxos/react-ui-attention/testing';
 
 import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
 import { translations } from '../../translations';
-import { SheetAction, SheetType } from '../../types';
+import { Sheet, SheetAction } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
 import { RangeList } from '../RangeList';
 
@@ -27,7 +28,7 @@ const meta = {
   component: SheetContainer,
   decorators: [
     withTheme,
-    withClientProvider({ types: [SheetType], createSpace: true }),
+    withClientProvider({ types: [Sheet.Sheet], createSpace: true }),
     withComputeGraphDecorator(),
     withAttention,
     // TODO(wittjosiah): Consider whether we should refactor component so story doesn't need to depend on intents.
@@ -63,7 +64,7 @@ export const Default = () => {
   }
 
   return (
-    <AttendableContainer id={fullyQualifiedId(sheet)} classNames='contents'>
+    <AttendableContainer id={Obj.getDXN(sheet).toString()} classNames='contents'>
       <SheetContainer space={space} sheet={sheet} role='story' ignoreAttention />
     </AttendableContainer>
   );
@@ -72,13 +73,15 @@ export const Default = () => {
 export const Spec = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph, { cells: { A1: { value: 'Ready' } } });
+  const sheet = useTestSheet(space, graph, {
+    cells: { A1: { value: 'Ready' } },
+  });
   if (!sheet || !space) {
     return null;
   }
 
   return (
-    <AttendableContainer id={fullyQualifiedId(sheet)} classNames='contents'>
+    <AttendableContainer id={Obj.getDXN(sheet).toString()} classNames='contents'>
       <div role='none' className='grid grid-rows-[66%_33%] bs-full grid-cols-1'>
         <SheetContainer space={space} sheet={sheet} role='story' ignoreAttention />
         <div role='none' data-testid='grid.range-list'>

package/src/components/SheetContainer/SheetContainer.tsx

@@ -4,10 +4,11 @@
 
 import React from 'react';
 
-import { type Space, fullyQualifiedId } from '@dxos/react-client/echo';
+import { Obj } from '@dxos/echo';
+import { type Space } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { type SheetType } from '../../types';
+import { type Sheet } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
 import { FunctionEditor } from '../FunctionEditor';
 import { GridSheet } from '../GridSheet';
@@ -16,7 +17,7 @@ import { SheetToolbar } from '../SheetToolbar';
 
 export type SheetContainerProps = {
   space: Space;
-  sheet: SheetType;
+  sheet: Sheet.Sheet;
   role?: string;
   ignoreAttention?: boolean;
 };
@@ -31,7 +32,7 @@ export const SheetContainer = ({ space, sheet, role, ignoreAttention }: SheetCon
         statusbar
         classNames={[role === 'section' && 'aspect-video', role === 'story' && 'bs-full']}
       >
-        <SheetToolbar id={fullyQualifiedId(sheet)} />
+        <SheetToolbar id={Obj.getDXN(sheet).toString()} />
         <GridSheet />
         <FunctionEditor />
       </StackItem.Content>

package/src/components/SheetContext/SheetContext.tsx

@@ -5,8 +5,8 @@
 import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
 
 import { type CellAddress, type CellRange, type CompleteCellRange, type ComputeGraph } from '@dxos/compute';
+import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
 import {
   Grid,
   type GridContentProps,
@@ -16,7 +16,7 @@ import {
 } from '@dxos/react-ui-grid';
 
 import { type SheetModel, useSheetModel } from '../../model';
-import { type SheetType } from '../../types';
+import { type Sheet } from '../../types';
 
 export type SheetContextValue = {
   id: string;
@@ -114,7 +114,7 @@ const SheetProviderImpl = ({
 
 export type SheetProviderProps = {
   graph: ComputeGraph;
-  sheet: SheetType;
+  sheet: Sheet.Sheet;
   readonly?: boolean;
   ignoreAttention?: boolean;
 } & Pick<SheetContextValue, 'onInfo'>;
@@ -130,7 +130,7 @@ export const SheetProvider = ({
   const model = useSheetModel(graph, sheet, { readonly });
 
   return !model ? null : (
-    <Grid.Root id={fullyQualifiedId(sheet)}>
+    <Grid.Root id={Obj.getDXN(sheet).toString()}>
       <SheetProviderImpl model={model} onInfo={onInfo} ignoreAttention={ignoreAttention}>
         {children}
       </SheetProviderImpl>