@dxos/plugin-sheet 0.7.5-main.9d26e3a → 0.7.5-main.b19bfc8

package/src/components/{Toolbar/Toolbar.stories.tsx → SheetToolbar/SheetToolbar.stories.tsx}

@@ -10,22 +10,18 @@ import React from 'react';
 import { textBlockWidth } from '@dxos/react-ui-theme';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { Toolbar } from './Toolbar';
+import { SheetToolbar } from './SheetToolbar';
 import translations from '../../translations';
 
 const DefaultStory = () => {
-  return (
-    <Toolbar.Root classNames={textBlockWidth}>
-      <Toolbar.Alignment />
-    </Toolbar.Root>
-  );
+  return <SheetToolbar classNames={textBlockWidth} />;
 };
 
 export const Default = {};
 
-const meta: Meta<typeof Toolbar.Root> = {
+const meta: Meta = {
   title: 'plugins/plugin-sheet/Toolbar',
-  component: Toolbar.Root,
+  component: SheetToolbar,
   render: DefaultStory,
   decorators: [withTheme, withLayout({ tooltips: true })],
   parameters: { translations, layout: 'fullscreen' },

package/src/components/SheetToolbar/SheetToolbar.tsx

@@ -0,0 +1,48 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren, useCallback } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { createGapSeparator, MenuProvider, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
+
+import { createAlign, useAlignState } from './align';
+import { createComment, useCommentState } from './comment';
+import { createStyle, useStyleState } from './style';
+import { useToolbarAction } from './useToolbarAction';
+import { type ToolbarState, useToolbarState } from './useToolbarState';
+
+//
+// Root
+//
+
+export type SheetToolbarProps = ThemedClassName<PropsWithChildren<{ attendableId?: string }>>;
+
+const createToolbarActions = (state: ToolbarState) => {
+  const align = createAlign(state);
+  const style = createStyle(state);
+  const gap = createGapSeparator();
+  const comment = createComment(state);
+  return {
+    nodes: [...align.nodes, ...style.nodes, ...gap.nodes, ...comment.nodes],
+    edges: [...align.edges, ...style.edges, ...gap.edges, ...comment.edges],
+  };
+};
+
+export const SheetToolbar = ({ attendableId, classNames }: SheetToolbarProps) => {
+  const state = useToolbarState({});
+  useAlignState(state);
+  useStyleState(state);
+  useCommentState(state);
+
+  const actionsCreator = useCallback(() => createToolbarActions(state), [state]);
+  const menu = useMenuActions(actionsCreator);
+  const handleAction = useToolbarAction(state);
+
+  return (
+    <MenuProvider {...menu} attendableId={attendableId} onAction={handleAction}>
+      <ToolbarMenu classNames={classNames} />
+    </MenuProvider>
+  );
+};

package/src/components/SheetToolbar/align.ts

@@ -0,0 +1,68 @@
+//
+// 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 { type AlignKey, alignKey, type AlignValue, rangeFromIndex } from '../../types';
+import { useSheetContext } from '../SheetContext';
+
+export type AlignAction = { key: AlignKey; value: AlignValue };
+
+export type AlignState = { [alignKey]: AlignValue | undefined };
+
+const aligns: Record<AlignValue, string> = {
+  start: 'ph--text-align-left--regular',
+  center: 'ph--text-align-center--regular',
+  end: 'ph--text-align-right--regular',
+};
+
+export const useAlignState = (state: Partial<AlignState>) => {
+  const { cursor, model } = useSheetContext();
+  useEffect(() => {
+    // TODO(thure): Can this O(n) call be memoized?
+    state[alignKey] = (
+      cursor
+        ? model.sheet.ranges?.findLast(
+            ({ range, key }) => key === alignKey && inRange(rangeFromIndex(model.sheet, range), cursor),
+          )?.value
+        : undefined
+    ) as AlignValue | undefined;
+  }, [cursor, model.sheet]);
+};
+
+const createAlignGroupAction = (value?: AlignValue) =>
+  createMenuItemGroup('align', {
+    label: ['align label', { ns: SHEET_PLUGIN }],
+    variant: 'toggleGroup',
+    selectCardinality: 'single',
+    value: `${alignKey}--${value}`,
+  } as ToolbarMenuActionGroupProperties);
+
+const createAlignActions = (value?: AlignValue) =>
+  Object.entries(aligns).map(([alignValue, icon]) => {
+    return createMenuAction<AlignAction>(`${alignKey}--${alignValue}`, {
+      key: alignKey,
+      value: alignValue as AlignValue,
+      checked: value === alignValue,
+      label: [`range value ${alignValue} label`, { ns: SHEET_PLUGIN }],
+      icon,
+      testId: `grid.toolbar.${alignKey}.${alignValue}`,
+    });
+  });
+
+export const createAlign = ({ [alignKey]: alignValue }: Partial<AlignState>) => {
+  const alignGroup = createAlignGroupAction(alignValue);
+  const alignActions = createAlignActions(alignValue);
+  return {
+    nodes: [alignGroup, ...alignActions],
+    edges: [
+      { source: 'root', target: 'align' },
+      ...alignActions.map(({ id }) => ({ source: alignGroup.id, target: id })),
+    ],
+  };
+};

package/src/components/SheetToolbar/comment.ts

@@ -0,0 +1,56 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect, useMemo } from 'react';
+
+import { RefArray } from '@dxos/live-object';
+import { createMenuAction } from '@dxos/react-ui-menu';
+
+import { SHEET_PLUGIN } from '../../meta';
+import { commentKey, type CommentKey, type CommentValue, rangeToIndex } from '../../types';
+import { useSheetContext } from '../SheetContext';
+
+export type CommentAction = { key: CommentKey; value: CommentValue; cellContent?: string };
+
+export type CommentState = { commentEnabled: 'comment' | 'no cursor' | 'selection overlaps existing comment' };
+
+export const useCommentState = (state: Partial<CommentState>) => {
+  const { cursorFallbackRange, model } = useSheetContext();
+
+  // TODO(thure): Can this O(n) call be memoized?
+  const overlapsCommentAnchor = useMemo(
+    () =>
+      RefArray.allResolvedTargets(model.sheet.threads ?? [])
+        .filter((thread) => thread.status !== 'resolved')
+        .some((thread) => {
+          if (!cursorFallbackRange) {
+            return false;
+          }
+          return rangeToIndex(model.sheet, cursorFallbackRange) === thread.anchor;
+        }),
+    [cursorFallbackRange, model.sheet],
+  );
+
+  useEffect(() => {
+    state.commentEnabled = !cursorFallbackRange
+      ? 'no cursor'
+      : overlapsCommentAnchor
+        ? 'selection overlaps existing comment'
+        : 'comment';
+  }, [overlapsCommentAnchor, cursorFallbackRange]);
+};
+
+const createCommentAction = (state: Partial<CommentState>) =>
+  createMenuAction<Pick<CommentAction, 'key'>>('comment', {
+    key: commentKey,
+    testId: 'editor.toolbar.comment',
+    icon: 'ph--chat-text--regular',
+    label: [`${state.commentEnabled} label`, { ns: SHEET_PLUGIN }],
+    disabled: state.commentEnabled !== 'comment',
+  });
+
+export const createComment = (state: Partial<CommentState>) => ({
+  nodes: [createCommentAction(state)],
+  edges: [{ source: 'root', target: 'comment' }],
+});

package/src/components/{Toolbar → SheetToolbar}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './Toolbar';
+export * from './SheetToolbar';

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.stories.tsx

@@ -20,7 +20,7 @@ import {
   useTextEditor,
 } from '@dxos/react-ui-editor';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
-import { nonNullable } from '@dxos/util';
+import { isNonNullable } from '@dxos/util';
 
 import { compute, computeGraphFacet } from './compute';
 import { GridSheet, SheetProvider, useComputeGraph } from '../components';
@@ -57,7 +57,7 @@ const EditorStory = ({ text }: EditorProps) => {
         computeGraph && computeGraphFacet.of(computeGraph),
         compute(),
         decorateMarkdown(),
-      ].filter(nonNullable),
+      ].filter(isNonNullable),
     }),
     [computeGraph, themeMode],
   );

package/src/index.ts

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

package/src/integrations/thread-ranges.ts

@@ -8,14 +8,15 @@ import {
   createIntent,
   createResolver,
   LayoutAction,
-  useIntentDispatcher,
   useIntentResolver,
+  useIntentDispatcher,
 } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { type CellAddress, type CompleteCellRange, inRange } from '@dxos/compute';
+import { S } from '@dxos/echo-schema';
 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 { type DxGridElement, type DxGridPosition, type GridContentProps } from '@dxos/react-ui-grid';
 
 import { useSheetContext } from '../components';
 import { SHEET_PLUGIN } from '../meta';
@@ -41,19 +42,29 @@ export const useUpdateFocusedCellOnThreadSelection = (grid: DxGridElement | null
   const { model, setActiveRefs } = useSheetContext();
   const scrollIntoViewResolver = useMemo(
     () =>
-      createResolver(
-        LayoutAction.ScrollIntoView,
-        ({ cursor, ref }) => {
+      createResolver({
+        intent: LayoutAction.ScrollIntoView,
+        position: 'hoist',
+        filter: (
+          data,
+        ): data is {
+          part: 'current';
+          subject: string;
+          options: { cursor: string; ref: GridContentProps['activeRefs'] };
+        } => {
+          if (!S.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
+            return false;
+          }
+
+          return data.subject === fullyQualifiedId(model.sheet) && !!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);
         },
-        {
-          disposition: 'hoist',
-          filter: (data) => data.id === fullyQualifiedId(model.sheet) && !!data.cursor,
-        },
-      ),
+      }),
     [model.sheet, setActiveRefs],
   );
 

package/src/meta.ts

@@ -6,10 +6,12 @@ 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.',
+  description:
+    'Sheets in Composer are simple spreadsheets which allow you to leverage custom functions inside of cell grids. Leverage more than 400 pre-built formulas like Sum, Average, Count, Max, Min along with many others. You can also deploy your own custom functions using the Scripts plugin. ',
   icon: 'ph--grid-nine--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-sheet',
+  screenshots: ['https://dxos.network/plugin-details-sheet-dark.png'],
 } satisfies PluginMeta;

package/src/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;

package/src/types/types.ts

@@ -2,38 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import type {
-  IntentResolverProvides,
-  MetadataRecordsProvides,
-  SurfaceProvides,
-  TranslationsProvides,
-} from '@dxos/app-framework';
 import { S } from '@dxos/echo-schema';
-import { type MarkdownExtensionProvides } from '@dxos/plugin-markdown';
-import { type SchemaProvides } from '@dxos/plugin-space';
 
 import { type CellValue, RowColumnMeta, SheetType } from './schema';
 import { SHEET_PLUGIN } from '../meta';
 import { SheetModel } from '../model';
 
-// TODO(Zan): Move this to the plugin-space plugin or another common location
-// when we implement comments in sheets.
-// This is currently duplicated in a few places.
-type ThreadProvides<T> = {
-  thread: {
-    predicate: (obj: any) => obj is T;
-    createSort: (obj: T) => (anchorA: string | undefined, anchorB: string | undefined) => number;
-  };
-};
-
-export type SheetPluginProvides = SurfaceProvides &
-  IntentResolverProvides &
-  MarkdownExtensionProvides &
-  MetadataRecordsProvides &
-  TranslationsProvides &
-  SchemaProvides &
-  ThreadProvides<SheetType>;
-
 export type SheetSize = {
   rows: number;
   columns: number;