@dxos/plugin-sheet 0.6.14-main.7bd9c89 → 0.6.14-staging.4b6f9cf

package/src/components/GridSheet/GridSheet.tsx

@@ -2,25 +2,43 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useMemo, useRef, type FocusEvent, type WheelEvent, type KeyboardEvent } from 'react';
+import React, {
+  useCallback,
+  useMemo,
+  useRef,
+  type FocusEvent,
+  type KeyboardEvent,
+  type WheelEvent,
+  type MouseEvent,
+  useState,
+} from 'react';
 
+import { useIntentDispatcher } from '@dxos/app-framework';
+import { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
-  type DxGridElement,
-  Grid,
-  type GridContentProps,
+  closestCell,
+  defaultSizeRow,
   editorKeys,
-  type EditorKeysProps,
+  Grid,
   GridCellEditor,
-  closestCell,
+  type DxGridElement,
+  type EditorKeyHandler,
+  type EditorBlurHandler,
+  type GridContentProps,
+  type DxGridPosition,
 } from '@dxos/react-ui-grid';
 
 import { colLabelCell, dxGridCellIndexToSheetCellAddress, rowLabelCell, useSheetModelDxGridProps } from './util';
-import { rangeToA1Notation, type CellRange, DEFAULT_COLUMNS, DEFAULT_ROWS } from '../../defs';
-import { rangeExtension, sheetExtension, type CellRangeNotifier } from '../../extensions';
-import { useUpdateFocusedCellOnThreadSelection } from '../../hooks';
+import { DEFAULT_COLUMNS, DEFAULT_ROWS, rangeToA1Notation, type CellRange } from '../../defs';
+import { rangeExtension, sheetExtension, type RangeController } from '../../extensions';
+import { useSelectThreadOnCellFocus, useUpdateFocusedCellOnThreadSelection } from '../../integrations';
+import { SHEET_PLUGIN } from '../../meta';
+import { SheetAction } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
+const inertPosition: DxGridPosition = { plane: 'grid', col: 0, row: 0 };
+
 const initialCells = {
   grid: {},
   frozenColsStart: [...Array(64)].reduce((acc, _, i) => {
@@ -38,21 +56,36 @@ const frozen = {
   frozenRowsStart: 1,
 };
 
-const sheetRowDefault = { frozenRowsStart: { size: 32, readonly: true }, grid: { size: 32, resizeable: true } };
+const sheetRowDefault = {
+  frozenRowsStart: { size: defaultSizeRow, readonly: true },
+  grid: { size: defaultSizeRow, resizeable: true },
+};
 const sheetColDefault = { frozenColsStart: { size: 48, readonly: true }, grid: { size: 180, resizeable: true } };
 
 export const GridSheet = () => {
-  const { id, model, editing, setEditing, setCursor, setRange, range, cursor } = useSheetContext();
-  const dxGrid = useRef<DxGridElement | null>(null);
-  const rangeNotifier = useRef<CellRangeNotifier>();
+  const { t } = useTranslation(SHEET_PLUGIN);
+  const { id, model, editing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs } = useSheetContext();
+  // NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us
+  // a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.
+  const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
+  const [extraplanarFocus, setExtraplanarFocus] = useState<DxGridPosition | null>(null);
+  const dispatch = useIntentDispatcher();
+  const rangeController = useRef<RangeController>();
   const { hasAttention } = useAttention(id);
 
   const handleFocus = useCallback(
     (event: FocusEvent) => {
       if (!editing) {
         const cell = closestCell(event.target);
-        if (cell && cell.plane === 'grid') {
-          setCursor({ col: cell.col, row: cell.row });
+        if (cell) {
+          if (cell.plane === 'grid') {
+            setCursor({ col: cell.col, row: cell.row });
+            setExtraplanarFocus(null);
+          } else {
+            setExtraplanarFocus(cell);
+          }
+        } else {
+          setExtraplanarFocus(null);
         }
       }
     },
@@ -60,21 +93,29 @@ export const GridSheet = () => {
   );
 
   // TODO(burdon): Validate formula before closing: hf.validateFormula();
-  const handleClose = useCallback<NonNullable<EditorKeysProps['onClose']> | NonNullable<EditorKeysProps['onNav']>>(
-    (value, { key, shift }) => {
+  const handleClose = useCallback<EditorKeyHandler>(
+    (_value, event) => {
+      if (event) {
+        const { key, shift } = event;
+        const axis = ['Enter', 'ArrowUp', 'ArrowDown'].includes(key)
+          ? 'row'
+          : ['Tab', 'ArrowLeft', 'ArrowRight'].includes(key)
+            ? 'col'
+            : undefined;
+        const delta = key.startsWith('Arrow') ? (['ArrowUp', 'ArrowLeft'].includes(key) ? -1 : 1) : shift ? -1 : 1;
+        dxGrid?.refocus(axis, delta);
+      }
+    },
+    [model, editing, dxGrid],
+  );
+
+  const handleBlur = useCallback<EditorBlurHandler>(
+    (value) => {
       if (value !== undefined) {
         model.setValue(dxGridCellIndexToSheetCellAddress(editing!.index), value);
       }
-      setEditing(null);
-      const axis = ['Enter', 'ArrowUp', 'ArrowDown'].includes(key)
-        ? 'row'
-        : ['Tab', 'ArrowLeft', 'ArrowRight'].includes(key)
-          ? 'col'
-          : undefined;
-      const delta = key.startsWith('Arrow') ? (['ArrowUp', 'ArrowLeft'].includes(key) ? -1 : 1) : shift ? -1 : 1;
-      dxGrid.current?.refocus(axis, delta);
     },
-    [model, editing, setEditing],
+    [model, editing],
   );
 
   const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
@@ -100,7 +141,7 @@ export const GridSheet = () => {
       }
       if (editing) {
         // Update range selection in formula.
-        rangeNotifier.current?.(rangeToA1Notation(range));
+        rangeController.current?.setRange(rangeToA1Notation(range));
       } else {
         // Setting range while editing causes focus to move to null, avoid doing so.
         setRange(range.to ? range : undefined);
@@ -108,7 +149,6 @@ export const GridSheet = () => {
     },
     [editing],
   );
-
   const handleWheel = useCallback(
     (event: WheelEvent) => {
       if (!hasAttention) {
@@ -118,14 +158,51 @@ export const GridSheet = () => {
     [hasAttention],
   );
 
+  const selectEntireAxis = useCallback(
+    (pos: DxGridPosition) => {
+      switch (pos.plane) {
+        case 'frozenRowsStart':
+          return dxGrid?.setSelection({
+            start: { col: pos.col, row: 0, plane: 'grid' },
+            end: { col: pos.col, row: model.sheet.rows.length - 1, plane: 'grid' },
+          });
+        case 'frozenColsStart':
+          return dxGrid?.setSelection({
+            start: { row: pos.row, col: 0, plane: 'grid' },
+            end: { row: pos.row, col: model.sheet.columns.length - 1, plane: 'grid' },
+          });
+      }
+    },
+    [dxGrid, model.sheet],
+  );
+
+  const handleClick = useCallback(
+    (event: MouseEvent) => {
+      const cell = closestCell(event.target);
+      if (cell) {
+        selectEntireAxis(cell);
+      }
+    },
+    [selectEntireAxis],
+  );
+
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
-      const cursorFallbackRange: CellRange | null = range ?? cursor ? { from: cursor!, to: cursor! } : null;
       switch (event.key) {
         case 'Backspace':
         case 'Delete':
           event.preventDefault();
           return cursorFallbackRange && model.clear(cursorFallbackRange);
+        case 'Enter':
+        case 'Space':
+          if (dxGrid && extraplanarFocus) {
+            switch (extraplanarFocus.plane) {
+              case 'frozenRowsStart':
+              case 'frozenColsStart':
+                event.preventDefault();
+                return selectEntireAxis(extraplanarFocus);
+            }
+          }
       }
       if (event.metaKey || event.ctrlKey) {
         switch (event.key) {
@@ -151,7 +228,48 @@ export const GridSheet = () => {
         }
       }
     },
-    [range, model, cursor],
+    [cursorFallbackRange, model, cursor, extraplanarFocus, selectEntireAxis],
+  );
+
+  const contextMenuAnchorRef = useRef<HTMLButtonElement | null>(null);
+  const [contextMenuOpen, setContextMenuOpen] = useState<DxGridPosition | null>(null);
+  const contextMenuAxis = contextMenuOpen?.plane.startsWith('frozenRows') ? 'col' : 'row';
+
+  const handleContextMenu = useCallback((event: MouseEvent) => {
+    const cell = closestCell(event.target);
+    if (cell && cell.plane.startsWith('frozen')) {
+      event.preventDefault();
+      contextMenuAnchorRef.current = event.target as HTMLButtonElement;
+      setContextMenuOpen(cell);
+    }
+  }, []);
+
+  const handleAxisMenuAction = useCallback(
+    (operation: 'insert-before' | 'insert-after' | 'drop') => {
+      switch (operation) {
+        case 'insert-before':
+        case 'insert-after':
+          return dispatch({
+            action: SheetAction.INSERT_AXIS,
+            data: {
+              model,
+              axis: contextMenuAxis,
+              index: contextMenuOpen![contextMenuAxis] + (operation === 'insert-before' ? 0 : 1),
+            } satisfies SheetAction.InsertAxis,
+          });
+          break;
+        case 'drop':
+          return dispatch({
+            action: SheetAction.DROP_AXIS,
+            data: {
+              model,
+              axis: contextMenuAxis,
+              axisIndex: model.sheet[contextMenuAxis === 'row' ? 'rows' : 'columns'][contextMenuOpen![contextMenuAxis]],
+            } satisfies SheetAction.DropAxis,
+          });
+      }
+    },
+    [contextMenuAxis, contextMenuOpen, model, dispatch],
   );
 
   const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
@@ -160,7 +278,15 @@ export const GridSheet = () => {
     () => [
       editorKeys({ onClose: handleClose, ...(editing?.initialContent && { onNav: handleClose }) }),
       sheetExtension({ functions: model.graph.getFunctions() }),
-      rangeExtension((fn) => (rangeNotifier.current = fn)),
+      rangeExtension({
+        onInit: (fn) => (rangeController.current = fn),
+        onStateChange: (state) => {
+          if (dxGrid) {
+            // This can’t dispatch a setState in this component, otherwise the cell editor remounts and loses focus.
+            dxGrid.mode = typeof state.activeRange === 'undefined' ? 'edit' : 'edit-select';
+          }
+        },
+      }),
     ],
     [model, handleClose, editing],
   );
@@ -173,11 +299,12 @@ export const GridSheet = () => {
     [model],
   );
 
-  useUpdateFocusedCellOnThreadSelection(model, dxGrid);
+  useUpdateFocusedCellOnThreadSelection(dxGrid);
+  useSelectThreadOnCellFocus();
 
   return (
     <>
-      <GridCellEditor getCellContent={getCellContent} extension={extension} />
+      <GridCellEditor getCellContent={getCellContent} extension={extension} onBlur={handleBlur} />
       <Grid.Content
         initialCells={initialCells}
         limitColumns={DEFAULT_COLUMNS}
@@ -192,10 +319,43 @@ export const GridSheet = () => {
         onFocus={handleFocus}
         onWheelCapture={handleWheel}
         onKeyDown={handleKeyDown}
-        overscroll='inline'
-        className='[--dx-grid-base:var(--surface-bg)]'
-        ref={dxGrid}
+        onContextMenu={handleContextMenu}
+        onClick={handleClick}
+        overscroll='trap'
+        className='[--dx-grid-base:var(--surface-bg)] [&_.dx-grid]:border-bs [&_.dx-grid]:border-separator'
+        activeRefs={activeRefs}
+        ref={setDxGrid}
       />
+      <DropdownMenu.Root
+        modal={false}
+        open={!!contextMenuOpen}
+        onOpenChange={(nextOpen) => setContextMenuOpen(nextOpen ? inertPosition : null)}
+      >
+        <DropdownMenu.VirtualTrigger virtualRef={contextMenuAnchorRef} />
+        <DropdownMenu.Content side={contextMenuAxis === 'col' ? 'bottom' : 'right'} sideOffset={4} collisionPadding={8}>
+          <DropdownMenu.Viewport>
+            <DropdownMenu.Item onClick={() => handleAxisMenuAction('insert-before')}>
+              <Icon
+                size={5}
+                icon={contextMenuAxis === 'col' ? 'ph--columns-plus-left--regular' : 'ph--rows-plus-top--regular'}
+              />
+              <span>{t(`add ${contextMenuAxis} before label`)}</span>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item onClick={() => handleAxisMenuAction('insert-after')}>
+              <Icon
+                size={5}
+                icon={contextMenuAxis === 'col' ? 'ph--columns-plus-right--regular' : 'ph--rows-plus-bottom--regular'}
+              />
+              <span>{t(`add ${contextMenuAxis} after label`)}</span>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item onClick={() => handleAxisMenuAction('drop')}>
+              <Icon size={5} icon='ph--backspace--regular' />
+              <span>{t(`delete ${contextMenuAxis} label`)}</span>
+            </DropdownMenu.Item>
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
     </>
   );
 };

package/src/components/GridSheet/SheetCellEditor.stories.tsx

@@ -14,9 +14,9 @@ import { CellEditor, type CellEditorProps } from '@dxos/react-ui-grid';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { HyperFormula } from '#hyperformula';
+import { defaultFunctions } from '../../compute-graph';
 import { createSheet } from '../../defs';
 import { sheetExtension } from '../../extensions';
-import { defaultFunctions } from '../../graph';
 import { SheetType } from '../../types';
 
 type StoryProps = CellEditorProps;

package/src/components/GridSheet/util.ts

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type MutableRefObject, useEffect, useLayoutEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import { createDocAccessor } from '@dxos/react-client/echo';
+import { createDocAccessor, fullyQualifiedId } from '@dxos/react-client/echo';
 import { parseValue, cellClassesForFieldType } from '@dxos/react-ui-data';
 import {
   type GridContentProps,
@@ -16,10 +16,12 @@ import {
   type DxGridCellValue,
   colToA1Notation,
   rowToA1Notation,
+  commentedClassName,
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type CellAddress, inRange, cellClassNameForRange } from '../../defs';
+import { type CellAddress, inRange, cellClassNameForRange, rangeFromIndex } from '../../defs';
+import { parseThreadAnchorAsCellRange } from '../../integrations';
 import { type SheetModel } from '../../model';
 
 export const dxGridCellIndexToSheetCellAddress = (index: string): CellAddress => {
@@ -57,16 +59,26 @@ const createDxGridRows = (model: SheetModel): DxGridAxisMeta => {
 const projectCellProps = (model: SheetModel, col: number, row: number): DxGridCellValue => {
   const address = { col, row };
   const rawValue = model.getValue(address);
-  if (rawValue === undefined || rawValue === null) {
-    return { value: '' };
-  }
-  const ranges = model.sheet.ranges?.filter(({ range }) => inRange(range, address));
-  const type = model.getValueType(address);
+  const ranges = model.sheet.ranges?.filter(({ range }) => inRange(rangeFromIndex(model.sheet, range), address));
+  const threadRefs = model.sheet.threads
+    ?.filter((thread) => {
+      const range = thread?.anchor && parseThreadAnchorAsCellRange(thread!.anchor);
+      return thread && range ? inRange(range, address) : false;
+    })
+    .map((thread) => fullyQualifiedId(thread!))
+    .join(' ');
+
+  const description = model.getValueDescription(address);
+  const type = description?.type;
+  const format = description?.format;
   const classNames = ranges?.map(cellClassNameForRange).reverse();
 
-  return { value: parseValue(type, rawValue), className: mx(cellClassesForFieldType(type), classNames) };
+  return {
+    value: parseValue({ type, format, value: rawValue }),
+    className: mx(cellClassesForFieldType({ type, format }), threadRefs && commentedClassName, classNames),
+    dataRefs: threadRefs,
+  };
 };
-
 const gridCellGetter = (model: SheetModel) => {
   // TODO(thure): Actually use the cache.
   const cachedGridCells: DxGridPlaneCells = {};
@@ -84,11 +96,15 @@ const gridCellGetter = (model: SheetModel) => {
 
 export const rowLabelCell = (row: number) => ({
   value: rowToA1Notation(row),
-  className: 'text-end !pie-1',
+  className: 'text-end !pie-1 text-subdued',
   resizeHandle: 'row',
 });
 
-export const colLabelCell = (col: number) => ({ value: colToA1Notation(col), resizeHandle: 'col' });
+export const colLabelCell = (col: number) => ({
+  value: colToA1Notation(col),
+  className: 'text-subdued',
+  resizeHandle: 'col',
+});
 
 const cellGetter = (model: SheetModel) => {
   const getGridCells = gridCellGetter(model);
@@ -115,23 +131,27 @@ const cellGetter = (model: SheetModel) => {
 };
 
 export const useSheetModelDxGridProps = (
-  dxGridRef: MutableRefObject<DxGridElement | null>,
+  dxGrid: DxGridElement | null,
   model: SheetModel,
 ): Pick<GridContentProps, 'columns' | 'rows'> => {
   const [columns, setColumns] = useState<DxGridAxisMeta>(createDxGridColumns(model));
-  const [rows, setRows] = useState<DxGridAxisMeta>(createDxGridColumns(model));
+  const [rows, setRows] = useState<DxGridAxisMeta>(createDxGridRows(model));
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const cellsAccessor = createDocAccessor(model.sheet, ['cells']);
-    if (dxGridRef.current) {
-      dxGridRef.current.getCells = cellGetter(model);
+    if (dxGrid) {
+      dxGrid.getCells = cellGetter(model);
     }
     const handleCellsUpdate = () => {
-      dxGridRef.current?.requestUpdate('initialCells');
+      dxGrid?.requestUpdate('initialCells');
     };
     cellsAccessor.handle.addListener('change', handleCellsUpdate);
-    return () => cellsAccessor.handle.removeListener('change', handleCellsUpdate);
-  }, [model]);
+    const unsubscribe = model.graph.update.on(handleCellsUpdate);
+    return () => {
+      cellsAccessor.handle.removeListener('change', handleCellsUpdate);
+      unsubscribe();
+    };
+  }, [model, dxGrid]);
 
   useEffect(() => {
     const columnMetaAccessor = createDocAccessor(model.sheet, ['columnMeta']);
@@ -148,7 +168,7 @@ export const useSheetModelDxGridProps = (
       columnMetaAccessor.handle.removeListener('change', handleColumnMetaUpdate);
       rowMetaAccessor.handle.removeListener('change', handleRowMetaUpdate);
     };
-  }, [model]);
+  }, [model, dxGrid]);
 
   return { columns, rows };
 };

package/src/components/RangeList/RangeList.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+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';
+
+import { rangeFromIndex, rangeToA1Notation } from '../../defs';
+import { SHEET_PLUGIN } from '../../meta';
+import { Range, type SheetType } from '../../types';
+
+export type RangeListProps = {
+  sheet: SheetType;
+};
+
+export const RangeList = ({ sheet }: RangeListProps) => {
+  const { t } = useTranslation(SHEET_PLUGIN);
+  // TODO(thure): Implement similar to comments, #8121
+  const handleSelectRange = (range: Range) => {};
+  const handleDeleteRange = useCallback(
+    (range: Range) => {
+      const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
+      sheet.ranges.splice(index, 1);
+    },
+    [sheet],
+  );
+  return (
+    <>
+      <h2 className='p-2 text-sm font-semibold'>{t('range list heading')}</h2>
+      <List.Root<Range> items={sheet.ranges} isItem={S.is(Range)}>
+        {({ items: ranges }) =>
+          ranges.map((range, i) => (
+            <List.Item key={i} item={range} classNames={['p-2', ghostHover]}>
+              <List.ItemDragHandle />
+              <List.ItemTitle onClick={() => handleSelectRange(range)}>
+                {t('range title', {
+                  position: rangeToA1Notation(rangeFromIndex(sheet, range.range)),
+                  key: t(`range key ${range.key} label`),
+                  value: t(`range value ${range.value} label`),
+                })}
+              </List.ItemTitle>
+              <List.ItemDeleteButton onClick={() => handleDeleteRange(range)} />
+            </List.Item>
+          ))
+        }
+      </List.Root>
+    </>
+  );
+};

package/src/components/RangeList/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './RangeList';

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

@@ -10,19 +10,20 @@ import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { SheetContainer } from './SheetContainer';
-import { useComputeGraph } from '../../hooks';
 import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
+import translations from '../../translations';
 import { SheetType } from '../../types';
+import { useComputeGraph } from '../ComputeGraph';
 
 export const Basic = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
   const sheet = useTestSheet(space, graph, { cells: createTestCells() });
-  if (!sheet || !graph) {
+  if (!sheet || !space) {
     return null;
   }
 
-  return <SheetContainer graph={graph} sheet={sheet} role='article' />;
+  return <SheetContainer space={space} sheet={sheet} role='article' />;
 };
 
 const meta: Meta = {
@@ -38,6 +39,7 @@ const meta: Meta = {
       classNames: 'grid grid-cols-1 grid-rows-[min-content_minmax(0,1fr)_min-content]',
     }),
   ],
+  parameters: { translations },
 };
 
 export default meta;

package/src/components/SheetContainer/SheetContainer.tsx

@@ -4,24 +4,31 @@
 
 import React from 'react';
 
+import { type Space } from '@dxos/react-client/echo';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { type SheetType } from '../../types';
+import { useComputeGraph } from '../ComputeGraph';
 import { FunctionEditor } from '../FunctionEditor';
 import { GridSheet } from '../GridSheet';
-import { SheetProvider, type SheetProviderProps } from '../SheetContext';
+import { SheetProvider } from '../SheetContext';
 import { Toolbar } from '../Toolbar';
 
-export const SheetContainer = ({ graph, sheet, role }: SheetProviderProps & { role?: string }) => {
-  return (
+export const SheetContainer = ({ space, sheet, role }: { space: Space; sheet: SheetType; role?: string }) => {
+  const graph = useComputeGraph(space);
+
+  return graph ? (
     <SheetProvider sheet={sheet} graph={graph}>
-      <Toolbar.Root role={role}>
-        <Toolbar.Styles />
-        <Toolbar.Alignment />
-        <Toolbar.Separator />
-        <Toolbar.Actions />
-      </Toolbar.Root>
-      <div role='none' className='border-bs border-separator grid cols-1 rows-[1fr_min-content] min-bs-0'>
+      <StackItem.Content toolbar statusbar classNames='border-bs border-separator'>
+        <Toolbar.Root role={role}>
+          <Toolbar.Styles />
+          <Toolbar.Alignment />
+          <Toolbar.Separator />
+          <Toolbar.Actions />
+        </Toolbar.Root>
         <GridSheet />
         <FunctionEditor />
-      </div>
+      </StackItem.Content>
     </SheetProvider>
-  );
+  ) : null;
 };