@dxos/plugin-sheet 0.6.12-main.ed7cda7 → 0.6.12-staging.e11e696

package/dist/types/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,eAAe,EACf,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAMxD,oBAAY,WAAW;IACrB,MAAM,wCAA2B;CAClC;AAKD,KAAK,cAAc,CAAC,CAAC,IAAI;IACvB,MAAM,EAAE;QACN,SAAS,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,CAAC;KAC9F,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAC/C,sBAAsB,GACtB,oBAAoB,GACpB,yBAAyB,GACzB,uBAAuB,GACvB,oBAAoB,GACpB,cAAc,GACd,iBAAiB,GACjB,aAAa,GACb,cAAc,CAAC,SAAS,CAAC,CAAC;AAE5B,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;AAE/D,eAAO,MAAM,SAAS;;EAMpB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC;AAExD;;GAEG;AAEH,oBAAY,aAAa;IACvB,IAAI,IAAI;IACR,MAAM,IAAI;IACV,OAAO,IAAI;IACX,MAAM,IAAI;IAGV,OAAO,KAAK;IACZ,QAAQ,KAAK;IAGb,QAAQ,KAAK;IACb,IAAI,KAAK;IACT,IAAI,KAAK;IAIT,GAAG,KAAK;IACR,GAAG,KAAK;CACT;AAED,eAAO,MAAM,SAAS,+BAAyB,CAAC;AAEhD,eAAO,MAAM,UAAU;;;;;EAKrB,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC;AAG1D,eAAO,MAAM,aAAa;;EAExB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuBiC,CAAC;;oBACY,CAAC;uBAE5B,CAAC;wBACiB,CAAC;;;;;;;;2BAYH,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAhBhP,CAAC;;oBACY,CAAC;uBAE5B,CAAC;wBACiB,CAAC;;;;;;;;2BAYH,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;AAlCpR,qBAAa,SAAU,SAAQ,cAuB7B;CAAG;AAEL,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAE/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,eAAe,EACf,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAMxD,oBAAY,WAAW;IACrB,MAAM,wCAA2B;CAClC;AAKD,KAAK,cAAc,CAAC,CAAC,IAAI;IACvB,MAAM,EAAE;QACN,SAAS,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,CAAC;KAC9F,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAC/C,sBAAsB,GACtB,oBAAoB,GACpB,yBAAyB,GACzB,uBAAuB,GACvB,oBAAoB,GACpB,cAAc,GACd,iBAAiB,GACjB,aAAa,GACb,cAAc,CAAC,SAAS,CAAC,CAAC;AAE5B,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;AAE/D,eAAO,MAAM,SAAS;;EAMpB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC;AAExD;;GAEG;AAEH,oBAAY,aAAa;IACvB,IAAI,IAAI;IACR,MAAM,IAAI;IACV,OAAO,IAAI;IACX,MAAM,IAAI;IAGV,OAAO,KAAK;IACZ,QAAQ,KAAK;IAGb,QAAQ,KAAK;IACb,IAAI,KAAK;IACT,IAAI,KAAK;IAIT,GAAG,KAAK;IACR,GAAG,KAAK;CACT;AAED,eAAO,MAAM,SAAS,+BAAyB,CAAC;AAEhD,eAAO,MAAM,UAAU;;;;;EAKrB,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC;AAG1D,eAAO,MAAM,aAAa;;EAExB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuBkC,CAAC;;oBACY,CAAC;uBAE3B,CAAA;wBACiB,CAAC;;;;;;;;2BAYC,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAhBpP,CAAC;;oBACY,CAAC;uBAE3B,CAAA;wBACiB,CAAC;;;;;;;;2BAYC,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;AAlCzR,qBAAa,SAAU,SAAQ,cAuB7B;CAAG;AAEL,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACnC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.6.12-main.ed7cda7",
+  "version": "0.6.12-staging.e11e696",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -57,16 +57,17 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.0",
-    "@codemirror/language": "^6.10.2",
+    "@codemirror/autocomplete": "^6.18.1",
+    "@codemirror/language": "^6.10.3",
     "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.29.1",
+    "@codemirror/view": "^6.34.1",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/modifiers": "^6.0.0",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
-    "@lezer/common": "^1.2.1",
-    "@lezer/highlight": "^1.2.0",
+    "@effect/schema": "^0.67.16",
+    "@lezer/common": "^1.2.2",
+    "@lezer/highlight": "^1.2.1",
     "@lezer/lezer": "^1.1.2",
     "@lezer/lr": "^1.4.2",
     "@preact/signals-core": "^1.6.0",
@@ -78,29 +79,29 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^8.0.5",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.6.12-main.ed7cda7",
-    "@dxos/async": "0.6.12-main.ed7cda7",
-    "@dxos/client": "0.6.12-main.ed7cda7",
-    "@dxos/context": "0.6.12-main.ed7cda7",
-    "@dxos/debug": "0.6.12-main.ed7cda7",
-    "@dxos/echo-schema": "0.6.12-main.ed7cda7",
-    "@dxos/crypto": "0.6.12-main.ed7cda7",
-    "@dxos/invariant": "0.6.12-main.ed7cda7",
-    "@dxos/log": "0.6.12-main.ed7cda7",
-    "@dxos/keys": "0.6.12-main.ed7cda7",
-    "@dxos/plugin-attention": "0.6.12-main.ed7cda7",
-    "@dxos/plugin-client": "0.6.12-main.ed7cda7",
-    "@dxos/plugin-script": "0.6.12-main.ed7cda7",
-    "@dxos/plugin-graph": "0.6.12-main.ed7cda7",
-    "@dxos/plugin-space": "0.6.12-main.ed7cda7",
-    "@dxos/plugin-stack": "0.6.12-main.ed7cda7",
-    "@dxos/react-client": "0.6.12-main.ed7cda7",
-    "@dxos/react-hooks": "0.6.12-main.ed7cda7",
-    "@dxos/plugin-markdown": "0.6.12-main.ed7cda7",
-    "@dxos/react-ui-grid": "0.6.12-main.ed7cda7",
-    "@dxos/react-ui-attention": "0.6.12-main.ed7cda7",
-    "@dxos/util": "0.6.12-main.ed7cda7",
-    "@dxos/react-ui-editor": "0.6.12-main.ed7cda7"
+    "@dxos/app-framework": "0.6.12-staging.e11e696",
+    "@dxos/async": "0.6.12-staging.e11e696",
+    "@dxos/client": "0.6.12-staging.e11e696",
+    "@dxos/context": "0.6.12-staging.e11e696",
+    "@dxos/debug": "0.6.12-staging.e11e696",
+    "@dxos/echo-schema": "0.6.12-staging.e11e696",
+    "@dxos/invariant": "0.6.12-staging.e11e696",
+    "@dxos/crypto": "0.6.12-staging.e11e696",
+    "@dxos/keys": "0.6.12-staging.e11e696",
+    "@dxos/log": "0.6.12-staging.e11e696",
+    "@dxos/plugin-client": "0.6.12-staging.e11e696",
+    "@dxos/plugin-attention": "0.6.12-staging.e11e696",
+    "@dxos/plugin-markdown": "0.6.12-staging.e11e696",
+    "@dxos/plugin-graph": "0.6.12-staging.e11e696",
+    "@dxos/plugin-script": "0.6.12-staging.e11e696",
+    "@dxos/plugin-stack": "0.6.12-staging.e11e696",
+    "@dxos/plugin-space": "0.6.12-staging.e11e696",
+    "@dxos/react-client": "0.6.12-staging.e11e696",
+    "@dxos/react-hooks": "0.6.12-staging.e11e696",
+    "@dxos/react-ui-editor": "0.6.12-staging.e11e696",
+    "@dxos/react-ui-grid": "0.6.12-staging.e11e696",
+    "@dxos/react-ui-attention": "0.6.12-staging.e11e696",
+    "@dxos/util": "0.6.12-staging.e11e696"
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.1",
@@ -113,20 +114,20 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.6.12-main.ed7cda7",
-    "@dxos/echo-generator": "0.6.12-main.ed7cda7",
-    "@dxos/react-ui-syntax-highlighter": "0.6.12-main.ed7cda7",
-    "@dxos/react-ui-theme": "0.6.12-main.ed7cda7",
-    "@dxos/react-ui": "0.6.12-main.ed7cda7",
-    "@dxos/react-ui-types": "0.6.12-main.ed7cda7",
-    "@dxos/storybook-utils": "0.6.12-main.ed7cda7"
+    "@dxos/echo-generator": "0.6.12-staging.e11e696",
+    "@dxos/random": "0.6.12-staging.e11e696",
+    "@dxos/react-ui": "0.6.12-staging.e11e696",
+    "@dxos/react-ui-theme": "0.6.12-staging.e11e696",
+    "@dxos/react-ui-syntax-highlighter": "0.6.12-staging.e11e696",
+    "@dxos/storybook-utils": "0.6.12-staging.e11e696",
+    "@dxos/react-ui-types": "0.6.12-staging.e11e696"
   },
-  "optionalDependencies": {
+  "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.6.12-main.ed7cda7",
-    "@dxos/react-ui-theme": "0.6.12-main.ed7cda7"
+    "@dxos/react-ui": "0.6.12-staging.e11e696",
+    "@dxos/react-ui-theme": "0.6.12-staging.e11e696"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.tsx

@@ -15,13 +15,15 @@ import { getSpace, isEchoObject } from '@dxos/react-client/echo';
 
 import { ComputeGraphContextProvider, SheetContainer } from './components';
 import { compareIndexPositions, createSheet } from './defs';
+import { computeGraphFacet } from './extensions';
 import { type ComputeGraphRegistry } from './graph';
+import { useComputeGraph } from './hooks';
 import meta, { SHEET_PLUGIN } from './meta';
 import translations from './translations';
 import { SheetAction, SheetType, type SheetPluginProvides } from './types';
 
 export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
-  let graphRegistry: ComputeGraphRegistry | undefined;
+  let computeGraphRegistry: ComputeGraphRegistry | undefined;
 
   return {
     meta,
@@ -36,18 +38,18 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
       }
 
       // Async import removes direct dependency on hyperformula.
-      const { createComputeGraphRegistry } = await import('./graph');
-      graphRegistry = createComputeGraphRegistry({ remoteFunctionUrl });
+      const { ComputeGraphRegistry } = await import('./graph');
+      computeGraphRegistry = new ComputeGraphRegistry({ remoteFunctionUrl });
     },
     provides: {
       context: ({ children }) => {
-        invariant(graphRegistry);
-        return <ComputeGraphContextProvider registry={graphRegistry}>{children}</ComputeGraphContextProvider>;
+        invariant(computeGraphRegistry);
+        return <ComputeGraphContextProvider registry={computeGraphRegistry}>{children}</ComputeGraphContextProvider>;
       },
       metadata: {
         records: {
           [SheetType.typename]: {
-            label: (object: any) => (object instanceof SheetType ? object.title : undefined),
+            label: (object: any) => (object instanceof SheetType ? object.name : undefined),
             placeholder: ['sheet title placeholder', { ns: SHEET_PLUGIN }],
             icon: 'ph--grid-nine--regular',
           },
@@ -108,12 +110,13 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
         },
       },
       markdown: {
-        // TODO(burdon): Construct compute node.
-        extensions: ({ document }) => {
-          return undefined;
-          // return [
-          // compute(document)
-          // ];
+        extensions: ({ document: doc }) => {
+          invariant(computeGraphRegistry);
+          const space = getSpace(doc);
+          if (space) {
+            const computeGraph = computeGraphRegistry.getOrCreateGraph(space);
+            return computeGraphFacet.of(computeGraph);
+          }
         },
       },
       stack: {
@@ -138,12 +141,13 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
       },
       surface: {
         component: ({ data, role }) => {
-          const space = isEchoObject(data.object) && getSpace(data.object);
-          if (space && data.object instanceof SheetType) {
+          const space = isEchoObject(data.object) ? getSpace(data.object) : undefined;
+          const graph = useComputeGraph(space);
+          if (graph && data.object instanceof SheetType) {
             switch (role) {
               case 'article':
               case 'section': {
-                return <SheetContainer sheet={data.object} space={space} role={role} />;
+                return <SheetContainer graph={graph} sheet={data.object} role={role} />;
               }
             }
           }

package/src/components/CellEditor/CellEditor.stories.tsx

@@ -42,14 +42,13 @@ const AutomergeStory = ({ value, ...props }: StoryProps) => {
   const [object, setObject] = useState<EchoReactiveObject<SheetType>>();
   useEffect(() => {
     setTimeout(async () => {
-      const client = new Client();
+      const client = new Client({ types: [SheetType] });
       await client.initialize();
       await client.halo.createIdentity();
       const space = await client.spaces.create();
-      client.addTypes([SheetType]);
 
       const sheet = createSheet();
-      sheet.title = 'Test';
+      sheet.name = 'Test';
       sheet.cells[cell] = { value };
       space.db.add(sheet);
       setObject(sheet);

package/src/components/CellEditor/extension.test.ts

@@ -4,7 +4,6 @@
 
 import { CompletionContext, type CompletionSource } from '@codemirror/autocomplete';
 import { EditorState } from '@codemirror/state';
-// @ts-ignore
 import { testTree } from '@lezer/generator/test';
 import { spreadsheet } from 'codemirror-lang-spreadsheet';
 import { describe, expect, test } from 'vitest';

package/src/components/CellEditor/extension.ts

@@ -12,12 +12,13 @@ import {
   startCompletion,
 } from '@codemirror/autocomplete';
 import { HighlightStyle, type Language, syntaxHighlighting } from '@codemirror/language';
-import { type Extension, Facet } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { type EditorView, ViewPlugin, type ViewUpdate, keymap } from '@codemirror/view';
 import { type SyntaxNode } from '@lezer/common';
 import { tags } from '@lezer/highlight';
 import { spreadsheet } from 'codemirror-lang-spreadsheet';
 
+import { singleValueFacet } from '@dxos/react-ui-editor/state';
 import { mx } from '@dxos/react-ui-theme';
 
 import { type FunctionDefinition } from '../../graph';
@@ -59,7 +60,7 @@ const highlightStyles = HighlightStyle.define([
   },
 ]);
 
-const languageFacet = Facet.define<Language>();
+const languageFacet = singleValueFacet<Language>();
 
 export type SheetExtensionOptions = {
   functions?: FunctionDefinition[];
@@ -229,7 +230,7 @@ export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): E
 
         // Find first Range or cell at cursor.
         activeRange = undefined;
-        const [language] = view.state.facet(languageFacet);
+        const language = view.state.facet(languageFacet);
         const { topNode } = language.parser.parse(view.state.doc.toString());
         visitTree(topNode, ({ type, from, to }) => {
           if (from <= anchor && to >= anchor) {

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

@@ -10,14 +10,15 @@ import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { GridSheet } from './GridSheet';
 import { useComputeGraph } from '../../hooks';
-import { useTestSheet, withGraphDecorator } from '../../testing';
+import { useTestSheet, withComputeGraphDecorator } from '../../testing';
+import { SheetType } from '../../types';
 
 export default {
   title: 'plugin-sheet/GridSheet',
   component: GridSheet,
   decorators: [
-    withClientProvider({ createSpace: true }),
-    withGraphDecorator,
+    withClientProvider({ types: [SheetType], createSpace: true }),
+    withComputeGraphDecorator(),
     withTheme,
     withLayout({ fullscreen: true, tooltips: true }),
   ],
@@ -31,5 +32,5 @@ export const Basic = () => {
     return null;
   }
 
-  return <GridSheet space={space} sheet={sheet} />;
+  return <GridSheet graph={graph} sheet={sheet} />;
 };

package/src/components/GridSheet/GridSheet.tsx

@@ -4,7 +4,6 @@
 
 import React, { useCallback, useMemo, useRef } from 'react';
 
-import { type Space } from '@dxos/client/echo';
 import {
   type DxGridElement,
   Grid,
@@ -15,6 +14,7 @@ import {
 
 import { dxGridCellIndexToSheetCellAddress, useSheetModelDxGridProps } from './util';
 import { rangeToA1Notation, type CellRange } from '../../defs';
+import { type ComputeGraph } from '../../graph';
 import { useFormattingModel, useSheetModel, type UseSheetModelOptions } from '../../hooks';
 import { type SheetModel, type FormattingModel } from '../../model';
 import { type SheetType } from '../../types';
@@ -136,10 +136,10 @@ const GridSheetImpl = ({
   );
 };
 
-export type GridSheetProps = { space?: Space; sheet?: SheetType } & UseSheetModelOptions;
+export type GridSheetProps = { graph?: ComputeGraph; sheet?: SheetType } & UseSheetModelOptions;
 
-export const GridSheet = ({ space, sheet, ...options }: GridSheetProps) => {
-  const model = useSheetModel(space, sheet, options);
+export const GridSheet = ({ graph, sheet, ...options }: GridSheetProps) => {
+  const model = useSheetModel(graph, sheet, options);
   const formatting = useFormattingModel(model);
   if (!model || !formatting) {
     return null;

package/src/components/Sheet/Sheet.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import React, { useState } from 'react';
 
 import { log } from '@dxos/log';
-import { type Space, useSpace } from '@dxos/react-client/echo';
+import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Button } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
@@ -17,18 +17,19 @@ import { Sheet } from './Sheet';
 import { type SizeMap } from './grid';
 import { useSheetContext } from './sheet-context';
 import { addressToIndex, rangeToIndex } from '../../defs';
+import { type ComputeGraph } from '../../graph';
+import { testFunctionPlugins } from '../../graph/testing';
 import { useComputeGraph } from '../../hooks';
-import { useTestSheet, withGraphDecorator } from '../../testing';
+import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
 import { SheetType, ValueTypeEnum } from '../../types';
 import { Toolbar, type ToolbarActionHandler } from '../Toolbar';
 
 // TODO(burdon): Allow toolbar to access sheet context; provide state for current cursor/range.
-const SheetWithToolbar = ({ debug, space }: { debug?: boolean; space: Space }) => {
+const SheetWithToolbar = ({ graph, debug }: { graph: ComputeGraph; debug?: boolean }) => {
   const { model, cursor, range } = useSheetContext();
 
-  const graph = useComputeGraph(space);
   const handleRefresh = () => {
-    graph?.refresh();
+    // graph?.refresh(); // TODO(burdon): ???
   };
 
   // TODO(burdon): Factor out.
@@ -104,7 +105,7 @@ export default {
   component: Sheet,
   decorators: [
     withClientProvider({ types: [SheetType], createIdentity: true }),
-    withGraphDecorator,
+    withComputeGraphDecorator({ plugins: testFunctionPlugins }),
     withTheme,
     withLayout({ fullscreen: true, tooltips: true, classNames: 'inset-4' }),
   ],
@@ -114,14 +115,14 @@ export const Default = () => {
   const [debug, setDebug] = useState(false);
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
-  if (!space || !sheet) {
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
+  if (!graph || !sheet) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet} onInfo={() => setDebug((debug) => !debug)}>
-      <SheetWithToolbar debug={debug} space={space} />
+    <Sheet.Root graph={graph} sheet={sheet} onInfo={() => setDebug((debug) => !debug)}>
+      <SheetWithToolbar graph={graph} debug={debug} />
     </Sheet.Root>
   );
 };
@@ -129,13 +130,13 @@ export const Default = () => {
 export const Debug = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
-  if (!sheet || !space) {
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
+  if (!graph || !sheet) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet}>
+    <Sheet.Root graph={graph} sheet={sheet}>
       <Sheet.Main />
       <Sheet.Debug />
     </Sheet.Root>
@@ -147,12 +148,12 @@ export const Rows = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
   const sheet = useTestSheet(space, graph);
-  if (!sheet || !space) {
+  if (!graph || !sheet) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet}>
+    <Sheet.Root graph={graph} sheet={sheet}>
       <Sheet.Rows
         rows={sheet.rows}
         sizes={rowSizes}
@@ -167,12 +168,12 @@ export const Columns = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
   const sheet = useTestSheet(space, graph);
-  if (!sheet || !space) {
+  if (!graph || !sheet) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet}>
+    <Sheet.Root graph={graph} sheet={sheet}>
       <Sheet.Columns
         columns={sheet.columns}
         sizes={columnSizes}
@@ -185,13 +186,13 @@ export const Columns = () => {
 export const Main = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
-  if (!sheet || !space) {
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
+  if (!graph || !sheet) {
     return null;
   }
 
   return (
-    <Sheet.Root space={space} sheet={sheet}>
+    <Sheet.Root graph={graph} sheet={sheet}>
       <Sheet.Grid
         size={{
           numRows: 50,

package/src/components/Sheet/Sheet.tsx

@@ -25,6 +25,7 @@ import { Resizable, type ResizeCallback, type ResizeStartCallback } from 're-res
 import React, {
   type CSSProperties,
   type DOMAttributes,
+  type KeyboardEventHandler,
   type PropsWithChildren,
   forwardRef,
   useEffect,
@@ -40,7 +41,7 @@ import { debounce } from '@dxos/async';
 import { fullyQualifiedId, createDocAccessor } from '@dxos/client/echo';
 import { log } from '@dxos/log';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { createAttendableAttributes, useHasAttention } from '@dxos/react-ui-attention';
+import { ATTENABLE_ATTRIBUTE, useAttendableAttributes, useAttention, useAttentionPath } from '@dxos/react-ui-attention';
 import { mx } from '@dxos/react-ui-theme';
 
 import {
@@ -861,10 +862,8 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
       columnSizes,
     });
 
-    // TODO(burdon): Prevent scroll if not attended.
     const id = fullyQualifiedId(model.sheet);
-    const attendableAttrs = createAttendableAttributes(id);
-    const hasAttention = useHasAttention(id);
+    const { hasAttention } = useAttention(id);
 
     return (
       <div ref={containerRef} role='grid' className='relative flex grow overflow-hidden'>
@@ -872,6 +871,7 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
         <div className={mx('z-20 absolute inset-0 border border-gridLine pointer-events-none')} />
 
         {/* Grid scroll container. */}
+        {/* NOTE: Prevents scroll if not attended. */}
         <div ref={scrollerRef} className={mx('grow', hasAttention && 'overflow-auto scrollbar-thin')}>
           {/* Scroll content. */}
           <div
@@ -952,21 +952,37 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
         </div>
 
         {/* Hidden input for key navigation. */}
-        {createPortal(
-          <input
-            ref={inputRef}
-            autoFocus
-            className='absolute w-[1px] h-[1px] bg-transparent outline-none border-none caret-transparent'
-            onKeyDown={handleKeyDown}
-            {...attendableAttrs}
-          />,
-          document.body,
-        )}
+        {createPortal(<SheetInput ref={inputRef} id={id} onKeyDown={handleKeyDown} />, document.body)}
       </div>
     );
   },
 );
 
+type SheetInputProps = {
+  id: string;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+};
+
+const SheetInput = forwardRef<HTMLInputElement, SheetInputProps>(({ id, onKeyDown }, forwardedRef) => {
+  const path = useAttentionPath();
+  const attendableAttrs = useAttendableAttributes(id);
+
+  // TODO(wittjosiah): Consider factoring out as an attention util.
+  // Wrap input in attendable divs for each part of the path.
+  // This ensures that the sheet stays attended when the input is focused.
+  return path.toReversed().reduce(
+    (acc, part) => {
+      return <div {...{ [ATTENABLE_ATTRIBUTE]: part }}>{acc}</div>;
+    },
+    <input
+      ref={forwardedRef}
+      className='absolute w-[1px] h-[1px] bg-transparent outline-none border-none caret-transparent'
+      onKeyDown={onKeyDown}
+      {...attendableAttrs}
+    />,
+  );
+});
+
 //
 // Selection
 //

package/src/components/Sheet/sheet-context.tsx

@@ -5,10 +5,10 @@
 import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
-import { type Space } from '@dxos/react-client/echo';
 
 import { createDecorations } from './decorations';
 import { type CellAddress, type CellRange } from '../../defs';
+import { type ComputeGraph } from '../../graph';
 import { useSheetModel, useFormattingModel } from '../../hooks';
 import { type FormattingModel, type SheetModel } from '../../model';
 import { type SheetType } from '../../types';
@@ -45,19 +45,19 @@ export const useSheetContext = (): SheetContextType => {
 };
 
 export type SheetContextProps = {
+  graph: ComputeGraph;
   sheet: SheetType;
-  space: Space;
   readonly?: boolean;
 } & Pick<SheetContextType, 'onInfo'>;
 
 export const SheetContextProvider = ({
   children,
+  graph,
   sheet,
-  space,
   readonly,
   onInfo,
 }: PropsWithChildren<SheetContextProps>) => {
-  const model = useSheetModel(space, sheet, { readonly });
+  const model = useSheetModel(graph, sheet, { readonly });
   const formatting = useFormattingModel(model);
 
   // TODO(Zan): Impl. set range and set cursor that scrolls to that cell or range if it is not visible.

package/src/components/SheetContainer.tsx

@@ -6,27 +6,22 @@ import React, { useCallback } from 'react';
 
 import { useIntentDispatcher } from '@dxos/app-framework';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { useIsDirectlyAttended } from '@dxos/react-ui-attention';
+import { useAttendableAttributes, useAttention } from '@dxos/react-ui-attention';
 import { focusRing, mx } from '@dxos/react-ui-theme';
 
 import { Sheet, type SheetRootProps } from './Sheet';
 import { Toolbar, type ToolbarAction } from './Toolbar';
 
-// TODO(Zan): Factor out, copied this from MarkdownPlugin.
-const attentionFragment = mx(
-  'group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface',
-  'group-focus-within/editor:border-separator',
-);
-
 // TODO(Zan): Factor out, copied this from MarkdownPlugin.
 export const sectionToolbarLayout =
   'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';
 
-const SheetContainer = ({ sheet, space, role }: SheetRootProps & { role?: string }) => {
+const SheetContainer = ({ graph, sheet, role }: SheetRootProps & { role?: string }) => {
   const dispatch = useIntentDispatcher();
 
   const id = fullyQualifiedId(sheet);
-  const isDirectlyAttended = useIsDirectlyAttended(id);
+  const attendableAttrs = useAttendableAttributes(id);
+  const { hasAttention } = useAttention(id);
 
   // TODO(Zan): Centralise the toolbar action handler. Current implementation in stories.
   const handleAction = useCallback(
@@ -49,15 +44,19 @@ const SheetContainer = ({ sheet, space, role }: SheetRootProps & { role?: string
   );
 
   return (
-    <div role='none' className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}>
-      <Sheet.Root space={space} sheet={sheet}>
+    <div
+      role='none'
+      className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}
+      {...(role === 'article' && attendableAttrs)}
+    >
+      <Sheet.Root graph={graph} sheet={sheet}>
         <div role='none' className={mx('flex flex-0 justify-center overflow-x-auto')}>
           <Toolbar.Root
             onAction={handleAction}
             classNames={mx(
               role === 'section'
-                ? ['z-[2] group-focus-within/section:visible', !isDirectlyAttended && 'invisible', sectionToolbarLayout]
-                : 'group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator',
+                ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]
+                : 'attention-surface',
             )}
           >
             {/* TODO(Zan): Restore some of this functionality */}
@@ -73,9 +72,8 @@ const SheetContainer = ({ sheet, space, role }: SheetRootProps & { role?: string
           className={mx(
             role === 'section' && 'aspect-square border-is border-bs border-be border-separator',
             role === 'article' &&
-              'flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator',
+              'flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator attention-surface',
             focusRing,
-            attentionFragment,
           )}
         >
           <Sheet.Main />

package/src/defs/types.ts

@@ -34,6 +34,7 @@ export const addressToA1Notation = ({ col, row }: CellAddress): string => {
   return `${columnLetter(col)}${row + 1}`;
 };
 
+// TODO(burdon): See simpleCellAddressFromString
 export const addressFromA1Notation = (ref: string): CellAddress => {
   const match = ref.match(/([A-Z]+)(\d+)/);
   invariant(match, `Invalid notation: ${ref}`);