@dxos/plugin-sheet 0.6.13 → 0.6.14-main.1366248

package/src/components/GridSheet/GridSheet.tsx

@@ -0,0 +1,358 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+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 {
+  closestCell,
+  editorKeys,
+  Grid,
+  GridCellEditor,
+  type DxGridElement,
+  type EditorKeysProps,
+  type GridContentProps,
+  type DxGridPosition,
+} from '@dxos/react-ui-grid';
+
+import { colLabelCell, dxGridCellIndexToSheetCellAddress, rowLabelCell, useSheetModelDxGridProps } from './util';
+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) => {
+    acc[`0,${i}`] = rowLabelCell(i);
+    return acc;
+  }, {}),
+  frozenRowsStart: [...Array(12)].reduce((acc, _, i) => {
+    acc[`${i},0`] = colLabelCell(i);
+    return acc;
+  }, {}),
+};
+
+const frozen = {
+  frozenColsStart: 1,
+  frozenRowsStart: 1,
+};
+
+const sheetRowDefault = { frozenRowsStart: { size: 32, readonly: true }, grid: { size: 32, resizeable: true } };
+const sheetColDefault = { frozenColsStart: { size: 48, readonly: true }, grid: { size: 180, resizeable: true } };
+
+export const GridSheet = () => {
+  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) {
+          if (cell.plane === 'grid') {
+            setCursor({ col: cell.col, row: cell.row });
+            setExtraplanarFocus(null);
+          } else {
+            setExtraplanarFocus(cell);
+          }
+        } else {
+          setExtraplanarFocus(null);
+        }
+      }
+    },
+    [editing],
+  );
+
+  // TODO(burdon): Validate formula before closing: hf.validateFormula();
+  const handleClose = useCallback<NonNullable<EditorKeysProps['onClose']> | NonNullable<EditorKeysProps['onNav']>>(
+    (value, { key, shift }) => {
+      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?.refocus(axis, delta);
+    },
+    [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']>>(
+    ({ axis, size, index: numericIndex }) => {
+      if (axis === 'row') {
+        const rowId = model.sheet.rows[parseInt(numericIndex)];
+        model.sheet.rowMeta[rowId] ??= {};
+        model.sheet.rowMeta[rowId].size = size;
+      } else {
+        const columnId = model.sheet.columns[parseInt(numericIndex)];
+        model.sheet.columnMeta[columnId] ??= {};
+        model.sheet.columnMeta[columnId].size = size;
+      }
+    },
+    [model],
+  );
+
+  const handleSelect = useCallback<NonNullable<GridContentProps['onSelect']>>(
+    ({ minCol, maxCol, minRow, maxRow }) => {
+      const range: CellRange = { from: { col: minCol, row: minRow } };
+      if (minCol !== maxCol || minRow !== maxRow) {
+        range.to = { col: maxCol, row: maxRow };
+      }
+      if (editing) {
+        // Update range selection in formula.
+        rangeController.current?.setRange(rangeToA1Notation(range));
+      } else {
+        // Setting range while editing causes focus to move to null, avoid doing so.
+        setRange(range.to ? range : undefined);
+      }
+    },
+    [editing],
+  );
+  const handleWheel = useCallback(
+    (event: WheelEvent) => {
+      if (!hasAttention) {
+        event.stopPropagation();
+      }
+    },
+    [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) => {
+      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) {
+          case 'x':
+          case 'X':
+            event.preventDefault();
+            return cursorFallbackRange && model.cut(cursorFallbackRange);
+          case 'c':
+          case 'C':
+            event.preventDefault();
+            return cursorFallbackRange && model.copy(cursorFallbackRange);
+          case 'v':
+          case 'V':
+            event.preventDefault();
+            return cursor && model.paste(cursor);
+          case 'z':
+            event.preventDefault();
+            return event.shiftKey ? model.redo() : model.undo();
+          case 'Z':
+          case 'y':
+            event.preventDefault();
+            return model.redo();
+        }
+      }
+    },
+    [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);
+
+  const extension = useMemo(
+    () => [
+      editorKeys({ onClose: handleClose, ...(editing?.initialContent && { onNav: handleClose }) }),
+      sheetExtension({ functions: model.graph.getFunctions() }),
+      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],
+  );
+
+  const getCellContent = useCallback(
+    (index: string) => {
+      const cell = dxGridCellIndexToSheetCellAddress(index);
+      return model.getCellText(cell);
+    },
+    [model],
+  );
+
+  useUpdateFocusedCellOnThreadSelection(dxGrid);
+  useSelectThreadOnCellFocus();
+
+  return (
+    <>
+      <GridCellEditor getCellContent={getCellContent} extension={extension} onBlur={handleBlur} />
+      <Grid.Content
+        initialCells={initialCells}
+        limitColumns={DEFAULT_COLUMNS}
+        limitRows={DEFAULT_ROWS}
+        columns={columns}
+        rows={rows}
+        onAxisResize={handleAxisResize}
+        onSelect={handleSelect}
+        rowDefault={sheetRowDefault}
+        columnDefault={sheetColDefault}
+        frozen={frozen}
+        onFocus={handleFocus}
+        onWheelCapture={handleWheel}
+        onKeyDown={handleKeyDown}
+        onContextMenu={handleContextMenu}
+        onClick={handleClick}
+        overscroll='inline'
+        className='[--dx-grid-base:var(--surface-bg)]'
+        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/{CellEditor/CellEditor.stories.tsx → GridSheet/SheetCellEditor.stories.tsx}

@@ -4,25 +4,20 @@
 
 import '@dxos-theme';
 
-import { HyperFormula } from 'hyperformula';
+import { type Meta } from '@storybook/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Client } from '@dxos/client';
 import { createDocAccessor, type EchoReactiveObject } from '@dxos/client/echo';
 import { automerge } from '@dxos/react-ui-editor';
+import { CellEditor, type CellEditorProps } from '@dxos/react-ui-grid';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { CellEditor, type CellEditorProps } from './CellEditor';
-import { sheetExtension } from './extension';
-import { defaultFunctions } from '../../model';
-import { createSheet, SheetType } from '../../types';
-
-export default {
-  title: 'plugin-sheet/CellEditor',
-  component: CellEditor,
-  render: (args: StoryProps) => <Story {...args} />,
-  decorators: [withTheme],
-};
+import { HyperFormula } from '#hyperformula';
+import { defaultFunctions } from '../../compute-graph';
+import { createSheet } from '../../defs';
+import { sheetExtension } from '../../extensions';
+import { SheetType } from '../../types';
 
 type StoryProps = CellEditorProps;
 
@@ -41,14 +36,13 @@ const AutomergeStory = ({ value, ...props }: StoryProps) => {
   const [object, setObject] = useState<EchoReactiveObject<SheetType>>();
   useEffect(() => {
     setTimeout(async () => {
-      const client = new Client();
+      const client = new Client({ types: [SheetType] });
       await client.initialize();
       await client.halo.createIdentity();
       const space = await client.spaces.create();
-      client.addTypes([SheetType]);
 
       const sheet = createSheet();
-      sheet.title = 'Test';
+      sheet.name = 'Test';
       sheet.cells[cell] = { value };
       space.db.add(sheet);
       setObject(sheet);
@@ -89,3 +83,12 @@ export const Automerge = {
     value: '=SUM(A1:A2, 100, TRUE, "100", SUM(A1:A2, B1:B2))',
   },
 };
+
+const meta: Meta = {
+  title: 'plugins/plugin-sheet/CellEditor',
+  component: CellEditor,
+  render: (args: StoryProps) => <Story {...args} />,
+  decorators: [withTheme],
+};
+
+export default meta;

package/src/components/GridSheet/index.ts

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

package/src/components/GridSheet/util.ts

@@ -0,0 +1,170 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { createDocAccessor, fullyQualifiedId } from '@dxos/react-client/echo';
+import { parseValue, cellClassesForFieldType } from '@dxos/react-ui-data';
+import {
+  type GridContentProps,
+  type DxGridElement,
+  type DxGridAxisMeta,
+  type DxGridPlane,
+  type DxGridPlaneRange,
+  type DxGridPlaneCells,
+  type DxGridCellValue,
+  colToA1Notation,
+  rowToA1Notation,
+  commentedClassName,
+} from '@dxos/react-ui-grid';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type CellAddress, inRange, cellClassNameForRange, rangeFromIndex } from '../../defs';
+import { parseThreadAnchorAsCellRange } from '../../integrations';
+import { type SheetModel } from '../../model';
+
+export const dxGridCellIndexToSheetCellAddress = (index: string): CellAddress => {
+  const [colStr, rowStr] = index.split(',');
+  return {
+    col: parseInt(colStr),
+    row: parseInt(rowStr),
+  };
+};
+
+const createDxGridColumns = (model: SheetModel): DxGridAxisMeta => {
+  return model.sheet.columns.reduce(
+    (acc: DxGridAxisMeta, columnId, numericIndex) => {
+      if (model.sheet.columnMeta[columnId] && model.sheet.columnMeta[columnId].size) {
+        acc.grid[numericIndex] = { size: model.sheet.columnMeta[columnId].size, resizeable: true };
+      }
+      return acc;
+    },
+    { grid: {} },
+  );
+};
+
+const createDxGridRows = (model: SheetModel): DxGridAxisMeta => {
+  return model.sheet.rows.reduce(
+    (acc: DxGridAxisMeta, rowId, numericIndex) => {
+      if (model.sheet.rowMeta[rowId] && model.sheet.rowMeta[rowId].size) {
+        acc.grid[numericIndex] = { size: model.sheet.rowMeta[rowId].size, resizeable: true };
+      }
+      return acc;
+    },
+    { grid: {} },
+  );
+};
+
+const projectCellProps = (model: SheetModel, col: number, row: number): DxGridCellValue => {
+  const address = { col, row };
+  const rawValue = model.getValue(address);
+  const ranges = model.sheet.ranges?.filter(({ range }) => inRange(rangeFromIndex(model.sheet, range), address));
+  const threadRefs = model.sheet.threads
+    ?.filter((thread) => {
+      const range = thread?.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, 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 = {};
+  return (nextBounds: DxGridPlaneRange): DxGridPlaneCells => {
+    [...Array(nextBounds.end.col - nextBounds.start.col)].forEach((_, c0) => {
+      return [...Array(nextBounds.end.row - nextBounds.start.row)].forEach((_, r0) => {
+        const col = nextBounds.start.col + c0;
+        const row = nextBounds.start.row + r0;
+        cachedGridCells[`${col},${row}`] = projectCellProps(model, col, row);
+      });
+    });
+    return cachedGridCells;
+  };
+};
+
+export const rowLabelCell = (row: number) => ({
+  value: rowToA1Notation(row),
+  className: 'text-end !pie-1',
+  resizeHandle: 'row',
+});
+
+export const colLabelCell = (col: number) => ({ value: colToA1Notation(col), resizeHandle: 'col' });
+
+const cellGetter = (model: SheetModel) => {
+  const getGridCells = gridCellGetter(model);
+  return (nextBounds: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells => {
+    switch (plane) {
+      case 'grid':
+        return getGridCells(nextBounds);
+      case 'frozenColsStart':
+        return [...Array(nextBounds.end.row - nextBounds.start.row)].reduce((acc, _, r0) => {
+          const r = nextBounds.start.row + r0;
+          acc[`0,${r}`] = rowLabelCell(r);
+          return acc;
+        }, {});
+      case 'frozenRowsStart':
+        return [...Array(nextBounds.end.col - nextBounds.start.col)].reduce((acc, _, c0) => {
+          const c = nextBounds.start.col + c0;
+          acc[`${c},0`] = colLabelCell(c);
+          return acc;
+        }, {});
+      default:
+        return {};
+    }
+  };
+};
+
+export const useSheetModelDxGridProps = (
+  dxGrid: DxGridElement | null,
+  model: SheetModel,
+): Pick<GridContentProps, 'columns' | 'rows'> => {
+  const [columns, setColumns] = useState<DxGridAxisMeta>(createDxGridColumns(model));
+  const [rows, setRows] = useState<DxGridAxisMeta>(createDxGridColumns(model));
+
+  useEffect(() => {
+    const cellsAccessor = createDocAccessor(model.sheet, ['cells']);
+    if (dxGrid) {
+      dxGrid.getCells = cellGetter(model);
+    }
+    const handleCellsUpdate = () => {
+      dxGrid?.requestUpdate('initialCells');
+    };
+    cellsAccessor.handle.addListener('change', handleCellsUpdate);
+    const unsubscribe = model.graph.update.on(handleCellsUpdate);
+    return () => {
+      cellsAccessor.handle.removeListener('change', handleCellsUpdate);
+      unsubscribe();
+    };
+  }, [model, dxGrid]);
+
+  useEffect(() => {
+    const columnMetaAccessor = createDocAccessor(model.sheet, ['columnMeta']);
+    const rowMetaAccessor = createDocAccessor(model.sheet, ['rowMeta']);
+    const handleColumnMetaUpdate = () => {
+      setColumns(createDxGridColumns(model));
+    };
+    const handleRowMetaUpdate = () => {
+      setRows(createDxGridRows(model));
+    };
+    columnMetaAccessor.handle.addListener('change', handleColumnMetaUpdate);
+    rowMetaAccessor.handle.addListener('change', handleRowMetaUpdate);
+    return () => {
+      columnMetaAccessor.handle.removeListener('change', handleColumnMetaUpdate);
+      rowMetaAccessor.handle.removeListener('change', handleRowMetaUpdate);
+    };
+  }, [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';