@dxos/plugin-sheet 0.6.13-main.548ca8d → 0.6.13-main.ed424a1

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;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM9C,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;;EAKpB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC;AAGxD,eAAO,MAAM,UAAU;;;;;;EAMrB,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC;AAG1D,eAAO,MAAM,aAAa;;EAExB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAsCuC,CAAC;;oBAA8D,CAAC;uBAAyC,CAAC;wBAAwD,CAAC;;;;;;;;2BAAsP,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAvoB,CAAC;;oBAA8D,CAAC;uBAAyC,CAAC;wBAAwD,CAAC;;;;;;;;2BAAsP,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;AAnCjrB,qBAAa,SAAU,SAAQ,cAwB7B;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"}
+{"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;;EAKpB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC;AAGxD,eAAO,MAAM,KAAK;;;;;;;;;;;;;EAIhB,CAAC;AAGH,eAAO,MAAM,aAAa;;EAExB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqCwN,CAAC;;oBAA8D,CAAC;uBAAyC,CAAC;wBAAwD,CAAC;;;;;;;;2BAAsP,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAvoB,CAAC;;oBAA8D,CAAC;uBAAyC,CAAC;wBAAwD,CAAC;;;;;;;;2BAAsP,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;AAlCl2B,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.13-main.548ca8d",
+  "version": "0.6.13-main.ed424a1",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -77,30 +77,31 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^8.0.5",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.6.13-main.548ca8d",
-    "@dxos/async": "0.6.13-main.548ca8d",
-    "@dxos/context": "0.6.13-main.548ca8d",
-    "@dxos/client": "0.6.13-main.548ca8d",
-    "@dxos/crypto": "0.6.13-main.548ca8d",
-    "@dxos/debug": "0.6.13-main.548ca8d",
-    "@dxos/invariant": "0.6.13-main.548ca8d",
-    "@dxos/keys": "0.6.13-main.548ca8d",
-    "@dxos/echo-schema": "0.6.13-main.548ca8d",
-    "@dxos/log": "0.6.13-main.548ca8d",
-    "@dxos/plugin-client": "0.6.13-main.548ca8d",
-    "@dxos/plugin-attention": "0.6.13-main.548ca8d",
-    "@dxos/plugin-graph": "0.6.13-main.548ca8d",
-    "@dxos/plugin-markdown": "0.6.13-main.548ca8d",
-    "@dxos/plugin-space": "0.6.13-main.548ca8d",
-    "@dxos/plugin-script": "0.6.13-main.548ca8d",
-    "@dxos/plugin-stack": "0.6.13-main.548ca8d",
-    "@dxos/react-client": "0.6.13-main.548ca8d",
-    "@dxos/react-hooks": "0.6.13-main.548ca8d",
-    "@dxos/react-ui-attention": "0.6.13-main.548ca8d",
-    "@dxos/react-ui-editor": "0.6.13-main.548ca8d",
-    "@dxos/react-ui-grid": "0.6.13-main.548ca8d",
-    "@dxos/schema": "0.6.13-main.548ca8d",
-    "@dxos/util": "0.6.13-main.548ca8d"
+    "@dxos/async": "0.6.13-main.ed424a1",
+    "@dxos/app-framework": "0.6.13-main.ed424a1",
+    "@dxos/client": "0.6.13-main.ed424a1",
+    "@dxos/crypto": "0.6.13-main.ed424a1",
+    "@dxos/context": "0.6.13-main.ed424a1",
+    "@dxos/debug": "0.6.13-main.ed424a1",
+    "@dxos/echo-schema": "0.6.13-main.ed424a1",
+    "@dxos/invariant": "0.6.13-main.ed424a1",
+    "@dxos/keys": "0.6.13-main.ed424a1",
+    "@dxos/log": "0.6.13-main.ed424a1",
+    "@dxos/plugin-client": "0.6.13-main.ed424a1",
+    "@dxos/plugin-attention": "0.6.13-main.ed424a1",
+    "@dxos/plugin-graph": "0.6.13-main.ed424a1",
+    "@dxos/plugin-script": "0.6.13-main.ed424a1",
+    "@dxos/plugin-markdown": "0.6.13-main.ed424a1",
+    "@dxos/plugin-stack": "0.6.13-main.ed424a1",
+    "@dxos/plugin-space": "0.6.13-main.ed424a1",
+    "@dxos/react-client": "0.6.13-main.ed424a1",
+    "@dxos/react-hooks": "0.6.13-main.ed424a1",
+    "@dxos/react-ui-attention": "0.6.13-main.ed424a1",
+    "@dxos/react-ui-data": "0.6.13-main.ed424a1",
+    "@dxos/schema": "0.6.13-main.ed424a1",
+    "@dxos/react-ui-grid": "0.6.13-main.ed424a1",
+    "@dxos/react-ui-editor": "0.6.13-main.ed424a1",
+    "@dxos/util": "0.6.13-main.ed424a1"
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.1",
@@ -112,19 +113,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-generator": "0.6.13-main.548ca8d",
-    "@dxos/random": "0.6.13-main.548ca8d",
-    "@dxos/react-ui": "0.6.13-main.548ca8d",
-    "@dxos/react-ui-theme": "0.6.13-main.548ca8d",
-    "@dxos/react-ui-types": "0.6.13-main.548ca8d",
-    "@dxos/storybook-utils": "0.6.13-main.548ca8d",
-    "@dxos/react-ui-syntax-highlighter": "0.6.13-main.548ca8d"
+    "@dxos/random": "0.6.13-main.ed424a1",
+    "@dxos/echo-generator": "0.6.13-main.ed424a1",
+    "@dxos/react-ui-syntax-highlighter": "0.6.13-main.ed424a1",
+    "@dxos/react-ui": "0.6.13-main.ed424a1",
+    "@dxos/react-ui-theme": "0.6.13-main.ed424a1",
+    "@dxos/react-ui-types": "0.6.13-main.ed424a1",
+    "@dxos/storybook-utils": "0.6.13-main.ed424a1"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.6.13-main.548ca8d",
-    "@dxos/react-ui-theme": "0.6.13-main.548ca8d"
+    "@dxos/react-ui-theme": "0.6.13-main.ed424a1",
+    "@dxos/react-ui": "0.6.13-main.ed424a1"
   },
   "publishConfig": {
     "access": "public"

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

@@ -10,7 +10,7 @@ import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { GridSheet } from './GridSheet';
 import { useComputeGraph } from '../../hooks';
-import { useTestSheet, withComputeGraphDecorator } from '../../testing';
+import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
 import { SheetType } from '../../types';
 import { SheetProvider } from '../SheetContext';
 
@@ -28,7 +28,7 @@ export default {
 export const Basic = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
   if (!sheet || !graph) {
     return null;
   }

package/src/components/GridSheet/GridSheet.tsx

@@ -42,7 +42,7 @@ const sheetRowDefault = { grid: { size: 32, resizeable: true } };
 const sheetColDefault = { frozenColsStart: { size: 48 }, grid: { size: 180, resizeable: true } };
 
 export const GridSheet = () => {
-  const { id, model, formatting, editing, setEditing, setCursor, setRange } = useSheetContext();
+  const { id, model, editing, setEditing, setCursor, setRange } = useSheetContext();
   const dxGrid = useRef<DxGridElement | null>(null);
   const rangeNotifier = useRef<CellRangeNotifier>();
   const { hasAttention } = useAttention(id);
@@ -51,7 +51,9 @@ export const GridSheet = () => {
     (event: FocusEvent) => {
       if (!editing) {
         const cell = closestCell(event.target);
-        setCursor(cell && cell.plane === 'grid' ? { col: cell.col, row: cell.row } : undefined);
+        if (cell && cell.plane === 'grid') {
+          setCursor({ col: cell.col, row: cell.row });
+        }
       }
     },
     [editing],
@@ -116,7 +118,7 @@ export const GridSheet = () => {
     [hasAttention],
   );
 
-  const { columns, rows } = useSheetModelDxGridProps(dxGrid, model, formatting);
+  const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
 
   const extension = useMemo(
     () => [

package/src/components/GridSheet/util.ts

@@ -5,6 +5,7 @@
 import { type MutableRefObject, useEffect, useLayoutEffect, useState } from 'react';
 
 import { createDocAccessor } from '@dxos/react-client/echo';
+import { parseValue, cellClassesForFieldType } from '@dxos/react-ui-data';
 import {
   type GridContentProps,
   type DxGridElement,
@@ -12,13 +13,14 @@ import {
   type DxGridPlane,
   type DxGridPlaneRange,
   type DxGridPlaneCells,
+  type DxGridCellValue,
   colToA1Notation,
   rowToA1Notation,
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type CellAddress } from '../../defs';
-import { type SheetModel, type FormattingModel } from '../../model';
+import { type CellAddress, inRange, cellClassNameForRange } from '../../defs';
+import { type SheetModel } from '../../model';
 
 export const dxGridCellIndexToSheetCellAddress = (index: string): CellAddress => {
   const [colStr, rowStr] = index.split(',');
@@ -52,7 +54,20 @@ const createDxGridRows = (model: SheetModel): DxGridAxisMeta => {
   );
 };
 
-const gridCellGetter = (model: SheetModel, formatting: FormattingModel) => {
+const projectCellProps = (model: SheetModel, col: number, row: number): DxGridCellValue => {
+  const address = { col, row };
+  const rawValue = model.getValue(address);
+  if (rawValue === undefined || rawValue === null) {
+    return { value: '' };
+  }
+  const ranges = model.sheet.ranges?.filter(({ range }) => inRange(range, address));
+  const type = model.getValueType(address);
+  const classNames = ranges?.map(cellClassNameForRange).reverse();
+
+  return { value: parseValue(type, rawValue), className: mx(cellClassesForFieldType(type), classNames) };
+};
+
+const gridCellGetter = (model: SheetModel) => {
   // TODO(thure): Actually use the cache.
   const cachedGridCells: DxGridPlaneCells = {};
   return (nextBounds: DxGridPlaneRange): DxGridPlaneCells => {
@@ -60,10 +75,10 @@ const gridCellGetter = (model: SheetModel, formatting: FormattingModel) => {
       return [...Array(nextBounds.end.row - nextBounds.start.row)].forEach((_, r0) => {
         const col = nextBounds.start.col + c0;
         const row = nextBounds.start.row + r0;
-        const cell = formatting.getFormatting({ col, row });
+        const cell = projectCellProps(model, col, row);
         if (cell.value) {
           cachedGridCells;
-          cachedGridCells[`${col},${row}`] = { value: cell.value, className: mx(cell.classNames) };
+          cachedGridCells[`${col},${row}`] = cell;
         }
       });
     });
@@ -79,8 +94,8 @@ export const rowLabelCell = (row: number) => ({
 
 export const colLabelCell = (col: number) => ({ value: colToA1Notation(col), resizeHandle: 'col' });
 
-const cellGetter = (model: SheetModel, formatting: FormattingModel) => {
-  const getGridCells = gridCellGetter(model, formatting);
+const cellGetter = (model: SheetModel) => {
+  const getGridCells = gridCellGetter(model);
   return (nextBounds: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells => {
     switch (plane) {
       case 'grid':
@@ -106,7 +121,6 @@ const cellGetter = (model: SheetModel, formatting: FormattingModel) => {
 export const useSheetModelDxGridProps = (
   dxGridRef: MutableRefObject<DxGridElement | null>,
   model: SheetModel,
-  formatting: FormattingModel,
 ): Pick<GridContentProps, 'columns' | 'rows'> => {
   const [columns, setColumns] = useState<DxGridAxisMeta>(createDxGridColumns(model));
   const [rows, setRows] = useState<DxGridAxisMeta>(createDxGridColumns(model));
@@ -114,14 +128,14 @@ export const useSheetModelDxGridProps = (
   useLayoutEffect(() => {
     const cellsAccessor = createDocAccessor(model.sheet, ['cells']);
     if (dxGridRef.current) {
-      dxGridRef.current.getCells = cellGetter(model, formatting);
+      dxGridRef.current.getCells = cellGetter(model);
     }
     const handleCellsUpdate = () => {
       dxGridRef.current?.requestUpdate('initialCells');
     };
     cellsAccessor.handle.addListener('change', handleCellsUpdate);
     return () => cellsAccessor.handle.removeListener('change', handleCellsUpdate);
-  }, [model, formatting]);
+  }, [model]);
 
   useEffect(() => {
     const columnMetaAccessor = createDocAccessor(model.sheet, ['columnMeta']);

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

@@ -10,7 +10,7 @@ import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { SheetContainer } from './SheetContainer';
 import { useComputeGraph } from '../../hooks';
-import { useTestSheet, withComputeGraphDecorator } from '../../testing';
+import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
 import { SheetType } from '../../types';
 
 export default {
@@ -31,7 +31,7 @@ export default {
 export const Basic = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
-  const sheet = useTestSheet(space, graph);
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
   if (!sheet || !graph) {
     return null;
   }

package/src/components/SheetContainer/SheetContainer.tsx

@@ -2,43 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useCallback } from 'react';
-
-import { useIntentDispatcher } from '@dxos/app-framework';
+import React from 'react';
 
 import { FunctionEditor } from '../FunctionEditor';
 import { GridSheet } from '../GridSheet';
 import { SheetProvider, type SheetProviderProps } from '../SheetContext';
-import { Toolbar, type ToolbarAction } from '../Toolbar';
+import { Toolbar } from '../Toolbar';
 
 export const SheetContainer = ({ graph, sheet, role }: SheetProviderProps & { role?: string }) => {
-  const dispatch = useIntentDispatcher();
-
-  // TODO(Zan): Centralise the toolbar action handler. Current implementation in stories.
-  const handleAction = useCallback(
-    (action: ToolbarAction) => {
-      switch (action.type) {
-        case 'comment': {
-          // TODO(Zan): We shouldn't hardcode the action ID.
-          void dispatch({
-            action: 'dxos.org/plugin/thread/action/create',
-            data: {
-              cursor: action.anchor,
-              name: action.cellContent,
-              subject: sheet,
-            },
-          });
-        }
-      }
-    },
-    [sheet, dispatch],
-  );
-
   return (
     <SheetProvider sheet={sheet} graph={graph}>
-      <Toolbar.Root onAction={handleAction} role={role}>
+      <Toolbar.Root role={role}>
         <Toolbar.Styles />
-        <Toolbar.Format />
         <Toolbar.Alignment />
         <Toolbar.Separator />
         <Toolbar.Actions />

package/src/components/SheetContext/SheetContext.tsx

@@ -10,15 +10,14 @@ import { Grid, useGridContext, type GridScopedProps, type GridEditing } from '@d
 
 import { type CellAddress, type CellRange } from '../../defs';
 import { type ComputeGraph } from '../../graph';
-import { useSheetModel, useFormattingModel, useSelectThreadOnCellFocus, useThreadDecorations } from '../../hooks';
-import { type FormattingModel, type SheetModel, createDecorations } from '../../model';
+import { useSheetModel, useSelectThreadOnCellFocus, useThreadDecorations } from '../../hooks';
+import { type SheetModel, createDecorations } from '../../model';
 import { type SheetType } from '../../types';
 
 export type SheetContextValue = {
   id: string;
 
   model: SheetModel;
-  formatting: FormattingModel;
 
   // Cursor state.
   // TODO(burdon): Cursor and range should use indices.
@@ -49,11 +48,10 @@ export const useSheetContext = (): SheetContextValue => {
 
 const SheetProviderImpl = ({
   model,
-  formatting,
   onInfo,
   children,
   __gridScope,
-}: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'onInfo' | 'model' | 'formatting'>>>) => {
+}: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'onInfo' | 'model'>>>) => {
   const { id, editing, setEditing } = useGridContext('SheetProvider', __gridScope);
 
   // TODO(Zan): Impl. set range and set cursor that scrolls to that cell or range if it is not visible.
@@ -71,7 +69,6 @@ const SheetProviderImpl = ({
       value={{
         id,
         model,
-        formatting,
         editing,
         setEditing,
         cursor,
@@ -96,11 +93,10 @@ export type SheetProviderProps = {
 
 export const SheetProvider = ({ children, graph, sheet, readonly, onInfo }: PropsWithChildren<SheetProviderProps>) => {
   const model = useSheetModel(graph, sheet, { readonly });
-  const formatting = useFormattingModel(model);
 
-  return !model || !formatting ? null : (
+  return !model ? null : (
     <Grid.Root id={fullyQualifiedId(sheet)}>
-      <SheetProviderImpl model={model} formatting={formatting} onInfo={onInfo}>
+      <SheetProviderImpl model={model} onInfo={onInfo}>
         {children}
       </SheetProviderImpl>
     </Grid.Root>

package/src/components/Toolbar/Toolbar.tsx

@@ -3,8 +3,9 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
 
+import { useIntentDispatcher } from '@dxos/app-framework';
 import {
   Icon,
   Toolbar as NaturalToolbar,
@@ -18,9 +19,18 @@ import {
 import { useAttention } from '@dxos/react-ui-attention';
 import { nonNullable } from '@dxos/util';
 
-import { addressToIndex } from '../../defs';
+import {
+  addressToIndex,
+  type AlignKey,
+  type AlignValue,
+  type CommentKey,
+  type CommentValue,
+  inRange,
+  type StyleKey,
+  type StyleValue,
+} from '../../defs';
 import { SHEET_PLUGIN } from '../../meta';
-import { type Formatting } from '../../types';
+import { type SheetType } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
 //
@@ -71,42 +81,92 @@ export const ToolbarItem = ({ itemType, icon, children, ...props }: ToolbarItemP
 // Root
 //
 
-type AlignValue = 'left' | 'center' | 'right' | 'unset';
-type AlignAction = { type: 'align'; value: AlignValue };
-
-type CommentAction = { type: 'comment'; anchor: string; cellContent?: string };
-
-type FormatValue = 'date' | 'currency' | 'unset';
-type FormatAction = { type: 'format'; value: FormatValue };
+type AlignAction = { key: AlignKey; value: AlignValue };
+type CommentAction = { key: CommentKey; value: CommentValue; cellContent?: string };
+type StyleAction = { key: StyleKey; value: StyleValue };
 
-type StyleValue = 'highlight' | 'unset';
-type StyleAction = { type: 'style'; value: StyleValue };
+export type ToolbarAction = StyleAction | AlignAction | CommentAction;
 
-export type ToolbarAction = StyleAction | AlignAction | FormatAction | CommentAction;
-
-export type ToolbarActionType = ToolbarAction['type'];
+export type ToolbarActionType = ToolbarAction['key'];
 
 export type ToolbarActionHandler = (action: ToolbarAction) => void;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
-    onAction?: ToolbarActionHandler;
     role?: string;
   }>
 >;
 
-const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
+const [ToolbarContextProvider, useToolbarContext] = createContext<{ onAction: (action: ToolbarAction) => void }>(
+  'Toolbar',
+);
 
 // TODO(Zan): Factor out, copied this from MarkdownPlugin.
 const sectionToolbarLayout =
   'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';
 
-const ToolbarRoot = ({ children, onAction, role, classNames }: ToolbarProps) => {
-  const { id } = useSheetContext();
+type Range = SheetType['ranges'][number];
+
+const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
+  const { id, model, range, cursor } = useSheetContext();
   const { hasAttention } = useAttention(id);
+  const dispatch = useIntentDispatcher();
+
+  // TODO(Zan): Centralise the toolbar action handler. Current implementation in stories.
+  const handleAction = useCallback(
+    (action: ToolbarAction) => {
+      switch (action.key) {
+        case 'align':
+          if (cursor) {
+            const index = model.sheet.ranges?.findIndex(
+              (range) => range.key === action.key && inRange(range.range, cursor),
+            );
+            const nextRange = range ? { from: range.from, to: range.to ?? range.from } : { from: cursor, to: cursor };
+            const nextRangeEntity = {
+              range: nextRange as Range['range'],
+              key: action.key,
+              value: action.value,
+            };
+            if (index < 0) {
+              model.sheet.ranges?.push(nextRangeEntity);
+            } else {
+              model.sheet.ranges?.splice(index, 1, nextRangeEntity);
+            }
+          }
+          break;
+        case 'style':
+          if (action.value === 'unset') {
+            const index = model.sheet.ranges?.findIndex((range) => range.key === action.key);
+            if (index >= 0) {
+              model.sheet.ranges?.splice(index, 1);
+            }
+          } else if (range || cursor) {
+            const nextRange = range ? { from: range.from, to: range.to ?? range.from } : { from: cursor, to: cursor };
+            model.sheet.ranges?.push({
+              range: nextRange as Range['range'],
+              key: action.key,
+              value: action.value,
+            });
+          }
+          break;
+        case 'comment': {
+          // TODO(Zan): We shouldn't hardcode the action ID.
+          void dispatch({
+            action: 'dxos.org/plugin/thread/action/create',
+            data: {
+              cursor: action.value,
+              name: action.cellContent,
+              subject: model.sheet,
+            },
+          });
+        }
+      }
+    },
+    [model.sheet, range, cursor, dispatch],
+  );
 
   return (
-    <ToolbarContextProvider onAction={onAction}>
+    <ToolbarContextProvider onAction={handleAction}>
       <NaturalToolbar.Root
         classNames={[
           ...(role === 'section'
@@ -126,61 +186,39 @@ const ToolbarRoot = ({ children, onAction, role, classNames }: ToolbarProps) =>
 type ButtonProps<T> = {
   value: T;
   icon: string;
-  getState: (state: Formatting) => boolean;
-  disabled?: (state: Formatting) => boolean;
+  disabled?: (state: Range) => boolean;
 };
 
 //
 // Alignment
 //
 
-const formatOptions: ButtonProps<FormatValue>[] = [
-  { value: 'date', icon: 'ph--calendar--regular', getState: (state) => false },
-  { value: 'currency', icon: 'ph--currency-dollar--regular', getState: (state) => false },
-];
-
-const Format = () => {
-  const { onAction } = useToolbarContext('Format');
-  const { t } = useTranslation(SHEET_PLUGIN);
-
-  return (
-    <NaturalToolbar.ToggleGroup
-      type='single'
-      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
-    >
-      {formatOptions.map(({ value, getState, icon }) => (
-        <ToolbarItem
-          itemType='toggleGroupItem'
-          key={value}
-          value={value}
-          icon={icon}
-          onClick={() => onAction?.({ type: 'format', value })}
-        >
-          {t(`toolbar ${value} label`)}
-        </ToolbarItem>
-      ))}
-    </NaturalToolbar.ToggleGroup>
-  );
-};
-
 const alignmentOptions: ButtonProps<AlignValue>[] = [
-  { value: 'left', icon: 'ph--text-align-left--regular', getState: (state) => false },
-  { value: 'center', icon: 'ph--text-align-center--regular', getState: (state) => false },
-  { value: 'right', icon: 'ph--text-align-right--regular', getState: (state) => false },
+  { value: 'start', icon: 'ph--text-align-left--regular' },
+  { value: 'center', icon: 'ph--text-align-center--regular' },
+  { value: 'end', icon: 'ph--text-align-right--regular' },
 ];
 
 const Alignment = () => {
+  const { cursor, model } = useSheetContext();
   const { onAction } = useToolbarContext('Alignment');
   const { t } = useTranslation(SHEET_PLUGIN);
 
+  const value = useMemo(
+    () =>
+      cursor
+        ? model.sheet.ranges?.find(({ range, key }) => key === 'alignment' && inRange(range, cursor))?.value
+        : undefined,
+    [cursor, model.sheet.ranges],
+  );
+
   return (
     <NaturalToolbar.ToggleGroup
       type='single'
-      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
-      // disabled={state?.blockType === 'codeblock'}
-      onValueChange={(value: AlignValue) => onAction?.({ type: 'align', value })}
+      value={value}
+      onValueChange={(value: AlignValue) => onAction?.({ key: 'align', value })}
     >
-      {alignmentOptions.map(({ value, getState, icon }) => (
+      {alignmentOptions.map(({ value, icon }) => (
         <ToolbarItem itemType='toggleGroupItem' key={value} value={value} icon={icon}>
           {t(`toolbar ${value} label`)}
         </ToolbarItem>
@@ -189,23 +227,34 @@ const Alignment = () => {
   );
 };
 
-const styleOptions: ButtonProps<StyleValue>[] = [
-  { value: 'highlight', icon: 'ph--highlighter--regular', getState: (state) => false },
-];
+const styleOptions: ButtonProps<StyleValue>[] = [{ value: 'highlight', icon: 'ph--highlighter--regular' }];
 
 const Styles = () => {
+  const { cursor, model } = useSheetContext();
   const { onAction } = useToolbarContext('Styles');
   const { t } = useTranslation(SHEET_PLUGIN);
 
+  const activeValues = useMemo(
+    () =>
+      cursor
+        ? model.sheet.ranges
+            ?.filter(({ range, key }) => key === 'style' && inRange(range, cursor))
+            .reduce((acc, { value }) => {
+              acc.add(value);
+              return acc;
+            }, new Set())
+        : undefined,
+    [cursor, model.sheet.ranges],
+  );
+
   return (
     <>
-      {styleOptions.map(({ value, getState, icon }) => (
+      {styleOptions.map(({ value, icon }) => (
         <ToolbarItem
           itemType='toggle'
           key={value}
-          onPressedChange={(nextPressed: boolean) =>
-            onAction?.({ type: 'style', value: nextPressed ? 'highlight' : 'unset' })
-          }
+          pressed={activeValues?.has(value)}
+          onPressedChange={(nextPressed: boolean) => onAction?.({ key: 'style', value: nextPressed ? value : 'unset' })}
           icon={icon}
         >
           {t(`toolbar ${value} label`)}
@@ -256,8 +305,8 @@ const Actions = () => {
           return;
         }
         return onAction?.({
-          type: 'comment',
-          anchor: addressToIndex(model.sheet, cursor),
+          key: 'comment',
+          value: addressToIndex(model.sheet, cursor),
           cellContent: model.getCellText(cursor),
         });
       }}
@@ -272,7 +321,6 @@ export const Toolbar = {
   Root: ToolbarRoot,
   Separator: ToolbarSeparator,
   Alignment,
-  Format,
   Styles,
   Actions,
 };

package/src/defs/index.ts

@@ -4,3 +4,4 @@
 
 export * from './types';
 export * from './util';
+export * from './sheet-range-types';