@dxos/plugin-sheet 0.6.14-main.7bd9c89 → 0.6.14-staging.54a8bab

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.6.14-main.7bd9c89",
+  "version": "0.6.14-staging.54a8bab",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "sideEffects": true,
   "imports": {
     "#hyperformula": {
       "types": "hyperformula",
@@ -14,28 +15,19 @@
   },
   "exports": {
     ".": {
+      "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
-      "node": {
-        "require": "./dist/lib/node/index.cjs",
-        "default": "./dist/lib/node-esm/index.mjs"
-      },
-      "types": "./dist/types/src/index.d.ts"
+      "node": "./dist/lib/node-esm/index.mjs"
     },
     "./meta": {
+      "types": "./dist/types/src/meta.d.ts",
       "browser": "./dist/lib/browser/meta.mjs",
-      "node": {
-        "require": "./dist/lib/node/meta.cjs",
-        "default": "./dist/lib/node-esm/meta.mjs"
-      },
-      "types": "./dist/types/src/meta.d.ts"
+      "node": "./dist/lib/node-esm/meta.mjs"
     },
     "./types": {
+      "types": "./dist/types/src/types.d.ts",
       "browser": "./dist/lib/browser/types.mjs",
-      "node": {
-        "require": "./dist/lib/node/types.cjs",
-        "default": "./dist/lib/node-esm/types.mjs"
-      },
-      "types": "./dist/types/src/types.d.ts"
+      "node": "./dist/lib/node-esm/types.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -77,31 +69,32 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^8.0.5",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.6.14-main.7bd9c89",
-    "@dxos/async": "0.6.14-main.7bd9c89",
-    "@dxos/client": "0.6.14-main.7bd9c89",
-    "@dxos/context": "0.6.14-main.7bd9c89",
-    "@dxos/debug": "0.6.14-main.7bd9c89",
-    "@dxos/crypto": "0.6.14-main.7bd9c89",
-    "@dxos/echo-schema": "0.6.14-main.7bd9c89",
-    "@dxos/invariant": "0.6.14-main.7bd9c89",
-    "@dxos/keys": "0.6.14-main.7bd9c89",
-    "@dxos/plugin-attention": "0.6.14-main.7bd9c89",
-    "@dxos/log": "0.6.14-main.7bd9c89",
-    "@dxos/plugin-client": "0.6.14-main.7bd9c89",
-    "@dxos/plugin-graph": "0.6.14-main.7bd9c89",
-    "@dxos/plugin-markdown": "0.6.14-main.7bd9c89",
-    "@dxos/plugin-script": "0.6.14-main.7bd9c89",
-    "@dxos/plugin-stack": "0.6.14-main.7bd9c89",
-    "@dxos/react-client": "0.6.14-main.7bd9c89",
-    "@dxos/react-hooks": "0.6.14-main.7bd9c89",
-    "@dxos/react-ui-attention": "0.6.14-main.7bd9c89",
-    "@dxos/plugin-space": "0.6.14-main.7bd9c89",
-    "@dxos/react-ui-editor": "0.6.14-main.7bd9c89",
-    "@dxos/react-ui-data": "0.6.14-main.7bd9c89",
-    "@dxos/react-ui-grid": "0.6.14-main.7bd9c89",
-    "@dxos/schema": "0.6.14-main.7bd9c89",
-    "@dxos/util": "0.6.14-main.7bd9c89"
+    "@dxos/app-framework": "0.6.14-staging.54a8bab",
+    "@dxos/async": "0.6.14-staging.54a8bab",
+    "@dxos/client": "0.6.14-staging.54a8bab",
+    "@dxos/crypto": "0.6.14-staging.54a8bab",
+    "@dxos/debug": "0.6.14-staging.54a8bab",
+    "@dxos/context": "0.6.14-staging.54a8bab",
+    "@dxos/echo-schema": "0.6.14-staging.54a8bab",
+    "@dxos/invariant": "0.6.14-staging.54a8bab",
+    "@dxos/keys": "0.6.14-staging.54a8bab",
+    "@dxos/plugin-attention": "0.6.14-staging.54a8bab",
+    "@dxos/plugin-client": "0.6.14-staging.54a8bab",
+    "@dxos/log": "0.6.14-staging.54a8bab",
+    "@dxos/plugin-graph": "0.6.14-staging.54a8bab",
+    "@dxos/plugin-markdown": "0.6.14-staging.54a8bab",
+    "@dxos/plugin-script": "0.6.14-staging.54a8bab",
+    "@dxos/plugin-space": "0.6.14-staging.54a8bab",
+    "@dxos/plugin-stack": "0.6.14-staging.54a8bab",
+    "@dxos/react-client": "0.6.14-staging.54a8bab",
+    "@dxos/react-hooks": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-data": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-editor": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-attention": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-grid": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-list": "0.6.14-staging.54a8bab",
+    "@dxos/util": "0.6.14-staging.54a8bab",
+    "@dxos/schema": "0.6.14-staging.54a8bab"
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.1",
@@ -113,19 +106,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-generator": "0.6.14-main.7bd9c89",
-    "@dxos/react-ui": "0.6.14-main.7bd9c89",
-    "@dxos/random": "0.6.14-main.7bd9c89",
-    "@dxos/react-ui-theme": "0.6.14-main.7bd9c89",
-    "@dxos/react-ui-syntax-highlighter": "0.6.14-main.7bd9c89",
-    "@dxos/react-ui-types": "0.6.14-main.7bd9c89",
-    "@dxos/storybook-utils": "0.6.14-main.7bd9c89"
+    "@dxos/echo-generator": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui": "0.6.14-staging.54a8bab",
+    "@dxos/random": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-syntax-highlighter": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-theme": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-types": "0.6.14-staging.54a8bab",
+    "@dxos/storybook-utils": "0.6.14-staging.54a8bab"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.6.14-main.7bd9c89",
-    "@dxos/react-ui-theme": "0.6.14-main.7bd9c89"
+    "@dxos/react-ui": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-theme": "0.6.14-staging.54a8bab"
   },
   "publishConfig": {
     "access": "public"

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;
@@ -162,6 +175,26 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
             case SheetAction.CREATE: {
               return { data: createSheet() };
             }
+            case SheetAction.INSERT_AXIS: {
+              const { model, axis, index, count } = intent.data as SheetAction.InsertAxis;
+              const _indices = model[axis === 'col' ? 'insertColumns' : 'insertRows'](index, count);
+              return;
+            }
+            case SheetAction.DROP_AXIS: {
+              if (!intent.undo) {
+                const { model, axis, axisIndex } = intent.data as SheetAction.DropAxis;
+                const undoData = model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
+                return {
+                  undoable: {
+                    message: translations[0]['en-US'][SHEET_PLUGIN][`${axis} dropped label`],
+                    data: { ...undoData, model },
+                  },
+                };
+              } else {
+                const { model, ...undoData } = intent.data as SheetAction.DropAxisRestore;
+                model[undoData.axis === 'col' ? 'restoreColumn' : 'restoreRow'](undoData);
+              }
+            }
           }
         },
       },

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,41 @@
 // 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,
   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 { 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) => {
@@ -42,17 +58,29 @@ 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 [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);
         }
       }
     },
@@ -72,9 +100,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 +138,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 +146,6 @@ export const GridSheet = () => {
     },
     [editing],
   );
-
   const handleWheel = useCallback(
     (event: WheelEvent) => {
       if (!hasAttention) {
@@ -118,14 +155,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 +225,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 +275,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 +296,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 +316,43 @@ export const GridSheet = () => {
         onFocus={handleFocus}
         onWheelCapture={handleWheel}
         onKeyDown={handleKeyDown}
+        onContextMenu={handleContextMenu}
+        onClick={handleClick}
         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('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;