@dxos/plugin-sheet 0.6.12-main.5cc132e → 0.6.12-main.78ddbdf

package/src/components/GridSheet/GridSheet.tsx

@@ -0,0 +1,153 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useMemo, useRef } from 'react';
+
+import { type Space } from '@dxos/client/echo';
+import {
+  type DxGridElement,
+  Grid,
+  type GridContentProps,
+  type GridScopedProps,
+  useGridContext,
+} from '@dxos/react-ui-grid';
+
+import { dxGridCellIndexToSheetCellAddress, useSheetModelDxGridProps } from './util';
+import { rangeToA1Notation, type CellRange } from '../../defs';
+import { useFormattingModel, useSheetModel, type UseSheetModelOptions } from '../../hooks';
+import { type SheetModel, type FormattingModel } from '../../model';
+import { type SheetType } from '../../types';
+import {
+  CellEditor,
+  type CellEditorProps,
+  type CellRangeNotifier,
+  editorKeys,
+  type EditorKeysProps,
+  rangeExtension,
+  sheetExtension,
+} from '../CellEditor';
+
+const GridSheetCellEditor = ({
+  model,
+  extension,
+  __gridScope,
+}: GridScopedProps<Pick<CellEditorProps, 'extension'> & { model: SheetModel }>) => {
+  const { id, editing, setEditing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);
+  const cell = dxGridCellIndexToSheetCellAddress(editing);
+
+  return editing ? (
+    <CellEditor
+      variant='grid'
+      value={editing.initialContent ?? (cell ? model.getCellText(cell) : undefined)}
+      autoFocus
+      box={editBox}
+      onBlur={() => setEditing(null)}
+      extension={extension}
+      gridId={id}
+    />
+  ) : null;
+};
+
+const sheetRowDefault = { size: 32, resizeable: true };
+const sheetColDefault = { size: 180, resizeable: true };
+
+const GridSheetImpl = ({
+  model,
+  formatting,
+  __gridScope,
+}: GridScopedProps<{ model: SheetModel; formatting: FormattingModel }>) => {
+  const { editing, setEditing } = useGridContext('GridSheetCellEditor', __gridScope);
+  const dxGrid = useRef<DxGridElement | null>(null);
+  const rangeNotifier = useRef<CellRangeNotifier>();
+
+  // 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)!, 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],
+  );
+
+  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 }) => {
+      if (editing) {
+        const range: CellRange = { from: { col: minCol, row: minRow } };
+        if (minCol !== maxCol || minRow !== maxRow) {
+          range.to = { col: maxCol, row: maxRow };
+        }
+        // Update range selection in formula.
+        rangeNotifier.current?.(rangeToA1Notation(range));
+      }
+    },
+    [editing],
+  );
+
+  const { columns, rows } = useSheetModelDxGridProps(dxGrid, model, formatting);
+
+  const extension = useMemo(
+    () => [
+      editorKeys({ onClose: handleClose, ...(editing?.initialContent && { onNav: handleClose }) }),
+      sheetExtension({ functions: model.graph.getFunctions() }),
+      rangeExtension((fn) => (rangeNotifier.current = fn)),
+    ],
+    [model, handleClose, editing],
+  );
+
+  return (
+    <>
+      <GridSheetCellEditor model={model} extension={extension} />
+      <Grid.Content
+        initialCells={{}}
+        columns={columns}
+        rows={rows}
+        onAxisResize={handleAxisResize}
+        onSelect={handleSelect}
+        rowDefault={sheetRowDefault}
+        columnDefault={sheetColDefault}
+        ref={dxGrid}
+      />
+    </>
+  );
+};
+
+export type GridSheetProps = { space?: Space; sheet?: SheetType } & UseSheetModelOptions;
+
+export const GridSheet = ({ space, sheet, ...options }: GridSheetProps) => {
+  const model = useSheetModel(space, sheet, options);
+  const formatting = useFormattingModel(model);
+  if (!model || !formatting) {
+    return null;
+  }
+
+  return (
+    <Grid.Root id={model.id}>
+      <GridSheetImpl model={model} formatting={formatting} />
+    </Grid.Root>
+  );
+};

package/src/components/GridSheet/util.ts

@@ -0,0 +1,108 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type MutableRefObject, useEffect, useLayoutEffect, useState } from 'react';
+
+import { createDocAccessor } from '@dxos/react-client/echo';
+import {
+  type GridEditing,
+  type GridContentProps,
+  type DxGridElement,
+  type DxGridCells,
+  type DxGridAxisMeta,
+  type DxGridRange,
+} from '@dxos/react-ui-grid';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type CellAddress } from '../../defs';
+import { type SheetModel, type FormattingModel } from '../../model';
+
+export const dxGridCellIndexToSheetCellAddress = (gridEditing: GridEditing): CellAddress | null => {
+  if (!gridEditing) {
+    return null;
+  }
+  const [colStr, rowStr] = gridEditing.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[numericIndex] = { size: model.sheet.columnMeta[columnId].size, resizeable: true };
+    }
+    return acc;
+  }, {});
+};
+
+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[numericIndex] = { size: model.sheet.rowMeta[rowId].size, resizeable: true };
+    }
+    return acc;
+  }, {});
+};
+
+const cellGetter = (model: SheetModel, formatting: FormattingModel) => {
+  // TODO(thure): Actually use the cache.
+  let _cachedBounds: DxGridRange | null = null;
+  const cachedCells: DxGridCells = {};
+  return (nextBounds: DxGridRange): DxGridCells => {
+    [...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;
+        const cell = formatting.getFormatting({ col, row });
+        if (cell.value) {
+          cachedCells[`${col},${row}`] = { value: cell.value, className: mx(cell.classNames) };
+        }
+      });
+    });
+    _cachedBounds = nextBounds;
+    return cachedCells;
+  };
+};
+
+export const useSheetModelDxGridProps = (
+  dxGridRef: MutableRefObject<DxGridElement | null>,
+  model: SheetModel,
+  formatting: FormattingModel,
+): Pick<GridContentProps, 'columns' | 'rows'> => {
+  const [columns, setColumns] = useState<DxGridAxisMeta>(createDxGridColumns(model));
+  const [rows, setRows] = useState<DxGridAxisMeta>(createDxGridColumns(model));
+
+  useLayoutEffect(() => {
+    const cellsAccessor = createDocAccessor(model.sheet, ['cells']);
+    if (dxGridRef.current) {
+      dxGridRef.current.getCells = cellGetter(model, formatting);
+    }
+    const handleCellsUpdate = () => {
+      dxGridRef.current?.requestUpdate('initialCells');
+    };
+    cellsAccessor.handle.addListener('change', handleCellsUpdate);
+    return () => cellsAccessor.handle.removeListener('change', handleCellsUpdate);
+  }, [model, formatting]);
+
+  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]);
+
+  return { columns, rows };
+};

package/src/components/Sheet/Sheet.stories.tsx

@@ -4,32 +4,33 @@
 
 import '@dxos-theme';
 
-import { type Decorator } from '@storybook/react';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
-import { Client } from '@dxos/client';
-import { type EchoReactiveObject } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
-import { getSpace, type Space } from '@dxos/react-client/echo';
+import { type Space, useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
 import { Button } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Sheet } from './Sheet';
 import { type SizeMap } from './grid';
 import { useSheetContext } from './sheet-context';
-import { addressToIndex, rangeToIndex } from '../../model';
-import { createTestSheet, testSheetName } from '../../testing';
-import { ValueTypeEnum, SheetType } from '../../types';
-import { type ComputeGraph, createComputeGraph } from '../ComputeGraph';
-// TODO(wittjosiah): Refactor. This is not exported from ./components due to depending on ECHO.
-import { ComputeGraphContext, ComputeGraphContextProvider, useComputeGraph } from '../ComputeGraph/graph-context';
+import { addressToIndex, rangeToIndex } from '../../defs';
+import { useComputeGraph } from '../../hooks';
+import { useTestSheet, withGraphDecorator } from '../../testing';
+import { SheetType, ValueTypeEnum } from '../../types';
 import { Toolbar, type ToolbarActionHandler } from '../Toolbar';
 
 // TODO(burdon): Allow toolbar to access sheet context; provide state for current cursor/range.
 const SheetWithToolbar = ({ debug, space }: { debug?: boolean; space: Space }) => {
   const { model, cursor, range } = useSheetContext();
 
+  const graph = useComputeGraph(space);
+  const handleRefresh = () => {
+    graph?.refresh();
+  };
+
   // TODO(burdon): Factor out.
   const handleAction: ToolbarActionHandler = ({ type }) => {
     log.info('action', { type, cursor, range });
@@ -82,11 +83,6 @@ const SheetWithToolbar = ({ debug, space }: { debug?: boolean; space: Space }) =
     }
   };
 
-  const graph = useComputeGraph(space);
-  const handleRefresh = () => {
-    graph.refresh();
-  };
-
   return (
     <div className='flex flex-col overflow-hidden'>
       <Toolbar.Root onAction={handleAction}>
@@ -103,56 +99,43 @@ const SheetWithToolbar = ({ debug, space }: { debug?: boolean; space: Space }) =
   );
 };
 
-const withGraphDecorator: Decorator = (Story) => {
-  const [graphs, setGraphs] = useState<Record<string, ComputeGraph>>({});
-
-  const setGraph = (key: string, graph: ComputeGraph) => {
-    if (!graph.hf.doesSheetExist(testSheetName)) {
-      const sheetName = graph.hf.addSheet(testSheetName);
-      const sheet = graph.hf.getSheetId(sheetName)!;
-      graph.hf.setCellContents({ sheet, col: 0, row: 0 }, Math.random());
-    }
-
-    setGraphs((graphs) => ({ ...graphs, [key]: graph }));
-  };
-
-  return (
-    <ComputeGraphContextProvider graphs={graphs} setGraph={setGraph}>
-      <Story />
-    </ComputeGraphContextProvider>
-  );
-};
-
 export default {
   title: 'plugin-sheet/Sheet',
   component: Sheet,
-  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true, classNames: 'inset-4' }), withGraphDecorator],
+  decorators: [
+    withClientProvider({ types: [SheetType], createIdentity: true }),
+    withGraphDecorator,
+    withTheme,
+    withLayout({ fullscreen: true, tooltips: true, classNames: 'inset-4' }),
+  ],
 };
 
 export const Default = () => {
   const [debug, setDebug] = useState(false);
-  const sheet = useTestSheet();
-  const space = getSpace(sheet);
-  if (!sheet || !space) {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph);
+  if (!space || !sheet) {
     return null;
   }
 
   return (
-    <Sheet.Root sheet={sheet} space={space} onInfo={() => setDebug((debug) => !debug)}>
+    <Sheet.Root space={space} sheet={sheet} onInfo={() => setDebug((debug) => !debug)}>
       <SheetWithToolbar debug={debug} space={space} />
     </Sheet.Root>
   );
 };
 
 export const Debug = () => {
-  const sheet = useTestSheet();
-  const space = getSpace(sheet);
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph);
   if (!sheet || !space) {
     return null;
   }
 
   return (
-    <Sheet.Root sheet={sheet} space={space}>
+    <Sheet.Root space={space} sheet={sheet}>
       <Sheet.Main />
       <Sheet.Debug />
     </Sheet.Root>
@@ -161,14 +144,15 @@ export const Debug = () => {
 
 export const Rows = () => {
   const [rowSizes, setRowSizes] = useState<SizeMap>({});
-  const sheet = useTestSheet();
-  const space = getSpace(sheet);
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph);
   if (!sheet || !space) {
     return null;
   }
 
   return (
-    <Sheet.Root sheet={sheet} space={space}>
+    <Sheet.Root space={space} sheet={sheet}>
       <Sheet.Rows
         rows={sheet.rows}
         sizes={rowSizes}
@@ -180,14 +164,15 @@ export const Rows = () => {
 
 export const Columns = () => {
   const [columnSizes, setColumnSizes] = useState<SizeMap>({});
-  const sheet = useTestSheet();
-  const space = getSpace(sheet);
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph);
   if (!sheet || !space) {
     return null;
   }
 
   return (
-    <Sheet.Root sheet={sheet} space={space}>
+    <Sheet.Root space={space} sheet={sheet}>
       <Sheet.Columns
         columns={sheet.columns}
         sizes={columnSizes}
@@ -198,18 +183,19 @@ export const Columns = () => {
 };
 
 export const Main = () => {
-  const sheet = useTestSheet();
-  const space = getSpace(sheet);
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph);
   if (!sheet || !space) {
     return null;
   }
 
   return (
-    <Sheet.Root sheet={sheet} space={space}>
+    <Sheet.Root space={space} sheet={sheet}>
       <Sheet.Grid
         size={{
           numRows: 50,
-          numColumns: 26,
+          numCols: 26,
         }}
         rows={sheet.rows}
         columns={sheet.columns}
@@ -262,30 +248,3 @@ export const GridLayout = () => {
 const Cell = ({ className, label }: { className?: string; label: string }) => (
   <div className={mx('flex items-center justify-center border', className)}>{label}</div>
 );
-
-const useTestSheet = () => {
-  const { graphs, setGraph } = useContext(ComputeGraphContext);
-  const [sheet, setSheet] = useState<EchoReactiveObject<SheetType>>();
-  useEffect(() => {
-    const t = setTimeout(async () => {
-      const client = new Client();
-      await client.initialize();
-      await client.halo.createIdentity();
-      const space = await client.spaces.create();
-      client.addTypes([SheetType]);
-
-      const graph = graphs[space.id] ?? createComputeGraph();
-      if (!graphs[space.id]) {
-        setGraph(space.id, graph);
-      }
-
-      const sheet = await createTestSheet({ graph });
-      space.db.add(sheet);
-      setSheet(sheet);
-    });
-
-    return () => clearTimeout(t);
-  }, []);
-
-  return sheet;
-};

package/src/components/Sheet/Sheet.tsx

@@ -71,7 +71,7 @@ import {
   rangeToA1Notation,
   addressToIndex,
   addressFromIndex,
-} from '../../model';
+} from '../../defs';
 import {
   CellEditor,
   type CellRangeNotifier,
@@ -138,7 +138,7 @@ const SheetRoot = ({ children, ...props }: PropsWithChildren<SheetContextProps>)
 
 type SheetMainProps = ThemedClassName<Partial<GridSize>>;
 
-const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numRows, numColumns }, forwardRef) => {
+const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numRows, numCols }, forwardRef) => {
   const { model, cursor, setCursor, setRange, setEditing } = useSheetContext();
 
   // Scrolling.
@@ -263,8 +263,8 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
         ref={columnsRef}
         columns={columns}
         sizes={columnSizes}
-        selected={cursor?.column}
-        onSelect={(column) => setCursor(cursor?.column === column ? undefined : { row: -1, column })}
+        selected={cursor?.col}
+        onSelect={(col) => setCursor(cursor?.col === col ? undefined : { row: -1, col })}
         onResize={handleResizeColumn}
         onMove={handleMoveColumns}
       />
@@ -274,13 +274,13 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
         rows={rows}
         sizes={rowSizes}
         selected={cursor?.row}
-        onSelect={(row) => setCursor(cursor?.row === row ? undefined : { row, column: -1 })}
+        onSelect={(row) => setCursor(cursor?.row === row ? undefined : { row, col: -1 })}
         onResize={handleResizeRow}
         onMove={handleMoveRows}
       />
       <SheetGrid
         ref={contentRef}
-        size={{ numRows: numRows ?? rows.length, numColumns: numColumns ?? columns.length }}
+        size={{ numRows: numRows ?? rows.length, numCols: numCols ?? columns.length }}
         rows={rows}
         columns={columns}
         rowSizes={rowSizes}
@@ -885,9 +885,9 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
 
             {/* Grid cells. */}
             {rowRange.map(({ row, top, height }) => {
-              return columnRange.map(({ column, left, width }) => {
+              return columnRange.map(({ col, left, width }) => {
                 const style: CSSProperties = { position: 'absolute', top, left, width, height };
-                const cell = { row, column };
+                const cell: CellAddress = { row, col };
                 const id = addressToA1Notation(cell);
                 const idx = addressToIndex(model.sheet, cell);
                 const active = posEquals(cursor, cell);
@@ -1082,10 +1082,11 @@ const GridCellEditor = ({ style, value, onNav, onClose }: GridCellEditorProps) =
       notifier.current?.(rangeToA1Notation(range));
     }
   }, [range]);
+
   const extension = useMemo(
     () => [
       editorKeys({ onNav, onClose }),
-      sheetExtension({ functions: model.functions }),
+      sheetExtension({ functions: model.graph.getFunctions() }),
       rangeExtension((fn) => (notifier.current = fn)),
     ],
     [model],
@@ -1109,12 +1110,13 @@ const GridCellEditor = ({ style, value, onNav, onClose }: GridCellEditorProps) =
 
 const SheetStatusBar = () => {
   const { model, cursor, range } = useSheetContext();
+
   let value;
   let isFormula = false;
   if (cursor) {
     value = model.getCellValue(cursor);
     if (typeof value === 'string' && value.charAt(0) === '=') {
-      value = model.mapFormulaBindingFromId(model.mapFormulaIndicesToRefs(value));
+      value = model.graph.mapFunctionBindingFromId(model.mapFormulaIndicesToRefs(value));
       isFormula = true;
     } else if (value != null) {
       value = String(value);

package/src/components/Sheet/grid.ts

@@ -4,7 +4,7 @@
 
 import { type MouseEvent, useEffect, useState } from 'react';
 
-import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Notation } from '../../model';
+import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Notation } from '../../defs';
 
 // export type Bounds = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
 // export type Dimension = Pick<DOMRect, 'width' | 'height'>;
@@ -12,7 +12,7 @@ import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Not
 export type SizeMap = Record<string, number>;
 
 export type RowPosition = { row: number } & Pick<DOMRect, 'top' | 'height'>;
-export type ColumnPosition = { column: number } & Pick<DOMRect, 'left' | 'width'>;
+export type ColumnPosition = { col: number } & Pick<DOMRect, 'left' | 'width'>;
 
 export const axisWidth = 'calc(var(--rail-size)-2px)';
 export const axisHeight = 34;
@@ -88,7 +88,7 @@ export const useGridLayout = ({
         const width = columnSizes?.[idx] ?? defaultWidth;
         const left = x;
         x += width - 1;
-        return { column: i, left, width };
+        return { col: i, left, width };
       }),
     );
   }, [columns, columnSizes]);

package/src/components/Sheet/nav.ts

@@ -5,11 +5,11 @@
 import { type KeyboardEvent, type MouseEventHandler, useState } from 'react';
 
 import { getCellAtPointer } from './grid';
-import { type CellAddress, type CellRange, posEquals } from '../../model';
+import { type CellAddress, type CellRange, posEquals } from '../../defs';
 
 export type GridSize = {
   numRows: number;
-  numColumns: number;
+  numCols: number;
 };
 
 /**
@@ -38,14 +38,14 @@ export const handleNav = (
         break;
       }
       case 'ArrowLeft': {
-        if (opposite.column > 0) {
-          opposite.column -= 1;
+        if (opposite.col > 0) {
+          opposite.col -= 1;
         }
         break;
       }
       case 'ArrowRight': {
-        if (opposite.column < size.numColumns - 1) {
-          opposite.column += 1;
+        if (opposite.col < size.numCols - 1) {
+          opposite.col += 1;
         }
         break;
       }
@@ -64,41 +64,41 @@ export const handleNav = (
 export const handleArrowNav = (
   ev: Pick<KeyboardEvent<HTMLInputElement>, 'key' | 'metaKey'>,
   cursor: CellAddress | undefined,
-  { numRows, numColumns }: GridSize,
+  { numRows, numCols }: GridSize,
 ): CellAddress | undefined => {
   switch (ev.key) {
     case 'ArrowUp':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
+        return { row: 0, col: 0 };
       } else if (cursor.row > 0) {
-        return { row: ev.metaKey ? 0 : cursor.row - 1, column: cursor.column };
+        return { row: ev.metaKey ? 0 : cursor.row - 1, col: cursor.col };
       }
       break;
     case 'ArrowDown':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
+        return { row: 0, col: 0 };
       } else if (cursor.row < numRows - 1) {
-        return { row: ev.metaKey ? numRows - 1 : cursor.row + 1, column: cursor.column };
+        return { row: ev.metaKey ? numRows - 1 : cursor.row + 1, col: cursor.col };
       }
       break;
     case 'ArrowLeft':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
-      } else if (cursor.column > 0) {
-        return { row: cursor.row, column: ev.metaKey ? 0 : cursor.column - 1 };
+        return { row: 0, col: 0 };
+      } else if (cursor.col > 0) {
+        return { row: cursor.row, col: ev.metaKey ? 0 : cursor.col - 1 };
       }
       break;
     case 'ArrowRight':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
-      } else if (cursor.column < numColumns - 1) {
-        return { row: cursor.row, column: ev.metaKey ? numColumns - 1 : cursor.column + 1 };
+        return { row: 0, col: 0 };
+      } else if (cursor.col < numCols - 1) {
+        return { row: cursor.row, col: ev.metaKey ? numCols - 1 : cursor.col + 1 };
       }
       break;
     case 'Home':
-      return { row: 0, column: 0 };
+      return { row: 0, col: 0 };
     case 'End':
-      return { row: numRows - 1, column: numColumns - 1 };
+      return { row: numRows - 1, col: numCols - 1 };
   }
 };