@dxos/plugin-sheet 0.6.11-staging.e6894a4 → 0.6.12-main.5cc132e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.6.11-staging.e6894a4",
+  "version": "0.6.12-main.5cc132e",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,14 +10,16 @@
     ".": {
       "browser": "./dist/lib/browser/index.mjs",
       "node": {
-        "default": "./dist/lib/node/index.cjs"
+        "require": "./dist/lib/node/index.cjs",
+        "default": "./dist/lib/node-esm/index.mjs"
       },
       "types": "./dist/types/src/index.d.ts"
     },
     "./meta": {
       "browser": "./dist/lib/browser/meta.mjs",
       "node": {
-        "default": "./dist/lib/node/meta.cjs"
+        "require": "./dist/lib/node/meta.cjs",
+        "default": "./dist/lib/node-esm/meta.mjs"
       },
       "types": "./dist/types/src/meta.d.ts"
     },
@@ -31,7 +33,8 @@
     "./types": {
       "browser": "./dist/lib/browser/types.mjs",
       "node": {
-        "default": "./dist/lib/node/types.cjs"
+        "require": "./dist/lib/node/types.cjs",
+        "default": "./dist/lib/node-esm/types.mjs"
       },
       "types": "./dist/types/src/types.d.ts"
     }
@@ -76,25 +79,26 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^8.0.5",
     "react-resize-detector": "^11.0.1",
-    "@dxos/async": "0.6.11-staging.e6894a4",
-    "@dxos/client": "0.6.11-staging.e6894a4",
-    "@dxos/context": "0.6.11-staging.e6894a4",
-    "@dxos/crypto": "0.6.11-staging.e6894a4",
-    "@dxos/app-framework": "0.6.11-staging.e6894a4",
-    "@dxos/debug": "0.6.11-staging.e6894a4",
-    "@dxos/echo-schema": "0.6.11-staging.e6894a4",
-    "@dxos/keys": "0.6.11-staging.e6894a4",
-    "@dxos/log": "0.6.11-staging.e6894a4",
-    "@dxos/invariant": "0.6.11-staging.e6894a4",
-    "@dxos/plugin-client": "0.6.11-staging.e6894a4",
-    "@dxos/plugin-graph": "0.6.11-staging.e6894a4",
-    "@dxos/plugin-script": "0.6.11-staging.e6894a4",
-    "@dxos/plugin-space": "0.6.11-staging.e6894a4",
-    "@dxos/react-client": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui-attention": "0.6.11-staging.e6894a4",
-    "@dxos/plugin-stack": "0.6.11-staging.e6894a4",
-    "@dxos/util": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui-editor": "0.6.11-staging.e6894a4"
+    "@dxos/app-framework": "0.6.12-main.5cc132e",
+    "@dxos/async": "0.6.12-main.5cc132e",
+    "@dxos/client": "0.6.12-main.5cc132e",
+    "@dxos/crypto": "0.6.12-main.5cc132e",
+    "@dxos/context": "0.6.12-main.5cc132e",
+    "@dxos/echo-schema": "0.6.12-main.5cc132e",
+    "@dxos/debug": "0.6.12-main.5cc132e",
+    "@dxos/invariant": "0.6.12-main.5cc132e",
+    "@dxos/keys": "0.6.12-main.5cc132e",
+    "@dxos/log": "0.6.12-main.5cc132e",
+    "@dxos/plugin-attention": "0.6.12-main.5cc132e",
+    "@dxos/plugin-client": "0.6.12-main.5cc132e",
+    "@dxos/plugin-graph": "0.6.12-main.5cc132e",
+    "@dxos/plugin-script": "0.6.12-main.5cc132e",
+    "@dxos/plugin-space": "0.6.12-main.5cc132e",
+    "@dxos/react-client": "0.6.12-main.5cc132e",
+    "@dxos/react-ui-attention": "0.6.12-main.5cc132e",
+    "@dxos/plugin-stack": "0.6.12-main.5cc132e",
+    "@dxos/react-ui-editor": "0.6.12-main.5cc132e",
+    "@dxos/util": "0.6.12-main.5cc132e"
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.1",
@@ -106,20 +110,20 @@
     "@types/react-window": "^1.8.8",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/echo-generator": "0.6.11-staging.e6894a4",
-    "@dxos/random": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui": "0.6.11-staging.e6894a4",
-    "@dxos/storybook-utils": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui-theme": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui-types": "0.6.11-staging.e6894a4"
+    "vite": "5.4.7",
+    "@dxos/echo-generator": "0.6.12-main.5cc132e",
+    "@dxos/random": "0.6.12-main.5cc132e",
+    "@dxos/react-ui": "0.6.12-main.5cc132e",
+    "@dxos/react-ui-types": "0.6.12-main.5cc132e",
+    "@dxos/react-ui-theme": "0.6.12-main.5cc132e",
+    "@dxos/storybook-utils": "0.6.12-main.5cc132e"
   },
   "optionalDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@dxos/react-ui": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui-theme": "0.6.11-staging.e6894a4"
+    "@dxos/react-ui": "0.6.12-main.5cc132e",
+    "@dxos/react-ui-theme": "0.6.12-main.5cc132e"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.tsx

@@ -5,13 +5,7 @@
 import { type IconProps, GridNine } from '@phosphor-icons/react';
 import React from 'react';
 
-import {
-  NavigationAction,
-  parseIntentPlugin,
-  resolvePlugin,
-  type PluginDefinition,
-  type LayoutCoordinate,
-} from '@dxos/app-framework';
+import { NavigationAction, parseIntentPlugin, resolvePlugin, type PluginDefinition } from '@dxos/app-framework';
 import { create } from '@dxos/echo-schema';
 import { parseClientPlugin } from '@dxos/plugin-client';
 import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
@@ -30,7 +24,7 @@ import {
 import { EdgeFunctionPlugin, EdgeFunctionPluginTranslations } from './components/ComputeGraph/edge-function';
 import { ComputeGraphContextProvider } from './components/ComputeGraph/graph-context';
 import meta, { SHEET_PLUGIN } from './meta';
-import { SheetModel } from './model';
+import { compareIndexPositions, SheetModel } from './model';
 import translations from './translations';
 import { createSheet, SheetAction, type SheetPluginProvides, SheetType } from './types';
 
@@ -138,22 +132,27 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
           },
         ],
       },
+      thread: {
+        predicate: (data) => data instanceof SheetType,
+        createSort: (sheet) => (anchorA, anchorB) =>
+          !anchorA || !anchorB ? 0 : compareIndexPositions(sheet, anchorA, anchorB),
+      },
       surface: {
         component: ({ data, role = 'never' }) => {
-          if (!['article', 'section'].includes(role) || !isEchoObject(data.object)) {
-            return null;
+          // TODO(burdon): Standardize wrapper (with room for toolbar).
+          const space = isEchoObject(data.object) && getSpace(data.object);
+          if (space && data.object instanceof SheetType) {
+            switch (role) {
+              case 'article':
+              case 'section': {
+                return (
+                  <SheetContainer sheet={data.object} space={space} role={role} remoteFunctionUrl={remoteFunctionUrl} />
+                );
+              }
+            }
           }
 
-          const space = getSpace(data.object);
-          return space && data.object instanceof SheetType ? (
-            <SheetContainer
-              sheet={data.object}
-              space={space}
-              role={role}
-              coordinate={data.coordinate as LayoutCoordinate}
-              remoteFunctionUrl={remoteFunctionUrl}
-            />
-          ) : null;
+          return null;
         },
       },
       intent: {

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

@@ -6,9 +6,8 @@ import { CompletionContext, type CompletionSource } from '@codemirror/autocomple
 import { EditorState } from '@codemirror/state';
 // @ts-ignore
 import { testTree } from '@lezer/generator/test';
-import { expect } from 'chai';
 import { spreadsheet } from 'codemirror-lang-spreadsheet';
-import { describe, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 
 import { sheetExtension } from './extension';
 import { defaultFunctions } from '../../model/functions';

package/src/components/ComputeGraph/graph.browser.test.ts

@@ -2,8 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { expect } from 'chai';
-import { describe, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 
 import { Trigger } from '@dxos/async';
 

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

@@ -11,13 +11,14 @@ import { Client } from '@dxos/client';
 import { type EchoReactiveObject } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 import { getSpace, type Space } from '@dxos/react-client/echo';
-import { Button, Tooltip } from '@dxos/react-ui';
+import { Button } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { withTheme, withFullscreen } from '@dxos/storybook-utils';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { Sheet } from './Sheet';
 import { type SizeMap } from './grid';
 import { useSheetContext } from './sheet-context';
+import { addressToIndex, rangeToIndex } from '../../model';
 import { createTestSheet, testSheetName } from '../../testing';
 import { ValueTypeEnum, SheetType } from '../../types';
 import { type ComputeGraph, createComputeGraph } from '../ComputeGraph';
@@ -36,7 +37,7 @@ const SheetWithToolbar = ({ debug, space }: { debug?: boolean; space: Space }) =
       return;
     }
 
-    const idx = range ? model.rangeToIndex(range) : model.addressToIndex(cursor);
+    const idx = range ? rangeToIndex(model.sheet, range) : addressToIndex(model.sheet, cursor);
     model.sheet.formatting[idx] ??= {};
     const format = model.sheet.formatting[idx];
 
@@ -75,6 +76,9 @@ const SheetWithToolbar = ({ debug, space }: { debug?: boolean; space: Space }) =
         format.precision = 2;
         break;
       }
+      case 'comment': {
+        break;
+      }
     }
   };
 
@@ -122,7 +126,7 @@ const withGraphDecorator: Decorator = (Story) => {
 export default {
   title: 'plugin-sheet/Sheet',
   component: Sheet,
-  decorators: [withGraphDecorator, withTheme, withFullscreen({ classNames: 'inset-4' })],
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true, classNames: 'inset-4' }), withGraphDecorator],
 };
 
 export const Default = () => {
@@ -134,11 +138,9 @@ export const Default = () => {
   }
 
   return (
-    <Tooltip.Provider>
-      <Sheet.Root sheet={sheet} space={space} onInfo={() => setDebug((debug) => !debug)}>
-        <SheetWithToolbar debug={debug} space={space} />
-      </Sheet.Root>
-    </Tooltip.Provider>
+    <Sheet.Root sheet={sheet} space={space} onInfo={() => setDebug((debug) => !debug)}>
+      <SheetWithToolbar debug={debug} space={space} />
+    </Sheet.Root>
   );
 };
 

package/src/components/Sheet/Sheet.tsx

@@ -40,7 +40,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 } from '@dxos/react-ui-attention';
+import { createAttendableAttributes, useHasAttention } from '@dxos/react-ui-attention';
 import { mx } from '@dxos/react-ui-theme';
 
 import {
@@ -60,6 +60,7 @@ import {
 } from './grid';
 import { type GridSize, handleArrowNav, handleNav, useRangeSelect } from './nav';
 import { type SheetContextProps, SheetContextProvider, useSheetContext } from './sheet-context';
+import { useThreads } from './threads';
 import { getRectUnion, getRelativeClientRect, scrollIntoView } from './util';
 import {
   type CellIndex,
@@ -68,6 +69,8 @@ import {
   columnLetter,
   posEquals,
   rangeToA1Notation,
+  addressToIndex,
+  addressFromIndex,
 } from '../../model';
 import {
   CellEditor,
@@ -112,13 +115,11 @@ import {
  *  - Update formula ranges by selection.
  */
 
-// TODO(burdon): Factor out fragments.
 const fragments = {
   axis: 'bg-axisSurface text-axisText text-xs select-none',
   axisSelected: 'bg-attention text-baseText',
   cell: 'bg-gridCell',
   cellSelected: 'bg-gridCellSelected text-baseText border !border-accentSurface',
-  border: 'border-gridLine',
 };
 
 //
@@ -143,6 +144,10 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
   // Scrolling.
   const { rowsRef, columnsRef, contentRef } = useScrollHandlers();
 
+  // Threads.
+  // TODO(Zan): Move this to an extension once we have an extension model.
+  useThreads();
+
   //
   // Order of Row/columns.
   //
@@ -172,21 +177,21 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
   }, [rows, columns]);
 
   const handleMoveRows: SheetRowsProps['onMove'] = (from, to, num = 1) => {
-    const cursorIdx = cursor ? model.addressToIndex(cursor) : undefined;
+    const cursorIdx = cursor ? addressToIndex(model.sheet, cursor) : undefined;
     const [rows] = model.sheet.rows.splice(from, num);
     model.sheet.rows.splice(to, 0, rows);
     if (cursorIdx) {
-      setCursor(model.addressFromIndex(cursorIdx));
+      setCursor(addressFromIndex(model.sheet, cursorIdx));
     }
     setRows([...model.sheet.rows]);
   };
 
   const handleMoveColumns: SheetColumnsProps['onMove'] = (from, to, num = 1) => {
-    const cursorIdx = cursor ? model.addressToIndex(cursor) : undefined;
+    const cursorIdx = cursor ? addressToIndex(model.sheet, cursor) : undefined;
     const columns = model.sheet.columns.splice(from, num);
     model.sheet.columns.splice(to, 0, ...columns);
     if (cursorIdx) {
-      setCursor(model.addressFromIndex(cursorIdx));
+      setCursor(addressFromIndex(model.sheet, cursorIdx));
     }
     setColumns([...model.sheet.columns]);
   };
@@ -244,7 +249,6 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
       role='none'
       className={mx(
         'grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden',
-        fragments.border,
         classNames,
       )}
     >
@@ -425,7 +429,7 @@ const SheetRows = forwardRef<HTMLDivElement, SheetRowsProps>(
       <div className='relative flex grow overflow-hidden'>
         {/* Fixed border. */}
         <div
-          className={mx('z-20 absolute inset-0 border-y pointer-events-none', fragments.border)}
+          className={mx('z-20 absolute inset-0 border-y border-gridLine pointer-events-none')}
           style={{ width: axisWidth }}
         />
 
@@ -520,8 +524,7 @@ const GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onRe
         {...listeners}
         className={mx(
           'flex h-full items-center justify-center cursor-pointer',
-          'border-t focus-visible:outline-none',
-          fragments.border,
+          'border-t border-gridLine focus-visible:outline-none',
           fragments.axis,
           selected && fragments.axisSelected,
           isDragging && fragments.axisSelected,
@@ -588,7 +591,7 @@ const SheetColumns = forwardRef<HTMLDivElement, SheetColumnsProps>(
       <div className='relative flex grow overflow-hidden'>
         {/* Fixed border. */}
         <div
-          className={mx('z-20 absolute inset-0 border-x pointer-events-none', fragments.border)}
+          className={mx('z-20 absolute inset-0 border-x border-gridLine pointer-events-none')}
           style={{ height: axisHeight }}
         />
 
@@ -684,8 +687,7 @@ const GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, o
         {...listeners}
         className={mx(
           'flex h-full items-center justify-center cursor-pointer',
-          'border-l focus-visible:outline-none',
-          fragments.border,
+          'border-l border-gridLine focus-visible:outline-none',
           fragments.axis,
           selected && fragments.axisSelected,
           isDragging && fragments.axisSelected,
@@ -860,18 +862,17 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
     });
 
     // TODO(burdon): Prevent scroll if not attended.
-    const qualifiedSubjectId = fullyQualifiedId(model.sheet);
-    const attendableAttrs = createAttendableAttributes(qualifiedSubjectId);
-    // const attended = useHasAttention(qualifiedSubjectId);
-    const attended = true;
+    const id = fullyQualifiedId(model.sheet);
+    const attendableAttrs = createAttendableAttributes(id);
+    const hasAttention = useHasAttention(id);
 
     return (
       <div ref={containerRef} role='grid' className='relative flex grow overflow-hidden'>
         {/* Fixed border. */}
-        <div className={mx('z-20 absolute inset-0 border pointer-events-none', fragments.border)} />
+        <div className={mx('z-20 absolute inset-0 border border-gridLine pointer-events-none')} />
 
         {/* Grid scroll container. */}
-        <div ref={scrollerRef} className={mx('grow', attended && 'overflow-auto scrollbar-thin')}>
+        <div ref={scrollerRef} className={mx('grow', hasAttention && 'overflow-auto scrollbar-thin')}>
           {/* Scroll content. */}
           <div
             className='relative select-none'
@@ -888,7 +889,7 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
                 const style: CSSProperties = { position: 'absolute', top, left, width, height };
                 const cell = { row, column };
                 const id = addressToA1Notation(cell);
-                const idx = model.addressToIndex(cell);
+                const idx = addressToIndex(model.sheet, cell);
                 const active = posEquals(cursor, cell);
                 if (active && editing) {
                   const value = initialText.current ?? model.getCellText(cell) ?? '';
@@ -1009,19 +1010,47 @@ type SheetCellProps = {
 };
 
 const SheetCell = ({ id, cell, style, active, onSelect }: SheetCellProps) => {
-  const { formatting, editing, setRange } = useSheetContext();
+  const {
+    formatting,
+    editing,
+    setRange,
+    decorations,
+    model: { sheet },
+  } = useSheetContext();
   const { value, classNames } = formatting.getFormatting(cell);
 
+  const decorationsForCell = decorations.getDecorationsForCell(addressToIndex(sheet, cell)) ?? [];
+  const decorationAddedClasses = useMemo(
+    () => decorationsForCell.flatMap((d) => d.classNames ?? []),
+    [decorationsForCell],
+  );
+  const decoratedContent = decorationsForCell.reduce(
+    (children, { decorate }) => {
+      if (!decorate) {
+        return children;
+      }
+      const DecoratorComponent = decorate;
+      return <DecoratorComponent>{children}</DecoratorComponent>;
+    },
+    <div
+      role='none'
+      className={mx(
+        'flex flex-grow bs-full is-full px-2 items-center truncate cursor-pointer',
+        ...decorationAddedClasses,
+      )}
+    >
+      {value}
+    </div>,
+  );
+
   return (
     <div
       {...{ [`data-${CELL_DATA_KEY}`]: id }}
       role='cell'
       style={style}
       className={mx(
-        'flex w-full h-full truncate items-center border cursor-pointer',
-        'px-2 py-1',
+        'border border-gridLine cursor-pointer',
         fragments.cell,
-        fragments.border,
         active && ['z-20', fragments.cellSelected],
         classNames,
       )}
@@ -1034,7 +1063,7 @@ const SheetCell = ({ id, cell, style, active, onSelect }: SheetCellProps) => {
       }}
       onDoubleClick={() => onSelect?.(cell, true)}
     >
-      {value}
+      {decoratedContent}
     </div>
   );
 };
@@ -1093,7 +1122,7 @@ const SheetStatusBar = () => {
   }
 
   return (
-    <div className={mx('flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x', fragments.border)}>
+    <div className={mx('flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x border-gridLine')}>
       <div className='flex gap-4 items-center'>
         <div className='flex w-16 items-center font-mono'>
           {(range && rangeToA1Notation(range)) || (cursor && addressToA1Notation(cursor))}
@@ -1129,8 +1158,7 @@ const SheetDebug = () => {
     <div
       className={mx(
         'z-20 absolute right-0 top-20 bottom-20 w-[30rem] overflow-auto scrollbar-thin',
-        'border text-xs bg-neutral-50 dark:bg-black text-cyan-500 font-mono p-1 opacity-80',
-        fragments.border,
+        'border border-gridLine text-xs bg-neutral-50 dark:bg-black text-cyan-500 font-mono p-1 opacity-80',
       )}
     >
       <pre className='whitespace-pre-wrap'>

package/src/components/Sheet/decorations.ts

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { create } from '@dxos/echo-schema';
+
+export type Decoration = {
+  type: string;
+  /**
+   * A wrapping render function to encapsulate cell content. This function is applied between
+   * the cell's border and its padding/layout/content, allowing for custom rendering or
+   * additional elements to be inserted around the cell's main content.
+   */
+  decorate?: (props: { children: React.ReactNode }) => React.ReactNode;
+  /**
+   * An array of CSS class names to be applied to the content of the SheetCell.
+   * These classes can be used to style the cell's content independently of its structure.
+   */
+  classNames?: string[];
+  cellIndex: string;
+};
+
+export const createDecorations = () => {
+  // Reactive object to hold decorations
+  // TODO(Zan): Use CELL ID's to key the decoration map.
+  // TODO(Zan): Consider maintaining an index of decorations by type.
+  const { decorations } = create<{ decorations: Record<string, Decoration[]> }>({ decorations: {} });
+
+  const addDecoration = (cellIndex: string, decorator: Decoration) => {
+    decorations[cellIndex] = [...(decorations[cellIndex] || []), decorator];
+  };
+
+  const removeDecoration = (cellIndex: string, type?: string) => {
+    if (type) {
+      decorations[cellIndex] = (decorations[cellIndex] || []).filter((d) => d.type !== type);
+    } else {
+      delete decorations[cellIndex];
+    }
+  };
+
+  // TODO(Zan): I should check if returning the a value from a map in a deep signal is a reactive slice.
+  const getDecorationsForCell = (cellIndex: string): Decoration[] | undefined => {
+    return decorations[cellIndex];
+  };
+
+  const getAllDecorations = (): Decoration[] => {
+    const result: Decoration[] = [];
+    for (const decoratorArray of Object.values(decorations)) {
+      for (const decorator of decoratorArray) {
+        result.push(decorator);
+      }
+    }
+    return result;
+  };
+
+  return {
+    addDecoration,
+    removeDecoration,
+    getDecorationsForCell,
+    getAllDecorations,
+  } as const;
+};

package/src/components/Sheet/formatting.ts

@@ -4,7 +4,7 @@
 
 import { type ClassNameValue } from '@dxos/react-ui-types';
 
-import { type SheetModel, type CellAddress, inRange } from '../../model';
+import { type SheetModel, type CellAddress, inRange, addressToIndex, rangeFromIndex } from '../../model';
 import { ValueTypeEnum } from '../../types';
 
 export class FormattingModel {
@@ -23,7 +23,7 @@ export class FormattingModel {
     const locales = undefined;
 
     // Cell-specific formatting.
-    const idx = this.model.addressToIndex(cell);
+    const idx = addressToIndex(this.model.sheet, cell);
     let formatting = this.model.sheet.formatting?.[idx] ?? {};
     const classNames = [...(formatting?.classNames ?? [])];
 
@@ -31,7 +31,7 @@ export class FormattingModel {
     // TODO(burdon): NOTE: D0 means the D column.
     // TODO(burdon): Cache model formatting (e.g., for ranges). Create class out of this function.
     for (const [idx, _formatting] of Object.entries(this.model.sheet.formatting)) {
-      const range = this.model.rangeFromIndex(idx);
+      const range = rangeFromIndex(this.model.sheet, idx);
       if (inRange(range, cell)) {
         if (_formatting.classNames) {
           classNames.push(..._formatting.classNames);

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

@@ -2,12 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type PropsWithChildren, createContext, useContext, useState, useEffect } from 'react';
+import React, { type PropsWithChildren, createContext, useContext, useState, useEffect, useMemo } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { type FunctionType } from '@dxos/plugin-script';
 import { fullyQualifiedId, type Space } from '@dxos/react-client/echo';
 
+import { createDecorations } from './decorations';
 import { FormattingModel } from './formatting';
 import { type CellAddress, type CellRange, defaultFunctions, SheetModel } from '../../model';
 import { type SheetType } from '../../types';
@@ -36,6 +37,9 @@ export type SheetContextType = {
   // Events.
   // TODO(burdon): Generalize.
   onInfo?: () => void;
+
+  // Decorations.
+  decorations: ReturnType<typeof createDecorations>;
 };
 
 const SheetContext = createContext<SheetContextType | null>(null);
@@ -104,9 +108,12 @@ export const SheetContextProvider = ({
 }: PropsWithChildren<SheetContextProps>) => {
   const graph = useComputeGraph(space, options);
 
+  // TODO(Zan): We should offer a version of set range and set cursor that scrolls to
+  // that cell or range if it is not visible.
   const [cursor, setCursor] = useState<CellAddress>();
   const [range, setRange] = useState<CellRange>();
   const [editing, setEditing] = useState<boolean>(false);
+  const decorations = useMemo(() => createDecorations(), []);
 
   const [[model, formatting] = [], setModels] = useState<[SheetModel, FormattingModel] | undefined>(undefined);
   useEffect(() => {
@@ -142,6 +149,7 @@ export const SheetContextProvider = ({
         setEditing,
         // TODO(burdon): Change to event.
         onInfo,
+        decorations,
       }}
     >
       {children}