@dxos/plugin-sheet 0.8.2-main.f11618f → 0.8.2-staging.42af850

package/src/components/GridSheet/util.ts

@@ -5,7 +5,7 @@
 import { useEffect, useState } from 'react';
 
 import { inRange } from '@dxos/compute';
-import { createDocAccessor, fullyQualifiedId } from '@dxos/react-client/echo';
+import { createDocAccessor } from '@dxos/react-client/echo';
 import { parseValue, cellClassesForFieldType } from '@dxos/react-ui-form';
 import {
   type GridContentProps,
@@ -21,7 +21,6 @@ import {
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 
-import { parseThreadAnchorAsCellRange } from '../../integrations';
 import { type SheetModel } from '../../model';
 import { cellClassNameForRange, rangeFromIndex } from '../../types';
 
@@ -53,13 +52,15 @@ const projectCellProps = (model: SheetModel, col: number, row: number): DxGridCe
   const address = { col, row };
   const rawValue = model.getValue(address);
   const ranges = model.sheet.ranges?.filter(({ range }) => inRange(rangeFromIndex(model.sheet, range), address));
-  const threadRefs = model.sheet.threads
-    ?.filter((thread) => {
-      const range = thread.target?.anchor && parseThreadAnchorAsCellRange(thread.target!.anchor);
-      return thread && range ? inRange(range, address) : false;
-    })
-    .map((thread) => fullyQualifiedId(thread!))
-    .join(' ');
+  const threadRefs = undefined;
+  // TODO(wittjosiah): Update this to get threads via relations.
+  // model.sheet.threads
+  //   ?.filter((thread) => {
+  //     const range = thread.target?.anchor && parseThreadAnchorAsCellRange(thread.target!.anchor);
+  //     return thread && range ? inRange(range, address) : false;
+  //   })
+  //   .map((thread) => fullyQualifiedId(thread!))
+  //   .join(' ');
 
   const description = model.getValueDescription(address);
   const type = description?.type;
@@ -89,13 +90,13 @@ const gridCellGetter = (model: SheetModel) => {
 
 export const rowLabelCell = (row: number) => ({
   value: rowToA1Notation(row),
-  className: 'text-end pie-1 text-subdued',
+  className: '!bg-toolbarSurface text-subdued text-end pie-1',
   resizeHandle: 'row',
 });
 
 export const colLabelCell = (col: number) => ({
   value: colToA1Notation(col),
-  className: 'text-subdued',
+  className: '!bg-toolbarSurface text-subdued',
   resizeHandle: 'col',
 });
 
@@ -105,6 +106,11 @@ const cellGetter = (model: SheetModel) => {
     switch (plane) {
       case 'grid':
         return getGridCells(nextBounds);
+      case 'fixedStartStart': {
+        return {
+          '0,0': { className: '!bg-toolbarSurface' },
+        };
+      }
       case 'frozenColsStart':
         return [...Array(nextBounds.end.row - nextBounds.start.row)].reduce((acc, _, r0) => {
           const r = nextBounds.start.row + r0;

package/src/components/RangeList/RangeList.tsx

@@ -2,10 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema } from 'effect';
 import React, { useCallback } from 'react';
 
 import { rangeToA1Notation } from '@dxos/compute';
-import { S } from '@dxos/echo-schema';
 import { useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { ghostHover } from '@dxos/react-ui-theme';
@@ -32,7 +32,7 @@ export const RangeList = ({ sheet }: RangeListProps) => {
   return (
     <>
       <h2 className='p-2 text-sm font-semibold'>{t('range list heading')}</h2>
-      <List.Root<Range> items={sheet.ranges} isItem={S.is(Range)}>
+      <List.Root<Range> items={sheet.ranges} isItem={Schema.is(Range)}>
         {({ items: ranges }) =>
           ranges.map((range, i) => (
             <List.Item key={i} item={range} classNames={['p-2', ghostHover]}>

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

@@ -9,6 +9,7 @@ import React from 'react';
 
 import { Capabilities, contributes, createResolver, IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { GraphPlugin } from '@dxos/plugin-graph';
 import { fullyQualifiedId, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { AttendableContainer } from '@dxos/react-ui-attention';
@@ -64,15 +65,11 @@ const meta: Meta = {
     withClientProvider({ types: [SheetType], createSpace: true }),
     withComputeGraphDecorator(),
     withTheme,
-    withLayout({
-      fullscreen: true,
-      tooltips: true,
-      classNames: 'grid',
-    }),
+    withLayout({ fullscreen: true, classNames: 'grid' }),
     withAttention,
     // TODO(wittjosiah): Consider whether we should refactor component so story doesn't need to depend on intents.
     withPluginManager({
-      plugins: [IntentPlugin()],
+      plugins: [IntentPlugin(), GraphPlugin()],
       capabilities: [
         contributes(
           Capabilities.IntentResolver,

package/src/components/SheetContainer/SheetContainer.tsx

@@ -14,23 +14,20 @@ import { GridSheet } from '../GridSheet';
 import { SheetProvider } from '../SheetContext';
 import { SheetToolbar } from '../SheetToolbar';
 
-export const SheetContainer = ({
-  space,
-  sheet,
-  role,
-  ignoreAttention,
-}: {
+export type SheetContainerProps = {
   space: Space;
   sheet: SheetType;
   role?: string;
   ignoreAttention?: boolean;
-}) => {
+};
+
+export const SheetContainer = ({ space, sheet, role, ignoreAttention }: SheetContainerProps) => {
   const graph = useComputeGraph(space);
 
   return graph ? (
     <SheetProvider sheet={sheet} graph={graph} ignoreAttention={ignoreAttention}>
       <StackItem.Content toolbar statusbar {...(role === 'section' && { classNames: 'aspect-video' })}>
-        <SheetToolbar attendableId={fullyQualifiedId(sheet)} />
+        <SheetToolbar id={fullyQualifiedId(sheet)} />
         <GridSheet />
         <FunctionEditor />
       </StackItem.Content>

package/src/components/SheetToolbar/SheetToolbar.stories.tsx

@@ -14,7 +14,7 @@ import { SheetToolbar } from './SheetToolbar';
 import translations from '../../translations';
 
 const DefaultStory = () => {
-  return <SheetToolbar classNames={textBlockWidth} />;
+  return <SheetToolbar id='test' classNames={textBlockWidth} />;
 };
 
 export const Default = {};
@@ -23,7 +23,7 @@ const meta: Meta = {
   title: 'plugins/plugin-sheet/Toolbar',
   component: SheetToolbar,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ tooltips: true })],
+  decorators: [withTheme, withLayout()],
   parameters: { translations, layout: 'fullscreen' },
 };
 

package/src/components/SheetToolbar/SheetToolbar.tsx

@@ -2,46 +2,82 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type PropsWithChildren, useCallback } from 'react';
+import { Rx } from '@effect-rx/rx-react';
+import React, { type PropsWithChildren, useMemo } from 'react';
 
+import { useAppGraph } from '@dxos/app-framework';
+import { type CompleteCellRange } from '@dxos/compute';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { createGapSeparator, MenuProvider, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
+import {
+  type ActionGraphEdges,
+  type ActionGraphNodes,
+  type ActionGraphProps,
+  createGapSeparator,
+  MenuProvider,
+  rxFromSignal,
+  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';
+import { type SheetModel } from '../../model';
+import { useSheetContext } from '../SheetContext';
 
 //
 // 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 type SheetToolbarProps = ThemedClassName<PropsWithChildren<{ id: string }>>;
+
+const createToolbarActions = (
+  model: SheetModel,
+  state: ToolbarState,
+  cursorFallbackRange?: CompleteCellRange,
+  customActions?: Rx.Rx<ActionGraphProps>,
+) => {
+  return Rx.make((get) => {
+    const align = get(rxFromSignal(() => createAlign(model, state, cursorFallbackRange)));
+    const style = get(rxFromSignal(() => createStyle(model, state, cursorFallbackRange)));
+    const gap = createGapSeparator();
+    const nodes: ActionGraphNodes = [...align.nodes, ...style.nodes, ...gap.nodes];
+    const edges: ActionGraphEdges = [...align.edges, ...style.edges, ...gap.edges];
+    if (customActions) {
+      const custom = get(customActions);
+      nodes.push(...custom.nodes);
+      edges.push(...custom.edges);
+    }
+    return {
+      nodes,
+      edges,
+    };
+  });
 };
 
-export const SheetToolbar = ({ attendableId, classNames }: SheetToolbarProps) => {
+export const SheetToolbar = ({ id, classNames }: SheetToolbarProps) => {
+  const { model, cursorFallbackRange } = useSheetContext();
   const state = useToolbarState({});
   useAlignState(state);
   useStyleState(state);
-  useCommentState(state);
 
-  const actionsCreator = useCallback(() => createToolbarActions(state), [state]);
+  const { graph } = useAppGraph();
+  const customActions = useMemo(() => {
+    return Rx.make((get) => {
+      const actions = get(graph.actions(id));
+      const nodes = actions.filter((action) => action.properties.disposition === 'toolbar');
+      return { nodes, edges: nodes.map((node) => ({ source: 'root', target: node.id })) };
+    });
+  }, [graph]);
+
+  const actionsCreator = useMemo(
+    () => createToolbarActions(model, state, cursorFallbackRange, customActions),
+    [model, state, cursorFallbackRange, customActions],
+  );
   const menu = useMenuActions(actionsCreator);
-  const handleAction = useToolbarAction(state);
 
   return (
-    <MenuProvider {...menu} attendableId={attendableId} onAction={handleAction}>
+    <MenuProvider {...menu} attendableId={id}>
       <ToolbarMenu classNames={classNames} />
     </MenuProvider>
   );

package/src/components/SheetToolbar/align.ts

@@ -4,11 +4,13 @@
 
 import { useEffect } from 'react';
 
-import { inRange } from '@dxos/compute';
+import { type CompleteCellRange, inRange } from '@dxos/compute';
 import { createMenuAction, createMenuItemGroup, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
+import { type ToolbarState } from './useToolbarState';
 import { SHEET_PLUGIN } from '../../meta';
-import { type AlignKey, alignKey, type AlignValue, rangeFromIndex } from '../../types';
+import { type SheetModel } from '../../model';
+import { type AlignKey, alignKey, type AlignValue, rangeFromIndex, rangeToIndex } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
 export type AlignAction = { key: AlignKey; value: AlignValue };
@@ -43,21 +45,49 @@ const createAlignGroupAction = (value?: AlignValue) =>
     value: `${alignKey}--${value}`,
   } as ToolbarMenuActionGroupProperties);
 
-const createAlignActions = (value?: AlignValue) =>
+const createAlignActions = (model: SheetModel, state: ToolbarState, cursorFallbackRange?: CompleteCellRange) =>
   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}`,
-    });
+    return createMenuAction<AlignAction>(
+      `${alignKey}--${alignValue}`,
+      () => {
+        if (!cursorFallbackRange) {
+          return;
+        }
+        const index =
+          model.sheet.ranges?.findIndex(
+            (range) =>
+              range.key === alignKey && inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),
+          ) ?? -1;
+        const nextRangeEntity = {
+          range: rangeToIndex(model.sheet, cursorFallbackRange),
+          key: alignKey,
+          value: alignValue as AlignValue,
+        };
+        if (index < 0) {
+          model.sheet.ranges?.push(nextRangeEntity);
+          state[alignKey] = nextRangeEntity.value;
+        } else if (model.sheet.ranges![index].value === nextRangeEntity.value) {
+          model.sheet.ranges?.splice(index, 1);
+          state[alignKey] = undefined;
+        } else {
+          model.sheet.ranges?.splice(index, 1, nextRangeEntity);
+          state[alignKey] = nextRangeEntity.value;
+        }
+      },
+      {
+        key: alignKey,
+        value: alignValue as AlignValue,
+        checked: state[alignKey] === 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);
+export const createAlign = (model: SheetModel, state: ToolbarState, cursorFallbackRange?: CompleteCellRange) => {
+  const alignGroup = createAlignGroupAction(state[alignKey]);
+  const alignActions = createAlignActions(model, state, cursorFallbackRange);
   return {
     nodes: [alignGroup, ...alignActions],
     edges: [

package/src/components/SheetToolbar/style.ts

@@ -4,11 +4,12 @@
 
 import { useEffect } from 'react';
 
-import { inRange } from '@dxos/compute';
+import { type CompleteCellRange, 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 { type SheetModel } from '../../model';
+import { rangeFromIndex, rangeToIndex, type StyleKey, type StyleValue } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
 export type StyleState = Partial<Record<StyleValue, boolean>>;
@@ -48,20 +49,55 @@ const createStyleGroup = (state: StyleState) => {
   } as ToolbarMenuActionGroupProperties);
 };
 
-const createStyleActions = (state: StyleState) =>
+const createStyleActions = (model: SheetModel, state: StyleState, cursorFallbackRange?: CompleteCellRange) =>
   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],
-    });
+    return createMenuAction<StyleAction>(
+      `style--${styleValue}`,
+      () => {
+        if (!cursorFallbackRange) {
+          return;
+        }
+        const index =
+          model.sheet.ranges?.findIndex(
+            (range) =>
+              range.key === 'style' && inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),
+          ) ?? -1;
+        const nextRangeEntity = {
+          range: rangeToIndex(model.sheet, cursorFallbackRange),
+          key: 'style',
+          value: styleValue as StyleValue,
+        };
+        if (
+          model.sheet.ranges
+            .filter(
+              ({ range, key: rangeKey }) =>
+                rangeKey === 'style' && inRange(rangeFromIndex(model.sheet, range), cursorFallbackRange.from),
+            )
+            .some(({ value: rangeValue }) => rangeValue === styleValue)
+        ) {
+          // this value should be unset
+          if (index >= 0) {
+            model.sheet.ranges?.splice(index, 1);
+          }
+          state[nextRangeEntity.value] = false;
+        } else {
+          model.sheet.ranges?.push(nextRangeEntity);
+          state[nextRangeEntity.value] = true;
+        }
+      },
+      {
+        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) => {
+export const createStyle = (model: SheetModel, state: StyleState, cursorFallbackRange?: CompleteCellRange) => {
   const styleGroupAction = createStyleGroup(state);
-  const styleActions = createStyleActions(state);
+  const styleActions = createStyleActions(model, state, cursorFallbackRange);
   return {
     nodes: [styleGroupAction, ...styleActions],
     edges: [

package/src/components/SheetToolbar/useToolbarState.ts

@@ -7,10 +7,9 @@ import { useMemo } from 'react';
 import { live } 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 type ToolbarState = Partial<StyleState & AlignState>;
 
 export const useToolbarState = (initialState: ToolbarState = {}) => {
   return useMemo(() => live<ToolbarState>(initialState), []);

package/src/extensions/compute.ts

@@ -141,7 +141,7 @@ class ComputeWidget extends WidgetType {
     super();
   }
 
-  override toDOM(_view: EditorView) {
+  override toDOM(_view: EditorView): HTMLDivElement {
     const div = document.createElement('div');
     div.setAttribute('title', this.formula);
     div.innerText = String(this.value);

package/src/integrations/thread-ranges.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { pipe } from 'effect';
+import { Schema, pipe } from 'effect';
 import { useCallback, useEffect, useMemo } from 'react';
 
 import {
@@ -15,11 +15,12 @@ import {
 } 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 { isInstanceOf, RelationSourceId } from '@dxos/echo-schema';
 import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
-import { ThreadAction } from '@dxos/plugin-thread/types';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { ThreadAction, ThreadType } from '@dxos/plugin-thread/types';
+import { Filter, fullyQualifiedId, getSpace, Query, useQuery } from '@dxos/react-client/echo';
 import { type DxGridElement, type DxGridPosition, type GridContentProps } from '@dxos/react-ui-grid';
+import { AnchoredTo } from '@dxos/schema';
 
 import { useSheetContext } from '../components';
 import { SHEET_PLUGIN } from '../meta';
@@ -55,7 +56,7 @@ export const useUpdateFocusedCellOnThreadSelection = (grid: DxGridElement | null
           subject: string;
           options: { cursor: string; ref: GridContentProps['activeRefs'] };
         } => {
-          if (!S.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
+          if (!Schema.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
             return false;
           }
 
@@ -78,23 +79,19 @@ export const useSelectThreadOnCellFocus = () => {
   const { model, cursor } = useSheetContext();
   const { dispatchPromise: dispatch } = useIntentDispatcher();
 
-  const threads = useMemo(
-    () => model.sheet.threads?.filter((thread): thread is NonNullable<typeof thread> => !!thread) ?? [],
-    [
-      // TODO(thure): Surely we can find a better dependency for this…
-      JSON.stringify(model.sheet.threads),
-    ],
-  );
+  const space = getSpace(model.sheet);
+  const anchors = useQuery(space, Query.select(Filter.ids(model.sheet.id)).targetOf(AnchoredTo));
 
   const selectClosestThread = useCallback(
     (cellAddress: CellAddress) => {
-      if (!cellAddress || !threads) {
+      if (!cellAddress) {
         return;
       }
 
-      const closestThread = threads?.find((ref) => {
-        if (ref.target?.anchor) {
-          const range = parseThreadAnchorAsCellRange(ref.target!.anchor);
+      const closestThread = anchors.find((anchor) => {
+        const source = anchor[RelationSourceId];
+        if (anchor.anchor && isInstanceOf(ThreadType, source)) {
+          const range = parseThreadAnchorAsCellRange(anchor.anchor);
           return range ? inRange(range, cellAddress) : false;
         } else {
           return false;
@@ -110,7 +107,7 @@ export const useSelectThreadOnCellFocus = () => {
         void dispatch(intent);
       }
     },
-    [dispatch, threads],
+    [dispatch, anchors],
   );
 
   const debounced = useMemo(() => {

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

@@ -7,7 +7,7 @@ import { afterEach, beforeEach, describe, expect, onTestFinished, test } from 'v
 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/types';
+import { FunctionType } from '@dxos/functions';
 import { log } from '@dxos/log';
 
 import { SheetModel } from './sheet-model';