@dxos/plugin-sheet 0.6.12-staging.e11e696 → 0.6.13-main.041e8aa

package/src/components/Toolbar/Toolbar.tsx

@@ -2,48 +2,87 @@
 // Copyright 2024 DXOS.org
 //
 
-import {
-  type Icon,
-  Calendar,
-  ChatText,
-  CurrencyDollar,
-  Eraser,
-  HighlighterCircle,
-  TextAlignCenter,
-  TextAlignLeft,
-  TextAlignRight,
-} from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren } from 'react';
 
 import {
-  DensityProvider,
-  ElevationProvider,
+  Icon,
   Toolbar as NaturalToolbar,
-  type ThemedClassName,
   useTranslation,
+  Tooltip,
+  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
+  type ToolbarButtonProps as NaturalToolbarButtonProps,
+  type ToolbarToggleProps as NaturalToolbarToggleProps,
+  type ThemedClassName,
 } from '@dxos/react-ui';
+import { useAttention } from '@dxos/react-ui-attention';
 import { nonNullable } from '@dxos/util';
 
-import { ToolbarButton, ToolbarSeparator, ToolbarToggleButton } from './common';
 import { addressToIndex } from '../../defs';
 import { SHEET_PLUGIN } from '../../meta';
 import { type Formatting } from '../../types';
-import { useSheetContext } from '../Sheet/sheet-context';
+import { useSheetContext } from '../SheetContext';
+
+//
+// Buttons
+//
+
+const buttonStyles = 'min-bs-0 p-2';
+const tooltipProps = { side: 'bottom' as const, classNames: 'z-10' };
+
+const ToolbarSeparator = () => <div role='separator' className='grow' />;
+
+//
+// ToolbarItem
+//
+
+type ToolbarItemProps =
+  | (NaturalToolbarButtonProps & { itemType: 'button'; icon: string })
+  | (NaturalToolbarToggleGroupItemProps & { itemType: 'toggleGroupItem'; icon: string })
+  | (NaturalToolbarToggleProps & { itemType: 'toggle'; icon: string });
+
+export const ToolbarItem = ({ itemType, icon, children, ...props }: ToolbarItemProps) => {
+  const Invoker =
+    itemType === 'toggleGroupItem'
+      ? NaturalToolbar.ToggleGroupItem
+      : itemType === 'toggle'
+        ? NaturalToolbar.Toggle
+        : NaturalToolbar.Button;
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        {/* TODO(thure): type the props spread better. */}
+        <Invoker variant='ghost' {...(props as any)} classNames={buttonStyles}>
+          <Icon icon={icon} size={5} />
+          <span className='sr-only'>{children}</span>
+        </Invoker>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {children}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
 
 //
 // Root
 //
 
-export type ToolbarAction =
-  | { type: 'clear' }
-  | { type: 'highlight' }
-  | { type: 'left' }
-  | { type: 'center' }
-  | { type: 'right' }
-  | { type: 'date' }
-  | { type: 'currency' }
-  | { type: 'comment'; anchor: string; cellContent?: string };
+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 StyleValue = 'highlight' | 'unset';
+type StyleAction = { type: 'style'; value: StyleValue };
+
+export type ToolbarAction = StyleAction | AlignAction | FormatAction | CommentAction;
 
 export type ToolbarActionType = ToolbarAction['type'];
 
@@ -52,30 +91,41 @@ export type ToolbarActionHandler = (action: ToolbarAction) => void;
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
     onAction?: ToolbarActionHandler;
+    role?: string;
   }>
 >;
 
 const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
 
-const ToolbarRoot = ({ children, onAction, classNames }: ToolbarProps) => {
+// 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();
+  const { hasAttention } = useAttention(id);
+
   return (
     <ToolbarContextProvider onAction={onAction}>
-      <DensityProvider density='fine'>
-        <ElevationProvider elevation='chrome'>
-          <NaturalToolbar.Root classNames={['is-full shrink-0 overflow-x-auto overflow-y-hidden p-1', classNames]}>
-            {children}
-          </NaturalToolbar.Root>
-        </ElevationProvider>
-      </DensityProvider>
+      <NaturalToolbar.Root
+        classNames={[
+          ...(role === 'section'
+            ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]
+            : ['attention-surface']),
+          classNames,
+        ]}
+      >
+        {children}
+      </NaturalToolbar.Root>
     </ToolbarContextProvider>
   );
 };
 
 // TODO(burdon): Generalize.
 // TODO(burdon): Detect and display current state.
-type ButtonProps = {
-  type: ToolbarActionType;
-  Icon: Icon;
+type ButtonProps<T> = {
+  value: T;
+  icon: string;
   getState: (state: Formatting) => boolean;
   disabled?: (state: Formatting) => boolean;
 };
@@ -84,9 +134,9 @@ type ButtonProps = {
 // Alignment
 //
 
-const formatOptions: ButtonProps[] = [
-  { type: 'date', Icon: Calendar, getState: (state) => false },
-  { type: 'currency', Icon: CurrencyDollar, getState: (state) => false },
+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 = () => {
@@ -98,26 +148,25 @@ const Format = () => {
       type='single'
       // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
     >
-      {formatOptions.map(({ type, getState, Icon }) => (
-        <ToolbarToggleButton
-          key={type}
-          value={type}
-          Icon={Icon}
-          // disabled={state?.blockType === 'codeblock'}
-          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}
+      {formatOptions.map(({ value, getState, icon }) => (
+        <ToolbarItem
+          itemType='toggleGroupItem'
+          key={value}
+          value={value}
+          icon={icon}
+          onClick={() => onAction?.({ type: 'format', value })}
         >
-          {t(`toolbar ${type} label`)}
-        </ToolbarToggleButton>
+          {t(`toolbar ${value} label`)}
+        </ToolbarItem>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
 };
 
-const alignmentOptions: ButtonProps[] = [
-  { type: 'left', Icon: TextAlignLeft, getState: (state) => false },
-  { type: 'center', Icon: TextAlignCenter, getState: (state) => false },
-  { type: 'right', Icon: TextAlignRight, getState: (state) => false },
+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 },
 ];
 
 const Alignment = () => {
@@ -128,50 +177,41 @@ const Alignment = () => {
     <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 })}
     >
-      {alignmentOptions.map(({ type, getState, Icon }) => (
-        <ToolbarToggleButton
-          key={type}
-          value={type}
-          Icon={Icon}
-          // disabled={state?.blockType === 'codeblock'}
-          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}
-        >
-          {t(`toolbar ${type} label`)}
-        </ToolbarToggleButton>
+      {alignmentOptions.map(({ value, getState, icon }) => (
+        <ToolbarItem itemType='toggleGroupItem' key={value} value={value} icon={icon}>
+          {t(`toolbar ${value} label`)}
+        </ToolbarItem>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
 };
 
-const styleOptions: ButtonProps[] = [
-  { type: 'clear', Icon: Eraser, getState: (state) => false },
-  { type: 'highlight', Icon: HighlighterCircle, getState: (state) => false },
+const styleOptions: ButtonProps<StyleValue>[] = [
+  { value: 'highlight', icon: 'ph--highlighter--regular', getState: (state) => false },
 ];
 
 const Styles = () => {
-  const { onAction } = useToolbarContext('Alignment');
+  const { onAction } = useToolbarContext('Styles');
   const { t } = useTranslation(SHEET_PLUGIN);
 
   return (
-    <NaturalToolbar.ToggleGroup
-      type='single'
-      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
-    >
-      {styleOptions.map(({ type, getState, Icon }) => (
-        <ToolbarToggleButton
-          key={type}
-          value={type}
-          Icon={Icon}
-          // disabled={state?.blockType === 'codeblock'}
-          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}
+    <>
+      {styleOptions.map(({ value, getState, icon }) => (
+        <ToolbarItem
+          itemType='toggle'
+          key={value}
+          onPressedChange={(nextPressed: boolean) =>
+            onAction?.({ type: 'style', value: nextPressed ? 'highlight' : 'unset' })
+          }
+          icon={icon}
         >
-          {t(`toolbar ${type} label`)}
-        </ToolbarToggleButton>
+          {t(`toolbar ${value} label`)}
+        </ToolbarItem>
       ))}
-    </NaturalToolbar.ToggleGroup>
+    </>
   );
 };
 
@@ -206,9 +246,10 @@ const Actions = () => {
         : 'comment label';
 
   return (
-    <ToolbarButton
+    <ToolbarItem
+      itemType='button'
       value='comment'
-      Icon={ChatText}
+      icon='ph--chat-text--regular'
       data-testid='editor.toolbar.comment'
       onClick={() => {
         if (!cursor) {
@@ -223,7 +264,7 @@ const Actions = () => {
       disabled={!cursorOnly || overlapsCommentAnchor}
     >
       {t(tooltipLabelKey)}
-    </ToolbarButton>
+    </ToolbarItem>
   );
 };
 

package/src/components/index.ts

@@ -5,7 +5,8 @@
 import React from 'react';
 
 export * from './ComputeGraph';
-export * from './Sheet';
+export * from './GridSheet';
+export * from './SheetContext';
 
 // Lazily load components for content surfaces.
 export const SheetContainer = React.lazy(() => import('./SheetContainer'));

package/src/defs/util.ts

@@ -68,7 +68,7 @@ export const createSheet = ({ name, cells, ...size }: CreateSheetOptions = {}):
     columns: [],
     rowMeta: {},
     columnMeta: {},
-    formatting: {},
+    formatting: [],
   });
 
   initialize(sheet, size);

package/src/extensions/compute.stories.tsx

@@ -21,7 +21,7 @@ import { withTheme, withLayout } from '@dxos/storybook-utils';
 import { nonNullable } from '@dxos/util';
 
 import { compute, computeGraphFacet } from './compute';
-import { Sheet } from '../components';
+import { GridSheet, SheetProvider } from '../components';
 import { useComputeGraph, useSheetModel } from '../hooks';
 import { useTestSheet, withComputeGraphDecorator } from '../testing';
 import { SheetType } from '../types';
@@ -80,9 +80,9 @@ const Grid = () => {
 
   return (
     <div className='flex w-[40rem] overflow-hidden'>
-      <Sheet.Root graph={graph} sheet={sheet}>
-        <Sheet.Main classNames='border border-separator' />
-      </Sheet.Root>
+      <SheetProvider graph={graph} sheet={sheet}>
+        <GridSheet />
+      </SheetProvider>
     </div>
   );
 };

package/src/{components/CellEditor → extensions/editor}/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './CellEditor';
 export * from './extension';

package/src/extensions/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './compute';
+export * from './editor';

package/src/hooks/index.ts

@@ -5,3 +5,4 @@
 export * from './useComputeGraph';
 export * from './useFormattingModel';
 export * from './useSheetModel';
+export * from './threads';

package/src/{components/Sheet/threads.tsx → hooks/threads.ts}

@@ -3,82 +3,21 @@
 //
 
 import { effect } from '@preact/signals-core';
-import React, { type PropsWithChildren, useCallback, useEffect, useMemo } from 'react';
+import { type MutableRefObject, useCallback, useEffect, useMemo } from 'react';
 
 import { type IntentResolver, LayoutAction, useIntentDispatcher, useIntentResolver } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { Icon, useTranslation } from '@dxos/react-ui';
+import { type DxGridElement, type DxGridPosition } from '@dxos/react-ui-grid';
 
-import { type Decoration } from './decorations';
-import { useSheetContext } from './sheet-context';
-import { addressFromIndex, addressToIndex, type CellAddress, closest } from '../../defs';
-import { SHEET_PLUGIN } from '../../meta';
-
-// TODO(burdon): Move into folder; split hooks.
-
-const CommentIndicator = () => {
-  return (
-    <div
-      role='none'
-      className='absolute top-0 right-0 w-0 h-0 border-t-8 border-l-8 border-t-cmCommentSurface border-l-transparent'
-    />
-  );
-};
-
-const ThreadedCellWrapper = ({ children }: PropsWithChildren) => {
-  const dispatch = useIntentDispatcher();
-  const [isHovered, setIsHovered] = React.useState(false);
-  const { t } = useTranslation(SHEET_PLUGIN);
-
-  const handleClick = React.useCallback(
-    (_event: React.MouseEvent) => {
-      void dispatch({ action: LayoutAction.SET_LAYOUT, data: { element: 'complementary', state: true } });
-    },
-    [dispatch],
-  );
-
-  return (
-    <div
-      role='none'
-      className='relative h-full is-full'
-      onMouseEnter={() => {
-        setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-      }}
-    >
-      <CommentIndicator />
-      {isHovered && (
-        <div className='absolute inset-0 flex items-center justify-end pr-1'>
-          <button
-            className='ch-button text-xs min-bs-0 p-1'
-            onClick={handleClick}
-            aria-label={t('open comment for sheet cell')}
-          >
-            <Icon icon='ph--chat--regular' aria-hidden={true} />
-          </button>
-        </div>
-      )}
-      {children}
-    </div>
-  );
-};
-
-const createThreadDecoration = (cellIndex: string, threadId: string, sheetId: string): Decoration => {
-  return {
-    type: 'comment',
-    cellIndex,
-    decorate: (props) => <ThreadedCellWrapper {...props} />,
-  };
-};
-
-// TODO(burdon): Factor out hooks.
-
-const useUpdateCursorOnThreadSelection = () => {
-  const { setCursor, model } = useSheetContext();
+import { addressFromIndex, addressToIndex, type CellAddress, closest } from '../defs';
+import { SHEET_PLUGIN } from '../meta';
+import { type SheetModel, type Decoration, type Decorations } from '../model';
 
+export const useUpdateFocusedCellOnThreadSelection = (
+  model: SheetModel,
+  grid: MutableRefObject<DxGridElement | null>,
+) => {
   const handleScrollIntoView: IntentResolver = useCallback(
     ({ action, data }) => {
       switch (action) {
@@ -89,18 +28,17 @@ const useUpdateCursorOnThreadSelection = () => {
 
           // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
           const cellAddress = addressFromIndex(model.sheet, data.cursor);
-          setCursor(cellAddress);
+          grid.current?.setFocus({ ...cellAddress, plane: 'grid' }, true);
         }
       }
     },
-    [model.sheet, setCursor],
+    [model.sheet],
   );
 
   useIntentResolver(SHEET_PLUGIN, handleScrollIntoView);
 };
 
-const useSelectThreadOnCursorChange = () => {
-  const { cursor, model } = useSheetContext();
+export const useSelectThreadOnCellFocus = (model: SheetModel, cursor?: CellAddress) => {
   const dispatch = useIntentDispatcher();
 
   const activeThreads = useMemo(
@@ -108,7 +46,10 @@ const useSelectThreadOnCursorChange = () => {
       model.sheet.threads?.filter(
         (thread): thread is NonNullable<typeof thread> => !!thread && thread.status === 'active',
       ) ?? [],
-    [JSON.stringify(model.sheet.threads)],
+    [
+      // TODO(thure): Surely we can find a better dependency for this…
+      JSON.stringify(model.sheet.threads),
+    ],
   );
 
   const activeThreadAddresses = useMemo(
@@ -143,7 +84,7 @@ const useSelectThreadOnCursorChange = () => {
   );
 
   const debounced = useMemo(() => {
-    return debounce((cursor: CellAddress) => requestAnimationFrame(() => selectClosestThread(cursor)), 50);
+    return debounce((cellCoords: DxGridPosition) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
   }, [selectClosestThread]);
 
   useEffect(() => {
@@ -154,8 +95,15 @@ const useSelectThreadOnCursorChange = () => {
   }, [cursor, selectClosestThread]);
 };
 
-const useThreadDecorations = () => {
-  const { decorations, model } = useSheetContext();
+const createThreadDecoration = (cellIndex: string, threadId: string, sheetId: string): Decoration => {
+  return {
+    type: 'comment',
+    classNames: ['bg-greenFill'],
+    cellIndex,
+  };
+};
+
+export const useThreadDecorations = (model: SheetModel, decorations: Decorations) => {
   const sheet = useMemo(() => model.sheet, [model.sheet]);
   const sheetId = useMemo(() => fullyQualifiedId(sheet), [sheet]);
 
@@ -197,9 +145,3 @@ const useThreadDecorations = () => {
     return () => unsubscribe();
   });
 };
-
-export const useThreads = () => {
-  useUpdateCursorOnThreadSelection();
-  useSelectThreadOnCursorChange();
-  useThreadDecorations();
-};

package/src/{meta.tsx → meta.ts}

@@ -2,13 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { pluginMeta } from '@dxos/app-framework';
+import { type PluginMeta } from '@dxos/app-framework';
 
 export const SHEET_PLUGIN = 'dxos.org/plugin/sheet';
 
-export default pluginMeta({
+export default {
   id: SHEET_PLUGIN,
   name: 'Sheet',
   description: 'A simple spreadsheet plugin.',
   icon: 'ph--grid-nine--regular',
-});
+} satisfies PluginMeta;

package/src/{components/Sheet → model}/decorations.ts

@@ -60,3 +60,5 @@ export const createDecorations = () => {
     getAllDecorations,
   } as const;
 };
+
+export type Decorations = ReturnType<typeof createDecorations>;

package/src/model/formatting-model.ts

@@ -3,17 +3,20 @@
 //
 
 import { type ClassNameValue } from '@dxos/react-ui-types';
+import { FieldValueType } from '@dxos/schema';
 
 import { type SheetModel } from './sheet-model';
 import { type CellAddress, inRange } from '../defs';
 import { addressToIndex, rangeFromIndex } from '../defs';
-import { ValueTypeEnum } from '../types';
 
 export type CellFormat = {
   value?: string;
   classNames?: ClassNameValue;
 };
 
+/**
+ * @deprecated See react-ui-data.
+ */
 export class FormattingModel {
   constructor(private readonly _model: SheetModel) {}
 
@@ -31,7 +34,7 @@ export class FormattingModel {
 
     // Cell-specific formatting.
     const idx = addressToIndex(this._model.sheet, cell);
-    let formatting = this._model.sheet.formatting?.[idx] ?? {};
+    let formatting = this._model.sheet.formatting.find?.(({ range }) => range === idx);
     const classNames = [...(formatting?.classNames ?? [])];
 
     // Range formatting.
@@ -55,7 +58,7 @@ export class FormattingModel {
 
     const type = formatting?.type ?? this._model.getValueType(cell);
     switch (type) {
-      case ValueTypeEnum.Boolean: {
+      case FieldValueType.Boolean: {
         return {
           value: (value as boolean).toLocaleString().toUpperCase(),
           classNames: [...classNames, value ? '!text-greenText' : '!text-orangeText'],
@@ -66,15 +69,15 @@ export class FormattingModel {
       // Numbers.
       //
 
-      case ValueTypeEnum.Number: {
+      case FieldValueType.Number: {
         return { value: value.toLocaleString(locales), classNames: [...classNames, defaultNumber] };
       }
 
-      case ValueTypeEnum.Percent: {
+      case FieldValueType.Percent: {
         return { value: (value as number) * 100 + '%', classNames: [...classNames, defaultNumber] };
       }
 
-      case ValueTypeEnum.Currency: {
+      case FieldValueType.Currency: {
         return {
           value: (value as number).toLocaleString(locales, {
             style: 'currency',
@@ -90,17 +93,17 @@ export class FormattingModel {
       // Dates.
       //
 
-      case ValueTypeEnum.DateTime: {
+      case FieldValueType.DateTime: {
         const date = this._model.toLocalDate(value as number);
         return { value: date.toLocaleString(locales), classNames };
       }
 
-      case ValueTypeEnum.Date: {
+      case FieldValueType.Date: {
         const date = this._model.toLocalDate(value as number);
         return { value: date.toLocaleDateString(locales), classNames };
       }
 
-      case ValueTypeEnum.Time: {
+      case FieldValueType.Time: {
         const date = this._model.toLocalDate(value as number);
         return { value: date.toLocaleTimeString(locales), classNames };
       }

package/src/model/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './decorations';
 export * from './formatting-model';
 export * from './sheet-model';

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

@@ -8,12 +8,10 @@ import { Trigger } from '@dxos/async';
 import { FunctionType } from '@dxos/plugin-script/types';
 
 import { SheetModel } from './sheet-model';
-import { createSheet, addressFromA1Notation } from '../defs';
+import { addressFromA1Notation, createSheet } from '../defs';
 import { TestBuilder, testFunctionPlugins } from '../graph/testing';
 import { type CellScalarValue } from '../types';
 
-// TODO(burdon): GPT("prompt", inputs); e.g., with large text cells.
-
 describe('SheetModel', () => {
   let testBuilder: TestBuilder;
   beforeEach(async () => {