@dxos/plugin-sheet 0.7.4 → 0.7.5-labs.5f04cf6

package/src/components/SheetToolbar/style.ts

@@ -0,0 +1,72 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect } from 'react';
+
+import { inRange } from '@dxos/compute';
+import { createMenuAction, createMenuItemGroup, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+
+import { SHEET_PLUGIN } from '../../meta';
+import { rangeFromIndex, type StyleKey, type StyleValue } from '../../types';
+import { useSheetContext } from '../SheetContext';
+
+export type StyleState = Partial<Record<StyleValue, boolean>>;
+
+export type StyleAction = { key: StyleKey; value: StyleValue };
+
+const styles: Record<StyleValue, string> = {
+  highlight: 'ph--highlighter--regular',
+  softwrap: 'ph--paragraph--regular',
+};
+
+export const useStyleState = (state: StyleState) => {
+  const { cursorFallbackRange, model } = useSheetContext();
+
+  useEffect(() => {
+    state.highlight = false;
+    state.softwrap = false;
+    if (cursorFallbackRange && model.sheet.ranges) {
+      model.sheet.ranges
+        .filter(
+          ({ range, key }) => key === 'style' && inRange(rangeFromIndex(model.sheet, range), cursorFallbackRange.from),
+        )
+        .forEach(({ value }) => {
+          state[value as StyleValue] = true;
+        });
+    }
+  }, [cursorFallbackRange, model.sheet]);
+};
+
+const createStyleGroup = (state: StyleState) => {
+  return createMenuItemGroup('style', {
+    variant: 'toggleGroup',
+    selectCardinality: 'multiple',
+    value: Object.keys(styles)
+      .filter((key) => !!state[key as StyleValue])
+      .map((styleValue) => `style--${styleValue}`),
+  } as ToolbarMenuActionGroupProperties);
+};
+
+const createStyleActions = (state: StyleState) =>
+  Object.entries(styles).map(([styleValue, icon]) => {
+    return createMenuAction<StyleAction>(`style--${styleValue}`, {
+      key: 'style',
+      value: styleValue as StyleValue,
+      icon,
+      label: [`range value ${styleValue} label`, { ns: SHEET_PLUGIN }],
+      checked: !!state[styleValue as StyleValue],
+    });
+  });
+
+export const createStyle = (state: StyleState) => {
+  const styleGroupAction = createStyleGroup(state);
+  const styleActions = createStyleActions(state);
+  return {
+    nodes: [styleGroupAction, ...styleActions],
+    edges: [
+      { source: 'root', target: 'style' },
+      ...styleActions.map(({ id }) => ({ source: styleGroupAction.id, target: id })),
+    ],
+  };
+};

package/src/components/SheetToolbar/useToolbarAction.ts

@@ -0,0 +1,87 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback } from 'react';
+
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { inRange } from '@dxos/compute';
+import { ThreadAction } from '@dxos/plugin-thread/types';
+import type { MenuAction, MenuActionHandler } from '@dxos/react-ui-menu';
+
+import { type AlignAction } from './align';
+import { type CommentAction } from './comment';
+import { type StyleAction } from './style';
+import { type ToolbarState } from './useToolbarState';
+import { completeCellRangeToThreadCursor } from '../../integrations';
+import { alignKey, rangeFromIndex, rangeToIndex } from '../../types';
+import { useSheetContext } from '../SheetContext';
+
+export type ToolbarAction = StyleAction | AlignAction | CommentAction;
+
+export const useToolbarAction = (state: ToolbarState) => {
+  const { model, cursorFallbackRange, cursor } = useSheetContext();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+
+  // TODO(Zan): Externalize the toolbar action handler. E.g., Toolbar/keys should both fire events.
+  return useCallback(
+    (action: MenuAction<ToolbarAction>) => {
+      const { key, value } = action.properties;
+      if (cursorFallbackRange) {
+        const index =
+          model.sheet.ranges?.findIndex(
+            (range) => range.key === key && inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),
+          ) ?? -1;
+        const nextRangeEntity = {
+          range: rangeToIndex(model.sheet, cursorFallbackRange),
+          key,
+          value,
+        };
+        switch (key) {
+          case 'alignment':
+            if (index < 0) {
+              model.sheet.ranges?.push(nextRangeEntity);
+              state[alignKey] = value;
+            } else if (model.sheet.ranges![index].value === value) {
+              model.sheet.ranges?.splice(index, 1);
+              state[alignKey] = undefined;
+            } else {
+              model.sheet.ranges?.splice(index, 1, nextRangeEntity);
+              state[alignKey] = value;
+            }
+            break;
+          case 'style':
+            if (
+              model.sheet.ranges
+                .filter(
+                  ({ range, key: rangeKey }) =>
+                    rangeKey === 'style' && inRange(rangeFromIndex(model.sheet, range), cursorFallbackRange.from),
+                )
+                .some(({ value: rangeValue }) => rangeValue === value)
+            ) {
+              // this value should be unset
+              if (index >= 0) {
+                model.sheet.ranges?.splice(index, 1);
+              }
+              state[value] = false;
+            } else {
+              model.sheet.ranges?.push(nextRangeEntity);
+              state[value] = true;
+            }
+            break;
+          case 'comment': {
+            const cellContent = model.getCellText(cursorFallbackRange.from);
+            void dispatch(
+              createIntent(ThreadAction.Create, {
+                cursor: completeCellRangeToThreadCursor(cursorFallbackRange),
+                name: cellContent,
+                subject: model.sheet,
+              }),
+            );
+          }
+        }
+      }
+    },
+    [model.sheet, cursorFallbackRange, cursor, dispatch],
+  ) as MenuActionHandler;
+};

package/src/components/SheetToolbar/useToolbarState.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { create } from '@dxos/live-object';
+
+import { type AlignState } from './align';
+import { type CommentState } from './comment';
+import { type StyleState } from './style';
+
+export type ToolbarState = Partial<StyleState & AlignState & CommentState>;
+
+export const useToolbarState = (initialState: ToolbarState = {}) => {
+  return useMemo(() => create<ToolbarState>(initialState), []);
+};

package/src/components/index.ts

@@ -8,6 +8,5 @@ export * from './ComputeGraph';
 export * from './GridSheet';
 export * from './RangeList';
 export * from './SheetContext';
-export * from './SheetObjectSettings';
 
 export const SheetContainer = lazy(() => import('./SheetContainer'));

package/src/extensions/compute.ts

@@ -15,13 +15,16 @@ import {
 import { Decoration, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
 
 import { type UnsubscribeCallback, debounce } from '@dxos/async';
+import {
+  createSheetName,
+  type CellAddress,
+  type CellScalarValue,
+  type ComputeGraph,
+  type ComputeNode,
+} from '@dxos/compute';
 import { invariant } from '@dxos/invariant';
 import { documentId, singleValueFacet } from '@dxos/react-ui-editor';
 
-import { type ComputeGraph, type ComputeNode, createSheetName } from '../compute-graph';
-import { type CellAddress } from '../defs';
-import { type CellScalarValue } from '../types';
-
 const LANGUAGE_TAG = 'dx';
 
 // TODO(burdon): Create marker just for our decorator?

package/src/extensions/editor/extension.test.ts

@@ -8,8 +8,9 @@ import { testTree } from '@lezer/generator/test';
 import { spreadsheet } from 'codemirror-lang-spreadsheet';
 import { describe, expect, test } from 'vitest';
 
+import { defaultFunctions } from '@dxos/compute';
+
 import { sheetExtension } from './extension';
-import { defaultFunctions } from '../../compute-graph';
 
 describe('formula parser', () => {
   const {

package/src/extensions/editor/extension.ts

@@ -18,12 +18,11 @@ import { type SyntaxNode } from '@lezer/common';
 import { tags } from '@lezer/highlight';
 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 { type FunctionDefinition } from '../../compute-graph';
-import { RANGE_NOTATION } from '../../defs';
-
 /**
  * https://codemirror.net/examples/styling
  * https://lezer.codemirror.net/docs/ref/#highlight

package/src/index.ts

@@ -2,11 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { SheetPlugin } from './SheetPlugin';
-
+export { SheetCapabilities } from './capabilities';
+export * from './meta';
 export * from './SheetPlugin';
-
-// TODO(burdon): Move to types entrypoint or create a new one.
-export * from './defs';
-
-export default SheetPlugin;

package/src/integrations/thread-ranges.ts

@@ -4,13 +4,20 @@
 
 import { useCallback, useEffect, useMemo } from 'react';
 
-import { type IntentResolver, LayoutAction, useIntentDispatcher, useIntentResolver } from '@dxos/app-framework';
+import {
+  createIntent,
+  createResolver,
+  LayoutAction,
+  useIntentDispatcher,
+  useIntentResolver,
+} from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
+import { type CellAddress, type CompleteCellRange, inRange } from '@dxos/compute';
+import { ThreadAction } from '@dxos/plugin-thread/types';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { type DxGridElement, type DxGridPosition } from '@dxos/react-ui-grid';
 
 import { useSheetContext } from '../components';
-import { type CellAddress, type CompleteCellRange, inRange } from '../defs';
 import { SHEET_PLUGIN } from '../meta';
 
 export const completeCellRangeToThreadCursor = (range: CompleteCellRange): string => {
@@ -32,31 +39,30 @@ export const parseThreadAnchorAsCellRange = (cursor: string): CompleteCellRange
 
 export const useUpdateFocusedCellOnThreadSelection = (grid: DxGridElement | null) => {
   const { model, setActiveRefs } = useSheetContext();
-  const handleScrollIntoView: IntentResolver = useCallback(
-    ({ action, data }) => {
-      switch (action) {
-        case LayoutAction.SCROLL_INTO_VIEW: {
-          if (!data?.id || data?.cursor === undefined || data?.id !== fullyQualifiedId(model.sheet)) {
-            return;
-          }
-          setActiveRefs(data.thread);
+  const scrollIntoViewResolver = useMemo(
+    () =>
+      createResolver(
+        LayoutAction.ScrollIntoView,
+        ({ cursor, ref }) => {
+          setActiveRefs(ref);
           // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
-          const range = parseThreadAnchorAsCellRange(data.cursor);
+          const range = parseThreadAnchorAsCellRange(cursor!);
           range && grid?.setFocus({ ...range.to, plane: 'grid' }, true);
-
-          return { data: true };
-        }
-      }
-    },
+        },
+        {
+          disposition: 'hoist',
+          filter: (data) => data.id === fullyQualifiedId(model.sheet) && !!data.cursor,
+        },
+      ),
     [model.sheet, setActiveRefs],
   );
 
-  useIntentResolver(SHEET_PLUGIN, handleScrollIntoView);
+  useIntentResolver(SHEET_PLUGIN, scrollIntoViewResolver);
 };
 
 export const useSelectThreadOnCellFocus = () => {
   const { model, cursor } = useSheetContext();
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const threads = useMemo(
     () => model.sheet.threads?.filter((thread): thread is NonNullable<typeof thread> => !!thread) ?? [],
@@ -72,9 +78,9 @@ export const useSelectThreadOnCellFocus = () => {
         return;
       }
 
-      const closestThread = threads?.find(({ anchor }) => {
-        if (anchor) {
-          const range = parseThreadAnchorAsCellRange(anchor);
+      const closestThread = threads?.find((ref) => {
+        if (ref.target?.anchor) {
+          const range = parseThreadAnchorAsCellRange(ref.target!.anchor);
           return range ? inRange(range, cellAddress) : false;
         } else {
           return false;
@@ -82,9 +88,7 @@ export const useSelectThreadOnCellFocus = () => {
       });
 
       if (closestThread) {
-        void dispatch([
-          { action: 'dxos.org/plugin/thread/action/select', data: { current: fullyQualifiedId(closestThread) } },
-        ]);
+        void dispatch(createIntent(ThreadAction.Select, { current: fullyQualifiedId(closestThread) }));
       }
     },
     [dispatch, threads],

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const SHEET_PLUGIN = 'dxos.org/plugin/sheet';
 
-export default {
+export const meta = {
   id: SHEET_PLUGIN,
   name: 'Sheet',
   description: 'A simple spreadsheet plugin.',

package/src/model/sheet-model.test.ts

@@ -5,20 +5,14 @@
 import { afterEach, beforeEach, describe, expect, onTestFinished, test } from 'vitest';
 
 import { Trigger } from '@dxos/async';
+import { type CellScalarValue, addressFromA1Notation, isFormula } from '@dxos/compute';
+import { TestBuilder, testFunctionPlugins } from '@dxos/compute/testing';
+import { FunctionType } from '@dxos/functions';
 import { log } from '@dxos/log';
-import { FunctionType } from '@dxos/plugin-script/types';
 
 import { SheetModel } from './sheet-model';
 import { createTestGrid } from './testing';
-import { TestBuilder, testFunctionPlugins } from '../compute-graph/testing';
-import {
-  addressFromA1Notation,
-  createSheet,
-  isFormula,
-  mapFormulaIndicesToRefs,
-  mapFormulaRefsToIndices,
-} from '../defs';
-import { type CellScalarValue } from '../types';
+import { createSheet, mapFormulaIndicesToRefs, mapFormulaRefsToIndices } from '../types';
 
 describe('SheetModel', () => {
   let testBuilder: TestBuilder;

package/src/model/sheet-model.ts

@@ -2,37 +2,45 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type SimpleCellRange } from 'hyperformula/typings/AbsoluteCellRange';
-import { type SimpleCellAddress } from 'hyperformula/typings/Cell';
-import { type SimpleDate, type SimpleDateTime } from 'hyperformula/typings/DateTimeHelper';
-
 import { Event } from '@dxos/async';
+import {
+  addressFromA1Notation,
+  addressToA1Notation,
+  createSheetName,
+  isFormula,
+  type CellAddress,
+  type CellRange,
+  type CellScalarValue,
+  type ComputeGraph,
+  type ComputeNode,
+  type ComputeNodeEvent,
+  DetailedCellError,
+  ExportedCellChange,
+  type SimpleCellRange,
+  type SimpleCellAddress,
+  type SimpleDate,
+  type SimpleDateTime,
+} from '@dxos/compute';
 import { Resource } from '@dxos/context';
 import { getTypename, FormatEnum, TypeEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
 
-import { DetailedCellError, ExportedCellChange } from '#hyperformula';
-import { type ComputeGraph, type ComputeNode, type ComputeNodeEvent, createSheetName } from '../compute-graph';
 import {
-  addressFromA1Notation,
+  ReadonlyException,
   addressFromIndex,
-  addressToA1Notation,
   addressToIndex,
   initialize,
   insertIndices,
-  isFormula,
-  type CellAddress,
-  type CellRange,
-  ReadonlyException,
-  MAX_COLUMNS,
-  MAX_ROWS,
   mapFormulaIndicesToRefs,
   mapFormulaRefsToIndices,
-} from '../defs';
-import { type CellScalarValue, type CellValue, type SheetType, type RestoreAxis } from '../types';
+  MAX_ROWS,
+  MAX_COLS,
+} from '../types';
+import { type SheetAction, type CellValue, type SheetType } from '../types';
 
+// TODO(burdon): Move to compute.
 // Map sheet types to system types.
 // https://hyperformula.handsontable.com/guide/types-of-values.html
 //  - https://github.com/handsontable/hyperformula/blob/master/src/Cell.ts (CellValueType)
@@ -176,12 +184,12 @@ export class SheetModel extends Resource {
   }
 
   insertColumns(i: number, n = 1) {
-    const idx = insertIndices(this._sheet.columns, i, n, MAX_COLUMNS);
+    const idx = insertIndices(this._sheet.columns, i, n, MAX_COLS);
     this.reset();
     return idx;
   }
 
-  dropRow(rowIndex: string): RestoreAxis {
+  dropRow(rowIndex: string): SheetAction.RestoreAxis {
     const range = {
       from: addressFromIndex(this._sheet, `${this._sheet.columns[0]}@${rowIndex}`),
       to: addressFromIndex(this._sheet, `${this._sheet.columns[this._sheet.columns.length - 1]}@${rowIndex}`),
@@ -195,7 +203,7 @@ export class SheetModel extends Resource {
     return { axis: 'row', index, axisIndex: rowIndex, axisMeta: this._sheet.rowMeta[rowIndex], values };
   }
 
-  dropColumn(colIndex: string): RestoreAxis {
+  dropColumn(colIndex: string): SheetAction.RestoreAxis {
     const range = {
       from: addressFromIndex(this._sheet, `${colIndex}@${this._sheet.rows[0]}`),
       to: addressFromIndex(this._sheet, `${colIndex}@${this._sheet.rows[this._sheet.rows.length - 1]}`),
@@ -209,7 +217,7 @@ export class SheetModel extends Resource {
     return { axis: 'col', index, axisIndex: colIndex, axisMeta: this._sheet.rowMeta[colIndex], values };
   }
 
-  restoreRow({ index, axisIndex, axisMeta, values }: RestoreAxis) {
+  restoreRow({ index, axisIndex, axisMeta, values }: SheetAction.RestoreAxis) {
     this._sheet.rows.splice(index, 0, axisIndex);
     values.forEach((value, col) => {
       if (value) {
@@ -222,7 +230,7 @@ export class SheetModel extends Resource {
     this.reset();
   }
 
-  restoreColumn({ index, axisIndex, axisMeta, values }: RestoreAxis) {
+  restoreColumn({ index, axisIndex, axisMeta, values }: SheetAction.RestoreAxis) {
     this._sheet.columns.splice(index, 0, axisIndex);
     values.forEach((value, row) => {
       if (value) {
@@ -373,7 +381,7 @@ export class SheetModel extends Resource {
       refresh = true;
     }
     if (cell.col >= this._sheet.columns.length) {
-      insertIndices(this._sheet.columns, cell.col, 1, MAX_COLUMNS);
+      insertIndices(this._sheet.columns, cell.col, 1, MAX_COLS);
       refresh = true;
     }
 

package/src/model/testing.ts

@@ -2,8 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import { addressToA1Notation, createSheet } from '../defs';
-import type { CellValue, SheetType } from '../types';
+import { addressToA1Notation } from '@dxos/compute';
+
+import { type CellValue, type SheetType, createSheet } from '../types';
 
 // TODO(burdon): Create testing endpoint.
 // TODO(burdon): Move to react-ui-sheet.

package/src/model/useSheetModel.ts

@@ -4,7 +4,8 @@
 
 import { useEffect, useState } from 'react';
 
-import { type ComputeGraph } from '../compute-graph';
+import { type ComputeGraph } from '@dxos/compute';
+
 import { SheetModel } from '../model';
 import { type SheetType } from '../types';
 

package/src/sanity.test.ts

@@ -12,7 +12,7 @@ import { describe, test, expect } from 'vitest';
 
 import { Client } from '@dxos/client';
 import { create } from '@dxos/client/echo';
-import { FunctionType } from '@dxos/plugin-script/types';
+import { FunctionType } from '@dxos/functions';
 
 // TODO(burdon): Fix test infrastructure:
 //  - Need docs? esp. needed for config. need pristine example package?

package/src/testing/testing.tsx

@@ -5,13 +5,12 @@
 import { type Decorator } from '@storybook/react';
 import React, { useState } from 'react';
 
+import { type ComputeGraph, type ComputeGraphOptions, ComputeGraphRegistry } from '@dxos/compute';
 import { type Space } from '@dxos/react-client/echo';
 import { useAsyncState } from '@dxos/react-hooks';
 
 import { ComputeGraphContextProvider } from '../components';
-import { type ComputeGraph, type ComputeGraphOptions, ComputeGraphRegistry } from '../compute-graph';
-import { createSheet } from '../defs';
-import { type CreateSheetOptions } from '../types';
+import { createSheet, type CreateSheetOptions } from '../types';
 
 export const useTestSheet = (space?: Space, graph?: ComputeGraph, options?: CreateSheetOptions) => {
   const [sheet] = useAsyncState(async () => {

package/src/{defs → types}/index.ts

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

package/src/types/schema.ts

@@ -0,0 +1,56 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Ref, S, TypedObject } from '@dxos/echo-schema';
+import { ThreadType } from '@dxos/plugin-space/types';
+
+export const CellValue = S.Struct({
+  // TODO(burdon): How to store dates (datetime, date, time), percentages, etc.
+  //  Consider import/export; natural access for other plugins. Special handling for currency (precision).
+  // TODO(burdon): Automerge (long string) or short string or number.
+  value: S.Any,
+});
+
+export type CellValue = S.Schema.Type<typeof CellValue>;
+
+// TODO(burdon): IMPORTANT: Reconcile with Field definition.
+export const Range = S.Struct({
+  range: S.String,
+  key: S.String,
+  value: S.String,
+});
+
+export type Range = S.Schema.Type<typeof Range>;
+
+// TODO(burdon): Visibility, locked, frozen, etc.
+export const RowColumnMeta = S.Struct({
+  size: S.optional(S.Number),
+});
+
+// TODO(burdon): Reconcile col/column (across packages).
+// TODO(burdon): Index to all updates when rows/columns are inserted/deleted.
+export class SheetType extends TypedObject({ typename: 'dxos.org/type/Sheet', version: '0.1.0' })({
+  name: S.optional(S.String),
+
+  // Sparse map of cells referenced by index.
+  cells: S.mutable(S.Record({ key: S.String, value: S.mutable(CellValue) })),
+
+  // Ordered row indices.
+  rows: S.mutable(S.Array(S.String)),
+
+  // Ordered column indices.
+  columns: S.mutable(S.Array(S.String)),
+
+  // Row metadata referenced by index.
+  rowMeta: S.mutable(S.Record({ key: S.String, value: S.mutable(RowColumnMeta) })),
+
+  // Column metadata referenced by index.
+  columnMeta: S.mutable(S.Record({ key: S.String, value: S.mutable(RowColumnMeta) })),
+
+  // Cell formatting referenced by indexed range.
+  ranges: S.mutable(S.Array(Range)),
+
+  // Threads associated with the sheet
+  threads: S.optional(S.mutable(S.Array(Ref(ThreadType)))),
+}) {}

package/src/{defs → types}/sheet-range-types.ts

@@ -8,7 +8,7 @@ import { type SheetType } from '../types';
 
 export const alignKey = 'alignment';
 export type AlignKey = typeof alignKey;
-export type AlignValue = 'start' | 'center' | 'end' | 'unset';
+export type AlignValue = 'start' | 'center' | 'end';
 
 export const commentKey = 'comment';
 export type CommentKey = typeof commentKey;