@dxos/plugin-sheet 0.8.1 → 0.8.2-main.10c050d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.8.1",
+  "version": "0.8.2-main.10c050d",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -45,7 +45,8 @@
     "@lezer/highlight": "^1.2.1",
     "@lezer/lezer": "^1.1.2",
     "@lezer/lr": "^1.4.2",
-    "@preact/signals-core": "^1.6.0",
+    "@preact-signals/safe-react": "^0.9.0",
+    "@preact/signals-core": "^1.9.0",
     "@radix-ui/react-context": "1.1.1",
     "codemirror-lang-spreadsheet": "^1.3.0",
     "date-fns": "^3.3.1",
@@ -53,67 +54,73 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^8.0.5",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.8.1",
-    "@dxos/async": "0.8.1",
-    "@dxos/client": "0.8.1",
-    "@dxos/compute": "0.8.1",
-    "@dxos/crypto": "0.8.1",
-    "@dxos/echo-schema": "0.8.1",
-    "@dxos/debug": "0.8.1",
-    "@dxos/context": "0.8.1",
-    "@dxos/functions": "0.8.1",
-    "@dxos/invariant": "0.8.1",
-    "@dxos/keys": "0.8.1",
-    "@dxos/plugin-attention": "0.8.1",
-    "@dxos/plugin-deck": "0.8.1",
-    "@dxos/live-object": "0.8.1",
-    "@dxos/log": "0.8.1",
-    "@dxos/plugin-client": "0.8.1",
-    "@dxos/plugin-graph": "0.8.1",
-    "@dxos/plugin-script": "0.8.1",
-    "@dxos/plugin-markdown": "0.8.1",
-    "@dxos/plugin-space": "0.8.1",
-    "@dxos/plugin-stack": "0.8.1",
-    "@dxos/plugin-thread": "0.8.1",
-    "@dxos/react-client": "0.8.1",
-    "@dxos/react-ui-attention": "0.8.1",
-    "@dxos/react-ui-editor": "0.8.1",
-    "@dxos/react-hooks": "0.8.1",
-    "@dxos/react-ui-form": "0.8.1",
-    "@dxos/react-ui-grid": "0.8.1",
-    "@dxos/react-ui-list": "0.8.1",
-    "@dxos/react-ui-stack": "0.8.1",
-    "@dxos/schema": "0.8.1",
-    "@dxos/util": "0.8.1",
-    "@dxos/react-ui-menu": "0.8.1"
+    "@dxos/app-framework": "0.8.2-main.10c050d",
+    "@dxos/async": "0.8.2-main.10c050d",
+    "@dxos/client": "0.8.2-main.10c050d",
+    "@dxos/compute": "0.8.2-main.10c050d",
+    "@dxos/context": "0.8.2-main.10c050d",
+    "@dxos/crypto": "0.8.2-main.10c050d",
+    "@dxos/debug": "0.8.2-main.10c050d",
+    "@dxos/echo": "0.8.2-main.10c050d",
+    "@dxos/invariant": "0.8.2-main.10c050d",
+    "@dxos/functions": "0.8.2-main.10c050d",
+    "@dxos/echo-schema": "0.8.2-main.10c050d",
+    "@dxos/keys": "0.8.2-main.10c050d",
+    "@dxos/lit-grid": "0.8.2-main.10c050d",
+    "@dxos/log": "0.8.2-main.10c050d",
+    "@dxos/live-object": "0.8.2-main.10c050d",
+    "@dxos/plugin-attention": "0.8.2-main.10c050d",
+    "@dxos/plugin-client": "0.8.2-main.10c050d",
+    "@dxos/plugin-deck": "0.8.2-main.10c050d",
+    "@dxos/plugin-markdown": "0.8.2-main.10c050d",
+    "@dxos/plugin-script": "0.8.2-main.10c050d",
+    "@dxos/plugin-graph": "0.8.2-main.10c050d",
+    "@dxos/plugin-stack": "0.8.2-main.10c050d",
+    "@dxos/plugin-space": "0.8.2-main.10c050d",
+    "@dxos/plugin-thread": "0.8.2-main.10c050d",
+    "@dxos/react-client": "0.8.2-main.10c050d",
+    "@dxos/react-hooks": "0.8.2-main.10c050d",
+    "@dxos/react-ui-attention": "0.8.2-main.10c050d",
+    "@dxos/react-ui-editor": "0.8.2-main.10c050d",
+    "@dxos/react-ui-form": "0.8.2-main.10c050d",
+    "@dxos/react-ui-stack": "0.8.2-main.10c050d",
+    "@dxos/react-ui-list": "0.8.2-main.10c050d",
+    "@dxos/react-ui-grid": "0.8.2-main.10c050d",
+    "@dxos/util": "0.8.2-main.10c050d",
+    "@dxos/schema": "0.8.2-main.10c050d",
+    "@dxos/react-ui-menu": "0.8.2-main.10c050d"
   },
   "devDependencies": {
+    "@effect-rx/rx-react": "^0.34.1",
+    "@effect/platform": "0.80.12",
     "@lezer/generator": "^1.7.1",
     "@tldraw/indices": "^2.0.0-alpha.14",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "@types/react-window": "^1.8.8",
-    "effect": "3.13.3",
+    "effect": "3.14.21",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-generator": "0.8.1",
-    "@dxos/random": "0.8.1",
-    "@dxos/lit-grid": "0.8.1",
-    "@dxos/react-ui-syntax-highlighter": "0.8.1",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/react-ui-types": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1",
-    "@dxos/storybook-utils": "0.8.1",
-    "@dxos/test-utils": "0.8.1"
+    "@dxos/random": "0.8.2-main.10c050d",
+    "@dxos/echo-generator": "0.8.2-main.10c050d",
+    "@dxos/react-ui": "0.8.2-main.10c050d",
+    "@dxos/react-ui-syntax-highlighter": "0.8.2-main.10c050d",
+    "@dxos/lit-grid": "0.8.2-main.10c050d",
+    "@dxos/react-ui-theme": "0.8.2-main.10c050d",
+    "@dxos/react-ui-types": "0.8.2-main.10c050d",
+    "@dxos/test-utils": "0.8.2-main.10c050d",
+    "@dxos/storybook-utils": "0.8.2-main.10c050d"
   },
   "peerDependencies": {
-    "effect": "3.13.3",
+    "@effect-rx/rx-react": "^0.34.1",
+    "@effect/platform": "0.80.12",
+    "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.10c050d",
+    "@dxos/react-ui-theme": "0.8.2-main.10c050d"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.tsx

@@ -5,10 +5,10 @@
 import { Capabilities, contributes, createIntent, defineModule, definePlugin, Events } from '@dxos/app-framework';
 import { ClientEvents } from '@dxos/plugin-client';
 import { MarkdownEvents } from '@dxos/plugin-markdown';
-import { SpaceCapabilities, ThreadEvents } from '@dxos/plugin-space';
+import { SpaceCapabilities } from '@dxos/plugin-space';
 import { defineObjectForm } from '@dxos/plugin-space/types';
 
-import { Markdown, Thread, ReactSurface, IntentResolver, ComputeGraphRegistry } from './capabilities';
+import { AnchorSort, Markdown, ReactSurface, IntentResolver, ComputeGraphRegistry } from './capabilities';
 import { meta } from './meta';
 import { serializer } from './serializer';
 import translations from './translations';
@@ -36,6 +36,7 @@ export const SheetPlugin = () =>
             label: (object: any) => (object instanceof SheetType ? object.name : undefined),
             icon: 'ph--grid-nine--regular',
             serializer,
+            comments: 'anchored',
           },
         }),
     }),
@@ -57,9 +58,10 @@ export const SheetPlugin = () =>
       activate: Markdown,
     }),
     defineModule({
-      id: `${meta.id}/module/thread`,
-      activatesOn: ThreadEvents.SetupThread,
-      activate: Thread,
+      id: `${meta.id}/module/anchor-sort`,
+      // TODO(wittjosiah): More relevant event?
+      activatesOn: Events.AppGraphReady,
+      activate: AnchorSort,
     }),
     defineModule({
       id: `${meta.id}/module/react-surface`,

package/src/capabilities/anchor-sort.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes } from '@dxos/app-framework';
+import { getSchemaTypename } from '@dxos/echo-schema';
+import { getTarget } from '@dxos/react-client/echo';
+
+import { compareIndexPositions, SheetType } from '../types';
+
+export default () =>
+  contributes(Capabilities.AnchorSort, {
+    key: getSchemaTypename(SheetType)!,
+    sort: (anchorA, anchorB) => {
+      const sheet = getTarget(anchorA) as SheetType;
+      if (sheet !== getTarget(anchorB)) {
+        return 0;
+      }
+
+      return !anchorA.anchor || !anchorB.anchor ? 0 : compareIndexPositions(sheet, anchorA.anchor, anchorB.anchor);
+    },
+  });

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

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, type PluginsContext } from '@dxos/app-framework';
+import { contributes, type PluginContext } from '@dxos/app-framework';
 import { ClientCapabilities } from '@dxos/plugin-client';
 
 import { SheetCapabilities } from './capabilities';
@@ -11,8 +11,8 @@ const isSecure = (protocol: string) => {
   return protocol === 'https:' || protocol === 'wss:';
 };
 
-export default async (context: PluginsContext) => {
-  const client = context.requestCapability(ClientCapabilities.Client);
+export default async (context: PluginContext) => {
+  const client = context.getCapability(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);

package/src/capabilities/index.ts

@@ -4,10 +4,10 @@
 
 import { lazy } from '@dxos/app-framework';
 
+export const AnchorSort = lazy(() => import('./anchor-sort'));
 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/markdown.ts

@@ -2,17 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, type PluginsContext } from '@dxos/app-framework';
+import { contributes, type PluginContext } 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) =>
+export default (context: PluginContext) =>
   contributes(MarkdownCapabilities.Extensions, [
     ({ document: doc }) => {
-      const computeGraphRegistry = context.requestCapability(SheetCapabilities.ComputeGraphRegistry);
+      const computeGraphRegistry = context.getCapability(SheetCapabilities.ComputeGraphRegistry);
       const space = getSpace(doc);
       if (space) {
         const computeGraph = computeGraphRegistry.getOrCreateGraph(space);

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

@@ -8,8 +8,8 @@ import { type Meta } from '@storybook/react';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { testFunctionPlugins } from '@dxos/compute/testing';
-import { FunctionType } from '@dxos/functions/types';
-import { create, useSpace, Filter } from '@dxos/react-client/echo';
+import { FunctionType } from '@dxos/functions';
+import { live, 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';
@@ -44,14 +44,14 @@ const Story = () => {
         setResult({ functions: { standard: f1.length, echo: f2.length } });
       });
 
-      space.db.add(create(FunctionType, { name: 'test', version: '0.0.1', binding: FUNCTION_NAME }));
+      space.db.add(live(FunctionType, { 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.schema(FunctionType)).run();
+      const { objects } = await space.db.query(Filter.type(FunctionType)).run();
       const mapped = graph.mapFunctionBindingToId(text);
       const unmapped = graph.mapFunctionBindingFromId(mapped);
       const internal = graph.mapFormulaToNative(text);

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 attention-surface border-bs !border-separator'>
+    <div className='flex shrink-0 justify-between items-center px-4 py-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

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

package/src/components/GridSheet/GridSheet.tsx

@@ -6,21 +6,22 @@ import React, {
   useCallback,
   useMemo,
   useRef,
+  useState,
   type FocusEvent,
   type KeyboardEvent,
   type WheelEvent,
   type MouseEvent,
-  useState,
 } from 'react';
 
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { rangeToA1Notation, type CellRange } from '@dxos/compute';
+import { defaultColSize, defaultRowSize } from '@dxos/lit-grid';
 import { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
   closestCell,
-  defaultSizeRow,
   editorKeys,
+  parseCellIndex,
   Grid,
   GridCellEditor,
   type DxGridElement,
@@ -29,7 +30,6 @@ import {
   type EditorKeyHandler,
   type EditorBlurHandler,
   type GridContentProps,
-  parseCellIndex,
 } from '@dxos/react-ui-grid';
 
 import { colLabelCell, rowLabelCell, useSheetModelDxGridProps } from './util';
@@ -58,18 +58,21 @@ const frozen = {
   frozenRowsStart: 1,
 };
 
+const sheetColDefault = {
+  frozenColsStart: { size: 48, readonly: true },
+  grid: { size: defaultColSize, resizeable: true },
+};
 const sheetRowDefault = {
-  frozenRowsStart: { size: defaultSizeRow, readonly: true },
-  grid: { size: defaultSizeRow, resizeable: true },
+  frozenRowsStart: { size: defaultRowSize, readonly: true },
+  grid: { size: defaultRowSize, resizeable: true },
 };
-const sheetColDefault = { frozenColsStart: { size: 48, readonly: true }, grid: { size: 180, resizeable: true } };
 
 export const GridSheet = () => {
   const { t } = useTranslation(SHEET_PLUGIN);
   const { id, model, editing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs, ignoreAttention } =
     useSheetContext();
   // NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us
-  // a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.
+  //  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 { dispatchPromise: dispatch } = useIntentDispatcher();
@@ -152,6 +155,7 @@ export const GridSheet = () => {
     },
     [editing],
   );
+
   const handleWheel = useCallback(
     (event: WheelEvent) => {
       if (!ignoreAttention && !hasAttention) {
@@ -302,7 +306,8 @@ export const GridSheet = () => {
   useSelectThreadOnCellFocus();
 
   return (
-    <div role='none' className='relative min-bs-0'>
+    // TODO(thure): Why are Table’s and Sheet’s editor boxes off by 1px?
+    <div role='none' className='relative min-bs-0 [&_.cm-editor]:!border-lb [&_.cm-editor]:!border-transparent '>
       <GridCellEditor getCellContent={getCellContent} extension={extension} onBlur={handleBlur} />
       <Grid.Content
         initialCells={initialCells}
@@ -310,18 +315,19 @@ export const GridSheet = () => {
         limitRows={DEFAULT_ROWS}
         columns={columns}
         rows={rows}
-        onAxisResize={handleAxisResize}
-        onSelect={handleSelect}
-        rowDefault={sheetRowDefault}
+        // TODO(burdon): `col` vs. `column`?
         columnDefault={sheetColDefault}
+        rowDefault={sheetRowDefault}
         frozen={frozen}
+        onAxisResize={handleAxisResize}
+        onSelect={handleSelect}
         onFocus={handleFocus}
         onWheelCapture={handleWheel}
         onKeyDown={handleKeyDown}
         onContextMenu={handleContextMenu}
         onClick={handleClick}
         overscroll='trap'
-        className='[--dx-grid-base:var(--surface-bg)] [&_.dx-grid]:border-bs [&_.dx-grid]:absolute [&_.dx-grid]:inset-0 [&_.dx-grid]:border-separator'
+        className='[--dx-grid-base:var(--baseSurface)] [&_.dx-grid]:border-bs [&_.dx-grid]:border-be [&_.dx-grid]:absolute [&_.dx-grid]:inset-0 [&_.dx-grid]:border-separator'
         activeRefs={activeRefs}
         ref={setDxGrid}
       />

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

@@ -8,7 +8,7 @@ import { type Meta } from '@storybook/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Client } from '@dxos/client';
-import { createDocAccessor, type ReactiveEchoObject } from '@dxos/client/echo';
+import { createDocAccessor, type AnyLiveObject } from '@dxos/client/echo';
 import { defaultFunctions } from '@dxos/compute';
 import { getRegisteredFunctionNames } from '@dxos/compute/testing';
 import { automerge } from '@dxos/react-ui-editor';
@@ -32,7 +32,7 @@ const Story = ({ value, ...props }: StoryProps) => {
 
 const AutomergeStory = ({ value, ...props }: StoryProps) => {
   const cell = 'A1';
-  const [object, setObject] = useState<ReactiveEchoObject<SheetType>>();
+  const [object, setObject] = useState<AnyLiveObject<SheetType>>();
   useEffect(() => {
     setTimeout(async () => {
       const client = new Client({ types: [SheetType] });

package/src/components/GridSheet/util.ts

@@ -5,7 +5,7 @@
 import { useEffect, useState } from 'react';
 
 import { inRange } from '@dxos/compute';
-import { createDocAccessor, fullyQualifiedId } from '@dxos/react-client/echo';
+import { createDocAccessor } from '@dxos/react-client/echo';
 import { parseValue, cellClassesForFieldType } from '@dxos/react-ui-form';
 import {
   type GridContentProps,
@@ -21,7 +21,6 @@ import {
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 
-import { parseThreadAnchorAsCellRange } from '../../integrations';
 import { type SheetModel } from '../../model';
 import { cellClassNameForRange, rangeFromIndex } from '../../types';
 
@@ -53,13 +52,15 @@ const projectCellProps = (model: SheetModel, col: number, row: number): DxGridCe
   const address = { col, row };
   const rawValue = model.getValue(address);
   const ranges = model.sheet.ranges?.filter(({ range }) => inRange(rangeFromIndex(model.sheet, range), address));
-  const threadRefs = model.sheet.threads
-    ?.filter((thread) => {
-      const range = thread.target?.anchor && parseThreadAnchorAsCellRange(thread.target!.anchor);
-      return thread && range ? inRange(range, address) : false;
-    })
-    .map((thread) => fullyQualifiedId(thread!))
-    .join(' ');
+  const threadRefs = undefined;
+  // TODO(wittjosiah): Update this to get threads via relations.
+  // model.sheet.threads
+  //   ?.filter((thread) => {
+  //     const range = thread.target?.anchor && parseThreadAnchorAsCellRange(thread.target!.anchor);
+  //     return thread && range ? inRange(range, address) : false;
+  //   })
+  //   .map((thread) => fullyQualifiedId(thread!))
+  //   .join(' ');
 
   const description = model.getValueDescription(address);
   const type = description?.type;
@@ -89,13 +90,13 @@ const gridCellGetter = (model: SheetModel) => {
 
 export const rowLabelCell = (row: number) => ({
   value: rowToA1Notation(row),
-  className: 'text-end pie-1 text-subdued',
+  className: '!bg-toolbarSurface text-subdued text-end pie-1',
   resizeHandle: 'row',
 });
 
 export const colLabelCell = (col: number) => ({
   value: colToA1Notation(col),
-  className: 'text-subdued',
+  className: '!bg-toolbarSurface text-subdued',
   resizeHandle: 'col',
 });
 
@@ -105,6 +106,11 @@ const cellGetter = (model: SheetModel) => {
     switch (plane) {
       case 'grid':
         return getGridCells(nextBounds);
+      case 'fixedStartStart': {
+        return {
+          '0,0': { className: '!bg-toolbarSurface' },
+        };
+      }
       case 'frozenColsStart':
         return [...Array(nextBounds.end.row - nextBounds.start.row)].reduce((acc, _, r0) => {
           const r = nextBounds.start.row + r0;

package/src/components/RangeList/RangeList.tsx

@@ -2,10 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema } from 'effect';
 import React, { useCallback } from 'react';
 
 import { rangeToA1Notation } from '@dxos/compute';
-import { S } from '@dxos/echo-schema';
 import { useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { ghostHover } from '@dxos/react-ui-theme';
@@ -32,7 +32,7 @@ export const RangeList = ({ sheet }: RangeListProps) => {
   return (
     <>
       <h2 className='p-2 text-sm font-semibold'>{t('range list heading')}</h2>
-      <List.Root<Range> items={sheet.ranges} isItem={S.is(Range)}>
+      <List.Root<Range> items={sheet.ranges} isItem={Schema.is(Range)}>
         {({ items: ranges }) =>
           ranges.map((range, i) => (
             <List.Item key={i} item={range} classNames={['p-2', ghostHover]}>

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

@@ -9,6 +9,7 @@ import React from 'react';
 
 import { Capabilities, contributes, createResolver, IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { GraphPlugin } from '@dxos/plugin-graph';
 import { fullyQualifiedId, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { AttendableContainer } from '@dxos/react-ui-attention';
@@ -64,15 +65,11 @@ const meta: Meta = {
     withClientProvider({ types: [SheetType], createSpace: true }),
     withComputeGraphDecorator(),
     withTheme,
-    withLayout({
-      fullscreen: true,
-      tooltips: true,
-      classNames: 'grid',
-    }),
+    withLayout({ fullscreen: true, classNames: 'grid' }),
     withAttention,
     // TODO(wittjosiah): Consider whether we should refactor component so story doesn't need to depend on intents.
     withPluginManager({
-      plugins: [IntentPlugin()],
+      plugins: [IntentPlugin(), GraphPlugin()],
       capabilities: [
         contributes(
           Capabilities.IntentResolver,

package/src/components/SheetContainer/SheetContainer.tsx

@@ -14,23 +14,20 @@ import { GridSheet } from '../GridSheet';
 import { SheetProvider } from '../SheetContext';
 import { SheetToolbar } from '../SheetToolbar';
 
-export const SheetContainer = ({
-  space,
-  sheet,
-  role,
-  ignoreAttention,
-}: {
+export type SheetContainerProps = {
   space: Space;
   sheet: SheetType;
   role?: string;
   ignoreAttention?: boolean;
-}) => {
+};
+
+export const SheetContainer = ({ space, sheet, role, ignoreAttention }: SheetContainerProps) => {
   const graph = useComputeGraph(space);
 
   return graph ? (
     <SheetProvider sheet={sheet} graph={graph} ignoreAttention={ignoreAttention}>
       <StackItem.Content toolbar statusbar {...(role === 'section' && { classNames: 'aspect-video' })}>
-        <SheetToolbar attendableId={fullyQualifiedId(sheet)} />
+        <SheetToolbar id={fullyQualifiedId(sheet)} />
         <GridSheet />
         <FunctionEditor />
       </StackItem.Content>

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

@@ -14,7 +14,7 @@ import { SheetToolbar } from './SheetToolbar';
 import translations from '../../translations';
 
 const DefaultStory = () => {
-  return <SheetToolbar classNames={textBlockWidth} />;
+  return <SheetToolbar id='test' classNames={textBlockWidth} />;
 };
 
 export const Default = {};
@@ -23,7 +23,7 @@ const meta: Meta = {
   title: 'plugins/plugin-sheet/Toolbar',
   component: SheetToolbar,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ tooltips: true })],
+  decorators: [withTheme, withLayout()],
   parameters: { translations, layout: 'fullscreen' },
 };