@dxos/plugin-sheet 0.6.14-main.7bd9c89 → 0.6.14-main.8b352a0

package/src/SheetPlugin.tsx

@@ -13,12 +13,12 @@ import { SpaceAction } from '@dxos/plugin-space';
 import { getSpace, isEchoObject } from '@dxos/react-client/echo';
 import { Icon } from '@dxos/react-ui';
 
-import { ComputeGraphContextProvider, SheetContainer } from './components';
+import { ComputeGraphContextProvider, RangeList, SheetContainer } from './components';
+import { type ComputeGraphRegistry } from './compute-graph';
 import { compareIndexPositions, createSheet } from './defs';
 import { computeGraphFacet } from './extensions';
-import { type ComputeGraphRegistry } from './graph';
-import { useComputeGraph } from './hooks';
 import meta, { SHEET_PLUGIN } from './meta';
+import { serializer } from './serializer';
 import translations from './translations';
 import { SheetAction, SheetType, type SheetPluginProvides } from './types';
 
@@ -38,8 +38,8 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
       }
 
       // Async import removes direct dependency on hyperformula.
-      const { ComputeGraphRegistry } = await import('./graph');
-      computeGraphRegistry = new ComputeGraphRegistry({ remoteFunctionUrl });
+      const { defaultPlugins, ComputeGraphRegistry } = await import('./compute-graph');
+      computeGraphRegistry = new ComputeGraphRegistry({ plugins: defaultPlugins, remoteFunctionUrl });
     },
     provides: {
       context: ({ children }) => {
@@ -52,6 +52,7 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
             label: (object: any) => (object instanceof SheetType ? object.name : undefined),
             placeholder: ['sheet title placeholder', { ns: SHEET_PLUGIN }],
             icon: 'ph--grid-nine--regular',
+            serializer,
           },
         },
       },
@@ -143,14 +144,26 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
       surface: {
         component: ({ data, role }) => {
           const space = isEchoObject(data.object) ? getSpace(data.object) : undefined;
-          const graph = useComputeGraph(space);
-          if (graph && data.object instanceof SheetType) {
-            switch (role) {
-              case 'article':
-              case 'section': {
-                return <SheetContainer graph={graph} sheet={data.object} role={role} />;
+          if (!space) {
+            return null;
+          }
+
+          switch (role) {
+            case 'article':
+            case 'section':
+              if (data.object instanceof SheetType) {
+                return <SheetContainer space={space} sheet={data.object} role={role} />;
               }
-            }
+
+              return null;
+            case 'complementary--settings':
+              if (data.subject instanceof SheetType) {
+                return {
+                  node: <RangeList sheet={data.subject} />,
+                };
+              }
+
+              return null;
           }
 
           return null;

package/src/components/ComputeGraph/ComputeGraphContextProvider.tsx

@@ -2,9 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { createContext, type PropsWithChildren } from 'react';
+import React, { createContext, type PropsWithChildren, useContext } from 'react';
 
-import { type ComputeGraphRegistry } from '../../graph';
+import { raise } from '@dxos/debug';
+import { type Space } from '@dxos/react-client/echo';
+import { useAsyncState } from '@dxos/react-hooks';
+
+import { type ComputeGraph, type ComputeGraphRegistry } from '../../compute-graph';
 
 export type ComputeGraphContextType = {
   registry: ComputeGraphRegistry;
@@ -18,3 +22,16 @@ export const ComputeGraphContext = createContext<ComputeGraphContextType | undef
 export const ComputeGraphContextProvider = ({ registry, children }: PropsWithChildren<ComputeGraphContextType>) => {
   return <ComputeGraphContext.Provider value={{ registry }}>{children}</ComputeGraphContext.Provider>;
 };
+
+export const useComputeGraph = (space?: Space): ComputeGraph | undefined => {
+  const { registry } = useContext(ComputeGraphContext) ?? raise(new Error('Missing ComputeGraphContext'));
+  const [graph] = useAsyncState(async () => {
+    if (space) {
+      const graph = registry.getOrCreateGraph(space);
+      await graph.open();
+      return graph;
+    }
+  }, [space, registry]);
+
+  return graph;
+};

package/src/components/FunctionEditor/FunctionEditor.tsx

@@ -7,19 +7,19 @@ import React from 'react';
 import { Icon } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { addressToA1Notation, rangeToA1Notation } from '../../defs';
+import { addressToA1Notation, isFormula, rangeToA1Notation } from '../../defs';
 import { useSheetContext } from '../SheetContext';
 
 export const FunctionEditor = () => {
   const { model, cursor, range } = useSheetContext();
 
   let value;
-  let isFormula = false;
+  let formula = false;
   if (cursor) {
     value = model.getCellValue(cursor);
-    if (typeof value === 'string' && value.charAt(0) === '=') {
+    if (isFormula(value)) {
       value = model.graph.mapFunctionBindingFromId(model.mapFormulaIndicesToRefs(value));
-      isFormula = true;
+      formula = true;
     } else if (value != null) {
       value = String(value);
     }
@@ -36,7 +36,7 @@ export const FunctionEditor = () => {
           {(range && rangeToA1Notation(range)) || (cursor && addressToA1Notation(cursor))}
         </div>
         <div className='flex gap-2 items-center'>
-          <Icon icon='ph--function--regular' classNames={['text-greenText', isFormula ? 'visible' : 'invisible']} />
+          <Icon icon='ph--function--regular' classNames={['text-greenText', formula ? 'visible' : 'invisible']} />
           <span className='font-mono'>{value}</span>
         </div>
       </div>

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

@@ -10,9 +10,10 @@ import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { GridSheet } from './GridSheet';
-import { useComputeGraph } from '../../hooks';
 import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
+import translations from '../../translations';
 import { SheetType } from '../../types';
+import { useComputeGraph } from '../ComputeGraph';
 import { SheetProvider } from '../SheetContext';
 
 export const Basic = () => {
@@ -39,6 +40,7 @@ const meta: Meta = {
     withTheme,
     withLayout({ fullscreen: true, tooltips: true }),
   ],
+  parameters: { translations },
 };
 
 export default meta;

package/src/components/GridSheet/GridSheet.tsx

@@ -2,25 +2,39 @@
 // 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 { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
-  type DxGridElement,
-  Grid,
-  type GridContentProps,
+  closestCell,
   editorKeys,
-  type EditorKeysProps,
+  Grid,
   GridCellEditor,
-  closestCell,
+  type DxGridElement,
+  type EditorKeysProps,
+  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 { useSheetContext } from '../SheetContext';
 
+const inertPosition: DxGridPosition = { plane: 'grid', col: 0, row: 0 };
+
 const initialCells = {
   grid: {},
   frozenColsStart: [...Array(64)].reduce((acc, _, i) => {
@@ -42,9 +56,12 @@ const sheetRowDefault = { frozenRowsStart: { size: 32, readonly: true }, grid: {
 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, setEditing, 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 rangeController = useRef<RangeController>();
   const { hasAttention } = useAttention(id);
 
   const handleFocus = useCallback(
@@ -72,9 +89,19 @@ export const GridSheet = () => {
           ? 'col'
           : undefined;
       const delta = key.startsWith('Arrow') ? (['ArrowUp', 'ArrowLeft'].includes(key) ? -1 : 1) : shift ? -1 : 1;
-      dxGrid.current?.refocus(axis, delta);
+      dxGrid?.refocus(axis, delta);
     },
-    [model, editing, setEditing],
+    [model, editing, dxGrid],
+  );
+
+  const handleBlur = useCallback(
+    (value?: string) => {
+      if (value !== undefined) {
+        model.setValue(dxGridCellIndexToSheetCellAddress(editing!.index), value);
+      }
+      setEditing(null);
+    },
+    [model, editing],
   );
 
   const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
@@ -100,7 +127,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 +135,6 @@ export const GridSheet = () => {
     },
     [editing],
   );
-
   const handleWheel = useCallback(
     (event: WheelEvent) => {
       if (!hasAttention) {
@@ -120,7 +146,6 @@ export const GridSheet = () => {
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
-      const cursorFallbackRange: CellRange | null = range ?? cursor ? { from: cursor!, to: cursor! } : null;
       switch (event.key) {
         case 'Backspace':
         case 'Delete':
@@ -151,7 +176,37 @@ export const GridSheet = () => {
         }
       }
     },
-    [range, model, cursor],
+    [cursorFallbackRange, model, cursor],
+  );
+
+  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: 'add-before' | 'add-after' | 'remove') => {
+      switch (operation) {
+        case 'add-before':
+        case 'add-after':
+          model[contextMenuAxis === 'col' ? 'insertColumns' : 'insertRows'](
+            contextMenuOpen![contextMenuAxis] + (operation === 'add-before' ? 0 : 1),
+            1,
+          );
+          break;
+        case 'remove':
+        // console.warn('[model does not implement]');
+      }
+    },
+    [contextMenuAxis, contextMenuOpen, model],
   );
 
   const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
@@ -160,7 +215,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 +236,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 +256,42 @@ export const GridSheet = () => {
         onFocus={handleFocus}
         onWheelCapture={handleWheel}
         onKeyDown={handleKeyDown}
+        onContextMenu={handleContextMenu}
         overscroll='inline'
         className='[--dx-grid-base:var(--surface-bg)]'
-        ref={dxGrid}
+        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('add-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('add-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 disabled onClick={() => handleAxisMenuAction('remove')}>
+              <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,14 +59,22 @@ 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 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 type = model.getValueType(address);
   const classNames = ranges?.map(cellClassNameForRange).reverse();
 
-  return { value: parseValue(type, rawValue), className: mx(cellClassesForFieldType(type), classNames) };
+  return {
+    value: parseValue(type, rawValue),
+    className: mx(cellClassesForFieldType(type), threadRefs && commentedClassName, classNames),
+    dataRefs: threadRefs,
+  };
 };
 
 const gridCellGetter = (model: SheetModel) => {
@@ -115,23 +125,23 @@ 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));
 
-  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]);
+  }, [model, dxGrid]);
 
   useEffect(() => {
     const columnMetaAccessor = createDocAccessor(model.sheet, ['columnMeta']);

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,19 @@ 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 { 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 = {

package/src/components/SheetContainer/SheetContainer.tsx

@@ -4,13 +4,19 @@
 
 import React from 'react';
 
+import { type Space } from '@dxos/react-client/echo';
+
+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 />
@@ -23,5 +29,5 @@ export const SheetContainer = ({ graph, sheet, role }: SheetProviderProps & { ro
         <FunctionEditor />
       </div>
     </SheetProvider>
-  );
+  ) : null;
 };