@dxos/plugin-sheet 0.8.4-main.7ace549 → 0.8.4-main.937b3ca

package/src/components/SheetToolbar/useToolbarState.ts

@@ -2,15 +2,32 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useMemo } from 'react';
-
-import { live } from '@dxos/live-object';
+import { Atom, type Registry, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import { useContext, useMemo } from 'react';
 
 import { type AlignState } from './align';
 import { type StyleState } from './style';
 
 export type ToolbarState = Partial<StyleState & AlignState>;
+export type ToolbarStateAtom = Atom.Writable<ToolbarState>;
+
+/**
+ * Creates a reactive toolbar state Atom.
+ */
+export const useToolbarState = (initialState: ToolbarState = {}): ToolbarStateAtom => {
+  return useMemo(() => Atom.make<ToolbarState>(initialState).pipe(Atom.keepAlive), []);
+};
+
+/**
+ * Hook to read the current toolbar state value.
+ */
+export const useToolbarStateValue = (stateAtom: ToolbarStateAtom): ToolbarState => {
+  return useAtomValue(stateAtom);
+};
 
-export const useToolbarState = (initialState: ToolbarState = {}) => {
-  return useMemo(() => live<ToolbarState>(initialState), []);
+/**
+ * Hook to get the registry for updating toolbar state.
+ */
+export const useToolbarStateRegistry = (): Registry.Registry => {
+  return useContext(RegistryContext);
 };

package/src/extensions/compute.stories.tsx

@@ -5,21 +5,21 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useMemo } from 'react';
 
-import { IntentPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { PublicKey } from '@dxos/keys';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
+import { useTextEditor } from '@dxos/react-ui-editor';
 import {
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
   documentId,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
+} from '@dxos/ui-editor';
 import { isNonNullable } from '@dxos/util';
 
 import { GridSheet, SheetProvider, useComputeGraph } from '../components';
@@ -73,7 +73,12 @@ const Grid = () => {
   const model = useSheetModel(graph, sheet);
   useEffect(() => {
     if (model) {
-      model.setValues({ A1: { value: 100 }, A2: { value: 200 }, A3: { value: 300 }, A5: { value: '=SUM(A1:A3)' } });
+      model.setValues({
+        A1: { value: 100 },
+        A2: { value: 200 },
+        A3: { value: 300 },
+        A5: { value: '=SUM(A1:A3)' },
+      });
     }
   }, [model]);
 
@@ -103,9 +108,13 @@ const meta = {
   title: 'plugins/plugin-sheet/extensions',
   decorators: [
     withTheme,
-    withClientProvider({ types: [Sheet.Sheet], createIdentity: true, createSpace: true }),
+    withClientProvider({
+      types: [Sheet.Sheet],
+      createIdentity: true,
+      createSpace: true,
+    }),
     // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
-    withPluginManager({ plugins: [IntentPlugin()] }),
+    withPluginManager({ plugins: [OperationPlugin(), RuntimePlugin()] }),
     withComputeGraphDecorator(),
   ],
   parameters: {

package/src/extensions/compute.ts

@@ -23,7 +23,7 @@ import {
   createSheetName,
 } from '@dxos/compute';
 import { invariant } from '@dxos/invariant';
-import { documentId, singleValueFacet } from '@dxos/react-ui-editor';
+import { documentId, singleValueFacet } from '@dxos/ui-editor';
 
 const LANGUAGE_TAG = 'dx';
 

package/src/extensions/editor/sheet-extension.ts

@@ -20,8 +20,8 @@ import { spreadsheet } from 'codemirror-lang-spreadsheet';
 
 import { type FunctionDefinition } from '@dxos/compute';
 import { RANGE_NOTATION } from '@dxos/compute';
-import { singleValueFacet } from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+import { singleValueFacet } from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 
 /**
  * https://codemirror.net/examples/styling
@@ -75,7 +75,10 @@ export type SheetExtensionOptions = {
  * https://hyperformula.handsontable.com/guide/key-concepts.html#grammar
  */
 export const sheetExtension = ({ debug, functions = [] }: SheetExtensionOptions): Extension => {
-  const { extension, language } = spreadsheet({ idiom: 'en-US', decimalSeparator: '.' });
+  const { extension, language } = spreadsheet({
+    idiom: 'en-US',
+    decimalSeparator: '.',
+  });
 
   const createCompletion = (name: string) => {
     const { section = 'Custom', description, syntax } = functions.find((value) => value.name === name) ?? {};
@@ -166,7 +169,7 @@ export const sheetExtension = ({ debug, functions = [] }: SheetExtensionOptions)
       icons: false,
       tooltipClass: () =>
         mx(
-          '!-left-[1px] !top-[33px] !-m-0 border !border-t-0 [&>ul]:!min-w-[198px]',
+          '!-left-[1px] !top-[33px] !-m-0 border !border-bs-0 [&>ul]:!min-w-[198px]',
           '[&>ul>li[aria-selected]]:!bg-accentSurface',
           'border-separator',
         ),

package/src/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export { SheetCapabilities } from './capabilities';
+export { SheetCapabilities } from './types';
 export * from './meta';
 export * from './SheetPlugin';

package/src/integrations/thread-ranges.ts

@@ -2,18 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Function from 'effect/Function';
-import * as Schema from 'effect/Schema';
+import * as Effect from 'effect/Effect';
 import { useCallback, useEffect, useMemo } from 'react';
 
-import { LayoutAction, chain, createIntent, createResolver } from '@dxos/app-framework';
-import { useIntentDispatcher, useIntentResolver } from '@dxos/app-framework/react';
+import { Common } from '@dxos/app-framework';
+import { useOperationInvoker, useOperationResolver } from '@dxos/app-framework/react';
 import { debounce } from '@dxos/async';
 import { type CellAddress, type CompleteCellRange, inRange } from '@dxos/compute';
 import { Obj, Relation } from '@dxos/echo';
-import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
-import { ThreadAction } from '@dxos/plugin-thread/types';
-import { Filter, Query, getSpace, useQuery } from '@dxos/react-client/echo';
+import { OperationResolver } from '@dxos/operation';
+import { ATTENDABLE_PATH_SEPARATOR, DeckOperation } from '@dxos/plugin-deck/types';
+import { ThreadOperation } from '@dxos/plugin-thread/types';
+import { Filter, Query, useQuery } from '@dxos/react-client/echo';
 import { type DxGridElement, type GridContentProps } from '@dxos/react-ui-grid';
 import { AnchoredTo, Thread } from '@dxos/types';
 
@@ -39,43 +39,37 @@ export const parseThreadAnchorAsCellRange = (cursor: string): CompleteCellRange
 
 export const useUpdateFocusedCellOnThreadSelection = (grid: DxGridElement | null) => {
   const { model, setActiveRefs } = useSheetContext();
-  const scrollIntoViewResolver = useMemo(
+  const sheetId = Obj.getDXN(model.sheet).toString();
+
+  const scrollIntoViewHandler = useMemo(
     () =>
-      createResolver({
-        intent: LayoutAction.ScrollIntoView,
+      OperationResolver.make({
+        operation: Common.LayoutOperation.ScrollIntoView,
         position: 'hoist',
-        filter: (
-          data,
-        ): data is {
-          part: 'current';
-          subject: string;
-          options: { cursor: string; ref: GridContentProps['activeRefs'] };
-        } => {
-          if (!Schema.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
-            return false;
-          }
-
-          return data.subject === Obj.getDXN(model.sheet).toString() && !!data.options?.cursor;
-        },
-        resolve: ({ options: { cursor, ref } }) => {
-          setActiveRefs(ref);
-          // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
-          const range = parseThreadAnchorAsCellRange(cursor!);
-          range && grid?.setFocus({ ...range.to, plane: 'grid' }, true);
-        },
+        filter: (input) => input.subject === sheetId && !!input.cursor,
+        handler: (input) =>
+          Effect.sync(() => {
+            const { cursor, ref } = input;
+            if (cursor) {
+              setActiveRefs(ref as GridContentProps['activeRefs']);
+              // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
+              const range = parseThreadAnchorAsCellRange(cursor);
+              range && grid?.setFocus({ ...range.to, plane: 'grid' }, true);
+            }
+          }),
       }),
-    [model.sheet, setActiveRefs],
+    [sheetId, setActiveRefs, grid],
   );
 
-  useIntentResolver(meta.id, scrollIntoViewResolver);
+  useOperationResolver(meta.id, scrollIntoViewHandler);
 };
 
 export const useSelectThreadOnCellFocus = () => {
   const { model, cursor } = useSheetContext();
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
 
-  const space = getSpace(model.sheet);
-  const anchors = useQuery(space, Query.select(Filter.ids(model.sheet.id)).targetOf(AnchoredTo.AnchoredTo));
+  const db = Obj.getDatabase(model.sheet);
+  const anchors = useQuery(db, Query.select(Filter.id(model.sheet.id)).targetOf(AnchoredTo.AnchoredTo));
 
   const selectClosestThread = useCallback(
     (cellAddress: CellAddress) => {
@@ -95,14 +89,16 @@ export const useSelectThreadOnCellFocus = () => {
 
       if (closestThread) {
         const primary = Obj.getDXN(model.sheet).toString();
-        const intent = Function.pipe(
-          createIntent(ThreadAction.Select, { current: Obj.getDXN(closestThread).toString() }),
-          chain(DeckAction.ChangeCompanion, { primary, companion: `${primary}${ATTENDABLE_PATH_SEPARATOR}comments` }),
-        );
-        void dispatch(intent);
+        void (async () => {
+          await invokePromise(ThreadOperation.Select, { current: Relation.getDXN(closestThread).toString() });
+          await invokePromise(DeckOperation.ChangeCompanion, {
+            primary,
+            companion: `${primary}${ATTENDABLE_PATH_SEPARATOR}comments`,
+          });
+        })();
       }
     },
-    [dispatch, anchors],
+    [invokePromise, anchors],
   );
 
   const debounced = useMemo(() => {

package/src/meta.ts

@@ -2,10 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
+export const meta: Plugin.Meta = {
   id: 'dxos.org/plugin/sheet',
   name: 'Sheet',
   description: trim`

package/src/model/sheet-model.ts

@@ -122,7 +122,9 @@ export class SheetModel extends Resource {
    */
   protected override async _open(): Promise<void> {
     log('initialize', { id: this.id });
-    initialize(this._sheet);
+    Obj.change(this._sheet, (s) => {
+      initialize(s);
+    });
 
     this._graph.update.on((event) => {
       if (event.type === 'functionsUpdated') {
@@ -181,13 +183,19 @@ export class SheetModel extends Resource {
   }
 
   insertRows(i: number, n = 1): string[] {
-    const idx = insertIndices(this._sheet.rows, i, n, MAX_ROWS);
+    let idx: string[] = [];
+    Obj.change(this._sheet, (s) => {
+      idx = insertIndices(s.rows, i, n, MAX_ROWS);
+    });
     this.reset();
     return idx;
   }
 
   insertColumns(i: number, n = 1): string[] {
-    const idx = insertIndices(this._sheet.columns, i, n, MAX_COLS);
+    let idx: string[] = [];
+    Obj.change(this._sheet, (s) => {
+      idx = insertIndices(s.columns, i, n, MAX_COLS);
+    });
     this.reset();
     return idx;
   }
@@ -200,8 +208,10 @@ export class SheetModel extends Resource {
     const values = this.getCellValues(range).flat();
     const index = this._sheet.rows.indexOf(rowIndex);
     this.clear(range);
-    this._sheet.rows.splice(index, 1);
-    delete this._sheet.rowMeta[rowIndex];
+    Obj.change(this._sheet, (s) => {
+      s.rows.splice(index, 1);
+      delete s.rowMeta[rowIndex];
+    });
     this.reset();
     return { axis: 'row', index, axisIndex: rowIndex, axisMeta: this._sheet.rowMeta[rowIndex], values };
   }
@@ -214,35 +224,41 @@ export class SheetModel extends Resource {
     const values = this.getCellValues(range).flat();
     const index = this._sheet.columns.indexOf(colIndex);
     this.clear(range);
-    this._sheet.columns.splice(index, 1);
-    delete this._sheet.columnMeta[colIndex];
+    Obj.change(this._sheet, (s) => {
+      s.columns.splice(index, 1);
+      delete s.columnMeta[colIndex];
+    });
     this.reset();
     return { axis: 'col', index, axisIndex: colIndex, axisMeta: this._sheet.rowMeta[colIndex], values };
   }
 
   restoreRow({ index, axisIndex, axisMeta, values }: SheetAction.RestoreAxis): void {
-    this._sheet.rows.splice(index, 0, axisIndex);
-    values.forEach((value, col) => {
-      if (value) {
-        this._sheet.cells[`${this._sheet.columns[col]}@${axisIndex}`] = { value };
+    Obj.change(this._sheet, (s) => {
+      s.rows.splice(index, 0, axisIndex);
+      values.forEach((value, col) => {
+        if (value) {
+          s.cells[`${s.columns[col]}@${axisIndex}`] = { value };
+        }
+      });
+      if (axisMeta) {
+        s.rowMeta[axisIndex] = axisMeta;
       }
     });
-    if (axisMeta) {
-      this._sheet.rowMeta[axisIndex] = axisMeta;
-    }
     this.reset();
   }
 
   restoreColumn({ index, axisIndex, axisMeta, values }: SheetAction.RestoreAxis): void {
-    this._sheet.columns.splice(index, 0, axisIndex);
-    values.forEach((value, row) => {
-      if (value) {
-        this._sheet.cells[`${axisIndex}@${this._sheet.rows[row]}`] = { value };
+    Obj.change(this._sheet, (s) => {
+      s.columns.splice(index, 0, axisIndex);
+      values.forEach((value, row) => {
+        if (value) {
+          s.cells[`${axisIndex}@${s.rows[row]}`] = { value };
+        }
+      });
+      if (axisMeta) {
+        s.columnMeta[axisIndex] = axisMeta;
       }
     });
-    if (axisMeta) {
-      this._sheet.columnMeta[axisIndex] = axisMeta;
-    }
     this.reset();
   }
 
@@ -259,18 +275,22 @@ export class SheetModel extends Resource {
     const topLeft = getTopLeft(range);
     const values = this._iterRange(range, () => null);
     this._node.graph.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
-    this._iterRange(range, (cell) => {
-      const idx = addressToIndex(this._sheet, cell);
-      delete this._sheet.cells[idx];
+    Obj.change(this._sheet, (s) => {
+      this._iterRange(range, (cell) => {
+        const idx = addressToIndex(this._sheet, cell);
+        delete s.cells[idx];
+      });
     });
   }
 
   cut(range: CellRange): void {
     invariant(this._node);
     this._node.graph.hf.cut(toModelRange(this._node.sheetId, range));
-    this._iterRange(range, (cell) => {
-      const idx = addressToIndex(this._sheet, cell);
-      delete this._sheet.cells[idx];
+    Obj.change(this._sheet, (s) => {
+      this._iterRange(range, (cell) => {
+        const idx = addressToIndex(this._sheet, cell);
+        delete s.cells[idx];
+      });
     });
   }
 
@@ -283,13 +303,15 @@ export class SheetModel extends Resource {
     invariant(this._node);
     if (!this._node.graph.hf.isClipboardEmpty()) {
       const changes = this._node.graph.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
-      for (const change of changes) {
-        if (change instanceof ExportedCellChange) {
-          const { address, newValue } = change;
-          const idx = addressToIndex(this._sheet, { row: address.row, col: address.col });
-          this._sheet.cells[idx] = { value: newValue };
+      Obj.change(this._sheet, (s) => {
+        for (const change of changes) {
+          if (change instanceof ExportedCellChange) {
+            const { address, newValue } = change;
+            const idx = addressToIndex(this._sheet, { row: address.row, col: address.col });
+            s.cells[idx] = { value: newValue };
+          }
         }
-      }
+      });
     }
   }
 
@@ -380,11 +402,15 @@ export class SheetModel extends Resource {
     // Reallocate if > current bounds.
     let refresh = false;
     if (cell.row >= this._sheet.rows.length) {
-      insertIndices(this._sheet.rows, cell.row, 1, MAX_ROWS);
+      Obj.change(this._sheet, (s) => {
+        insertIndices(s.rows, cell.row, 1, MAX_ROWS);
+      });
       refresh = true;
     }
     if (cell.col >= this._sheet.columns.length) {
-      insertIndices(this._sheet.columns, cell.col, 1, MAX_COLS);
+      Obj.change(this._sheet, (s) => {
+        insertIndices(s.columns, cell.col, 1, MAX_COLS);
+      });
       refresh = true;
     }
 
@@ -401,13 +427,17 @@ export class SheetModel extends Resource {
     // Insert into sheet.
     const idx = addressToIndex(this._sheet, cell);
     if (value === undefined || value === null) {
-      delete this._sheet.cells[idx];
+      Obj.change(this._sheet, (s) => {
+        delete s.cells[idx];
+      });
     } else {
       if (isFormula(value)) {
         value = this._graph.mapFunctionBindingToId(mapFormulaRefsToIndices(this._sheet, value));
       }
 
-      this._sheet.cells[idx] = { value };
+      Obj.change(this._sheet, (s) => {
+        s.cells[idx] = { value };
+      });
     }
   }
 

package/src/playwright/playwright.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   ...e2ePreset(import.meta.dirname),
   // TODO(wittjosiah): Avoid hard-coding ports.
   webServer: {
-    command: 'moon run storybook:serve-e2e -- --port=9005',
+    command: 'moon run storybook-react:serve-e2e -- --port=9005',
     port: 9005,
     reuseExistingServer: false,
   },

package/src/playwright/sheet.spec.ts

@@ -16,6 +16,7 @@ test.describe('plugin-sheet', () => {
   test.beforeEach(async ({ browser }) => {
     const setup = await setupPage(browser, {
       url: storybookUrl('plugins-plugin-sheet-sheetcontainer--spec', 9005),
+      viewportSize: { width: 1280, height: 720 },
     });
     page = setup.page;
     sheet = new SheetManager(page);

package/src/sanity.test.ts

@@ -22,7 +22,7 @@ import { Function } from '@dxos/functions';
 describe('test', () => {
   test('test', async () => {
     const client = new Client();
-    client.addTypes([Function.Function]);
+    await client.addTypes([Function.Function]);
     await client.initialize();
     await client.halo.createIdentity();
 

package/src/types/Sheet.ts

@@ -70,7 +70,7 @@ export const Sheet = Schema.Struct({
   // Cell formatting referenced by indexed range.
   ranges: Schema.Array(Range).pipe(Schema.mutable, FormInputAnnotation.set(false)),
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'dxos.org/type/Sheet',
     version: '0.1.0',
   }),
@@ -86,18 +86,21 @@ export type SheetProps = {
 export const make = ({ name, cells = {}, ...size }: SheetProps = {}) => {
   const sheet = Obj.make(Sheet, { name, cells: {}, rows: [], columns: [], rowMeta: {}, columnMeta: {}, ranges: [] });
 
-  initialize(sheet, size);
-
-  if (cells) {
-    Object.entries(cells).forEach(([key, { value }]) => {
-      const idx = addressToIndex(sheet, addressFromA1Notation(key));
-      if (isFormula(value)) {
-        value = mapFormulaRefsToIndices(sheet, value);
-      }
-
-      sheet.cells[idx] = { value };
-    });
-  }
+  // Initialize and set cells within Obj.change to satisfy change context requirements.
+  Obj.change(sheet, () => {
+    initialize(sheet, size);
+
+    if (cells) {
+      Object.entries(cells).forEach(([key, { value }]) => {
+        const idx = addressToIndex(sheet, addressFromA1Notation(key));
+        if (isFormula(value)) {
+          value = mapFormulaRefsToIndices(sheet, value);
+        }
+
+        sheet.cells[idx] = { value };
+      });
+    }
+  });
 
   return sheet;
 };

package/src/{capabilities → types}/capabilities.ts

@@ -2,13 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { defineCapability } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
 import { type ComputeGraphRegistry } from '@dxos/compute';
 
 import { meta } from '../meta';
 
 export namespace SheetCapabilities {
-  export const ComputeGraphRegistry = defineCapability<ComputeGraphRegistry>(
+  export const ComputeGraphRegistry = Capability.make<ComputeGraphRegistry>(
     `${meta.id}/capability/compute-graph-registry`,
   );
 }

package/src/types/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './capabilities';
 export * as Sheet from './Sheet';
 export * from './sheet-range-types';
 export * from './types';