@dxos/plugin-sheet 0.6.14-main.7bd9c89 → 0.6.14-staging.3e2eaca

package/src/defs/types.ts

@@ -13,11 +13,16 @@ export const MAX_COLUMNS = 26 * 2;
 export type CellAddress = { col: number; row: number };
 
 export type CellRange = { from: CellAddress; to?: CellAddress };
+export type CompleteCellRange = { from: CellAddress; to: CellAddress };
 
 export type CellIndex = string;
 
 export type CellContentValue = number | string | boolean | null;
 
+export const RANGE_NOTATION = /^[A-Z]+[0-9]+(:[A-Z]+[0-9]+)?$/;
+
+export const isFormula = (value: any): value is string => typeof value === 'string' && value.charAt(0) === '=';
+
 export const posEquals = (a: CellAddress | undefined, b: CellAddress | undefined) => {
   return a?.col === b?.col && a?.row === b?.row;
 };
@@ -34,7 +39,7 @@ export const addressToA1Notation = ({ col, row }: CellAddress): string => {
   return `${columnLetter(col)}${row + 1}`;
 };
 
-// TODO(burdon): See simpleCellAddressFromString
+// TODO(burdon): See (HF) simpleCellAddressFromString.
 export const addressFromA1Notation = (ref: string): CellAddress => {
   const match = ref.match(/([A-Z]+)(\d+)/);
   invariant(match, `Invalid notation: ${ref}`);

package/src/defs/util.ts

@@ -9,6 +9,7 @@ import {
   addressFromA1Notation,
   type CellAddress,
   type CellRange,
+  type CompleteCellRange,
   DEFAULT_COLUMNS,
   DEFAULT_ROWS,
   MAX_COLUMNS,
@@ -46,6 +47,7 @@ export const insertIndices = (indices: string[], i: number, n: number, max: numb
 
   const idx = createIndices(n);
   indices.splice(i, 0, ...idx);
+  return idx;
 };
 
 export const initialize = (
@@ -69,6 +71,7 @@ export const createSheet = ({ name, cells, ...size }: CreateSheetOptions = {}):
     rowMeta: {},
     columnMeta: {},
     ranges: [],
+    threads: [],
   });
 
   initialize(sheet, size);
@@ -111,29 +114,11 @@ export const rangeToIndex = (sheet: SheetType, range: CellRange): string => {
 /**
  * E.g., "CA2@CB3:CC4@CD5" => "A1:B2".
  */
-export const rangeFromIndex = (sheet: SheetType, idx: string): CellRange => {
+export const rangeFromIndex = (sheet: SheetType, idx: string): CompleteCellRange => {
   const [from, to] = idx.split(':').map((index) => addressFromIndex(sheet, index));
   return { from, to };
 };
 
-/**
- * Find closest cell to cursor.
- */
-export const closest = (cursor: CellAddress, cells: CellAddress[]): CellAddress | undefined => {
-  let closestCell: CellAddress | undefined;
-  let closestDistance = Number.MAX_SAFE_INTEGER;
-
-  for (const cell of cells) {
-    const distance = Math.abs(cell.row - cursor.row) + Math.abs(cell.col - cursor.col);
-    if (distance < closestDistance) {
-      closestCell = cell;
-      closestDistance = distance;
-    }
-  }
-
-  return closestCell;
-};
-
 /**
  * Compares the positions of two cell indexes in a sheet.
  * Sorts primarily by row, then by column if rows are equal.

package/src/extensions/compute.stories.tsx

@@ -23,8 +23,8 @@ import { withTheme, withLayout } from '@dxos/storybook-utils';
 import { nonNullable } from '@dxos/util';
 
 import { compute, computeGraphFacet } from './compute';
-import { GridSheet, SheetProvider } from '../components';
-import { useComputeGraph, useSheetModel } from '../hooks';
+import { GridSheet, SheetProvider, useComputeGraph } from '../components';
+import { useSheetModel } from '../model';
 import { useTestSheet, withComputeGraphDecorator } from '../testing';
 import { SheetType } from '../types';
 

package/src/extensions/compute.ts

@@ -16,10 +16,10 @@ import { Decoration, EditorView, ViewPlugin, WidgetType } from '@codemirror/view
 
 import { type UnsubscribeCallback, debounce } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
-import { documentId, singleValueFacet } from '@dxos/react-ui-editor/state';
+import { documentId, singleValueFacet } from '@dxos/react-ui-editor';
 
+import { type ComputeGraph, type ComputeNode, createSheetName } from '../compute-graph';
 import { type CellAddress } from '../defs';
-import { type ComputeGraph, type ComputeNode, createSheetName } from '../graph';
 import { type CellScalarValue } from '../types';
 
 const LANGUAGE_TAG = 'dx';

package/src/extensions/editor/extension.test.ts

@@ -9,7 +9,7 @@ import { spreadsheet } from 'codemirror-lang-spreadsheet';
 import { describe, expect, test } from 'vitest';
 
 import { sheetExtension } from './extension';
-import { defaultFunctions } from '../../graph';
+import { defaultFunctions } from '../../compute-graph';
 
 describe('formula parser', () => {
   const {

package/src/extensions/editor/extension.ts

@@ -18,10 +18,11 @@ import { type SyntaxNode } from '@lezer/common';
 import { tags } from '@lezer/highlight';
 import { spreadsheet } from 'codemirror-lang-spreadsheet';
 
-import { singleValueFacet } from '@dxos/react-ui-editor/state';
+import { singleValueFacet } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type FunctionDefinition } from '../../graph';
+import { type FunctionDefinition } from '../../compute-graph';
+import { RANGE_NOTATION } from '../../defs';
 
 /**
  * https://codemirror.net/examples/styling
@@ -195,34 +196,53 @@ export const sheetExtension = ({ functions = [] }: SheetExtensionOptions): Exten
   ];
 };
 
-export type CellRangeNotifier = (range: string) => void;
-
-type Range = { from: number; to: number };
+export type SelectionRange = { from: number; to: number };
+
+export interface RangeController {
+  setRange(range: string): void;
+}
+
+export type RangeExtensionOptions = {
+  /**
+   * Provides controller callback when extension is initialized.
+   */
+  onInit?: (controller: RangeController) => void;
+  /**
+   * Called when the active range changes.
+   * @param state The current state.
+   * @param state.activeRange undefined if no range is active, otherwise a possibly partially defined range.
+   */
+  onStateChange?: (state: { activeRange: string | undefined }) => void;
+};
 
 /**
  * Tracks the currently active cell within a formula and provides a callback to modify it.
  */
-export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): Extension => {
+export const rangeExtension = ({ onInit, onStateChange }: RangeExtensionOptions): Extension => {
   let view: EditorView;
-  let activeRange: Range | undefined;
-  const provider: CellRangeNotifier = (range: string) => {
-    if (activeRange) {
-      view.dispatch(
-        view.state.update({
-          changes: { ...activeRange, insert: range.toString() },
-          selection: { anchor: activeRange.from + range.length },
-        }),
-      );
-    }
+  let activeRange: SelectionRange | undefined;
 
-    view.focus();
+  // Called externally to provide current range.
+  const notifier: RangeController = {
+    setRange: (range: string) => {
+      if (activeRange) {
+        view.dispatch(
+          view.state.update({
+            changes: { ...activeRange, insert: range.toString() },
+            selection: { anchor: activeRange.from + range.length },
+          }),
+        );
+      }
+
+      view.focus();
+    },
   };
 
   return ViewPlugin.fromClass(
     class {
       constructor(_view: EditorView) {
         view = _view;
-        onInit(provider);
+        onInit?.(notifier);
       }
 
       update(view: ViewUpdate) {
@@ -235,17 +255,15 @@ export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): E
         visitTree(topNode, ({ type, from, to }) => {
           if (from <= anchor && to >= anchor) {
             switch (type.name) {
-              case 'Function': {
+              case 'Function':
                 // Mark but keep looking.
                 activeRange = { from: to, to };
                 break;
-              }
 
-              case 'CloseParen': {
+              case 'CloseParen':
                 // Mark but keep looking.
                 activeRange = { from, to: from };
                 break;
-              }
 
               case 'RangeToken':
               case 'CellToken':
@@ -259,8 +277,15 @@ export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): E
 
         // Allow start of formula.
         if (!activeRange && view.state.doc.toString()[0] === '=') {
-          activeRange = { from: 1, to: view.state.doc.toString().length };
+          const str = view.state.doc.sliceString(1);
+          if (RANGE_NOTATION.test(str)) {
+            activeRange = { from: 1, to: str.length + 1 };
+          }
         }
+
+        onStateChange?.({
+          activeRange: activeRange ? view.state.doc.sliceString(activeRange.from, activeRange.to) : undefined,
+        });
       }
     },
   );

package/src/index.ts

@@ -4,6 +4,6 @@
 
 import { SheetPlugin } from './SheetPlugin';
 
-export default SheetPlugin;
-
 export * from './SheetPlugin';
+
+export default SheetPlugin;

package/src/integrations/index.ts

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

package/src/integrations/thread-ranges.ts

@@ -0,0 +1,101 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useCallback, useEffect, useMemo } from 'react';
+
+import { type IntentResolver, LayoutAction, useIntentDispatcher, useIntentResolver } from '@dxos/app-framework';
+import { debounce } from '@dxos/async';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { type DxGridElement, type DxGridPosition } from '@dxos/react-ui-grid';
+
+import { useSheetContext } from '../components';
+import { type CellAddress, type CompleteCellRange, inRange } from '../defs';
+import { SHEET_PLUGIN } from '../meta';
+
+export const completeCellRangeToThreadCursor = (range: CompleteCellRange): string => {
+  return `${range.from.col},${range.from.row},${range.to.col},${range.to.row}`;
+};
+
+export const parseThreadAnchorAsCellRange = (cursor: string): CompleteCellRange | null => {
+  const coords = cursor.split(',');
+  if (coords.length !== 4) {
+    return null;
+  } else {
+    const [fromCol, fromRow, toCol, toRow] = coords;
+    return {
+      from: { col: parseInt(fromCol), row: parseInt(fromRow) },
+      to: { col: parseInt(toCol), row: parseInt(toRow) },
+    };
+  }
+};
+
+export const useUpdateFocusedCellOnThreadSelection = (grid: DxGridElement | null) => {
+  const { model, setActiveRefs } = useSheetContext();
+  const handleScrollIntoView: IntentResolver = useCallback(
+    ({ action, data }) => {
+      switch (action) {
+        case LayoutAction.SCROLL_INTO_VIEW: {
+          if (!data?.id || data?.cursor === undefined || data?.id !== fullyQualifiedId(model.sheet)) {
+            return;
+          }
+          setActiveRefs(data.thread);
+          // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
+          const range = parseThreadAnchorAsCellRange(data.cursor);
+          range && grid?.setFocus({ ...range.to, plane: 'grid' }, true);
+        }
+      }
+    },
+    [model.sheet, setActiveRefs],
+  );
+
+  useIntentResolver(SHEET_PLUGIN, handleScrollIntoView);
+};
+
+export const useSelectThreadOnCellFocus = () => {
+  const { model, cursor } = useSheetContext();
+  const dispatch = useIntentDispatcher();
+
+  const threads = useMemo(
+    () => model.sheet.threads?.filter((thread): thread is NonNullable<typeof thread> => !!thread) ?? [],
+    [
+      // TODO(thure): Surely we can find a better dependency for this…
+      JSON.stringify(model.sheet.threads),
+    ],
+  );
+
+  const selectClosestThread = useCallback(
+    (cellAddress: CellAddress) => {
+      if (!cellAddress || !threads) {
+        return;
+      }
+
+      const closestThread = threads?.find(({ anchor }) => {
+        if (anchor) {
+          const range = parseThreadAnchorAsCellRange(anchor);
+          return range ? inRange(range, cellAddress) : false;
+        } else {
+          return false;
+        }
+      });
+
+      if (closestThread) {
+        void dispatch([
+          { action: 'dxos.org/plugin/thread/action/select', data: { current: fullyQualifiedId(closestThread) } },
+        ]);
+      }
+    },
+    [dispatch, threads],
+  );
+
+  const debounced = useMemo(() => {
+    return debounce((cellCoords: DxGridPosition) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
+  }, [selectClosestThread]);
+
+  useEffect(() => {
+    if (!cursor) {
+      return;
+    }
+    debounced(cursor);
+  }, [cursor, debounced]);
+};

package/src/meta.ts

@@ -11,4 +11,5 @@ export default {
   name: 'Sheet',
   description: 'A simple spreadsheet plugin.',
   icon: 'ph--grid-nine--regular',
+  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-sheet',
 } satisfies PluginMeta;

package/src/model/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './decorations';
 export * from './sheet-model';
+export * from './useSheetModel';

package/src/model/sheet-model.test.ts

@@ -2,14 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
+import { afterEach, beforeEach, describe, expect, onTestFinished, test } from 'vitest';
 
 import { Trigger } from '@dxos/async';
 import { FunctionType } from '@dxos/plugin-script/types';
 
 import { SheetModel } from './sheet-model';
+import { TestBuilder, testFunctionPlugins } from '../compute-graph/testing';
 import { addressFromA1Notation, createSheet } from '../defs';
-import { TestBuilder, testFunctionPlugins } from '../graph/testing';
 import { type CellScalarValue } from '../types';
 
 describe('SheetModel', () => {
@@ -36,13 +36,15 @@ describe('SheetModel', () => {
     // Trigger waits for function invocation.
     const trigger = new Trigger<CellScalarValue>();
     model.setValue(addressFromA1Notation('A1'), '=TEST(100)');
-    model.update.once((update) => {
+    // TODO(wittjosiah): Currently this fires twice, once for the binding loading & once for the function invocation.
+    const unsubscribe = model.update.on((update) => {
       const { type } = update;
       if (type === 'valuesUpdated') {
         const value = model.getValue(addressFromA1Notation('A1'));
-        trigger.wake(value);
+        value && trigger.wake(value);
       }
     });
+    onTestFinished(() => unsubscribe());
 
     // Initial value will be null.
     const v1 = model.getValue(addressFromA1Notation('A1'));

package/src/model/sheet-model.ts

@@ -8,34 +8,41 @@ import { type SimpleDate, type SimpleDateTime } from 'hyperformula/typings/DateT
 
 import { Event } from '@dxos/async';
 import { Resource } from '@dxos/context';
-import { getTypename } from '@dxos/echo-schema';
+import { getTypename, FormatEnum, TypeEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { FieldValueType } from '@dxos/schema';
 
 import { DetailedCellError, ExportedCellChange } from '#hyperformula';
+import { type ComputeGraph, type ComputeNode, type ComputeNodeEvent, createSheetName } from '../compute-graph';
 import {
   addressFromA1Notation,
+  addressFromIndex,
   addressToA1Notation,
+  addressToIndex,
+  initialize,
+  insertIndices,
+  isFormula,
   type CellAddress,
   type CellRange,
+  ReadonlyException,
   MAX_COLUMNS,
   MAX_ROWS,
 } from '../defs';
-import { addressFromIndex, addressToIndex, initialize, insertIndices, ReadonlyException } from '../defs';
-import { type ComputeNode, type ComputeGraph, createSheetName, type ComputeNodeEvent } from '../graph';
-import { type CellScalarValue, type CellValue, type SheetType } from '../types';
+import { type CellScalarValue, type CellValue, type SheetType, type RestoreAxis } from '../types';
 
 // Map sheet types to system types.
-const typeMap: Record<string, FieldValueType> = {
-  BOOLEAN: FieldValueType.Boolean,
-  NUMBER_RAW: FieldValueType.Number,
-  NUMBER_PERCENT: FieldValueType.Percent,
-  NUMBER_CURRENCY: FieldValueType.Currency,
-  NUMBER_DATETIME: FieldValueType.DateTime,
-  NUMBER_DATE: FieldValueType.Date,
-  NUMBER_TIME: FieldValueType.Time,
+// https://hyperformula.handsontable.com/guide/types-of-values.html
+//  - https://github.com/handsontable/hyperformula/blob/master/src/Cell.ts (CellValueType)
+//  - https://github.com/handsontable/hyperformula/blob/master/src/interpreter/InterpreterValue.ts (NumberType)
+const typeMap: Record<string, { type: TypeEnum; format?: FormatEnum }> = {
+  BOOLEAN: { type: TypeEnum.Boolean },
+  NUMBER_RAW: { type: TypeEnum.Number },
+  NUMBER_PERCENT: { type: TypeEnum.Number, format: FormatEnum.Percent },
+  NUMBER_CURRENCY: { type: TypeEnum.Number, format: FormatEnum.Currency },
+  NUMBER_DATETIME: { type: TypeEnum.String, format: FormatEnum.DateTime },
+  NUMBER_DATE: { type: TypeEnum.String, format: FormatEnum.Date },
+  NUMBER_TIME: { type: TypeEnum.String, format: FormatEnum.Time },
 };
 
 const getTopLeft = (range: CellRange): CellAddress => {
@@ -106,6 +113,12 @@ export class SheetModel extends Resource {
     log('initialize', { id: this.id });
     initialize(this._sheet);
 
+    this._graph.update.on((event) => {
+      if (event.type === 'functionsUpdated') {
+        this.reset();
+      }
+    });
+
     // TODO(burdon): SheetModel should extend ComputeNode and be constructed via the graph.
     this._node = this._graph.getOrCreateNode(createSheetName({ type: getTypename(this._sheet)!, id: this._sheet.id }));
     await this._node.open();
@@ -128,10 +141,15 @@ export class SheetModel extends Resource {
     Object.entries(this._sheet.cells).forEach(([key, { value }]) => {
       invariant(this._node);
       const { col, row } = addressFromIndex(this._sheet, key);
-      if (typeof value === 'string' && value.charAt(0) === '=') {
-        value = this._graph.mapFormulaToNative(
-          this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value)),
-        );
+      if (isFormula(value)) {
+        const binding = this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value));
+        if (binding) {
+          value = this._graph.mapFormulaToNative(binding);
+        } else {
+          // If binding is not found, render the cell as empty.
+          // This prevents the cell from momentarily rendering an error while the binding is being loaded.
+          value = '';
+        }
       }
 
       this._node.graph.hf.setCellContents({ sheet: this._node.sheetId, row, col }, value);
@@ -150,12 +168,68 @@ export class SheetModel extends Resource {
   }
 
   insertRows(i: number, n = 1) {
-    insertIndices(this._sheet.rows, i, n, MAX_ROWS);
+    const idx = insertIndices(this._sheet.rows, i, n, MAX_ROWS);
     this.reset();
+    return idx;
   }
 
   insertColumns(i: number, n = 1) {
-    insertIndices(this._sheet.columns, i, n, MAX_COLUMNS);
+    const idx = insertIndices(this._sheet.columns, i, n, MAX_COLUMNS);
+    this.reset();
+    return idx;
+  }
+
+  dropRow(rowIndex: string): RestoreAxis {
+    const range = {
+      from: addressFromIndex(this._sheet, `${this._sheet.columns[0]}@${rowIndex}`),
+      to: addressFromIndex(this._sheet, `${this._sheet.columns[this._sheet.columns.length - 1]}@${rowIndex}`),
+    };
+    const values = this.getCellValues(range).flat();
+    const index = this._sheet.rows.indexOf(rowIndex);
+    this.clear(range);
+    this._sheet.rows.splice(index, 1);
+    delete this._sheet.rowMeta[rowIndex];
+    this.reset();
+    return { axis: 'row', index, axisIndex: rowIndex, axisMeta: this._sheet.rowMeta[rowIndex], values };
+  }
+
+  dropColumn(colIndex: string): RestoreAxis {
+    const range = {
+      from: addressFromIndex(this._sheet, `${colIndex}@${this._sheet.rows[0]}`),
+      to: addressFromIndex(this._sheet, `${colIndex}@${this._sheet.rows[this._sheet.rows.length - 1]}`),
+    };
+    const values = this.getCellValues(range).flat();
+    const index = this._sheet.columns.indexOf(colIndex);
+    this.clear(range);
+    this._sheet.columns.splice(index, 1);
+    delete this._sheet.columnMeta[colIndex];
+    this.reset();
+    return { axis: 'col', index, axisIndex: colIndex, axisMeta: this._sheet.rowMeta[colIndex], values };
+  }
+
+  restoreRow({ index, axisIndex, axisMeta, values }: RestoreAxis) {
+    this._sheet.rows.splice(index, 0, axisIndex);
+    values.forEach((value, col) => {
+      if (value) {
+        this._sheet.cells[`${this._sheet.columns[col]}@${axisIndex}`] = { value };
+      }
+    });
+    if (axisMeta) {
+      this._sheet.rowMeta[axisIndex] = axisMeta;
+    }
+    this.reset();
+  }
+
+  restoreColumn({ index, axisIndex, axisMeta, values }: RestoreAxis) {
+    this._sheet.columns.splice(index, 0, axisIndex);
+    values.forEach((value, row) => {
+      if (value) {
+        this._sheet.cells[`${axisIndex}@${this._sheet.rows[row]}`] = { value };
+      }
+    });
+    if (axisMeta) {
+      this._sheet.columnMeta[axisIndex] = axisMeta;
+    }
     this.reset();
   }
 
@@ -240,7 +314,7 @@ export class SheetModel extends Resource {
       return undefined;
     }
 
-    if (typeof value === 'string' && value.charAt(0) === '=') {
+    if (isFormula(value)) {
       return this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value));
     } else {
       return String(value);
@@ -260,8 +334,11 @@ export class SheetModel extends Resource {
   getValue(cell: CellAddress): CellScalarValue {
     // Applies rounding and post-processing.
     invariant(this._node);
-    const value = this._node.graph.hf.getCellValue(toSimpleCellAddress(this._node.sheetId, cell));
+    const address = toSimpleCellAddress(this._node.sheetId, cell);
+    const value = this._node.graph.hf.getCellValue(address);
     if (value instanceof DetailedCellError) {
+      // TODO(wittjosiah): Error details should be shown in cell `title`.
+      log.info('cell error', { cell, error: value });
       return value.toString();
     }
 
@@ -271,7 +348,7 @@ export class SheetModel extends Resource {
   /**
    * Get value type.
    */
-  getValueType(cell: CellAddress): FieldValueType {
+  getValueDescription(cell: CellAddress): { type: TypeEnum; format?: FormatEnum } | undefined {
     invariant(this._node);
     const addr = toSimpleCellAddress(this._node.sheetId, cell);
     const type = this._node.graph.hf.getCellValueDetailedType(addr);
@@ -305,7 +382,7 @@ export class SheetModel extends Resource {
 
     // Insert into engine.
     this._node.graph.hf.setCellContents({ sheet: this._node.sheetId, row: cell.row, col: cell.col }, [
-      [typeof value === 'string' && value.charAt(0) === '=' ? this._graph.mapFormulaToNative(value) : value],
+      [isFormula(value) ? this._graph.mapFormulaToNative(value) : value],
     ]);
 
     // Insert into sheet.
@@ -313,7 +390,7 @@ export class SheetModel extends Resource {
     if (value === undefined || value === null) {
       delete this._sheet.cells[idx];
     } else {
-      if (typeof value === 'string' && value.charAt(0) === '=') {
+      if (isFormula(value)) {
         value = this._graph.mapFunctionBindingToId(this.mapFormulaRefsToIndices(value));
       }
 
@@ -371,7 +448,7 @@ export class SheetModel extends Resource {
    * Map from A1 notation to indices.
    */
   mapFormulaRefsToIndices(formula: string): string {
-    invariant(formula.charAt(0) === '=');
+    invariant(isFormula(formula));
     return formula.replace(/([a-zA-Z]+)([0-9]+)/g, (match) => {
       return addressToIndex(this._sheet, addressFromA1Notation(match));
     });
@@ -381,7 +458,7 @@ export class SheetModel extends Resource {
    * Map from indices to A1 notation.
    */
   mapFormulaIndicesToRefs(formula: string): string {
-    invariant(formula.charAt(0) === '=');
+    invariant(isFormula(formula));
     return formula.replace(/([a-zA-Z0-9]+)@([a-zA-Z0-9]+)/g, (idx) => {
       return addressToA1Notation(addressFromIndex(this._sheet, idx));
     });

package/src/{hooks → model}/useSheetModel.ts

@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { type ComputeGraph } from '../graph';
+import { type ComputeGraph } from '../compute-graph';
 import { SheetModel } from '../model';
 import { type SheetType } from '../types';
 

package/src/serializer.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type TypedObjectSerializer } from '@dxos/plugin-space/types';
+import { create, getObjectCore } from '@dxos/react-client/echo';
+
+import { SheetType } from './types';
+
+export const serializer: TypedObjectSerializer<SheetType> = {
+  serialize: async ({ object }): Promise<string> => {
+    const { threads: _threads, ...sheet } = object;
+    return JSON.stringify(sheet, null, 2);
+  },
+
+  deserialize: async ({ content, newId }) => {
+    const { id, ...parsed } = JSON.parse(content);
+    const sheet = create(SheetType, parsed);
+
+    if (!newId) {
+      const core = getObjectCore(sheet);
+      core.id = id;
+    }
+
+    return sheet;
+  },
+};